long
2024-02-01 0e11d74e0e2d664d6104636a75558c31ead2448c
提交 | 用户 | age
3ac5f2 1 <!--room-detail.vue-->
J 2 <template>
878885 3   <div class="page flex flex-col">
6da3c1 4     <div class="page_header flex flex-ver">
J 5       <div class="left flex flex-ver" @click="back">
878885 6         <div class="page_logo_1">
J 7           <img class="img" src="static/imgs/logo_1.png">
8         </div>
9         <div class="page_logo_2">
10           <img class="img" src="static/imgs/logo_2.png">
11         </div>
3ac5f2 12       </div>
J 13       <div class="right flex-1 flex flex-jcfe flex-ver">
1d1095 14         <el-button type="primary" icon="el-icon-refresh" class="reset_btn flex flex-center" size="small" style="width: 100px;" @click="resetPage">刷新</el-button>
aeb317 15         <div class="reset_btn flex flex-center" @click="resetStatus">重置房间状态</div>
3ac5f2 16         <div class="page_date">
bb2b08 17           <div class="page_week">{{ timeObj.week }}</div>
J 18           <div class="page_day">{{ timeObj.date }}</div>
3ac5f2 19         </div>
bb2b08 20         <div class="page_time">{{ timeObj.timeMin }}</div>
J 21         <!-- <div class="page_time">{{ timeObj.time }}</div> -->
3ac5f2 22       </div>
J 23     </div>
459990 24     <div class="page_header_placeholer" />
bb2b08 25     <!-- 未有安排 -->
583e10 26     <div v-if="(!occupyInfoViewArr || !occupyInfoViewArr.length) && (!assignTreatListView || !assignTreatListView.length)" class="page_container flex flex-1">
0e11d7 27       <div class="main flex-1 flex flex-col">
6da3c1 28         <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
0e11d7 29         <div class="flex-1" />
L 30         <div v-if="roomInfo" class="room_main_tip" style="line-height: 186px;font-size: 140px;margin-top: 0">-{{ statusTx[roomInfo.status] }}-</div>
31         <div class="flex-1" />
bb2b08 32         <div class="btn_box flex flex-center">
J 33           <div class="flex flex-ver">
6da3c1 34             <div class="btn_box__item flex flex-center white" data-tx="空闲" data-status="0" @click="statusChg">
bb2b08 35               <div class="flex flex-ver">
878885 36                 <div class="icon">
J 37                   <img class="img" src="static/imgs/free.png">
38                 </div>
bb2b08 39                 <div class="tx">空闲</div>
J 40               </div>
41             </div>
6da3c1 42             <div class="btn_box__item flex flex-center blue" data-tx="使用中" data-status="1" @click="statusChg">
bb2b08 43               <div class="flex flex-ver">
878885 44                 <div class="icon">
J 45                   <img class="img" src="static/imgs/using.png">
46                 </div>
bb2b08 47                 <div class="tx white">使用中</div>
J 48               </div>
49             </div>
6da3c1 50             <div class="btn_box__item flex flex-center yellow" data-tx="客人休息" data-status="2" @click="statusChg">
bb2b08 51               <div class="flex flex-ver">
878885 52                 <div class="icon">
J 53                   <img class="img" src="static/imgs/rest.png">
54                 </div>
bb2b08 55                 <div class="tx">客人休息</div>
J 56               </div>
57             </div>
6da3c1 58             <div class="btn_box__item flex flex-center gray" data-tx="通知打扫" data-status="3" @click="statusChg">
bb2b08 59               <div class="flex flex-ver">
878885 60                 <div class="icon">
J 61                   <img class="img" src="static/imgs/clear.png">
62                 </div>
bb2b08 63                 <div class="tx">通知打扫</div>
J 64               </div>
65             </div>
66           </div>
67         </div>
68       </div>
69     </div>
6da3c1 70     <!-- 没有客人和有安排 -->
583e10 71     <div v-if="(!occupyInfoViewArr || !occupyInfoViewArr.length) && (assignTreatListView && assignTreatListView.length)" class="page_container flex flex-1">
bb2b08 72       <div class="main flex-1">
6da3c1 73         <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
J 74         <div v-if="roomInfo" class="room_main_tip">-{{ statusTx[roomInfo.status] }}-</div>
1d1095 75         <div v-show="roomInfo && roomInfo.status >= 1" class="room_left_btn_box flex flex-ver">
J 76           <div v-show="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('客人休息', 2)">客人休息</div>
77           <div v-show="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
78           <div v-show="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
79           <div v-show="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('空闲', 0)">结束打扫</div>
bb2b08 80         </div>
J 81       </div>
82       <div class="right">
459990 83         <div class="right_block">
J 84           <XioRoomGuestBox ref="XioRoomGuestBox" :assign-treat-list-view-com="assignTreatListView" @selectCustomer="selectCustomer" />
bb2b08 85         </div>
J 86       </div>
87     </div>
459990 88     <!-- 客人和有安排 over-width -->
583e10 89     <div v-if="occupyInfoViewArr && occupyInfoViewArr.length" class="page_container flex flex-1" :class="[occupyInfoViewArr && occupyInfoViewArr.length>1?'over-width':'']">
J 90       <div class="flex flex-1">
91         <div v-for="(item,index) in occupyInfoViewArr" :key="index" class="main flex-1">
12a2f1 92           <div v-if="occupyInfoViewArr.length>1 && item.treatRoomStatus === 0" class="cancel_icon_block" @click="cancelCustomerItem(item)">
583e10 93             <img class="img" src="static/imgs/cancel.png">
J 94           </div>
95           <XioRoomGuestInfoBox :ref="`XioRoomGuestInfoBox_${item.id}`" :room-info="roomInfo" :occupy-info-view="item" :off-narcosis-ids="offNarcosisIds" @setStatus="setComStatus" />
96         </div>
bb2b08 97       </div>
J 98       <div class="right flex flex-col">
583e10 99         <div v-for="(item,index) in occupyInfoViewArr" :key="index" class="flex-1 right_room_info">
c1e103 100           <XioRoomInfoBlock ref="XioRoomInfoBlock" :occupy-info-view="item" :occupy-info-view-arr="occupyInfoViewArr" />
bb2b08 101         </div>
583e10 102         <div v-if="occupyInfoViewArr.length<=1" class="flex flex-col" style="border-radius: 10px;">
459990 103           <XioRoomGuestBox ref="XioRoomGuestBox" :assign-treat-list-view-com="assignTreatListView" @selectCustomer="selectCustomer" />
bb2b08 104         </div>
J 105       </div>
106     </div>
aeb317 107     <!-- 选择客人弹窗 -->
J 108     <XioCustomerSelect ref="XioCustomerSelect" @cancel="selectCustomerCancel" @submit="selectCustomerSubmit" />
109     <!-- 更改房间状态窗 -->
110     <XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
1fa546 111     <!-- MIC通知卸麻 -->
583e10 112     <!-- <XioRoomOffNarcosisNotice ref="XioRoomOffNarcosisNotice" @confirm="offNarcosisNoticeConfirm" /> -->
3ac5f2 113   </div>
J 114 </template>
115
116 <script>
6da3c1 117 // 空闲 0
J 118 // 使用中 1
119 // 客人休息 2
120 // 待打扫/通知打扫 3
3ac5f2 121 // import Login from '../utils/jun_login.js'
459990 122 // 房间客人信息
J 123 import XioRoomGuestInfoBox from '@/components/xio_room_guest_info_box'
124 // 房间负责员工信息
125 import XioRoomInfoBlock from '@/components/xio_room_info_block'
126 // 房间客户预约列表信息
127 import XioRoomGuestBox from '@/components/xio_room_guest_box'
aeb317 128 // 选择客人弹窗
bb2b08 129 import XioCustomerSelect from '@/components/xio_customer_select'
aeb317 130 // 更改房间状态窗
J 131 import XioRoomStatusChg from '@/components/xio_room_status_chg'
1fa546 132 // 通知卸麻
583e10 133 // import XioRoomOffNarcosisNotice from '@/components/xio_room_off_narcosis_notice'
6da3c1 134 import Req from '../../utils/jun_httpInstall' // http 请求
1d1095 135 // import xioFn from './utils/xio_fn.js'
6da3c1 136 var isUseDefault = false // 是否已使用默认客人
878885 137 var isUseDefaultChg = 0// 已使用默认客人后房间是否有改变状态
3ac5f2 138 export default {
J 139   name: 'RoomDetail',
bb2b08 140   components: {
459990 141     XioRoomGuestInfoBox,
J 142     XioRoomInfoBlock,
143     XioRoomGuestBox,
aeb317 144     XioCustomerSelect,
583e10 145     XioRoomStatusChg
J 146     // XioRoomOffNarcosisNotice
bb2b08 147   },
3ac5f2 148   inject: ['noop'],
J 149   data() {
150     return {
6da3c1 151       id: this.$route.query.id || '',
J 152       roomInfo: {},
153       occupyInfo: '', // 当前占用人的信息
154       assignTreatList: [],
1d1095 155       statusTx: ['空闲', '使用中', '客人休息', '打扫中', '敷麻中'],
34cb2b 156       timeObj: {}, // week:星期,date:年月日,timeMin:时分,time:时分秒,timeStamp:时间戳
1fa546 157       curTreatId: '',
583e10 158       curTreatIds: '', // 已选中的治疗记录id数组
J 159       offNarcosisIds: [] // 是否已通知卸麻的用户id数组
459990 160       // isShowAppellationName: true // 是否显示称谓
3ac5f2 161     }
J 162   },
163   computed: {
583e10 164     // 当前已选择用户的数组数据
459990 165     occupyInfoViewArr() {
12a2f1 166       if (this.occupyInfo && this.occupyInfo.length) {
J 167         return this.occupyInfoViewArrIdsHandleArr()
459990 168       } else {
12a2f1 169         if (this.curTreatIds && this.curTreatIds.length) {
J 170           return this.getCurTreatArr(this.curTreatIds)
459990 171         } else {
J 172           if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
173             isUseDefault = true
174             this.occupyInfoViewArrIdsHandle(this.assignTreatList[0])
175             return [this.assignTreatList[0]]
176           } else {
177             return ''
178           }
179         }
180       }
181     },
583e10 182     // 当前已选择用户的数据(单个)(暂无用)
6da3c1 183     occupyInfoView() {
583e10 184       // console.log('00000000000000000000000', this.occupyInfo, isUseDefault, isUseDefaultChg)
34cb2b 185       // 有当前选中的,根据需求修改增加选中不更改状态,由空闲开始
J 186       if (this.curTreatId) {
187         return this.gatCurTreatInfo()
6da3c1 188       } else {
34cb2b 189         // 有占用
J 190         if (this.occupyInfo) {
191           return this.occupyInfo
192         // 没有占用
6da3c1 193         } else {
34cb2b 194           // 还没使用默认客人值或者已使用默认客人值还没改变状态(适配轮询)
J 195           if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
c4b6a2 196             // isUseDefault = true
34cb2b 197             return this.assignTreatList[0]
J 198           // 已使用过默认客人值
199           } else {
200             return ''
201           }
6da3c1 202         }
34cb2b 203       }
J 204     },
583e10 205     // 该治疗室用户列表
34cb2b 206     assignTreatListView() {
J 207       if (this.assignTreatList && this.assignTreatList.length) {
208         this.assignTreatList.forEach((o) => {
583e10 209           if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
J 210             this.occupyInfoViewArr.forEach((_o) => {
211               if (_o.id === o.id) {
212                 o.act = true
213               }
214             })
34cb2b 215           }
J 216         })
217         return this.assignTreatList
218       } else {
219         return []
6da3c1 220       }
J 221     }
3ac5f2 222   },
bf4dca 223   activated() {
3ac5f2 224     console.log('roomDetail mounted')
34cb2b 225     // 记录当前的治疗ID
583e10 226     // var curTreatId = localStorage.getItem('curTreatId')
J 227     // 记录当前的治疗记录ID数组
459990 228     var curTreatIds = localStorage.getItem('curTreatIds')
J 229     // 卸麻相关
df74f0 230     var localOffNarcosisIds = localStorage.getItem('offNarcosisIds')
J 231     // 获取是否已通知卸麻数组
232     if (localOffNarcosisIds) {
583e10 233       this.offNarcosisIds = JSON.parse(localOffNarcosisIds)
df74f0 234     } else {
583e10 235       this.offNarcosisIds = []
df74f0 236       this.setLocalStorageOffNarcosisIds()
2471a9 237     }
583e10 238     // 治疗记录ID数组
459990 239     if (curTreatIds) {
J 240       try {
241         this.curTreatIds = JSON.parse(curTreatIds)
242       } catch (error) {
243         this.curTreatIds = ''
244       }
1fa546 245     }
583e10 246     // this.curTreatId = curTreatId || ''
J 247     // 治疗室id
bf4dca 248     this.id = this.$route.query.id || ''
3ac5f2 249     this.init()
J 250   },
bf4dca 251   mounted() {},
3ac5f2 252   destroyed() {
J 253
254   },
255   methods: {
256     init() {
bf4dca 257       // 进入页面先初始化常量标识
J 258       isUseDefault = false
259       isUseDefaultChg = 0
6da3c1 260       // 计时
bb2b08 261       this.countGetTime(this, 'timeObj', 'detail')
6da3c1 262       // 轮询getData,8秒一次
878885 263       this.pollingAjaxFn(this, 'getData', 'detail', 8000)
J 264       // this.getData()
459990 265     },
583e10 266     // 初始默认选择的id数组处理
459990 267     occupyInfoViewArrIdsHandle(item) {
J 268       if (!this.curTreatIds) {
269         this.curTreatIds = []
270       }
271       this.curTreatIds.push(item.id)
272       this.setLocalCurTreatIds()
12a2f1 273     },
J 274     // 初始默认选择的id数组处理
275     occupyInfoViewArrIdsHandleArr() {
276       if (!this.curTreatIds) {
277         this.curTreatIds = []
278       }
279       if (this.occupyInfo && this.occupyInfo.length === 1) {
280         var res = []
281         res.push(this.occupyInfo[0])
282         if (this.curTreatIds && this.curTreatIds.length) {
283           this.curTreatIds = this.curTreatIds.filter((o) => { return o !== this.occupyInfo[0].id })
284           if (this.assignTreatList && this.assignTreatList.length && this.curTreatIds && this.curTreatIds.length) {
285             var curTreatItem = this.assignTreatList.find((o) => { return o.id === this.curTreatIds[0] })
286             if (curTreatItem) {
287               res.push(curTreatItem)
288             }
289           }
290         }
291         this.setLocalCurTreatIds()
292         return res
293       } else if (this.occupyInfo && this.occupyInfo.length > 1) {
294         this.occupyInfo.forEach((o) => {
295           this.curTreatIds.push(o.id)
296         })
297         return this.occupyInfo
298       }
1fa546 299     },
df74f0 300     // 设置已通知卸麻id数组
J 301     setLocalStorageOffNarcosisIds() {
583e10 302       localStorage.setItem('offNarcosisIds', JSON.stringify(this.offNarcosisIds))
df74f0 303     },
1fa546 304     // 卸麻通知确认
583e10 305     // offNarcosisNoticeConfirm() {
J 306     //   if (this.occupyInfoView) {
307     //     if (offNarcosisIds && offNarcosisIds.length) {
308     //       var flag = offNarcosisIds.find((o) => { return o === this.occupyInfoView.userId })
309     //       if (!flag) {
310     //         offNarcosisIds.push(this.occupyInfoView.userId)
311     //       }
312     //     } else if (offNarcosisIds) {
313     //       offNarcosisIds.push(this.occupyInfoView.userId)
314     //     }
315     //     this.setLocalStorageOffNarcosisIds()
316     //   }
317     // },
318     // // 显示通知卸麻弹窗
319     // showOffNarcosisNotice() {
320     //   // 打开弹窗
321     //   this.$refs['XioRoomOffNarcosisNotice'].showDialog()
322     // },
323     // 显示通知卸麻弹窗(多个)
324     showOffNarcosisNoticeMulti(id) {
325       // 打开弹窗,动态的ref对象获取
326       // eslint-disable-next-line no-eval
327       var ref = eval('this.$refs.XioRoomGuestInfoBox_' + id)[0]
328       ref.showOffNarcosisNotice()
1fa546 329     },
J 330     // 点击显示隐藏称谓
459990 331     // tapAppellationHandle() {
J 332     //   this.isShowAppellationName = !this.isShowAppellationName
333     // },
334     // 获取当前治疗信息(数组)
335     getCurTreatArr(ids) {
336       var arr = []
337       if (this.assignTreatList && this.assignTreatList.length) {
338         this.assignTreatList.forEach((o) => {
339           if (ids && ids.length) {
340             ids.forEach((_o) => {
341               if (_o === o.id) {
342                 arr.push(o)
343               }
344             })
345           }
346         })
c4b6a2 347         // 基本不会出现这种情况,但是以防万一,若本地缓存id存在,但对不上列表则缓存第一条数据id
J 348         if (!arr.length) {
349           arr.push(this.assignTreatList[0])
350           this.curTreatIds = []
351           this.curTreatIds.push(this.assignTreatList[0].id)
352           this.setLocalCurTreatIds()
353         }
459990 354       }
J 355       return arr
34cb2b 356     },
J 357     // 获取当前治疗信息
358     gatCurTreatInfo() {
359       if (this.assignTreatList && this.assignTreatList.length) {
1d1095 360         return this.assignTreatList.find((o) => { return o.id === this.curTreatId })
34cb2b 361       }
1d1095 362     },
J 363     // 刷新浏览器页面
364     resetPage() {
365       window.location.reload()
6da3c1 366     },
J 367     // 获取房间详情
368     getData() {
369       var params = {}
370       // 房间id
371       if (this.id) {
372         params.shopRoomId = this.id
373       }
374       Req.http.post({
878885 375         url: 'guide/treat/screen/room/info',
6da3c1 376         data: params,
J 377         udData: { noLoading: true },
378         header: { 'Content-Type': 'application/json' },
379         mockData: {
380           code: 100,
381           msg: '',
878885 382           data: {
J 383             roomInfo: {
384               roomNo: 'xx',
1d1095 385               status: 0 // 0空闲 1使用 2休息 3打扫 4 敷麻中
878885 386             },
459990 387             assignTreatList: [
J 388               {
389                 id: 'a111',
390                 startTime: '2023-12-08 00:00:00',
391                 userName: '黄嘉荣',
392                 gender: 1,
583e10 393                 hempStatus: 2,
c1e103 394                 treatRoomStatus: 0,
459990 395                 ciq: '123',
J 396                 adviserName: 'a君',
397                 aDoctorName: 'b君',
398                 aNurseName: 'c君',
399                 projectName: 'xxxxXXxxx',
400                 userId: '111'
401               },
402               {
403                 id: 'a222',
404                 startTime: '2023-12-08 00:15:00',
405                 userName: '李德华',
406                 gender: 1,
583e10 407                 hempStatus: 2,
c1e103 408                 treatRoomStatus: 0,
459990 409                 ciq: '456',
J 410                 adviserName: 'd君',
411                 aDoctorName: 'e君',
412                 aNurseName: 'f君',
413                 projectName: 'xxxxXXxxx',
414                 userId: '222'
415               },
416               {
417                 id: 'a333',
418                 startTime: '2023-12-08 00:20:00',
419                 userName: '猛学友',
420                 gender: 2,
583e10 421                 hempStatus: 2,
c1e103 422                 treatRoomStatus: 0,
459990 423                 ciq: '789',
J 424                 adviserName: 'g君',
425                 aDoctorName: 'h君',
426                 aNurseName: 'i君',
427                 projectName: 'xxxxXXxxx',
428                 userId: '333'
429               }
430             ],
878885 431             occupyInfo: null
J 432           }
6da3c1 433         }
J 434       }).then((res) => {
435         if (res && res.data) {
cf3e3e 436           if (res.data.assignTreatList && res.data.assignTreatList.length) {
J 437             res.data.assignTreatList.forEach((o) => {
583e10 438               // 治疗时间处理
cf3e3e 439               var st = (o.startTime).split(' ')[1].split(':')
J 440               o.startTime = `${st[0]}:${st[1]}`
583e10 441               // 称谓处理
1fa546 442               o.appellationName = o.userName[0] + `${o.gender ? ['女士', '先生', '女士'][o.gender] : '女士'}`
cf3e3e 443             })
J 444           }
12a2f1 445           if (res.data.occupyInfo && res.data.occupyInfo.length) {
J 446             res.data.occupyInfo.forEach((o) => {
447               // 治疗时间处理
448               var st = (o.startTime).split(' ')[1].split(':')
449               o.startTime = `${st[0]}:${st[1]}`
450               // 称谓处理
451               o.appellationName = o.userName[0] + `${o.gender ? ['女士', '先生', '女士'][o.gender] : '女士'}`
452             })
40660a 453           }
12a2f1 454           res.data.occupyInfo && res.data.occupyInfo.length && (isUseDefaultChg = 1)
J 455           res.data.occupyInfo && res.data.occupyInfo.length && (isUseDefault = 1)
6da3c1 456           for (const key in res.data) {
J 457             this[key] = res.data[key]
458           }
459         }
460         // console.log('999999999999999999999999999', res)
583e10 461         // 卸麻弹窗逻辑
df74f0 462         var offNarcosisTimer = null
J 463         offNarcosisTimer = setTimeout(() => {
583e10 464           console.log('================================>判断卸麻弹窗', this.occupyInfoViewArr, 'offNarcosisIds:', this.offNarcosisIds)
J 465           if (this.occupyInfoViewArr && this.occupyInfoViewArr.length && this.offNarcosisIds) {
466             this.occupyInfoViewArr.forEach((o) => {
467               // 判断改用户是否弹出过卸麻弹窗
468               var flag
469               flag = this.offNarcosisIds.find((_o) => { return _o === o.userId })
470               // 状态2且没有弹出过弹窗
471               if (o.hempStatus === 2 && !flag) {
472                 // 弹出对应id弹窗
473                 this.showOffNarcosisNoticeMulti(o.id)
474               }
475             })
df74f0 476           }
J 477           clearTimeout(offNarcosisTimer)
478           offNarcosisTimer = null
479         }, 500)
6da3c1 480       })
aeb317 481     },
J 482     // 返回
483     back() {
34cb2b 484       // 重置默认已使用客人的参数
cf3e3e 485       isUseDefault = false
878885 486       isUseDefaultChg = 0
6da3c1 487       // 关闭计时
aeb317 488       this.stopCountGetTime('detail')
6da3c1 489       // 关闭轮询
aeb317 490       this.stopPollingAjaxFn('detail')
6da3c1 491       // 返回
bf4dca 492       // console.log('111111111', this.$route.meta.isPush)
J 493       if (this.$route && this.$route.meta && this.$route.meta.isPush) {
494         this.$router.go(-1)
495       } else {
496         this.$router.push({
497           path: `/`
498         })
499       }
6da3c1 500     },
cf3e3e 501     // 未有安排直接状态变更
6da3c1 502     statusChg(e) {
J 503       var { tx, status } = e.currentTarget.dataset
583e10 504       // var { occupyInfoView, roomInfo } = this
J 505       console.log('==========================>没有安排时没有客人直接变更状态', tx, status)
6da3c1 506       // if (roomInfo && status * 1 == roomInfo.status) {
J 507       //   return
508       // }
583e10 509       this.changeStatusFn({}, status, () => {
6da3c1 510         this.getData()
J 511       })
512     },
583e10 513     // 没有客人的按流程设置房间状态
6da3c1 514     setStatus(tx, status) {
583e10 515       // var { occupyInfoView, roomInfo } = this
J 516       console.log('============================>有安排没有客人设置房间状态', tx, status)
517       this.changeStatusFn({}, status, () => {
6da3c1 518         // 刷新详情
J 519         this.getData()
520       })
521     },
583e10 522     // 按流程设置房间状态(组件)
459990 523     setComStatus(opt) {
583e10 524       // var { occupyInfoView, roomInfo } = this
J 525       console.log('============================>客人信息组件点击更改状态', opt.tx, opt.status, opt.item)
526       this.changeStatusFn(opt.item, opt.status, () => {
459990 527         // 刷新详情
J 528         this.getData()
529       })
530     },
cf3e3e 531     // 改变房间状态异步方法
6da3c1 532     changeStatusFn(item = {}, status, cb) {
J 533       var params = {}
534       // 房间id
535       if (this.id) {
536         params.shopRoomId = this.id
537       }
12a2f1 538       // 治疗记录id this.curTreatIds occupyInfoViewArr
J 539       // 1.使用中/敷麻中 敷麻中 2 人占用
540       // 2.使用中/使用中 使用中 2 人占用
541       // 3.使用中/休息中  使用中 1 人占用
542       var arr = JSON.parse(JSON.stringify(this.occupyInfoViewArr))
6da3c1 543       if (item && item.id) {
12a2f1 544         if (arr && arr.length) {
J 545           arr.forEach((o) => {
546             if (o.id === item.id) {
547               o.treatRoomStatus = status * 1
548             }
549           })
550           // 是否有人使用中
551           var status_1 = arr.find((o) => { return o.treatRoomStatus === 1 })
552           // 是否有客人休息
553           var status_2 = arr.find((o) => { return o.treatRoomStatus === 2 })
554           // 是否有人打扫中
555           var status_3 = arr.find((o) => { return o.treatRoomStatus === 3 })
556           // 是否有人敷麻
557           var status_4 = arr.find((o) => { return o.treatRoomStatus === 4 })
558           // 更改的状态 敷麻中 > 使用中 > 休息中 > 待打扫
559           params.status = status * 1
560           if (status_3) {
561             params.status = 3
562           }
563           if (status_2) {
564             params.status = 2
565           }
566           if (status_1) {
567             params.status = 1
568           }
569           if (status_4) {
570             params.status = 4
571           }
572         }
573
574         // 当前选择客户的数组删除客户
575         this.occupyInfoViewArrDataHandle('cancel', item)
5311b8 576         params.treatRoomList = []
J 577         if (arr && arr.length) {
578           arr.forEach((o) => {
579             params.treatRoomList.push({
580               treatRecordId: o.id,
581               status: o.treatRoomStatus
582             })
583           })
584         }
12a2f1 585       } else {
J 586         // 更改的状态
587         params.status = status * 1
588       }
589
6da3c1 590       Req.http.post({
878885 591         url: 'guide/treat/screen/room/status/update',
6da3c1 592         data: params,
J 593         header: { 'Content-Type': 'application/json' },
594         mockData: {
595           code: 100,
596           msg: '',
597           data: {}
598         }
599       }).then((res) => {
878885 600         // 在已有默认客人的情况下,改变状态更改标识(适配轮询)
J 601         if (isUseDefault) {
34cb2b 602           console.log('在已有默认客人的情况下,改变状态更改标识')
878885 603           isUseDefaultChg = 1
34cb2b 604         }
d73f98 605         // 只要更改为空闲就重置参数
c4b6a2 606         if (params.status === 0) {
583e10 607           console.log('房间更改为空闲')
34cb2b 608           // 重置默认已使用客人的参数
J 609           isUseDefault = false
610           isUseDefaultChg = 0
459990 611           // this.isShowAppellationName = true
878885 612         }
6da3c1 613         // console.log('8888888888888888888888888888888888', res)
J 614         cb && cb()
615       })
aeb317 616     },
J 617     // 重置状态
618     resetStatus() {
619       // 打开弹窗
620       this.$refs['XioRoomStatusChg'].showDialog()
621     },
cf3e3e 622     // 更改房间状态(重置状态的更改方法)
aeb317 623     changeStatus(opt) {
583e10 624       // var { occupyInfoView, roomInfo } = this
J 625       console.log('============================>重置房间状态', opt.statusTx, opt.status)
6da3c1 626       // if (roomInfo && opt.status * 1 == roomInfo.status) {
J 627       //   return
628       // }
34cb2b 629       // 清除选中医疗记录id
583e10 630       // localStorage.removeItem('curTreatId')
J 631       // this.curTreatId = ''
632       // 清除选中医疗记录ids数组
633       localStorage.removeItem('curTreatIds')
634       this.curTreatIds = ''
635       // 变更房间状态方法
34cb2b 636       this.changeStatusFn({}, opt.status, () => {
6da3c1 637         // 刷新详情
J 638         this.getData()
639         // 关闭弹窗
640         this.$refs['XioRoomStatusChg'].hideDialog()
641       })
aeb317 642     },
J 643     // 选择客户
644     selectCustomer(item = {}) {
34cb2b 645       if (item.act) {
J 646         return
647       }
aeb317 648       // 打开弹窗
J 649       this.$refs['XioCustomerSelect'].showDialog()
6da3c1 650       // 组件客户数据处理
aeb317 651       this.$refs['XioCustomerSelect'].dataInit(item)
J 652     },
653     // 选择客户取消
654     selectCustomerCancel(opt) {
655       console.log('cancel', opt)
656       this.$refs['XioCustomerSelect'].hideDialog()
657     },
658     // 选择客户确定
659     selectCustomerSubmit(opt) {
459990 660       console.log('=======================>submit', opt)
34cb2b 661       // 确定选择的用户,记录id
583e10 662       // localStorage.setItem('curTreatId', opt.id)
J 663       // this.curTreatId = opt.id
664       // 当前选择客户的数组增加客户
665       this.occupyInfoViewArrDataHandle('add', opt)
34cb2b 666       // 重置房间状态
12a2f1 667       // if (this.roomInfo) {
J 668       //   this.changeStatusFn({}, 0, () => {
669       //     // 刷新详情
670       //     this.getData()
671       //   })
672       // }
34cb2b 673       // 关闭弹窗
J 674       this.$refs['XioCustomerSelect'].hideDialog()
583e10 675     },
J 676     // 删除已选择的客户数据
677     cancelCustomerItem(item) {
678       // 当前选择客户的数组删除客户
679       this.occupyInfoViewArrDataHandle('cancel', item, true)
680     },
681     // 当前选择客户的数组增删处理方法
682     occupyInfoViewArrDataHandle(key, item, isReset) {
683       // 增加(选择)
684       if (key === 'add') {
685         // id数组处理
686         if (this.curTreatIds && this.curTreatIds.length) {
687           // 当前治疗记录id没有所选用户的治疗记录id
688           var flag = this.curTreatIds.find((o) => { return o === item.id })
689           if (!flag) {
690             this.curTreatIds.push(item.id)
691           }
692           // 缓存
693           this.setLocalCurTreatIds()
694         }
12a2f1 695         if (this.curTreatIds && !this.curTreatIds.length) {
J 696           this.curTreatIds.push(item.id)
697           // 缓存
698           this.setLocalCurTreatIds()
699         }
583e10 700         // 数组数据处理
J 701         // if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
702         //   this.occupyInfoViewArr.push(item)
703         // }
704       }
705       // 删除
706       if (key === 'cancel') {
707         // id数组处理
708         if (this.curTreatIds && this.curTreatIds.length) {
709           // 深复制
710           var ids = JSON.parse(JSON.stringify(this.curTreatIds))
711           this.curTreatIds = ids.filter((o) => { return o !== item.id })
712           // 缓存
713           this.setLocalCurTreatIds()
714           // 刷新
715           if (isReset) {
716             // 刷新详情
717             this.getData()
718           }
719         }
720         // 数组数据处理
721         // if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
722         //   // 深复制
723         //   var arr = JSON.parse(JSON.stringify(this.occupyInfoViewArr))
724         //   this.occupyInfoViewArr = arr.filter((o) => { o.id !== item.id })
725         // }
726       }
459990 727     },
J 728     // 设置本地缓存ids数组
729     setLocalCurTreatIds() {
730       localStorage.setItem('curTreatIds', JSON.stringify(this.curTreatIds))
3ac5f2 731     }
J 732   }
733 }
734 </script>
cf3e3e 735
J 736 <style>
737 .el-popper.top_tx {
738   text-align: center;
739   font-size: 25px;
740 }
741 </style>
3ac5f2 742
J 743 <style scoped>
878885 744 .page{
J 745   overflow: auto;
746 }
459990 747 .page_header_placeholer {
J 748   height: 100px;
908dad 749   width: 100%;
L 750   display: block;
751   flex-shrink: 0;
459990 752 }
J 753 .page_header {
754   position: fixed;
755   top: 0;
756   left: 23px;
757   right: 23px;
758   z-index: 1;
759 }
bb2b08 760 .page_header .reset_btn {
J 761   width: 200px;
762   height: 60px;
763   line-height: 35px;
764   border-radius: 5px;
765   background-color: rgba(47,174,206,1);
766   color: rgba(255,255,255,1);
767   font-size: 24px;
768   text-align: center;
769   font-family: Microsoft Yahei;
6da3c1 770   cursor: pointer;
bf4dca 771   border: 0;
J 772   margin-left: 20px;
459990 773 }
J 774 .page_container.over-width {
775   width: 150%;
bb2b08 776 }
J 777 .page_container .main {
878885 778   /* height: 100%; */
bb2b08 779   border-radius: 10px;
J 780   background-color: rgba(255,255,255,1);
781   color: rgba(16,16,16,1);
782   font-size: 14px;
783   /* text-align: center; */
784   font-family: Roboto;
583e10 785   position: relative;
J 786 }
787 .page_container.over-width .main {
788   margin-right: 50px;
789 }
790 .page_container.over-width .main:last-child {
791   margin-right: 0;
792 }
793 .page_container .main .cancel_icon_block {
794   width: 50px;
795   height: 50px;
796   position: absolute;
797   top: 12px;
798   right: 11px;
799   z-index: 1;
800 }
801 .page_container .main .cancel_icon_block .img {
802   width: 100%;
803   height: 100%;
bb2b08 804 }
J 805 .page_container .main .room_title {
806   line-height: 50px;
807   color: rgba(255,255,255,1);
808   font-size: 36px;
809   text-align: center;
810   font-family: PingFangSC-medium;
811   padding: 10px 0;
812   background-color: rgba(34,123,235,1);
813   width: 400px;
814   margin: 39px auto 0 auto;
815 }
816 .page_container .main .room_main_tip {
817   line-height: 168px;
818   font-size: 120px;
819   color: rgba(46,77,124,1);
820   text-align: center;
821   font-family: PingFangSC-medium;
822   margin-top: 107px;
823   /* font-weight: bold; */
824 }
825 .page_container .main .room_main_tip.gray {
826   color: rgba(154,154,154,1);
827 }
828 .page_container .main .btn_box {
0e11d7 829   /* margin-top: 130px; */
L 830   margin-bottom: 40px;
bb2b08 831 }
J 832 .page_container .main .btn_box__item {
833   width: 250px;
834   height: 120px;
835   border-radius: 10px;
836   box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
837   margin-right: 70px;
6da3c1 838   cursor: pointer;
bb2b08 839 }
J 840 .page_container .main .btn_box__item:last-child {
841   margin-right: 0;
842 }
843 .page_container .main .btn_box__item.white {
844   background-color: rgba(255,255,255,1);
845 }
846 .page_container .main .btn_box__item.blue {
847   background-color: rgba(46,77,124,1);
848 }
849 .page_container .main .btn_box__item.yellow {
850   background-color: rgba(255,199,115,1);
851 }
852 .page_container .main .btn_box__item.gray {
853   background-color: rgba(206,206,206,1);
854 }
855 .page_container .main .btn_box__item .icon {
856   width: 60px;
857   height: 60px;
858   display: block;
859   margin-right: 17px;
878885 860 }
J 861 .page_container .main .btn_box__item .icon .img {
862   width: 100%;
863   height: 100%;
bb2b08 864 }
J 865 .page_container .main .btn_box__item .tx {
866   line-height: 37px;
867   color: rgba(51,51,51,1);
868   font-size: 26px;
869   text-align: center;
870   font-family: PingFangSC-medium;
871 }
872 .page_container .main .btn_box__item .tx.white {
873   color: rgba(255,255,255,1);
874 }
875 .page_container .main .room_left_btn_box {
876   padding: 0 23px;
877   margin-top: 163px;
878 }
879 .page_container .main .room_left_btn_box__item {
1d1095 880   width: 500px;
J 881   height: 150px;
882   line-height: 73px;
883   border-radius: 10px;
884   font-size: 50px;
885   text-align: center;
886   margin: auto;
887 }
888 .page_container .main .room_left_btn_box__item.flex-1 {
889   width: auto;
bb2b08 890   height: 150px;
J 891   line-height: 58px;
892   border-radius: 10px;
893   font-size: 40px;
894   text-align: center;
895   font-family: Microsoft Yahei;
896   margin-right: 20px;
897   font-weight: bold;
898 }
1d1095 899 /* .page_container .main .room_left_btn_box__item:last-child {
bb2b08 900   margin-right: 0;
1d1095 901 } */
bb2b08 902 .page_container .main .room_left_btn_box__item.yellow {
J 903   color: rgba(255,255,255,1);
904   background-color: rgba(233,157,66,1);
905 }
906 .page_container .main .room_left_btn_box__item.gray {
907   background-color: rgba(206,206,206,1);
908   color: rgba(79,79,79,1);
909 }
910 .page_container .main .room_left_btn_box__item.green {
911   background-color: rgba(47,174,206,1);
912   color: rgba(255,255,255,1);
1d1095 913 }
J 914 .page_container .main .room_left_btn_box__item.b-green {
915   background-color: rgba(79,167,114,1);
916   color: rgba(255,255,255,1);
bb2b08 917 }
J 918 .page_container .main .room_content {
919   margin-top: 30px;
920 }
921 .page_container .main .room_content .tip {
922   line-height: 33px;
923   color: rgba(79,79,79,1);
924   font-size: 24px;
925   text-align: center;
926   font-family: PingFangSC-medium;
927 }
928 .page_container .main .room_content .name {
929   line-height: 168px;
930   color: rgba(51,51,51,1);
931   font-size: 120px;
932   text-align: center;
933   font-family: PingFangSC-medium;
934   margin-top: 13px;
935 }
cf3e3e 936 .page_container .main .room_content .name .tx {
J 937   max-width: 666px;
938   margin: auto;
1fa546 939   text-align: center;
J 940 }
941 .page_container .main .room_content .name_icon {
942   width: 40px;
943   height: 40px;
944   display: block;
945   margin-top: 13px;
946   padding: 20px;
947 }
948 .page_container .main .room_content .name_icon .img {
949   width: 100%;
950   height: 100%;
cf3e3e 951 }
bb2b08 952 .page_container .main .room_content .ciq {
J 953   line-height: 42px;
954   color: rgba(51,51,51,1);
955   font-size: 30px;
956   text-align: center;
957   font-family: PingFangSC-regular;
958   margin-top: -5px;
959 }
960 .page_container .main .room_content .time {
961   line-height: 42px;
962   color: rgba(0,0,0,1);
963   font-size: 30px;
964   text-align: center;
965   font-family: PingFangSC-medium;
966   font-weight: bold;
967   margin-top: 21px;
968 }
969 .page_container .right {
970   width: 686px;
971   margin-left: 30px;
878885 972   /* height: 100%; */
bb2b08 973 }
583e10 974 .page_container.over-width .right_room_info {
J 975   margin-bottom: 58px;
976 }
977 .page_container.over-width .right_room_info:last-child {
978   margin-bottom: 0;
979 }
bb2b08 980 .page_container .right_block {
J 981   width: 100%;
982   height: 100%;
983 }
459990 984 .page_container .right_block .guest_box {
J 985   margin-top: 0;
878885 986   width: 100%;
J 987   height: 100%;
459990 988   -webkit-flex-flow: column;
J 989   flex-flow: column;
990   display: box;
991   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
992   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
993   display: -ms-flexbox;      /* TWEENER - IE 10 */
994   display: -webkit-flex;     /* NEW - Chrome */
995   display: -moz-flex;
996   display: -ms-flex;
997   display: -o-flex;
998   display: flex;
bb2b08 999 }
J 1000 </style>