perf(用户管理模块): 分页查询改为部门树查询

config/vite.config.dev.ts

@@ -14,7 +14,8 @@ export default mergeConfig(
       proxy: {
         '/api': {
           // target: 'http://8.134.75.234:8081',
-          target: 'http://192.168.3.238:8081',
+          // target: 'http://192.168.3.238:8081',
+          target: 'http://localhost:8081',
           changeOrigin: true,
         },
       },

src/api/dept.ts

@@ -11,6 +11,12 @@ export interface DeptRecord extends DeptCreateRecord {
   id: string;
 }
 
+export interface DeptTreeData {
+  id: number;
+  label: string;
+  children?: DeptTreeData[];
+}
+
 // 获取部门树
 export function getAllDeptTree(id?: number | string) {
   return axios({

src/views/system/user/components/dept-tree.vue

@@ -0,0 +1,110 @@
+<template>
+  <a-input-search
+    v-model="searchKey"
+    placeholder="搜索"
+    style="margin-bottom: 8px; max-width: 240px"
+  />
+  <a-tree
+    :data="treeData"
+    :field-names="{
+              key: 'id',
+              title: 'name',
+              children: 'children',
+            }"
+    @select="handleSelected"
+  >
+    <template #label="nodeData">
+      <template v-if="getMatchIndex(nodeData?.label) < 0">{{ nodeData?.label }}</template>
+      <span v-else>
+    {{ nodeData?.title?.slice(0, index) }}
+    <span style="color: var(--color-primary-light-4);">
+      {{ nodeData?.title?.slice(index, index + searchKey.length) }}
+    </span>
+    {{ nodeData?.title?.slice(index + searchKey.length) }}
+  </span>
+    </template>
+  </a-tree>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import { DeptTreeData,getAllDeptTree } from '@/api/dept';
+  import useLoading from "@/hooks/loading";
+
+  const deptOptions = ref<DeptTreeData[]>([]);
+  const searchKey = ref("");
+  const {loading, setLoading} = useLoading(true);
+  const emit = defineEmits(["select"]);
+
+  // 获取部门树
+  const fetchDeptData = async () => {
+    setLoading(true);
+    try {
+      const {data} = await getAllDeptTree(0);
+      deptOptions.value = data;
+    } finally {
+      setLoading(false);
+    }
+  };
+  fetchDeptData();
+
+  // 获取展开节点 (默认展开两个层级)
+  const getExpandedKeys = computed(() => {
+    const result: number[] = [];
+    deptOptions.value.forEach((it: DeptTreeData) => {
+      result.push(it.id);
+      if (it.children && it.children.length > 0) {
+        it.children.forEach((itc: DeptTreeData) => {
+          result.push(itc.id);
+        });
+      }
+    });
+    return result;
+  });
+
+  function searchData(keyword: string) {
+    const loop = (data: DeptTreeData[]) => {
+      const result: DeptTreeData[] = [];
+      data.forEach((item: DeptTreeData) => {
+        if (item.label.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
+          result.push({...item});
+        } else if (item.children) {
+          const filterData = loop(item.children);
+          if (filterData.length) {
+            result.push({
+              ...item,
+              children: filterData
+            });
+          }
+        }
+      });
+      return result;
+    };
+    return loop(deptOptions.value);
+  }
+
+  const treeData = computed(() => {
+    if (!searchKey.value) return deptOptions.value;
+    return searchData(searchKey.value);
+  });
+
+  function getMatchIndex(title: string) {
+    if (!searchKey.value) return -1;
+    return title.toLowerCase().indexOf(searchKey.value.toLowerCase());
+  }
+
+  const handleSelected = (id: number[]) => {
+    emit("select", id);
+  };
+
+</script>
+
+<script lang="ts">
+  export default {
+    name: "DeptTree"
+  };
+</script>
+
+<style scoped>
+
+</style>

src/views/system/user/components/user-edit.vue

@@ -145,7 +145,7 @@ import { computed, PropType, ref } from 'vue';
 import { CreateRecord } from '@/api/user';
 import { FormInstance } from '@arco-design/web-vue/es/form';
 import { queryRoleList } from '@/api/role';
-import { deptList } from '@/api/dept';
+import { deptList, getAllDeptTree } from '@/api/dept';
 import { Message } from '@arco-design/web-vue';
 import { useUserStore } from '@/store';
 
@@ -184,8 +184,8 @@ const userStore = useUserStore();
 // 部门数据
 const deptOptions = ref();
 const getDeptData = async () => {
-  const res = await deptList();
-  deptOptions.value = res.data.records;
+  const res = await getAllDeptTree(0);
+  deptOptions.value = res.data;
 };
 // 角色数据
 const roleOptions = ref();

src/views/system/user/index.vue

@@ -1,6 +1,24 @@
 <template>
   <div class="container">
     <Breadcrumb :items="['系统管理', '用户管理']" />
+    <a-row>
+      <a-col :span="5">
+        <a-card style="margin-right: 10px;">
+          <DeptTree @select="handleSelectDept"/>
+<!--          <a-input-search :style="{marginBottom:'10px'}" placeholder="搜索"/>-->
+<!--          <a-tree-->
+<!--            :data="deptTreeData"-->
+<!--            :default-expand-all="true"-->
+<!--            :field-names="{ title: 'name', key: 'id', children: 'children' }"-->
+<!--            style="margin-bottom: 8px; max-width: 240px"-->
+<!--            @select="handleClickTree"-->
+<!--            @check="handleCheckTree"-->
+<!--          >-->
+<!--          </a-tree>-->
+
+        </a-card>
+      </a-col>
+      <a-col :span="19">
         <a-card class="general-card" title=" ">
           <a-row>
             <a-col :flex="1">
@@ -47,11 +65,11 @@
                   </a-col>
                   <a-col :span="9">
                     <a-form-item
-                  field="enable"
+                      field="enableState"
                       :label="$t('searchTable.form.status')"
                     >
                       <a-select
-                    v-model="formModel.enable"
+                        v-model="formModel.enableState"
                         :options="statusOptions"
                         :placeholder="$t('searchTable.form.status.placeholder')"
                       />
@@ -163,7 +181,7 @@
           <a-table
             row-key="id"
             :loading="loading"
-        :pagination="false"
+            :pagination="true"
             :columns="(cloneColumns as TableColumnData[])"
             :data="renderData"
             :bordered="false"
@@ -176,9 +194,9 @@
             <template #index="{ rowIndex }">
               {{ rowIndex + 1 + (pagination.current - 1) * pagination.size }}
             </template>
-        <template #enabled="{ record }">
+            <template #enableState="{ record }">
               <a-switch
-            :model-value="record.enabled"
+                :model-value="record.enableState"
                 :checked-value="true"
                 :unchecked-value="false"
                 @change="enabledStatus(record)"
@@ -208,7 +226,7 @@
               </a-popconfirm> -->
             </template>
           </a-table>
-      <a-pagination
+<!--          <a-pagination
             style="float: right; position: relative; right: 1px; bottom: 25px"
             :total="pagination.total"
             :size="size"
@@ -217,8 +235,11 @@
             show-page-size
             @page-size-change="onSizeChange"
             @change="onPageChange"
-      />
+          />-->
         </a-card>
+      </a-col>
+    </a-row>
+
   </div>
 </template>
 
@@ -227,6 +248,7 @@
 import { useI18n } from 'vue-i18n';
 import useLoading from '@/hooks/loading';
 import { UserRecord, UserParams } from '@/api/user';
+import { getAllDeptTree } from '@/api/dept';
 import { Pagination } from '@/types/global';
 import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
 import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
@@ -235,6 +257,7 @@ import { Message } from '@arco-design/web-vue';
 import { downloadExcel, DownloadExcelPrams } from '@/utils/excel';
 import useTableOption from '@/hooks/table-option';
 import UserEdit from './components/user-edit.vue';
+import DeptTree from './components/dept-tree.vue';
 
 const generateFormModel = () => {
   return {
@@ -243,7 +266,8 @@ const generateFormModel = () => {
     phone: '',
     email: '',
     createdTime: [],
-    enable: '',
+    enableState: '',
+    deptId: '',
   };
 };
 
@@ -314,8 +338,8 @@ const columns = computed<TableColumnData[]>(() => [
   },
   {
     title: t('userTable.columns.enabled'),
-    dataIndex: 'enabled',
-    slotName: 'enabled',
+    dataIndex: 'enableState',
+    slotName: 'enableState',
   },
   {
     title: t('searchTable.columns.operations'),
@@ -333,6 +357,7 @@ const statusOptions = computed<SelectOptionData[]>(() => [
     value: 'false',
   },
 ]);
+const deptTreeData = ref<any[]>([]);
 
 // 获取用户列表
 const fetchData = async (
@@ -353,6 +378,14 @@ const fetchData = async (
   }
 };
 
+// 获取部门树
+  const getDeptTree = async () => {
+    const res = await getAllDeptTree(0);
+    if (res.status === 200) {
+      deptTreeData.value = res.data;
+    }
+  }
+
 // 下载表格
 const generateExcel = () => {
   const param: DownloadExcelPrams = {
@@ -363,7 +396,7 @@ const generateExcel = () => {
       { title: '部门Id', key: 'deptId' },
       { title: '角色Id', key: 'roleId' },
       { title: 'email', key: 'email' },
-      { title: '启用状态', key: 'enabled' },
+      { title: '启用状态', key: 'enableState' },
     ],
     rows: renderData.value,
     name: '用户表格',
@@ -374,7 +407,7 @@ const generateExcel = () => {
 // 查询
 const search = () => {
   fetchData({
-    ...pagination,
+    // ...pagination,
     ...formModel.value,
   } as unknown as UserParams);
 };
@@ -394,6 +427,7 @@ const onSizeChange = (size: number) => {
 
 onMounted(() => {
   search();
+  // getDeptTree()
 })
 
 // 重置
@@ -407,7 +441,7 @@ const handleSortChange = (data: any, extra: any, currentDataSource: any) => {};
 
 // 是否启用
 const enabledStatus = async (record: any) => {
-  record.enabled = !record.enabled;
+  record.enableState = !record.enableState;
   const res = await userStore.enabledUser(record.id);
   if (res.status === 200) {
     Message.success({
@@ -421,6 +455,22 @@ const enabledStatus = async (record: any) => {
     });
   }
 };
+  const generateQueryParams = () => {
+    return {
+      pageNum: 1,
+      pageSize: 10,
+      userName: undefined,
+      phonenumber: undefined,
+      status: undefined,
+      deptId: undefined,
+      params: undefined,
+    };
+  };
+  const handleSelectDept = (id: any[]) => {
+    const [deptId] = id;
+    formModel.value.deptId = deptId;
+    search();
+  }
 
 // 删除
 // const handleDelete = async (record: UserRecord) => {
@@ -442,7 +492,6 @@ export default {
   name: 'User',
 };
 </script>
-<!--1-->
 <style scoped lang="less">
 .container {
   padding: 0 20px 20px 20px;