BUG 54

project/qujing/app/AppConflictMediation/AppConflictMediation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="AppConflictMediation">
     <keep-alive :include="['List']">
-      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+      <component :is="currentPage" v-bind="$props"/>
     </keep-alive>
   </div>
 </template>
@@ -13,45 +13,16 @@ import Detail from './components/Detail'
 export default {
   name: 'AppConflictMediation',
   label: '矛盾调解',
-
   props: {
     instance: Function,
     dict: Object
   },
-
-  data() {
-    return {
-      component: 'List',
-      params: {}
-    }
+  computed: {
+    currentPage: v => v.$route.hash == "#add" ? Detail : List
   },
-
   components: {
     List,
     Detail
-  },
-
-  mounted() {
-  },
-
-  methods: {
-    onChange(data) {
-      if (data.type === 'Detail') {
-        this.component = 'Detail'
-        this.params = data.params
-      }
-
-      if (data.type === 'list') {
-        this.component = 'List'
-        this.params = data.params
-
-        this.$nextTick(() => {
-          if (data.isRefresh) {
-            this.$refs.component.getList()
-          }
-        })
-      }
-    }
   }
 }
 </script>

project/qujing/app/AppConflictMediation/components/Detail.vue

@@ -18,7 +18,7 @@
               </ai-info-item>
               <ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
               <ai-info-item label="事件位置" isLine>
-                <div id="map" style="width: 500px; height: 280px;"></div>
+                <ai-map class="eventMap" :map.sync="map" :lib.sync="AMap"/>
               </ai-info-item>
             </ai-wrapper>
           </template>
@@ -28,7 +28,7 @@
             <template #content>
               <el-steps direction="vertical" :active="1">
                 <el-step v-for="(item, i) in processList" :key="i"
-                    :title="item.systemExplain" :description="item.doTime">
+                         :title="item.systemExplain" :description="item.doTime">
                   <template #title>
                     <h2 class="step-title" style="font-weight: 500; font-size: 14px;">
                       {{ item.user }}
@@ -51,18 +51,18 @@
 </template>
 
 <script>
-import AMapLoader from '@amap/amap-jsapi-loader'
 import {mapState} from 'vuex'
 
 export default {
   name: 'Detail',
-  props: ['dict', 'instance', 'params'],
-
+  props: ['dict', 'instance'],
   data() {
     return {
       isLoading: true,
       detail: {},
-      processList: []
+      processList: [],
+      map: null,
+      AMap: null
     }
   },
 
@@ -71,42 +71,29 @@ export default {
   },
 
   created() {
-    this.dict.load('conflictEventStatus').then(() => {
-      this.getDetail()
-    })
+    this.dict.load('conflictEventStatus').then(() => this.getDetail())
   },
 
   methods: {
     getDetail() {
+      const {id} = this.$route.query
       this.instance.post('/app/appconflicteventinfo/queryDetailById', null, {
-        params: {id: this.params.id}
+        params: {id}
       }).then(res => {
         if (res?.data) {
           this.detail = res.data
           this.processList = res.data.processList.map(item => {
-            item.user = /\$(.+?)\$/g.exec(item.systemExplain)[1]
+            item.user = item.girdMemberName
             item.title = item.systemExplain.replace(/\$(.+?)\$/g, '')
-
+            this.RenderPosition()
             return item
           })
-
-          this.$nextTick(() => {
-            this.initMap()
-          })
-          this.isLoading = false
         }
-      }).catch(() => {
-        this.isLoading = false
-      })
+      }).finally(() => this.isLoading = false)
     },
-
-    cancel(isRefresh) {
-      this.$emit('change', {
-        type: 'list',
-        isRefresh: !!isRefresh
-      })
+    cancel() {
+      this.$router.push({})
     },
-
     onChange(e) {
       this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
         if (res.code === 0) {
@@ -115,25 +102,17 @@ export default {
         }
       })
     },
-
-    initMap() {
-      let {lng, lat} = this.detail
-      let center = [lng, lat]
-      AMapLoader.load({
-        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
-        version: '2.0'
-      }).then(AMap => {
-        let map = new AMap.Map('map', {
-          center,
-          zoom: 14
-        })
-        let marker = new AMap.Marker({
+    RenderPosition() {
+      const {AMap, map, detail: {lng, lat, address}} = this
+      this.$load(map).then(() => {
+        const marker = new AMap.Marker({
           position: new AMap.LngLat(lng, lat),
-          title: this.detail.address
+          title: address
         })
         map.add(marker)
+        map.setFitView()
       })
-    }
+    },
   }
 }
 </script>
@@ -163,27 +142,6 @@ export default {
     }
   }
 
-  .imgs {
-    font-size: 0;
-
-    img {
-      width: 108px;
-      height: 108px;
-      margin-right: 4px;
-      margin-bottom: 4px;
-      cursor: pointer;
-      user-select: none;
-
-      &:hover {
-        opacity: 0.8;
-      }
-
-      &:nth-of-type(2n) {
-        margin-right: 0;
-      }
-    }
-  }
-
   :deep( .el-step__head.is-process ) {
     color: #555;
     border-color: #555;
@@ -233,6 +191,11 @@ export default {
     }
   }
 
+  .eventMap {
+    width: 500px;
+    height: 300px;
+  }
+
   :deep( .el-card ) {
     .el-card__header {
       padding: 12px 16px;
@@ -243,10 +206,6 @@ export default {
       padding: 8px;
     }
 
-    #amap {
-      width: 466px;
-      height: 232px;
-    }
 
     .el-steps {
       margin-left: 8px;

project/qujing/app/AppConflictMediation/components/List.vue

@@ -74,7 +74,7 @@ export default {
         {prop: 'content', label: '内容描述', width: '300px'},
         {prop: 'groupName', label: '事件类型', align: 'center'},
         {prop: 'girdName', label: '所属网格', align: 'center'},
-        {prop: 'eventStatus', label: '事件状态', align: 'center', dict:"conflictEventStatus"},
+        {prop: 'eventStatus', label: '事件状态', align: 'center', dict: "conflictEventStatus"},
         {prop: 'userName', label: '上报人', align: 'center'},
         {slot: 'options'}
       ]
@@ -85,8 +85,6 @@ export default {
     this.dict.load('conflictEventStatus').then(() => {
       this.getList()
     })
-
-    this.getGirdList()
   },
 
   methods: {
@@ -102,21 +100,8 @@ export default {
         }
       })
     },
-
-    getGirdList() {
-      // this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`).then(res => {
-      //   if (res.code == 0) {
-      //   }
-      // })
-    },
-
     toDetail(id) {
-      this.$emit('change', {
-        type: 'Detail',
-        params: {
-          id: id || ''
-        }
-      })
+      this.$router.push({query: {id}, hash: "#add"})
     }
   }
 }