<template>
|
<GlobalAlertWindow v-loading="isUploading" :title="title" :visible.sync="visible" :confirm-working="isWorking"
|
@confirm="confirm">
|
<el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：">
|
<el-form-item label="会议室名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入会议室名称" :maxlength="10" v-trim />
|
</el-form-item>
|
<el-form-item label="开放时间" prop="timeRange">
|
<el-time-picker is-range value-format="HH:mm" format="HH:mm" v-model="timeRange" range-separator="至"
|
start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" @change="selectRange"></el-time-picker>
|
</el-form-item>
|
<el-form-item label="粒度分钟" prop="intervalTime">
|
<el-input v-model="form.intervalTime" type="number" placeholder="请输入时间粒度（分钟）" v-trim />
|
</el-form-item>
|
<el-form-item label="容纳人数" prop="limitNum">
|
<el-input v-model="form.limitNum" type="number" placeholder="请输入容纳人数" v-trim />
|
</el-form-item>
|
<el-form-item label="管理员" prop="sysList">
|
<el-select style="width: 100%" v-model="form.sysList" filterable multiple clearable placeholder="请选择部门">
|
<!-- :label="`${item.department.name}-${item.realname}`" -->
|
<el-option v-for="item in userList()" :key="item.id" :value="item.id"
|
:label="item.companyId ? `${item.realname}-${item.companyName}` : item.realname" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="提供服务项目" prop="projectList">
|
<el-checkbox-group v-model="form.projectList">
|
<el-checkbox v-for="project in projectList" :label="project.id" :key="project.id">{{ project.name
|
}}</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="空闲展示内容" prop="fileType">
|
<el-radio v-model="form.fileType" @change="changeFile" :label="2">无</el-radio>
|
<el-radio v-model="form.fileType" @change="changeFile" :label="0">图片</el-radio>
|
<el-radio v-model="form.fileType" @change="changeFile" :label="1">视频</el-radio>
|
</el-form-item>
|
<el-form-item v-if="form.fileType == 0" label="展示图片" prop="imgurl">
|
<div class="upload_wrap">
|
<el-upload class="avatar-uploader" accept=".png,.jpg,.jpeg" :action="uploadImgUrl" :data="uploadData"
|
:show-file-list="false" :before-upload="beforeAvatarUpload" :on-error="uploadError"
|
:on-success="handleImgSuccess">
|
<div>
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
</div>
|
</el-upload>
|
<div v-for="item, i in form.multifileList" class="img_wrap">
|
<img :src="item.fileurlFull" class="img">
|
<i class="el-icon-error del" @click="imgDel(i)"></i>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item v-if="form.fileType == 1" label="展示视频" prop="imgurl">
|
<UploadAvatarVideo :file="{ 'videourlfull': form.videoFullUrl, 'videourl': form.videourl }"
|
:uploadData="uploadData" @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true" />
|
</el-form-item>
|
<el-form-item label="使用须知" prop="tips">
|
<el-input v-model="form.tips" type="textarea" placeholder="请输入使用须知" v-trim />
|
</el-form-item>
|
</el-form>
|
</GlobalAlertWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
|
import UploadAvatarVideo from '@/components/common/UploadAvatarVideo'
|
import { numRule } from '@/utils/form'
|
import { fetchList } from '@/api/meeting/projects'
|
import { Loading } from 'element-ui'
|
export default {
|
name: 'OperaRoomsWindow',
|
extends: BaseOpera,
|
components: { GlobalAlertWindow, UploadAvatarVideo },
|
data() {
|
let timeRangeRule = (rule, value, callBack) => {
|
if (!this.form.startTime) {
|
callBack(new Error('请选择开始时间'))
|
return
|
}
|
if (!this.form.endTime) {
|
callBack(new Error('请选择结束时间'))
|
return
|
}
|
callBack()
|
}
|
return {
|
uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/upload',
|
isUploading: false,
|
uploadData: {
|
folder: 'projects'
|
},
|
timeRange: ['', ''],
|
loading: null,
|
// 表单数据
|
form: {
|
id: null,
|
sysList: [],
|
multifileList: [],
|
projectList: [],
|
createDate: '',
|
editor: '',
|
editDate: null,
|
isdeleted: 0,
|
fileType: 2,
|
name: '',
|
remark: '',
|
startTime: '',
|
endTime: '',
|
limitNum: 0,
|
imgurl: '',
|
imgFullUrl: '',
|
tips: '',
|
status: 0,
|
intervalTime: 0
|
},
|
user: [],
|
projectList: [],
|
// 验证规则
|
rules: {
|
name: [
|
{ required: true, message: '请输入会议室名称', tigger: 'blur' }
|
],
|
intervalTime: [
|
{ required: true, validator: numRule, message: '请输入时间粒度', tigger: 'blur' }
|
],
|
timeRange: [
|
{ required: true, validator: timeRangeRule, tigger: 'change' }
|
]
|
}
|
}
|
},
|
inject: ['userList'],
|
created() {
|
this.config({
|
api: '/meeting/rooms',
|
'field.id': 'id'
|
})
|
// realname: this.filterText
|
fetchList({
|
page: 1,
|
capacity: 9999,
|
model: {},
|
})
|
.then(res => {
|
this.projectList = res.records
|
})
|
},
|
methods: {
|
/**
|
* 打开窗口
|
* @title 窗口标题
|
* @target 编辑的对象
|
*/
|
open(title, target) {
|
this.title = title
|
this.visible = true
|
this.timeRange = ['', '']
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
if (target.fileType == 1 && target.multifileList && target.multifileList.length > 0) {
|
this.$set(this.form, 'videoFullUrl', target.multifileList[0].fileurlFull)
|
this.$set(this.form, 'videourl', target.multifileList[0].fileurl)
|
}
|
this.timeRange = [target.startTime, target.endTime]
|
this.form.projectList = this.form.projectList ? target.projectList.map(item => item.projectId) : []
|
this.form.sysList = this.form.sysList ? this.form.sysList.map(item => item.userId) : []
|
// console.log(this.form.imgFullUrl);
|
})
|
},
|
imgDel(i) {
|
this.form.multifileList.splice(i, 1)
|
},
|
handleImgSuccess(res) {
|
this.$nextTick(() => {
|
this.loading.close()
|
})
|
const list = [...this.form.multifileList]
|
|
if (res.code == 200) {
|
let { data } = res
|
list.push({
|
fileurl: data.imgaddr,
|
fileurlFull: data.url,
|
type: 0
|
})
|
this.$set(this.form, 'multifileList', list)
|
|
}
|
},
|
uploadError() {
|
// this.$message.error('上传失败')
|
this.$nextTick(() => {
|
this.loading.close()
|
})
|
},
|
// // 拦截
|
beforeAvatarUpload(file) {
|
this.loading = Loading.service({
|
lock: true,
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
return true
|
},
|
selectRange(v) {
|
// console.log(this.timeRange);
|
console.log(v)
|
this.form.startTime = v[0]
|
this.form.endTime = v[1]
|
console.log(this.form.startTime, this.form.endTime)
|
},
|
changeFile() {
|
this.$set(this.form, 'multifileList', [])
|
},
|
uploadAvatarSuccess(file) {
|
console.log('file', file)
|
let temp = []
|
temp.push({
|
fileurl: file.imgurl,
|
fileurlFull: file.imgurlfull,
|
type: 1
|
})
|
this.form.multifileList = temp
|
this.$set(this.form, 'videourl', file.imgurl)
|
this.$set(this.form, 'videoFullUrl', file.imgurlfull)
|
},
|
// 确认新建
|
__confirmCreate() {
|
this.$refs.form.validate((valid) => {
|
// debugger
|
if (!valid) {
|
return
|
}
|
// console.log(this.form);
|
// debugger
|
// 调用新建接口
|
this.isWorking = true
|
let sysList = [...this.form.sysList]
|
sysList = sysList.map(item => {
|
return { userId: item }
|
})
|
let projectList = [...this.form.projectList]
|
projectList = projectList.map(item => {
|
return { projectId: item }
|
})
|
this.api.create({
|
...this.form,
|
sysList,
|
projectList
|
})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('新建成功')
|
this.$emit('success')
|
})
|
.catch(e => {
|
// this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
})
|
},
|
// 确认修改
|
__confirmEdit() {
|
this.$refs.form.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
console.log(this.form)
|
debugger
|
// 调用新建接口
|
this.isWorking = true
|
let sysList = [...this.form.sysList]
|
sysList = sysList.map(item => {
|
return { userId: item }
|
})
|
let projectList = [...this.form.projectList]
|
projectList = projectList.map(item => {
|
return { projectId: item }
|
})
|
this.api.updateById({
|
...this.form,
|
sysList,
|
projectList
|
})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('修改成功')
|
this.$emit('success')
|
})
|
.catch(e => {
|
// this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
$image-width: 90px;
|
|
.upload_wrap {
|
display: flex;
|
|
.img_wrap {
|
margin-left: 10px;
|
border: 1px dashed #d9d9d9;
|
width: $image-width;
|
height: $image-width;
|
border-radius: 6px;
|
position: relative;
|
|
.img {
|
width: $image-width;
|
height: $image-width;
|
}
|
|
.del {
|
position: absolute;
|
top: -6px;
|
right: -6px;
|
cursor: pointer;
|
color: red;
|
}
|
}
|
}
|
|
.avatar-uploader {
|
width: $image-width;
|
height: $image-width;
|
}
|
|
::v-deep .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
|
.avatar-uploader .el-upload:hover {
|
border-color: #409EFF;
|
}
|
|
.avatar-uploader-icon {
|
line-height: 90px;
|
font-size: 28px;
|
color: #8c939d;
|
width: $image-width;
|
height: $image-width;
|
text-align: center;
|
}
|
|
.avatar {
|
width: 90px;
|
max-height: 90px;
|
display: block;
|
}
|
</style>
|
