调整预约列表、会议室列表

This commit is contained in:
471615499@qq.com 2024-10-21 22:12:45 +08:00
parent d576ad8a56
commit e857ba49d9
3 changed files with 297 additions and 272 deletions

View File

@ -86,3 +86,39 @@ export function millsToTime (mills) {
const year = month / 12 const year = month / 12
return year.toFixed(0) + ' 年' return year.toFixed(0) + ' 年'
}; };
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
//返回 例 2017-12-12
export function selfFormatTimeYMD(time) {
if (typeof time === "string" && time.includes('-')) {
time = time.replaceAll('-', '/')
}
let date = new Date(time)
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
return [year, month, day].map(formatNumber).join('-')
}
//返回 12:30
export function selfFormatTimeHM(time) {
if (typeof time === "string" && time.includes('-')) {
time = time.replaceAll('-', '/')
}
let date = new Date(time);
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
return [hour, minute].map(formatNumber).join(':')
}

View File

@ -3,61 +3,54 @@
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<a-form layout="inline"> <a-form layout="inline">
<a-row :gutter="48"> <a-row :gutter="48">
<a-col :md='5' :sm='15'>
<a-form-item label='预约时间'>
<a-col :md="5" :sm="15"> <a-date-picker :default-value='nowDate' @change="chooseDate" :disabled-date="disabledDate" />
<a-form-item label="状态"> </a-form-item>
<a-select v-model="queryParam.status"> </a-col>
<a-select-option value="1"> <a-col :md='5' :sm='15'>
取消 <a-form-item label='所在楼层'>
</a-select-option> <a-select v-model='queryParam.typeName'>
<a-select-option value="3"> <a-select-option v-for='item in typeList' :value='item.value'>
驳回 {{ item.text }}
</a-select-option>
<a-select-option value="4">
占用
</a-select-option>
<a-select-option value="5">
待审核
</a-select-option>
<a-select-option value="7">
审核通过
</a-select-option>
<a-select-option value="9">
进行中
</a-select-option>
<a-select-option value="11">
已结束
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="5" :sm="15"> <a-col :md='5' :sm='15'>
<a-form-item label="会议室名称"> <a-form-item label='排列形状'>
<a-input placeholder="会议室名称" v-model="queryParam.roomName" /> <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-form-item>
</a-col> </a-col>
<a-col :md="5" :sm="15"> <a-col :md='5' :sm='15'>
<a-form-item label="设备"> <a-form-item label='容纳人数'>
<a-input placeholder="设备" v-model="queryParam.deviceId" /> <a-select v-model='queryParam.capacityNum' placeholder='请选择范围'>
</a-form-item> <a-select-option value=''>
</a-col> 全部
<a-col :md="5" :sm="15"> </a-select-option>
<a-form-item label="人数"> <a-select-option value='1'>
<a-input placeholder="请输人数" v-model="queryParam.num" /> 0-20
</a-form-item> </a-select-option>
</a-col> <a-select-option value='2'>
<a-col :md="5" :sm="15"> 21-50
<a-form-item label="形式"> </a-select-option>
<a-input placeholder="请输入形式" v-model="queryParam.parkId" /> <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-form-item>
</a-col> </a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<span class="table-page-search-submitButtons"> <span class="table-page-search-submitButtons">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button> <a-button type="primary" @click="getAllRoomList">查询会议室</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button> <!-- <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>-->
<a-button type="primary" style="margin-left: 450px">会议预约</a-button>
<a-button type="success" style="margin-left: 8px">占用</a-button>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
@ -68,20 +61,17 @@
{{ item.name }} {{ item.name }}
</div> </div>
<div class="nav"> <div class="nav">
<div class="nav-item" @click="toMeetingList(room)" v-for="room in item.list" :key="room.id"> <div class="nav-item" v-for="room in item.list" :key="room.id">
<div class="desc"> <div class="desc">
{{ room.name }} {{ room.name }}
</div> </div>
<!-- <div class="desc disabled" >--> <div class="am" v-if='room.am == 0'>上午</div>
<!-- {{ room.name }}--> <div class="am disabled" v-if='room.am == 1'>上午</div>
<!-- </div>--> <div class="am disabled">上午</div>
<div class="pm">下午</div>
<div class="night">晚上</div>
<div class="desc-item"> <div class="desc-item">
<div class="num"> {{ room.capacityNum }}&nbsp;{{ room.typeName }}
{{ room.capacityNum }}
</div>
<div class="shape">
{{ room.typeName }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -93,31 +83,99 @@
<script> <script>
import { getAllRoom } from '@/api/admin/meeting/meetingReservation' import { getAllRoom } from '@/api/admin/meeting/meetingReservation'
import {
getRoomContentList, delRoomContent, selectSearchInfoByType,
selectSearchInfoByShape, selectSearchInfoByCapacity, addRoomServe,
selectRoomServeByRoom, selectRoomItemByRoom, getMeetingDict
} from '@/api/admin/meeting/roomContent'
import moment from 'moment'
export default { export default {
name: 'MeetingMangerList', name: 'MeetingMangerList',
data () { data () {
return { return {
nowDate: moment().format('YYYY-MM-DD'), //
form: this.$form.createForm(this), form: this.$form.createForm(this),
mdl: {}, mdl: {},
// / // /
advanced: false, advanced: false,
// //
queryParam: {}, queryParam: {
meetingName: '',
typeName: '',
shape: '',
capacityNum: ''
},
capacityList: [],
shapeList: [],
typeList: [],
roomList: [] roomList: []
// //
} }
}, },
created () { created () {
this.getAllRoomList() this.getAllRoomList()
}, },
mounted() {
this.getDict()
},
methods: { methods: {
chooseDate(date, dateString) {
this.nowDate = dateString
},
disabledDate(current) {
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
})
},
reset() {
this.queryParam = {
meetingName: '',
typeName: '',
shape: '',
capacityNum: ''
}
this.getAllRoomList()
},
toMeetingList (item) { toMeetingList (item) {
this.$router.push({ name: 'reservation', params: { roomId: item.name } }) this.$router.push({ name: 'reservation', params: { roomId: item.name } })
}, },
getAllRoomList () { getAllRoomList () {
getAllRoom({ timeFormat: 0, min: 1, max: 1000 }).then(res => { getAllRoom({ timeFormat: 0, min: 1, max: 1000 }).then(res => {
const roomArr = {} const roomArr = {}
@ -146,31 +204,45 @@ export default {
.room { .room {
border-top: 1px solid rgb(221 215 215 / 65%); border-top: 1px solid rgb(221 215 215 / 65%);
} }
.room .title {
font-size: 32px;
font-weight: 700;
}
.roomItem { .roomItem {
margin-top: 20px; margin-top: 20px;
} }
.roomItem .desc { .roomItem .desc {
width: 150px; width: 150px;
height: 50px; height: 30px;
background-color: #A3CDFF; //background-color: #A3CDFF;
border-radius: 10px 10px 0 0px; //border-radius: 10px 10px 0 0px;
line-height: 50px; line-height: 30px;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
margin-top: 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 { .roomItem .desc-item {
width: 150px; width: 150px;
height: 30px; height: 30px;
background-color: #D8E9FC; background-color: #D8E9FC;
display: flex; line-height: 30px;
justify-content: space-between; text-align: center;
align-items: center;
border-radius: 0 0px 10px 10px;
} }
.desc-item .num { .desc-item .num {

View File

@ -1,154 +1,112 @@
<template> <template>
<a-card :bordered="false"> <a-card :bordered='false'>
<div class="table-page-search-wrapper"> <div class='table-page-search-wrapper'>
<a-form layout="inline"> <a-form layout='inline'>
<a-row :gutter="48"> <a-row :gutter='48'>
<a-col :md="5" :sm="15"> <a-col :md='5' :sm='15'>
<a-form-item label="状态"> <a-form-item label='状态'>
<a-select v-model="queryParam.status"> <a-select v-model='queryParam.status'>
<a-select-option value="1"> <a-select-option value='1'>
取消 取消
</a-select-option> </a-select-option>
<a-select-option value="3"> <a-select-option value='3'>
驳回 驳回
</a-select-option> </a-select-option>
<a-select-option value="4"> <a-select-option value='4'>
占用 占用
</a-select-option> </a-select-option>
<a-select-option value="5"> <a-select-option value='5'>
待审核 待审核
</a-select-option> </a-select-option>
<a-select-option value="7"> <a-select-option value='7'>
审核通过 审核通过
</a-select-option> </a-select-option>
<a-select-option value="9"> <a-select-option value='9'>
进行中 进行中
</a-select-option> </a-select-option>
<a-select-option value="11"> <a-select-option value='11'>
已结束 已结束
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="5" :sm="15"> <a-col :md='5' :sm='15'>
<a-form-item label="会议室"> <a-form-item label='会议室'>
<a-input placeholder="请输入会议室" v-model="queryParam.name" /> <a-input placeholder='请输入会议室' v-model='queryParam.name' />
</a-form-item> </a-form-item>
</a-col> </a-col>
<!-- <a-col :md="5" :sm="15">--> <a-col :md='5' :sm='15'>
<!-- <a-form-item label="预约时间格式0 任意时间1上午2下午3晚上">--> <a-form-item label='参与人数'>
<!-- <a-input placeholder="请输入预约时间格式0 任意时间1上午2下午3晚上" v-model="queryParam.timeFormat"/>--> <a-input placeholder='请输入参与人数' v-model='queryParam.personNum' />
<!-- </a-form-item>-->
<!-- </a-col>-->
<a-col :md="5" :sm="15">
<a-form-item label="参与人数">
<a-input placeholder="请输入参与人数" v-model="queryParam.personNum" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<!-- <a-col :md="5" :sm="15">--> <a-col :md='5' :sm='15'>
<!-- <a-form-item label="参会领导">--> <a-form-item label='姓名'>
<!-- <a-input placeholder="请输入参会领导" v-model="queryParam.leader"/>--> <a-input placeholder='请输入预约人姓名' v-model='queryParam.bookingUserName' />
<!-- </a-form-item>-->
<!-- </a-col>-->
<a-col :md="5" :sm="15">
<a-form-item label="姓名">
<a-input placeholder="请输入预约人姓名" v-model="queryParam.bookingUserName" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="5" :sm="15"> <a-col :md='5' :sm='15'>
<a-form-item label="联系电话"> <a-form-item label='联系电话'>
<a-input placeholder="请输入预约人联系电话" v-model="queryParam.bookingUserPhone" /> <a-input placeholder='请输入预约人联系电话' v-model='queryParam.bookingUserPhone' />
</a-form-item> </a-form-item>
</a-col> </a-col>
<!-- <a-col :md="5" :sm="15">--> <a-col :md='5' :sm='15'>
<!-- <a-form-item label="预约用户单位id">--> <a-form-item label='单位名称'>
<!-- <a-input placeholder="请输入预约用户单位id" v-model="queryParam.userOrgId"/>--> <a-input placeholder='请输入单位名称' v-model='queryParam.userOrg' />
<!-- </a-form-item>-->
<!-- </a-col>-->
<a-col :md="5" :sm="15">
<a-form-item label="单位名称">
<a-input placeholder="请输入单位名称" v-model="queryParam.userOrg" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<!-- <a-col :md="5" :sm="15">--> <a-col :md='8' :sm='24'>
<!-- <a-form-item label="操作记录json 格式">--> <span class='table-page-search-submitButtons'>
<!-- <a-input placeholder="请输入操作记录json 格式" v-model="queryParam.operate"/>--> <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
<!-- </a-form-item>--> <a-button style='margin-left: 8px' @click='() => queryParam = {}'>重置</a-button>
<!-- </a-col>--> <a-dropdown v-if='removeEnable&&selectedRowKeys.length > 0'>
<!-- <a-col :md="5" :sm="15">--> <a-button style='margin-left: 8px' type='danger' icon='delete'
<!-- <a-form-item label="扩展1">--> @click='delByIds(selectedRowKeys)'>删除</a-button>
<!-- <a-input placeholder="请输入扩展1" v-model="queryParam.ext1"/>--> </a-dropdown>
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col :md="5" :sm="15">-->
<!-- <a-form-item label="扩展2">-->
<!-- <a-input placeholder="请输入扩展2" v-model="queryParam.ext2"/>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col :md="5" :sm="15">-->
<!-- <a-form-item label="扩展3">-->
<!-- <a-input placeholder="请输入扩展3" v-model="queryParam.ext3"/>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col :md="5" :sm="15">-->
<!-- <a-form-item label="园区ID">-->
<!-- <a-input placeholder="请输入园区ID" v-model="queryParam.parkId"/>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<a-col :md="8" :sm="24">
<span class="table-page-search-submitButtons">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<div class="table-operator">
<a-button v-if="addEnable" type="primary" icon="plus" @click="$refs.modal.add()">新建</a-button>
<a-dropdown v-if="removeEnable&&selectedRowKeys.length > 0">
<a-button type="danger" icon="delete" @click="delByIds(selectedRowKeys)">删除</a-button>
</a-dropdown>
</div>
<s-table <s-table
size="default" size='default'
ref="table" ref='table'
rowKey="id" rowKey='id'
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
:columns="columns" :columns='columns'
:data="loadData" :data='loadData'
> >
<!-- '预约状态1 取消 3 驳回 4 占用 5 待审核 7 审核通过,待开始 9 进行中 11已结束',--> <!-- '预约状态1 取消 3 驳回 4 占用 5 待审核 7 审核通过,待开始 9 进行中 11已结束',-->
<span slot="status" slot-scope="text, record"> <span slot='status' slot-scope='text, record'>
<a-tag v-if="record.status == 1" color="pink"> <a-tag v-if='record.status == 1' color='pink'>
取消 取消
</a-tag> </a-tag>
<a-tag v-if="record.status == 3" color="red"> <a-tag v-if='record.status == 3' color='red'>
驳回 驳回
</a-tag> </a-tag>
<a-tag v-if="record.status == 4" color="purple"> <a-tag v-if='record.status == 4' color='purple'>
占用 占用
</a-tag> </a-tag>
<a-tag v-if="record.status == 5" color="blue"> <a-tag v-if='record.status == 5' color='blue'>
待审核 待审核
</a-tag> </a-tag>
<a-tag v-if="record.status == 7" color="green"> <a-tag v-if='record.status == 7' color='green'>
审核通过 审核通过
</a-tag> </a-tag>
<a-tag v-if="record.status == 9" color="cyan"> <a-tag v-if='record.status == 9' color='cyan'>
进行中 进行中
</a-tag> </a-tag>
<a-tag v-if="record.status == 11" color="orange"> <a-tag v-if='record.status == 11' color='orange'>
已结束 已结束
</a-tag> </a-tag>
</span> </span>
<span slot="action" slot-scope="text, record"> <span slot='action' slot-scope='text, record'>
<a v-if="editEnabel" @click="handleEdit(record)">编辑</a> <a v-if='editEnabel' @click='handleEdit(record)'>编辑</a>
<a-divider type="vertical" /> <a-divider type='vertical' />
<a v-if="removeEnable" @click="delByIds([record.id])">删除</a> <a v-if='removeEnable' @click='delByIds([record.id])'>删除</a>
</span> </span>
</s-table> </s-table>
<meetingReservation-modal ref="modal" @ok="handleOk" /> <meetingReservation-modal ref='modal' @ok='handleOk' />
</a-card> </a-card>
</template> </template>
@ -159,6 +117,8 @@ import { delMeetingReservation, getMeetingReservationList } from '@/api/admin/me
import MeetingReservationModal from './modules/MeetingReservationModal.vue' import MeetingReservationModal from './modules/MeetingReservationModal.vue'
import { checkPermission } from '@/utils/permissions' import { checkPermission } from '@/utils/permissions'
import { getRoomServeList } from '@/api/admin/meeting/roomServe' import { getRoomServeList } from '@/api/admin/meeting/roomServe'
import { delRoomContent } from '@/api/admin/meeting/roomContent'
import { selfFormatTimeYMD, selfFormatTimeHM } from '@/utils/util'
export default { export default {
name: 'TableList', name: 'TableList',
@ -184,45 +144,34 @@ export default {
queryParam: {}, queryParam: {},
// //
columns: [ columns: [
{
title: '会议室',
dataIndex: 'name'
},
{
title: '会议时间',
dataIndex: 'timeSlot'
},
{ {
title: '会议名称', title: '会议名称',
dataIndex: 'title' dataIndex: 'title'
}, },
{ {
title: '会议室', title: '参会人数',
dataIndex: 'name' dataIndex: 'personNum'
},
// {
// title: '',
// dataIndex: 'sn'
// },
{
title: '预约-开始时间',
dataIndex: 'start',
sorter: true
}, },
{ {
title: '预约-结束时间', title: '参会领导',
dataIndex: 'end', dataIndex: 'leader'
sorter: true
}, },
{ {
title: '预约用户单位名称', title: '预约部门',
dataIndex: 'userOrg' dataIndex: 'userOrg'
}, },
{ {
title: '预约人姓名', title: '会议预约人',
dataIndex: 'bookingUserName' dataIndex: 'bookingUserName'
}, },
{
title: '预约人联系电话',
dataIndex: 'bookingUserPhone'
},
{
title: '会议服务',
dataIndex: 'device'
},
{ {
title: '预约状态', title: '预约状态',
dataIndex: 'status', dataIndex: 'status',
@ -234,81 +183,32 @@ export default {
dataIndex: 'action', dataIndex: 'action',
scopedSlots: { customRender: 'action' } scopedSlots: { customRender: 'action' }
} }
// {
// title: '0 123',
// dataIndex: 'timeFormat'
// },
// {
// title: '',
// dataIndex: 'personNum'
// },
// {
// title: '',
// dataIndex: 'leader'
// },
// {
// title: 'id',
// dataIndex: 'userOrgId'
// },
// {
// title: '1 3 4 5 7 9 11',
// dataIndex: 'status'
// },
// {
// title: 'json ',
// dataIndex: 'operate'
// },
// {
// title: '',
// dataIndex: 'remark'
// },
// {
// title: '1',
// dataIndex: 'ext1'
// },
// {
// title: '2',
// dataIndex: 'ext2'
// },
// {
// title: '3',
// dataIndex: 'ext3'
// },
// {
// title: 'ID',
// dataIndex: 'parkId'
// },
], ],
// Promise // Promise
loadData: parameter => { loadData: parameter => {
this.queryParam.name = this.$route.params.roomId this.queryParam.name = this.$route.params.roomId
//
return getMeetingReservationList(Object.assign(parameter, this.queryParam)) return getMeetingReservationList(Object.assign(parameter, this.queryParam)).then(res => {
}, for (let key in res.rows) {
serveLoadData: (parameter) => { let startTime = res.rows[key].start
let endTime = res.rows[key].end
let param = { res.rows[key].timeSlot = selfFormatTimeYMD(startTime) + ' ' + selfFormatTimeHM(startTime) + '~' + selfFormatTimeHM(endTime)
parkId: this.parkId,
} }
return getRoomServeList(Object.assign(parameter, param)) return res
})
}, },
selectedRowKeys: [], selectedRowKeys: [],
selectedRows: [], selectedRows: [],
addEnable: checkPermission('meeting:meetingReservation:add'),
editEnabel: checkPermission('meeting:meetingReservation:edit'),
removeEnable: checkPermission('meeting:meetingReservation:remove')
} }
}, },
filters: {}, filters: {},
created() { created() {
console.log()
}, },
methods: { methods: {
reset() {
this.queryParam = {}
this.$refs.table.refresh(true)
},
onSelectChange(selectedRowKeys, selectedRows) { onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows this.selectedRows = selectedRows
@ -316,23 +216,40 @@ export default {
handleAdd() { handleAdd() {
this.$refs.modal.add() this.$refs.modal.add()
}, },
handleEdit (record) { handleEdit(id) {
this.$refs.modal.edit(record) this.$refs.modal.edit(id)
}, },
handleOk () { handleOk(status) {
this.$refs.table.refresh(true) status = status || false
console.log('handleSaveOk') this.$refs.table.refresh(status)
}, },
delByIds(ids) { delByIds(ids) {
delMeetingReservation({ ids: ids.join(',') }).then(res => { const _this = this
if (res.code === 0) { if (ids === '') {
this.$message.success('删除成功') this.$message.error('请选择后删除!')
this.handleOk() return
} else {
this.$message.error(res.msg)
} }
this.selectedRowKeys = [] this.$confirm({
title: '警告',
content: '删除后不可恢复,是否确认删除?',
okText: '是',
okType: 'warning',
cancelText: '否',
onOk() {
delMeetingReservation({ ids: ids.join(',') }).then((res) => {
if (res.code === 0) {
_this.$message.success('删除成功')
_this.handleOk()
} else {
_this.$message.error(res.msg)
}
_this.selectedRowKeys = []
}) })
},
onCancel() {
}
})
} }
}, },
watch: { watch: {