feat(tailings_reservoir):尾矿库信息页面
- 新增尾矿库信息页面,包括搜索、列表和添加功能 - 添加尾矿库基本信息字段,如名称、地址、运行状态等- 集成字典数据获取,支持运行状态、设计等别等字段的展示 -优化属地选择组件,设置为4级联动master
							parent
							
								
									5d0ebba6fa
								
							
						
					
					
						commit
						62dabd6574
					
				|  | @ -21,18 +21,41 @@ | |||
|           </el-form-item> | ||||
|         </el-col> | ||||
| 
 | ||||
|         <el-col :span="24"> | ||||
|           <el-form-item label="应急库级别" prop="emergencyLevel"> | ||||
|             <el-select | ||||
|               v-model="form.emergencyLevel" | ||||
|               placeholder="请选择应急库级别" | ||||
|               filterable | ||||
|             > | ||||
|               <el-option | ||||
|                 v-for="item in emergencyLevelList" | ||||
|                 :key="item.bianma" | ||||
|                 :label="item.name" | ||||
|                 :value="item.bianma" | ||||
|               /> | ||||
|             </el-select> | ||||
|           </el-form-item> | ||||
|         </el-col> | ||||
| 
 | ||||
|         <el-col :span="24"> | ||||
|           <el-form-item label="属地" prop="area"> | ||||
|             <layout-cascader | ||||
|               v-model="form.area" | ||||
|               v-model:name="form.areaName" | ||||
|               :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'" | ||||
|               :check-strictly="false" | ||||
|               :check-strictly="true" | ||||
|               :level="4" | ||||
|             /> | ||||
|           </el-form-item> | ||||
|         </el-col> | ||||
| 
 | ||||
|         <el-col :span="24"> | ||||
|           <el-form-item label="地址" prop="address"> | ||||
|             <el-input v-model="form.address" placeholder="请输入地址" /> | ||||
|           </el-form-item> | ||||
|         </el-col> | ||||
| 
 | ||||
|         <el-col :span="24"> | ||||
|           <el-form-item label="应急库类型" prop="storageType"> | ||||
|             <el-select | ||||
|  | @ -127,14 +150,17 @@ const props = defineProps({ | |||
| }); | ||||
| const { validate, formRef } = useFormValidate(); | ||||
| const storageTypeList = ref([]); | ||||
| const fnGetStorageTypeList = async () => { | ||||
|   const resData = await getDataDictionary({ | ||||
|     parentId: "j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y", | ||||
|   }); | ||||
|   storageTypeList.value = resData.dictionariesList; | ||||
| }; | ||||
| fnGetStorageTypeList(); | ||||
| const emergencyLevelList = ref([]); | ||||
| 
 | ||||
| const fnGetDictData = async () => { | ||||
|   const [storageTypeRes, emergencyLevelRes] = await Promise.all([ | ||||
|     getDataDictionary({ parentId: "j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y" }), | ||||
|     getDataDictionary({ parentId: "870745cbf63985632dd43d9e56a62cb9" }), | ||||
|   ]); | ||||
|   storageTypeList.value = storageTypeRes.dictionariesList; | ||||
|   emergencyLevelList.value = emergencyLevelRes.dictionariesList; | ||||
| }; | ||||
| fnGetDictData(); | ||||
| const emits = defineEmits(["update:visible", "update:form", "getData"]); | ||||
| const { visible, form } = useVModels(props, emits); | ||||
| const data = reactive({ | ||||
|  | @ -142,7 +168,11 @@ const data = reactive({ | |||
|     storageName: [ | ||||
|       { required: true, message: "请输入应急库名称", trigger: "blur" }, | ||||
|     ], | ||||
|     emergencyLevel: [ | ||||
|       { required: true, message: "请选择应急库等级", trigger: "change" }, | ||||
|     ], | ||||
|     area: [{ required: true, message: "请输入应急库区域", trigger: "blur" }], | ||||
|     address: [{ required: true, message: "请输入应急库地址", trigger: "blur" }], | ||||
|     longitude: [{ required: true, message: "请输入经度", trigger: "blur" }], | ||||
|     latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }], | ||||
|   }, | ||||
|  |  | |||
|  | @ -15,7 +15,7 @@ | |||
|             v-model="searchForm.area" | ||||
|             :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'" | ||||
|             :check-strictly="true" | ||||
|             :level="5" | ||||
|             :level="4" | ||||
|           /> | ||||
|         </el-form-item> | ||||
|       </el-col> | ||||
|  | @ -124,8 +124,10 @@ const data = reactive({ | |||
|     form: { | ||||
|       storageName: "", | ||||
|       storageType: "", | ||||
|       emergencyLevel: "", | ||||
|       area: [], | ||||
|       areaName: [], | ||||
|       address: "", | ||||
|       managementUnit: "", | ||||
|       longitude: "", | ||||
|       latitude: "", | ||||
|  |  | |||
|  | @ -16,7 +16,7 @@ | |||
|             v-model="searchForm.area" | ||||
|             :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'" | ||||
|             :check-strictly="true" | ||||
|             :level="5" | ||||
|             :level="4" | ||||
|           /> | ||||
|         </el-form-item> | ||||
|       </el-col> | ||||
|  |  | |||
|  | @ -299,8 +299,15 @@ const data = reactive({ | |||
|     countyWarningOfficer: [ | ||||
|       { required: true, message: "请输入县级预警负责人", trigger: "blur" }, | ||||
|     ], | ||||
|     countyWarningPhone: [ | ||||
|       { required: true, message: "请输入县级预警负责人电话", trigger: "blur" }, | ||||
|     ], | ||||
|     countyWarningOfficerPhone: [ | ||||
|       { required: true, message: "请输入县级预警负责人手机号", trigger: "blur" }, | ||||
|       { | ||||
|         required: true, | ||||
|         message: "请输入县级预警负责人手机号", | ||||
|         trigger: "blur", | ||||
|       }, | ||||
|     ], | ||||
|     countyOfficer: [ | ||||
|       { required: true, message: "请输入县级责任人姓名", trigger: "blur" }, | ||||
|  |  | |||
|  | @ -15,7 +15,7 @@ | |||
|             v-model="searchForm.area" | ||||
|             :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'" | ||||
|             :check-strictly="true" | ||||
|             :level="5" | ||||
|             :level="4" | ||||
|           /> | ||||
|         </el-form-item> | ||||
|       </el-col> | ||||
|  |  | |||
|  | @ -38,10 +38,10 @@ | |||
|         </el-col> | ||||
| 
 | ||||
|         <el-col :span="24"> | ||||
|           <el-form-item label="水库等级" prop="reservoirLevel"> | ||||
|           <el-form-item label="工程规模" prop="reservoirLevel"> | ||||
|             <el-select | ||||
|               v-model="form.reservoirLevel" | ||||
|               placeholder="请选择水库等级" | ||||
|               placeholder="请选择工程规模" | ||||
|             > | ||||
|               <el-option | ||||
|                 v-for="item in reservoirLevelList" | ||||
|  | @ -157,9 +157,6 @@ const data = reactive({ | |||
|     reservoirName: [ | ||||
|       { required: true, message: "请输入水库名称", trigger: "blur" }, | ||||
|     ], | ||||
|     reservoirType: [ | ||||
|       { required: true, message: "请选择水库类型", trigger: "change" }, | ||||
|     ], | ||||
|     reservoirLevel: [ | ||||
|       { required: true, message: "请选择水库等级", trigger: "change" }, | ||||
|     ], | ||||
|  |  | |||
|  | @ -2,11 +2,8 @@ | |||
|   <div> | ||||
|     <app-search v-model="searchForm" @submit="resetPagination"> | ||||
|       <el-col :span="6"> | ||||
|         <el-form-item label="灾害点名称" prop="disasterName"> | ||||
|           <el-input | ||||
|             v-model="searchForm.disasterName" | ||||
|             placeholder="请输入灾害点名称" | ||||
|           /> | ||||
|         <el-form-item label="尾矿库名称" prop="name"> | ||||
|           <el-input v-model="searchForm.name" placeholder="请输入尾矿库名称" /> | ||||
|         </el-form-item> | ||||
|       </el-col> | ||||
| 
 | ||||
|  | @ -16,16 +13,19 @@ | |||
|             v-model="searchForm.area" | ||||
|             :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'" | ||||
|             :check-strictly="true" | ||||
|             :level="5" | ||||
|             :level="4" | ||||
|           /> | ||||
|         </el-form-item> | ||||
|       </el-col> | ||||
| 
 | ||||
|       <el-col :span="6"> | ||||
|         <el-form-item label="地形地貌" prop="terrain"> | ||||
|           <el-select v-model="searchForm.terrain" placeholder="请选择地形地貌"> | ||||
|         <el-form-item label="运行状态" prop="runningStatus"> | ||||
|           <el-select | ||||
|             v-model="searchForm.runningStatus" | ||||
|             placeholder="请选择运行状态" | ||||
|           > | ||||
|             <el-option | ||||
|               v-for="item in terrainList" | ||||
|               v-for="item in runningStatusList" | ||||
|               :key="item.bianma" | ||||
|               :label="item.name" | ||||
|               :value="item.bianma" | ||||
|  | @ -35,13 +35,13 @@ | |||
|       </el-col> | ||||
| 
 | ||||
|       <el-col :span="6"> | ||||
|         <el-form-item label="灾害类型" prop="disasterType"> | ||||
|         <el-form-item label="设计等别" prop="designGrade"> | ||||
|           <el-select | ||||
|             v-model="searchForm.disasterType" | ||||
|             placeholder="请选择灾害类型" | ||||
|             v-model="searchForm.designGrade" | ||||
|             placeholder="请选择设计等别" | ||||
|           > | ||||
|             <el-option | ||||
|               v-for="item in disasterTypeList" | ||||
|               v-for="item in designGradeList" | ||||
|               :key="item.bianma" | ||||
|               :label="item.name" | ||||
|               :value="item.bianma" | ||||
|  | @ -52,10 +52,11 @@ | |||
|     </app-search> | ||||
| 
 | ||||
|     <app-table v-model:pagination="pagination" :data="list" @get-data="getData"> | ||||
|       <el-table-column prop="disasterName" label="灾害点名称" /> | ||||
|       <el-table-column prop="name" label="尾矿库名称" /> | ||||
|       <el-table-column prop="areaName" label="属地" /> | ||||
|       <el-table-column prop="terrainName" label="地形地貌" /> | ||||
|       <el-table-column prop="disasterTypeName" label="灾害类型" /> | ||||
|       <el-table-column prop="runningStatusLabel" label="运行状态" /> | ||||
|       <el-table-column prop="designGradeLabel" label="设计等别" /> | ||||
|       <el-table-column prop="currentGradeLabel" label="现状等别" /> | ||||
|       <el-table-column label="操作" width="120"> | ||||
|         <template #default="{ row }"> | ||||
|           <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')" | ||||
|  | @ -65,7 +66,7 @@ | |||
|             type="primary" | ||||
|             text | ||||
|             link | ||||
|             @click="fnDelete(row.geologicalDisasterId)" | ||||
|             @click="fnDelete(row.tailingsReservoirId)" | ||||
|             >删除</el-button | ||||
|           > | ||||
|         </template> | ||||
|  | @ -95,26 +96,30 @@ import AppTable from "@/components/table/index.vue"; | |||
| import AppSearch from "@/components/search/index.vue"; | ||||
| import useListData from "@/hooks/useListData.js"; | ||||
| import { | ||||
|   getGeologicalDisasterPage, | ||||
|   setGeologicalDisasterDelete, | ||||
|   setTailingsReservoirDelete, | ||||
|   setTailingsReservoirListPage, | ||||
| } from "@/request/kangzai.js"; | ||||
| import Add from "./components/add.vue"; | ||||
| 
 | ||||
| const terrainList = ref([]); | ||||
| const disasterTypeList = ref([]); | ||||
| // 字典数据 | ||||
| const runningStatusList = ref([]); | ||||
| const designGradeList = ref([]); | ||||
| const currentGradeList = ref([]); | ||||
| 
 | ||||
| const fnGetDictData = async () => { | ||||
|   const [terrainRes, disasterTypeRes] = await Promise.all([ | ||||
|     getDataDictionary({ parentId: "b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q" }), | ||||
|     getDataDictionary({ parentId: "c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r" }), | ||||
|   const [runningRes, designRes, currentRes] = await Promise.all([ | ||||
|     getDataDictionary({ parentId: "b62cbaa90f9936bca50e48e8e853150a" }), | ||||
|     getDataDictionary({ parentId: "f32b9172ba95c27041c2289d03e6133f" }), | ||||
|     getDataDictionary({ parentId: "039bed1c0f108325bf800e4e4fe88b12" }), | ||||
|   ]); | ||||
|   terrainList.value = terrainRes.dictionariesList; | ||||
|   disasterTypeList.value = disasterTypeRes.dictionariesList; | ||||
|   runningStatusList.value = runningRes.dictionariesList || []; | ||||
|   designGradeList.value = designRes.dictionariesList || []; | ||||
|   currentGradeList.value = currentRes.dictionariesList || []; | ||||
| }; | ||||
| fnGetDictData(); | ||||
| 
 | ||||
| const { list, pagination, searchForm, resetPagination, getData } = useListData( | ||||
|   getGeologicalDisasterPage, | ||||
|   setTailingsReservoirListPage, | ||||
|   { | ||||
|     beforeGetData: (searchForm) => { | ||||
|       const area = searchForm.area || []; | ||||
|  | @ -126,13 +131,17 @@ const { list, pagination, searchForm, resetPagination, getData } = useListData( | |||
|     }, | ||||
|     callback: (list) => { | ||||
|       list.forEach((item) => { | ||||
|         item.terrainName = | ||||
|           terrainList.value.find((dict) => dict.bianma === item.terrain) | ||||
|             ?.name || item.terrain; | ||||
|         item.disasterTypeName = | ||||
|           disasterTypeList.value.find( | ||||
|             (dict) => dict.bianma === item.disasterType | ||||
|           )?.name || item.disasterType; | ||||
|         item.runningStatusLabel = | ||||
|           runningStatusList.value.find( | ||||
|             (dict) => dict.bianma === item.runningStatus | ||||
|           )?.name || item.runningStatus; | ||||
|         item.designGradeLabel = | ||||
|           designGradeList.value.find((dict) => dict.bianma === item.designGrade) | ||||
|             ?.name || item.designGrade; | ||||
|         item.currentGradeLabel = | ||||
|           currentGradeList.value.find( | ||||
|             (dict) => dict.bianma === item.currentGrade | ||||
|           )?.name || item.currentGrade; | ||||
|       }); | ||||
|     }, | ||||
|   } | ||||
|  | @ -143,7 +152,9 @@ const data = reactive({ | |||
|     visible: false, | ||||
|     type: "", | ||||
|     form: { | ||||
|       disasterName: "", | ||||
|       tailingsReservoirId: "", | ||||
|       name: "", | ||||
|       address: "", | ||||
|       province: "", | ||||
|       city: "", | ||||
|       county: "", | ||||
|  | @ -151,27 +162,34 @@ const data = reactive({ | |||
|       street: "", | ||||
|       area: [], | ||||
|       areaName: [], | ||||
|       terrain: "", | ||||
|       disasterType: "", | ||||
|       scaleDescription: "", | ||||
|       scale: "", | ||||
|       stability: "", | ||||
|       households: "", | ||||
|       population: "", | ||||
|       dangerousSituation: "", | ||||
|       surveySituation: "", | ||||
|       governanceSituation: "", | ||||
|       relocationSituation: "", | ||||
|       riskLevel: "", | ||||
|       longitude: "", | ||||
|       latitude: "", | ||||
|       runningStatus: "", | ||||
|       hasProductionEntity: "", | ||||
|       isOverheadVault: "", | ||||
|       mineralSpecies: "", | ||||
|       designGrade: "", | ||||
|       currentGrade: "", | ||||
|       designDamHeight: "", | ||||
|       currentDamHeight: "", | ||||
|       designStorageCapacity: "", | ||||
|       currentStorageCapacity: "", | ||||
|       isCloseToImportantRivers: "", | ||||
|       safetyProductionLicense: "", | ||||
|       effectiveDate: "", | ||||
|       expiryDate: "", | ||||
|       corpPrincipalName: "", | ||||
|       corpPrincipalPost: "", | ||||
|       corpPrincipalPhone: "", | ||||
|       creator: "", | ||||
|       createTime: "", | ||||
|       operator: "", | ||||
|       operatTime: "", | ||||
|     }, | ||||
|   }, | ||||
| }); | ||||
| 
 | ||||
| const fnDelete = async (geologicalDisasterId) => { | ||||
| const fnDelete = async (tailingsReservoirId) => { | ||||
|   await ElMessageBox.confirm("确定要删除吗?", { type: "warning" }); | ||||
|   await setGeologicalDisasterDelete({ geologicalDisasterId }); | ||||
|   await setTailingsReservoirDelete({ tailingsReservoirId }); | ||||
|   ElMessage.success("删除成功"); | ||||
|   resetPagination(); | ||||
| }; | ||||
|  |  | |||
|  | @ -16,7 +16,7 @@ | |||
|             v-model="searchForm.area" | ||||
|             :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'" | ||||
|             :check-strictly="true" | ||||
|             :level="5" | ||||
|             :level="4" | ||||
|           /> | ||||
|         </el-form-item> | ||||
|       </el-col> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue