<template> <div class="water-analysis-page"> <div class="top"> <el-form label-width="auto" :rules="projectEstimateRules" inline ref="ruleForm" :model="FormList" :disabled="typeList.type == 1" > <div v-for="i in FormList.monitorDynamicTableTitleList" style="display: flex; flex-direction: column"> <el-form-item v-if="i.key == 'real' || i.key == 'target'" v-for="k in i.titleGroup" :label="i.key == 'real' ? '实际' + k.value + ':' : '目标' + k.value + ':'" :prop="k.key" :disabled="typeList.type == 1 || typeList.type == 2" > <el-input :disabled="i.key != 'real'" v-model="FormList[k.key]" :placeholder="k.placeholder" @change="ChangeClick(k.key, FormList[k.key])" > </el-input> </el-form-item> <el-form-item v-else :label="i.value + ':'" :prop="i.key" :disabled="typeList.type == 1 || typeList.type == 2"> <el-upload v-if="i.key == 'attachFileList'" v-model:file-list="fileList1" class="upload-demo" action="/prod-api/system/upload" :headers="uploadHeader" multiple :on-preview="handlePreview" :before-remove="beforeRemove" style="width: 100vh" > <el-button type="primary">选择文件</el-button> </el-upload> <div v-else-if="i.key == 'standardFlag'"> <el-tag v-if="typeList.data.standardFlag === ''" type="warning">未填报</el-tag> <el-tag v-else-if="typeList.data.standardFlag === 102" type="warning">无法评价</el-tag> <el-tag v-else :type="typeList.data.standardFlag === 1 ? 'success' : 'error'">{{ typeList.data.standardFlag === 1 ? '达标' : '未达标' }}</el-tag> </div> <div v-else> {{ FormList[i.key] }} </div> </el-form-item> </div> </el-form> </div> </div> </template> <script setup> import { onMounted, defineEmits, reactive, defineProps, defineExpose } from 'vue'; import { projectInfoAdd, projectInfoEdit } from '@/api/prevention'; import { getToken } from '@/utils/auth'; import { projectEstimateRules } from '@/utils/rules'; import { projectEstimateForm } from '@/utils/form'; import { ElMessage, ElMessageBox } from 'element-plus'; const { proxy } = getCurrentInstance(); const { fund_source } = proxy.useDict('fund_source'); const uploadHeader = ref({ Authorization: 'Bearer ' + getToken(), }); const { typeList } = defineProps(['typeList']); const emits = defineEmits(); defineExpose({ submit, closed, resetFiled }); const IsStandFlag1 = ref(0); const IsStandText = ref(''); let FormList = ref({ projectNo: '', fileSaveRequestList: [] }); function ChangeClick(v,m) { typeList.iSstandardFlag = null; if (v == 'realMB') { IsStandFlag1.value = m * 1 - FormList.value.targetMB * 1; } if (IsStandFlag1.value >= 0 ) typeList.data.standardFlag = 1 else typeList.data.standardFlag = 0 } const fileList1 = ref([]); function handlePreview(file) { return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then( () => window.open(file.url), () => false ); } function beforeRemove(file) { return true; } function submit() { proxy.$refs.ruleForm.validate(valid => { if (valid) { const fileSaveRequestList = []; fileList1.value.forEach(element => { if (element.hasOwnProperty('response')) { element.response.data.refType = 'CSFHBZ'; fileSaveRequestList.push(element.response.data); } else { fileSaveRequestList.push(element); } }); const itemUpdateFieldRequestList = [ { id: typeList.data['MB-id'], realValue: FormList.value.realMB, standardFlag: typeList.data.standardFlag }, ]; FormList.value = { itemDataType: typeList.itemDataType, standardFlag: typeList.data.standardFlag, itemUpdateFieldRequestList, fileSaveRequestList, performanceEvaluateId: typeList.data.performanceEvaluateId, }; console.log('FormList.value', FormList.value); projectInfoEdit(FormList.value).then(({ code }) => { if (code == 200) { emits('onModalClose'); } }); } // } }); } function loadProjerctListData() { console.log('typeListtypeList', typeList); let ln=typeList.monitorDynamicTableTitleList?.length FormList.value = typeList.data; fileList1.value = typeList.fileList1; FormList.value.monitorDynamicTableTitleList =typeList.monitorDynamicTableTitleList.slice(0,ln-2) proxy.$refs.ruleForm.resetFields(); } function resetFiled() { proxy.$refs.ruleForm.resetFields(); fileList1.value = []; } function closed() { emits('onModalClose'); } onMounted(() => { loadProjerctListData(); }); </script> <style lang="scss" scoped> .water-analysis-page { padding: 20px; } </style>