优化行政区划和媒体类型字典界面

src/layout/components/Navbar.vue

@@ -14,12 +14,16 @@
         <div class="el-dropdown avatar-container right-menu-item hover-effect">
           <div class="avatar-wrapper">
             <div class="feedback_icon">
-              <img :src="icon_feedback" class="custom-icon" @click="handleFeedBack" />
+              <el-tooltip class="box-item" effect="dark" content="问题反馈" placement="bottom-start">
+                <img :src="icon_feedback" class="custom-icon" @click="handleFeedBack" />
+              </el-tooltip>
             </div>
             <img :src="userStore.avatar ? userStore.avatar : avatar_icon" class="user-avatar" />
             <span class="user-nickname"> {{ userStore.nickName }} admin </span>
             <div class="logout_icon">
-              <img :src="logout_icon" class="custom-icon" @click="logout" />
+              <el-tooltip class="box-item" effect="dark" content="退出" placement="bottom-start">
+                <img :src="logout_icon" class="custom-icon" @click="logout" />
+              </el-tooltip>
             </div>
           </div>
         </div>

src/views/system/administrativeRegion/index.vue

@@ -11,20 +11,15 @@
             <el-col :span="24">
                <el-button type="primary" class="primaryBtn" @click="handleAddRootNode"
                   v-hasPermi="['system:administrativeRegion:add']">新增根节点</el-button>
-               <!-- <el-button type="primary" class="primaryBtn" @click="toggleExpandAll">展开/折叠</el-button> -->
             </el-col>
          </el-row>
 
-         <el-table v-loading="loading" height="calc(100vh - 244px)" :data="regionTreeList"
+         <el-table v-loading="loading" ref="tableRef" height="calc(100vh - 244px)" :data="regionTreeList" row-key="id"
-            row-key="id" lazy :load="loadChildren" :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }">
+            lazy :load="loadChildren" @expand-change="handleExpandChange"
+            :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }">
             <el-table-column prop="name" label="区域名称"></el-table-column>
             <el-table-column prop="code" label="区域编号"></el-table-column>
             <el-table-column prop="sortNo" label="排序"></el-table-column>
-            <!-- <el-table-column label="创建时间" align="center" prop="createTime" min-width="210">
-               <template #default="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
-               </template>
-            </el-table-column> -->
             <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
                <template #default="scope">
                   <el-button link type="primary" @click="handleUpdate(scope.row)"
@@ -76,8 +71,9 @@ const regionTreeList = ref([])
 const open = ref(false)
 const loading = ref(true)
 const title = ref("")
-const isExpandAll = ref(true)
+
-const refreshTable = ref(true)
+const tableRef = ref();
+const expandedKeys = ref(new Set());
 
 const data = reactive({
    form: {},
@@ -93,38 +89,83 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data)
 
+
+// 辅助方法 - 根据ID查找行
+const findRowById = (id, rows = regionTreeList.value) => {
+   for (const row of rows) {
+      if (row.id === id) return row;
+      if (row.childList) {
+         const found = findRowById(id, row.childList);
+         if (found) return found;
+      }
+   }
+   return null;
+};
+
+// 辅助方法 - 查找父节点ID
+const findParentId = (id, rows = regionTreeList.value, parentId = 0) => {
+   for (const row of rows) {
+      if (row.id === id) return parentId;
+      if (row.childList) {
+         const found = findParentId(id, row.childList, row.id);
+         if (found) return found;
+      }
+   }
+   return null;
+};
+
+// 辅助方法 - 查找父节点对象
+const findParentNode = (id, rows = regionTreeList.value, parent = null) => {
+   for (const row of rows) {
+      if (row.id === id) return parent;
+      if (row.childList) {
+         const found = findParentNode(id, row.childList, row);
+         if (found) return found;
+      }
+   }
+   return null;
+};
+
+// handleExpandChange 
+const handleExpandChange = (row, expanded) => {
+   if (expanded) {
+      expandedKeys.value.add(row.id);
+   } else {
+      expandedKeys.value.delete(row.id);
+   }
+};
+
 /** 查询行政区域树列表 */
-const getsysRegionTreeList = () => {
+const getsysRegionTreeList = (parentId = 0) => {
    loading.value = true
+   queryParams.value.parentId = parentId;
    sysRegionListByPid(queryParams.value).then(res => {
-      regionTreeList.value = res.data
+      if (parentId === 0) {
+         regionTreeList.value = res.data
+      }
       loading.value = false
    })
 }
 
 // 加载子节点数据的方法
 const loadChildren = async (row, treeNode, resolve) => {
-  try {
+   try {
-    // 调用API获取子节点数据
+      queryParams.value.parentId = row.id;
-   //  const children = await fetchChildrenData(row.id)
+      const response = await sysRegionListByPid(queryParams.value);
-    queryParams.value.parentId = row.id
+      row.childList = response.data; // 更新当前行的子节点
-    const children = await sysRegionListByPid(queryParams.value)
-    // 将子节点数据传递给表格
-    resolve(children.data)
-  } catch (error) {
-    console.error('加载子节点失败:', error)
-    resolve([])
-  }
-}
 
-// /** 展开/折叠操作 */
+      if (expandedKeys.value.has(row.id)) {
-// const toggleExpandAll = () => {
+         nextTick(() => {
-//    refreshTable.value = false
+            tableRef.value?.toggleRowExpansion(row, true);
-//    isExpandAll.value = !isExpandAll.value
+         });
-//    nextTick(() => {
+      }
-//       refreshTable.value = true
+
-//    })
+      resolve(response.data);
-// }
+   } catch (error) {
+      console.error('加载子节点失败:', error);
+      resolve([]);
+   }
+}
 
 /** 表单重置 */
 const reset = () => {
@@ -174,34 +215,105 @@ const cancel = () => {
 const submitForm = () => {
    proxy.$refs["regionRef"].validate(valid => {
       if (valid) {
-         if (form.value.id != undefined) {
+         const saveExpanded = new Set(expandedKeys.value);
-            updateSysRegion(form.value).then(response => {
+         const isEdit = !!form.value.id;
-               proxy.$modal.msgSuccess("修改成功")
+
-               open.value = false
+         const operation = isEdit
-               getsysRegionTreeList()
+            ? updateSysRegion(form.value)
-            })
+            : addSysRegion(form.value);
-         } else {
+
-            addSysRegion(form.value).then(response => {
+         operation.then(response => {
-               proxy.$modal.msgSuccess("新增成功")
+            proxy.$modal.msgSuccess(isEdit ? "修改成功" : "新增成功");
-               open.value = false
+            open.value = false;
-               getsysRegionTreeList()
+
-            })
+            if (isEdit) {
-         }
+               // 方法1：强制更新响应式数据
+               const updatedRow = findRowById(form.value.id);
+               if (updatedRow) {
+                  // 创建新对象确保响应式更新
+                  const newRowData = { ...updatedRow, ...form.value };
+                  Object.assign(updatedRow, newRowData);
+               }
+
+               // 刷新父节点
+               const parentId = findParentId(form.value.id) || 0;
+               if (parentId !== 0) {
+                  getsysRegionTreeList(parentId);
+               }
+            } else {
+               // 新增操作
+               getsysRegionTreeList(form.value.parentId || 0);
+            }
+
+            // 恢复展开状态
+            nextTick(() => {
+               saveExpanded.forEach(id => {
+                  const row = findRowById(id);
+                  if (row) {
+                     tableRef.value?.toggleRowExpansion(row, true);
+                  }
+               });
+            });
+         }).catch(error => {
+            console.error("操作失败:", error);
+         });
       }
-   })
+   });
-}
+};
 
 /** 删除按钮操作 */
-const handleDelete = (row) => {
+const handleDelete = async (row) => {
-   proxy.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function () {
+   try {
-      return deleteSysRegion(row.id)
+      await proxy.$modal.confirm(`是否确认删除名称为"${row.name}"的数据项?`);
-   }).then(() => {
+
-      regionTreeList.value = []
+      // 1. 保存当前展开状态
-      queryParams.value.parentId = '0'
+      const saveExpanded = new Set(expandedKeys.value);
-      getsysRegionTreeList()
+      // 2. 查找父节点
-      proxy.$modal.msgSuccess("删除成功")
+      const parentNode = findParentNode(row.id);
-   }).catch(() => { })
+
-}
+      // 3. 执行删除API
+      await deleteSysRegion(row.id);
+
+      // 4. 从展开状态中移除被删除的节点
+      saveExpanded.delete(row.id);
+      expandedKeys.value = new Set(saveExpanded);
+
+      // 5. 更新数据
+      if (!parentNode) {
+         // 删除的是根节点 - 重新加载整个树
+         regionTreeList.value = [];
+         await getsysRegionTreeList();
+      } else {
+         // 删除的是子节点 - 更新父节点的childList
+         const index = parentNode.childList.findIndex(item => item.id === row.id);
+         if (index !== -1) {
+            parentNode.childList.splice(index, 1); // 响应式删除
+
+            // 强制表格更新
+            nextTick(() => {
+               tableRef.value?.doLayout();
+            });
+         }
+      }
+
+      proxy.$modal.msgSuccess("删除成功");
+
+      // 6. 恢复展开状态
+      nextTick(() => {
+         saveExpanded.forEach(id => {
+            const row = findRowById(id);
+            if (row) {
+               tableRef.value?.toggleRowExpansion(row, true);
+            }
+         });
+      });
+   } catch (error) {
+      if (error !== 'cancel') {
+         console.error('删除失败:', error);
+         proxy.$modal.msgError("删除失败");
+      }
+   }
+};
 
 // 初始化
 onMounted(() => {

src/views/system/businessArea/index.vue

@@ -3,17 +3,20 @@
         <div class="searchPanel">
             <el-form :inline="true" v-show="showSearch" class="searchPanelForm">
                 <el-form-item label="城市:">
-                    <el-select v-model="queryParams.provinceId" placeholder="请选择" @change="getCityList" clearable style="min-width: 30px">
+                    <el-select v-model="queryParams.provinceId" placeholder="请选择" @change="getCityList" clearable
+                        style="min-width: 30px">
                         <el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </el-form-item>
                 <el-form-item label="">
-                    <el-select v-model="queryParams.cityId" placeholder="请选择" @change="getCountyList" clearable style="min-width: 30px">
+                    <el-select v-model="queryParams.cityId" placeholder="请选择" @change="getCountyList" clearable
+                        style="min-width: 30px">
                         <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </el-form-item>
                 <el-form-item label="">
-                    <el-select v-model="queryParams.countyId" placeholder="请选择" @change="getTownList" clearable style="min-width: 30px">
+                    <el-select v-model="queryParams.countyId" placeholder="请选择" @change="getTownList" clearable
+                        style="min-width: 30px">
                         <el-option v-for="item in county" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </el-form-item>
@@ -79,7 +82,7 @@
         <el-dialog :title="title" v-model="open" width="800px" class="my_dialog" align-center :destroy-on-close="true"
             :close-on-click-modal="false">
             <el-form ref="businessAreaRef" :model="form" :rules="rules" label-width="120px" class="myInsertForm">
-                <el-form-item label="省/直辖市" prop="provinceId" >
+                <el-form-item label="省/直辖市" prop="provinceId">
                     <el-select v-model="form.provinceId" placeholder="请选择" clearable @change="getCityList1">
                         <el-option v-for="item in province1" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
@@ -245,6 +248,27 @@ const getTownList1 = (value) => {
     })
 }
 
+// 获取地级市/区数据
+const getCityList2 = (value) => {
+    sysRegionListByPid({ parentId: value }).then(res => {
+        city1.value = res.data
+    })
+}
+
+// 获取区/县数据
+const getCountyList2 = (value) => {
+    sysRegionListByPid({ parentId: value }).then(res => {
+        county1.value = res.data
+    })
+}
+
+// 获取镇数据
+const getTownList2 = (value) => {
+    sysRegionListByPid({ parentId: value }).then(res => {
+        town1.value = res.data
+    })
+}
+
 /** 表单重置 */
 const reset = () => {
     form.value = {
@@ -290,12 +314,30 @@ const handleUpdate = (row) => {
     reset()
     getProvinceList1()
     getBusTradingArea(row.id).then(response => {
-        form.value = response.data
+        handleResponse(response)
-        open.value = true
-        title.value = "修改商圈"
     })
 }
+async function handleResponse(response) {
+    const promises = [];
 
+    if (response.data.provinceId) {
+        promises.push(getCityList2(response.data.provinceId));
+    }
+    if (response.data.cityId) {
+        promises.push(getCountyList2(response.data.cityId));
+    }
+    if (response.data.countyId) {
+        promises.push(getTownList2(response.data.countyId));
+    }
+
+    // 等待所有请求完成
+    await Promise.all(promises);
+
+    // 所有请求完成后执行下面的代码
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改商圈";
+}
 /** 取消按钮 */
 const cancel = () => {
     open.value = false

src/views/system/mediaType/index.vue

@@ -11,20 +11,15 @@
             <el-col :span="24">
                <el-button type="primary" class="primaryBtn" @click="handleAddRootNode"
                   v-hasPermi="['system:mediaType:add']">新增根节点</el-button>
-               <!-- <el-button type="primary" class="primaryBtn" @click="toggleExpandAll">展开/折叠</el-button> -->
             </el-col>
          </el-row>
 
-         <el-table v-loading="loading" height="calc(100vh - 244px)" :data="mediaTypeTreeList" row-key="id" lazy
+         <el-table v-loading="loading" ref="tableRef" height="calc(100vh - 244px)" :data="mediaTypeTreeList"
-            :load="loadChildren" :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }">
+            row-key="id" lazy :load="loadChildren" @expand-change="handleExpandChange"
+            :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }">
             <el-table-column prop="name" label="类型名称"></el-table-column>
             <el-table-column prop="value" label="类型标识"></el-table-column>
             <el-table-column prop="sortNo" label="排序"></el-table-column>
-            <!-- <el-table-column label="创建时间" align="center" prop="createTime" min-width="210">
-               <template #default="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
-               </template>
-            </el-table-column> -->
             <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
                <template #default="scope">
                   <el-button link type="primary" @click="handleUpdate(scope.row)"
@@ -76,8 +71,9 @@ const mediaTypeTreeList = ref([])
 const open = ref(false)
 const loading = ref(true)
 const title = ref("")
-const isExpandAll = ref(true)
+
-const refreshTable = ref(true)
+const tableRef = ref();
+const expandedKeys = ref(new Set());
 
 const data = reactive({
    form: {},
@@ -93,38 +89,82 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data)
 
-/** 查询媒体类型树列表 */
+// 辅助方法 - 根据ID查找行
-const getsysMediaTypeTreeList = () => {
+const findRowById = (id, rows = mediaTypeTreeList.value) => {
-   loading.value = true
+   for (const row of rows) {
-   sysMediaTypeListByPid(queryParams.value).then(res => {
+      if (row.id === id) return row;
-      mediaTypeTreeList.value = res.data
+      if (row.childList) {
-      loading.value = false
+         const found = findRowById(id, row.childList);
-   })
+         if (found) return found;
-}
+      }
+   }
+   return null;
+};
 
+// 辅助方法 - 查找父节点ID
+const findParentId = (id, rows = mediaTypeTreeList.value, parentId = 0) => {
+   for (const row of rows) {
+      if (row.id === id) return parentId;
+      if (row.childList) {
+         const found = findParentId(id, row.childList, row.id);
+         if (found) return found;
+      }
+   }
+   return null;
+};
+
+// 辅助方法 - 查找父节点对象
+const findParentNode = (id, rows = mediaTypeTreeList.value, parent = null) => {
+  for (const row of rows) {
+    if (row.id === id) return parent;
+    if (row.childList) {
+      const found = findParentNode(id, row.childList, row);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+// handleExpandChange 
+const handleExpandChange = (row, expanded) => {
+   if (expanded) {
+      expandedKeys.value.add(row.id);
+   } else {
+      expandedKeys.value.delete(row.id);
+   }
+};
+
+/** 查询媒体类型树列表 */
+const getsysMediaTypeTreeList = (parentId = 0) => {
+   loading.value = true;
+   queryParams.value.parentId = parentId;
+   sysMediaTypeListByPid(queryParams.value).then(res => {
+      if (parentId === 0) {
+         mediaTypeTreeList.value = res.data;
+      }
+      loading.value = false;
+   });
+};
 
 // 加载子节点数据的方法
 const loadChildren = async (row, treeNode, resolve) => {
    try {
-      // 调用API获取子节点数据 
+      queryParams.value.parentId = row.id;
-      queryParams.value.parentId = row.id
+      const response = await sysMediaTypeListByPid(queryParams.value);
-      const children = await sysMediaTypeListByPid(queryParams.value)
+      row.childList = response.data; // 更新当前行的子节点
-      // 将子节点数据传递给表格
-      resolve(children.data)
-   } catch (error) {
-      console.error('加载子节点失败:', error)
-      resolve([])
-   }
-}
 
-// /** 展开/折叠操作 */
+      if (expandedKeys.value.has(row.id)) {
-// const toggleExpandAll = () => {
+         nextTick(() => {
-//    refreshTable.value = false
+            tableRef.value?.toggleRowExpansion(row, true);
-//    isExpandAll.value = !isExpandAll.value
+         });
-//    nextTick(() => {
+      }
-//       refreshTable.value = true
+
-//    })
+      resolve(response.data);
-// }
+   } catch (error) {
+      console.error('加载子节点失败:', error);
+      resolve([]);
+   }
+};
 
 /** 表单重置 */
 const reset = () => {
@@ -173,34 +213,104 @@ const cancel = () => {
 const submitForm = () => {
    proxy.$refs["mediaTypeRef"].validate(valid => {
       if (valid) {
-         if (form.value.id != undefined) {
+         const saveExpanded = new Set(expandedKeys.value);
-            updateSysMediaType(form.value).then(response => {
+         const isEdit = !!form.value.id;
-               proxy.$modal.msgSuccess("修改成功")
-               open.value = false
-               getsysMediaTypeTreeList()
-            })
-         } else {
-            addSysMediaType(form.value).then(response => {
-               proxy.$modal.msgSuccess("新增成功")
-               open.value = false
-               getsysMediaTypeTreeList()
-            })
-         }
-      }
-   })
-}
 
+         const operation = isEdit
+            ? updateSysMediaType(form.value)
+            : addSysMediaType(form.value);
+
+         operation.then(response => {
+            proxy.$modal.msgSuccess(isEdit ? "修改成功" : "新增成功");
+            open.value = false;
+
+            if (isEdit) {
+               // 方法1：强制更新响应式数据
+               const updatedRow = findRowById(form.value.id);
+               if (updatedRow) {
+                  // 创建新对象确保响应式更新
+                  const newRowData = { ...updatedRow, ...form.value };
+                  Object.assign(updatedRow, newRowData);
+               }
+
+               // 刷新父节点
+               const parentId = findParentId(form.value.id) || 0;
+               if (parentId !== 0) {
+                  getsysMediaTypeTreeList(parentId);
+               }
+            } else {
+               // 新增操作
+               getsysMediaTypeTreeList(form.value.parentId || 0);
+            }
+
+            // 恢复展开状态
+            nextTick(() => {
+               saveExpanded.forEach(id => {
+                  const row = findRowById(id);
+                  if (row) {
+                     tableRef.value?.toggleRowExpansion(row, true);
+                  }
+               });
+            });
+         }).catch(error => {
+            console.error("操作失败:", error);
+         });
+      }
+   });
+};
 /** 删除按钮操作 */
-const handleDelete = (row) => {
+const handleDelete = async (row) => {
-   proxy.$modal.confirm('是否确认删除媒体类型名称为"' + row.name + '"的数据项?').then(function () {
+  try {
-      return deleteSysMediaType(row.id)
+    await proxy.$modal.confirm(`是否确认删除媒体类型名称为"${row.name}"的数据项?`);
-   }).then(() => {
+    
-      mediaTypeTreeList.value = []
+    // 1. 保存当前展开状态
-      queryParams.value.parentId = 0
+    const saveExpanded = new Set(expandedKeys.value);
-      getsysMediaTypeTreeList()
+    // 2. 查找父节点
-      proxy.$modal.msgSuccess("删除成功")
+    const parentNode = findParentNode(row.id);
-   }).catch(() => { })
+    
-}
+    // 3. 执行删除API
+    await deleteSysMediaType(row.id);
+    
+    // 4. 从展开状态中移除被删除的节点
+    saveExpanded.delete(row.id);
+    expandedKeys.value = new Set(saveExpanded);
+    
+    // 5. 更新数据
+    if (!parentNode) {
+      // 删除的是根节点 - 重新加载整个树
+      mediaTypeTreeList.value = [];
+      await getsysMediaTypeTreeList();
+    } else {
+      // 删除的是子节点 - 更新父节点的childList
+      const index = parentNode.childList.findIndex(item => item.id === row.id);
+      if (index !== -1) {
+        parentNode.childList.splice(index, 1); // 响应式删除
+        
+        // 强制表格更新
+        nextTick(() => {
+          tableRef.value?.doLayout();
+        });
+      }
+    }
+    
+    proxy.$modal.msgSuccess("删除成功");
+    
+    // 6. 恢复展开状态
+    nextTick(() => {
+      saveExpanded.forEach(id => {
+        const row = findRowById(id);
+        if (row) {
+          tableRef.value?.toggleRowExpansion(row, true);
+        }
+      });
+    });
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error);
+      proxy.$modal.msgError("删除失败");
+    }
+  }
+};
 
 // 初始化
 onMounted(() => {