结构调整

packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue

@@ -1,87 +1,50 @@
 <template>
-  <ai-list class="AppGridMemberScore">
-    <template slot="title">
-      <ai-title title="网格员积分" :isShowBottomBorder="false" :instance="instance" >
-        <template slot="sub">
-          <div>网格员可通过完成某些任务获取一定数量的积分，积分可去兑换相应的奖励。</div>
-        </template>
-      </ai-title>
-    </template>
-    <template slot="tabs">
-      <el-tabs v-model="currIndex">
-        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
-          <component :is="tab.comp" v-if="currIndex === String(i)" :ref="tab.name"
-                     :areaId="areaId" :instance="instance" :dict="dict" :permissions="permissions"/>
-        </el-tab-pane>
-      </el-tabs>
-    </template>
-  </ai-list>
+  <keep-alive include="gmScore">
+    <component :is="currentPage" v-bind="$props" @change="onChange"/>
+  </keep-alive>
 </template>
 
 <script>
-import girdScoreManage from "./components/girdScoreManage"
-import gridScoreRules from "./components/gridScoreRules"
-import gridScoreStatistics from './components/gridScoreStatistics'
-import gridScoreDetail from './components/gridScoreDetail'
-import {mapState} from 'vuex'
+import girdScoreManage from "./components/girdScoreManage.vue"
+import gridScoreRules from "./components/gridScoreRules.vue"
+import gridScoreStatistics from './components/gridScoreStatistics.vue'
+import gridScoreDetail from './components/gridScoreDetail.vue'
+import gmScore from './components/gmScore.vue'
 
 export default {
   name: 'AppGridMemberScore',
   label: "网格员积分",
-  components: {girdScoreManage, gridScoreRules, gridScoreStatistics, gridScoreDetail},
+  components: { gmScore, girdScoreManage, gridScoreRules, gridScoreStatistics, gridScoreDetail},
   props: {
     instance: Function,
     dict: Object,
     permissions: Function
   },
 
-  data() {
-    return {
-      activeName: "girdScoreManage",
-      currIndex: "0",
-      areaId: '',
-      oldActiveName: '',
-    }
-  },
-
   computed: {
-    ...mapState(['user']),
-    tabs() {
-      return [
-        {
-          label: "积分管理",
-          name: "girdScoreManage",
-          comp: girdScoreManage,
-          permission: "",
-        },
-        {
-          label: "积分规则",
-          name: "gridScoreRules",
-          comp: gridScoreRules,
-          permission: "",
-        },
-        {
-          label: "积分统计",
-          name: "gridScoreStatistics",
-          comp: gridScoreStatistics,
-          permission: "",
-        },
-        {
-          label: "网格员积分详情",
-          name: "gridScoreDetail",
-          comp: gridScoreDetail,
-          permission: "",
-        },
-      ]
+    currentPage() {
+      let {hash} = this.$route
+      return hash == "#girdScoreManage" ? girdScoreManage :
+              hash == "#gridScoreRules" ? gridScoreRules :
+                  hash == "#gridScoreStatistics" ? gridScoreStatistics : 
+                    hash == "#gridScoreDetail" ? gridScoreDetail: gmScore
     }
   },
-  created() {
-    this.areaId = this.user.info.areaId
-    // this.$dict.load("")
+  components: {
+    gmScore,
+    girdScoreManage,
+    gridScoreRules,
+    gridScoreStatistics,
+    gridScoreDetail,
   },
-  methods: {
 
-  },
+  methods: {
+    onChange(data) {
+      let {type, params: query} = data,
+          hash = ["girdScoreManage", "gridScoreRules","gridScoreStatistics"].includes(type) ? "" : "#" + type
+      this.$router.push({hash, query})
+    }
+  }
   
 }
 </script>

packages/conv/creditScore/AppGridMemberScore/components/girdScoreManage.vue

@@ -5,6 +5,7 @@
         <ai-search-bar>
           <template #left>
             <el-button type="primary" size="small" icon="iconfont iconAdd" @click="dialog = true">批量调整积分</el-button>
+            <el-button type="primary" size="small" icon="iconfont iconAdd" @click="toDetail">跳转详情</el-button>
             <el-select size="small" style="width: 200px;margin-left: 16px;" v-model="search.girdId" placeholder="所属网格" clearable
                       @change="getListInit()">
               <el-option
@@ -70,7 +71,7 @@
           <!-- <ai-select v-model="form.integralCalcType" :selectList="dict.getDict('integralCalcType')"/> -->
         </el-form-item>
         <el-form-item label="积分" prop="changeIntegral">
-          <el-input v-model.trim.num="form.changeIntegral" placeholder="请输入正数" size="small"></el-input>
+          <el-input v-model.trim="form.changeIntegral" placeholder="请输入正数" size="small"></el-input>
         </el-form-item>
       </el-form>
     </ai-dialog>
@@ -146,6 +147,15 @@ export default {
       }
     },
     onConfirm() {},
+    toDetail() {
+      console.log('跳转详情');
+      this.$emit('change', {
+        type: 'gridScoreDetail',
+        params: {
+          // id
+        }
+      })
+    }
   },
 
 }

packages/conv/creditScore/AppGridMemberScore/components/gmScore.vue

@@ -0,0 +1,89 @@
+<template>
+  <ai-list class="AppGridMemberScore">
+    <template slot="title">
+      <ai-title title="网格员积分" :isShowBottomBorder="false" :instance="instance" >
+        <template slot="sub">
+          <div>网格员可通过完成某些任务获取一定数量的积分，积分可去兑换相应的奖励。</div>
+        </template>
+      </ai-title>
+    </template>
+    <template slot="tabs">
+      <el-tabs v-model="currIndex">
+        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
+          <component :is="tab.comp" v-if="currIndex === String(i)" :ref="tab.name"
+                     :areaId="areaId" :instance="instance" :dict="dict" :permissions="permissions"/>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+import girdScoreManage from "./girdScoreManage"
+import gridScoreRules from "./gridScoreRules"
+import gridScoreStatistics from './gridScoreStatistics'
+import {mapState} from 'vuex'
+
+export default {
+  name: 'AppGridMemberScore',
+  label: "网格员积分",
+  components: {
+    girdScoreManage, 
+    gridScoreRules, 
+    gridScoreStatistics
+  },
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+
+  data() {
+    return {
+      currIndex: "0",
+      areaId: '',
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+    tabs() {
+      return [
+        {
+          label: "积分管理",
+          name: "girdScoreManage",
+          comp: girdScoreManage,
+          permission: "",
+        },
+        {
+          label: "积分规则",
+          name: "gridScoreRules",
+          comp: gridScoreRules,
+          permission: "",
+        },
+        {
+          label: "积分统计",
+          name: "gridScoreStatistics",
+          comp: gridScoreStatistics,
+          permission: "",
+        },
+      ]
+    }
+  },
+  created() {
+    this.areaId = this.user.info.areaId
+    // this.$dict.load("")
+  },
+  methods: {
+    
+  },
+  
+}
+</script>
+
+<style lang="scss" scoped>
+.AppGridMemberScore {
+  height: 100%;
+  width: 100%;
+}
+</style>

packages/conv/creditScore/AppGridMemberScore/components/gridScoreDetail.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="gridScoreDetail">
     <!-- <ai-list> -->
-      <ai-title slot="title" title="网格员积分详情" isShowBottomBorder />
+      <ai-title slot="title" title="网格员积分详情" isShowBottomBorder :isShowBack="true" />
     <!-- </ai-list> -->
-    <el-row>
+    <el-row style="margin-top: 20px;">
       <div class="card_list">
         <div class="card">
           <h2>上报事件</h2>
@@ -32,7 +32,7 @@
       </div>
     </el-row>
     <ai-card>
-      <ai-title slot="title" title="余额变动明细" isShowBottomBorder :isShowBack="true"/>
+      <ai-title slot="title" title="余额变动明细"/>
       <template #content>
         <ai-search-bar>
           <template #left>

packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue

@@ -288,6 +288,7 @@ export default {
     },
     getListInit() {},
     getTableData() {},
+
     timeChange(index) {
       this.currrntTime = index
     },