fix(图表): 地图图表切换后地名映射列表未更新

This commit is contained in:
wisonic 2024-07-22 15:40:52 +08:00
parent 7867d0541d
commit 3996eebb89

View File

@ -2,6 +2,7 @@
import { computed, nextTick, onMounted, PropType, reactive, ref, watch } from 'vue' import { computed, nextTick, onMounted, PropType, reactive, ref, watch } from 'vue'
import { getGeoJsonFile, parseJson } from '../../../js/util' import { getGeoJsonFile, parseJson } from '../../../js/util'
import { forEach, debounce } from 'lodash-es' import { forEach, debounce } from 'lodash-es'
import { toRefs } from 'vue'
const props = defineProps({ const props = defineProps({
chart: { chart: {
@ -15,9 +16,9 @@ const props = defineProps({
}) })
const emit = defineEmits(['onMapMappingChange']) const emit = defineEmits(['onMapMappingChange'])
const { chart, themes } = props const { chart, themes } = toRefs(props)
watch( watch(
[() => props.chart.senior.areaMapping, () => chart.customAttr.map.id], [() => chart.value?.senior.areaMapping, () => chart.value?.customAttr.map.id],
() => { () => {
init() init()
}, },
@ -31,7 +32,7 @@ const search = ref('')
const areaNameInput = ref(null) const areaNameInput = ref(null)
const areaData = reactive([]) const areaData = reactive([])
const dynamicAreaId = computed(() => { const dynamicAreaId = computed(() => {
return chart.customAttr.map.id return chart.value?.customAttr.map.id
}) })
const state = reactive({ const state = reactive({
mappingForm: {}, mappingForm: {},
@ -43,8 +44,8 @@ const pageInfo = reactive({
currentPage: 1 currentPage: 1
}) })
const init = async () => { const init = async () => {
const chartObj = JSON.parse(JSON.stringify(chart)) const chartObj = JSON.parse(JSON.stringify(chart.value))
if (chartObj.senior) { if (chartObj?.senior) {
let senior = parseJson(chartObj.senior) let senior = parseJson(chartObj.senior)
state.mappingForm = senior.areaMapping state.mappingForm = senior.areaMapping
let curAreaMapping = state.mappingForm?.[dynamicAreaId.value] let curAreaMapping = state.mappingForm?.[dynamicAreaId.value]
@ -133,7 +134,7 @@ onMounted(() => {
:data="areaData" :data="areaData"
> >
<el-table-column label="图形" prop="originName" width="80" show-overflow-tooltip /> <el-table-column label="图形" prop="originName" width="80" show-overflow-tooltip />
<el-table-column width="144"> <el-table-column width="140">
<template #header> <template #header>
<span>属性</span> <span>属性</span>
<el-input <el-input
@ -153,7 +154,7 @@ onMounted(() => {
:class="'area-edit-btn-' + themes" :class="'area-edit-btn-' + themes"
@click="triggerEdit(scope)" @click="triggerEdit(scope)"
> >
<span>{{ scope.row.mappedName }}</span> <span :title="scope.row.mappedName">{{ scope.row.mappedName }}</span>
<el-icon><Edit /></el-icon> <el-icon><Edit /></el-icon>
</el-button> </el-button>
</template> </template>
@ -192,7 +193,7 @@ onMounted(() => {
margin-left: 8px; margin-left: 8px;
} }
.area-edit-btn { .area-edit-btn {
width: 120px; width: 116px;
padding: 0 4px; padding: 0 4px;
:deep(> span) { :deep(> span) {
display: flex; display: flex;