更改随访状态页面

src/components/followup/customTextarea.vue

+<template>
+  <div class="custom-textarea" :class="errTips ? 'err-border' : ''">
+    <textarea v-model="inputContent" :placeholder="placeholderTxt" @input="inputHandler" @blur="inputHandlerBlur" :maxlength="maxlength" :rows="rows"></textarea>
+    <div class="txt-wrap">{{computedNum}}/{{maxlength}}</div>
+  </div>
+</template>
+<script>
+  export default {
+    data(){
+      return{
+        inputContent: ''
+      }
+    },
+    props: {
+      maxlength: {
+        type: Number,
+        default: 30
+      },
+      rows: {
+        type: Number,
+        default: 3
+      },
+      placeholderTxt: String,
+      inputContentFrom: String,
+      errTips: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      computedNum(){
+        return this.inputContent.length
+      }
+    },
+    mounted(){
+      console.log('外部内容',this.inputContentFrom)
+      if(this.inputContentFrom){
+        this.inputContent = this.inputContentFrom;
+      }
+    },
+    methods: {
+      inputHandler(){
+        this.$emit('inputHandler',this.inputContent)
+      },
+      inputHandlerBlur(){
+        this.$emit('inputHandlerBlur',this.inputContent)
+      }
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .custom-textarea{
+    width: 60%;
+    border: 1px solid #DCDFE6;
+    padding: 5px 15px;
+    border-radius: 4px;
+    &.err-border{
+      border-color: #F56C6C;
+    }
+  textarea{
+    outline: none;
+    color: #606266;
+    resize: none;
+    width: 100%;
+  }
+  ::-webkit-input-placeholder {
+    color: #999;
+  }
+  .txt-wrap{
+    line-height: 20px;
+    text-align: right;
+    color: #606266;
+  }
+  }
+</style>

src/components/followup/followupDetail.vue

+<template>
+  <el-dialog title="本次随访详情" :visible.sync="dialogFormVisible" center :close-on-click-modal="false" :close-on-press-escape="false" width="800px">
+    <!--<el-form ref="statusForm" :model="statusForm" :rules="rules" label-suffix=":" label-width="120px">-->
+    <!--<el-form-item label="居民" style="margin-bottom:0;">-->
+    <!--<span>{{statusForm.nickname}}</span>-->
+    <!--</el-form-item>-->
+    <!--<el-form-item label="变更状态">-->
+    <!--<span>{{statusForm.status==1 ? '未完成' : '已完成'}}</span>-->
+    <!--</el-form-item>-->
+    <!--<el-form-item label="*变更原因" prop="reason" class="required-item">-->
+    <!--<custom-textarea-->
+    <!--:placeholderTxt="placeholderTxt"-->
+    <!--:inputContentFrom="statusForm.reason"-->
+    <!--@inputHandler="inputHandler"-->
+    <!--@inputHandlerBlur="inputHandlerBlur"></custom-textarea>-->
+    <!--</el-form-item>-->
+    <!--</el-form>-->
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+  export default {
+    data(){
+      return{
+        // dialogFormVisible: true
+      }
+    },
+    props: {
+      dialogFormVisible: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+    },
+    mounted(){
+    },
+    methods: {
+      save(){
+        this.dialogFormVisible = false;
+      },
+    }
+  }
+</script>
+<style scoped lang="scss">
+</style>

src/views/followup/record-manage/record-list.vue

@@ -39,7 +39,11 @@
             <el-radio-button label="unfinish">未完成（{{unfinishNum}}）</el-radio-button>
           </el-radio-group>
           <el-table :data="allData" style="width: 100%;margin-top: 20px;">
-          <el-table-column prop="nickname" label="姓名" min-width="100" align="center"></el-table-column>
+          <el-table-column prop="nickname" label="姓名" min-width="100" align="center">
+            <template slot-scope="scope">
+              <span style="cursor: pointer" @click="visitDetail(scope.row)">{{scope.row.nickname}}</span>
+            </template>
+          </el-table-column>
           <el-table-column prop="mobilePhone" label="手机号" min-width="100" align="center"></el-table-column>
           <el-table-column prop="name" label="随访计划名称" min-width="150" align="center"></el-table-column>
           <el-table-column prop="followupType" label="随访时间" min-width="150" align="center">
@@ -76,35 +80,58 @@
         </div>
       </div>
       <el-dialog title="变更随访状态" :visible.sync="dialogFormVisible" center :close-on-click-modal="false" :close-on-press-escape="false" width="800px">
-        <el-form ref="statusForm" :model="statusForm" label-suffix=":" label-width="120px">
-          <el-form-item label="居民" style="margin-bottom:0;">
-            <span>{{statusForm.nickname}}</span>
-          </el-form-item>
-          <el-form-item label="变更状态">
-            <span>{{statusForm.status==1 ? '未完成' : '已完成'}}</span>
-          </el-form-item>
-          <el-form-item label="变更原因">
-            <el-input type="textarea"
-                      :rows="2"
-                      placeholder="请输入变更原因"
-                      v-model="statusForm.reason"></el-input>
-          </el-form-item>
-        </el-form>
+        <!--<el-form ref="statusForm" :model="statusForm" :rules="rules" label-suffix=":" label-width="120px">-->
+          <!--<el-form-item label="居民" style="margin-bottom:0;">-->
+            <!--<span>{{statusForm.nickname}}</span>-->
+          <!--</el-form-item>-->
+          <!--<el-form-item label="变更状态">-->
+            <!--<span>{{statusForm.status==1 ? '未完成' : '已完成'}}</span>-->
+          <!--</el-form-item>-->
+          <!--<el-form-item label="*变更原因" prop="reason" class="required-item">-->
+            <!--<custom-textarea-->
+              <!--:placeholderTxt="placeholderTxt"-->
+              <!--:inputContentFrom="statusForm.reason"-->
+              <!--@inputHandler="inputHandler"-->
+              <!--@inputHandlerBlur="inputHandlerBlur"></custom-textarea>-->
+          <!--</el-form-item>-->
+        <!--</el-form>-->
+        <div class="form-content">
+          <div class="item-div"><span class="left-title">居民:</span><span class="right-item">{{statusForm.nickname}}</span></div>
+          <div class="item-div"><span class="left-title">变更状态:</span><span class="right-item">{{statusForm.status==1 ? '未完成' : '已完成'}}</span></div>
+          <div class="item-div textarea-add"><span class="left-title"><span class="required-mark">*</span>变更原因:</span><span class="right-item">
+            <custom-textarea
+            :placeholderTxt="placeholderTxt"
+            :inputContentFrom="statusForm.reason"
+            @inputHandler="inputHandler"
+            @inputHandlerBlur="inputHandlerBlur"></custom-textarea></span></div>
+        </div>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取 消</el-button>
-          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+          <el-button type="primary" @click="saveReason('statusForm')">确 定</el-button>
         </div>
       </el-dialog>
+      <followup-detail :dialogFormVisible="dialogDetailShow"></followup-detail>
     </div>
 </template>
 
 <script>
   import BreadCrumb from "@/components/breadcrumb";
+  import customTextarea from "@/components/followup/customTextarea";
+  import followupDetail from "@/components/followup/followupDetail";
   export default {
     components:{
-      BreadCrumb
+      BreadCrumb,
+      customTextarea,
+      followupDetail
     },
     data(){
+      // let validDate = (rule, value, callback) => {
+      //   if(!value) {
+      //     callback(new Error('请输入变更原因'))
+      //   } else {
+      //     callback()
+      //   }
+      // };
       return{
         curmbFirst: '随访管理',
         curmbSecond: '录入管理',
@@ -145,6 +172,13 @@
         statusForm: {
           reason: ''
         },
+        num: 0,
+        rules: {
+          // reason: [{ validator: validDate, required: true, trigger: ['blur']}]
+        },
+        placeholderTxt: '请输入变更原因',
+        errTips: false,
+        dialogDetailShow: false,
       }
     },
     methods: {
@@ -157,6 +191,9 @@
         this.searchData.nickname = '';
         this.searchData.mobilePhone = '';
       },
+      visitDetail(row){
+        this.dialogDetailShow = true;
+      },
       handlerClick(){
         console.log(this.activeName)
       },
@@ -173,6 +210,31 @@
       handleCurrentChangePre(pageNum){
         this.paginationSet['pageNum'] = pageNum
       },
+      saveReason(formName){
+        if(this.statusForm.reason){
+          this.$message.success('保存成功')
+          this.dialogFormVisible = false;
+        }else {
+          this.$message.error('请填写变更原因!')
+          return false;
+        }
+        // this.$refs[formName].validate((valid) => {
+        //   if (valid) {
+        //     this.dialogFormVisible = false;
+        //   } else {
+        //     this.$message.error('请填写变更原因!')
+        //     return false;
+        //   }
+        // });
+      },
+      inputHandler(val){
+        this.statusForm.reason = val;
+      },
+      inputHandlerBlur(val){
+        if(!val){
+          this.$message.error('请填写变更原因!')
+        }
+      }
     },
     filters: {
       statusFileter: function(value) {
@@ -207,5 +269,30 @@
       color: $picaGreen;
     }
   }
+  .form-content{
+    .item-div{
+      display: flex;
+      align-items: center;
+      color: #606266;
+      min-height: 40px;
+      font-size: 14px;
+      &.textarea-add{
+        align-items: flex-start;
+        margin-top: 20px;
+      }
+      .left-title{
+        width: 120px;
+        text-align: right;
+        padding-right: 12px;
+      }
+      .right-item{
+        flex: 1;
+      }
+      .required-mark{
+        color: #F56C6C;
+        margin-right: 3px;
+      }
+    }
+  }
 }
 </style>