291 lines
8.8 KiB
TypeScript
291 lines
8.8 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
//第三方UI库/组件
|
|
import { Form, Button, Table, Input, Space, Tooltip, Select } from 'antd';
|
|
import { SearchOutlined, DeleteOutlined } 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 CategorySelector from '@/components/TreeCategorySelector';
|
|
import RegionTypeSelect from '@/components/CommonSelect/RegionTypeSelect'
|
|
//本地服务/接口
|
|
import { getPageMy } from './services';
|
|
import { downloadFile } from '@/utils/download';
|
|
import { getDictList } from '@/servers/api/dicts'
|
|
//统一列表分页
|
|
import tableProps from '@/utils/tableProps'
|
|
const accessStatusType = [
|
|
{ code: '0', dicName: '未准入' },
|
|
{ code: '1', dicName: '已准入' },
|
|
{ code: '2', dicName: '已退出' }
|
|
]
|
|
|
|
//准入状态
|
|
const statusColor = (status: string) => {
|
|
if (status === '已驳回' || status === '已退出') return '#ef6969';
|
|
if (status === '已准入') return '#004f8e';
|
|
return undefined;
|
|
};
|
|
// 列表数据接口
|
|
interface Data {
|
|
id: number;
|
|
name: string;
|
|
region: string;
|
|
supplierType: string;
|
|
regTime: string;
|
|
status: string;
|
|
}
|
|
interface mySupplierInquiryProps {
|
|
dispatch: any;
|
|
}
|
|
const mySupplierInquiry: React.FC<mySupplierInquiryProps> = ({ dispatch }) => {
|
|
//搜搜表单
|
|
const [form] = Form.useForm();
|
|
//列表数据
|
|
const [data, setData] = useState<Data[]>([]);
|
|
//列表加载
|
|
const [loading, setLoading] = 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('');
|
|
// 导出
|
|
const handleExport = async () => {
|
|
const values = form.getFieldsValue();
|
|
downloadFile('/coscoSupplierBase/getPageMyExport', 'GET', values);
|
|
};
|
|
// 查询
|
|
const handleSearch = () => {
|
|
setPagination({ ...pagination, current: 1 });
|
|
getList(1, pagination.pageSize);
|
|
};
|
|
// 重置
|
|
const handleReset = () => {
|
|
form.resetFields();
|
|
setPagination({ ...pagination, current: 1 });
|
|
getList(1, pagination.pageSize);
|
|
};
|
|
//列表方法
|
|
const getList = async (pageNo: number = 1, pageSize: number = 10) => {
|
|
setLoading(true);
|
|
try {
|
|
const values = form.getFieldsValue();
|
|
const { code, data, message } = await getPageMy({ pageNo, pageSize, ...values });
|
|
if (code === 200) {
|
|
setData(data.records);
|
|
setPagination({ current: pageNo, pageSize, total: data.total });
|
|
} else {
|
|
message.error(message)
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
const [enterpriseTypeMap, setEnterpriseTypeMap] = useState<{ [code: string]: string }>({});
|
|
// 初始化
|
|
useEffect(() => {
|
|
getDictList('enterprise_type').then((res: any) => {
|
|
const { code, data } = res;
|
|
if (code == 200) {
|
|
const map: { [code: string]: string } = {};
|
|
data.forEach((item: { code: string, dicName: string }) => {
|
|
map[item.code] = item.dicName;
|
|
});
|
|
setEnterpriseTypeMap(map);
|
|
}
|
|
})
|
|
getList();
|
|
}, []);
|
|
|
|
|
|
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: 'name',
|
|
key: 'name',
|
|
width: 160,
|
|
ellipsis: true,
|
|
render: (dom, record) =>
|
|
<Tooltip title={record.name}>
|
|
<a
|
|
onClick={() => {
|
|
dispatch({
|
|
type: 'globalModal/show',
|
|
payload: {
|
|
id: record.id,
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
{record.name}
|
|
</a>
|
|
</Tooltip>,
|
|
},
|
|
{
|
|
title: '境内/境外',
|
|
dataIndex: 'supplierTypeCn',
|
|
key: 'supplierTypeCn',
|
|
align: 'center',
|
|
width: 160,
|
|
},
|
|
{
|
|
title: '企业类型',
|
|
dataIndex: 'enterpriseType',
|
|
key: 'enterpriseType',
|
|
align: 'center',
|
|
width: 120,
|
|
render: (code: string) => enterpriseTypeMap[code] || code
|
|
},
|
|
|
|
{
|
|
title: '准入品类',
|
|
dataIndex: 'categoryNameList',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
render: (value: { categoryName: string; categoryPathName: string }[] = []) => {
|
|
if (!value || value.length === 0) return '-';
|
|
|
|
// 多于1条
|
|
const allNames = value.map(item => item.categoryPathName).join('\n');
|
|
return (
|
|
<Tooltip title={<pre style={{ margin: 0, fontSize: 12, fontFamily: '微软雅黑', whiteSpace: 'pre-wrap' }}>{allNames}</pre>} overlayStyle={{ zIndex: 1200 }}>
|
|
<span>
|
|
{value[0].categoryName}
|
|
{value.length !== 1 && (
|
|
<span>等</span>
|
|
)}
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: '准入时间',
|
|
dataIndex: 'updateTime',
|
|
key: 'updateTime',
|
|
align: 'center',
|
|
width: 180,
|
|
},
|
|
{
|
|
title: '准入状态',
|
|
dataIndex: 'accessStatusCn',
|
|
key: 'accessStatusCn',
|
|
width: 160,
|
|
align: 'center',
|
|
render: (val: string) =>
|
|
<span style={{
|
|
color: statusColor(val) || (val === '未准入' ? '#aaa' : undefined),
|
|
}}>{val}</span>
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'option',
|
|
align: 'center',
|
|
width: 160,
|
|
fixed: 'right',
|
|
render: (record: any) => (
|
|
<Space>
|
|
<a
|
|
onClick={() => {
|
|
dispatch({
|
|
type: 'globalModal/show',
|
|
payload: {
|
|
id: record.id,
|
|
},
|
|
});
|
|
}}
|
|
>查看</a>
|
|
{/* <a
|
|
onClick={() => { setCurrentRecord(record.id); setDetailVisible(true); }}
|
|
>准入明细</a> */}
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<div className="common-container">
|
|
<div className="filter-action-row">
|
|
<Form
|
|
form={form}
|
|
layout="inline"
|
|
className="filter-form"
|
|
>
|
|
<Form.Item name="name" label="供应商名称">
|
|
<Input placeholder="请输入" style={{ width: 180 }} allowClear maxLength={20} />
|
|
</Form.Item>
|
|
<Form.Item name="categoryId" label="准入品类">
|
|
<CategorySelector multiple={false} />
|
|
</Form.Item>
|
|
<Form.Item name="accessStatus" label="准入状态">
|
|
<Select style={{ width: 160 }} placeholder="请选择" allowClear>
|
|
{accessStatusType?.map(item => (
|
|
<Select.Option key={item.code} value={item.code}>{item.dicName}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="supplierType" label="境内/境外">
|
|
<RegionTypeSelect />
|
|
</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={handleExport}>
|
|
数据导出
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
<Table
|
|
rowKey="id"
|
|
columns={columns}
|
|
dataSource={data}
|
|
loading={loading}
|
|
pagination={{ ...tableProps.pagination, total: pagination.total }}
|
|
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
|
|
style={{ flex: 1, minHeight: 0 }}
|
|
scroll={{ y: 'calc(100vh - 380px)' }}
|
|
/>
|
|
</div>
|
|
{/* 查看组件
|
|
<SupplierViewModal
|
|
visible={viewVisible}
|
|
record={currentRecord}
|
|
onCancel={() => setViewVisible(false)}
|
|
/>*/}
|
|
{/* 准入明细组件
|
|
<SupplierDetailModal
|
|
visible={detailVisible}
|
|
record={currentRecord}
|
|
onCancel={() => setDetailVisible(false)}
|
|
/>*/}
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default connect()(mySupplierInquiry);
|