供应商
This commit is contained in:
孙景学
343
src/components/CompanyInfo/_mock.ts
Normal file
343
src/components/CompanyInfo/_mock.ts
Normal file
@ -0,0 +1,343 @@
|
||||
import { Request, Response } from 'express';
|
||||
|
||||
// const data = [
|
||||
// {
|
||||
// title: 'Name',
|
||||
// dataIndex: '评审项',
|
||||
// key: '评审项',
|
||||
// },
|
||||
// {
|
||||
// title: 'Other',
|
||||
// children: [
|
||||
// {
|
||||
// title: 'Age',
|
||||
// key: '人员A',
|
||||
// },
|
||||
// {
|
||||
// title: 'Address',
|
||||
// key: '人员B',
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
// ]
|
||||
const dataInvoiceInfo = [
|
||||
{
|
||||
id: '1',
|
||||
taxpayerType: '一般纳税人',
|
||||
taxpayerCode: '91345678901234567X',
|
||||
head: '北京某科技有限公司',
|
||||
address: '北京市朝阳区XX路99号',
|
||||
phone: '010-12345678',
|
||||
bank: '中国银行北京分行',
|
||||
account: '6228888888888888',
|
||||
updateTime: '2025-06-17 10:20:00',
|
||||
voided: false,
|
||||
qualificationCertificate: 'https://example.com/cert1.pdf',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
taxpayerType: '小规模纳税人',
|
||||
taxpayerCode: '91345678901234566Y',
|
||||
head: '上海某信息技术有限公司',
|
||||
address: '上海市浦东新区XX大厦8楼',
|
||||
phone: '021-87654321',
|
||||
bank: '工商银行上海分行',
|
||||
account: '6229999999999999',
|
||||
updateTime: '2025-06-16 15:30:00',
|
||||
voided: true,
|
||||
qualificationCertificate: '',
|
||||
},
|
||||
]
|
||||
const mockQualificationData = [
|
||||
{
|
||||
id: '1',
|
||||
certificateType: '建筑业企业资质证书',
|
||||
name: '建筑工程施工总承包一级',
|
||||
code: 'ZJ-A123456',
|
||||
typeLevel: '一级',
|
||||
authority: '住房和城乡建设部',
|
||||
dateTime: '2023-03-01',
|
||||
termOfValidity: '2028-03-01',
|
||||
updateTime: '2025-06-17 10:30:00',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
certificateType: '安全生产许可证',
|
||||
name: '施工企业安全生产许可证',
|
||||
code: 'AQ-789012',
|
||||
typeLevel: 'A级',
|
||||
authority: '应急管理部',
|
||||
dateTime: '2022-06-15',
|
||||
termOfValidity: '2025-06-15',
|
||||
updateTime: '2025-06-17 11:45:00',
|
||||
},
|
||||
]
|
||||
export const mockData = {
|
||||
base: {
|
||||
"id": "123456",
|
||||
"supplierType": "dvs",
|
||||
"licenceAccessory": "https://example.com/license.pdf",
|
||||
"licenceDate": "2025-12-31",
|
||||
"enterpriseType": "company",
|
||||
"name": "深圳供应商有限公司",
|
||||
"nameEn": "Shenzhen Supplier Co., Ltd.",
|
||||
"socialCreditCode": "91440300MA5F3XXXXQ",
|
||||
"range": "电子元器件、金属材料销售",
|
||||
"regAddress": "广东省深圳市南山区科技园",
|
||||
"workAddress": "广东省深圳市南山区软件产业基地",
|
||||
"parentCompanyInvestor": "深圳控股集团有限公司",
|
||||
"legalPerson": "李四",
|
||||
"idCard": "440301199001015678",
|
||||
"capital": 5000,
|
||||
"contactsName": "王五",
|
||||
"contactsPhone": "13800138000",
|
||||
"contactsType": "法人代表",
|
||||
"contactsEmail": "contact@supplier.com",
|
||||
"telephone": "0755-12345678",
|
||||
"nation": "新加坡",
|
||||
"vat": "SG12345678VAT",
|
||||
"taxpayerId": "SG-TAX-998877",
|
||||
"currency": "SGD",
|
||||
"personName": "张三",
|
||||
"personPhone": "13812345678",
|
||||
"personBank": "中国银行深圳分行",
|
||||
"personAccount": "6222020200123456789",
|
||||
"remark": "该供应商已完成初步审核",
|
||||
"accessStatus": 1,
|
||||
"blacklistStatus": 0,
|
||||
"greylistStatus": 1,
|
||||
"fillinStatus": 0,
|
||||
"fillinBy": "",
|
||||
"sapCode": "SAP998877",
|
||||
"delFlag": "normal",
|
||||
"createBy": "admin",
|
||||
"createTime": "2024-06-01 10:00:00",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2025-06-01 11:00:00",
|
||||
"lastUpdateTime": "2025-06-17 09:30:00"
|
||||
},
|
||||
qualifications: [{
|
||||
"id": "cert-001",
|
||||
"supplierId": "supplier-123456",
|
||||
"certificateType": "安全生产许可证",
|
||||
"name": "建筑施工总承包一级资质",
|
||||
"code": "ZJ20230605001",
|
||||
"typeLevel": "一级",
|
||||
"authority": "住房和城乡建设部",
|
||||
"dateTime": "2023-06-05",
|
||||
"termOfValidity": "2026-06-05",
|
||||
"accessory": "https://example.com/certificate.pdf",
|
||||
"delFlag": "normal",
|
||||
"createBy": "admin",
|
||||
"createTime": "2023-06-01 10:00:00",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2024-06-01 11:00:00",
|
||||
"lastUpdateTime": "2025-06-17 09:30:00"
|
||||
}],
|
||||
invoice: {
|
||||
"id": "invoice-001",
|
||||
"supplierId": "supplier-123456",
|
||||
"taxpayerType": "general",
|
||||
"taxpayerCode": "91440300MA5F3XXXXQ",
|
||||
"phone": "0755-12345678",
|
||||
"account": "6222020200123456789",
|
||||
"head": "深圳供应商有限公司",
|
||||
"address": "深圳市南山区科技园开票楼101号",
|
||||
"bank": "中国银行深圳分行",
|
||||
"qualificationCertificate": "https://example.com/tax-cert.pdf",
|
||||
"delFlag": "normal",
|
||||
"createBy": "admin",
|
||||
"createTime": "2024-06-01 09:00:00",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2025-06-01 10:00:00",
|
||||
"lastUpdateTime": "2025-06-17 08:30:00"
|
||||
},
|
||||
bank: [{
|
||||
"id": "bank-001",
|
||||
"supplierId": "supplier-123456",
|
||||
"interbankNumber": "123456789012",
|
||||
"bank": "中国银行深圳分行",
|
||||
"swiftCode": "BKCHCNBJ45A",
|
||||
"accountName": "Shenzhen Supplier Co., Ltd.",
|
||||
"account": "6222020200123456789",
|
||||
"currency": "CNY",
|
||||
"nation": "中国",
|
||||
"province": "广东省",
|
||||
"city": "深圳市",
|
||||
"delFlag": "normal",
|
||||
"createBy": "admin",
|
||||
"createTime": "2024-06-01 09:00:00",
|
||||
"updateBy": "admin",
|
||||
"updateTime": "2025-06-01 10:00:00",
|
||||
"lastUpdateTime": "2025-06-17 08:30:00"
|
||||
}],
|
||||
survey: {
|
||||
"supplierName": "深圳供应商有限公司",
|
||||
"name": "李四",
|
||||
"position": "采购经理",
|
||||
"phone": "13800138000",
|
||||
"email": "lisi@supplier.com",
|
||||
"dateTime": "2025-06-17",
|
||||
},
|
||||
questionReply: [
|
||||
{
|
||||
"surveyQuestion": "法律法规：\n我们确保经营和提供的产品服务遵守国家及 各业务所在地的所有使用法律、法规",
|
||||
"replyValue": "是",
|
||||
},{
|
||||
"surveyQuestion": "健康和安全：\n我们为员工提供符合法律法规的安全且健康 的工作场所。我们建立安全管理体系，并向 员工传达工作场所或生活设施的健康和安全 标准，致力于减少工作对员工造成的伤害和 疾病。",
|
||||
"replyValue": "符合",
|
||||
},{
|
||||
"surveyQuestion": "环境：\n我们能够以环境友好的方式经营。我们遵守 适用的环境法律、法规和标准；并建立有效 的环境管理体系。\n我们遵守贵集团对相关产品或服务的部分附 加环境要求，这些要求和规定体现在设计与 产品规范的合同文档中。",
|
||||
"replyValue": "符合",
|
||||
},{
|
||||
"surveyQuestion": "监督和记录：\n我们保留记录遵守相关法律和此行为准则的必要文件，并根据要求为贵集团提供对文件的查看权。我们会允许贵集团在适当的时候，以验证行为准则执行为目的的现场勘查",
|
||||
"replyValue": "符合",
|
||||
}
|
||||
],
|
||||
attachments: {
|
||||
"attachmentsType": "commitment",
|
||||
"fileName": "anti-bribery-commitment.pdf",
|
||||
"fileType": "pdf",
|
||||
"fileSize": "204800",
|
||||
"filePath": "/data/files/anti-bribery-commitment.pdf",
|
||||
"fileUrl": "http://example.com/files/anti-bribery-commitment.pdf",
|
||||
}
|
||||
};
|
||||
// 代码中会兼容本地 service mock 以及部署站点的静态数据
|
||||
export default {
|
||||
// 供应商信息
|
||||
'GET /api/system/coscoSupplier': (req: Request, res: Response) => {
|
||||
res.json({
|
||||
code: 200,
|
||||
data: mockData,
|
||||
msg: '操作成功'
|
||||
});
|
||||
},
|
||||
//
|
||||
'GET /api/system/qualifications': (req: Request, res: Response) => {
|
||||
res.json({ code: 200,
|
||||
data: mockQualificationData,
|
||||
total: 2,
|
||||
msg: '操作成功'
|
||||
});
|
||||
},
|
||||
//
|
||||
'GET /api/system/invoice': (req: Request, res: Response) => {
|
||||
res.json({ code: 200,
|
||||
data: dataInvoiceInfo,
|
||||
total: 2,
|
||||
msg: '操作成功'
|
||||
});
|
||||
},
|
||||
//
|
||||
'GET /api/system/bank': (req: Request, res: Response) => {
|
||||
res.json({ code: 200,
|
||||
data: [
|
||||
{
|
||||
id: '1',
|
||||
interbankNumber: '123456789',
|
||||
bank: '中国银行',
|
||||
accountName: '张三',
|
||||
account: '6228480000000000000',
|
||||
currency: '人民币',
|
||||
nation: '中国',
|
||||
province: '广东省',
|
||||
city: '广州市',
|
||||
updateTime: '2024-06-18',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
interbankNumber: '987654321',
|
||||
bank: '工商银行',
|
||||
accountName: '李四',
|
||||
account: '6228480000000000001',
|
||||
currency: '美元',
|
||||
nation: '中国',
|
||||
province: '江苏省',
|
||||
city: '南京市',
|
||||
updateTime: '2024-06-17',
|
||||
},
|
||||
],
|
||||
total: 2,
|
||||
msg: '操作成功'
|
||||
});
|
||||
},
|
||||
//
|
||||
'GET /api/system/tianyancha': (req: Request, res: Response) => {
|
||||
res.json({ code: 200,
|
||||
data: [
|
||||
{
|
||||
key: '1',
|
||||
base: '京',
|
||||
name: '北京科技有限公司',
|
||||
legalPersonName: '张三',
|
||||
legalPersonType: '1',
|
||||
regNumber: '110108123456789',
|
||||
industry: '信息技术',
|
||||
companyOrgType: '有限责任公司',
|
||||
regLocation: '北京市海淀区中关村',
|
||||
estiblishTime: '2010-06-15',
|
||||
fromTime: '2010-06-16',
|
||||
toTime: '2025-06-15',
|
||||
businessScope: '软件开发、技术咨询',
|
||||
approvedTime: '2010-06-10',
|
||||
regStatus: '存续',
|
||||
regCapital: '5000万元',
|
||||
regInstitute: '北京市工商局',
|
||||
orgNumber: '1234567890',
|
||||
creditCode: '91110108MA01A12345',
|
||||
property3: 'Beijing Tech Co., Ltd.',
|
||||
updatetime: '2025-06-15',
|
||||
companyId: '1001',
|
||||
taxNumber: '110108123456789',
|
||||
email: 'contact@bjtech.com',
|
||||
website: 'http://www.bjtech.com',
|
||||
phoneNumber: '010-12345678',
|
||||
lastUpdateTime: '2025-06-15 10:00:00',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
base: '沪',
|
||||
name: '上海电子商务有限公司',
|
||||
legalPersonName: '李四',
|
||||
legalPersonType: '1',
|
||||
regNumber: '310101987654321',
|
||||
industry: '电子商务',
|
||||
companyOrgType: '股份有限公司',
|
||||
regLocation: '上海市浦东新区',
|
||||
estiblishTime: '2015-03-20',
|
||||
fromTime: '2015-03-21',
|
||||
toTime: '2030-03-20',
|
||||
businessScope: '电子商务平台运营、广告设计',
|
||||
approvedTime: '2015-03-15',
|
||||
regStatus: '存续',
|
||||
regCapital: '1亿元',
|
||||
regInstitute: '上海市工商局',
|
||||
orgNumber: '0987654321',
|
||||
creditCode: '91310101MA1AB23456',
|
||||
property3: 'Shanghai E-commerce Co., Ltd.',
|
||||
updatetime: '2025-06-15',
|
||||
companyId: '1002',
|
||||
taxNumber: '310101987654321',
|
||||
email: 'info@shcommerce.com',
|
||||
website: 'http://www.shcommerce.com',
|
||||
phoneNumber: '021-87654321',
|
||||
lastUpdateTime: '2025-06-15 09:30:00',
|
||||
},
|
||||
],
|
||||
total: 2,
|
||||
msg: '操作成功' });
|
||||
},
|
||||
|
||||
'GET /api/500': (req: Request, res: Response) => {
|
||||
res.status(500).send({
|
||||
timestamp: 1513932555104,
|
||||
status: 500,
|
||||
error: 'error',
|
||||
message: 'error',
|
||||
path: '/base/category/list',
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
120
src/components/CompanyInfo/component/BankInfoTab.tsx
Normal file
120
src/components/CompanyInfo/component/BankInfoTab.tsx
Normal file
@ -0,0 +1,120 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import { bank } from '../services';
|
||||
import { useIntl } from 'umi';
|
||||
|
||||
interface BankInfo {
|
||||
id: string;
|
||||
interbankNumber: string;
|
||||
bank: string;
|
||||
accountName: string;
|
||||
account: string;
|
||||
currency: string;
|
||||
nation: string;
|
||||
province: string;
|
||||
city: string;
|
||||
updateTime: string;
|
||||
}
|
||||
// 表格头部
|
||||
const columns: ColumnsType<BankInfo> = [
|
||||
{
|
||||
title: 'page.workbench.bank.index',
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
render: (_: any, __: any, index: number) => index + 1
|
||||
},
|
||||
{
|
||||
title: 'page.workbench.bank.interbankNumber',
|
||||
dataIndex: 'interbankNumber',
|
||||
key: 'interbankNumber',
|
||||
},
|
||||
{
|
||||
title: 'page.workbench.bank.bank',
|
||||
dataIndex: 'bank',
|
||||
key: 'bank',
|
||||
},
|
||||
{
|
||||
title: 'page.workbench.bank.accountName',
|
||||
dataIndex: 'accountName',
|
||||
key: 'accountName',
|
||||
},
|
||||
{
|
||||
title: 'page.workbench.bank.account',
|
||||
dataIndex: 'account',
|
||||
key: 'account',
|
||||
},
|
||||
{
|
||||
title: 'page.workbench.bank.currency',
|
||||
dataIndex: 'currency',
|
||||
key: 'currency',
|
||||
},
|
||||
{
|
||||
title: 'page.workbench.bank.nation',
|
||||
dataIndex: 'nation',
|
||||
key: 'nation',
|
||||
},
|
||||
{
|
||||
title: 'page.workbench.bank.province',
|
||||
dataIndex: 'province',
|
||||
key: 'province',
|
||||
},
|
||||
{
|
||||
title: 'page.workbench.bank.city',
|
||||
dataIndex: 'city',
|
||||
key: 'city',
|
||||
},
|
||||
{
|
||||
title: 'page.workbench.bank.updateTime',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
},
|
||||
];
|
||||
const BankInfoTab: React.FC = () => {
|
||||
//双语
|
||||
const intl = useIntl();
|
||||
//列表渲染数据
|
||||
const [data, setData] = useState<BankInfo[]>([]);
|
||||
//列表加载
|
||||
const [loading, setLoading] = useState(false);
|
||||
//列表分页
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
|
||||
//列表方法
|
||||
const getList = async (page: number = 1, pageSize: number = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { code, data, total } = await bank({page, pageSize});
|
||||
if (code === 200) {
|
||||
setData(data);
|
||||
setPagination({ current: page, pageSize, total });
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
//初始化
|
||||
useEffect(() => {
|
||||
getList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ padding: '0 30px 0 0' }}>
|
||||
<Table
|
||||
rowKey="id"
|
||||
className="custom-table"
|
||||
columns={columns.map(column => ({
|
||||
...column,
|
||||
title: intl.formatMessage({ id: column.title as string })
|
||||
}))}
|
||||
dataSource={data}
|
||||
pagination={pagination}
|
||||
loading={loading}
|
||||
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BankInfoTab;
|
||||
106
src/components/CompanyInfo/component/BaseInfoTab.tsx
Normal file
106
src/components/CompanyInfo/component/BaseInfoTab.tsx
Normal file
@ -0,0 +1,106 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Descriptions } from 'antd';
|
||||
import { coscoSupplier } from '../services';
|
||||
import { useIntl } from 'umi';
|
||||
|
||||
const BaseInfoTab: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const [registerInfo, setRegisterInfo] = useState<any>({ base: {} });
|
||||
|
||||
const fetchData = async () => {
|
||||
const res = await coscoSupplier({});
|
||||
if (res.code === 200) {
|
||||
setRegisterInfo(res.data);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
//供应商信息
|
||||
fetchData()
|
||||
}, []);
|
||||
|
||||
if (!registerInfo?.base) return <div>{intl.formatMessage({ id: 'component.globalModal.loading' })}...</div>;
|
||||
|
||||
return (
|
||||
<div style={{ padding: '0 30px 0 0' }}>
|
||||
<Descriptions
|
||||
bordered
|
||||
column={2}
|
||||
size="middle"
|
||||
style={{ background: '#fff', padding: '16px 0 0' }}
|
||||
>
|
||||
{registerInfo.base.supplierType === 'dvs' && (
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.supplierIdentityType' })}>
|
||||
{intl.formatMessage({ id: 'component.globalModal.domesticEnterprise' })}
|
||||
</Descriptions.Item>
|
||||
)}
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.enterpriseName' })}>
|
||||
{registerInfo.base.name}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.enterpriseEnglishName' })}>
|
||||
{registerInfo.base.nameEn}
|
||||
</Descriptions.Item>
|
||||
{registerInfo.base.supplierType !== 'dvs' && (
|
||||
<>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignCountryRegion' })}>
|
||||
{registerInfo.base.nation}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignVAT' })}>
|
||||
{registerInfo.base.vat}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignTaxpayerId' })}>
|
||||
{registerInfo.base.taxpayerId}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignCurrency' })}>
|
||||
{registerInfo.base.currency}
|
||||
</Descriptions.Item>
|
||||
</>
|
||||
)}
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.creditCode' })}>
|
||||
{registerInfo.base.socialCreditCode}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.businessScope' })}>
|
||||
{registerInfo.base.range}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.registerAddress' })}>
|
||||
{registerInfo.base.regAddress}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.officeAddress' })}>
|
||||
{registerInfo.base.workAddress}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.parentCompanyInfo' })}>
|
||||
{registerInfo.base.parentCompanyInvestor}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.legalPerson' })}>
|
||||
{registerInfo.base.legalPerson}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.idCardNumber' })}>
|
||||
{registerInfo.base.idCard}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.registeredCapital' })}>
|
||||
{registerInfo.base.capital}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.supplierType' })}>
|
||||
{registerInfo.base.enterpriseType}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactName' })}>
|
||||
{registerInfo.base.contactsName}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactMobile' })}>
|
||||
{registerInfo.base.contactsPhone}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactIdType' })}>
|
||||
{registerInfo.base.contactsType}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactEmail' })}>
|
||||
{registerInfo.base.contactsEmail}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactPhone' })}>
|
||||
{registerInfo.base.telephone}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BaseInfoTab;
|
||||
117
src/components/CompanyInfo/component/ContactsInfoTab.tsx
Normal file
117
src/components/CompanyInfo/component/ContactsInfoTab.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import { coscoSupplier } from '../services';
|
||||
import { useIntl } from 'umi';
|
||||
|
||||
// 联系人信息接口
|
||||
interface Contact {
|
||||
id: string;
|
||||
name: string;
|
||||
department: string;
|
||||
position: string;
|
||||
mobile: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
const ContactsInfoTab: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const [data, setData] = useState<Contact[]>([]);
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchContacts = async (page: number = 1, pageSize: number = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await coscoSupplier(page);
|
||||
if (res.code === 200) {
|
||||
setData(res.contacts || []);
|
||||
setPagination({
|
||||
current: page,
|
||||
pageSize,
|
||||
total: res.totalContacts || (res.contacts?.length || 0),
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchContacts();
|
||||
}, []);
|
||||
|
||||
const handleTableChange = (pagination: TablePaginationConfig) => {
|
||||
fetchContacts(pagination.current!, pagination.pageSize!);
|
||||
};
|
||||
|
||||
const columns: ColumnsType<Contact> = [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.contacts.index' }),
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
render: (_: any, __: any, index: number) =>
|
||||
(pagination.current! - 1) * pagination.pageSize! + index + 1,
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.contacts.name' }),
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.contacts.department' }),
|
||||
dataIndex: 'department',
|
||||
key: 'department',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.contacts.position' }),
|
||||
dataIndex: 'position',
|
||||
key: 'position',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.contacts.mobile' }),
|
||||
dataIndex: 'mobile',
|
||||
key: 'mobile',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.contacts.phone' }),
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.contacts.email' }),
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.contacts.updateTime' }),
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ padding: '0 30px 0 0' }}>
|
||||
<Table
|
||||
className="custom-table"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={pagination}
|
||||
onChange={handleTableChange}
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactsInfoTab;
|
||||
83
src/components/CompanyInfo/component/InvoiceTab.tsx
Normal file
83
src/components/CompanyInfo/component/InvoiceTab.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import { invoice } from '../services';
|
||||
import { useIntl } from 'umi';
|
||||
|
||||
interface InvoiceInfo {
|
||||
id: string;
|
||||
taxpayerType: string;
|
||||
taxpayerCode: string;
|
||||
head: string;
|
||||
address: string;
|
||||
phone: string;
|
||||
bank: string;
|
||||
account: string;
|
||||
updateTime: string;
|
||||
certificateUrl: string;
|
||||
}
|
||||
|
||||
const columns: ColumnsType<InvoiceInfo> = [
|
||||
{ title: 'page.workbench.invoice.index', dataIndex: 'index', width: 80, key: 'index', render: (_: any, __: any, index: number) => index + 1 },
|
||||
{ title: 'page.workbench.invoice.taxpayerType', dataIndex: 'taxpayerType' },
|
||||
{ title: 'page.workbench.invoice.taxpayerCode', dataIndex: 'taxpayerCode' },
|
||||
{ title: 'page.workbench.invoice.head', dataIndex: 'head' },
|
||||
{ title: 'page.workbench.invoice.address', dataIndex: 'address' },
|
||||
{ title: 'page.workbench.invoice.phone', dataIndex: 'phone' },
|
||||
{ title: 'page.workbench.invoice.bank', dataIndex: 'bank' },
|
||||
{ title: 'page.workbench.invoice.account', dataIndex: 'account' },
|
||||
{ title: 'page.workbench.invoice.updateTime', dataIndex: 'updateTime' },
|
||||
{
|
||||
title: 'page.workbench.invoice.qualificationCertificate',
|
||||
width:'180px',
|
||||
dataIndex: 'qualificationCertificate',
|
||||
render: (val: string) => (val ? <a href={val} target="_blank" rel="noreferrer">查看附件</a> : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const InvoiceTab: React.FC = () => {
|
||||
//语言切换
|
||||
const intl = useIntl();
|
||||
//列表渲染数据
|
||||
const [data, setData] = useState<InvoiceInfo[]>([]);
|
||||
//列表加载
|
||||
const [loading, setLoading] = useState(false);
|
||||
//列表分页
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
|
||||
//列表方法
|
||||
const getList = async (page = 1, pageSize = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { code, data, total } = await invoice({page, pageSize});
|
||||
if (code === 200) {
|
||||
setData(data);
|
||||
setPagination({ current: page, pageSize, total });
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
//初始化
|
||||
useEffect(() => {
|
||||
getList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ padding: '0 30px 0 0' }}>
|
||||
<Table
|
||||
className="custom-table"
|
||||
rowKey="id"
|
||||
columns={columns.map(column => ({
|
||||
...column,
|
||||
title: intl.formatMessage({ id: column.title as string })
|
||||
}))}
|
||||
dataSource={data}
|
||||
pagination={pagination}
|
||||
loading={loading}
|
||||
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InvoiceTab;
|
||||
74
src/components/CompanyInfo/component/OtherAttachmentsTab.tsx
Normal file
74
src/components/CompanyInfo/component/OtherAttachmentsTab.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { coscoSupplier } from '../services';
|
||||
import { useIntl } from 'umi';
|
||||
|
||||
interface AttachmentItem {
|
||||
id: string;
|
||||
fileName: string;
|
||||
fileType: string;
|
||||
uploadTime: string;
|
||||
uploader: string;
|
||||
fileUrl: string;
|
||||
}
|
||||
|
||||
const OtherAttachmentsTab: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const [data, setData] = useState<AttachmentItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
coscoSupplier(1).then((res: any) => {
|
||||
setLoading(false);
|
||||
if (res.code === 200) {
|
||||
setData(res.otherAttachments || []);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const columns: ColumnsType<AttachmentItem> = [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.attachments.index' }),
|
||||
render: (_: any, __: any, index: number) => index + 1,
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.attachments.fileName' }),
|
||||
dataIndex: 'fileName',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.attachments.fileType' }),
|
||||
dataIndex: 'fileType',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.attachments.uploadTime' }),
|
||||
dataIndex: 'uploadTime',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.attachments.uploader' }),
|
||||
dataIndex: 'uploader',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.attachments.action' }),
|
||||
dataIndex: 'fileUrl',
|
||||
render: (val: string) => (val ? <a href={val} target="_blank" rel="noreferrer">下载</a> : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ padding: '0 30px 0 0' }}>
|
||||
<Table
|
||||
className="custom-table"
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 10 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OtherAttachmentsTab;
|
||||
75
src/components/CompanyInfo/component/QualificationTab.tsx
Normal file
75
src/components/CompanyInfo/component/QualificationTab.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import { qualifications } from '../services';
|
||||
import { useIntl } from 'umi';
|
||||
|
||||
interface Qualification {
|
||||
id: string;
|
||||
certificateType: string;
|
||||
name: string;
|
||||
code: string;
|
||||
typeLevel: string;
|
||||
authority: string;
|
||||
dateTime: string;
|
||||
termOfValidity: string;
|
||||
updateTime: string;
|
||||
}
|
||||
// 列表头部信息
|
||||
const columns: ColumnsType<Qualification> = [
|
||||
{ title: 'page.workbench.certificateType', dataIndex: 'certificateType' },
|
||||
{ title: 'page.workbench.certificateName', dataIndex: 'name' },
|
||||
{ title: 'page.workbench.certificateCode', dataIndex: 'code' },
|
||||
{ title: 'page.workbench.typeLevel', dataIndex: 'typeLevel' },
|
||||
{ title: 'page.workbench.authority', dataIndex: 'authority' },
|
||||
{ title: 'page.workbench.dateTime', dataIndex: 'dateTime' },
|
||||
{ title: 'page.workbench.termOfValidity', dataIndex: 'termOfValidity' },
|
||||
{ title: 'page.workbench.updateTime', dataIndex: 'updateTime' },
|
||||
];
|
||||
|
||||
const QualificationTab: React.FC = () => {
|
||||
//语言切换
|
||||
const intl = useIntl();
|
||||
//列表渲染数据
|
||||
const [data, setData] = useState<Qualification[]>([]);
|
||||
//列表加载
|
||||
const [loading, setLoading] = useState(false);
|
||||
//列表分页
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
|
||||
//列表方法
|
||||
const getList = async (page = 1, pageSize = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { code, data, total } = await qualifications({page, pageSize});
|
||||
if (code === 200) {
|
||||
setData(data);
|
||||
setPagination({ current: page, pageSize, total });
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
//初始化
|
||||
useEffect(() => {
|
||||
getList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ padding: '0 30px 0 0' }}>
|
||||
<Table
|
||||
rowKey="id"
|
||||
className="custom-table"
|
||||
columns={columns.map(column => ({
|
||||
...column,
|
||||
title: intl.formatMessage({ id: column.title as string })
|
||||
}))}
|
||||
dataSource={data}
|
||||
pagination={pagination}
|
||||
loading={loading}
|
||||
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default QualificationTab;
|
||||
46
src/components/CompanyInfo/index.tsx
Normal file
46
src/components/CompanyInfo/index.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Tabs } from 'antd';
|
||||
import { useIntl } from 'umi';
|
||||
import BaseInfoTab from './component/BaseInfoTab';
|
||||
import QualificationTab from './component/QualificationTab';
|
||||
import InvoiceTab from './component/InvoiceTab';
|
||||
import OtherAttachmentsTab from './component/OtherAttachmentsTab';
|
||||
import ContactsInfoTab from './component/ContactsInfoTab';
|
||||
import BankInfoTab from './component/BankInfoTab';
|
||||
|
||||
import Supplier from '@/pages/supplier/register/supplier';
|
||||
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const CompanyInfo: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
// 切换tab
|
||||
const [subTab, setSubTab] = useState<string>('base');
|
||||
|
||||
return (
|
||||
<Tabs activeKey={subTab} onChange={setSubTab}>
|
||||
<TabPane tab={intl.formatMessage({ id: 'page.workbench.base' })} key="base">
|
||||
{/* <Supplier /> */}
|
||||
<BaseInfoTab />
|
||||
</TabPane>
|
||||
<TabPane tab={intl.formatMessage({ id: 'page.workbench.qualification' })} key="qualification">
|
||||
<QualificationTab />
|
||||
</TabPane>
|
||||
<TabPane tab={intl.formatMessage({ id: 'page.workbench.invoice' })} key="invoice">
|
||||
<InvoiceTab />
|
||||
</TabPane>
|
||||
<TabPane tab={intl.formatMessage({ id: 'page.workbench.bank' })} key="bank">
|
||||
<BankInfoTab />
|
||||
</TabPane>
|
||||
<TabPane tab={intl.formatMessage({ id: 'page.workbench.attachments' })} key="attachments">
|
||||
<OtherAttachmentsTab />
|
||||
</TabPane>
|
||||
<TabPane tab={intl.formatMessage({ id: 'page.workbench.contacts' })} key="contacts">
|
||||
<ContactsInfoTab />
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyInfo;
|
||||
38
src/components/CompanyInfo/services.ts
Normal file
38
src/components/CompanyInfo/services.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
|
||||
export async function coscoSupplier(params:any) {
|
||||
console.log(params,'params');
|
||||
|
||||
return request('/api/system/coscoSupplier', {
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
export async function library(params:any) {
|
||||
return request('/api/system/library', {
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
export async function qualifications(params:any) {
|
||||
return request('/api/system/qualifications', {
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
}
|
||||
export async function invoice(params:any) {
|
||||
return request('/api/system/invoice', {
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
}
|
||||
export async function bank(params:any) {
|
||||
return request('/api/system/bank', {
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user