更新

src/views/task_template/edit.vue

@@ -105,25 +105,37 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="formData.type == 32" label="起点">
+        <el-form-item
+          v-if="formData.type == 32"
+          label="起点"
+          @click="changeMap(0)"
+        >
           <el-input
             placeholder="请点击上方地图选择地点"
             readonly
-            :value="formData.extend[0]?.address"
+            :value="formData.extend?.origin?.address"
           />
         </el-form-item>
-        <el-form-item v-if="formData.type == 32" label="中转点">
+        <el-form-item
+          v-if="formData.type == 32"
+          label="中转点"
+          @click="changeMap(1)"
+        >
           <el-input
             placeholder="请点击上方地图选择地点"
             readonly
-            :value="formData.extend[1]?.address"
+            :value="formData.extend?.transfer?.address"
           />
         </el-form-item>
-        <el-form-item v-if="formData.type == 32" label="终点">
+        <el-form-item
+          v-if="formData.type == 32"
+          label="终点"
+          @click="changeMap(2)"
+        >
           <el-input
             placeholder="请点击上方地图选择地点"
             readonly
-            :value="formData.extend[2]?.address"
+            :value="formData.extend?.terminus?.address"
           />
         </el-form-item>
         <el-form-item label="状态" prop="status">
@@ -144,7 +156,7 @@
         v-if="mapShow"
         ref="mapRef"
         @success="setMap"
-        @close="mapShow = false"
+        @close=""
       ></taskMap>
     </popup>
   </div>
@@ -194,7 +206,11 @@ const formData = reactive({
   money_two: 0, // 二阶段金额
   money_three: 0, // 长期金额
   types: "", //阶段类型
-  extend: {},
+  extend: {
+    origin: {}, //起点
+    transfer: {}, //中转
+    terminus: {}, //终点
+  },
 });
 
 //任务类型接口
@@ -259,14 +275,35 @@ const mapRef = shallowRef<InstanceType<typeof taskMap>>();
 const changeTaskType = async (e: any) => {
   if (e == 32) {
     mapShow.value = true; //为三轮车时
-    await nextTick();
-    console.log(mapRef.value);
-    mapRef.value?.open();
+    // await nextTick();
+    // mapRef.value?.open();
   }
 };
 
+// 当前点击的地图类型(起,转,终)点
+const mapType = ref("");
+const changeMap = async (e: Number) => {
+  let map_title = "";
+  switch (e) {
+    case 0:
+      mapType.value = "origin";
+      map_title = "起点";
+      break;
+    case 1:
+      mapType.value = "transfer";
+      map_title = "中转点";
+      break;
+    case 2:
+      mapType.value = "terminus";
+      map_title = "终点";
+      break;
+  }
+  await nextTick();
+  mapRef.value?.open(map_title);
+};
+
 const setMap = (e: any) => {
-  formData.extend = e;
+  formData.extend[mapType.value] = e[0];
   console.log("选择了地区", formData.extend);
 };
 

src/views/task_template/map.vue

@@ -2,7 +2,7 @@
   <div class="edit-popup">
     <popup
       ref="popupRef"
-      title="选择地点"
+      :title="title"
       :async="true"
       width="550px"
       @confirm="handleSubmit"
@@ -13,14 +13,16 @@
           <el-input
             style="width: 300px; margin-right: 16px"
             placeholder="请输入要搜索的地址"
+            v-model="searchText"
+            clearable
           />
-          <el-button type="primary">搜索</el-button>
-          <el-button @click="resetMap()">重置</el-button>
+          <el-button type="primary" @click="serach()">搜索</el-button>
+          <!-- <el-button @click="resetMap()">重置</el-button> -->
         </el-form-item>
         <el-form-item label-width="80px" label="地图">
           <MapContainer ref="mapRef" @changeMaps="changeMaps"></MapContainer>
         </el-form-item>
-        <el-form-item label-width="80px" label="起点">
+        <!-- <el-form-item label-width="80px" label="起点">
           <el-input
             style="width: 350px; margin-right: 16px"
             placeholder="请点击上方地图选择地点"
@@ -43,7 +45,7 @@
             readonly
             :value="address[2]?.address"
           />
-        </el-form-item>
+        </el-form-item> -->
       </el-form>
     </popup>
   </div>
@@ -72,6 +74,7 @@ const formRef = shallowRef<FormInstance>();
 const popupRef = shallowRef<InstanceType<typeof Popup>>();
 const mode = ref("add");
 const datalist = ref([]);
+const title = ref("");
 
 // 获取详情
 const setFormData = async (data: Record<any, any>) => {
@@ -98,6 +101,12 @@ const resetMap = () => {
   mapRef.value.resetMap();
 };
 
+// 搜索
+const searchText = ref("");
+const serach = () => {
+  mapRef.value.searchMap(searchText.value);
+};
+
 const address = ref([]);
 const changeMaps = (e: any) => {
   address.value = JSON.parse(JSON.stringify(e));
@@ -112,8 +121,8 @@ const handleSubmit = async () => {
 };
 
 //打开弹窗
-const open = (type = "add") => {
-  mode.value = type;
+const open = (type = "地点") => {
+  title.value = "选择" + type;
   popupRef.value?.open();
 };