perf: 优化组件

src/components/hzwlComponents/Import.vue

@@ -19,10 +19,16 @@
         :action="action"
         :headers="headers"
         name="file"
+        :file-list="fileList"
         :accept="accept"
         :auto-upload="autoUpload"
+        :limit="limit"
         :before-upload="beforeUpload"
         :on-success="onSuccess"
+        :on-remove="onRemove"
+        :on-preview="onPreview"
+        :on-exceed="onExceed"
+        :on-error="onError"
         :show-file-list="true"
       >
         <i class="el-icon-upload" style="color: #3399ff" />
@@ -93,7 +99,21 @@ export default {
     manualUpload: {
       type: Boolean,
       default: false
-    }
+    },
+    limit: {
+      type: Number,
+      default: 8
+    },
+    ids: {
+      required: false,
+      type: String,
+      default: ''
+    },
+    names: {
+      required: false,
+      type: String,
+      default: ''
+    },
   },
   data () {
     return {
@@ -101,10 +121,28 @@ export default {
         token: JSON.parse(localStorage.getItem('userInfo')).token
       },
       importFailed: false,
-      importForm: {}
+      importForm: {},
+      fileList: [],
     }
   },
+  created () {
+    this.initFileList()
+  },
   methods: {
+    initFileList () {
+      if (this.ids && this.ids !== '' && this.names && this.names !== '') {
+        const 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
+      }
+    },
     onClose () {
       this.$emit('update:visible', false)
     },
@@ -131,8 +169,25 @@ export default {
       return true
     },
     // 导入标准数据成功后执行
-    onSuccess (response, file) {
+    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.$emit('update:visible', false)
         this.$emit('onSuccess')
         this.$message({
@@ -144,6 +199,44 @@ export default {
         this.importForm.content = response.message
       }
     },
+    onRemove (file, fileList) {
+      const ids = fileList
+        .reduce((init, file) => init + ',' + (file.id || file.response.data.id), '')
+        .replace(/^,|,$/g, '')
+      const names = fileList
+        .reduce((init, file) => init + ',' + (file.name || file.response.data.name), '')
+        .replace(/^,|,$/g, '')
+      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)
+      this.$emit('onRemove')
+    },
+    onPreview (file) {
+      const id = file.id || file.response.data.id
+      this.$preview(id)
+    },
+    onExceed (files, fileList) {
+      this.$message.warning(`当前限制上传 1 个文件，本次上传了 ${files.length} 个文件，共上传了 ${files.length + fileList.length} 个文件`);
+    },
+    onError (err, file, fileList) {
+      const ids = fileList
+        .reduce((init, file) => init + ',' + (file.id || file.response.data.id), '')
+        .replace(/^,|,$/g, '')
+      const names = fileList
+        .reduce((init, file) => init + ',' + (file.name || file.response.data.name), '')
+        .replace(/^,|,$/g, '')
+      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)
+      this.$emit('onError')
+      this.$message.error('上传失败')
+    },
     ManualUpload () {
       this.$refs.importfile.submit();
     }

src/components/hzwlComponents/SelectFormItem.vue

@@ -64,6 +64,7 @@ export default {
   methods: {
     handleChange (event) {
       this.$emit('input', event)
+      this.$emit('change', event)
     }
   }
 }

src/components/hzwlComponents/UploadFormItem.vue

@@ -242,4 +242,12 @@ export default {
 .fileClass{
   line-height: 22px !important;
 }
+.add-form-item /deep/ .el-form-item__content .el-form-item__error {
+  padding: 3px;
+  top: 15px;
+  right: 45px !important;
+  left: auto;
+  background: #fff3f3;
+  z-index: 9;
+}
 </style>