会议室列表、预约列表、会议预约功能开发

src/api/admin/meeting/meetingReservation.js

@@ -4,15 +4,15 @@ const api = {
   meetingReservation: '/admin/mr'
 }
 
-export function getMeetingReservationList (parameter) {
+export function getMeetingReservationList(parameter) {
   return axios({
-    url: api.meetingReservation + '/list',
+    url: api.meetingReservation + '/list?pageNum=' + parameter.pageNum + '&pageSize=' + parameter.pageSize,
     method: 'post',
     data: parameter
   })
 }
 
-export function getAllRoom (parameter) {
+export function getAllRoom(parameter) {
   return axios({
     url: api.meetingReservation + '/getAllRoom',
     method: 'post',
@@ -20,18 +20,16 @@ export function getAllRoom (parameter) {
   })
 }
 
-export function saveMeetingReservation (parameter) {
+export function saveMeetingReservation(parameter) {
+  let act = parameter.mr.id == '' ? '/booking' : '/update'
   return axios({
-    url: api.meetingReservation + (parameter.id > 0 ? '/update' : '/save'),
+    url: api.meetingReservation + act,
     method: 'post',
-    data: parameter,
-    headers: {
-      'Content-Type': 'application/json;charset=UTF-8'
-    }
+    data: parameter
   })
 }
 
-export function delMeetingReservation (parameter) {
+export function delMeetingReservation(parameter) {
   return axios({
     url: api.meetingReservation + '/remove',
     method: 'post',
@@ -39,4 +37,62 @@ export function delMeetingReservation (parameter) {
   })
 }
 
+/**
+ * 单位认证
+ * @param parameter
+ * @returns {AxiosPromise}
+ */
+export function depLogin(parameter) {
+  return axios({
+    url: api.meetingReservation + '/login',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 会议室详情
+ * @param parameter
+ * @returns {AxiosPromise}
+ */
+export function meetingRoomDetail(parameter) {
+  return axios({
+    url: api.meetingReservation + '/roomMrs',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 获取单位列表
+ * @returns {AxiosPromise}
+ */
+export function getDep() {
+  return axios({
+    url: api.meetingReservation + '/getOrg',
+    method: 'post'
+  })
+}
+
+
+// 会议室-取消预约
+export function cancelOrder(parameter) {
+  parameter.operate = 'CANCEL'
+  return axios({
+    // url: '/api/roomContent/cancelOrder',
+    url: api.meetingReservation + '/handle',
+    method: 'post',
+    data: parameter
+  })
+}
+
+// 获取预约信息
+export function getOrderInfo(parameter) {
+  return axios({
+    url: api.meetingReservation + '/getInfo',
+    method: 'post',
+    data: parameter
+  })
+}
+
 export const meetingReservationExport = api.meetingReservation + '/export'

src/views/admin/meeting/MeetingMangerList.vue

@@ -1,11 +1,42 @@
 <template>
-  <a-card :bordered="false">
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="48">
+
+  <a-card :bordered='false'>
+    <a-card :bordered='false' v-if='showDepForm'>
+      <a-form :form='form'>
+        <a-row>
+          <a-col :span='10'>
+            <a-form-item label='单位帐号' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-input placeholder='请输入单位帐号'
+                       v-decorator="['loginName',{rules: [{ required: true, message: '输入单位帐号' }]}]" />
+            </a-form-item>
+          </a-col>
+
+        </a-row>
+        <a-row>
+          <a-col :span='10'>
+            <a-form-item label='单位密码' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-input type='password' placeholder='请输入单位密码'
+                       v-decorator="['password',{rules: [{ required: true, message: '输入单位密码' }]}]" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span='10'>
+            <a-form-model-item :wrapper-col='{ span: 14, offset: 8 }'>
+              <a-button type='primary' @click='getDepInfo'>
+                认证
+              </a-button>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+    <div class='table-page-search-wrapper' v-if='!showDepForm'>
+      <a-form layout='inline'>
+        <a-row :gutter='48'>
           <a-col :md='5' :sm='15'>
             <a-form-item label='预约时间'>
-              <a-date-picker :default-value='nowDate' @change="chooseDate" :disabled-date="disabledDate" />
+              <a-date-picker :default-value='nowDate' @change='chooseDate' :disabled-date='disabledDate' />
             </a-form-item>
           </a-col>
           <a-col :md='5' :sm='15'>
@@ -47,30 +78,31 @@
               </a-select>
             </a-form-item>
           </a-col>
-          <a-col :md="8" :sm="24">
-            <span class="table-page-search-submitButtons">
-              <a-button type="primary" @click="getAllRoomList">查询会议室</a-button>
-<!--              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>-->
+          <a-col :md='8' :sm='24'>
+            <span class='table-page-search-submitButtons'>
+              <a-button type='primary' @click='getAllRoomList'>查询会议室</a-button>
+              <!--              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>-->
             </span>
           </a-col>
         </a-row>
       </a-form>
-      <div class="room">
-        <div class="roomItem" v-for="item in roomList">
-          <div class="title">
+      <div class='room'>
+        <div class='roomItem' v-for='item in roomList'>
+          <div class='title'>
             {{ item.name }}
           </div>
-          <div class="nav">
-            <div class="nav-item" v-for="room in item.list" :key="room.id">
-              <div class="desc">
+          <div class='nav'>
+            <div class='nav-item' v-for='room in item.list' :key='room.id'>
+              <div class='desc'>
                 {{ room.name }}
               </div>
-              <div class="am" v-if='room.am == 0'>上午</div>
-              <div class="am disabled" v-if='room.am == 1'>上午</div>
-              <div class="am disabled">上午</div>
-              <div class="pm">下午</div>
-              <div class="night">晚上</div>
-              <div class="desc-item">
+              <div class='am' v-if='room.am == 0' @click='goOrder(room.id, 1, room.am)'>上午</div>
+              <div class='am disabled' v-if='room.am == 1' @click='goOrder(room.id, 1, room.am)'>上午</div>
+              <div class='pm' v-if='room.pm == 0' @click='goOrder(room.id, 2, room.pm)'>下午</div>
+              <div class='pm disabled' v-if='room.pm == 1' @click='goOrder(room.id, 2, room.pm)'>下午</div>
+              <div class='night' v-if='room.night == 0' @click='goOrder(room.id, 3, room.night)'>晚上</div>
+              <div class='night disabled' v-if='room.night == 1' @click='goOrder(room.id, 3, room.night)'>晚上</div>
+              <div class='desc-item'>
                 {{ room.capacityNum }}人&nbsp;{{ room.typeName }}
               </div>
             </div>
@@ -78,25 +110,32 @@
         </div>
       </div>
     </div>
+    <RoomOrder-modal ref='modal' @ok='handleOk' />
   </a-card>
 </template>
 
 <script>
-import { getAllRoom } from '@/api/admin/meeting/meetingReservation'
-import {
-  getRoomContentList, delRoomContent, selectSearchInfoByType,
-  selectSearchInfoByShape, selectSearchInfoByCapacity, addRoomServe,
-  selectRoomServeByRoom, selectRoomItemByRoom, getMeetingDict
-} from '@/api/admin/meeting/roomContent'
+import { getAllRoom, depLogin, getOrderInfo } from '@/api/admin/meeting/meetingReservation'
+import { getMeetingDict, saveRoomContent } from '@/api/admin/meeting/roomContent'
 
 import moment from 'moment'
+import RoomOrderModal from '@/views/admin/meeting/modules/RoomOrderModal.vue'
 
 export default {
   name: 'MeetingMangerList',
-  data () {
+  components: { RoomOrderModal },
+  data() {
     return {
-      nowDate: moment().format('YYYY-MM-DD'), // 当前日期
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 35 },
+        sm: { span: 16 }
+      },
       form: this.$form.createForm(this),
+      nowDate: moment().format('YYYY-MM-DD'), // 当前日期
       mdl: {},
       // 高级搜索 展开/关闭
       advanced: false,
@@ -110,15 +149,39 @@ export default {
       capacityList: [],
       shapeList: [],
       typeList: [],
-      roomList: []
-      // 表头
+      roomList: [],
+      showDepForm: true,
+      depId: '',
+      dep: '',
+      rId: '' // 预约id，不为空，则为编辑
     }
   },
-  created () {
-    this.getAllRoomList()
+  created() {
+
   },
   mounted() {
+    let rId = this.$route.query.rId
+    if (rId) {
+      this.rId = rId
+      // 获取信息
+      getOrderInfo({ id: rId }).then(res => {
+        if (res.code == 0) {
+          this.depId = res.mr.userOrgId
+          this.dep = res.mr.userOrg
+          this.showDepForm = false
+        } else {
+          // 查询错误
+          this.rId = ''
+        }
+      })
+    } else {
+      // 为新增
+      if (this.depId != '') {
+        this.showDepForm = false
+      }
+    }
     this.getDict()
+    this.getAllRoomList()
   },
   methods: {
     chooseDate(date, dateString) {
@@ -173,11 +236,43 @@ export default {
       }
       this.getAllRoomList()
     },
-    toMeetingList (item) {
-      this.$router.push({ name: 'reservation', params: { roomId: item.name } })
-    },
-    getAllRoomList () {
-      getAllRoom({ timeFormat: 0, min: 1, max: 1000 }).then(res => {
+    getAllRoomList() {
+      let minPerNum = 0
+      let maxPerNum = 1000
+      let perNumValue = this.queryParam.capacityNum
+      if (perNumValue == 1) {
+        // 1-20
+        maxPerNum = 20
+        minPerNum = 1
+      } else if (perNumValue == 2) {
+        // 21-50
+        minPerNum = 21
+        maxPerNum = 50
+      } else if (perNumValue == 3) {
+        // 51-100
+        minPerNum = 51
+        maxPerNum = 100
+      } else if (perNumValue == 4) {
+        // 51-100
+        minPerNum = 101
+        maxPerNum = 1000
+      } else {
+        // 全部
+        minPerNum = 1
+        maxPerNum = 1000
+      }
+
+      let param = {
+        floor: this.queryParam.typeName, // 楼层
+        min: minPerNum, // 最小容纳人数
+        max: maxPerNum, // 最大容纳人数
+        // devices: devicesArr, // 设备
+        typeName: this.queryParam.shape, // 形状
+        timeFormat: 1, // 预约时间格式：0 任意时间（管理员），1上午，2下午，3晚上 4 全天。值为0时，读取startTime和endTime为预约会议时间范围；其他值读取mrdate，再拼接时间为预约会议时间范围。返回值为1时；读取 am，上午  0可预约 1不可预约  pm，下午 0可预约 1不可预约  night，晚上 0可预约 1不可预约，这里默认全部为1
+        mrdate: this.nowDate
+      }
+
+      getAllRoom(param).then(res => {
         const roomArr = {}
         const valueObj = res.data
         // eslint-disable-next-line no-unused-vars
@@ -195,6 +290,58 @@ export default {
         this.roomList = roomArr
         console.log(this.roomList)
       })
+    },
+    getDepInfo(e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('单位认证：', values)
+          depLogin(values)
+            .then((res) => {
+              if (res.code === 0) {
+                this.depId = res.data.orgId
+                this.dep = res.data.orgName
+                this.$message.success(this.dep + '，欢迎您！')
+                this.showDepForm = false
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+            .catch(() => {
+              this.$message.error('系统错误，请稍后再试')
+            })
+            .finally(() => {
+            })
+        }
+      })
+    },
+    goOrder(id, timeRange, status) {
+      let data = {
+        date: this.nowDate,
+        timeRange: timeRange,
+        status: status,
+        id: id,
+        dep: this.dep,
+        depId: this.depId
+      }
+      if (this.rId != '') {
+        data.rId = this.rId
+        data.act = 1 // 重新选择时间、会议室
+        this.handleEdit(data)
+      } else {
+        this.handleAdd(data)
+      }
+    },
+    handleAdd(data) {
+      this.$refs.modal.add(data)
+    },
+    handleEdit(data) {
+      this.$refs.modal.edit(data)
+    },
+    handleOk() {
+      // 跳转到预约列表
+      this.$router.push({ name: 'reservation' })
+      // this.getAllRoomList()
     }
   }
 }
@@ -204,10 +351,12 @@ export default {
 .room {
   border-top: 1px solid rgb(221 215 215 / 65%);
 }
+
 .room .title {
   font-size: 32px;
   font-weight: 700;
 }
+
 .roomItem {
   margin-top: 20px;
 }
@@ -215,28 +364,20 @@ export default {
 .roomItem .desc {
   width: 150px;
   height: 30px;
-  //background-color: #A3CDFF;
-  //border-radius: 10px 10px 0 0px;
-  line-height: 30px;
-  text-align: center;
-  font-size: 20px;
-  margin-top: 20px;
-  font-weight: 700;
+//background-color: #A3CDFF; //border-radius: 10px 10px 0 0px; line-height: 30px; text-align: center; font-size: 20px; margin-top: 20px; font-weight: 700;
 }
-.roomItem .am, .roomItem .pm, .roomItem .night{
+
+.roomItem .am, .roomItem .pm, .roomItem .night {
   width: 150px;
   height: 30px;
   background-color: #A3CDFF;
-  //border-radius: 10px 10px 0 0px;
-  line-height: 30px;
-  text-align: center;
-  font-size: 16px;
-  margin-top: 2px;
-  cursor: pointer;
+//border-radius: 10px 10px 0 0px; line-height: 30px; text-align: center; font-size: 16px; margin-top: 2px; cursor: pointer;
 }
+
 .roomItem .disabled {
   background-color: #F2F2F2 !important;
 }
+
 .roomItem .desc-item {
   width: 150px;
   height: 30px;

src/views/admin/meeting/MeetingReservationList.vue

@@ -6,53 +6,56 @@
           <a-col :md='5' :sm='15'>
             <a-form-item label='状态'>
               <a-select v-model='queryParam.status'>
-                <a-select-option value='1'>
-                  取消
-                </a-select-option>
-                <a-select-option value='3'>
-                  驳回
-                </a-select-option>
-                <a-select-option value='4'>
-                  占用
+                <a-select-option value=''>
+                  全部预约
                 </a-select-option>
                 <a-select-option value='5'>
                   待审核
                 </a-select-option>
                 <a-select-option value='7'>
-                  审核通过
-                </a-select-option>
-                <a-select-option value='9'>
-                  进行中
+                  待开始
                 </a-select-option>
                 <a-select-option value='11'>
                   已结束
                 </a-select-option>
+                <a-select-option value='1'>
+                  已取消
+                </a-select-option>
+                <a-select-option value='3'>
+                  已驳回
+                </a-select-option>
+                <a-select-option value='4'>
+                  占用
+                </a-select-option>
+                <a-select-option value='9'>
+                  进行中
+                </a-select-option>
               </a-select>
             </a-form-item>
           </a-col>
           <a-col :md='5' :sm='15'>
-            <a-form-item label='会议室'>
-              <a-input placeholder='请输入会议室' v-model='queryParam.name' />
+            <a-form-item label='会议名称'>
+              <a-input placeholder='请输入会议名称' v-model='queryParam.title' />
             </a-form-item>
           </a-col>
+          <!--          <a-col :md='5' :sm='15'>-->
+          <!--            <a-form-item label='参与人数'>-->
+          <!--              <a-input placeholder='请输入参与人数' v-model='queryParam.personNum' />-->
+          <!--            </a-form-item>-->
+          <!--          </a-col>-->
+          <!--          <a-col :md='5' :sm='15'>-->
+          <!--            <a-form-item label='姓名'>-->
+          <!--              <a-input placeholder='请输入预约人姓名' v-model='queryParam.bookingUserName' />-->
+          <!--            </a-form-item>-->
+          <!--          </a-col>-->
+          <!--          <a-col :md='5' :sm='15'>-->
+          <!--            <a-form-item label='联系电话'>-->
+          <!--              <a-input placeholder='请输入预约人联系电话' v-model='queryParam.bookingUserPhone' />-->
+          <!--            </a-form-item>-->
+          <!--          </a-col>-->
           <a-col :md='5' :sm='15'>
-            <a-form-item label='参与人数'>
-              <a-input placeholder='请输入参与人数' v-model='queryParam.personNum' />
-            </a-form-item>
-          </a-col>
-          <a-col :md='5' :sm='15'>
-            <a-form-item label='姓名'>
-              <a-input placeholder='请输入预约人姓名' v-model='queryParam.bookingUserName' />
-            </a-form-item>
-          </a-col>
-          <a-col :md='5' :sm='15'>
-            <a-form-item label='联系电话'>
-              <a-input placeholder='请输入预约人联系电话' v-model='queryParam.bookingUserPhone' />
-            </a-form-item>
-          </a-col>
-          <a-col :md='5' :sm='15'>
-            <a-form-item label='单位名称'>
-              <a-input placeholder='请输入单位名称' v-model='queryParam.userOrg' />
+            <a-form-item label='预约单位'>
+              <a-input placeholder='预约单位' v-model='queryParam.userOrg' />
             </a-form-item>
           </a-col>
           <a-col :md='8' :sm='24'>
@@ -70,6 +73,7 @@
     </div>
     <s-table
       size='default'
+      showPagination='true'
       ref='table'
       rowKey='id'
       :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
@@ -82,7 +86,7 @@
           取消
         </a-tag>
         <a-tag v-if='record.status == 3' color='red'>
-          驳回
+          已驳回
         </a-tag>
         <a-tag v-if='record.status == 4' color='purple'>
           占用
@@ -91,7 +95,7 @@
           待审核
         </a-tag>
         <a-tag v-if='record.status == 7' color='green'>
-          审核通过
+          待开始
         </a-tag>
         <a-tag v-if='record.status == 9' color='cyan'>
           进行中
@@ -101,30 +105,59 @@
         </a-tag>
       </span>
       <span slot='action' slot-scope='text, record'>
-        <a v-if='editEnabel' @click='handleEdit(record)'>编辑</a>
-        <a-divider type='vertical' />
-        <a v-if='removeEnable' @click='delByIds([record.id])'>删除</a>
+        <a @click='handleShow(record.id)'>查看</a>
+        <a-divider v-if='record.canCancel || record.canEdit' type='vertical' />
+        <a v-if='record.canCancel' @click='cancelConfirm(record.id)'>取消预约</a>
+        <a-divider v-if='record.canCancel && record.canEdit' type='vertical' />
+        <a-dropdown :trigger="['click']" v-if='record.canEdit'>
+          <a class='ant-dropdown-link' @click='e => e.preventDefault()'>
+            修改信息
+          </a>
+          <a-menu slot='overlay'>
+            <a-menu-item key='0' @click='handleEdit(record.id, 1)'>
+              重新选择时间、会议室
+            </a-menu-item>
+            <a-menu-item key='1' @click='handleEdit(record.id,2)'>
+              重新编辑会议信息
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
       </span>
     </s-table>
-    <meetingReservation-modal ref='modal' @ok='handleOk' />
+    <RoomOrder-modal ref='modal' @ok='handleOk' />
+    <RoomOrderDetail-modal ref='detailModal' />
+    <a-modal
+      title='取消预约'
+      :visible='showCancelReason'
+      @ok='cancelOrderSub'
+      @cancel='onCloseCancel'
+    >
+      <a-textarea
+        v-model='cancelReason'
+        placeholder='请输入取消预约原因'
+        :auto-size='{ minRows: 3, maxRows: 5 }'
+      />
+    </a-modal>
   </a-card>
 </template>
 
 <script>
 import { STable } from '@/components'
 
-import { delMeetingReservation, getMeetingReservationList } from '@/api/admin/meeting/meetingReservation'
-import MeetingReservationModal from './modules/MeetingReservationModal.vue'
+import { getMeetingReservationList, cancelOrder } from '@/api/admin/meeting/meetingReservation'
 import { checkPermission } from '@/utils/permissions'
 import { getRoomServeList } from '@/api/admin/meeting/roomServe'
 import { delRoomContent } from '@/api/admin/meeting/roomContent'
 import { selfFormatTimeYMD, selfFormatTimeHM } from '@/utils/util'
 
+import RoomOrderModal from '@/views/admin/meeting/modules/RoomOrderModal.vue'
+import RoomOrderDetailModal from '@/views/admin/meeting/modules/RoomOrderDetailModal.vue'
 export default {
   name: 'TableList',
   components: {
     STable,
-    MeetingReservationModal
+    RoomOrderModal,
+    RoomOrderDetailModal
   },
   data() {
     return {
@@ -179,26 +212,62 @@ export default {
         },
         {
           title: '操作',
-          width: '200px',
+          // width: '200px',
           dataIndex: 'action',
           scopedSlots: { customRender: 'action' }
         }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        this.queryParam.name = this.$route.params.roomId
+        // this.queryParam.name = this.$route.params.roomId
         // 处理一下时间
         return getMeetingReservationList(Object.assign(parameter, this.queryParam)).then(res => {
           for (let key in res.rows) {
             let startTime = res.rows[key].start
             let endTime = res.rows[key].end
             res.rows[key].timeSlot = selfFormatTimeYMD(startTime) + ' ' + selfFormatTimeHM(startTime) + '~' + selfFormatTimeHM(endTime)
+            // 处理状态
+            // 预约状态，1 取消  3 驳回 4 占用 5 待审核  7 审核通过，待开始 9 进行中 11已结束
+            let statusValue = res.rows[key].status
+            let showCancel = false // 显示取消操作
+            let showEdit = false // 显示编辑操作
+            if (statusValue == 1) {
+              // 取消
+              showEdit = true
             }
+            if (statusValue == 3) {
+              // showCancel = true
+              showEdit = true
+            }
+            if (statusValue == 4) {
+              // 占用，普通人员不存在此情况
+            }
+            if (statusValue == 5) {
+              // 待审核，普通用户只能取消，管理员可以修改
+              showCancel = true
+            }
+            if (statusValue == 7) {
+              // 审核通过，不允许修改，允许取消
+              showCancel = true
+            }
+            if (statusValue == 9) {
+              // 进行中
+            }
+            if (statusValue == 11) {
+              // 已结束
+            }
+            res.rows[key].canCancel = showCancel
+            res.rows[key].canEdit = showEdit
+          }
+          console.log(res)
           return res
         })
       },
       selectedRowKeys: [],
       selectedRows: [],
+      showCancelReason: false,
+      cancelReason: '',
+      cancelId: ''
     }
   },
   filters: {},
@@ -213,43 +282,61 @@ export default {
       this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows
     },
-    handleAdd() {
-      this.$refs.modal.add()
+    // 编辑
+    handleEdit(id, type) {
+      if (type == 1) {
+        this.$router.push({ name: 'manger', query: { rId: id } })
+      } else {
+        let data = {
+          act: 2,
+          rId: id
+        }
+        this.$refs.modal.edit(data)
+      }
     },
-    handleEdit(id) {
-      this.$refs.modal.edit(id)
+    // 展示详情
+    handleShow(id) {
+      this.$refs.detailModal.show(id)
     },
     handleOk(status) {
       status = status || false
       this.$refs.table.refresh(status)
     },
-    delByIds(ids) {
-      const _this = this
-      if (ids === '') {
-        this.$message.error('请选择后删除！')
+    /**
+     * 取消预约
+     * @param id
+     */
+    cancelConfirm(id) {
+      this.cancelId = id
+      this.showCancelReason = true
+    },
+    onCloseCancel() {
+      this.cancelId = ''
+      this.showCancelReason = false
+      this.cancelReason = ''
+    },
+    cancelOrderSub() {
+      if (this.cancelReason == '') {
+        this.$message.error('请输入取消预约原因！')
         return
       }
-      this.$confirm({
-        title: '警告',
-        content: '删除后不可恢复，是否确认删除?',
-        okText: '是',
-        okType: 'warning',
-        cancelText: '否',
-        onOk() {
-          delMeetingReservation({ ids: ids.join(',') }).then((res) => {
-            if (res.code === 0) {
-              _this.$message.success('删除成功')
-              _this.handleOk()
+      cancelOrder({
+        id: this.cancelId,
+        content: this.cancelReason
+      }).then(res => {
+        console.log('cancelOrderRq', res)
+        if (res.code == 0) {
+          this.$message.success('已取消！')
+          this.showCancelReason = false
+          this.handleOk()
         } else {
-              _this.$message.error(res.msg)
+          this.$message.error(res.msg)
         }
-            _this.selectedRowKeys = []
+      }).catch(() => {
+        this.$message.error('系统错误，请稍后再试')
+      }).finally(() => {
+        // this.confirmLoading = false
       })
-        },
-        onCancel() {
-        }
-      })
-
     }
   },
   watch: {

src/views/admin/meeting/modules/RoomOrderDetailModal.vue

@@ -0,0 +1,240 @@
+<template>
+  <a-modal
+    title='预约详情'
+    style='top: 20px'
+    width='1200px'
+    v-model='visible'
+    :ok-button-props='{style:{display:"none"}}'
+    @ok='handleSubmit'
+  >
+    <a-card title='会议室情况'>
+      <a-tabs default-active-key='1' @change='callback'>
+        <a-tab-pane key='1' tab='会议室详情'>
+          <a-carousel autoplay>
+            <div v-for='item in banner'>
+              <img :src='item' />
+            </div>
+          </a-carousel>
+          <a-descriptions title='' bordered>
+            <a-descriptions-item label='会议室名称'>
+              {{ roomDetail.name }}
+            </a-descriptions-item>
+            <a-descriptions-item label='会议室概况'>
+              {{ roomDetail.floor }} | {{ roomDetail.roomNum }} | {{ roomDetail.capacityNum }}人 |
+              {{ roomDetail.typeName }}
+            </a-descriptions-item>
+            <a-descriptions-item label='会议室设备'>
+              {{ roomDetail.device }}
+            </a-descriptions-item>
+            <a-descriptions-item label='会议室描述'>
+              {{ roomDetail.content }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </a-tab-pane>
+        <a-tab-pane key='2' tab='预约情况' force-render>
+          <a-table :columns='recordCol' :data-source='recordList'>
+          </a-table>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+    <a-card title='预约信息' style='margin-top: 10px'>
+      <a-descriptions title='' bordered>
+        <a-descriptions-item label='会议时间'>
+          {{ order.timeSlot }}
+        </a-descriptions-item>
+        <a-descriptions-item label='会议名称'>
+          {{ order.title }}
+        </a-descriptions-item>
+        <a-descriptions-item label='参会人数'>
+          {{ order.personNum }}
+        </a-descriptions-item>
+        <a-descriptions-item label='参会领导'>
+          {{ order.leader }}
+        </a-descriptions-item>
+        <a-descriptions-item label='预约部门'>
+          {{ order.userOrg }}
+        </a-descriptions-item>
+        <a-descriptions-item label='会议预约人'>
+          {{ order.bookingUserName }}
+        </a-descriptions-item>
+        <a-descriptions-item label='联系方式'>
+          {{ order.bookingUserPhone }}
+        </a-descriptions-item>
+        <a-descriptions-item label='备注' :span='2'>
+          {{ order.remark }}
+        </a-descriptions-item>
+        <a-descriptions-item label='会议服务' :span='3'>
+          {{ order.service }}
+        </a-descriptions-item>
+        <a-descriptions-item label='会务人员' :span='3'>
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+  </a-modal>
+</template>
+<script>
+import {
+  meetingRoomDetail, getDep, saveMeetingReservation, getOrderInfo
+} from '@/api/admin/meeting/meetingReservation'
+import pick from 'lodash.pick'
+import storage from 'store'
+import moment from 'moment'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { getMeetingDict } from '@/api/admin/meeting/roomContent'
+
+export default {
+  name: 'RoomOrderDetailModal',
+  props: {},
+  components: {},
+  data() {
+    return {
+      visible: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 35 },
+        sm: { span: 16 }
+      },
+      id: '',
+      rId: '',
+      banner: '',
+      roomDetail: {},
+      recordList: [],
+      order: {},
+      recordCol: [{
+        title: '预约时间',
+        dataIndex: 'time'
+      }, {
+        title: '预约单位',
+        dataIndex: 'userOrg'
+      }, {
+        title: '预约人',
+        dataIndex: 'bookingUserName'
+      }, {
+        title: '联系方式',
+        dataIndex: 'bookingUserPhone'
+      }]
+    }
+  },
+  beforeCreate() {
+  },
+  created() {
+  },
+  mounted() {
+    // this.getDict()
+  },
+  methods: {
+    show(id) {
+      this.rId = id
+      getOrderInfo({ id: this.rId }).then((res) => {
+        this.id = res.mr.roomId
+        this.getRoomInfo()
+
+        let sTime = res.mr.start
+        let eTime = res.mr.end
+        res.mr.timeSlot = moment(sTime).format('YYYY-MM-DD HH:mm') + '~' + moment(eTime).format('HH:mm')
+
+        // 处理会议服务
+        let service = ''
+        for (let key in res.serve) {
+          service += '#' + res.serve[key]['name'] + ' '
+        }
+        res.mr.service = service
+        this.order = res.mr
+      })
+      this.visible = true
+    },
+    getRoomInfo() {
+      meetingRoomDetail({
+        roomId: this.id
+      }).then(res => {
+        let detail = res.room // 详细信息
+        let recordList = res.mr // 预约信息
+        let bannerList = [] // 轮播图
+        if (detail.imgs) {
+          try {
+            bannerList = detail.imgs.map(item => process.env.VUE_APP_MODEL_BASE_URL + item.url)
+          } catch (error) {
+            console.log(`JSON error : ${error}`)
+          }
+        }
+        let newRecordList = []
+        for (let key in recordList) {
+          let eachObj = recordList[key]
+          let sTime = eachObj['start']
+          let eTime = eachObj['end']
+          eachObj['date'] = moment(sTime).format('YYYY-MM-DD')
+          eachObj['time'] = moment(sTime).format('YYYY-MM-DD HH:mm') + '~' + moment(eTime).format('HH:mm')
+          newRecordList.push(eachObj)
+        }
+        this.recordList = newRecordList
+        this.roomDetail = detail
+        this.banner = bannerList
+        // this.getDict(detail.ext1)
+      })
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+/* For demo */
+.ant-carousel >>> .slick-dots {
+  height: auto;
+}
+
+.ant-carousel >>> .slick-slide img {
+  border: 5px solid #fff;
+  display: block;
+  margin: auto;
+  max-width: 300px;
+}
+
+.ant-carousel >>> .slick-thumb {
+  bottom: -45px;
+}
+
+.ant-carousel >>> .slick-thumb li {
+  width: 60px;
+  height: 45px;
+}
+
+.ant-carousel >>> .slick-thumb li img {
+  width: 100%;
+  height: 100%;
+  filter: grayscale(100%);
+}
+
+.ant-carousel >>> .slick-thumb li.slick-active img {
+  filter: grayscale(0%);
+}
+
+.self-item-cell {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.self-item-cell .self-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 50%;
+}
+
+.self-item-cell .self-item:first-of-type {
+  margin-right: 10px;
+}
+
+.self-item-cell .self-item .title {
+  margin-right: 10px;
+}
+
+.self-item-cell .self-item .input {
+  flex: 1;
+
+}
+</style>

src/views/admin/meeting/modules/RoomOrderModal.vue

@@ -0,0 +1,604 @@
+<template>
+  <a-modal
+    :title="mdl.id>0?'编辑':'预约  ' + date + ' ' + timeRangeText"
+    style='top: 20px'
+    width='1200px'
+    v-model='visible'
+    :ok-button-props='{ props: { disabled: disabledConfirm } }'
+    @ok='handleSubmit'
+  >
+    <a-card title='会议室情况'>
+      <a-tabs default-active-key='1' @change='callback'>
+        <a-tab-pane key='1' tab='会议室详情'>
+          <a-carousel autoplay>
+            <div v-for='item in banner'>
+              <img :src='item' />
+            </div>
+          </a-carousel>
+          <a-descriptions title='' bordered>
+            <a-descriptions-item label='会议室名称'>
+              {{ roomDetail.name }}
+            </a-descriptions-item>
+            <a-descriptions-item label='会议室概况'>
+              {{ roomDetail.floor }} | {{ roomDetail.roomNum }} | {{ roomDetail.capacityNum }}人 |
+              {{ roomDetail.typeName }}
+            </a-descriptions-item>
+            <a-descriptions-item label='会议室设备'>
+              {{ roomDetail.device }}
+            </a-descriptions-item>
+            <a-descriptions-item label='会议室描述'>
+              {{ roomDetail.content }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </a-tab-pane>
+        <a-tab-pane key='2' tab='预约情况' force-render>
+          <a-table :columns='recordCol' :data-source='recordList'>
+          </a-table>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+    <a-card :title='"我要预约  " + date + " " + timeRangeText' style='margin-top: 10px'>
+      <a-empty v-show='disabledConfirm'>
+        <span slot='description'>当前时段无法预约</span>
+      </a-empty>
+      <a-form :form='form' v-show='!disabledConfirm'>
+        <a-form-item style='display: none'>
+          <a-input v-decorator="['id']" />
+        </a-form-item>
+        <a-row>
+          <a-col :span='10'>
+            <a-form-item label='预约时间' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-time-picker :disabled='disabledTime' v-decorator="['start',{rules: [{ required: true, message: '选择会议时间' }]}]"
+                             format='HH:mm' :disabledHours='disabledHours' :disabledMinutes='disabledMinutes'
+                             hideDisabledOptions='true' />
+              <a-time-picker :disabled='disabledTime' v-decorator="['end',{rules: [{ required: true, message: '选择会议时间' }]}]"
+                             style='margin-left: 10px' format='HH:mm' :disabledHours='disabledHours'
+                             :disabledMinutes='disabledMinutes' hideDisabledOptions='true' />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span='10'>
+            <a-form-item label='会议名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-input placeholder='会议名称'
+                       v-decorator="['title',{rules: [{ required: true, message: '输入会议名称' }]}]" />
+            </a-form-item>
+          </a-col>
+          <a-col :span='10'>
+            <a-form-item label='参会人数' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-input placeholder='参会人数'
+                       v-decorator="['personNum',{rules: [{ required: true, message: '参会人数' }]}]" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span='10'>
+            <a-form-item label='参会领导' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-input placeholder='参会领导'
+                       v-decorator="['leader',{rules: [{ required: true, message: '输入参会领导' }]}]" />
+            </a-form-item>
+          </a-col>
+          <a-col :span='10'>
+            <a-form-item label='预约部门' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-select show-search v-decorator="['userOrgId',{rules: [{ required: true, message: '选择预约部门' }]}]"
+                        placeholder='预约部门'>
+                <a-select-option v-for='item in depList' :value='item.id'>
+                  {{ item.name }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span='10'>
+            <a-form-item label='预约人' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-input placeholder='预约人'
+                       v-decorator="['bookingUserName',{rules: [{ required: true, message: '输入预约人' }]}]" />
+            </a-form-item>
+          </a-col>
+          <a-col :span='10'>
+            <a-form-item label='联系方式' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-input placeholder='联系方式'
+                       v-decorator="['bookingUserPhone',{rules: [{ required: true, message: '输入联系方式' }]}]" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span='10'>
+            <a-form-item label='会议室服务' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+              <a-checkbox-group
+                v-decorator="['service']">
+                <a-checkbox v-for='item in serviceList' :value='item.value'>
+                  {{ item.text }}
+                </a-checkbox>
+              </a-checkbox-group>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span='10'>
+            <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='备注 '>
+              <a-textarea placeholder='备注 ' v-decorator="['remark']" style='height: 100px' />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+  </a-modal>
+</template>
+<script>
+import {
+  meetingRoomDetail, getDep, saveMeetingReservation, getOrderInfo
+} from '@/api/admin/meeting/meetingReservation'
+import pick from 'lodash.pick'
+import storage from 'store'
+import moment from 'moment'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { getMeetingDict } from '@/api/admin/meeting/roomContent'
+
+export default {
+  name: 'RoomOrderModal',
+  props: {},
+  components: {},
+  data() {
+    return {
+      visible: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 35 },
+        sm: { span: 16 }
+      },
+      mdl: {},
+      form: this.$form.createForm(this),
+      rId: '', // 预约id
+      timeRange: '',
+      timeRangeText: '',
+      date: '',
+      id: '', // 会议室id
+      depId: '',
+      dep: '',
+      banner: '',
+      roomDetail: {},
+      recordList: [],
+      recordCol: [{
+        title: '预约时间',
+        dataIndex: 'time'
+      }, {
+        title: '预约单位',
+        dataIndex: 'userOrg'
+      }, {
+        title: '预约人',
+        dataIndex: 'bookingUserName'
+      }, {
+        title: '联系方式',
+        dataIndex: 'bookingUserPhone'
+      }],
+      serviceList: [],
+      serviceMap: {},
+      disabledConfirm: false,
+      depList: [],
+      disabledTime: false
+    }
+  },
+  beforeCreate() {
+  },
+  created() {
+  },
+  mounted() {
+    // this.getDict()
+  },
+  methods: {
+    getDict(roomServId) {
+      let serveIdArr = roomServId.split(',')
+      getMeetingDict().then((res) => {
+        // 服务
+        let dataObj = res.data
+        let _serviceList = []
+        for (let key in dataObj.services) {
+          let eachObj = dataObj.services[key]
+          const keys = Object.keys(eachObj)
+          if (serveIdArr.indexOf(eachObj[keys[0]]) !== -1) {
+            _serviceList.push({
+              text: keys[0],
+              value: eachObj[keys[0]]
+            })
+            this.serviceMap[eachObj[keys[0]]] = keys[0]
+          }
+        }
+        this.serviceList = _serviceList
+      })
+    },
+    getAllDep() {
+      getDep().then(res => {
+        let dep = res.data
+        let depList = []
+        for (let key in dep) {
+          let eachObj = dep[key]
+          depList.push({
+            id: eachObj['orgId'].toString(),
+            name: eachObj['orgName']
+          })
+        }
+        this.depList = depList
+      })
+    },
+    add(data) {
+      this.id = data.id
+      this.timeRange = data.timeRange
+      if (this.timeRange == 1) {
+        this.timeRangeText = '上午'
+      }
+      if (this.timeRange == 2) {
+        this.timeRangeText = '下午'
+      }
+      if (this.timeRange == 3) {
+        this.timeRangeText = '晚上'
+      }
+      if (this.timeRange == 4) {
+        this.timeRangeText = '全天'
+      }
+      this.date = data.date
+      this.depId = data.depId
+      this.dep = data.dep
+      this.form.resetFields()
+      this.mdl = {}
+      this.serviceList = []
+      this.serviceMap = []
+      this.visible = true
+      this.getRoomInfo()
+      this.getAllDep()
+      if (data.status == 1) {
+        this.disabledConfirm = true
+      } else {
+        this.disabledConfirm = false
+      }
+      // 给默认值赋值
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          id: '',
+          userOrgId: this.depId.toString()
+        })
+      })
+    },
+    edit(data) {
+      let act = data.act
+      this.rId = data.rId
+      if (act == 1) {
+        // 选择的房间
+        this.id = data.id
+        // 重新选择时间、会议室
+        this.timeRange = data.timeRange
+        if (this.timeRange == 1) {
+          this.timeRangeText = '上午'
+        }
+        if (this.timeRange == 2) {
+          this.timeRangeText = '下午'
+        }
+        if (this.timeRange == 3) {
+          this.timeRangeText = '晚上'
+        }
+        if (this.timeRange == 4) {
+          this.timeRangeText = '全天'
+        }
+        this.date = data.date
+        this.depId = data.depId
+        this.dep = data.dep
+        // 直接获取会议室信息
+        this.getRoomInfo()
+      } else if(act == 2) {
+        // 重新编辑信息
+        this.disabledTime = true
+        console.log('编辑信息')
+      } else {
+        this.$message.error('非法操作！')
+        return
+      }
+      this.form.resetFields()
+      this.mdl = {}
+      this.serviceList = []
+      this.serviceMap = []
+      this.visible = true
+      this.getAllDep()
+      if (data.status == 1) {
+        this.disabledConfirm = true
+      } else {
+        this.disabledConfirm = false
+      }
+      getOrderInfo({ id: this.rId }).then((res) => {
+        if (act == 1) {
+          // 重新选择时间和会议室
+          res.mr.start = ''
+          res.mr.end = ''
+          res.mr.service = [] // 清空服务
+        } else {
+          // 重新编辑信息，此时会议室信息要单独获取
+          this.id = res.mr.roomId
+          this.timeRange = res.mr.timeFormat
+          if (this.timeRange == 1) {
+            this.timeRangeText = '上午'
+          }
+          if (this.timeRange == 2) {
+            this.timeRangeText = '下午'
+          }
+          if (this.timeRange == 3) {
+            this.timeRangeText = '晚上'
+          }
+          if (this.timeRange == 4) {
+            this.timeRangeText = '全天'
+          }
+          this.date = moment(res.mr.start).format('YYYY-MM-DD')
+          this.getRoomInfo()
+          res.mr.start = moment(res.mr.start)
+          res.mr.end = moment(res.mr.end)
+          let service = []
+          for (let key in res.serve) {
+            service.push(res.serve[key].value)
+          }
+          res.mr.service = service
+        }
+        res.mr.userOrgId = res.mr.userOrgId.toString()
+        this.mdl = Object.assign(this.mdl, res.mr)
+        this.visible = true
+        this.$nextTick(() => {
+          this.form.setFieldsValue(
+            pick(
+              this.mdl,
+              'id',
+              'start',
+              'end',
+              'title',
+              'personNum',
+              'leader',
+              'userOrgId',
+              'bookingUserName',
+              'bookingUserPhone',
+              'remark',
+              'service'
+            )
+          )
+        })
+      })
+    },
+    handleSubmit(e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.confirmLoading = false
+          // 处理一下serviceList
+          let service = []
+          let serviceList = values.service
+          for (let key in serviceList) {
+            let eachObj = serviceList[key]
+            service.push({
+              name: this.serviceMap[eachObj],
+              value: eachObj,
+              remark: ''
+            })
+          }
+
+          // 处理开始结束时间
+          values.start = values.start.format(this.date + ' HH:mm:00')
+          values.end = values.end.format(this.date + ' HH:mm:00')
+
+          // 计算一下时间差
+          var a = moment(values.start)
+          var b = moment(values.end)
+          var c = moment() // 当前时间
+          var timeDiff = b.diff(a)
+          var timeDiffNow = c.diff(a)
+          if (timeDiff < 0) {
+            // 异常
+            this.$message.error('结束时间不能小于开始时间！')
+            return
+          }
+          if (timeDiffNow > 0) {
+            // 异常
+            this.$message.error('开始时间请大于当前时间！！')
+            return
+          }
+          values.mrdate = this.date
+          values.timeFormat = this.timeRange
+
+          // 处理获取orgName
+          for (let key in this.depList) {
+            if (this.depList[key]['id'] == values.userOrgId) {
+              values.userOrg = this.depList[key]['name']
+            }
+          }
+          values.roomId = this.id
+          let data = {
+            'mr': values,
+            'serve': service
+          }
+
+          saveMeetingReservation(data).then((res) => {
+            if (res.code === 0) {
+              if (this.rId == '') {
+                this.$message.success('预约成功，请等待审核！')
+              } else {
+                this.$message.success('信息已修改，请等待审核！')
+              }
+              this.$emit('ok')
+              this.visible = false
+            } else {
+              this.$message.error(res.msg)
+            }
+          }).catch(() => {
+            this.$message.error('系统错误，请稍后再试')
+          }).finally(() => {
+            // this.confirmLoading = false
+          })
+          // 存到ext1里
+          // values.ext1 = serviceStr
+          // values.floorId = this.typeMap[values.floor]
+          // values.typeId = this.shapeMap[values.typeName]
+          // saveRoomContent(values, files)
+          //   .then((res) => {
+          //     if (res.code === 0) {
+          //       // this.$message.success('保存成功')
+          //       // this.$emit('ok')
+          //       this.visible = false
+          //     } else {
+          //       this.$message.error(res.msg)
+          //     }
+          //   })
+          //   .catch(() => {
+          //     this.$message.error('系统错误，请稍后再试')
+          //   })
+          //   .finally(() => {
+          //     // this.confirmLoading = false
+          //   })
+        }
+      })
+    },
+    getRoomInfo() {
+      meetingRoomDetail({
+        roomId: this.id
+      }).then(res => {
+        console.log('meetingRoomDetailRq', res)
+        let detail = res.room // 详细信息
+        let recordList = res.mr // 预约信息
+        let bannerList = [] // 轮播图
+        if (detail.imgs) {
+          try {
+            bannerList = detail.imgs.map(item => process.env.VUE_APP_MODEL_BASE_URL + item.url)
+          } catch (error) {
+            console.log(`JSON error : ${error}`)
+          }
+        }
+        let newRecordList = []
+        for (let key in recordList) {
+          let eachObj = recordList[key]
+          let sTime = eachObj['start']
+          let eTime = eachObj['end']
+          eachObj['date'] = moment(sTime).format('YYYY-MM-DD')
+          eachObj['time'] = moment(sTime).format('YYYY-MM-DD HH:mm') + '~' + moment(eTime).format('HH:mm')
+          newRecordList.push(eachObj)
+        }
+        this.recordList = newRecordList
+        this.roomDetail = detail
+        this.banner = bannerList
+        this.getDict(detail.ext1)
+      })
+    },
+    disabledHours() {
+      if (this.timeRange == 1) {
+        // 上午，9：00-12：00
+        return [0, 1, 2, 3, 4, 5, 6, 7, 8, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
+      }
+      if (this.timeRange == 2) {
+        // 下午，13：30-17：30
+        return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 18, 19, 20, 21, 22, 23, 24]
+      }
+      if (this.timeRange == 3) {
+        // 晚上，17：30-24
+        return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
+      }
+    },
+    disabledMinutes(nowH) {
+      if (this.timeRange == 1) {
+        // 上午，都可以
+        if (nowH == 12) {
+          let res = []
+          for (let i = 1; i < 60; i++) {
+            res.push(i)
+          }
+          return res
+        }
+      }
+      if (this.timeRange == 2) {
+        // 下午，13：00-13：29不能选
+        if (nowH == 13) {
+          let res = []
+          for (let i = 0; i < 30; i++) {
+            res.push(i)
+          }
+          return res
+        }
+        // 下午17：31-17：59不能选
+        if (nowH == 17) {
+          let res = []
+          for (let i = 31; i < 60; i++) {
+            res.push(i)
+          }
+          return res
+        }
+      }
+      if (this.timeRange == 3) {
+        // 晚上，17：00-17：30不能选
+        if (nowH == 17) {
+          let res = []
+          for (let i = 0; i < 31; i++) {
+            res.push(i)
+          }
+          return res
+        }
+      }
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+/* For demo */
+.ant-carousel >>> .slick-dots {
+  height: auto;
+}
+
+.ant-carousel >>> .slick-slide img {
+  border: 5px solid #fff;
+  display: block;
+  margin: auto;
+  max-width: 300px;
+}
+
+.ant-carousel >>> .slick-thumb {
+  bottom: -45px;
+}
+
+.ant-carousel >>> .slick-thumb li {
+  width: 60px;
+  height: 45px;
+}
+
+.ant-carousel >>> .slick-thumb li img {
+  width: 100%;
+  height: 100%;
+  filter: grayscale(100%);
+}
+
+.ant-carousel >>> .slick-thumb li.slick-active img {
+  filter: grayscale(0%);
+}
+
+.self-item-cell {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.self-item-cell .self-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 50%;
+}
+
+.self-item-cell .self-item:first-of-type {
+  margin-right: 10px;
+}
+
+.self-item-cell .self-item .title {
+  margin-right: 10px;
+}
+
+.self-item-cell .self-item .input {
+  flex: 1;
+
+}
+</style>

src/views/user/Login.vue

@@ -209,10 +209,10 @@ export default {
     },
     loginForm() {
       // 验证码暂时注销掉，需要就解开即可
-      // if (!this.capctchaCheck) {
-      //   this.$refs.verify.show()
-      //   return false
-      // }
+      if (!this.capctchaCheck) {
+        this.$refs.verify.show()
+        return false
+      }
       const {
         form: { validateFields },
         state,