- <template>
- <div class="dialogForm">
- <el-form ref="ruleForm" :model="form" :rules="rules" :disabled="opts === 'view'" class="form">
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="建设工程名称:" prop="projectNo">
- <el-select v-model="form.projectNo" placeholder="请选择建设工程" style="width: 100%" @change="projectChange" filterable>
- <el-option v-for="project in project_list" :key="project.projectNo" :label="project.projectName" :value="project.projectNo" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="建设分区:" prop="drainagePartition">
- <el-select v-model="form.drainagePartition" placeholder="请选择建设分区" style="width: 100%" :disabled="true">
- <el-option v-for="dict in drainage_partition" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="工程类型:" prop="engineeringType">
- <el-select v-model="form.engineeringType" placeholder="请选择工程类型" style="width: 100%">
- <el-option v-for="dict in sponge_engineering_type" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="建设类型:" prop="buildCategory">
- <el-select v-model="form.buildCategory" placeholder="请选择建设类型" :disabled="true" style="width: 100%">
- <el-option v-for="dict in build_category" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="用地类型:" prop="spongeLandType">
- <el-select v-model="form.spongeLandType" placeholder="请选择用地类型" style="width: 100%">
- <el-option v-for="dict in sponge_land_type" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="面积,㎡:" prop="area">
- <el-input v-model="form.area" placeholder="请输入面积" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="海绵投资,万元:" prop="spongeInvest">
- <el-input v-model="form.spongeInvest" placeholder="请输入海绵投资" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="推荐投产比,万元/m³:" prop="recommendedProductionRatio">
- <el-input v-model="form.recommendedProductionRatio" placeholder="请输入推荐投产比" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="年径流总量控制率%,≥:" prop="annualRunoffTotalControlRate">
- <el-input v-model="form.annualRunoffTotalControlRate" placeholder="请输入年径流总量控制率" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="年径流污染控制率%,≥:" prop="annualRunoffPollutionControlRate">
- <el-input v-model="form.annualRunoffPollutionControlRate" placeholder="请输入年径流污染控制率" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="硬质地面率%,<:" prop="hardGroundRate">
- <el-input v-model="form.hardGroundRate" placeholder="请输入硬质地面率" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="处置客水,m³:" prop="disposalOfGuestWater">
- <el-input v-model="form.disposalOfGuestWater" placeholder="请输入处置客水" :maxlength="100" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="建设单位:" prop="constructionUnit">
- <el-input v-model="form.constructionUnit" placeholder="请输入建设单位" :maxlength="100" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="责任人:" prop="dutyPerson">
- <el-input v-model="form.dutyPerson" placeholder="请输入责任人" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="责任人电话:" prop="dutyPersonPhone">
- <el-input v-model="form.dutyPersonPhone" placeholder="请输入责任人电话" />
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- </div>
- </template>
-
- <script setup>
- import { ref, reactive, onMounted } from 'vue';
- import { inheritAttr } from '@/utils/v3';
- import { validate, validatePhone } from './validate';
- import {
- getProjectInfoList,
- projectBuildTargetConfigAdd,
- getProjectBuildTargetConfigInfo,
- projectBuildTargetConfigEdit,
- } from '@/api/preassess/targetManage';
- import { isNumber } from '@/utils/validate-helper';
- const { proxy } = getCurrentInstance();
-
- const emit = defineEmits(['close']);
- const props = defineProps({
- id: {
- type: [String, Number],
- default: '',
- },
- opts: {
- type: String,
- default: '',
- },
- });
-
- const { id, opts } = props;
-
- const { build_category } = proxy.useDict('build_category');
- const { drainage_partition } = proxy.useDict('drainage_partition');
- const { sponge_engineering_type } = proxy.useDict('sponge_engineering_type');
- const { sponge_land_type } = proxy.useDict('sponge_land_type');
- const project_list = ref([]);
- const getProjectList = async () => {
- const res = await getProjectInfoList();
- if (res.code !== 200) return;
- project_list.value = res.data || [];
- };
- getProjectList();
- const projectChange = val => {
- const item = project_list.value.find(it => it.projectNo === val);
- form.drainagePartition = item.drainagePartition;
- form.buildCategory = item.buildCategory;
- };
-
- const form = reactive({
- projectNo: '',
- drainagePartition: '',
- engineeringType: '',
- buildCategory: '',
- spongeLandType: '',
- annualRunoffTotalControlRate: '',
- area: '',
- spongeInvest: '',
- recommendedProductionRatio: '',
- annualRunoffPollutionControlRate: '',
- hardGroundRate: '',
- disposalOfGuestWater: '',
- constructionUnit: '',
- dutyPerson: '',
- dutyPersonPhone: '',
- });
- const rules = reactive({
- projectNo: [{ required: true, message: '建设工程名称不能为空', trigger: ['blur', 'change'] }],
- drainagePartition: [{ required: true, message: '建设分区不能为空', trigger: ['blur', 'change'] }],
- engineeringType: [{ required: true, message: '工程类型不能为空', trigger: ['blur', 'change'] }],
- buildCategory: [{ required: true, message: '建设类型不能为空', trigger: ['blur', 'change'] }],
- spongeLandType: [{ required: true, message: '用地类型不能为空', trigger: ['blur', 'change'] }],
- annualRunoffTotalControlRate: isNumber('年径流总量控制率', { required: true, min: 0, max: 100 }),
- area: [{ required: true, validator: validate, trigger: ['blur', 'change'] }],
- spongeInvest: isNumber('海绵投资', { required: true, min: 0 }),
- recommendedProductionRatio: isNumber('推荐投产比', { required: true, min: 0 }),
- annualRunoffPollutionControlRate: isNumber('年径流污染控制率', { required: true, min: 0, max: 100 }),
- hardGroundRate: isNumber('硬质地面率', { required: true, min: 0, max: 100 }),
- disposalOfGuestWater: isNumber('处置客水', { required: true, min: 0 }),
- constructionUnit: [{ required: true, message: '建设单位不能为空', trigger: ['blur', 'change'] }],
- dutyPerson: [{ required: true, message: '责任人不能为空', trigger: ['blur', 'change'] }],
- dutyPersonPhone: [{ required: true, validator: validatePhone, trigger: ['blur', 'change'] }],
- });
-
- const getFormData = async () => {
- const res = await getProjectBuildTargetConfigInfo(id);
- if (res.code !== 200) return;
- inheritAttr(res.data || {}, form);
- };
-
- const submit = () => {
- proxy.$refs.ruleForm.validate(async (valid, fields) => {
- if (valid) {
- console.log('submit!', form);
- const params = { ...form };
- if (opts === 'edit') params.id = id;
- const res = opts === 'add' ? await create(params) : await update(params);
- if (res?.code !== 200) return;
- proxy.$modal.msgSuccess('操作成功!');
- emit('close', opts);
- } else {
- console.log('error submit!', fields);
- }
- });
- };
-
- const create = params => {
- return projectBuildTargetConfigAdd(params);
- };
-
- const update = params => {
- return projectBuildTargetConfigEdit(params);
- };
-
- const restForm = () => {
- proxy.$refs.ruleForm.resetFields();
- };
-
- onMounted(() => {
- if (id) getFormData();
- });
-
- defineExpose({
- submit,
- restForm,
- });
- </script>
-
- <style lang="scss" scoped>
- .dialogForm {
- :deep(.el-form) {
- padding-bottom: 20px;
- .el-form-item {
- .el-form-item__label {
- width: 186px;
- word-break: keep-all;
- white-space: nowrap;
- }
- }
- }
- }
- </style>