继电器组合使用公共框选组件

src/components/common/SelectConfigUtils.vue

@@ -46,7 +46,7 @@
               v-if="props.ableAdd"
               label="删除配置项"
               color="secondary"
-              @click="deleteCombinationtype(index)"
+              @click="deleteSelectConfig(index)"
             />
           </div>
         </q-item>
@@ -58,7 +58,7 @@
     class="q-mt-md"
     label="增加配置项"
     color="secondary"
-    @click="addCombinationtype"
+    @click="addSelectConfig"
   />
 </template>
 
@@ -151,8 +151,10 @@ function removeSelect(removeIndex: number) {
 function clickSelectCenter(index: number) {
   const drawApp = props.drawStore.getDrawApp();
   const clickTarget = selectConfig.value[clickIndex as number];
-  const turnout = drawApp.queryStore.queryById(clickTarget.refDevices[index]);
+  const clickGraphic = drawApp.queryStore.queryById(
-  drawApp.makeGraphicCenterShow(turnout);
+    clickTarget.refDevices[index]
+  );
+  drawApp.makeGraphicCenterShow(clickGraphic);
 }
 
 function clearAllSelect(index: number) {
@@ -162,7 +164,7 @@ function clearAllSelect(index: number) {
   props.drawStore.getDrawApp().updateSelected();
 }
 
-function addCombinationtype() {
+function addSelectConfig() {
   selectConfig.value.push({
     code: '配置项模版',
     refDevices: [],
@@ -171,7 +173,7 @@ function addCombinationtype() {
   });
 }
 
-function deleteCombinationtype(index: number) {
+function deleteSelectConfig(index: number) {
   selectConfig.value.splice(index, 1);
   selectGraphic = [];
   props.drawStore.getDrawApp().updateSelected();

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

@@ -22,64 +22,10 @@
           v-model="relateRelayConfig.code"
           :rules="[(val) => val.trim() != '' || '名称不能为空']"
         />
-        <q-list bordered separator class="rounded-borders">
+        <selectConfig-utils
-          <q-expansion-item
+          ref="selectConfigUtils"
-            expand-separator
+          :drawStore="relayCabinetStore"
-            v-for="(
+          :ableAdd="ableAdd"
-              combinationtype, index
-            ) in relateRelayConfig.combinationtypes"
-            :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">
-                  <q-input
-                    outlined
-                    v-model="combinationtype.code"
-                    label="组合类型"
-                    lazy-rules
-                  />
-                  <div class="q-gutter-sm row">
-                    <q-chip
-                      v-for="item in combinationtype.refRelaysCode"
-                      :key="item"
-                      square
-                      color="primary"
-                      text-color="white"
-                      removable
-                      @remove="removeSelect(item)"
-                    >
-                      {{ item }}
-                    </q-chip>
-                  </div>
-                  <div>
-                    <q-btn
-                      v-show="combinationtype.refRelaysCode.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"
         />
         <div class="q-gutter-sm q-pa-md row justify-center">
           <q-btn label="提交" type="submit" color="primary" class="q-mr-md" />
@@ -92,7 +38,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 { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
@@ -105,6 +51,16 @@ import {
 } from 'src/drawApp/relayCabinetLayoutApp';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { PhaseFailureProtector } from 'src/graphics/phaseFailureProtector/PhaseFailureProtector';
+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>(
+  null
+);
+provide('filter', filterSelect);
 
 defineExpose({ editRelateRelays });
 
@@ -114,18 +70,9 @@ const showRangeConfig = ref(true);
 const relateRelayConfig = ref<{
   deviceType: graphicData.RelatedRef.DeviceType | undefined;
   code: string;
-  combinationtypes: {
-    code: string;
-    refRelays: string[];
-    refRelaysCode: string[];
-    expanded: boolean;
-  }[];
 }>({
   deviceType: undefined,
   code: '',
-  combinationtypes: [
-    { code: '组合类型', refRelays: [], refRelaysCode: [], expanded: false },
-  ],
 });
 const handleState = ref('新建设备关联继电器');
 
@@ -148,27 +95,6 @@ const noShowType = [
   graphicData.RelatedRef.DeviceType.PowerScreen,
 ];
 
-let selectGraphic: JlGraphic[] = [];
-watch(
-  () => relayCabinetStore.selectedGraphics,
-  (val) => {
-    if (val && val.length > 0 && clickIndex !== null) {
-      const selectFilter = relayCabinetStore.selectedGraphics?.filter(
-        (g) => g.type == Relay.Type || g.type == PhaseFailureProtector.Type
-      ) as JlGraphic[];
-      selectGraphic.push(...selectFilter);
-      selectGraphic = Array.from(new Set(selectGraphic));
-      relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
-      relateRelayConfig.value.combinationtypes[clickIndex].refRelaysCode =
-        selectGraphic.map((g) =>
-          (g as Relay).datas.code == '' ? g.id : (g as Relay).datas.code
-        );
-      relateRelayConfig.value.combinationtypes[clickIndex].refRelays =
-        selectGraphic.map((g) => g.id) as string[];
-    }
-  }
-);
-
 onMounted(() => {
   onReset();
 });
@@ -182,14 +108,16 @@ async function onSubmit() {
     if (res) {
       try {
         const combinationtypes: relayCabinetGraphicData.Combinationtype[] = [];
-        relateRelayConfig.value.combinationtypes.forEach((combinationtype) => {
+        selectConfigUtils.value.selectConfig.forEach(
-          combinationtypes.push(
+          (combinationtype: { code: string; refDevices: string[] }) => {
-            new relayCabinetGraphicData.Combinationtype({
+            combinationtypes.push(
-              code: combinationtype.code,
+              new relayCabinetGraphicData.Combinationtype({
-              refRelays: combinationtype.refRelays,
+                code: combinationtype.code,
-            })
+                refRelays: combinationtype.refDevices,
-          );
+              })
-        });
+            );
+          }
+        );
         const deviceRelateRelay = new relayCabinetGraphicData.DeviceRelateRelay(
           {
             deviceType: relateRelayConfig.value.deviceType,
@@ -230,7 +158,7 @@ async function editRelateRelays(row: RelateRelaylistItem) {
   try {
     const drawApp = relayCabinetStore.getDrawApp();
     handleState.value = '编辑设备关联继电器';
-    selectGraphic = [];
+    selectConfigUtils.value.selectGraphic = [];
     drawApp.updateSelected();
     editRow = row;
     relateRelayConfig.value.deviceType = row.deviceType;
@@ -244,13 +172,13 @@ async function editRelateRelays(row: RelateRelaylistItem) {
       combinationtype.refRelaysCode = refCode;
       combinationtype.expanded = false;
     });
-    relateRelayConfig.value.combinationtypes = [];
+    selectConfigUtils.value.selectConfig = [];
     row.combinationtypes.forEach((combinationtype) => {
       const { code, refRelays, refRelaysCode, expanded } = combinationtype;
-      relateRelayConfig.value.combinationtypes.push({
+      selectConfigUtils.value.selectConfig.push({
         code,
-        refRelays,
+        refDevices: refRelays,
-        refRelaysCode: refRelaysCode as string[],
+        refDevicesCode: refRelaysCode as string[],
         expanded: expanded as boolean,
       });
     });
@@ -262,74 +190,22 @@ async function editRelateRelays(row: RelateRelaylistItem) {
   }
 }
 
-let clickIndex: null | number = null;
-function toggleItem(index: number) {
-  const drawApp = relayCabinetStore.getDrawApp();
-  selectGraphic = [];
-  drawApp.updateSelected();
-  const combinationtypes = relateRelayConfig.value.combinationtypes;
-  if (combinationtypes[index].expanded == true) {
-    clickIndex = index;
-    const select: JlGraphic[] = [];
-    combinationtypes[index].refRelays.forEach((id: string) => {
-      const g = drawApp.queryStore.queryById(id);
-      select.push(g);
-    });
-    drawApp.updateSelected(...select);
-    drawApp.makeGraphicCenterShow(...select);
-  } else {
-    clickIndex = null;
-  }
-}
-
-function removeSelect(code: string) {
-  const clickTarget =
-    relateRelayConfig.value.combinationtypes[clickIndex as number];
-  const removeIndex = clickTarget.refRelaysCode.findIndex(
-    (item) => item == code
-  );
-  selectGraphic.splice(removeIndex, 1);
-  clickTarget.refRelaysCode.splice(removeIndex, 1);
-  clickTarget.refRelays.splice(removeIndex, 1);
-  relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
-}
-
-function clearAllSelect(index: number) {
-  relateRelayConfig.value.combinationtypes[index].refRelays = [];
-  relateRelayConfig.value.combinationtypes[index].refRelaysCode = [];
-  clearAllSelectAtCanvas();
-}
-
-function clearAllSelectAtCanvas() {
-  selectGraphic = [];
-  relayCabinetStore.getDrawApp().updateSelected();
-}
-
-function addCombinationtype() {
-  relateRelayConfig.value.combinationtypes.push({
-    code: '组合类型',
-    refRelays: [],
-    refRelaysCode: [],
-    expanded: false,
-  });
-}
-
-function deleteCombinationtype(index: number) {
-  relateRelayConfig.value.combinationtypes.splice(index, 1);
-  clearAllSelectAtCanvas();
-}
-
 function onReset() {
-  clickIndex = null;
   handleState.value = '新建设备关联继电器';
   relateRelayConfig.value = {
     deviceType: undefined,
     code: '',
-    combinationtypes: [
-      { code: '组合类型', refRelays: [], refRelaysCode: [], expanded: false },
-    ],
   };
-  clearAllSelectAtCanvas();
+  selectConfigUtils.value.selectConfig = [
+    {
+      code: '配置项模版',
+      refDevices: [],
+      refDevicesCode: [],
+      expanded: false,
+    },
+  ];
+  selectConfigUtils.value.selectGraphic = [];
+  relayCabinetStore.getDrawApp().updateSelected();
 }
 
 function goBack() {