[Feat 2546] 测点模块-测点表单编辑逻辑更改

src/views/vent/monitor/site/components/siteForm.vue

@@ -1,26 +1,37 @@
 <template>
   <!-- 测点操作表单 -->
   <BasicForm
-    :model="site"
+    :model="mergedFormModel"
     :schemas="schemas"
     :label-col="{ span: 9 }"
     :wrapper-col="{ span: 15 }"
     :showActionButtonGroup="false"
+    :disabled="!editable"
     size="small"
     label-align="right"
     @register="register"
   >
     <template #create-btn>
-      <Button type="primary" :rounded="true" @click="createSite">新建测点</Button>
+      <Button v-if="editable" type="primary" :rounded="true" :disabled="false" @click="save">
+        保 存
+      </Button>
+      <Button v-else type="primary" :rounded="true" :disabled="false" @click="createSite">
+        新建测点
+      </Button>
     </template>
     <template #edit-btn>
-      <Button type="primary" :rounded="true" @click="editSite">编辑测点</Button>
+      <Button v-if="editable" type="primary" :rounded="true" :disabled="false" @click="cancel">
+        取 消
+      </Button>
+      <Button v-else type="primary" :rounded="true" :disabled="false" @click="editSite">
+        编辑测点
+      </Button>
     </template>
     <!-- <template #copy-btn>
         <Button type="primary" :rounded="true" @click="copySite">复制测点</Button>
       </template> -->
     <template #pick-btn>
-      <Button type="primary" :rounded="true" @click="pickSite">拾取坐标</Button>
+      <Button type="primary" :rounded="true" :disabled="false" @click="pickSite">拾取坐标</Button>
     </template>
   </BasicForm>
 </template>
@@ -30,7 +41,7 @@
     MonitorSiteOperationParams,
     SaveMonitorSiteParams,
   } from '@/api/sys/model/monitorModel';
-  import { defineProps } from 'vue';
+  import { computed, defineProps, ref } from 'vue';
   import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
   import { Button } from 'ant-design-vue';
   import { SensorDict, SystemSourceDict } from '../const';
@@ -82,9 +93,6 @@
       colProps: {
         span: 1,
       },
-      componentProps: {
-        size: 'small',
-      },
     };
   }
 
@@ -146,30 +154,45 @@
     generateInputSchema({ field: 'z', label: 'Z', span: 3 }),
   ];
 
+  // 表单是否可以编辑
+  const editable = ref(false);
+  // 表单数据，用于在交互中动态的更改表单
+  const formModel = ref<Partial<MonitorSiteTreeNode>>({});
+  const mergedFormModel = computed(() => {
+    return {
+      ...props.site,
+      ...formModel.value,
+    };
+  });
+
   // 后续操作表单必要的函数
   const [register, { validate }] = useForm();
 
-  // 提交创建测点所需的数据
+  // 新建测点，设置表单的数据、状态
   function createSite() {
-    validate().then((v) => {
-      emit('save', { ...props.site, ...v } as SaveMonitorSiteParams);
-    });
+    formModel.value = { id: '' };
+    editable.value = true;
   }
 
-  // 提交复制测点所需的数据
-  // function copySite() {
-  //   validate().then((v) => {
-  //     emit('save', { ...props.site, ...v } as SaveMonitorSiteParams);
-  //   });
-  // }
-
-  // 提交编辑测点所需的数据
+  // 编辑测点，设置表单的数据、状态
   function editSite() {
+    editable.value = true;
+  }
+
+  // 保存测点，提交表单
+  function save() {
     validate().then((v) => {
-      emit('save', { ...props.site, ...v } as SaveMonitorSiteParams);
+      editable.value = false;
+      emit('save', { ...mergedFormModel.value, ...v } as SaveMonitorSiteParams);
     });
   }
 
+  // 取消编辑，表单回到默认状态
+  function cancel() {
+    formModel.value = {};
+    editable.value = false;
+  }
+
   // 拾取测点
   function pickSite() {
     emit('operation', {
@@ -177,9 +200,4 @@
       from: 'tank',
     });
   }
-
-  defineExpose({
-    schemas,
-    register,
-  });
 </script>