发送预约页面

src/style/followup/element-reset.css

@@ -45,3 +45,7 @@
 .el-textarea__inner:focus {
   border-color: #449284!important;
 }
+
+.el-form-item .el-form-item__label{
+  font-size: 14px;
+}

src/views/followup/reservation-manage/dialog/no-enough.vue

+<template>
+  <div class="dialog-wrap">
+    <el-dialog title=""
+               :visible.sync="noEnoughDialog"
+               v-if="isNoEnoughShow"
+               center
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :before-close="closeTipsDialog">
+      <div class="no-enough-content">
+        <h3>余额不足提醒</h3>
+        <p class="section">您的短信额度已欠费，请前往「云鹊医App-个人中心-啾啾币中心」兑换短信额度后再进行预约<br/>您也可以联系云鹊医客服购买短信额度，客服电话：400-920-8877</p>
+        <p class="tip">提示：微信推送不消耗额度，建议您与居民绑定微信，关注云鹊健康微信公众号</p>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="closeTipsDialog">我知道了</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+
+  export default {
+    components: {},
+    data(){
+      return{
+        noEnoughDialog: true,
+      }
+    },
+    props: {
+      isNoEnoughShow: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+    },
+    mounted(){
+    },
+    methods: {
+      closeTipsDialog(){
+        this.$emit('closeTipsDialog',false)
+      },
+    }
+  }
+</script>
+<style scoped lang="scss">
+  @import '../../../../style/followup/followup-common';
+  @import '../../../../style/followup/element-reset.css';
+
+  .warn-tips{
+    font-size: 12px;
+    color: #e6a23c;
+  }
+  .no-enough-content{
+    text-align: center;
+    h3{
+      color: #303133;
+      font-size: 18px;
+      padding-bottom: 30px;
+    }
+    .section{
+      line-height: 30px;
+      padding:20px;
+      color: #f56c6c;
+    }
+    .tip{
+      font-size: 12px;
+      padding: 10px 0;
+    }
+  }
+</style>

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

+<template>
+  <div class="dialog-wrap">
+    <el-dialog title="预约随访居民"
+               :visible.sync="reservationDialog"
+               v-if="isDialogShow"
+               center
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :before-close="closeSendReserve1">
+      <el-form
+        ref="reservationForm"
+        :model="reservationForm"
+        :rules="rules"
+        label-suffix=":"
+        label-width="120px"
+        :label-position="'left'">
+        <el-form-item label="已选居民">
+          <span>{{reservationForm.totalNumber}}人</span><span>（微信发送{{reservationForm.wechatNumber}}人；短信发送{{reservationForm.smsNumber}}人）</span>
+        </el-form-item>
+        <el-form-item 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>
+      <div class="reservation-content content-list" v-if="reservationForm.reservationDate && reservationForm.timeRange">
+        <div class="item">
+          <span class="title">发送内容:</span>
+          <p>{{doctorName}}医生邀请您在{{reservationForm.reservationDate}}的{{reservationForm.timeRange}}进行{{planName}}+{{followupKind}}，请确认是否参加。</p>
+        </div>
+        <div class="item">
+          <span class="title">本次推送:</span>
+          <p>{{reservationForm.totalNumber}}条（微信不限额推送{{reservationForm.wechatNumber}}条；使用短信额度推送{{reservationForm.smsNumber}}条）</p>
+        </div>
+        <div class="item">
+          <span class="title">推送成功后剩余余额:</span>
+          <p>{{smsBalanceNumber}}条</p>
+        </div>
+        <p>提示：微信推送不消耗额度，建议您与居民绑定微信，关注云鹊健康微信公众号</p>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeSendReserve1">取消发送</el-button>
+        <el-button type="primary" @click="closeSendReserve('reservationForm')">立即发送</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    components: {},
+    data(){
+      return{
+        reservationDialog: true,
+        reservationForm: {
+          totalNumber: 88,
+          wechatNumber: 60,
+          smsNumber: 28,
+          reservationDate: '',
+          timeRange: '',
+          hasReservedNumber: 60
+        },
+        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'
+        }],
+        doctorName: '云晓雀',
+        planName: '高血压随访计划',
+        followupKind: '上门随访',
+        smsBalanceNumber: '-20',
+        rules: {
+          reservationDate: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
+          timeRange: [{ required: true, message: '请选择时间段', trigger: 'change' }],
+        },
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() < Date.now() - 8.64e7
+          }
+        }
+      }
+    },
+    props: {
+      isDialogShow: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+    },
+    mounted(){
+    },
+    methods: {
+      closeSendReserve1(){
+        if (this.$refs['reservationForm']) {
+          this.$refs['reservationForm'].resetFields();
+        }
+        this.$emit('closeSendReserve',false)
+      },
+      closeSendReserve(formName){
+          this.$refs[formName].validate((valid) => {
+            if (valid) {
+              alert('submit!');
+              if (this.$refs['reservationForm']) {
+                this.$refs['reservationForm'].resetFields();
+              }
+              this.$emit('closeSendReserve',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;
+  }
+  .el-dialog{
+    min-width: 580px!important;
+  }
+  .reservation-content{
+    padding: 10px;
+    border-top: 1px dashed #efefef;
+    &.content-list{
+      .item{
+        display: flex;
+        line-height: 28px;
+        padding: 10px 0;
+        .title{
+          display: inline-block;
+          margin-right: 15px;
+        }
+        p{
+          flex: 1;
+        }
+      }
+    }
+  }
+</style>

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

@@ -53,7 +53,7 @@
           <el-radio-button label="1">已接受(200)</el-radio-button>
           <el-radio-button label="2">已拒绝(100)</el-radio-button>
         </el-radio-group>
-        <el-button class="button-green" type="primary">发送预约</el-button>
+        <el-button class="button-green" type="primary" @click="sendReservation">发送预约</el-button>
         <el-table
           :data="reservationData"
           center
@@ -110,16 +110,22 @@
         </el-pagination>
       </div>
     </div>
+    <send-reservation :isDialogShow="isDialogShow" @closeSendReserve="closeSendReserve"></send-reservation>
+    <no-enough :isNoEnoughShow="isNoEnoughShow" @closeTipsDialog="closeTipsDialog"></no-enough>
   </div>
 </template>
 
 <script>
   import api from '../../../utils/followup/followapis';
   import BreadCrumb from '@/components/breadcrumb'
+  import sendReservation from './dialog/send-reservation'
+  import noEnough from './dialog/no-enough'
   export default {
     name: "reservation-list",
     components: {
-      BreadCrumb
+      BreadCrumb,
+      sendReservation,
+      noEnough
     },
     data() {
       return {
@@ -127,7 +133,7 @@
         curmbFirst: '随访管理',
         curmbSecond: '预约管理',
         /*面包屑配置*/
-        labelWidth: '96px',  //标题长度
+        labelWidth: '125px',  //标题长度
         searchData: {}, //查询数据
         groupOption: [{ // 分组选项
           value: '全部',
@@ -141,6 +147,9 @@
         pageSize: 15,
         total: 100,
 
+        hasSmsBalance: true, //短信余额是否充足
+        isDialogShow: false, //发送预约dialog展示
+        isNoEnoughShow: false, //余额不足dialog展示
       }
     },
     created() {
@@ -158,6 +167,20 @@
         alert(1+patientId)
         this.$router.push('/followup/plan-manage/resident-detail')
 
+      },
+      sendReservation() {
+        //判断短信余额是否不足
+        if(this.hasSmsBalance){
+          this.isDialogShow = true;
+        }else {
+          this.isNoEnoughShow = true;
+        }
+      },
+      closeSendReserve(val){
+        this.isDialogShow = val;
+      },
+      closeTipsDialog(val){
+        this.isNoEnoughShow = val;
       }
     }
   }