完善字典明细新增与修改
This commit is contained in:
ChenYi
parent
893733d593
commit
3648af31ab
@ -131,6 +131,7 @@
|
||||
"status": "Status",
|
||||
"description": "Description",
|
||||
"extendedAttribute": "ExtendedAttribute",
|
||||
"extendedAttributeValue": "ExtendedAttributeValue",
|
||||
"type": "Type"
|
||||
},
|
||||
"organizationunit": {
|
||||
|
||||
@ -124,6 +124,7 @@
|
||||
"status": "状态",
|
||||
"description": "描述",
|
||||
"extendedAttribute": "扩展属性",
|
||||
"extendedAttributeValue": "扩展属性值",
|
||||
"type": "字典类型"
|
||||
},
|
||||
"organizationunit": {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
@ -17,115 +17,143 @@ defineOptions({
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
const data = ref<Record<string, any>>({});
|
||||
|
||||
const formSchema = computed(() => [
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
},
|
||||
fieldName: 'typeDisplayText',
|
||||
label: $t('abp.dataDictionary.type'),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseInput'),
|
||||
},
|
||||
fieldName: 'code',
|
||||
label: $t('abp.dataDictionary.code'),
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseInput'),
|
||||
},
|
||||
fieldName: 'displayText',
|
||||
label: $t('abp.dataDictionary.name'),
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseInput'),
|
||||
},
|
||||
fieldName: 'order',
|
||||
label: $t('abp.dataDictionary.order'),
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: getCommonGetSelectList,
|
||||
params: {
|
||||
query: {
|
||||
typeName: 'StandardThingModelDataTypeEnum',
|
||||
},
|
||||
},
|
||||
labelField: 'value',
|
||||
valueField: 'secondValue',
|
||||
optionsPropName: 'options',
|
||||
immediate: true,
|
||||
allowClear: true,
|
||||
placeholder:
|
||||
$t('common.pleaseSelect') +
|
||||
$t('abp.dataDictionary.extendedAttribute'),
|
||||
afterFetch: (res: any) => {
|
||||
if (Array.isArray(res)) {
|
||||
return res;
|
||||
}
|
||||
if (res && Array.isArray(res.items)) {
|
||||
return res.items;
|
||||
}
|
||||
if (res && Array.isArray(res.data)) {
|
||||
return res.data;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
fieldName: 'extendedAttribute',
|
||||
label: $t('abp.dataDictionary.extendedAttribute'),
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '{"InputData":[],"OutputData":[]}',
|
||||
rows: 6,
|
||||
},
|
||||
fieldName: 'extendedAttributeValue',
|
||||
label: $t('abp.dataDictionary.extendedAttributeValue'),
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseInput'),
|
||||
},
|
||||
fieldName: 'description',
|
||||
label: $t('abp.dataDictionary.description'),
|
||||
},
|
||||
]);
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
// 所有表单项共用，可单独在表单内覆盖
|
||||
commonConfig: {
|
||||
// 所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
showDefaultActions: false,
|
||||
// 垂直布局，label和input在不同行，值为vertical
|
||||
// 水平布局，label和input在同一行
|
||||
layout: 'horizontal',
|
||||
schema: [
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
},
|
||||
fieldName: 'typeDisplayText',
|
||||
label: $t('abp.dataDictionary.type'),
|
||||
},
|
||||
{
|
||||
// 组件需要在 #/adapter.ts内注册，并加上类型
|
||||
component: 'Input',
|
||||
// 对应组件的参数
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseInput'),
|
||||
},
|
||||
// 字段名
|
||||
fieldName: 'code',
|
||||
// 界面显示的label
|
||||
label: $t('abp.dataDictionary.code'),
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseInput'),
|
||||
},
|
||||
fieldName: 'displayText',
|
||||
label: $t('abp.dataDictionary.name'),
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseInput'),
|
||||
},
|
||||
fieldName: 'order',
|
||||
label: $t('abp.dataDictionary.order'),
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: getCommonGetSelectList,
|
||||
params: {
|
||||
query: {
|
||||
typeName: 'StandardThingModelDataTypeEnum',
|
||||
},
|
||||
},
|
||||
labelField: 'value',
|
||||
valueField: 'secondValue',
|
||||
optionsPropName: 'options',
|
||||
immediate: true,
|
||||
allowClear: true,
|
||||
placeholder:
|
||||
$t('common.pleaseSelect') +
|
||||
$t('abp.dataDictionary.extendedAttribute'),
|
||||
afterFetch: (res: any) => {
|
||||
// 确保返回的是数组格式
|
||||
if (Array.isArray(res)) {
|
||||
return res;
|
||||
}
|
||||
// 如果是包装在 items 中的，提取出来
|
||||
if (res && Array.isArray(res.items)) {
|
||||
return res.items;
|
||||
}
|
||||
// 如果是包装在 data 中的，提取出来
|
||||
if (res && Array.isArray(res.data)) {
|
||||
return res.data;
|
||||
}
|
||||
// 如果都不是，返回空数组
|
||||
return [];
|
||||
},
|
||||
},
|
||||
fieldName: 'extendedAttribute',
|
||||
label: $t('abp.dataDictionary.extendedAttribute'),
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseInput'),
|
||||
},
|
||||
fieldName: 'description',
|
||||
label: $t('abp.dataDictionary.description'),
|
||||
},
|
||||
],
|
||||
schema: formSchema.value,
|
||||
wrapperClass: 'grid-cols-1',
|
||||
});
|
||||
|
||||
function formatExtendedAttributeValue(value: any): string {
|
||||
if (!value) return '';
|
||||
if (typeof value === 'string') {
|
||||
try {
|
||||
JSON.parse(value);
|
||||
return value;
|
||||
} catch {
|
||||
return JSON.stringify(value, null, 2);
|
||||
}
|
||||
}
|
||||
return JSON.stringify(value, null, 2);
|
||||
}
|
||||
|
||||
function parseExtendedAttributeValue(value: string): any {
|
||||
if (!value || value.trim() === '') return undefined;
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
onOpenChange(isOpen: boolean) {
|
||||
if (isOpen) {
|
||||
data.value = modalApi.getData<Record<string, any>>();
|
||||
if (data.value.isEdit) {
|
||||
const row = data.value.row;
|
||||
formApi.setValues({
|
||||
...data.value.row,
|
||||
...row,
|
||||
typeDisplayText: data.value.type,
|
||||
extendedAttributeValue: formatExtendedAttributeValue(
|
||||
row.extendedAttributeValue,
|
||||
),
|
||||
});
|
||||
} else {
|
||||
formApi.setValues({ typeDisplayText: data.value.type });
|
||||
@ -138,17 +166,25 @@ const [Modal, modalApi] = useVbenModal({
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) return;
|
||||
const values = await formApi.getValues();
|
||||
|
||||
const submitData: Record<string, any> = {
|
||||
...values,
|
||||
extendedAttributeValue: parseExtendedAttributeValue(
|
||||
values.extendedAttributeValue,
|
||||
),
|
||||
};
|
||||
|
||||
await (data.value.isEdit
|
||||
? postDataDictionaryUpdateDetail({
|
||||
body: {
|
||||
...values,
|
||||
id: data.value.row.id,
|
||||
dataDictionaryId: data.value.id,
|
||||
},
|
||||
})
|
||||
body: {
|
||||
...submitData,
|
||||
id: data.value.row.id,
|
||||
dataDictionaryId: data.value.id,
|
||||
},
|
||||
})
|
||||
: postDataDictionaryCreateDetail({
|
||||
body: { ...values, id: data.value.id },
|
||||
}));
|
||||
body: { ...submitData, id: data.value.id },
|
||||
}));
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} finally {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user