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