From 26448a7b9f3b34f94411a43d7aca65ffd97ed4e5 Mon Sep 17 00:00:00 2001 From: Bunny <1319900154@qq.com> Date: Fri, 4 Oct 2024 10:43:58 +0800 Subject: [PATCH] =?UTF-8?q?page:=20=F0=9F=93=84=20=E9=83=A8=E9=97=A8?= =?UTF-8?q?=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/v1/dept.ts | 30 +++++++ src/store/system/dept.ts | 83 +++++++++++++++++++ src/views/system/dept/dept-dialog.vue | 47 +++++++++++ src/views/system/dept/index.vue | 101 +++++++++++++++++++++++ src/views/system/dept/utils/columns.ts | 38 +++++++++ src/views/system/dept/utils/hooks.ts | 108 +++++++++++++++++++++++++ src/views/system/dept/utils/types.ts | 18 +++++ 7 files changed, 425 insertions(+) create mode 100644 src/api/v1/dept.ts create mode 100644 src/store/system/dept.ts create mode 100644 src/views/system/dept/dept-dialog.vue create mode 100644 src/views/system/dept/index.vue create mode 100644 src/views/system/dept/utils/columns.ts create mode 100644 src/views/system/dept/utils/hooks.ts create mode 100644 src/views/system/dept/utils/types.ts diff --git a/src/api/v1/dept.ts b/src/api/v1/dept.ts new file mode 100644 index 0000000..4e27f9e --- /dev/null +++ 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>('get', `dept/getDeptList/${data.currentPage}/${data.pageSize}`, { params: data }); +}; + +/** + * 部门管理---添加部门管理 + */ +export const fetchAddDept = (data: any) => { + return http.request>('post', 'dept/addDept', { data }); +}; + +/** + * 部门管理---更新部门管理 + */ +export const fetchUpdateDept = (data: any) => { + return http.request>('put', 'dept/updateDept', { data }); +}; + +/** + * 部门管理---删除部门管理 + */ +export const fetchDeleteDept = (data: any) => { + return http.request>('delete', 'dept/deleteDept', { data }); +}; diff --git a/src/store/system/dept.ts b/src/store/system/dept.ts new file mode 100644 index 0000000..1c877f3 --- /dev/null +++ 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); + }, + }, +}); diff --git a/src/views/system/dept/dept-dialog.vue b/src/views/system/dept/dept-dialog.vue new file mode 100644 index 0000000..7d7c16c --- /dev/null +++ b/src/views/system/dept/dept-dialog.vue @@ -0,0 +1,47 @@ + + + diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue new file mode 100644 index 0000000..0cccbfb --- /dev/null +++ b/src/views/system/dept/index.vue @@ -0,0 +1,101 @@ + + + diff --git a/src/views/system/dept/utils/columns.ts b/src/views/system/dept/utils/columns.ts new file mode 100644 index 0000000..b9c7f89 --- /dev/null +++ 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' }], +}); diff --git a/src/views/system/dept/utils/hooks.ts b/src/views/system/dept/utils/hooks.ts new file mode 100644 index 0000000..f1a1605 --- /dev/null +++ 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(); +}; diff --git a/src/views/system/dept/utils/types.ts b/src/views/system/dept/utils/types.ts new file mode 100644 index 0000000..f287501 --- /dev/null +++ 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; +}