286 lines
9.9 KiB
TypeScript
286 lines
9.9 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Form, Button, Table, Input, Tree, Space, Tooltip, Spin } from 'antd';
|
|
import { SearchOutlined, DeleteOutlined, DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
|
|
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
|
import { connect } from 'umi';
|
|
import SupplierViewModal from './components/SupplierViewModal';
|
|
import SupplierDetailModal from './components/SupplierDetailModal';
|
|
import { treeData, getPagePe } from './services';
|
|
import tableProps from '@/utils/tableProps'
|
|
import { downloadFile } from '@/utils/download';
|
|
|
|
// type OptionType = { label: string; value: string };
|
|
interface Data {
|
|
id: number;
|
|
name: string;
|
|
region: string;
|
|
supplierType: string;
|
|
personName: string;
|
|
regTime: string;
|
|
status: string;
|
|
idCard?: string;
|
|
personPhone?: string;
|
|
type?: string;
|
|
createTime?: string;
|
|
}
|
|
interface Props {
|
|
dispatch: any;
|
|
}
|
|
interface TreeNode {
|
|
key: string;
|
|
title: string;
|
|
orgId: string;
|
|
orgName: string;
|
|
[key: string]: any;
|
|
children?: TreeNode[];
|
|
}
|
|
|
|
function formatTreeData(nodes: any[]): TreeNode[] {
|
|
return nodes.map(node => ({
|
|
...node,
|
|
key: node.orgId,
|
|
title: node.orgName
|
|
}));
|
|
}
|
|
|
|
function updateNodeChildren(list: TreeNode[], key: string, children: TreeNode[]): TreeNode[] {
|
|
return list.map(item => {
|
|
if (item.key === key) return { ...item, children };
|
|
if (item.children) return { ...item, children: updateNodeChildren(item.children, key, children) };
|
|
return item;
|
|
});
|
|
}
|
|
|
|
const findFirstLeafKey = (nodes: any[]): string | undefined => {
|
|
for (const node of nodes) {
|
|
if (!node.children) return node.key;
|
|
const found = findFirstLeafKey(node.children);
|
|
if (found) return found;
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
const PersonQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
|
const [form] = Form.useForm();
|
|
const [dataTree, setDataTree] = useState<TreeNode[]>([]);
|
|
const [treeSelected, setTreeSelected] = useState<string[]>([]);
|
|
const [selectedKeys, setSelectedKeys] = useState<string>('');
|
|
const [DeptId, setDeptId] = useState<string>('');
|
|
const [data, setData] = useState<Data[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [treeLoading, setTreeLoading] = useState(false);
|
|
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
|
|
const [viewVisible, setViewVisible] = useState(false);
|
|
const [detailVisible, setDetailVisible] = useState(false);
|
|
const [currentRecord, setCurrentRecord] = useState<any>(null);
|
|
const orgIdStr = sessionStorage.getItem('Userinfo');
|
|
const currentUser = orgIdStr ? JSON.parse(orgIdStr) : null;
|
|
// 查询
|
|
const handleSearch = () => {
|
|
setPagination(p => ({ ...p, current: 1 }));
|
|
getList(selectedKeys? selectedKeys:currentUser.organizationId);
|
|
};
|
|
const handleReset = () => {
|
|
form.resetFields();
|
|
setPagination(p => ({ ...p, current: 1 }));
|
|
getList(selectedKeys? selectedKeys:currentUser.organizationId);
|
|
};
|
|
|
|
const handleTreeSelect = (keys: React.Key[]) => {
|
|
const key = keys[0] as string;
|
|
if (key) {
|
|
setSelectedKeys(key);
|
|
setTreeSelected([key]);
|
|
getList(key);
|
|
}
|
|
};
|
|
|
|
// 懒加载树节点
|
|
const onLoadTreeData = async (treeNode: any) => {
|
|
if (treeNode.children && treeNode.children.length > 0) return;
|
|
setTreeLoading(true);
|
|
try {
|
|
const res = await treeData({ upOrgId: treeNode.orgId });
|
|
const { code, data } = res;
|
|
if (code === 200) {
|
|
const children = formatTreeData(data);
|
|
setDataTree(origin => updateNodeChildren(origin, treeNode.key, children));
|
|
}
|
|
} finally {
|
|
setTreeLoading(false);
|
|
}
|
|
};
|
|
|
|
const getList = async (orgId: string, pageNo: number = 1, pageSize: number = 10) => {
|
|
setLoading(true);
|
|
try {
|
|
setDeptId(orgId)
|
|
const values = form.getFieldsValue();
|
|
const { code, data, message } = await getPagePe({ pageNo, pageSize, orgId, ...values });
|
|
if (code === 200) {
|
|
setData(data.records);
|
|
setPagination({ current: pageNo, pageSize, total: data.total });
|
|
} else {
|
|
message.error(message);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 初始化
|
|
useEffect(() => {
|
|
setTreeLoading(true);
|
|
treeData({}).then((res) => {
|
|
const { code, data } = res;
|
|
if (code === 200) {
|
|
const tree = formatTreeData(data);
|
|
setDataTree(tree);
|
|
const firstLeafKey = findFirstLeafKey(tree);
|
|
if (firstLeafKey) {
|
|
// setSelectedKeys(firstLeafKey);
|
|
// setTreeSelected([firstLeafKey]);
|
|
getList(currentUser.organizationId);
|
|
}
|
|
}
|
|
}).finally(() => {
|
|
setTreeLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
const columns: ColumnsType<Data> = [
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'index',
|
|
key: 'index',
|
|
align: 'center',
|
|
width: 60,
|
|
render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
|
|
},
|
|
{
|
|
title: '姓名',
|
|
dataIndex: 'personName',
|
|
key: 'personName',
|
|
align: 'center',
|
|
ellipsis: true,
|
|
render: (dom, record) =>
|
|
<Tooltip title={record.personName}>
|
|
<a onClick={() => {
|
|
dispatch({
|
|
type: 'globalModal/show',
|
|
payload: { id: record.id },
|
|
});
|
|
}}>
|
|
{record.personName}
|
|
</a>
|
|
</Tooltip>,
|
|
},
|
|
{ title: '身份证号', dataIndex: 'idCard', key: 'idCard', align: 'center', ellipsis: true },
|
|
{ title: '联系电话', dataIndex: 'personPhone', key: 'personPhone', align: 'center', ellipsis: true },
|
|
{ title: '准入单位', dataIndex: 'orgName', key: 'orgName', align: 'center', width: 120, ellipsis: true },
|
|
{ title: '创建人', dataIndex: 'createName', key: 'createName', align: 'center', width: 120, ellipsis: true },
|
|
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', align: 'center', ellipsis: true },
|
|
{
|
|
title: '操作',
|
|
key: 'option',
|
|
align: 'center',
|
|
width: 140,
|
|
render: (record: any) => (
|
|
<Space>
|
|
<a onClick={() => {
|
|
dispatch({
|
|
type: 'globalModal/show',
|
|
payload: {
|
|
id: record.id,
|
|
},
|
|
});
|
|
}}>查看</a>
|
|
{/* <a onClick={() => { setCurrentRecord(record.id); setDetailVisible(true); }}>准入明细</a> */}
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="common-container on">
|
|
<div className="filter-action-row" style={{ backgroundColor: '#fff', padding: '24px' }}>
|
|
<Form form={form} layout="inline" className="filter-form">
|
|
<Form.Item name="personName" label="姓名">
|
|
<Input placeholder="请输入姓名关键字" style={{ width: 180 }} maxLength={20} allowClear />
|
|
</Form.Item>
|
|
<Form.Item name="idCard" label="身份证号">
|
|
<Input placeholder="请输入身份证号关键字" style={{ width: 180 }} maxLength={18} allowClear />
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch}>
|
|
搜索
|
|
</Button>
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset}>重置</Button>
|
|
</Form.Item>
|
|
<Form.Item style={{ marginLeft: 'auto' }}>
|
|
<Button className="buttonOther" type="primary" onClick={() => {
|
|
const values = form.getFieldsValue();
|
|
// values.deptId = DeptId;
|
|
values.orgId = DeptId? DeptId: currentUser.organizationId;
|
|
downloadFile('/coscoSupplierBase/getPagePeExport', 'GET', values);
|
|
}}>
|
|
数据导出
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<div className={`treeBlock${collapsed ? ' collapsed' : ''}`}>
|
|
{!collapsed && (
|
|
<>
|
|
<div className="dataTree">
|
|
<Spin spinning={treeLoading}>
|
|
{dataTree.length > 0 && (
|
|
<Tree
|
|
treeData={dataTree}
|
|
selectedKeys={treeSelected}
|
|
onSelect={handleTreeSelect}
|
|
loadData={onLoadTreeData}
|
|
defaultExpandAll={false}
|
|
/>
|
|
)}
|
|
</Spin>
|
|
</div>
|
|
<div className="shrinkBlock">
|
|
<div className="btn" onClick={() => setCollapsed(true)}><DoubleLeftOutlined /></div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{collapsed && (
|
|
<div className="shrinkBlock expandOnly">
|
|
<div className="btn" onClick={() => setCollapsed(false)}><DoubleRightOutlined /></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="rightMain" style={{ width: collapsed ? 'calc(100% - 30px)' : 'calc(100% - 310px)' }}>
|
|
<Table
|
|
rowKey="id"
|
|
columns={columns}
|
|
dataSource={data}
|
|
loading={loading}
|
|
pagination={{ ...tableProps.pagination, total: pagination.total }}
|
|
onChange={(pagination) => getList(selectedKeys, pagination.current!, pagination.pageSize!)}
|
|
style={{ flex: 1, minHeight: 0 }}
|
|
scroll={{ y: 'calc(100vh - 350px)' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<SupplierViewModal visible={viewVisible} record={currentRecord} onCancel={() => setViewVisible(false)} />
|
|
<SupplierDetailModal visible={detailVisible} record={currentRecord} onCancel={() => setDetailVisible(false)} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default connect()(PersonQualifiedSupplierQuery);
|