Commit 0864e10479346e95a10ca28b59f1644115a31288
1 parent
9091ac16
fix: data component create map component limit data source length
Showing
2 changed files
with
18 additions
and
7 deletions
| @@ -7,7 +7,7 @@ | @@ -7,7 +7,7 @@ | ||
| 7 | } from '@ant-design/icons-vue'; | 7 | } from '@ant-design/icons-vue'; |
| 8 | import { Tooltip, Button, Alert } from 'ant-design-vue'; | 8 | import { Tooltip, Button, Alert } from 'ant-design-vue'; |
| 9 | import { FormActionType, useForm } from '/@/components/Form'; | 9 | import { FormActionType, useForm } from '/@/components/Form'; |
| 10 | - import { basicSchema, DataSourceField, isMapComponent } from '../config/basicConfiguration'; | 10 | + import { basicSchema, DataSourceField } from '../config/basicConfiguration'; |
| 11 | import BasicForm from '/@/components/Form/src/BasicForm.vue'; | 11 | import BasicForm from '/@/components/Form/src/BasicForm.vue'; |
| 12 | import { ref, shallowReactive, unref, nextTick, watch, computed, onMounted } from 'vue'; | 12 | import { ref, shallowReactive, unref, nextTick, watch, computed, onMounted } from 'vue'; |
| 13 | import VisualOptionsModal from './VisualOptionsModal.vue'; | 13 | import VisualOptionsModal from './VisualOptionsModal.vue'; |
| @@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
| 17 | import { useMessage } from '/@/hooks/web/useMessage'; | 17 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 18 | import { DataBoardLayoutInfo } from '../../types/type'; | 18 | import { DataBoardLayoutInfo } from '../../types/type'; |
| 19 | import { getDataSourceComponent } from './DataSourceForm/help'; | 19 | import { getDataSourceComponent } from './DataSourceForm/help'; |
| 20 | - import { FrontComponent } from '../../const/const'; | 20 | + import { FrontComponent, FrontComponentCategory } from '../../const/const'; |
| 21 | import { isNullAndUnDef } from '/@/utils/is'; | 21 | import { isNullAndUnDef } from '/@/utils/is'; |
| 22 | import { useSortable } from '/@/hooks/web/useSortable'; | 22 | import { useSortable } from '/@/hooks/web/useSortable'; |
| 23 | import { cloneDeep } from 'lodash-es'; | 23 | import { cloneDeep } from 'lodash-es'; |
| @@ -32,6 +32,7 @@ | @@ -32,6 +32,7 @@ | ||
| 32 | record: DataBoardLayoutInfo; | 32 | record: DataBoardLayoutInfo; |
| 33 | frontId?: FrontComponent; | 33 | frontId?: FrontComponent; |
| 34 | defaultConfig?: Partial<ComponentInfo>; | 34 | defaultConfig?: Partial<ComponentInfo>; |
| 35 | + componentCategory?: FrontComponentCategory; | ||
| 35 | }>(); | 36 | }>(); |
| 36 | 37 | ||
| 37 | const { createMessage } = useMessage(); | 38 | const { createMessage } = useMessage(); |
| @@ -167,7 +168,15 @@ | @@ -167,7 +168,15 @@ | ||
| 167 | dataSourceEl[data.id] = null; | 168 | dataSourceEl[data.id] = null; |
| 168 | }; | 169 | }; |
| 169 | 170 | ||
| 171 | + const isMapComponent = computed(() => { | ||
| 172 | + return props.componentCategory === FrontComponentCategory.MAP; | ||
| 173 | + }); | ||
| 174 | + | ||
| 170 | const handleAdd = () => { | 175 | const handleAdd = () => { |
| 176 | + if (unref(isMapComponent) && unref(dataSource).length === 2) { | ||
| 177 | + createMessage.warning('地图组件只能绑定两条数据源'); | ||
| 178 | + return; | ||
| 179 | + } | ||
| 171 | unref(dataSource).push({ | 180 | unref(dataSource).push({ |
| 172 | id: buildUUID(), | 181 | id: buildUUID(), |
| 173 | componentInfo: props.defaultConfig || {}, | 182 | componentInfo: props.defaultConfig || {}, |
| @@ -255,10 +264,6 @@ | @@ -255,10 +264,6 @@ | ||
| 255 | return isControlComponent(props.frontId as FrontComponent); | 264 | return isControlComponent(props.frontId as FrontComponent); |
| 256 | }); | 265 | }); |
| 257 | 266 | ||
| 258 | - const isMapCmp = computed(() => { | ||
| 259 | - return isMapComponent(props.frontId as FrontComponent); | ||
| 260 | - }); | ||
| 261 | - | ||
| 262 | onMounted(() => handleSort()); | 267 | onMounted(() => handleSort()); |
| 263 | 268 | ||
| 264 | defineExpose({ | 269 | defineExpose({ |
| @@ -283,7 +288,7 @@ | @@ -283,7 +288,7 @@ | ||
| 283 | </div> | 288 | </div> |
| 284 | </template> | 289 | </template> |
| 285 | </Alert> | 290 | </Alert> |
| 286 | - <Alert type="info" show-icon v-if="isMapCmp"> | 291 | + <Alert type="info" show-icon v-if="isMapComponent"> |
| 287 | <template #description> | 292 | <template #description> |
| 288 | <div> | 293 | <div> |
| 289 | 地图组件,需绑定两个数据源,且数据源为同一设备。第一数据源为经度,第二数据源为维度,否则地图组件不能正常显示。 | 294 | 地图组件,需绑定两个数据源,且数据源为同一设备。第一数据源为经度,第二数据源为维度,否则地图组件不能正常显示。 |
| @@ -13,6 +13,7 @@ | @@ -13,6 +13,7 @@ | ||
| 13 | import { ComponentInfo } from '/@/api/dataBoard/model'; | 13 | import { ComponentInfo } from '/@/api/dataBoard/model'; |
| 14 | import { useCalcGridLayout } from '../../hook/useCalcGridLayout'; | 14 | import { useCalcGridLayout } from '../../hook/useCalcGridLayout'; |
| 15 | import { FrontComponent } from '../../const/const'; | 15 | import { FrontComponent } from '../../const/const'; |
| 16 | + import { frontComponentMap } from '../../components/help'; | ||
| 16 | 17 | ||
| 17 | interface DataComponentRouteParams extends RouteParams { | 18 | interface DataComponentRouteParams extends RouteParams { |
| 18 | id: string; | 19 | id: string; |
| @@ -40,6 +41,10 @@ | @@ -40,6 +41,10 @@ | ||
| 40 | 41 | ||
| 41 | const componentDefaultConfig = ref<Partial<ComponentInfo>>({}); | 42 | const componentDefaultConfig = ref<Partial<ComponentInfo>>({}); |
| 42 | 43 | ||
| 44 | + const getComponentCategory = computed(() => { | ||
| 45 | + return frontComponentMap.get(unref(frontId))?.ComponentCategory; | ||
| 46 | + }); | ||
| 47 | + | ||
| 43 | const [register, { closeModal, changeOkLoading }] = useModalInner( | 48 | const [register, { closeModal, changeOkLoading }] = useModalInner( |
| 44 | (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => { | 49 | (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => { |
| 45 | componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo); | 50 | componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo); |
| @@ -149,6 +154,7 @@ | @@ -149,6 +154,7 @@ | ||
| 149 | :front-id="frontId" | 154 | :front-id="frontId" |
| 150 | :record="componentRecord" | 155 | :record="componentRecord" |
| 151 | :defaultConfig="componentDefaultConfig" | 156 | :defaultConfig="componentDefaultConfig" |
| 157 | + :componentCategory="getComponentCategory" | ||
| 152 | /> | 158 | /> |
| 153 | </Tabs.TabPane> | 159 | </Tabs.TabPane> |
| 154 | <Tabs.TabPane key="visualConfig" tab="可视化配置"> | 160 | <Tabs.TabPane key="visualConfig" tab="可视化配置"> |