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

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

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

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

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

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

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