<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="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 v-if="myMeetingList.length === 0" style="text-align: center">
|
<image
|
src="@/static/empty.png"
|
style="width: 320rpx; margin: 60rpx auto 0"
|
mode="widthFix"
|
/>
|
<view class="placeholder9 fs24">暂无数据</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 v-if="recordList.length === 0" style="text-align: center">
|
<image
|
src="@/static/empty.png"
|
style="width: 320rpx; margin: 120rpx auto 0"
|
mode="widthFix"
|
/>
|
<view class="placeholder9 fs24">暂无数据</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 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: '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')
|
},
|
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: '#fff'
|
}
|
})
|
})
|
},
|
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.recordList = []
|
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.myPage = 1
|
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;
|
}
|
.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: 600;
|
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;
|
flex: 1;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.status {
|
height: 38rpx;
|
line-height: 38rpx;
|
padding: 0 16rpx;
|
border-radius: 4rpx;
|
border: 1rpx solid #999999;
|
font-size: 22rpx;
|
color: #999999;
|
margin-left: 20rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.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;
|
}
|
</style>
|
