会议列表.png

import { getCurrentWeeks, getCurrentWeeksNum, getMtInfoByDate, getMtrmDetails, stopUse } from '../../utils/apis/meetRoomApi'

import { formateDate, getWeekNum, getWeekDay } from '../../utils/publicFun'

export default {

name: 'meetRoom',

data () {

return {

choseDate: '',

pickerDate: '',

singleWidth: 0,

showDetailWin: false,

totalWidth: 0,

weekInfo: {

weekDay: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],

weeKMD: [],

weekYMD: [],

weekNum: 0,

currentWeekDay: '',

currentYear: ''

},

timeLine: [],

mtrmData: [],

currentMtItemId: ''

}

},

created () {

this.getWeekData()

},

mounted () {

this.createTimeLine()

},

methods: {

getWeekData () {

getCurrentWeeks().then(res => {

if (res.status === 200) {

this.setWeekData(res)

}

})

},

getWeekDateByNum (weekNum) {

getCurrentWeeksNum({

weekNum: weekNum

}).then(res => {

if (res.status === 200) {

this.setWeekData(res)

}

})

},

setWeekData (res) {

this.weekInfo.weeKMD = res.data.weekMD

this.weekInfo.weekYMD = res.data.weekYmd

this.weekInfo.weekNum = res.data.weekNum

this.weekInfo.currentWeekDay = res.data.weekDay

this.weekInfo.currentYear = res.data.year

for (let i = 0; i < this.weekInfo.weekDay.length; i++) {

if (this.weekInfo.weekDay[i] === this.weekInfo.currentWeekDay) {

this.choseDate = this.weekInfo.weekYMD[i]

}

}

this.getMtrmWork()

},

createTimeLine () {

for (let i = 0; i < 25; i++) {

if (i < 10) {

this.timeLine.push('0' + i + ':00')

} else {

this.timeLine.push(i + ':00')

}

}

this.totalWidth = this.$refs.totalWidth.offsetWidth

this.singleWidth = this.totalWidth / (this.timeLine.length - 1)

},

// 切换周数

changeWeekNum (method) {

if (method === 1) {

this.weekInfo.weekNum = this.weekInfo.weekNum - 1

} else {

this.weekInfo.weekNum = this.weekInfo.weekNum + 1

}

this.getWeekDateByNum(this.weekInfo.weekNum)

},

// 根据日期拿取会议室数据

getMtrmWork () {

getMtInfoByDate({

creatorName: '',

time: this.choseDate

}).then(res => {

if (res.status === 200) {

for (let i in res.data) {

for (let j in res.data[i].meetingWorks) {

res.data[i].meetingWorks[j].startDis = this.getHourDis(this.choseDate + ' 00:00:00', res.data[i].meetingWorks[j].startTime)

res.data[i].meetingWorks[j].mtLemgth = this.getHourDis(res.data[i].meetingWorks[j].startTime, res.data[i].meetingWorks[j].endTime)

}

}

this.mtrmData = res.data

}

})

},

getHourDis (start, end) {

let timeDis = new Date(end).getTime() - new Date(start).getTime()

return timeDis / 3600 / 1000

},

showDetail (item, meItem) {

this.currentMtItemId = meItem.mrCode

getMtrmDetails({

id: item.id

}).then(res => {

if (res.data.code === 200) {

this.showDetailWin = true

} else {

this.$message({

message: res.data.message,

type: 'error'

})

}

})

},

getTodayData (item, weekDay) {

this.choseDate = item

this.weekInfo.currentWeekDay = weekDay

this.getMtrmWork()

},

stopUseMeeting () {

stopUse({

id: this.currentMtItemId

}).then(res => {

if (res.data.code === 200) {

this.showDetailWin = false

this.$message({

message: '操作成功',

type: 'success'

})

this.getMtrmWork()

} else {

this.showDetailWin = false

this.$message({

message: res.data.message,

type: 'fail'

})

}

}).catch(res => {

this.$message({

message: '操作失败',

type: 'fail'

})

})

},

closeModal () {

this.showDetailWin = false

}

},

watch: {

pickerDate: function (res) {

getCurrentWeeksNum({

weekNum: getWeekNum(res)

}).then(res1 => {

if (res1.status === 200) {

this.weekInfo.weeKMD = res1.data.weekMD

this.weekInfo.weekNum = res1.data.weekNum

this.choseDate = formateDate(res, 'Y-m-d')

this.weekInfo.currentWeekDay = getWeekDay(res)

this.getMtrmWork()

}

})

}

}

}

#sys-mtroom {

height: 100%;

.lengeds {

text-align: right;

margin-top: 15px;

.lenged {

width: 11px;

height: 13px;

display: inline-block;

margin: 0px 5px;

position: relative;

bottom: -1px;

}

}

.mtr-finshed {

background: #b3b3b3;

border-left: solid 1px #b3b3b3;

border-right: solid 1px #b3b3b3;

}

.mtr-using {

background: #ff8c01;

border-left: solid 1px #ff8c01;

border-right: solid 1px #ff8c01;

}

.mtr-await {

background: #4bb994;

border-left: solid 1px #4bb994;

border-right: solid 1px #4bb994;

}

.right-btn {

font-size: 16px;

margin-left: 15px;

font-weight: bold;

position: relative;

top: 5px;

}

.date-list {

position: relative;

width: 95%;

margin: 0px auto;

height: 50px;

table {

width: calc(100% - 60px);

margin: 0px auto;

text-align: center;

border: 1px solid #e9eaee;

height: 52px;

cursor: pointer;

td:nth-child(2n) {

background: #f3f6fb;

}

.date-active {

background: #24b4ce !important;

color: #fff;

}

}

}

.time-list {

border-top: 1px solid #e9eaee;

border-left: 1px solid #e9eaee;

height: 20px;

width: calc(95% - 60px);

margin: 15px auto;

table-layout: fixed;

.hours-point {

height: 18px;

border-right: 1px solid #e9eaee;

position: relative;

span {

position: absolute;

bottom: -20px;

left: -20px;

}

.minte-point {

width: 100%;

table-layout: fixed;

td {

height: 10px;

border-right: 1px solid #e9eaee;

}

td:nth-child(4) {

border: none;

}

}

}

}

.mtrm-data-list {

margin: 10px auto;

width: calc(95% - 56px);

border-top: 1px solid #e9eaee;

border-left: 1px solid #e9eaee;

table-layout: fixed;

overflow-x: hidden;

tr:nth-child(2n) {

background: #f3f6fb;

.mtrm-name {

background: #1c93a7;

}

}

td {

height: 130px;

position: relative;

border-right: 1px solid #e9eaee;

border-bottom: 1px solid #e9eaee;

cursor: pointer;

.mtrm-name {

position: absolute;

width: 20px;

height: 130px;

left: -38px;

text-align: center;

top: 0px;

display: table;

padding: 0px 8px;

background: #24b4ce;

color: #fff;

z-index: 99;

div {

vertical-align: middle;

display: table-cell;

span {

display: inline-block;

width: 20px;

overflow: hidden;

}

}

}

.overPal {

width: 90%;

overflow: hidden;

text-overflow: ellipsis;

// white-space: nowrap;

}

.moz{

display: -webkit-box;

-webkit-line-clamp: 2; //设置显示3行

-webkit-box-orient: vertical;

overflow: hidden;

text-overflow: ellipsis;

}

.mtrm-box {

position: absolute;

top: 0px;

left: 0px;

height: 100%;

width: 100%;

z-index: 9;

color: #fff;

text-align: center;

box-sizing: border-box;

overflow: hidden;

table {

height: 100%;

width: calc(100% + 2px);

vertical-align: middle;

border: none;

}

}

.mtrm-box:hover {

box-shadow: 0px 0px 4px #fff;

opacity: 0.9;

}

}

}

.left-btn-icon,

.right-btn-icon {

top: 0px;

position: absolute;

height: 50px;

width: 20px;

border: 1px solid #e9eaee;

cursor: pointer;

color: #B3B3B3;

text-align: center;

line-height: 50px;

}

.p-modal-table td {

height: 30px;

}

}