VisualConfiguration.vue
2.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<script lang="ts" setup>
import { Tabs, List } from 'ant-design-vue';
import VisualWidgetSelect from './VisualWidgetSelect.vue';
import TextComponent from '../../components/TextComponent/TextComponent.vue';
import { textComponentConfig } from '../../components/TextComponent/config';
import { instrumentComponentConfig } from '../../components/InstrumentComponent';
import { pictureComponentList } from '../../components/PictureComponent';
import { getComponentDefaultConfig } from '../config/help';
import { WidgetComponentType } from '../config/visualOptions';
const props = defineProps<{
value: string;
}>();
const emit = defineEmits(['update:value', 'change']);
const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 };
const handleCheck = (checked: WidgetComponentType) => {
const defaultConfig = getComponentDefaultConfig(checked);
emit('update:value', checked);
emit('change', defaultConfig);
};
</script>
<template>
<section>
<Tabs>
<Tabs.TabPane key="1" tab="文本组件">
<List :grid="grid" :data-source="textComponentConfig">
<template #renderItem="{ item }">
<List.Item class="!flex !justify-center">
<VisualWidgetSelect
:checked-id="props.value"
:control-id="item.id"
@change="handleCheck"
>
<TextComponent :layout="item" :value="item.value" />
</VisualWidgetSelect>
</List.Item>
</template>
</List>
</Tabs.TabPane>
<Tabs.TabPane key="2" tab="图片组件">
<List :grid="grid" :data-source="pictureComponentList">
<template #renderItem="{ item }">
<List.Item class="!flex !justify-center">
<VisualWidgetSelect
:checked-id="props.value"
:control-id="item.id"
@change="handleCheck"
>
<component :is="item.component" />
</VisualWidgetSelect>
</List.Item>
</template>
</List>
</Tabs.TabPane>
<Tabs.TabPane key="3" tab="仪表组件">
<List :grid="grid" :data-source="instrumentComponentConfig">
<template #renderItem="{ item }">
<List.Item class="!flex !justify-center">
<VisualWidgetSelect
:checked-id="props.value"
:control-id="item.id"
@change="handleCheck"
>
<component
:is="item.component"
:random="true"
:layout="item.layout"
:value="item.value"
/>
</VisualWidgetSelect>
</List.Item>
</template>
</List>
</Tabs.TabPane>
</Tabs>
</section>
</template>