n20-common-lib 1.3.40 → 1.3.41

package/src/components/FileUploadTable/index.vue

@@ -1,570 +1,570 @@
-<template>
-  <div class="file-upload-table">
-    <!-- 查看附件信息 -->
-    <template v-if="readonly">
-      <div class="p-t-s p-b-s">
-        <div class="flex-box flex-v flex-lr">
-          <div><slot name="title"></slot></div>
-          <slot v-if="tableData.length" name="down-btn">
-            <el-button size="mini" plain @click="downRows">批量下载</el-button>
-          </slot>
-        </div>
-      </div>
-
-      <el-table
-        :data="tableData"
-        :row-key="keys.rowKey"
-        @selection-change="(selection) => (selectionList = selection)"
-      >
-        <slot name="selection-column"
-          ><el-table-column type="selection" width="50" align="center" />
-        </slot>
-        <el-table-column label="附件类型" :prop="keys.type">
-          <template slot="header" slot-scope="scope">
-            <slot name="type-header" :column="scope.column">附件类型</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="type" :row="row">{{
-              row[keys.type] | typeFiter(typeOptions)
-            }}</slot>
-          </template>
-        </el-table-column>
-        <el-table-column label="附件名称" :prop="keys.name">
-          <template slot="header" slot-scope="scope">
-            <slot name="name-header" :column="scope.column">附件名称</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="name" :row="row">{{ row[keys.name] }}</slot>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="上传时间"
-          :prop="keys.time"
-          width="170"
-          align="left"
-        >
-          <template slot="header" slot-scope="scope">
-            <slot name="time-header" :column="scope.column">上传时间</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="time" :row="row">{{ row[keys.time] }}</slot>
-          </template>
-        </el-table-column>
-        <el-table-column label="上传人" :prop="keys.user">
-          <template slot="header" slot-scope="scope">
-            <slot name="user-header" :column="scope.column">上传人</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="user" :row="row">{{ row[keys.user] }}</slot>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="80" fixed="right">
-          <template slot="header" slot-scope="scope">
-            <slot name="handle-header" :column="scope.column">操作</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="handle" :row="row">
-              <el-button
-                type="text"
-                icon="el-icon-view"
-                @click="seeFile(row)"
-              />
-              <el-button
-                type="text"
-                icon="el-icon-download"
-                :disabled="!row[keys.url]"
-                @click="downFile(row)"
-              />
-            </slot>
-          </template>
-        </el-table-column>
-      </el-table>
-    </template>
-    <!-- 上传附件 -->
-    <template v-else>
-      <div class="p-t-s p-b-s">
-        <div class="flex-box flex-v flex-lr">
-          <div><slot name="title"></slot></div>
-          <div>
-            <slot name="add-btn">
-              <el-button type="primary" size="mini" @click="addRow"
-                >新增</el-button
-              >
-            </slot>
-            <slot v-if="showBatchUpload" name="batch-btn">
-              <el-button size="mini" plain @click="visibleBatch = true"
-                >批量上传</el-button
-              >
-            </slot>
-            <slot v-if="tableData.length" name="down-btn">
-              <el-button size="mini" plain @click="downRows">下载</el-button>
-            </slot>
-            <slot v-if="tableData.length" name="delete-btn">
-              <el-button type="danger" plain size="mini" @click="deleteRows"
-                >删除</el-button
-              >
-            </slot>
-          </div>
-        </div>
-      </div>
-
-      <el-table
-        :data="tableData"
-        :row-key="keys.rowKey"
-        @selection-change="(selection) => (selectionList = selection)"
-      >
-        <slot name="selection-column"
-          ><el-table-column type="selection" width="50" align="center" />
-        </slot>
-        <el-table-column label="附件类型" min-width="160">
-          <template slot="header" slot-scope="scope">
-            <slot name="type-header" :column="scope.column">附件类型</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="type" :row="row">
-              <el-select
-                v-model="row[keys.type]"
-                :disabled="row['_typeDisabled']"
-                placeholder="请选择"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in typeOptions"
-                  :key="item.type"
-                  :disabled="item.disabled"
-                  :value="item.type"
-                  :label="item.label"
-                />
-              </el-select>
-            </slot>
-          </template>
-        </el-table-column>
-        <el-table-column label="附件名称" min-width="160">
-          <template slot="header" slot-scope="scope">
-            <slot name="name-header" :column="scope.column">附件名称</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="name" :row="row">
-              <el-input v-model="row[keys.name]" placeholder="请输入" />
-            </slot>
-          </template>
-        </el-table-column>
-        <el-table-column label="附件上传" min-width="160">
-          <template slot="header" slot-scope="scope">
-            <slot name="upload-header" :column="scope.column">附件上传</slot>
-          </template>
-          <template slot-scope="{ row, $index }">
-            <slot name="upload" :row="row" :$index="$index">
-              <clUpload
-                :ref="'upload' + $index"
-                class="n20-upload-table-up"
-                :file-name="row['_name'] || row[keys.name]"
-                :data="row['_fileData']"
-                :msg-type="null"
-                :show-clear="false"
-                :action="action"
-                :headers="headers"
-                :disabled="!row[keys.type]"
-                :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) =>
-                    onSuccessFn(response, file, fileList, row)
-                "
-                :on-error="
-                  (err, file, fileList) =>
-                    errorFn(err, file, fileList, row, $index)
-                "
-              />
-            </slot>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="上传时间"
-          :prop="keys.time"
-          width="170"
-          align="left"
-        >
-          <template slot="header" slot-scope="scope">
-            <slot name="time-header" :column="scope.column">上传时间</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="time" :row="row">{{ row[keys.time] }}</slot>
-          </template>
-        </el-table-column>
-        <el-table-column label="上传人" :prop="keys.user" width="100">
-          <template slot="header" slot-scope="scope">
-            <slot name="user-header" :column="scope.column">上传人</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="user" :row="row">{{ row[keys.user] }}</slot>
-          </template>
-        </el-table-column>
-        <el-table-column label="上传进度" width="220">
-          <template slot="header" slot-scope="scope">
-            <slot name="percent-header" :column="scope.column">上传进度</slot>
-          </template>
-          <template slot-scope="{ row, $index }">
-            <slot name="percent" :row="row" :$index="$index">
-              <div v-if="row['_percent'] >= 0" class="flex-box flex-v">
-                <el-progress
-                  class="n20-upload-table-progress"
-                  :percentage="row['_percent']"
-                  :status="row['_status']"
-                  style="width: 140px"
-                />
-                <el-button
-                  v-if="row['_status'] === 'exception'"
-                  type="text"
-                  size="mini"
-                  style="width: 60px"
-                  @click="anewSubmitFn(row, $index)"
-                  >重新上传</el-button
-                >
-                <el-button
-                  v-else-if="row['_percent'] >= 0 && row['_percent'] < 100"
-                  type="text"
-                  size="mini"
-                  style="width: 60px"
-                  @click="abortFn(row, $index)"
-                  >取消</el-button
-                >
-              </div>
-            </slot>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="80" fixed="right">
-          <template slot="header" slot-scope="scope">
-            <slot name="handle-header" :column="scope.column">操作</slot>
-          </template>
-          <template slot-scope="{ row }">
-            <slot name="handle" :row="row">
-              <el-button
-                type="text"
-                icon="el-icon-view"
-                :disabled="!row[keys.url]"
-                @click="seeFile(row)"
-              />
-            </slot>
-          </template>
-        </el-table-column>
-      </el-table>
-    </template>
-
-    <el-dialog
-      v-drag
-      class="p-a-0"
-      title="附件预览"
-      :visible.sync="visibleP"
-      top="2vh"
-      width="96%"
-      append-to-body
-      @close="closeSee"
-    >
-      <div
-        v-if="imgType.test(previewName)"
-        class="p-a flex-box flex-c flex-v"
-        style="height: 82vh"
-      >
-        <img
-          :src="previewUrl"
-          :alt="previewName"
-          style="max-width: 98%; max-height: 98%"
-        />
-      </div>
-      <div v-else class="p-a" style="height: 82vh">
-        <component
-          :is="previewSameOrg ? 'object' : 'div'"
-          :key="previewUrl"
-          :data="previewUrl"
-          style="width: 100%; height: 100%"
-        >
-          <div class="flex-column flex-c flex-v" style="height: 100%">
-            <i
-              class="el-icon-s-release"
-              style="font-size: 60px; color: #999"
-            ></i>
-            <span style="margin-top: 16px">
-              不支持在线预览，请
-              <a :href="previewUrl" :download="previewName || previewUrl"
-                >下载</a
-              >
-              到本地查看
-            </span>
-          </div>
-        </component>
-      </div>
-    </el-dialog>
-    <Dialog
-      title="附件批量上传"
-      :visible.sync="visibleBatch"
-      top="5vh"
-      width="692px"
-    >
-      <clUpload
-        ref="upload-batch"
-        class="n20-upload-drag"
-        :msg-type="null"
-        :show-clear="false"
-        :drag="true"
-        :auto-upload="false"
-        :multiple="true"
-        :action="action"
-        :headers="headers"
-        :accept="fileAccept"
-        :http-request="uploadHttpRequest"
-        :on-remove="(file) => $emit('on-remove', file)"
-        :on-success="batchSuccess"
-      >
-        <template slot="trigger">
-          <i class="drag-icon n20-icon-shangchuan"></i>
-          <span class="drag-text">点击或将文件拖拽到这里上传</span>
-          <span class="drag-tip">
-            <slot>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</slot>
-          </span>
-        </template>
-      </clUpload>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="batchUploadFn">确认</el-button>
-        <el-button plain @click="visibleBatch = false">取消</el-button>
-      </div>
-    </Dialog>
-  </div>
-</template>
-
-<script>
-import dayjs from 'dayjs'
-import axios from '../../utils/axios'
-import clUpload from '../Upload/index.vue'
-import Dialog from '../Dialog/index.vue'
-export default {
-  name: 'FileUploadTable',
-  components: {
-    clUpload,
-    Dialog
-  },
-  filters: {
-    typeFiter(type, typeOptions) {
-      return typeOptions.find((c) => c.type === type)?.label || ''
-    },
-    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
-    }
-  },
-  props: {
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    action: {
-      type: String,
-      default: '/bems/1.0/attach'
-    },
-    headers: {
-      type: Object,
-      default: undefined
-    },
-    seePrefix: {
-      type: String,
-      default: undefined
-    },
-    seeTypes: {
-      type: RegExp,
-      default: () => /\.jpg|\.png|\.gif|\.svg|\.pdf$/i
-    },
-    tableData: {
-      type: Array,
-      default: () => []
-    },
-    dataPorp: {
-      type: Object,
-      default: () => ({})
-    },
-    showBatchUpload: {
-      type: Boolean,
-      default: false
-    },
-    uploadHttpRequest: {
-      type: Function,
-      default: undefined
-    },
-    getFileMethod: {
-      type: Function,
-      default: undefined
-    }
-  },
-  data() {
-    return {
-      imgType: /\.jpg|\.png|\.gif|\.svg$/i,
-      selectionList: [],
-      fileAccept: this.dataPorp.fileAccept || undefined,
-      fileSize: this.dataPorp.fileSize || undefined,
-      typeOptions: this.dataPorp.typeOptions || [
-        {
-          type: '001',
-          label: '信贷合同'
-        },
-        {
-          type: '002',
-          label: '贴现合同'
-        },
-        {
-          type: '003',
-          label: '其他合同'
-        }
-      ],
-      keys: this.dataPorp.keys || {
-        rowKey: 'id',
-        type: 'type',
-        name: 'name',
-        url: 'url',
-        time: 'time',
-        user: 'user'
-      },
-      currFileList: [],
-      visibleP: false,
-      visibleBatch: false,
-      previewUrl: undefined,
-      previewName: undefined,
-      previewSameOrg: false
-    }
-  },
-  methods: {
-    batchUploadFn() {
-      let $uploadwrap = this.$refs['upload-batch']
-      let $upload = $uploadwrap.$refs['upload']
-      $upload.submit()
-    },
-    batchSuccess(response, file, fileList) {
-      let row = {}
-      this.tableData.splice(0, 0, row)
-      this.$nextTick(() => {
-        this.onSuccessFn(response, file, fileList, row)
-      })
-
-      if (fileList.every((f) => f.status === 'success')) {
-        this.visibleBatch = false
-      }
-    },
-    addRow() {
-      this.$emit('add-row')
-    },
-    downRows() {
-      this.$emit('down-rows', this.selectionList)
-    },
-    deleteRows() {
-      this.$emit('delete-rows', this.selectionList)
-    },
-
-    async getFileInfo(row) {
-      if (this.getFileMethod) {
-        return await this.getFileMethod(row)
-      }
-
-      let _url = row[this.keys.url]
-      this.seePrefix && (_url = this.seePrefix + _url)
-      if (_url) {
-        let blob = await axios.get(_url, {}, { responseType: 'blob' })
-        let url = URL.createObjectURL(blob)
-        let name = blob.name
-        let sameOrg = this.seeTypes.test(name) || this.seeTypes.test(_url)
-        return {
-          url,
-          name,
-          sameOrg
-        }
-      } else {
-        return {}
-      }
-    },
-    async downFile(row) {
-      let { url, name } = await this.getFileInfo(row)
-      if (url) {
-        let aDom = document.createElement('a')
-        aDom.href = url
-        aDom.download = name
-        aDom.click()
-
-        this.$nextTick(() => {
-          aDom = undefined
-          url && URL.revokeObjectURL(url)
-        })
-      }
-    },
-    async seeFile(row) {
-      let { url, name, sameOrg } = await this.getFileInfo(row)
-      if (url) {
-        this.previewSameOrg = sameOrg
-        this.previewUrl = url
-        this.previewName = name
-        this.visibleP = true
-      }
-    },
-    closeSee() {
-      this.previewUrl && URL.revokeObjectURL(this.previewUrl)
-    },
-    beforeUploadFn(file, row) {
-      this.$set(row, '_percent', 0)
-      this.$set(row, '_status', undefined)
-
-      this.$emit('before-upload', file, row)
-    },
-    onProgressFn({ percent }, row) {
-      this.$set(row, '_percent', percent <= 99 ? Math.round(percent) : 99)
-    },
-    onSuccessFn(response, file, fileList, row) {
-      this.$set(row, '_name', file.name)
-      this.$set(row, '_percent', 100)
-
-      row[this.keys.time] = dayjs().format('YYYY-MM-DD HH:mm:ss')
-
-      row[this.keys.url] = response.data
-      if (!row[this.keys.name]) {
-        row[this.keys.name] = file.name
-      }
-      this.$set(row, '_status', 'success')
-
-      this.$emit('on-success', file, row)
-    },
-    errorFn(err, file, fileList, row, $index) {
-      this.$set(row, '_status', 'exception')
-
-      let clUpload = this.$refs['upload' + $index]
-      /* 重置文件状态,并加入文件队列 */
-      file.status = 'ready'
-      clUpload.fileList = [file]
-
-      this.$emit('on-error', file, row)
-    },
-    abortFn(row, $index) {
-      this.$set(row, '_status', 'exception')
-
-      let clUpload = this.$refs['upload' + $index]
-      let elUpload = clUpload.$refs['upload']
-      let uploadFiles = elUpload.uploadFiles
-
-      /* 重置文件状态,并加入文件队列 */
-      let file = uploadFiles[uploadFiles.length - 1]
-      file.status = 'ready'
-      clUpload.fileList = [file]
-
-      elUpload.abort()
-    },
-    anewSubmitFn(row, $index) {
-      this.$set(row, '_status', 'success')
-
-      this.$refs['upload' + $index]?.$refs['upload']?.submit()
-    }
-  }
-}
-</script>
+<template>
+  <div class="file-upload-table">
+    <!-- 查看附件信息 -->
+    <template v-if="readonly">
+      <div class="p-t-s p-b-s">
+        <div class="flex-box flex-v flex-lr">
+          <div><slot name="title"></slot></div>
+          <slot v-if="tableData.length" name="down-btn">
+            <el-button size="mini" plain @click="downRows">批量下载</el-button>
+          </slot>
+        </div>
+      </div>
+
+      <el-table
+        :data="tableData"
+        :row-key="keys.rowKey"
+        @selection-change="(selection) => (selectionList = selection)"
+      >
+        <slot name="selection-column"
+          ><el-table-column type="selection" width="50" align="center" />
+        </slot>
+        <el-table-column label="附件类型" :prop="keys.type">
+          <template slot="header" slot-scope="scope">
+            <slot name="type-header" :column="scope.column">附件类型</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="type" :row="row">{{
+              row[keys.type] | typeFiter(typeOptions)
+            }}</slot>
+          </template>
+        </el-table-column>
+        <el-table-column label="附件名称" :prop="keys.name">
+          <template slot="header" slot-scope="scope">
+            <slot name="name-header" :column="scope.column">附件名称</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="name" :row="row">{{ row[keys.name] }}</slot>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="上传时间"
+          :prop="keys.time"
+          width="170"
+          align="left"
+        >
+          <template slot="header" slot-scope="scope">
+            <slot name="time-header" :column="scope.column">上传时间</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="time" :row="row">{{ row[keys.time] }}</slot>
+          </template>
+        </el-table-column>
+        <el-table-column label="上传人" :prop="keys.user">
+          <template slot="header" slot-scope="scope">
+            <slot name="user-header" :column="scope.column">上传人</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="user" :row="row">{{ row[keys.user] }}</slot>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="80" fixed="right">
+          <template slot="header" slot-scope="scope">
+            <slot name="handle-header" :column="scope.column">操作</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="handle" :row="row">
+              <el-button
+                type="text"
+                icon="el-icon-view"
+                @click="seeFile(row)"
+              />
+              <el-button
+                type="text"
+                icon="el-icon-download"
+                :disabled="!row[keys.url]"
+                @click="downFile(row)"
+              />
+            </slot>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+    <!-- 上传附件 -->
+    <template v-else>
+      <div class="p-t-s p-b-s">
+        <div class="flex-box flex-v flex-lr">
+          <div><slot name="title"></slot></div>
+          <div>
+            <slot name="add-btn">
+              <el-button type="primary" size="mini" @click="addRow"
+                >新增</el-button
+              >
+            </slot>
+            <slot v-if="showBatchUpload" name="batch-btn">
+              <el-button size="mini" plain @click="visibleBatch = true"
+                >批量上传</el-button
+              >
+            </slot>
+            <slot v-if="tableData.length" name="down-btn">
+              <el-button size="mini" plain @click="downRows">下载</el-button>
+            </slot>
+            <slot v-if="tableData.length" name="delete-btn">
+              <el-button type="danger" plain size="mini" @click="deleteRows"
+                >删除</el-button
+              >
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <el-table
+        :data="tableData"
+        :row-key="keys.rowKey"
+        @selection-change="(selection) => (selectionList = selection)"
+      >
+        <slot name="selection-column"
+          ><el-table-column type="selection" width="50" align="center" />
+        </slot>
+        <el-table-column label="附件类型" min-width="160">
+          <template slot="header" slot-scope="scope">
+            <slot name="type-header" :column="scope.column">附件类型</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="type" :row="row">
+              <el-select
+                v-model="row[keys.type]"
+                :disabled="row['_typeDisabled']"
+                placeholder="请选择"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in typeOptions"
+                  :key="item.type"
+                  :disabled="item.disabled"
+                  :value="item.type"
+                  :label="item.label"
+                />
+              </el-select>
+            </slot>
+          </template>
+        </el-table-column>
+        <el-table-column label="附件名称" min-width="160">
+          <template slot="header" slot-scope="scope">
+            <slot name="name-header" :column="scope.column">附件名称</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="name" :row="row">
+              <el-input v-model="row[keys.name]" placeholder="请输入" />
+            </slot>
+          </template>
+        </el-table-column>
+        <el-table-column label="附件上传" min-width="160">
+          <template slot="header" slot-scope="scope">
+            <slot name="upload-header" :column="scope.column">附件上传</slot>
+          </template>
+          <template slot-scope="{ row, $index }">
+            <slot name="upload" :row="row" :$index="$index">
+              <clUpload
+                :ref="'upload' + $index"
+                class="n20-upload-table-up"
+                :file-name="row['_name'] || row[keys.name]"
+                :data="row['_fileData']"
+                :msg-type="null"
+                :show-clear="false"
+                :action="action"
+                :headers="headers"
+                :disabled="!row[keys.type]"
+                :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) =>
+                    onSuccessFn(response, file, fileList, row)
+                "
+                :on-error="
+                  (err, file, fileList) =>
+                    errorFn(err, file, fileList, row, $index)
+                "
+              />
+            </slot>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="上传时间"
+          :prop="keys.time"
+          width="170"
+          align="left"
+        >
+          <template slot="header" slot-scope="scope">
+            <slot name="time-header" :column="scope.column">上传时间</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="time" :row="row">{{ row[keys.time] }}</slot>
+          </template>
+        </el-table-column>
+        <el-table-column label="上传人" :prop="keys.user" width="100">
+          <template slot="header" slot-scope="scope">
+            <slot name="user-header" :column="scope.column">上传人</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="user" :row="row">{{ row[keys.user] }}</slot>
+          </template>
+        </el-table-column>
+        <el-table-column label="上传进度" width="220">
+          <template slot="header" slot-scope="scope">
+            <slot name="percent-header" :column="scope.column">上传进度</slot>
+          </template>
+          <template slot-scope="{ row, $index }">
+            <slot name="percent" :row="row" :$index="$index">
+              <div v-if="row['_percent'] >= 0" class="flex-box flex-v">
+                <el-progress
+                  class="n20-upload-table-progress"
+                  :percentage="row['_percent']"
+                  :status="row['_status']"
+                  style="width: 140px"
+                />
+                <el-button
+                  v-if="row['_status'] === 'exception'"
+                  type="text"
+                  size="mini"
+                  style="width: 60px"
+                  @click="anewSubmitFn(row, $index)"
+                  >重新上传</el-button
+                >
+                <el-button
+                  v-else-if="row['_percent'] >= 0 && row['_percent'] < 100"
+                  type="text"
+                  size="mini"
+                  style="width: 60px"
+                  @click="abortFn(row, $index)"
+                  >取消</el-button
+                >
+              </div>
+            </slot>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="80" fixed="right">
+          <template slot="header" slot-scope="scope">
+            <slot name="handle-header" :column="scope.column">操作</slot>
+          </template>
+          <template slot-scope="{ row }">
+            <slot name="handle" :row="row">
+              <el-button
+                type="text"
+                icon="el-icon-view"
+                :disabled="!row[keys.url]"
+                @click="seeFile(row)"
+              />
+            </slot>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+
+    <el-dialog
+      v-drag
+      class="p-a-0"
+      title="附件预览"
+      :visible.sync="visibleP"
+      top="2vh"
+      width="96%"
+      append-to-body
+      @close="closeSee"
+    >
+      <div
+        v-if="imgType.test(previewName)"
+        class="p-a flex-box flex-c flex-v"
+        style="height: 82vh"
+      >
+        <img
+          :src="previewUrl"
+          :alt="previewName"
+          style="max-width: 98%; max-height: 98%"
+        />
+      </div>
+      <div v-else class="p-a" style="height: 82vh">
+        <component
+          :is="previewSameOrg ? 'object' : 'div'"
+          :key="previewUrl"
+          :data="previewUrl"
+          style="width: 100%; height: 100%"
+        >
+          <div class="flex-column flex-c flex-v" style="height: 100%">
+            <i
+              class="el-icon-s-release"
+              style="font-size: 60px; color: #999"
+            ></i>
+            <span style="margin-top: 16px">
+              不支持在线预览，请
+              <a :href="previewUrl" :download="previewName || previewUrl"
+                >下载</a
+              >
+              到本地查看
+            </span>
+          </div>
+        </component>
+      </div>
+    </el-dialog>
+    <Dialog
+      title="附件批量上传"
+      :visible.sync="visibleBatch"
+      top="5vh"
+      width="692px"
+    >
+      <clUpload
+        ref="upload-batch"
+        class="n20-upload-drag"
+        :msg-type="null"
+        :show-clear="false"
+        :drag="true"
+        :auto-upload="false"
+        :multiple="true"
+        :action="action"
+        :headers="headers"
+        :accept="fileAccept"
+        :http-request="uploadHttpRequest"
+        :on-remove="(file) => $emit('on-remove', file)"
+        :on-success="batchSuccess"
+      >
+        <template slot="trigger">
+          <i class="drag-icon n20-icon-shangchuan"></i>
+          <span class="drag-text">点击或将文件拖拽到这里上传</span>
+          <span class="drag-tip">
+            <slot>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</slot>
+          </span>
+        </template>
+      </clUpload>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="batchUploadFn">确认</el-button>
+        <el-button plain @click="visibleBatch = false">取消</el-button>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import axios from '../../utils/axios'
+import clUpload from '../Upload/index.vue'
+import Dialog from '../Dialog/index.vue'
+export default {
+  name: 'FileUploadTable',
+  components: {
+    clUpload,
+    Dialog
+  },
+  filters: {
+    typeFiter(type, typeOptions) {
+      return typeOptions.find((c) => c.type === type)?.label || ''
+    },
+    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
+    }
+  },
+  props: {
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    action: {
+      type: String,
+      default: '/bems/1.0/attach'
+    },
+    headers: {
+      type: Object,
+      default: undefined
+    },
+    seePrefix: {
+      type: String,
+      default: undefined
+    },
+    seeTypes: {
+      type: RegExp,
+      default: () => /\.jpg|\.png|\.gif|\.svg|\.pdf$/i
+    },
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    dataPorp: {
+      type: Object,
+      default: () => ({})
+    },
+    showBatchUpload: {
+      type: Boolean,
+      default: false
+    },
+    uploadHttpRequest: {
+      type: Function,
+      default: undefined
+    },
+    getFileMethod: {
+      type: Function,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      imgType: /\.jpg|\.png|\.gif|\.svg$/i,
+      selectionList: [],
+      fileAccept: this.dataPorp.fileAccept || undefined,
+      fileSize: this.dataPorp.fileSize || undefined,
+      typeOptions: this.dataPorp.typeOptions || [
+        {
+          type: '001',
+          label: '信贷合同'
+        },
+        {
+          type: '002',
+          label: '贴现合同'
+        },
+        {
+          type: '003',
+          label: '其他合同'
+        }
+      ],
+      keys: this.dataPorp.keys || {
+        rowKey: 'id',
+        type: 'type',
+        name: 'name',
+        url: 'url',
+        time: 'time',
+        user: 'user'
+      },
+      currFileList: [],
+      visibleP: false,
+      visibleBatch: false,
+      previewUrl: undefined,
+      previewName: undefined,
+      previewSameOrg: false
+    }
+  },
+  methods: {
+    batchUploadFn() {
+      let $uploadwrap = this.$refs['upload-batch']
+      let $upload = $uploadwrap.$refs['upload']
+      $upload.submit()
+    },
+    batchSuccess(response, file, fileList) {
+      let row = {}
+      this.tableData.splice(0, 0, row)
+      this.$nextTick(() => {
+        this.onSuccessFn(response, file, fileList, row)
+      })
+
+      if (fileList.every((f) => f.status === 'success')) {
+        this.visibleBatch = false
+      }
+    },
+    addRow() {
+      this.$emit('add-row')
+    },
+    downRows() {
+      this.$emit('down-rows', this.selectionList)
+    },
+    deleteRows() {
+      this.$emit('delete-rows', this.selectionList)
+    },
+
+    async getFileInfo(row) {
+      if (this.getFileMethod) {
+        return await this.getFileMethod(row)
+      }
+
+      let _url = row[this.keys.url]
+      this.seePrefix && (_url = this.seePrefix + _url)
+      if (_url) {
+        let blob = await axios.get(_url, {}, { responseType: 'blob' })
+        let url = URL.createObjectURL(blob)
+        let name = blob.name
+        let sameOrg = this.seeTypes.test(name) || this.seeTypes.test(_url)
+        return {
+          url,
+          name,
+          sameOrg
+        }
+      } else {
+        return {}
+      }
+    },
+    async downFile(row) {
+      let { url, name } = await this.getFileInfo(row)
+      if (url) {
+        let aDom = document.createElement('a')
+        aDom.href = url
+        aDom.download = name
+        aDom.click()
+
+        this.$nextTick(() => {
+          aDom = undefined
+          url && URL.revokeObjectURL(url)
+        })
+      }
+    },
+    async seeFile(row) {
+      let { url, name, sameOrg } = await this.getFileInfo(row)
+      if (url) {
+        this.previewSameOrg = sameOrg
+        this.previewUrl = url
+        this.previewName = name
+        this.visibleP = true
+      }
+    },
+    closeSee() {
+      this.previewUrl && URL.revokeObjectURL(this.previewUrl)
+    },
+    beforeUploadFn(file, row) {
+      this.$set(row, '_percent', 0)
+      this.$set(row, '_status', undefined)
+
+      this.$emit('before-upload', file, row)
+    },
+    onProgressFn({ percent }, row) {
+      this.$set(row, '_percent', percent <= 99 ? Math.round(percent) : 99)
+    },
+    onSuccessFn(response, file, fileList, row) {
+      this.$set(row, '_name', file.name)
+      this.$set(row, '_percent', 100)
+
+      row[this.keys.time] = dayjs().format('YYYY-MM-DD HH:mm:ss')
+
+      row[this.keys.url] = response.data
+      if (!row[this.keys.name]) {
+        row[this.keys.name] = file.name
+      }
+      this.$set(row, '_status', 'success')
+
+      this.$emit('on-success', file, row)
+    },
+    errorFn(err, file, fileList, row, $index) {
+      this.$set(row, '_status', 'exception')
+
+      let clUpload = this.$refs['upload' + $index]
+      /* 重置文件状态,并加入文件队列 */
+      file.status = 'ready'
+      clUpload.fileList = [file]
+
+      this.$emit('on-error', file, row)
+    },
+    abortFn(row, $index) {
+      this.$set(row, '_status', 'exception')
+
+      let clUpload = this.$refs['upload' + $index]
+      let elUpload = clUpload.$refs['upload']
+      let uploadFiles = elUpload.uploadFiles
+
+      /* 重置文件状态,并加入文件队列 */
+      let file = uploadFiles[uploadFiles.length - 1]
+      file.status = 'ready'
+      clUpload.fileList = [file]
+
+      elUpload.abort()
+    },
+    anewSubmitFn(row, $index) {
+      this.$set(row, '_status', 'success')
+
+      this.$refs['upload' + $index]?.$refs['upload']?.submit()
+    }
+  }
+}
+</script>