调整地图设计器数据结构

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

@@ -1,68 +1,20 @@
 <template>
   <div class="amap-designer">
-    <div v-show="mapProps.sidebarControl" class="headToolbar">
+    <Toolbar v-show="toolbarControl"
-      <ATooltip v-if="toolbar.includes('save')"
+             class="headToolbar"
-                title="保存并发布"
+             :default-zoom="mapState.defaultZoom"
-                placement="bottom"
+             :toolbar="toolbar"
-                :arrowPointAtCenter="true"
+             @save="handleMapSave"
-      >
+             @addTask="handleOpenTask"
-        <a-button type="primary" @click="handleMapSave">
+             @point="handleOpenMapPoint"
-          <Icon icon="fa6-regular:floppy-disk" size="13"/>保存
+             @zoomIn="handleMapZoomIn"
-        </a-button>
+             @zoomOut="handleMapZoomOut"
-      </ATooltip>
+             @reset="handleMapReset"
-      <ATooltip v-if="toolbar.includes('addTask')"
+    />
-                title="新增任务"
-                placement="bottom"
-                :arrowPointAtCenter="true"
-      >
-        <a-button type="primary" @click="handleOpenTask">
-          <Icon icon="fa6-regular:window-restore" size="13"/>任务
-        </a-button>
-      </ATooltip>
-      <ATooltip v-if="toolbar.includes('point')"
-                title="调整标记点"
-                placement="bottom"
-                :arrowPointAtCenter="true"
-      >
-        <a-button type="primary" @click="handleOpenMapPoint">
-          <Icon icon="fa6-solid:location-dot" size="13"/>标记点
-        </a-button>
-      </ATooltip>
-      <ATooltip v-if="toolbar.includes('zoomIn')"
-                title="放大"
-                placement="bottom"
-                :arrowPointAtCenter="true"
-      >
-        <a-button :disabled="mapState.defaultZoom >= 9" @click="handleMapZoomIn">
-          <Icon icon="fa6-solid:magnifying-glass-plus" size="13"/>
-        </a-button>
-      </ATooltip>
-      <a-button>
-        {{ Math.ceil(mapState.defaultZoom * 10 * 1.1) + "%" }}
-      </a-button>
-      <ATooltip v-if="toolbar.includes('zoomOut')"
-                title="缩小"
-                placement="bottom"
-                :arrowPointAtCenter="true"
-      >
-        <a-button :disabled="mapState.defaultZoom <= 0" @click="handleMapZoomOut">
-          <Icon icon="fa6-solid:magnifying-glass-minus" size="13"/>
-        </a-button>
-      </ATooltip>
-      <ATooltip v-if="toolbar.includes('reset')"
-                title="重置"
-                placement="bottom"
-                :arrowPointAtCenter="true"
-      >
-        <a-button @click="handleMapReset">
-          <Icon icon="fa-solid:broom" size="13"/>
-        </a-button>
-      </ATooltip>
-    </div>
     <div id="mapview" ref="mapview">
       <div id="mapPanel" ref="mapPanel"/>
     </div>
-    <div v-show="mapProps.sidebarControl" class="operatePanel">
+    <div v-show="sidebarControl" class="operatePanel">
       <div class="operatePanel-arrow" @click="toggleOperatePanel()">
         <span title="展开">‹</span>
         <p title="隐藏">›</p>
@@ -132,8 +84,6 @@
   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 AButton from '/@/components/Button/src/BasicButton.vue';
-  import { Icon } from '/@/components/Icon';
   import { useUserStore } from '/@/store/modules/user';
   import { split, divide, subtract, merge, isEmpty, cloneDeep } from 'lodash-es';
   import componentSetting from '/@/settings/componentSetting';
@@ -142,6 +92,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { listMapTaskPreset } from '/@/api/platform/common/controller/mapTaskPreset';
   import { defaultMapData } from '/@/enums/amapEnum';
+  import Toolbar from '../components/Toolbar.vue';
 
   /** 类型规范统一声明定义区域 */
   interface MapState {
@@ -709,11 +660,11 @@
   function handleMapReset() {
     nextTick(()=> {
       // 清除地图
-      map.resize();
+      map?.resize();
-      map.clearMap();
+      map?.clearMap();
       // 清除表单数据
-      formElRef.value.resetFields();
+      formElRef.value?.resetFields();
-      formElRef.value.clearValidate();
+      formElRef.value?.clearValidate();
       // 清除地图数据
       mapState.mapData.courierUserName = '';
       mapState.mapData.courierLng = undefined;
@@ -725,8 +676,7 @@
       mapState.mapData.mapLogisticPoint = [];
       setTableData([]);
       // 重置地图画布
-      map.setZoomAndCenter(mapState.mapConfig.options.zoom, mapState.mapConfig.options.center);
+      map?.setZoomAndCenter(mapState.mapConfig.options.zoom, mapState.mapConfig.options.center);
-      mapState.defaultZoom = mapState.mapConfig.options.zoom;
     });
   }
 
@@ -811,22 +761,8 @@
   }
 
   .headToolbar {
-    padding: 0 20px;
-    background-color: white;
     border: 1px solid @borderColor;
-    position: absolute;
-    top: 0;
-    left: 0;
     right: @siderWidth;
-    bottom: 0;
-    text-align: left;
-    line-height: 50px!important;
-    height: 50px !important;
-
-    .ant-btn  {
-      font-size: 13px;
-      margin-right: 1px;
-    }
   }
 }
 

src/components/AMap/src/components/Toolbar.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="headToolbar">
+    <ATooltip v-if="toolbar.includes('save')"
+              title="保存并发布"
+              placement="bottom"
+              :arrowPointAtCenter="true"
+    >
+      <a-button type="primary" @click="emit('save')">
+        <Icon icon="fa6-regular:floppy-disk" size="13"/>保存
+      </a-button>
+    </ATooltip>
+    <ATooltip v-if="toolbar.includes('addTask')"
+              title="新增任务"
+              placement="bottom"
+              :arrowPointAtCenter="true"
+    >
+      <a-button type="primary" @click="emit('addTask')">
+        <Icon icon="fa6-regular:window-restore" size="13"/>任务
+      </a-button>
+    </ATooltip>
+    <ATooltip v-if="toolbar.includes('point')"
+              title="调整标记点"
+              placement="bottom"
+              :arrowPointAtCenter="true"
+    >
+      <a-button type="primary" @click="emit('point')">
+        <Icon icon="fa6-solid:location-dot" size="13"/>标记点
+      </a-button>
+    </ATooltip>
+    <ATooltip v-if="toolbar.includes('zoomIn')"
+              title="放大"
+              placement="bottom"
+              :arrowPointAtCenter="true"
+    >
+      <a-button :disabled="defaultZoom >= 9" @click="emit('zoomIn')">
+        <Icon icon="fa6-solid:magnifying-glass-plus" size="13"/>
+      </a-button>
+    </ATooltip>
+    <a-button>
+      {{ Math.ceil(defaultZoom * 10 * 1.1) + "%" }}
+    </a-button>
+    <ATooltip v-if="toolbar.includes('zoomOut')"
+              title="缩小"
+              placement="bottom"
+              :arrowPointAtCenter="true"
+    >
+      <a-button :disabled="defaultZoom <= 0" @click="emit('zoomOut')">
+        <Icon icon="fa6-solid:magnifying-glass-minus" size="13"/>
+      </a-button>
+    </ATooltip>
+    <ATooltip v-if="toolbar.includes('reset')"
+              title="重置"
+              placement="bottom"
+              :arrowPointAtCenter="true"
+    >
+      <a-button @click="emit('reset')">
+        <Icon icon="fa-solid:broom" size="13"/>
+      </a-button>
+    </ATooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { PropType } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { Tooltip } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+
+  /** 通用变量统一声明区域 */
+  const toolbarProps = defineProps({
+    defaultZoom: propTypes.number.def(1),
+    toolbar: {
+      type: Array as PropType<string[]>,
+      default: () => ['save', 'addTask', 'point', 'zoomIn', 'zoomOut', 'reset']
+    },
+  });
+  const emit = defineEmits(['save', 'addTask', 'point', 'zoomIn', 'zoomOut', 'reset']);
+  const ATooltip = Tooltip;
+
+</script>
+
+<style lang="less" scoped>
+
+  .headToolbar {
+    padding: 0 20px;
+    background-color: white;
+    border: 1px solid #e0e0e0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: left;
+    line-height: 50px!important;
+    height: 50px !important;
+
+    .ant-btn  {
+      font-size: 13px;
+      margin-right: 1px;
+    }
+  }
+
+</style>