config.vue
4.4 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
<CollapseItem name="列表" :expanded="true">
<SettingItemBox name="基础">
<SettingItem name="表行数">
<n-input-number
v-model:value="optionData.rowNum"
:min="1"
size="small"
placeholder="请输入自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="轮播时间(s)">
<n-input-number
v-model:value="optionData.waitTime"
:min="1"
size="small"
placeholder="请输入轮播时间"
></n-input-number>
</SettingItem>
<SettingItem name="表头高度">
<n-input-number
v-model:value="optionData.headerHeight"
:min="1"
size="small"
placeholder="请输入表头高度"
></n-input-number>
</SettingItem>
<SettingItem name="显示行号">
<n-switch size="small" v-model:value="optionData.index" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="配置" :alone="true">
<SettingItem name="表头数据">
<n-input v-model:value="header" :min="1" size="small" placeholder="表头数据(英文','分割)"></n-input>
</SettingItem>
<SettingItem name="列对齐方式">
<n-input v-model:value="align" :min="1" size="small" placeholder="对齐方式(英文','分割)"></n-input>
</SettingItem>
<SettingItem name="列宽度">
<n-input v-model:value="columnWidth" :min="1" size="small" placeholder="列宽度(英文','分割)"></n-input>
</SettingItem>
<SettingItem name="轮播方式">
<n-select
v-model:value="optionData.carousel"
:options="[
{ label: '单条轮播', value: 'single' },
{ label: '整页轮播', value: 'page' },
]"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="表头字体">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerSpanColor"></n-color-picker>
</SettingItem>
<SettingItem name="大小">
<n-input-number
v-model:value="optionData.headerSpanFontSize"
:min="1"
size="small"
placeholder="请输入"
></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="内容字体">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.ceilSpanColor"></n-color-picker>
</SettingItem>
<SettingItem name="大小">
<n-input-number
v-model:value="optionData.ceilSpanFontSize"
:min="1"
size="small"
placeholder="请输入"
></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="样式">
<SettingItem name="表头背景色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerBGC"></n-color-picker>
</SettingItem>
<SettingItem name="奇数行背景色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.oddRowBGC"></n-color-picker>
</SettingItem>
<SettingItem name="偶数行背景色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.evenRowBGC"></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType, ref, watch } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const header = ref()
const align = ref()
const columnWidth = ref()
watch(
() => props.optionData,
newData => {
header.value = props.optionData.header.toString()
align.value = props.optionData.align.toString()
columnWidth.value = props.optionData.columnWidth.toString()
},
{
deep: false,
immediate: true
}
)
watch([header, align, columnWidth], ([headerNew, alignNew, columnWidthNew], [headerOld, alignOld, columnWidthOld]) => {
if (headerNew !== headerOld) {
props.optionData.header = headerNew.split(',')
}
if (alignNew !== alignOld) {
props.optionData.align = alignNew.split(',')
}
if (columnWidthNew !== columnWidthOld) {
// @ts-ignore
props.optionData.columnWidth = columnWidthNew.split(',')
}
})
</script>