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

style: 格式化系统配置与字典模块代码

Browse Source
This commit is contained in:
Mickeywaugh
2026-06-05 15:11:57 +08:00
parent 132501ea4e
commit 476bd86ba3
11 changed files with 2982 additions and 2371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,12 @@
<el-card class="page-search" shadow="never">
<el-form ref="queryFormRef" :model="tableData.params" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input v-model="tableData.params.keywords" placeholder="请输入配置键\配置名称" clearable @keyup.enter="handleQuery" />
<el-input
v-model="tableData.params.keywords"
placeholder="请输入配置键\配置名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
@@ -16,17 +21,33 @@
<el-card class="page-content" shadow="never">
<div class="page-toolbar">
<div class="page-toolbar__left">
<el-button v-hasPerm="['sys:config:create']" type="success" icon="plus" @click="openDialog()">
<el-button
v-hasPerm="['sys:config:create']"
type="success"
icon="plus"
@click="openDialog()"
>
新增
</el-button>
<el-button v-hasPerm="['sys:config:refresh']" color="#626aef" icon="RefreshLeft" @click="refreshCache">
<el-button
v-hasPerm="['sys:config:refresh']"
color="#626aef"
icon="RefreshLeft"
@click="refreshCache"
>
刷新缓存
</el-button>
</div>
</div>
<el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row border
@selection-change="handleSelectionChange">
<el-table
ref="dataTableRef"
v-loading="loading"
:data="tableData.list"
highlight-current-row
border
@selection-change="handleSelectionChange"
>
<el-table-column type="index" label="序号" width="60" />
<el-table-column key="configName" label="配置名称" prop="configName" min-width="100" />
<el-table-column key="configKey" label="配置项" prop="configKey" min-width="100" />
@@ -34,22 +55,52 @@
<el-table-column key="remark" label="描述" prop="remark" min-width="100" />
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button v-hasPerm="['sys:config:update']" type="primary" size="small" link icon="edit" @click="openDialog(scope.row.id)">
<el-button
v-hasPerm="['sys:config:update']"
type="primary"
size="small"
link
icon="edit"
@click="openDialog(scope.row.id)"
>
编辑
</el-button>
<el-button v-hasPerm="['sys:config:delete']" type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
<el-button
v-hasPerm="['sys:config:delete']"
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
<pagination
v-if="tableData.total > 0"
v-model:total="tableData.total"
v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize"
@pagination="fetchData"
/>
</el-card>
<el-dialog v-model="dialogState.visible" :title="dialogState.title" width="500px" @close="closeDialog">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="100px">
<el-dialog
v-model="dialogState.visible"
:title="dialogState.title"
width="500px"
@close="closeDialog"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-suffix=":"
label-width="100px"
>
<el-form-item label="配置名称" prop="configName">
<el-input v-model="formData.configName" placeholder="请输入配置名称" :maxlength="50" />
</el-form-item>
@@ -60,7 +111,14 @@
<el-input v-model="formData.configValue" placeholder="请输入配置项" :maxlength="100" />
</el-form-item>
<el-form-item label="描述" prop="remark">
<el-input v-model="formData.remark" :rows="4" :maxlength="100" show-word-limit type="textarea" placeholder="请输入描述" />
<el-input
v-model="formData.remark"
:rows="4"
:maxlength="100"
show-word-limit
type="textarea"
placeholder="请输入描述"
/>
</el-form-item>
</el-form>
<template #footer>
@@ -74,181 +132,182 @@
</template>
<script setup lang="ts">
defineOptions({
name: "Config",
inheritAttrs: false,
});
defineOptions({
name: "Config",
inheritAttrs: false,
});
import ConfigAPI from "@/api/system/config";
import type { ConfigItem, ConfigForm } from "@/api/system/config";
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
import ConfigAPI from "@/api/system/config";
import type { ConfigItem, ConfigForm } from "@/api/system/config";
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 列表数据
const loading = ref(false);
const selectIds = ref<string[]>([]);
// 列表数据
const loading = ref(false);
const selectIds = ref<string[]>([]);
const tableData = reactive<PageResult<ConfigItem>>({
list: [],
total: 0,
params: { //查询参数
pageNum: 1,
pageSize: 10,
keywords: "",
},
});
const tableData = reactive<PageResult<ConfigItem>>({
list: [],
total: 0,
params: {
//查询参数
pageNum: 1,
pageSize: 10,
keywords: "",
},
});
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 表单数据
const formData = reactive<ConfigForm>({
id: undefined,
configName: "",
configKey: "",
configValue: "",
remark: "",
});
// 表单数据
const formData = reactive<ConfigForm>({
id: undefined,
configName: "",
configKey: "",
configValue: "",
remark: "",
});
// 验证规则
const rules: FormRules = {
configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
};
// 验证规则
const rules: FormRules = {
configName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
configKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
configValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
};
/**
* 加载配置列表数据
*/
function fetchData(): void {
loading.value = true;
ConfigAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: ConfigItem[]): void {
selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
}
/**
* 打开弹窗
* @param id 配置ID（编辑时传入）
*/
function openDialog(id?: string): void {
dialogState.visible = true;
if (id) {
dialogState.title = "修改系统配置";
ConfigAPI.getFormData(id).then((data) => {
Object.assign(formData, data);
});
} else {
dialogState.title = "新增系统配置";
formData.id = undefined;
}
}
/**
* 刷新缓存
*/
const refreshCache = useDebounceFn(() => {
ConfigAPI.refreshCache().then(() => {
ElMessage.success("刷新成功");
/**
* 加载配置列表数据
*/
function fetchData(): void {
loading.value = true;
ConfigAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}, 1000);
}
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((valid) => {
if (valid) {
loading.value = true;
const id = formData.id;
if (id) {
ConfigAPI.update(id, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
} else {
ConfigAPI.create(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
}
}
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: ConfigItem[]): void {
selectIds.value = selection.map((item) => item.id).filter(Boolean) as string[];
}
/**
* 打开弹窗
* @param id 配置ID（编辑时传入）
*/
function openDialog(id?: string): void {
dialogState.visible = true;
if (id) {
dialogState.title = "修改系统配置";
ConfigAPI.getFormData(id).then((data) => {
Object.assign(formData, data);
});
}
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
} else {
dialogState.title = "新增系统配置";
formData.id = undefined;
}
}
/**
* 删除配置
* @param id 配置ID
*/
function handleDelete(id: string): void {
ElMessageBox.confirm("确认删除该项配置?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
loading.value = true;
ConfigAPI.deleteById(id)
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => (loading.value = false));
});
}
onMounted(() => {
handleQuery();
/**
* 刷新缓存
*/
const refreshCache = useDebounceFn(() => {
ConfigAPI.refreshCache().then(() => {
ElMessage.success("刷新成功");
});
}, 1000);
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((valid) => {
if (valid) {
loading.value = true;
const id = formData.id;
if (id) {
ConfigAPI.update(id, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
} else {
ConfigAPI.create(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
}
}
});
}
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
formData.id = undefined;
}
/**
* 删除配置
* @param id 配置ID
*/
function handleDelete(id: string): void {
ElMessageBox.confirm("确认删除该项配置?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
loading.value = true;
ConfigAPI.deleteById(id)
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => (loading.value = false));
});
}
onMounted(() => {
handleQuery();
});
</script>

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

@@ -3,7 +3,12 @@
<el-card class="page-search" shadow="never">
<el-form ref="queryFormRef" :model="tableData.params" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input v-model="tableData.params.keywords" placeholder="字典标签/字典值" clearable @keyup.enter="handleQuery" />
<el-input
v-model="tableData.params.keywords"
placeholder="字典标签/字典值"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
@@ -17,13 +22,24 @@
<div class="page-toolbar">
<div class="page-toolbar__left">
<el-button type="success" icon="plus" @click="openDialog()">新增</el-button>
<el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
<el-button
type="danger"
:disabled="ids.length === 0"
icon="delete"
@click="handleDelete()"
>
删除
</el-button>
</div>
</div>
<el-table v-loading="loading" highlight-current-row :data="tableData.list" border @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
highlight-current-row
:data="tableData.list"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典项标签" prop="label" />
<el-table-column label="字典项值" prop="value" />
@@ -38,21 +54,43 @@
<el-table-column fixed="right" label="操作" align="center" width="220">
<template #default="scope">
<el-button type="primary" link size="small" icon="edit" @click.stop="openDialog(scope.row)">
<el-button
type="primary"
link
size="small"
icon="edit"
@click.stop="openDialog(scope.row)"
>
编辑
</el-button>
<el-button type="danger" link size="small" icon="delete" @click.stop="handleDelete(scope.row.id)">
<el-button
type="danger"
link
size="small"
icon="delete"
@click.stop="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
<pagination
v-if="tableData.total > 0"
v-model:total="tableData.total"
v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize"
@pagination="fetchData"
/>
</el-card>
<el-dialog v-model="dialogState.visible" :title="dialogState.title" width="600px" @close="closeDialog">
<el-dialog
v-model="dialogState.visible"
:title="dialogState.title"
width="600px"
@close="closeDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="字典项标签" prop="label">
<el-input v-model="formData.label" placeholder="请输入字典标签" />
@@ -81,7 +119,12 @@
</el-tooltip>
</div>
</template>
<el-select v-model="formData.tagType" placeholder="请选择标签类型" clearable @clear="formData.tagType = ''">
<el-select
v-model="formData.tagType"
placeholder="请选择标签类型"
clearable
@clear="formData.tagType = ''"
>
<template #label="{ value }">
<el-tag v-if="value" :type="value">
{{ formData.label ? formData.label : "字典标签" }}
@@ -109,191 +152,192 @@
</template>
<script setup lang="ts">
import DictAPI from "@/api/system/dict";
import type { DictItem, DictItemForm } from "@/api/system/dict";
import type { FormInstance, FormRules } from "element-plus";
import DictAPI from "@/api/system/dict";
import type { DictItem, DictItemForm } from "@/api/system/dict";
import type { FormInstance, FormRules } from "element-plus";
const route = useRoute();
const route = useRoute();
// 字典编码
const dictCode = ref(route.query.dictCode as string);
// 字典编码
const dictCode = ref(route.query.dictCode as string);
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 列表数据
const loading = ref(false);
const ids = ref<string[]>([]);
// 列表数据
const loading = ref(false);
const ids = ref<string[]>([]);
const tableData = reactive<PageResult<DictItem>>({
list: [],
total: 0,
params: { //查询参数
pageNum: 1,
pageSize: 10,
dictCode: undefined,
keywords: undefined,
},
});
const tableData = reactive<PageResult<DictItem>>({
list: [],
total: 0,
params: {
//查询参数
pageNum: 1,
pageSize: 10,
dictCode: undefined,
keywords: undefined,
},
});
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 表单数据
const formData = reactive<DictItemForm>({
sort: 1,
status: 1,
tagType: "",
});
// 表单数据
const formData = reactive<DictItemForm>({
sort: 1,
status: 1,
tagType: "",
});
// 标签类型选项
const tagType = ["primary", "success", "info", "warning", "danger"] as const;
// 标签类型选项
const tagType = ["primary", "success", "info", "warning", "danger"] as const;
// 验证规则
const rules: FormRules = {
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" }],
};
/**
* 加载字典项列表数据
*/
function fetchData(): void {
loading.value = true;
DictAPI.getDictItemPage(dictCode.value, tableData.params)
.then((data: any) => {
tableData.list = data.list;
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
/**
* 加载字典项列表数据
*/
function fetchData(): void {
loading.value = true;
DictAPI.getDictItemPage(dictCode.value, tableData.params)
.then((data: any) => {
tableData.list = data.list;
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: DictItem[]): void {
ids.value = selection.map((item) => item.id);
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: DictItem[]): void {
ids.value = selection.map((item) => item.id);
}
/**
* 打开弹窗
* @param row 字典项数据（编辑时传入）
*/
function openDialog(row?: DictItem): void {
resetForm();
dialogState.visible = true;
dialogState.title = row ? "编辑字典值" : "新增字典项";
/**
* 打开弹窗
* @param row 字典项数据（编辑时传入）
*/
function openDialog(row?: DictItem): void {
resetForm();
dialogState.visible = true;
dialogState.title = row ? "编辑字典值" : "新增字典项";
if (row?.id) {
DictAPI.getDictItemFormData(dictCode.value, row.id).then((data) => {
Object.assign(formData, data);
});
}
}
function resetForm(): void {
dataFormRef.value?.clearValidate();
formData.id = undefined;
formData.dictCode = dictCode.value;
formData.label = undefined;
formData.value = undefined;
formData.sort = 1;
formData.status = 1;
formData.tagType = "";
}
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((isValid) => {
if (isValid) {
loading.value = true;
const id = formData.id;
formData.dictCode = dictCode.value;
if (id) {
DictAPI.updateDictItem(dictCode.value, id, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
} else {
DictAPI.createDictItem(dictCode.value, formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
}
}
if (row?.id) {
DictAPI.getDictItemFormData(dictCode.value, row.id).then((data) => {
Object.assign(formData, data);
});
}
}
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
resetForm();
}
function resetForm(): void {
dataFormRef.value?.clearValidate();
formData.id = undefined;
formData.dictCode = dictCode.value;
formData.label = undefined;
formData.value = undefined;
formData.sort = 1;
formData.status = 1;
formData.tagType = "";
}
/**
* 删除字典项
* @param id 字典项ID
*/
function handleDelete(id?: number): void {
const itemIds = [id || ids.value].join(",");
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((isValid) => {
if (isValid) {
loading.value = true;
const id = formData.id;
if (!itemIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
DictAPI.deleteDictItems(dictCode.value, itemIds).then(() => {
ElMessage.success("删除成功");
handleResetQuery();
});
},
() => {
ElMessage.info("已取消删除");
formData.dictCode = dictCode.value;
if (id) {
DictAPI.updateDictItem(dictCode.value, id, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
} else {
DictAPI.createDictItem(dictCode.value, formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
}
);
}
onMounted(() => {
handleQuery();
}
});
}
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
resetForm();
}
/**
* 删除字典项
* @param id 字典项ID
*/
function handleDelete(id?: number): void {
const itemIds = [id || ids.value].join(",");
if (!itemIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
DictAPI.deleteDictItems(dictCode.value, itemIds).then(() => {
ElMessage.success("删除成功");
handleResetQuery();
});
},
() => {
ElMessage.info("已取消删除");
}
);
}
onMounted(() => {
handleQuery();
});
</script>

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

@@ -3,7 +3,12 @@
<el-card class="page-search" shadow="never">
<el-form ref="queryFormRef" :model="tableData.params" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input v-model="tableData.params.keywords" placeholder="字典名称/编码" clearable @keyup.enter="handleQuery" />
<el-input
v-model="tableData.params.keywords"
placeholder="字典名称/编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
@@ -17,13 +22,24 @@
<div class="page-toolbar">
<div class="page-toolbar__left">
<el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
<el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
<el-button
type="danger"
:disabled="ids.length === 0"
icon="delete"
@click="handleDelete()"
>
删除
</el-button>
</div>
</div>
<el-table v-loading="loading" highlight-current-row :data="tableData.list" border @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
highlight-current-row
:data="tableData.list"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典名称" prop="name" />
<el-table-column label="字典编码" prop="dictCode" />
@@ -43,22 +59,43 @@
字典数据
</el-button>
<el-button type="primary" link size="small" icon="edit" @click.stop="handleEditClick(scope.row.id)">
<el-button
type="primary"
link
size="small"
icon="edit"
@click.stop="handleEditClick(scope.row.id)"
>
编辑
</el-button>
<el-button type="danger" link size="small" icon="delete" @click.stop="handleDelete(scope.row.id)">
<el-button
type="danger"
link
size="small"
icon="delete"
@click.stop="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
<pagination
v-if="tableData.total > 0"
v-model:total="tableData.total"
v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize"
@pagination="fetchData" />
@pagination="fetchData"
/>
</el-card>
<el-dialog v-model="dialogState.visible" :title="dialogState.title" width="500px" @close="closeDialog">
<el-dialog
v-model="dialogState.visible"
:title="dialogState.title"
width="500px"
@close="closeDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="字典名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名称" />
@@ -91,206 +128,207 @@
</template>
<script setup lang="ts">
defineOptions({
name: "Dict",
inheritAttrs: false,
});
defineOptions({
name: "Dict",
inheritAttrs: false,
});
import DictAPI from "@/api/system/dict";
import type { DictTypeItem, DictTypeForm } from "@/api/system/dict";
import type { FormInstance, FormRules } from "element-plus";
import router from "@/router";
import DictAPI from "@/api/system/dict";
import type { DictTypeItem, DictTypeForm } from "@/api/system/dict";
import type { FormInstance, FormRules } from "element-plus";
import router from "@/router";
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 列表数据
const loading = ref(false);
const ids = ref<string[]>([]);
const tableData = reactive<PageResult<DictTypeItem>>({
list: [],
total: 0,
params: { //查询参数
pageNum: 1,
pageSize: 10,
},
});
// 列表数据
const loading = ref(false);
const ids = ref<string[]>([]);
const tableData = reactive<PageResult<DictTypeItem>>({
list: [],
total: 0,
params: {
//查询参数
pageNum: 1,
pageSize: 10,
},
});
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 表单数据
const formData = reactive<DictTypeForm>({
status: 1,
});
// 表单数据
const formData = reactive<DictTypeForm>({
status: 1,
});
// 验证规则
const rules: FormRules = {
name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
};
// 验证规则
const rules: FormRules = {
name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
};
/**
* 加载字典列表数据
*/
function fetchData(): void {
loading.value = true;
DictAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? []
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: DictTypeItem[]): void {
ids.value = selection.map((item) => item.id);
}
/**
* 新增按钮点击事件
*/
function handleCreateClick(): void {
resetForm();
dialogState.visible = true;
dialogState.title = "新增字典";
}
/**
* 编辑按钮点击事件
* @param id 字典ID
*/
function handleEditClick(id: string): void {
resetForm();
dialogState.visible = true;
dialogState.title = "修改字典";
DictAPI.getFormData(id).then((data) => {
Object.assign(formData, data);
/**
* 加载字典列表数据
*/
function fetchData(): void {
loading.value = true;
DictAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
}
function resetForm(): void {
dataFormRef.value?.clearValidate();
formData.id = undefined;
formData.name = undefined;
formData.dictCode = undefined;
formData.status = 1;
formData.remark = undefined;
}
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((isValid) => {
if (isValid) {
loading.value = true;
const id = formData.id;
if (id) {
DictAPI.update(id, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
} else {
DictAPI.create(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: DictTypeItem[]): void {
ids.value = selection.map((item) => item.id);
}
/**
* 新增按钮点击事件
*/
function handleCreateClick(): void {
resetForm();
dialogState.visible = true;
dialogState.title = "新增字典";
}
/**
* 编辑按钮点击事件
* @param id 字典ID
*/
function handleEditClick(id: string): void {
resetForm();
dialogState.visible = true;
dialogState.title = "修改字典";
DictAPI.getFormData(id).then((data) => {
Object.assign(formData, data);
});
}
function resetForm(): void {
dataFormRef.value?.clearValidate();
formData.id = undefined;
formData.name = undefined;
formData.dictCode = undefined;
formData.status = 1;
formData.remark = undefined;
}
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((isValid) => {
if (isValid) {
loading.value = true;
const id = formData.id;
if (id) {
DictAPI.update(id, formData)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
} else {
DictAPI.create(formData)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleQuery();
})
.finally(() => (loading.value = false));
}
}
});
}
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
resetForm();
}
/**
* 删除字典
* @param id 字典ID
*/
function handleDelete(id?: number): void {
const attrGroupIds = [id || ids.value].join(",");
if (!attrGroupIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
DictAPI.deleteByIds(attrGroupIds).then(() => {
ElMessage.success("删除成功");
handleResetQuery();
});
},
() => {
ElMessage.info("已取消删除");
}
);
}
/**
* 打开字典数据页面
* @param row 字典数据
*/
function openDictData(row: DictTypeItem): void {
try {
const route = router.resolve({
name: "DictItem",
query: { dictCode: row.dictCode, title: `【${row.name}】字典数据` },
});
}
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
resetForm();
}
/**
* 删除字典
* @param id 字典ID
*/
function handleDelete(id?: number): void {
const attrGroupIds = [id || ids.value].join(",");
if (!attrGroupIds) {
ElMessage.warning("请勾选删除项");
if (route.matched.length === 0) {
ElMessage.error("路由未注册，请刷新页面后重试");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
DictAPI.deleteByIds(attrGroupIds).then(() => {
ElMessage.success("删除成功");
handleResetQuery();
});
},
() => {
ElMessage.info("已取消删除");
}
);
router.push(route);
} catch (error) {
console.error("路由跳转失败:", error);
ElMessage.error("页面跳转失败，请刷新页面后重试");
}
}
/**
* 打开字典数据页面
* @param row 字典数据
*/
function openDictData(row: DictTypeItem): void {
try {
const route = router.resolve({
name: "DictItem",
query: { dictCode: row.dictCode, title: `【${row.name}】字典数据` },
});
if (route.matched.length === 0) {
ElMessage.error("路由未注册，请刷新页面后重试");
return;
}
router.push(route);
} catch (error) {
console.error("路由跳转失败:", error);
ElMessage.error("页面跳转失败，请刷新页面后重试");
}
}
onMounted(() => {
handleQuery();
});
onMounted(() => {
handleQuery();
});
</script>

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

@@ -3,12 +3,25 @@
<el-card class="page-search" shadow="never">
<el-form ref="queryFormRef" :model="tableData.params" :inline="true" label-width="auto">
<el-form-item prop="keywords" label="关键字">
<el-input v-model="tableData.params.keywords" placeholder="IP/操作人" clearable @keyup.enter="handleQuery" />
<el-input
v-model="tableData.params.keywords"
placeholder="IP/操作人"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item prop="createTime" label="操作时间">
<el-date-picker v-model="tableData.params.createTime" :editable="false" type="daterange" range-separator="~" start-placeholder="开始时间"
end-placeholder="截止时间" value-format="YYYY-MM-DD" style="width: 260px" />
<el-date-picker
v-model="tableData.params.createTime"
:editable="false"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="截止时间"
value-format="YYYY-MM-DD"
style="width: 260px"
/>
</el-form-item>
<el-form-item>
@@ -47,8 +60,13 @@
</el-table-column>
</el-table>
<pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
<pagination
v-if="tableData.total > 0"
v-model:total="tableData.total"
v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize"
@pagination="fetchData"
/>
</el-card>
<!-- 详情弹窗 -->
@@ -87,75 +105,76 @@
</template>
<script setup lang="ts">
defineOptions({
name: "Log",
inheritAttrs: false,
});
defineOptions({
name: "Log",
inheritAttrs: false,
});
import LogAPI from "@/api/system/log";
import type { LogItem } from "@/api/system/log";
import type { FormInstance, TagProps } from "element-plus";
import LogAPI from "@/api/system/log";
import type { LogItem } from "@/api/system/log";
import type { FormInstance, TagProps } from "element-plus";
function getMethodTagType(method: string): TagProps["type"] {
const map: Record<string, TagProps["type"]> = {
GET: undefined,
POST: "success",
PUT: "warning",
DELETE: "danger",
PATCH: "info",
};
return map[method?.toUpperCase()] ?? "info";
}
function getMethodTagType(method: string): TagProps["type"] {
const map: Record<string, TagProps["type"]> = {
GET: undefined,
POST: "success",
PUT: "warning",
DELETE: "danger",
PATCH: "info",
};
return map[method?.toUpperCase()] ?? "info";
}
// 表单引用
const queryFormRef = ref<FormInstance>();
// 表单引用
const queryFormRef = ref<FormInstance>();
const loading = ref(false);
const loading = ref(false);
const tableData = reactive<PageResult<LogItem>>({
list: [],
total: 0,
params: { //查询参数
pageNum: 1,
pageSize: 10,
keywords: "",
createTime: undefined as [string, string] | undefined,
},
});
// 详情弹窗
const detailVisible = ref(false);
const detailData = ref<Partial<LogItem>>({});
const tableData = reactive<PageResult<LogItem>>({
list: [],
total: 0,
params: {
//查询参数
pageNum: 1,
pageSize: 10,
keywords: "",
createTime: undefined as [string, string] | undefined,
},
});
// 详情弹窗
const detailVisible = ref(false);
const detailData = ref<Partial<LogItem>>({});
function fetchData(): void {
loading.value = true;
LogAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
function fetchData(): void {
loading.value = true;
LogAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
tableData.params.createTime = undefined;
fetchData();
}
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
tableData.params.createTime = undefined;
fetchData();
}
function handleDetail(row: LogItem): void {
detailData.value = row;
detailVisible.value = true;
}
function handleDetail(row: LogItem): void {
detailData.value = row;
detailVisible.value = true;
}
onMounted(() => {
handleQuery();
});
onMounted(() => {
handleQuery();
});
</script>

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

@@ -3,11 +3,21 @@
<el-card class="page-search" shadow="never">
<el-form ref="queryFormRef" :model="tableData.params" :inline="true" label-suffix=":">
<el-form-item label="标题" prop="title">
<el-input v-model="tableData.params.title" placeholder="标题" clearable @keyup.enter="handleQuery()" />
<el-input
v-model="tableData.params.title"
placeholder="标题"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="发布状态" prop="publishStatus">
<el-select v-model="tableData.params.publishStatus" clearable placeholder="全部" style="width: 100px">
<el-select
v-model="tableData.params.publishStatus"
clearable
placeholder="全部"
style="width: 100px"
>
<el-option :value="0" label="未发布" />
<el-option :value="1" label="已发布" />
<el-option :value="-1" label="已撤回" />
@@ -24,16 +34,33 @@
<el-card class="page-content" shadow="never">
<div class="page-toolbar">
<div class="page-toolbar__left">
<el-button v-hasPerm="['sys:notice:create']" type="success" icon="plus" @click="openDialog()">
<el-button
v-hasPerm="['sys:notice:create']"
type="success"
icon="plus"
@click="openDialog()"
>
新增通知
</el-button>
<el-button v-hasPerm="['sys:notice:delete']" type="danger" :disabled="selectIds.length === 0" icon="delete" @click="handleDelete()">
<el-button
v-hasPerm="['sys:notice:delete']"
type="danger"
:disabled="selectIds.length === 0"
icon="delete"
@click="handleDelete()"
>
删除
</el-button>
</div>
</div>
<el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row @selection-change="handleSelectionChange">
<el-table
ref="dataTableRef"
v-loading="loading"
:data="tableData.list"
highlight-current-row
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" />
<el-table-column label="通知标题" prop="title" min-width="200" />
@@ -83,32 +110,68 @@
<el-button type="primary" size="small" link @click="openDetailDialog(scope.row.id)">
查看
</el-button>
<el-button v-if="scope.row.publishStatus !== 1" v-hasPerm="['sys:notice:publish']" type="primary" size="small" link
@click="handlePublish(scope.row.id)">
<el-button
v-if="scope.row.publishStatus !== 1"
v-hasPerm="['sys:notice:publish']"
type="primary"
size="small"
link
@click="handlePublish(scope.row.id)"
>
发布
</el-button>
<el-button v-if="scope.row.publishStatus === 1" v-hasPerm="['sys:notice:revoke']" type="primary" size="small" link
@click="handleRevoke(scope.row.id)">
<el-button
v-if="scope.row.publishStatus === 1"
v-hasPerm="['sys:notice:revoke']"
type="primary"
size="small"
link
@click="handleRevoke(scope.row.id)"
>
撤回
</el-button>
<el-button v-if="scope.row.publishStatus !== 1" v-hasPerm="['sys:notice:update']" type="primary" size="small" link
@click="openDialog(scope.row.id)">
<el-button
v-if="scope.row.publishStatus !== 1"
v-hasPerm="['sys:notice:update']"
type="primary"
size="small"
link
@click="openDialog(scope.row.id)"
>
编辑
</el-button>
<el-button v-if="scope.row.publishStatus !== 1" v-hasPerm="['sys:notice:delete']" type="danger" size="small" link
@click="handleDelete(scope.row.id)">
<el-button
v-if="scope.row.publishStatus !== 1"
v-hasPerm="['sys:notice:delete']"
type="danger"
size="small"
link
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize" @pagination="fetchData()" />
<pagination
v-if="tableData.total > 0"
v-model:total="tableData.total"
v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize"
@pagination="fetchData()"
/>
</el-card>
<el-dialog v-model="dialogState.visible" :show-close="false" :fullscreen="dialogState.fullscreen" top="6vh" width="70%"
custom-class="notice-dialog" @close="closeDialog">
<el-dialog
v-model="dialogState.visible"
:show-close="false"
:fullscreen="dialogState.fullscreen"
top="6vh"
width="70%"
custom-class="notice-dialog"
@close="closeDialog"
>
<template #header>
<div class="flex-x-between">
<span>{{ dialogState.title }}</span>
@@ -146,7 +209,12 @@
</el-form-item>
<el-form-item v-if="formData.targetType === 2" label="指定用户" prop="targetUsers">
<el-select v-model="formData.targetUsers" multiple search placeholder="请选择指定用户">
<el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-option
v-for="item in userOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="通知内容" prop="content">
@@ -160,7 +228,13 @@
</div>
</template>
</el-dialog>
<el-dialog v-model="detailDialog.visible" :show-close="false" width="50%" append-to-body @close="closeDetailDialog">
<el-dialog
v-model="detailDialog.visible"
:show-close="false"
width="50%"
append-to-body
@close="closeDetailDialog"
>
<template #header>
<div class="flex-x-between">
<span>通知公告详情</span>
@@ -197,301 +271,301 @@
</template>
<script setup lang="ts">
defineOptions({
name: "Notice",
inheritAttrs: false,
});
defineOptions({
name: "Notice",
inheritAttrs: false,
});
import NoticeAPI from "@/api/system/notice";
import type { NoticeItem, NoticeForm, NoticeDetail } from "@/api/system/notice";
import UserAPI from "@/api/system/user";
import type { FormInstance, FormRules } from "element-plus";
import NoticeAPI from "@/api/system/notice";
import type { NoticeItem, NoticeForm, NoticeDetail } from "@/api/system/notice";
import UserAPI from "@/api/system/user";
import type { FormInstance, FormRules } from "element-plus";
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
// 列表数据
const userOptions = ref<OptionItem[]>([]);
const loading = ref(false);
const selectIds = ref<number[]>([]);
// 列表数据
const userOptions = ref<OptionItem[]>([]);
const loading = ref(false);
const selectIds = ref<number[]>([]);
const tableData = reactive<PageResult<NoticeItem>>({
list: [],
total: 0,
params: { //查询参数
pageNum: 1,
pageSize: 10,
title: "",
publishStatus: undefined,
},
});
// 弹窗状态
const dialogState = reactive({
const tableData = reactive<PageResult<NoticeItem>>({
list: [],
total: 0,
params: {
//查询参数
pageNum: 1,
pageSize: 10,
title: "",
visible: false,
fullscreen: false,
});
publishStatus: undefined,
},
});
// 表单数据
const formData = reactive<NoticeForm>({
level: "L",
targetType: 1,
});
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
fullscreen: false,
});
// 验证规则
const rules: FormRules = {
title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
content: [
{
required: true,
message: "请输入通知内容",
trigger: "blur",
validator: (rule, value: string, callback) => {
if (!value.replace(/<[^>]+>/g, "").trim()) {
callback(new Error("请输入通知内容"));
} else {
callback();
}
},
},
],
type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
};
// 表单数据
const formData = reactive<NoticeForm>({
level: "L",
targetType: 1,
});
// 详情弹窗状态
const detailDialog = reactive({
visible: false,
});
const currentNotice = ref<NoticeDetail>({});
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 加载通知公告列表数据
*/
function fetchData(): void {
loading.value = true;
NoticeAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: NoticeItem[]): void {
selectIds.value = selection.map((item) => Number(item.id)).filter((id) => Number.isFinite(id));
}
/**
* 打开弹窗
* @param id 通知ID（编辑时传入）
*/
function openDialog(id?: string): void {
dialogState.fullscreen = false;
UserAPI.getOptions().then((data) => {
userOptions.value = data;
});
dialogState.visible = true;
if (id) {
dialogState.title = "修改公告";
NoticeAPI.getFormData(id).then((data) => {
Object.assign(formData, {
...data,
targetUsers: normalizeTargetUsers(
(data as NoticeForm & { targetUserIds?: unknown }).targetUserIds
),
});
});
} else {
Object.assign(formData, { level: "L", targetType: 1, targetUsers: [] });
dialogState.title = "新增公告";
}
}
/**
* 发布通知公告
* @param id 通知ID
*/
function handlePublish(id: string): void {
NoticeAPI.publish(id).then(() => {
ElMessage.success("发布成功");
fetchData();
});
}
/**
* 撤回通知公告
* @param id 通知ID
*/
function handleRevoke(id: string): void {
NoticeAPI.revoke(id).then(() => {
ElMessage.success("撤回成功");
fetchData();
});
}
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((valid) => {
if (valid) {
loading.value = true;
const payload = {
...formData,
targetUserIds: formData.targetType === 2 ? (formData.targetUsers ?? []) : [],
} as NoticeForm & { targetUserIds: number[] };
delete (payload as NoticeForm).targetUsers;
const id = formData.id;
if (id) {
NoticeAPI.update(id, payload)
.then(() => {
ElMessage.success("修改成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
// 验证规则
const rules: FormRules = {
title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
content: [
{
required: true,
message: "请输入通知内容",
trigger: "blur",
validator: (rule, value: string, callback) => {
if (!value.replace(/<[^>]+>/g, "").trim()) {
callback(new Error("请输入通知内容"));
} else {
NoticeAPI.create(payload)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
callback();
}
}
},
},
],
type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
};
// 详情弹窗状态
const detailDialog = reactive({
visible: false,
});
const currentNotice = ref<NoticeDetail>({});
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 加载通知公告列表数据
*/
function fetchData(): void {
loading.value = true;
NoticeAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 表格选择变化事件
*/
function handleSelectionChange(selection: NoticeItem[]): void {
selectIds.value = selection.map((item) => Number(item.id)).filter((id) => Number.isFinite(id));
}
/**
* 打开弹窗
* @param id 通知ID（编辑时传入）
*/
function openDialog(id?: string): void {
dialogState.fullscreen = false;
UserAPI.getOptions().then((data) => {
userOptions.value = data;
});
dialogState.visible = true;
if (id) {
dialogState.title = "修改公告";
NoticeAPI.getFormData(id).then((data) => {
Object.assign(formData, {
...data,
targetUsers: normalizeTargetUsers(
(data as NoticeForm & { targetUserIds?: unknown }).targetUserIds
),
});
});
} else {
Object.assign(formData, { level: "L", targetType: 1, targetUsers: [] });
dialogState.title = "新增公告";
}
}
/**
* 关闭弹窗
*/
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 = "";
}
/**
* 发布通知公告
* @param id 通知ID
*/
function handlePublish(id: string): void {
NoticeAPI.publish(id).then(() => {
ElMessage.success("发布成功");
fetchData();
});
}
/**
* 标准化目标用户数据
*/
function normalizeTargetUsers(value?: unknown): number[] {
if (!value) {
return [];
}
const toNumberArray = (arr: unknown[]): number[] =>
arr.map((v) => Number(v)).filter((v) => Number.isFinite(v));
if (Array.isArray(value)) {
return toNumberArray(value);
}
if (typeof value === "string") {
try {
const parsed = JSON.parse(value);
if (Array.isArray(parsed)) {
return toNumberArray(parsed);
}
return value
.split(",")
.filter(Boolean)
.map((v) => Number(v))
.filter((v) => Number.isFinite(v));
} catch {
return value
.split(",")
.filter(Boolean)
.map((v) => Number(v))
.filter((v) => Number.isFinite(v));
}
}
return [];
}
/**
* 撤回通知公告
* @param id 通知ID
*/
function handleRevoke(id: string): void {
NoticeAPI.revoke(id).then(() => {
ElMessage.success("撤回成功");
fetchData();
});
}
/**
* 弹窗全屏切换
*/
function toggleDialogFullscreen(): void {
dialogState.fullscreen = !dialogState.fullscreen;
}
/**
* 删除通知公告
* @param id 通知ID
*/
function handleDelete(id?: number): void {
const deleteIds = [id || selectIds.value].join(",");
if (!deleteIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项吗？", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
loading.value = true;
NoticeAPI.deleteByIds(deleteIds)
/**
* 提交表单
*/
function handleSubmit(): void {
dataFormRef.value?.validate((valid) => {
if (valid) {
loading.value = true;
const payload = {
...formData,
targetUserIds: formData.targetType === 2 ? (formData.targetUsers ?? []) : [],
} as NoticeForm & { targetUserIds: number[] };
delete (payload as NoticeForm).targetUsers;
const id = formData.id;
if (id) {
NoticeAPI.update(id, payload)
.then(() => {
ElMessage.success("删除成功");
ElMessage.success("修改成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
} else {
NoticeAPI.create(payload)
.then(() => {
ElMessage.success("新增成功");
closeDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
},
() => {
ElMessage.info("已取消删除");
}
);
}
/**
* 打开详情弹窗
*/
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();
}
});
}
/**
* 关闭弹窗
*/
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): number[] {
if (!value) {
return [];
}
const toNumberArray = (arr: unknown[]): number[] =>
arr.map((v) => Number(v)).filter((v) => Number.isFinite(v));
if (Array.isArray(value)) {
return toNumberArray(value);
}
if (typeof value === "string") {
try {
const parsed = JSON.parse(value);
if (Array.isArray(parsed)) {
return toNumberArray(parsed);
}
return value
.split(",")
.filter(Boolean)
.map((v) => Number(v))
.filter((v) => Number.isFinite(v));
} catch {
return value
.split(",")
.filter(Boolean)
.map((v) => Number(v))
.filter((v) => Number.isFinite(v));
}
}
return [];
}
/**
* 弹窗全屏切换
*/
function toggleDialogFullscreen(): void {
dialogState.fullscreen = !dialogState.fullscreen;
}
/**
* 删除通知公告
* @param id 通知ID
*/
function handleDelete(id?: number): void {
const deleteIds = [id || selectIds.value].join(",");
if (!deleteIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项吗？", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
loading.value = true;
NoticeAPI.deleteByIds(deleteIds)
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => (loading.value = false));
},
() => {
ElMessage.info("已取消删除");
}
);
}
/**
* 打开详情弹窗
*/
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();
});
</script>

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

@@ -4,7 +4,12 @@
<el-card class="page-search" shadow="never">
<el-form ref="queryFormRef" :model="tableData.params" :inline="true">
<el-form-item prop="keywords" label="关键字">
<el-input v-model="tableData.params.keywords" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
<el-input
v-model="tableData.params.keywords"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
@@ -18,14 +23,25 @@
<div class="page-toolbar">
<div class="page-toolbar__left">
<el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
<el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleBatchDelete()">
<el-button
type="danger"
:disabled="ids.length === 0"
icon="delete"
@click="handleBatchDelete()"
>
删除
</el-button>
</div>
</div>
<el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row border
@selection-change="handleSelectionChange">
<el-table
ref="dataTableRef"
v-loading="loading"
:data="tableData.list"
highlight-current-row
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" min-width="100" />
<el-table-column label="角色编码" prop="code" width="150" />
@@ -43,25 +59,54 @@
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button v-hasPerm="'sys:role:assign'" type="primary" size="small" link icon="position" @click="handleAssignPermClick(scope.row)">
<el-button
v-hasPerm="'sys:role:assign'"
type="primary"
size="small"
link
icon="position"
@click="handleAssignPermClick(scope.row)"
>
分配权限
</el-button>
<el-button type="primary" size="small" link icon="edit" @click="handleEditClick(scope.row.id)">
<el-button
type="primary"
size="small"
link
icon="edit"
@click="handleEditClick(scope.row.id)"
>
编辑
</el-button>
<el-button type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
<el-button
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize" @pagination="fetchList" />
<pagination
v-if="tableData.total > 0"
v-model:total="tableData.total"
v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize"
@pagination="fetchList"
/>
</el-card>
<!-- 角色表单弹窗 -->
<el-dialog v-model="dialogState.visible" :title="dialogState.title" width="600px" @close="closeDialog">
<el-dialog
v-model="dialogState.visible"
:title="dialogState.title"
width="600px"
@close="closeDialog"
>
<el-form ref="roleFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
@@ -83,8 +128,15 @@
<!-- 自定义部门选择 -->
<el-form-item v-if="formData.dataScope === 5" label="选择部门" prop="deptIds">
<el-tree-select v-model="formData.deptIds" :data="deptOptions" multiple :render-after-expand="false" check-strictly
placeholder="请选择部门" style="width: 100%" />
<el-tree-select
v-model="formData.deptIds"
:data="deptOptions"
multiple
:render-after-expand="false"
check-strictly
placeholder="请选择部门"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
@@ -95,7 +147,12 @@
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 100px" />
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
</el-form-item>
</el-form>
<template #footer>
@@ -107,7 +164,11 @@
</el-dialog>
<!-- 分配权限弹窗 -->
<el-drawer v-model="assignPermDialogVisible" :title="'【' + checkedRole.name + '】权限分配'" :size="drawerSize">
<el-drawer
v-model="assignPermDialogVisible"
:title="'【' + checkedRole.name + '】权限分配'"
:size="drawerSize"
>
<div class="flex-x-between">
<el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
<template #prefix>
@@ -122,7 +183,11 @@
</template>
{{ isExpanded ? "收缩" : "展开" }}
</el-button>
<el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleParentChildLinkedChange">
<el-checkbox
v-model="parentChildLinked"
class="ml-5"
@change="handleParentChildLinkedChange"
>
父子联动
</el-checkbox>
@@ -137,8 +202,16 @@
</div>
</div>
<el-tree ref="permTreeRef" node-key="value" show-checkbox :data="menuPermOptions" :filter-node-method="handlePermFilter"
:default-expand-all="true" :check-strictly="!parentChildLinked" class="mt-5">
<el-tree
ref="permTreeRef"
node-key="value"
show-checkbox
:data="menuPermOptions"
:filter-node-method="handlePermFilter"
:default-expand-all="true"
:check-strictly="!parentChildLinked"
class="mt-5"
>
<template #default="{ data }">
{{ data.label }}
</template>
@@ -156,318 +229,318 @@
</template>
<script setup lang="ts">
import { useAppStore } from "@/stores/app";
import { DeviceEnum } from "@/enums/settings";
import { useAppStore } from "@/stores/app";
import { DeviceEnum } from "@/enums/settings";
import RoleAPI from "@/api/system/role";
import type { RoleItem, RoleForm } from "@/api/system/role";
import MenuAPI from "@/api/system/menu";
import DeptAPI from "@/api/system/dept";
import RoleAPI from "@/api/system/role";
import type { RoleItem, RoleForm } from "@/api/system/role";
import MenuAPI from "@/api/system/menu";
import DeptAPI from "@/api/system/dept";
defineOptions({
name: "Role",
inheritAttrs: false,
});
defineOptions({
name: "Role",
inheritAttrs: false,
});
const appStore = useAppStore();
const appStore = useAppStore();
const queryFormRef = ref();
const roleFormRef = ref();
const permTreeRef = ref();
const queryFormRef = ref();
const roleFormRef = ref();
const permTreeRef = ref();
const loading = ref(false);
const ids = ref<number[]>([]);
const loading = ref(false);
const ids = ref<number[]>([]);
const tableData = reactive<PageResult<RoleItem>>({
list: [],
total: 0,
params: {
pageNum: 1,
pageSize: 10,
keywords: ""
},
});
const tableData = reactive<PageResult<RoleItem>>({
list: [],
total: 0,
params: {
pageNum: 1,
pageSize: 10,
keywords: "",
},
});
// 菜单权限下拉
const menuPermOptions = ref<OptionItem[]>([]);
// 部门下拉选项
const deptOptions = ref<OptionItem[]>([]);
// 菜单权限下拉
const menuPermOptions = ref<OptionItem[]>([]);
// 部门下拉选项
const deptOptions = ref<OptionItem[]>([]);
// 弹窗
const dialogState = reactive({
title: "",
visible: false,
});
// 弹窗
const dialogState = reactive({
title: "",
visible: false,
});
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
// 角色表单
const formData = reactive<RoleForm>({
sort: 1,
status: 1,
});
// 角色表单
const formData = reactive<RoleForm>({
sort: 1,
status: 1,
});
const rules = reactive({
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
deptIds: [{ required: true, message: "请选择部门", trigger: "blur" }],
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
});
const rules = reactive({
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
deptIds: [{ required: true, message: "请选择部门", trigger: "blur" }],
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
});
// 选中的角色
interface CheckedRole {
id?: string;
name?: string;
// 选中的角色
interface CheckedRole {
id?: string;
name?: string;
}
const checkedRole = ref<CheckedRole>({});
const assignPermDialogVisible = ref(false);
const permKeywords = ref("");
const isExpanded = ref(true);
const parentChildLinked = ref(true);
/**
* 加载角色列表数据
*/
async function fetchList(): Promise<void> {
loading.value = true;
try {
const data = await RoleAPI.getPage(tableData.params);
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
} finally {
loading.value = false;
}
const checkedRole = ref<CheckedRole>({});
const assignPermDialogVisible = ref(false);
}
const permKeywords = ref("");
const isExpanded = ref(true);
// 查询（重置页码后获取数据）
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchList();
}
const parentChildLinked = ref(true);
/**
* 重置查询条件
*/
function resetQuery(): void {
queryFormRef.value?.resetFields();
}
/**
* 加载角色列表数据
*/
async function fetchList(): Promise<void> {
loading.value = true;
try {
const data = await RoleAPI.getPage(tableData.params);
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
} finally {
loading.value = false;
}
/**
* 重置查询条件并重新查询
*/
function handleResetQuery(): void {
resetQuery();
handleQuery();
}
// 行复选框选中
function handleSelectionChange(selection: any): void {
ids.value = selection.map((item: any) => item.id);
}
/**
* 打开表单弹窗
*/
function openDialog(): void {
dialogState.visible = true;
}
/**
* 关闭表单弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
resetForm();
}
/**
* 重置表单数据和验证状态
*/
function resetForm(): void {
roleFormRef.value?.resetFields();
roleFormRef.value?.clearValidate();
formData.id = undefined;
formData.sort = 1;
formData.status = 1;
formData.dataScope = undefined;
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;
}
// 查询（重置页码后获取数据）
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchList();
}
/**
* 重置查询条件
*/
function resetQuery(): void {
queryFormRef.value?.resetFields();
}
/**
* 重置查询条件并重新查询
*/
function handleResetQuery(): void {
resetQuery();
handleQuery();
}
// 行复选框选中
function handleSelectionChange(selection: any): void {
ids.value = selection.map((item: any) => item.id);
}
/**
* 打开表单弹窗
*/
function openDialog(): void {
dialogState.visible = true;
}
/**
* 关闭表单弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
resetForm();
}
/**
* 重置表单数据和验证状态
*/
function resetForm(): void {
roleFormRef.value?.resetFields();
roleFormRef.value?.clearValidate();
formData.id = undefined;
formData.sort = 1;
formData.status = 1;
formData.dataScope = undefined;
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): void {
const roleIds = roleId ? String(roleId) : ids.value.join(",");
if (!roleIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
loading.value = true;
RoleAPI.deleteByIds(roleIds)
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => (loading.value = false));
},
() => {
ElMessage.info("已取消删除");
}
);
}
/**
* 批量删除按钮点击事件
*/
function handleBatchDelete(): void {
handleDelete();
}
// 打开分配菜单权限弹窗
async function handleAssignPermClick(row: RoleItem): Promise<void> {
const roleId = row.id;
loading.value = true;
try {
const roleId = formData.id;
if (roleId) {
assignPermDialogVisible.value = true;
loading.value = true;
checkedRole.value.id = roleId;
checkedRole.value.name = row.name;
// 获取所有的菜单
menuPermOptions.value = await MenuAPI.getOptions();
// 回显角色已拥有的菜单
RoleAPI.getRoleMenuIds(roleId)
.then((data) => {
const checkedMenuIds = data;
checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
})
.finally(() => {
loading.value = false;
});
await RoleAPI.update(roleId, submitData);
ElMessage.success("修改成功");
} else {
await RoleAPI.create(submitData);
ElMessage.success("新增成功");
}
closeDialog();
handleResetQuery();
} finally {
loading.value = false;
}
}
// 删除角色
function handleDelete(roleId?: number): void {
const roleIds = roleId ? String(roleId) : ids.value.join(",");
if (!roleIds) {
ElMessage.warning("请勾选删除项");
return;
}
// 分配菜单权限提交
function handleAssignPermSubmit() {
const roleId = checkedRole.value.id;
if (roleId) {
const checkedMenuIds: number[] = permTreeRef
.value!.getCheckedNodes(false, true)
.map((node: any) => node.value);
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
loading.value = true;
RoleAPI.updateRoleMenus(roleId, checkedMenuIds)
RoleAPI.deleteByIds(roleIds)
.then(() => {
ElMessage.success("分配权限成功");
assignPermDialogVisible.value = false;
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => {
loading.value = false;
});
.finally(() => (loading.value = false));
},
() => {
ElMessage.info("已取消删除");
}
}
);
}
// 展开/收缩 菜单权限树
function togglePermTree(): void {
isExpanded.value = !isExpanded.value;
if (permTreeRef.value) {
Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
if (isExpanded.value) {
node.expand();
} else {
node.collapse();
}
/**
* 批量删除按钮点击事件
*/
function handleBatchDelete(): void {
handleDelete();
}
// 打开分配菜单权限弹窗
async function handleAssignPermClick(row: RoleItem): Promise<void> {
const roleId = row.id;
if (roleId) {
assignPermDialogVisible.value = true;
loading.value = true;
checkedRole.value.id = roleId;
checkedRole.value.name = row.name;
// 获取所有的菜单
menuPermOptions.value = await MenuAPI.getOptions();
// 回显角色已拥有的菜单
RoleAPI.getRoleMenuIds(roleId)
.then((data) => {
const checkedMenuIds = data;
checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
})
.finally(() => {
loading.value = false;
});
}
}
}
// 权限筛选
watch(permKeywords, (val) => {
permTreeRef.value!.filter(val);
});
// 分配菜单权限提交
function handleAssignPermSubmit() {
const roleId = checkedRole.value.id;
if (roleId) {
const checkedMenuIds: number[] = permTreeRef
.value!.getCheckedNodes(false, true)
.map((node: any) => node.value);
function handlePermFilter(
value: string,
data: {
[key: string]: any;
}
) {
if (!value) return true;
return data.label.includes(value);
loading.value = true;
RoleAPI.updateRoleMenus(roleId, checkedMenuIds)
.then(() => {
ElMessage.success("分配权限成功");
assignPermDialogVisible.value = false;
handleResetQuery();
})
.finally(() => {
loading.value = false;
});
}
}
// 父子菜单节点是否联动
function handleParentChildLinkedChange(val: any): void {
parentChildLinked.value = val;
// 展开/收缩 菜单权限树
function togglePermTree(): void {
isExpanded.value = !isExpanded.value;
if (permTreeRef.value) {
Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
if (isExpanded.value) {
node.expand();
} else {
node.collapse();
}
});
}
}
onMounted(() => {
handleQuery();
});
// 权限筛选
watch(permKeywords, (val) => {
permTreeRef.value!.filter(val);
});
function handlePermFilter(
value: string,
data: {
[key: string]: any;
}
) {
if (!value) return true;
return data.label.includes(value);
}
// 父子菜单节点是否联动
function handleParentChildLinkedChange(val: any): void {
parentChildLinked.value = val;
}
onMounted(() => {
handleQuery();
});
</script>

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

File diff suppressed because it is too large Load Diff

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

@@ -3,11 +3,21 @@
<el-card class="page-search" shadow="never">
<el-form ref="queryFormRef" :model="tableData.params" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input v-model="tableData.params.keywords" placeholder="套餐名称/套餐编码" clearable @keyup.enter="handleQuery" />
<el-input
v-model="tableData.params.keywords"
placeholder="套餐名称/套餐编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="tableData.params.status" placeholder="全部" clearable style="width: 120px">
<el-select
v-model="tableData.params.status"
placeholder="全部"
clearable
style="width: 120px"
>
<el-option label="启用" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
@@ -23,13 +33,24 @@
<el-card class="page-content" shadow="never">
<div class="page-toolbar">
<div class="page-toolbar__left">
<el-button v-hasPerm="['sys:tenant-plan:create']" type="success" icon="plus" @click="openDialog()">
<el-button
v-hasPerm="['sys:tenant-plan:create']"
type="success"
icon="plus"
@click="openDialog()"
>
新增
</el-button>
</div>
</div>
<el-table ref="dataTableRef" v-loading="loading" :data="tableData.list" highlight-current-row border>
<el-table
ref="dataTableRef"
v-loading="loading"
:data="tableData.list"
highlight-current-row
border
>
<el-table-column type="index" label="序号" width="60" />
<el-table-column label="套餐名称" prop="name" min-width="120" />
<el-table-column label="套餐编码" prop="code" width="160" />
@@ -44,25 +65,55 @@
<el-table-column label="创建时间" prop="createTime" width="180" />
<el-table-column fixed="right" label="操作" width="240">
<template #default="scope">
<el-button v-hasPerm="['sys:tenant-plan:assign']" type="primary" size="small" link icon="menu"
@click="openPlanMenuDialog(scope.row)">
<el-button
v-hasPerm="['sys:tenant-plan:assign']"
type="primary"
size="small"
link
icon="menu"
@click="openPlanMenuDialog(scope.row)"
>
菜单配置
</el-button>
<el-button v-hasPerm="['sys:tenant-plan:update']" type="primary" size="small" link icon="edit" @click="openDialog(scope.row.id)">
<el-button
v-hasPerm="['sys:tenant-plan:update']"
type="primary"
size="small"
link
icon="edit"
@click="openDialog(scope.row.id)"
>
编辑
</el-button>
<el-button v-hasPerm="['sys:tenant-plan:delete']" type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
<el-button
v-hasPerm="['sys:tenant-plan:delete']"
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize" @pagination="fetchData" />
<pagination
v-if="tableData.total > 0"
v-model:total="tableData.total"
v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize"
@pagination="fetchData"
/>
</el-card>
<el-dialog v-model="dialogState.visible" :title="dialogState.title" width="520px" @close="closeDialog">
<el-dialog
v-model="dialogState.visible"
:title="dialogState.title"
width="520px"
@close="closeDialog"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="套餐名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入套餐名称" />
@@ -77,7 +128,12 @@
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 120px" />
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 120px"
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="可选" />
@@ -91,7 +147,12 @@
</template>
</el-dialog>
<el-drawer v-model="planMenuDialogVisible" :title="'【' + checkedPlan.name + '】菜单配置'" size="600px" @close="closePlanMenuDialog">
<el-drawer
v-model="planMenuDialogVisible"
:title="'【' + checkedPlan.name + '】菜单配置'"
size="600px"
@close="closePlanMenuDialog"
>
<div class="flex-x-between">
<el-input v-model="menuKeywords" clearable class="w-[150px]" placeholder="菜单名称">
<template #prefix>
@@ -121,8 +182,16 @@
</div>
</div>
<el-tree ref="menuTreeRef" node-key="value" show-checkbox :data="menuPermOptions" :filter-node-method="handleMenuFilter"
:default-expand-all="true" :check-strictly="!menuParentChildLinked" class="mt-5">
<el-tree
ref="menuTreeRef"
node-key="value"
show-checkbox
:data="menuPermOptions"
:filter-node-method="handleMenuFilter"
:default-expand-all="true"
:check-strictly="!menuParentChildLinked"
class="mt-5"
>
<template #default="{ data }">
{{ data.label }}
</template>
@@ -130,7 +199,11 @@
<template #footer>
<div class="dialog-footer">
<el-button v-hasPerm="['sys:tenant-plan:assign']" type="primary" @click="handlePlanMenuSubmit">
<el-button
v-hasPerm="['sys:tenant-plan:assign']"
type="primary"
@click="handlePlanMenuSubmit"
>
确定
</el-button>
<el-button @click="planMenuDialogVisible = false">取消</el-button>
@@ -141,140 +214,120 @@
</template>
<script setup lang="ts">
defineOptions({
name: "TenantPlan",
inheritAttrs: false,
});
defineOptions({
name: "TenantPlan",
inheritAttrs: false,
});
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 {
TenantPlanForm,
TenantPlanItem,
} from "@/api/system/tenant-plan";
import type { OptionItem } from "@/api/common";
import { MenuScopeEnum } from "@/enums/business";
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 { TenantPlanForm, TenantPlanItem } from "@/api/system/tenant-plan";
import type { OptionItem } from "@/api/common";
import { MenuScopeEnum } from "@/enums/business";
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
const dataTableRef = ref();
const menuTreeRef = ref();
// 表单引用
const queryFormRef = ref<FormInstance>();
const dataFormRef = ref<FormInstance>();
const dataTableRef = ref();
const menuTreeRef = ref();
// 列表数据
const menuPermOptions = ref<OptionItem[]>([]);
const loading = ref(false);
// 列表数据
const menuPermOptions = ref<OptionItem[]>([]);
const loading = ref(false);
const tableData = reactive<PageResult<TenantPlanItem>>({
list: [],
total: 0,
params: { //查询参数
pageNum: 1,
pageSize: 10,
keywords: "",
},
});
const tableData = reactive<PageResult<TenantPlanItem>>({
list: [],
total: 0,
params: {
//查询参数
pageNum: 1,
pageSize: 10,
keywords: "",
},
});
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 弹窗状态
const dialogState = reactive({
title: "",
visible: false,
});
// 表单数据
const formData = reactive<TenantPlanForm>({
id: undefined,
name: "",
code: "",
status: 1,
sort: 1,
remark: "",
});
// 表单数据
const formData = reactive<TenantPlanForm>({
id: undefined,
name: "",
code: "",
status: 1,
sort: 1,
remark: "",
});
// 验证规则
const rules: FormRules = {
name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
code: [{ required: true, message: "请输入套餐编码", trigger: "blur" }],
status: [{ required: true, message: "请选择状态", trigger: "change" }],
};
// 验证规则
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);
// 菜单配置弹窗状态
const planMenuDialogVisible = ref(false);
const checkedPlan = ref<{ id?: number; name?: string }>({});
const menuKeywords = ref("");
const menuExpanded = ref(true);
const menuParentChildLinked = ref(true);
/**
* 加载租户套餐分页数据
*/
function fetchData(): void {
loading.value = true;
TenantPlanAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
/**
* 加载租户套餐分页数据
*/
function fetchData(): void {
loading.value = true;
TenantPlanAPI.getPage(tableData.params)
.then((data) => {
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
})
.finally(() => {
loading.value = false;
});
}
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 查询按钮点击事件
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchData();
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 重置查询
*/
function handleResetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.pageNum = 1;
fetchData();
}
/**
* 打开弹窗
* @param planId 套餐ID（编辑时传入）
*/
async function openDialog(planId?: number): Promise<void> {
dialogState.visible = true;
if (planId) {
dialogState.title = "修改套餐";
const data = await TenantPlanAPI.getFormData(String(planId));
Object.assign(formData, data);
if (formData.status == null) {
formData.status = 1;
}
if (formData.sort == null) {
formData.sort = 1;
}
} else {
dialogState.title = "新增套餐";
Object.assign(formData, {
id: undefined,
name: "",
code: "",
status: 1,
sort: 1,
remark: "",
});
/**
* 打开弹窗
* @param planId 套餐ID（编辑时传入）
*/
async function openDialog(planId?: number): Promise<void> {
dialogState.visible = true;
if (planId) {
dialogState.title = "修改套餐";
const data = await TenantPlanAPI.getFormData(String(planId));
Object.assign(formData, data);
if (formData.status == null) {
formData.status = 1;
}
}
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
if (formData.sort == null) {
formData.sort = 1;
}
} else {
dialogState.title = "新增套餐";
Object.assign(formData, {
id: undefined,
name: "",
@@ -284,146 +337,164 @@
remark: "",
});
}
}
/**
* 提交表单
*/
const handleSubmit = useDebounceFn(async (): Promise<void> => {
const valid = await dataFormRef.value?.validate().then(
() => true,
() => false
);
if (!valid) return;
/**
* 关闭弹窗
*/
function closeDialog(): void {
dialogState.visible = false;
dataFormRef.value?.resetFields();
dataFormRef.value?.clearValidate();
Object.assign(formData, {
id: undefined,
name: "",
code: "",
status: 1,
sort: 1,
remark: "",
});
}
loading.value = true;
try {
if (formData.id) {
await TenantPlanAPI.update(String(formData.id), formData);
ElMessage.success("修改成功");
} else {
await TenantPlanAPI.create(formData);
ElMessage.success("新增成功");
}
closeDialog();
handleResetQuery();
} finally {
loading.value = false;
/**
* 提交表单
*/
const handleSubmit = useDebounceFn(async (): Promise<void> => {
const valid = await dataFormRef.value?.validate().then(
() => true,
() => false
);
if (!valid) return;
loading.value = true;
try {
if (formData.id) {
await TenantPlanAPI.update(String(formData.id), formData);
ElMessage.success("修改成功");
} else {
await TenantPlanAPI.create(formData);
ElMessage.success("新增成功");
}
}, 300);
closeDialog();
handleResetQuery();
} finally {
loading.value = false;
}
}, 300);
/**
* 删除套餐
* @param planId 套餐ID
*/
function handleDelete(planId?: number): void {
if (!planId) return;
ElMessageBox.confirm("确认删除该租户套餐吗？", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
loading.value = true;
TenantPlanAPI.deleteByIds(String(planId))
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => {
loading.value = false;
});
/**
* 删除套餐
* @param planId 套餐ID
*/
function handleDelete(planId?: number): void {
if (!planId) return;
ElMessageBox.confirm("确认删除该租户套餐吗？", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
loading.value = true;
TenantPlanAPI.deleteByIds(String(planId))
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => {
loading.value = false;
});
});
}
/**
* 打开菜单配置弹窗
*/
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);
await nextTick();
menuTreeRef.value?.setCheckedKeys([], false);
menuIds.forEach((menuId) => menuTreeRef.value?.setChecked(menuId, true, false));
} finally {
loading.value = false;
}
}
/**
* 关闭菜单配置弹窗
*/
function closePlanMenuDialog(): void {
planMenuDialogVisible.value = false;
menuKeywords.value = "";
menuExpanded.value = true;
menuParentChildLinked.value = true;
menuTreeRef.value?.setCheckedKeys([], false);
}
/**
* 展开/收缩菜单树
*/
function toggleMenuTree(): void {
menuExpanded.value = !menuExpanded.value;
if (menuTreeRef.value) {
Object.values(menuTreeRef.value.store.nodesMap).forEach((node: any) => {
if (menuExpanded.value) {
node.expand();
} else {
node.collapse();
}
});
}
}
/**
* 打开菜单配置弹窗
*/
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 };
/**
* 切换父子联动
*/
function handleMenuLinkChange(val: string | number | boolean): void {
menuParentChildLinked.value = Boolean(val);
}
try {
const menuOptions = await MenuAPI.getOptions(false, MenuScopeEnum.TENANT);
menuPermOptions.value = menuOptions;
const menuIds = await TenantPlanAPI.getPlanMenuIds(row.id);
await nextTick();
menuTreeRef.value?.setCheckedKeys([], false);
menuIds.forEach((menuId) => menuTreeRef.value?.setChecked(menuId, true, false));
} finally {
loading.value = false;
}
}
/**
* 菜单树过滤逻辑
*/
function handleMenuFilter(value: string, data: { [key: string]: any }): boolean {
if (!value) return true;
return data.label.includes(value);
}
/**
* 关闭菜单配置弹窗
*/
function closePlanMenuDialog(): void {
/**
* 提交菜单配置
*/
async function handlePlanMenuSubmit(): Promise<void> {
const planId = checkedPlan.value.id;
if (!planId) return;
const checkedMenuIds: number[] = menuTreeRef
.value!.getCheckedNodes(false, true)
.map((node: any) => node.value);
loading.value = true;
try {
await TenantPlanAPI.updatePlanMenus(planId, checkedMenuIds);
ElMessage.success("菜单配置成功");
planMenuDialogVisible.value = false;
menuKeywords.value = "";
menuExpanded.value = true;
menuParentChildLinked.value = true;
menuTreeRef.value?.setCheckedKeys([], false);
} finally {
loading.value = false;
}
}
/**
* 展开/收缩菜单树
*/
function toggleMenuTree(): void {
menuExpanded.value = !menuExpanded.value;
if (menuTreeRef.value) {
Object.values(menuTreeRef.value.store.nodesMap).forEach((node: any) => {
if (menuExpanded.value) {
node.expand();
} else {
node.collapse();
}
});
}
}
// 菜单树关键字过滤
watch(menuKeywords, (val) => {
menuTreeRef.value?.filter(val);
});
/**
* 切换父子联动
*/
function handleMenuLinkChange(val: string | number | boolean): void {
menuParentChildLinked.value = Boolean(val);
}
/**
* 菜单树过滤逻辑
*/
function handleMenuFilter(value: string, data: { [key: string]: any }): boolean {
if (!value) return true;
return data.label.includes(value);
}
/**
* 提交菜单配置
*/
async function handlePlanMenuSubmit(): Promise<void> {
const planId = checkedPlan.value.id;
if (!planId) return;
const checkedMenuIds: number[] = menuTreeRef
.value!.getCheckedNodes(false, true)
.map((node: any) => node.value);
loading.value = true;
try {
await TenantPlanAPI.updatePlanMenus(planId, checkedMenuIds);
ElMessage.success("菜单配置成功");
planMenuDialogVisible.value = false;
} finally {
loading.value = false;
}
}
// 菜单树关键字过滤
watch(menuKeywords, (val) => {
menuTreeRef.value?.filter(val);
});
onMounted(() => {
fetchData();
});
onMounted(() => {
fetchData();
});
</script>

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

@@ -13,19 +13,36 @@
<el-card shadow="never" class="page-search">
<el-form ref="queryFormRef" :model="tableData.params" :inline="true" label-width="auto">
<el-form-item label="关键字" prop="keywords">
<el-input v-model="tableData.params.keywords" placeholder="用户名/昵称/手机号" clearable @keyup.enter="handleQuery" />
<el-input
v-model="tableData.params.keywords"
placeholder="用户名/昵称/手机号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="tableData.params.status" placeholder="全部" clearable style="width: 100px">
<el-select
v-model="tableData.params.status"
placeholder="全部"
clearable
style="width: 100px"
>
<el-option label="正常" :value="1" />
<el-option label="禁用" :value="0" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker v-model="tableData.params.createTime" :editable="false" type="daterange" range-separator="~"
start-placeholder="开始时间" end-placeholder="截止时间" value-format="YYYY-MM-DD" />
<el-date-picker
v-model="tableData.params.createTime"
:editable="false"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="截止时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item>
@@ -38,10 +55,21 @@
<el-card shadow="never" class="page-content">
<div class="page-toolbar">
<div class="page-toolbar__left">
<el-button v-hasPerm="['sys:user:create']" type="success" icon="plus" @click="handleCreateClick">
<el-button
v-hasPerm="['sys:user:create']"
type="success"
icon="plus"
@click="handleCreateClick"
>
新增
</el-button>
<el-button v-hasPerm="'sys:user:delete'" type="danger" icon="delete" :disabled="!hasSelection" @click="handleDelete()">
<el-button
v-hasPerm="'sys:user:delete'"
type="danger"
icon="delete"
:disabled="!hasSelection"
@click="handleDelete()"
>
删除
</el-button>
</div>
@@ -56,8 +84,15 @@
</div>
</div>
<el-table v-loading="loading" :data="tableData.list" border stripe highlight-current-row row-key="id"
@selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="tableData.list"
border
stripe
highlight-current-row
row-key="id"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户名" prop="username" min-width="120" show-overflow-tooltip />
<el-table-column label="昵称" width="200" align="center" prop="nickname" />
@@ -80,31 +115,66 @@
<el-table-column label="创建时间" align="center" prop="createTime" width="180" />
<el-table-column label="操作" fixed="right" width="220">
<template #default="scope">
<el-button v-hasPerm="'sys:user:reset-password'" type="primary" icon="RefreshLeft" size="small" link
@click="handleResetPassword(scope.row)">
<el-button
v-hasPerm="'sys:user:reset-password'"
type="primary"
icon="RefreshLeft"
size="small"
link
@click="handleResetPassword(scope.row)"
>
重置密码
</el-button>
<el-button v-hasPerm="'sys:user:update'" type="primary" icon="edit" link size="small" @click="handleEditClick(scope.row.id)">
<el-button
v-hasPerm="'sys:user:update'"
type="primary"
icon="edit"
link
size="small"
@click="handleEditClick(scope.row.id)"
>
编辑
</el-button>
<el-button v-hasPerm="'sys:user:delete'" type="danger" icon="delete" link size="small" @click="handleDelete(scope.row.id)">
<el-button
v-hasPerm="'sys:user:delete'"
type="danger"
icon="delete"
link
size="small"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize" @pagination="fetchList" />
<pagination
v-if="tableData.total > 0"
v-model:total="tableData.total"
v-model:page="tableData.params.pageNum"
v-model:limit="tableData.params.pageSize"
@pagination="fetchList"
/>
</el-card>
</el-col>
</el-row>
<!-- 用户表单 -->
<el-drawer v-model="dialogState.visible" :title="dialogState.title" append-to-body :size="drawerSize" @close="closeDialog">
<el-drawer
v-model="dialogState.visible"
:title="dialogState.title"
append-to-body
:size="drawerSize"
@close="closeDialog"
>
<el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" :readonly="!!formData.id" placeholder="请输入用户名" />
<el-input
v-model="formData.username"
:readonly="!!formData.id"
placeholder="请输入用户名"
/>
</el-form-item>
<el-form-item label="用户昵称" prop="nickname">
@@ -112,8 +182,14 @@
</el-form-item>
<el-form-item label="所属部门" prop="deptId">
<el-tree-select v-model="formData.deptId" placeholder="请选择所属部门" :data="deptOptions" filterable check-strictly
:render-after-expand="false" />
<el-tree-select
v-model="formData.deptId"
placeholder="请选择所属部门"
:data="deptOptions"
filterable
check-strictly
:render-after-expand="false"
/>
</el-form-item>
<el-form-item label="性别" prop="gender">
@@ -122,7 +198,12 @@
<el-form-item label="角色" prop="roleIds">
<el-select v-model="formData.roleIds" multiple placeholder="请选择">
<el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-option
v-for="item in roleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
@@ -135,8 +216,14 @@
</el-form-item>
<el-form-item label="状态" prop="status">
<el-switch v-model="formData.status" inline-prompt active-text="正常" inactive-text="禁用" :active-value="CommonStatus.ENABLED"
:inactive-value="CommonStatus.DISABLED" />
<el-switch
v-model="formData.status"
inline-prompt
active-text="正常"
inactive-text="禁用"
:active-value="CommonStatus.ENABLED"
:inactive-value="CommonStatus.DISABLED"
/>
</el-form-item>
</el-form>
@@ -154,290 +241,291 @@
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { useDebounceFn } from "@vueuse/core";
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import type { UserForm, UserItem } from "@/api/system/user";
import { downloadFile } from "@/utils";
import UserAPI from "@/api/system/user";
import DeptAPI from "@/api/system/dept";
import RoleAPI from "@/api/system/role";
import { useUserStore, useAppStore } from "@/stores";
import { DeviceEnum, DialogMode, CommonStatus } from "@/enums";
import { useTableSelection } from "@/composables";
import UserDeptTree from "./components/UserDeptTree.vue";
import UserImportDialog from "./components/UserImportDialog.vue";
import { computed, onMounted, reactive, ref } from "vue";
import { useDebounceFn } from "@vueuse/core";
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import type { UserForm, UserItem } from "@/api/system/user";
import { downloadFile } from "@/utils";
import UserAPI from "@/api/system/user";
import DeptAPI from "@/api/system/dept";
import RoleAPI from "@/api/system/role";
import { useUserStore, useAppStore } from "@/stores";
import { DeviceEnum, DialogMode, CommonStatus } from "@/enums";
import { useTableSelection } from "@/composables";
import UserDeptTree from "./components/UserDeptTree.vue";
import UserImportDialog from "./components/UserImportDialog.vue";
defineOptions({
name: "User",
inheritAttrs: false,
});
defineOptions({
name: "User",
inheritAttrs: false,
});
const appStore = useAppStore();
const userStore = useUserStore();
const appStore = useAppStore();
const userStore = useUserStore();
// 表单引用
const queryFormRef = ref<FormInstance>();
const userFormRef = ref<FormInstance>();
// 表单引用
const queryFormRef = ref<FormInstance>();
const userFormRef = ref<FormInstance>();
const loading = ref(false);
const loading = ref(false);
const tableData = reactive<PageResult<UserItem>>({
list: [],
total: 0,
params: { //查询参数
pageNum: 1,
pageSize: 10,
},
});
const tableData = reactive<PageResult<UserItem>>({
list: [],
total: 0,
params: {
//查询参数
pageNum: 1,
pageSize: 10,
},
});
// 弹窗状态
const dialogState = reactive({
visible: false,
title: "新增用户",
mode: DialogMode.CREATE,
});
// 弹窗状态
const dialogState = reactive({
visible: false,
title: "新增用户",
mode: DialogMode.CREATE,
});
// 导入弹窗状态
const importDialogVisible = ref(false);
// 导入弹窗状态
const importDialogVisible = ref(false);
// 表单初始数据
const initialFormData: UserForm = {
status: CommonStatus.ENABLED,
};
// 表单初始数据
const initialFormData: UserForm = {
status: CommonStatus.ENABLED,
};
// 表单数据
const formData = reactive<UserForm>({ ...initialFormData });
// 表单数据
const formData = reactive<UserForm>({ ...initialFormData });
// 下拉选项
const deptOptions = ref<OptionItem[]>();
const roleOptions = ref<OptionItem[]>();
// 下拉选项
const deptOptions = ref<OptionItem[]>();
const roleOptions = ref<OptionItem[]>();
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
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" }],
};
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 fetchList(): Promise<void> {
loading.value = true;
try {
const data = await UserAPI.getPage(tableData.params);
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
} finally {
loading.value = false;
/**
* 加载用户列表数据
*/
async function fetchList(): Promise<void> {
loading.value = true;
try {
const data = await UserAPI.getPage(tableData.params);
tableData.list = data.list ?? [];
tableData.total = data.total ?? 0;
} finally {
loading.value = false;
}
}
/**
* 加载表单下拉选项数据
*/
async function loadFormOptions(): Promise<void> {
[roleOptions.value, deptOptions.value] = await Promise.all([
RoleAPI.getOptions(),
DeptAPI.getOptions(),
]);
}
const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserItem>();
/**
* 执行查询（重置页码）
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchList();
}
/**
* 重置查询条件
*/
function resetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.deptId = undefined;
tableData.params.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 {
ElMessageBox.prompt(`请输入用户【${row.username}】的新密码`, "重置密码", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputPattern: /.{6,}/,
inputErrorMessage: "密码至少需要6位字符",
}).then(
(result: any) => resetPassword(row.id, result.value),
() => {
/* 用户取消 */
}
}
);
}
/**
* 加载表单下拉选项数据
*/
async function loadFormOptions(): Promise<void> {
[roleOptions.value, deptOptions.value] = await Promise.all([
RoleAPI.getOptions(),
DeptAPI.getOptions(),
]);
}
/**
* 新增按钮点击事件
*/
async function handleCreateClick(): Promise<void> {
dialogState.title = "新增用户";
dialogState.mode = DialogMode.CREATE;
await loadFormOptions();
openDialog();
}
const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserItem>();
/**
* 编辑按钮点击事件
* @param id 用户ID
*/
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();
}
/**
* 执行查询（重置页码）
*/
function handleQuery(): void {
tableData.params.pageNum = 1;
fetchList();
}
/**
* 提交表单（防抖处理）
*/
const handleSubmit = useDebounceFn(async () => {
const valid = await userFormRef.value?.validate().then(
() => true,
() => false
);
if (!valid) return;
/**
* 重置查询条件
*/
function resetQuery(): void {
queryFormRef.value?.resetFields();
tableData.params.deptId = undefined;
tableData.params.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 {
ElMessageBox.prompt(`请输入用户【${row.username}】的新密码`, "重置密码", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputPattern: /.{6,}/,
inputErrorMessage: "密码至少需要6位字符",
}).then(
(result: any) => resetPassword(row.id, result.value),
() => {
/* 用户取消 */
}
);
}
/**
* 新增按钮点击事件
*/
async function handleCreateClick(): Promise<void> {
dialogState.title = "新增用户";
dialogState.mode = DialogMode.CREATE;
await loadFormOptions();
openDialog();
}
/**
* 编辑按钮点击事件
* @param id 用户ID
*/
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(
() => true,
() => false
);
if (!valid) return;
loading.value = true;
try {
if (formData.id) {
await UserAPI.update(formData.id, formData);
ElMessage.success("修改用户成功");
} else {
await UserAPI.create(formData);
ElMessage.success("新增用户成功");
}
closeDialog();
handleQuery();
} finally {
loading.value = false;
loading.value = true;
try {
if (formData.id) {
await UserAPI.update(formData.id, formData);
ElMessage.success("修改用户成功");
} else {
await UserAPI.create(formData);
ElMessage.success("新增用户成功");
}
}, 300);
closeDialog();
handleQuery();
} finally {
loading.value = false;
}
}, 300);
/**
* 删除按钮点击事件
* @param id 用户ID，不传则删除选中的用户
*/
function handleDelete(id?: string): void {
const userIds = id ?? selectedIds.value.join(",");
if (!userIds) {
ElMessage.warning("请勾选删除项");
/**
* 删除按钮点击事件
* @param id 用户ID，不传则删除选中的用户
*/
function handleDelete(id?: string): void {
const userIds = id ?? selectedIds.value.join(",");
if (!userIds) {
ElMessage.warning("请勾选删除项");
return;
}
// 安全检查：防止删除当前登录用户
const currentUserId = userStore.userInfo?.userId;
if (currentUserId) {
const isCurrentUserInList = id
? id === currentUserId
: selectedIds.value.some((selectedId) => String(selectedId) === currentUserId);
if (isCurrentUserInList) {
ElMessage.error("不能删除当前登录用户");
return;
}
}
// 安全检查：防止删除当前登录用户
const currentUserId = userStore.userInfo?.userId;
if (currentUserId) {
const isCurrentUserInList = id
? id === currentUserId
: selectedIds.value.some((selectedId) => String(selectedId) === currentUserId);
if (isCurrentUserInList) {
ElMessage.error("不能删除当前登录用户");
return;
}
ElMessageBox.confirm("确认删除选中的用户吗？", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => deleteUsers(userIds),
() => {
/* 用户取消 */
}
);
}
ElMessageBox.confirm("确认删除选中的用户吗？", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => deleteUsers(userIds),
() => {
/* 用户取消 */
}
);
}
/**
* 导出用户列表
*/
async function exportUsers(): Promise<void> {
const response = await UserAPI.export(tableData.params);
downloadFile(response);
ElMessage.success("导出成功");
}
/**
* 导出用户列表
*/
async function exportUsers(): Promise<void> {
const response = await UserAPI.export(tableData.params);
downloadFile(response);
ElMessage.success("导出成功");
}
/**
* 打开导入弹窗
*/
function openImportDialog(): void {
importDialogVisible.value = true;
}
/**
* 打开导入弹窗
*/
function openImportDialog(): void {
importDialogVisible.value = true;
}
onMounted(() => {
handleQuery();
});
onMounted(() => {
handleQuery();
});
</script>