优化字典编辑界面
This commit is contained in:
parent
2183e3b582
commit
3840b87136
@ -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>
|
||||
|
||||
@ -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' } },
|
||||
],
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user