专利文件上传

src/views/technology‌/list/index2.vue

@@ -456,17 +456,34 @@
           <div v-for="group in detailAttachmentGroups" :key="group.type" class="attachment-group">
             <span class="attachment-label">{{ group.label }}</span>
             <div v-if="group.files.length" class="attachment-list">
-              <el-link
+              <div
                 v-for="(file, index) in group.files"
                 :key="file.filePath || index"
-                :href="file.filePath"
-                target="_blank"
-                type="primary"
+                class="attachment-item"
               >
-                <Icon icon="ep:document" class="mr-1" />{{
-                  file.name || file.fileName || file.filePath
-                }}
-              </el-link>
+                <span class="attachment-name" :title="file.name || file.fileName || file.filePath">
+                  <Icon icon="ep:document" class="attachment-file-icon" />
+                  {{ file.name || file.fileName || file.filePath }}
+                </span>
+                <span class="attachment-actions">
+                  <el-button
+                    link
+                    type="primary"
+                    title="预览文件"
+                    @click="viewFileInfo(file.filePath)"
+                  >
+                    <Icon icon="ep:view" />
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    title="下载文件"
+                    @click="downloadFile(file.filePath, file.name || file.fileName)"
+                  >
+                    <Icon icon="ep:download" />
+                  </el-button>
+                </span>
+              </div>
             </div>
             <span v-else class="empty-value">暂无文件</span>
           </div>
@@ -505,6 +522,15 @@ import { defaultProps } from '@/utils/tree'
 import * as DeptApi from '@/api/system/dept'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 
+const Base64 = {
+  encode: (value: string) =>
+    window.btoa(
+      encodeURIComponent(value).replace(/%([0-9A-F]{2})/g, (_, code) =>
+        String.fromCharCode(Number.parseInt(code, 16))
+      )
+    )
+}
+
 defineOptions({ name: 'CoreTechnology' })
 
 const rootDeptId = 156
@@ -717,6 +743,20 @@ const formatProgressDate = (date: string | number) => {
   return new Date(date).toLocaleDateString('zh-CN')
 }
 
+const viewFileInfo = (file: string) => {
+  window.open(
+    'http://doc.deepoil.cc:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(file))
+  )
+}
+
+const downloadFile = (file: string, fileName?: string) => {
+  const link = document.createElement('a')
+  link.href = file
+  link.download = fileName || file.split('/').pop() || '下载文件'
+  link.target = '_blank'
+  link.click()
+}
+
 const closeDialog = () => {
   formRef.value?.resetFields()
 }
@@ -966,9 +1006,51 @@ onMounted(async () => {
 }
 
 .attachment-list {
+  flex: 1;
+  min-width: 0;
   display: flex;
   flex-wrap: wrap;
-  gap: 6px 16px;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.attachment-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+}
+
+.attachment-name {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attachment-file-icon {
+  flex: 0 0 auto;
+  margin-right: 4px;
+}
+
+.attachment-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 2px;
+}
+
+.attachment-actions :deep(.el-button) {
+  width: 26px;
+  height: 26px;
+  margin-left: 0;
+  padding: 0;
 }
 
 .empty-value {