表单项组件化、政策入库流程重构

2023-09-25 16:58:30 +08:00
parent 24577c7f3a
commit 37a3124c3a
25 changed files with 2888 additions and 12 deletions
@@ -0,0 +1,208 @@
+<template>
+  <el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
+    <el-input
+      disabled
+      style="display: none;"
+      :value="ids"
+      clearable
+    ></el-input>
+    <div style="display: flex;justify-content: space-between">
+      <div style="width: 80%;margin-top: 13px">
+        <div v-for="file in FileList"
+             :key="file.id"
+             @click="onPreview(file)"
+             style="color: #409eff;cursor:pointer"
+             class="fileClass">
+          {{ file.name }}
+        </div>
+      </div>
+      <div style="width: 20%;">
+        <el-button :disabled="disabled"
+                   type="primary"
+                   class="common-button-primary"
+                   size="mini"
+                   @click="showUpload"
+                   style="margin-left: 10px; margin-top: 11px; float: right;">
+          <i class="el-icon-upload"></i>
+        </el-button>
+      </div>
+    </div>
+    <el-dialog width='400px' :visible.sync="fileMadel" title="上传文件">
+      <el-upload
+          multiple
+          drag
+          :file-list="fileList"
+          :action="fileUrl"
+          ref="importfile"
+          name="file"
+          :accept="accept"
+          :before-upload="beforeUpload"
+          :on-success="onSuccess"
+          :on-preview="onPreview"
+          :on-remove="removeOneFile"
+          :show-file-list="true"
+      >
+        <div style="padding: 20px 0">
+          <i class="el-icon-upload" style="color: #3399ff"></i>
+          <p>点击或拖拽上传文件</p>
+        </div>
+      </el-upload>
+    </el-dialog>
+  </el-form-item>
+</template>
+
+<script>
+export default {
+  name: "UploadFormItem",
+  props: {
+    ids: {
+      required: true,
+      type: String,
+      default: ''
+    },
+    names: {
+      required: true,
+      type: String
+    },
+    prop: {
+      type: String
+    },
+    label: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    fileUrl: {
+      type: String,
+      default: () => 'api/att/attFile/uploadNew'
+    },
+    accept: {
+      type: String,
+      default: '.pdf, .PDF, .ppt, .PPT, .pptx, .PPTX, .doc, .DOC, .docx, .DOCX, .xls, .xlsx'
+    },
+    size: {
+      type: Number,
+      default: 200
+    }
+  },
+  created () {
+    this.initFileList()
+  },
+  data () {
+    return {
+      fileMadel: false,
+      fileList: [],// 用于el-upload
+      FileList: [],// 用于回显
+    }
+  },
+  methods: {
+    showUpload () {
+      this.fileMadel = true;
+    },
+    initFileList () {
+      if (this.ids && this.ids !== '' && this.names && this.names !== '') {
+        let fileList = []
+        const idArr = this.ids.split(',')
+        const nameArr = this.names.split(',')
+        for (let i = 0 ; i < idArr.length; i++) {
+          fileList.push({
+            id: idArr[i],
+            name: nameArr[i]
+          })
+        }
+        this.fileList = fileList
+        this.FileList = fileList
+      }
+    },
+    beforeUpload (file) {
+      const fileName = file.name
+      const fileSuffix = fileName.slice(fileName.lastIndexOf('.') + 1)
+      // 判断上传文件格式
+      const acceptArr = this.accept.split(',').map(type => type.slice(type.lastIndexOf('.') + 1))
+      if (acceptArr.includes(fileSuffix)) {
+        return true
+      } else {
+        this.$message.error('文件' + file.name + `格式不正确，请上传${acceptArr.join(',')}文件`)
+        return false
+      }
+      // 判断文件上传大小
+      if (file.size / 1024 / 1024 <= this.size) {
+        return true
+      } else {
+        this.$message.error('文件' + file.name + `大小不超过${this.size}M`)
+        return false
+      }
+      return true
+    },
+    // 导入标准数据成功后执行
+    onSuccess (response, file,fileList) {
+      // 上传成功后判断是否是两条数据是的话替换掉旧数据
+      if (response.ok) {
+        const fileObj = {
+          id: file.response.data.id,
+          name: file.response.data.name
+        }
+        let ids;
+        let names;
+        if (this.ids && this.ids.length > 0) {
+          ids = this.ids + ',' + fileObj.id
+          names = this.names + ',' + fileObj.name
+        } else {
+          ids = fileObj.id
+          names = fileObj.name
+        }
+
+        this.$set(this.FileList, this.FileList.length, fileObj)
+        this.$emit('update:ids', ids)
+        this.$emit('update:names', names)
+
+        this.$message({
+          message: response.message,
+          type: 'success'
+        })
+      }
+    },
+    removeOneFile(file, fileList) {
+      const ids = fileList.reduce((init, file) => {
+        if (init === '') {
+          return file.id || file.response.data.id
+        } else {
+          return init + ',' + (file.id || file.response.data.id)
+        }
+      }, '')
+      const names = fileList.reduce((init, file) => {
+        if (init === '') {
+          return file.name
+        } else {
+          return init + ',' + file.name
+        }
+      }, '')
+
+      this.FileList = fileList.map(file => ({
+        id: file.id || file.response.data.id,
+        name: file.name
+      }))
+      this.$emit('update:ids', ids)
+      this.$emit('update:names', names)
+    },
+    // 文件预览及下载
+    onPreview(file) {
+      let attId = ""
+      if(file && file.id){
+        attId = file.id
+      }else {
+        attId = file.response.data.id
+      }
+      this.$preview(attId)
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.fileClass{
+  line-height: 22px !important;
+}
+</style>