feat: 会议选座逻辑优化
This commit is contained in:
+185
@@ -23,6 +23,46 @@ layout("/layouts/platform.html"){
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.occupied-time-dialog {
|
||||
height: calc(100vh - 40px);
|
||||
max-height: 900px;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.occupied-time-dialog .el-dialog__header,
|
||||
.occupied-time-dialog .el-dialog__footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.occupied-time-dialog .el-dialog__body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.occupied-filter-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.occupied-filter-form .occupied-free-switch-item {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.occupied-free-switch-label {
|
||||
margin-right: 8px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
@@ -39,6 +79,7 @@ layout("/layouts/platform.html"){
|
||||
|
||||
<el-card shadow="never">
|
||||
<table-tool>
|
||||
<el-button type="primary" plain icon="el-icon-time" size="small" @click="openOccupiedDialog">会议厅占用情况</el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" size="small" @click="onAdd">新增</el-button>
|
||||
</table-tool>
|
||||
<el-table :data="tableData" ref="tableRef" @sort-change="pageOrder">
|
||||
@@ -103,6 +144,66 @@ layout("/layouts/platform.html"){
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="occupiedDialogTitle" :visible.sync="occupiedDialogVisible" width="1360px"
|
||||
custom-class="occupied-time-dialog">
|
||||
<el-form class="occupied-filter-form" :inline="true" :model="occupiedForm">
|
||||
<el-form-item label="会议厅">
|
||||
<el-select clearable v-model="occupiedForm.hallId" placeholder="请选择会议厅">
|
||||
<el-option v-for="item in hallList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker v-model="occupiedForm.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择开始时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker v-model="occupiedForm.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择结束时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchOccupiedTimes">查询</el-button>
|
||||
<el-button @click="resetOccupiedSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="occupied-free-switch-item">
|
||||
<span class="occupied-free-switch-label">展开空闲会议</span>
|
||||
<el-switch v-model="occupiedForm.includeFree" @change="searchOccupiedTimes"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="occupiedList" v-loading="occupiedLoading" max-height="650px">
|
||||
<el-table-column type="index" width="50" label="序号"></el-table-column>
|
||||
<el-table-column prop="hallName" label="会议厅"></el-table-column>
|
||||
<el-table-column prop="name" label="会议名称">
|
||||
<template scope="{row}">
|
||||
<el-tag v-if="row.available" type="success">空闲</el-tag>
|
||||
<span v-else>{{row.name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" label="开始时间">
|
||||
<template scope="{row}">{{formatOccupiedTime(row.startTime)}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endTime" label="结束时间">
|
||||
<template scope="{row}">{{formatOccupiedTime(row.endTime)}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="occupiedForm.includeFree" label="操作" width="120px">
|
||||
<template scope="{row}">
|
||||
<el-button type="primary" size="mini" :disabled="!row.available"
|
||||
@click="quickAddMeeting(row)">新增会议</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row class="el-pagination-container" style="margin-top: 20px">
|
||||
<el-pagination
|
||||
@size-change="occupiedPageSizeChange"
|
||||
@current-change="occupiedPageNumberChange"
|
||||
:current-page="occupiedForm.pageNumber"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:page-size="occupiedForm.pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="occupiedForm.totalCount">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
@@ -121,6 +222,19 @@ layout("/layouts/platform.html"){
|
||||
content: [{required: true, message: '必填', trigger: 'blur'}],
|
||||
},
|
||||
hallList: [],
|
||||
occupiedDialogVisible: false,
|
||||
occupiedLoading: false,
|
||||
occupiedDialogTitle: '会议厅时间安排',
|
||||
occupiedList: [],
|
||||
occupiedForm: {
|
||||
hallId: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
includeFree: false
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -154,6 +268,19 @@ layout("/layouts/platform.html"){
|
||||
this.$message.success(res.msg)
|
||||
this.dialogVisible = false
|
||||
this.doSearch()
|
||||
} else if (Array.isArray(res.data) && res.data.length > 0) {
|
||||
this.occupiedDialogTitle = '该会议厅时间安排'
|
||||
this.occupiedForm = {
|
||||
hallId: this.formData.hallId,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: res.data.length,
|
||||
includeFree: false
|
||||
}
|
||||
this.occupiedList = res.data.slice(0, 10)
|
||||
this.occupiedDialogVisible = true
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
@@ -178,6 +305,64 @@ layout("/layouts/platform.html"){
|
||||
this.hallList = res.data
|
||||
})
|
||||
},
|
||||
openOccupiedDialog() {
|
||||
this.occupiedDialogTitle = '会议厅时间安排'
|
||||
this.occupiedDialogVisible = true
|
||||
this.loadOccupiedTimes()
|
||||
},
|
||||
loadOccupiedTimes() {
|
||||
this.occupiedLoading = true
|
||||
this.$axios.post('/platform/guildHall/meeting/occupiedTimes', this.occupiedForm).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.occupiedList = res.data ? res.data.list : []
|
||||
this.occupiedForm.totalCount = res.data ? res.data.totalCount : 0
|
||||
}
|
||||
}).finally(() => {
|
||||
this.occupiedLoading = false
|
||||
})
|
||||
},
|
||||
searchOccupiedTimes() {
|
||||
this.occupiedForm.pageNumber = 1
|
||||
this.loadOccupiedTimes()
|
||||
},
|
||||
resetOccupiedSearch() {
|
||||
this.occupiedForm = {
|
||||
hallId: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
includeFree: false
|
||||
}
|
||||
this.loadOccupiedTimes()
|
||||
},
|
||||
occupiedPageSizeChange(pageSize) {
|
||||
this.occupiedForm.pageSize = pageSize
|
||||
this.occupiedForm.pageNumber = 1
|
||||
this.loadOccupiedTimes()
|
||||
},
|
||||
occupiedPageNumberChange(pageNumber) {
|
||||
this.occupiedForm.pageNumber = pageNumber
|
||||
this.loadOccupiedTimes()
|
||||
},
|
||||
formatOccupiedTime(time) {
|
||||
return time ? this.$moment(time).format('YYYY-MM-DD HH:mm:ss') : ''
|
||||
},
|
||||
quickAddMeeting(row) {
|
||||
this.occupiedDialogVisible = false
|
||||
this.dialogVisible = true
|
||||
this.formData = {
|
||||
id: null,
|
||||
name: null,
|
||||
year: this.$moment(row.startTime).format('YYYY'),
|
||||
startTime: this.$moment(row.startTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: this.$moment(row.endTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
hallId: row.hallId,
|
||||
content: null,
|
||||
groupId: null
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.selectList();
|
||||
|
||||
Reference in New Issue
Block a user