n20-common-lib 3.0.31 → 3.0.32

package/src/components/FileUploadTable/FileUploadTableV3.vue

@@ -1,225 +1,76 @@
 <template>
   <div class="file-upload-table-v3">
-    <!-- <div class="flex-box flex-v flex-lr m-b-s">
-      <div>
-        <slot name="title">附件上传</slot>
-        <span v-if="fileText" v-html="fileText"></span>
-      </div>
-      <div>
-        <slot v-if="!readonly" name="add-btn">
-          <el-button type="primary" size="mini" @click="addRow">{{ '新增' | $lc }}</el-button>
-        </slot>
-        <slot v-if="!readonly && showBatchUpload" name="batch-btn">
-          <el-button size="mini" plain @click="handleBathUpload">{{ '批量上传' | $lc }}</el-button>
-        </slot>
-        <slot v-if="!readonly && showBatchPrint" name="batch-btn">
-          <el-button size="mini" plain @click="batchPrint">{{ '批量打印' | $lc }}</el-button>
-        </slot>
-        <slot name="down-btn">
-          <el-button size="mini" plain @click="downRows">{{ '下载' | $lc }}</el-button>
-        </slot>
-        <slot v-if="!readonly" name="delete-btn">
-          <el-button type="danger" plain size="mini" @click="deleteRows">{{ '删除' | $lc }}</el-button>
-        </slot>
+    <div class="panel">
+      <div class="panel-top">
+        <div class="summary">
+          <i class="v3-icon-link"></i>
+          <span>{{ uploadedCount }} 个附件</span>
+          <el-button type="text" class="summary-action v3-icon-download" @click="downRows">全部下载</el-button>
+        </div>
+        <el-button type="text" class="toggle-btn" @click="toggleCollapse">
+          {{ showAllTypes ? '收起未传类型' : '展开全部' }}
+          <i :class="['el-icon-arrow-down', { 'is-reverse': showAllTypes }]"></i>
+        </el-button>
       </div>
-    </div>
-    <el-table
-      :data="tableData"
-      :row-key="keys.rowKey"
-      :height="height"
-      border
-      @selection-change="(selection) => (selectionList = selection)"
-    >
-      <slot name="selection-column">
-        <el-table-column type="selection" width="50" align="center" />
-      </slot>
-      <template v-if="dataPorp.slotHeader">
-        <el-table-column
-          v-for="item in dataPorp.slotHeader"
-          :key="item.prop"
-          :label="item.label"
-          :prop="item.prop"
-          :align="item.align || 'center'"
-          :width="item.width || 'auto'"
-          :show-overflow-tooltip="item.showOverflowTooltip || item['show-overflow-tooltip']"
-        />
-      </template>
-      <template v-else>
-        <el-table-column :label="'附件类型' | $lc" :prop="keys.type">
-          <slot slot="header" slot-scope="scope" name="type-header" :column="scope.column">{{ '附件类型' | $lc }}</slot>
-          <slot slot-scope="{ row }" name="type" :row="row">
-            <span v-if="readonly">{{ row[keys.type] | typeFiter(typeOptions) }}</span>
-            <div v-else class="flex-box flex-v">
-              <span v-if="requiredTypes.includes(row[keys.type])" style="color: red" class="m-r-s">*</span>
-              <el-select
-                v-model="row[keys.type]"
-                :disabled="row._typeDisabled"
-                :placeholder="'请选择' | $lc"
-                style="width: calc(100% - 16px)"
-                @change="$emit('typeChange', row[keys.type])"
-              >
-                <el-option
-                  v-for="item in typeOptions"
-                  :key="item.type"
-                  :disabled="item.disabled"
-                  :value="item.type"
-                  :label="item.label"
-                />
-              </el-select>
+
+      <div class="type-list">
+        <div v-for="(group, index) in displayTypeGroups" :key="group.typeValue || index" class="type-item">
+          <div class="type-row" :class="[{ 'type-row__is-success': getTypeStatus(group.typeValue) === 'success' }]">
+            <div class="type-meta">
+              <span v-if="isRequiredType(group.item)" class="required">*</span>
+              <span class="type-index">{{ index + 1 }}、</span>
+              <span class="type-name">{{ group.item[typeMap.label] }}</span>
+              <img v-if="getTypeStatus(group.typeValue) === 'success'" src="./ysc.svg" class="status-icon" />
+              <img v-else-if="getTypeStatus(group.typeValue) === 'warning'" src="./jytg.svg" class="status-icon" />
+              <img v-else src="./wsc.svg" class="status-icon" />
             </div>
-          </slot>
-        </el-table-column>
-        <el-table-column :label="'附件名称' | $lc" :prop="keys.name">
-          <slot slot="header" slot-scope="scope" name="name-header" :column="scope.column">{{ '附件名称' | $lc }}</slot>
-          <slot slot-scope="{ row }" name="name" :row="row">
-            <span v-if="readonly">{{ row[keys.name] ? row[keys.name].replace(/\.[A-z0-9]+$/, '') : '' }}</span>
-            <el-input
-              v-else
-              v-title
-              :value="row[keys.name] ? row[keys.name].replace(/\.[A-z0-9]+$/, '') : ''"
-              disabled
-              :placeholder="'请输入' | $lc"
-            />
-          </slot>
-        </el-table-column>
-        <el-table-column v-if="readonly" :label="'附件上传' | $lc" :prop="keys.name">
-          <slot slot="header" slot-scope="scope" name="upload-header" :column="scope.column"
-            >{{ '附件上传' | $lc }}
-          </slot>
-          <slot slot-scope="{ row }" name="upload" :row="row">
-            {{ $options.filters.fileName(row, keys.url) || row[keys.name] }}
-          </slot>
-        </el-table-column>
-        <el-table-column v-if="!readonly" :label="'附件上传' | $lc">
-          <slot slot="header" slot-scope="scope" name="upload-header" :column="scope.column"
-            >{{ '附件上传' | $lc }}
-          </slot>
-          <slot slot-scope="{ row, $index }" name="upload" :row="row" :[indexK]="$index">
+
             <Upload
-              :ref="'upload' + $index"
+              :ref="'upload' + index"
               class="n20-upload-table-up"
-              :file-name="row | fileName(keys.url)"
-              :data="row['_fileData'] || fileData"
+              :file-name="''"
               :msg-type="null"
               :show-clear="false"
               :action="apiPrefix ? apiPrefix + action : action"
               :multiple="multiple"
               :headers="headers"
-              :disabled="!row[keys.type] || row._typeDisabled"
-              :accept="row[keys.type] | acceptFilter(typeOptions, fileAccept)"
-              :size="row[keys.type] | sizeFilter(typeOptions, fileSize)"
-              :http-request="uploadHttpRequest ? (options) => uploadHttpRequest(options, row) : undefined"
-              :before-upload="(file) => beforeUploadFn(file, row)"
-              :on-progress="(event) => onProgressFn(event, row)"
-              :on-success="
-                (response, file, fileList) =>
-                  multiple
-                    ? MultipleSUccessFn(response, file, fileList, row)
-                    : onSuccessFn(response, file, fileList, row)
+              :disabled="readonly || group.item.disabled"
+              :data="buildTypeUploadData(group.item)"
+              :accept="group.item.accept || fileAccept"
+              :size="group.item.size || fileSize"
+              :http-request="
+                uploadHttpRequest ? (options) => uploadHttpRequest(options, buildUploadRow(group.item)) : undefined
               "
-              :on-error="(err, file, fileList) => errorFn(err, file, fileList, row, $index)"
-            />
-          </slot>
-        </el-table-column>
-        <slot name="slotCol"></slot>
-        <el-table-column v-if="!hideTime" :label="'上传时间' | $lc" :prop="keys.time" sortable width="170" align="left">
-          <slot slot="header" slot-scope="scope" name="time-header" :column="scope.column">{{ '上传时间' | $lc }}</slot>
-          <slot slot-scope="{ row }" name="time" :row="row">{{ row[keys.time] }}</slot>
-        </el-table-column>
-        <el-table-column v-if="!hideUser" :label="'上传人' | $lc" :prop="keys.user" width="100">
-          <slot slot="header" slot-scope="scope" name="user-header" :column="scope.column">{{ '上传人' | $lc }}</slot>
-          <slot slot-scope="{ row }" name="user" :row="row">{{ row[keys.user] }}</slot>
-        </el-table-column>
-      </template>
-      <el-table-column v-if="!readonly" :label="'上传进度' | $lc" width="220">
-        <template slot="header" slot-scope="scope">
-          <slot name="percent-header" :column="scope.column">{{ '上传进度' | $lc }}</slot>
-        </template>
-        <template slot-scope="{ row, $index }">
-          <slot name="percent" :row="row" :[indexK]="$index">
-            <div v-if="row['_percent'] >= 0 && !readonly" class="flex-box flex-v">
-              <el-progress
-                class="n20-upload-table-progress"
-                :percentage="row['_percent']"
-                :status="row['_status']"
-                text-color=""
-                style="width: 140px"
-              />
-              <el-button
-                v-if="row['_status'] === 'exception'"
-                type="text"
-                size="mini"
-                style="width: 60px"
-                @click="anewSubmitFn(row, $index)"
-                >{{ '重新上传' | $lc }}
-              </el-button>
-              <el-button
-                v-else-if="row['_percent'] >= 0 && row['_percent'] < 100"
-                type="text"
-                size="mini"
-                style="width: 60px"
-                @click="abortFn(row, $index)"
-                >{{ '取消' | $lc }}
-              </el-button>
+              :before-upload="(file) => beforeUploadFn(file, buildUploadRow(group.item))"
+              :on-progress="(event) => onProgressFn(event, group.typeValue)"
+              :on-success="(response, file, fileList) => onTypeUploadSuccess(response, file, fileList, group.item)"
+              :on-error="(err, file, fileList) => onTypeUploadError(err, file, fileList, group.item, index)"
+            >
+              <el-button slot="trigger" type="text" class="upload-trigger">去上传</el-button>
+            </Upload>
+          </div>
+
+          <div v-if="group.rows.length" class="file-cards">
+            <div v-for="(row, rowIndex) in group.rows" :key="`${group.typeValue}-${rowIndex}`" class="file-card">
+              <div class="file-info">
+                <img v-if="matchFileExtension(row[keys.name], ['word', 'doc', 'docx'])" src="./46.svg" class="m-r-s" />
+                <img v-if="matchFileExtension(row[keys.name], ['xlsx', 'xls'])" src="./60.svg" class="m-r-s" />
+                <img v-if="matchFileExtension(row[keys.name], ['pdf'])" src="./37.svg" class="m-r-s" />
+                <div>
+                  <div class="file-name" :title="row[keys.name]">{{ row[keys.name] }}</div>
+                  <div class="file-meta">
+                    <span class="m-r-m">{{ row[keys.user] || '-' }}</span>
+                    <span>{{ row[keys.time] || '-' }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="file-actions">
+                <el-button type="text" icon="el-icon-view" :disabled="!row[keys.url]" @click="seeFile(row)" />
+                <el-button type="text" icon="v3-icon-download" :disabled="!row[keys.url]" @click="downFile(row)" />
+                <el-button v-if="!readonly" type="text" icon="v3-icon-delete" @click="deleteSingleRow(row)" />
+              </div>
             </div>
-          </slot>
-        </template>
-      </el-table-column>
-      <el-table-column :label="'操作' | $lc" align="center" width="90" fixed="right">
-        <slot slot="header" slot-scope="scope" name="handle-header" :column="scope.column">{{ '操作' | $lc }}</slot>
-        <slot slot-scope="{ row }" name="handle" :row="row">
-          <el-button type="text" icon="el-icon-view" :disabled="!row[keys.url]" @click="seeFile(row)" />
-          <el-button
-            v-if="getOfficeStatus && openAI"
-            v-title="'ai识别'"
-            type="text"
-            icon="n20-icon-query"
-            :disabled="!row[keys.url]"
-            @click="AiFn(row)"
-          />
-          <el-button
-            v-if="readonly"
-            type="text"
-            icon="el-icon-download"
-            :disabled="!row[keys.url]"
-            @click="downFile(row)"
-          />
-        </slot>
-      </el-table-column>
-    </el-table> -->
-    <div class="flex-box flex-v flex-lr">
-      <div class="title">
-        附件上传
-        <span>（带 * 为必要上传的附件）</span>
-      </div>
-    </div>
-    <div class="file-list">
-      <div v-for="(item, index) in typeOptions" :key="index" class="file-item">
-        <div class="type-title">
-          <div class="flex-box flex-v">
-            <span class="m-r-s">*</span>
-            <span>{{ index + 1 }}、</span>
-            <span>{{ item.label }}</span>
-            <img src="./ysc.svg" width="14px" class="m-l-s" />
           </div>
-          <Upload
-            :ref="'upload' + index"
-            class="n20-upload-table-up"
-            :msg-type="null"
-            :show-clear="false"
-            :action="apiPrefix ? apiPrefix + action : action"
-            :multiple="multiple"
-            :headers="headers"
-            :data="fileData"
-            :http-request="uploadHttpRequest ? (options) => uploadHttpRequest(options, row) : undefined"
-            :on-success="
-              (response, file, fileList) =>
-                multiple ? MultipleSUccessFn(response, file, fileList, row) : onSuccessFn(response, file, fileList, row)
-            "
-            :on-error="(err, file, fileList) => errorFn(err, file, fileList, row, $index)"
-          >
-            <el-button slot="trigger" type="text" size="small">去上传</el-button>
-          </Upload>
         </div>
       </div>
     </div>
@@ -254,73 +105,20 @@
             <i class="el-icon-s-release" style="font-size: 60px; color: #999"></i>
             <span style="margin-top: 16px">
               {{ '不支持在线预览，请' | $lc
-              }}<el-link type="primary" class="color-primary" @click="downFile(seeRow)">{{ '下载' | $lc }}</el-link
-              >{{ '到本地查看' | $lc }}
+              }}<el-link type="primary" class="color-primary" @click="downFile(seeRow)">{{ '下载' | $lc }}</el-link>
+              {{ '到本地查看' | $lc }}
             </span>
           </div>
         </component>
       </div>
     </Dialog>
-    <Dialog
-      v-drag
-      :title="'附件批量上传' | $lc"
-      :visible.sync="visibleBatch"
-      top="5vh"
-      width="692px"
-      :close-on-click-modal="false"
-      :destroy-on-open="true"
-    >
-      <el-select v-model="bathType" class="m-b-s" clearable @change="handleBathChange">
-        <el-option
-          v-for="item in typeOptions"
-          :key="item.type"
-          :disabled="item.disabled"
-          :value="item.type"
-          :label="item.label"
-        />
-      </el-select>
-      <Upload
-        v-if="bathType"
-        ref="upload-batch"
-        class="n20-upload-drag"
-        :msg-type="null"
-        :show-clear="false"
-        :drag="true"
-        :auto-upload="false"
-        :multiple="true"
-        :show-file-list="true"
-        :action="apiPrefix ? apiPrefix + action : action"
-        :data="fileData"
-        :headers="headers"
-        :accept="fileAccept"
-        :size="fileSize"
-        :http-request="uploadHttpRequestBath"
-        :before-upload="(file) => batchBeforeUploadFn(file)"
-        :on-remove="batchRemove"
-        :on-success="batchSuccess"
-        :on-error="batchError"
-      >
-        <template slot="trigger">
-          <i class="drag-icon n20-icon-shangchuan"></i>
-          <span class="drag-text">{{ '点击或将文件拖拽到这里上传' | $lc }}</span>
-          <span class="drag-tip">{{ fileAcceptTip }}</span>
-        </template>
-      </Upload>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="batchUploadFn">{{ '确认' | $lc }}</el-button>
-        <el-button plain @click="visibleBatch = false">{{ '取消' | $lc }}</el-button>
-      </div>
-    </Dialog>
   </div>
 </template>
 
 <script>
-import getJsonc from '../../assets/getJsonc.js'
 import _axios from 'axios'
 import dayjs from 'dayjs'
 import XEUtils from 'xe-utils'
-
-import 'viewerjs/dist/viewer.css'
 import auth from '../../utils/auth.js'
 import axios from '../../utils/axios.js'
 import { $lc } from '../../utils/i18n/index'
@@ -328,10 +126,13 @@ import importG from '../../utils/importGlobal.js'
 import Dialog from '../Dialog/index.vue'
 import Upload from '../Upload/index.vue'
 
+import 'viewerjs/dist/viewer.css'
+
 const ViewerImg = async function () {
   let { component } = await importG('v-viewer', () => import(/*webpackChunkName: "v-viewer"*/ 'v-viewer'))
   return component
 }
+
 const keysDefault = {
   rowKey: 'id',
   type: 'type',
@@ -340,11 +141,6 @@ const keysDefault = {
   time: 'time',
   user: 'user'
 }
-const typeOptionsDefault = [
-  { type: '001', label: $lc('信贷合同') },
-  { type: '002', label: $lc('贴现合同') },
-  { type: '003', label: $lc('其他合同') }
-]
 
 export default {
   name: 'FileUploadTableV3',
@@ -353,36 +149,7 @@ export default {
     Dialog,
     ViewerImg
   },
-  filters: {
-    typeFiter(type, typeOptions) {
-      return typeOptions.find((c) => c.type === type)?.label || type
-    },
-    acceptFilter(type, typeOptions, fileAccept) {
-      return typeOptions.find((c) => c.type === type)?.accept || fileAccept
-    },
-    sizeFilter(type, typeOptions, fileSize) {
-      return typeOptions.find((c) => c.type === type)?.size || fileSize
-    },
-    fileName(row, urlK) {
-      if (row['_name']) {
-        return row['_name']
-      } else if (row[urlK]) {
-        let urlArr = row[urlK].split('/')
-        let _n = urlArr[urlArr.length - 1]
-        return _n ? decodeURI(_n) : undefined
-      }
-      return undefined
-    }
-  },
   props: {
-    AIOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    openAI: {
-      type: Boolean,
-      default: false
-    },
     readonly: {
       type: Boolean,
       default: false
@@ -391,10 +158,6 @@ export default {
       type: String,
       default: '/bems/1.0/attach'
     },
-    batchPrintMethod: {
-      type: Function,
-      default: undefined
-    },
     headers: {
       type: Object,
       default: undefined
@@ -411,26 +174,14 @@ export default {
       type: RegExp,
       default: () => /\.(jpg|png|gif|svg|pdf)$/i
     },
-    height: {
-      type: [String, Number],
-      default: '300px'
-    },
     tableData: {
       type: Array,
       default: () => []
     },
-    dataPorp: {
+    dataProp: {
       type: Object,
       default: () => ({})
     },
-    showBatchUpload: {
-      type: Boolean,
-      default: false
-    },
-    showBatchPrint: {
-      type: Boolean,
-      default: false
-    },
     uploadHttpRequest: {
       type: Function,
       default: undefined
@@ -438,21 +189,13 @@ export default {
     getFileMethod: {
       type: Function,
       default: undefined
-    },
-    hideUser: {
-      type: Boolean,
-      default: false
-    },
-    hideTime: {
-      type: Boolean,
-      default: false
     }
   },
   data() {
     this.viewerOptions = {
       debug: true,
       inline: true,
-      scalable: false, // 不显示水平(垂直)翻转
+      scalable: false,
       navbar: false,
       button: false,
       title: true,
@@ -472,247 +215,317 @@ export default {
     }
 
     return {
-      // 是否仅平铺必选附件
-      fileRequired: true,
-      // 必传附件
+      tabs: [
+        { key: 'apply', label: '申请附件' },
+        { key: 'base', label: '基础档案' },
+        { key: 'credit', label: '征信报告' },
+        { key: 'source', label: '原始附件' }
+      ],
+      activeTab: 0,
+      showAllTypes: true,
       requiredTypes: [],
-      fileText: '',
-      bathType: '',
       indexK: '$index',
       imgType: /\.(jpg|png|gif|svg)$/i,
-      selectionList: [],
-      currFileList: [],
       visibleP: false,
       visiblePv: false,
-      visibleBatch: false,
       previewUrl: undefined,
       previewName: undefined,
       previewSameOrg: false,
       seeRow: {},
-      officeStatus: false
+      uploadProgressMap: {}
     }
   },
   computed: {
     fileAccept() {
-      return this.dataPorp.fileAccept || undefined
+      return this.dataProp.fileAccept || undefined
     },
     fileSize() {
-      return this.dataPorp.fileSize || undefined
-    },
-    fileAcceptTip() {
-      return this.dataPorp.fileAcceptTip || $lc('支持扩展名：.rar .zip .doc .docx .pdf .jpg...')
+      return this.dataProp.fileSize || undefined
     },
     fileData() {
-      return this.dataPorp.fileData || undefined
+      return this.dataProp.fileData || undefined
     },
     typeOptions() {
-      return this.dataPorp.typeOptions || typeOptionsDefault
+      return this.dataProp.typeOptions
     },
     keys() {
-      return this.dataPorp.keys || keysDefault
+      return this.dataProp.keys || keysDefault
     },
     multiple() {
-      return this.dataPorp.multiple ?? true
+      return this.dataProp.multiple ?? true
+    },
+    uploadedCount() {
+      return this.tableData.filter((row) => row[this.keys.url] || row._name).length
+    },
+    typeRowsMap() {
+      const map = Object.create(null)
+      const typeKey = this.keys.type
+      const urlKey = this.keys.url
+      ;(this.tableData || []).forEach((row) => {
+        const typeValue = row[typeKey]
+        if (!typeValue || (!row[urlKey] && !row._name)) return
+        if (!map[typeValue]) {
+          map[typeValue] = []
+        }
+        map[typeValue].push(row)
+      })
+      return map
+    },
+    displayTypeOptions() {
+      if (this.showAllTypes) return this.typeOptions
+      return (this.typeOptions || []).filter((item) => {
+        const typeValue = item[this.typeMap.value]
+        return (this.typeRowsMap[typeValue] || []).length > 0
+      })
+    },
+    displayTypeGroups() {
+      return (this.displayTypeOptions || []).map((item) => {
+        const typeValue = item[this.typeMap.value]
+        return {
+          item,
+          typeValue,
+          rows: this.typeRowsMap[typeValue] || []
+        }
+      })
+    },
+    typeMap() {
+      return (
+        this.dataProp.typeMap || {
+          label: 'attname',
+          value: 'attno'
+        }
+      )
     }
   },
   watch: {
-    dataPorp: {
-      handler() {
-        this.requiredTypes = this.dataPorp.typeOptions
-          .filter((item) => {
-            return item.required === 1
-          })
-          .map((item) => {
-            return item.attno
-          })
-        if (this.dataPorp.typeOptions.length === 0) {
-          return false
-        }
-        this.setTableData()
+    dataProp: {
+      /**
+       * 根据附件类型配置初始化必传项。
+       * @param {Object} val 配置对象。
+       * @returns {void}
+       */
+      handler(val) {
+        const options = (val && val.typeOptions) || []
+        this.requiredTypes = options.filter((item) => item.required === 1).map((item) => item.attno || item.type)
       },
       immediate: true,
       deep: true
     }
   },
   mounted() {
-    this.getConfiguration()
+    this.getFileTypes()
   },
   methods: {
-    // ai识别
-    async AiFn(row) {
-      if (!this.AIOptions.bussType) {
-        this.$message.error('请先配置bussType')
-        return false
-      }
-      const { data, code } = await axios.post(
-        this.apiPrefix ? `${this.apiPrefix}neams/eamsbaserecord/aiAttaFile` : `/neams/eamsbaserecord/aiAttaFile`,
-        {
-          beid: row.beid,
-          bussType: this.AIOptions.bussType,
-          extendPrompt: ''
-        }
-      )
-      if (code === 200) {
-        this.$emit('aiFn', data)
+    async getFileTypes() {
+      if (this.dataProp?.bussValues?.length) {
+        const { code, data } = await this.$axios.post(
+          `/neams/eamsattachfile/getByBussValues`,
+          this.dataProp?.bussValues
+        )
+        if (code !== 200) return
+        const { label, value } = this.typeMap
+        this.dataProp.typeOptions = data?.map((item) => {
+          return {
+            ...item,
+            [label]: item.attname,
+            [value]: item.attno
+          }
+        })
       }
     },
-    // 平铺附件
-    setTableData() {
-      if (this.tableData.length === 0 && !this.readonly) {
-        this.dataPorp.typeOptions
-          .filter((item) => {
-            if (this.fileRequired) {
-              return item.required === 1
-            } else {
-              return item.required === 1 || item.required === 0
-            }
-          })
-          .forEach((item) => {
-            let obj
-            obj = {
-              id: 'n' + Math.random(),
-              name: ''
-            }
-            obj[this.keys.type] = item.attno
-            obj[this.keys.time] = ''
-            obj[this.keys.user] = JSON.parse(sessionStorage.getItem('userInfo')).uname
-
-            console.log(obj)
-            this.tableData.push(obj)
-          })
+    /**
+     * 从文件名中提取扩展名并统一为小写。
+     * @param {string} fileName 文件名。
+     * @returns {string} 不含点号的小写扩展名，取不到时返回空字符串。
+     */
+    getFileExtension(fileName) {
+      if (!fileName || typeof fileName !== 'string') return ''
+      const trimmedName = fileName.trim()
+      const lastDotIndex = trimmedName.lastIndexOf('.')
+      if (lastDotIndex < 0 || lastDotIndex === trimmedName.length - 1) return ''
+      return trimmedName.slice(lastDotIndex + 1).toLowerCase()
+    },
+    /**
+     * 判断文件扩展名是否命中指定后缀列表（大小写不敏感）。
+     * @param {string} fileName 文件名。
+     * @param {Array<string>} extList 扩展名白名单（不带点号）。
+     * @returns {boolean} 命中返回 true，否则返回 false。
+     */
+    matchFileExtension(fileName, extList = []) {
+      const extension = this.getFileExtension(fileName)
+      if (!extension || !Array.isArray(extList) || !extList.length) return false
+      return extList.some((ext) => extension === String(ext).toLowerCase())
+    },
+    /**
+     * 判断当前类型是否为必传。
+     * @param {Object} item 类型项。
+     * @returns {boolean} 是否必传。
+     */
+    isRequiredType(item) {
+      return this.requiredTypes.includes(item.attno || item.type)
+    },
+    /**
+     * 获取某附件类型的所有文件行。
+     * @param {string} type 附件类型值。
+     * @returns {Array<Object>} 该类型对应的文件列表。
+     */
+    getRowsByType(type) {
+      return this.typeRowsMap[type] || []
+    },
+    /**
+     * 生成上传时使用的虚拟行对象。
+     * @param {Object} item 附件类型。
+     * @returns {Object} 供上传回调处理的行对象。
+     */
+    buildUploadRow(item) {
+      const row = {
+        [this.keys.type]: item.type || item.attno,
+        [this.keys.user]: JSON.parse(sessionStorage.getItem('userInfo') || '{}').uname || ''
       }
-    },
-    getConfiguration() {
-      getJsonc('portal/server-config.jsonc', null, true)
-        .then(({ loginConf, fileRequired }) => {
-          this.fileText = loginConf?.sLogan?.fileText
-          this.fileRequired = fileRequired ?? true
-        })
-        .catch(() => {
-          this.fileText = ''
-          this.fileRequired = true
-        })
-    },
-    async getOfficeStatus() {
-      const { data } = await axios.get(
-        this.apiPrefix
-          ? `${this.apiPrefix}/neams/eamsBaseFile/getOfficeIsEnable`
-          : `/neams/eamsBaseFile/getOfficeIsEnable`
-      )
-      this.officeStatus = data
-    },
-    handleBathUpload() {
-      this.visibleBatch = true
-    },
-    async batchPrint() {
-      if (!this.selectionList.length) {
-        return this.$message({
-          message: $lc(`请先勾选要打印的数据！`),
-          type: 'warning',
-          showClose: true
-        })
+      return row
+    },
+    /**
+     * 组装当前类型上传参数。
+     * @param {Object} item 附件类型。
+     * @returns {Object|undefined} 上传参数。
+     */
+    buildTypeUploadData(item) {
+      const data = XEUtils.clone(this.fileData || {}, true)
+      if (!data || !data.data) return data
+      try {
+        const dto = JSON.parse(data.data)
+        dto[this.keys.type] = item.type || item.attno
+        data.data = JSON.stringify(dto)
+      } catch (e) {
+        return data
       }
-      if (this.batchPrintMethod) {
-        return this.batchPrintMethod(this.selectionList)
+      return data
+    },
+    /**
+     * 处理上传进度。
+     * @param {Object} event 上传进度事件。
+     * @param {string} type 附件类型。
+     * @returns {void}
+     */
+    onProgressFn(event, type) {
+      const percent = event && event.percent ? Math.round(event.percent) : 0
+      this.$set(this.uploadProgressMap, type, percent <= 99 ? percent : 99)
+    },
+    /**
+     * 上传前拦截，透传外部回调。
+     * @param {File} file 文件对象。
+     * @param {Object} row 虚拟行对象。
+     * @returns {Promise|boolean|undefined} 上传前处理结果。
+     */
+    beforeUploadFn(file, row) {
+      let bu = this.$listeners['before-upload'] || this.$listeners.beforeUpload
+      if (bu) return bu(file, row)
+      return undefined
+    },
+    /**
+     * 类型维度上传成功处理。
+     * @param {Object} response 上传响应。
+     * @param {File} file 上传文件。
+     * @param {Array<Object>} fileList 当前文件列表。
+     * @param {Object} item 类型配置。
+     * @returns {void}
+     */
+    onTypeUploadSuccess(response, file, fileList, item) {
+      const row = {
+        id: 'n' + Math.random(),
+        _name: file.name,
+        [this.keys.rowKey]: response.data,
+        [this.keys.type]: item.type || item.attno,
+        [this.keys.time]: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        [this.keys.user]: JSON.parse(sessionStorage.getItem('userInfo') || '{}').uname || '',
+        [this.keys.url]: response.data,
+        [this.keys.name]: file.name,
+        _percent: response.code >= 900 || response.code === -1 ? 99 : 100,
+        _status: response.code >= 900 || response.code === -1 ? 'error' : 'success',
+        _typeDisabled: true
       }
-      const { code, data } = await axios.post(
-        this.apiPrefix
-          ? this.apiPrefix + `/neams/eamsbaserecord/mergeDownladPdf`
-          : `/neams/eamsbaserecord/mergeDownladPdf`,
-        this.selectionList.map((res) => res.beid) || [],
-        {
-          responseType: 'blob'
-        }
-      )
-      if (code === 200) {
-        let aDom = document.createElement('a')
-        aDom.href = data
-        aDom.download = '批量附件.pdf'
-        aDom.click()
 
+      this.tableData.unshift(row)
+      this.$set(this.uploadProgressMap, item.type || item.attno, 100)
+      this.$emit('on-success', file, row)
+
+      if (this.multiple && fileList && fileList.length > 1) {
         this.$nextTick(() => {
-          aDom = undefined
-          data && URL.revokeObjectURL(data)
+          const uploadRef =
+            this.$refs['upload' + this.typeOptions.findIndex((x) => (x.type || x.attno) === (item.type || item.attno))]
+          if (uploadRef) {
+            uploadRef.fileList = []
+          }
         })
       }
     },
-    batchBeforeUploadFn(file) {
-      let bu = this.$listeners['before-upload'] || this.$listeners['beforeUpload']
-      if (bu) return bu(file)
-    },
-    handleBathChange() {
-      let dto = JSON.parse(this.dataPorp.fileData.data)
-      dto[this.keys.type] = this.bathType
-      this.fileData.data = JSON.stringify(dto)
-    },
-    batchUploadFn() {
-      let $uploadwrap = this.$refs['upload-batch']
-      let fileList = $uploadwrap.fileList
-      if (fileList.length !== 0 && fileList.every((f) => f.status === 'success')) {
-        this.visibleBatch = false
-      }
-      $uploadwrap.submit()
-    },
-    batchSuccess(response, file, fileList) {
-      let row = { ...this.dataPorp.keys }
-      this.tableData.splice(0, 0, row)
-      this.$nextTick(() => {
-        this.onSuccessFn(response, file, fileList, row)
-      })
-
-      if (fileList.every((f) => f.status === 'success')) {
-        this.visibleBatch = false
-      }
-    },
-    batchError(err, file, fileList) {
-      if (!fileList.some((f) => f.uid === file.uid)) {
-        let list = [...fileList]
+    /**
+     * 类型维度上传失败处理。
+     * @param {Error|Object} err 错误对象。
+     * @param {File} file 上传文件。
+     * @param {Array<Object>} fileList 当前文件列表。
+     * @param {Object} item 类型配置。
+     * @param {number} index 当前索引。
+     * @returns {void}
+     */
+    onTypeUploadError(err, file, fileList, item, index) {
+      this.$set(this.uploadProgressMap, item.type || item.attno, 0)
+      const clUpload = this.$refs['upload' + index]
+      if (clUpload) {
         file.status = 'ready'
-        if (err.msg) {
-          file.OrgName || (file.OrgName = file.name)
-          file.name = file.OrgName + ` *(${err.msg})`
-        }
-
-        list.push(file)
-        let $uploadwrap = this.$refs['upload-batch']
-        $uploadwrap.fileList = list
+        clUpload.fileList = [file]
       }
-    },
-    batchRemove(file, fileList) {
-      let list = fileList.filter((f) => f.uid !== file.uid)
-
-      let $uploadwrap = this.$refs['upload-batch']
-      $uploadwrap.fileList = list
-
-      this.$emit('on-remove', file)
-    },
-    addRow() {
-      this.$emit('add-row')
-    },
+      this.$emit('on-error', file, item)
+    },
+    /**
+     * 删除单条附件记录。
+     * @param {Object} row 文件行数据。
+     * @returns {void}
+     */
+    deleteSingleRow(row) {
+      const index = this.tableData.findIndex((item) => item === row)
+      if (index > -1) this.tableData.splice(index, 1)
+      this.$emit('delete-rows', [row])
+    },
+    /**
+     * 切换展开/收起未上传类型。
+     * @returns {void}
+     */
+    toggleCollapse() {
+      this.showAllTypes = !this.showAllTypes
+    },
+    /**
+     * 计算类型状态图标。
+     * @param {string} type 附件类型值。
+     * @returns {string} success/warning/default。
+     */
+    getTypeStatus(type) {
+      const rows = this.getRowsByType(type)
+      if (!rows.length) return 'default'
+      if (rows.some((row) => row._status === 'error' || row._status === 'exception')) return 'warning'
+      return 'success'
+    },
+    /**
+     * 批量下载全部已上传附件。
+     * @returns {void}
+     */
     downRows() {
-      if (!this.selectionList.length) {
+      const list = this.tableData.filter((item) => item[this.keys.url] || item._name)
+      if (!list.length) {
         return this.$message({
-          message: $lc(`请先勾选要下载的数据！`),
+          message: $lc('请先上传要下载的数据！'),
           type: 'warning',
           showClose: true
         })
       }
-      this.$emit(
-        'down-rows',
-        this.selectionList.filter((item) => item[this.keys.url] || item._name)
-      )
-    },
-    deleteRows() {
-      if (!this.selectionList.length) {
-        return this.$message({
-          message: $lc('请先勾选要删除的数据！'),
-          type: 'warning',
-          showClose: true
-        })
-      }
-      this.$emit('delete-rows', this.selectionList)
-    },
-
+      this.$emit('down-rows', list)
+    },
+    /**
+     * 获取附件下载或预览信息。
+     * @param {Object} row 文件行数据。
+     * @param {'preview'} [type] 读取类型。
+     * @returns {Promise<Object>} 文件信息。
+     */
     async getFileInfo(row, type) {
       if (this.getFileMethod) {
         return this.getFileMethod(row, type)
@@ -721,36 +534,39 @@ export default {
       this.seePrefix && (_url = this.seePrefix + _url)
       if (_url) {
         if (type === 'preview') {
-          // 预览
           return {
             url: `/api/onlinePreview?beid=${row[this.keys.rowKey]}`,
             name: row[this.keys.name] + '.html',
             sameOrg: this.seeTypes.test(row[this.keys.name])
           }
-        } else {
-          // 下载
-          let blob = await axios.get(
-            this.apiPrefix
-              ? this.apiPrefix + `/neams/eamsbaserecord/download/${row[this.keys.rowKey]}`
-              : `/neams/eamsbaserecord/download/${row[this.keys.rowKey]}`,
-            null,
-            {
-              responseType: 'blob'
-            }
-          )
-          let name = row[this.keys.name] || blob.name
-          return {
-            url: URL.createObjectURL(blob),
-            name: name,
-            sameOrg: this.seeTypes.test(name)
+        }
+        let blob = await axios.get(
+          this.apiPrefix
+            ? this.apiPrefix + `/neams/eamsbaserecord/download/${row[this.keys.rowKey]}`
+            : `/neams/eamsbaserecord/download/${row[this.keys.rowKey]}`,
+          null,
+          {
+            responseType: 'blob'
           }
+        )
+        let name = row[this.keys.name] || blob.name
+        return {
+          url: URL.createObjectURL(blob),
+          name: name,
+          sameOrg: this.seeTypes.test(name)
         }
-      } else {
-        return {}
       }
+      return {}
     },
+    /**
+     * 下载单个附件。
+     * @param {Object} row 文件行数据。
+     * @returns {Promise<void>} 下载执行结果。
+     */
     async downFile(row) {
-      let { url, name } = await this.getFileInfo(row)
+      let info = await this.getFileInfo(row)
+      let url = info.url
+      let name = info.name
       if (url) {
         let aDom = document.createElement('a')
         aDom.href = url
@@ -763,8 +579,16 @@ export default {
         })
       }
     },
+    /**
+     * 预览单个附件。
+     * @param {Object} row 文件行数据。
+     * @returns {Promise<void>} 预览执行结果。
+     */
     async seeFile(row) {
-      let { url, name, sameOrg } = await this.getFileInfo(row, 'preview')
+      let info = await this.getFileInfo(row, 'preview')
+      let url = info.url
+      let name = info.name
+      let sameOrg = info.sameOrg
       if (url) {
         this.previewSameOrg = sameOrg
         this.previewUrl = url
@@ -776,16 +600,28 @@ export default {
         this.seeRow = row
       }
     },
+    /**
+     * 预览上一条附件。
+     * @returns {void}
+     */
     preSee() {
       let i = this.tableData.findIndex((row) => row === this.seeRow)
       let row = this.tableData[i - 1] || this.tableData[this.tableData.length - 1]
       this.seeFile(row)
     },
+    /**
+     * 预览下一条附件。
+     * @returns {void}
+     */
     nextSee() {
       let i = this.tableData.findIndex((row) => row === this.seeRow)
       let row = this.tableData[i + 1] || this.tableData[0]
       this.seeFile(row)
     },
+    /**
+     * 关闭预览并释放资源。
+     * @returns {void}
+     */
     closeSee() {
       this.previewUrl && URL.revokeObjectURL(this.previewUrl)
       this.previewUrl = undefined
@@ -794,144 +630,211 @@ export default {
         this.visiblePv = false
       }, 300)
     },
+    /**
+     * 兜底上传请求实现（兼容外部不传 uploadHttpRequest）。
+     * @param {Object} opt 上传参数。
+     * @returns {Promise<any>} 上传结果。
+     */
     uploadHttpRequestBath(opt) {
-      console.log(opt)
       if (this.uploadHttpRequest) {
         return this.uploadHttpRequest(opt)
-      } else {
-        let FD = new FormData()
-        FD.append(opt.filename, opt.file)
-
-        let data
-        if (window._fileData) {
-          data = window._fileData
-          delete window._fileData
-        } else {
-          data = opt.data
+      }
+      let FD = new FormData()
+      FD.append(opt.filename, opt.file)
+
+      let data = opt.data
+      if (data) {
+        for (let k in data) {
+          FD.append(k, data[k])
         }
+      }
 
-        if (data) {
-          let dto = JSON.parse(data.data)
-          dto[this.keys.type] = this.bathType
-          data.data = JSON.stringify(dto)
-          for (let k in data) {
-            FD.append(k, data[k])
+      let abort
+      let Pro = axios.post(opt.action + '?r=' + Math.random(), FD, {
+        headers: Object.assign(auth.setHeaders(this.headers), { 'Content-Type': 'multipart/form-data' }),
+        loading: false,
+        timeout: 900000,
+        onUploadProgress: (arg) => {
+          if (opt.onProgress) {
+            arg.percent = arg.progress * 100
+            opt.onProgress(arg)
           }
+        },
+        cancelToken: new _axios.CancelToken((cancel) => {
+          abort = cancel
+        })
+      })
+      Pro.abort = abort
+      return Pro
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-upload-table-v3 {
+  width: 100%;
+
+  background: #fff;
+
+  .panel {
+    padding: 0 16px 16px;
+
+    .panel-top {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      .summary {
+        display: flex;
+        align-items: center;
+        color: #4e5969;
+
+        i {
+          margin-right: 4px;
         }
 
-        let abort
-        let Pro = axios.post(opt.action + '?r=' + Math.random(), FD, {
-          headers: Object.assign(auth.setHeaders(this.headers), { 'Content-Type': 'multipart/form-data' }),
-          loading: false,
-          timeout: 900000,
-          onUploadProgress: (arg) => {
-            if (opt.onProgress) {
-              arg.percent = arg.progress * 100
-              opt.onProgress(arg)
-            }
-          },
-          cancelToken: new _axios.CancelToken((cancel) => {
-            abort = cancel
-          })
-        })
-        Pro.abort = abort
-        return Pro
+        .summary-action {
+          margin-left: 12px;
+          padding: 0;
+        }
       }
-    },
-    beforeUploadFn(file, row) {
-      this.$set(row, '_percent', 0)
-      this.$set(row, '_status', undefined)
 
-      let bu = this.$listeners['before-upload'] || this.$listeners['beforeUpload']
-      if (bu) return bu(file, row)
-    },
-    onProgressFn({ percent }, row) {
-      this.$set(row, '_percent', percent <= 99 ? Math.round(percent) : 99)
-    },
-    onSuccessFn(response, file, fileList, row) {
-      console.log(response, file, fileList)
-      console.log(this.tableData)
-      this.$emit('on-success', file, row)
-      /* this.$set(row, '_typeDisabled', true)
-      this.$set(row, '_name', file.name)
-
-      this.$set(row, [this.keys.rowKey], response.data)
-      this.$set(row, [this.keys.type], row[this.keys.type] || this.bathType)
-      row[this.keys.time] = dayjs().format('YYYY-MM-DD HH:mm:ss')
-      if (response.code >= 900 || response.code === -1) {
-        this.$set(row, '_percent', 99)
-        this.$set(row, '_status', 'error')
-      } else {
-        this.$set(row, '_percent', 100)
-        this.$set(row, '_status', 'success')
+      .toggle-btn {
+        padding: 0;
+
+        i {
+          margin-left: 4px;
+          transition: transform 0.2s;
+        }
+
+        .is-reverse {
+          transform: rotate(180deg);
+        }
       }
-      row[this.keys.url] = response.data
-      row[this.keys.name] = file.name
+    }
+    .type-list {
+      min-height: 200px;
+      max-height: 680px;
+      overflow-y: auto;
+      .type-item {
+        margin-top: 8px;
 
-      this.$emit('on-success', file, row) */
-    },
-    MultipleSUccessFn(response, file, fileList, row) {
-      if (fileList.length > 1) {
-        let deepRow = XEUtils.clone(row, true)
-        this.$nextTick(() => {
-          if (this.tableData.length && !this.tableData[0][this.keys.url]) {
-            this.tableData.shift()
+        .type-row {
+          min-height: 46px;
+          background: #f7f8fa;
+          border-radius: 4px;
+          padding: 0 12px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .type-meta {
+            display: flex;
+            align-items: center;
+            color: #1d2129;
+            font-family: 'PingFang SC';
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 22px;
+
+            .required {
+              color: #f53f3f;
+              margin-right: 2px;
+            }
+
+            .type-index {
+              margin-right: 2px;
+            }
+
+            .status-icon {
+              width: 16px;
+              height: 16px;
+              margin-left: 8px;
+            }
+          }
+
+          .upload-trigger {
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 22px;
+            padding: 0;
+            color: #007aff;
           }
-        })
-        let _percent = 0
-        let _status = undefined
-        if (response.code >= 900 || response.code === -1) {
-          _percent = 99
-          _status = 'error'
-        } else {
-          _percent = 99
-          _status = 'success'
         }
-        setTimeout(() => {
-          this.tableData.splice(0, 0, {
-            _name: file.name,
-            _percent,
-            [this.keys.time]: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-            [this.keys.url]: response.data,
-            [this.keys.name]: file.name,
-            _status,
-            _typeDisabled: true,
-            [this.keys.user]: deepRow[this.keys.user],
-            [this.keys.type]: deepRow[this.keys.type]
-          })
-        }, 100)
-      } else {
-        this.onSuccessFn(response, file, fileList, row)
-      }
-    },
-    errorFn(err, file, fileList, row, $index) {
-      this.$set(row, '_status', 'exception')
+        .type-row__is-success {
+          border-radius: 4px;
+          background-color: #e8fff3;
+        }
 
-      let clUpload = this.$refs['upload' + $index]
-      /* 重置文件状态,并加入文件队列 */
-      file.status = 'ready'
-      clUpload.fileList = [file]
+        .file-cards {
+          margin-top: 8px;
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          gap: 12px;
 
-      this.$emit('on-error', file, row)
-    },
-    abortFn(row, $index) {
-      this.$set(row, '_status', 'exception')
+          .file-card {
+            height: 50px;
+            background: #f7f8fa;
+            border-radius: 2px;
+            padding: 4px 8px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
 
-      let clUpload = this.$refs['upload' + $index]
-      let elUpload = clUpload.$refs['upload']
+            .file-info {
+              flex: 1;
+              display: flex;
+              align-items: center;
+              min-width: 0;
+              cursor: pointer;
 
-      // let uploadFiles = elUpload.uploadFiles
-      // /* 重置文件状态,并加入文件队列 */
-      // let file = uploadFiles[uploadFiles.length - 1]
-      // file.status = 'ready'
-      // clUpload.fileList = [file]
+              .file-name {
+                font-size: 14px;
+                color: #1d2129;
+                font-weight: 500;
+                line-height: 22px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
 
-      elUpload.abort()
-    },
-    anewSubmitFn(row, $index) {
-      this.$set(row, '_status', undefined)
-      this.$refs['upload' + $index]?.$refs['upload']?.submit()
+              .file-meta {
+                margin-top: 2px;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 20px;
+                color: #4e5969;
+              }
+            }
+
+            .file-actions {
+              margin-left: 8px;
+              border-left: 1px solid #e5e6eb;
+              display: flex;
+              align-items: center;
+              .el-button {
+                padding: 0 0 0 12px;
+                color: #4e5969;
+                :hover {
+                  color: #007aff;
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 }
-</script>
+
+.file-upload-table_preview-pn {
+  position: absolute;
+  right: 46px;
+  top: 10px;
+}
+</style>