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();
+  const res = await getAllDeptTree(0);
-  deptOptions.value = res.data.records;
+  deptOptions.value = res.data;
 };
 // 角色数据
 const roleOptions = ref();

src/views/system/user/index.vue

@@ -1,224 +1,245 @@
 <template>
   <div class="container">
     <Breadcrumb :items="['系统管理', '用户管理']" />
-    <a-card class="general-card" title=" ">
+    <a-row>
-      <a-row>
+      <a-col :span="5">
-        <a-col :flex="1">
+        <a-card style="margin-right: 10px;">
-          <a-form
+          <DeptTree @select="handleSelectDept"/>
-            :model="formModel"
+<!--          <a-input-search :style="{marginBottom:'10px'}" placeholder="搜索"/>-->
-            :label-col-props="{ span: 6 }"
+<!--          <a-tree-->
-            :wrapper-col-props="{ span: 18 }"
+<!--            :data="deptTreeData"-->
-            label-align="right"
+<!--            :default-expand-all="true"-->
-          >
+<!--            :field-names="{ title: 'name', key: 'id', children: 'children' }"-->
-            <a-row :gutter="18">
+<!--            style="margin-bottom: 8px; max-width: 240px"-->
-              <a-col :span="9">
+<!--            @select="handleClickTree"-->
-                <a-form-item
+<!--            @check="handleCheckTree"-->
-                  field="username"
+<!--          >-->
-                  :label="$t('searchTable.form.username')"
+<!--          </a-tree>-->
-                >
-                  <a-input
-                    v-model="formModel.username"
-                    :placeholder="$t('searchTable.form.username.placeholder')"
-                  />
-                </a-form-item>
-              </a-col>
 
-              <a-col :span="9">
+        </a-card>
-                <a-form-item
+      </a-col>
-                  field="phone"
+      <a-col :span="19">
-                  :label="$t('searchTable.form.phone')"
+        <a-card class="general-card" title=" ">
-                >
+          <a-row>
-                  <a-input
+            <a-col :flex="1">
-                    v-model="formModel.phone"
+              <a-form
-                    :placeholder="$t('searchTable.form.phone.placeholder')"
+                :model="formModel"
-                  />
+                :label-col-props="{ span: 6 }"
-                </a-form-item>
+                :wrapper-col-props="{ span: 18 }"
-              </a-col>
+                label-align="right"
-              <a-col :span="9">
+              >
-                <a-form-item
+                <a-row :gutter="18">
-                  field="email"
+                  <a-col :span="9">
-                  :label="$t('searchTable.form.email')"
+                    <a-form-item
-                >
+                      field="username"
-                  <a-input
+                      :label="$t('searchTable.form.username')"
-                    v-model="formModel.email"
+                    >
-                    :placeholder="$t('searchTable.form.email.placeholder')"
+                      <a-input
-                  />
+                        v-model="formModel.username"
-                </a-form-item>
+                        :placeholder="$t('searchTable.form.username.placeholder')"
-              </a-col>
+                      />
-              <a-col :span="9">
+                    </a-form-item>
-                <a-form-item
+                  </a-col>
-                  field="enable"
-                  :label="$t('searchTable.form.status')"
-                >
-                  <a-select
-                    v-model="formModel.enable"
-                    :options="statusOptions"
-                    :placeholder="$t('searchTable.form.status.placeholder')"
-                  />
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
-        </a-col>
-        <a-divider style="height: 84px" direction="vertical" />
-        <a-col :flex="'86px'" style="text-align: right">
-          <a-space direction="vertical" :size="18">
-            <a-button type="primary" @click="search">
-              <template #icon>
-                <icon-search />
-              </template>
-              {{ $t('searchTable.form.search') }}
-            </a-button>
-            <a-button @click="reset">
-              <template #icon>
-                <icon-refresh />
-              </template>
-              {{ $t('searchTable.form.reset') }}
-            </a-button>
-          </a-space>
-        </a-col>
-      </a-row>
 
-      <a-divider style="margin-top: 0" />
+                  <a-col :span="9">
-      <a-row>
+                    <a-form-item
-        <a-col :span="12">
+                      field="phone"
-          <a-space>
+                      :label="$t('searchTable.form.phone')"
-            <UserEdit ref="createUserRef" :is-create="true" @refresh="search" />
+                    >
-          </a-space>
+                      <a-input
-          <a-button style="margin-left: 20px" @click="generateExcel">
+                        v-model="formModel.phone"
-            <template #icon>
+                        :placeholder="$t('searchTable.form.phone.placeholder')"
-              <icon-download size="18" />
+                      />
-            </template>
+                    </a-form-item>
-            {{ $t('searchTable.operation.download') }}
+                  </a-col>
-          </a-button>
+                  <a-col :span="9">
-        </a-col>
+                    <a-form-item
-        <a-col
+                      field="email"
-          :span="12"
+                      :label="$t('searchTable.form.email')"
-          style="
+                    >
+                      <a-input
+                        v-model="formModel.email"
+                        :placeholder="$t('searchTable.form.email.placeholder')"
+                      />
+                    </a-form-item>
+                  </a-col>
+                  <a-col :span="9">
+                    <a-form-item
+                      field="enableState"
+                      :label="$t('searchTable.form.status')"
+                    >
+                      <a-select
+                        v-model="formModel.enableState"
+                        :options="statusOptions"
+                        :placeholder="$t('searchTable.form.status.placeholder')"
+                      />
+                    </a-form-item>
+                  </a-col>
+                </a-row>
+              </a-form>
+            </a-col>
+            <a-divider style="height: 84px" direction="vertical" />
+            <a-col :flex="'86px'" style="text-align: right">
+              <a-space direction="vertical" :size="18">
+                <a-button type="primary" @click="search">
+                  <template #icon>
+                    <icon-search />
+                  </template>
+                  {{ $t('searchTable.form.search') }}
+                </a-button>
+                <a-button @click="reset">
+                  <template #icon>
+                    <icon-refresh />
+                  </template>
+                  {{ $t('searchTable.form.reset') }}
+                </a-button>
+              </a-space>
+            </a-col>
+          </a-row>
+
+          <a-divider style="margin-top: 0" />
+          <a-row>
+            <a-col :span="12">
+              <a-space>
+                <UserEdit ref="createUserRef" :is-create="true" @refresh="search" />
+              </a-space>
+              <a-button style="margin-left: 20px" @click="generateExcel">
+                <template #icon>
+                  <icon-download size="18" />
+                </template>
+                {{ $t('searchTable.operation.download') }}
+              </a-button>
+            </a-col>
+            <a-col
+              :span="12"
+              style="
             display: flex;
             align-items: center;
             justify-content: end;
             padding-bottom: 20px;
           "
-        >
-          <a-tooltip :content="$t('searchTable.actions.refresh')">
-            <div class="action-icon" @click="search">
-              <icon-refresh size="18" />
-            </div>
-          </a-tooltip>
-
-          <a-dropdown @select="handleSelectDensity">
-            <a-tooltip :content="$t('searchTable.actions.density')">
-              <div class="action-icon"><icon-line-height size="18" /></div>
-            </a-tooltip>
-            <template #content>
-              <a-doption
-                v-for="item in densityList"
-                :key="item.value"
-                :value="item.value"
-                :class="{ active: item.value === size }"
-              >
-                <span>{{ item.name }}</span>
-              </a-doption>
-            </template>
-          </a-dropdown>
-
-          <a-tooltip :content="$t('searchTable.actions.columnSetting')">
-            <a-popover
-              trigger="click"
-              position="bl"
-              @popup-visible-change="popupVisibleChange"
             >
-              <div class="action-icon"><icon-settings size="18" /></div>
+              <a-tooltip :content="$t('searchTable.actions.refresh')">
-              <template #content>
+                <div class="action-icon" @click="search">
-                <div id="tableSetting">
+                  <icon-refresh size="18" />
-                  <div
+                </div>
-                    v-for="(item, index) in showColumns"
+              </a-tooltip>
-                    :key="item.dataIndex"
+
-                    class="setting"
+              <a-dropdown @select="handleSelectDensity">
+                <a-tooltip :content="$t('searchTable.actions.density')">
+                  <div class="action-icon"><icon-line-height size="18" /></div>
+                </a-tooltip>
+                <template #content>
+                  <a-doption
+                    v-for="item in densityList"
+                    :key="item.value"
+                    :value="item.value"
+                    :class="{ active: item.value === size }"
                   >
-                    <div style="margin-right: 4px; cursor: move">
+                    <span>{{ item.name }}</span>
-                      <icon-drag-arrow />
+                  </a-doption>
-                    </div>
+                </template>
-                    <div>
+              </a-dropdown>
-                      <a-checkbox
+
-                        v-model="item.checked"
+              <a-tooltip :content="$t('searchTable.actions.columnSetting')">
-                        @change="
+                <a-popover
+                  trigger="click"
+                  position="bl"
+                  @popup-visible-change="popupVisibleChange"
+                >
+                  <div class="action-icon"><icon-settings size="18" /></div>
+                  <template #content>
+                    <div id="tableSetting">
+                      <div
+                        v-for="(item, index) in showColumns"
+                        :key="item.dataIndex"
+                        class="setting"
+                      >
+                        <div style="margin-right: 4px; cursor: move">
+                          <icon-drag-arrow />
+                        </div>
+                        <div>
+                          <a-checkbox
+                            v-model="item.checked"
+                            @change="
                           handleChange($event, item as TableColumnData, index)
                         "
-                      >
+                          >
-                      </a-checkbox>
+                          </a-checkbox>
+                        </div>
+                        <div class="title">
+                          {{ item.title === '#' ? '序列号' : item.title }}
+                        </div>
+                      </div>
                     </div>
-                    <div class="title">
+                  </template>
-                      {{ item.title === '#' ? '序列号' : item.title }}
+                </a-popover>
-                    </div>
+              </a-tooltip>
-                  </div>
+            </a-col>
-                </div>
+          </a-row>
-              </template>
-            </a-popover>
-          </a-tooltip>
-        </a-col>
-      </a-row>
 
-      <a-table
+          <a-table
-        row-key="id"
+            row-key="id"
-        :loading="loading"
+            :loading="loading"
-        :pagination="false"
+            :pagination="true"
-        :columns="(cloneColumns as TableColumnData[])"
+            :columns="(cloneColumns as TableColumnData[])"
-        :data="renderData"
+            :data="renderData"
-        :bordered="false"
+            :bordered="false"
-        :size="size"
+            :size="size"
-        style="margin-bottom: 40px"
+            style="margin-bottom: 40px"
-        :filter-icon-align-left="alignLeft"
+            :filter-icon-align-left="alignLeft"
-        @change="handleSortChange"
+            @change="handleSortChange"
-        @page-change="onPageChange"
+            @page-change="onPageChange"
-      >
-        <template #index="{ rowIndex }">
-          {{ rowIndex + 1 + (pagination.current - 1) * pagination.size }}
-        </template>
-        <template #enabled="{ record }">
-          <a-switch
-            :model-value="record.enabled"
-            :checked-value="true"
-            :unchecked-value="false"
-            @change="enabledStatus(record)"
-          />
-        </template>
-        <template #operations="{ record }">
-          <UserEdit
-            ref="editUserRef"
-            :prem="record"
-            :is-create="false"
-            @refresh="fetchData"
-          />
-<!--          <Userc-->
-<!--            ref="editUserRef"-->
-<!--            :user="record"-->
-<!--            :is-create="false"-->
-<!--            @refresh="search"-->
-<!--          />-->
-          <!-- <a-popconfirm
-            content="确认删除此用户?"
-            type="error"
-            @ok="handleDelete(record)"
           >
-            <a-button type="primary" status="danger" size="small">
+            <template #index="{ rowIndex }">
-              删除
+              {{ rowIndex + 1 + (pagination.current - 1) * pagination.size }}
-            </a-button>
+            </template>
-          </a-popconfirm> -->
+            <template #enableState="{ record }">
-        </template>
+              <a-switch
-      </a-table>
+                :model-value="record.enableState"
-      <a-pagination
+                :checked-value="true"
-        style="float: right; position: relative; right: 1px; bottom: 25px"
+                :unchecked-value="false"
-        :total="pagination.total"
+                @change="enabledStatus(record)"
-        :size="size"
+              />
-        show-total
+            </template>
-        show-jumper
+            <template #operations="{ record }">
-        show-page-size
+              <UserEdit
-        @page-size-change="onSizeChange"
+                ref="editUserRef"
-        @change="onPageChange"
+                :prem="record"
-      />
+                :is-create="false"
-    </a-card>
+                @refresh="fetchData"
+              />
+              <!--          <Userc-->
+              <!--            ref="editUserRef"-->
+              <!--            :user="record"-->
+              <!--            :is-create="false"-->
+              <!--            @refresh="search"-->
+              <!--          />-->
+              <!-- <a-popconfirm
+                content="确认删除此用户?"
+                type="error"
+                @ok="handleDelete(record)"
+              >
+                <a-button type="primary" status="danger" size="small">
+                  删除
+                </a-button>
+              </a-popconfirm> -->
+            </template>
+          </a-table>
+<!--          <a-pagination
+            style="float: right; position: relative; right: 1px; bottom: 25px"
+            :total="pagination.total"
+            :size="size"
+            show-total
+            show-jumper
+            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',
+    dataIndex: 'enableState',
-    slotName: 'enabled',
+    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;