settle_down_wx/pages/subPackages/todo/resourceReview.vue

<template>
    <div class="resourceReview">
      <ul class="detailUl">
        <li class="topBox">
          <div class="topTitle">会议室详情</div>
        </li>
        <li class="detailLi">
          <span class="liName">当前企业</span>
          <span class="liInfo">{{ appointForm.unit }}</span>
        </li>
        <li class="detailLi">
          <span class="liName">位置</span>
          <span class="liInfo">{{ meetingRoomForm.position }}</span>
        </li>
        <li class="detailLi">
          <span class="liName">容纳人数</span>
          <span class="liInfo">{{ meetingRoomForm.seatNumber }}</span>
        </li>
        <li class="detailLi">
          <span class="liName">配套</span>
          <span class="liInfo">{{ meetingRoomForm.matchGoods }}</span>
        </li>
        <li class="detailLi">
          <span class="liName">说明</span>
          <span class="liInfo">{{ meetingRoomForm.remark }}</span>
        </li>
      </ul>
      <div class="resourceAddDetail">
        <ul class="predetermineUl">
          <li class="topBox">
            <div class="topTitle" style="padding: 48rpx 0 24rpx 0">预约详情</div>
            <div class="choosTimeBox">
              <span class="msg">使用时间</span>
<!--              <input placeholder="请选择日期" class="choosIpt" disabled>-->
<!--              <input placeholder="请选择时间段" class="choosIpt" disabled>-->
              <span class="choosIpt" >{{ startTime }} </span>
              <span class="choosIpt" >{{ timeListStr }} </span>
            </div>
          </li>
          <li class="detailLi">
            <span class="liName">主题</span>
            <span>
               <input class="liInfo" placeholder="请填写" v-model="appointForm.subject">
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">容纳人数</span>
            <span>
               <input class="liInfo" placeholder="请填写整数" v-model="appointForm.peopleNumber">
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">联系人</span>
            <span>
               <input class="liInfo" placeholder="请填写" v-model="appointForm.contacts">
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">联系电话</span>
            <span>
               <input class="liInfo" placeholder="请填写" v-model="appointForm.phone">
          </span>
          </li>
          <li class="detailLi2" style="border-bottom: none">
            <div class="titleBox">
              <span class="liName">备注</span>
            </div>
            <van-field
                :value="appointForm.remarks"
                autosize
                type="textarea"
                placeholder="请输入"
                class="myField"
                maxlength="2000"
                show-word-limit
                @change="changeMsg"
            />
          </li>
        </ul>
        <ul class="predetermineUl">
          <li class="detailLi">
            <span class="liName">预约单位</span>
            <span>
               <input class="liInfo" placeholder="" v-model="appointForm.unit">
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">容纳人数</span>
            <span >
               <input class="liInfo" placeholder="请填写整数" v-model="appointForm.peopleNumber">
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">预约人</span>
            <span >
               <input class="liInfo" placeholder="请填写" v-model="appointForm.appointUserName">
          </span>
          </li>
          <li class="detailLi" style="border-bottom: none">
            <span class="liName">预约时间</span>
            <span>
               <input class="liInfo" placeholder="请填写" v-model="appointForm.appointTime" disabled>
          </span>
          </li>
        </ul>
        <ul class="detailUl">
          <li class="topBox">
            <div class="topTitle">审核信息</div>
          </li>
          <li class="detailLi2">
            <van-radio-group :value="radio" @change="onChange">
              <van-radio name="1">通过</van-radio>
              <van-radio name="2" style="margin-left: 48rpx">取消</van-radio>
            </van-radio-group>
            <van-field
                v-if="reasonFlag"
                :value="cancelReason"
                autosize
                type="textarea"
                placeholder="请输入取消原因（必填）"
                class="myField"
                maxlength="200"
                show-word-limit
                @change="changeMsg"
            />
          </li>
          <li class="detailLi">
            <span class="liName">办理人</span>
            <span class="liInfo">{{ examineName }}</span>
          </li>
          <li class="detailLi" style="border-bottom: none">
            <span class="liName">办理时间</span>
            <span class="liInfo">{{ examineTime }}</span>
          </li>
        </ul>
        <div class="buttonBox" >
          <button class="btn zcBtn" @click="cancel">关闭</button>
          <button class="btn tjBtn" @click="submit">提交</button>
        </div>
      </div>
    </div>
</template>

<script>
import {getByCodes, meetingRoomDetail, meetingAppointDetail, getUserLocalStorageInfo, meetingAppointConfirmAudit} from "@/js_sdk/http";
import dayjs from "dayjs";

export default {
  name: "resoureceReview",
  created(){
    this.getByCodes()
  },
  onLoad(options){
    this.appointId = options.appointId
    this.getAppointDetail()
  },
  data() {
    return{
      dc_key: ['timeSlot'],
      theme:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      unit:'XXXXXXXXXXXXXX',
      postData: {},
      radio: '1',
      companyName: '',
      appointId: '',
      roomId: '',
      meetingRoomForm:{

      },
      appointForm: {

      },
      dic_SelectList: [],
      timeList: [], //  时间段列表
      startTime: '',
      timeListStr: '',
      cancelReason: '',
      confirmType: '',
      reasonFlag: false,
      examineName: getUserLocalStorageInfo().username,
      examineTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    }
  },
  methods:{
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dc_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.timeList = this.dic_SelectList.timeSlot
    },
    // 会议室详情
    getMeetingRoomDetail(){
      const data = {
        id: this.roomId
      }
      meetingRoomDetail(data).then(res => {
        if (res.code === 200) {
          this.meetingRoomForm = res.data
        }
      })
    },
    // 预约详情
    getAppointDetail(){
      const data = {
        id: this.appointId
      }
      meetingAppointDetail(data).then(res => {
        if (res.code === 200) {
          this.appointForm = res.data.oderDetial
          this.meetingRoomForm = res.data.roomDetial
          this.startTime = this.appointForm.useTime
          let index = this.timeList.findIndex((e) => e.value == this.appointForm.timeSlot)
          this.timeListStr = this.timeList[index].label
          // this.roomId = res.data.roomIds
          // this.getMeetingRoomDetail()
        }
      })
    },
    changeMsg(e){
      this.cancelReason = e.detail
    },
    onChange(e){
      this.confirmType = e.detail
      if(this.confirmType == '1'){
        this.reasonFlag = false
      }else {
        this.reasonFlag = true
      }
    },
    cancel(){
      uni.navigateBack({})
    },
    submit(){
      const data = {
        id: this.appointId,
        userId: getUserLocalStorageInfo().userId,
        useType: getUserLocalStorageInfo().userType,
        confirmType: this.confirmType,
        reason: this.cancelReason
      }
      meetingAppointConfirmAudit(data).then(res=>{
          if(res.code == '200'){
            this.$showToast("审核成功");
            this.cancel()
          }else {
            this.$showToast(res.msg);
          }
      })

    }
  }
}
</script>

<style lang="scss">
    .resourceReview{
      .detailUl{
        margin-top: 20rpx;
        background: white;
        padding: 24rpx 32rpx;
        .detailLi{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 32rpx 0;
          border-bottom: 2rpx solid #E6E6E6;
          .liInfo{
            display: inline-block;
            text-align: right;
            max-width: 428rpx;
            color: rgba(102, 102, 102, 1);
            font-size: 32rpx;
            line-height: 38rpx;
            overflow: hidden;
            word-wrap: break-word;
          }
          .liName{
            font-size: 32rpx;
            color: rgba(51, 51, 51, 1);
            white-space: nowrap;
            .callNumber{
              color: rgba(24, 23, 42, 1);
              font-size: 36rpx;
              font-weight: 600;
            }
            .callName{
              color: rgba(102, 102, 102, 1);
              font-size: 28rpx;
            }
          }
        }
      }
      .topBox{
        background: white;
        margin: 24rpx 0;
        .topTitle{
          color: rgba(34, 34, 34, 1);
          font-size: 36rpx;
          font-weight: 600;
        }
        .choosTimeBox{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .msg{
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
            white-space: nowrap;
          }
          .choosIpt {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 260rpx;
            height: 96rpx;
            font-size: 32rpx;
            background: rgba(245, 247, 250, 1);
            box-sizing: border-box;
          }
        }
      }
      .resourceAddDetail{
        .predetermineUl{
          margin: 24rpx 0;
          background: white;
          box-sizing: border-box;
          padding: 0 32rpx;
          .predetermineLi{
            padding: 32rpx 0;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
            display: flex;
            justify-content: space-between;
          }
          .predetermineLi2{
            padding: 32rpx 0;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
            display: flex;
            flex-direction: column;
          }
          .liName{
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
          }
          .liIpt{
            color: rgba(102, 102, 102, 1);
            font-size: 32rpx;
            text-align: right;
          }
          .detailLi{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 32rpx 0;
            border-bottom: 2rpx solid #E6E6E6;
            .liInfo{
              display: inline-block;
              text-align: right;
              max-width: 488rpx;
              width: 488rpx;
              color: rgba(102, 102, 102, 1);
              font-size: 32rpx;
              line-height: 38rpx;
              .radio{
                margin-left: 64rpx;
              }
            }
          }
        }
        .detailLi2{
          display: flex;
          flex-direction: column;
          padding: 32rpx 0;
          border-bottom: 2rpx solid #E6E6E6;
          .detailLi2BoxTop{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 12rpx 0;
            .checkItem{
              width: 128rpx;
              height: 64rpx;
              font-size: 28rpx;
              color: #666666;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #F5F7FA;
              border-radius: 8rpx;
              margin: 12rpx 0;
            }
            .checked{
              background: #0365F9;
              color: white;
            }
          }
          .van-radio-group{
            display: flex;
          }
        }
        .van-cell {
          background: #F5F7FA !important;
          border-radius: 8rpx;
          font-size: 28rpx;
          margin-top: 16rpx;
        }
        .buttonBox{
          display: flex;
          justify-content: center;
          .btn{
            width: 240rpx;
            height: 80rpx;
            display: flex;
            border-radius: 8rpx;
            align-items: center;
            justify-content: center;
            margin: 48rpx 16rpx 150rpx 16rpx;
            color: white;
            letter-spacing: 2rpx;
            text-indent: 2rpx;
          }
          .zcBtn{
            background: #FE8643;
          }
          .tjBtn{
            background: #0365F9;
          }
        }
      }
    }
</style>