jiangping
2024-06-07 73af3ed9fbcc616cdecc739fc4307163c19c5764
h5/pages/staff/meetingCalendar.vue
@@ -1,342 +1,489 @@
<template>
   <view class="main_app">
      <view class="tabs">
         <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')">
            <text class="name">预约记录</text>
            <view class="line"></view>
         </view>
      </view>
      <!--  -->
      <template v-if="activeTab == '0'">
         <!-- <uni-calendar @change="changeCalendar" :selected="selected" /> -->
         <!-- 日历 -->
         <view class="container_b">
            <Calendar
               ref="Calendar"
               :currentTime="currentTime1"
               :mark="mark"
               :showLunar="false"
               @dayChange="dayChange"
               @monthChange="monthChange"
               :rangeMode="false"
               :maskColor="'#ffffff'"
               :dateStart="dateStart"
               :dateEnd="dateEnd"
               :canDrag="false"
            ></Calendar>
         </view>
         <!--  -->
         <view class="card_list">
            <view class="card_title">
               <view class="name">
                  <view class="icon"></view>
                  <view class="text">今日会议</view>
               </view>
               <view class="meeting">
                  <view class="text mr24">全部会议室</view>
                  <u-icon name="arrow-down" size="12" color="#999999" />
               </view>
            </view>
            <view class="list">
               <view class="item">
                  <view class="head">
                     <view class="name">aaaaa选型</view>
                     <view class="status">即将开始</view>
                  </view>
                  <view class="line">
                     <view class="label">会议时间:</view>
                     <view class="value">12:00-12</view>
                  </view>
                  <view class="line">
                     <view class="label">会议室:</view>
                     <view class="value">202会议室</view>
                  </view>
                  <view class="line">
                     <view class="label">预约人:</view>
                     <view class="value">杨某某</view>
                  </view>
                  <view class="line">
                     <view class="label">备注:</view>
                     <view class="value">--</view>
                  </view>
               </view>
            </view>
         </view>
      </template>
      <!--  -->
      <template v-if="activeTab === '1'">
         <view class="card_list">
            <view class="list">
               <view class="item" @click="handleDetail()">
                  <view class="head">
                     <view class="name">aaaaa选型</view>
                     <view class="status">即将开始</view>
                  </view>
                  <view class="line">
                     <view class="label">会议时间:</view>
                     <view class="value">12:00-12</view>
                  </view>
                  <view class="line">
                     <view class="label">会议室:</view>
                     <view class="value">202会议室</view>
                  </view>
                  <view class="line">
                     <view class="label">预约人:</view>
                     <view class="value">杨某某</view>
                  </view>
                  <view class="line">
                     <view class="label">备注:</view>
                     <view class="value">--</view>
                  </view>
               </view>
            </view>
         </view>
      </template>
   </view>
  <view class="main_app">
    <view class="tabs">
      <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')"
      >
        <text class="name">预约记录</text>
        <view class="line"></view>
      </view>
    </view>
    <!--  -->
    <template v-if="activeTab == '0'">
      <!-- <uni-calendar @change="changeCalendar" :selected="selected" /> -->
      <!-- 日历 -->
      <view class="container_b">
        <Calendar
          ref="Calendar"
          :currentTime="currentDate"
          :mark="monthMark"
          :showLunar="false"
          @dayChange="dayChange"
          @monthChange="monthChange"
          :rangeMode="false"
          :maskColor="'#ffffff'"
          :dateStart="dateStart"
          :dateEnd="dateEnd"
          :canDrag="false"
        ></Calendar>
      </view>
      <!--  -->
      <view class="card_list">
        <view class="card_title">
          <view class="name">
            <view class="icon"></view>
            <view class="text">今日会议</view>
          </view>
          <view class="meeting">
            <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
            @click="handleDetail(item.id)"
            class="item"
            v-for="item in myMeetingList"
            :key="item.id"
          >
            <view class="head">
              <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">{{ item.meetingTime }}</view>
            </view>
            <view class="line">
              <view class="label">会议室:</view>
              <view class="value">{{ item.roomName }}</view>
            </view>
            <view class="line">
              <view class="label">预约人:</view>
              <view class="value">{{ item.bookingUser }}</view>
            </view>
            <view class="line">
              <view class="label">备注:</view>
              <view class="value">{{ item.remark || item.meetingRemark }}</view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <!--  -->
    <template v-if="activeTab === '1'">
      <view class="card_list">
        <view class="list">
          <view
            class="item"
            v-for="item in recordList"
            :key="item.id"
            @click="handleDetail(item.id)"
          >
            <view class="head">
              <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">{{ item.meetingTime }}</view>
            </view>
            <view class="line">
              <view class="label">会议室:</view>
              <view class="value">{{ item.roomName }}</view>
            </view>
            <view class="line">
              <view class="label">预约人:</view>
              <view class="value">{{ item.bookingUser }}</view>
            </view>
            <view class="line">
              <view class="label">备注:</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();
   }
   if (typeof date !== 'object') {
      date = date.replace(/-/g, '/');
   }
   const dd = new Date(date);
  if (!date) {
    date = new Date()
  }
  if (typeof date !== 'object') {
    date = date.replace(/-/g, '/')
  }
  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
   return {
      fullDate: y + '-' + m + '-' + d,
      year: y,
      month: m,
      date: d,
      day: dd.getDay()
   };
  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: {
      Calendar
  components: {
    Calendar
  },
  data() {
    return {
      activeTab: '0',
      recordList: [],
      recordPage: 1,
      myPage: 1,
      myMeetingList: [],
      currentDate: '',
      dateStart: '1999-05-01',
      dateEnd: '2999-06-15',
      monthMark: [],
      isShowStatus: false,
      activeRoom: {
        name: '全部会议室',
        id: ''
      },
      meetingList: [],
    }
  },
  onLoad() {
    this.currentDate = dayja().format('YYYY-MM-DD')
    this.initData()
    this.getRoomList()
  },
   onShow() {
      this.tabClick('0')
   },
   data() {
      return {
         activeTab: '0',
         currentTime1: '',
         dateStart: '1999-05-01',
         dateEnd: '2999-06-15',
         mark: [],
         selected: [
            {
               date: getDate(new Date(), -3).fullDate
               // info: '打卡'
            },
            {
               date: getDate(new Date(), -2).fullDate,
               // info: '签到',
               data: {
                  custom: '自定义信息',
                  name: '自定义消息头'
               }
            },
            {
               date: getDate(new Date(), -1).fullDate,
               info: '已打卡'
            }
         ]
      };
   },
   methods: {
      tabClick(val) {
         this.activeTab = val;
      },
      handleDetail(item) {
         uni.navigateTo({
            // url: `/pages/staff/meetingDetail?id=${item.id}`,
            url: `/pages/staff/meetingDetail`
         });
      },
      changeCalendar(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()
      },
      // 下一月
      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()
      }
   }
  onReachBottom() {
    const { activeTab } = this
    if (activeTab == '0') {
      this.myPage = this.myPage + 1
      this.getDayMeeting()
    } else {
      this.recordPage = this.recordPage + 1
      this.getRecordList()
    }
  },
  methods: {
    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'
          }
        })
      })
    },
      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=${id}`,
        // url: `/pages/staff/meetingDetail`
      })
    },
    changeCalendar(e) {
      console.log(e)
    },
    // 点击某天
    dayChange(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.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.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>
<style lang="scss">
page {
   background-color: #f7f7f7;
  background-color: #f7f7f7;
}
.main_app {
   padding: 0;
   background-color: #f7f7f7;
   ::v-deep .uni-calendar-item--checked {
      background-color: $uni-color-primary;
      border-radius: 8rpx;
   }
   ::v-deep .uni-calendar-item--isDay-text {
      color: $uni-color-primary;
   }
   ::v-deep .uni-calendar-item--isDay {
      background-color: $uni-color-primary;
      color: #fff;
      border-radius: 8rpx;
   }
   .tabs {
      display: flex;
      background-color: #fff;
      .tab {
         flex: 1;
         height: 88rpx;
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 28rpx;
         color: #666666;
         position: relative;
         .line {
            width: 60rpx;
            height: 4rpx;
            background: #fff;
            border-radius: 3rpx;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 0);
         }
      }
      .active {
         font-weight: 500;
         font-size: 30rpx;
         color: #222222;
         .line {
            background-color: $uni-color-primary;
         }
      }
   }
   //
   .card_list {
      padding: 30rpx;
      .card_title {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 22rpx;
         .name {
            display: flex;
            align-items: center;
            .icon {
               width: 6rpx;
               height: 32rpx;
               background: $uni-color-primary;
               border-radius: 4rpx;
               margin-right: 16rpx;
            }
            .text {
               font-weight: 600;
               font-size: 32rpx;
               color: #222222;
            }
         }
         .meeting {
            display: flex;
            height: 52rpx;
            line-height: 52rpx;
            background: #ffffff;
            border-radius: 26rpx;
            border: 2rpx solid #eeeeee;
            padding: 0 24rpx;
            .text {
               font-size: 24rpx;
               color: #333333;
            }
         }
      }
      .list {
         .item {
            padding: 0rpx 30rpx 30rpx;
            background: #ffffff;
            border-radius: 8rpx;
            .head {
               display: flex;
               justify-content: space-between;
               align-items: center;
               border-bottom: 1rpx solid #e5e5e5;
               padding: 22rpx 0;
               margin-bottom: 22rpx;
               .name {
                  font-weight: 600;
                  font-size: 32rpx;
                  color: #222222;
               }
               .status {
                  height: 38rpx;
                  line-height: 38rpx;
                  padding: 0 16rpx;
                  border-radius: 4rpx;
                  border: 1rpx solid #999999;
                  font-size: 22rpx;
                  color: #999999;
               }
            }
            .line {
               display: flex;
               margin-bottom: 12rpx;
               .label {
                  width: 140rpx;
                  color: #666666;
               }
               .value {
                  flex: 1;
               }
            }
         }
      }
   }
  padding: 0;
  background-color: #f7f7f7;
  ::v-deep .uni-calendar-item--checked {
    background-color: $uni-color-primary;
    border-radius: 8rpx;
  }
  ::v-deep .uni-calendar-item--isDay-text {
    color: $uni-color-primary;
  }
  ::v-deep .uni-calendar-item--isDay {
    background-color: $uni-color-primary;
    color: #fff;
    border-radius: 8rpx;
  }
  .tabs {
    display: flex;
    background-color: #fff;
    .tab {
      flex: 1;
      height: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #666666;
      position: relative;
      .line {
        width: 60rpx;
        height: 4rpx;
        background: #fff;
        border-radius: 3rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
      }
    }
    .active {
      font-weight: 500;
      font-size: 30rpx;
      color: #222222;
      .line {
        background-color: $uni-color-primary;
      }
    }
  }
  //
  .card_list {
    padding: 30rpx;
    .card_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22rpx;
      .name {
        display: flex;
        align-items: center;
        .icon {
          width: 6rpx;
          height: 32rpx;
          background: $uni-color-primary;
          border-radius: 4rpx;
          margin-right: 16rpx;
        }
        .text {
          font-weight: 600;
          font-size: 32rpx;
          color: #222222;
        }
      }
      .meeting {
        display: flex;
        height: 52rpx;
        line-height: 52rpx;
        background: #ffffff;
        border-radius: 26rpx;
        border: 2rpx solid #eeeeee;
        padding: 0 24rpx;
        .text {
          font-size: 24rpx;
          color: #333333;
        }
      }
    }
    .list {
      .item {
        padding: 0rpx 30rpx 30rpx;
        background: #ffffff;
        border-radius: 8rpx;
        margin-bottom: 24rpx;
        .head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1rpx solid #e5e5e5;
          padding: 22rpx 0;
          margin-bottom: 22rpx;
          .name {
            font-weight: 600;
            font-size: 32rpx;
            color: #222222;
          }
          .status {
            height: 38rpx;
            line-height: 38rpx;
            padding: 0 16rpx;
            border-radius: 4rpx;
            border: 1rpx solid #999999;
            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;
          margin-bottom: 12rpx;
          .label {
            width: 140rpx;
            color: #666666;
          }
          .value {
            flex: 1;
          }
        }
      }
    }
  }
}
.container_b {
   width: 100%;
   padding: 30rpx;
   background: #ffffff;
   padding-top: 20rpx;
   box-sizing: border-box;
  width: 100%;
  padding: 30rpx;
  background: #ffffff;
  padding-top: 20rpx;
  box-sizing: border-box;
}
</style>