更改预约状态页面

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

+<template>
+  <div class="dialog-wrap">
+    <el-dialog title="变更预约"
+               :visible.sync="reservationDialog"
+               v-if="isChangeReservation"
+               center
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :before-close="closeChangeReserve1">
+      <el-form
+        ref="reservationForm"
+        :model="reservationForm"
+        :rules="rules"
+        label-suffix=":"
+        label-width="120px">
+        <el-form-item label="变更居民">
+          <span>{{reservationForm.nickname}}</span>
+        </el-form-item>
+        <el-form-item label="预约状态" required prop="reserveStatus">
+          <el-radio-group v-model="reservationForm.reserveStatus">
+            <el-radio label="已接受"></el-radio>
+            <el-radio label="已拒绝"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="reservationForm.reserveStatus == '已接受'" label="预约时间" required>
+         <div style="display: flex;">
+           <el-form-item prop="reservationDate">
+             <el-date-picker
+               type="date"
+               v-model="reservationForm.reservationDate"
+               placeholder="请选择预约日期"
+               value-format="yyyy-MM-dd"
+               value="yyyy-MM-dd"
+               :picker-options="pickerOptions">
+             </el-date-picker>
+           </el-form-item>
+           <el-form-item prop="timeRange">
+             <el-select v-model="reservationForm.timeRange" placeholder="请选择时间段" clearable style="margin-left:20px;">
+               <el-option
+                 v-for="item in timeRangeOptions"
+                 :key="item.value"
+                 :label="item.label"
+                 :value="item.label">
+               </el-option>
+             </el-select>
+           </el-form-item>
+         </div>
+         <p class="warn-tips" v-if="reservationForm.reservationDate">该日期已经成功预约{{reservationForm.hasReservedNumber}}人，请确保能在此时间段完成预约的随访任务</p>
+        </el-form-item>
+        <el-form-item label="变更原因">
+          <el-input type="textarea" v-model="reservationForm.reason" placeholder="请输入变更原因" maxlength="30" rows="3" style="width:60%;"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeChangeReserve1">取 消</el-button>
+        <el-button type="primary" @click="closeChangeReserve('reservationForm')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+
+  export default {
+    components: {},
+    data(){
+      return{
+        reservationDialog: true,
+        reservationForm: {
+          nickname: '呆呆',
+          reserveStatus: '',
+          reason: '',
+          reservationDate: '',
+          timeRange: '',
+        },
+        timeRangeOptions: [
+          {
+          value: 1,
+          label: '6:00-7:00'
+        }, {
+          value: 2,
+          label: '7:00-8:00'
+        }, {
+          value: 3,
+          label: '8:00-9:00'
+        }, {
+          value: 4,
+          label: '9:00-10:00'
+        }, {
+          value: 5,
+          label: '10:00-11:00'
+        }, {
+          value: 6,
+          label: '11:00-12:00'
+        }, {
+          value: 7,
+          label: '12:00-13:00'
+        }, {
+          value: 8,
+          label: '13:00-14:00'
+        }, {
+          value: 9,
+          label: '14:00-15:00'
+        }, {
+          value: 10,
+          label: '15:00-16:00'
+        }, {
+          value: 11,
+          label: '16:00-17:00'
+        }, {
+          value: 12,
+          label: '17:00-18:00'
+        }, {
+          value: 13,
+          label: '18:00-19:00'
+        }, {
+          value: 14,
+          label: '19:00-20:00'
+        }, {
+          value: 15,
+          label: '20:00-21:00'
+        }],
+        rules: {
+          reserveStatus: [{ required: true, message: '请选择预约状态', trigger: 'change' }],
+          reservationDate: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
+          timeRange: [{ required: true, message: '请选择时间段', trigger: 'change' }],
+        },
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() < Date.now() - 8.64e7
+          }
+        }
+      }
+    },
+    props: {
+      isChangeReservation: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+    },
+    mounted(){
+    },
+    methods: {
+      closeChangeReserve1(){
+        if (this.$refs['reservationForm']) {
+          this.$refs['reservationForm'].resetFields();
+        }
+        this.$emit('closeChangeReserve',false)
+      },
+      closeChangeReserve(formName){
+          this.$refs[formName].validate((valid) => {
+            if (valid) {
+              if (this.$refs['reservationForm']) {
+                this.$refs['reservationForm'].resetFields();
+              }
+              this.$emit('closeChangeReserve',false)
+            } else {
+              return false;
+            }
+          });
+      },
+    }
+  }
+</script>
+<style scoped lang="scss">
+  @import '../../../../style/followup/followup-common';
+  @import '../../../../style/followup/element-reset.css';
+
+  .warn-tips{
+    font-size: 12px;
+    color: #e6a23c;
+    padding-top: 5px;
+  }
+  .el-dialog{
+    min-width: 580px!important;
+  }
+</style>

src/views/followup/reservation-manage/dialog/send-reservation.vue

@@ -181,6 +181,7 @@
   .warn-tips{
     font-size: 12px;
     color: #e6a23c;
+    padding-top: 5px;
   }
   .el-dialog{
     min-width: 580px!important;

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

@@ -96,7 +96,7 @@
             align="center">
             <template slot-scope="scope">
               <el-button class="btn-right-class" type="text" >发送预约</el-button>|
-              <el-button class="btn-right-class" type="text" >变更预约</el-button>
+              <el-button class="btn-right-class" type="text" @click="changeReserveClick(scope.row)">变更预约</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -115,6 +115,7 @@
     </div>
     <send-reservation :isDialogShow="isDialogShow" @closeSendReserve="closeSendReserve"></send-reservation>
     <no-enough :isNoEnoughShow="isNoEnoughShow" @closeTipsDialog="closeTipsDialog"></no-enough>
+    <change-reservation :isChangeReservation="isChangeReservation" @closeChangeReserve="closeChangeReserve"></change-reservation>
   </div>
 </template>
 
@@ -123,9 +124,11 @@
   import BreadCrumb from '@/components/breadcrumb'
   import sendReservation from './dialog/send-reservation'
   import noEnough from './dialog/no-enough'
+  import ChangeReservation from "./dialog/change-reservation";
   export default {
     name: "reservation-list",
     components: {
+      ChangeReservation,
       BreadCrumb,
       sendReservation,
       noEnough
@@ -161,6 +164,7 @@
         hasSmsBalance: true, //短信余额是否充足
         isDialogShow: false, //发送预约dialog展示
         isNoEnoughShow: false, //余额不足dialog展示
+        isChangeReservation: false, //变更预约状态dialog展示
       }
     },
     created() {
@@ -187,11 +191,17 @@
           this.isNoEnoughShow = true;
         }
       },
+      changeReserveClick(){
+        this.isChangeReservation = true;
+      },
       closeSendReserve(val){
         this.isDialogShow = val;
       },
       closeTipsDialog(val){
         this.isNoEnoughShow = val;
+      },
+      closeChangeReserve(val){
+        this.isChangeReservation = val;
       }
     }
   }