| | |
| | | <template>
|
| | | <view class="main_app">
|
| | | <!-- -->
|
| | | <!-- <uni-calendar @change="changeCalendar" :selected="selected" /> -->
|
| | | <!-- 日历 -->
|
| | | <view class="container_b">
|
| | | <Calendar
|
| | | ref="Calendar"
|
| | | :currentTime="currentDate"
|
| | | :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" @click="isShowStatus = true">
|
| | | <view class="text mr24">{{ activeStatus.name }}</view>
|
| | | <u-icon name="arrow-down" size="12" color="#999999" />
|
| | | </view>
|
| | | <template>
|
| | | <!-- <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="list">
|
| | | <view class="item">
|
| | | <view class="head">
|
| | | <view class="name">aaaaa选型</view>
|
| | | <view class="status">即将开始</view>
|
| | | <!-- -->
|
| | | <view class="card_list">
|
| | | <view class="card_title">
|
| | | <view class="name">
|
| | | <view class="icon"></view>
|
| | | <view class="text">今日会议</view>
|
| | | </view>
|
| | | <view class="line">
|
| | | <view class="label">会议时间:</view>
|
| | | <view class="value">12:00-12</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 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 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>
|
| | | </view>
|
| | |
|
| | | </template>
|
| | | <!-- -->
|
| | | <u-picker
|
| | | <u-picker
|
| | | keyName="name"
|
| | | :show="isShowStatus"
|
| | | :columns="statusList"
|
| | | :columns="meetingList"
|
| | | @confirm="seletedStatus"
|
| | | @cancel="isShowStatus = false"
|
| | | ></u-picker>
|
| | |
| | |
|
| | | <script>
|
| | | import Calendar from '@/components/Li-Calendar/Li-Calendar.vue'
|
| | | import dayjs from 'dayjs'
|
| | | import { myMeetingPage } from '@/api'
|
| | | 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)
|
| | |
|
| | | 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()
|
| | | }
|
| | | }
|
| | | export default {
|
| | | components: {
|
| | | Calendar
|
| | | },
|
| | | data() {
|
| | | return {
|
| | | activeTab: '0',
|
| | | recordList: [],
|
| | | recordPage: 1,
|
| | | myPage: 1,
|
| | | myMeetingList: [],
|
| | | currentDate: '',
|
| | | dateStart: '2024-01-01',
|
| | | dateStart: '1999-05-01',
|
| | | dateEnd: '2999-06-15',
|
| | | mark: [
|
| | | {
|
| | | time: '2024-05-30'
|
| | | },
|
| | | {
|
| | | time: '2024-05-22',
|
| | | pointText: 'aaa',
|
| | | pointTextColor: '#fff'
|
| | | },
|
| | | {
|
| | | time: '2024-05-28',
|
| | | text: ['111','222'],
|
| | | pointTextColor: '#fff'
|
| | | }
|
| | | ],
|
| | | activeStatus: {
|
| | | name: '全部会议室'
|
| | | },
|
| | | isShowStatus: false,
|
| | | statusList: [[
|
| | | { name: '全部会议室', key: '' },
|
| | | { name: '未开始', key: '1' },
|
| | | { name: '已结束', key: '2' },
|
| | | ]],
|
| | | dataList: [],
|
| | | page: 1
|
| | | monthMark: [],
|
| | |
|
| | | isShowStatus: false,
|
| | | activeRoom: {
|
| | | name: '全部会议室',
|
| | | id: ''
|
| | | },
|
| | | meetingList: [],
|
| | |
|
| | | }
|
| | | },
|
| | | onLoad() {
|
| | | this.currentDate = dayjs().format('YYYY-MM-DD')
|
| | | this.getList()
|
| | | this.currentDate = dayja().format('YYYY-MM-DD')
|
| | | this.initData()
|
| | | this.getRoomList()
|
| | | },
|
| | | onShow() {
|
| | | this.myPage = 1
|
| | | this.myMeetingList = []
|
| | | this.getDayMeeting()
|
| | | },
|
| | | onReachBottom() {
|
| | | this.myPage = this.myPage + 1
|
| | | this.getDayMeeting()
|
| | | },
|
| | | methods: {
|
| | | getList() {
|
| | | const { activeStatus } = this
|
| | | myMeetingPage({
|
| | | capacity: 10,
|
| | | page: this.page,
|
| | | model: {
|
| | | queryDate: this.currentDate,
|
| | | status: activeStatus.key || null,
|
| | | // roomsId: this.roomId,
|
| | | queryType: 1
|
| | | }
|
| | | initData() {
|
| | | // 当月数据
|
| | | monthMeetingPage({
|
| | | yearMonth: this.currentDate.slice(0, 7)
|
| | | }).then(res => {
|
| | | this.dataList = res.data.records
|
| | | })
|
| | | 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);
|
| | | })
|
| | | },
|
| | | 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) {
|
| | |
| | | },
|
| | | // 点击某天
|
| | | 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('-')))
|
| | |
| | | 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()
|
| | | this.currentDate = riqi
|
| | | this.myMeetingList = []
|
| | | this.activeStatus = {
|
| | | name: '全部会议室',
|
| | | key: ''
|
| | | }
|
| | | this.myPage = 1
|
| | | this.getDayMeeting()
|
| | | },
|
| | | // 下一月
|
| | | monthChange(data) {
|
| | |
| | | dd = dd < 10 ? `0${dd}` : dd
|
| | | let riqi = `${yyyy}-${mm}-${dd}`
|
| | | console.log('日期', riqi)
|
| | | this.currentTime1 = riqi
|
| | | // this.getDateNum()
|
| | | this.currentDate = riqi
|
| | | this.initData()
|
| | | },
|
| | | seletedStatus(e) {
|
| | | this.activeStatus = { ...e.value[0] }
|
| | | this.isShowStatus = false
|
| | | this.getList()
|
| | | },
|
| | |
|
| | | 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>
|
| | |
| | | ::v-deep .uni-calendar-item--isDay-text {
|
| | | color: $uni-color-primary;
|
| | | }
|
| | | ::v-deep .calendar-point {
|
| | | /* background-color: $uni-color-primary; */
|
| | | }
|
| | | |
| | | ::v-deep .uni-calendar-item--isDay {
|
| | | background-color: $uni-color-primary;
|
| | | color: #fff;
|
| | |
| | | padding: 0rpx 30rpx 30rpx;
|
| | | background: #ffffff;
|
| | | border-radius: 8rpx;
|
| | | margin-bottom: 24rpx;
|
| | | .head {
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | |
| | | 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;
|