Newer
Older
KaiFengPC / src / views / preassess / targetManage / dialogForm.vue
@zhangdeliang zhangdeliang on 23 May 9 KB 初始化项目
  1. <template>
  2. <div class="dialogForm">
  3. <el-form ref="ruleForm" :model="form" :rules="rules" :disabled="opts === 'view'" class="form">
  4. <el-row :gutter="20">
  5. <el-col :span="12">
  6. <el-form-item label="建设工程名称:" prop="projectNo">
  7. <el-select v-model="form.projectNo" placeholder="请选择建设工程" style="width: 100%" @change="projectChange" filterable>
  8. <el-option v-for="project in project_list" :key="project.projectNo" :label="project.projectName" :value="project.projectNo" />
  9. </el-select>
  10. </el-form-item>
  11. </el-col>
  12. <el-col :span="12">
  13. <el-form-item label="建设分区:" prop="drainagePartition">
  14. <el-select v-model="form.drainagePartition" placeholder="请选择建设分区" style="width: 100%" :disabled="true">
  15. <el-option v-for="dict in drainage_partition" :key="dict.value" :label="dict.label" :value="dict.value" />
  16. </el-select>
  17. </el-form-item>
  18. </el-col>
  19. </el-row>
  20. <el-row :gutter="20">
  21. <el-col :span="12">
  22. <el-form-item label="工程类型:" prop="engineeringType">
  23. <el-select v-model="form.engineeringType" placeholder="请选择工程类型" style="width: 100%">
  24. <el-option v-for="dict in sponge_engineering_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  25. </el-select>
  26. </el-form-item>
  27. </el-col>
  28. <el-col :span="12">
  29. <el-form-item label="建设类型:" prop="buildCategory">
  30. <el-select v-model="form.buildCategory" placeholder="请选择建设类型" :disabled="true" style="width: 100%">
  31. <el-option v-for="dict in build_category" :key="dict.value" :label="dict.label" :value="dict.value" />
  32. </el-select>
  33. </el-form-item>
  34. </el-col>
  35. </el-row>
  36. <el-row :gutter="20">
  37. <el-col :span="12">
  38. <el-form-item label="用地类型:" prop="spongeLandType">
  39. <el-select v-model="form.spongeLandType" placeholder="请选择用地类型" style="width: 100%">
  40. <el-option v-for="dict in sponge_land_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  41. </el-select>
  42. </el-form-item>
  43. </el-col>
  44. <el-col :span="12">
  45. <el-form-item label="面积,㎡:" prop="area">
  46. <el-input v-model="form.area" placeholder="请输入面积" />
  47. </el-form-item>
  48. </el-col>
  49. </el-row>
  50. <el-row :gutter="20">
  51. <el-col :span="12">
  52. <el-form-item label="海绵投资,万元:" prop="spongeInvest">
  53. <el-input v-model="form.spongeInvest" placeholder="请输入海绵投资" />
  54. </el-form-item>
  55. </el-col>
  56. <el-col :span="12">
  57. <el-form-item label="推荐投产比,万元/m³:" prop="recommendedProductionRatio">
  58. <el-input v-model="form.recommendedProductionRatio" placeholder="请输入推荐投产比" />
  59. </el-form-item>
  60. </el-col>
  61. </el-row>
  62. <el-row :gutter="20">
  63. <el-col :span="12">
  64. <el-form-item label="年径流总量控制率%,≥:" prop="annualRunoffTotalControlRate">
  65. <el-input v-model="form.annualRunoffTotalControlRate" placeholder="请输入年径流总量控制率" />
  66. </el-form-item>
  67. </el-col>
  68. <el-col :span="12">
  69. <el-form-item label="年径流污染控制率%,≥:" prop="annualRunoffPollutionControlRate">
  70. <el-input v-model="form.annualRunoffPollutionControlRate" placeholder="请输入年径流污染控制率" />
  71. </el-form-item>
  72. </el-col>
  73. </el-row>
  74. <el-row :gutter="20">
  75. <el-col :span="12">
  76. <el-form-item label="硬质地面率%,<:" prop="hardGroundRate">
  77. <el-input v-model="form.hardGroundRate" placeholder="请输入硬质地面率" />
  78. </el-form-item>
  79. </el-col>
  80. <el-col :span="12">
  81. <el-form-item label="处置客水,m³:" prop="disposalOfGuestWater">
  82. <el-input v-model="form.disposalOfGuestWater" placeholder="请输入处置客水" :maxlength="100" />
  83. </el-form-item>
  84. </el-col>
  85. </el-row>
  86. <el-row :gutter="20">
  87. <el-col :span="12">
  88. <el-form-item label="建设单位:" prop="constructionUnit">
  89. <el-input v-model="form.constructionUnit" placeholder="请输入建设单位" :maxlength="100" />
  90. </el-form-item>
  91. </el-col>
  92. <el-col :span="12">
  93. <el-form-item label="责任人:" prop="dutyPerson">
  94. <el-input v-model="form.dutyPerson" placeholder="请输入责任人" />
  95. </el-form-item>
  96. </el-col>
  97. </el-row>
  98. <el-row :gutter="20">
  99. <el-col :span="12">
  100. <el-form-item label="责任人电话:" prop="dutyPersonPhone">
  101. <el-input v-model="form.dutyPersonPhone" placeholder="请输入责任人电话" />
  102. </el-form-item>
  103. </el-col>
  104. </el-row>
  105. </el-form>
  106. </div>
  107. </template>
  108.  
  109. <script setup>
  110. import { ref, reactive, onMounted } from 'vue';
  111. import { inheritAttr } from '@/utils/v3';
  112. import { validate, validatePhone } from './validate';
  113. import {
  114. getProjectInfoList,
  115. projectBuildTargetConfigAdd,
  116. getProjectBuildTargetConfigInfo,
  117. projectBuildTargetConfigEdit,
  118. } from '@/api/preassess/targetManage';
  119. import { isNumber } from '@/utils/validate-helper';
  120. const { proxy } = getCurrentInstance();
  121.  
  122. const emit = defineEmits(['close']);
  123. const props = defineProps({
  124. id: {
  125. type: [String, Number],
  126. default: '',
  127. },
  128. opts: {
  129. type: String,
  130. default: '',
  131. },
  132. });
  133.  
  134. const { id, opts } = props;
  135.  
  136. const { build_category } = proxy.useDict('build_category');
  137. const { drainage_partition } = proxy.useDict('drainage_partition');
  138. const { sponge_engineering_type } = proxy.useDict('sponge_engineering_type');
  139. const { sponge_land_type } = proxy.useDict('sponge_land_type');
  140. const project_list = ref([]);
  141. const getProjectList = async () => {
  142. const res = await getProjectInfoList();
  143. if (res.code !== 200) return;
  144. project_list.value = res.data || [];
  145. };
  146. getProjectList();
  147. const projectChange = val => {
  148. const item = project_list.value.find(it => it.projectNo === val);
  149. form.drainagePartition = item.drainagePartition;
  150. form.buildCategory = item.buildCategory;
  151. };
  152.  
  153. const form = reactive({
  154. projectNo: '',
  155. drainagePartition: '',
  156. engineeringType: '',
  157. buildCategory: '',
  158. spongeLandType: '',
  159. annualRunoffTotalControlRate: '',
  160. area: '',
  161. spongeInvest: '',
  162. recommendedProductionRatio: '',
  163. annualRunoffPollutionControlRate: '',
  164. hardGroundRate: '',
  165. disposalOfGuestWater: '',
  166. constructionUnit: '',
  167. dutyPerson: '',
  168. dutyPersonPhone: '',
  169. });
  170. const rules = reactive({
  171. projectNo: [{ required: true, message: '建设工程名称不能为空', trigger: ['blur', 'change'] }],
  172. drainagePartition: [{ required: true, message: '建设分区不能为空', trigger: ['blur', 'change'] }],
  173. engineeringType: [{ required: true, message: '工程类型不能为空', trigger: ['blur', 'change'] }],
  174. buildCategory: [{ required: true, message: '建设类型不能为空', trigger: ['blur', 'change'] }],
  175. spongeLandType: [{ required: true, message: '用地类型不能为空', trigger: ['blur', 'change'] }],
  176. annualRunoffTotalControlRate: isNumber('年径流总量控制率', { required: true, min: 0, max: 100 }),
  177. area: [{ required: true, validator: validate, trigger: ['blur', 'change'] }],
  178. spongeInvest: isNumber('海绵投资', { required: true, min: 0 }),
  179. recommendedProductionRatio: isNumber('推荐投产比', { required: true, min: 0 }),
  180. annualRunoffPollutionControlRate: isNumber('年径流污染控制率', { required: true, min: 0, max: 100 }),
  181. hardGroundRate: isNumber('硬质地面率', { required: true, min: 0, max: 100 }),
  182. disposalOfGuestWater: isNumber('处置客水', { required: true, min: 0 }),
  183. constructionUnit: [{ required: true, message: '建设单位不能为空', trigger: ['blur', 'change'] }],
  184. dutyPerson: [{ required: true, message: '责任人不能为空', trigger: ['blur', 'change'] }],
  185. dutyPersonPhone: [{ required: true, validator: validatePhone, trigger: ['blur', 'change'] }],
  186. });
  187.  
  188. const getFormData = async () => {
  189. const res = await getProjectBuildTargetConfigInfo(id);
  190. if (res.code !== 200) return;
  191. inheritAttr(res.data || {}, form);
  192. };
  193.  
  194. const submit = () => {
  195. proxy.$refs.ruleForm.validate(async (valid, fields) => {
  196. if (valid) {
  197. console.log('submit!', form);
  198. const params = { ...form };
  199. if (opts === 'edit') params.id = id;
  200. const res = opts === 'add' ? await create(params) : await update(params);
  201. if (res?.code !== 200) return;
  202. proxy.$modal.msgSuccess('操作成功!');
  203. emit('close', opts);
  204. } else {
  205. console.log('error submit!', fields);
  206. }
  207. });
  208. };
  209.  
  210. const create = params => {
  211. return projectBuildTargetConfigAdd(params);
  212. };
  213.  
  214. const update = params => {
  215. return projectBuildTargetConfigEdit(params);
  216. };
  217.  
  218. const restForm = () => {
  219. proxy.$refs.ruleForm.resetFields();
  220. };
  221.  
  222. onMounted(() => {
  223. if (id) getFormData();
  224. });
  225.  
  226. defineExpose({
  227. submit,
  228. restForm,
  229. });
  230. </script>
  231.  
  232. <style lang="scss" scoped>
  233. .dialogForm {
  234. :deep(.el-form) {
  235. padding-bottom: 20px;
  236. .el-form-item {
  237. .el-form-item__label {
  238. width: 186px;
  239. word-break: keep-all;
  240. white-space: nowrap;
  241. }
  242. }
  243. }
  244. }
  245. </style>