dbd-meeting-html/src/views/admin/meeting/ShowroomRecordInfo.vue

<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered='false'>

    <div class='back' @click='backPage'>
      <a-icon type='rollback' />
      <div class='label'>返回</div>
    </div>
    <div style='display: flex;margin-bottom: 20px'>
      <span style='width: 20px;display: block;font-size: 25px;color: #1890ff;font-weight: bold;'>|</span>
      <span style='display: block;margin-top: 11px;font-size: 15px'>预约详情</span>
    </div>
    <a-form-model :model='form' :label-col='labelCol' :wrapper-col='wrapperCol'>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='会议主题'>
            {{ form.title }}
          </a-form-item>
        </a-col>
        <a-col :span='10'>
          <a-form-item label='来访人数' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.title }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='预约人'>
            {{ form.userName }}
          </a-form-item>
        </a-col>
        <a-col :span='10'>
          <a-form-item label='到访公司' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.customerName }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='联系方式'>
            {{ form.userPhone }}
          </a-form-item>
        </a-col>
        <a-col :span='10'>
          <a-form-item label='拟参观区域' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.visitArea }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='展厅开始时间'>
            {{ form.startTime }}
          </a-form-item>
        </a-col>
        <a-col :span='10'>
          <a-form-item label='展厅结束时间' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.endDate }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='时长'>
            {{ form.duration }}
          </a-form-item>
        </a-col>
        <a-col :span='10'>
          <a-form-item label='来参观人员' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.persons }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='订单编号'>
            {{ form.reservationNumber }}
          </a-form-item>
        </a-col>
        <a-col :span='10'>
          <a-form-item label='参观目的' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.visitType }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='讲解需求'>
            {{ form.explainNeedType == 1?'是':'否' }}
          </a-form-item>
        </a-col>
        <a-col :span='10'>
          <a-form-item label='是否需要会议室' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.meetingNeedType == 1?'是':'否' }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='摄影需求'>
            {{ form.photographType == 1?'是':'否' }}
          </a-form-item>
        </a-col>
        <a-col :span='10'>
          <a-form-item label='创建时间' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.createTime }}
          </a-form-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-card>
</template>

<script>
import {get} from '@/api/admin/meeting/showroomRecord'
// import ReservationModal from '@/views/admin/meeting/modules/ReservationModal'

export default {
  name: 'reservationInfo',

  data() {
    return {
      labelCol: { span: 12 },
      wrapperCol: { span: 8 },
      form: {
        roomContent: {}
      },
      queryParam: {
        reservationId: this.$route.query.id
      },
      actualNum : null,
      attainNum : null
    }
  },
  created() {
    this.getDetail()

  },
  methods: {
    getDetail() {
      get(this.$route.query.id).then(res => {
        this.form = res
        let persons = JSON.parse(res.persons)
        let names = persons.map(item =>item.name)
        let visitName =  names.join(",");
        this.form.persons = visitName
      })
    },
    backPage() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.back {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 100px;
  cursor: pointer;
}

.back .label {
  margin-left: 4px;
}

.recordHeadView {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
  margin: 14px auto;
  color: black;
}

.recordHeadView .shidarenshu {
  margin-left: 50px;
}

.recordHeadView .search {
  display: flex;
  justify-content: center;
  align-items: center;
}

.recordHeadView .search .searchInput {
  flex: 1;
}

.dataTable {
  width: 1000px;
  margin: 0 auto;
}

</style>