From 4f0295acb1497e08e6a665fee340304b441619cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8C=BF=E5=B0=8F=E5=A4=A9?= <1638245306@qq.com>
Date: Sun, 9 Apr 2023 22:26:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86):?=
 =?UTF-8?q?=20=E2=99=BB=EF=B8=8F=20=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/dvadmin/system/views/dept.py |   1 +
 web/src/views/system/user/api.ts     |   9 ++
 web/src/views/system/user/crud.tsx   |  19 ++-
 web/src/views/system/user/index.vue  | 178 +++++++++++++--------------
 4 files changed, 113 insertions(+), 94 deletions(-)

diff --git a/backend/dvadmin/system/views/dept.py b/backend/dvadmin/system/views/dept.py
index c5179d0..e362bd0 100644
--- 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
diff --git a/web/src/views/system/user/api.ts b/web/src/views/system/user/api.ts
index aa00f9e..fb96384 100644
--- 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,
diff --git a/web/src/views/system/user/crud.tsx b/web/src/views/system/user/crud.tsx
index 9825255..f86143f 100644
--- 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,
diff --git a/web/src/views/system/user/index.vue b/web/src/views/system/user/index.vue
index 7d130b6..c6fe04d 100644
--- a/web/src/views/system/user/index.vue
+++ b/web/src/views/system/user/index.vue
@@ -1,124 +1,116 @@
 <template>
-	<fs-page>
-		<el-row class="mx-2">
-			<el-col :span="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-tooltip>
-					</p>
-					<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"
-					>
-						<template #default="{ node, data }">
-							<span class="text-center font-black text-xl">{{ node.label }}</span>
-						</template>
-					</el-tree>
-				</el-card>
-			</el-col>
-			<el-col :span="20" class="p-1">
-				<el-card :body-style="{ height: '100%' }">
-					<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-				</el-card>
-			</el-col>
-		</el-row>
-	</fs-page>
+  <fs-page>
+    <el-row class="mx-2">
+      <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-tooltip>
+          </p>
+          <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"
+              icon="ArrowRightBold"
+              :indent="12"
+              @node-click="onTreeNodeClick"
+          >
+            <template #default="{ node, data }">
+              <span class="text-center font-black text-xl">{{ node.label }}</span>
+            </template>
+          </el-tree>
+        </el-card>
+      </el-col>
+      <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>
+
+        </el-card>
+      </el-col>
+    </el-row>
+  </fs-page>
 </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;
-	name: string;
-	status: boolean;
-	children?: Tree[];
+  id: number;
+  name: string;
+  status: boolean;
+  children?: Tree[];
 }
 
 interface APIResponseData {
-	code?: number;
-	data: [];
-	msg?: string;
+  code?: number;
+  data: [];
+  msg?: string;
 }
 
 // 引入组件
-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;
-		}
-	},
+  children: 'children',
+  label: 'name',
+  icon: 'icon'
 };
 
 watch(filterText, (val) => {
-	treeRef.value!.filter(val);
+  treeRef.value!.filter(val);
 });
 
 const filterNode = (value: string, data: Tree) => {
-	if (!value) return true;
-	return toRaw(data).name.indexOf(value) !== -1;
+  if (!value) return true;
+  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) => {
-		const responseData = ret.data;
-		const result = XEUtils.toArrayTree(responseData, {
-			parentKey: 'parent',
-			children: 'children',
-			strict: true,
-		});
-		data.value = result;
-	});
+  api.GetDept({}).then((ret: APIResponseData) => {
+    const responseData = ret.data;
+    const result = XEUtils.toArrayTree(responseData, {
+      parentKey: 'parent',
+      children: 'children',
+      strict: true
+    });
+    console.log(result)
+    data.value = result;
+  });
 };
 
+//树形点击事件
+const onTreeNodeClick = (node: any) => {
+  const {id} = node
+  crudExpose.doSearch({form: {dept: id}})
+}
+
 // 页面打开后获取列表数据
 onMounted(() => {
-	getData();
+  getData();
 });
 
 // crud组件的ref
@@ -126,28 +118,28 @@ 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(() => {
-	crudExpose.doRefresh();
+  crudExpose.doRefresh();
 });
 </script>
 
 <style lang="scss" scoped>
 .el-row {
-	height: 100%;
+  height: 100%;
 
-	.el-col {
-		height: 100%;
-	}
+  .el-col {
+    height: 100%;
+  }
 }
 
 .el-card {
-	height: 100%;
+  height: 100%;
 }
 </style>