mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-08-08 08:22:46 +08:00
516 lines
15 KiB
Vue
516 lines
15 KiB
Vue
<template>
|
||
|
||
<a-card :bordered='false'>
|
||
<a-card :bordered='false' v-if='showDepForm'>
|
||
<a-form :form='form'>
|
||
<a-row>
|
||
<a-col :span='10'>
|
||
<a-form-item label='单位帐号' :labelCol='labelCol' :wrapperCol='wrapperCol'>
|
||
<a-input placeholder='请输入单位帐号'
|
||
v-decorator="['loginName',{rules: [{ required: true, message: '输入单位帐号' }]}]" />
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span='10'>
|
||
<a-form-item label='单位密码' :labelCol='labelCol' :wrapperCol='wrapperCol'>
|
||
<a-input type='password' placeholder='请输入单位密码'
|
||
v-decorator="['password',{rules: [{ required: true, message: '输入单位密码' }]}]" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span='10'>
|
||
<a-form-model-item :wrapper-col='{ span: 14, offset: 8 }'>
|
||
<a-button type='primary' @click='getDepInfo'>
|
||
认证
|
||
</a-button>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</a-card>
|
||
<div class='table-page-search-wrapper' v-if='!showDepForm'>
|
||
<a-form layout='inline'>
|
||
<a-row :gutter='48'>
|
||
<a-col :md='5' :sm='15'>
|
||
<a-form-item label='预约时间'>
|
||
<a-date-picker :default-value='nowDate' @change='chooseDate' :disabled-date='disabledDate' />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md='5' :sm='15'>
|
||
<a-form-item label='所在楼层'>
|
||
<a-select v-model='queryParam.typeName'>
|
||
<a-select-option v-for='item in typeList' :value='item.value'>
|
||
{{ item.text }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md='5' :sm='15'>
|
||
<a-form-item label='排列形状'>
|
||
<a-select v-model='queryParam.shape' placeholder='请选择排列形状'>
|
||
<a-select-option v-for='item in shapeList' :value='item.value'>
|
||
{{ item.text }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md='5' :sm='15'>
|
||
<a-form-item label='容纳人数'>
|
||
<a-select v-model='queryParam.capacityNum' placeholder='请选择范围'>
|
||
<a-select-option value=''>
|
||
全部
|
||
</a-select-option>
|
||
<a-select-option value='1'>
|
||
0-20
|
||
</a-select-option>
|
||
<a-select-option value='2'>
|
||
21-50
|
||
</a-select-option>
|
||
<a-select-option value='3'>
|
||
51-100
|
||
</a-select-option>
|
||
<a-select-option value='4'>
|
||
100以上
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md='5' :sm='15'>
|
||
<a-form-item label='设备'>
|
||
<a-select v-model='queryParam.devices' mode="multiple" placeholder='请选择设备'>
|
||
<a-select-option v-for='item in itemList' :value='item.value'>
|
||
{{ item.text }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md='5' :sm='15' v-if='isAdmin'>
|
||
<a-form-item label='会议室状态'>
|
||
<a-select v-model='queryParam.type' placeholder='请选择状态'>
|
||
<a-select-option value=''>
|
||
全部
|
||
</a-select-option>
|
||
<a-select-option value='already'>
|
||
已预约
|
||
</a-select-option>
|
||
<a-select-option value='without'>
|
||
未预约
|
||
</a-select-option>
|
||
<a-select-option value='going'>
|
||
开会中
|
||
</a-select-option>
|
||
<a-select-option value='free'>
|
||
空闲
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md='8' :sm='24'>
|
||
<span class='table-page-search-submitButtons'>
|
||
<a-button type='primary' @click='getAllRoomList'>查询会议室</a-button>
|
||
<!-- <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>-->
|
||
</span>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
<div class='room'>
|
||
<div class='roomItem' v-for='item in roomList'>
|
||
<div class='title'>
|
||
{{ item.name }}
|
||
</div>
|
||
<div class='nav'>
|
||
<div class='nav-item' v-for='room in item.list' :key='room.id'>
|
||
<div class='desc'>
|
||
{{ room.name }}
|
||
</div>
|
||
<div class='am' v-if='room.am == 0' @click='goOrder(room.id, 1, room.am)'>上午</div>
|
||
<div class='am disabled' v-if='room.am == 1' @click='goOrder(room.id, 1, room.am)'>上午</div>
|
||
<div class='pm' v-if='room.pm == 0' @click='goOrder(room.id, 2, room.pm)'>下午</div>
|
||
<div class='pm disabled' v-if='room.pm == 1' @click='goOrder(room.id, 2, room.pm)'>下午</div>
|
||
<div class='night' v-if='room.night == 0' @click='goOrder(room.id, 3, room.night)'>晚上</div>
|
||
<div class='night disabled' v-if='room.night == 1' @click='goOrder(room.id, 3, room.night)'>晚上</div>
|
||
<div class='desc-item'>
|
||
{{ room.capacityNum }}人 {{ room.typeName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template v-if='Object.keys(roomList).length === 0'>
|
||
<a-empty />
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<RoomOrder-modal ref='modal' @ok='handleOk' />
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAllRoom, depLogin, getOrderInfo } from '@/api/admin/meeting/meetingReservation'
|
||
import { getMeetingDict, saveRoomContent } from '@/api/admin/meeting/roomContent'
|
||
|
||
import moment from 'moment'
|
||
import RoomOrderModal from '@/views/admin/meeting/modules/RoomOrderModal.vue'
|
||
import { checkPermission } from '@/utils/permissions'
|
||
import storage from 'store'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
import pick from 'lodash.pick'
|
||
|
||
export default {
|
||
name: 'MeetingMangerList',
|
||
components: { RoomOrderModal },
|
||
data() {
|
||
return {
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 8 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 35 },
|
||
sm: { span: 16 }
|
||
},
|
||
form: this.$form.createForm(this),
|
||
nowDate: moment().format('YYYY-MM-DD'), // 当前日期
|
||
mdl: {},
|
||
// 高级搜索 展开/关闭
|
||
advanced: false,
|
||
// 查询参数
|
||
queryParam: {
|
||
meetingName: '',
|
||
typeName: '',
|
||
shape: '',
|
||
capacityNum: '',
|
||
devices: [],
|
||
type: ''
|
||
},
|
||
capacityList: [],
|
||
shapeList: [],
|
||
typeList: [],
|
||
roomList: {
|
||
'1F': [] // 给个空值，避免进来就提示没数据
|
||
},
|
||
itemList: [],
|
||
showDepForm: true,
|
||
depId: '',
|
||
dep: '',
|
||
rId: '', // 预约id，不为空，则为编辑
|
||
isAdmin: checkPermission('meeting:admin')
|
||
}
|
||
},
|
||
created() {
|
||
|
||
},
|
||
mounted() {
|
||
let rId = this.$route.query.rId
|
||
if (rId) {
|
||
this.rId = rId
|
||
// 获取信息
|
||
getOrderInfo({ id: rId }).then(res => {
|
||
if (res.code == 0) {
|
||
this.depId = res.mr.userOrgId
|
||
this.dep = res.mr.userOrg
|
||
this.showDepForm = false
|
||
} else {
|
||
// 查询错误
|
||
this.rId = ''
|
||
}
|
||
})
|
||
} else {
|
||
// 为新增
|
||
if (this.depId != '') {
|
||
this.showDepForm = false
|
||
}
|
||
this.mdl = {
|
||
loginName: storage.get('DEP_USERNAME'),
|
||
password: storage.get('DEP_PWD')
|
||
}
|
||
this.$nextTick(() => {
|
||
this.form.setFieldsValue(
|
||
pick(
|
||
this.mdl,
|
||
'loginName',
|
||
'password',
|
||
)
|
||
)
|
||
})
|
||
}
|
||
// 会议管理员，不需要认证
|
||
if (this.isAdmin) {
|
||
this.showDepForm = false
|
||
// 管理员可能存在统计
|
||
let type = this.$route.query.type || ''
|
||
let chooseDate = this.$route.query.date || this.nowDate
|
||
this.queryParam.type = type
|
||
this.nowDate = chooseDate
|
||
}
|
||
this.getDict()
|
||
this.getAllRoomList()
|
||
},
|
||
methods: {
|
||
chooseDate(date, dateString) {
|
||
this.nowDate = dateString
|
||
},
|
||
disabledDate(current) {
|
||
if (this.isAdmin) {
|
||
// 管理员可以选择一年后的
|
||
return current < moment().startOf('day') || current > moment().add(1, 'year')
|
||
} else {
|
||
// 普通人员只能选择14天后
|
||
return current < moment().startOf('day') || current > moment().add(14, 'days')
|
||
}
|
||
},
|
||
// 获取查询参数
|
||
getDict() {
|
||
getMeetingDict().then((res) => {
|
||
// 楼层
|
||
let _typeList = []
|
||
let dataObj = res.data
|
||
for (let key in dataObj.floors) {
|
||
let eachObj = dataObj.floors[key]
|
||
const keys = Object.keys(eachObj)
|
||
_typeList.push({
|
||
text: keys[0],
|
||
value: keys[0]
|
||
})
|
||
}
|
||
_typeList = [{
|
||
text: '全部',
|
||
value: ''
|
||
}, ..._typeList]
|
||
this.typeList = _typeList
|
||
|
||
// 形状
|
||
let _shapeList = []
|
||
for (let key in dataObj.types) {
|
||
let eachObj = dataObj.types[key]
|
||
const keys = Object.keys(eachObj)
|
||
_shapeList.push({
|
||
text: keys[0],
|
||
value: keys[0]
|
||
})
|
||
}
|
||
_shapeList = [{
|
||
text: '全部',
|
||
value: ''
|
||
}, ..._shapeList]
|
||
this.shapeList = _shapeList
|
||
|
||
|
||
// 形状
|
||
let _itemList = []
|
||
for (let key in dataObj.devices) {
|
||
let eachObj = dataObj.devices[key]
|
||
const keys = Object.keys(eachObj)
|
||
_itemList.push({
|
||
text: keys[0],
|
||
value: keys[0]
|
||
})
|
||
}
|
||
// _itemList = [{
|
||
// text: '全部',
|
||
// value: ''
|
||
// }, ..._itemList]
|
||
this.itemList = _itemList
|
||
})
|
||
},
|
||
reset() {
|
||
this.queryParam = {
|
||
meetingName: '',
|
||
typeName: '',
|
||
shape: '',
|
||
capacityNum: '',
|
||
devices: [],
|
||
type: ''
|
||
}
|
||
this.getAllRoomList()
|
||
},
|
||
getAllRoomList() {
|
||
let minPerNum = 0
|
||
let maxPerNum = 1000
|
||
let perNumValue = this.queryParam.capacityNum
|
||
if (perNumValue == 1) {
|
||
// 1-20
|
||
maxPerNum = 20
|
||
minPerNum = 1
|
||
} else if (perNumValue == 2) {
|
||
// 21-50
|
||
minPerNum = 21
|
||
maxPerNum = 50
|
||
} else if (perNumValue == 3) {
|
||
// 51-100
|
||
minPerNum = 51
|
||
maxPerNum = 100
|
||
} else if (perNumValue == 4) {
|
||
// 51-100
|
||
minPerNum = 101
|
||
maxPerNum = 1000
|
||
} else {
|
||
// 全部
|
||
minPerNum = 1
|
||
maxPerNum = 1000
|
||
}
|
||
let param = {
|
||
floor: this.queryParam.typeName, // 楼层
|
||
min: minPerNum, // 最小容纳人数
|
||
max: maxPerNum, // 最大容纳人数
|
||
devices: this.queryParam.devices, // 设备
|
||
typeName: this.queryParam.shape, // 形状
|
||
type: this.queryParam.type, // 状态
|
||
timeFormat: 1, // 预约时间格式：0 任意时间（管理员），1上午，2下午，3晚上 4 全天。值为0时，读取startTime和endTime为预约会议时间范围；其他值读取mrdate，再拼接时间为预约会议时间范围。返回值为1时；读取 am，上午 0可预约 1不可预约 pm，下午 0可预约 1不可预约 night，晚上 0可预约 1不可预约，这里默认全部为1
|
||
mrdate: this.nowDate
|
||
}
|
||
|
||
getAllRoom(param).then(res => {
|
||
const roomArr = {}
|
||
const valueObj = res.data
|
||
// eslint-disable-next-line no-unused-vars
|
||
for (const key in valueObj) {
|
||
|
||
const eachObj = valueObj[key]
|
||
|
||
if (eachObj['floorId'] in roomArr) {
|
||
} else {
|
||
roomArr[eachObj['floorId']] = {
|
||
name: eachObj['floor'],
|
||
list: []
|
||
}
|
||
}
|
||
// if (this.isAdmin) {
|
||
// // 所有都可以选
|
||
// eachObj.am = 0
|
||
// eachObj.pm = 0
|
||
// eachObj.night = 0
|
||
// }
|
||
roomArr[eachObj['floorId']]['list'].push(eachObj)
|
||
}
|
||
this.roomList = roomArr
|
||
console.log('room', this.roomList)
|
||
})
|
||
},
|
||
getDepInfo(e) {
|
||
e.preventDefault()
|
||
this.form.validateFields((err, values) => {
|
||
if (!err) {
|
||
depLogin(values)
|
||
.then((res) => {
|
||
if (res.code === 0) {
|
||
storage.set('DEP_USERNAME', values.loginName, 365 * 24 * 60 * 60 * 1000) // 365天保存
|
||
storage.set('DEP_PWD', values.password, 365 * 24 * 60 * 60 * 1000) // 365天保存
|
||
this.depId = res.data.orgId
|
||
this.dep = res.data.orgName
|
||
this.$message.success(this.dep + '，欢迎您！')
|
||
this.showDepForm = false
|
||
} else {
|
||
// 认证错误，此时去掉
|
||
storage.remove('DEP_USERNAME')
|
||
storage.remove('DEP_PWD')
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.$message.error('系统错误，请稍后再试')
|
||
})
|
||
.finally(() => {
|
||
})
|
||
}
|
||
})
|
||
},
|
||
goOrder(id, timeRange, status) {
|
||
if (this.isAdmin) {
|
||
// 管理员任意选择时间
|
||
timeRange = 4
|
||
status = 0
|
||
}
|
||
let data = {
|
||
date: this.nowDate,
|
||
timeRange: timeRange,
|
||
status: status,
|
||
id: id,
|
||
dep: this.dep,
|
||
depId: this.depId
|
||
}
|
||
if (this.rId != '') {
|
||
data.rId = this.rId
|
||
data.act = 1 // 重新选择时间、会议室
|
||
this.handleEdit(data)
|
||
} else {
|
||
this.handleAdd(data)
|
||
}
|
||
},
|
||
handleAdd(data) {
|
||
this.$refs.modal.add(data)
|
||
},
|
||
handleEdit(data) {
|
||
this.$refs.modal.edit(data)
|
||
},
|
||
handleOk() {
|
||
// 跳转到预约列表
|
||
this.$router.push({ name: 'reservation' })
|
||
// this.getAllRoomList()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.room {
|
||
border-top: 1px solid rgb(221 215 215 / 65%);
|
||
}
|
||
|
||
.room .title {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.roomItem {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.roomItem .desc {
|
||
width: 150px;
|
||
height: 30px;
|
||
//background-color: #A3CDFF; //border-radius: 10px 10px 0 0px; line-height: 30px; text-align: center; font-size: 20px; margin-top: 20px; font-weight: 700;
|
||
}
|
||
|
||
.roomItem .am, .roomItem .pm, .roomItem .night {
|
||
width: 150px;
|
||
height: 30px;
|
||
background-color: #A3CDFF;
|
||
//border-radius: 10px 10px 0 0px; line-height: 30px; text-align: center; font-size: 16px; margin-top: 2px; cursor: pointer;
|
||
}
|
||
|
||
.roomItem .disabled {
|
||
background-color: #F2F2F2 !important;
|
||
}
|
||
|
||
.roomItem .desc-item {
|
||
width: 150px;
|
||
height: 30px;
|
||
background-color: #D8E9FC;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.desc-item .num {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.desc-item .shape {
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.disabled {
|
||
background-color: #F2F2F2 !important;
|
||
}
|
||
|
||
.nav {
|
||
display: flex;
|
||
}
|
||
|
||
.nav-item {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
</style> |