dbd-meeting-html/src/views/admin/meeting/VisitorPersonInfo.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 :labelCol='labelCol' :wrapperCol='wrapperCol' label='被访人联系方式'>
            {{ 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-row>
      <a-row>
        <a-col :span='10'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='来访人照片'>
            {{ form.userName }}
          </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 :labelCol='labelCol' :wrapperCol='wrapperCol' label='来访人单位'>
            {{ form.customerName }}
          </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 :labelCol='labelCol' :wrapperCol='wrapperCol' label='性别'>
            {{ form.customerName }}
          </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 :labelCol='labelCol' :wrapperCol='wrapperCol' label='身份证类型'>
            {{ form.customerName }}
          </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 :labelCol='labelCol' :wrapperCol='wrapperCol' label='身份证号'>
            {{ form.customerName }}
          </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-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 :labelCol='labelCol' :wrapperCol='wrapperCol' label='审批时间'>
            {{ form.customerName }}
          </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>
    <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 { getVisitorPersonId } from '@/api/admin/meeting/visitorPerson'




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'
        },
      ],
      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() {
      getVisitorPersonId(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>