n20-common-lib 1.1.98

package/src/components/Expandable/main.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="n20-form-expandable-pane">
+    <div class="n20-title flex-box flex-lr flex-v m-t m-b">
+      <span class="n20-tips" @click="getExpand">
+        <i class="el-icon-caret-right m-r-b" :class="{ expand: expand }"></i>
+        <slot name="title">
+          <span>{{ title }}</span>
+        </slot>
+      </span>
+      <div>
+        <slot name="tips"></slot>
+      </div>
+    </div>
+    <el-collapse-transition>
+      <div v-show="expand">
+        <slot></slot>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ExpandablePane',
+  props: {
+    defaultExpand: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      expand: true
+    }
+  },
+  watch: {
+    defaultExpand(val) {
+      this.expand = val
+    }
+  },
+  methods: {
+    getExpand() {
+      this.expand = !this.expand
+      this.$emit('update:defaultExpand', this.expand)
+    }
+  }
+}
+</script>

package/src/components/FileUploadTable/index.vue

@@ -0,0 +1,484 @@
+<template>
+  <div class="bd-t bd-l bd-r">
+    <!-- 查看附件信息 -->
+    <template v-if="readonly">
+      <div class="p-l p-r p-t-s p-b-s">
+        <div class="flex-box flex-v flex-lr">
+          <span><slot name="title">附件信息</slot></span>
+          <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" align="center">
+          <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">
+          <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-l p-r p-t-s p-b-s">
+        <div class="flex-box flex-v flex-lr">
+          <span><slot name="title">附件信息</slot></span>
+          <div>
+            <slot name="add-btn">
+              <el-button type="primary" size="mini" @click="addRow"
+                >新增</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]" />
+            </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)"
+                :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="160"
+          align="center"
+        >
+          <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="上传进度" 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">
+          <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
+      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>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import axios from '../../utils/axios'
+import clUpload from '../Upload/index.vue'
+export default {
+  name: 'FileUploadTable',
+  components: {
+    clUpload
+  },
+  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: () => ({})
+    }
+  },
+  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'
+      },
+
+      visibleP: false,
+      previewUrl: undefined,
+      previewName: undefined,
+      previewSameOrg: false
+    }
+  },
+  methods: {
+    addRow() {
+      this.$emit('add-row')
+    },
+    downRows() {
+      this.$emit('down-rows', this.selectionList)
+    },
+    deleteRows() {
+      this.$emit('delete-rows', this.selectionList)
+    },
+    async getFileInfo(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>