dbd-meeting-html/src/views/admin/meeting/modules/RoomOrderDetailModal.vue

<template>
  <a-modal
    title='预约详情'
    style='top: 20px'
    width='1200px'
    v-model='visible'
    :ok-button-props='{style:{display:"none"}}'
    @ok='handleSubmit'
  >
    <a-card title='会议室情况'>
      <a-tabs default-active-key='1' @change='callback'>
        <a-tab-pane key='1' tab='会议室详情'>
          <a-carousel autoplay>
            <div v-for='item in banner'>
              <img :src='item' />
            </div>
          </a-carousel>
          <a-descriptions title='' bordered>
            <a-descriptions-item label='会议室名称'>
              {{ roomDetail.name }}
            </a-descriptions-item>
            <a-descriptions-item label='会议室概况'>
              {{ roomDetail.floor }} | {{ roomDetail.roomNum }} | {{ roomDetail.capacityNum }}人 |
              {{ roomDetail.typeName }}
            </a-descriptions-item>
            <a-descriptions-item label='会议室设备'>
              {{ roomDetail.device }}
            </a-descriptions-item>
            <a-descriptions-item label='会议室描述'>
              {{ roomDetail.content }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key='2' tab='预约情况' force-render>
          <a-table :columns='recordCol' :data-source='recordList'>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card title='预约信息' style='margin-top: 10px'>
      <a-descriptions title='' bordered>
        <a-descriptions-item label='会议时间'>
          {{ order.timeSlot }}
        </a-descriptions-item>
        <a-descriptions-item label='会议名称'>
          {{ order.title }}
        </a-descriptions-item>
        <a-descriptions-item label='参会人数'>
          {{ order.personNum }}
        </a-descriptions-item>
        <a-descriptions-item label='参会领导'>
          {{ order.leader }}
        </a-descriptions-item>
        <a-descriptions-item label='预约部门'>
          {{ order.userOrg }}
        </a-descriptions-item>
        <a-descriptions-item label='会议预约人'>
          {{ order.bookingUserName }}
        </a-descriptions-item>
        <a-descriptions-item label='联系方式'>
          {{ order.bookingUserPhone }}
        </a-descriptions-item>
        <a-descriptions-item label='备注' :span='2'>
          {{ order.remark }}
        </a-descriptions-item>
        <a-descriptions-item label='会议服务' :span='3'>
          {{ order.service }}
        </a-descriptions-item>
        <a-descriptions-item label='会务人员' :span='3'>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </a-modal>
</template>
<script>
import {
  meetingRoomDetail, getDep, saveMeetingReservation, getOrderInfo
} from '@/api/admin/meeting/meetingReservation'
import pick from 'lodash.pick'
import storage from 'store'
import moment from 'moment'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getMeetingDict } from '@/api/admin/meeting/roomContent'

export default {
  name: 'RoomOrderDetailModal',
  props: {},
  components: {},
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 35 },
        sm: { span: 16 }
      },
      id: '',
      rId: '',
      banner: '',
      roomDetail: {},
      recordList: [],
      order: {},
      recordCol: [{
        title: '预约时间',
        dataIndex: 'time'
      }, {
        title: '预约单位',
        dataIndex: 'userOrg'
      }, {
        title: '预约人',
        dataIndex: 'bookingUserName'
      }, {
        title: '联系方式',
        dataIndex: 'bookingUserPhone'
      }]
    }
  },
  beforeCreate() {
  },
  created() {
  },
  mounted() {
    // this.getDict()
  },
  methods: {
    show(id) {
      this.rId = id
      getOrderInfo({ id: this.rId }).then((res) => {
        this.id = res.mr.roomId
        this.getRoomInfo()

        let sTime = res.mr.start
        let eTime = res.mr.end
        res.mr.timeSlot = moment(sTime).format('YYYY-MM-DD HH:mm') + '~' + moment(eTime).format('HH:mm')

        // 处理会议服务
        let service = ''
        for (let key in res.serve) {
          service += '#' + res.serve[key]['name'] + ' '
        }
        res.mr.service = service
        this.order = res.mr
      })
      this.visible = true
    },
    getRoomInfo() {
      meetingRoomDetail({
        roomId: this.id
      }).then(res => {
        let detail = res.room // 详细信息
        let recordList = res.mr // 预约信息
        let bannerList = [] // 轮播图
        if (detail.imgs) {
          try {
            bannerList = detail.imgs.map(item => process.env.VUE_APP_MODEL_BASE_URL + item.url)
          } catch (error) {
            console.log(`JSON error : ${error}`)
          }
        }
        let newRecordList = []
        for (let key in recordList) {
          let eachObj = recordList[key]
          let sTime = eachObj['start']
          let eTime = eachObj['end']
          eachObj['date'] = moment(sTime).format('YYYY-MM-DD')
          eachObj['time'] = moment(sTime).format('YYYY-MM-DD HH:mm') + '~' + moment(eTime).format('HH:mm')
          newRecordList.push(eachObj)
        }
        this.recordList = newRecordList
        this.roomDetail = detail
        this.banner = bannerList
        // this.getDict(detail.ext1)
      })
    }
  }
}

</script>

<style scoped>
/* For demo */
.ant-carousel >>> .slick-dots {
  height: auto;
}

.ant-carousel >>> .slick-slide img {
  border: 5px solid #fff;
  display: block;
  margin: auto;
  max-width: 300px;
}

.ant-carousel >>> .slick-thumb {
  bottom: -45px;
}

.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}

.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}

.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}

.self-item-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.self-item-cell .self-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
}

.self-item-cell .self-item:first-of-type {
  margin-right: 10px;
}

.self-item-cell .self-item .title {
  margin-right: 10px;
}

.self-item-cell .self-item .input {
  flex: 1;

}
</style>