个人与集团供应商增加部门
This commit is contained in:
孙景学
@ -1,23 +1,16 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
//第三方UI库/组件
|
||||
import { Form, Button, Table, Select, Input, Tree, Space, Tooltip } from 'antd';
|
||||
import { Form, Button, Table, Select, Input, Tree, Space, Tooltip, Spin } from 'antd';
|
||||
import { SearchOutlined, DoubleLeftOutlined, DeleteOutlined, DoubleRightOutlined } from '@ant-design/icons';
|
||||
//类型定义
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
//umi 相关
|
||||
import { connect } from 'umi';
|
||||
//本地组件、弹窗、业务逻辑
|
||||
import SupplierViewModal from './components/SupplierViewModal';
|
||||
import SupplierDetailModal from './components/SupplierDetailModal';
|
||||
//本地服务/接口
|
||||
import { treeData, getPageQualified } from './services';
|
||||
//统一列表分页
|
||||
import tableProps from '@/utils/tableProps'
|
||||
import tableProps from '@/utils/tableProps';
|
||||
|
||||
const { Option } = Select;
|
||||
//下拉数据接口
|
||||
type OptionType = { label: string; value: string };
|
||||
// 列表数据接口
|
||||
|
||||
interface Data {
|
||||
id: number;
|
||||
name: string;
|
||||
@ -26,122 +19,135 @@ interface Data {
|
||||
regTime: string;
|
||||
status: string;
|
||||
}
|
||||
interface Props {
|
||||
dispatch: any;
|
||||
interface Props { dispatch: any; }
|
||||
|
||||
interface TreeNode {
|
||||
orgId: string;
|
||||
orgName: string;
|
||||
upOrgId?: string;
|
||||
children?: TreeNode[];
|
||||
key?: string;
|
||||
title?: string;
|
||||
isLeaf?: boolean;
|
||||
}
|
||||
|
||||
function formatTreeData(nodes: any[]): any[] {
|
||||
return nodes.map(node => ({
|
||||
...node,
|
||||
key: node.orgId,
|
||||
title: node.orgName
|
||||
}));
|
||||
}
|
||||
|
||||
function updateNodeChildren(list: TreeNode[], key: string, children: TreeNode[]): TreeNode[] {
|
||||
return list.map((item): TreeNode => {
|
||||
if (item.key === key) return { ...item, children };
|
||||
if (item.children) return { ...item, children: updateNodeChildren(item.children, key, children) };
|
||||
return item;
|
||||
});
|
||||
}
|
||||
|
||||
// 找第一个叶子节点key
|
||||
function findFirstLeafKey(nodes: any[]): string | undefined {
|
||||
for (const node of nodes) {
|
||||
if (!node.children || node.children.length === 0) return node.key;
|
||||
const found = findFirstLeafKey(node.children);
|
||||
if (found) return found;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const groupQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
//搜搜表单
|
||||
const [form] = Form.useForm();
|
||||
// 树数据
|
||||
const [dataTree, setDataTree] = useState<any[]>([]);
|
||||
//默认选中树
|
||||
const [dataTree, setDataTree] = useState<TreeNode[]>([]);
|
||||
const [treeSelected, setTreeSelected] = useState<string[]>([]);
|
||||
//当前树key
|
||||
const [selectedKeys, setSelectedKeys] = 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 [regionOptions, setRegionOptions] = useState<OptionType[]>([]);
|
||||
//集采类别
|
||||
const [categoryOptions, setCategoryOptions] = useState<OptionType[]>([]);
|
||||
//集采库
|
||||
const [storeOptions, setStoreOptions] = useState<OptionType[]>([]);
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
window.open(
|
||||
`${SERVER_BASE}/coscoSupplierBase/getPageQualifiedExport`,
|
||||
'_blank',
|
||||
);
|
||||
};
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
setPagination(p => ({ ...p, current: 1 }));
|
||||
getList(selectedKeys);
|
||||
};
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
setPagination(p => ({ ...p, current: 1 }));
|
||||
getList(selectedKeys);
|
||||
};
|
||||
// 点击树节点请求右表
|
||||
const handleTreeSelect = (keys: React.Key[]) => {
|
||||
const key = keys[0] as string;
|
||||
setSelectedKeys(key);
|
||||
getList(key)
|
||||
if(key) {
|
||||
setSelectedKeys(key);
|
||||
setTreeSelected([key]);
|
||||
getList(key);
|
||||
}
|
||||
};
|
||||
//列表方法
|
||||
const getList = async (treeId: string, pageNo: number = 1, pageSize: number = 10) => {
|
||||
// 懒加载节点
|
||||
const onLoadTreeData = async (treeNode: any) => {
|
||||
console.log(1);
|
||||
|
||||
if (treeNode.children && treeNode.children.length > 0) return;
|
||||
setTreeLoading(true);
|
||||
try {
|
||||
const { code, data } = await treeData({ upOrgId: treeNode.orgId });
|
||||
if (code === 200) {
|
||||
// 懒加载也要格式化数据
|
||||
const children = formatTreeData(data);
|
||||
setDataTree(origin => updateNodeChildren(origin, treeNode.key, children));
|
||||
}
|
||||
} finally {
|
||||
setTreeLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = async (deptId: string, pageNo: number = 1, pageSize: number = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const values = form.getFieldsValue();
|
||||
const { code, data, message } = await getPageQualified({ pageNo, pageSize, treeId, ...values });
|
||||
const { code, data, message } = await getPageQualified({ pageNo, pageSize, deptId, ...values });
|
||||
if (code === 200) {
|
||||
setData(data.records);
|
||||
setPagination({ current: pageNo, pageSize, total: data.total });
|
||||
} else {
|
||||
message.error(message)
|
||||
message.error(message);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
// 辅助递归找第一个叶子 key（一般最下层为叶子）
|
||||
const findFirstLeafKey = (nodes: any[]): string | undefined => {
|
||||
for (const node of nodes) {
|
||||
if (!node.children || node.children.length === 0) return node.key;
|
||||
const found = findFirstLeafKey(node.children);
|
||||
if (found) return found;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
// 初始化时选中树第一个叶子节点，并请求右表
|
||||
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
// 境内/境外 下拉
|
||||
setTreeLoading(true);
|
||||
setRegionOptions([
|
||||
{ label: '境内企业', value: 'dvs' },
|
||||
{ label: '境外企业', value: 'ovs' },
|
||||
])
|
||||
// // 集采类别 下拉
|
||||
// systemDict('categoryOptions').then((res) => {
|
||||
// const { code, data } = res;
|
||||
// if (code == 200) {
|
||||
// setCategoryOptions(data)
|
||||
// }
|
||||
// });
|
||||
// // 集采库 下拉
|
||||
// systemDict('storeOptions').then((res) => {
|
||||
// const { code, data } = res;
|
||||
// if (code == 200) {
|
||||
// setStoreOptions(data)
|
||||
// }
|
||||
// });
|
||||
//tree数据
|
||||
treeData().then((res) => {
|
||||
]);
|
||||
treeData({}).then((res) => {
|
||||
const { code, data } = res;
|
||||
if (code == 200) {
|
||||
setDataTree(data)
|
||||
const key = findFirstLeafKey(data);
|
||||
if (key) {
|
||||
setSelectedKeys(key);
|
||||
setTreeSelected([key])
|
||||
getList(key)
|
||||
if (code === 200) {
|
||||
const tree = formatTreeData(data);
|
||||
setDataTree(tree);
|
||||
const firstLeafKey = findFirstLeafKey(tree);
|
||||
if (firstLeafKey) {
|
||||
setSelectedKeys(firstLeafKey);
|
||||
setTreeSelected([firstLeafKey]);
|
||||
getList(firstLeafKey);
|
||||
}
|
||||
}
|
||||
})
|
||||
}).finally(() => {
|
||||
setTreeLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
|
||||
const columns: ColumnsType<Data> = [
|
||||
{
|
||||
title: '序号',
|
||||
@ -156,7 +162,7 @@ const groupQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
ellipsis: true,
|
||||
width: 160,
|
||||
render: (dom, record) =>
|
||||
<Tooltip title={record.name}>
|
||||
@ -164,9 +170,7 @@ const groupQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
onClick={() => {
|
||||
dispatch({
|
||||
type: 'globalModal/show',
|
||||
payload: {
|
||||
id: record.id,
|
||||
},
|
||||
payload: { id: record.id },
|
||||
});
|
||||
}}
|
||||
>
|
||||
@ -209,43 +213,22 @@ const groupQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
width: 140,
|
||||
render: (record: any) => (
|
||||
<Space>
|
||||
<a
|
||||
onClick={() => { setCurrentRecord(record.id); setViewVisible(true); }}
|
||||
>查看</a>
|
||||
<a
|
||||
onClick={() => { setCurrentRecord(record.id); setDetailVisible(true); }}
|
||||
>准入明细</a>
|
||||
<a onClick={() => { setCurrentRecord(record.id); setViewVisible(true); }}>查看</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 form={form} layout="inline" className="filter-form">
|
||||
<Form.Item name="name" label="供应商名称">
|
||||
<Input placeholder="请输入供应商名称关键字" style={{ width: 180 }} maxLength={50} />
|
||||
</Form.Item>
|
||||
{/* <Form.Item name="category" label="集采类别">
|
||||
<Select style={{ width: 150 }} allowClear>
|
||||
{categoryOptions.map(opt => (
|
||||
<Option key={opt.value} value={opt.value}>{opt.label}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="store" label="集采库">
|
||||
<Select style={{ width: 150 }} allowClear>
|
||||
{storeOptions.map(opt => (
|
||||
<Option key={opt.value} value={opt.value}>{opt.label}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item> */}
|
||||
<Form.Item name="supplierType" label="境内/境外">
|
||||
<Select style={{ width: 130 }} allowClear placeholder="请选择境内/境外" >
|
||||
{regionOptions.map(opt => (
|
||||
@ -253,17 +236,18 @@ const groupQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch} >
|
||||
<Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch} disabled={treeLoading}>
|
||||
搜索
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
|
||||
<Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset}>重置</Button>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginLeft: 'auto' }}>
|
||||
<Button className="buttonOther" type="primary" onClick={handleExport}>
|
||||
<Button className="buttonOther" type="primary" onClick={() => {
|
||||
window.open(`${SERVER_BASE}/coscoSupplierBase/getPageQualifiedExport`, '_blank');
|
||||
}}>
|
||||
数据导出
|
||||
</Button>
|
||||
</Form.Item>
|
||||
@ -271,18 +255,20 @@ const groupQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div className={`treeBlock${collapsed ? ' collapsed' : ''}`}>
|
||||
|
||||
{!collapsed && (
|
||||
<>
|
||||
<div className="dataTree">
|
||||
{dataTree.length > 0 && (
|
||||
<Tree
|
||||
treeData={dataTree}
|
||||
defaultExpandAll
|
||||
selectedKeys={treeSelected}
|
||||
onSelect={handleTreeSelect}
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
@ -302,24 +288,16 @@ const groupQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{...tableProps.pagination, total: pagination.total }}
|
||||
pagination={{ ...tableProps.pagination, total: pagination.total }}
|
||||
onChange={(pagination) => getList(selectedKeys, pagination.current!, pagination.pageSize!)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 查看组件 */}
|
||||
<SupplierViewModal
|
||||
visible={viewVisible}
|
||||
record={currentRecord}
|
||||
onCancel={() => setViewVisible(false)}
|
||||
/>
|
||||
<SupplierViewModal visible={viewVisible} record={currentRecord} onCancel={() => setViewVisible(false)} />
|
||||
{/* 准入明细组件 */}
|
||||
<SupplierDetailModal
|
||||
visible={detailVisible}
|
||||
record={currentRecord}
|
||||
onCancel={() => setDetailVisible(false)}
|
||||
/>
|
||||
<SupplierDetailModal visible={detailVisible} record={currentRecord} onCancel={() => setDetailVisible(false)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -6,14 +6,11 @@ import request from '@/utils/request';
|
||||
interface getPageQualified {
|
||||
pageNo: number;
|
||||
pageSize: number;
|
||||
treeId?: string;
|
||||
deptId?: string;
|
||||
}
|
||||
export const getPageQualified = (data: getPageQualified) => request.post('/coscoSupplierBase/getPageQualified', { data });
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
interface getCategoryPage {
|
||||
pageNo: number;
|
||||
pageSize: number;
|
||||
@ -21,10 +18,8 @@ interface getCategoryPage {
|
||||
}
|
||||
export const getCategoryPage = (data: getCategoryPage) => request.post('/coscoSupplierBase/getCategoryPage', { data });
|
||||
|
||||
|
||||
|
||||
export async function treeData() {
|
||||
return request('/api/system/treeData', {
|
||||
method: 'GET'
|
||||
});
|
||||
interface treeInterface {
|
||||
upOrgId?: string
|
||||
}
|
||||
export const treeData = (params:treeInterface) => request.get('/org/list', { params });
|
||||
|
||||
|
||||
@ -1,22 +1,14 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
//第三方UI库/组件
|
||||
import { Form, Button, Table, Input, Tree, Space, Tooltip } from 'antd';
|
||||
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';
|
||||
//umi 相关
|
||||
import { connect } from 'umi';
|
||||
//本地组件、弹窗、业务逻辑
|
||||
import SupplierViewModal from './components/SupplierViewModal';
|
||||
import SupplierDetailModal from './components/SupplierDetailModal';
|
||||
//本地服务/接口
|
||||
import { treeData, getPagePe } from './services';
|
||||
//统一列表分页
|
||||
import tableProps from '@/utils/tableProps'
|
||||
|
||||
//下拉数据接口
|
||||
type OptionType = { label: string; value: string };
|
||||
// 列表数据接口
|
||||
interface Data {
|
||||
id: number;
|
||||
name: string;
|
||||
@ -25,62 +17,95 @@ interface Data {
|
||||
personName: string;
|
||||
regTime: string;
|
||||
status: string;
|
||||
idCard?: string;
|
||||
personPhone?: string;
|
||||
type?: string;
|
||||
createTime?: string;
|
||||
}
|
||||
interface Props {
|
||||
dispatch: any;
|
||||
}
|
||||
const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
//搜搜表单
|
||||
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<any[]>([]);
|
||||
//默认选中树
|
||||
const [dataTree, setDataTree] = useState<TreeNode[]>([]);
|
||||
const [treeSelected, setTreeSelected] = useState<string[]>([]);
|
||||
//当前树key
|
||||
const [selectedKeys, setSelectedKeys] = 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 [regionOptions, setRegionOptions] = useState<OptionType[]>([]);
|
||||
//集采类别
|
||||
const [categoryOptions, setCategoryOptions] = useState<OptionType[]>([]);
|
||||
//集采库
|
||||
const [storeOptions, setStoreOptions] = useState<OptionType[]>([]);
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
window.open(
|
||||
`${SERVER_BASE}/coscoSupplierBase/getPagePeExport`,
|
||||
'_blank',
|
||||
);
|
||||
};
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
setPagination(p => ({ ...p, current: 1 }));
|
||||
getList(selectedKeys);
|
||||
};
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
setPagination(p => ({ ...p, current: 1 }));
|
||||
getList(selectedKeys);
|
||||
};
|
||||
// 点击树节点请求右表
|
||||
|
||||
const handleTreeSelect = (keys: React.Key[]) => {
|
||||
const key = keys[0] as string;
|
||||
setSelectedKeys(key);
|
||||
getList(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 (treeId: string, pageNo: number = 1, pageSize: number = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
@ -90,39 +115,33 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
setData(data.records);
|
||||
setPagination({ current: pageNo, pageSize, total: data.total });
|
||||
} else {
|
||||
message.error(message)
|
||||
message.error(message);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
// 辅助递归找第一个叶子 key（一般最下层为叶子）
|
||||
const findFirstLeafKey = (nodes: any[]): string | undefined => {
|
||||
for (const node of nodes) {
|
||||
if (!node.children || node.children.length === 0) return node.key;
|
||||
const found = findFirstLeafKey(node.children);
|
||||
if (found) return found;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
// 初始化时选中树第一个叶子节点，并请求右表
|
||||
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
//tree数据
|
||||
treeData().then((res) => {
|
||||
setTreeLoading(true);
|
||||
treeData({}).then((res) => {
|
||||
const { code, data } = res;
|
||||
if (code == 200) {
|
||||
setDataTree(data)
|
||||
const key = findFirstLeafKey(data);
|
||||
if (key) {
|
||||
setSelectedKeys(key);
|
||||
setTreeSelected([key])
|
||||
getList(key)
|
||||
if (code === 200) {
|
||||
const tree = formatTreeData(data);
|
||||
setDataTree(tree);
|
||||
const firstLeafKey = findFirstLeafKey(tree);
|
||||
if (firstLeafKey) {
|
||||
setSelectedKeys(firstLeafKey);
|
||||
setTreeSelected([firstLeafKey]);
|
||||
getList(firstLeafKey);
|
||||
}
|
||||
}
|
||||
})
|
||||
}).finally(() => {
|
||||
setTreeLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
|
||||
const columns: ColumnsType<Data> = [
|
||||
{
|
||||
title: '序号',
|
||||
@ -140,53 +159,21 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
ellipsis: true,
|
||||
render: (dom, record) =>
|
||||
<Tooltip title={record.personName}>
|
||||
<a
|
||||
onClick={() => {
|
||||
dispatch({
|
||||
type: 'globalModal/show',
|
||||
payload: {
|
||||
id: record.id,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<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: 'type',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '创建部门',
|
||||
dataIndex: 'regTime',
|
||||
key: 'regTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
},
|
||||
{ title: '身份证号', dataIndex: 'idCard', key: 'idCard', align: 'center', ellipsis: true },
|
||||
{ title: '联系电话', dataIndex: 'personPhone', key: 'personPhone', align: 'center', ellipsis: true },
|
||||
{ title: '准入单位', dataIndex: 'type', key: 'type', align: 'center' },
|
||||
{ title: '创建部门', dataIndex: 'regTime', key: 'regTime', align: 'center' },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', align: 'center', ellipsis: true },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'option',
|
||||
@ -194,43 +181,38 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
width: 140,
|
||||
render: (record: any) => (
|
||||
<Space>
|
||||
<a
|
||||
onClick={() => { setCurrentRecord(record.id); setViewVisible(true); }}
|
||||
>查看</a>
|
||||
<a
|
||||
onClick={() => { setCurrentRecord(record.id); setDetailVisible(true); }}
|
||||
>准入明细</a>
|
||||
<a onClick={() => { setCurrentRecord(record.id); setViewVisible(true); }}>查看</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 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 className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch}>
|
||||
搜索
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
|
||||
<Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset}>重置</Button>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginLeft: 'auto' }}>
|
||||
<Button className="buttonOther" type="primary" onClick={handleExport}>
|
||||
<Button className="buttonOther" type="primary" onClick={() => {
|
||||
window.open(`${SERVER_BASE}/coscoSupplierBase/getPagePeExport`, '_blank');
|
||||
}}>
|
||||
数据导出
|
||||
</Button>
|
||||
</Form.Item>
|
||||
@ -241,14 +223,17 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
{!collapsed && (
|
||||
<>
|
||||
<div className="dataTree">
|
||||
{dataTree.length > 0 && (
|
||||
<Tree
|
||||
treeData={dataTree}
|
||||
defaultExpandAll
|
||||
selectedKeys={treeSelected}
|
||||
onSelect={handleTreeSelect}
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
@ -270,26 +255,15 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
|
||||
pagination={{ ...tableProps.pagination, total: pagination.total }}
|
||||
onChange={(pagination) => getList(selectedKeys, pagination.current!, pagination.pageSize!)}
|
||||
style={{ flex: 1, minHeight: 0 }}
|
||||
scroll={{ y: 'calc(100vh - 350px)' }}
|
||||
scroll={{ y: 'calc(100vh - 350px)' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 查看组件 */}
|
||||
<SupplierViewModal
|
||||
visible={viewVisible}
|
||||
record={currentRecord}
|
||||
onCancel={() => setViewVisible(false)}
|
||||
/>
|
||||
{/* 准入明细组件 */}
|
||||
<SupplierDetailModal
|
||||
visible={detailVisible}
|
||||
record={currentRecord}
|
||||
onCancel={() => setDetailVisible(false)}
|
||||
/>
|
||||
<SupplierViewModal visible={viewVisible} record={currentRecord} onCancel={() => setViewVisible(false)} />
|
||||
<SupplierDetailModal visible={detailVisible} record={currentRecord} onCancel={() => setDetailVisible(false)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect()(personQualifiedSupplierQuery);
|
||||
export default connect()(PersonQualifiedSupplierQuery);
|
||||
|
||||
@ -6,7 +6,7 @@ import request from '@/utils/request';
|
||||
interface getPagePe {
|
||||
pageNo: number;
|
||||
pageSize: number;
|
||||
treeId?: string;
|
||||
deptId?: string;
|
||||
}
|
||||
export const getPagePe = (data: getPagePe) => request.post('/coscoSupplierBase/getPagePe', { data });
|
||||
|
||||
@ -20,43 +20,11 @@ export const getCategoryPage = (data: getCategoryPage) => request.post('/coscoSu
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export interface ListParams {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
treeId?: string;
|
||||
tmpToken?: string;
|
||||
interface treeInterface {
|
||||
upOrgId?: string
|
||||
}
|
||||
export async function list(params:ListParams) {
|
||||
return request('/api/system/library', {
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
}
|
||||
export interface supplierDetailParams {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
captcha?: string;
|
||||
tmpToken?: string;
|
||||
}
|
||||
export async function supplierDetail(params:supplierDetailParams) {
|
||||
return request(`/api/system/supplierDetail`, {
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
}
|
||||
export async function treeData() {
|
||||
return request('/api/system/treeData', {
|
||||
method: 'GET'
|
||||
});
|
||||
}
|
||||
export async function systemDict(dict:String) {
|
||||
return request(`/api/system/${dict}`, {
|
||||
method: 'GET'
|
||||
});
|
||||
}
|
||||
export const treeData = (params:treeInterface) => request.get('/org/list', { params });
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user