Files
fe_supplier_frontend/src/components/CompanyInfo/component/QualificationTab.tsx

133 lines
4.1 KiB
TypeScript
Raw Normal View History

2025-06-24 10:52:30 +08:00
import React, { useEffect, useState } from 'react';
2025-06-27 10:41:33 +08:00
import { Table, Button, message } from 'antd';
2025-06-24 10:52:30 +08:00
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
2025-06-27 10:41:33 +08:00
import { qualificationsGetPage } from '../services';
2025-06-24 10:52:30 +08:00
import { useIntl } from 'umi';
2025-06-27 10:41:33 +08:00
import QualificationFormModal from './QualificationFormModal';
2025-06-24 10:52:30 +08:00
interface Qualification {
id: string;
certificateType: string;
name: string;
code: string;
typeLevel: string;
authority: string;
dateTime: string;
termOfValidity: string;
updateTime: string;
}
2025-07-02 16:18:03 +08:00
interface QualificationTabProps {
viewType?: boolean;
2025-07-03 10:24:33 +08:00
record?: string;
2025-07-02 16:18:03 +08:00
}
const QualificationTab: React.FC<QualificationTabProps> = (props) => {
2025-07-03 10:24:33 +08:00
const { viewType = false, record = '' } = props;
2025-06-24 10:52:30 +08:00
const intl = useIntl();
const [data, setData] = useState<Qualification[]>([]);
const [loading, setLoading] = useState(false);
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
2025-06-27 10:41:33 +08:00
//增改查
const [formVisible, setFormVisible] = useState(false);
const [editingRecord, setEditingRecord] = useState<Qualification | null>(null);
const [isViewMode, setIsViewMode] = useState(false);
const getList = async (pageNo = 1, pageSize = 10) => {
2025-06-24 10:52:30 +08:00
setLoading(true);
try {
2025-07-03 10:24:33 +08:00
const { code, data } = await qualificationsGetPage({ pageNo, pageSize, supplierId: record });
2025-06-24 10:52:30 +08:00
if (code === 200) {
2025-06-27 10:41:33 +08:00
setData(data.records);
setPagination({ current: pageNo, pageSize, total: data.total });
2025-06-24 10:52:30 +08:00
}
} finally {
setLoading(false);
}
};
2025-06-27 10:41:33 +08:00
2025-06-24 10:52:30 +08:00
useEffect(() => {
getList();
}, []);
2025-06-27 10:41:33 +08:00
const handleAdd = () => {
setEditingRecord(null);
setIsViewMode(false);
setFormVisible(true);
};
const handleEdit = (record: Qualification) => {
setEditingRecord(record);
setIsViewMode(false);
setFormVisible(true);
};
const handleView = (record: Qualification) => {
setEditingRecord(record);
setIsViewMode(true);
setFormVisible(true);
};
const handleFormSubmit = () => {
setFormVisible(false);
getList();
};
const columns: ColumnsType<Qualification> = [
{ title: 'page.workbench.certificateType', dataIndex: 'certificateType', ellipsis: true },
2025-07-02 16:18:03 +08:00
{ title: 'page.workbench.certificateName', dataIndex: 'name', ellipsis: true },
{ title: 'page.workbench.certificateCode', dataIndex: 'code', ellipsis: true },
2025-06-27 10:41:33 +08:00
{ title: 'page.workbench.typeLevel', dataIndex: 'typeLevel' },
2025-07-02 16:18:03 +08:00
{ title: 'page.workbench.authority', dataIndex: 'authority', ellipsis: true },
{ title: 'page.workbench.dateTime', dataIndex: 'dateTime', ellipsis: true },
{ title: 'page.workbench.termOfValidity', dataIndex: 'termOfValidity', ellipsis: true },
{ title: 'page.workbench.updateTime', dataIndex: 'updateTime', ellipsis: true },
...(viewType ? [] : [
{
title: 'page.workbench.attachments.action',
dataIndex: 'option',
width: 120,
render: (_: any, record: Qualification) => (
<>
<a style={{ marginRight: 8 }} onClick={() => handleView(record)}></a>
<a onClick={() => handleEdit(record)}></a>
</>
),
}
]),
2025-06-27 10:41:33 +08:00
];
2025-06-24 10:52:30 +08:00
return (
<div style={{ padding: '0 30px 0 0' }}>
2025-06-27 10:41:33 +08:00
<div style={{ marginBottom: 16 }}>
2025-07-02 16:18:03 +08:00
{!viewType && (
<Button type="primary" onClick={handleAdd}></Button>
)}
2025-06-27 10:41:33 +08:00
</div>
2025-06-24 10:52:30 +08:00
<Table
rowKey="id"
className="custom-table"
columns={columns.map(column => ({
...column,
2025-06-27 10:41:33 +08:00
title: typeof column.title === 'string' ? intl.formatMessage({ id: column.title }) : column.title,
2025-06-24 10:52:30 +08:00
}))}
dataSource={data}
pagination={pagination}
loading={loading}
2025-06-27 10:41:33 +08:00
scroll={{ y: 400 }}
2025-06-24 10:52:30 +08:00
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
/>
2025-06-27 10:41:33 +08:00
<QualificationFormModal
visible={formVisible}
onOk={handleFormSubmit}
onCancel={() => setFormVisible(false)}
initialValues={editingRecord || undefined}
readOnly={isViewMode}
/>
2025-06-24 10:52:30 +08:00
</div>
);
};
2025-06-27 10:41:33 +08:00
export default QualificationTab;