update_202312281935_单个治疗室多个客人的逻辑编写v1

jazz

2023-12-28 583e1038163d7b95f7927f83b19d81f6eac32020

 src/pages/room/detail.vue

@@ -23,7 +23,7 @@
    </div>
    <div class="page_header_placeholer" />
    <!-- 未有安排 -->
    <div v-if="!occupyInfoView && (!assignTreatListView || !assignTreatListView.length)" class="page_container flex flex-1">
    <div v-if="(!occupyInfoViewArr || !occupyInfoViewArr.length) && (!assignTreatListView || !assignTreatListView.length)" class="page_container flex flex-1">
      <div class="main flex-1">
        <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
        <div v-if="roomInfo" class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-{{ statusTx[roomInfo.status] }}-</div>
@@ -66,7 +66,7 @@
      </div>
    </div>
    <!-- 没有客人和有安排 -->
    <div v-if="!occupyInfoView && (assignTreatListView && assignTreatListView.length)" class="page_container flex flex-1">
    <div v-if="(!occupyInfoViewArr || !occupyInfoViewArr.length) && (assignTreatListView && assignTreatListView.length)" class="page_container flex flex-1">
      <div class="main flex-1">
        <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
        <div v-if="roomInfo" class="room_main_tip">-{{ statusTx[roomInfo.status] }}-</div>
@@ -84,15 +84,20 @@
      </div>
    </div>
    <!-- 客人和有安排 over-width -->
    <div v-if="occupyInfoView" class="page_container flex flex-1">
      <div class="main flex-1">
        <XioRoomGuestInfoBox ref="XioRoomGuestInfoBox" :room-info="roomInfo" :occupy-info-view="occupyInfoView" @setStatus="setComStatus" />
    <div v-if="occupyInfoViewArr && occupyInfoViewArr.length" class="page_container flex flex-1" :class="[occupyInfoViewArr && occupyInfoViewArr.length>1?'over-width':'']">
      <div class="flex flex-1">
        <div v-for="(item,index) in occupyInfoViewArr" :key="index" class="main flex-1">
          <div v-if="occupyInfoViewArr.length>1" class="cancel_icon_block" @click="cancelCustomerItem(item)">
            <img class="img" src="static/imgs/cancel.png">
          </div>
          <XioRoomGuestInfoBox :ref="`XioRoomGuestInfoBox_${item.id}`" :room-info="roomInfo" :occupy-info-view="item" :off-narcosis-ids="offNarcosisIds" @setStatus="setComStatus" />
        </div>
      </div>
      <div class="right flex flex-col">
        <div class="flex-1">
          <XioRoomInfoBlock ref="XioRoomInfoBlock" :occupy-info-view="occupyInfoView" />
        <div v-for="(item,index) in occupyInfoViewArr" :key="index" class="flex-1 right_room_info">
          <XioRoomInfoBlock ref="XioRoomInfoBlock" :occupy-info-view="item" />
        </div>
        <div class="flex flex-col" style="border-radius: 10px;">
        <div v-if="occupyInfoViewArr.length<=1" class="flex flex-col" style="border-radius: 10px;">
          <XioRoomGuestBox ref="XioRoomGuestBox" :assign-treat-list-view-com="assignTreatListView" @selectCustomer="selectCustomer" />
        </div>
      </div>
@@ -102,7 +107,7 @@
    <!-- 更改房间状态窗 -->
    <XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
    <!-- MIC通知卸麻 -->
    <XioRoomOffNarcosisNotice ref="XioRoomOffNarcosisNotice" @confirm="offNarcosisNoticeConfirm" />
    <!-- <XioRoomOffNarcosisNotice ref="XioRoomOffNarcosisNotice" @confirm="offNarcosisNoticeConfirm" /> -->
  </div>
</template>

@@ -123,13 +128,11 @@
// 更改房间状态窗
import XioRoomStatusChg from '@/components/xio_room_status_chg'
// 通知卸麻
import XioRoomOffNarcosisNotice from '@/components/xio_room_off_narcosis_notice'
// import XioRoomOffNarcosisNotice from '@/components/xio_room_off_narcosis_notice'
import Req from '../../utils/jun_httpInstall' // http 请求
// import xioFn from './utils/xio_fn.js'
var isUseDefault = false // 是否已使用默认客人
var isUseDefaultChg = 0// 已使用默认客人后房间是否有改变状态
var offNarcosisIds = [] // 是否已通知卸麻id数组
var isOffNarcosisShow = false // 是否显示已通知卸麻弹窗
export default {
  name: 'RoomDetail',
  components: {
@@ -137,8 +140,8 @@
    XioRoomInfoBlock,
    XioRoomGuestBox,
    XioCustomerSelect,
    XioRoomStatusChg,
    XioRoomOffNarcosisNotice
    XioRoomStatusChg
    // XioRoomOffNarcosisNotice
  },
  inject: ['noop'],
  data() {
@@ -150,17 +153,20 @@
      statusTx: ['空闲', '使用中', '客人休息', '打扫中', '敷麻中'],
      timeObj: {}, // week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
      curTreatId: '',
      curTreatIds: ''
      curTreatIds: '', // 已选中的治疗记录id数组
      offNarcosisIds: [] // 是否已通知卸麻的用户id数组
      // isShowAppellationName: true // 是否显示称谓
    }
  },
  // todo 页面显示及数组处理
  computed: {
    // 当前已选择用户的数组数据
    occupyInfoViewArr() {
      // 缓存记录
      if (this.curTreatIds) {
      if (this.curTreatIds && this.curTreatIds.length) {
        // todo 存在缓存且存在占用数据的时候，根据后端返回再补充逻辑
        return this.getCurTreatArr(this.curTreatIds)
      } else {
        // todo 存在占用数据的时候，根据后端返回再补充逻辑
        if (this.occupyInfo) {
          this.occupyInfoViewArrIdsHandle(this.occupyInfo)
          return [this.occupyInfo]
@@ -175,8 +181,9 @@
        }
      }
    },
    // 当前已选择用户的数据（单个）（暂无用）
    occupyInfoView() {
      console.log('00000000000000000000000', this.occupyInfo, isUseDefault, isUseDefaultChg)
      // console.log('00000000000000000000000', this.occupyInfo, isUseDefault, isUseDefaultChg)
      // 有当前选中的，根据需求修改增加选中不更改状态，由空闲开始
      if (this.curTreatId) {
        return this.gatCurTreatInfo()
@@ -197,12 +204,16 @@
        }
      }
    },
    // 该治疗室用户列表
    assignTreatListView() {
      if (this.assignTreatList && this.assignTreatList.length) {
        this.assignTreatList.forEach((o) => {
          o.act = false
          if (this.occupyInfoView && this.occupyInfoView.id === o.id) {
            o.act = true
          if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
            this.occupyInfoViewArr.forEach((_o) => {
              if (_o.id === o.id) {
                o.act = true
              }
            })
          }
        })
        return this.assignTreatList
@@ -214,23 +225,19 @@
  activated() {
    console.log('roomDetail mounted')
    // 记录当前的治疗ID
    var curTreatId = localStorage.getItem('curTreatId')
    // 记录当前的治疗ID数组
    // var curTreatId = localStorage.getItem('curTreatId')
    // 记录当前的治疗记录ID数组
    var curTreatIds = localStorage.getItem('curTreatIds')
    // 卸麻相关
    var localOffNarcosisIds = localStorage.getItem('offNarcosisIds')
    var localIsOffNarcosisShow = localStorage.getItem('isOffNarcosisShow')
    // 获取是否已通知卸麻数组
    if (localOffNarcosisIds) {
      offNarcosisIds = JSON.parse(localOffNarcosisIds)
      this.offNarcosisIds = JSON.parse(localOffNarcosisIds)
    } else {
      offNarcosisIds = []
      this.offNarcosisIds = []
      this.setLocalStorageOffNarcosisIds()
    }
    if (localIsOffNarcosisShow) {
      isOffNarcosisShow = localIsOffNarcosisShow
    }
    // 数组
    // 治疗记录ID数组
    if (curTreatIds) {
      try {
        this.curTreatIds = JSON.parse(curTreatIds)
@@ -238,7 +245,8 @@
        this.curTreatIds = ''
      }
    }
    this.curTreatId = curTreatId || ''
    // this.curTreatId = curTreatId || ''
    // 治疗室id
    this.id = this.$route.query.id || ''
    this.init()
  },
@@ -257,7 +265,7 @@
      this.pollingAjaxFn(this, 'getData', 'detail', 8000)
      // this.getData()
    },
    // 初始占用id数组处理
    // 初始默认选择的id数组处理
    occupyInfoViewArrIdsHandle(item) {
      if (!this.curTreatIds) {
        this.curTreatIds = []
@@ -267,28 +275,33 @@
    },
    // 设置已通知卸麻id数组
    setLocalStorageOffNarcosisIds() {
      localStorage.setItem('offNarcosisIds', JSON.stringify(offNarcosisIds))
      localStorage.setItem('offNarcosisIds', JSON.stringify(this.offNarcosisIds))
    },
    // 卸麻通知确认
    offNarcosisNoticeConfirm() {
      if (this.occupyInfoView) {
        if (offNarcosisIds && offNarcosisIds.length) {
          var flag = offNarcosisIds.find((o) => { return o === this.occupyInfoView.userId })
          if (!flag) {
            offNarcosisIds.push(this.occupyInfoView.userId)
          }
        } else if (offNarcosisIds) {
          offNarcosisIds.push(this.occupyInfoView.userId)
        }
        this.setLocalStorageOffNarcosisIds()
      }
      isOffNarcosisShow = true
      localStorage.setItem('isOffNarcosisShow', true)
    },
    // 显示通知卸麻弹窗
    showOffNarcosisNotice() {
      // 打开弹窗
      this.$refs['XioRoomOffNarcosisNotice'].showDialog()
    // offNarcosisNoticeConfirm() {
    //   if (this.occupyInfoView) {
    //     if (offNarcosisIds && offNarcosisIds.length) {
    //       var flag = offNarcosisIds.find((o) => { return o === this.occupyInfoView.userId })
    //       if (!flag) {
    //         offNarcosisIds.push(this.occupyInfoView.userId)
    //       }
    //     } else if (offNarcosisIds) {
    //       offNarcosisIds.push(this.occupyInfoView.userId)
    //     }
    //     this.setLocalStorageOffNarcosisIds()
    //   }
    // },
    // // 显示通知卸麻弹窗
    // showOffNarcosisNotice() {
    //   // 打开弹窗
    //   this.$refs['XioRoomOffNarcosisNotice'].showDialog()
    // },
    // 显示通知卸麻弹窗（多个）
    showOffNarcosisNoticeMulti(id) {
      // 打开弹窗，动态的ref对象获取
      // eslint-disable-next-line no-eval
      var ref = eval('this.$refs.XioRoomGuestInfoBox_' + id)[0]
      ref.showOffNarcosisNotice()
    },
    // 点击显示隐藏称谓
    // tapAppellationHandle() {
@@ -346,7 +359,7 @@
                startTime: '2023-12-08 00:00:00',
                userName: '黄嘉荣',
                gender: 1,
                hempStatus: 0,
                hempStatus: 2,
                ciq: '123',
                adviserName: 'a君',
                aDoctorName: 'b君',
@@ -359,7 +372,7 @@
                startTime: '2023-12-08 00:15:00',
                userName: '李德华',
                gender: 1,
                hempStatus: 0,
                hempStatus: 2,
                ciq: '456',
                adviserName: 'd君',
                aDoctorName: 'e君',
@@ -372,7 +385,7 @@
                startTime: '2023-12-08 00:20:00',
                userName: '猛学友',
                gender: 2,
                hempStatus: 0,
                hempStatus: 2,
                ciq: '789',
                adviserName: 'g君',
                aDoctorName: 'h君',
@@ -386,22 +399,23 @@
        }
      }).then((res) => {
        if (res && res.data) {
          // 治疗时间处理
          if (res.data.assignTreatList && res.data.assignTreatList.length) {
            res.data.assignTreatList.forEach((o) => {
              // 治疗时间处理
              var st = (o.startTime).split(' ')[1].split(':')
              o.startTime = `${st[0]}:${st[1]}`
              // 称谓处理
              o.appellationName = o.userName[0] + `${o.gender ? ['女士', '先生', '女士'][o.gender] : '女士'}`
            })
          }
          // 已占用用户数据处理
          // todo 已占用用户数据处理，待后端修改再处理
          if (res.data.occupyInfo && res.data.occupyInfo.userName) {
            res.data.occupyInfo.appellationName = res.data.occupyInfo.userName[0] + `${res.data.occupyInfo.gender ? ['女士', '先生', '女士'][res.data.occupyInfo.gender] : '女士'}`
          }
          // 已有占用的，更改已使用默认客人的状态
          // todo 已有占用的，更改已使用默认客人的状态
          res.data.occupyInfo && (isUseDefaultChg = 1)
          res.data.occupyInfo && (isUseDefault = 1)
          // 占用信息治疗时间处理
          // todo 占用信息治疗时间处理
          if (res.data.occupyInfo && res.data.occupyInfo.startTime) {
            var ost = (res.data.occupyInfo.startTime).split(' ')[1].split(':')
            res.data.occupyInfo.startTime = `${ost[0]}:${ost[1]}`
@@ -411,16 +425,21 @@
          }
        }
        // console.log('999999999999999999999999999', res)
        // 卸麻弹窗逻辑
        var offNarcosisTimer = null
        offNarcosisTimer = setTimeout(() => {
          console.log('================================>', this.occupyInfoView, 'offNarcosisIds:', offNarcosisIds, 'isOffNarcosisShow:', isOffNarcosisShow)
          if (this.occupyInfoView && this.occupyInfoView.hempStatus === 2 && this.occupyInfoView.userId) {
            var flag
            offNarcosisIds && offNarcosisIds.length && (flag = offNarcosisIds.find((o) => { return o === this.occupyInfoView.userId }))
            // flag = isOffNarcosisShow
            if (!flag) {
              this.showOffNarcosisNotice()
            }
          console.log('================================>判断卸麻弹窗', this.occupyInfoViewArr, 'offNarcosisIds:', this.offNarcosisIds)
          if (this.occupyInfoViewArr && this.occupyInfoViewArr.length && this.offNarcosisIds) {
            this.occupyInfoViewArr.forEach((o) => {
              // 判断改用户是否弹出过卸麻弹窗
              var flag
              flag = this.offNarcosisIds.find((_o) => { return _o === o.userId })
              // 状态2且没有弹出过弹窗
              if (o.hempStatus === 2 && !flag) {
                // 弹出对应id弹窗
                this.showOffNarcosisNoticeMulti(o.id)
              }
            })
          }
          clearTimeout(offNarcosisTimer)
          offNarcosisTimer = null
@@ -449,29 +468,29 @@
    // 未有安排直接状态变更
    statusChg(e) {
      var { tx, status } = e.currentTarget.dataset
      var { occupyInfoView, roomInfo } = this
      console.log(tx, status)
      // var { occupyInfoView, roomInfo } = this
      console.log('==========================>没有安排时没有客人直接变更状态', tx, status)
      // if (roomInfo && status * 1 == roomInfo.status) {
      //   return
      // }
      this.changeStatusFn(occupyInfoView, status, () => {
      this.changeStatusFn({}, status, () => {
        this.getData()
      })
    },
    // 按流程设置房间状态
    // 没有客人的按流程设置房间状态
    setStatus(tx, status) {
      var { occupyInfoView, roomInfo } = this
      console.log(tx, status)
      this.changeStatusFn(occupyInfoView, status, () => {
      // var { occupyInfoView, roomInfo } = this
      console.log('============================>有安排没有客人设置房间状态', tx, status)
      this.changeStatusFn({}, status, () => {
        // 刷新详情
        this.getData()
      })
    },
    // 按流程设置房间状态
    // 按流程设置房间状态（组件）
    setComStatus(opt) {
      var { occupyInfoView, roomInfo } = this
      console.log(opt.tx, opt.status)
      this.changeStatusFn(occupyInfoView, opt.status, () => {
      // var { occupyInfoView, roomInfo } = this
      console.log('============================>客人信息组件点击更改状态', opt.tx, opt.status, opt.item)
      this.changeStatusFn(opt.item, opt.status, () => {
        // 刷新详情
        this.getData()
      })
@@ -505,18 +524,24 @@
          isUseDefaultChg = 1
        }
        // 当前选中的用户房间更改了状态，已经成为占用时，清除选中医疗记录id
        if (item && item.id && item.id === this.curTreatId) {
          console.log('当前选中的用户房间更改了状态，已经成为占用时，清除选中医疗记录id')
          localStorage.removeItem('curTreatId')
          this.curTreatId = ''
        }
        // if (item && item.id && item.id === this.curTreatId) {
        //   console.log('当前选中的用户房间更改了状态，已经成为占用时，清除选中医疗记录id')
        //   localStorage.removeItem('curTreatId')
        //   this.curTreatId = ''
        // }
        // 只要更改为空闲就重置参数
        if (status === 0) {
          console.log('更改为空闲')
          console.log('房间更改为空闲')
          // 重置默认已使用客人的参数
          isUseDefault = false
          isUseDefaultChg = 0
          // this.isShowAppellationName = true
        }
        // todo 用户结束治疗后，将其从缓存中删除, 待测试
        if (item && item.id && this.curTreatIds && this.curTreatIds.length && status === 0) {
          console.log('当前用户所在房间更改了状态为结束，清除当前的医疗记录id')
          // 当前选择客户的数组删除客户
          this.occupyInfoViewArrDataHandle('cancel', item)
        }
        // console.log('8888888888888888888888888888888888', res)
        cb && cb()
@@ -529,14 +554,18 @@
    },
    // 更改房间状态（重置状态的更改方法）
    changeStatus(opt) {
      var { occupyInfoView, roomInfo } = this
      console.log(opt.statusTx, opt.status)
      // var { occupyInfoView, roomInfo } = this
      console.log('============================>重置房间状态', opt.statusTx, opt.status)
      // if (roomInfo && opt.status * 1 == roomInfo.status) {
      //   return
      // }
      // 清除选中医疗记录id
      localStorage.removeItem('curTreatId')
      this.curTreatId = ''
      // localStorage.removeItem('curTreatId')
      // this.curTreatId = ''
      // 清除选中医疗记录ids数组
      localStorage.removeItem('curTreatIds')
      this.curTreatIds = ''
      // 变更房间状态方法
      this.changeStatusFn({}, opt.status, () => {
        // 刷新详情
        this.getData()
@@ -563,18 +592,10 @@
    selectCustomerSubmit(opt) {
      console.log('=======================>submit', opt)
      // 确定选择的用户，记录id
      localStorage.setItem('curTreatId', opt.id)
      this.curTreatId = opt.id
      if (this.curTreatIds && this.curTreatIds.length) {
        var flag = this.curTreatIds.find((o) => { return o === opt.id })
        if (!flag) {
          this.curTreatIds.push(opt.id)
        }
        this.setLocalCurTreatIds()
      }
      if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
        this.occupyInfoViewArr.push(opt)
      }
      // localStorage.setItem('curTreatId', opt.id)
      // this.curTreatId = opt.id
      // 当前选择客户的数组增加客户
      this.occupyInfoViewArrDataHandle('add', opt)
      // 重置房间状态
      if (this.roomInfo) {
        this.changeStatusFn({}, 0, () => {
@@ -584,6 +605,53 @@
      }
      // 关闭弹窗
      this.$refs['XioCustomerSelect'].hideDialog()
    },
    // 删除已选择的客户数据
    cancelCustomerItem(item) {
      // 当前选择客户的数组删除客户
      this.occupyInfoViewArrDataHandle('cancel', item, true)
    },
    // 当前选择客户的数组增删处理方法
    occupyInfoViewArrDataHandle(key, item, isReset) {
      // 增加（选择）
      if (key === 'add') {
        // id数组处理
        if (this.curTreatIds && this.curTreatIds.length) {
          // 当前治疗记录id没有所选用户的治疗记录id
          var flag = this.curTreatIds.find((o) => { return o === item.id })
          if (!flag) {
            this.curTreatIds.push(item.id)
          }
          // 缓存
          this.setLocalCurTreatIds()
        }
        // 数组数据处理
        // if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
        //   this.occupyInfoViewArr.push(item)
        // }
      }
      // 删除
      if (key === 'cancel') {
        // id数组处理
        if (this.curTreatIds && this.curTreatIds.length) {
          // 深复制
          var ids = JSON.parse(JSON.stringify(this.curTreatIds))
          this.curTreatIds = ids.filter((o) => { return o !== item.id })
          // 缓存
          this.setLocalCurTreatIds()
          // 刷新
          if (isReset) {
            // 刷新详情
            this.getData()
          }
        }
        // 数组数据处理
        // if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
        //   // 深复制
        //   var arr = JSON.parse(JSON.stringify(this.occupyInfoViewArr))
        //   this.occupyInfoViewArr = arr.filter((o) => { o.id !== item.id })
        // }
      }
    },
    // 设置本地缓存ids数组
    setLocalCurTreatIds() {
@@ -639,6 +707,25 @@
  font-size: 14px;
  /* text-align: center; */
  font-family: Roboto;
  position: relative;
}
.page_container.over-width .main {
  margin-right: 50px;
}
.page_container.over-width .main:last-child {
  margin-right: 0;
}
.page_container .main .cancel_icon_block {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 12px;
  right: 11px;
  z-index: 1;
}
.page_container .main .cancel_icon_block .img {
  width: 100%;
  height: 100%;
}
.page_container .main .room_title {
  line-height: 50px;
@@ -808,6 +895,12 @@
  margin-left: 30px;
  /* height: 100%; */
}
.page_container.over-width .right_room_info {
  margin-bottom: 58px;
}
.page_container.over-width .right_room_info:last-child {
  margin-bottom: 0;
}
.page_container .right_block {
  width: 100%;
  height: 100%;