guest-security-check-system/snowy-admin-web/src/views/gsc/check/detail.vue

<template>
	<a-modal
		v-model:open="open"
		title="旅客信息查看"
		centered
		width="90%"
	>
		<div class="goods-detail">
      <div class="__cus-title_1">旅客基本信息</div>
      <a-form :model="formData">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="姓名">
              <a-input v-model:value="formData.name" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="身份证号">
              <a-input v-model:value="formData.idNo" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="国籍">
              <a-select v-model:value="formData.nationality" :disabled="true"
                        :options="cityOptions" show-search allow-clear optionFilterProp="label"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="车次/航班号">
              <a-input v-model:value="formData.travelNo" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="性别">
              <a-select v-model:value="formData.gender" :disabled="true"
                        :options="sexOptions" show-search allow-clear optionFilterProp="label"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="年龄">
              <a-input v-model:value="formData.age" :disabled="true"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="__cus-title_1">查验信息</div>
      <a-form :model="formData">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="查验时间">
              <a-input v-model:value="formData.checkTime" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="查验地点">
              <a-input v-model:value="formData.checkPlace" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="查验人">
              <a-input v-model:value="formData.checkBy" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="查验结果">
              <a-select v-model:value="formData.checkStatus" :disabled="true"
                        :options="checkStatusOptions" show-search allow-clear optionFilterProp="label"/>
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-form-item :label="formData.checkStatus == 1 ? '查验结果说明' : '查验未通过原因'">
              <a-input v-model:value="formData.checkReason" :disabled="true"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="__cus-title_1">查验过程记录</div>
      <a-timeline>
        <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
        <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
        <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
        <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
      </a-timeline>
      <div class="__cus-title_1">行李物品信息</div>
      <a-table
        style="margin-top: 10px"
        bordered
        :dataSource="formData.goods"
        :columns="[
          {title: '物品类别',dataIndex: 'goodCategory',key: 'goodCategory'},
          {title: '物品细类',dataIndex: 'goodSubclass',key: 'goodSubclass'},
          {title: '物品名称',dataIndex: 'goodName',key: 'goodName'},
          {title: '物品产地',dataIndex: 'goodPlace',key: 'goodPlace'},
          {title: '重量(千克)',dataIndex: 'weight',key: 'weight'},
          {title: '品牌',dataIndex: 'brand',key: 'brand'},
          {title: '规格型号',dataIndex: 'specModel',key: 'specModel'},
          {title: '单价',dataIndex: 'price',key: 'price'},
          {title: '币种',dataIndex: 'currency',key: 'currency'},
          {title: '数量',dataIndex: 'quantity',key: 'quantity'},
          {title: '数量单位',dataIndex: 'unit',key: 'unit'},
          {title: '发票/许可证',dataIndex: 'license',key: 'license'},
        ]"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'license'">
            <a-button type="link" primary size="small" @click="onViewImg(record.license)">查看</a-button>
          </template>
        </template>
      </a-table>
      <div class="__cus-title_1">乘坐交通工具信息</div>
      <a-form :model="formData">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="乘坐交通工具类型">
              <a-input v-model:value="formData.vehicleType" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="出发时间">
              <a-input v-model:value="formData.departTime" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="出发港口">
              <a-select v-model:value="formData.fromPort" :disabled="true"
                        :options="departurePortOptions" show-search allow-clear optionFilterProp="label"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="到达港口">
              <a-select v-model:value="formData.toPort" :disabled="true"
                        :options="arrivingPortOptions" show-search allow-clear optionFilterProp="label"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="车次/航班号">
              <a-input v-model:value="formData.travelNo" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="座位号">
              <a-input v-model:value="formData.seatNo" :disabled="true"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
		</div>
		<template #footer></template>
<!--    <a-image-preview-group-->
<!--      :style="{ display: 'none' }"-->
<!--      :preview="{-->
<!--        visible: imgOptions.visible,-->
<!--        onVisibleChange: imgOptions.setVisible,-->
<!--      }">-->
<!--      <a-image :width="200" src="https://aliyuncdn.antdv.com/vue.png" />-->
<!--      <a-image :width="200" src="https://aliyuncdn.antdv.com/logo.png" />-->
<!--    </a-image-preview-group>-->
	</a-modal>
</template>

<script setup name="enterpriseDetail">
import tool from '@/utils/tool'
import {cloneDeep} from 'lodash-es'
import basicApi from "@/api/gsc/basic";
// 抽屉状态
const open = ref(false)
const emit = defineEmits({successful: null})
// 表单数据
const formData = ref({})
const imgOptions = ref({
  visible: false,
  setVisible: (value) => {
    imgOptions.value.visible = value;
  },
  url: []
})

// 打开抽屉
const onOpen = (record, view = false) => {
	open.value = true
	if (record) {
    basicApi.passengerinfoDetail({id: record.id}).then(res => {
			formData.value = Object.assign({}, res)
		})
	}
}
// 关闭抽屉
const onClose = () => {
	// ref_detail.value?.resetFields()
	formData.value = {}
	open.value = false
}
const onViewImg = (urls) => {

}
const sexOptions = tool.dictList('lvke_sex')
const cityOptions = tool.dictList('lvke_city')
const departurePortOptions = tool.dictList('lvke_departurePort')
const arrivingPortOptions = tool.dictList('lvke_arrivingPort')
const checkStatusOptions = tool.dictList('lvke_checkStatus')
// 抛出函数
defineExpose({
	onOpen
})
</script>
<style lang="less" scoped>
.goods-detail {
	max-height: 800px;
	overflow-y: auto;
	overflow-x: hidden;
}
</style>