refactor(用户管理): ♻️ 用户管理优化

2023-04-09 22:26:26 +08:00
parent 58e611cb22
commit 42884685ff
4 changed files with 113 additions and 94 deletions
--- a/backend/dvadmin/system/views/dept.py
+++ b/backend/dvadmin/system/views/dept.py
@@ -123,6 +123,7 @@ class DeptViewSet(CustomModelViewSet):
        data = serializer.data
        return SuccessResponse(data=data)

+    @action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated], extra_filter_class=[])
    def dept_lazy_tree(self, request, *args, **kwargs):
        parent = self.request.query_params.get('parent')
        is_superuser = request.user.is_superuser
--- a/web/src/views/system/user/api.ts
+++ b/web/src/views/system/user/api.ts
@@ -2,6 +2,15 @@ import { request } from '/@/utils/service';
 import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';

 export const apiPrefix = '/api/system/user/';
+
+export function GetDept(query: PageQuery) {
+    return request({
+        url: "/api/system/dept/dept_lazy_tree/",
+        method: 'get',
+        params: query,
+    });
+}
+
 export function GetList(query: PageQuery) {
    return request({
        url: apiPrefix,
--- a/web/src/views/system/user/crud.tsx
+++ b/web/src/views/system/user/crud.tsx
@@ -63,8 +63,10 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 					search: {
 						show: true,
 					},
-					minWidth: 100,
 					type: 'input',
+					column:{
+						minWidth: 100 //最小列宽
+					},
 					form: {
 						rules: [
 							// 表单校验规则
@@ -114,6 +116,9 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						show: true,
 					},
 					type: 'input',
+					column:{
+						minWidth: 100 //最小列宽
+					},
 					form: {
 						rules: [
 							// 表单校验规则
@@ -147,6 +152,9 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 							});
 						},
 					}),
+					column:{
+						minWidth: 150 //最小列宽
+					},
 					form: {
 						rules: [
 							// 表单校验规则
@@ -190,6 +198,9 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 							});
 						},
 					}),
+					column:{
+						minWidth: 100 //最小列宽
+					},
 					form: {
 						rules: [
 							// 表单校验规则
@@ -211,6 +222,9 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						show: true,
 					},
 					type: 'input',
+					column:{
+						minWidth: 120 //最小列宽
+					},
 					form: {
 						rules: [
 							{
@@ -269,6 +283,9 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 					dict: dict({
 						data: dictionary('user_type'),
 					}),
+					column:{
+						minWidth: 100 //最小列宽
+					},
 					form: {
 						show: false,
 						value: 0,
--- a/web/src/views/system/user/index.vue
+++ b/web/src/views/system/user/index.vue
@@ -1,25 +1,26 @@
 <template>
  <fs-page>
    <el-row class="mx-2">
-			<el-col :span="4" class="p-1">
+      <el-col xs="24" :sm="8" :md="6" :lg="4" :xl="4" class="p-1">
        <el-card :body-style="{ height: '100%' }">
          <p class="font-mono font-black text-center text-xl pb-5">
-						用户列表
+            部门列表
            <el-tooltip effect="dark" :content="content" placement="right">
-							<el-icon> <QuestionFilled /> </el-icon>
+              <el-icon>
+                <QuestionFilled/>
+              </el-icon>
            </el-tooltip>
          </p>
-					<el-input v-model="filterText" :placeholder="placeholder" />
+          <el-input v-model="filterText" :placeholder="placeholder"/>
          <el-tree
              ref="treeRef"
              class="font-mono font-bold leading-6 text-7xl"
              :data="data"
              :props="treeProps"
              :filter-node-method="filterNode"
-						:load="loadNode"
-						lazy
              icon="ArrowRightBold"
              :indent="12"
+              @node-click="onTreeNodeClick"
          >
            <template #default="{ node, data }">
              <span class="text-center font-black text-xl">{{ node.label }}</span>
@@ -27,9 +28,11 @@
          </el-tree>
        </el-card>
      </el-col>
-			<el-col :span="20" class="p-1">
+      <el-col xs="24" :sm="16" :md="18" :lg="20" :xl="20" class="p-1">
        <el-card :body-style="{ height: '100%' }">
-					<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+
+          <fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
+
        </el-card>
      </el-col>
    </el-row>
@@ -37,13 +40,14 @@
 </template>

 <script lang="ts" setup>
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
-import { createCrudOptions } from './crud';
+import {useExpose, useCrud} from '@fast-crud/fast-crud';
+import {createCrudOptions} from './crud';
 import * as api from './api';
-import { ElTree } from 'element-plus';
-import { ref, onMounted, watch, toRaw, defineAsyncComponent } from 'vue';
+import {ElTree} from 'element-plus';
+import {ref, onMounted, watch, toRaw, defineAsyncComponent} from 'vue';
 import XEUtils from 'xe-utils';
-import { errorMessage, successMessage } from '../../../utils/message';
+import {errorMessage, successMessage} from '../../../utils/message';
+import {GetDept} from "./api";

 interface Tree {
  id: number;
@@ -59,22 +63,14 @@ interface APIResponseData {
 }

 // 引入组件
-const placeholder = ref('请输入用户名称');
+const placeholder = ref('请输入部门名称');
 const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();

 const treeProps = {
  children: 'children',
  label: 'name',
-	icon: 'icon',
-	isLeaf: (data: Tree[], node: Node) => {
-		// @ts-ignore
-		if (node.data.hasChild) {
-			return false;
-		} else {
-			return true;
-		}
-	},
+  icon: 'icon'
 };

 watch(filterText, (val) => {
@@ -86,36 +82,32 @@ const filterNode = (value: string, data: Tree) => {
  return toRaw(data).name.indexOf(value) !== -1;
 };

-// 懒加载
-const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
-	// @ts-ignore
-	if (node.level !== 0) {
-		// @ts-ignore
-		api.GetList({ parent: node.data.id }).then((res: APIResponseData) => {
-			resolve(res.data);
-			console.log(res.data);
-		});
-	}
-};

 let data = ref([]);

 const content = `
-1.用户数据支持懒加载;
+1.部门信息;
 `;

 const getData = () => {
-	api.GetList({}).then((ret: APIResponseData) => {
+  api.GetDept({}).then((ret: APIResponseData) => {
    const responseData = ret.data;
    const result = XEUtils.toArrayTree(responseData, {
      parentKey: 'parent',
      children: 'children',
-			strict: true,
+      strict: true
    });
+    console.log(result)
    data.value = result;
  });
 };

+//树形点击事件
+const onTreeNodeClick = (node: any) => {
+  const {id} = node
+  crudExpose.doSearch({form: {dept: id}})
+}
+
 // 页面打开后获取列表数据
 onMounted(() => {
  getData();
@@ -126,11 +118,11 @@ const crudRef = ref();
 // crud 配置的ref
 const crudBinding = ref();
 // 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
+const {crudExpose} = useExpose({crudRef, crudBinding});
 // 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
+const {crudOptions} = createCrudOptions({crudExpose});
 // 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+const {resetCrudOptions} = useCrud({crudExpose, crudOptions});

 // 页面打开后获取列表数据
 onMounted(() => {