| <template> | 
|   <GlobalAlertWindow | 
|     :title="title" | 
|     :visible.sync="visible" | 
|     :confirm-working="isWorking" | 
|     @confirm="confirm" | 
|     width="600px" | 
|   > | 
|     <div class="title-style"> | 
|       <div class="header-title">{{ form.name }}</div> | 
|       <div class="item-value">{{ `${form.roomName} ${form.meetingTime}` }}</div> | 
|     </div> | 
|     <div class="content-style"> | 
|       <div class="item"> | 
|         <div class="item-title">参会人员</div> | 
|         <div> | 
|           {{ form.sysList.map((item) => `${item.realName}`).join(",") }} | 
|         </div> | 
|       </div> | 
|       <div class="item"> | 
|         <div class="item-title">会议内容</div> | 
|         <div class="item-value">{{ form.content || "无" }}</div> | 
|       </div> | 
|       <div v-if="form.projectList.length" class="item"> | 
|         <div class="">服务项</div> | 
|         <div class="item-value"> | 
|           {{ form.projectList.map((item) => item.projectName).join(" | ") }} | 
|         </div> | 
|       </div> | 
|       <div class="item" v-if="form.fileList.length"> | 
|         <div class="item-title">附件</div> | 
|         <div> | 
|           <FileLink | 
|             :links="form.fileList" | 
|             linkName="fileFullUrl" | 
|             :isUpload="false" | 
|           /> | 
|         </div> | 
|       </div> | 
|       <div class="item" v-if="!!form.remark"> | 
|         <div class="item-title">备注</div> | 
|         <div class="item-value">{{ form.remark }}</div> | 
|       </div> | 
|     </div> | 
|     <div class="bottom-style"> | 
|       <div class="item-title">预约人</div> | 
|       <div class="item-value">{{ form.managerInfo }}</div> | 
|     </div> | 
|     <div slot="footer"> | 
|       <el-button type="primary" v-if="form.meetingStatus == 1" @click="openCancel('0')">撤销</el-button> | 
|       <el-button v-if="form.meetingStatus == 2" type="primary" @click="openCancel('1')">结束</el-button> | 
|       <el-button @click="visible = false">取消</el-button> | 
|     </div> | 
|     <!-- 取消/结束 --> | 
|     <el-dialog | 
|       :title="cancelParam.falg == '1' ? '结束会议' : '撤销会议'" | 
|       :visible.sync="isShowCancel" | 
|       append-to-body | 
|       width="500px" | 
|     > | 
|       <el-form style="padding: 30px"> | 
|         <el-form-item label="撤回说明"> | 
|           <el-input | 
|             type="textarea" | 
|             :rows="4" | 
|             placeholder="请输入说明。" | 
|             v-model="cancelParam.businessRemark" | 
|           > | 
|           </el-input> | 
|         </el-form-item> | 
|       </el-form> | 
|       <span slot="footer" class="dialog-footer"> | 
|         <el-button @click="isShowCancel = false">取消</el-button> | 
|         <el-button type="primary" @click="onSubCancel()">确定</el-button> | 
|       </span> | 
|     </el-dialog> | 
|   </GlobalAlertWindow> | 
| </template> | 
|   | 
| <script> | 
| import BaseOpera from '@/components/base/BaseOpera' | 
| import GlobalAlertWindow from '@/components/common/GlobalAlertWindow' | 
| import FileLink from '@/views/meeting/components/common/FileLink' | 
| import { cancelById, overBookById } from '@/api/meeting/bookings' | 
| export default { | 
|   name: 'OperaBookingsDetailWindow', | 
|   extends: BaseOpera, | 
|   components: { GlobalAlertWindow, FileLink }, | 
|   data () { | 
|     return { | 
|       // 表单数据 | 
|       form: { | 
|         id: null, | 
|         name: '', | 
|         roomName: '', | 
|         meetingTime: '', | 
|         date: '', | 
|         editDate: '', | 
|         projectList: [], | 
|         remark: '', | 
|         roomId: '', | 
|         meetingStatus: '', | 
|         startTime: '', | 
|         endTime: '', | 
|         times: [], | 
|         content: '', | 
|         sysList: [], | 
|         fileList: [], | 
|         managerInfo: '' | 
|       }, | 
|       // room: [], | 
|       sysList: [], | 
|       projectList: [], | 
|       timelist: [], | 
|   | 
|       isShowCancel: false, | 
|       cancelParam: { | 
|         flag: '0' | 
|       }, | 
|       // 验证规则 | 
|       rules: { | 
|   | 
|       } | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       api: '/meeting/bookings', | 
|       'field.id': 'id' | 
|     }) | 
|   }, | 
|   methods: { | 
|     openCancel (flag) { | 
|       this.isShowCancel = true | 
|       this.cancelParam.flag = flag | 
|     }, | 
|     onSubCancel () { | 
|       const { id } = this.form | 
|       const fn = this.cancelParam.flag === '0' ? cancelById : overBookById | 
|       fn({ id, businessRemark: this.cancelParam.businessRemark }).then(res => { | 
|         this.$tip.success('提交成功') | 
|         this.visible = false | 
|         this.isShowCancel = false | 
|         this.$emit('success') | 
|       }) | 
|     } | 
|     /** | 
|      * 打开窗口 | 
|      * @title 窗口标题 | 
|      * @target 编辑的对象 | 
|      */ | 
|     //  open (title, target) { | 
|     //   this.title = title | 
|     //   this.visible = true | 
|     //   this.timelist = [] | 
|     //   // 新建 | 
|     //   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] | 
|     //     } | 
|     //     // this.form.projectList = target.projectList ? target.projectList.map(item => item.projectId) : [] | 
|     //     // this.form.sysList = this.form.sysList ? this.form.sysList.map(item => item.userId) : [] | 
|     //     // this.form.date = target.startTime.split(' ')[0] | 
|   | 
|     //   }) | 
|     // }, | 
|   | 
|   } | 
| } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| ::v-deep .el-dialog__body { | 
|   padding: 0; | 
| } | 
| .title-style { | 
|   padding: 20px; | 
|   border-bottom: 10px #f7f7f7 solid; | 
| } | 
| .content-style { | 
|   padding: 20px; | 
|   border-bottom: 10px #f7f7f7 solid; | 
| } | 
| .item { | 
|   padding: 5px 0; | 
| } | 
| .header-title { | 
|   font-size: 16px; | 
|   font-weight: 600; | 
|   padding-bottom: 5px; | 
| } | 
| .item-title { | 
|   font-size: 16px; | 
|   color: #999; | 
|   padding-bottom: 5px; | 
| } | 
| .item-value { | 
|   font-size: 14px; | 
|   color: #111; | 
| } | 
| .bottom-style { | 
|   padding: 20px; | 
| } | 
| </style> |