|  |  |  | 
|---|
|  |  |  | class="time-item" | 
|---|
|  |  |  | v-for="(item, index) in timelist" | 
|---|
|  |  |  | :key="item.id" | 
|---|
|  |  |  | :class="form.times.indexOf(index)!=-1?'time-item-sel': item.isUse ? 'time-item-disable' : ''" | 
|---|
|  |  |  | :class="{ | 
|---|
|  |  |  | 'time-item-sel': form.times.indexOf(index)!=-1, | 
|---|
|  |  |  | 'time-item-disable': item.isUse, | 
|---|
|  |  |  | 'disable': item.bookingTimeId | 
|---|
|  |  |  | }" | 
|---|
|  |  |  | @click="selectTimes(index, item)" | 
|---|
|  |  |  | >{{ `${item.startTime}-${item.endTime}` }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <el-input v-model="form.name" placeholder="请输入会议主题" :maxlength="30" v-trim/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-form-item label="参会人员" prop="sysList"> | 
|---|
|  |  |  | <el-form-item label="参会人员"> | 
|---|
|  |  |  | <!-- <el-input style="width:40%" disabled v-model="sysList" placeholder="选择参会人员" v-trim/> --> | 
|---|
|  |  |  | <el-select | 
|---|
|  |  |  | v-model="form.sysList" | 
|---|
|  |  |  | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <input type="file" @change="upFiles" ref="upFile" style="display: none;" /> | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-dialog | 
|---|
|  |  |  | title="会议室预约情况" | 
|---|
|  |  |  | :visible.sync="isShowDetail" | 
|---|
|  |  |  | append-to-body | 
|---|
|  |  |  | width="600px" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div class="detail_modal"> | 
|---|
|  |  |  | <div class="h1">{{ activeInfo.meetingName }}</div> | 
|---|
|  |  |  | <div class="line"> | 
|---|
|  |  |  | <div class="label">会议时间</div> | 
|---|
|  |  |  | <div class="value" v-if="activeInfo.meetingDate"> | 
|---|
|  |  |  | {{ activeInfo.meetingDate.slice(5) }} {{ activeInfo.meetingTime }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="line"> | 
|---|
|  |  |  | <div class="label">会议室</div> | 
|---|
|  |  |  | <div class="value">{{ activeInfo.roomName }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="line"> | 
|---|
|  |  |  | <div class="label">预约人</div> | 
|---|
|  |  |  | <div class="value">{{ activeInfo.bookingUserName }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <el-button @click="isShowDetail = false">关闭</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-dialog> | 
|---|
|  |  |  | </GlobalAlertWindow> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | import BaseOpera from '@/components/base/BaseOpera' | 
|---|
|  |  |  | import GlobalAlertWindow from '@/components/common/GlobalAlertWindow' | 
|---|
|  |  |  | import FileLink from '@/views/meeting/components/common/FileLink' | 
|---|
|  |  |  | import { uploadFileLocal as upload } from '@/api/system/common' | 
|---|
|  |  |  | import { upload } from '@/api/system/common' | 
|---|
|  |  |  | import { fetchList as userList } from '@/api/system/user' | 
|---|
|  |  |  | import { findListByObjId } from '@/views/meeting/api/projects' | 
|---|
|  |  |  | import { findList } from '@/views/meeting/api/roomTime' | 
|---|
|  |  |  | import { findListByObjId } from '@/api/meeting/projects' | 
|---|
|  |  |  | import { BookDetailById } from '@/api/meeting/bookings' | 
|---|
|  |  |  | import { findList } from '@/api/meeting/roomTime' | 
|---|
|  |  |  | import { numRule, arrayRule } from '@/utils/form' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'OperaBookingsWindow', | 
|---|
|  |  |  | 
|---|
|  |  |  | times: [], | 
|---|
|  |  |  | content: '', | 
|---|
|  |  |  | sysList: [], | 
|---|
|  |  |  | fileList: [], | 
|---|
|  |  |  | fileList: [] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | activeInfo: {}, | 
|---|
|  |  |  | isShowDetail: false, | 
|---|
|  |  |  | isEdit: false, | 
|---|
|  |  |  | // room: [], | 
|---|
|  |  |  | sysList: [], | 
|---|
|  |  |  | 
|---|
|  |  |  | // 验证规则 | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | roomId: [ | 
|---|
|  |  |  | { required: true, validator: numRule, message: '请选择关联会议室', tigger: 'change' } | 
|---|
|  |  |  | { required: true, validator: numRule, message: '请选择关联会议室', tigger: 'change' } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | date: [ | 
|---|
|  |  |  | { required: true, message: '请选择预定日期', tigger: 'change' } | 
|---|
|  |  |  | { required: true, message: '请选择预定日期', tigger: 'change' } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | times: [ | 
|---|
|  |  |  | { required: true, validator: arrayRule, message: '请选择预约时间', tigger: 'change' } | 
|---|
|  |  |  | { required: true, validator: arrayRule, message: '请选择预约时间', tigger: 'change' } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | sysList: [ | 
|---|
|  |  |  | { required: true, validator: arrayRule, message: '请选择参会人员', tigger: 'change' } | 
|---|
|  |  |  | { required: true, validator: arrayRule, message: '请选择参会人员', tigger: 'change' } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | name: [ | 
|---|
|  |  |  | { required: true, message: '请选择输入会议主题', tigger: 'blur' } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | { required: true, message: '请选择输入会议主题', tigger: 'blur' } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | // content: [ | 
|---|
|  |  |  | //  { required: true, message: '请输入会议内容', tigger: 'blur' } | 
|---|
|  |  |  | // ], | 
|---|
|  |  |  | 
|---|
|  |  |  | inject: ['rooms'], | 
|---|
|  |  |  | created () { | 
|---|
|  |  |  | this.config({ | 
|---|
|  |  |  | api: '@/views/meeting/api/bookings', | 
|---|
|  |  |  | api: '/meeting/bookings', | 
|---|
|  |  |  | 'field.id': 'id' | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | userList({ | 
|---|
|  |  |  | page: 1, | 
|---|
|  |  |  | capacity: 9999, | 
|---|
|  |  |  | model: { realname: this.filterText }, | 
|---|
|  |  |  | model: { realname: this.filterText, memberType: 2, companyType: 1 } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .then(res => { | 
|---|
|  |  |  | console.log('userList', res); | 
|---|
|  |  |  | console.log('userList', res) | 
|---|
|  |  |  | this.sysList = res.records | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | * @title 窗口标题 | 
|---|
|  |  |  | * @target 编辑的对象 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | open (title, target) { | 
|---|
|  |  |  | open (title, target) { | 
|---|
|  |  |  | this.title = title | 
|---|
|  |  |  | this.visible = true | 
|---|
|  |  |  | this.timelist = [] | 
|---|
|  |  |  | 
|---|
|  |  |  | if (target == null) { | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.$refs.form.resetFields() | 
|---|
|  |  |  | console.log(this.form.content); | 
|---|
|  |  |  | debugger | 
|---|
|  |  |  | this.form[this.configData['field.id']] = null | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | return | 
|---|
|  |  |  | 
|---|
|  |  |  | this.selectRoom(this.form.roomId) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | selectRoom(objId) { | 
|---|
|  |  |  | selectRoom (objId) { | 
|---|
|  |  |  | this.getTimes() | 
|---|
|  |  |  | findListByObjId({ | 
|---|
|  |  |  | objId, | 
|---|
|  |  |  | objType: 0, | 
|---|
|  |  |  | objId: objId, | 
|---|
|  |  |  | objType: 0 | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .then(res => { | 
|---|
|  |  |  | this.projectList = res | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | selectDate(v) { | 
|---|
|  |  |  | selectDate (v) { | 
|---|
|  |  |  | // console.log(v); | 
|---|
|  |  |  | this.getTimes() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getTimes(isInit=false) { | 
|---|
|  |  |  | getTimes (isInit = false) { | 
|---|
|  |  |  | this.form.times = [] | 
|---|
|  |  |  | this.timelist = [] | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | selectTimes(index, item) { | 
|---|
|  |  |  | getDetail (id) { | 
|---|
|  |  |  | BookDetailById({ | 
|---|
|  |  |  | id | 
|---|
|  |  |  | }).then(res => { | 
|---|
|  |  |  | this.activeInfo = res | 
|---|
|  |  |  | this.isShowDetail = true | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | selectTimes (index, item) { | 
|---|
|  |  |  | if (item.bookingTimeId) { | 
|---|
|  |  |  | this.getDetail(item.bookingTimeId) | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (this.isEdit) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | let tempIndex = this.form.times.indexOf(index) | 
|---|
|  |  |  | const tempIndex = this.form.times.indexOf(index) | 
|---|
|  |  |  | if (tempIndex != -1) { | 
|---|
|  |  |  | if (tempIndex==0) { | 
|---|
|  |  |  | if (tempIndex == 0) { | 
|---|
|  |  |  | // console.log(this.form.times); | 
|---|
|  |  |  | // debugger | 
|---|
|  |  |  | this.form.times.splice(0, 1) | 
|---|
|  |  |  | } else if (tempIndex==this.form.times.length-1) { | 
|---|
|  |  |  | } else if (tempIndex == this.form.times.length - 1) { | 
|---|
|  |  |  | this.form.times.splice(tempIndex, 1) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | if (item.isUse) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (this.form.times.length && index+1 !== this.form.times[0] && index-1 !== this.form.times[this.form.times.length-1]) { | 
|---|
|  |  |  | if (this.form.times.length && index + 1 !== this.form.times[0] && index - 1 !== this.form.times[this.form.times.length - 1]) { | 
|---|
|  |  |  | this.$message.error('预约时间必须是相邻的!') | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.form.times.push(index) | 
|---|
|  |  |  | this.form.times.sort((x,y)=> x - y) | 
|---|
|  |  |  | this.form.times.sort((x, y) => x - y) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // console.log(this.form.times); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | upFiles(file) { | 
|---|
|  |  |  | upFiles (file) { | 
|---|
|  |  |  | const formdate = new FormData() | 
|---|
|  |  |  | this.isUploading = true | 
|---|
|  |  |  | formdate.append('file', file.target.files[0]) | 
|---|
|  |  |  | 
|---|
|  |  |  | this.isWorking = true | 
|---|
|  |  |  | let sysList = [...this.form.sysList] | 
|---|
|  |  |  | sysList = sysList.map(item => { | 
|---|
|  |  |  | return {userId: item} | 
|---|
|  |  |  | return { userId: item } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | let projectList = [...this.form.projectList] | 
|---|
|  |  |  | projectList = projectList.map(item => { | 
|---|
|  |  |  | return {projectId: item} | 
|---|
|  |  |  | return { projectId: item } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | let bookingTimeList = [] | 
|---|
|  |  |  | const bookingTimeList = [] | 
|---|
|  |  |  | this.form.times.forEach(item => { | 
|---|
|  |  |  | bookingTimeList.push({ | 
|---|
|  |  |  | timeId: this.timelist[item].id, | 
|---|
|  |  |  | id: this.timelist[item].bookingTimeId | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | let startTime = this.form.date + ' ' + this.timelist[this.form.times[0]].startTime + ':00' | 
|---|
|  |  |  | let endTime = this.form.date + ' ' + this.timelist[this.form.times[this.form.times.length-1]].endTime + ':00' | 
|---|
|  |  |  | const startTime = this.form.date + ' ' + this.timelist[this.form.times[0]].startTime + ':00' | 
|---|
|  |  |  | const endTime = this.form.date + ' ' + this.timelist[this.form.times[this.form.times.length - 1]].endTime + ':00' | 
|---|
|  |  |  | this.api.create({ | 
|---|
|  |  |  | ...this.form, | 
|---|
|  |  |  | sysList, | 
|---|
|  |  |  | 
|---|
|  |  |  | this.$emit('success') | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | // this.$tip.apiFailed(e) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .finally(() => { | 
|---|
|  |  |  | this.isWorking = false | 
|---|
|  |  |  | 
|---|
|  |  |  | this.isWorking = true | 
|---|
|  |  |  | let sysList = [...this.form.sysList] | 
|---|
|  |  |  | sysList = sysList.map(item => { | 
|---|
|  |  |  | return {userId: item} | 
|---|
|  |  |  | return { userId: item } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | let projectList = [...this.form.projectList] | 
|---|
|  |  |  | projectList = projectList.map(item => { | 
|---|
|  |  |  | return {projectId: item} | 
|---|
|  |  |  | return { projectId: item } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | let bookingTimeList = [] | 
|---|
|  |  |  | const bookingTimeList = [] | 
|---|
|  |  |  | this.form.times.forEach(item => { | 
|---|
|  |  |  | bookingTimeList.push({ | 
|---|
|  |  |  | timeId: this.timelist[item].id, | 
|---|
|  |  |  | id: this.timelist[item].bookingTimeId | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | let startTime = this.form.date + ' ' + this.timelist[this.form.times[0]].startTime + ':00' | 
|---|
|  |  |  | let endTime = this.form.date + ' ' + this.timelist[this.form.times[this.form.times.length-1]].endTime + ':00' | 
|---|
|  |  |  | const startTime = this.form.date + ' ' + this.timelist[this.form.times[0]].startTime + ':00' | 
|---|
|  |  |  | const endTime = this.form.date + ' ' + this.timelist[this.form.times[this.form.times.length - 1]].endTime + ':00' | 
|---|
|  |  |  | this.api.updateById({ | 
|---|
|  |  |  | ...this.form, | 
|---|
|  |  |  | sysList, | 
|---|
|  |  |  | 
|---|
|  |  |  | this.$emit('success') | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | // this.$tip.apiFailed(e) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .finally(() => { | 
|---|
|  |  |  | this.isWorking = false | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .time-item-disable { | 
|---|
|  |  |  | color: #e4e4e4; | 
|---|
|  |  |  | border-color: #999; | 
|---|
|  |  |  | background-color: #999; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .disable{ | 
|---|
|  |  |  | border-color: #999; | 
|---|
|  |  |  | background-color: #999; | 
|---|
|  |  |  | color: #111; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .detail_modal { | 
|---|
|  |  |  | padding: 20px 16px; | 
|---|
|  |  |  | .title { | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | font-size: 16px; | 
|---|
|  |  |  | margin-bottom: 20px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .h1 { | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | font-size: 16px; | 
|---|
|  |  |  | margin-bottom: 15px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | .label { | 
|---|
|  |  |  | width: 70px; | 
|---|
|  |  |  | color: #888888; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .value { | 
|---|
|  |  |  | color: #333333; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </style> | 
|---|