结束随访

src/views/followup/plan-manage/dialog/finish-followup.vue

+<template>
+  <div class="finish-followup" v-if="showThisPage">
+    <el-dialog
+      title="变更计划"
+      :visible.sync="showFinishFollowup"
+      v-if="showThisPage"
+      :before-close="clickClose"
+      center>
+      <div class="finish-content">
+        <div class="content-div">
+          <div class="c-title">居民：</div>
+          <div class="c-content">戴佳康；戴佳康；戴佳康；戴佳康等20人</div>
+        </div>
+        <div class="content-div">
+          <div class="c-title">结束原因：</div>
+          <div class="c-content"></div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="button-green" @click="clickClose" type="primary">取 消</el-button>
+        <el-button class="button-white" @click="clickClose" plain>确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "finish-followup",
+    props: {
+      showThisPage: { //是否显示model
+        type: Boolean,
+        default: function () {
+          return false;
+        }
+      },
+      planChangeData: {
+        type: Object,
+        default: function () {
+          return {};
+        }
+      },
+      groupOption: {
+        type: Array,
+        default: function () {
+          return [];
+        }
+      },
+      planOption: {
+        type: Array,
+        default: function () {
+          return [];
+        }
+      },
+    },
+    data() {
+      return {
+        showFinishFollowup: true
+      }
+    },
+    methods: {
+      clickClose() {
+        this.$emit('closeFinishFollowup',false)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../../../../style/followup/followup-common';
+  @import '../../../../style/followup/element-reset.css';
+</style>

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

@@ -11,13 +11,13 @@
         <div class="title"><p>基本信息</p></div>
         <div class="h-btn">
           <el-button class="button-white" plain @click="changePlan">计划变更</el-button>
-          <el-button class="button-white" plain>结束随访</el-button>
+          <el-button class="button-white" plain @click="finishFollowup">结束随访</el-button>
         </div>
       </div>
       <div class="base-info">
         <div class="resident-info base-content">
           <div class="content-div">
-            <div class="c-title">随访开始时间：</div>
+            <div class="c-title">姓名：</div>
             <div class="c-content">戴佳康</div>
           </div>
           <div class="content-div ">
@@ -99,6 +99,7 @@
       </div>
     </div>
     <change-plan :showThisPage="showChangePlan" @closeChangePlan="closeChangePlan"></change-plan>
+    <finish-followup :showThisPage="showFinishFollowup" @closeFinishFollowup="closeFinishFollowup"></finish-followup>
   </div>
 </template>
 
@@ -106,11 +107,14 @@
   import BreadCrumb from '@/components/breadcrumb';
   //变更计划dialog
   import ChangePlan from '@/views/followup/plan-manage/dialog/change-plan';
+  //结束随访dialog
+  import FinishFollowup from '@/views/followup/plan-manage/dialog/finish-followup';
   export default {
     name: "resident-detail",
     components: {
       BreadCrumb,
-      ChangePlan
+      ChangePlan,
+      FinishFollowup,
     },
     data() {
       return {
@@ -122,6 +126,7 @@
         /*面包屑配置*/
         timeNodes: 0,//时间节点
         showChangePlan: false,//是否展示变更计划
+        showFinishFollowup: false, //是否展示结束随访
       }
     },
     methods: {
@@ -130,7 +135,13 @@
       },
       closeChangePlan(isShow) {
         this.showChangePlan = isShow
-      }
+      },
+      finishFollowup() {
+        this.showFinishFollowup = true;
+      },
+      closeFinishFollowup(isShow) {
+        this.showFinishFollowup = isShow
+      },
     }
   }
 </script>
@@ -155,7 +166,7 @@
           flex-direction: row;
           flex-wrap: wrap;
           justify-content: space-between;
-          line-height: 35px;
+          padding: 10px 0;
           .content-div {
             .c-title {
               width: 115px;