diff --git a/src/pages/supplier/informationRetrieval/groupQualifiedSupplierQuery/index.tsx b/src/pages/supplier/informationRetrieval/groupQualifiedSupplierQuery/index.tsx index af6c923..8bedb4c 100644 --- a/src/pages/supplier/informationRetrieval/groupQualifiedSupplierQuery/index.tsx +++ b/src/pages/supplier/informationRetrieval/groupQualifiedSupplierQuery/index.tsx @@ -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 = ({ dispatch }) => { - //搜搜表单 const [form] = Form.useForm(); - // 树数据 - const [dataTree, setDataTree] = useState([]); - //默认选中树 + const [dataTree, setDataTree] = useState([]); const [treeSelected, setTreeSelected] = useState([]); - //当前树key const [selectedKeys, setSelectedKeys] = useState(''); - //列表数据 const [data, setData] = useState([]); - //列表加载 const [loading, setLoading] = useState(false); - //分页 + const [treeLoading, setTreeLoading] = useState(false); const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 }); - //查看是否显示状态 const [viewVisible, setViewVisible] = useState(false); - //准入明细是否显示状态 const [detailVisible, setDetailVisible] = useState(false); - //查看、准入明细 参数传递 const [currentRecord, setCurrentRecord] = useState(null); - // 境内/境外下拉数据 const [regionOptions, setRegionOptions] = useState([]); - //集采类别 - const [categoryOptions, setCategoryOptions] = useState([]); - //集采库 - const [storeOptions, setStoreOptions] = useState([]); - // 导出 - 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 = [ { title: '序号', @@ -156,7 +162,7 @@ const groupQualifiedSupplierQuery: React.FC = ({ dispatch }) => { dataIndex: 'name', key: 'name', align: 'left', - ellipsis: true, + ellipsis: true, width: 160, render: (dom, record) => @@ -164,9 +170,7 @@ const groupQualifiedSupplierQuery: React.FC = ({ dispatch }) => { onClick={() => { dispatch({ type: 'globalModal/show', - payload: { - id: record.id, - }, + payload: { id: record.id }, }); }} > @@ -209,43 +213,22 @@ const groupQualifiedSupplierQuery: React.FC = ({ dispatch }) => { width: 140, render: (record: any) => ( - { setCurrentRecord(record.id); setViewVisible(true); }} - >查看 - { setCurrentRecord(record.id); setDetailVisible(true); }} - >准入明细 + { setCurrentRecord(record.id); setViewVisible(true); }}>查看 + { setCurrentRecord(record.id); setDetailVisible(true); }}>准入明细 ), }, ]; const [collapsed, setCollapsed] = useState(false); + return ( <>
-
+ - {/* - - - - - */} - - - + - @@ -271,18 +255,20 @@ const groupQualifiedSupplierQuery: React.FC = ({ dispatch }) => {
- {!collapsed && ( <>
- {dataTree.length > 0 && ( - - )} + + {dataTree.length > 0 && ( + + )} +
setCollapsed(true)}>
@@ -302,24 +288,16 @@ const groupQualifiedSupplierQuery: React.FC = ({ 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!)} />
{/* 查看组件 */} - setViewVisible(false)} - /> + setViewVisible(false)} /> {/* 准入明细组件 */} - setDetailVisible(false)} - /> + setDetailVisible(false)} /> ); }; diff --git a/src/pages/supplier/informationRetrieval/groupQualifiedSupplierQuery/services.ts b/src/pages/supplier/informationRetrieval/groupQualifiedSupplierQuery/services.ts index e81707c..897df3b 100644 --- a/src/pages/supplier/informationRetrieval/groupQualifiedSupplierQuery/services.ts +++ b/src/pages/supplier/informationRetrieval/groupQualifiedSupplierQuery/services.ts @@ -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 }); + diff --git a/src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/index.tsx b/src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/index.tsx index 46ff29f..fd3abe8 100644 --- a/src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/index.tsx +++ b/src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/index.tsx @@ -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 = ({ 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 = ({ dispatch }) => { const [form] = Form.useForm(); - // 树数据 - const [dataTree, setDataTree] = useState([]); - //默认选中树 + const [dataTree, setDataTree] = useState([]); const [treeSelected, setTreeSelected] = useState([]); - //当前树key const [selectedKeys, setSelectedKeys] = useState(''); - //列表数据 const [data, setData] = useState([]); - //列表加载 const [loading, setLoading] = useState(false); - //分页 + const [treeLoading, setTreeLoading] = useState(false); const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 }); - //查看是否显示状态 const [viewVisible, setViewVisible] = useState(false); - //准入明细是否显示状态 const [detailVisible, setDetailVisible] = useState(false); - //查看、准入明细 参数传递 const [currentRecord, setCurrentRecord] = useState(null); - // 境内/境外下拉数据 - const [regionOptions, setRegionOptions] = useState([]); - //集采类别 - const [categoryOptions, setCategoryOptions] = useState([]); - //集采库 - const [storeOptions, setStoreOptions] = useState([]); - // 导出 - 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 = ({ 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 = [ { title: '序号', @@ -140,53 +159,21 @@ const personQualifiedSupplierQuery: React.FC = ({ dispatch }) => { ellipsis: true, render: (dom, record) => - { - dispatch({ - type: 'globalModal/show', - payload: { - id: record.id, - }, - }); - }} - > + { + dispatch({ + type: 'globalModal/show', + payload: { id: record.id }, + }); + }}> {record.personName} , }, - { - 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 = ({ dispatch }) => { width: 140, render: (record: any) => ( - { setCurrentRecord(record.id); setViewVisible(true); }} - >查看 - { setCurrentRecord(record.id); setDetailVisible(true); }} - >准入明细 + { setCurrentRecord(record.id); setViewVisible(true); }}>查看 + { setCurrentRecord(record.id); setDetailVisible(true); }}>准入明细 ), }, ]; + const [collapsed, setCollapsed] = useState(false); + return ( <>
- + - - - + - @@ -241,14 +223,17 @@ const personQualifiedSupplierQuery: React.FC = ({ dispatch }) => { {!collapsed && ( <>
- {dataTree.length > 0 && ( - - )} + + {dataTree.length > 0 && ( + + )} +
setCollapsed(true)}>
@@ -270,26 +255,15 @@ const personQualifiedSupplierQuery: React.FC = ({ 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)' }} />
- - {/* 查看组件 */} - setViewVisible(false)} - /> - {/* 准入明细组件 */} - setDetailVisible(false)} - /> + setViewVisible(false)} /> + setDetailVisible(false)} /> ); }; -export default connect()(personQualifiedSupplierQuery); +export default connect()(PersonQualifiedSupplierQuery); diff --git a/src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/services.ts b/src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/services.ts index 45d9b99..c7f99e1 100644 --- a/src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/services.ts +++ b/src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/services.ts @@ -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' - }); -} \ No newline at end of file +export const treeData = (params:treeInterface) => request.get('/org/list', { params }); + + + + \ No newline at end of file