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