713 lines
23 KiB
TypeScript
713 lines
23 KiB
TypeScript
|
|
import { connect } from "umi";
|
|
import { Children, useRef, useState } from "react";
|
|
import { Button, Drawer, message, Modal, Popconfirm, Space, Spin, type FormInstance } from "antd";
|
|
import type { ActionType } from "@ant-design/pro-table";
|
|
import ProTable from "@ant-design/pro-table";
|
|
import moment from "moment";
|
|
import OldLeftSelectTree from "@/components/leftSelectTree/oldLeftSelectTree";
|
|
import { secondsToHuman } from "@/utils/format";
|
|
import { handleGetDRIVERLICENSEList, handleGetIDCARDINFOList, handleGetMemberShipLicenseList, handleGetVEHICLELICENSEList } from "./service";
|
|
import { getFieldEnum } from "@/utils/publicService";
|
|
|
|
|
|
const Identification: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
|
const { currentUser } = props
|
|
const downloadBtnRef = useRef<any>()
|
|
const actionRef = useRef<ActionType>();
|
|
const formRef = useRef<FormInstance>();
|
|
const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
|
|
const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
|
|
const [collapsible, setCollapsible] = useState<boolean>(false)
|
|
const [treeView, setTreeView] = useState<any>()
|
|
const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())
|
|
|
|
const [columnsState, setColumnsState] = useState<any>({});
|
|
|
|
// 树相关的属性和方法
|
|
const [selectedId, setSelectedId] = useState<string>()
|
|
// 导出的加载效果
|
|
const [showLoading, setShowLoading] = useState<boolean>(false)
|
|
// 查询的条件
|
|
const [searchParams, setSearchParams] = useState<any>()
|
|
// 当前查询的类型
|
|
const [currentSearchType, setCurrentSearchType] = useState<string>("1")
|
|
|
|
// 显示详情抽屉
|
|
const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)
|
|
// 当前的点击行数据
|
|
const [currentRow, setCurrentRow] = useState<any>()
|
|
// 表格数据
|
|
const [tableData, setTableData] = useState<any>()
|
|
// 表格的加载效果
|
|
const [tableLoading, setTableLoading] = useState<boolean>(false)
|
|
|
|
const idCardcolumns: any = [
|
|
{
|
|
title: "证件类型",
|
|
dataIndex: "codeType",
|
|
hideInTable: true,
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
"1": "身份证",
|
|
"2": "驾驶证",
|
|
"3": "行驶证"
|
|
},
|
|
initialValue: "1",
|
|
fieldProps: {
|
|
onChange: (e: any) => {
|
|
console.log('e', e);
|
|
setCurrentSearchType(e)
|
|
}
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'IDCARDINFO_NAME',
|
|
title: '身份证人名',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
hideInDescriptions: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'PLATE_NUMBER',
|
|
title: '证件号码',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'GENDER',
|
|
title: '性别',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 100,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'NATIONALITY',
|
|
title: '名族',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 100,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'BIRTH_DATE',
|
|
title: '证件生日',
|
|
valueType: 'date',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'IDCARDINFO_ADDRESS',
|
|
title: '证件地址',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 200,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'ISSUE_DATE',
|
|
title: '签发日期',
|
|
valueType: 'date',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'EXPIRE_DATE',
|
|
title: '失效日期',
|
|
valueType: 'date',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'ISSUE_AUTHORITY',
|
|
title: '签发机关',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 200,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'IDCARDINFO_STATE',
|
|
title: '状态',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'STAFF_NAME',
|
|
title: '操作员名称',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'OPERATE_DATE',
|
|
title: '操作时间',
|
|
valueType: 'fromNow',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
|
|
|
|
]
|
|
|
|
const drivingColumns: any = [
|
|
{
|
|
title: "证件类型",
|
|
dataIndex: "codeType",
|
|
hideInTable: true,
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
"1": "身份证",
|
|
"2": "驾驶证",
|
|
"3": "行驶证"
|
|
},
|
|
initialValue: "2",
|
|
fieldProps: {
|
|
onChange: (e: any) => {
|
|
console.log('e', e);
|
|
setCurrentSearchType(e)
|
|
}
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'LICENSE_NUMBER',
|
|
title: '驾驶证号',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'IDCARDINFO_NAME',
|
|
title: '关联身份证号',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'IDCARDINFO_CODE',
|
|
title: '证件姓名',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'LICENSE_TYPE',
|
|
title: '准驾车型',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'VALID_FROM',
|
|
title: '有效期起始日',
|
|
valueType: 'date',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'VALID_TO',
|
|
title: '有效期截止日',
|
|
valueType: 'date',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'ISSUE_DATE',
|
|
title: '发证日期',
|
|
valueType: 'date',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'DRIVERLICENSE_STATUS',
|
|
title: '驾驶证状态',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'IDCARDINFO_STATE',
|
|
title: '状态',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'STAFF_NAME',
|
|
title: '操作员名称',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'OPERATE_DATE',
|
|
title: '操作时间',
|
|
valueType: 'fromNow',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
|
|
|
|
]
|
|
|
|
const vehicleliColumns: any = [
|
|
{
|
|
title: "证件类型",
|
|
dataIndex: "codeType",
|
|
hideInTable: true,
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
"1": "身份证",
|
|
"2": "驾驶证",
|
|
"3": "行驶证"
|
|
},
|
|
initialValue: "3",
|
|
fieldProps: {
|
|
onChange: (e: any) => {
|
|
console.log('e', e);
|
|
setCurrentSearchType(e)
|
|
}
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'PLATE_NUMBER',
|
|
title: '车牌号',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'VEHICLE_TYPE',
|
|
title: '车辆类型',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'IDCARDINFO_CODE',
|
|
title: '所有人身份证号',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'IDCARDINFO_ADDRESS',
|
|
title: '所有人住址',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'VEHICLELICENSE_VIN',
|
|
title: '车辆识别代号',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'ENGINE_NUMBER',
|
|
title: '发动机号',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'REGISTER_DATE',
|
|
title: '注册日期',
|
|
valueType: 'date',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'INSPECT_DATE',
|
|
title: '检验有效期',
|
|
valueType: 'date',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'STAFF_NAME',
|
|
title: '操作员名称',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'OPERATE_DATE',
|
|
title: '操作时间',
|
|
valueType: 'fromNow',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'VEHICLELICENSE_DESC',
|
|
title: '备注说明',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
]
|
|
|
|
const columns: any = [
|
|
{
|
|
title: "会员类型",
|
|
dataIndex: "MEMBERSHIP_TYPE",
|
|
width: 120,
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
valueType: "select",
|
|
align: 'center',
|
|
request: async () => {
|
|
const data = await getFieldEnum({ FieldExplainField: 'MEMBERSHIP_TYPE' })
|
|
return data
|
|
}
|
|
},
|
|
{
|
|
title: "会员姓名",
|
|
dataIndex: "MEMBERSHIP_NAME",
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "绑定车辆",
|
|
dataIndex: "PLATE_NUMBER",
|
|
align: 'center',
|
|
width: 120,
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.PLATE_NUMBER ? <a onClick={() => {
|
|
setCurrentRow(record)
|
|
setShowDetailDrawer(true)
|
|
}}>
|
|
{record?.PLATE_NUMBER}
|
|
</a> : <span style={{ color: 'red' }}>未绑定</span>
|
|
}
|
|
},
|
|
{
|
|
title: "会员积分",
|
|
dataIndex: "MEMBERSHIP_POINT",
|
|
width: 120,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "手机号码",
|
|
dataIndex: "MEMBERSHIP_MOBILEPHONE",
|
|
align: 'center',
|
|
width: 150,
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "会员归属",
|
|
dataIndex: "OWNERUNIT_NAME",
|
|
align: 'center',
|
|
width: 250,
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "添加时间",
|
|
dataIndex: "ADDTIME",
|
|
align: 'center',
|
|
width: 150,
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.ADDTIME ? moment(record?.ADDTIME).format('YYYY-MM-DD HH:mm:ss') : "-"
|
|
}
|
|
},
|
|
{
|
|
title: "会员状态",
|
|
dataIndex: "MEMBERSHIP_STATE",
|
|
align: 'center',
|
|
width: 150,
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.MEMBERSHIP_STATE === 1000 ? "有效" : record?.MEMBERSHIP_STATE === 2000 ? "无效" : "-"
|
|
}
|
|
},
|
|
// {
|
|
// title: "车牌号",
|
|
// dataIndex: "LICENSEPLATE_NUMBER",
|
|
// width: 150,
|
|
// hideInSearch: true,
|
|
// ellipsis: true,
|
|
// },
|
|
// {
|
|
// dataIndex: 'VEHICLE_TYPE',
|
|
// title: '车辆类型',
|
|
// hideInSearch: true,
|
|
// width: 150,
|
|
// ellipsis: true,
|
|
// },
|
|
// {
|
|
// title: "会员性别",
|
|
// dataIndex: "MEMBERSHIP_SEX",
|
|
// width: 120,
|
|
// hideInSearch: true,
|
|
// ellipsis: true,
|
|
// render: (_, record) => {
|
|
// return record?.MEMBERSHIP_SEX === 1 ? '男' : record?.MEMBERSHIP_SEX === 2 ? '女' : '-'
|
|
// }
|
|
// },
|
|
// {
|
|
// title: "会员等级",
|
|
// dataIndex: "MEMBERSHIP_LEVEL",
|
|
// width: 120,
|
|
// hideInSearch: true,
|
|
// ellipsis: true,
|
|
// valueType: "select",
|
|
// valueEnum: {
|
|
// 1000: "普卡会员",
|
|
// 2000: "高速驿网会员",
|
|
// 3000: "银卡会员",
|
|
// 4000: "金卡会员",
|
|
// 5000: "钻卡会员",
|
|
// 6000: "皇冠会员",
|
|
// 9000: "企业会员",
|
|
// }
|
|
// },
|
|
// {
|
|
// title: "证件号码",
|
|
// dataIndex: "CERTIFICATE_NUMBER",
|
|
// width: 150,
|
|
// hideInSearch: true,
|
|
// ellipsis: true,
|
|
// },
|
|
]
|
|
|
|
return (
|
|
<div ref={(el) => {
|
|
// 打印报表
|
|
if (!reqDetailList || reqDetailList.length === 0) return;
|
|
setPrintOut(el);
|
|
}} >
|
|
|
|
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
|
{/* <OldLeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} /> */}
|
|
<div style={{
|
|
width: "100%",
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
paddingRight: 0
|
|
}}>
|
|
<ProTable
|
|
rowKey="SERVERPART_ID"
|
|
actionRef={actionRef}
|
|
formRef={formRef}
|
|
columns={columns}
|
|
bordered
|
|
scroll={{ x: "100%", y: "calc(100vh - 400px)" }}
|
|
pagination={{
|
|
defaultPageSize: 50
|
|
}}
|
|
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>会员信息列表</span>}
|
|
search={{ span: 6 }}
|
|
dataSource={tableData}
|
|
loading={tableLoading}
|
|
request={async (params) => {
|
|
|
|
const req: any = {
|
|
SearchParameter: {
|
|
OWNERUNIT_ID: 249
|
|
},
|
|
keyWord: {
|
|
key: "MEMBERSHIP_NAME",
|
|
Value: params?.MEMBERSHIP_NAME || ""
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 50
|
|
}
|
|
setTableLoading(true)
|
|
const data = await handleGetMemberShipLicenseList(req)
|
|
setTableLoading(false)
|
|
console.log('datadatadatadata', data);
|
|
|
|
setTableData(data)
|
|
|
|
const allReq: any = {
|
|
SearchParameter: {
|
|
OWNERUNIT_ID: 249
|
|
},
|
|
keyWord: {
|
|
key: "MEMBERSHIP_NAME",
|
|
Value: params?.MEMBERSHIP_NAME || ""
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999
|
|
}
|
|
const allData = await handleGetMemberShipLicenseList(allReq)
|
|
console.log('datadatadatadata', allData);
|
|
setTableData(allData)
|
|
// if (data && data.length > 0) {
|
|
// return { data, success: true }
|
|
// }
|
|
// return { data: [], success: true }
|
|
|
|
// let req: any = {
|
|
// SearchParameter: {
|
|
// MEMBERSHIP_ID: 3104148
|
|
// },
|
|
// PageIndex: 1,
|
|
// PageSize: 9999
|
|
// }
|
|
// let data = []
|
|
// if (currentSearchType === '1') {
|
|
// data = await handleGetIDCARDINFOList(req)
|
|
// } else if (currentSearchType === '2') {
|
|
// data = await handleGetDRIVERLICENSEList(req)
|
|
// } else if (currentSearchType === '3') {
|
|
// data = await handleGetVEHICLELICENSEList(req)
|
|
// }
|
|
// console.log('datadatadatadatadata', data);
|
|
|
|
// if (data && data.length > 0) {
|
|
// return { data: data, success: true }
|
|
// }
|
|
// return { data: [], success: true }
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<Drawer
|
|
title={false}
|
|
closeIcon={false}
|
|
onClose={() => {
|
|
setShowDetailDrawer(false)
|
|
setCurrentRow(undefined)
|
|
}}
|
|
open={showDetailDrawer}
|
|
destroyOnClose
|
|
width={'80%'}
|
|
>
|
|
|
|
<ProTable
|
|
columns={idCardcolumns}
|
|
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>身份证信息</span>}
|
|
search={false}
|
|
scroll={{ x: "100%", y: "calc(100vh - 400px)" }}
|
|
pagination={false}
|
|
request={async () => {
|
|
let req: any = {
|
|
SearchParameter: {
|
|
MEMBERSHIP_ID: currentRow?.MEMBERSHIP_ID
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 9999
|
|
}
|
|
const data = await handleGetIDCARDINFOList(req)
|
|
if (data && data.length > 0) {
|
|
return { data: data, success: true }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
/>
|
|
|
|
<ProTable
|
|
columns={drivingColumns}
|
|
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>驾驶证信息</span>}
|
|
search={false}
|
|
scroll={{ x: "100%", y: "calc(100vh - 400px)" }}
|
|
pagination={false}
|
|
request={async () => {
|
|
let req: any = {
|
|
SearchParameter: {
|
|
MEMBERSHIP_ID: currentRow?.MEMBERSHIP_ID
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 9999
|
|
}
|
|
const data = await handleGetDRIVERLICENSEList(req)
|
|
if (data && data.length > 0) {
|
|
return { data: data, success: true }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
/>
|
|
|
|
<ProTable
|
|
columns={vehicleliColumns}
|
|
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>行驶证信息</span>}
|
|
search={false}
|
|
scroll={{ x: "100%", y: "calc(100vh - 400px)" }}
|
|
pagination={false}
|
|
request={async () => {
|
|
let req: any = {
|
|
SearchParameter: {
|
|
MEMBERSHIP_ID: currentRow?.MEMBERSHIP_ID
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 9999
|
|
}
|
|
const data = await handleGetVEHICLELICENSEList(req)
|
|
if (data && data.length > 0) {
|
|
return { data: data, success: true }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
/>
|
|
|
|
|
|
</Drawer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.data
|
|
}))(Identification);
|
|
|
|
|