线路图车站关联设备使用公共框选组件

src/components/common/SelectConfigUtils.vue

@@ -65,7 +65,6 @@
 <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<{
@@ -101,6 +100,10 @@ defineExpose({
   selectGraphic,
 });
 
+interface GraphicData {
+  datas: { code: string };
+}
+
 const filterSelect = inject('filter') as (g: JlGraphic) => boolean;
 watch(
   () => props.drawStore.selectedGraphics,
@@ -113,7 +116,9 @@ watch(
       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
+        (g as JlGraphic & GraphicData).datas.code == ''
+          ? g.id
+          : (g as JlGraphic & GraphicData).datas.code
       );
       selectConfig.value[clickIndex].refDevices = selectGraphic.map(
         (g) => g.id

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

@@ -25,7 +25,7 @@
         <selectConfig-utils
           ref="selectConfigUtils"
           :drawStore="relayCabinetStore"
-          :ableAdd="ableAdd"
+          ableAdd
         />
         <div class="q-gutter-sm q-pa-md row justify-center">
           <q-btn label="提交" type="submit" color="primary" class="q-mr-md" />
@@ -54,7 +54,6 @@ import { PhaseFailureProtector } from 'src/graphics/phaseFailureProtector/PhaseF
 import SelectConfigUtils from 'src/components/common/SelectConfigUtils.vue';
 
 //供选择组件使用
-const ableAdd = true;
 const filterSelect = (g: JlGraphic) =>
   g.type == Relay.Type || g.type == PhaseFailureProtector.Type;
 const selectConfigUtils = ref<InstanceType<typeof SelectConfigUtils> | null>(

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

@@ -21,64 +21,10 @@
           v-model="relateDeviceConfig.code"
           :rules="[(val) => val.trim() != '' || '名称不能为空']"
         />
-        <q-list bordered separator class="rounded-borders">
-          <q-expansion-item
-            expand-separator
-            v-for="(
-              combinationtype, index
-            ) in relateDeviceConfig.combinationtypes"
-            :key="index"
-            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">
-                  <q-input
-                    outlined
-                    v-model="combinationtype.code"
-                    label="组合类型"
-                    lazy-rules
-                  />
-                  <div class="q-gutter-sm row">
-                    <q-chip
-                      v-for="item in combinationtype.refDevicesCode"
-                      :key="item"
-                      square
-                      color="primary"
-                      text-color="white"
-                      removable
-                      @remove="removeSelect(item)"
-                    >
-                      {{ item }}
-                    </q-chip>
-                  </div>
-                  <div>
-                    <q-btn
-                      v-show="combinationtype.refDevicesCode.length > 0"
-                      style="width: 130px"
-                      label="清空框选的设备"
-                      color="red"
-                      class="q-mr-md"
-                      @click="clearAllSelect(index)"
-                    />
-                    <q-btn
-                      label="删除组合类型"
-                      color="secondary"
-                      @click="deleteCombinationtype(index)"
-                    />
-                  </div>
-                </q-item-section>
-              </q-item>
-            </q-card>
-          </q-expansion-item>
-        </q-list>
-        <q-btn
-          class="q-mt-md"
-          label="增加组合类型"
-          color="secondary"
-          @click="addCombinationtype"
+        <selectConfig-utils
+          ref="selectConfigUtils"
+          :drawStore="drawStore"
+          ableAdd
         />
         <div class="q-gutter-sm q-pa-md row justify-center">
           <q-btn label="提交" type="submit" color="primary" class="q-mr-md" />
@@ -91,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, provide, ref } from 'vue';
 import { QForm, useQuasar } from 'quasar';
 import { JlGraphic } from 'src/jl-graphic';
 import { useDrawStore } from 'src/stores/draw-store';
@@ -102,6 +48,13 @@ import {
   RelateDevicelistItem,
 } from 'src/drawApp/thApp';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
+import SelectConfigUtils from 'src/components/common/SelectConfigUtils.vue';
+
+const filterSelect = (g: JlGraphic) => g.type == EsbButton.Type;
+const selectConfigUtils = ref<InstanceType<typeof SelectConfigUtils> | null>(
+  null
+);
+provide('filter', filterSelect);
 
 defineExpose({ editRelateDevices });
 
@@ -111,18 +64,9 @@ const showRangeConfig = ref(true);
 const relateDeviceConfig = ref<{
   deviceType: graphicData.RelatedRef.DeviceType | undefined;
   code: string;
-  combinationtypes: {
-    code: string;
-    refDevices: string[];
-    refDevicesCode: string[];
-    expanded: boolean;
-  }[];
 }>({
   deviceType: undefined,
   code: '',
-  combinationtypes: [
-    { code: '组合类型', refDevices: [], refDevicesCode: [], expanded: false },
-  ],
 });
 const handleState = ref('新建车站关联设备');
 
@@ -130,27 +74,6 @@ const optionsType = [
   { label: '车站', value: graphicData.RelatedRef.DeviceType.station },
 ];
 
-let selectGraphic: JlGraphic[] = [];
-watch(
-  () => drawStore.selectedGraphics,
-  (val) => {
-    if (val && val.length > 0 && clickIndex !== null) {
-      const selectFilter = drawStore.selectedGraphics?.filter(
-        (g) => g.type == EsbButton.Type
-      ) as JlGraphic[];
-      selectGraphic.push(...selectFilter);
-      selectGraphic = Array.from(new Set(selectGraphic));
-      drawStore.getDrawApp().updateSelected(...selectGraphic);
-      relateDeviceConfig.value.combinationtypes[clickIndex].refDevicesCode =
-        selectGraphic.map((g) =>
-          (g as EsbButton).datas.code == '' ? g.id : (g as EsbButton).datas.code
-        );
-      relateDeviceConfig.value.combinationtypes[clickIndex].refDevices =
-        selectGraphic.map((g) => g.id) as string[];
-    }
-  }
-);
-
 onMounted(() => {
   onReset();
 });
@@ -164,14 +87,16 @@ async function onSubmit() {
     if (res) {
       try {
         const combinationtypes: graphicData.DeviceCombinationtype[] = [];
-        relateDeviceConfig.value.combinationtypes.forEach((combinationtype) => {
-          combinationtypes.push(
-            new graphicData.DeviceCombinationtype({
-              code: combinationtype.code,
-              refDevices: combinationtype.refDevices,
-            })
-          );
-        });
+        selectConfigUtils.value.selectConfig.forEach(
+          (combinationtype: { code: string; refDevices: string[] }) => {
+            combinationtypes.push(
+              new graphicData.DeviceCombinationtype({
+                code: combinationtype.code,
+                refDevices: combinationtype.refDevices,
+              })
+            );
+          }
+        );
         const stationRelateDevice = new graphicData.StationRelateDevice({
           deviceType: relateDeviceConfig.value.deviceType,
           code: relateDeviceConfig.value.code,
@@ -210,7 +135,7 @@ async function editRelateDevices(row: RelateDevicelistItem) {
   try {
     const drawApp = drawStore.getDrawApp();
     handleState.value = '编辑车站关联设备';
-    selectGraphic = [];
+    selectConfigUtils.value.selectGraphic = [];
     drawApp.updateSelected();
     editRow = row;
     relateDeviceConfig.value.deviceType = row.deviceType;
@@ -224,10 +149,10 @@ async function editRelateDevices(row: RelateDevicelistItem) {
       combinationtype.refDevicesCode = refCode;
       combinationtype.expanded = false;
     });
-    relateDeviceConfig.value.combinationtypes = [];
+    selectConfigUtils.value.selectConfig = [];
     row.combinationtypes.forEach((combinationtype) => {
       const { code, refDevices, refDevicesCode, expanded } = combinationtype;
-      relateDeviceConfig.value.combinationtypes.push({
+      selectConfigUtils.value.selectConfig.push({
         code,
         refDevices,
         refDevicesCode: refDevicesCode as string[],
@@ -242,73 +167,22 @@ async function editRelateDevices(row: RelateDevicelistItem) {
   }
 }
 
-let clickIndex: null | number = null;
-function toggleItem(index: number) {
-  const drawApp = drawStore.getDrawApp();
-  selectGraphic = [];
-  drawApp.updateSelected();
-  const combinationtypes = relateDeviceConfig.value.combinationtypes;
-  if (combinationtypes[index].expanded == true) {
-    clickIndex = index;
-    const select: JlGraphic[] = [];
-    combinationtypes[index].refDevices.forEach((id: string) => {
-      const g = drawApp.queryStore.queryById(id);
-      select.push(g);
-    });
-    drawApp.updateSelected(...select);
-  } else {
-    clickIndex = null;
-  }
-}
-
-function removeSelect(code: string) {
-  const clickTarget =
-    relateDeviceConfig.value.combinationtypes[clickIndex as number];
-  const removeIndex = clickTarget.refDevicesCode.findIndex(
-    (item) => item == code
-  );
-  selectGraphic.splice(removeIndex, 1);
-  clickTarget.refDevicesCode.splice(removeIndex, 1);
-  clickTarget.refDevices.splice(removeIndex, 1);
-  drawStore.getDrawApp().updateSelected(...selectGraphic);
-}
-
-function clearAllSelect(index: number) {
-  relateDeviceConfig.value.combinationtypes[index].refDevices = [];
-  relateDeviceConfig.value.combinationtypes[index].refDevicesCode = [];
-  clearAllSelectAtCanvas();
-}
-
-function clearAllSelectAtCanvas() {
-  selectGraphic = [];
-  drawStore.getDrawApp().updateSelected();
-}
-
-function addCombinationtype() {
-  relateDeviceConfig.value.combinationtypes.push({
-    code: '组合类型',
-    refDevices: [],
-    refDevicesCode: [],
-    expanded: false,
-  });
-}
-
-function deleteCombinationtype(index: number) {
-  relateDeviceConfig.value.combinationtypes.splice(index, 1);
-  clearAllSelectAtCanvas();
-}
-
 function onReset() {
-  clickIndex = null;
   handleState.value = '新建车站关联设备';
   relateDeviceConfig.value = {
     deviceType: undefined,
     code: '',
-    combinationtypes: [
-      { code: '组合类型', refDevices: [], refDevicesCode: [], expanded: false },
-    ],
   };
-  clearAllSelectAtCanvas();
+  selectConfigUtils.value.selectConfig = [
+    {
+      code: '配置项模版',
+      refDevices: [],
+      refDevicesCode: [],
+      expanded: false,
+    },
+  ];
+  selectConfigUtils.value.selectGraphic = [];
+  drawStore.getDrawApp().updateSelected();
 }
 
 function goBack() {