Commit b32ed69207d88a182f3c434c6125b3a8c1c46f49
1 parent
07d502bc
perf: data board component data source default config
Showing
3 changed files
with
27 additions
and
9 deletions
| @@ -11,9 +11,8 @@ | @@ -11,9 +11,8 @@ | ||
| 11 | import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model'; | 11 | import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model'; |
| 12 | import { useMessage } from '/@/hooks/web/useMessage'; | 12 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 13 | import { DataBoardLayoutInfo } from '../../types/type'; | 13 | import { DataBoardLayoutInfo } from '../../types/type'; |
| 14 | - import { FrontComponent, getComponentDefaultConfig } from '../config/help'; | 14 | + import { FrontComponent } from '../config/help'; |
| 15 | import { computed } from '@vue/reactivity'; | 15 | import { computed } from '@vue/reactivity'; |
| 16 | - import { WidgetComponentType } from '../config/visualOptions'; | ||
| 17 | 16 | ||
| 18 | type DataSourceFormEL = { [key: string]: Nullable<FormActionType> }; | 17 | type DataSourceFormEL = { [key: string]: Nullable<FormActionType> }; |
| 19 | 18 | ||
| @@ -22,6 +21,7 @@ | @@ -22,6 +21,7 @@ | ||
| 22 | const props = defineProps<{ | 21 | const props = defineProps<{ |
| 23 | record: DataBoardLayoutInfo; | 22 | record: DataBoardLayoutInfo; |
| 24 | frontId?: string; | 23 | frontId?: string; |
| 24 | + defaultConfig?: Partial<ComponentInfo>; | ||
| 25 | }>(); | 25 | }>(); |
| 26 | 26 | ||
| 27 | const { createMessage } = useMessage(); | 27 | const { createMessage } = useMessage(); |
| @@ -30,7 +30,9 @@ | @@ -30,7 +30,9 @@ | ||
| 30 | // ...props.record, | 30 | // ...props.record, |
| 31 | // } as unknown as DataBoardLayoutInfo); | 31 | // } as unknown as DataBoardLayoutInfo); |
| 32 | 32 | ||
| 33 | - const dataSource = ref<DataSourceEl[]>([{ id: buildUUID() } as unknown as DataSourceEl]); | 33 | + const dataSource = ref<DataSourceEl[]>([ |
| 34 | + { id: buildUUID(), componentInfo: props.defaultConfig || {} } as unknown as DataSourceEl, | ||
| 35 | + ]); | ||
| 34 | 36 | ||
| 35 | const [basicRegister, basicMethod] = useForm({ | 37 | const [basicRegister, basicMethod] = useForm({ |
| 36 | schemas: basicSchema, | 38 | schemas: basicSchema, |
| @@ -66,7 +68,7 @@ | @@ -66,7 +68,7 @@ | ||
| 66 | const componentInfo = unref(dataSource)[index].componentInfo || {}; | 68 | const componentInfo = unref(dataSource)[index].componentInfo || {}; |
| 67 | _dataSource.push({ | 69 | _dataSource.push({ |
| 68 | ...value, | 70 | ...value, |
| 69 | - componentInfo: { ...componentInfo }, | 71 | + componentInfo: { ...(props.defaultConfig || {}), ...componentInfo }, |
| 70 | }); | 72 | }); |
| 71 | } | 73 | } |
| 72 | return _dataSource; | 74 | return _dataSource; |
| @@ -98,9 +100,12 @@ | @@ -98,9 +100,12 @@ | ||
| 98 | return; | 100 | return; |
| 99 | } | 101 | } |
| 100 | 102 | ||
| 101 | - const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType); | 103 | + // const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType); |
| 102 | 104 | ||
| 103 | - const componentInfo: ComponentInfo = { ...defaultConfig, ...(item.componentInfo || {}) }; | 105 | + const componentInfo: ComponentInfo = { |
| 106 | + ...(props.defaultConfig || {}), | ||
| 107 | + ...(item.componentInfo || {}), | ||
| 108 | + }; | ||
| 104 | 109 | ||
| 105 | openModal(true, { | 110 | openModal(true, { |
| 106 | recordId: item.id, | 111 | recordId: item.id, |
| @@ -117,6 +122,7 @@ | @@ -117,6 +122,7 @@ | ||
| 117 | const handleAdd = () => { | 122 | const handleAdd = () => { |
| 118 | unref(dataSource).push({ | 123 | unref(dataSource).push({ |
| 119 | id: buildUUID(), | 124 | id: buildUUID(), |
| 125 | + componentInfo: props.defaultConfig || {}, | ||
| 120 | } as unknown as DataSourceEl); | 126 | } as unknown as DataSourceEl); |
| 121 | }; | 127 | }; |
| 122 | 128 |
| @@ -10,6 +10,7 @@ | @@ -10,6 +10,7 @@ | ||
| 10 | import { DataBoardLayoutInfo } from '../../types/type'; | 10 | import { DataBoardLayoutInfo } from '../../types/type'; |
| 11 | import { useMessage } from '/@/hooks/web/useMessage'; | 11 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 12 | import { decode } from '../../config/config'; | 12 | import { decode } from '../../config/config'; |
| 13 | + import { ComponentInfo } from '/@/api/dataBoard/model'; | ||
| 13 | 14 | ||
| 14 | interface DataComponentRouteParams extends RouteParams { | 15 | interface DataComponentRouteParams extends RouteParams { |
| 15 | id: string; | 16 | id: string; |
| @@ -31,6 +32,8 @@ | @@ -31,6 +32,8 @@ | ||
| 31 | 32 | ||
| 32 | const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo); | 33 | const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo); |
| 33 | 34 | ||
| 35 | + const componentDefaultConfig = ref<Partial<ComponentInfo>>({}); | ||
| 36 | + | ||
| 34 | const [register, { closeModal, changeOkLoading }] = useModalInner( | 37 | const [register, { closeModal, changeOkLoading }] = useModalInner( |
| 35 | (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => { | 38 | (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => { |
| 36 | componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo); | 39 | componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo); |
| @@ -94,6 +97,10 @@ | @@ -94,6 +97,10 @@ | ||
| 94 | changeOkLoading(false); | 97 | changeOkLoading(false); |
| 95 | } | 98 | } |
| 96 | }; | 99 | }; |
| 100 | + | ||
| 101 | + const handleComponentCheckedChange = (record: ComponentInfo) => { | ||
| 102 | + componentDefaultConfig.value = record; | ||
| 103 | + }; | ||
| 97 | </script> | 104 | </script> |
| 98 | 105 | ||
| 99 | <template> | 106 | <template> |
| @@ -112,10 +119,11 @@ | @@ -112,10 +119,11 @@ | ||
| 112 | ref="basicConfigurationEl" | 119 | ref="basicConfigurationEl" |
| 113 | :front-id="frontId" | 120 | :front-id="frontId" |
| 114 | :record="componentRecord" | 121 | :record="componentRecord" |
| 122 | + :defaultConfig="componentDefaultConfig" | ||
| 115 | /> | 123 | /> |
| 116 | </Tabs.TabPane> | 124 | </Tabs.TabPane> |
| 117 | <Tabs.TabPane key="2" tab="可视化配置"> | 125 | <Tabs.TabPane key="2" tab="可视化配置"> |
| 118 | - <VisualConfiguration v-model:value="frontId" /> | 126 | + <VisualConfiguration v-model:value="frontId" @change="handleComponentCheckedChange" /> |
| 119 | </Tabs.TabPane> | 127 | </Tabs.TabPane> |
| 120 | </Tabs> | 128 | </Tabs> |
| 121 | </section> | 129 | </section> |
| @@ -5,15 +5,19 @@ | @@ -5,15 +5,19 @@ | ||
| 5 | import { textComponentConfig } from '../../components/TextComponent/config'; | 5 | import { textComponentConfig } from '../../components/TextComponent/config'; |
| 6 | import { instrumentComponentConfig } from '../../components/InstrumentComponent'; | 6 | import { instrumentComponentConfig } from '../../components/InstrumentComponent'; |
| 7 | import { pictureComponentList } from '../../components/PictureComponent'; | 7 | import { pictureComponentList } from '../../components/PictureComponent'; |
| 8 | + import { getComponentDefaultConfig } from '../config/help'; | ||
| 9 | + import { WidgetComponentType } from '../config/visualOptions'; | ||
| 8 | const props = defineProps<{ | 10 | const props = defineProps<{ |
| 9 | value: string; | 11 | value: string; |
| 10 | }>(); | 12 | }>(); |
| 11 | - const emit = defineEmits(['update:value']); | 13 | + const emit = defineEmits(['update:value', 'change']); |
| 12 | 14 | ||
| 13 | const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }; | 15 | const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }; |
| 14 | 16 | ||
| 15 | - const handleCheck = (checked: string) => { | 17 | + const handleCheck = (checked: WidgetComponentType) => { |
| 18 | + const defaultConfig = getComponentDefaultConfig(checked); | ||
| 16 | emit('update:value', checked); | 19 | emit('update:value', checked); |
| 20 | + emit('change', defaultConfig); | ||
| 17 | }; | 21 | }; |
| 18 | </script> | 22 | </script> |
| 19 | 23 |