更新

src/components/map/MapContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="container"></div>
+  <div id="container" ref="map"></div>
 </template>
 
 <script lang="ts" setup name="mapContainer">
@@ -10,22 +10,27 @@ const map = shallowRef(null);
 
 const initMap = () => {
   AMapLoader.load({
-    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
+    key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
   })
     .then((AMap) => {
-      map = new AMap.Map("container", {
+      map.value = new AMap.Map("container", {
         //设置地图容器id
         viewMode: "2D", //是否为3D地图模式
-        zoom: 5, //初始化地图级别
+        zoom: 10, //初始化地图级别
         center: [105.602725, 37.076636], //初始化地图中心点位置
       });
     })
     .catch((e) => {
-      console.log(e);
+      console.log("地图错误", e);
+      ElMessage.error("未知错误");
     });
 };
+
+onMounted(() => {
+  initMap();
+});
 </script>
 
 
@@ -33,7 +38,7 @@ const initMap = () => {
 #container {
   padding: 0px;
   margin: 0px;
-  width: 100%;
+  width: 400px;
-  height: 800px;
+  height: 400px;
 }
 </style>

src/views/task_template/edit.vue

@@ -119,6 +119,12 @@
           />
         </el-form-item>
       </el-form>
+      <taskMap
+        v-if="mapShow"
+        ref="mapRef"
+        @success="setMap"
+        @close="mapShow = false"
+      ></taskMap>
     </popup>
   </div>
 </template>
@@ -134,6 +140,7 @@ import {
 import { timeFormat } from "@/utils/util";
 import type { PropType } from "vue";
 import { dictDataLists } from "@/api/setting/dict";
+import taskMap from "./map.vue";
 defineProps({
   dictData: {
     type: Object as PropType<Record<string, any[]>>,
@@ -222,9 +229,22 @@ const getDetail = async (row: Record<string, any>) => {
   setFormData(data);
 };
 
+// 地图控件
+const mapShow = ref(false);
+const mapRef = shallowRef<InstanceType<typeof taskMap>>();
+
 // 选择任务类型
-const changeTaskType = (e: any) => {
+const changeTaskType = async (e: any) => {
-  console.log(e);
+  if (e == 32) {
+    mapShow.value = true; //为三轮车时
+    await nextTick();
+    console.log(mapRef.value);
+    mapRef.value?.open();
+  }
+};
+
+const setMap = (e: any) => {
+  console.log("选择了地图", e);
 };
 
 // 提交按钮

src/views/task_template/map.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="edit-popup">
+    <popup
+      ref="popupRef"
+      title="选择地点"
+      :async="true"
+      width="550px"
+      @confirm="handleSubmit"
+      @close="handleClose"
+    >
+      <el-form>
+        <el-form-item label="">
+          <el-input style="width: 300px; margin-right: 16px" />
+          <el-button type="primary">搜索</el-button>
+        </el-form-item>
+        <el-form-item label="地图">
+          <MapContainer></MapContainer>
+        </el-form-item>
+      </el-form>
+    </popup>
+  </div>
+</template>
+  
+  <script lang="ts" setup name="taskTemplateEdit">
+import type { FormInstance } from "element-plus";
+import Popup from "@/components/popup/index.vue";
+import {
+  apiTaskTemplateAdd,
+  apiTaskTemplateEdit,
+  apiTaskTemplateDetail,
+} from "@/api/task_template";
+import { timeFormat } from "@/utils/util";
+import type { PropType } from "vue";
+import { dictDataLists } from "@/api/setting/dict";
+import MapContainer from "@/components/map/MapContainer.vue";
+defineProps({
+  dictData: {
+    type: Object as PropType<Record<string, any[]>>,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(["success", "close"]);
+const formRef = shallowRef<FormInstance>();
+const popupRef = shallowRef<InstanceType<typeof Popup>>();
+const mode = ref("add");
+const datalist = ref([]);
+
+// 获取详情
+const setFormData = async (data: Record<any, any>) => {
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key];
+    }
+  }
+};
+
+const getDetail = async (row: Record<string, any>) => {
+  const data = await apiTaskTemplateDetail({
+    id: row.id,
+  });
+  setFormData(data);
+};
+
+// 地图控件
+const mapShow = ref(false);
+const mapPopupRef = ref(null);
+
+// 选择任务类型
+const changeTaskType = (e: any) => {
+  if (e == 32) {
+    mapShow.value = true; //为三轮车时
+    mapPopupRef.value.open();
+  }
+};
+
+// 提交按钮
+const handleSubmit = async () => {
+  return console.log("ss");
+
+  popupRef.value?.close();
+  emit("success");
+};
+
+//打开弹窗
+const open = (type = "add") => {
+  mode.value = type;
+  popupRef.value?.open();
+};
+
+// 关闭回调
+const handleClose = () => {
+  emit("close");
+};
+
+defineExpose({
+  open,
+  setFormData,
+  getDetail,
+});
+</script>
+