优化字典编辑界面

This commit is contained in:
yzp 2025-08-24 11:40:10 +08:00
parent 2183e3b582
commit 3840b87136
2 changed files with 39 additions and 11 deletions

View File

@ -9,17 +9,17 @@
</template>
<el-form :model="state.ruleForm" ref="formRef" label-width="auto">
<el-row :gutter="10">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
<el-form-item label="显示文本" prop="label" :rules="[{ required: true, message: '显示文本不能为空', trigger: 'blur' }]">
<el-input v-model="state.ruleForm.label" placeholder="显示文本" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
<el-form-item label="字典值" prop="value" :rules="[{ required: true, message: '字典值不能为空', trigger: 'blur' }]">
<el-input v-model="state.ruleForm.value" placeholder="字典值" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
<el-form-item label="编码" prop="code" :rules="[{ required: true, message: '编码不能为空', trigger: 'blur' }]">
<el-input v-model="state.ruleForm.code" placeholder="编码" clearable />
</el-form-item>
@ -35,12 +35,12 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="样式(Style)" prop="styleSetting">
<el-input v-model="state.ruleForm.styleSetting" placeholder="样式(Style)" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="样式(Class)" prop="classSetting">
<el-input v-model="state.ruleForm.classSetting" placeholder="样式(Class)" clearable />
</el-form-item>
@ -57,7 +57,12 @@
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="拓展数据">
<el-input v-model="state.ruleForm.extData" placeholder="请输入拓展数据" clearable type="textarea" :rows="6" />
<div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
<el-input v-model="state.ruleForm.extData" placeholder="请输入拓展数据" clearable type="textarea" :rows="12" style="width: 100%;" />
<div style="width: 100%;">
<el-button type="primary" @click="formatJSON" style="width: 100%;">格式化JSON</el-button>
</div>
</div>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
@ -78,7 +83,9 @@
</template>
<script lang="ts" setup name="sysEditDictData">
// import
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getAPI } from '/@/utils/axios-utils';
import { SysDictDataApi } from '/@/api-services/system/api';
@ -130,6 +137,23 @@ const submit = () => {
});
};
// JSON
const formatJSON = () => {
try {
if (!state.ruleForm.extData) {
ElMessage.warning('请先输入JSON字符串');
return;
}
// JSON
const parsedJSON = JSON.parse(state.ruleForm.extData.trim());
state.ruleForm.extData = JSON.stringify(parsedJSON, null, 2);
ElMessage.success('JSON格式化成功');
} catch (error) {
ElMessage.error('JSON格式不正确请检查输入');
console.error('JSON格式化错误:', error);
}
};
//
defineExpose({ openDialog });
</script>

View File

@ -44,6 +44,9 @@
<template #row_sysFlag="{ row }">
<g-sys-dict v-model="row.sysFlag" code="YesNoEnum" />
</template>
<template #row_isEnum="{ row }">
<g-sys-dict v-model="row.isEnum" code="YesNoEnum" />
</template>
<template #row_status="{ row }">
<g-sys-dict v-model="row.status" code="StatusEnum" />
</template>
@ -190,11 +193,12 @@ const optionsDictType = useVxeTable<SysDictType>(
{ field: 'seq', type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '字典名称', minWidth: 140, align: 'left', headerAlign: 'center', showOverflow: 'tooltip' },
{ field: 'code', title: '字典编码', minWidth: 140, align: 'left', headerAlign: 'center', showOverflow: 'tooltip' },
{ field: 'isTenant', title: '租户隔离', width: 80, showOverflow: 'tooltip', visible: userInfo.accountType === AccountTypeEnum.NUMBER_999, slots: { default: 'row_isTenant' } },
{ field: 'sysFlag', title: '是否内置', width: 80, showOverflow: 'tooltip', slots: { default: 'row_sysFlag' } },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'record', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ field: 'isTenant', title: '租户隔离', width: 70, showOverflow: 'tooltip', visible: userInfo.accountType === AccountTypeEnum.NUMBER_999, slots: { default: 'row_isTenant' } },
{ field: 'sysFlag', title: '是否内置', width: 70, showOverflow: 'tooltip', slots: { default: 'row_sysFlag' } },
{ field: 'isEnum', title: '是否枚举', width: 70, showOverflow: 'tooltip', slots: { default: 'row_isEnum' } },
{ field: 'orderNo', title: '排序', width: 70, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 70, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'record', title: '修改记录', width: 90, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ field: 'buttons', title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
},