居民相关面包屑优化

src/store/followup/planManage.js

@@ -42,6 +42,7 @@ export default {
       }
     ],
     followStartTimeList: [], //随访时间
+    residentCrumb: [], //居民面包屑
   },
   mutations: {
     GET_RESIDENT_LIST(state, payload) {
@@ -104,6 +105,10 @@ export default {
         }
       ]
       state.templateOptions = state.templateOptions.concat(payload)
+    },
+    SET_RESIDENT_CRUMB(state, payload){
+      state.residentCrumb = payload
+      sessionStorage.setItem('residentCrumb', JSON.stringify(state.residentCrumb));
     }
   },
   actions: {
@@ -239,5 +244,8 @@ export default {
         context.commit('GET_PLAN_LIST', data);
       });
     },
+    setResidentCrumb(context, payload) {
+      context.commit('SET_RESIDENT_CRUMB', payload);
+    },
   },
 }

src/views/followup/plan-manage/plan-detail.vue

@@ -124,11 +124,34 @@
       })
     },
     methods: {
-      ...mapActions('planManage', ['getResidentDetail', 'getPlanDetail', 'getNodeTimeList', 'getNodeTimeContent']),
+      ...mapActions('planManage', ['getResidentDetail',
+        'getPlanDetail',
+        'getNodeTimeList',
+        'getNodeTimeContent',
+        'setResidentCrumb']),
       goToFollowTime() {
         this.showFollowTime = true
       },
       goToResidentList() {
+        let residentCrumb = [
+          {
+            name: '随访管理',
+            href: null
+          },
+          {
+            name: '计划管理',
+            href: `#/followup/plan-manage/plan-list`
+          },
+          {
+            name: '计划详情',
+            href: `#/followup/plan-manage/plan-detail?planId=${this.$route.query.planId}`
+          },
+          {
+            name: '居民列表',
+            href: null
+          }
+        ]
+        this.setResidentCrumb(residentCrumb);
         this.$router.push({path: '/followup/plan-manage/resident-list', query: {planId: this.$route.query.planId, planName: this.planDetail.name}})
       },
       changePlan() {

src/views/followup/plan-manage/plan-list.vue

@@ -140,7 +140,7 @@
       this.search(1);
     },
     methods: {
-      ...mapActions('planManage', ['getPlanList']),
+      ...mapActions('planManage', ['getPlanList', 'setResidentCrumb']),
       async search(currentPage){
         await this.getPlanList({
           ...this.searchData,
@@ -167,6 +167,21 @@
         this.$router.push({path: '/followup/plan-manage/plan-detail', query: {planId:row.id}})
       },
       visitRow(row){
+        let residentCrumb = [
+          {
+            name: '随访管理',
+            href: null
+          },
+          {
+            name: '计划管理',
+            href: `#/followup/plan-manage/plan-list`
+          },
+          {
+            name: '居民列表',
+            href: null
+          }
+        ]
+        this.setResidentCrumb(residentCrumb);
         this.$router.push({path: '/followup/plan-manage/resident-list', query: {planId:row.id, planName: row.name}})
       },
       changeRow(row){

src/views/followup/plan-manage/resident-detail.vue

 <template>
   <div class="resident-detail">
-    <bread-crumb
-      :curmbFirst="curmbFirst"
-      :curmbSecond="curmbSecond"
-      :curmbThird="curmbThird"
-      :jumPathThird="jumPathThird">
-    </bread-crumb>
+    <div class="bread-crumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right" >
+        <el-breadcrumb-item v-for="item in residentCrumb">
+          <a v-if="item.href" :href="item.href">{{item.name}}</a>
+          <span v-else >{{item.name}}</span>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
     <div class="f-detail-content screenSet">
       <div class="header">
         <div class="title"><p>基本信息</p></div>
@@ -103,7 +105,6 @@
 </template>
 
 <script>
-  import BreadCrumb from '@/components/breadcrumb';
   //变更计划dialog
   import ChangePlan from '@/views/followup/plan-manage/dialog/change-plan';
   //结束随访dialog
@@ -113,7 +114,6 @@
   export default {
     name: "resident-detail",
     components: {
-      BreadCrumb,
       ChangePlan,
       FinishFollowup,
     },
@@ -131,11 +131,13 @@
         planChangeData: {}, //变更信息
         finishData: {}, //结束信息
         planDetails: {}, //计划详情
-        status: null
+        status: null,
+        residentCrumb: [], //面包屑
       }
     },
     created() {
-
+      let residentCrumbList = sessionStorage.getItem('residentCrumb');
+      this.residentCrumb = JSON.parse(residentCrumbList);
     },
     computed: {
       ...mapState('planManage', {
@@ -210,6 +212,23 @@
   @import '../../../style/followup/followup-common';
   @import '../../../style/followup/element-reset.css';
   .resident-detail {
+    .bread-crumb {
+      position: fixed;
+      left: 255px;
+      top: 64px;
+      width: 100%;
+      background: #fff;
+      height: 61px;
+      padding: 20px 20px 30px;
+      z-index: 99;
+      border-top: 3px solid #F0F2F5;
+      .el-breadcrumb__inner {
+        font-size: 14px;
+      }
+      a:hover {
+        color: #449284;
+      }
+    }
     .f-detail-content {
       .header {
         .title {

src/views/followup/plan-manage/resident-list.vue

 <template>
   <div class="resident-list">
-    <bread-crumb
-      :curmbFirst="curmbFirst"
-      :curmbSecond="curmbSecond"
-      :curmbThird="curmbThird"
-      :jumPathThird="jumPathThird">
-    </bread-crumb>
+    <div class="bread-crumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right" >
+        <el-breadcrumb-item v-for="item in residentCrumb">
+          <a v-if="item.href" :href="item.href">{{item.name}}</a>
+          <span v-else >{{item.name}}</span>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
     <div class="resident-content f-main-content screenSet">
       <p class="page-title">{{planTitle}}</p>
       <div class="search-div">
@@ -47,7 +49,7 @@
       <div class="resident-table table-content">
         <div class="btn-div">
           <el-radio-group v-model="status" size="small">
-            <el-radio-button label="1">未完成({{residentList.notCount}})</el-radio-button>
+            <el-radio-button label="1">未开始({{residentList.notCount}})</el-radio-button>
             <el-radio-button label="2">进行中({{residentList.handCount}})</el-radio-button>
             <el-radio-button label="3">已结束({{residentList.yesCount}})</el-radio-button>
           </el-radio-group>
@@ -138,7 +140,6 @@
 </template>
 
 <script>
-  import BreadCrumb from '@/components/breadcrumb'
   //变更计划dialog
   import ChangePlan from '@/views/followup/plan-manage/dialog/change-plan';
   //结束随访dialog
@@ -152,7 +153,6 @@
   export default {
     name: "residentList",
     components: {
-      BreadCrumb,
       ChangePlan,
       FinishFollowup,
       SelectPatient,
@@ -160,12 +160,6 @@
     },
     data() {
       return {
-        /*面包屑配置*/
-        curmbFirst: '随访管理',
-        curmbSecond: '计划管理',
-        curmbThird: '查看居民',
-        jumPathThird: '/followUp/plan-manage',
-        /*面包屑配置*/
         labelWidth: '110px',  //标题长度
         searchData: {}, //查询数据
         groupOption: [{ // 分组选项
@@ -185,6 +179,7 @@
         addPatientData: {}, //选择时间数据
         statusTotal: null, //每种状态的总数
         planTitle: '',  //随访计划名称
+        residentCrumb: [], //面包屑
       }
     },
     created() {
@@ -198,6 +193,29 @@
       this.getPlanStatusOption()
       this.getGroupList(); //获取分组列表
       this.getFollowStartTimeList(this.$route.query.planId);// 获取随访时间列表
+      let residentCrumbList = sessionStorage.getItem('residentCrumb');
+      residentCrumbList = JSON.parse(residentCrumbList);
+      if(residentCrumbList.length==4&&residentCrumbList[residentCrumbList.length-1].name!='居民列表') {
+        this.residentCrumb = residentCrumbList.slice(0,2)
+        this.residentCrumb.push(
+          {
+            name: '居民列表',
+            href: null
+          }
+        )
+
+      } else if(residentCrumbList.length>4&&residentCrumbList[residentCrumbList.length-1].name!='居民列表') {
+        this.residentCrumb = residentCrumbList.slice(0,3)
+        this.residentCrumb.push(
+          {
+            name: '居民列表',
+            href: null
+          }
+        )
+      } else {
+        this.residentCrumb = residentCrumbList
+      }
+      this.setResidentCrumb(this.residentCrumb);
     },
     computed: {
       ...mapState('planManage',{
@@ -208,7 +226,7 @@
       })
     },
     methods: {
-      ...mapActions('planManage', ['getResidentList', 'getGroupList', 'getPlanStatusOption', 'getFollowStartTimeList']),
+      ...mapActions('planManage', ['getResidentList', 'getGroupList', 'getPlanStatusOption', 'getFollowStartTimeList', 'setResidentCrumb']),
       handleSizeChangePre(pageSize) {
         this.getResidentList({
           pageSize,
@@ -226,6 +244,52 @@
         })
       },
       goPatientDetail(patientId) { //居民详情页
+        let residentCrumbs = []
+        if(this.residentCrumb.length === 3) {
+          residentCrumbs = [
+            {
+              name: '随访管理',
+              href: null
+            },
+            {
+              name: '计划管理',
+              href: `#/followup/plan-manage/plan-list`
+            },
+            {
+              name: '居民列表',
+              href: `#/followup/plan-manage/resident-list?planId=${this.$route.query.planId}`
+            },
+            {
+              name: '居民详情',
+              href: null
+            }
+          ]
+        } else if(this.residentCrumb.length === 4) {
+          residentCrumbs = [
+            {
+              name: '随访管理',
+              href: null
+            },
+            {
+              name: '计划管理',
+              href: `#/followup/plan-manage/plan-list`
+            },
+            {
+              name: '计划详情',
+              href: `#/followup/plan-manage/plan-detail??planId=${this.$route.query.planId}`
+            },
+            {
+              name: '居民列表',
+              href: `#/followup/plan-manage/resident-list?planId=${this.$route.query.planId}`
+            },
+            {
+              name: '居民详情',
+              href: null
+            }
+          ]
+        }
+
+        this.setResidentCrumb(residentCrumbs);
         this.$router.push({path: '/followup/plan-manage/resident-detail', query: {patientId: patientId, planId: this.$route.query.planId}})
 
       },
@@ -378,6 +442,23 @@
 
   @import '../../../style/followup/followup-common';
   @import '../../../style/followup/element-reset.css';
+  .bread-crumb {
+    position: fixed;
+    left: 255px;
+    top: 64px;
+    width: 100%;
+    background: #fff;
+    height: 61px;
+    padding: 20px 20px 30px;
+    z-index: 99;
+    border-top: 3px solid #F0F2F5;
+    .el-breadcrumb__inner {
+      font-size: 14px;
+    }
+    a:hover {
+      color: #449284;
+    }
+  }
   .btn-left {
     float: right;
   }