Kaynağa Gözat

项目管理页面 跳转二次确认

duxiangyu 3 yıl önce
ebeveyn
işleme
27f506eefe

+ 5 - 5
src/components/project-manage/components/anchor.vue

@@ -3,7 +3,7 @@
     <div
       class="anchor-item"
       :class="{ active: activeIndex === index }"
-      v-for="(item, index) in anchorList"
+      v-for="(item, index) in points"
       :key="item.value"
       @click="go(item.value, index)"
     >
@@ -30,14 +30,14 @@ export default {
           value: "basic",
         },
         {
-          label: "地理信息",
-          value: "geo",
-        },
-        {
           label: "项目信息",
           value: "project",
         },
         {
+          label: "地理信息",
+          value: "geo",
+        },
+        {
           label: "商业信息",
           value: "business",
         },

+ 45 - 4
src/components/project-manage/components/geo.vue

@@ -32,10 +32,17 @@ export default {
         };
       },
     },
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
   data() {
     return {
       map: null,
+      geocoder: null,
       inputVal2: "",
       autocomplete: null,
       markers: [], // 标记数组
@@ -53,16 +60,28 @@ export default {
       AMapLoader.load({
         key: window.__systemConf.mapKey,
         version: "2.0",
-        plugins: [],
+        plugins: ["AMap.Geocoder"],
       }).then((Amap) => {
         _this.map = new Amap.Map("map-container", {
           zoom: 11,
           resizeEnable: true,
+          center: [this.geoFormData.longitude, this.geoFormData.latitude],
         });
-        this.addMarker(Amap, {
-          lng: this.geoFormData.longitude,
-          lat: this.geoFormData.latitude,
+        this.geocoder = new Amap.Geocoder({
+          radius: 1000,
         });
+        _this.map.on("click", (e) => {
+          console.log(e);
+          this.regeoCode(e.lnglat);
+        });
+        this.addMarker(
+          Amap,
+          {
+            lng: this.geoFormData.longitude,
+            lat: this.geoFormData.latitude,
+          },
+          this.geoFormData.address
+        );
         Amap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], () => {
           const autoOptions = {
             input: "tipinput",
@@ -123,6 +142,20 @@ export default {
     clearMarker() {
       this.markers.forEach((marker) => this.map.remove(marker));
     },
+    regeoCode(lnglat) {
+      this.geocoder.getAddress(lnglat, (status, result) => {
+        if (status === "complete" && result.regeocode) {
+          const address = result.regeocode.formattedAddress;
+          console.log(address);
+          this.geoFormData.address = address;
+          this.geoFormData.longitude = lnglat.lng.toString();
+          this.geoFormData.latitude = lnglat.lat.toString();
+          this.$emit("change", this.geoFormData);
+        } else {
+          log.error("根据经纬度查询地址失败");
+        }
+      });
+    },
   },
 };
 </script>
@@ -152,8 +185,16 @@ export default {
 }
 /deep/ .amap-marker-label {
   // background-color: red;
+  width: 120px;
+  // height: 40px;
+  // word-wrap: break-word;
+  white-space: pre-wrap;
   background: #ffffff;
   border-radius: 4px;
   padding: 8px 4px 8px 8px;
+  .info {
+    // height: 40px;
+    word-wrap: break-word;
+  }
 }
 </style>

+ 16 - 1
src/components/project-manage/form/index.vue

@@ -2,11 +2,17 @@
   <div class="basic-container">
     <Title :name="itemProps.label" />
     <div class="basic-content">
-      <GeoComp v-if="itemProps.label === '地理位置'" @change="geoChange" />
+      <GeoComp
+        v-if="itemProps.label === '地理位置'"
+        :PropInfo="geoInfo"
+        @change="geoChange"
+      />
       <div
         :class="[
           'basic-item',
           { all: item.dataType === 'ATTACHMENT' || item.code === 'projIntro' },
+          { 'project-container': itemProps.label === '项目信息' },
+          { 'business-container': itemProps.label === '商业信息' },
         ]"
         v-for="(item, index) in itemProps.child"
         :key="item.id"
@@ -59,6 +65,15 @@ export default {
       },
     },
   },
+  computed: {
+    geoInfo() {
+      return {
+        address: this.info.infos.address, // 详细地址
+        longitude: this.info.infos.longitude, // 经度
+        latitude: this.info.infos.latitude, // 纬度
+      };
+    },
+  },
   methods: {
     filterType(type) {
       return dataTypeEnum[type];

+ 19 - 3
src/components/project-manage/form/items/select.vue

@@ -4,7 +4,13 @@
   <el-cascader
     v-model="value"
     :options="mapList(selectData)"
-    :props="{ checkStrictly: true }"
+    :props="{
+      checkStrictly: true,
+      value: 'id',
+      label: 'name',
+      emitPath: false,
+      multiple: formItemObj.isMultiple,
+    }"
     @change="change"
     clearable
   ></el-cascader>
@@ -24,19 +30,28 @@ export default {
         return "";
       },
     },
+    formItemObj: {
+      type: Object,
+      default: () => {
+        return { isMultiple: false };
+      },
+    },
   },
   data() {
     return {
-      value: "",
+      value: this.initValue,
       treeList: [{ id: "1", name: "11" }],
     };
   },
+  mounted() {
+    console.log(this.formItemObj);
+  },
   methods: {
     openNode() {
       console.log(111);
     },
     change(item) {
-      console.log(item, 111);
+      this.$emit("change", item);
       // this.$emit("change", result);
     },
     mapList(list) {
@@ -62,6 +77,7 @@ export default {
       for (i = 0; i < list.length; i += 1) {
         node = list[i];
         if (node.parentCode) {
+          // map[node.parentCode].children = [];
           map[node.parentCode].children.push(node);
         } else {
           tree.push(node);

+ 35 - 1
src/components/project-manage/index.vue

@@ -18,6 +18,12 @@
         <Button type="primary" @click="save">保存</Button>
       </div>
     </div>
+    <Modal :show="modalStatusTip" title="提示" mode="tip" type="info">
+      <template #content> 填写内容未保存,确定保存吗? </template>
+      <template #handle>
+        <Button>11</Button>
+      </template>
+    </Modal>
   </div>
 </template>
 <script>
@@ -57,6 +63,9 @@ export default {
       anchorList: [],
       info: {},
       refresh: false,
+      modalStatusTip: false,
+      isSaved: true,
+      hasChange: false,
     };
   },
   computed: {
@@ -112,7 +121,7 @@ export default {
     },
     goAnchor(anchor) {
       let name = anchor;
-      let dom = document.querySelector(`.${name}`);
+      let dom = document.querySelector(`.${name}-container`);
       let right = document.querySelector(".right");
       if (dom && right) {
         right.scrollTop = dom.offsetTop - 120;
@@ -121,6 +130,8 @@ export default {
     save() {
       ScanController.updateProjectInfo({ content: [this.info] }).then((res) => {
         this.$message.success("保存成功");
+        this.isSaved = true;
+        this.hasChange = false;
       });
       console.log(this.info);
     },
@@ -156,6 +167,8 @@ export default {
             this.info[pathArr[0]] = value;
           }
         }
+        this.hasChange = true;
+        this.isSaved = false;
         console.log(this.info, "info");
       });
     },
@@ -174,6 +187,27 @@ export default {
       // this.openLoading();
     },
   },
+  beforeRouteLeave(to, from, next) {
+    if (this.hasChange && !this.isSaved) {
+      // this.modalStatusTip = true;
+      next(false);
+      this.$confirm("填写内容未保存,确定保存吗?", "提示", {
+        confirmButtonText: "保存",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.save();
+          // 选择确定
+          next();
+        })
+        .catch(() => {
+          next();
+        });
+    } else {
+      next();
+    }
+  },
 };
 </script>
 <style lang="less" scoped>