feat(部门管理): 部门信息布局完成

web/src/views/system/dept/components/DeptUserCom/crud.tsx

@@ -113,11 +113,31 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 						columnSetDisabled: true, //禁止在列设置中选择
 					},
 				},
-				username: {
-					title: '账号',
+				search: {
+					title: '关键词',
+					column: {
+						show: false,
+					},
 					search: {
 						show: true,
+						component: {
+							props: {
+								clearable: true,
+							},
+							placeholder: '请输入关键词',
+						},
 					},
+					form: {
+						show: false,
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
+					},
+				},
+				username: {
+					title: '账号',
 					type: 'input',
 					column: {
 						minWidth: 100, //最小列宽
@@ -167,9 +187,6 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 				},
 				name: {
 					title: '姓名',
-					search: {
-						show: true,
-					},
 					type: 'input',
 					column: {
 						minWidth: 100, //最小列宽
@@ -273,9 +290,6 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 				},
 				mobile: {
 					title: '手机号码',
-					search: {
-						show: true,
-					},
 					type: 'input',
 					column: {
 						minWidth: 120, //最小列宽

web/src/views/system/dept/components/DeptUserCom/index.vue

@@ -1,16 +1,43 @@
 <template>
-  <fs-crud ref="crudRef" v-bind="crudBinding">
-    <template #actionbar-right>
-      <importExcel api="api/system/user/">导入 </importExcel>
-    </template>
-  </fs-crud>
+	<div class="dept-user-com-box dept-info">
+		<div class="di-left">
+			<div class="di-cell">
+				<h3>技术部</h3>
+				<!-- <el-switch
+							v-model="isShowChildFlag"
+							inline-prompt
+							active-text="是"
+							inactive-text="否"
+							style="--el-switch-on-color: var(--el-color-primary)"
+						/> -->
+			</div>
+			<div class="di-cell">
+				<p>部门人数：10人</p>
+				<p class="di-margin">部门负责人：test</p>
+			</div>
+			<p>部门简介：</p>
+		</div>
+		<div style="height: 100px; width: 150px" ref="deptSexPie"></div>
+		<div class="dept-split">
+			<div class="ds-line"></div>
+		</div>
+	</div>
+	<fs-crud ref="crudRef" v-bind="crudBinding" customClass="dept-user-com-box dept-user-com-table">
+		<!-- -->
+		<template #actionbar-right>
+			<importExcel api="api/system/user/">导入 </importExcel>
+		</template>
+	</fs-crud>
 </template>
 
 <script lang="ts" setup name="user">
 import { ref, onMounted } from 'vue';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-import importExcel from '/@/components/importExcel/index.vue'
+import importExcel from '/@/components/importExcel/index.vue';
+import { ECharts, EChartsOption, init } from 'echarts';
+
+let chart: ECharts;
 
 // crud组件的ref
 const crudRef = ref();
@@ -22,40 +49,102 @@ const { crudExpose } = useExpose({ crudRef, crudBinding });
 const { crudOptions } = createCrudOptions({ crudExpose });
 // 初始化crud配置
 const { resetCrudOptions } = useCrud({
-  crudExpose, crudOptions,
-  context: {}
+	crudExpose,
+	crudOptions,
+	context: {},
 });
 
+let deptSexPie = ref();
+let isShowChildFlag = ref(false);
+
 /**
  * 部门切换刷新用户列表
  */
 const handleDoRefreshUser = (id: string) => {
-  crudExpose.doSearch({ form: { dept: id } });
-}
+	crudExpose.doSearch({ form: { dept: id } });
+};
+
+/**
+ * 初始化顶部性别统计
+ */
+const initDeptSexPieChart = () => {
+	const option: EChartsOption = {
+		tooltip: {
+			trigger: 'item',
+		},
+		legend: {
+			orient: 'vertical',
+			right: '0%',
+			left: '58%',
+			top: 'center',
+			itemWidth: 12,
+			itemHeight: 12,
+		},
+		series: [
+			{
+				type: 'pie',
+				radius: '65%',
+				center: ['35%', '50%'],
+				label: {
+					show: false,
+					position: 'center',
+				},
+				color: ['#51A3FC', '#E790E8', '#dcdfe6'],
+				data: [
+					{ value: 1048, name: '男' },
+					{ value: 735, name: '女' },
+					{ value: 580, name: '未知' },
+				],
+			},
+		],
+	};
+	chart.setOption(option);
+};
 
 onMounted(() => {
-  crudExpose.doRefresh();
+	crudExpose.doRefresh();
+	chart = init(deptSexPie.value as HTMLElement);
+	initDeptSexPieChart();
 });
 
 defineExpose({
-  handleDoRefreshUser
-})
+	handleDoRefreshUser,
+});
 </script>
 
 <style lang="scss" scoped>
-.el-row {
-  height: 100%;
-
-  .el-col {
-    height: 100%;
-  }
+.dept-user-com-box {
+	padding: 0 10px;
+	border-radius: 8px 0 0 8px;
+	box-sizing: border-box;
+	background-color: #fff;
 }
-
-.el-card {
-  height: 100%;
+.dept-user-com-table {
+	height: calc(100% - 200px);
 }
+.dept-info {
+	width: 100%;
+	height: 200px;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	margin-bottom: 10px;
 
-.font-normal {
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+	.di-left {
+		h3 {
+			font-size: 18px;
+			font-weight: 900;
+		}
+		.di-cell {
+			display: flex;
+			align-items: center;
+		}
+		.di-margin {
+			margin-left: 20px;
+		}
+		p {
+			margin-top: 6px;
+		}
+	}
 }
 </style>