bpass-ui/src/components/RecordListDetailDialog.vue

<template>
  <!-- 出入境记录列表对话框 -->
  <el-dialog :title="recordListTitle" v-model="recordListOpen" width="1200px" append-to-body>
    <el-table :data="recordList" v-loading="recordListLoading" @row-click="handleRecordRowClick">
      <el-table-column label="姓名" align="center" prop="fullName" width="200"/>
      <el-table-column label="证件号码" align="center" prop="idNumber"/>
      <el-table-column label="性别" align="center" prop="genderCn"/>
      <el-table-column label="出生日期" align="center" prop="birthDate" width="100">
        <template #default="scope">
          <span>{{ parseTime(scope.row.birthDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="国家/地区" align="center" prop="countryName"/>
      <el-table-column label="民族" align="center" prop="ethnicityName"/>
      <el-table-column label="出入标识" align="center" prop="inOutFlag"/>
      <el-table-column label="出入时间" align="center" prop="inOutTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.inOutTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出入口岸" align="center" prop="portCode">
        <template #default="scope">
          <span>{{ scope.row.portCode }}-{{ scope.row.portName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="前往地/出发地" align="center" prop="destinationName"/>
<!--      <el-table-column label="导入时间" align="center" prop="createTime" width="150">-->
<!--        <template #default="scope">-->
<!--          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <!-- 出入境记录明细对话框 -->
    <el-dialog :title="detailTitle" v-model="recordDetailOpen" width="900px" append-to-body>
      <el-form :model="detailForm" label-width="120px" disabled>
        <!-- 个人信息 -->
        <div
            style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">
          个人信息
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="人员类别：">
              <span>{{ detailForm.personnelCategoryName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名：">
              <span>{{ detailForm.fullName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别：">
              <span>{{ detailForm.genderCn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期：">
              <span>{{ parseTime(detailForm.birthDate, '{y}-{m}-{d}') }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="国家/地区：">
              <span>{{ detailForm.countryCode }}-{{ detailForm.countryName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族：">
              <span>{{ detailForm.ethnicityName }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 证件信息 -->
        <div
            style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">
          证件信息
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="证件类别：">
              <span>{{ detailForm.idTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码：">
              <span>{{ detailForm.idNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签证类型：">
              <span>{{ detailForm.visaTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签证号码：">
              <span>{{ detailForm.visaNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="停留期：">
              <span>{{ detailForm.stayDuration }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 出入境信息 -->
        <div
            style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">
          出入境信息
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="出入标识：">
              <span>{{ detailForm.inOutFlag }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出入时间：">
              <span>{{ parseTime(detailForm.inOutTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出入口岸：">
              <span>{{ detailForm.portCode }}-{{ detailForm.portName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交通方式：">
              <span>{{ detailForm.transportMode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交通工具：">
              <span>{{ detailForm.transportVehicle }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="前往地/出发地：">
              <span>{{ detailForm.destinationCode }}-{{ detailForm.destinationName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出入境事由：">
              <span>{{ detailForm.reasonName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发证机关：">
              <span>{{ detailForm.issuingAuthorityCode }}-{{ detailForm.issuingAuthorityName }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 其他信息 -->
        <div
            style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">
          其他信息
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="自助通道标记：">
              <span>{{ detailForm.selfServiceFlag }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="后台补录标记：">
              <span>{{ detailForm.backfillFlag }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间：">
              <span>{{ parseTime(detailForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="疑难字说明：">
              <span>{{ detailForm.remark }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="recordDetailOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from 'vue';
import {getRecords} from "@/api/biz/anal";
import {parseTime} from "@/utils/ruoyi";

// 定义组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  personInfo: {
    type: Object,
    default: () => ({})
  },
  dateRange: {
    type: Array,
    default: () => []
  }
});

// 定义事件
const emit = defineEmits(['update:visible', 'close']);

// 响应式数据
const recordListOpen = ref(false);
const recordListLoading = ref(false);
const recordListTitle = ref("出入境记录列表");
const recordList = ref([]);

const recordDetailOpen = ref(false);
const detailTitle = ref("详细信息");
const detailForm = ref({});

// 监听 visible 属性变化
watch(() => props.visible, (newVal) => {
  recordListOpen.value = newVal;
  if (newVal && props.personInfo) {
    loadRecordList();
  }
});

// 监听对话框关闭
watch(() => recordListOpen.value, (newVal) => {
  if (!newVal) {
    emit('update:visible', false);
    emit('close');
  }
});

// 加载记录列表
function loadRecordList() {
  if (!props.personInfo || !props.personInfo.idNumber) {
    console.error('缺少人员信息');
    return;
  }

  recordListLoading.value = true;

  // 准备查询参数
  const params = {};
  if (props.dateRange && props.dateRange.length === 2) {
    params.startDate = props.dateRange[0];
    params.endDate = props.dateRange[1];
  }

  // 添加证件号码参数
  params.idNumber = props.personInfo.idNumber;

  getRecords(params).then(response => {
    const records = response.rows || response.data || [];
    recordList.value = records;
    recordListTitle.value = `${props.personInfo.fullName}的出入境记录列表 (${records.length}条记录)`;
  }).catch(error => {
    console.error('获取出入境记录失败:', error);
    recordList.value = [];
    recordListTitle.value = `${props.personInfo.fullName}的出入境记录列表 (0条记录)`;
  }).finally(() => {
    recordListLoading.value = false;
  });
}

// 处理记录列表行点击事件
function handleRecordRowClick(recordRow) {
  detailForm.value = {...recordRow};
  detailTitle.value = `详细信息 - ${recordRow.fullName}`;
  recordDetailOpen.value = true;
}
</script>