大屏

liukangdong

2024-10-24 44dd2c7c73d5fead948902cad2695ae30d4620e2

 h5/pages/staff/meetingSubOrder.vue

@@ -1,345 +1,361 @@
<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"
            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>
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;
        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;
}
.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>
<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" 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">
                  <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">

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

   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

            }

            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;

               }

            }

         }

      }



      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: $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>