<template> <div class="operate"> <el-form ref="ruleForm" :model="form" :rules="rules" :disabled="opts.type === 'view'" > <el-row :gutter="20"> <el-col :span="13"> <el-form-item label="文件名称:" prop="fileName" class="formItem140"> <el-input v-model="form.fileName" /> </el-form-item> </el-col> <el-col :span="13"> <el-form-item label="文件描述:" prop="fileDescription" class="formItem140" > <el-input type="textarea" v-model="form.fileDescription" /> </el-form-item> </el-col> <el-col :span="13"> <el-form-item label="文件:" prop="fileSaveRequestList" class="formItem140"> <el-upload v-model:file-list="form.fileSaveRequestList" class="upload-demo" action="/prod-api/system/upload" :headers="uploadHeader" multiple :on-preview="handlePreview" style="width: 100%" :before-remove="beforeRemove" > <el-button type="primary">选择文件</el-button> </el-upload> </el-form-item> </el-col> </el-row> </el-form> </div> </template> <script setup> import { reactive, onMounted } from "vue"; import { required } from "@/utils/validate-helper"; import { getProjectInfoNewList, getDicts } from "@/api/projectApproval"; import { projectInfoNewDetail } from "@/api/projectInformationNew"; import { FileSystemList } from "@/api/project/tenderReview"; import { projectPlanningPermissionAdd, projectPlanningPermissionEdit, projectPlanningPermissionDetail, } from "@/api/xmsczl"; import { inheritAttr } from "@/utils/v3"; import { useDicts } from "@/hooks"; import uploadHeader from "@/utils/getUploadHeader"; import { Loading } from "element-plus/es/components/loading/src/service"; const { proxy } = getCurrentInstance(); const { sponge_land_type, findText } = useDicts(proxy); const { pro_project_approval } = proxy.useDict("pro_project_approval"); const { planning_stage } = proxy.useDict("planning_stage"); const emit = defineEmits(["close"]); const props = defineProps({ curRow: { type: Object, default: () => ({}), }, opts: { type: Object, default: () => ({}), }, types: { type: Array, default: [], }, }); const { curRow, opts } = props; let form = ref({ projectName: "", fileDescription: "", fileSaveRequestList: [], fileType :'require' }); const rules = reactive({ fileName: required("文件名称"), fileDescription: required("文件描述"), fileSaveRequestList: required("文件"), }); const beforeUpload = (rawFile) => { console.log(rawFile); }; const reoveFile = (fileList, index) => { proxy.$modal .confirm("是否确认删除?") .then(async () => { fileList.splice(index, 1); }) .catch(() => {}); }; const getDetail = async () => { const {data} = await projectPlanningPermissionDetail(curRow.id); form.value =data; FileSystemList({ refId: curRow?.id, refType: "examinationGuideline", }).then(({ data }) => { form.value.fileSaveRequestList=data }); }; const submit = () => { proxy.$refs.ruleForm.validate(async (valid, fields) => { if (valid) { const params = JSON.parse(JSON.stringify( form.value )); params.fileSaveRequestList = []; form.value.fileSaveRequestList.forEach((e) => { if (e.hasOwnProperty("response")) { e.response.data.refField = "require"; e.response.data.refType = "examinationGuideline"; params.fileSaveRequestList.push(e.response.data); } else { params.fileSaveRequestList.push(e); } }); let methed = ""; if (curRow?.id) { params.id = curRow.id; methed = projectPlanningPermissionEdit; } else { methed = projectPlanningPermissionAdd; } const res = await methed(params); if (res?.code !== 200) return; proxy.$modal.msgSuccess("操作成功!"); emit("close"); } else { console.log("error submit!", fields); } }); }; onMounted(() => { if (curRow?.id) { getDetail(); } }); defineExpose({ submit, }); </script> <style lang="scss" scoped> .operate { .tips { margin-left: 10px; line-height: 30px; } .pl140 { padding-left: 140px; } .pl20 { margin-left: 20px; } .fileSaveRequestList { .file-item { white-space: nowrap; display: flex; align-items: center; .del { flex-shrink: 0; color: #f56c6c; cursor: pointer; margin-left: 10px; } } } .box { margin-bottom: 10px; } } </style>