mirror of
https://github.com/ccmjga/zhilu-admin
synced 2026-04-04 19:27:32 +00:00
重构错误处理逻辑，更新组件导入路径，新增多个模态框组件以支持用户、部门、角色和权限管理功能，优化分页和排序逻辑，更新类型定义以提高代码可读性和维护性
This commit is contained in:
Chuck1sn
267
frontend/src/views/DepartmentManagementPage.vue
Normal file
267
frontend/src/views/DepartmentManagementPage.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
|
||||
<div class="mb-4 col-span-full">
|
||||
<Breadcrumbs :names="['部门管理']" />
|
||||
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">部门管理</h1>
|
||||
</div>
|
||||
|
||||
<TableFilterForm :filters="filterConfig" :initialValues="filterValues" @search="handleSearch"
|
||||
@update:values="updateFilterValues">
|
||||
<template #actions>
|
||||
<TableButton variant="primary" @click="handleUpsertDepartmentClick()" class="w-full sm:w-auto">
|
||||
<template #icon>
|
||||
<PlusIcon class="w-4 h-4" />
|
||||
</template>
|
||||
新增部门
|
||||
</TableButton>
|
||||
</template>
|
||||
</TableFilterForm>
|
||||
|
||||
<!-- 移动端卡片布局 -->
|
||||
<div class="md:hidden">
|
||||
<MobileCardList :items="departments">
|
||||
<template #title="{ item }">
|
||||
{{ item.name }}
|
||||
</template>
|
||||
<template #content="{ item }">
|
||||
<div>
|
||||
<p class="text-xs font-medium text-gray-600">上级部门</p>
|
||||
<p class="text-sm text-gray-900 mt-0.5">{{ !item.parentName ? '无' : item.parentName }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ item }">
|
||||
<div class="flex gap-x-2">
|
||||
<TableButton variant="primary" size="xs" isMobile @click="handleUpsertDepartmentClick(item)">
|
||||
<template #icon>
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
|
||||
<path fill-rule="evenodd"
|
||||
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</template>
|
||||
编辑
|
||||
</TableButton>
|
||||
<TableButton variant="danger" size="xs" isMobile @click="handleDeleteDepartmentClick(item)">
|
||||
<template #icon>
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</template>
|
||||
删除
|
||||
</TableButton>
|
||||
</div>
|
||||
</template>
|
||||
</MobileCardList>
|
||||
</div>
|
||||
|
||||
<!-- PC端表格布局 -->
|
||||
<div class="hidden md:block">
|
||||
<TableFormLayout :items="departments || []" :columns="columns">
|
||||
<template #parentName="{ item }">
|
||||
{{ !item.parentName ? '无' : item.parentName }}
|
||||
</template>
|
||||
<template #name="{ item }">
|
||||
{{ item.name }}
|
||||
</template>
|
||||
<template #actions="{ item }">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<TableButton variant="primary" @click="handleUpsertDepartmentClick(item)">
|
||||
<template #icon>
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
|
||||
<path fill-rule="evenodd"
|
||||
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</template>
|
||||
编辑
|
||||
</TableButton>
|
||||
<TableButton variant="danger" @click="handleDeleteDepartmentClick(item)">
|
||||
<template #icon>
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</template>
|
||||
删除
|
||||
</TableButton>
|
||||
</div>
|
||||
</template>
|
||||
</TableFormLayout>
|
||||
</div>
|
||||
|
||||
<TablePagination :total="total" :pageChange="handlePageChange" />
|
||||
</div>
|
||||
|
||||
<DepartmentDeleteModal :id="'department-delete-modal'" :closeModal="() => {
|
||||
departmentDeleteModal!.hide();
|
||||
}" :onSubmit="handleDeleteDepartmentSubmit" title="确定删除该部门吗" content="删除部门"></DepartmentDeleteModal>
|
||||
<DepartmentFormDialog :id="'department-upsert-modal'" :onSubmit="handleUpsertDepartmentSubmit" :closeModal="() => {
|
||||
availableDepartments = undefined
|
||||
departmentFormDialog!.hide();
|
||||
}" :department="selectedDepartment" :availableDepartments="availableDepartments">
|
||||
</DepartmentFormDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { components } from "@/api/types/schema";
|
||||
import PlusIcon from "@/components/icons/PlusIcon.vue";
|
||||
import Breadcrumbs from "@/components/layout/Breadcrumbs.vue";
|
||||
import DepartmentDeleteModal from "@/components/modals/ConfirmationDialog.vue";
|
||||
import DepartmentFormDialog from "@/components/modals/DepartmentFormDialog.vue";
|
||||
import MobileCardList from "@/components/tables/MobileCardList.vue";
|
||||
import TableButton from "@/components/tables/TableButton.vue";
|
||||
import TableFilterForm from "@/components/tables/TableFilterForm.vue";
|
||||
import type { FilterItem } from "@/components/tables/TableFilterForm.vue";
|
||||
import TableFormLayout from "@/components/tables/TableFormLayout.vue";
|
||||
import TablePagination from "@/components/tables/TablePagination.vue";
|
||||
import useDepartmentDelete from "@/composables/department/useDepartmentDelete";
|
||||
import { useDepartmentQuery } from "@/composables/department/useDepartmentQuery";
|
||||
import { useDepartmentUpsert } from "@/composables/department/useDepartmentUpsert";
|
||||
import { useActionExcStore } from "@/composables/store/useActionExcStore";
|
||||
import useAlertStore from "@/composables/store/useAlertStore";
|
||||
import type { DepartmentUpsertModel } from "@/types/DepartmentTypes";
|
||||
import { Modal, type ModalInterface, initFlowbite } from "flowbite";
|
||||
import { nextTick, onMounted, reactive, ref } from "vue";
|
||||
|
||||
// 定义筛选配置
|
||||
const filterConfig = [
|
||||
{
|
||||
type: "input",
|
||||
name: "departmentName",
|
||||
placeholder: "部门名称",
|
||||
},
|
||||
] as FilterItem[];
|
||||
|
||||
// 筛选值
|
||||
const filterValues = reactive<{
|
||||
departmentName: string;
|
||||
}>({
|
||||
departmentName: "",
|
||||
});
|
||||
|
||||
// 更新筛选值
|
||||
const updateFilterValues = (
|
||||
values: Record<string, string | number | boolean | Date[] | undefined>,
|
||||
) => {
|
||||
if (values.departmentName !== undefined) {
|
||||
filterValues.departmentName = values.departmentName as string;
|
||||
}
|
||||
};
|
||||
|
||||
const selectedDepartment = ref<components["schemas"]["Department"]>();
|
||||
const departmentFormDialog = ref<ModalInterface>();
|
||||
const departmentDeleteModal = ref<ModalInterface>();
|
||||
|
||||
const {
|
||||
departments,
|
||||
availableDepartments,
|
||||
fetchDepartmentWith,
|
||||
total,
|
||||
fetchAvailableDepartments,
|
||||
} = useDepartmentQuery();
|
||||
|
||||
const { deleteDepartment } = useDepartmentDelete();
|
||||
const { upsertDepartment } = useDepartmentUpsert();
|
||||
|
||||
const alertStore = useAlertStore();
|
||||
const actionExcStore = useActionExcStore();
|
||||
// 定义表格列配置
|
||||
const columns = [
|
||||
{ title: "上级部门", field: "parentName" },
|
||||
{ title: "部门名称", field: "name" },
|
||||
{ title: "操作", field: "actions" },
|
||||
];
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchDepartmentWith({
|
||||
name: filterValues.departmentName,
|
||||
});
|
||||
initFlowbite();
|
||||
const $upsertModalElement: HTMLElement | null = document.querySelector(
|
||||
"#department-upsert-modal",
|
||||
);
|
||||
const $deleteModalElement: HTMLElement | null = document.querySelector(
|
||||
"#department-delete-modal",
|
||||
);
|
||||
if ($upsertModalElement) {
|
||||
departmentFormDialog.value = new Modal($upsertModalElement, {});
|
||||
}
|
||||
if ($deleteModalElement) {
|
||||
departmentDeleteModal.value = new Modal($deleteModalElement, {});
|
||||
}
|
||||
actionExcStore.setCallback((result) => {
|
||||
if (result) {
|
||||
handleSearch();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const handleUpsertDepartmentSubmit = async (
|
||||
department: DepartmentUpsertModel,
|
||||
) => {
|
||||
await upsertDepartment(department);
|
||||
departmentFormDialog.value?.hide();
|
||||
alertStore.showAlert({
|
||||
content: "操作成功",
|
||||
level: "success",
|
||||
});
|
||||
await fetchDepartmentWith({
|
||||
name: filterValues.departmentName,
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpsertDepartmentClick = async (
|
||||
department?: components["schemas"]["Department"],
|
||||
) => {
|
||||
selectedDepartment.value = department;
|
||||
await fetchAvailableDepartments(department?.id);
|
||||
await nextTick(() => {
|
||||
departmentFormDialog.value?.show();
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteDepartmentSubmit = async () => {
|
||||
if (!selectedDepartment.value?.id) return;
|
||||
await deleteDepartment(selectedDepartment.value.id);
|
||||
departmentDeleteModal.value?.hide();
|
||||
alertStore.showAlert({
|
||||
content: "删除成功",
|
||||
level: "success",
|
||||
});
|
||||
await fetchDepartmentWith({
|
||||
name: filterValues.departmentName,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteDepartmentClick = async (
|
||||
department: components["schemas"]["Department"],
|
||||
) => {
|
||||
selectedDepartment.value = department;
|
||||
await nextTick(() => {
|
||||
departmentDeleteModal.value?.show();
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearch = async () => {
|
||||
await fetchDepartmentWith({
|
||||
name: filterValues.departmentName,
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = async (page: number, pageSize: number) => {
|
||||
await fetchDepartmentWith(
|
||||
{
|
||||
name: filterValues.departmentName,
|
||||
},
|
||||
page,
|
||||
pageSize,
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user