''

liukangdong

2024-06-04 356fbaf0baa43b22113ddcf40345e459bee0c2fb

 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,48 +45,36 @@
                  <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 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" v-for="item in recordList" :key="item.id" @click="handleDetail(item.id)">

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

@@ -94,40 +90,96 @@
                  </view>

                  <view class="line">

                     <view class="label">备注：</view>

                     <view class="value">{{ item.remark }}</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 { myMeetingPage } from '@/api'

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

@@ -138,79 +190,122 @@
         activeTab: '0',

         recordList: [],

         recordPage: 1,

         currentTime1: '',

      myPage: 1,

      myMeetingList: [],

      currentDate: '',

         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: '已打卡'

            }

         ],

      monthMark: [],



      };

      isShowStatus: false,

      activeRoom: {

        name: '全部会议室',

        id: ''

      },

      meetingList: [],



    }

  },

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

    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;

      this.activeTab = val

         if(val === '1'){

        this.recordPage = 1

            this.getRecordList()

         }else{

            this.getList()

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

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

      },

      getList(){},

      getRecordList() {

         const { activeStatus } = this

      myMeetingPage({

@@ -222,7 +317,22 @@
          queryType: 2

        }

      }).then(res => {

            this.recordList = res.data.records

        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 ]

         })

    },

   }