抽取公共的框选方式的组件

src/components/common/SelectConfigUtils.vue

@@ -0,0 +1,179 @@
+<template>
+  <q-list bordered separator class="rounded-borders">
+    <q-expansion-item
+      bordered
+      expand-separator
+      v-for="(configItem, index) in selectConfig"
+      :key="configItem"
+      v-model="configItem.expanded"
+      :label="configItem.code"
+      @click="toggleItem(index)"
+    >
+      <q-card>
+        <q-item no-wrap class="q-gutter-y-sm column">
+          <q-input
+            v-if="props.ableAdd"
+            outlined
+            v-model="configItem.code"
+            label="配置项类型"
+            lazy-rules
+          />
+          <div class="q-gutter-sm row">
+            <q-chip
+              v-for="(item, selectIndex) in configItem.refDevicesCode"
+              :key="item"
+              square
+              color="primary"
+              text-color="white"
+              removable
+              @remove="removeSelect(selectIndex)"
+              clickable
+              @click="clickSelectCenter(selectIndex)"
+            >
+              {{ item }}
+            </q-chip>
+          </div>
+          <div>
+            <q-btn
+              v-show="configItem.refDevicesCode.length > 0"
+              style="width: 100px"
+              label="清空选择"
+              color="red"
+              class="q-mr-md"
+              @click="clearAllSelect(index)"
+            />
+            <q-btn
+              v-if="props.ableAdd"
+              label="删除配置项"
+              color="secondary"
+              @click="deleteCombinationtype(index)"
+            />
+          </div>
+        </q-item>
+      </q-card>
+    </q-expansion-item>
+  </q-list>
+  <q-btn
+    v-if="props.ableAdd"
+    class="q-mt-md"
+    label="增加配置项"
+    color="secondary"
+    @click="addCombinationtype"
+  />
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watch } from 'vue';
+import { IDrawApp, JlGraphic } from 'src/jl-graphic';
+import { Turnout } from 'src/graphics/turnout/Turnout';
+
+const props = withDefaults(
+  defineProps<{
+    drawStore: {
+      selectedGraphics: JlGraphic[];
+      getDrawApp(): IDrawApp;
+    };
+    ableAdd?: boolean;
+  }>(),
+  { ableAdd: false }
+);
+
+const selectConfig = ref<
+  {
+    code: string;
+    refDevices: string[];
+    refDevicesCode: string[];
+    expanded: boolean;
+  }[]
+>([
+  {
+    code: '配置项模版',
+    refDevices: [],
+    refDevicesCode: [],
+    expanded: false,
+  },
+]);
+
+let selectGraphic: JlGraphic[] = [];
+
+defineExpose({
+  selectConfig,
+  selectGraphic,
+});
+
+const filterSelect = inject('filter') as (g: JlGraphic) => boolean;
+watch(
+  () => props.drawStore.selectedGraphics,
+  (val) => {
+    if (val && val.length > 0 && clickIndex !== null) {
+      const selectFilter = props.drawStore.selectedGraphics?.filter(
+        filterSelect
+      ) as JlGraphic[];
+      selectGraphic.push(...selectFilter);
+      selectGraphic = Array.from(new Set(selectGraphic));
+      props.drawStore.getDrawApp().updateSelected(...selectGraphic);
+      selectConfig.value[clickIndex].refDevicesCode = selectGraphic.map((g) =>
+        (g as Turnout).datas.code == '' ? g.id : (g as Turnout).datas.code
+      );
+      selectConfig.value[clickIndex].refDevices = selectGraphic.map(
+        (g) => g.id
+      ) as string[];
+    }
+  }
+);
+
+let clickIndex: null | number = null;
+function toggleItem(index: number) {
+  const drawApp = props.drawStore.getDrawApp();
+  selectGraphic = [];
+  drawApp.updateSelected();
+  if (selectConfig.value[index].expanded == true) {
+    clickIndex = index;
+    const select: JlGraphic[] = [];
+    selectConfig.value[index].refDevices.forEach((id: string) => {
+      const g = drawApp.queryStore.queryById(id);
+      select.push(g);
+    });
+    drawApp.updateSelected(...select);
+  } else {
+    clickIndex = null;
+  }
+}
+
+function removeSelect(removeIndex: number) {
+  const clickTarget = selectConfig.value[clickIndex as number];
+  selectGraphic.splice(removeIndex, 1);
+  clickTarget.refDevicesCode.splice(removeIndex, 1);
+  clickTarget.refDevices.splice(removeIndex, 1);
+  props.drawStore.getDrawApp().updateSelected(...selectGraphic);
+}
+
+function clickSelectCenter(index: number) {
+  const drawApp = props.drawStore.getDrawApp();
+  const clickTarget = selectConfig.value[clickIndex as number];
+  const turnout = drawApp.queryStore.queryById(clickTarget.refDevices[index]);
+  drawApp.makeGraphicCenterShow(turnout);
+}
+
+function clearAllSelect(index: number) {
+  selectConfig.value[index].refDevices = [];
+  selectConfig.value[index].refDevicesCode = [];
+  selectGraphic = [];
+  props.drawStore.getDrawApp().updateSelected();
+}
+
+function addCombinationtype() {
+  selectConfig.value.push({
+    code: '配置项模版',
+    refDevices: [],
+    refDevicesCode: [],
+    expanded: false,
+  });
+}
+
+function deleteCombinationtype(index: number) {
+  selectConfig.value.splice(index, 1);
+  selectGraphic = [];
+  props.drawStore.getDrawApp().updateSelected();
+}
+</script>

src/components/draw-app/properties/AxleCountingConfig.vue

@@ -3,51 +3,8 @@
     <q-card-section>
       <div class="text-h6">一键生成计轴配置</div>
     </q-card-section>
-    <q-form ref="myForm" @submit="onSubmit">
+    <q-form ref="myForm">
-      <q-list bordered separator class="rounded-borders">
+      <selectConfig-utils ref="selectConfigUtils" :drawStore="drawStore" />
-        <q-expansion-item
-          expand-separator
-          v-for="(combinationtype, index) in axleCountingConfig.generate"
-          :key="combinationtype"
-          v-model="combinationtype.expanded"
-          :label="combinationtype.code"
-          @click="toggleItem(index)"
-        >
-          <q-card>
-            <q-item>
-              <q-item-section no-wrap class="q-gutter-y-sm column">
-                <div class="q-gutter-sm row">
-                  <q-chip
-                    v-for="(
-                      item, selectIndex
-                    ) in combinationtype.refTurnoutCode"
-                    :key="item"
-                    square
-                    color="primary"
-                    text-color="white"
-                    removable
-                    @remove="removeSelect(selectIndex)"
-                    clickable
-                    @click="clickSelectCenter(selectIndex)"
-                  >
-                    {{ item }}
-                  </q-chip>
-                </div>
-                <div>
-                  <q-btn
-                    v-show="combinationtype.refTurnoutCode.length > 0"
-                    style="width: 130px"
-                    label="清空选择的道岔"
-                    color="red"
-                    class="q-mr-md"
-                    @click="clearAllSelect(index)"
-                  />
-                </div>
-              </q-item-section>
-            </q-item>
-          </q-card>
-        </q-expansion-item>
-      </q-list>
       <div class="q-mt-md">
         <q-btn
           label="确认修改"
@@ -62,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, provide } from 'vue';
 import { QForm, useQuasar } from 'quasar';
 import { JlGraphic } from 'src/jl-graphic';
 import { useDrawStore } from 'src/stores/draw-store';
@@ -72,74 +29,58 @@ import {
   loadGenerateAxleCountingConfig,
   setGenerateAxleCountingConfig,
 } from 'src/drawApp/commonApp';
+import SelectConfigUtils from 'src/components/common/SelectConfigUtils.vue';
+
+//供公共选择组件使用
+const filterSelect = (g: JlGraphic) => g instanceof Turnout;
+const selectConfigUtils = ref<InstanceType<typeof SelectConfigUtils> | null>(
+  null
+);
+provide('filter', filterSelect);
 
 const emit = defineEmits(['close']);
 
 const drawStore = useDrawStore();
 const $q = useQuasar();
-const axleCountingConfig = ref<{
+
-  generate: {
+onMounted(() => {
-    code: string;
+  selectConfigUtils.value.selectConfig = [
-    refTurnout: string[];
-    refTurnoutCode: string[];
-    expanded: boolean;
-  }[];
-}>({
-  generate: [
     {
       code: 'bb连接的道岔',
-      refTurnout: [],
+      refDevices: [],
-      refTurnoutCode: [],
+      refDevicesCode: [],
       expanded: false,
     },
     {
       code: '不生成计轴的道岔组',
-      refTurnout: [],
+      refDevices: [],
-      refTurnoutCode: [],
+      refDevicesCode: [],
       expanded: false,
     },
-  ],
+  ];
-});
-
-let selectGraphic: JlGraphic[] = [];
-watch(
-  () => drawStore.selectedGraphics,
-  (val) => {
-    if (val && val.length > 0 && clickIndex !== null) {
-      const selectFilter = drawStore.selectedGraphics?.filter(
-        (g) => g.type == Turnout.Type
-      ) as JlGraphic[];
-      selectGraphic.push(...selectFilter);
-      selectGraphic = Array.from(new Set(selectGraphic));
-      drawStore.getDrawApp().updateSelected(...selectGraphic);
-      axleCountingConfig.value.generate[clickIndex].refTurnoutCode =
-        selectGraphic.map((g) =>
-          (g as Turnout).datas.code == '' ? g.id : (g as Turnout).datas.code
-        );
-      axleCountingConfig.value.generate[clickIndex].refTurnout =
-        selectGraphic.map((g) => g.id) as string[];
-    }
-  }
-);
-
-onMounted(() => {
   const generateAxleCountingConfig = loadGenerateAxleCountingConfig();
   if (generateAxleCountingConfig !== undefined) {
-    axleCountingConfig.value.generate.forEach((generate) => {
+    selectConfigUtils.value.selectConfig.forEach(
-      if (generate.code == 'bb连接的道岔') {
+      (generate: {
-        generate.refTurnout = generateAxleCountingConfig.bbConnect;
+        code: string;
-        generateAxleCountingConfig.bbConnect.forEach((id) => {
+        refDevices: string[];
-          const g = drawStore.getDrawApp().queryStore.queryById(id);
+        refDevicesCode: string[];
-          generate.refTurnoutCode.push(g.code);
+      }) => {
-        });
+        if (generate.code == 'bb连接的道岔') {
-      } else if (generate.code == '不生成计轴的道岔组') {
+          generate.refDevices = generateAxleCountingConfig.bbConnect;
-        generate.refTurnout = generateAxleCountingConfig.noGenerateGroup;
+          generateAxleCountingConfig.bbConnect.forEach((id) => {
-        generateAxleCountingConfig.noGenerateGroup.forEach((id) => {
+            const g = drawStore.getDrawApp().queryStore.queryById(id);
-          const g = drawStore.getDrawApp().queryStore.queryById(id);
+            generate.refDevicesCode.push(g.code);
-          generate.refTurnoutCode.push(g.code);
+          });
-        });
+        } else if (generate.code == '不生成计轴的道岔组') {
+          generate.refDevices = generateAxleCountingConfig.noGenerateGroup;
+          generateAxleCountingConfig.noGenerateGroup.forEach((id) => {
+            const g = drawStore.getDrawApp().queryStore.queryById(id);
+            generate.refDevicesCode.push(g.code);
+          });
+        }
       }
-    });
+    );
   }
 });
 
@@ -150,13 +91,15 @@ async function onSubmit() {
       try {
         const generateAxleCountingConfig =
           new graphicData.GenerateAxleCountingConfig();
-        axleCountingConfig.value.generate.forEach((generate) => {
+        selectConfigUtils.value.selectConfig.forEach(
-          if (generate.code == 'bb连接的道岔') {
+          (generate: { code: string; refDevices: string[] }) => {
-            generateAxleCountingConfig.bbConnect = generate.refTurnout;
+            if (generate.code == 'bb连接的道岔') {
-          } else if (generate.code == '不生成计轴的道岔组') {
+              generateAxleCountingConfig.bbConnect = generate.refDevices;
-            generateAxleCountingConfig.noGenerateGroup = generate.refTurnout;
+            } else if (generate.code == '不生成计轴的道岔组') {
+              generateAxleCountingConfig.noGenerateGroup = generate.refDevices;
+            }
           }
-        });
+        );
         setGenerateAxleCountingConfig(generateAxleCountingConfig);
         $q.notify({
           type: 'positive',
@@ -172,47 +115,6 @@ async function onSubmit() {
   });
 }
 
-let clickIndex: null | number = null;
-function toggleItem(index: number) {
-  const drawApp = drawStore.getDrawApp();
-  selectGraphic = [];
-  drawApp.updateSelected();
-  const generate = axleCountingConfig.value.generate;
-  if (generate[index].expanded == true) {
-    clickIndex = index;
-    const select: JlGraphic[] = [];
-    generate[index].refTurnout.forEach((id: string) => {
-      const g = drawApp.queryStore.queryById(id);
-      select.push(g);
-    });
-    drawApp.updateSelected(...select);
-  } else {
-    clickIndex = null;
-  }
-}
-
-function removeSelect(removeIndex: number) {
-  const clickTarget = axleCountingConfig.value.generate[clickIndex as number];
-  selectGraphic.splice(removeIndex, 1);
-  clickTarget.refTurnoutCode.splice(removeIndex, 1);
-  clickTarget.refTurnout.splice(removeIndex, 1);
-  drawStore.getDrawApp().updateSelected(...selectGraphic);
-}
-
-function clickSelectCenter(index: number) {
-  const drawApp = drawStore.getDrawApp();
-  const clickTarget = axleCountingConfig.value.generate[clickIndex as number];
-  const turnout = drawApp.queryStore.queryById(clickTarget.refTurnout[index]);
-  drawApp.makeGraphicCenterShow(turnout);
-}
-
-function clearAllSelect(index: number) {
-  axleCountingConfig.value.generate[index].refTurnout = [];
-  axleCountingConfig.value.generate[index].refTurnoutCode = [];
-  selectGraphic = [];
-  drawStore.getDrawApp().updateSelected();
-}
-
 function goBack() {
   emit('close');
 }

src/components/line-app/states/RelayState.vue

@@ -61,6 +61,12 @@ watch(
   }
 );
 
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    setNewRelayState(lineStore.selectedGraphics[0] as Relay);
+  }
+});
+
 function setNewRelayState(relay: Relay) {
   relayState.value = {
     id: relay.datas.id,
@@ -73,22 +79,12 @@ function setNewRelayState(relay: Relay) {
   subscribeState(relay);
 }
 
-onMounted(() => {
-  if (lineStore.selectedGraphics) {
-    setNewRelayState(lineStore.selectedGraphics[0] as Relay);
-  }
-});
-
 function subscribeState(g: Relay) {
-  if (g) {
+  g.on('stateupdate', updateState);
-    g.on('stateupdate', updateState);
-  }
 }
 
 function unSubscribeState(g: Relay) {
-  if (g) {
+  g.off('stateupdate', updateState);
-    g.off('stateupdate', updateState);
-  }
 }
 
 function updateState(newVal: RelayState) {