ll

liukangdong

2024-10-18 e6acb39a2475e211f2c1decc45a95c868239c25f

 h5/pages/staff/meetingSubOrder.vue

@@ -1,145 +1,345 @@
<template>
   <view class="main_app">
      <view class="module_list">
         <view class="item">
            <view class="name">会议时间</view>
            <view class="line">
               <view class="label">2022年22月2日 1000000000</view>
               <u-icon name="arrow-right" color="#999999" size="14" />
            </view>
         </view>
         <view class="item">
            <view class="name">会议室</view>
            <view class="line">
               <view class="label">aaaaaaaa</view>
            </view>
         </view>
         <view class="item">
            <view class="name">预约人</view>
            <view class="line">
               <view class="label">aaaaaaaa</view>
            </view>
         </view>
         <view class="empty"></view>
         <view class="item">
            <view class="name">
               <text>会议主题</text>
               <text class="star">*</text>
            </view>
            <view class="line">
               <input type="text" v-model="param.aaa" placeholder="请输入会议主题" placeholder-class="placeholder9" class="label">
            </view>
         </view>
         <view class="item">
            <view class="name">
               <text>会议内容</text>
            </view>
            <view class="line">
               <u-textarea border="none" v-model="param.aaa" count :maxlength="300" placeholder="请输入会议内容" placeholder-class="placeholder9" class="label" />
            </view>
         </view>
         <view class="empty"></view>
         <view class="item">
            <view class="name">参会人员</view>
            <view class="line">
               <view class="label">
                  <text v-if="false">moumoumou</text>
                  <text v-else class="placeholder9" @click="$jump('/pages/staff/memberSel')">请选择</text>
               </view>
               <u-icon name="arrow-right" color="#999999" size="14" @click="$jump('/pages/staff/memberSel')" />
            </view>
         </view>
         <view class="item">
            <view class="name">选择服务项</view>
            <view class="line">
               <view class="label">
                  <view class="service_item" v-for="(item,index) in serviceOps" :key="index">
                     {{ item.value }}
                  </view>
               </view>
            </view>
         </view>
         <view class="item">
            <view class="name">
               <text>备注</text>
            </view>
            <view class="line">
               <textarea v-model="param.as" :maxlength="-1" placeholder="请输入" placeholder-class="placeholder9" class="label" />
            </view>
         </view>
			
         <view class="sub_btn">
            确认预约
         </view>
			
      </view>
   </view>
  <view class="main_app">
    <view class="module_list">
      <view class="item">
        <view class="name">会议时间</view>
        <view class="line" @click="handleBack">
          <view class="label">
            {{ param.activeDate || param.meetingDate }} 
            <text class="ml12" v-if="!param.id">{{ param.startTime }}-{{ param.endTime }}</text>
            <text class="ml12" v-if="param.id">{{ param.meetingTime }}</text>
          </view>
          <u-icon name="arrow-right" color="#999999" size="14" />
        </view>
      </view>
      <view class="item">
        <view class="name">会议室</view>
        <view class="line">
          <view class="label">{{ param.roomName }}(可容纳{{ param.limitNum }}人)</view>
        </view>
      </view>
      <view class="item">
        <view class="name">预约人</view>
        <view class="line">
          <view class="label">{{ userInfo.realname }}</view>
        </view>
      </view>
      <view class="empty"></view>
      <view class="item">
        <view class="name">
          <text>会议主题</text>
          <text class="star">*</text>
        </view>
        <view class="line">
          <input
            type="text"
            v-model="param.name"
            placeholder="请输入会议主题"
            placeholder-class="placeholder9"
            class="label"
          />
        </view>
      </view>
      <view class="item">
        <view class="name">
          <text>会议内容</text>
        </view>
        <view class="line">
          <u-textarea
            border="none"
            v-model="param.content"
            count
            :maxlength="300"
            placeholder="请输入会议内容"
            placeholder-class="placeholder9"
            class="label"
          />
        </view>
      </view>
      <view class="empty"></view>
      <view class="item">
        <view class="name">
          参会人员
           <text class="star"></text>
        </view>
        <view class="line" @click="selPeople">
          <view class="label">
            <text v-if="param.sysList && param.sysList.length > 0">
              {{ param.sysList.map((i) => i.realname).join(",") }}
            </text>
            <text
              v-else
              class="placeholder9"
              >请选择</text
            >
          </view>
          <u-icon
            name="arrow-right"
            color="#999999"
            size="14"
          />
        </view>
      </view>
      <view class="item" v-if="info.projectList && info.projectList.length > 0">
        <view class="name">选择服务项</view>
        <view class="line">
          <view class="label">
            <view
              class="service_item"
              :class="{ active: item.checked }"
              v-for="(item, index) in info.projectList"
              :key="index"
              @click="serviceClick(item)"
            >
              {{ item.projectName }}
            </view>
          </view>
        </view>
      </view>
      <view class="item">
        <view class="name">
          <text>备注</text>
        </view>
        <view class="line">
          <textarea
            v-model="param.remark"
            :maxlength="-1"
            placeholder="请输入"
            placeholder-class="placeholder9"
            class="label"
          />
        </view>
      </view>

      <view v-if="param.id" class="sub_btn" @click="onUpdate">确认修改</view>
      <view v-else class="sub_btn" @click="onSubmit"> 确认预约 </view>
    </view>
  </view>
</template>

<script>
   export default {
      data() {
         return {
            param: {},
            serviceOps: [
               { key: '0', value: '席卡' },
               { key: '1', value: '投影仪' },
               { key: '2', value: '笔记本电脑' },
            ]
         };
      }
   }
import {
  reservationMeeting,
  getRoomDetail,
  meetingDetail,
  updateById,
  getAppRoomDetail
} from '@/api'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      param: {},
      userInfo: uni.getStorageSync('userInfo'),
      info: {},
    }
  },
  onLoad(option) {
    if (option.id) {
      uni.setNavigationBarTitle({
        title: '会议详情'
      })
      this.getDetail(option.id)
    }
  },
  mounted() {
    this.$eventBus.$on('meetingPeo', (res) => {
      this.$set(this.param, 'sysList', res.map(i => {
        i.userId = i.id
        return i
      }))
      // this.$set(this.param, 'memberIds', res.map(i => i.id).join(','))
      // this.$set(this.param, 'memberNames', res.map(i => i.name).join(','))
    })
    this.$eventBus.$on('meetingSub', (res) => {
      this.param = { ...res }
      this.$set(this.param, 'activeDate', dayjs(res.yudingDate).format('YYYY年M月D日'))
      const bookingTimeList = res.bookingTimeList.split(',').map(i => {
        return {
          timeId: Number(i)
        }
      })
      this.$set(this.param, 'bookingTimeList', bookingTimeList)
      this.initOption()
    })
  },
  methods: {
    getDetail(id) {
      meetingDetail({ id }).then(res => {
        this.param = { ...res.data,name: res.data.meetingName, content: res.data.meetingContent, sysList: res.data.userResponseList }
        // this.param = { ...res.data }
        if(this.param.sysList && this.param.sysList.length > 0){
          this.param.sysList.forEach(i => {
            i.userId = i.id
          })
        }
        getRoomDetail({ roomId: res.data.roomId }).then(ress => {
          this.info = ress.data
          if (this.info && this.info.projectList) {
            this.info.projectList.forEach(i => {
              i.checked = false
              if(res.data.projectsResponseList && res.data.projectsResponseList.length > 0){
                res.data.projectsResponseList.forEach(item2 => {
                  if(i.projectId === item2.id){
                    i.checked = true
                  }
                })
              }
            })
          }
        })
      })
    },
    onUpdate() {
      const { param, info } = this
      if (!param.name) return uni.showToast({
        title: '请输入会议主题',
        icon: 'none'
      })
      reservationMeeting({
        ...param,
        projectList: info.projectList.filter(i => i.checked),
      }).then(res => {
        if (res.code === 200) {
          setTimeout(() => {
            uni.showToast({
              title: '修改成功',
              icon: 'success',
              duration: 2000
            })
          })
          uni.redirectTo({
            url: '/pages/staff/index'
          })
        }
      })
    },
    handleBack() {
      if(this.param.id) return
      uni.navigateBack( )
    },
    onSubmit() {
      const { param, info } = this
      if (!param.name) return uni.showToast({
        title: '请输入会议主题',
        icon: 'none'
      })
      // if (!param.sysList || param.sysList.length == 0) return uni.showToast({
      //   title: '请选择参会人员',
      //   icon: 'none'
      // })
      reservationMeeting({
        ...param,
        startTime: `${param.yudingDate} ${param.startTime}:00`,
        endTime: `${param.yudingDate} ${param.endTime}:00`,
        projectList: info.projectList.filter(i => i.checked),
      }).then(res => {
        if (res.code === 200) {
          setTimeout(() => {
            uni.showToast({
              title: '预约成功',
              icon: 'success',
              duration: 2000
            })
          })
          uni.redirectTo({
            url: '/pages/staff/index'
          })
        }
      })
    },
    selPeople() {
      const { param } = this
      let startTime = new Date(param.yudingDate + ' ' + param.startTime).getTime()
      let endTime = new Date(param.yudingDate + ' ' + param.endTime).getTime()
      if(this.param.sysList && this.param.sysList.length > 0){
        setTimeout(() => {
          this.$eventBus.$emit('meetingPeoDetail', this.param.sysList || [])
        }, 500)
      }
      uni.navigateTo({
        url: `/pages/staff/meetingSel?startTime=${startTime}&endTime=${endTime}&limitNum=${this.param.limitNum}`
      })
    },
    serviceClick(item) {
      const { info } = this
      info.projectList.forEach(ite => {
        if (ite.projectId === item.projectId) {
          ite.checked = !ite.checked
        }
      })
      this.$forceUpdate()
    },
    initOption() {
      const roomId = Number(this.param.roomId)
      getRoomDetail({ roomId }).then(res => {
        this.info = res.data
        if (this.info && this.info.projectList) {
          this.info.projectList.forEach(i => {
            i.checked = false

          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.module_list{
   .item{
      border-bottom: 1rpx solid #E5E5E5;
      padding: 30rpx 0;
      .name{
         color: #666666;
         margin-bottom: 30rpx;
      }
      .line{
         display: flex;
         .label{
            flex: 1;
            display: flex;
            align-items: center;
            .service_item{
               height: 64rpx;
               line-height: 64rpx;
               background: #F7F7F7;
               border-radius: 4rpx;
               padding: 0 24rpx;
               margin-right: 20rpx;
            }
         }
			
      }
   }
   padding-bottom: 100rpx;
.module_list {
  .item {
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .name {
      color: #666666;
      margin-bottom: 30rpx;
    }
    .line {
      display: flex;
      .label {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .service_item {
          height: 64rpx;
          line-height: 64rpx;
          background: #f7f7f7;
          border-radius: 4rpx;
          padding: 0 24rpx;
          margin-right: 20rpx;
          margin-bottom: 12rpx;
        }
        .active {
          background-color: #4d99a8;
          color: #fff;
        }
      }
    }
  }
  padding-bottom: 100rpx;
}
.empty {
   width: 750rpx;
   height: 20rpx;
   background-color: #f7f7f7;
   margin: 0 -30rpx;
  width: 750rpx;
  height: 20rpx;
  background-color: #f7f7f7;
  margin: 0 -30rpx;
}
.sub_btn{
            width: 690rpx;
            height: 72rpx;
            line-height: 72rpx;
            text-align: center;
            background: #279BAA;
            box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
            border-radius: 36rpx;
            font-size: 30rpx;
            color: #FFFFFF;
            margin-top: 20rpx;
         }
.star{
   margin-left: 4rpx;
   color: #e42d2d;
.sub_btn {
  width: 690rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: $uni-color-primary;
  box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
  border-radius: 36rpx;
  font-size: 30rpx;
  color: #ffffff;
  margin-top: 20rpx;
}
.star {
  margin-left: 4rpx;
  color: #e42d2d;
}
</style>