计轴添加集中站

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

@@ -104,6 +104,21 @@
         </q-item-section>
       </q-item>
     </q-list>
+    <q-field class="q-mt-lg" outlined label="所属集中站" stack-label>
+      <template #control>
+        <q-chip
+          color="primary"
+          text-color="white"
+          v-for="(name, index) in axleCountingModel.centralizedStations"
+          :key="index"
+          removable
+          @remove="removeStation(index)"
+          square
+          >{{ name }}</q-chip
+        >
+        <q-btn round color="primary" size="xs" icon="add" @click="addStation" />
+      </template>
+    </q-field>
   </q-form>
 </template>
 
@@ -116,7 +131,9 @@ import { Turnout } from 'src/graphics/turnout/Turnout';
 import { GraphicIdGenerator } from 'src/jl-graphic';
 import { useDrawStore } from 'src/stores/draw-store';
 import { computed } from 'vue';
+import { useQuasar } from 'quasar';
 
+const $q = useQuasar();
 const drawStore = useDrawStore();
 const { data: axleCountingModel, onUpdate } = useFormData(
   new AxleCountingData(),
@@ -170,7 +187,22 @@ const turnoutRelations = computed(() => {
   );
   return Array.from(new Set(ref));
 });
+function removeStation(index: number) {
+  axleCountingModel.centralizedStations.splice(index, 1);
+}
 
+function addStation() {
+  $q.dialog({
+    message: '添加设备的集中站',
+    prompt: {
+      model: '',
+      type: 'text', // optional
+    },
+    cancel: true,
+  }).onOk((data: string) => {
+    axleCountingModel.centralizedStations.push(data);
+  });
+}
 function oneClickAxleCounting() {
   const select = drawStore.selectedGraphic as AxleCounting;
   const axleCountings = select.queryStore.queryByType<AxleCounting>(