添加选择居民弹层

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

 <template>
   <div class="label-list-wrap label-detail-wrap">
-    <bread-crumb 
-      :curmbFirst="curmbFirst" 
-      :curmbSecond="curmbSecond" 
+    <bread-crumb
+      :curmbFirst="curmbFirst"
+      :curmbSecond="curmbSecond"
       :curmbThird="curmbThird"
       :jumPathThird="jumPathThird">
     </bread-crumb>
@@ -17,10 +17,10 @@
         <p class="title">分组成员：</p>
         <p class="member-number">{{searchData.totalRows}}人</p>
         <div class="right">
-          <el-button type="primary" size="small" class="create-new-label" v-if="!isUngrouped" >添加居民</el-button>
+          <el-button type="primary" size="small" class="create-new-label" v-if="!isUngrouped" @click="addPatientsHandler">添加居民</el-button>
           <el-button type="default" size="small" class="create-new-label" v-if="!isUngrouped" @click="handleDeletePatients">批量删除</el-button>
         </div>
-      </div> 
+      </div>
       <el-table
         ref="multipleTable"
         :data="searchData.tableData"
@@ -91,9 +91,9 @@
         >
         <el-form>
           <el-form-item :class="changeNameClass">
-            <el-input 
-              type="textarea" 
-              v-model="ruleForm.newLabelName" 
+            <el-input
+              type="textarea"
+              v-model="ruleForm.newLabelName"
               placeholder="请填写分组名称，最多15个字符"
               maxlength="15"
               >
@@ -135,18 +135,25 @@
         </span>
       </el-dialog>
     </div>
+    <select-patient
+      :isShowSelectPatient="isShowSelectPatient"
+      :patientIdList="patientIdList"
+      @closeSelectPatient="closeSelectPatient"
+      @sureSelectPatient="sureSelectPatient(arguments)"
+    />
   </div>
 </template>
 
 <script>
   import BreadCrumb from "@/components/breadcrumb.vue";
   import * as commonUtil from "@/utils/utils";
-  import { 
+  import {
     getLabelDetail,
     deleteCurrentLabel,
     changeLabelName,
     deleteCurrentPatients,
   } from '@/utils/patients/patientsapi'
+  import SelectPatient from './dialog/select-patitents';
 
 
   export default {
@@ -162,6 +169,8 @@
         showChangeLabelNameDialog: false,
         centerDialogVisible: false,
         showDeletePatientsDialog: false,
+        isShowSelectPatient: false,
+        patientIdList: [],
         searchData: {
           pageNo: 1,  // 第几页
           pageSize: 10,  // 每页条数
@@ -176,6 +185,7 @@
     },
     components: {
       BreadCrumb,
+      SelectPatient,
     },
     computed: {
       changeNameClass() {
@@ -191,7 +201,7 @@
     // 挂载到Dom完成时
     mounted() {
       commonUtil.resizeHeight();
-    },    
+    },
     methods: {
       getDetail() {
         let labelId = this.$route.query.labelId;
@@ -370,7 +380,14 @@
         }).catch(err => {
           console.log('error: ', err)
         });
-      }
+      },
+      addPatientsHandler() {
+        this.isShowSelectPatient = true;
+      },
+      closeSelectPatient() {},
+      sureSelectPatient(arg) {
+
+      },
     }
   }
 </script>
@@ -430,7 +447,7 @@
       text-align: right;
     }
     .table-empty{
-      width: 100%; 
+      width: 100%;
       height: auto;
       text-align: center;
       .empty-pic{