添加风机属性编辑表单

src/components/draw-app/DrawProperties.vue

@@ -26,8 +26,13 @@
         </q-card-section>
       </template>
       <template v-else-if="drawStore.selectedGraphics.length === 1">
-        <q-card-section v-if="drawStore.selectedGraphicType === Link.Type">
+        <q-card-section>
-          <link-property></link-property>
+          <link-property
+            v-if="drawStore.selectedGraphicType === Link.Type"
+          ></link-property>
+          <iscs-fan-property
+            v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
+          ></iscs-fan-property>
         </q-card-section>
       </template>
     </q-card>
@@ -38,8 +43,10 @@
 import LinkTemplate from './templates/LinkTemplate.vue';
 import CanvasProperty from './properties/CanvasProperty.vue';
 import LinkProperty from './properties/LinkProperty.vue';
+import IscsFanProperty from './properties/IscsFanProperty.vue';
 import { Link } from 'src/graphics/link/Link';
 import { useDrawStore } from 'src/stores/draw-store';
+import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
 
 const drawStore = useDrawStore();
 </script>

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

@@ -0,0 +1,42 @@
+<template>
+  <q-form>
+    <q-input outlined readonly v-model="model.id" label="id" :rules="[]" />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { IscsFanData } from 'src/examples/app/graphics/IscsFanInteraction';
+import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const model = reactive(new IscsFanData());
+
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == IscsFan.Type) {
+      // console.log('Iscs风机变更');
+      model.copyFrom(val.saveData() as IscsFanData);
+    }
+  }
+);
+
+onMounted(() => {
+  // console.log('Iscs风机 属性表单 mounted');
+  const g = drawStore.selectedGraphic as IscsFan;
+  if (g) {
+    model.copyFrom(g.saveData());
+  }
+});
+
+function onUpdate() {
+  console.log('Iscs风机 属性更新');
+  const g = drawStore.selectedGraphic as IscsFan;
+  if (g) {
+    drawStore.getDrawApp().updateGraphicAndRecord(g, model);
+  }
+}
+</script>

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

@@ -1,6 +1,12 @@
 <template>
   <q-form>
-    <q-input outlined readonly v-model="linkModel.id" label="id" :rules="[]" />
+    <q-input
+      outlined
+      readonly
+      v-model="linkModel.id"
+      label="id"
+      :rules="[(val) => val || '']"
+    />
     <q-input
       outlined
       v-model.number="linkModel.lineWidth"