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