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

<template>
  <a-card :bordered="false">
    <a-form ref="searchFormRef" :model="searchFormState" class="ant-advanced-search-form">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="姓名">
            <a-input v-model:value="searchFormState.name" placeholder="请输入姓名" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="性别">
            <a-select v-model:value="searchFormState.gender" placeholder="请选择性别"
                      :options="sexOptions" show-search allow-clear optionFilterProp="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="身份证号">
            <a-input v-model:value="searchFormState.idNo" placeholder="请输入身份证号" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="国籍">
            <a-select v-model:value="searchFormState.nationality" placeholder="请选择国籍"
                      :options="cityOptions" show-search allow-clear optionFilterProp="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="居住地">
            <a-input v-model:value="searchFormState.address" placeholder="请输入居住地" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="车次/航班号">
            <a-input v-model:value="searchFormState.travelNo" placeholder="请输入车次/航班号" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="航/车次(班)日期">
            <a-range-picker v-model:value="searchFormState.travelTime" show-time allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="是否携带行李物品">
            <a-select v-model:value="searchFormState.baggage" placeholder="请选择是否携带行李物品"
                      :options="isNoOptions" show-search allow-clear optionFilterProp="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="出发港口">
            <a-select v-model:value="searchFormState.fromPort" placeholder="请选择出发港口"
                      :options="departurePortOptions" show-search allow-clear optionFilterProp="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="到达港口">
            <a-select v-model:value="searchFormState.toPort" placeholder="请选择到达港口"
                      :options="arrivingPortOptions" show-search allow-clear optionFilterProp="label"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-button type="primary" @click="onSearch()">查询</a-button>
          <a-button style="margin: 0 8px" @click="reset">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
    <s-table
      ref="tableRef"
      :columns="columns"
      :data="loadData"
      bordered
      :row-key="(record) => record.id"
      :tool-config="toolConfig"
      v-model:filterParam="filterParam"
      :scroll="{ x: 2000 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'gender'">
          {{ $TOOL.dictTypeData('lvke_sex', record.gender) }}
        </template>
        <template v-if="column.dataIndex === 'nationality'">
          {{ $TOOL.dictTypeData('lvke_city', record.nationality) }}
        </template>
        <template v-if="column.dataIndex === 'baggage'">
          {{ $TOOL.dictTypeData('lvke_isNo', record.baggage) }}
        </template>
        <template v-if="column.dataIndex === 'fromPort'">
          {{ $TOOL.dictTypeData('lvke_departurePort', record.fromPort) }}
        </template>
        <template v-if="column.dataIndex === 'toPort'">
          {{ $TOOL.dictTypeData('lvke_arrivingPort', record.toPort) }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a @click="ref_detail.onOpen(record)">查看</a>
          </a-space>
        </template>
      </template>
    </s-table>
  </a-card>
  <Detail ref="ref_detail"/>
</template>

<script setup name="demo2">
import tool from '@/utils/tool'
import {cloneDeep} from 'lodash-es'
import Detail from './detail.vue'
import basicApi from '@/api/gsc/basic'

const {proxy} = getCurrentInstance()
const searchFormState = ref({})
const searchFormStateReal = ref({}) // 点击搜索后备份的查询参数
const searchFormRef = ref()
const tableRef = ref()
const filterParam = ref({})
const ref_detail = ref()
const toolConfig = {refresh: true, height: true, columnSetting: true, striped: false}
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '性别',
    dataIndex: 'gender',
  },
  {
    title: '身份证号',
    dataIndex: 'idNo',
  },
  {
    title: '国籍',
    dataIndex: 'nationality',
  },
  {
    title: '居住地',
    dataIndex: 'address',
  },
  {
    title: '车次/航班号',
    dataIndex: 'travelNo',
  },
  {
    title: '航/车次(班)日期',
    dataIndex: 'travelTime',
  },
  {
    title: '是否携带行李物品',
    dataIndex: 'baggage',
  },
  {
    title: '出发港口',
    dataIndex: 'fromPort',
  },
  {
    title: '到达港口',
    dataIndex: 'toPort',
  },
  {
    title: '座位号',
    dataIndex: 'seatNo',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: 100,
    fixed: 'right',
  }
]
const selectedRowKeys = ref([])
// 列表选择配置
const options = {
  // columns数字类型字段加入 needTotal: true 可以勾选自动算账
  alert: {
    show: true,
    clear: () => {
      selectedRowKeys.value = ref([])
    }
  },
  rowSelection: {
    onChange: (selectedRowKey, selectedRows) => {
      selectedRowKeys.value = selectedRowKey
    }
  }
}
const loadData = (parameter) => {
  if (searchFormStateReal.value.travelTime?.length > 0) {
    searchFormStateReal.value.travelTimeStart = proxy.$util.YMDHms(searchFormStateReal.value.travelTime[0])
    searchFormStateReal.value.travelTimeEnd = proxy.$util.YMDHms(searchFormStateReal.value.travelTime[1])
    delete searchFormStateReal.value.travelTime
  }
  return basicApi.passengerInfoPage(Object.assign(parameter, searchFormStateReal.value, {queryType: 1})).then((data) => {
    return data
  })
}
// 搜索同时备份参数
const onSearch = (parameter) => {
  searchFormStateReal.value = cloneDeep(searchFormState.value)
  tableRef.value.refresh(parameter)
}
// 重置
const reset = () => {
  searchFormRef.value.resetFields()
  onSearch(true)
}
const sexOptions = tool.dictList('lvke_sex')
const cityOptions = tool.dictList('lvke_city')
const isNoOptions = tool.dictList('lvke_isNo')
const departurePortOptions = tool.dictList('lvke_departurePort')
const arrivingPortOptions = tool.dictList('lvke_arrivingPort')
</script>