会议室代码提交
This commit is contained in:
zhangzhuliang
parent
810e183611
commit
b1aae6175b
|
|
@ -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>
|
||||
|
|
@ -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="面积（m²）"
|
||||
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>
|
||||
|
|
@ -370,6 +370,39 @@ export function getDevelopDocTree(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) {
|
||||
return request({
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
|
|
@ -6,7 +6,7 @@
|
|||
<detailsPageconetentTree />
|
||||
</div>
|
||||
<div class="details-pageconetent-left" v-else>
|
||||
<detailsPageInfrastructureTree />
|
||||
<detailsPageInfrastructureTree v-show="flag != '6'" />
|
||||
</div>
|
||||
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
|
||||
<div class="top-title">
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="top-content-father">
|
||||
<infrastructurePage />
|
||||
<infrastructurePage @add="handleAdd" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" v-else>
|
||||
|
|
@ -742,6 +742,12 @@
|
|||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
//会议室传的标识6
|
||||
const flag = ref('')
|
||||
|
||||
const handleAdd = (value) => {
|
||||
flag.value = value
|
||||
}
|
||||
const titleName = ref(titleNameArray)
|
||||
|
||||
const openMonitor = () => {
|
||||
|
|
@ -1446,6 +1452,8 @@
|
|||
getShoppingCartList,
|
||||
whoShow1,
|
||||
applyAll,
|
||||
handleAdd,
|
||||
flag,
|
||||
abilitySquare,
|
||||
visibleAbilitySquare,
|
||||
showAbilitySquare,
|
||||
|
|
|
|||
|
|
@ -27,6 +27,364 @@
|
|||
</span>
|
||||
</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>
|
||||
支持doc、docx、PDF等格式支撑材料上传，文件大小不超过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">
|
||||
<video-surveillance></video-surveillance>
|
||||
|
|
@ -249,22 +607,38 @@
|
|||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import VideoSurveillance from '@/views/home/videoSurveillance'
|
||||
// import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
// import { dataType } from 'element-plus/es/components/table-v2/src/common'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message, Upload } from 'ant-design-vue'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
watch,
|
||||
defineComponent,
|
||||
nextTick,
|
||||
} from 'vue'
|
||||
import {
|
||||
getCameraByParentId,
|
||||
getStreamByChannelCode,
|
||||
getCameraAllLabel,
|
||||
} from '@/api/videoSurveillance'
|
||||
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 dayjs from 'dayjs'
|
||||
import { Form } from 'ant-design-vue'
|
||||
const current = ref(1)
|
||||
const videoTotal = ref(0)
|
||||
const router = useRouter()
|
||||
|
|
@ -307,6 +681,78 @@
|
|||
showSizeChanger: true,
|
||||
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({
|
||||
// 地图搜索初始化数据
|
||||
parentId: '',
|
||||
|
|
@ -320,6 +766,29 @@
|
|||
labelCodes: [],
|
||||
})
|
||||
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(() => {
|
||||
if (jcssType.value) {
|
||||
tabClick(0, jcssType.value)
|
||||
|
|
@ -349,7 +818,7 @@
|
|||
const tabList = ref([
|
||||
{
|
||||
title: '设施类型',
|
||||
content: ['视频资源', '云资源', '感知资源'],
|
||||
content: ['视频资源', '云资源', '感知资源', '会议室'],
|
||||
},
|
||||
{
|
||||
title: '视频标签',
|
||||
|
|
@ -429,6 +898,153 @@
|
|||
}
|
||||
let clickList = ref([]) //存储点击的tab
|
||||
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')
|
||||
//tab切换点击事件
|
||||
|
|
@ -443,10 +1059,12 @@
|
|||
selectedList.value = []
|
||||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||||
if (name == '视频资源') {
|
||||
room.value = true
|
||||
tableHeight.value = 330
|
||||
showMap.value = true
|
||||
tabList.value[1].title = '视频标签'
|
||||
} else if (name == '云资源') {
|
||||
room.value = true
|
||||
tableHeight.value = 600
|
||||
showMap.value = false
|
||||
dataSource.value = []
|
||||
|
|
@ -454,11 +1072,21 @@
|
|||
pagination.value.total = 0
|
||||
tabList.value[1].title = '云资源分类'
|
||||
} else if (name == '感知资源') {
|
||||
room.value = true
|
||||
tableHeight.value = 330
|
||||
showMap.value = true
|
||||
dataSource.value = []
|
||||
dataSource2.value = []
|
||||
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.indexOf(name),
|
||||
|
|
@ -475,6 +1103,7 @@
|
|||
clickList.value[indexFather].content[0] = name
|
||||
dataSource.value = []
|
||||
dataSource2.value = []
|
||||
room.value = true
|
||||
getCameraAllLabel().then((res) => {
|
||||
res.data.data.forEach((val) => {
|
||||
tabList.value[1].content.push({
|
||||
|
|
@ -490,6 +1119,7 @@
|
|||
})
|
||||
console.log('选中的标签code', mapSearchParam.value)
|
||||
mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
|
||||
emits('add', 1)
|
||||
getCamera()
|
||||
} else if (name == '云资源') {
|
||||
tableHeight.value = 600
|
||||
|
|
@ -510,7 +1140,9 @@
|
|||
'负载均衡',
|
||||
'公网IP',
|
||||
]
|
||||
room.value = true
|
||||
wrjFlag.value = false
|
||||
emits('add', 2)
|
||||
} else if (name == '感知资源') {
|
||||
tableHeight.value = 330
|
||||
showMap.value = true
|
||||
|
|
@ -521,8 +1153,11 @@
|
|||
tabList.value[1].content = []
|
||||
dataSource.value = []
|
||||
dataSource2.value = []
|
||||
room.value = true
|
||||
wrjFlag.value = false
|
||||
emits('add', 3)
|
||||
} else if (name == '无人机') {
|
||||
room.value = true
|
||||
tableHeight.value = 600
|
||||
showMap.value = false
|
||||
dataSource.value = []
|
||||
|
|
@ -542,6 +1177,7 @@
|
|||
})
|
||||
wrjFlag.value = true
|
||||
} else if (name == '单兵设备') {
|
||||
room.value = true
|
||||
tableHeight.value = 600
|
||||
showMap.value = false
|
||||
dataSource.value = []
|
||||
|
|
@ -560,6 +1196,24 @@
|
|||
})
|
||||
})
|
||||
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 {
|
||||
clickList.value[indexFather].content.push(name)
|
||||
}
|
||||
|
|
@ -1022,13 +1676,186 @@
|
|||
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 lang="less">
|
||||
.wrj {
|
||||
.ant-modal-body {
|
||||
height: 700px !important;
|
||||
}
|
||||
}
|
||||
.modalClass {
|
||||
.ant-modal-body {
|
||||
height: 4rem !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 {
|
||||
.ant-modal-header {
|
||||
|
|
|
|||
Loading…
Reference in New Issue