调整地图设计器数据结构

src/components/AMap/src/AMapDesigner/index.vue

@@ -5,7 +5,7 @@
                 placement="bottom"
                 :arrowPointAtCenter="true"
       >
-        <a-button type="primary" @click="">
+        <a-button type="primary" @click="handleMapSave">
           <Icon icon="fa6-regular:floppy-disk" size="13"/>保存
         </a-button>
       </ATooltip>
@@ -65,16 +65,36 @@
         <AForm ref="formElRef"
                :labelCol="{ style: { width: '80px' } }"
                :wrapperCol="{ style: { width: '100%', 'margin-right': '10px' } }"
-               :model="mapState.modelRef"
+               :model="mapState.mapData"
+               :rules="mapState.rulesRef"
+               :scrollToFirstError="true"
         >
-          <AFormItem label="发单">
-            <ASelect v-model:value="mapState.modelRef.sendOrderId"
+          <AFormItem label="名称" name="name">
+            <a-input v-model:value="mapState.mapData.name"
+                     placeholder="请输入地图名称"
+                     allowClear
+            />
+          </AFormItem>
+          <AFormItem label="发单" name="sendOrderId">
+            <ASelect v-model:value="mapState.mapData.sendOrderId"
                      :options="mapState.hospitalList"
                      @select="handleCourierUserSearch"
             />
           </AFormItem>
-          <AFormItem label="起点">
-            <ASelect v-model:value="mapState.modelRef.courierUserId" :options="mapState.courierUserList"/>
+          <AFormItem label="起点" name="courierUserId">
+            <ASelect v-model:value="mapState.mapData.courierUserId" :options="mapState.courierUserList"/>
+          </AFormItem>
+          <AFormItem label="文件" name="fileId">
+            <BasicUpload v-model:value="mapState.mapData.fileId"
+                         :maxSize="20"
+                         :maxNumber="10"
+                         :showPreviewNumber="false"
+                         :emptyHidePreview="true"
+                         :showUploadSaveBtn="true"
+                         :api="commonUpload"
+                         :accept="['image/*']"
+                         multiple
+            />
           </AFormItem>
         </AForm>
       </div>
@@ -82,14 +102,14 @@
         <BasicTable @register="registerTable"/>
       </div>
     </div>
-    <TaskModal @register="registerModal" @success=""/>
-    <MapPointModal @register="mapPointRegisterModal" @success=""/>
+    <MapTaskModal @register="registerModal" @success="handleMapTask"/>
+    <MapPointModal @register="mapPointRegisterModal" @success="handleMapPoint"/>
   </div>
 </template>
 <script lang="ts" setup>
   import AMapLoader from '@amap/amap-jsapi-loader';
   import { reactive, watchEffect, getCurrentInstance, onBeforeMount, onUnmounted, ref } from 'vue';
-  import { columns } from '../amap.data';
+  import { operatePanelColumns } from '../amap.data';
   import hospital from '/@/assets/images/hospital.svg';
   import medicalKit from '/@/assets/images/medical-kit.svg';
   import hospitalTwinkle from '/@/assets/images/hospital-twinkle.gif';
@@ -97,7 +117,7 @@
   import { Form, Select, Tooltip } from 'ant-design-vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
-  import TaskModal from '../components/TaskModal.vue';
+  import MapTaskModal from '../components/MapTaskModal.vue';
   import MapPointModal from '../components/MapPointModal.vue';
   import { propTypes } from '/@/utils/propTypes';
   import { listHospital } from '/@/api/platform/common/controller/hospital';
@@ -108,6 +128,8 @@
   import { useUserStore } from '/@/store/modules/user';
   import { split, divide, subtract } from 'lodash-es';
   import componentSetting from '/@/settings/componentSetting';
+  import { BasicUpload } from '/@/components/Upload';
+  import { commonUpload } from '/@/api/platform/core/controller/upload';
 
   /** 类型规范统一声明定义区域 */
   type MapCommonType = {
@@ -123,16 +145,33 @@
     defaultZoom: number;
     toggleOperatePanelClass: Recordable;
     toggleStatus: boolean;
-    modelRef: Recordable;
     courierUserList: MapCommonType[];
     hospitalList: MapCommonType[];
     orgList: MapCommonType[];
-    mapTask: Recordable[];
-    mapLogisticPoint: Recordable[];
     mapConfig: {
       amapKey: string;
       options: Recordable;
     };
+    mapData: {
+      name: string;
+      courierUserId: string;
+      courierUserName: string;
+      courierLng: number | undefined;
+      courierLat: number | undefined;
+      sendOrderId: string;
+      sendOrderName: string;
+      sendOrderLng: number | undefined;
+      sendOrderLat: number | undefined;
+      fileId: string[];
+      estimateTime: string;
+      requireTime: string;
+      /** 地图任务数据 */
+      mapTask: Recordable[];
+      /** 地图预览点数据 */
+      mapLogisticPoint: Recordable[];
+      [key: string]: any;
+    };
+    rulesRef: Recordable;
   }
 
   const mapProps = defineProps({
@@ -150,34 +189,24 @@
   const instance = getCurrentInstance();
   const { mapDesigner } = componentSetting;
   const mapState = reactive<MapState>({
+    /** 遮罩层状态 */
     loading: false,
-    defaultZoom: 1,
+    /** 默认缩放大小 */
+    defaultZoom: 7,
+    /** 面板类样式属性 */
     toggleOperatePanelClass: {
       span: 'none',
       p: 'block',
       siderWidth: 371
     },
+    /** 面板(显示/隐藏)状态 */
     toggleStatus: true,
-    modelRef: {
-      sendOrderId: '',
-      courierUserId: ''
-    },
     /** 收样员集合收样员集合 */
     courierUserList: [],
     /** 下级医院集合 */
     hospitalList: [],
     /** 上级医检集合 */
     orgList: [],
-    /** 地图任务数据 */
-    mapTask:  [{
-      id: '001',
-      taskName: '测试任务1'
-    },{
-      id: '002',
-      taskName: '测试任务2'
-    }],
-    /** 地图预览点数据 */
-    mapLogisticPoint: [],
     /** 地图配置数据 */
     mapConfig: {
       amapKey: 'f278d021a80dcf81f071aee5bff08804',
@@ -190,6 +219,41 @@
         keyboardEnable: true,
         zooms: [2, 20]
       }
+    },
+    /** 地图物流数据 */
+    mapData: {
+      name: '',
+      courierUserId: '',
+      courierUserName: '',
+      courierLng: undefined,
+      courierLat: undefined,
+      sendOrderId: '',
+      sendOrderName: '',
+      sendOrderLng: undefined,
+      sendOrderLat: undefined,
+      fileId: [],
+      estimateTime: '',
+      requireTime: '',
+      /** 地图任务数据 */
+      mapTask: [{
+        name: '宇宙任务',
+        taskType: '0',
+        mapTaskPreset: []
+      }],
+      /** 地图预览点数据 */
+      mapLogisticPoint: [],
+    },
+    /** 表单校验 */
+    rulesRef: {
+      name: [
+        { required: true, whitespace: true, message: '地图名称不能为空', validateTrigger: 'blur' }
+      ],
+      sendOrderId: [
+        { required: true, whitespace: true, message: '发单点不能为空', validateTrigger: 'blur' }
+      ],
+      courierUserId: [
+        { required: true, whitespace: true, message: '起点不能为空', validateTrigger: 'blur' }
+      ]
     }
   });
 
@@ -201,8 +265,8 @@
   const [registerTable, { reload }] = useTable({
     title: '任务列表',
     rowKey: 'id',
-    dataSource: mapState.mapTask,
-    columns,
+    dataSource: mapState.mapData?.mapTask,
+    columns: operatePanelColumns,
     resizeHeightOffset: 80,
     showTableSetting: true,
     tableSetting: {
@@ -432,14 +496,13 @@
         zIndex: 50
       });
 
-
-      // todo: 修改
-
-      // 构造路线导航类`
+      // 构造路线导航类
       driving = new AMap.Driving({
         map: map,
         panel: instance.refs.mapPanel
       });
+
+      // todo: 修改时候才能加载
       // 根据起终点经纬度规划驾车导航路线
       driving.search(new AMap.LngLat(112.913864, 28.295114), new AMap.LngLat(112.918119, 28.282891), {
         waypoints:[new AMap.LngLat(112.919165, 28.289924)]
@@ -527,7 +590,7 @@
 
   /** 处理打开任务配置 */
   function handleOpenTask() {
-    openModal(true, { driving, formData: mapState.modelRef });
+    openModal(true, { driving, formData: mapState.mapData });
   }
 
   /** 处理打开地图标记点配置 */
@@ -545,6 +608,21 @@
     map.zoomOut();
   }
 
+  /** 处理地图保存并发布 */
+  function handleMapSave() {
+
+  }
+
+  /** 处理地图任务数据 */
+  function handleMapTask() {
+
+  }
+
+  /** 处理地图标记点数据 */
+  function handleMapPoint() {
+
+  }
+
   /** 处理地图重置 */
   function handleMapReset() {
     // 清除地图
@@ -554,8 +632,8 @@
     formElRef.value.resetFields();
     formElRef.value.clearValidate();
     // 清除任务数据
-    mapState.mapTask = [];
-    mapState.mapLogisticPoint = [];
+    mapState.mapData.mapTask = [];
+    mapState.mapData.mapLogisticPoint = [];
     // 重置地图画布
     map.setZoomAndCenter(mapState.mapConfig.options.zoom, mapState.mapConfig.options.center);
     mapState.defaultZoom = mapState.mapConfig.options.zoom;
@@ -676,4 +754,3 @@
 }
 
 </style>
-`

src/components/AMap/src/amap.data.ts

@@ -3,6 +3,8 @@ import { listHospital } from '/@/api/platform/common/controller/hospital';
 import { listUser } from '/@/api/platform/system/controller/user';
 import { listOrg } from '/@/api/platform/common/controller/org';
 import { commonUpload } from '/@/api/platform/core/controller/upload';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
 
 /**
  * @program: kicc-ui
@@ -32,15 +34,41 @@ export const smallHospitalMapList: mapType[] = [
   {id: '003', title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, notify: true}
 ];
 
-export const columns: BasicColumn[] = [
+/** 操作面板表格列 */
+export const operatePanelColumns: BasicColumn[] = [
   {
     title: '任务名称',
-    dataIndex: 'taskName'
+    dataIndex: 'name'
+  },
+  {
+    title: '任务类型',
+    dataIndex: 'taskType',
+    customRender: ({ record }) =>{
+      const type = record.taskType;
+      let text = '', color = '';
+      switch (type) {
+        case '0':
+          text = '普通任务';
+          color = 'green';
+          break;
+        case '1':
+          text = '交接任务';
+          color = 'red';
+          break;
+      }
+      return h(Tag, { color: color }, () => text);
+    }
   }
 ];
 
-/** 表格普通任务列 */
+/** 普通任务表格列 */
 export const taskColumns: BasicColumn[] = [
+  {
+    title: '任务名称',
+    dataIndex: 'name',
+    editRow: true,
+    editRule: true
+  },
   {
     title: '医院',
     dataIndex: 'hospitalId',
@@ -97,8 +125,14 @@ export const taskColumns: BasicColumn[] = [
   }*/
 ];
 
-/** 表格任务预设列 */
+/** 任务预设表格列 */
 export const taskPresetColumns: BasicColumn[] = [
+  {
+    title: '任务名称',
+    dataIndex: 'name',
+    editRow: true,
+    editRule: true
+  },
   {
     title: '医院',
     dataIndex: 'hospitalId',
@@ -209,14 +243,3 @@ export const formMutualTaskSettingColumns: BasicColumn[] = [
     }
   }*/
 ];
-
-export const formMapDataSettingsColumns = [
-  {
-    title: '标记点ID',
-    dataIndex: 'markId'
-  },
-  {
-    title: '标记点名称',
-    dataIndex: 'markName'
-  }
-];

src/components/AMap/src/components/MapTaskModal.vue

@@ -40,7 +40,7 @@
   import { BasicTable, useTable, EditRecordRow, BasicColumn, ActionItem, TableAction } from '/@/components/Table';
   import { taskColumns, taskPresetColumns, largeHospitalMapList, smallHospitalMapList, } from '../amap.data';
   import { buildUUID } from '/@/utils/uuid';
-  import TaskPresetModal from './TaskPresetModal.vue';
+  import TaskPresetModal from './MapTaskPresetModal.vue';
 
   /** 类型规范统一声明定义区域 */
   interface WindowState {