Browse Source

地图通过定位获取地址

Qukatie 1 tuần trước cách đây
mục cha
commit
593feda679
2 tập tin đã thay đổi với 84 bổ sung21 xóa
  1. 8 1
      src/api/store/customerInformation.js
  2. 76 20
      src/views/store/detailsPage.vue

+ 8 - 1
src/api/store/customerInformation.js

@@ -8,7 +8,14 @@ export function areaTypeTree() {
         method: 'get'
     })
 }
-
+//解析地址
+export function getAddressMessage(params) {
+    return request({
+        url: '/api/gubersail-admin/corpsAddr/getAddressMessage',
+        method: 'get',
+        params: params
+    })
+}
 
 // 创建用户2
 export function creatingUsersTwo(params) {

+ 76 - 20
src/views/store/detailsPage.vue

@@ -210,7 +210,23 @@
               v-model="row.defaultAddres"
               @change="addressUnique(row, index)"
             >
-            </el-switch>
+            </el-switch> </template
+          >detailedAddress
+          <template slot="detailedAddress" slot-scope="{ row, index, disabled }">
+            <!-- <el-input
+              v-model="row.detailedAddress"
+              @focus="openMap"
+            >
+            </el-input> -->
+            <avue-input-map
+              v-if="row.$cellEdit"
+              size="small"
+              :params="params"
+              placeholder="请选择地图"
+              v-model="row.map"
+              @change="mapChage($event, row)"
+            ></avue-input-map>
+            <span v-else>{{ row.detailedAddress }}</span>
           </template>
         </avue-crud>
       </trade-card>
@@ -286,6 +302,7 @@ import {
   creatingUsersTwo,
   submitApply,
   review,
+  getAddressMessage,
 } from "@/api/store/customerInformation";
 import { getRoleTree } from "@/api/system/role";
 import { getDeptTree } from "@/api/system/dept";
@@ -299,6 +316,13 @@ export default {
   name: "index",
   data() {
     return {
+      params: {
+        zoom: 14,
+        dialogClickModal: true,
+        // zoomEnable: false,
+        // dragEnable: false,
+      },
+      mapStatus: true,
       labelKey: Date.now(),
       labelVisible: false,
       propsCk: {
@@ -601,28 +625,28 @@ export default {
           {
             label: "所属地区",
             prop: "belongtoarea",
-            dicData: [],
-            dataType: "string",
-            type: "cascader",
-            emitPath: false,
-            props: {
-              label: "name",
-              value: "code",
-            },
-            rules: [
-              {
-                required: true,
-                message: " ",
-                trigger: "blur",
-              },
-            ],
-            filterable: true,
-            cell: true,
+            // dicData: [],
+            // dataType: "string",
+            // type: "cascader",
+            // emitPath: false,
+            // props: {
+            //   label: "name",
+            //   value: "code",
+            // },
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: " ",
+            //     trigger: "blur",
+            //   },
+            // ],
+            // filterable: true,
+            // cell: true,
           },
           {
             label: "详细地址",
             prop: "detailedAddress",
-            cell: true,
+            // cell: true,
             rules: [
               {
                 required: true,
@@ -761,6 +785,31 @@ export default {
     }, 100);
   },
   methods: {
+    openMap() {
+      this.$refs.amap.box = true;
+    },
+    mapChage(val, row) {
+      if (val.length == 3 && this.mapStatus == true) {
+        let obj = {
+          location: val[0] + "," + val[1],
+        };
+        row.longitude = val[0];
+        row.dimension = val[1];
+        row.detailedAddress = val[2];
+        this.mapStatus = false;
+        getAddressMessage(obj)
+          .then((res) => {
+            let addressComponent = res.data.data.regeocode.addressComponent;
+            // row.belongtoarea = addressComponent.province + addressComponent.city + addressComponent.district;
+            this.$set(row,'belongtoarea', addressComponent.province + addressComponent.city + addressComponent.district)
+          })
+          .finally(() => {
+            this.mapStatus = true;
+          });
+      }
+
+      console.log(val, 1111);
+    },
     uploadAfter(res, done, loading, column) {
       let obj = {
         url: res.link,
@@ -954,6 +1003,13 @@ export default {
           } else {
             this.$set(this.option, "disabled", false);
           }
+          res.data.data.corpsAddrList.forEach((item) => {
+            if (item.longitude && item.dimension && item.detailedAddress) {
+              item.map = [item.longitude, item.dimension, item.detailedAddress];
+            } else {
+              item.map = [];
+            }
+          });
           this.data = res.data.data.corpsAddrList;
           this.corpsFiles = res.data.data.corpsFilesList;
           this.contactsData = res.data.data.corpsAttnList;
@@ -964,7 +1020,7 @@ export default {
         });
     },
     addRow() {
-      this.data.push({ $cellEdit: true });
+      this.data.push({ longitude: null, dimension: null, detailedAddress: null, map: [], $cellEdit: true });
     },
     rowDel(row, index) {
       this.$confirm("确定删除数据?", {