jiangping
2024-06-07 73af3ed9fbcc616cdecc739fc4307163c19c5764
h5/pages/staff/meetingCalendar.vue
@@ -1,11 +1,19 @@
<template>
   <view class="main_app">
      <view class="tabs">
         <view class="tab" :class="{ active: activeTab === '0' }" @click="tabClick('0')">
      <view
        class="tab"
        :class="{ active: activeTab === '0' }"
        @click="tabClick('0')"
      >
            <text class="name">会议日历</text>
            <view class="line"></view>
         </view>
         <view class="tab" :class="{ active: activeTab === '1' }" @click="tabClick('1')">
      <view
        class="tab"
        :class="{ active: activeTab === '1' }"
        @click="tabClick('1')"
      >
            <text class="name">预约记录</text>
            <view class="line"></view>
         </view>
@@ -17,8 +25,8 @@
         <view class="container_b">
            <Calendar
               ref="Calendar"
               :currentTime="currentTime1"
               :mark="mark"
          :currentTime="currentDate"
          :mark="monthMark"
               :showLunar="false"
               @dayChange="dayChange"
               @monthChange="monthChange"
@@ -37,31 +45,52 @@
                  <view class="text">今日会议</view>
               </view>
               <view class="meeting">
                  <view class="text mr24">全部会议室</view>
            <view class="text mr24" @click="isShowStatus = true">{{
              activeRoom.name
            }}</view>
                  <u-icon name="arrow-down" size="12" color="#999999" />
               </view>
            </view>
            <view class="list">
               <view class="item">
          <view
            @click="handleDetail(item.id)"
            class="item"
            v-for="item in myMeetingList"
            :key="item.id"
          >
                  <view class="head">
                     <view class="name">aaaaa选型</view>
                     <view class="status">即将开始</view>
              <view class="name">{{ item.meetingName }}</view>
              <view class="status" v-if="item.meetingStatus == '1'"
                >未开始</view
              >
              <view class="status red" v-if="item.meetingStatus == '2'"
                >进行中</view
              >
              <view class="status" v-if="item.meetingStatus == '3'"
                >已结束</view
              >
              <view class="status padding" v-if="item.meetingStatus == '4'"
                >即将开始</view
              >
              <view class="status" v-if="item.meetingStatus == '5'"
                >已撤销</view
              >
                  </view>
                  <view class="line">
                     <view class="label">会议时间:</view>
                     <view class="value">12:00-12</view>
              <view class="value">{{ item.meetingTime }}</view>
                  </view>
                  <view class="line">
                     <view class="label">会议室:</view>
                     <view class="value">202会议室</view>
              <view class="value">{{ item.roomName }}</view>
                  </view>
                  <view class="line">
                     <view class="label">预约人:</view>
                     <view class="value">杨某某</view>
              <view class="value">{{ item.bookingUser }}</view>
                  </view>
                  <view class="line">
                     <view class="label">备注:</view>
                     <view class="value">--</view>
              <view class="value">{{ item.remark || item.meetingRemark }}</view>
                  </view>
               </view>
            </view>
@@ -71,58 +100,86 @@
      <template v-if="activeTab === '1'">
         <view class="card_list">
            <view class="list">
               <view class="item" @click="handleDetail()">
          <view
            class="item"
            v-for="item in recordList"
            :key="item.id"
            @click="handleDetail(item.id)"
          >
                  <view class="head">
                     <view class="name">aaaaa选型</view>
                     <view class="status">即将开始</view>
              <view class="name">{{ item.meetingName }}</view>
              <view class="status" v-if="item.meetingStatus == '1'"
                >未开始</view
              >
              <view class="status red" v-if="item.meetingStatus == '2'"
                >进行中</view
              >
              <view class="status" v-if="item.meetingStatus == '3'"
                >已结束</view
              >
              <view class="status padding" v-if="item.meetingStatus == '4'"
                >即将开始</view
              >
              <view class="status" v-if="item.meetingStatus == '5'"
                >已撤销</view
              >
                  </view>
                  <view class="line">
                     <view class="label">会议时间:</view>
                     <view class="value">12:00-12</view>
              <view class="value">{{ item.meetingTime }}</view>
                  </view>
                  <view class="line">
                     <view class="label">会议室:</view>
                     <view class="value">202会议室</view>
              <view class="value">{{ item.roomName }}</view>
                  </view>
                  <view class="line">
                     <view class="label">预约人:</view>
                     <view class="value">杨某某</view>
              <view class="value">{{ item.bookingUser }}</view>
                  </view>
                  <view class="line">
                     <view class="label">备注:</view>
                     <view class="value">--</view>
              <view class="value">{{ item.remark || item.meetingRemark }}</view>
                  </view>
               </view>
            </view>
         </view>
      </template>
    <u-picker
      keyName="name"
      :show="isShowStatus"
      :columns="meetingList"
      @confirm="seletedStatus"
      @cancel="isShowStatus = false"
    ></u-picker>
   </view>
</template>
<script>
import Calendar from '@/components/Li-Calendar/Li-Calendar.vue';
import { getDay } from '@/utils/utils.js';
import Calendar from '@/components/Li-Calendar/Li-Calendar.vue'
import dayja from 'dayjs'
import { myMeetingPage, monthMeetingPage, roomsListPost } from '@/api'
function getDate(date, AddDayCount = 0) {
   if (!date) {
      date = new Date();
    date = new Date()
   }
   if (typeof date !== 'object') {
      date = date.replace(/-/g, '/');
    date = date.replace(/-/g, '/')
   }
   const dd = new Date(date);
  const dd = new Date(date)
   dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期
  dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
   const y = dd.getFullYear();
   const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期,不足10补0
   const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 获取当前几号,不足10补0
  const y = dd.getFullYear()
  const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
  const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0
   return {
      fullDate: y + '-' + m + '-' + d,
      year: y,
      month: m,
      date: d,
      day: dd.getDay()
   };
  }
}
export default {
   components: {
@@ -131,72 +188,153 @@
   data() {
      return {
         activeTab: '0',
         currentTime1: '',
      recordList: [],
      recordPage: 1,
      myPage: 1,
      myMeetingList: [],
      currentDate: '',
         dateStart: '1999-05-01',
         dateEnd: '2999-06-15',
         mark: [],
         selected: [
            {
               date: getDate(new Date(), -3).fullDate
               // info: '打卡'
      monthMark: [],
      isShowStatus: false,
      activeRoom: {
        name: '全部会议室',
        id: ''
            },
            {
               date: getDate(new Date(), -2).fullDate,
               // info: '签到',
               data: {
                  custom: '自定义信息',
                  name: '自定义消息头'
      meetingList: [],
               }
            },
            {
               date: getDate(new Date(), -1).fullDate,
               info: '已打卡'
  onLoad() {
    this.currentDate = dayja().format('YYYY-MM-DD')
    this.initData()
    this.getRoomList()
  },
   onShow() {
      this.tabClick('0')
   },
  onReachBottom() {
    const { activeTab } = this
    if (activeTab == '0') {
      this.myPage = this.myPage + 1
      this.getDayMeeting()
    } else {
      this.recordPage = this.recordPage + 1
      this.getRecordList()
            }
         ]
      };
   },
   methods: {
      tabClick(val) {
         this.activeTab = val;
    initData() {
      // 当月数据
      monthMeetingPage({
        yearMonth: this.currentDate.slice(0, 7)
      }).then(res => {
        this.monthMark = res.data.filter(i => i.meetingNum > 0).map(j => {
          return {
            time: j.monthDate,
            pointText: j.meetingNum,
            pointTextColor: 'red'
          }
        })
      })
      },
      handleDetail(item) {
      getRoomList() {
      roomsListPost({}).then(res => {
        this.meetingList = [[{ id: '', name: '全部会议室' }, ...res.data]]
            console.log('meetingList', this.meetingList);
      })
    },
    tabClick(val) {
      this.activeTab = val
      if (val === '1') {
        this.recordPage = 1
        this.getRecordList()
      } else {
        this.myMeetingList = []
        this.activeRoom = {
          name: '全部会议室',
          id: ''
        }
        this.myPage = 1
        this.getDayMeeting()
      }
    },
    seletedStatus(e) {
         this.myMeetingList = []
      this.activeRoom = { ...e.value[0] }
      this.isShowStatus = false
      this.getDayMeeting()
    },
    handleDetail(id) {
         uni.navigateTo({
            // url: `/pages/staff/meetingDetail?id=${item.id}`,
            url: `/pages/staff/meetingDetail`
         });
        url: `/pages/staff/meetingDetail?id=${id}`,
        // url: `/pages/staff/meetingDetail`
      })
      },
      changeCalendar(e) {
         console.log(e);
      console.log(e)
      },
      // 点击某天
      dayChange(data) {
         console.log(data);
         let date = data.time;
         let yyyy = data.time.substring(0, 4);
         let mm = Number(data.time.substring(data.time.indexOf('-') + 1, data.time.lastIndexOf('-')));
         let dd = Number(data.time.substring(data.time.lastIndexOf('-') + 1, data.time.length));
         mm = mm < 10 ? `0${mm}` : mm;
         dd = dd < 10 ? `0${dd}` : dd;
         let riqi = `${yyyy}-${mm}-${dd}`;
         this.currentTime = riqi;
         this.list = [];
         this.next = false;
         this.page = 0;
         // this.getRoomList()
      let date = data.time
      let yyyy = data.time.substring(0, 4)
      let mm = Number(data.time.substring(data.time.indexOf('-') + 1, data.time.lastIndexOf('-')))
      let dd = Number(data.time.substring(data.time.lastIndexOf('-') + 1, data.time.length))
      mm = mm < 10 ? `0${mm}` : mm
      dd = dd < 10 ? `0${dd}` : dd
      let riqi = `${yyyy}-${mm}-${dd}`
      this.currentDate = riqi
      this.myMeetingList = []
      this.activeStatus = {
        name: '全部会议室',
        key: ''
      }
      this.myPage = 1
      this.getDayMeeting()
      },
      // 下一月
      monthChange(data) {
         let date = data.date.replace(/[/]/g, '-');
         let yyyy = date.substring(0, 4);
         let mm = Number(date.substring(date.indexOf('-') + 1, date.lastIndexOf('-')));
         let dd = Number(date.substring(date.lastIndexOf('-') + 1, date.length));
         mm = mm < 10 ? `0${mm}` : mm;
         dd = dd < 10 ? `0${dd}` : dd;
         let riqi = `${yyyy}-${mm}-${dd}`;
         console.log('日期', riqi);
         this.currentTime1 = riqi;
         // this.getDateNum()
      let date = data.date.replace(/[/]/g, '-')
      let yyyy = date.substring(0, 4)
      let mm = Number(date.substring(date.indexOf('-') + 1, date.lastIndexOf('-')))
      let dd = Number(date.substring(date.lastIndexOf('-') + 1, date.length))
      mm = mm < 10 ? `0${mm}` : mm
      dd = dd < 10 ? `0${dd}` : dd
      let riqi = `${yyyy}-${mm}-${dd}`
      console.log('日期', riqi)
      this.currentDate = riqi
      this.initData()
    },
    getRecordList() {
      const { activeStatus } = this
      myMeetingPage({
        capacity: 10,
        page: this.recordPage,
        model: {
          // status: activeStatus.key || null,
          // roomsId: this.roomId,
          queryType: 2
      }
      }).then(res => {
        this.recordList = [...this.recordList, ...res.data.records]
      })
    },
    getDayMeeting() {
      const { myPage, activeRoom, currentDate } = this
      // 当天我参与的会议
      myMeetingPage({
        model: {
          queryType: '1',
          roomsId: activeRoom.id,
          queryDate: currentDate
        },
        page: myPage,
        capacity: 10
      }).then(res => {
        this.myMeetingList = [ ...this.myMeetingList, ...res.data.records ]
      })
    },
   }
};
</script>
@@ -295,6 +433,7 @@
            padding: 0rpx 30rpx 30rpx;
            background: #ffffff;
            border-radius: 8rpx;
        margin-bottom: 24rpx;
            .head {
               display: flex;
               justify-content: space-between;
@@ -316,6 +455,14 @@
                  font-size: 22rpx;
                  color: #999999;
               }
          .padding {
            color: $uni-color-primary;
            border: 1rpx solid $uni-color-primary;
          }
          .red {
            color: #e23f29;
            border: 1rpx solid #e23f29;
          }
            }
            .line {
               display: flex;