update

src/App.vue

@@ -48,7 +48,11 @@ export default {
 	},
 	created() {
 		vm = this
+		console.log('..>>> ', process.env.BUILD_ENV);
+		// 本地开发环境，忽略token
+		if( process.env.BUILD_ENV != 'development'){
 			vm.getToken()
+		}
 	},
 	mounted() {
 	

src/utils/patients/patientsapi.js

@@ -26,6 +26,60 @@ export const getLabelList = (params) => {
   })
 }
 
+export const createNewLabel = (data) => {
+  return fetch({
+    url: getBaseUrl(`healths/labels/`),
+    headers: {
+      "Content-Type": 'application/json'
+    },
+    method: 'post',
+    data: data,
+    description: '新增分组',
+  })
+}
+
+export const changeLabelName = (data) => {
+  return fetch({
+    url: getBaseUrl(`healths/labels/`),
+    // headers: {
+    //   "Content-Type": 'application/json'
+    // },
+    method: 'put',
+    data: data,
+    description: '修改分组名',
+  })
+}
+
+export const getLabelDetail = (labelId, params) => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`healths/labels/${labelId}/patients`),
+    method: 'get',
+    params: params,
+    description: '获取分组详情',
+  })
+}
+
+export const deleteCurrentLabel = (data) => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`healths/labels/`),
+    method: 'delete',
+    data: data,
+    description: '删除分组',
+  })
+}
+
+export const deleteCurrentPatients = data => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`healths/labels/patients`),
+    method: 'delete',
+    data: data,
+    description: '删除分组下的居民',
+  })
+}
+
 // 获取七牛上传token
 export const getQiniuToken = (params) => {
   return fetch({

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

@@ -12,22 +12,56 @@
           <el-button type="default" size="small" class="create-new-label" @click="resetLabelName">重置</el-button>
         </el-col>
         <el-col :span="6" class="right">
-          <el-button type="primary" size="small" class="create-new-label" :disabled="labelNameList.length >= 999">新建分组</el-button>
+          <el-button 
+            type="primary" size="small" class="create-new-label" 
+            :disabled="labelNameList.length >= 999"
+            @click="createNewLabel"
+            >
+            新建分组
+          </el-button>
         </el-col>
       </el-row>
       <p class="total-label">共：{{labelNameList.length}}个分组</p>
-      <div class="label-list" v-if="labelNameList && labelNameList.length>0">
-        <el-tag class="each-label" @click="goToDetail" v-for="(item, index) in labelNameList" :key="index">{{item.labelName}}({{item.labelPatientNums}}人)</el-tag>
+      <div class="label-list" v-if="labelNameList && labelNameList.length > 0">
+        <el-tag class="each-label" @click="goToDetail(item)" v-for="(item, index) in labelNameList" :key="index">{{item.labelName}}({{item.labelPatientNums}}人)</el-tag>
       </div>
+      <div class="table-empty" v-if="labelNameList && labelNameList.length < 1">
+        <img class="empty-pic" src="../../../assets/image/no-content1.png">
+        <p class="tips">未找到相似分组</p>
+      </div>
+      <el-dialog
+        class="dialog-boxd"
+        title="新增分组"
+        :visible.sync="centerDialogVisible"
+        width="400px"
+        center
+        :show-close='false'
+        :close-on-click-modal="false"
+        >
+        <el-form>
+          <el-form-item :class="addNewLabelClass">
+            <el-input 
+              type="textarea" 
+              v-model="ruleForm.newLabelName" 
+              placeholder="请填写分组名称，最多15个字符"
+              maxlength="15"
+              >
+            </el-input>
+            <div class="err-text">{{addNewLabelTips}}</div>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="handleClose">取 消</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+        </span>
+      </el-dialog>
     </div>
   </div>
 </template>
 <script>
   import BreadCrumb from "@/components/breadcrumb.vue";
   import * as commonUtil from "@/utils/utils";
-  import { getLabelList } from '@/utils/patients/patientsapi'
-
-
+  import { getLabelList, createNewLabel } from '@/utils/patients/patientsapi'
 
   export default {
     data(){
@@ -36,6 +70,12 @@
         curmbSecond: "分组管理",
         labelName: '',
         labelNameList: [],
+        centerDialogVisible: false,
+        ruleForm: {
+          newLabelName: '', // 新建分组名
+        },
+        addNewLabelTips: '',
+        isAddLabelError: false,
       }
     },
     components: {
@@ -44,22 +84,27 @@
     created(){
       this.getList();
     },
+    computed: {
+      addNewLabelClass() {
+        return this.isAddLabelError == true ? 'special-error-tips' : ''
+      }
+    },
     // 挂载到Dom完成时
-    mounted: function() {
+    mounted() {
       commonUtil.resizeHeight();
     },    
     methods: {
-      getList(){
+      getList() {
         // 获取分组列表
-        let num = {
+        let params = {
           type: 1,
           token : localStorage.getItem("token"),
         };
         if(this.labelName){
-          num.labelName = this.labelName;
+          params.labelName = this.labelName;
         }
         commonUtil.openLoading(this);
-        getLabelList(num).then(data => {
+        getLabelList(params).then(data => {
           commonUtil.closeLoading(this);
           // console.log('获取分组列表>> ', data)
           if(data.data && data.data.labelNameList){
@@ -69,17 +114,79 @@
           console.log('error: ', err)
         });
       },
-      resetLabelName(){
+      resetLabelName() {
         this.labelName = '';
+        this.getList();
+      },
+      createNewLabel() {
+        console.log('新增分组...');
+        this.centerDialogVisible = true;
+      },
+      submitForm() {
+        let params = {
+          labelName: this.ruleForm.newLabelName,
+        };
+        if(!params.labelName){
+          this.isAddLabelError = true;
+          this.addNewLabelTips = '请输入分组名';
+          return;
+        }
+        // 请求新增
+        // commonUtil.openLoading(this);
+        createNewLabel(params).then(data => {
+          // commonUtil.closeLoading(this);
+          console.log('新增分组>> ', data)
+          if(data.code == '202520'){  // 分组名重复
+            console.log('tips: ', data.message)
+            this.isAddLabelError = true;
+            this.addNewLabelTips = '该分组名称已被您使用，请重新输入';
+            return;
+          }
+          if(data.code == '000000'){
+            console.log('新增成功');
+            this.$message({
+              message: '新增分组成功',
+              type: 'success'
+            });
+            this.handleClose();
+            this.$router.push({
+              path: '/patients-manage/labels-manage/labels-detail',
+              query: {
+                labelId: data.data.labelId,
+                labelName: params.labelName
+              }
+            })
+            callback();
+          }else{
+            this.$message({
+              message: '接口返回失败，请重新再试',
+              type: 'warning'
+            });
+            callback();
+          }
+        }).catch(err => {
+          console.log('error: ', err)
+        });
+      },
+      handleClose() {
+        this.isAddLabelError = false;
+        this.ruleForm.newLabelName = '';
+        this.centerDialogVisible = false
       },
-      goToDetail(){
-        this.$router.push({path: '/patients-manage/labels-manage/labels-detail'})
+      goToDetail(item) {
+        this.$router.push({
+          path: '/patients-manage/labels-manage/labels-detail',
+          query: {
+            labelId: item.labelId,
+            labelName: item.labelName,
+          }
+        })
       }
     }  
   }
 </script>
 
-<style lang="less" >
+<style lang="less" scoped>
   .label-list-wrap{
     .screenSet{
       background: #fff;
@@ -146,7 +253,59 @@
           background-color: #bbb;
       }
     }
+    .table-empty{
+      width: 100%; 
+      height: auto;
+      text-align: center;
+      .empty-pic{
+        width: 100px;
+        height: 100px;
+        display: block;
+        border: 0;
+        margin: 0 auto;
+      }
+      .tips{
+        font-size: 14px;
+        color: #909399;
+      }
+    }
+  }
+</style>
+<style lang="less">
+  .label-list-wrap{
+    .el-form-item{
+      margin-bottom: 0;
+      .el-textarea{
+        position: relative;
+      }
+      .el-textarea__inner{
+        outline: none !important;
+        resize: none !important;
+        height: 80px;
+      }
+      &.special-error-tips{
+        .el-textarea__inner{
+          border: 1px solid #F56C6C !important;
+          outline: none;
+          resize: none;
+        }
+        .err-text{
+          display: block;
+           position: absolute;
+          left: 0;
+          top: 80px;
+        }
+      }
+      .err-text{
+        display: none;
+        color: #F56C6C;
+        font-size: 12px;
+        padding-top: 4px;
+        line-height: 12px;
+      }
+    }
   }
   
 </style>
 
+