The part of the project that was stripped out
<template> <el-form :model="titleInfo" :rules="titleInfoRules" :inline="true" ref="titleInfo" class="pane-con pane-con-10" > <div class="pane-top"> <el-button type="primary" icon="el-icon-plus" @click="addTitleInfoRow" >添加</el-button > </div> <div class="common-table"> <el-table ref="table" :data="titleInfo.teacherTitleInfo" style="width: 100%" max-height="500" class="table-wrap" > <el-table-column prop="recognitionCertificationUrl" label="凭证" min-width="280" > <template slot-scope="scope"> <el-form-item label=" " :prop=" 'teacherTitleInfo.' + scope.$index + '.recognitionCertificationUrl' " :rules="titleInfoRules.recognitionCertificationUrl" > <!-- 仅预览删除可用下面注释掉的代码 --> <!-- <el-upload ref="upload" class="small-uploader" action="#" accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.GIF" list-type="picture-card" :file-list="scope.row.titleFileList" :http-request="(file)=>{return handleBeforeUpload(file,'title',scope.$index)}" :on-remove="(file, fileList)=>{return handleRemoveTitle(file, fileList,scope.$index,'title')}" :on-preview="handlePreviewTitle"> <i class="el-icon-plus"></i> </el-upload> --> <el-upload :ref="'title' + scope.$index" class="small-uploader" action="#" accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.GIF" list-type="picture-card" :file-list="scope.row.titleFileList" :http-request=" (file) => { return handleBeforeUpload(file, 'title', scope.$index) } " > <i slot="default" class="el-icon-plus"></i> <div class="commodityPoster-img" slot="file" slot-scope="{ file }" > <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePreviewTitle(file)" > <i class="el-icon-zoom-in"></i> </span> <span class="el-upload-list__item-delete" @click="handleDownload(file)" > <i class="el-icon-download"></i> </span> <span class="el-upload-list__item-delete" @click=" handleRemoveTitle( file, scope.row.titleFileList, scope.$index, 'title' ) " > <i class="el-icon-delete"></i> </span> </span> </div> </el-upload> <el-dialog :visible.sync="dialogVisibleTitle"> <img width="100%" :src="dialogImageUrlTitle" class="avatar" /> </el-dialog> </el-form-item> </template> </el-table-column> </el-table> </div> <div class="info-row-center"> <el-button class="save-btn" type="primary" @click="saveTitleInfo('titleInfo')" >保存</el-button > </div> </el-form></template><script>export default { name: 'infofillComponent', data() { return { titleInfo: { teacherTitleInfo: [ // 职称信息 { recognitionCertificationUrl: [], titleFileList: [], }, ], }, titleInfoRules: { recognitionCertificationUrl: [ { required: true, message: '请上传凭证', trigger: 'change' }, ], }, dialogImageUrlTitle: '', dialogVisibleTitle: false, }; }, methods: { // 多图片显示 imgsShow(imgArr, tag, index) { if (imgArr && imgArr.length > 0) { imgArr.forEach((item) => { const obj = { url: item, uid: '' }; if (tag === 'title') { this.titleInfo.teacherTitleInfo[index].titleFileList.push(obj); } }); } }, // 图片自动上传到服务器 imgUploadAuto(option, tag, index) { const { file } = option; console.log(file); const fileType = file.name.substring(file.name.lastIndexOf('.') + 1); const imgTypeList = ['jpg', 'jpeg', 'png', 'gif', 'JPG', 'JPEG', 'GIF']; if (imgTypeList.indexOf(fileType) < 0) { this.$notify({ message: '请选择图片', type: 'warning', }); if (tag === 'title') { let list1 = []; list1 = this.titleInfo.teacherTitleInfo[index].titleFileList; list1.push({ url: '', uid: '', }); list1.splice(list1.length - 1, 1); } return; } const size = file.size / 1024 / 1024 / 2; if (size > 2) { this.$notify.warning({ title: '警告', message: '图片大小必须小于2M', }); return; } this.uid = file.uid; const formData = new FormData(); const time = new Date().getTime(); formData.append('file', file, file.name); formData.append('t', time); if (tag === 'basic') { // 单张图片 formData.append('path', 'primaryPic'); } else { formData.append('path', 'listPic'); } console.log(formData); this.$api.uploadImg(formData).then((res) => { if (res.success) { let list = []; if (tag === 'title') { list = this.titleInfo.teacherTitleInfo[index].titleFileList; this.titleInfo.teacherTitleInfo[ index ].recognitionCertificationUrl.push(res.data.path); this.$refs.titleInfo.validateField( `teacherTitleInfo.${index}.recognitionCertificationUrl`, ); } list.push({ url: res.data.path, uid: this.uid, }); } }); }, // 上传图片之前的钩子 handleBeforeUpload(file, tag, index) { this.imgUploadAuto(file, tag, index); }, // 点击文件列表中已上传的文件时的钩子 handlePreviewTitle(file) { this.dialogImageUrlTitle = file.url; this.dialogVisibleTitle = true; }, // 文件列表移除文件时的钩子 handleRemoveTitle(file, list1, index, tag) { const list = this.$refs[tag + index].uploadFiles; console.log(list); for (let i = 0; i < list.length; i += 1) { if (list[i].uid === file.uid) { list.splice(i, 1); list1.splice(i, 1); if (tag === 'title') { this.titleInfo.teacherTitleInfo[index].titleFileList = list1; this.titleInfo.teacherTitleInfo[ index ].recognitionCertificationUrl.splice(i, 1); } } } }, handleDownload(file) { const a = document.createElement('a'); const event = new MouseEvent('click'); // a.download = file.name; a.download = '职称信息凭证'; a.href = file.url; a.dispatchEvent(event); console.log(file); }, addTitleInfoRow() { // 职称添加 this.titleInfo.teacherTitleInfo.push({ recognitionCertificationUrl: [], titleFileList: [], }); }, delTitleInfoRow(index) { this.titleInfo.teacherTitleInfo.splice(index, 1); }, saveTitleInfo(formName) { // 职称信息保存 this.$refs[formName].validate((valid) => { if (valid) { // 传参调接口 } }); }, },};</script><style lang="scss">.pane-con { padding: 10px 20px; width: 80%; .info-row { width: 100%; display: flex; justify-content: space-between; .info-cell { width: 50%; .info-cell-item { width: 100%; } } .info-cell-10 { width: 100%; } .info-cell-7 { width: 70%; } .info-cell-3 { width: 30%; } .lable-lang .el-form-item__label { width: 200px; } .lable-lang .el-form-item__content { width: calc(100% - 230px); } .el-cascader, .el-date-editor.el-input { width: 100%; } } .role-dialog-input { position: relative; width: 100%; } .pane-top { width: 100%; display: flex; justify-content: space-between; align-items: center; button { margin-right: 10px; } .tip { width: 200px; color: #909399; text-align: right; } .check-wrap { height: 50px; width: 100%; background: #eff3f9; padding: 5px 10px; box-sizing: border-box; .check-box { line-height: 40px; width: 220px; } } }}.pane-con-10 { width: 100%; .common-table { .el-form-item { margin-right: 0; margin-bottom: 0; width: 100%; display: flex; align-items: center; .el-form-item__label { width: 16px; } .el-form-item__content { flex: 1; } } .el-input__inner { padding: 0 6px; } .el-table__body tr .cell { overflow: inherit; padding-bottom: 20px; } .el-input, .el-select, .el-cascader { width: 100%; } .el-form-item__label { padding: 0; } .btn-cell { .el-form-item__content { display: flex; .el-input { flex: 1; } .btn { width: 60px; height: 30px; padding: 0 2px; margin: 4px 0 0 4px; } } } }}.info-row-center { width: 100%; display: flex; justify-content: center; margin-top: 20px; .save-btn { padding: 12px 40px; } &.margin-notop { margin-top: 0; }}.small-uploader { .el-upload { width: 80px; height: 80px; line-height: 80px; } .el-upload-list__item { width: 80px; height: 80px; } .avatar-uploader-icon { font-size: 28px; width: 80px; height: 80px; line-height: 80px; } .avatar { width: 80px; height: 80px; display: block; } .el-upload-list--picture-card .el-upload-list__item-actions span + span { margin: 0 2px; }}.table-wrap .el-table__body tr .cell { white-space: inherit;}</style>
Copy the code