feat: 完善省市区的保存及显示，完善组态的绑定和解绑

src/views/iot/projects/detail/topo.vue

@@ -59,7 +59,7 @@ const form = reactive({
   ...baseForm
 })
 
-const { params, tableData, getList, loading } = useSearch<any[]>(topoApi.getList, 'data', { ids: [], status: -1 });
+const { params, tableData, getList, loading } = useSearch<any[]>(topoApi.getList, 'data', { ids: [], status: undefined });
 
 getOptions();
 getSourceList();
@@ -67,14 +67,12 @@ getSourceList();
 function getSourceList() {
   api.getProjectResourcesByCode({ projectsCode }).then((res: any) => {
     params.ids = (res || []).filter((item: any) => item.resourcesTypes === resourcesTypes).map((item: any) => item.resourcesKey)
-
-    getList();
-    // if (!params.ids.length) {
-    //   params.pageNum = 1
-    //   tableData.value = []
-    // } else {
-    //   getList();
-    // }
+    if (!params.ids.length) {
+      params.pageNum = 1
+      tableData.value = []
+    } else {
+      getList();
+    }
   })
 }
 

src/views/iot/projects/list/edit.vue

@@ -3,8 +3,8 @@
     <el-form-item label="项目名称" prop="name">
       <el-input v-model.trim="formData.name" placeholder="输入项目名称" />
     </el-form-item>
-    <el-form-item label="地区" prop="address">
-      <el-cascader :options="data" :props="{ emitPath: true, value: 'code', label: 'name' }" placeholder="请选择" clearable class="w100" v-model="formData.address">
+    <el-form-item label="地区" prop="addressCode">
+      <el-cascader :options="data" :props="{ emitPath: true, value: 'code', label: 'name' }" placeholder="请选择" clearable class="w100" v-model="formData.addressCode">
       </el-cascader>
     </el-form-item>
     <el-form-item label="详细地址" prop="addressDetail">
@@ -41,9 +41,29 @@ const emit = defineEmits(['getList', 'cancle']);
 const showDialog = ref(false);
 const formRef = ref();
 
+// 从省市区的的树形结构中获取省市区名称
+function getNames(code: string) {
+  const provinceItem = data.find((item: any) => item.province === code.substring(0, 2))
+  const provinceName = provinceItem.name
+  const cityItem = provinceItem.children.find((item: any) => item.city === code.substring(2, 4))
+  const cityName = cityItem.name
+
+  if (!cityItem.children) {
+    const areaItem = provinceItem.children.find((item: any) => item.area === code.substring(4, 6))
+    const areaName = areaItem.name
+    return `${provinceName}/${areaName}`
+
+  } else {
+    const areaItem = cityItem.children.find((item: any) => item.area === code.substring(4, 6))
+    const areaName = areaItem.name
+    return `${provinceName}/${cityName}/${areaName}`
+  }
+}
+
 const baseForm = {
   id: undefined,
-  address: null,
+  address: '',
+  addressCode: [],
   name: '',
   addressDetail: '',
   channelMerchants: '',
@@ -58,7 +78,7 @@ const formData = reactive({
 
 const ruleForm = {
   name: [ruleRequired('不能为空')],
-  address: [ruleRequired('不能为空')],
+  addressCode: [ruleRequired('不能为空')],
   addressDetail: [ruleRequired('不能为空')],
   channelMerchants: [ruleRequired('不能为空')],
   customName: [ruleRequired('不能为空')],
@@ -69,6 +89,12 @@ const ruleForm = {
 const onSubmit = async () => {
   await formRef.value.validate();
 
+  const { addressCode } = formData;
+  formData.address = JSON.stringify({
+    name: getNames(addressCode[2] || addressCode[1]),
+    code: addressCode
+  })
+
   const theApi = formData.id ? api.edit : api.add;
 
   await theApi(formData);
@@ -92,7 +118,7 @@ const open = async (row?: any) => {
   resetForm();
   showDialog.value = true;
   nextTick(() => {
-    Object.assign(formData, { ...row, address: JSON.parse(row.address) });
+    Object.assign(formData, { ...row, addressCode: JSON.parse(row.address)?.code });
   });
 };
 

src/views/iot/projects/list/index.vue

@@ -48,7 +48,7 @@
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column prop="status" label="项目状态" width="100" :formatter="(row: any) => row.status ? '正常' : '禁用'" align="center"></el-table-column>
         <el-table-column prop="name" label="项目名称" min-width="120" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="address" label="省/市/区/县" min-width="200" align="center"></el-table-column>
+        <el-table-column prop="address" label="省/市/区/县" :formatter="(row: any) => JSON.parse(row.address)?.name" min-width="200" align="center"></el-table-column>
         <el-table-column prop="addressDetail" label="详细地址" min-width="100" align="center"></el-table-column>
         <el-table-column prop="channelMerchants" label="渠道商" min-width="100" align="center"></el-table-column>
         <el-table-column prop="customName" label="关键客户" min-width="100" align="center"></el-table-column>