Просмотр исходного кода

[Feat 0000] 测点模块-测点表单测点数处的联动、保存等逻辑修改

houzekong 1 год назад
Родитель
Сommit
3de9b4ab9a

+ 5 - 4
src/api/sys/model/monitorModel.ts

@@ -59,11 +59,12 @@ export interface SaveMonitorSiteParams {
   id: string;
   parentId: string;
   label: string;
-  disasterType: string;
-  disasterName: string;
-  sensorType: string;
-  sensorTypeName: string;
+  disasterType: string | null | undefined;
+  disasterName: string | null | undefined;
+  sensorType: string | null | undefined;
+  sensorTypeName: string | null | undefined;
   systemSource: string;
+  leafNode: number;
   x: number;
   y: number;
   z: number;

+ 3 - 1
src/api/sys/monitor.ts

@@ -17,6 +17,7 @@ enum Api {
   getMonitorSiteTree = '/gis/data/gisBaseTree',
   getMonitorSite = '/gis/data/getDataByIdAndSystemCode',
   saveMonitorSite = '/gis/data/save',
+  deleteMonitorSite = '/gis/data/delete',
 }
 
 /**
@@ -61,8 +62,9 @@ export function deleteMonitorSite(
 ) {
   return defHttp.delete<MonitorSite>(
     {
-      url: Api.saveMonitorSite,
+      url: Api.deleteMonitorSite,
       params,
+      data: params,
     },
     {
       errorMessageMode: mode,

+ 15 - 22
src/views/vent/monitor/site/components/siteForm.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 测点操作表单 -->
   <BasicForm
-    :model="mergedFormModel"
+    :model="site"
     :schemas="schemas"
     :label-col="{ span: 9 }"
     :wrapper-col="{ span: 15 }"
@@ -36,12 +36,8 @@
   </BasicForm>
 </template>
 <script setup lang="ts">
-  import {
-    MonitorSiteTreeNode,
-    MonitorSiteOperationParams,
-    SaveMonitorSiteParams,
-  } from '@/api/sys/model/monitorModel';
-  import { computed, defineProps, ref } from 'vue';
+  import { MonitorSiteTreeNode, MonitorSiteOperationParams } from '@/api/sys/model/monitorModel';
+  import { defineProps, ref } from 'vue';
   import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
   import { Button } from 'ant-design-vue';
   import { SensorDict, SystemSourceDict } from '../const';
@@ -49,7 +45,7 @@
   // props & emits
   const props = defineProps<{ site: Partial<MonitorSiteTreeNode> }>();
   const emit = defineEmits<{
-    save: [value: SaveMonitorSiteParams];
+    save: [value: Required<MonitorSiteTreeNode>];
     operation: [value: MonitorSiteOperationParams];
   }>();
 
@@ -135,7 +131,12 @@
   const schemas: FormSchema[] = [
     generateButtonSchema({ slot: 'create-btn' }),
     generateInputSchema({ field: 'id', label: '测点编号', required: true }),
-    generateSelectSchema({ field: 'sensorType', label: '测点类型', dict: SensorDict }),
+    generateSelectSchema({
+      field: 'sensorType',
+      label: '测点类型',
+      dict: SensorDict,
+      required: false,
+    }),
     generateInputSchema({ field: 'sensorStatus', label: '测点使用状态' }),
     generateInputSchema({ field: 'label', label: '所属位置', required: true }),
     generateInputSchema({ field: 'x', label: 'X', required: true, span: 3 }),
@@ -156,21 +157,13 @@
 
   // 表单是否可以编辑
   const editable = ref(false);
-  // 表单数据,用于在交互中动态的更改表单
-  const formModel = ref<Partial<MonitorSiteTreeNode>>({});
-  const mergedFormModel = computed(() => {
-    return {
-      ...props.site,
-      ...formModel.value,
-    };
-  });
 
   // 后续操作表单必要的函数
-  const [register, { validate }] = useForm();
+  const [register, { validate, setFieldsValue }] = useForm();
 
   // 新建测点,设置表单的数据、状态
   function createSite() {
-    formModel.value = { id: '' };
+    setFieldsValue({ id: '' });
     editable.value = true;
   }
 
@@ -182,14 +175,14 @@
   // 保存测点,提交表单
   function save() {
     validate().then((v) => {
-      editable.value = false;
-      emit('save', { ...mergedFormModel.value, ...v } as SaveMonitorSiteParams);
+      cancel();
+      emit('save', { ...props.site, ...v } as Required<MonitorSiteTreeNode>);
     });
   }
 
   // 取消编辑,表单回到默认状态
   function cancel() {
-    formModel.value = {};
+    setFieldsValue(props.site);
     editable.value = false;
   }
 

+ 4 - 8
src/views/vent/monitor/site/components/siteTree.vue

@@ -9,13 +9,10 @@
       @select="selectHandler"
     >
       <template #icon="scope">
-        <Icon v-if="scope.selected" icon="material-symbols:circle" color="green" />
-        <Icon v-else-if="scope.leaf && scope.selectable" icon="material-symbols:circle" />
-        <Icon
-          v-else-if="scope.leaf && !scope.selectable"
-          icon="material-symbols:circle"
-          color="red"
-        />
+        <!-- 叶节点且已选中的是绿色 -->
+        <Icon v-if="scope.leaf && scope.selected" icon="material-symbols:circle" color="green" />
+        <!-- 叶节点是白色 -->
+        <Icon v-else-if="scope.leaf" icon="material-symbols:circle" />
       </template>
     </Tree>
 
@@ -42,7 +39,6 @@
     const res: TreeNode = {
       title: node.label,
       key: node.id,
-      selectable: !!node.display,
       leaf: !!node.leafNode,
       raw: node,
       children: [],

+ 13 - 6
src/views/vent/monitor/site/index.vue

@@ -37,7 +37,6 @@
     MonitorSiteTreeParams,
     MonitorSiteTreeNode,
     MonitorSiteOperationParams,
-    SaveMonitorSiteParams,
   } from '@/api/sys/model/monitorModel';
   import {
     getMonitorSiteTree,
@@ -59,10 +58,10 @@
     });
   }
 
-  // 选中的测点
+  // 选测点
   const selectedSite = ref<Partial<MonitorSiteTreeNode>>({});
 
-  // 聚焦到测点上
+  // 聚焦到 所选测点 
   function focusOnSite(site: MonitorSiteTreeNode) {
     selectedSite.value = site;
     postMonitorOperation(iframeRef.value!, {
@@ -74,7 +73,7 @@
     });
   }
 
-  // 处理测点图返回的数据
+  // 处理测点图返回的数据,即更新 所选测点 的数据
   function handleMessage(msg: any) {
     const data = JSON.parse(msg);
     selectedSite.value = { ...selectedSite.value, ...data };
@@ -85,11 +84,19 @@
     postMonitorOperation(iframeRef.value!, formData);
   }
 
-  // 提交一些保存相关的请求
-  function handleSave(formData: SaveMonitorSiteParams) {
+  // 保存测点,处理原始的表单数据并尝试保存测点
+  function handleSave(formData: Required<MonitorSiteTreeNode>) {
+    const isLeaf = Boolean(formData.leafNode);
+    // 保存节点时,非子节点衍生的保存在该节点的子树里,根据子节点衍生的追加即可,保存的都是叶节点
+    if (!isLeaf && selectedSite.value.id) {
+      formData.parentId = selectedSite.value.id;
+    }
+    formData.leafNode = 1;
+
     saveMonitorSite(formData).then(() => {
       notification.success({ message: '保存成功' });
       // 成功保存后刷新
+      refreshTree({});
       postMonitorOperation(iframeRef.value!, {
         clickType: 'refreshPoint',
         from: 'tank',

+ 0 - 1
src/views/vent/monitor/site/types/siteTree.ts

@@ -2,7 +2,6 @@ export interface TreeNode {
   title: string;
   key: string;
   children: TreeNode[];
-  selectable: boolean;
   leaf: boolean;
   [k: string]: unknown;
 }