<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 && 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 && form.fileList.length"> 
 | 
        <div class="item-title">附件</div> 
 | 
        <div> 
 | 
          <FileLink 
 | 
            :links="form.fileList" 
 | 
            linkName="fileurlFull" 
 | 
            :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> 
 |