|  |  | 
 |  |  |             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> |