update

src/App.vue

@@ -48,7 +48,7 @@ export default {
 	},
 	created() {
 		vm = this
-		vm.getToken()
+		// vm.getToken()
 	},
 	mounted() {
 	

src/router/patients.js

@@ -9,7 +9,8 @@ const newPatient = r => require.ensure([], () => r(require('../views/patients/ne
 
 /*分组管理*/
 const labelsManage = r => require.ensure([], () => r(require('../views/patients/labels-manage/layout.vue')), 'labelsManage');
-const labelsList = r => require.ensure([], () => r(require('../views/patients/labels-manage/labels-manage.vue')), 'labelsList');
+const labelsList = r => require.ensure([], () => r(require('../views/patients/labels-manage/labels-list.vue')), 'labelsList');
+const labelsDetail = r => require.ensure([], () => r(require('../views/patients/labels-manage/labels-detail.vue')), 'labelsDetail');
 
 /*资料不全居民*/
 const halfDataManage = r => require.ensure([], () => r(require('../views/patients/not-complete/layout.vue')), 'halfDataManage');
@@ -65,10 +66,10 @@ const patientsRouters = {
       path: 'labels-manage',
       component: labelsManage,
       name: 'labelsManage',
-      redirect: 'labels-manage/labels-manage',
+      redirect: 'labels-manage/labels-list',
       children: [
         {
-          path: 'labels-manage',
+          path: 'labels-list',
           component: labelsList,
           name: 'labelsList',
           meta: {
@@ -76,6 +77,15 @@ const patientsRouters = {
             keepAlive: false
           },
         },
+        {
+          path: 'labels-detail',
+          component: labelsDetail,
+          name: 'labelsDetail',
+          meta: {
+            title: '分组详情',
+            keepAlive: false
+          },
+        },
       ],
       meta: {
         title: '分组管理',

src/views/layout/slidebar.vue

@@ -87,7 +87,7 @@ export default {
                       {
                         title: '分组管理',
                         icon: 'el-icon-setting',
-                        index: 'patients-manage/labels-manage/labels-manage'
+                        index: 'patients-manage/labels-manage/labels-list'
                       },
                       {
                         title: '资料不全居民',

src/views/patients/labels-manage/labels-detail.vue

+<template>
+  <div class="lable-list-wrap">
+    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" ></bread-crumb>
+    <div class="component-content screenSet" id="screenSet">
+      <p class="top-title">分组详情</p>
+      <el-row :gutter="30" class="lable-name-row">
+        <el-col :span="6">
+          <el-input v-model="labelName" placeholder="请输入分组名称" size="small"></el-input>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" size="small" class="create-new-lable">查询</el-button>
+          <el-button type="default" size="small" class="create-new-lable">重置</el-button>
+        </el-col>
+        <el-col :span="6" class="right">
+          <el-button type="primary" size="small" class="create-new-lable">新建分组</el-button>
+        </el-col>
+      </el-row>
+      
+    </div>
+  </div>
+</template>
+
+<script>
+  import BreadCrumb from "@/components/breadcrumb.vue";
+  import * as commonUtil from "@/utils/utils";
+
+  export default {
+    data(){
+      return {
+        curmbFirst: "居民管理",
+        curmbSecond: "分组管理",
+        labelName: '',
+      }
+    },
+    components: {
+      BreadCrumb,
+    },
+    // 挂载到Dom完成时
+    mounted: function() {
+      commonUtil.resizeHeight();
+    },    
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>
+
+

src/views/patients/labels-manage/labels-list.vue

+<template>
+  <div class="lable-list-wrap">
+    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" ></bread-crumb>
+    <div class="component-content screenSet" id="screenSet">
+      <p class="top-title">分组管理</p>
+      <el-row :gutter="30" class="lable-name-row">
+        <el-col :span="6">
+          <el-input v-model="labelName" placeholder="请输入分组名称" size="small"></el-input>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" size="small" class="create-new-lable">查询</el-button>
+          <el-button type="default" size="small" class="create-new-lable">重置</el-button>
+        </el-col>
+        <el-col :span="6" class="right">
+          <el-button type="primary" size="small" class="create-new-lable">新建分组</el-button>
+        </el-col>
+      </el-row>
+      <p class="total-lable">共：75个分组</p>
+      <div class="lable-list">
+        <el-tag class="each-label" @click="goToDetail">高新区(34人)</el-tag>
+        <el-tag class="each-label">高血压(64人)</el-tag>
+        <el-tag class="each-label">权力的游戏(34人)</el-tag>
+        <el-tag class="each-label">端到端(34人)</el-tag>
+        <el-tag class="each-label">高新区(34人)</el-tag>
+        <el-tag class="each-label">高血压(64人)</el-tag>
+        <el-tag class="each-label">权力的游戏(34人)</el-tag>
+        <el-tag class="each-label">端到端(34人)</el-tag>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import BreadCrumb from "@/components/breadcrumb.vue";
+  import * as commonUtil from "@/utils/utils";
+
+  
+  export default {
+    data(){
+      return {
+        curmbFirst: "居民管理",
+        curmbSecond: "分组管理",
+        labelName: '',
+      }
+    },
+    components: {
+      BreadCrumb,
+    },
+    // 挂载到Dom完成时
+    mounted: function() {
+      commonUtil.resizeHeight();
+    },    
+    methods: {
+      goToDetail(){
+        this.$router.push({path: '/patients-manage/labels-manage/labels-detail'})
+      }
+    }  
+  }
+</script>
+
+<style lang="less" >
+  .lable-list-wrap{
+    .screenSet{
+      background: #fff;
+      padding: 30px;
+      display: flex;
+      flex-direction: column;
+    }
+    .top-title{
+      font-size: 20px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #efefef;
+    }
+    .lable-name-row{
+      margin-top: 10px;
+      .right{
+        float: right;
+        .create-new-lable{
+          float: right;
+        }
+      }
+    }
+    .total-lable{
+      font-size: 12px; padding: 30px 0 10px;
+    }
+    .lable-list{
+      width: 100%;
+      height: 100%;
+      background: #fff;
+      border: 1px solid #efefef;
+      border-radius: 4px;
+      overflow: hidden;
+      overflow-y: scroll; 
+      padding: 20px 10px;
+      .each-label{
+        margin: 0 10px 10px 0;
+        color: #449284;
+        background: rgba(68,146,132, .1);
+        border: 1px solid rgba(68,146,132, .2);
+        &:hover{
+          color: #fff;
+          background: #449284;
+          cursor: pointer;
+        }
+      }
+      /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
+      &::-webkit-scrollbar  
+      {  
+          width: 5px;  
+          height: 5px;  
+          background-color: #fff;  
+      }  
+      /*定义滚动条轨道 内阴影+圆角*/
+      &::-webkit-scrollbar-track
+      {
+          border-radius: 10px;
+          background-color: rgb(241, 239, 239);
+      }
+      /*定义滑块 内阴影+圆角*/
+      &::-webkit-scrollbar-thumb
+      {
+          border-radius: 10px;
+          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+          background-color: #bbb;
+      }
+    }
+  }
+  
+</style>
+

src/views/patients/labels-manage/labels-manage.vue

-<template>
-  <p>分组管理</p>
-</template>
-<script>
-
-</script>
-<style scoped>
-
-</style>