结束随访

src/style/followup/element-reset.css

@@ -41,3 +41,7 @@
 .el-checkbox__input.is-focus,.el-checkbox__inner:hover,.el-checkbox__inner.is-focus {
   border-color: #449284!important;
 }
+/*重置textarea聚焦样式*/
+.el-textarea__inner:focus {
+  border-color: #449284!important;
+}

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

 <template>
   <div class="finish-followup" v-if="showThisPage">
     <el-dialog
-      title="变更计划"
+      title="结束随访"
       :visible.sync="showFinishFollowup"
       v-if="showThisPage"
       :before-close="clickClose"
+      width="30%"
       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>
+        <el-form
+          :model="finishData"
+          :rules="rules"
+          label-width="85px">
+          <el-form-item label="居民：">
+            {{finishData.patientName}}
+          </el-form-item>
+          <el-form-item label="结束原因：" prop="finishReason">
+            <el-input
+              type="textarea"
+              v-model="finishData.finishReason"
+              placeholder="请输入原因"
+              maxlength="30"
+              rows="3"
+              resize="none"></el-input>
+          </el-form-item>
+        </el-form>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button class="button-green" @click="clickClose" type="primary">取 消</el-button>
@@ -25,8 +35,12 @@
 </template>
 
 <script>
+  import customTextarea from "@/components/followup/customTextarea";
   export default {
     name: "finish-followup",
+    components: {
+      customTextarea
+    },
     props: {
       showThisPage: { //是否显示model
         type: Boolean,
@@ -34,39 +48,38 @@
           return false;
         }
       },
-      planChangeData: {
+      finishData: {
         type: Object,
         default: function () {
           return {};
         }
-      },
-      groupOption: {
-        type: Array,
-        default: function () {
-          return [];
-        }
-      },
-      planOption: {
-        type: Array,
-        default: function () {
-          return [];
-        }
-      },
+      }
     },
     data() {
       return {
-        showFinishFollowup: true
+        showFinishFollowup: true,
+        rules: {
+          finishReason: [
+            { required: true, message: '请输入结束原因', trigger: 'blur' },
+            { min: 1, max: 30, message: '长度在30个字符内', trigger: 'blur' }
+          ],
+        }
       }
     },
     methods: {
       clickClose() {
         this.$emit('closeFinishFollowup',false)
-      }
+      },
     }
   }
 </script>
-
+<style scoped>
+  .el-input__inner:disabled {
+    background-color: #ffffff!important;
+  }
+</style>
 <style lang="scss" scoped>
   @import '../../../../style/followup/followup-common';
   @import '../../../../style/followup/element-reset.css';
+
 </style>