guest-security-check-system/snowy-admin-web/src/views/gsc/pass/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-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-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.age" :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-input v-model:value="formData.admissionTime" :disabled="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="放行时间">
              <a-input v-model:value="formData.passTime" :disabled="true"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <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>
    <div :style="{ display: 'none' }">
      <a-image-preview-group
        :preview="{
        visible: imgOptions.visible,
        onVisibleChange: imgOptions.setVisible,
      }">
        <template v-for="url in imgOptions.urls">
          <a-image :src="url" />
        </template>
      </a-image-preview-group>
    </div>
	</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;
  },
  urls: []
})

// 打开抽屉
const onOpen = (record, view = false) => {
	open.value = true
	if (record) {
    basicApi.passengerinfoDetail({id: record.id, queryType: 3}).then(res => {
			formData.value = Object.assign({}, res)
		})
	}
}
// 关闭抽屉
const onClose = () => {
	// ref_detail.value?.resetFields()
	formData.value = {}
	open.value = false
}
const onViewImg = (urls) => {
  imgOptions.value.urls = urls.split(',')
  imgOptions.value.visible = true
}
const sexOptions = tool.dictList('lvke_sex')
const cityOptions = tool.dictList('lvke_city')
const departurePortOptions = tool.dictList('lvke_departurePort')
const arrivingPortOptions = tool.dictList('lvke_arrivingPort')
// 抛出函数
defineExpose({
	onOpen
})
</script>
<style lang="less" scoped>
.goods-detail {
	max-height: 800px;
	overflow-y: auto;
	overflow-x: hidden;
}
</style>