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

2023-08-01 18:29:31 +08:00
parent 98b81a789d
commit 7c72cc74df
5 changed files with 150 additions and 45 deletions
--- a/web/.env.development
+++ b/web/.env.development
@@ -3,7 +3,7 @@ ENV = 'development'

 # 本地环境接口地址
 #`VITE_API_URL = 'https://demo.dvadmin.com/api'
-VITE_API_URL = 'http://192.168.1.94:10000'
+VITE_API_URL = 'http://192.168.1.94:1000'

 # 是否启用按钮权限
 VITE_PM_ENABLED = true
--- a/web/src/views/system/dept/components/DeptUserCom/crud.tsx
+++ b/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, //最小列宽
--- a/web/src/views/system/dept/components/DeptUserCom/index.vue
+++ b/web/src/views/system/dept/components/DeptUserCom/index.vue
@@ -1,5 +1,29 @@
 <template>
-  <fs-crud ref="crudRef" v-bind="crudBinding">
+	<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>
@@ -10,7 +34,10 @@
 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 } });
-}
+};
+
+/**
+ * 初始化顶部性别统计
+ */
+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();
+	chart = init(deptSexPie.value as HTMLElement);
+	initDeptSexPieChart();
 });

 defineExpose({
-  handleDoRefreshUser
-})
+	handleDoRefreshUser,
+});
 </script>

 <style lang="scss" scoped>
-.el-row {
-  height: 100%;
+.dept-user-com-box {
+	padding: 0 10px;
+	border-radius: 8px 0 0 8px;
+	box-sizing: border-box;
+	background-color: #fff;
+}
+.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;

-  .el-col {
-    height: 100%;
+	.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;
 		}
 	}
-
-.el-card {
-  height: 100%;
-}
-
-.font-normal {
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
 }
 </style>
--- a/web/src/views/system/dept/index.vue
+++ b/web/src/views/system/dept/index.vue
@@ -128,18 +128,18 @@ onMounted(() => {

 .dept-box {
 	height: 100%;
-	padding: 10px;
-	background-color: #fff;
+	position: relative;
 	box-sizing: border-box;
 }

 .dept-left {
-	position: relative;
+	background-color: #fff;
 	border-radius: 0 8px 8px 0;
+	padding: 10px;
 }

 .dept-table {
-	border-radius: 8px 0 0 8px;
 	margin-left: 10px;
+	padding-bottom: 10px;
 }
 </style>
--- a/web/src/views/system/menu/components/MenuFormCom/index.vue
+++ b/web/src/views/system/menu/components/MenuFormCom/index.vue
@@ -80,13 +80,13 @@
 					<el-input v-model="menuFormData.component_name" placeholder="请输入组件名称" />
 				</el-form-item>

-				<el-form-item v-if="!menuFormData.is_catalog" label="缓存">
-					<el-switch v-model="menuFormData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
-				</el-form-item>
-
 				<el-form-item v-if="!menuFormData.is_catalog && menuFormData.is_link" label="Url" prop="web_path">
 					<el-input v-model="menuFormData.web_path" placeholder="请输入Url" />
 				</el-form-item>
+
+				<el-form-item v-if="!menuFormData.is_catalog" label="缓存">
+					<el-switch v-model="menuFormData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
+				</el-form-item>
 			</div>

 			<el-divider></el-divider>
@@ -128,10 +128,12 @@ const defaultTreeProps: any = {
 };
 const validateWebPath = (rule: any, value: string, callback: Function) => {
 	let pattern = /^\/.*?/;
-	if (!pattern.test(value)) {
-		callback(new Error('请输入正确的地址'));
-	} else {
+	let patternUrl = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
+	const reg = menuFormData.is_link ? patternUrl.test(value) : pattern.test(value);
+	if (reg) {
 		callback();
+	} else {
+		callback(new Error('请输入正确的地址'));
 	}
 };

@@ -145,7 +147,7 @@ const emit = defineEmits(['drawerClose']);
 const formRef = ref<InstanceType<typeof ElForm>>();

 const rules = reactive<FormRules>({
-	web_path: [{ required: true, message: '路由地址请以/开头', validator: validateWebPath, trigger: 'blur' }],
+	web_path: [{ required: true, message: '请输入正确的地址', validator: validateWebPath, trigger: 'blur' }],
 	name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
 	component: [{ required: true, message: '请输入组件地址', trigger: 'blur' }],
 	component_name: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],