会议室代码提交

This commit is contained in:
zhangzhuliang 2022-08-11 14:22:54 +08:00
parent 810e183611
commit b1aae6175b
6 changed files with 1772 additions and 193 deletions

View File

@ -0,0 +1,330 @@
<template>
<el-card shadow="never" class="roomBox">
<div class="roomExamineSearch">
<el-input
v-model="roomName"
style="width: 160px"
placeholder="请输入会议室名称"
></el-input>
<el-select
v-model="value"
style="width: 160px"
clearable
placeholder="请选择审核状态"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button type="primary" @click="searchData">查询</el-button>
</div>
<div>
<el-table border style="width: 100%" :data="tableData">
<el-table-column
label="申请人"
prop="name"
header-align="center"
align="center"
>
</el-table-column>
<el-table-column
label="申请部门"
prop="dept"
header-align="center"
align="center"
>
</el-table-column>
<el-table-column
label="申请会议室"
prop="roomName"
header-align="center"
align="center"
></el-table-column>
<el-table-column
label="申请时段"
prop="bookDate"
header-align="center"
align="center"
></el-table-column>
<el-table-column
label="申请状态"
prop="state"
header-align="center"
align="center"
:formatter="formatter"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="taskDetails(scope.row, scope.row.state)"
>{{ scope.row.state == '1' ? '处理' : '详情' }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 50]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
<el-dialog
:title="lookData.roomName"
:visible.sync="dialogVisible"
width="50%"
>
<div class="modalResult" style="margin-bottom: 20px">处理结果</div>
<div
style="
width: 100%;
height: 0.01rem;
border-top: 1px solid #ccc;
transform: scaleY(0.5);
"
></div>
<div
class="modalExamine"
style="display: flex; flex-direction: column; margin-top: 20px"
>
<span style="margin-bottom: 20px">
审核结果{{ lookData.state === '2' ? '通过' : '不通过' }}
</span>
<span style="width: 90%; margin-bottom: 20px">
审核意见{{ lookData.auditViem }}
</span>
</div>
<div class="modalYuyue" style="margin-bottom: 20px">预约信息</div>
<div
style="
width: 100%;
height: 0.01rem;
border-top: 1px solid #ccc;
transform: scaleY(0.5);
"
></div>
<div class="modalTime" style="margin-bottom: 20px">
<div style="margin: 20px 0 20px 0">
预约日期{{ lookData.bookDate }}
</div>
<div>预约时段{{ lookData.startTime }}-{{ lookData.endTime }}</div>
<div
class="modalContent"
style="
width: 85%;
display: flex;
justify-content: space-between;
margin: 15px 0 15px 0;
"
>
<span>预约人{{ lookData.name }}</span>
<span>联系方式{{ lookData.phone }}</span>
<span>预约部门{{ lookData.dept }}</span>
</div>
<div style="width: 800px; margin-bottom: 30px">
使用事项{{ lookData.matter }}
</div>
</div>
<div>
<div style="display: flex; align-items: center">
<span>附件</span>
<el-button
v-show="file != ''"
size="mini"
@click="downloadTemplate(file)"
>下载</el-button
>
</div>
</div>
</el-dialog>
<el-dialog
:title="lookData.roomName"
:visible.sync="dialogVisibleChuli"
width="50%"
>
<div class="modalResult" style="margin-bottom: 10px">预约信息</div>
<div
style="
width: 100%;
height: 0.01rem;
border-top: 1px solid #ccc;
transform: scaleY(0.5);
"
></div>
<el-row style="display: flex; margin-top: 20px">
<el-col :span="8">预约日期{{ lookData.bookDate }}</el-col>
<el-col :span="8"
>预约时段{{ lookData.startTime }}-{{ lookData.endTime }}</el-col
>
</el-row>
<div class="modalTime">
<el-row class="modalContent" style="margin: 15px 0 15px 0">
<el-col :span="8">申请人{{ lookData.name }}</el-col>
<el-col :span="8">联系方式{{ lookData.phone }}</el-col>
<el-col :span="8">申请部门{{ lookData.dept }}</el-col>
</el-row>
<el-row style="margin-bottom: 30px">
<el-col :span="24"> 使用事项{{ lookData.matter }} </el-col>
</el-row>
<el-row>
<el-col :span="2">审核结果</el-col>
<el-col :span="8" style="display: flex">
<el-radio v-model="radio" label="2">通过</el-radio>
<el-radio v-model="radio" label="3">不通过</el-radio>
</el-col>
</el-row>
<el-row style="display: flex; margin-top: 20px">
<el-col :span="2">审核意见</el-col>
<el-col :span="16">
<el-input type="textarea" v-model="desc"></el-input>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button @click="No"> </el-button>
<el-button type="primary" @click="ok"> </el-button>
</div>
</div>
</el-dialog>
</el-card>
</template>
<script>
import Cookies from 'js-cookie'
export default {
data() {
return {
options: [
{
value: '1',
label: '待审核',
},
{
value: '0',
label: '审核完成',
},
],
value: '',
limit: 10,
page: 1,
total: 0,
roomName: '',
tableData: [],
dialogVisible: false,
dialogVisibleChuli: false,
lookData: {},
radio: '2',
desc: '',
id: '',
num: '',
file: '',
}
},
mounted() {
this.getSerach()
},
methods: {
getSerach() {
this.$http
.get(
`/bookMeeting/auditPage?page=${this.page}&limit=${this.limit}&roomName=${this.roomName}&state=${this.value}`
)
.then(({ data: res }) => {
console.log(res, 7777777)
this.tableData = res.data.list
this.total = res.data.total
})
},
downloadTemplate(file) {
// window.SITE_CONFIG.apiURL +
window.open(`${file}?token=` + Cookies.get('ucsToken'))
},
handleSizeChange(val) {
this.limit = val
this.getSerach()
},
handleCurrentChange(val) {
this.page = val
this.getSerach()
},
searchData() {
this.getSerach()
},
taskDetails(item, num) {
if (num == '1') {
this.dialogVisibleChuli = true
this.id = item.id
} else {
this.dialogVisible = true
this.$http.get(`bookMeeting/${item.id}`).then(({ data: res }) => {
console.log(55555555)
this.file = res.data.file
})
}
this.lookData = item
},
ok() {
let query = {
auditViem: this.desc,
state: this.radio,
id: this.id,
}
this.$http.put('/bookMeeting', query).then(({ data: res }) => {
this.dialogVisibleChuli = false
this.radio = '2'
this.desc = ''
this.getSerach()
})
},
No() {
this.radio = '2'
this.desc = ''
this.dialogVisibleChuli = false
},
formatter(row, column) {
return row.state == '1' ? '待审核' : '审核完成'
},
},
}
</script>
<style scoped lang="scss">
.roomBox {
min-height: calc(calc(100vh - 50px - 38px - 30px));
.roomHeadSpan {
font-weight: 600;
}
.roomExamineSearch {
display: flex;
width: 410px;
margin-bottom: 20px;
justify-content: space-between;
}
}
.dialog-footer {
text-align: center;
margin-top: 40px;
}
// ::v-deep .el-input {
// margin-right: 15px;
// display: inline-block;
// }
// ::v-deep .el-select {
// margin-right: 20px;
// display: inline-block;
// }
</style>

View File

@ -0,0 +1,381 @@
<template>
<el-card shadow="never" class="roomBox">
<div>
<div slot="header" class="roomHeadSpan">
<span>会议室管理</span>
<el-button
style="float: right; padding: 5px 5px"
type="primary"
icon="el-icon-circle-plus-outline"
@click="addRooom"
>新增</el-button
>
</div>
<el-table border style="width: 100%" :data="tableData">
<el-table-column
label="会议室名称"
prop="name"
header-align="center"
align="center"
>
</el-table-column>
<el-table-column
label="房间号"
prop="num"
header-align="center"
align="center"
>
</el-table-column>
<el-table-column
label="面积"
prop="area"
header-align="center"
align="center"
></el-table-column>
<el-table-column
label="可容纳人数(人)"
prop="capacity"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button type="text" size="small" @click="taskDetails(scope.row)"
>详情</el-button
>
<el-button
type="text"
size="small"
@click="taskUpdate(scope.row)"
>{{ $t('update') }}</el-button
>
<el-button
type="text"
size="small"
@click="taskDelete(scope.row)"
>{{ $t('delete') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog
@close="outDialog"
:title="
flge === 'add'
? '会议室新增'
: flge === 'look'
? '会议室详情'
: '会议室修改'
"
:visible.sync="dialogFormVisible"
>
<el-form
:model="ruleForm"
:label-position="labelPosition"
size="small"
:rules="rules"
ref="ruleForm"
:disabled="flge === 'look' ? true : flge === 'edit' ? false : false"
>
<el-row>
<el-col :span="12">
<el-form-item
label="会议室名称"
prop="name"
:label-width="formLabelWidth"
>
<el-input v-model="ruleForm.name" style="width: 90%"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="房间号"
prop="num"
:label-width="formLabelWidth"
>
<el-input v-model="ruleForm.num" style="width: 90%"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="会议室面积"
prop="area"
:label-width="formLabelWidth"
>
<el-input v-model="ruleForm.area" style="width: 90%"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="可容纳人数"
prop="capacity"
:label-width="formLabelWidth"
>
<el-input
v-model="ruleForm.capacity"
style="width: 90%"
></el-input>
</el-form-item>
</el-col>
<el-col>
<el-form-item
label="描述"
prop="description"
:label-width="formLabelWidth"
>
<el-input
type="textarea"
v-model="ruleForm.description"
style="width: 96%"
></el-input>
</el-form-item>
</el-col>
<el-col>
<el-form-item
label="会议室图片"
prop="pic"
:label-width="formLabelWidth"
>
<div v-if="flge != 'look'">
<span slot="tip" class="el-upload__tip">
支持图片类型且不超过500kb
</span>
</div>
<!-- :file-list="fileList" -->
<el-upload
v-if="flge != 'look'"
class="upload-demo"
accept=".jpg, .jpeg, .png"
:action="apiURL"
:on-preview="handlePictureCardPreview"
:on-success="onSuccess"
:on-remove="onRemove"
:file-list="fileList"
list-type="picture-card"
:limit="1"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="picImg" alt="" />
</el-dialog>
<div
class="block"
style="width: 15rem; height: 10rem"
v-if="flge == 'look' && picImg != ''"
>
<el-image :src="picImg"></el-image>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<!-- <el-button @click="dialogFormVisible = false"> </el-button> -->
<el-button
type="primary"
v-if="flge != 'look'"
@click="submitForm('ruleForm', flge)"
> </el-button
>
</div>
</el-dialog>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import Cookies from 'js-cookie'
export default {
data() {
// let validatorImg = (rule, value, callback) => {
// console.log(value, 11111111)
// //
// if (!this.checkImgSuccess) {
// //true false
// callback(new Error(''))
// } else {
// callback()
// }
// }
return {
apiURL:
window.SITE_CONFIG.apiURL + '/upload?token=' + Cookies.get('ucsToken'),
labelPosition: 'left',
dialogFormVisible: false,
// dialogImageUrl: '',
ruleForm: {
name: '',
num: '',
area: '',
capacity: '',
pic: '',
id: '',
},
limit: 10,
page: 1,
total: 0,
picImg: '',
tableData: [],
fileList: [],
rules: {
name: [
{ required: true, message: '请输入会议室名称', trigger: 'blur' },
{ min: 1, trigger: 'blur' },
],
area: [
{ required: true, message: '请输入会议室面积', trigger: 'blur' },
{ min: 1, trigger: 'blur' },
],
description: [
{ required: true, message: '请填写描述内容', trigger: 'blur' },
],
},
formLabelWidth: '100px',
checkImgSuccess: true,
dialogVisible: false,
flge: '',
}
},
mounted() {
this.queryData()
},
methods: {
//
queryData() {
this.$http
.get(`/meeting/page?limit=${this.limit}&page=${this.page}`)
.then(({ data: res }) => {
this.total = res.data.total
this.tableData = res.data.list
})
},
//
handleSizeChange(val) {
this.limit = val
this.queryData()
},
handleCurrentChange(val) {
this.page = val
this.queryData()
},
//
addRooom() {
this.dialogFormVisible = true
this.flge = 'add'
this.ruleForm = {}
this.fileList = []
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
//
onSuccess(response, file, fileList) {
this.ruleForm.pic = response.data
// this.$refs.ruleForm.clearValidate() //
this.checkImgSuccess = true
},
//
onRemove(file, fileList) {
this.$nextTick(() => {
if (fileList.length == 0) {
this.checkImgSuccess = false //
// this.$refs.ruleForm.validate() //,
}
})
},
//
submitForm(formName, i) {
console.log(i, 9999999)
this.$refs[formName].validate((valid) => {
if (valid) {
if (i === 'add') {
this.dialogFormVisible = false
this.$http.post('/meeting', this.ruleForm).then(({ data: res }) => {
this.queryData()
})
} else if (i === 'edit') {
this.dialogFormVisible = false
this.$http.put(`/meeting`, this.ruleForm).then(({ data: res }) => {
this.ruleForm = res.data
let imgUrl = { name: res.data.name, url: res.data.pic }
this.fileList.push(imgUrl)
})
}
} else {
console.log('error submit!!')
return false
}
})
},
//
taskDetails(row) {
this.ruleForm = {}
this.fileList = []
this.flge = 'look'
this.$http.get(`/meeting/${row.id}`).then(({ data: res }) => {
this.dialogFormVisible = true
this.ruleForm = res.data
if (res.data.pic != null) {
// let imgUrl = { name: res.data.name, url: res.data.pic }
// this.fileList.push(imgUrl)
this.picImg = res.data.pic
} else {
this.picImg = ''
}
})
},
//
taskUpdate(row) {
this.dialogFormVisible = true
this.fileList = []
this.flge = 'edit'
this.ruleForm = row
if (row.pic != null) {
let imgUrl = { name: row.name, url: row.pic }
this.fileList.push(imgUrl)
} else {
this.fileList = []
}
},
//
taskDelete(row) {
console.log(row, '点击了删除')
this.$http
.put(`/meeting`, { delFlag: 1, id: row.id })
.then(({ data: res }) => {
this.queryData()
})
},
//
outDialog() {},
},
}
</script>
<style scoped lang="scss">
.roomBox {
min-height: calc(calc(100vh - 50px - 38px - 30px));
.roomHeadSpan {
font-weight: 600;
}
}
::v-deep .el-dialog__footer {
text-align: center;
}
</style>

View File

@ -370,6 +370,39 @@ export function getDevelopDocTree(params) {
params, params,
}) })
} }
//
export function getRoomSearch(params) {
return request({
url: '/bookMeeting/list',
method: 'get',
params,
})
}
//
export function getDate(params) {
return request({
url: '/bookMeeting/availableDate',
method: 'get',
params,
})
}
//
export function setSubmit(data) {
return request({
url: '/bookMeeting',
method: 'post',
data,
})
}
//
export function getYuyue(params) {
return request({
url: '/bookMeeting/page',
method: 'get',
params,
})
}
// 广 // 广
export function selectAppList(params) { export function selectAppList(params) {
return request({ return request({

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 B

View File

@ -6,7 +6,7 @@
<detailsPageconetentTree /> <detailsPageconetentTree />
</div> </div>
<div class="details-pageconetent-left" v-else> <div class="details-pageconetent-left" v-else>
<detailsPageInfrastructureTree /> <detailsPageInfrastructureTree v-show="flag != '6'" />
</div> </div>
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'"> <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
<div class="top-title"> <div class="top-title">
@ -178,7 +178,7 @@
</div> </div>
</div> </div>
<div class="top-content-father"> <div class="top-content-father">
<infrastructurePage /> <infrastructurePage @add="handleAdd" />
</div> </div>
</div> </div>
<div class="top" v-else> <div class="top" v-else>
@ -742,6 +742,12 @@
export default defineComponent({ export default defineComponent({
setup() { setup() {
//6
const flag = ref('')
const handleAdd = (value) => {
flag.value = value
}
const titleName = ref(titleNameArray) const titleName = ref(titleNameArray)
const openMonitor = () => { const openMonitor = () => {
@ -1446,6 +1452,8 @@
getShoppingCartList, getShoppingCartList,
whoShow1, whoShow1,
applyAll, applyAll,
handleAdd,
flag,
abilitySquare, abilitySquare,
visibleAbilitySquare, visibleAbilitySquare,
showAbilitySquare, showAbilitySquare,

View File

@ -27,6 +27,364 @@
</span> </span>
</div> </div>
</div> </div>
<div v-if="!room" class="roomBox">
<div class="leftMake">
<div
class="leftTop"
@click="roomResults"
:class="roomYuyue ? 'roomBackground' : 'nullBackground'"
>
会议室预约
</div>
<div
class="leftBottom"
@click="result"
:class="roomResult ? 'roomBackground' : 'nullBackground'"
>
预约结果
</div>
</div>
<div class="roomSearch">
<span>会议室搜索</span>
<div class="searchInput">
<a-input-search
v-model:value="roomInput"
placeholder="请输入关键词"
enter-button="搜索"
size="large"
@search="onSearch"
/>
<a-button
style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
@click="reSetSearch"
>
重置
</a-button>
</div>
</div>
<div v-if="roomYuyue">
<div class="roomTableList">
<span>会议室列表</span>
<div class="roomTime">
<span>可用时间查询</span>
<a-space direction="vertical" class="roomSpace">
<a-date-picker
v-model:value="roomCerateDate"
placeholder="开始日期"
value-format="YYYY-MM-DD"
/>
<a-time-picker
v-model:value="roomCreateTime"
placeholder="开始时间"
value-format="HH:mm:ss"
/>
<a-time-picker
v-model:value="roomEndTime"
placeholder="结束时间"
value-format="HH:mm:ss"
/>
</a-space>
</div>
</div>
<div class="roomItem" v-for="(item, index) in roomList">
<div class="leftImg">
<img
:src="
item.pic == null
? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fimages01%2F20201221%2F00885cf666cc4c2ab80c7b4e59259e85.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662707222&t=13d3246428ee80cc7519702d5eb6eb7d'
: `${item.pic}`
"
alt=""
/>
</div>
<div class="rightContent">
<div class="topContent">{{ item.name }}</div>
<div class="centerContent">
<span>房间号{{ item.num }}</span>
<span>可容纳人数{{ item.capacity }}</span>
<span>面积{{ item.area }}</span>
</div>
<div class="bottonmContent">
{{ item.description }}
</div>
</div>
<a-button
style="
margin-left: 0.8rem;
background: #e1edfa;
color: #0087ff;
border: none;
border-radius: 0.06rem;
"
@click="appointment(item)"
>
预约
</a-button>
</div>
<a-pagination
v-model:current="roomPage"
v-model:pageSize="roomLimit"
show-quick-jumper
:total="roomTotal"
:page-size-options="pageSizeOptions"
@change="onRoomChange"
@showSizeChange="onShowSizeChange"
show-size-changer
/>
</div>
<div v-if="roomResult" style="display: grid">
<a-table
:columns="columnsRomm"
:data-source="dataRoom"
:filterMultiple="false"
:align="center"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'bookDate'">
<span>
{{ record.bookDate }} {{ record.startTime }}-{{
record.endTime
}}
</span>
</template>
<template v-if="column.key === 'state'">
<span>
{{
record.state == 2
? '通过'
: record.state == 1
? '审核中'
: '不通过'
}}
</span>
</template>
<template v-if="column.key === 'action'">
<a @click="look(record)">查看详情</a>
</template>
</template>
</a-table>
<a-pagination
v-model:current="roomPage"
v-model:pageSize="roomLimit"
show-quick-jumper
:total="roomTotal"
:page-size-options="pageSizeOptionsChengguo"
@change="onRoomChangeChengguo"
@showSizeChange="onShowSizeChangeChengguo"
show-size-changer
/>
</div>
<a-modal
v-model:visible="visibleRoom"
width="10rem"
title="预约详情"
:body-style="bodystyle"
class="modalClass"
:footer="null"
>
<div class="modalResult" style="margin-bottom: 0.05rem">预约结果</div>
<div
style="
width: 100%;
height: 0.01rem;
border-top: 1px solid #ccc;
transform: scaleY(0.5);
"
></div>
<div
class="modalExamine"
style="display: flex; flex-direction: column; margin-top: 0.2rem"
>
<span style="margin-bottom: 0.2rem">
审核结果{{ lookData.state === '2' ? '通过' : '不通过' }}
</span>
<span style="width: 8rem; margin-bottom: 0.3rem">
审核意见{{ lookData.auditViem }}
</span>
</div>
<div class="modalYuyue" style="margin-bottom: 0.05rem">预约信息</div>
<div
style="
width: 100%;
height: 0.01rem;
border-top: 1px solid #ccc;
transform: scaleY(0.5);
"
></div>
<div class="modalTime" style="margin-top: 0.2rem">
<div>
预约时段{{ lookData.bookDate }} {{ lookData.startTime }}-{{
lookData.endTime
}}
</div>
<div
class="modalContent"
style="
width: 7.5rem;
display: flex;
justify-content: space-between;
margin: 0.15rem 0 0.15rem 0;
"
>
<span>预约人{{ lookData.name }}</span>
<span>联系方式{{ lookData.phone }}</span>
<span>预约部门{{ lookData.dept }}</span>
</div>
</div>
<div style="width: 8rem; margin-bottom: 0.3rem">
使用事项{{ lookData.matter }}
</div>
</a-modal>
<a-modal
v-model:visible="appointmentRoom"
title="会议室预约"
width="10rem"
@ok="handleOk"
:body-style="bodystyle"
class="appModal"
:footer="null"
>
<a-form
:model="formState"
name="basic"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
autocomplete="off"
@finish="onFinish"
@finishFailed="onFinishFailed"
:labelAlign="labelPosition"
>
<a-row>
<a-col :span="8">
<a-form-item
name="bookDate"
label="预约日期"
v-bind="validateInfos.bookDate"
@blur="validate('create', { trigger: 'blur' }).catch(() => {})"
>
<a-date-picker
style="width: 72%"
v-model:value="formState.bookDate"
value-format="YYYY-MM-DD"
@change="handleChange"
/>
</a-form-item>
<div
:class="roomDateList[0] != null ? 'jinggaoD' : 'jinggaoNull'"
>
<div class="imgJinggao"></div>
<span style="color: #da2a13; font-size: 0.12rem">
当日会议室可用时段{{ roomDateList[0] }}
</span>
</div>
</a-col>
<a-col :span="8">
<a-form-item
name="startTime"
label="预约时段"
v-bind="validateInfos.startTime"
style="display: flex"
>
<a-time-picker
v-model:value="formState.startTime"
placeholder="开始时间"
value-format="HH:mm:ss"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-time-picker
v-model:value="formState.endTime"
placeholder="结束时间"
value-format="HH:mm:ss"
/>
</a-col>
</a-row>
<a-row style="margin-top: 0.4rem">
<a-col :span="8">
<a-form-item
name="name"
label="预约人"
v-bind="validateInfos.name"
>
<a-input v-model:value="formState.name" style="width: 72%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item
name="phone"
label="联系电话"
v-bind="validateInfos.phone"
>
<a-input v-model:value="formState.phone" style="width: 72%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item
name="dept"
label="预约部门"
v-bind="validateInfos.dept"
>
<a-input v-model:value="formState.dept" style="width: 72%" />
</a-form-item>
</a-col>
</a-row>
<a-row style="margin-top: 0.4rem">
<a-col :span="24">
<a-form-item
name="matter"
v-bind="validateInfos.matter"
label="使用事项"
class="introduction"
>
<a-textarea v-model:value="formState.matter" />
</a-form-item>
</a-col>
</a-row>
<a-row style="margin-top: 0.4rem">
<a-col :span="24">
<a-form-item
name="uploadRoom"
label="附件上传"
class="introduction"
>
<a-upload
:max-count="1"
accept=".doc,.docx,pdf"
v-model:file-list="fileList"
:action="`${apiURL}/upload`"
@remove="handleRemove"
@change="roomUpload"
>
<a-button>
<upload-outlined>选择上传附件</upload-outlined>
</a-button>
<span>
支持docdocxPDF等格式支撑材料上传文件大小不超过100M
</span>
</a-upload>
</a-form-item>
</a-col>
</a-row>
<a-form-item
:wrapper-col="{ span: 14, offset: 4 }"
style="text-align: center; margin-top: 0.4rem"
>
<a-button @click="resetFields" type="primary" danger>取消</a-button>
<a-button
style="margin-left: 10px"
type="primary"
@click="onSubmit"
>
提交
</a-button>
</a-form-item>
</a-form>
</a-modal>
</div>
<div v-if="room">
<!-- 地图 --> <!-- 地图 -->
<div class="map-contain" v-if="showMap"> <div class="map-contain" v-if="showMap">
<video-surveillance></video-surveillance> <video-surveillance></video-surveillance>
@ -249,22 +607,38 @@
</template> </template>
</a-modal> </a-modal>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import VideoSurveillance from '@/views/home/videoSurveillance' import VideoSurveillance from '@/views/home/videoSurveillance'
// import { getCategoryTreePage } from '@/api/personalCenter' // import { getCategoryTreePage } from '@/api/personalCenter'
// import { dataType } from 'element-plus/es/components/table-v2/src/common' // import { dataType } from 'element-plus/es/components/table-v2/src/common'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue' import { message, Upload } from 'ant-design-vue'
import { ref, reactive, onMounted } from 'vue' import {
ref,
reactive,
onMounted,
watch,
defineComponent,
nextTick,
} from 'vue'
import { import {
getCameraByParentId, getCameraByParentId,
getStreamByChannelCode, getStreamByChannelCode,
getCameraAllLabel, getCameraAllLabel,
} from '@/api/videoSurveillance' } from '@/api/videoSurveillance'
import { getCameraByCondition } from '@/api/file' import { getCameraByCondition } from '@/api/file'
import { sgcInsert } from '@/api/home' import {
sgcInsert,
getRoomSearch,
getDate,
setSubmit,
getYuyue,
} from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import dayjs from 'dayjs'
import { Form } from 'ant-design-vue'
const current = ref(1) const current = ref(1)
const videoTotal = ref(0) const videoTotal = ref(0)
const router = useRouter() const router = useRouter()
@ -307,6 +681,78 @@
showSizeChanger: true, showSizeChanger: true,
pageSizeOptions: ['10', '30', '50', '100', '1000'], // pageSizeOptions: ['10', '30', '50', '100', '1000'], //
}) })
//=======
const paginationRoom = ref({
total: 0,
current: 1,
pageSize: 10, //10
showSizeChanger: true,
pageSizeOptions: ['5', '10', '15', '20'], //
})
const formState = reactive({
// name: '',
// iphone: '18264084961',
// group: '',
// create: '',
// cerateTime: '',
// endTime: '',
// introduction: '',
// uploadRoom: '',
roomId: '',
bookDate: '', //
startTime: '', //
endTime: '', //
name: '',
phone: '',
dept: '',
matter: '',
file: '',
})
const fileList = ref([])
const useForm = Form.useForm
const roomInput = ref('')
const rulesRef = reactive({
bookDate: [
{
type: 'string',
required: true,
message: '请选择日期',
},
],
startTime: [
{
type: 'string',
required: true,
message: '请选择时间段',
},
],
name: [
{
required: true,
message: '请输入预约人',
},
],
matter: [
{
required: true,
message: '请输入内容',
},
],
phone: [
{
required: true,
pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
message: '请输入正确的手机号',
},
],
dept: [
{
required: true,
message: '请输入部门',
},
],
})
const { resetFields, validateInfos, validate } = useForm(formState, rulesRef)
const mapSearchParam = ref({ const mapSearchParam = ref({
// //
parentId: '', parentId: '',
@ -320,6 +766,29 @@
labelCodes: [], labelCodes: [],
}) })
const showMap = ref(true) const showMap = ref(true)
const room = ref(true)
const roomResult = ref(true)
const roomYuyue = ref(true)
const visibleRoom = ref(false)
const appointmentRoom = ref(false)
const labelPosition = ref('left')
const apiURL = window.SITE_CONFIG.apiURL
const roomList = ref([])
const roomPage = ref(1)
const roomLimit = ref(5)
const roomTotal = ref(0)
const pageSizeOptions = ref(['5', '10', '20', '50'])
const pageSizeOptionsChengguo = ref(['5', '10', '20', '50'])
const dateId = ref(null)
const roomDateList = ref([])
//---
const roomCerateDate = ref('')
const roomCreateTime = ref('')
const roomEndTime = ref('')
const roomModalCreateTime = ref('')
const roomModalEndTime = ref('')
const lookData = ref({})
//===========================
onMounted(() => { onMounted(() => {
if (jcssType.value) { if (jcssType.value) {
tabClick(0, jcssType.value) tabClick(0, jcssType.value)
@ -349,7 +818,7 @@
const tabList = ref([ const tabList = ref([
{ {
title: '设施类型', title: '设施类型',
content: ['视频资源', '云资源', '感知资源'], content: ['视频资源', '云资源', '感知资源', '会议室'],
}, },
{ {
title: '视频标签', title: '视频标签',
@ -429,6 +898,153 @@
} }
let clickList = ref([]) //tab let clickList = ref([]) //tab
init() init()
//
const result = () => {
roomYuyue.value = false
roomResult.value = true
chengguoSearch()
}
const chengguoSearch = () => {
let query = {
page: roomPage.value,
limit: roomLimit.value,
roomName: roomInput.value,
}
getYuyue(query).then(({ data: res }) => {
dataRoom.value = res.data.list
roomTotal.value = res.data.total
})
}
const roomResults = () => {
roomYuyue.value = true
roomResult.value = false
}
//
const look = (row) => {
visibleRoom.value = true
lookData.value = row
}
//
const onSearch = (searchValue) => {
searchData()
chengguoSearch()
}
//
const reSetSearch = () => {
roomInput.value = ''
searchData()
chengguoSearch()
}
//
const onRoomChange = (pageNumber) => {
roomPage.value = pageNumber
searchData()
}
const onShowSizeChange = (current, pageSize) => {
roomLimit.value = pageSize
searchData()
}
const onRoomChangeChengguo = (pageNumber) => {
roomPage.value = pageNumber
chengguoSearch()
}
const onShowSizeChangeChengguo = (current, pageSize) => {
roomLimit.value = pageSize
chengguoSearch()
}
//
const appointment = (item) => {
dateId.value = item.id
formState.roomId = item.id
appointmentRoom.value = true
}
//
const handleChange = (i) => {
let query = {
date: i, //riqi
roomId: dateId.value, //
}
getDate(query).then(({ data: res }) => {
roomDateList.value = res.data
})
}
const columnsRomm = [
{
title: '会议室名称',
dataIndex: 'roomName',
align: 'center',
},
{
title: '预约时段',
key: 'bookDate',
align: 'center',
},
{
title: '预约状态',
key: 'state',
align: 'center',
},
{
title: '预约详情',
key: 'action',
align: 'center',
},
]
const dataRoom = ref([])
const bodystyle = {
paddingTop: 0,
borderBottom: 0,
}
const handleOk = (e) => {
console.log(e)
}
//
const roomUpload = (response) => {
if (response.file.response !== undefined) {
fileList.value = response.fileList
formState.file = response.file.response.data
}
}
//
const onSubmit = () => {
validate()
.then(() => {
setSubmit(formState).then(({ data: res }) => {
appointmentRoom.value = false
formState.roomId = ''
formState.bookDate = ''
formState.startTime = '' //
formState.endTime = '' //
formState.name = ''
formState.phone = ''
formState.dept = ''
formState.matter = ''
formState.file = ''
fileList.value = []
searchData()
})
})
.catch((err) => {
console.log('error', err)
})
}
//
const searchData = () => {
let query = {
bookDate: roomCerateDate.value, //
startTime: roomCreateTime.value, //
endTime: roomEndTime.value, //
name: roomInput.value, //
page: roomPage.value, //
limit: roomLimit.value, //
}
getRoomSearch(query).then(({ data: res }) => {
roomList.value = res.data.list
roomTotal.value = res.data.total
})
}
const emits = defineEmits(['add'])
// //
let tableHeight = ref('600') let tableHeight = ref('600')
//tab //tab
@ -443,10 +1059,12 @@
selectedList.value = [] selectedList.value = []
if (clickList.value[indexFather].content.indexOf(name) != -1) { if (clickList.value[indexFather].content.indexOf(name) != -1) {
if (name == '视频资源') { if (name == '视频资源') {
room.value = true
tableHeight.value = 330 tableHeight.value = 330
showMap.value = true showMap.value = true
tabList.value[1].title = '视频标签' tabList.value[1].title = '视频标签'
} else if (name == '云资源') { } else if (name == '云资源') {
room.value = true
tableHeight.value = 600 tableHeight.value = 600
showMap.value = false showMap.value = false
dataSource.value = [] dataSource.value = []
@ -454,11 +1072,21 @@
pagination.value.total = 0 pagination.value.total = 0
tabList.value[1].title = '云资源分类' tabList.value[1].title = '云资源分类'
} else if (name == '感知资源') { } else if (name == '感知资源') {
room.value = true
tableHeight.value = 330 tableHeight.value = 330
showMap.value = true showMap.value = true
dataSource.value = [] dataSource.value = []
dataSource2.value = [] dataSource2.value = []
pagination.value.total = 0 pagination.value.total = 0
} else if (name == '会议室') {
// room.value = false
// wrjFlag.value = true
// showMap.value = false
// roomYuyue.value = true
// roomResult.value = false
// tabList.value[1] = []
// emits('add', 6)
// searchData()
} }
clickList.value[indexFather].content.splice( clickList.value[indexFather].content.splice(
clickList.value[indexFather].content.indexOf(name), clickList.value[indexFather].content.indexOf(name),
@ -475,6 +1103,7 @@
clickList.value[indexFather].content[0] = name clickList.value[indexFather].content[0] = name
dataSource.value = [] dataSource.value = []
dataSource2.value = [] dataSource2.value = []
room.value = true
getCameraAllLabel().then((res) => { getCameraAllLabel().then((res) => {
res.data.data.forEach((val) => { res.data.data.forEach((val) => {
tabList.value[1].content.push({ tabList.value[1].content.push({
@ -490,6 +1119,7 @@
}) })
console.log('选中的标签code', mapSearchParam.value) console.log('选中的标签code', mapSearchParam.value)
mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + '' mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
emits('add', 1)
getCamera() getCamera()
} else if (name == '云资源') { } else if (name == '云资源') {
tableHeight.value = 600 tableHeight.value = 600
@ -510,7 +1140,9 @@
'负载均衡', '负载均衡',
'公网IP', '公网IP',
] ]
room.value = true
wrjFlag.value = false wrjFlag.value = false
emits('add', 2)
} else if (name == '感知资源') { } else if (name == '感知资源') {
tableHeight.value = 330 tableHeight.value = 330
showMap.value = true showMap.value = true
@ -521,8 +1153,11 @@
tabList.value[1].content = [] tabList.value[1].content = []
dataSource.value = [] dataSource.value = []
dataSource2.value = [] dataSource2.value = []
room.value = true
wrjFlag.value = false wrjFlag.value = false
emits('add', 3)
} else if (name == '无人机') { } else if (name == '无人机') {
room.value = true
tableHeight.value = 600 tableHeight.value = 600
showMap.value = false showMap.value = false
dataSource.value = [] dataSource.value = []
@ -542,6 +1177,7 @@
}) })
wrjFlag.value = true wrjFlag.value = true
} else if (name == '单兵设备') { } else if (name == '单兵设备') {
room.value = true
tableHeight.value = 600 tableHeight.value = 600
showMap.value = false showMap.value = false
dataSource.value = [] dataSource.value = []
@ -560,6 +1196,24 @@
}) })
}) })
wrjFlag.value = true wrjFlag.value = true
} else if (name == '会议室') {
showMap.value = false
dataSource.value = []
dataSource2.value = []
pagination.value.total = 0
clickList.value[1].content = []
clickList.value[indexFather].content[0] = name
tabList.value[1].title = ''
tabList.value[1].content = []
wrjFlag.value = true
room.value = false
// wrjFlag.value = true
// showMap.value = false
roomYuyue.value = true
roomResult.value = false
// tabList.value[1] = []
emits('add', 6)
searchData()
} else { } else {
clickList.value[indexFather].content.push(name) clickList.value[indexFather].content.push(name)
} }
@ -1022,13 +1676,186 @@
position: relative; position: relative;
} }
} }
.roomBackground {
background: #0058e1;
color: #ffffff;
}
.nullBackground {
background: #f3f5f9;
color: #0087ff;
}
:deep(.ant-form-item-control-input-content) {
margin-left: 0.15rem;
}
:deep(.ant-col) {
.ant-form-item {
margin-bottom: 0;
}
}
.jinggaoD {
display: flex;
align-items: center;
}
.jinggaoNull {
display: none;
}
.imgJinggao {
width: 0.2rem;
height: 0.2rem;
background: url('~@/assets/home/jingao.png') no-repeat;
background-size: 100%;
}
.introduction {
:deep(.ant-form-item-control) {
margin-left: -2.1rem;
}
}
.roomBox {
.leftMake {
float: left;
margin-left: -1rem;
margin-top: -0.5rem;
font-size: 0.2rem;
cursor: pointer;
.leftTop {
width: 0.6rem;
height: 1.75rem;
border-top-left-radius: 0.08rem;
border-bottom-left-radius: 0.08rem;
padding: 0.13rem;
text-align: center;
}
.leftBottom {
width: 0.6rem;
height: 1.75rem;
border-top-left-radius: 0.08rem;
border-bottom-left-radius: 0.08rem;
padding: 0.2rem 0.13rem 0.1rem 0.1rem;
text-align: center;
}
}
.roomSearch {
display: flex;
align-items: center;
.searchInput {
display: flex;
margin-right: 0.2rem;
margin-left: 0.2rem;
// .ant-input-search {
// max-width: 4rem;
// }
:deep(.ant-input) {
width: 2rem;
height: 0.36rem;
font-size: 0.14rem;
color: #b2b2b2;
background: #f5f5f5;
}
:deep(.ant-input-group-addon) {
display: inline-block;
margin-left: 0.1rem;
.ant-input-search-button {
width: 0.8rem;
height: 0.36rem;
background: #0558e1;
border-radius: 0.06rem;
font-size: 0.14rem;
}
}
:deep(.ant-btn) {
border-radius: 0.06rem;
}
}
}
.roomTableList {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.4rem 0 0.2rem 0;
.roomTime {
display: flex;
align-items: center;
:deep(.ant-space-vertical) {
flex-direction: inherit;
margin-left: 0.2rem;
}
}
}
.roomItem {
width: 10.3rem;
height: 2rem;
border-top: 1px #d5d4d4 solid;
display: flex;
align-items: center;
.leftImg {
width: 2.4rem;
height: 1.75rem;
margin: 0 0.3rem 0 0.15rem;
// background: url('~@/assets/home/yyzy_square.png') no-repeat;
background-size: 100%;
img {
width: 100%;
height: 100%;
}
}
.rightContent {
height: 1.75rem;
width: 5.8rem;
.topContent {
font-size: 0.2rem;
color: #000;
font-weight: 600;
}
.centerContent {
display: flex;
justify-content: space-between;
font-size: 0.14rem;
margin: 0.15rem 0 0.2rem 0;
}
}
}
:deep(.ant-pagination) {
float: right;
}
:deep(.ant-pagination) {
text-align: end;
}
}
</style> </style>
<style lang="less"> <style lang="less">
.wrj { .wrj {
.ant-modal-body { .ant-modal-body {
height: 700px !important; height: 700px !important;
}
}
.modalClass {
.ant-modal-body {
height: 4rem !important;
overflow-y: scroll !important; overflow-y: scroll !important;
} }
.ant-modal-title {
font-weight: 600;
}
.ant-modal-content {
.ant-modal-header {
border-bottom: 0 !important;
}
}
}
.appModal {
.ant-modal-body {
height: 4.8rem !important;
overflow-y: scroll !important;
}
.ant-modal-title {
font-weight: 600;
}
.ant-modal-content {
.ant-modal-header {
border-bottom: 0 !important;
}
}
} }
.single-preview-modal { .single-preview-modal {
.ant-modal-header { .ant-modal-header {