completepage: 🍻 部门页面完成,更新部分文件缺陷

src/api/v1/adminUser.ts

@@ -8,6 +8,14 @@ export const fetchGetAdminUserList = (data: any) => {
 	return http.request<BaseResult<ResultTable>>('get', `user/getAdminUserList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 
+/**
+ * 查询用户
+ * @param data
+ */
+export const fetchQueryUser = (data: any) => {
+	return http.request<BaseResult<object>>('get', 'user/queryUser', { params: data });
+};
+
 /**
  * 用户信息---添加用户信息
  */

src/api/v1/dept.ts

@@ -8,6 +8,13 @@ export const fetchGetDeptList = (data: any) => {
 	return http.request<BaseResult<ResultTable>>('get', `dept/getDeptList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 
+/**
+ * 部门管理---获取所有部门管理列表
+ */
+export const fetchGetAllDeptList = () => {
+	return http.request<BaseResult<object>>('get', 'dept/getAllDeptList');
+};
+
 /**
  * 部门管理---添加部门管理
  */

src/components/Table/TableImage.vue

@@ -13,5 +13,3 @@ defineProps({
 <template>
 	<el-image :initial-index="index" :preview-src-list="[image]" :src="image" class="w-[50px] h-[50px]" fit="fill" loading="lazy" preview-teleported />
 </template>
-
-<style lang="scss" scoped></style>

src/components/Table/Userinfo/UserinfoDialog.vue

@@ -3,7 +3,6 @@ import userAvatarIcon from '@/assets/svg/user_avatar.svg?component';
 import { columns } from './columns';
 import TablePlus from '@/components/TableBar/src/TablePlus.vue';
 import { onMounted, ref } from 'vue';
-import TableImage from '@/components/Table/TableImage.vue';
 import { fetchGetUserinfoById } from '@/api/v1/user';
 import { $t } from '@/plugins/i18n';
 
@@ -48,12 +47,7 @@ onMounted(() => {
 			</el-row>
 
 			<p class="list-card-item_detail--name text-text_color_primary">{{ $t('user_details') }}</p>
-
-			<TablePlus :column="columns" :data-list="[userinfo]" :loading="loading">
-				<template #avatar>
-					<table-image :image="userinfo.avatar" />
-				</template>
-			</TablePlus>
+			<TablePlus :column="columns" :data-list="[userinfo]" :loading="loading" />
 		</div>
 		<el-empty v-else description="无数据" />
 	</div>
@@ -113,9 +107,6 @@ onMounted(() => {
 			line-height: 20px;
 			text-overflow: ellipsis;
 			-webkit-box-orient: vertical;
-		}
-
-		&--desc {
 			-webkit-line-clamp: 2;
 		}
 	}

src/components/Table/Userinfo/columns.tsx

@@ -1,11 +1,16 @@
 import { $t } from '@/plugins/i18n';
 import UserinfoDialog from '@/components/Table/Userinfo/UserinfoDialog.vue';
-import { addDialog } from '@/components/BaseDialog/index'; // 表格列字段
+import { addDialog } from '@/components/BaseDialog/index';
+import TableImage from '@/components/Table/TableImage.vue'; // 表格列字段
 
 // 表格列字段
 export const columns = [
 	{ label: $t('id'), prop: 'id' },
-	{ label: $t('avatar'), prop: 'avatar', slot: 'avatar' },
+	{
+		label: $t('avatar'),
+		prop: 'avatar',
+		cellRenderer: ({ row }) => <TableImage image={row.avatar} />,
+	},
 	{ label: $t('nickName'), prop: 'nickName' },
 	{ label: $t('username'), prop: 'username' },
 	{ label: $t('email'), prop: 'email', width: 180 },

src/components/TableBar/src/TablePlus.vue

@@ -44,5 +44,3 @@ defineProps({
 	},
 });
 </script>
-
-<style lang="scss" scoped></style>

src/store/system/adminUser.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { fetchAddAdminUser, fetchDeleteAdminUser, fetchGetAdminUserList, fetchUpdateAdminUser } from '@/api/v1/adminUser';
+import { fetchAddAdminUser, fetchDeleteAdminUser, fetchGetAdminUserList, fetchQueryUser, fetchUpdateAdminUser } from '@/api/v1/adminUser';
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
@@ -61,6 +61,12 @@ export const useAdminUserStore = defineStore('adminUserStore', {
 			return pagination(result);
 		},
 
+		async queryUser(data: any) {
+			const result = await fetchQueryUser(data);
+			if (result.code !== 200) return [];
+			return result.data;
+		},
+
 		/**
 		 * * 添加用户信息
 		 */

src/store/system/dept.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { fetchAddDept, fetchDeleteDept, fetchGetDeptList, fetchUpdateDept } from '@/api/v1/dept';
+import { fetchAddDept, fetchDeleteDept, fetchGetAllDeptList, fetchGetDeptList, fetchUpdateDept } from '@/api/v1/dept';
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
@@ -12,6 +12,8 @@ export const useDeptStore = defineStore('deptStore', {
 		return {
 			// 部门列表
 			datalist: [],
+			// 所有部门列表
+			allDeptList: [],
 			// 查询表单
 			form: {
 				// 部门名称
@@ -52,6 +54,15 @@ export const useDeptStore = defineStore('deptStore', {
 			return pagination(result);
 		},
 
+		/**
+		 * * 获取所有部门列表
+		 */
+		async getAllDeptList() {
+			const result = await fetchGetAllDeptList();
+			if (result.code !== 200) return;
+			this.allDeptList = result.data;
+		},
+
 		/**
 		 * * 添加部门
 		 */

src/views/i18n/i18n-setting/utils/columns.tsx

@@ -4,8 +4,8 @@ import type { FormRules } from 'element-plus';
 import { $t } from '@/plugins/i18n';
 
 export const columns: TableColumnList = [
-	{ type: 'index', index: (index: number) => index + 1 },
 	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
 	{ label: $t('id'), prop: 'id' },
 	{ label: $t('i18n.keyName'), prop: 'keyName' },
 	{ label: $t('i18n.translation'), prop: 'translation' },

src/views/i18n/i18n-type-setting/utils/columns.tsx

@@ -4,6 +4,7 @@ import { $t } from '@/plugins/i18n';
 export const editMap = ref({});
 
 export const columns: TableColumnList = [
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
 	{ label: $t('id'), prop: 'id' },
 	{ label: $t('i18n_typeName'), prop: 'typeName' },
 	{ label: $t('i18n_summary'), prop: 'summary' },

src/views/system/adminUser/utils/columns.tsx

@@ -6,7 +6,7 @@ export const isAddUserinfo = ref(false);
 
 // 表格列
 export const columns: TableColumnList = [
-	{ type: 'index', index: (index: number) => index + 1 },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
 	// 主键
 	{ label: $t('id'), prop: 'id' },
 	// 用户名

src/views/system/dept/dept-dialog.vue

@@ -1,16 +1,19 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/system/dept/utils/columns';
+import { deptSelector, rules } from '@/views/system/dept/utils/columns';
 import { FormProps } from '@/views/system/dept/utils/types';
 import { $t } from '@/plugins/i18n';
+import { useDeptStore } from '@/store/system/dept';
+import UserSelectSearch from '@/views/system/dept/user-select-search.vue';
+import { handleTree } from '@pureadmin/utils';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
 		// 父级id
 		parentId: undefined,
 		// 管理者id
-		managerId: undefined,
+		manager: undefined,
 		// 部门名称
 		deptName: undefined,
 		// 部门简介
@@ -18,19 +21,24 @@ const props = withDefaults(defineProps<FormProps>(), {
 	}),
 });
 
+const deptStore = useDeptStore();
 const formRef = ref<FormInstance>();
 const form = ref(props.formInline);
 
+onMounted(() => {
+	deptStore.getAllDeptList();
+});
+
 defineExpose({ formRef });
 </script>
 
 <template>
 	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
 		<el-form-item :label="$t('dept_parentId')" prop="parentId">
-			<el-input v-model="form.parentId" autocomplete="off" type="text" />
+			<el-cascader v-model="form.parentId" :options="handleTree(deptStore.allDeptList)" :props="deptSelector" class="w-full" clearable filterable show-all-levels />
 		</el-form-item>
-		<el-form-item :label="$t('dept_managerId')" prop="managerId">
-			<el-input v-model="form.managerId" autocomplete="off" type="text" />
+		<el-form-item :label="$t('dept_manager')" prop="manager">
+			<user-select-search :formInline="form" />
 		</el-form-item>
 		<el-form-item :label="$t('dept_deptName')" prop="deptName">
 			<el-input v-model="form.deptName" autocomplete="off" type="text" />

src/views/system/dept/index.vue

@@ -12,6 +12,7 @@ import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';
 import { useDeptStore } from '@/store/system/dept.ts';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import { handleTree } from '@/utils/tree';
 
 const tableRef = ref();
 const formRef = ref();
@@ -60,9 +61,6 @@ onMounted(() => {
 <template>
 	<div class="main">
 		<el-form ref="formRef" :inline="true" :model="deptStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
-			<el-form-item :label="$t('dept_managerId')" prop="managerId">
-				<el-input v-model="deptStore.form.managerId" :placeholder="`${$t('input')}${$t('dept_managerId')}`" class="!w-[180px]" clearable />
-			</el-form-item>
 			<el-form-item :label="$t('dept_deptName')" prop="deptName">
 				<el-input v-model="deptStore.form.deptName" :placeholder="`${$t('input')}${$t('dept_deptName')}`" class="!w-[180px]" clearable />
 			</el-form-item>
@@ -90,7 +88,7 @@ onMounted(() => {
 					ref="tableRef"
 					:adaptiveConfig="{ offsetBottom: 45 }"
 					:columns="dynamicColumns"
-					:data="deptStore.datalist"
+					:data="handleTree(deptStore.datalist)"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="deptStore.loading"
 					:pagination="deptStore.pagination"

src/views/system/dept/user-select-search.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import { $t } from '@/plugins/i18n';
+import { ref } from 'vue';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { useAdminUserStore } from '@/store/system/adminUser';
+
+// 添加或者修改表单元素
+interface FormItemProps {
+	username: string;
+	manager: string;
+}
+
+// 添加或修改表单Props
+interface FormProps {
+	formInline: FormItemProps;
+}
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({}),
+});
+
+const adminUserStore = useAdminUserStore();
+const loading = ref(false);
+const userDataList = ref([]);
+const form = ref(props.formInline);
+
+/**
+ * * 搜索
+ */
+const onSearchUserinfo = async (keyword: string) => {
+	if (!keyword) return;
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+</script>
+
+<template>
+	<el-select v-model="form.manager" :loading="loading" :placeholder="$t('input')" :remote-method="onSearchUserinfo" clearable filterable multiple remote remote-show-suffix>
+		<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.username" />
+		<template #loading>
+			<el-icon class="is-loading">
+				<LoadingSvg />
+			</el-icon>
+		</template>
+	</el-select>
+</template>
+
+<style>
+.el-select-dropdown__loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100px;
+	font-size: 20px;
+}
+
+.circular {
+	display: inline;
+	width: 30px;
+	height: 30px;
+	animation: loading-rotate 2s linear infinite;
+}
+
+.path {
+	stroke: var(--el-color-primary);
+	stroke-dasharray: 90, 150;
+	stroke-dashoffset: 0;
+	stroke-linecap: round;
+	stroke-width: 2;
+	animation: loading-dash 1.5s ease-in-out infinite;
+}
+
+.loading-path .dot1 {
+	opacity: 0.3;
+	fill: var(--el-color-primary);
+	transform: translate(3.75px, 3.75px);
+	animation: custom-spin-move 1s infinite linear alternate;
+}
+
+.loading-path .dot2 {
+	opacity: 0.3;
+	fill: var(--el-color-primary);
+	transform: translate(calc(100% - 3.75px), 3.75px);
+	animation: custom-spin-move 1s infinite linear alternate;
+	animation-delay: 0.4s;
+}
+
+.loading-path .dot3 {
+	opacity: 0.3;
+	fill: var(--el-color-primary);
+	transform: translate(3.75px, calc(100% - 3.75px));
+	animation: custom-spin-move 1s infinite linear alternate;
+	animation-delay: 1.2s;
+}
+
+.loading-path .dot4 {
+	opacity: 0.3;
+	fill: var(--el-color-primary);
+	transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
+	animation: custom-spin-move 1s infinite linear alternate;
+	animation-delay: 0.8s;
+}
+
+@keyframes loading-rotate {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes loading-dash {
+	0% {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+	}
+
+	50% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -40px;
+	}
+
+	100% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -120px;
+	}
+}
+
+@keyframes custom-spin-move {
+	to {
+		opacity: 1;
+	}
+}
+</style>

src/views/system/dept/utils/columns.ts

@@ -3,17 +3,15 @@ import { $t } from '@/plugins/i18n';
 
 // 表格列
 export const columns: TableColumnList = [
-	{ type: 'index', index: (index: number) => index + 1 },
 	{ type: 'selection', align: 'left' },
-	{ label: $t('id'), prop: 'id' },
-	// 父级id
-	{ label: $t('dept_parentId'), prop: 'parentId' },
-	// 管理者id
-	{ label: $t('dept_managerId'), prop: 'managerId' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
+	{ label: $t('id'), prop: 'id', width: 250 },
 	// 部门名称
-	{ label: $t('dept_deptName'), prop: 'deptName' },
+	{ label: $t('dept_deptName'), prop: 'deptName', width: 160 },
+	// 管理者
+	{ label: $t('dept_manager'), prop: 'manager', width: 200 },
 	// 部门简介
-	{ label: $t('dept_summary'), prop: 'summary' },
+	{ label: $t('dept_summary'), prop: 'summary', width: 360 },
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
@@ -28,3 +26,11 @@ export const rules = reactive({
 	// 部门简介
 	summary: [{ required: true, message: `${$t('input')}${$t('dept_summary')}`, trigger: 'blur' }],
 });
+
+// 部门级联选择器
+export const deptSelector = {
+	value: 'id',
+	label: 'deptName',
+	emitPath: false,
+	checkStrictly: true,
+};

src/views/system/dept/utils/hooks.ts

@@ -29,7 +29,7 @@ export function onAdd(parentId: number = 0) {
 		props: {
 			formInline: {
 				parentId,
-				managerId: undefined,
+				manager: undefined,
 				deptName: undefined,
 				summary: undefined,
 			},
@@ -63,7 +63,7 @@ export function onUpdate(row: any) {
 		props: {
 			formInline: {
 				parentId: row.parentId,
-				managerId: row.managerId,
+				manager: row.manager,
 				deptName: row.deptName,
 				summary: row.summary,
 			},

src/views/system/dept/utils/types.ts

@@ -3,7 +3,7 @@ export interface FormItemProps {
 	// 父级id
 	parentId: string;
 	// 管理者id
-	managerId: string;
+	manager: string[];
 	// 部门名称
 	deptName: string;
 	// 部门简介

src/views/system/menuIcon/menu-icon-select-icon-name.vue

@@ -16,7 +16,7 @@ const form = ref(props.formInline);
 /**
  * * 搜索
  */
-const onRequestIconName = async (iconName: string) => {
+const onRequestIconName = async (keyword: string) => {
 	const data = { currentPage: 1, pageSize: 20, iconName };
 	loading.value = true;
 

src/views/system/menuIcon/utils/columns.ts

@@ -3,8 +3,8 @@ import { $t } from '@/plugins/i18n';
 
 // 表格列
 export const columns: TableColumnList = [
-	{ type: 'index', index: (index: number) => index + 1 },
 	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
 	{ label: $t('id'), prop: 'id' },
 	// icon 类名
 	{ label: $t('menuIcon_iconCode'), prop: 'iconCode', slot: 'iconCode' },

src/views/system/power/utils/columns.ts

@@ -3,8 +3,8 @@ import { $t } from '@/plugins/i18n';
 
 // 表格列
 export const columns: TableColumnList = [
-	{ type: 'index', index: (index: number) => index + 1 },
 	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
 	{ label: $t('id'), prop: 'id' },
 	// 父级id
 	{ label: $t('power_parentId'), prop: 'parentId' },

src/views/system/role/utils/columns.ts

@@ -3,8 +3,8 @@ import { $t } from '@/plugins/i18n';
 
 // 表格列
 export const columns: TableColumnList = [
-	{ type: 'index', index: (index: number) => index + 1 },
 	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
 	{ label: $t('id'), prop: 'id' },
 	// 角色代码
 	{ label: $t('role_roleCode'), prop: 'roleCode' },