tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 统一重命名 dialog 状态变量为 dialogState

Browse Source
This commit is contained in:
Ray.Hao
2026-03-03 22:21:52 +08:00
parent 8f5ffcf521
commit 992340e487
15 changed files with 1096 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/codegen/index.vue
View File

@@ -87,10 +87,10 @@
</el-card>
<el-drawer
v-model="dialog.visible"
:title="dialog.title"
v-model="dialogState.visible"
:title="dialogState.title"
size="80%"
@close="dialog.visible = false"
@close="dialogState.visible = false"
>
<el-steps :active="active" align-center finish-status="success" simple>
<el-step title="基础配置" />
@@ -603,7 +603,7 @@ const genConfigFormRules = {
entityName: [{ required: true, message: "请输入实体名", trigger: "blur" }],
};
const dialog = reactive({
const dialogState = reactive({
visible: false,
title: "",
});
@@ -684,7 +684,7 @@ watch(active, (val) => {
});
watch(
() => dialog.visible,
() => dialogState.visible,
(visible) => {
if (!visible) {
destroySort();
@@ -841,7 +841,7 @@ function handleResetQuery() {
/** 打开弹窗 */
async function handleOpenDialog(tableName: string) {
dialog.visible = true;
dialogState.visible = true;
active.value = 0;
currentTableName.value = tableName;
loading.value = true;
@@ -854,7 +854,7 @@ async function handleOpenDialog(tableName: string) {
menuOptions.value = menuList;
dictOptions.value = dictList;
dialog.title = `${tableName} 代码生成`;
dialogState.title = `${tableName} 代码生成`;
genConfigFormData.value = config;
checkAllSelected("isShowInQuery", isCheckAllQuery);
@@ -867,7 +867,7 @@ async function handleOpenDialog(tableName: string) {
}
} catch {
ElMessage.error("获取生成配置失败");
dialog.visible = false;
dialogState.visible = false;
} finally {
loading.value = false;
}
@@ -912,7 +912,7 @@ async function handlePreview(tableName: string) {
(genConfigFormData.value.pageType as any) || "classic",
frontendType
);
dialog.title = `代码生成 ${tableName}`;
dialogState.title = `代码生成 ${tableName}`;
const previewList = data || [];
const typeOptions = Array.from(
new Set(

50
src/views/profile/index.vue
View File

@@ -162,10 +162,10 @@
</el-row>
<!-- 弹窗 -->
<el-dialog v-model="dialog.visible" :title="dialog.title" :width="500">
<el-dialog v-model="dialogState.visible" :title="dialogState.title" :width="500">
<!-- 账号资料 -->
<el-form
v-if="dialog.type === DialogType.ACCOUNT"
v-if="dialogState.type === DialogType.ACCOUNT"
ref="userProfileFormRef"
:model="userProfileForm"
:label-width="100"
@@ -180,7 +180,7 @@
<!-- 修改密码 -->
<el-form
v-if="dialog.type === DialogType.PASSWORD"
v-if="dialogState.type === DialogType.PASSWORD"
ref="passwordChangeFormRef"
:model="passwordChangeForm"
:rules="passwordChangeRules"
@@ -199,7 +199,7 @@
<!-- 绑定手机 -->
<el-form
v-else-if="dialog.type === DialogType.MOBILE"
v-else-if="dialogState.type === DialogType.MOBILE"
ref="mobileBindingFormRef"
:model="mobileUpdateForm"
:rules="mobileBindingRules"
@@ -229,7 +229,7 @@
<!-- 绑定邮箱 -->
<el-form
v-else-if="dialog.type === DialogType.EMAIL"
v-else-if="dialogState.type === DialogType.EMAIL"
ref="emailBindingFormRef"
:model="emailUpdateForm"
:rules="emailBindingRules"
@@ -295,7 +295,7 @@ const enum DialogType {
EMAIL = "email",
}
const dialog = reactive({
const dialogState = reactive({
visible: false,
title: "",
type: "" as DialogType, // 修改账号资料,修改密码、绑定手机、绑定邮箱"
@@ -391,27 +391,27 @@ const emailSecurityDesc = computed(() => {
* @param type 弹窗类型 ACCOUNT: 账号资料 PASSWORD: 修改密码 MOBILE: 绑定手机 EMAIL: 绑定邮箱
*/
const handleOpenDialog = (type: DialogType) => {
dialog.type = type;
dialog.visible = true;
dialogState.type = type;
dialogState.visible = true;
switch (type) {
case DialogType.ACCOUNT:
dialog.title = "账号资料";
dialogState.title = "账号资料";
// 初始化表单数据
userProfileForm.nickname = userProfile.value.nickname;
userProfileForm.avatar = userProfile.value.avatar;
userProfileForm.gender = userProfile.value.gender;
break;
case DialogType.PASSWORD:
dialog.title = "修改密码";
dialogState.title = "修改密码";
break;
case DialogType.MOBILE:
dialog.title = userProfile.value.mobile ? "更换手机号" : "绑定手机号";
dialogState.title = userProfile.value.mobile ? "更换手机号" : "绑定手机号";
mobileUpdateForm.mobile = "";
mobileUpdateForm.code = "";
mobileUpdateForm.password = "";
break;
case DialogType.EMAIL:
dialog.title = userProfile.value.email ? "更换邮箱" : "绑定邮箱";
dialogState.title = userProfile.value.email ? "更换邮箱" : "绑定邮箱";
emailUpdateForm.email = "";
emailUpdateForm.code = "";
emailUpdateForm.password = "";
@@ -524,36 +524,36 @@ function handleSendEmailCode() {
*/
const handleSubmit = async () => {
try {
if (dialog.type === DialogType.ACCOUNT) {
if (dialogState.type === DialogType.ACCOUNT) {
const valid = await userProfileFormRef.value?.validate();
if (!valid) return;
await UserAPI.updateProfile(userProfileForm);
ElMessage.success("账号资料修改成功");
dialog.visible = false;
dialogState.visible = false;
await loadUserProfile();
} else if (dialog.type === DialogType.PASSWORD) {
} else if (dialogState.type === DialogType.PASSWORD) {
const valid = await passwordChangeFormRef.value?.validate();
if (!valid) return;
await UserAPI.changePassword(passwordChangeForm);
dialog.visible = false;
dialogState.visible = false;
await redirectToLogin("密码已修改，请重新登录");
} else if (dialog.type === DialogType.MOBILE) {
} else if (dialogState.type === DialogType.MOBILE) {
const valid = await mobileBindingFormRef.value?.validate();
if (!valid) return;
await UserAPI.bindOrChangeMobile(mobileUpdateForm);
ElMessage.success(userProfile.value.mobile ? "手机号更换成功" : "手机号绑定成功");
dialog.visible = false;
dialogState.visible = false;
await loadUserProfile();
} else if (dialog.type === DialogType.EMAIL) {
} else if (dialogState.type === DialogType.EMAIL) {
const valid = await emailBindingFormRef.value?.validate();
if (!valid) return;
await UserAPI.bindOrChangeEmail(emailUpdateForm);
ElMessage.success(userProfile.value.email ? "邮箱更换成功" : "邮箱绑定成功");
dialog.visible = false;
dialogState.visible = false;
await loadUserProfile();
}
} catch {
@@ -565,14 +565,14 @@ const handleSubmit = async () => {
* 取消
*/
const handleCancel = () => {
dialog.visible = false;
if (dialog.type === DialogType.ACCOUNT) {
dialogState.visible = false;
if (dialogState.type === DialogType.ACCOUNT) {
userProfileFormRef.value?.resetFields();
} else if (dialog.type === DialogType.PASSWORD) {
} else if (dialogState.type === DialogType.PASSWORD) {
passwordChangeFormRef.value?.resetFields();
} else if (dialog.type === DialogType.MOBILE) {
} else if (dialogState.type === DialogType.MOBILE) {
mobileBindingFormRef.value?.resetFields();
} else if (dialog.type === DialogType.EMAIL) {
} else if (dialogState.type === DialogType.EMAIL) {
emailBindingFormRef.value?.resetFields();
}
};

126
src/views/system/config/index.vue
View File

@@ -1,7 +1,5 @@
<!-- 系统配置 -->
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
@@ -27,7 +25,7 @@
v-hasPerm="['sys:config:create']"
type="success"
icon="plus"
@click="handleOpenDialog()"
@click="openDialog()"
>
新增
</el-button>
@@ -35,7 +33,7 @@
v-hasPerm="['sys:config:refresh']"
color="#626aef"
icon="RefreshLeft"
@click="handleRefreshCache"
@click="refreshCache"
>
刷新缓存
</el-button>
@@ -64,7 +62,7 @@
size="small"
link
icon="edit"
@click="handleOpenDialog(scope.row.id)"
@click="openDialog(scope.row.id)"
>
编辑
</el-button>
@@ -91,12 +89,11 @@
/>
</el-card>
<!-- 系统配置表单弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
v-model="dialogState.visible"
:title="dialogState.title"
width="500px"
@close="handleCloseDialog"
@close="closeDialog"
>
<el-form
ref="dataFormRef"
@@ -128,7 +125,7 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</template>
</el-dialog>
@@ -143,30 +140,33 @@ defineOptions({
import ConfigAPI from "@/api/system/config";
import type { ConfigItem, ConfigForm, ConfigQueryParams } from "@/types/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
const queryFormRef = ref();
const dataFormRef = ref();
const loading = ref(false);
const selectIds = ref<number[]>([]);
const total = ref(0);
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 查询参数
const queryParams = reactive<ConfigQueryParams>({
pageNum: 1,
pageSize: 10,
keywords: "",
});
// 系统配置表格数据
// 列表数据
const pageData = ref<ConfigItem[]>([]);
const total = ref(0);
const loading = ref(false);
const selectIds = ref<string[]>([]);
const dialog = reactive({
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 表单数据
const formData = reactive<ConfigForm>({
id: undefined,
configName: "",
@@ -175,14 +175,17 @@ const formData = reactive<ConfigForm>({
remark: "",
});
const rules = reactive({
// 验证规则
const rules: FormRules = {
configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
});
};
// 获取数据
function fetchData() {
/**
* 加载配置列表数据
*/
function fetchData(): void {
loading.value = true;
ConfigAPI.getPage(queryParams)
.then((data) => {
@@ -194,48 +197,61 @@ function fetchData() {
});
}
// 查询（重置页码后获取数据）
function handleQuery() {
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
queryParams.pageNum = 1;
fetchData();
}
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
queryParams.pageNum = 1;
fetchData();
}
// 行复选框选中项变化
function handleSelectionChange(selection: any) {
selectIds.value = selection.map((item: any) => item.id);
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: ConfigItem[]): void {
selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
}
// 打开系统配置弹窗
function handleOpenDialog(id?: string) {
dialog.visible = true;
/**
* 打开弹窗
* @param id 配置ID（编辑时传入）
*/
function openDialog(id?: string): void {
dialogState.visible = true;
if (id) {
dialog.title = "修改系统配置";
dialogState.title = "修改系统配置";
ConfigAPI.getFormData(id).then((data) => {
Object.assign(formData, data);
});
} else {
dialog.title = "新增系统配置";
dialogState.title = "新增系统配置";
formData.id = undefined;
}
}
// 刷新缓存(防抖)
const handleRefreshCache = useDebounceFn(() => {
/**
* 刷新缓存
*/
const refreshCache = useDebounceFn(() => {
ConfigAPI.refreshCache().then(() => {
ElMessage.success("刷新成功");
});
}, 1000);
// 系统配置表单提交
function handleSubmit() {
dataFormRef.value.validate((valid: any) => {
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((valid) => {
if (valid) {
loading.value = true;
const id = formData.id;
@@ -243,7 +259,7 @@ function handleSubmit() {
ConfigAPI.update(id, formData)
.then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
@@ -251,7 +267,7 @@ function handleSubmit() {
ConfigAPI.create(formData)
.then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
@@ -260,21 +276,21 @@ function handleSubmit() {
});
}
// 重置表单
function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
formData.id = undefined;
}
// 关闭系统配置弹窗
function handleCloseDialog() {
dialog.visible = false;
resetForm();
}
// 删除系统配置
function handleDelete(id: string) {
/**
* 删除配置
* @param id 配置ID
*/
function handleDelete(id: string): void {
ElMessageBox.confirm("确认删除该项配置?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",

152
src/views/system/dept/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
@@ -34,7 +33,7 @@
v-hasPerm="['sys:dept:create']"
type="success"
icon="plus"
@click="handleOpenDialog()"
@click="openDialog()"
>
新增
</el-button>
@@ -79,7 +78,7 @@
link
size="small"
icon="plus"
@click.stop="handleOpenDialog(scope.row.id, undefined)"
@click.stop="openDialog(scope.row.id, undefined)"
>
新增
</el-button>
@@ -89,7 +88,7 @@
link
size="small"
icon="edit"
@click.stop="handleOpenDialog(scope.row.parentId, scope.row.id)"
@click.stop="openDialog(scope.row.parentId, scope.row.id)"
>
编辑
</el-button>
@@ -109,10 +108,10 @@
</el-card>
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
v-model="dialogState.visible"
:title="dialogState.title"
width="600px"
@closed="handleCloseDialog"
@closed="closeDialog"
>
<el-form ref="deptFormRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="上级部门" prop="parentId">
@@ -150,7 +149,7 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</template>
</el-dialog>
@@ -165,62 +164,84 @@ defineOptions({
import DeptAPI from "@/api/system/dept";
import type { DeptItem, DeptForm, DeptQueryParams } from "@/types/api";
import type { FormInstance, FormRules } from "element-plus";
const queryFormRef = ref();
const deptFormRef = ref();
// 表单引用
const queryFormRef = ref<FormInstance>();
const deptFormRef = ref<FormInstance>();
const loading = ref(false);
const selectIds = ref<number[]>([]);
// 查询参数
const queryParams = reactive<DeptQueryParams>({});
const dialog = reactive({
// 列表数据
const deptList = ref<DeptItem[]>();
const deptOptions = ref<OptionItem[]>();
const loading = ref(false);
const selectIds = ref<string[]>([]);
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
const deptList = ref<DeptItem[]>();
const deptOptions = ref<OptionItem[]>();
// 表单数据
const formData = reactive<DeptForm>({
status: 1,
parentId: "0",
sort: 1,
});
const rules = reactive({
// 验证规则
const rules: FormRules = {
parentId: [{ required: true, message: "上级部门不能为空", trigger: "change" }],
name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
code: [{ required: true, message: "部门编号不能为空", trigger: "blur" }],
sort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
});
};
// 查询部门
function handleQuery() {
/**
* 加载部门列表数据
*/
function fetchData(): void {
loading.value = true;
DeptAPI.getList(queryParams).then((data) => {
deptList.value = data;
loading.value = false;
});
}
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
// 处理选中项变化
function handleSelectionChange(selection: any) {
selectIds.value = selection.map((item: any) => item.id);
DeptAPI.getList(queryParams)
.then((data) => {
deptList.value = data;
})
.finally(() => {
loading.value = false;
});
}
/**
* 打开部门弹窗
*
* @param parentId 父部门ID
* @param deptId 部门ID
* 查询按钮点击事件
*/
async function handleOpenDialog(parentId?: string, deptId?: string) {
// 加载部门下拉数据
function handleQuery(): void {
fetchData();
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
fetchData();
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: DeptItem[]): void {
selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
}
/**
* 打开弹窗
* @param parentId 父部门ID
* @param deptId 部门ID（编辑时传入）
*/
async function openDialog(parentId?: string, deptId?: string): Promise<void> {
const data = await DeptAPI.getOptions();
deptOptions.value = [
{
@@ -230,21 +251,23 @@ async function handleOpenDialog(parentId?: string, deptId?: string) {
},
];
dialog.visible = true;
dialogState.visible = true;
if (deptId) {
dialog.title = "修改部门";
dialogState.title = "修改部门";
DeptAPI.getFormData(deptId).then((data) => {
Object.assign(formData, data);
});
} else {
dialog.title = "新增部门";
dialogState.title = "新增部门";
formData.parentId = parentId || "0";
}
}
// 提交部门表单
function handleSubmit() {
deptFormRef.value.validate((valid: any) => {
/**
* 提交表单
*/
function handleSubmit(): void {
deptFormRef.value?.validate((valid) => {
if (valid) {
loading.value = true;
const deptId = formData.id;
@@ -252,16 +275,16 @@ function handleSubmit() {
DeptAPI.update(deptId, formData)
.then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
handleQuery();
closeDialog();
fetchData();
})
.finally(() => (loading.value = false));
} else {
DeptAPI.create(formData)
.then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
handleQuery();
closeDialog();
fetchData();
})
.finally(() => (loading.value = false));
}
@@ -269,8 +292,11 @@ function handleSubmit() {
});
}
// 删除部门
function handleDelete(deptId?: number) {
/**
* 删除部门
* @param deptId 部门ID
*/
function handleDelete(deptId?: number): void {
const deptIds = [deptId || selectIds.value].join(",");
if (!deptIds) {
@@ -298,24 +324,20 @@ function handleDelete(deptId?: number) {
);
}
// 重置表单
function resetForm() {
deptFormRef.value.resetFields();
deptFormRef.value.clearValidate();
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
deptFormRef.value?.resetFields();
deptFormRef.value?.clearValidate();
formData.id = undefined;
formData.parentId = "0";
formData.status = 1;
formData.sort = 1;
}
// 关闭弹窗
function handleCloseDialog() {
dialog.visible = false;
resetForm();
}
onMounted(() => {
handleQuery();
fetchData();
});
</script>

127
src/views/system/dict/dict-item.vue
View File

@@ -1,4 +1,3 @@
<!-- 字典值 -->
<template>
<div class="app-container">
<div class="filter-section">
@@ -22,7 +21,7 @@
<el-card shadow="never" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
<el-button type="success" icon="plus" @click="openDialog()">新增</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@@ -60,7 +59,7 @@
link
size="small"
icon="edit"
@click.stop="handleOpenDialog(scope.row)"
@click.stop="openDialog(scope.row)"
>
编辑
</el-button>
@@ -86,14 +85,13 @@
/>
</el-card>
<!-- 字典项弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
v-model="dialogState.visible"
:title="dialogState.title"
width="600px"
@close="handleCloseDialog"
@close="closeDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="100px">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="字典项标签" prop="label">
<el-input v-model="formData.label" placeholder="请输入字典标签" />
</el-form-item>
@@ -145,8 +143,8 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmitClick">确 定</el-button>
<el-button @click="handleCloseDialog">确 定</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</template>
</el-dialog>
@@ -156,46 +154,51 @@
<script setup lang="ts">
import DictAPI from "@/api/system/dict";
import type { DictItemQueryParams, DictItem, DictItemForm } from "@/types/api";
import type { FormInstance, FormRules } from "element-plus";
const route = useRoute();
// 字典编码
const dictCode = ref(route.query.dictCode as string);
const queryFormRef = ref();
const dataFormRef = ref();
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 查询参数
const queryParams = reactive<DictItemQueryParams>({
pageNum: 1,
pageSize: 10,
});
// 列表数据
const tableData = ref<DictItem[]>();
const total = ref(0);
const loading = ref(false);
const ids = ref<string[]>([]);
const dialog = reactive({
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 表单数据
const formData = reactive<DictItemForm>({});
// 标签类型
// 标签类型选项
const tagType = ["primary", "success", "info", "warning", "danger"] as const;
const computedRules = computed(() => {
const rules: Partial<Record<string, any>> = {
value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
};
// 验证规则
const rules: FormRules = {
value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
};
return rules;
});
// 获取数据
function fetchData() {
/**
* 加载字典项列表数据
*/
function fetchData(): void {
loading.value = true;
DictAPI.getDictItemPage(dictCode.value, queryParams)
.then((data) => {
@@ -207,28 +210,37 @@ function fetchData() {
});
}
// 查询（重置页码后获取数据）
function handleQuery() {
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
queryParams.pageNum = 1;
fetchData();
}
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
queryParams.pageNum = 1;
fetchData();
}
// 行选择
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: DictItem[]): void {
ids.value = selection.map((item) => item.id);
}
// 打开弹窗
function handleOpenDialog(row?: DictItem) {
dialog.visible = true;
dialog.title = row ? "编辑字典值" : "新增字典值";
/**
* 打开弹窗
* @param row 字典项数据（编辑时传入）
*/
function openDialog(row?: DictItem): void {
dialogState.visible = true;
dialogState.title = row ? "编辑字典值" : "新增字典值";
if (row?.id) {
DictAPI.getDictItemFormData(dictCode.value, row.id).then((data) => {
@@ -237,9 +249,11 @@ function handleOpenDialog(row?: DictItem) {
}
}
// 提交表单
function handleSubmitClick() {
dataFormRef.value.validate((isValid: boolean) => {
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((isValid) => {
if (isValid) {
loading.value = true;
const id = formData.id;
@@ -249,7 +263,7 @@ function handleSubmitClick() {
DictAPI.updateDictItem(dictCode.value, id, formData)
.then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
@@ -257,7 +271,7 @@ function handleSubmitClick() {
DictAPI.createDictItem(dictCode.value, formData)
.then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
@@ -266,29 +280,28 @@ function handleSubmitClick() {
});
}
// 关闭弹窗
function handleCloseDialog() {
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
formData.id = undefined;
formData.sort = 1;
formData.status = 1;
formData.tagType = "";
dialog.visible = false;
}
/**
* 删除字典
*
* @param id 字典ID
* 删除字典项
* @param id 字典项ID
*/
function handleDelete(id?: number) {
function handleDelete(id?: number): void {
const itemIds = [id || ids.value].join(",");
if (!itemIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {

152
src/views/system/dict/index.vue
View File

@@ -1,7 +1,5 @@
<!-- 字典 -->
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
@@ -23,7 +21,7 @@
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
<el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@@ -55,7 +53,7 @@
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="220">
<template #default="scope">
<el-button type="primary" link size="small" @click.stop="handleOpenDictData(scope.row)">
<el-button type="primary" link size="small" @click.stop="openDictData(scope.row)">
<template #icon>
<Collection />
</template>
@@ -93,14 +91,13 @@
/>
</el-card>
<!--字典弹窗-->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
v-model="dialogState.visible"
:title="dialogState.title"
width="500px"
@close="handleCloseDialog"
@close="closeDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="80px">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="字典名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名称" />
</el-form-item>
@@ -123,8 +120,8 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmitClick">确 定</el-button>
<el-button @click="handleCloseDialog">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</template>
</el-dialog>
@@ -137,43 +134,46 @@ defineOptions({
inheritAttrs: false,
});
import { ref, reactive } from "vue";
import DictAPI from "@/api/system/dict";
import type { DictTypeQueryParams, DictTypeItem, DictTypeForm } from "@/types/api";
import type { FormInstance, FormRules } from "element-plus";
import router from "@/router";
const queryFormRef = ref();
const dataFormRef = ref();
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 查询参数
const queryParams = reactive<DictTypeQueryParams>({
pageNum: 1,
pageSize: 10,
});
// 列表数据
const tableData = ref<DictTypeItem[]>();
const total = ref(0);
const loading = ref(false);
const ids = ref<string[]>([]);
const dialog = reactive({
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 表单数据
const formData = reactive<DictTypeForm>({});
const computedRules = computed(() => {
const rules: Partial<Record<string, any>> = {
name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
};
return rules;
});
// 验证规则
const rules: FormRules = {
name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
};
// 获取数据
function fetchData() {
/**
* 加载字典列表数据
*/
function fetchData(): void {
loading.value = true;
DictAPI.getPage(queryParams)
.then((data) => {
@@ -185,46 +185,55 @@ function fetchData() {
});
}
// 查询（重置页码后获取数据）
function handleQuery() {
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
queryParams.pageNum = 1;
fetchData();
}
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
queryParams.pageNum = 1;
fetchData();
}
// 行选择
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
}
// 新增字典
function handleAddClick() {
dialog.visible = true;
dialog.title = "新增字典";
}
/**
* 编辑字典
*
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
queryParams.pageNum = 1;
fetchData();
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: DictTypeItem[]): void {
ids.value = selection.map((item) => item.id);
}
/**
* 新增按钮点击事件
*/
function handleCreateClick(): void {
dialogState.visible = true;
dialogState.title = "新增字典";
}
/**
* 编辑按钮点击事件
* @param id 字典ID
*/
function handleEditClick(id: string) {
dialog.visible = true;
dialog.title = "修改字典";
function handleEditClick(id: string): void {
dialogState.visible = true;
dialogState.title = "修改字典";
DictAPI.getFormData(id).then((data) => {
Object.assign(formData, data);
});
}
// 提交字典表单
function handleSubmitClick() {
dataFormRef.value.validate((isValid: boolean) => {
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((isValid) => {
if (isValid) {
loading.value = true;
const id = formData.id;
@@ -232,7 +241,7 @@ function handleSubmitClick() {
DictAPI.update(id, formData)
.then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
@@ -240,7 +249,7 @@ function handleSubmitClick() {
DictAPI.create(formData)
.then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
@@ -249,21 +258,21 @@ function handleSubmitClick() {
});
}
// 关闭字典弹窗
function handleCloseDialog() {
dialog.visible = false;
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
formData.id = undefined;
}
/**
* 删除字典
*
* @param id 字典ID
*/
function handleDelete(id?: number) {
function handleDelete(id?: number): void {
const attrGroupIds = [id || ids.value].join(",");
if (!attrGroupIds) {
ElMessage.warning("请勾选删除项");
@@ -286,8 +295,11 @@ function handleDelete(id?: number) {
);
}
// 打开字典数据
function handleOpenDictData(row: DictTypeItem) {
/**
* 打开字典数据页面
* @param row 字典数据
*/
function openDictData(row: DictTypeItem): void {
try {
const route = router.resolve({
name: "DictItem",

35
src/views/system/log/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
<el-form-item prop="keywords" label="关键字">
@@ -70,12 +69,12 @@ defineOptions({
import LogAPI from "@/api/system/log";
import type { LogItem, LogQueryParams } from "@/types/api";
import type { FormInstance } from "element-plus";
const queryFormRef = ref();
const loading = ref(false);
const total = ref(0);
// 表单引用
const queryFormRef = ref<FormInstance>();
// 查询参数
const queryParams = reactive<LogQueryParams>({
pageNum: 1,
pageSize: 10,
@@ -83,11 +82,15 @@ const queryParams = reactive<LogQueryParams>({
createTime: undefined as [string, string] | undefined,
});
// 日志表格数据
// 列表数据
const pageData = ref<LogItem[]>();
const total = ref(0);
const loading = ref(false);
/** 获取数据 */
function fetchData() {
/**
* 加载日志列表数据
*/
function fetchData(): void {
loading.value = true;
LogAPI.getPage(queryParams)
.then((data) => {
@@ -99,15 +102,19 @@ function fetchData() {
});
}
/** 查询（重置页码后获取数据）*/
function handleQuery() {
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
queryParams.pageNum = 1;
fetchData();
}
/** 重置查询 */
function handleResetQuery() {
queryFormRef.value.resetFields();
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
queryParams.pageNum = 1;
queryParams.createTime = undefined;
fetchData();

162
src/views/system/menu/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
@@ -26,7 +25,7 @@
v-hasPerm="['sys:menu:create']"
type="success"
icon="plus"
@click="handleOpenDialog('0')"
@click="openDialog('0')"
>
新增
</el-button>
@@ -97,7 +96,7 @@
link
size="small"
icon="plus"
@click.stop="handleOpenDialog(scope.row.id)"
@click.stop="openDialog(scope.row.id)"
>
新增
</el-button>
@@ -108,7 +107,7 @@
link
size="small"
icon="edit"
@click.stop="handleOpenDialog(undefined, scope.row.id)"
@click.stop="openDialog(undefined, scope.row.id)"
>
编辑
</el-button>
@@ -128,10 +127,10 @@
</el-card>
<el-drawer
v-model="dialog.visible"
:title="dialog.title"
v-model="dialogState.visible"
:title="dialogState.title"
:size="drawerSize"
@close="handleCloseDialog"
@close="closeDialog"
>
<el-form ref="menuFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="父级菜单" prop="parentId">
@@ -351,7 +350,7 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</template>
</el-drawer>
@@ -361,9 +360,9 @@
<script setup lang="ts">
import { useAppStore } from "@/store/modules/app";
import { DeviceEnum } from "@/enums/settings";
import MenuAPI from "@/api/system/menu";
import type { MenuQueryParams, MenuForm, MenuItem } from "@/types/api";
import type { FormInstance, FormRules } from "element-plus";
import { MenuScopeEnum, MenuTypeEnum } from "@/enums/business";
import { isTenantEnabled } from "@/utils/tenant";
@@ -374,44 +373,54 @@ defineOptions({
const appStore = useAppStore();
const queryFormRef = ref();
const menuFormRef = ref();
// 表单引用
const queryFormRef = ref<FormInstance>();
const menuFormRef = ref<FormInstance>();
// 查询参数
const queryParams = reactive<MenuQueryParams>({});
// 列表数据
const menuTableData = ref<MenuItem[]>([]);
const menuOptions = ref<OptionItem[]>([]);
const loading = ref(false);
const dialog = reactive({
// 弹窗状态
const dialogState = reactive({
title: "新增菜单",
visible: false,
});
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
// 查询参数
const queryParams = reactive<MenuQueryParams>({});
// 多租户关闭时，隐藏菜单范围（避免单租户误配置）
const showMenuScope = computed(() => isTenantEnabled());
// 菜单表格数据
const menuTableData = ref<MenuItem[]>([]);
// 顶级菜单下拉选项
const menuOptions = ref<OptionItem[]>([]);
// 初始菜单表单数据
// 表单数据
const initialMenuFormData = ref<MenuForm>({
id: undefined,
parentId: "0",
visible: 1,
scope: MenuScopeEnum.TENANT,
sort: 1,
type: MenuTypeEnum.MENU, // 默认菜单
type: MenuTypeEnum.MENU,
alwaysShow: 0,
keepAlive: 1,
params: [],
});
// 菜单表单数据
const formData = ref({ ...initialMenuFormData.value });
const selectedMenuId = ref<string | undefined>();
// 多租户关闭时，隐藏菜单范围
const showMenuScope = computed(() => isTenantEnabled());
// 抽屉宽度
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
// 是否外链
const isExternalLink = computed(
() =>
formData.value.type === MenuTypeEnum.MENU &&
!!formData.value.routePath &&
/^https?:\/\//.test(formData.value.routePath)
);
// 验证规则
const validateRouteName = (_: unknown, value: string, callback: (error?: Error) => void) => {
if (formData.value.type === MenuTypeEnum.MENU && !isExternalLink.value && !value) {
callback(new Error("请输入路由名称"));
@@ -426,8 +435,7 @@ const validateComponent = (_: unknown, value: string, callback: (error?: Error)
}
callback();
};
// 表单验证规则
const rules = reactive({
const rules: FormRules = {
parentId: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
@@ -435,13 +443,12 @@ const rules = reactive({
routePath: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
component: [{ validator: validateComponent, trigger: "blur" }],
visible: [{ required: true, message: "请选择显示状态", trigger: "change" }],
});
};
// 选择表格的行菜单ID
const selectedMenuId = ref<string | undefined>();
// 查询菜单
function handleQuery() {
/**
* 加载菜单列表数据
*/
function fetchData(): void {
loading.value = true;
MenuAPI.getList(queryParams)
.then((data) => {
@@ -452,53 +459,62 @@ function handleQuery() {
});
}
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
handleQuery();
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
fetchData();
}
// 行点击事件
function handleRowClick(row: MenuItem) {
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
fetchData();
}
/**
* 行点击事件
*/
function handleRowClick(row: MenuItem): void {
selectedMenuId.value = row.id;
}
/**
* 打开表单弹窗
*
* 打开弹窗
* @param parentId 父菜单ID
* @param menuId 菜单ID
* @param menuId 菜单ID（编辑时传入）
*/
function handleOpenDialog(parentId?: string, menuId?: string) {
function openDialog(parentId?: string, menuId?: string): void {
MenuAPI.getOptions(true)
.then((data) => {
menuOptions.value = [{ value: "0", label: "顶级菜单", children: data }];
})
.then(() => {
dialog.visible = true;
dialogState.visible = true;
if (menuId) {
dialog.title = "编辑菜单";
dialogState.title = "编辑菜单";
MenuAPI.getFormData(menuId).then((data) => {
initialMenuFormData.value = { ...data };
formData.value = data;
});
} else {
dialog.title = "新增菜单";
dialogState.title = "新增菜单";
formData.value.parentId = parentId?.toString();
}
});
}
// 菜单类型切换
function handleMenuTypeChange() {
// 如果菜单类型改变
/**
* 菜单类型切换事件
*/
function handleMenuTypeChange(): void {
if (formData.value.type !== initialMenuFormData.value.type) {
if (formData.value.type === MenuTypeEnum.MENU) {
// 目录切换到菜单时，清空组件路径"
if (initialMenuFormData.value.type === MenuTypeEnum.CATALOG) {
formData.value.component = "";
} else {
// 其他情况，保留原有的组件路径
formData.value.routePath = initialMenuFormData.value.routePath;
formData.value.component = initialMenuFormData.value.component;
}
@@ -509,37 +525,39 @@ function handleMenuTypeChange() {
/**
* 提交表单
*/
function handleSubmit() {
menuFormRef.value.validate((isValid: boolean) => {
function handleSubmit(): void {
menuFormRef.value?.validate((isValid) => {
if (isValid) {
const menuId = formData.value.id;
if (menuId) {
//修改时父级菜单不能为当前菜单
if (formData.value.parentId == menuId) {
ElMessage.error("父级菜单不能为当前菜单");
return;
}
MenuAPI.update(menuId, formData.value).then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
handleQuery();
closeDialog();
fetchData();
});
} else {
MenuAPI.create(formData.value).then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
handleQuery();
closeDialog();
fetchData();
});
}
}
});
}
// 删除菜单
function handleDelete(menuId: string) {
/**
* 删除菜单
* @param menuId 菜单ID
*/
function handleDelete(menuId: string): void {
if (!menuId) {
ElMessage.warning("请勾选删除项");
return false;
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
@@ -552,7 +570,7 @@ function handleDelete(menuId: string) {
MenuAPI.deleteById(menuId)
.then(() => {
ElMessage.success("删除成功");
handleQuery();
fetchData();
})
.finally(() => {
loading.value = false;
@@ -564,30 +582,28 @@ function handleDelete(menuId: string) {
);
}
function resetForm() {
menuFormRef.value.resetFields();
menuFormRef.value.clearValidate();
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
menuFormRef.value?.resetFields();
menuFormRef.value?.clearValidate();
formData.value = {
id: undefined,
parentId: "0",
visible: 1,
scope: MenuScopeEnum.TENANT,
sort: 1,
type: MenuTypeEnum.MENU, // 默认菜单
type: MenuTypeEnum.MENU,
alwaysShow: 0,
keepAlive: 1,
params: [],
};
}
// 关闭弹窗
function handleCloseDialog() {
dialog.visible = false;
resetForm();
}
onMounted(() => {
handleQuery();
fetchData();
});
</script>

193
src/views/system/notice/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-suffix=":">
<el-form-item label="标题" prop="title">
@@ -39,7 +38,7 @@
v-hasPerm="['sys:notice:create']"
type="success"
icon="plus"
@click="handleOpenDialog()"
@click="openDialog()"
>
新增通知
</el-button>
@@ -138,7 +137,7 @@
type="primary"
size="small"
link
@click="handleOpenDialog(scope.row.id)"
@click="openDialog(scope.row.id)"
>
编辑
</el-button>
@@ -165,27 +164,26 @@
/>
</el-card>
<!-- 通知公告表单弹窗 -->
<el-dialog
v-model="dialog.visible"
v-model="dialogState.visible"
:show-close="false"
:fullscreen="dialog.fullscreen"
:fullscreen="dialogState.fullscreen"
top="6vh"
width="70%"
custom-class="notice-dialog"
@close="handleCloseDialog"
@close="closeDialog"
>
<template #header>
<div class="flex-x-between">
<span>{{ dialog.title }}</span>
<span>{{ dialogState.title }}</span>
<div class="dialog-toolbar">
<el-button circle @click="toggleDialogFullscreen">
<template #icon>
<FullScreen v-if="!dialog.fullscreen" />
<FullScreen v-if="!dialogState.fullscreen" />
<CopyDocument v-else />
</template>
</el-button>
<el-button circle @click="handleCloseDialog">
<el-button circle @click="closeDialog">
<template #icon>
<Close />
</template>
@@ -227,11 +225,10 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit()">确定</el-button>
<el-button @click="handleCloseDialog()">取消</el-button>
<el-button @click="closeDialog()">取消</el-button>
</div>
</template>
</el-dialog>
<!-- 通知公告详情 -->
<el-dialog
v-model="detailDialog.visible"
:show-close="false"
@@ -280,49 +277,50 @@ defineOptions({
inheritAttrs: false,
});
import { ref, reactive } from "vue";
import NoticeAPI from "@/api/system/notice";
import type { NoticeItem, NoticeForm, NoticeQueryParams, NoticeDetail } from "@/types/api";
import UserAPI from "@/api/system/user";
import type { FormInstance, FormRules } from "element-plus";
const queryFormRef = ref();
const dataFormRef = ref();
const loading = ref(false);
const selectIds = ref<number[]>([]);
const total = ref(0);
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 查询参数
const queryParams = reactive<NoticeQueryParams>({
pageNum: 1,
pageSize: 10,
});
const userOptions = ref<OptionItem[]>([]);
// 通知公告表格数据
// 列表数据
const pageData = ref<NoticeItem[]>([]);
const userOptions = ref<OptionItem[]>([]);
const total = ref(0);
const loading = ref(false);
const selectIds = ref<number[]>([]);
// 弹窗
const dialog = reactive({
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
fullscreen: false,
});
// 通知公告表单数据
// 表单数据
const formData = reactive<NoticeForm>({
level: "L", // 默认优先级为 L（低）
targetType: 1, // 默认目标类型为全部
level: "L",
targetType: 1,
});
// 通知公告表单校验规则
const rules = reactive({
// 验证规则
const rules: FormRules = {
title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
content: [
{
required: true,
message: "请输入通知内容",
trigger: "blur",
validator: (rule: any, value: string, callback: any) => {
validator: (rule, value: string, callback) => {
if (!value.replace(/<[^>]+>/g, "").trim()) {
callback(new Error("请输入通知内容"));
} else {
@@ -332,21 +330,26 @@ const rules = reactive({
},
],
type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
});
};
// 详情弹窗状态
const detailDialog = reactive({
visible: false,
});
const currentNotice = ref<NoticeDetail>({});
// 查询通知公告
function handleQuery() {
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
queryParams.pageNum = 1;
fetchData();
}
//发送请求接口
function fetchData() {
/**
* 加载通知公告列表数据
*/
function fetchData(): void {
loading.value = true;
NoticeAPI.getPage(queryParams)
.then((data) => {
@@ -358,28 +361,35 @@ function fetchData() {
});
}
// 重置查询
function handleResetQuery() {
queryFormRef.value!.resetFields();
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
queryParams.pageNum = 1;
handleQuery();
fetchData();
}
// 行复选框选中项变化
function handleSelectionChange(selection: any) {
selectIds.value = selection.map((item: any) => item.id);
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: NoticeItem[]): void {
selectIds.value = selection.map((item) => item.id);
}
// 打开通知公告弹窗
function handleOpenDialog(id?: string) {
dialog.fullscreen = false;
/**
* 打开弹窗
* @param id 通知ID（编辑时传入）
*/
function openDialog(id?: string): void {
dialogState.fullscreen = false;
UserAPI.getOptions().then((data) => {
userOptions.value = data;
});
dialog.visible = true;
dialogState.visible = true;
if (id) {
dialog.title = "修改公告";
dialogState.title = "修改公告";
NoticeAPI.getFormData(id).then((data) => {
Object.assign(formData, {
...data,
@@ -390,29 +400,37 @@ function handleOpenDialog(id?: string) {
});
} else {
Object.assign(formData, { level: "L", targetType: 1, targetUsers: [] });
dialog.title = "新增公告";
dialogState.title = "新增公告";
}
}
// 发布通知公告
function handlePublish(id: string) {
/**
* 发布通知公告
* @param id 通知ID
*/
function handlePublish(id: string): void {
NoticeAPI.publish(id).then(() => {
ElMessage.success("发布成功");
handleQuery();
fetchData();
});
}
// 撤回通知公告
function handleRevoke(id: string) {
/**
* 撤回通知公告
* @param id 通知ID
*/
function handleRevoke(id: string): void {
NoticeAPI.revoke(id).then(() => {
ElMessage.success("撤回成功");
handleQuery();
fetchData();
});
}
// 通知公告表单提交
function handleSubmit() {
dataFormRef.value.validate((valid: any) => {
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((valid) => {
if (valid) {
loading.value = true;
const payload = {
@@ -425,7 +443,7 @@ function handleSubmit() {
NoticeAPI.update(id, payload)
.then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
@@ -433,7 +451,7 @@ function handleSubmit() {
NoticeAPI.create(payload)
.then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
@@ -442,17 +460,24 @@ function handleSubmit() {
});
}
// 重置表单
function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dialogState.fullscreen = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
formData.id = undefined;
formData.targetType = 1;
formData.targetUsers = [];
formData.content = "";
}
function normalizeTargetUsers(value?: unknown) {
/**
* 标准化目标用户数据
*/
function normalizeTargetUsers(value?: unknown): number[] {
if (!value) {
return [];
}
@@ -470,20 +495,18 @@ function normalizeTargetUsers(value?: unknown) {
return [];
}
// 关闭通知公告弹窗
function handleCloseDialog() {
dialog.visible = false;
dialog.fullscreen = false;
resetForm();
/**
* 弹窗全屏切换
*/
function toggleDialogFullscreen(): void {
dialogState.fullscreen = !dialogState.fullscreen;
}
// 弹窗全屏切换
function toggleDialogFullscreen() {
dialog.fullscreen = !dialog.fullscreen;
}
// 删除通知公告
function handleDelete(id?: number) {
/**
* 删除通知公告
* @param id 通知ID
*/
function handleDelete(id?: number): void {
const deleteIds = [id || selectIds.value].join(",");
if (!deleteIds) {
ElMessage.warning("请勾选删除项");
@@ -510,17 +533,21 @@ function handleDelete(id?: number) {
);
}
// 关闭通知详情弹窗
const closeDetailDialog = () => {
detailDialog.visible = false;
};
// 打开通知详情弹窗
const openDetailDialog = async (id: string) => {
/**
* 打开详情弹窗
*/
async function openDetailDialog(id: string): Promise<void> {
const noticeDetail = await NoticeAPI.getDetail(id);
currentNotice.value = noticeDetail;
detailDialog.visible = true;
};
}
/**
* 关闭详情弹窗
*/
function closeDetailDialog(): void {
detailDialog.visible = false;
}
onMounted(() => {
handleQuery();

211
src/views/system/role/index.vue
View File

@@ -1,4 +1,4 @@
<template>
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
@@ -22,12 +22,12 @@
<el-card shadow="hover" class="table-section">
<div class="table-section__toolbar">
<div class="table-section__toolbar--actions">
<el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
<el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
icon="delete"
@click="handleDelete()"
@click="handleBatchDelete()"
>
删除
</el-button>
@@ -66,7 +66,7 @@
size="small"
link
icon="position"
@click="openRolePermissionAssignment(scope.row)"
@click="handleAssignPermClick(scope.row)"
>
分配权限
</el-button>
@@ -75,7 +75,7 @@
size="small"
link
icon="edit"
@click="handleOpenDialog(scope.row.id)"
@click="handleEditClick(scope.row.id)"
>
编辑
</el-button>
@@ -97,16 +97,16 @@
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="fetchData"
@pagination="fetchList"
/>
</el-card>
<!-- 角色表单弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
v-model="dialogState.visible"
:title="dialogState.title"
width="600px"
@close="handleCloseDialog"
@close="closeDialog"
>
<el-form ref="roleFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="name">
@@ -159,7 +159,7 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</template>
</el-dialog>
@@ -187,7 +187,7 @@
<el-checkbox
v-model="parentChildLinked"
class="ml-5"
@change="handleparentChildLinkedChange"
@change="handleParentChildLinkedChange"
>
父子联动
</el-checkbox>
@@ -266,7 +266,7 @@ const menuPermOptions = ref<OptionItem[]>([]);
const deptOptions = ref<OptionItem[]>([]);
// 弹窗
const dialog = reactive({
const dialogState = reactive({
title: "",
visible: false,
});
@@ -300,94 +300,67 @@ const isExpanded = ref(true);
const parentChildLinked = ref(true);
// 获取数据
function fetchData() {
/**
* 加载角色列表数据
*/
async function fetchList(): Promise<void> {
loading.value = true;
RoleAPI.getPage(queryParams)
.then((data) => {
roleList.value = data.list;
total.value = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
try {
const data = await RoleAPI.getPage(queryParams);
roleList.value = data.list;
total.value = data.total ?? 0;
} finally {
loading.value = false;
}
}
// 查询（重置页码后获取数据）
function handleQuery() {
function handleQuery(): void {
queryParams.pageNum = 1;
fetchData();
fetchList();
}
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
queryParams.pageNum = 1;
fetchData();
/**
* 重置查询条件
*/
function resetQuery(): void {
queryFormRef.value?.resetFields();
}
/**
* 重置查询条件并重新查询
*/
function handleResetQuery(): void {
resetQuery();
handleQuery();
}
// 行复选框选中
function handleSelectionChange(selection: any) {
function handleSelectionChange(selection: any): void {
ids.value = selection.map((item: any) => item.id);
}
// 打开角色弹窗
async function handleOpenDialog(roleId?: string) {
dialog.visible = true;
// 获取部门下拉选项
if (deptOptions.value.length === 0) {
deptOptions.value = await DeptAPI.getOptions();
}
if (roleId) {
dialog.title = "修改角色";
RoleAPI.getFormData(roleId).then((data) => {
Object.assign(formData, data);
});
} else {
dialog.title = "新增角色";
}
/**
* 打开表单弹窗
*/
function openDialog(): void {
dialogState.visible = true;
}
// 提交角色表单
function handleSubmit() {
roleFormRef.value.validate((valid: any) => {
if (valid) {
// 如果不是自定义数据权限，清空部门ID列表
const submitData = { ...formData };
if (submitData.dataScope !== 5) {
submitData.deptIds = undefined;
}
loading.value = true;
const roleId = formData.id;
if (roleId) {
RoleAPI.update(roleId, submitData)
.then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
} else {
RoleAPI.create(submitData)
.then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
}
}
});
/**
* 关闭表单弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
resetForm();
}
// 关闭弹窗
function handleCloseDialog() {
dialog.visible = false;
roleFormRef.value.resetFields();
roleFormRef.value.clearValidate();
/**
* 重置表单数据和验证状态
*/
function resetForm(): void {
roleFormRef.value?.resetFields();
roleFormRef.value?.clearValidate();
formData.id = undefined;
formData.sort = 1;
@@ -396,9 +369,64 @@ function handleCloseDialog() {
formData.deptIds = undefined;
}
/**
* 新增按钮点击事件
*/
async function handleCreateClick(): Promise<void> {
dialogState.title = "新增角色";
if (deptOptions.value.length === 0) {
deptOptions.value = await DeptAPI.getOptions();
}
openDialog();
}
/**
* 编辑按钮点击事件
* @param roleId 角色ID
*/
async function handleEditClick(roleId: string): Promise<void> {
dialogState.title = "修改角色";
if (deptOptions.value.length === 0) {
deptOptions.value = await DeptAPI.getOptions();
}
const data = await RoleAPI.getFormData(roleId);
Object.assign(formData, data);
openDialog();
}
// 提交角色表单
async function handleSubmit(): Promise<void> {
const valid = await roleFormRef.value?.validate().then(
() => true,
() => false
);
if (!valid) return;
const submitData = { ...formData };
if (submitData.dataScope !== 5) {
submitData.deptIds = undefined;
}
loading.value = true;
try {
const roleId = formData.id;
if (roleId) {
await RoleAPI.update(roleId, submitData);
ElMessage.success("修改成功");
} else {
await RoleAPI.create(submitData);
ElMessage.success("新增成功");
}
closeDialog();
handleResetQuery();
} finally {
loading.value = false;
}
}
// 删除角色
function handleDelete(roleId?: number) {
const roleIds = [roleId || ids.value].join(",");
function handleDelete(roleId?: number): void {
const roleIds = roleId ? String(roleId) : ids.value.join(",");
if (!roleIds) {
ElMessage.warning("请勾选删除项");
return;
@@ -424,8 +452,15 @@ function handleDelete(roleId?: number) {
);
}
/**
* 批量删除按钮点击事件
*/
function handleBatchDelete(): void {
handleDelete();
}
// 打开分配菜单权限弹窗
async function openRolePermissionAssignment(row: RoleItem) {
async function handleAssignPermClick(row: RoleItem): Promise<void> {
const roleId = row.id;
if (roleId) {
assignPermDialogVisible.value = true;
@@ -471,7 +506,7 @@ function handleAssignPermSubmit() {
}
// 展开/收缩 菜单权限树
function togglePermTree() {
function togglePermTree(): void {
isExpanded.value = !isExpanded.value;
if (permTreeRef.value) {
Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
@@ -500,7 +535,7 @@ function handlePermFilter(
}
// 父子菜单节点是否联动
function handleparentChildLinkedChange(val: any) {
function handleParentChildLinkedChange(val: any): void {
parentChildLinked.value = val;
}

235
src/views/system/tenant/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字">
@@ -33,7 +32,7 @@
v-hasPerm="['sys:tenant:create']"
type="success"
icon="plus"
@click="handleOpenDialog()"
@click="openDialog()"
>
新增
</el-button>
@@ -96,7 +95,7 @@
link
icon="menu"
title="更换租户套餐（将影响可用功能）"
@click="handleOpenTenantPlanDialog(scope.row)"
@click="openTenantPlanDialog(scope.row)"
>
更换套餐
</el-button>
@@ -114,7 +113,7 @@
icon="setting"
:disabled="!scope.row.planId"
title="在当前套餐范围内配置租户可用功能"
@click="handleOpenTenantCustomizeDialog(scope.row)"
@click="openTenantCustomizeDialog(scope.row)"
>
套餐功能配置
</el-button>
@@ -125,7 +124,7 @@
size="small"
link
icon="edit"
@click="handleOpenDialog(scope.row.id)"
@click="openDialog(scope.row.id)"
>
编辑
</el-button>
@@ -153,12 +152,11 @@
/>
</el-card>
<!-- 租户表单弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
v-model="dialogState.visible"
:title="dialogState.title"
width="600px"
@close="handleCloseDialog"
@close="closeDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="租户名称" prop="name">
@@ -241,17 +239,16 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</template>
</el-dialog>
<!-- 选择套餐（弹窗） -->
<el-dialog
v-model="tenantPlanSelectVisible"
title="更换租户套餐"
width="520px"
@close="handleCloseTenantPlanSelectDialog"
@close="closeTenantPlanSelectDialog()"
>
<el-form label-width="90px" class="mb-3">
<el-form-item label="当前套餐">
@@ -302,12 +299,11 @@
</template>
</el-dialog>
<!-- 套餐功能配置（抽屉） -->
<el-drawer
v-model="tenantPlanDialogVisible"
title="套餐功能配置"
size="640px"
@close="handleCloseTenantPlanDialog"
@close="closeTenantPlanDialog()"
>
<el-alert
type="info"
@@ -359,10 +355,9 @@ defineOptions({
inheritAttrs: false,
});
import { ElMessage, ElMessageBox } from "element-plus";
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
import { hasPerm } from "@/utils/auth";
import TenantAPI from "@/api/system/tenant";
import TenantPlanAPI from "@/api/system/tenant-plan";
import MenuAPI from "@/api/system/menu";
@@ -376,37 +371,39 @@ import type {
import { MenuScopeEnum } from "@/enums/business";
import { isPlatformTenantId } from "@/utils/tenant";
const queryFormRef = ref();
const dataFormRef = ref();
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
const menuTreeRef = ref();
const planPreviewTreeRef = ref();
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
// 查询参数
const queryParams = reactive<TenantQueryParams>({
pageNum: 1,
pageSize: 10,
keywords: "",
});
// 列表数据
const pageData = ref<TenantItem[]>([]);
// 菜单树数据（已根据套餐过滤）
const menuPermOptions = ref<OptionItem[]>([]);
const planOptions = ref<OptionItem[]>([]);
const total = ref(0);
const loading = ref(false);
const ids = ref<number[]>([]);
const dialog = reactive({
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 套餐选择弹窗状态
const tenantPlanSelectVisible = ref(false);
const tenantPlanDialogVisible = ref(false);
const checkedTenant = ref<{ id?: number; name?: string; planId?: number }>({});
const checkedTenantForm = ref<TenantForm | null>(null);
const tenantPlanId = ref<number | undefined>();
// 套餐菜单与租户菜单（用于勾选）
const planMenuIds = ref<number[]>([]);
const tenantMenuIds = ref<number[]>([]);
const menuSourceOptions = ref<OptionItem[]>([]);
@@ -428,13 +425,12 @@ const menuTreeProps = {
disabled: "disabled",
};
const planOptions = ref<OptionItem[]>([]);
// 目标套餐未配置菜单时提示禁止提交
const isPlanMenuEmpty = computed(
() => tenantPlanId.value != null && planMenuIds.value.length === 0
);
// 表单数据
const formData = reactive<TenantForm & TenantCreateForm>({
id: undefined,
name: "",
@@ -456,12 +452,12 @@ const isPlatformTenant = computed(() => isPlatformTenantId(formData.id));
// 平台租户不允许批量删除
const isTenantSelectable = (row: TenantItem) => !isPlatformTenantId(row.id);
const rules = reactive({
// 验证规则
const rules: FormRules = {
name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
code: [{ required: true, message: "请输入租户编码", trigger: "blur" }],
planId: [
{
// 平台租户不绑定套餐，仅创建时校验
validator: (_: unknown, value: number | undefined, callback: (error?: Error) => void) => {
if (isPlatformTenant.value) return callback();
if (formData.id != null && String(formData.id) !== "") return callback();
@@ -471,24 +467,23 @@ const rules = reactive({
trigger: "change",
},
],
});
};
const hasPermTenantMenu = computed(() => hasPerm("sys:tenant:plan-assign"));
// 说明：
// 1. 套餐决定功能上限
// 2. 功能配置仅支持在套餐范围内关闭功能
// 3. 不允许在功能配置页切换套餐
// 根据套餐 ID 解析显示名称
function resolvePlanLabel(planId?: number) {
/**
* 根据套餐ID解析显示名称
*/
function resolvePlanLabel(planId?: number): string {
if (planId == null) return "-";
const matched = planOptions.value.find((item) => Number(item.value) === planId);
return matched?.label || String(planId);
}
// 查询租户列表
function fetchData() {
/**
* 加载租户列表数据
*/
function fetchData(): void {
loading.value = true;
TenantAPI.getPage(queryParams)
.then((data) => {
@@ -503,8 +498,10 @@ function fetchData() {
});
}
// 打开更换套餐弹窗并初始化数据
async function handleOpenTenantPlanDialog(row: TenantItem) {
/**
* 打开更换套餐弹窗
*/
async function openTenantPlanDialog(row: TenantItem): Promise<void> {
const tenantId = row.id;
if (tenantId == null || tenantId === "") return;
if (isPlatformTenantId(tenantId)) return;
@@ -542,18 +539,24 @@ async function handleOpenTenantPlanDialog(row: TenantItem) {
}
}
// 关闭套餐选择弹窗
function handleCloseTenantPlanSelectDialog() {
/**
* 关闭套餐选择弹窗
*/
function closeTenantPlanSelectDialog(): void {
resetTenantPlanState();
}
// 关闭套餐功能配置抽屉
function handleCloseTenantPlanDialog() {
/**
* 关闭套餐功能配置抽屉
*/
function closeTenantPlanDialog(): void {
resetTenantPlanState();
}
// 重置套餐相关的所有状态
function resetTenantPlanState() {
/**
* 重置套餐相关的所有状态
*/
function resetTenantPlanState(): void {
tenantPlanDialogVisible.value = false;
tenantPlanSelectVisible.value = false;
planPreviewKeywords.value = "";
@@ -574,8 +577,10 @@ function resetTenantPlanState() {
menuTreeRef.value?.setCheckedKeys([], false);
}
// 切换目标套餐时更新可用菜单
async function handlePlanChange(planId?: number) {
/**
* 切换目标套餐时更新可用菜单
*/
async function handlePlanChange(planId?: number): Promise<void> {
if (!planId) {
planMenuIds.value = [];
planPreviewOptions.value = [];
@@ -614,14 +619,18 @@ function updateCheckedMenus() {
menuCheckedCount.value = checkedMenuIds.length;
}
// 更新已勾选菜单数量
function handleMenuCheckedChange() {
/**
* 更新已勾选菜单数量
*/
function handleMenuCheckedChange(): void {
const checkedKeys = menuTreeRef.value?.getCheckedKeys(false) || [];
menuCheckedCount.value = checkedKeys.length;
}
// 打开套餐功能配置抽屉并初始化数据
async function handleOpenTenantCustomizeDialog(row?: TenantItem) {
/**
* 打开套餐功能配置抽屉
*/
async function openTenantCustomizeDialog(row?: TenantItem): Promise<void> {
const tenantId = row?.id ?? checkedTenant.value.id;
if (!tenantId) return;
if (isPlatformTenantId(tenantId)) return;
@@ -664,8 +673,10 @@ async function handleOpenTenantCustomizeDialog(row?: TenantItem) {
}
}
// 提交更换套餐操作
async function handleTenantPlanSelectSubmit() {
/**
* 提交更换套餐操作
*/
async function handleTenantPlanSelectSubmit(): Promise<void> {
const tenantId = checkedTenant.value.id;
if (!tenantId) return;
if (!tenantPlanId.value) {
@@ -723,16 +734,9 @@ async function handleTenantPlanSelectSubmit() {
}
}
// 菜单搜索关键字联动过滤树
watch(menuKeywords, (val) => {
menuTreeRef.value?.filter(val);
});
// 套餐预览搜索关键字联动过滤树
watch(planPreviewKeywords, (val) => {
planPreviewTreeRef.value?.filter(val);
});
// 过滤菜单树，仅保留套餐允许的节点
/**
* 过滤菜单树，仅保留套餐允许的节点
*/
function filterMenuOptionsByIds(
options: OptionItem[],
allowedMenuIdSet: Set<number>
@@ -752,8 +756,10 @@ function filterMenuOptionsByIds(
}, []);
}
// 提交套餐功能配置更新
async function handleTenantPlanSubmit() {
/**
* 提交套餐功能配置更新
*/
async function handleTenantPlanSubmit(): Promise<void> {
const tenantId = checkedTenant.value.id;
if (!tenantId) return;
if (!tenantPlanId.value) {
@@ -795,12 +801,16 @@ async function handleTenantPlanSubmit() {
}
}
// 统一菜单 ID 为 number 并过滤无效值
function normalizeMenuIds(menuIds: Array<number | string>) {
/**
* 统一菜单ID为number并过滤无效值
*/
function normalizeMenuIds(menuIds: Array<number | string>): number[] {
return menuIds.map((menuId) => Number(menuId)).filter((menuId) => !Number.isNaN(menuId));
}
// 递归设置菜单节点禁用状态
/**
* 递归设置菜单节点禁用状态
*/
function applyMenuOptionsDisabled(options: OptionItem[], disabled: boolean): OptionItem[] {
return options.map((option) => ({
...option,
@@ -809,29 +819,38 @@ function applyMenuOptionsDisabled(options: OptionItem[], disabled: boolean): Opt
}));
}
// 执行搜索
function handleQuery() {
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
queryParams.pageNum = 1;
fetchData();
}
// 重置搜索条件
function handleResetQuery() {
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
queryParams.pageNum = 1;
fetchData();
}
// 记录表格勾选项
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => Number(item.id));
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: TenantItem[]): void {
ids.value = selection.map((item) => Number(item.id));
}
// 打开新增/编辑租户弹窗
async function handleOpenDialog(tenantId?: string) {
dialog.visible = true;
/**
* 打开弹窗
* @param tenantId 租户ID（编辑时传入）
*/
async function openDialog(tenantId?: string): Promise<void> {
dialogState.visible = true;
if (tenantId != null && tenantId !== "") {
dialog.title = "修改租户";
dialogState.title = "修改租户";
const data = await TenantAPI.getFormData(tenantId);
Object.assign(formData, data);
formData.adminUsername = "";
@@ -840,7 +859,7 @@ async function handleOpenDialog(tenantId?: string) {
formData.planId = undefined;
}
} else {
dialog.title = "新增租户";
dialogState.title = "新增租户";
Object.assign(formData, {
id: undefined,
name: "",
@@ -858,9 +877,11 @@ async function handleOpenDialog(tenantId?: string) {
}
}
// 关闭租户弹窗并重置表单
function handleCloseDialog() {
dialog.visible = false;
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
Object.assign(formData, {
@@ -879,8 +900,10 @@ function handleCloseDialog() {
});
}
// 提交租户表单（新增/编辑）
const handleSubmit = useDebounceFn(async () => {
/**
* 提交表单
*/
const handleSubmit = useDebounceFn(async (): Promise<void> => {
const valid = await dataFormRef.value?.validate().then(
() => true,
() => false
@@ -923,15 +946,18 @@ const handleSubmit = useDebounceFn(async () => {
ElMessage.success(`新增成功：管理员账号 ${result?.adminUsername || ""}`);
}
handleCloseDialog();
closeDialog();
handleResetQuery();
} finally {
loading.value = false;
}
}, 300);
// 删除单个或批量租户
function handleDelete(tenantId?: string) {
/**
* 删除租户
* @param tenantId 租户ID
*/
function handleDelete(tenantId?: string): void {
const tenantIds = tenantId != null && tenantId !== "" ? tenantId : ids.value.join(",");
if (!tenantIds) {
ElMessage.warning("请勾选删除项");
@@ -959,20 +985,31 @@ function handleDelete(tenantId?: string) {
);
}
// 页面初始化
onMounted(() => {
fetchData();
fetchPlanOptions();
});
// 拉取租户套餐选项
async function fetchPlanOptions() {
/**
* 加载租户套餐选项
*/
async function fetchPlanOptions(): Promise<void> {
const options = await TenantPlanAPI.getOptions();
planOptions.value = options.map((item) => ({
...item,
value: item.value != null ? Number(item.value) : item.value,
}));
}
// 菜单搜索关键字联动过滤树
watch(menuKeywords, (val) => {
menuTreeRef.value?.filter(val);
});
// 套餐预览搜索关键字联动过滤树
watch(planPreviewKeywords, (val) => {
planPreviewTreeRef.value?.filter(val);
});
onMounted(() => {
fetchData();
fetchPlanOptions();
});
</script>
<style scoped lang="scss"></style>

146
src/views/system/tenant/plan.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="app-container">
<!-- 搜索区域 -->
<div class="filter-section">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
@@ -33,7 +32,7 @@
v-hasPerm="['sys:tenant-plan:create']"
type="success"
icon="plus"
@click="handleOpenDialog()"
@click="openDialog()"
>
新增
</el-button>
@@ -68,7 +67,7 @@
size="small"
link
icon="menu"
@click="handleOpenPlanMenuDialog(scope.row)"
@click="openPlanMenuDialog(scope.row)"
>
菜单配置
</el-button>
@@ -78,7 +77,7 @@
size="small"
link
icon="edit"
@click="handleOpenDialog(scope.row.id)"
@click="openDialog(scope.row.id)"
>
编辑
</el-button>
@@ -105,12 +104,11 @@
/>
</el-card>
<!-- 租户套餐表单弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
v-model="dialogState.visible"
:title="dialogState.title"
width="520px"
@close="handleCloseDialog"
@close="closeDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="套餐名称" prop="name">
@@ -140,17 +138,16 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button @click="handleCloseDialog">取消</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</template>
</el-dialog>
<!-- 方案菜单配置 -->
<el-drawer
v-model="planMenuDialogVisible"
:title="'【' + checkedPlan.name + '】菜单配置'"
size="600px"
@close="handleClosePlanMenuDialog"
@close="closePlanMenuDialog"
>
<div class="flex-x-between">
<el-input v-model="menuKeywords" clearable class="w-[150px]" placeholder="菜单名称">
@@ -218,9 +215,8 @@ defineOptions({
inheritAttrs: false,
});
import { ElMessage, ElMessageBox } from "element-plus";
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
import MenuAPI from "@/api/system/menu";
import TenantPlanAPI from "@/api/system/tenant-plan";
import type {
@@ -231,28 +227,32 @@ import type {
} from "@/types/api";
import { MenuScopeEnum } from "@/enums/business";
const queryFormRef = ref();
const dataFormRef = ref();
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
const dataTableRef = ref();
const menuTreeRef = ref();
const loading = ref(false);
const total = ref(0);
// 查询参数
const queryParams = reactive<TenantPlanQueryParams>({
pageNum: 1,
pageSize: 10,
keywords: "",
});
// 列表数据
const pageData = ref<TenantPlanItem[]>([]);
const menuPermOptions = ref<OptionItem[]>([]);
const total = ref(0);
const loading = ref(false);
const dialog = reactive({
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 表单数据
const formData = reactive<TenantPlanForm>({
id: undefined,
name: "",
@@ -262,20 +262,24 @@ const formData = reactive<TenantPlanForm>({
remark: "",
});
const rules = reactive({
// 验证规则
const rules: FormRules = {
name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
code: [{ required: true, message: "请输入套餐编码", trigger: "blur" }],
status: [{ required: true, message: "请选择状态", trigger: "change" }],
});
};
// 菜单配置弹窗状态
const planMenuDialogVisible = ref(false);
const checkedPlan = ref<{ id?: number; name?: string }>({});
const menuKeywords = ref("");
const menuExpanded = ref(true);
const menuParentChildLinked = ref(true);
// 获取租户套餐分页数据
function fetchData() {
/**
* 加载租户套餐分页数据
*/
function fetchData(): void {
loading.value = true;
TenantPlanAPI.getPage(queryParams)
.then((data) => {
@@ -287,24 +291,31 @@ function fetchData() {
});
}
// 查询
function handleQuery() {
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
queryParams.pageNum = 1;
fetchData();
}
// 重置查询条件
function handleResetQuery() {
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
queryParams.pageNum = 1;
fetchData();
}
// 打开新增/编辑弹窗
async function handleOpenDialog(planId?: number) {
dialog.visible = true;
/**
* 打开弹窗
* @param planId 套餐ID（编辑时传入）
*/
async function openDialog(planId?: number): Promise<void> {
dialogState.visible = true;
if (planId) {
dialog.title = "修改套餐";
dialogState.title = "修改套餐";
const data = await TenantPlanAPI.getFormData(String(planId));
Object.assign(formData, data);
if (formData.status == null) {
@@ -314,7 +325,7 @@ async function handleOpenDialog(planId?: number) {
formData.sort = 1;
}
} else {
dialog.title = "新增套餐";
dialogState.title = "新增套餐";
Object.assign(formData, {
id: undefined,
name: "",
@@ -326,9 +337,11 @@ async function handleOpenDialog(planId?: number) {
}
}
// 关闭弹窗并重置表单
function handleCloseDialog() {
dialog.visible = false;
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
Object.assign(formData, {
@@ -341,8 +354,10 @@ function handleCloseDialog() {
});
}
// 提交新增/编辑
const handleSubmit = useDebounceFn(async () => {
/**
* 提交表单
*/
const handleSubmit = useDebounceFn(async (): Promise<void> => {
const valid = await dataFormRef.value?.validate().then(
() => true,
() => false
@@ -358,15 +373,18 @@ const handleSubmit = useDebounceFn(async () => {
await TenantPlanAPI.create(formData);
ElMessage.success("新增成功");
}
handleCloseDialog();
closeDialog();
handleResetQuery();
} finally {
loading.value = false;
}
}, 300);
// 删除
function handleDelete(planId?: number) {
/**
* 删除套餐
* @param planId 套餐ID
*/
function handleDelete(planId?: number): void {
if (!planId) return;
ElMessageBox.confirm("确认删除该租户套餐吗？", "警告", {
confirmButtonText: "确定",
@@ -385,15 +403,16 @@ function handleDelete(planId?: number) {
});
}
// 打开方案菜单配置抽屉
async function handleOpenPlanMenuDialog(row: TenantPlanItem) {
/**
* 打开菜单配置弹窗
*/
async function openPlanMenuDialog(row: TenantPlanItem): Promise<void> {
if (!row.id) return;
planMenuDialogVisible.value = true;
loading.value = true;
checkedPlan.value = { id: row.id, name: row.name };
try {
// 套餐菜单仅允许业务菜单
const menuOptions = await MenuAPI.getOptions(false, MenuScopeEnum.TENANT);
menuPermOptions.value = menuOptions;
const menuIds = await TenantPlanAPI.getPlanMenuIds(row.id);
@@ -405,8 +424,10 @@ async function handleOpenPlanMenuDialog(row: TenantPlanItem) {
}
}
// 关闭方案菜单配置抽屉并重置状态
function handleClosePlanMenuDialog() {
/**
* 关闭菜单配置弹窗
*/
function closePlanMenuDialog(): void {
planMenuDialogVisible.value = false;
menuKeywords.value = "";
menuExpanded.value = true;
@@ -414,8 +435,10 @@ function handleClosePlanMenuDialog() {
menuTreeRef.value?.setCheckedKeys([], false);
}
// 展开/收缩菜单树
function toggleMenuTree() {
/**
* 展开/收缩菜单树
*/
function toggleMenuTree(): void {
menuExpanded.value = !menuExpanded.value;
if (menuTreeRef.value) {
Object.values(menuTreeRef.value.store.nodesMap).forEach((node: any) => {
@@ -428,24 +451,25 @@ function toggleMenuTree() {
}
}
// 切换父子联动
function handleMenuLinkChange(val: string | number | boolean) {
/**
* 切换父子联动
*/
function handleMenuLinkChange(val: string | number | boolean): void {
menuParentChildLinked.value = Boolean(val);
}
// 菜单树关键字过滤
watch(menuKeywords, (val) => {
menuTreeRef.value?.filter(val);
});
// 菜单树过滤逻辑
function handleMenuFilter(value: string, data: { [key: string]: any }) {
/**
* 菜单树过滤逻辑
*/
function handleMenuFilter(value: string, data: { [key: string]: any }): boolean {
if (!value) return true;
return data.label.includes(value);
}
// 提交方案菜单配置
async function handlePlanMenuSubmit() {
/**
* 提交菜单配置
*/
async function handlePlanMenuSubmit(): Promise<void> {
const planId = checkedPlan.value.id;
if (!planId) return;
@@ -463,7 +487,11 @@ async function handlePlanMenuSubmit() {
}
}
// 初始化
// 菜单树关键字过滤
watch(menuKeywords, (val) => {
menuTreeRef.value?.filter(val);
});
onMounted(() => {
fetchData();
});

20
src/views/system/user/components/UserDeptTree.vue
View File

@@ -1,4 +1,4 @@
<template>
<template>
<el-card shadow="never">
<el-input v-model="deptName" placeholder="部门名称" clearable>
<template #prefix>
@@ -21,6 +21,7 @@
<script setup lang="ts">
import DeptAPI from "@/api/system/dept";
const props = defineProps({
modelValue: {
type: [String, Number],
@@ -28,9 +29,10 @@ const props = defineProps({
},
});
const deptList = ref<OptionItem[]>(); // 部门列表
const deptTreeRef = ref(); // 部门树
const deptName = ref(); // 部门名称
// 部门树数据
const deptList = ref<OptionItem[]>();
const deptTreeRef = ref();
const deptName = ref();
const emits = defineEmits(["node-click"]);
@@ -41,22 +43,24 @@ watchEffect(
deptTreeRef.value.filter(deptName.value);
},
{
flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
flush: "post",
}
);
/**
* 部门筛选
*/
function handleFilter(value: string, data: any) {
function handleFilter(value: string, data: any): boolean {
if (!value) {
return true;
}
return data.label.indexOf(value) !== -1;
}
/** 部门树节点 Click */
function handleNodeClick(data: { [key: string]: any }) {
/**
* 部门树节点点击事件
*/
function handleNodeClick(data: { [key: string]: any }): void {
deptId.value = data.value;
emits("node-click");
}

76
src/views/system/user/components/UserImportDialog.vue
View File

@@ -1,11 +1,11 @@
<template>
<template>
<div>
<el-dialog
v-model="visible"
:align-center="true"
title="导入数据"
width="600px"
@close="handleClose"
@close="closeDialog"
>
<el-scrollbar max-height="60vh">
<el-form
@@ -37,7 +37,7 @@
type="primary"
icon="download"
underline="never"
@click="handleDownloadTemplate"
@click="downloadTemplate"
>
下载模板
</el-link>
@@ -49,7 +49,7 @@
</el-scrollbar>
<template #footer>
<div style="padding-right: var(--el-dialog-padding-primary)">
<el-button v-if="resultData.length > 0" type="primary" @click="handleShowResult">
<el-button v-if="resultData.length > 0" type="primary" @click="showResult">
错误信息
</el-button>
<el-button
@@ -59,7 +59,7 @@
>
确定
</el-button>
<el-button @click="handleClose">取消</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</template>
</el-dialog>
@@ -80,7 +80,7 @@
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCloseResult">关闭</el-button>
<el-button @click="closeResultDialog">关闭</el-button>
</div>
</template>
</el-dialog>
@@ -94,26 +94,36 @@ import { ApiCodeEnum } from "@/enums/api";
import { downloadFile } from "@/utils/download";
const emit = defineEmits(["import-success"]);
// 弹窗可见状态
const visible = defineModel("modelValue", {
type: Boolean,
required: true,
default: false,
});
// 结果弹窗状态
const resultVisible = ref(false);
const resultData = ref<string[]>([]);
const invalidCount = ref(0);
const validCount = ref(0);
// 表单引用
const importFormRef = ref(null);
const uploadRef = ref(null);
// 表单数据
const importFormData = reactive<{
files: UploadUserFile[];
}>({
files: [],
});
// 验证规则
const importFormRules = {
files: [{ required: true, message: "文件不能为空", trigger: "blur" }],
};
watch(visible, (newValue) => {
if (newValue) {
resultData.value = [];
@@ -123,24 +133,26 @@ watch(visible, (newValue) => {
}
});
const importFormRules = {
files: [{ required: true, message: "文件不能为空", trigger: "blur" }],
};
// 文件超出个数限制
const handleFileExceed = () => {
/**
* 文件超出个数限制
*/
function handleFileExceed(): void {
ElMessage.warning("只能上传一个文件");
};
}
// 下载导入模板
const handleDownloadTemplate = () => {
/**
* 下载导入模板
*/
function downloadTemplate(): void {
UserAPI.downloadTemplate().then((response: any) => {
downloadFile(response);
});
};
}
// 上传文件
const handleUpload = async () => {
/**
* 上传文件
*/
async function handleUpload(): Promise<void> {
if (!importFormData.files.length) {
ElMessage.warning("请选择文件");
return;
@@ -150,7 +162,7 @@ const handleUpload = async () => {
if (result.code === ApiCodeEnum.SUCCESS && result.invalidCount === 0) {
ElMessage.success("导入成功，导入数据：" + result.validCount + "条");
emit("import-success");
handleClose();
closeDialog();
} else {
ElMessage.error("上传失败");
resultVisible.value = true;
@@ -158,21 +170,27 @@ const handleUpload = async () => {
invalidCount.value = result.invalidCount;
validCount.value = result.validCount;
}
};
}
// 显示错误信息
const handleShowResult = () => {
/**
* 显示错误信息
*/
function showResult(): void {
resultVisible.value = true;
};
}
// 关闭错误信息弹窗
const handleCloseResult = () => {
/**
* 关闭错误信息弹窗
*/
function closeResultDialog(): void {
resultVisible.value = false;
};
}
// 关闭弹窗
const handleClose = () => {
/**
* 关闭弹窗
*/
function closeDialog(): void {
importFormData.files.length = 0;
visible.value = false;
};
}
</script>

276
src/views/system/user/index.vue
View File

@@ -59,7 +59,7 @@
v-hasPerm="['sys:user:create']"
type="success"
icon="plus"
@click="handleOpenDialog()"
@click="handleCreateClick"
>
新增
</el-button>
@@ -74,15 +74,11 @@
</el-button>
</div>
<div class="table-section__toolbar--tools">
<el-button
v-hasPerm="'sys:user:import'"
icon="upload"
@click="handleOpenImportDialog"
>
<el-button v-hasPerm="'sys:user:import'" icon="upload" @click="openImportDialog">
导入
</el-button>
<el-button v-hasPerm="'sys:user:export'" icon="download" @click="handleExport">
<el-button v-hasPerm="'sys:user:export'" icon="download" @click="exportUsers">
导出
</el-button>
</div>
@@ -136,7 +132,7 @@
icon="edit"
link
size="small"
@click="handleOpenDialog(scope.row.id)"
@click="handleEditClick(scope.row.id)"
>
编辑
</el-button>
@@ -159,7 +155,7 @@
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="fetchUserList"
@pagination="fetchList"
/>
</el-card>
</el-col>
@@ -171,7 +167,7 @@
:title="dialogState.title"
append-to-body
:size="drawerSize"
@close="handleCloseDialog"
@close="closeDialog"
>
<el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="用户名" prop="username">
@@ -235,7 +231,7 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleCloseDialog">取 消</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</template>
</el-drawer>
@@ -246,53 +242,33 @@
</template>
<script setup lang="ts">
// ==================== 1. Vue 核心 API ====================
import { computed, onMounted, reactive, ref } from "vue";
import { useDebounceFn } from "@vueuse/core";
// ==================== 2. Element Plus ====================
import { ElMessage, ElMessageBox, type FormInstance } from "element-plus";
// ==================== 3. 类型定义 ====================
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import type { UserForm, UserQueryParams, UserItem } from "@/types/api";
// ==================== 3.5 工具函数 ====================
import { downloadFile, VALIDATORS } from "@/utils";
// ==================== 4. API 服务 ====================
import { downloadFile } from "@/utils";
import UserAPI from "@/api/system/user";
import DeptAPI from "@/api/system/dept";
import RoleAPI from "@/api/system/role";
// ==================== 5. Store ====================
import { useUserStore, useAppStore } from "@/store";
// ==================== 6. Enums ====================
import { DeviceEnum, DialogMode, CommonStatus } from "@/enums";
// ==================== 7. Composables ====================
import { useTableSelection } from "@/composables";
// ==================== 8. 组件 ====================
import UserDeptTree from "./components/UserDeptTree.vue";
import UserImportDialog from "./components/UserImportDialog.vue";
// ==================== 组件配置 ====================
defineOptions({
name: "User",
inheritAttrs: false,
});
// ==================== Store 实例 ====================
const appStore = useAppStore();
const userStore = useUserStore();
// ==================== 响应式状态 ====================
// DOM 引用
// 表单引用
const queryFormRef = ref<FormInstance>();
const userFormRef = ref<FormInstance>();
// 列表查询参数
// 查询参数
const queryParams = reactive<UserQueryParams>({
pageNum: 1,
pageSize: 10,
@@ -310,7 +286,10 @@ const dialogState = reactive({
mode: DialogMode.CREATE,
});
// 初始表单数据
// 导入弹窗状态
const importDialogVisible = ref(false);
// 表单初始数据
const initialFormData: UserForm = {
status: CommonStatus.ENABLED,
};
@@ -318,37 +297,25 @@ const initialFormData: UserForm = {
// 表单数据
const formData = reactive<UserForm>({ ...initialFormData });
// 下拉选项数据
// 下拉选项
const deptOptions = ref<OptionItem[]>();
const roleOptions = ref<OptionItem[]>();
// 导入弹窗
const importDialogVisible = ref(false);
// ==================== 计算属性 ====================
/**
* 抽屉尺寸（响应式）
*/
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
// ==================== 表单验证规则 ====================
const rules = reactive({
username: [VALIDATORS.required("用户名不能为空")],
nickname: [VALIDATORS.required("用户昵称不能为空")],
deptId: [VALIDATORS.required("所属部门不能为空")],
roleIds: [VALIDATORS.required("用户角色不能为空")],
email: [VALIDATORS.email],
mobile: [VALIDATORS.mobile],
});
// ==================== 数据加载 ====================
const rules: FormRules = {
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
nickname: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
deptId: [{ required: true, message: "请选择所属部门", trigger: "change" }],
roleIds: [{ required: true, message: "请选择用户角色", trigger: "change" }],
email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
mobile: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }],
};
/**
* 获取用户列表数据
* 加载用户列表数据
*/
async function fetchUserList(): Promise<void> {
async function fetchList(): Promise<void> {
loading.value = true;
try {
const data = await UserAPI.getPage(queryParams);
@@ -359,32 +326,89 @@ async function fetchUserList(): Promise<void> {
}
}
// ==================== 表格选择 ====================
/**
* 加载表单下拉选项数据
*/
async function loadFormOptions(): Promise<void> {
[roleOptions.value, deptOptions.value] = await Promise.all([
RoleAPI.getOptions(),
DeptAPI.getOptions(),
]);
}
const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserItem>();
// ==================== 查询操作 ====================
/**
* 查询用户列表
* 执行查询（重置页码）
*/
function handleQuery(): Promise<void> {
function handleQuery(): void {
queryParams.pageNum = 1;
return fetchUserList();
fetchList();
}
/**
* 重置查询条件
*/
function handleResetQuery(): void {
function resetQuery(): void {
queryFormRef.value?.resetFields();
queryParams.deptId = undefined;
queryParams.createTime = undefined;
}
/**
* 重置查询条件并重新查询
*/
function handleResetQuery(): void {
resetQuery();
handleQuery();
}
// ==================== 用户操作 ====================
/**
* 重置用户密码
* @param userId 用户ID
* @param password 新密码
*/
async function resetPassword(userId: string, password: string): Promise<void> {
await UserAPI.resetPassword(userId, password);
ElMessage.success("密码重置成功");
}
/**
* 删除用户
* @param userIds 用户ID列表，多个ID用逗号分隔
*/
async function deleteUsers(userIds: string): Promise<void> {
await UserAPI.deleteByIds(userIds);
ElMessage.success("删除成功");
handleQuery();
}
/**
* 打开表单弹窗
*/
function openDialog(): void {
dialogState.visible = true;
}
/**
* 关闭表单弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
resetForm();
}
/**
* 重置表单数据和验证状态
*/
function resetForm(): void {
userFormRef.value?.resetFields();
userFormRef.value?.clearValidate();
Object.assign(formData, initialFormData);
}
/**
* 重置密码按钮点击事件
* @param row 用户数据
*/
function handleResetPassword(row: UserItem): void {
@@ -393,65 +417,39 @@ function handleResetPassword(row: UserItem): void {
cancelButtonText: "取消",
inputPattern: /.{6,}/,
inputErrorMessage: "密码至少需要6位字符",
})
.then((result: any) => {
const value = result.value;
return UserAPI.resetPassword(row.id, value);
})
.then(
() => {
ElMessage.success("密码重置成功");
},
() => {
// 用户取消
}
);
}).then(
(result: any) => resetPassword(row.id, result.value),
() => {
/* 用户取消 */
}
);
}
// ==================== 弹窗操作 ====================
/**
* 打开用户表单弹窗
* @param id 用户ID（编辑时传入）
* 新增按钮点击事件
*/
async function handleOpenDialog(id?: string): Promise<void> {
dialogState.visible = true;
// 并行加载下拉选项数据
[roleOptions.value, deptOptions.value] = await Promise.all([
RoleAPI.getOptions(),
DeptAPI.getOptions(),
]);
// 编辑：加载用户数据
if (id) {
dialogState.title = "修改用户";
dialogState.mode = DialogMode.EDIT;
const data = await UserAPI.getFormData(id);
Object.assign(formData, data);
} else {
// 新增：设置默认值
dialogState.title = "新增用户";
dialogState.mode = DialogMode.CREATE;
}
async function handleCreateClick(): Promise<void> {
dialogState.title = "新增用户";
dialogState.mode = DialogMode.CREATE;
await loadFormOptions();
openDialog();
}
/**
* 关闭用户表单弹窗
* 编辑按钮点击事件
* @param id 用户ID
*/
function handleCloseDialog(): void {
dialogState.visible = false;
// 安全地重置表单
userFormRef.value?.resetFields();
userFormRef.value?.clearValidate();
// 完全重置表单数据
Object.assign(formData, initialFormData);
async function handleEditClick(id: string): Promise<void> {
dialogState.title = "修改用户";
dialogState.mode = DialogMode.EDIT;
await loadFormOptions();
const data = await UserAPI.getFormData(id);
Object.assign(formData, data);
openDialog();
}
/**
* 提交用户表单（防抖）
* 提交表单（防抖处理）
*/
const handleSubmit = useDebounceFn(async () => {
const valid = await userFormRef.value?.validate().then(
@@ -460,31 +458,28 @@ const handleSubmit = useDebounceFn(async () => {
);
if (!valid) return;
const userId = formData.id;
loading.value = true;
try {
if (userId) {
await UserAPI.update(userId, formData);
if (formData.id) {
await UserAPI.update(formData.id, formData);
ElMessage.success("修改用户成功");
} else {
await UserAPI.create(formData);
ElMessage.success("新增用户成功");
}
handleCloseDialog();
handleResetQuery();
closeDialog();
handleQuery();
} finally {
loading.value = false;
}
}, 300);
/**
* 删除用户
* @param id 用户ID（单个删除时传入）
* 删除按钮点击事件
* @param id 用户ID，不传则删除选中的用户
*/
function handleDelete(id?: string): void {
const userIds = id ?? selectedIds.value.join(",");
if (!userIds) {
ElMessage.warning("请勾选删除项");
return;
@@ -496,7 +491,6 @@ function handleDelete(id?: string): void {
const isCurrentUserInList = id
? id === currentUserId
: selectedIds.value.some((selectedId) => String(selectedId) === currentUserId);
if (isCurrentUserInList) {
ElMessage.error("不能删除当前登录用户");
return;
@@ -508,45 +502,29 @@ function handleDelete(id?: string): void {
cancelButtonText: "取消",
type: "warning",
}).then(
async () => {
loading.value = true;
try {
await UserAPI.deleteByIds(userIds);
ElMessage.success("删除成功");
handleResetQuery();
} finally {
loading.value = false;
}
},
() => deleteUsers(userIds),
() => {
// 用户取消操作，无需处理
/* 用户取消 */
}
);
}
// ==================== 导入导出 ====================
/**
* 打开导入弹窗
*/
function handleOpenImportDialog(): void {
importDialogVisible.value = true;
}
/**
* 导出用户列表
*/
async function handleExport(): Promise<void> {
async function exportUsers(): Promise<void> {
const response = await UserAPI.export(queryParams);
downloadFile(response);
ElMessage.success("导出成功");
}
// ==================== 生命周期 ====================
/**
* 组件挂载时初始化数据
* 打开导入弹窗
*/
function openImportDialog(): void {
importDialogVisible.value = true;
}
onMounted(() => {
handleQuery();
});