dbd-meeting-html/src/views/admin/meeting/ReservationInfo.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.roomContent.meetingName }}
          </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.roomContent.typeName }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='联系方式'>
            {{ form.phone }}
          </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.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.oderNumber }}
          </a-form-item>
        </a-col>
        <a-col :span='10'>
          <a-form-item label='实收金额' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.orderMoney }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='订单状态'>
            {{ form.statusName }}
          </a-form-item>
        </a-col>
        <a-col :span='10' v-if='form.statusName == "已取消"'>
          <a-form-item label='取消原因' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.cancelResaon }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item label='使用优惠劵' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            {{ form.ticketName }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='支付时间'>
            {{ form.orderTime }}
          </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>
    <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>
    <div class='recordHeadView'>
      <div>
        <span>邀请人数：{{actualNum}}</span>
        <span class='shidarenshu'>实到人数：{{attainNum}}</span>
      </div>
      <!--      <div class='search'>-->
      <!--        <div>关键词：</div>-->
      <!--        <a-input class='searchInput' placeholder='请输入关键词' v-model='queryParam.title' />-->
      <!--      </div>-->
    </div>
    <s-table
      class='dataTable'
      :columns='columns'
      :data='loadData'
      size='default'
      ref='table'
      bordered
    >
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { get, personList } from '@/api/admin/meeting/reservation'
// import ReservationModal from '@/views/admin/meeting/modules/ReservationModal'

export default {
  name: 'reservationInfo',
  components: {
    STable
  },
  data() {
    return {
      labelCol: { span: 12 },
      wrapperCol: { span: 8 },
      form: {
        roomContent: {}
      },
      queryParam: {
        reservationId: this.$route.query.id
      },
      columns: [
        {
          title: '参会人员',
          dataIndex: 'participantName'
        },
        {
          title: '联系电话',
          dataIndex: 'participantPhone'
        },
        {
          title: '邀请人',
          dataIndex: 'userName'
        },
        {
          title: '接收时间',
          dataIndex: 'createTime'
        },
        {
          title: '是否到访',
          dataIndex: 'status'
        },
        {
          title: '到访时间',
          dataIndex: 'joinTime'
        }
      ],
      dataList: [
        {
          name: 'wqc'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return personList(Object.assign(parameter, this.queryParam))
      },
      actualNum : null,
      attainNum : null
    }
  },
  created() {
    this.getDetail()
    personList({
      reservationId: this.$route.query.id
    }).then(res => {
      this.actualNum = res.actualNum
      this.attainNum = res.attainNum
    })
  },
  methods: {
    getDetail() {
      get(this.$route.query.id).then(res => {
        console.log('getDetail', res)
        this.form = res
      })
    },
    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>