ll

liukangdong

2025-02-27 88a34566f7c3f77d90daa3fd57fb0abca3e1b5e6

 h5/pages/staff/meetingSubOrder.vue

@@ -1,145 +1,359 @@
<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">
<template>

   <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" autoHeight 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">

            <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>
</template>

<script>
   export default {
      data() {
         return {
            param: {},
            serviceOps: [
               { key: '0', value: '席卡' },
               { key: '1', value: '投影仪' },
               { key: '2', value: '笔记本电脑' },
            ]
         };
      }
   }
</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;
}
.empty {
   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;
}
</style>
                  <u-switch v-model="param.joinNotice" activeColor="#4d99a8" :activeValue="0" :inactiveValue="1"></u-switch>

                  <!-- <u-radio-group v-model="param.joinNotice">

                     <u-radio label="不通知" :name="1" activeColor="#4d99a8" class="mr24" />
                     <u-radio label="通知" :name="0" activeColor="#4d99a8" />

                  </u-radio-group> -->

               </view>

            </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">

               <u-textarea  border="none" autoHeight 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>

   import {

      reservationMeeting,

      getRoomDetail,

      meetingDetail,

      updateById,

      getAppRoomDetail

   } from '@/api'

   import dayjs from 'dayjs'

   export default {

      data() {

         return {

            param: {
               joinNotice: 1
            },

            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,
               joinNotice: 1

            }

            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;

               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;

               }

            }

         }

      }

   }



   .empty {

      width: 750rpx;

      height: 20rpx;

      background-color: #f7f7f7;

      margin: 0 -30rpx;

   }



   .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: 40rpx;

   }



   .star {

      margin-left: 4rpx;

      color: #e42d2d;

   }

</style>