提交行政区域分级加载代码

src/api/system/administrativeRegion.js

@@ -8,6 +8,15 @@ export function sysRegionTreeList(query) {
     data: query
   })
 }
+// 依据父级id获取行政区划数据
+export function sysRegionListByPid(query) {
+  return request({
+    url: '/admin/sysRegion/listByPid',
+    method: 'post',
+    data: query
+  })
+}
+
 
 // 新增行政区划
 export function addSysRegion(data) {

src/views/system/administrativeRegion/index.vue

@@ -16,7 +16,7 @@
          </el-row>
 
          <el-table v-if="refreshTable" v-loading="loading" height="calc(100vh - 244px)" :data="regionTreeList"
-            row-key="id" :default-expand-all="isExpandAll" :tree-props="{ children: 'childList' }">
+            row-key="id" lazy :load="loadChildren" :tree-props="{ children: 'childList' }">
             <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>
@@ -64,7 +64,7 @@
 
 <script setup name="Dept">
 import { onMounted, ref } from 'vue';
-import { sysRegionTreeList, addSysRegion, updateSysRegion, getSysRegion, deleteSysRegion } from "@/api/system/administrativeRegion"
+import { sysRegionListByPid, addSysRegion, updateSysRegion, getSysRegion, deleteSysRegion } from "@/api/system/administrativeRegion"
 import { useBackgroundStore } from '@/store/modules/background'
 import otherbg from '@/assets/images/otherbg.png'
 const bgStore = useBackgroundStore()
@@ -81,6 +81,9 @@ const refreshTable = ref(true)
 
 const data = reactive({
    form: {},
+   queryParams: {
+      listByPid: '0'
+   },
    rules: {
       name: [{ required: true, message: "区域名称不能为空", trigger: "blur" }],
       code: [{ required: true, message: "区域编号不能为空", trigger: "blur" }],
@@ -88,17 +91,32 @@ const data = reactive({
    },
 })
 
-const { form, rules } = toRefs(data)
+const { queryParams, form, rules } = toRefs(data)
 
 /** 查询行政区域树列表 */
 const getsysRegionTreeList = () => {
    loading.value = true
-   sysRegionTreeList().then(res => {
+   sysRegionListByPid(queryParams.value).then(res => {
       regionTreeList.value = res.data
       loading.value = false
    })
 }
  
+// 加载子节点数据的方法
+const loadChildren = async (row, treeNode, resolve) => {
+  try {
+    // 调用API获取子节点数据
+   //  const children = await fetchChildrenData(row.id)
+    queryParams.value.listByPid = row.id
+    const children = await sysRegionListByPid(queryParams.value)
+    // 将子节点数据传递给表格
+    resolve(children.data)
+  } catch (error) {
+    console.error('加载子节点失败:', error)
+    resolve([])
+  }
+}
+
 /** 展开/折叠操作 */
 const toggleExpandAll = () => {
    refreshTable.value = false

src/views/system/user/index.vue

@@ -59,15 +59,17 @@
         @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="50" align="center" />
         <!-- <el-table-column label="用户编号" align="center" key="userId" prop="userId"  /> -->
-        <el-table-column label="用户登录名" align="left" key="userName" prop="userName" :show-overflow-tooltip="true" />
+        <el-table-column label="用户登录名" align="left" key="userName" prop="userName" min-width="150" :show-overflow-tooltip="true" />
-        <el-table-column label="用户姓名" align="left" key="realName" prop="realName" :show-overflow-tooltip="true" />
+        <el-table-column label="用户姓名" align="left" key="realName" prop="realName" min-width="150" :show-overflow-tooltip="true" />
         <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" width="150"
           :show-overflow-tooltip="true" />
-        <el-table-column label="岗位" align="center" key="postName" prop="postName" width="120" />
+        <el-table-column label="岗位" align="center" key="postName" prop="postName" width="130"
-        <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
+          :show-overflow-tooltip="true" />
-        <el-table-column label="座机电话" align="center" key="tel" prop="tel" width="120" />
+        <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="160"
-        <el-table-column label="QQ" align="center" key="qqNo" prop="qqNo" width="120" />
+          :show-overflow-tooltip="true" />
-        <el-table-column label="微信" align="center" key="wxNo" prop="wxNo" width="120" />
+        <el-table-column label="座机电话" align="center" key="tel" prop="tel" width="180" :show-overflow-tooltip="true" />
+        <el-table-column label="QQ" align="center" key="qqNo" prop="qqNo" width="180" :show-overflow-tooltip="true" />
+        <el-table-column label="微信" align="center" key="wxNo" prop="wxNo" width="180" :show-overflow-tooltip="true" />
         <el-table-column label="状态" align="center" key="status" width="86">
           <template #default="scope">
             <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
@@ -79,16 +81,23 @@
             <span>{{ parseTime(scope.row.createTime) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="280" class-name="small-padding fixed-width">
+        <el-table-column label="操作" width="58" align="center" fixed="right">
           <template #default="scope">
-            <el-button link type="primary" v-if="scope.row.userId !== 1" @click="handleUpdate(scope.row)"
+            <el-popover popper-class="my_popover" placement="left-start">
-              v-hasPermi="['system:user:edit']">修改</el-button>
+              <div class="popBtns" v-if="scope.row.userId !== 1" @click="handleUpdate(scope.row)"
-            <el-button link type="primary" v-if="scope.row.userId !== 1" @click="handleDelete(scope.row)"
+                v-hasPermi="['system:user:edit']">修改</div>
-              v-hasPermi="['system:user:remove']">删除</el-button>
+              <div class="popBtns" v-if="scope.row.userId !== 1" @click="handleDelete(scope.row)"
-            <el-button link type="primary" v-if="scope.row.userId !== 1" @click="handleResetPwd(scope.row)"
+                v-hasPermi="['system:user:remove']">删除</div>
-              v-hasPermi="['system:user:resetPwd']">重置密码</el-button>
+              <div class="popBtns" v-if="scope.row.userId !== 1" @click="handleResetPwd(scope.row)"
-            <el-button link type="primary" v-if="scope.row.userId !== 1" @click="handleAuthRole(scope.row)"
+                v-hasPermi="['system:user:resetPwd']">重置密码</div>
-              v-hasPermi="['system:user:edit']">分配角色</el-button>
+              <div class="popBtns" v-if="scope.row.userId !== 1" @click="handleAuthRole(scope.row)"
+                v-hasPermi="['system:user:edit']">分配角色</div>
+              <template #reference>
+                <img style="cursor: pointer;" :src="scope.row.currentImageSrc"
+                  @mouseenter="scope.row.currentImageSrc = hoverImageSrc"
+                  @mouseleave="scope.row.currentImageSrc = defaultImageSrc" />
+              </template>
+            </el-popover>
           </template>
         </el-table-column>
       </el-table>
@@ -245,6 +254,8 @@ import { getToken } from "@/utils/auth"
 import useAppStore from '@/store/modules/app'
 import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
 import { Search } from '@element-plus/icons-vue'
+import optionIcon from '@/assets/images/optionIcon.png'
+import optionIconHover from '@/assets/images/optionIconHover.png'
 import "splitpanes/dist/splitpanes.css"
 import { useBackgroundStore } from '@/store/modules/background'
 import otherbg from '@/assets/images/otherbg.png'
@@ -255,6 +266,8 @@ const appStore = useAppStore()
 const { proxy } = getCurrentInstance()
 const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")
 
+const defaultImageSrc = ref(optionIcon);
+const hoverImageSrc = ref(optionIconHover);
 const userList = ref([])
 const open = ref(false)
 const loading = ref(true)
@@ -326,6 +339,9 @@ function getList() {
   loading.value = true
   listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
     loading.value = false
+    res.rows.forEach(item => {
+      item.currentImageSrc = defaultImageSrc.value
+    });
     userList.value = res.rows
     total.value = res.total
   })