mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-06 03:57:56 +08:00
fix(editor): 新增数据源时,设置初始值
This commit is contained in:
parent
7a617d4a17
commit
75b0d9cdf3
@ -93,12 +93,6 @@ export default {
|
|||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 组件的属性配置表单的dsl */
|
|
||||||
datasourceConfigs: {
|
|
||||||
type: Object as PropType<Record<string, FormConfig>>,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 添加数据源时的默认值 */
|
/** 添加数据源时的默认值 */
|
||||||
datasourceValues: {
|
datasourceValues: {
|
||||||
type: Object as PropType<Record<string, Partial<DataSourceSchema>>>,
|
type: Object as PropType<Record<string, Partial<DataSourceSchema>>>,
|
||||||
@ -106,7 +100,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
/** 数据源的属性配置表单的dsl */
|
/** 数据源的属性配置表单的dsl */
|
||||||
dataScourceConfigs: {
|
datasourceConfigs: {
|
||||||
type: Object as PropType<Record<string, FormConfig>>,
|
type: Object as PropType<Record<string, FormConfig>>,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
|
@ -8,7 +8,6 @@
|
|||||||
:config="dataSourceConfig"
|
:config="dataSourceConfig"
|
||||||
:values="initValues"
|
:values="initValues"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
@change="changeHandler"
|
|
||||||
@submit="submitHandler"
|
@submit="submitHandler"
|
||||||
@error="errorHandler"
|
@error="errorHandler"
|
||||||
></MFormDrawer>
|
></MFormDrawer>
|
||||||
@ -16,10 +15,10 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, inject, ref, watchEffect } from 'vue';
|
import { computed, inject, ref, watchEffect } from 'vue';
|
||||||
import { cloneDeep, mergeWith } from 'lodash-es';
|
|
||||||
|
|
||||||
import { tMagicMessage } from '@tmagic/design';
|
import { tMagicMessage } from '@tmagic/design';
|
||||||
import { MFormDrawer } from '@tmagic/form';
|
import { FormConfig, MFormDrawer } from '@tmagic/form';
|
||||||
|
import { DataSourceSchema } from '@tmagic/schema';
|
||||||
|
|
||||||
import type { Services } from '@editor/type';
|
import type { Services } from '@editor/type';
|
||||||
|
|
||||||
@ -33,42 +32,22 @@ const props = defineProps<{
|
|||||||
disabled: boolean;
|
disabled: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const type = ref('base');
|
|
||||||
|
|
||||||
const emit = defineEmits(['submit']);
|
const emit = defineEmits(['submit']);
|
||||||
|
|
||||||
const services = inject<Services>('services');
|
const services = inject<Services>('services');
|
||||||
|
|
||||||
const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
|
const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
|
||||||
|
|
||||||
const dataSourceConfig = computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
|
|
||||||
|
|
||||||
const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
|
const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
|
||||||
|
|
||||||
const initValues = ref({});
|
const initValues = ref<Partial<DataSourceSchema>>({});
|
||||||
|
const dataSourceConfig = ref<FormConfig>([]);
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
initValues.value = props.values;
|
initValues.value = props.values;
|
||||||
type.value = props.values.type || 'base';
|
dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
|
||||||
});
|
});
|
||||||
|
|
||||||
const changeHandler = (value: Record<string, any>) => {
|
|
||||||
if (value.type === type.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
type.value = value.type || 'base';
|
|
||||||
|
|
||||||
initValues.value = mergeWith(
|
|
||||||
cloneDeep(value),
|
|
||||||
services?.dataSourceService.getFormValue(type.value) || {},
|
|
||||||
(objValue, srcValue) => {
|
|
||||||
if (Array.isArray(srcValue)) {
|
|
||||||
return srcValue;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const submitHandler = (values: any) => {
|
const submitHandler = (values: any) => {
|
||||||
emit('submit', values);
|
emit('submit', values);
|
||||||
};
|
};
|
||||||
|
@ -35,8 +35,9 @@
|
|||||||
</TMagicScrollbar>
|
</TMagicScrollbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="MEditorDataSourceListPanel">
|
<script setup lang="ts">
|
||||||
import { computed, inject, ref } from 'vue';
|
import { computed, inject, ref } from 'vue';
|
||||||
|
import { mergeWith } from 'lodash-es';
|
||||||
|
|
||||||
import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
|
import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
|
||||||
import type { DataSourceSchema } from '@tmagic/schema';
|
import type { DataSourceSchema } from '@tmagic/schema';
|
||||||
@ -71,12 +72,18 @@ const datasourceTypeList = computed(() =>
|
|||||||
const addHandler = (type: string) => {
|
const addHandler = (type: string) => {
|
||||||
if (!editDialog.value) return;
|
if (!editDialog.value) return;
|
||||||
|
|
||||||
dataSourceValues.value = {
|
|
||||||
type,
|
|
||||||
};
|
|
||||||
|
|
||||||
const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
|
const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
|
||||||
|
|
||||||
|
dataSourceValues.value = mergeWith(
|
||||||
|
{ type, title: datasourceType?.text },
|
||||||
|
dataSourceService?.getFormValue(type) || {},
|
||||||
|
(objValue, srcValue) => {
|
||||||
|
if (Array.isArray(srcValue)) {
|
||||||
|
return srcValue;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
dialogTitle.value = `新增${datasourceType?.text || ''}`;
|
dialogTitle.value = `新增${datasourceType?.text || ''}`;
|
||||||
|
|
||||||
editDialog.value.show();
|
editDialog.value.show();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user