证书上传

src/views/base/staff/index.vue

@@ -116,7 +116,7 @@
         <el-table-column label="证书" align="center">
           <template slot-scope="scope">
               <div @click="openCertificate(scope.row)" style="color: #02a7f0; cursor: pointer">
-                3
+                {{ scope.row.certificateNum}}
               </div>
           </template>
         </el-table-column> 
@@ -153,13 +153,61 @@
         <el-form ref="certificateForm" :model="certificateForm" label-width="100px">
           <!-- 文件格式下载，图片格式预览 -->
           <el-form-item label="高处作业证">
-            <uploadFile :limit="5" :accept="accept" :uploadList.sync="highImgList" @picturePreview="picturePreview"></uploadFile>
+            <el-upload
+                action="#"
+                :limit="5"
+                :file-list="highImgList"
+                :show-file-list="true"
+                :auto-upload="false"
+                list-type="picture-card"
+                accept=".png, .jpg, .jpeg"
+                :on-change="handleChangeHighImgList"
+                :class="{ disabled: uploadDisabled }"
+                :on-preview="picturePreview"
+                :on-remove="handleRemoveHighImgList"
+            >
+                <i
+                    class="el-icon-plus avatar-uploader-icon"
+                ></i>
+            </el-upload>
           </el-form-item>
           <el-form-item label="电工作业证">
-            <uploadFile :limit="5" :accept="accept" :uploadList.sync="electricianImgList" @picturePreview="picturePreview"></uploadFile>
+            <el-upload
+                action="#"
+                :limit="5"
+                :file-list="electricianImgList"
+                :show-file-list="true"
+                :auto-upload="false"
+                list-type="picture-card"
+                accept=".png, .jpg, .jpeg"
+                :on-change="handleChangeElectricianImgList"
+                :class="{ disabled: uploadDisabled }"
+                :on-preview="picturePreview"
+                :on-remove="handleRemoveHighImgList"
+            >
+                <i
+                    class="el-icon-plus avatar-uploader-icon"
+                ></i>
+            </el-upload>
           </el-form-item>
           <el-form-item label="其他作业证">
-            <uploadFile :limit="5" :accept="accept" :uploadList.sync="elseImgList" @picturePreview="picturePreview"></uploadFile>
+            <el-upload
+                action="#"
+                :limit="5"
+                :file-list="elseImgList"
+                :show-file-list="true"
+                :auto-upload="false"
+                list-type="picture-card"
+                accept=".png, .jpg, .jpeg"
+                :on-change="handleChangeElseImgList"
+                :class="{ disabled: uploadDisabled }"
+                :on-preview="picturePreview"
+                :on-remove="handleRemoveElseImgList"
+            >
+                <i
+                    class="el-icon-plus avatar-uploader-icon"
+                ></i>
+            </el-upload>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -252,7 +300,7 @@
   </template>
   
   <script>
-  import { listPerson, addPerson, editPerson, getPersonInfo, delPerson, exportPerson, personFile} from "@/api/base/staff";
+  import { listPerson, addPerson, editPerson, getPersonInfo, delPerson, exportPerson, personFile,getCertificate,updateCertificate} from "@/api/base/staff";
   import { downloadFile } from '@/utils/download'
   import { getToken } from '@/utils/auth'
   import uploadFile from '../../components/uploadFile.vue'
@@ -294,8 +342,7 @@
         },
         showCertificate:false,
         memberId:"",
-        //证书
-        certificateForm:{},
+
         accept:'.png, .jpg, .jpeg, .pdf, .doc, .docx',
         highImgList: [],
         electricianImgList: [],
@@ -304,6 +351,16 @@
         form: {},
         //图片上传
         fileList: [],
+        //证书上传
+        certificateForm: {},
+
+        highImgList: [],
+        electricianImgList: [],
+        elseImgList: [],
+
+        delHighFileIdList: [],
+        delElectFileIdList: [],
+        delElseFileIdList: [],
         //图片查看弹窗
         dialogImageUrl: '',
         dialogVisible: false,
@@ -418,6 +475,25 @@
             this.form.fileName = file.name;
             this.fileList = fileList;
         },
+        handleChangeHighImgList(file, fileList) {
+            console.log(file)
+            // this.$refs["form"].clearValidate()
+            this.form.fileName = file.name;
+            this.highImgList = fileList;
+        },
+        handleChangeElectricianImgList(file, fileList) {
+            console.log(file)
+            // this.$refs["form"].clearValidate()
+            this.form.electricianImgList = file.name;
+            this.electricianImgList = fileList;
+        },
+        handleChangeElseImgList(file, fileList) {
+            console.log(file)
+            // this.$refs["form"].clearValidate()
+            this.form.elseImgList = file.name;
+            this.elseImgList = fileList;
+        },
+
         handleRemove(file, fileList) {
             let sum = 0
             console.log(111111)
@@ -430,6 +506,41 @@
             
             this.fileList.splice(sum, 1)
         },
+        handleRemoveHighImgList(file, fileList) {
+            let sum = 0
+            console.log(111111)
+            console.log(this.highImgList)
+            this.highImgList.forEach((item, index) => {
+                if (item.uid == file.uid) {
+                    sum = index
+                }
+            })
+            this.delHighFileIdList.push(this.highImgList[sum].fileId)
+            console.log(this.delHighFileIdList)
+            this.highImgList.splice(sum, 1)
+        },
+        handleRemoveElectricianImgList(file, fileList) {
+            let sum = 0
+            this.electricianImgList.forEach((item, index) => {
+                if (item.uid == file.uid) {
+                    sum = index
+                }
+            })
+            this.delElectFileIdList.push(this.electricianImgList[sum].fileId)
+            console.log(this.delElectFileIdList)
+            this.electricianImgList.splice(sum, 1)
+        },
+        handleRemoveElseImgList(file, fileList) {
+            let sum = 0
+            this.elseImgList.forEach((item, index) => {
+                if (item.uid == file.uid) {
+                    sum = index
+                }
+            })
+            this.delElseFileIdList.push(this.elseImgList[sum].fileId)
+            console.log(this.delElseFileIdList)
+            this.elseImgList.splice(sum, 1)
+        },
         //上传组件-图片查看
         picturePreview(file) {
             console.log(file)
@@ -509,6 +620,40 @@
           })
           return { file }
         },
+
+        //提交时循环highImgList获取raw文件
+        getHighImgListFileData() {
+          const highfile = []
+          this.highImgList.forEach(item => {
+            if (item?.hasOwnProperty('raw')) {
+              highfile.push(item.raw)
+            }
+          })
+          return { highfile }
+        },
+
+        //提交时循环electricianImgList获取raw文件
+        getElectricianImgListFileData() {
+          const electfile = []
+          this.electricianImgList.forEach(item => {
+            if (item?.hasOwnProperty('raw')) {
+              electfile.push(item.raw)
+            }
+          })
+          return { electfile }
+        },
+
+        //提交时循环elseImgList获取raw文件
+        getElseImgListFileData() {
+        const elsefile = []
+        this.elseImgList.forEach(item => {
+          if (item?.hasOwnProperty('raw')) {
+            elsefile.push(item.raw)
+          }
+        })
+        return { elsefile }
+      },
+
         /** 删除按钮操作 */
         handleDelete(row) {
             console.log(row)
@@ -559,11 +704,43 @@
           this.$refs.upload.submit();
         },
         //打开证书上传
+
         openCertificate(row){
           this.memberId = row.id;
-          this.title = "证书"
-          this.showCertificate = true;
+          this.highImgList = [];
+          this.electricianImgList = [];
+          this.elseImgList = [];
+          getCertificate(this.memberId).then(response => {
+            response.data.highImgList.forEach(item => {
+                this.highImgList.push({
+                  fileId: item.filePath,
+                  url: item.bast64Image
+                })
+              });
+            response.data.electricianImgList.forEach(item => {
+                this.electricianImgList.push({
+                  fileId: item.filePath,
+                  url: item.bast64Image
+                })
+              });
+            response.data.elseImgList.forEach(item => {
+                this.elseImgList.push({
+                  fileId: item.filePath,
+                  url: item.bast64Image
+                })
+              });
+              response.data.highImgList = [];
+              response.data.electricianImgList = [];
+              response.data.elseImgList = [];
+              // console.log(this.highImgList)
+              // console.log(this.electricianImgList)
+              // console.log(this.elseImgList)
+              setTimeout(()=>{
+                this.showCertificate = "证书";
+              },100)
+          });
         },
+
         //关闭证书上传
         cancelCertificate(){
           this.highImgList = []
@@ -573,9 +750,41 @@
         },
         //提交证书上传
         submitCertificate(){
-          console.log(this.highImgList)
-          console.log(this.electricianImgList)
-          console.log(this.elseImgList)
+          console.log(this.highImgList);
+          console.log(this.electricianImgList);
+          console.log(this.elseImgList);
+          this.$refs["certificateForm"].validate(valid => {
+        if (valid) {
+            const reqData = new FormData();
+            this.certificateForm.delHighFileIdList = this.delHighFileIdList;
+            this.certificateForm.delElectFileIdList = this.delElectFileIdList;
+            this.certificateForm.delElseFileIdList = this.delElseFileIdList;
+            response.append('delHighFileIdList', this.delHighFileIdList);
+            response.append('delElectFileIdList', this.delElectFileIdList);
+            response.append('delElseFileIdList', this.delElseFileIdList);
+            const { highfile } = this.getHighImgListFileData();
+            const { electfile } = this.getElectricianImgListFileData();
+            const { elsefile } = this.getElseImgListFileData();
+            reqData.append('id', this.memberId);
+            highfile.forEach(item => {
+              reqData.append('highfile', item)
+            })
+            electfile.forEach(item => {
+              reqData.append('electfile', item)
+            })
+            elsefile.forEach(item => {
+              reqData.append('elsefile', item)
+            })
+            updateCertificate(reqData).then(response => {
+              this.$modal.msgSuccess("修改证书成功");
+              this.showCertificate = false;
+              this.highImgList=[];
+              this.electricianImgList=[];
+              this.elseImgList=[];
+              this.getList();
+            });
+        }
+      });
           // this.highImgList = []
           // this.electricianImgList = []
           // this.elseImgList = []