<template> <div> <a-row> <a-col :span="24"> <div class="main-title"> <span>附件信息</span> </div> </a-col> </a-row> <a-row type="flex"> <a-col :span="24" class="bg-gray"> <div class="special-middle"> <a href="/downloadFile/202412130901.docx" download="单位承诺书模版.docx" style="margin-right: 20px;"> <a-icon type="download"></a-icon> <span style="color:green;text-decoration:underline;">单位承诺书模版</span> </a> <a href="/downloadFile/202412130902.docx" download="个人承诺书模版.docx" style="margin-right: 20px;"> <a-icon type="download"></a-icon> <span style="color:green;text-decoration:underline;">个人承诺书模版</span> </a> <a href="/downloadFile/202412130903.docx" download="项目资金预算编制说明.docx" style="margin-right: 20px;"> <a-icon type="download"></a-icon> <span style="color:green;text-decoration:underline;">项目资金预算编制说明</span> </a> </div> </a-col> </a-row> <a-row type="flex" class="row_center"> <a-col :span="2"> <div class="special-middle"> <div>序号</div> </div> </a-col> <a-col :span="6" class="bg-gray"> <div class="special-middle"> <div>附件名称</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>是否必备材料</div> </div> </a-col> <a-col :span="10" class="bg-gray"> <div class="special-middle"> <div>附件上传</div> </div> </a-col> <a-col :span="4" class="bg-gray"> <div class="special-middle"> <div>操作</div> </div> </a-col> </a-row> <a-row v-for="(item, index) in fileList" :key="'fileList' + index" type="flex"> <a-col :span="2" style="text-align: center; margin-top: 8px;"> {{ index + 1 }} </a-col> <a-col :span="6"> <div class="special-middle" v-if="index <= 10">{{ item.fileExplain }}</div> <a-form-model-item v-else :prop="'fileList.' + index + '.fileExplain'" :rules="{required: item.isRequired, message: '*',trigger: 'blur',}"> <a-input v-model="item.fileExplain" :maxLength="100" style="width: 100%" :disabled="item.required" /> </a-form-model-item> </a-col> <a-col :span="2"> <div class="special-middle" style="text-align: center;"><div>{{ item.isRequired == true ? "是" : "否" }}</div></div> </a-col> <a-col :span="10"> <div class="special-middle"> <div v-if="item.downloadUrl" class="file-box"> <div> <a-icon type="file" style="margin-right: 8px" /> <span class="hover-pointer" @click="downloadfile(item)">{{item.fileName}}</span> </div> <a-icon type="delete" class="hover-pointer d-icon" @click="deletefile(item, index)" /> </div> <div v-else> <a-form-model-item :prop="'fileList.' + index + '.downloadUrl'" :rules="{required: item.isRequired, message: '请上传附件',trigger: 'blur',}"> <input type="file" :ref="'fileElem' + index" class="visually-hidden" @change="handleFiles(item, index)" /> <a-button @click="fileSelect(item, index)"><a-icon type="upload" />选择文件</a-button> </a-form-model-item> </div> </div> </a-col> <a-col :span="4"> <div class="special-middle"> <div v-if="!item.required"> <a-popconfirm title="确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="removefileList(item)"> <a-button type="link" size="small">删除</a-button> </a-popconfirm> </div> </div> </a-col> </a-row> <a-row type="flex"> <a-col :span="24" style="text-align: center"> <div class="special-middle"> <div> <a-button type="dashed" style="width: 50%" @click="addfileList()"> <a-icon type="plus" /> 添加 </a-button> </div> </div> </a-col> </a-row> </div> </template> <script> const File = { fileName: "", downloadUrl: "", fileExplain: "", downloadId: "", isRequired: false, required: false }; export default { name: "fileEdit", props: { fileList: { type: Array, default: () => { return [{ ...File }]; }, }, }, created() {}, data() { return { mustAttachment: [ 0, 1 ], }; }, methods: { downloadfile() { }, deletefile (item, index) { this.$api.base.deletefile({ id: item.downloadId }).then(({ data = {} }) => { if (data) { item.fileName = '' item.downloadUrl = '' item.downloadId = '' } }).catch(() => { this.$message.error('删除失败') }) }, uploadHandle (file, fileName) { let formData = new FormData() formData.append('file', file) formData.append('fileName', fileName) return formData }, handleFiles(item, index) { let fileElem = this.$refs['fileElem' + index][0] let files = fileElem.files if (files.length <= 0) { this.$message.error('未选中文件,请尝试重新选择') return } if (!this.fileCheck(files[0])) return this.$api.base.asyncUpload(this.uploadHandle(files[0], files[0].name)).then(({ data = {} }) => { if (data) { item.fileName = files[0].name item.downloadUrl = '/' + files[0].name item.downloadId = data.id } else this.$message.error('上传失败') }).catch(() => { this.$message.error('上传失败') }) }, fileSelect (item, index) { let fileElem = this.$refs['fileElem' + index][0] if (fileElem) { fileElem.click() } }, fileCheck (file) { //判断是否小于1M let isLtSize = file.size < 1024 * 1024 * 15; if (!isLtSize) { this.$message.error('文件大小不能超过15M!'); return false } return true }, // 添加附件 addfileList () { this.fileList.push(Object.assign({ ...File }, { fileExplain: '' })) }, // 删除附件 removefileList (item) { let index = this.fileList.indexOf(item) if (index !== -1) { this.fileList.splice(index, 1) } }, }, }; </script>