page: 📄 部门内容

2024-10-04 10:43:58 +08:00 · 2024-10-04 10:43:58 +08:00 · 26448a7b9f
parent 2c9785d915
commit 26448a7b9f
7 changed files with 425 additions and 0 deletions
--- a/src/api/v1/dept.ts
+++ b/src/api/v1/dept.ts
@ -0,0 +1,30 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/**
+ * 部门管理---获取部门管理列表
+ */
+export const fetchGetDeptList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `dept/getDeptList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/**
+ * 部门管理---添加部门管理
+ */
+export const fetchAddDept = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'dept/addDept', { data });
+};
+
+/**
+ * 部门管理---更新部门管理
+ */
+export const fetchUpdateDept = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'dept/updateDept', { data });
+};
+
+/**
+ * 部门管理---删除部门管理
+ */
+export const fetchDeleteDept = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'dept/deleteDept', { data });
+};
--- a/src/store/system/dept.ts
+++ b/src/store/system/dept.ts
@ -0,0 +1,83 @@
+import { defineStore } from 'pinia';
+import { fetchAddDept, fetchDeleteDept, fetchGetDeptList, fetchUpdateDept } from '@/api/v1/dept';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
+
+/**
+ * 部门 Store
+ */
+export const useDeptStore = defineStore('deptStore', {
+	state() {
+		return {
+			// 部门列表
+			datalist: [],
+			// 查询表单
+			form: {
+				// 父级id
+				parentId: undefined,
+				// 管理者id
+				managerId: undefined,
+				// 部门名称
+				deptName: undefined,
+				// 部门简介
+				summary: undefined,
+				// 备注信息
+				remarks: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 150,
+				total: 100,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
+		};
+	},
+	getters: {},
+	actions: {
+		/**
+		 * * 获取部门
+		 */
+		async getDeptList() {
+			// 整理请求参数
+			const data = { ...this.pagination, ...this.form };
+			delete data.pageSizes;
+			delete data.total;
+			delete data.background;
+
+			// 获取部门列表
+			const result = await fetchGetDeptList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
+		},
+
+		/**
+		 * * 添加部门
+		 */
+		async addDept(data: any) {
+			const result = await fetchAddDept(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 修改部门
+		 */
+		async updateDept(data: any) {
+			const result = await fetchUpdateDept(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 删除部门
+		 */
+		async deleteDept(data: any) {
+			const result = await fetchDeleteDept(data);
+			return storeMessage(result);
+		},
+	},
+});
--- a/src/views/system/dept/dept-dialog.vue
+++ b/src/views/system/dept/dept-dialog.vue
@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/system/dept/utils/columns';
+import { FormProps } from '@/views/system/dept/utils/types';
+import { $t } from '@/plugins/i18n';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 父级id
+		parentId: undefined,
+		// 管理者id
+		managerId: undefined,
+		// 部门名称
+		deptName: undefined,
+		// 部门简介
+		summary: undefined,
+		// 备注信息
+		remarks: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+
+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-form-item>
+		<el-form-item :label="$t('dept_managerId')" prop="managerId">
+			<el-input v-model="form.managerId" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('dept_deptName')" prop="deptName">
+			<el-input v-model="form.deptName" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('dept_summary')" prop="summary">
+			<el-input v-model="form.summary" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('dept_remarks')" prop="remarks">
+			<el-input v-model="form.remarks" autocomplete="off" type="text" />
+		</el-form-item>
+	</el-form>
+</template>
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/system/dept/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { onAdd, onDelete, onSearch, onUpdate } from '@/views/system/dept/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import Refresh from '@iconify-icons/ep/refresh';
+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';
+
+const tableRef = ref();
+const formRef = ref();
+const deptStore = useDeptStore();
+
+const resetForm = async formEl => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<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_parentId')" prop="parentId">
+				<el-input v-model="deptStore.form.parentId" :placeholder="`${$t('input')}${$t('dept_parentId')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<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>
+			<el-form-item :label="$t('dept_summary')" prop="summary">
+				<el-input v-model="deptStore.form.summary" :placeholder="`${$t('input')}${$t('dept_summary')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('dept_remarks')" prop="remarks">
+				<el-input v-model="deptStore.form.remarks" :placeholder="`${$t('input')}${$t('dept_remarks')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="deptStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
+				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
+			</el-form-item>
+		</el-form>
+
+		<PureTableBar :columns="columns" title="部门管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+			<template #buttons>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加部门</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 45 }"
+					:columns="dynamicColumns"
+					:data="deptStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="deptStore.loading"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+				>
+					<template #createUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
+					</template>
+
+					<template #updateUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
+					</template>
+
+					<template #operation="{ row }">
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
+						<!-- TODO 待完成 -->
+						<el-popconfirm :title="`是否确认删除 ${row.typeName}数据`" @confirm="onDelete(row)">
+							<template #reference>
+								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>
--- a/src/views/system/dept/utils/columns.ts
+++ b/src/views/system/dept/utils/columns.ts
@ -0,0 +1,38 @@
+import { reactive } from 'vue';
+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' },
+	// 部门名称
+	{ label: $t('dept_deptName'), prop: 'deptName' },
+	// 部门简介
+	{ label: $t('dept_summary'), prop: 'summary' },
+	// 备注信息
+	{ label: $t('dept_remarks'), prop: 'remarks' },
+	{ 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 },
+	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
+	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
+];
+
+// 添加规则
+export const rules = reactive({
+	// 父级id
+	parentId: [{ required: true, message: `${$t('input')}${$t('dept_parentId')}`, trigger: 'blur' }],
+	// 管理者id
+	managerId: [{ required: true, message: `${$t('input')}${$t('dept_managerId')}`, trigger: 'blur' }],
+	// 部门名称
+	deptName: [{ required: true, message: `${$t('input')}${$t('dept_deptName')}`, trigger: 'blur' }],
+	// 部门简介
+	summary: [{ required: true, message: `${$t('input')}${$t('dept_summary')}`, trigger: 'blur' }],
+	// 备注信息
+	remarks: [{ required: true, message: `${$t('input')}${$t('dept_remarks')}`, trigger: 'blur' }],
+});
--- a/src/views/system/dept/utils/hooks.ts
+++ b/src/views/system/dept/utils/hooks.ts
@ -0,0 +1,108 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import DeptDialog from '@/views/system/dept/dept-dialog.vue';
+import { useDeptStore } from '@/store/system/dept.ts';
+import { h, ref } from 'vue';
+import { messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/system/dept/utils/types';
+import { $t } from '@/plugins/i18n';
+
+export const formRef = ref();
+const deptStore = useDeptStore();
+
+/**
+ * * 搜索初始化部门
+ */
+export async function onSearch() {
+	deptStore.loading = true;
+	await deptStore.getDeptList();
+	deptStore.loading = false;
+}
+
+/**
+ * * 添加部门
+ */
+export function onAdd() {
+	addDialog({
+		title: `${$t('add_new')}${$t('dept')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				parentId: undefined,
+				managerId: undefined,
+				deptName: undefined,
+				summary: undefined,
+				remarks: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DeptDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await deptStore.addDept(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 更新部门
+ * @param row
+ */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('dept')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				parentId: row.parentId,
+				managerId: row.managerId,
+				deptName: row.deptName,
+				summary: row.summary,
+				remarks: row.remarks,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DeptDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await deptStore.updateDept({ ...form, id: row.id });
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 删除部门
+ */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirm_delete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await deptStore.deleteDept([id]);
+	await onSearch();
+};
--- a/src/views/system/dept/utils/types.ts
+++ b/src/views/system/dept/utils/types.ts
@ -0,0 +1,18 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 父级id
+	parentId: string;
+	// 管理者id
+	managerId: string;
+	// 部门名称
+	deptName: string;
+	// 部门简介
+	summary: string;
+	// 备注信息
+	remarks: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}