From fc619890fe0434443b7d9f94a94e91a9a5c3ba40 Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Mon, 18 Sep 2023 15:51:37 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=98=E5=88=B6=E5=9B=BE=E5=BD=A2=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E7=BB=84=E4=BB=B6=E5=8E=BB=E9=99=A4watch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/draw-app/DrawProperties.vue | 6 -- .../properties/AxleCountingProperty.vue | 22 ++--- .../draw-app/properties/LinkProperty.vue | 17 ++-- .../properties/LogicSectionProperty.vue | 15 ++-- .../draw-app/properties/PathLineProperty.vue | 17 ++-- .../draw-app/properties/PlatformProperty.vue | 26 ++---- .../draw-app/properties/RectProperty.vue | 17 ++-- .../draw-app/properties/RunLineProperty.vue | 17 ++-- .../draw-app/properties/SectionProperty.vue | 16 ++-- .../draw-app/properties/SeparatorProperty.vue | 17 ++-- .../draw-app/properties/SignalProperty.vue | 22 ++--- .../properties/StationLineProperty.vue | 20 ++--- .../draw-app/properties/StationProperty.vue | 28 ++----- .../draw-app/properties/TrainProperty.vue | 84 ------------------- .../properties/TrainWindowProperty.vue | 17 ++-- .../draw-app/properties/TurnoutProperty.vue | 24 +++--- src/stores/draw-store.ts | 21 ++++- 17 files changed, 119 insertions(+), 267 deletions(-) delete mode 100644 src/components/draw-app/properties/TrainProperty.vue diff --git a/src/components/draw-app/DrawProperties.vue b/src/components/draw-app/DrawProperties.vue index bcaaa7f..b8b0662 100644 --- a/src/components/draw-app/DrawProperties.vue +++ b/src/components/draw-app/DrawProperties.vue @@ -19,9 +19,6 @@ - @@ -54,9 +51,6 @@ - diff --git a/src/components/draw-app/properties/AxleCountingProperty.vue b/src/components/draw-app/properties/AxleCountingProperty.vue index c503ea4..991ca2e 100644 --- a/src/components/draw-app/properties/AxleCountingProperty.vue +++ b/src/components/draw-app/properties/AxleCountingProperty.vue @@ -77,7 +77,7 @@ import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting'; import { Section } from 'src/graphics/section/Section'; import { Turnout } from 'src/graphics/turnout/Turnout'; import { useDrawStore } from 'src/stores/draw-store'; -import { computed, onMounted, reactive, watch } from 'vue'; +import { computed, onMounted, onUnmounted, reactive } from 'vue'; const drawStore = useDrawStore(); const axleCountingModel = reactive(new AxleCountingData()); @@ -90,25 +90,11 @@ const CoordinateSystemOptions = [ { label: '换线', value: 'TRANSFER' }, ]; -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == AxleCounting.Type) { - axleCountingModel.copyFrom(val.saveData() as AxleCountingData); - if (axleCountingModel.kilometerSystem) { - kilometerSystem.coordinateSystem = - axleCountingModel.kilometerSystem.coordinateSystem; - kilometerSystem.kilometer = axleCountingModel.kilometerSystem.kilometer; - } - } - } -); - onMounted(() => { const axleCounting = drawStore.selectedGraphic as AxleCounting; if (axleCounting) { axleCountingModel.copyFrom(axleCounting.saveData()); + drawStore.bindFormData(axleCountingModel); if (axleCountingModel.kilometerSystem) { kilometerSystem.coordinateSystem = axleCountingModel.kilometerSystem.coordinateSystem; @@ -161,4 +147,8 @@ const turnoutRelations = computed(() => { ); return Array.from(new Set(ref)); }); + +onUnmounted(() => { + drawStore.unbindFormData(axleCountingModel); +}); diff --git a/src/components/draw-app/properties/LinkProperty.vue b/src/components/draw-app/properties/LinkProperty.vue index e6d9b89..1245509 100644 --- a/src/components/draw-app/properties/LinkProperty.vue +++ b/src/components/draw-app/properties/LinkProperty.vue @@ -62,27 +62,18 @@ import { LinkData } from 'src/drawApp/graphics/LinkInteraction'; import { Link } from 'src/graphics/link/Link'; import { useDrawStore } from 'src/stores/draw-store'; -import { onMounted, reactive, watch } from 'vue'; +import { onMounted, onUnmounted, reactive } from 'vue'; const drawStore = useDrawStore(); const linkModel = reactive(new LinkData()); -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == Link.Type) { - // console.log('link变更'); - linkModel.copyFrom(val.saveData() as LinkData); - } - } -); onMounted(() => { // console.log('link 属性表单 mounted'); const link = drawStore.selectedGraphic as Link; if (link) { linkModel.copyFrom(link.saveData()); + drawStore.bindFormData(linkModel); } }); @@ -93,4 +84,8 @@ function onUpdate() { drawStore.getDrawApp().updateGraphicAndRecord(link, linkModel); } } + +onUnmounted(() => { + drawStore.unbindFormData(linkModel); +}); diff --git a/src/components/draw-app/properties/LogicSectionProperty.vue b/src/components/draw-app/properties/LogicSectionProperty.vue index 162fd2f..a3d9f15 100644 --- a/src/components/draw-app/properties/LogicSectionProperty.vue +++ b/src/components/draw-app/properties/LogicSectionProperty.vue @@ -14,23 +14,28 @@ import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction'; import { LogicSection } from 'src/graphics/logicSection/LogicSection'; import { useDrawStore } from 'src/stores/draw-store'; -import { shallowRef, watchEffect } from 'vue'; +import { onMounted, onUnmounted, reactive } from 'vue'; const drawStore = useDrawStore(); -const sectionModel = shallowRef(new LogicSectionData()); +const sectionModel = reactive(new LogicSectionData()); -watchEffect(() => { +onMounted(() => { const section = drawStore.selectedGraphic; if (section && section instanceof LogicSection) { - sectionModel.value = section.saveData(); + sectionModel.copyFrom(section.saveData()); + drawStore.bindFormData(sectionModel); } }); const onUpdate = () => { const section = drawStore.selectedGraphic as LogicSection; if (section) { - drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel.value); + drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel); } }; + +onUnmounted(() => { + drawStore.unbindFormData(sectionModel); +}); diff --git a/src/components/draw-app/properties/PathLineProperty.vue b/src/components/draw-app/properties/PathLineProperty.vue index 11a226b..8bddf7b 100644 --- a/src/components/draw-app/properties/PathLineProperty.vue +++ b/src/components/draw-app/properties/PathLineProperty.vue @@ -55,22 +55,12 @@ import { PathLineData } from 'src/drawApp/graphics/PathLineInteraction'; import { PathLine } from 'src/graphics/pathLine/PathLine'; import { useDrawStore } from 'src/stores/draw-store'; -import { reactive, onMounted, watch } from 'vue'; +import { reactive, onMounted, onUnmounted } from 'vue'; import { getLineList } from 'src/api/LineInfoApi'; const drawStore = useDrawStore(); const pathLineModel = reactive(new PathLineData()); const lineList: { label: string; value: string }[] = reactive([]); -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == PathLine.Type) { - pathLineModel.copyFrom(val.saveData() as PathLineData); - } - } -); - onMounted(() => { getLineList() .then((res) => { @@ -84,6 +74,7 @@ onMounted(() => { const pathLine = drawStore.selectedGraphic as PathLine; if (pathLine) { pathLineModel.copyFrom(pathLine.saveData()); + drawStore.bindFormData(pathLineModel); } }); @@ -93,4 +84,8 @@ function onUpdate() { drawStore.getDrawApp().updateGraphicAndRecord(pathLine, pathLineModel); } } + +onUnmounted(() => { + drawStore.unbindFormData(pathLineModel); +}); diff --git a/src/components/draw-app/properties/PlatformProperty.vue b/src/components/draw-app/properties/PlatformProperty.vue index c08d498..4f42e98 100644 --- a/src/components/draw-app/properties/PlatformProperty.vue +++ b/src/components/draw-app/properties/PlatformProperty.vue @@ -51,7 +51,7 @@ import { PlatformData } from 'src/drawApp/graphics/PlatformInteraction'; import { Platform } from 'src/graphics/platform/Platform'; import { Station } from 'src/graphics/station/Station'; import { useDrawStore } from 'src/stores/draw-store'; -import { onMounted, reactive, ref, watch } from 'vue'; +import { onMounted, onUnmounted, reactive, ref } from 'vue'; const drawStore = useDrawStore(); const platformModel = reactive(new PlatformData()); @@ -83,29 +83,11 @@ enum showUpData { false = '下行', } -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == Platform.Type) { - platformModel.copyFrom(val.saveData() as PlatformData); - hasDoor.value = (showSelectData as never)[platformModel.hasdoor + '']; - direction.value = (showSelectData as never)[platformModel.direction]; - upAndDown.value = (showUpData as never)[platformModel.up + '']; - if (platformModel.refStation) { - const refStation = val.queryStore.queryById( - platformModel.refStation - ) as Station; - stationName.value = refStation.datas.name; - } - } - } -); - onMounted(() => { const platform = drawStore.selectedGraphic as Platform; if (platform) { platformModel.copyFrom(platform.saveData()); + drawStore.bindFormData(platformModel); hasDoor.value = (showSelectData as never)[platformModel.hasdoor + '']; direction.value = (showSelectData as never)[platformModel.direction]; upAndDown.value = (showUpData as never)[platformModel.up + '']; @@ -127,4 +109,8 @@ function onUpdate() { drawStore.getDrawApp().updateGraphicAndRecord(platform, platformModel); } } + +onUnmounted(() => { + drawStore.unbindFormData(platformModel); +}); diff --git a/src/components/draw-app/properties/RectProperty.vue b/src/components/draw-app/properties/RectProperty.vue index d1ec7a3..cd91e03 100644 --- a/src/components/draw-app/properties/RectProperty.vue +++ b/src/components/draw-app/properties/RectProperty.vue @@ -69,25 +69,16 @@ import { RectData } from 'src/drawApp/graphics/RectInteraction'; import { Rect } from 'src/graphics/rect/Rect'; import { useDrawStore } from 'src/stores/draw-store'; -import { onMounted, reactive, watch } from 'vue'; +import { onMounted, onUnmounted, reactive } from 'vue'; const drawStore = useDrawStore(); const rectModel = reactive(new RectData()); -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == Rect.Type) { - rectModel.copyFrom(val.saveData() as RectData); - } - } -); - onMounted(() => { const Rect = drawStore.selectedGraphic as Rect; if (Rect) { rectModel.copyFrom(Rect.saveData()); + drawStore.bindFormData(rectModel); } }); @@ -97,4 +88,8 @@ function onUpdate() { drawStore.getDrawApp().updateGraphicAndRecord(Rect, rectModel); } } + +onUnmounted(() => { + drawStore.unbindFormData(rectModel); +}); diff --git a/src/components/draw-app/properties/RunLineProperty.vue b/src/components/draw-app/properties/RunLineProperty.vue index 3635fe5..66c002a 100644 --- a/src/components/draw-app/properties/RunLineProperty.vue +++ b/src/components/draw-app/properties/RunLineProperty.vue @@ -121,7 +121,7 @@ import { RunLineData } from 'src/drawApp/graphics/RunLineInteraction'; import { RunLine } from 'src/graphics/runLine/RunLine'; import { useDrawStore } from 'src/stores/draw-store'; -import { onMounted, reactive, watch, ref } from 'vue'; +import { onMounted, reactive, onUnmounted } from 'vue'; import { Point } from 'pixi.js'; import { IStationLineData, @@ -134,16 +134,6 @@ const runLineModel = reactive(new RunLineData()); const stationLines: IStationLineData[] = reactive([]); const lineList: { label: string; value: string }[] = reactive([]); -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == RunLine.Type) { - runLineModel.copyFrom(val.saveData() as RunLineData); - } - } -); - onMounted(() => { getLineList() .then((res) => { @@ -161,6 +151,7 @@ onMounted(() => { stations.forEach((item) => stationLines.push(item.datas)); if (runLine) { runLineModel.copyFrom(runLine.saveData()); + drawStore.bindFormData(runLineModel); } }); @@ -187,4 +178,8 @@ function generateContainSta() { runLineModel.copyFrom(runLine.saveData()); } } + +onUnmounted(() => { + drawStore.unbindFormData(runLineModel); +}); diff --git a/src/components/draw-app/properties/SectionProperty.vue b/src/components/draw-app/properties/SectionProperty.vue index 9bd42b4..6610fbc 100644 --- a/src/components/draw-app/properties/SectionProperty.vue +++ b/src/components/draw-app/properties/SectionProperty.vue @@ -78,11 +78,11 @@ import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting'; import { Section, SectionType } from 'src/graphics/section/Section'; import { Turnout } from 'src/graphics/turnout/Turnout'; import { useDrawStore } from 'src/stores/draw-store'; -import { computed, shallowRef, watchEffect } from 'vue'; +import { computed, onMounted, onUnmounted, reactive } from 'vue'; const drawStore = useDrawStore(); -const sectionModel = shallowRef(new SectionData()); +const sectionModel = reactive(new SectionData()); const sectionRelations = computed(() => { const section = drawStore.selectedGraphic as Section; @@ -137,17 +137,23 @@ const axleCountingRelations = computed(() => { (relation) => relation.getOtherGraphic(section).datas.code ); }); -watchEffect(() => { + +onMounted(() => { const section = drawStore.selectedGraphic; if (section && section instanceof Section) { - sectionModel.value = section.saveData(); + sectionModel.copyFrom(section.saveData()); + drawStore.bindFormData(sectionModel); } }); const onUpdate = () => { const section = drawStore.selectedGraphic as Section; if (section) { - drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel.value); + drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel); } }; + +onUnmounted(() => { + drawStore.unbindFormData(sectionModel); +}); diff --git a/src/components/draw-app/properties/SeparatorProperty.vue b/src/components/draw-app/properties/SeparatorProperty.vue index b1f1dd1..a0dfe1b 100644 --- a/src/components/draw-app/properties/SeparatorProperty.vue +++ b/src/components/draw-app/properties/SeparatorProperty.vue @@ -19,7 +19,7 @@ import { SeparatorData } from 'src/drawApp/graphics/SeparatorInteraction'; import { Separator, separatorTypeEnum } from 'src/graphics/separator/Separator'; import { useDrawStore } from 'src/stores/draw-store'; -import { onMounted, reactive, watch } from 'vue'; +import { onMounted, onUnmounted, reactive } from 'vue'; const drawStore = useDrawStore(); const separatorModel = reactive(new SeparatorData()); @@ -31,20 +31,11 @@ const typeOptions = [ { label: '右断路分隔符', value: separatorTypeEnum.endB }, ]; -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == Separator.Type) { - separatorModel.copyFrom(val.saveData() as SeparatorData); - } - } -); - onMounted(() => { const Separator = drawStore.selectedGraphic as Separator; if (Separator) { separatorModel.copyFrom(Separator.saveData()); + drawStore.bindFormData(separatorModel); } }); @@ -54,4 +45,8 @@ function onUpdate() { drawStore.getDrawApp().updateGraphicAndRecord(Separator, separatorModel); } } + +onUnmounted(() => { + drawStore.unbindFormData(separatorModel); +}); diff --git a/src/components/draw-app/properties/SignalProperty.vue b/src/components/draw-app/properties/SignalProperty.vue index d3bf4e4..df72dd3 100644 --- a/src/components/draw-app/properties/SignalProperty.vue +++ b/src/components/draw-app/properties/SignalProperty.vue @@ -32,7 +32,7 @@ import { SignalData } from 'src/drawApp/graphics/SignalInteraction'; import { Signal } from 'src/graphics/signal/Signal'; import { useDrawStore } from 'src/stores/draw-store'; -import { onMounted, reactive, watch } from 'vue'; +import { onMounted, onUnmounted, reactive } from 'vue'; const drawStore = useDrawStore(); const signalModel = reactive(new SignalData()); @@ -45,25 +45,11 @@ const CoordinateSystemOptions = [ { label: '换线', value: 'TRANSFER' }, ]; -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == Signal.Type) { - signalModel.copyFrom(val.saveData() as SignalData); - if (signalModel.kilometerSystem) { - kilometerSystem.coordinateSystem = - signalModel.kilometerSystem.coordinateSystem; - kilometerSystem.kilometer = signalModel.kilometerSystem.kilometer; - } - } - } -); - onMounted(() => { const signal = drawStore.selectedGraphic as Signal; if (signal) { signalModel.copyFrom(signal.saveData()); + drawStore.bindFormData(signalModel); if (signalModel.kilometerSystem) { kilometerSystem.coordinateSystem = signalModel.kilometerSystem.coordinateSystem; @@ -82,4 +68,8 @@ function onUpdate() { drawStore.getDrawApp().updateGraphicAndRecord(signal, signalModel); } } + +onUnmounted(() => { + drawStore.unbindFormData(signalModel); +}); diff --git a/src/components/draw-app/properties/StationLineProperty.vue b/src/components/draw-app/properties/StationLineProperty.vue index 004d3dc..39a4d78 100644 --- a/src/components/draw-app/properties/StationLineProperty.vue +++ b/src/components/draw-app/properties/StationLineProperty.vue @@ -35,7 +35,7 @@ import { StationLineData } from 'src/drawApp/graphics/StationLineInteraction'; import { StationLine } from 'src/graphics/stationLine/StationLine'; import { useDrawStore } from 'src/stores/draw-store'; -import { onMounted, reactive, ref, watch } from 'vue'; +import { onMounted, onUnmounted, reactive, ref } from 'vue'; const drawStore = useDrawStore(); const stationLineModel = reactive(new StationLineData()); @@ -50,23 +50,11 @@ enum showSelectData { false = '否', } -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == StationLine.Type) { - stationLineModel.copyFrom(val.saveData() as StationLineData); - hasTransfer.value = (showSelectData as never)[ - stationLineModel.hasTransfer + '' - ]; - } - } -); - onMounted(() => { const stationLine = drawStore.selectedGraphic as StationLine; if (stationLine) { stationLineModel.copyFrom(stationLine.saveData()); + drawStore.bindFormData(stationLineModel); hasTransfer.value = (showSelectData as never)[ stationLineModel.hasTransfer + '' ]; @@ -84,4 +72,8 @@ function onUpdate() { .updateGraphicAndRecord(stationLine, stationLineModel); } } + +onUnmounted(() => { + drawStore.unbindFormData(stationLineModel); +}); diff --git a/src/components/draw-app/properties/StationProperty.vue b/src/components/draw-app/properties/StationProperty.vue index 2707a4c..67c695b 100644 --- a/src/components/draw-app/properties/StationProperty.vue +++ b/src/components/draw-app/properties/StationProperty.vue @@ -58,7 +58,7 @@ import { StationData } from 'src/drawApp/graphics/StationInteraction'; import { Station } from 'src/graphics/station/Station'; import { useDrawStore } from 'src/stores/draw-store'; -import { onMounted, reactive, ref, watch } from 'vue'; +import { onMounted, onUnmounted, reactive, ref } from 'vue'; const drawStore = useDrawStore(); const stationModel = reactive(new StationData()); @@ -82,31 +82,11 @@ const CoordinateSystemOptions = [ { label: '换线', value: 'TRANSFER' }, ]; -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == Station.Type) { - stationModel.copyFrom(val.saveData() as StationData); - hasControl.value = (showSelectData as never)[ - stationModel.hasControl + '' - ]; - concentrationStations.value = (showSelectData as never)[ - stationModel.concentrationStations + '' - ]; - if (stationModel.kilometerSystem) { - kilometerSystem.coordinateSystem = - stationModel.kilometerSystem.coordinateSystem; - kilometerSystem.kilometer = stationModel.kilometerSystem.kilometer; - } - } - } -); - onMounted(() => { const station = drawStore.selectedGraphic as Station; if (station) { stationModel.copyFrom(station.saveData()); + drawStore.bindFormData(stationModel); hasControl.value = (showSelectData as never)[stationModel.hasControl + '']; concentrationStations.value = (showSelectData as never)[ stationModel.concentrationStations + '' @@ -133,4 +113,8 @@ function onUpdate() { drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel); } } + +onUnmounted(() => { + drawStore.unbindFormData(stationModel); +}); diff --git a/src/components/draw-app/properties/TrainProperty.vue b/src/components/draw-app/properties/TrainProperty.vue deleted file mode 100644 index e47f4ee..0000000 --- a/src/components/draw-app/properties/TrainProperty.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/src/components/draw-app/properties/TrainWindowProperty.vue b/src/components/draw-app/properties/TrainWindowProperty.vue index 83baace..7f1fec6 100644 --- a/src/components/draw-app/properties/TrainWindowProperty.vue +++ b/src/components/draw-app/properties/TrainWindowProperty.vue @@ -60,25 +60,16 @@ import { LogicSection } from 'src/graphics/logicSection/LogicSection'; import { Section } from 'src/graphics/section/Section'; import { TrainWindow } from 'src/graphics/trainWindow/TrainWindow'; import { useDrawStore } from 'src/stores/draw-store'; -import { computed, onMounted, reactive, watch } from 'vue'; +import { computed, onMounted, onUnmounted, reactive } from 'vue'; const drawStore = useDrawStore(); const trainWindowModel = reactive(new TrainWindowData()); -drawStore.$subscribe; -watch( - () => drawStore.selectedGraphic, - (val) => { - if (val && val.type == TrainWindow.Type) { - trainWindowModel.copyFrom(val.saveData() as TrainWindowData); - } - } -); - onMounted(() => { const trainWindow = drawStore.selectedGraphic as TrainWindow; if (trainWindow) { trainWindowModel.copyFrom(trainWindow.saveData()); + drawStore.bindFormData(trainWindowModel); } }); @@ -111,4 +102,8 @@ const relatedTurnout = computed((): Section[] => { } return []; }); + +onUnmounted(() => { + drawStore.unbindFormData(trainWindowModel); +}); diff --git a/src/components/draw-app/properties/TurnoutProperty.vue b/src/components/draw-app/properties/TurnoutProperty.vue index 836b484..03005b7 100644 --- a/src/components/draw-app/properties/TurnoutProperty.vue +++ b/src/components/draw-app/properties/TurnoutProperty.vue @@ -75,7 +75,7 @@ import { TurnoutData } from 'src/drawApp/graphics/TurnoutInteraction'; import { Section } from 'src/graphics/section/Section'; import { Turnout } from 'src/graphics/turnout/Turnout'; import { useDrawStore } from 'src/stores/draw-store'; -import { computed, reactive, shallowRef, watchEffect } from 'vue'; +import { computed, onMounted, onUnmounted, reactive } from 'vue'; const drawStore = useDrawStore(); const CoordinateSystemOptions = [ @@ -84,7 +84,7 @@ const CoordinateSystemOptions = [ { label: '正线', value: 'MAIN_LINE' }, { label: '换线', value: 'TRANSFER' }, ]; -const turnoutModel = shallowRef(new TurnoutData()); +const turnoutModel = reactive(new TurnoutData()); const kilometerSystem = reactive([ { coordinateSystem: '', kilometer: 0 }, { coordinateSystem: '', kilometer: 0 }, @@ -125,15 +125,15 @@ const turnoutRelations = computed(() => { ); }); -watchEffect(() => { +onMounted(() => { const turnout = drawStore.selectedGraphic; if (turnout && turnout instanceof Turnout) { - turnoutModel.value = turnout.saveData(); - if (turnoutModel.value.kilometerSystem.length > 0) { + turnoutModel.copyFrom(turnout.saveData()); + drawStore.bindFormData(turnoutModel); + if (turnoutModel.kilometerSystem.length > 0) { kilometerSystem.forEach((ks, i) => { - ks.coordinateSystem = - turnoutModel.value.kilometerSystem[i].coordinateSystem; - ks.kilometer = turnoutModel.value.kilometerSystem[i].kilometer; + ks.coordinateSystem = turnoutModel.kilometerSystem[i].coordinateSystem; + ks.kilometer = turnoutModel.kilometerSystem[i].kilometer; }); } } @@ -141,12 +141,16 @@ watchEffect(() => { const onUpdate = () => { const turnout = drawStore.selectedGraphic as Turnout; - turnoutModel.value.kilometerSystem = kilometerSystem.map((ks) => ({ + turnoutModel.kilometerSystem = kilometerSystem.map((ks) => ({ coordinateSystem: ks.coordinateSystem, kilometer: ks.kilometer, })); if (turnout) { - drawStore.getDrawApp().updateGraphicAndRecord(turnout, turnoutModel.value); + drawStore.getDrawApp().updateGraphicAndRecord(turnout, turnoutModel); } }; + +onUnmounted(() => { + drawStore.unbindFormData(turnoutModel); +}); diff --git a/src/stores/draw-store.ts b/src/stores/draw-store.ts index 3601f9e..b50d12b 100644 --- a/src/stores/draw-store.ts +++ b/src/stores/draw-store.ts @@ -1,6 +1,13 @@ import { defineStore } from 'pinia'; import { destroyDrawApp, getDrawApp, initDrawApp } from 'src/drawApp'; -import { DrawAssistant, IJlCanvas, IDrawApp, JlGraphic } from 'src/jl-graphic'; +import { + DrawAssistant, + IJlCanvas, + IDrawApp, + JlGraphic, + GraphicData, +} from 'src/jl-graphic'; +import { markRaw } from 'vue'; export const useDrawStore = defineStore('draw', { state: () => ({ @@ -65,12 +72,20 @@ export const useDrawStore = defineStore('draw', { } } }); - app.on('graphicselectedchange', () => { - this.selectedGraphics = app.selectedGraphics; + app.on('graphicselected', (graphics) => { + this.selectedGraphics = markRaw(graphics); }); this.selectedGraphics = []; return app; }, + bindFormData(form: GraphicData): void { + const app = this.getDrawApp(); + app.bindFormData(form); + }, + unbindFormData(form: GraphicData): void { + const app = this.getDrawApp(); + app.unbindFormData(form); + }, destroy() { // console.log('绘制状态清空，绘制应用销毁'); this.drawAssistant = null;