计划变更

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

+<template>
+  <div class="change-plan">
+    <el-dialog
+      title="变更计划"
+      :visible.sync="showChangePlan"
+      width="30%"
+      v-if="showThisPage"
+      :before-close="clickClose"
+      center>
+      <el-form :model="planChangeData" label-width="100px">
+        <el-form-item label="分组：">
+          <el-select v-model="planChangeData.group" >
+            <el-option
+              v-for="item in groupOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="随访计划：">
+          <el-select v-model="planChangeData.plan" >
+            <el-option
+              v-for="item in planOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="随访开始时间：">
+          <el-select v-model="planChangeData.startTime">
+            <el-option
+              v-for="item in groupOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <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: "change-plan",
+    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 {
+        showChangePlan: true
+      }
+    },
+    methods: {
+      clickClose() {
+        this.$emit('closeChangePlan',false)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-select {
+    width: 100%;
+  }
+</style>

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

@@ -10,7 +10,7 @@
       <div class="header">
         <div class="title"><p>基本信息</p></div>
         <div class="h-btn">
-          <el-button class="button-white" plain>计划变更</el-button>
+          <el-button class="button-white" plain @click="changePlan">计划变更</el-button>
           <el-button class="button-white" plain>结束随访</el-button>
         </div>
       </div>
@@ -98,15 +98,19 @@
         </div>
       </div>
     </div>
+    <change-plan :showThisPage="showChangePlan" @closeChangePlan="closeChangePlan"></change-plan>
   </div>
 </template>
 
 <script>
   import BreadCrumb from '@/components/breadcrumb';
+  //变更计划dialog
+  import ChangePlan from '@/views/followup/plan-manage/dialog/change-plan';
   export default {
     name: "resident-detail",
     components: {
-      BreadCrumb
+      BreadCrumb,
+      ChangePlan
     },
     data() {
       return {
@@ -117,6 +121,15 @@
         jumPathThird: '/followUp/plan-manage',
         /*面包屑配置*/
         timeNodes: 0,//时间节点
+        showChangePlan: false,//是否展示变更计划
+      }
+    },
+    methods: {
+      changePlan() {
+        this.showChangePlan = true;
+      },
+      closeChangePlan(isShow) {
+        this.showChangePlan = isShow
       }
     }
   }