133 lines
4.1 KiB
TypeScript
133 lines
4.1 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Table, Button, message } from 'antd';
|
|
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
|
import { qualificationsGetPage } from '../services';
|
|
import { useIntl } from 'umi';
|
|
import QualificationFormModal from './QualificationFormModal';
|
|
|
|
interface Qualification {
|
|
id: string;
|
|
certificateType: string;
|
|
name: string;
|
|
code: string;
|
|
typeLevel: string;
|
|
authority: string;
|
|
dateTime: string;
|
|
termOfValidity: string;
|
|
updateTime: string;
|
|
}
|
|
|
|
interface QualificationTabProps {
|
|
viewType?: boolean;
|
|
record?: string;
|
|
}
|
|
|
|
const QualificationTab: React.FC<QualificationTabProps> = (props) => {
|
|
const { viewType = false, record = '' } = props;
|
|
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 [formVisible, setFormVisible] = useState(false);
|
|
const [editingRecord, setEditingRecord] = useState<Qualification | null>(null);
|
|
const [isViewMode, setIsViewMode] = useState(false);
|
|
|
|
const getList = async (pageNo = 1, pageSize = 10) => {
|
|
setLoading(true);
|
|
try {
|
|
const { code, data } = await qualificationsGetPage({ pageNo, pageSize, supplierId: record });
|
|
if (code === 200) {
|
|
setData(data.records);
|
|
setPagination({ current: pageNo, pageSize, total: data.total });
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getList();
|
|
}, []);
|
|
|
|
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 },
|
|
{ title: 'page.workbench.certificateName', dataIndex: 'name', ellipsis: true },
|
|
{ title: 'page.workbench.certificateCode', dataIndex: 'code', ellipsis: true },
|
|
{ title: 'page.workbench.typeLevel', dataIndex: 'typeLevel' },
|
|
{ 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>
|
|
</>
|
|
),
|
|
}
|
|
]),
|
|
];
|
|
|
|
return (
|
|
<div style={{ padding: '0 30px 0 0' }}>
|
|
<div style={{ marginBottom: 16 }}>
|
|
{!viewType && (
|
|
<Button type="primary" onClick={handleAdd}>新增资质</Button>
|
|
)}
|
|
</div>
|
|
<Table
|
|
rowKey="id"
|
|
className="custom-table"
|
|
columns={columns.map(column => ({
|
|
...column,
|
|
title: typeof column.title === 'string' ? intl.formatMessage({ id: column.title }) : column.title,
|
|
}))}
|
|
dataSource={data}
|
|
pagination={pagination}
|
|
loading={loading}
|
|
scroll={{ y: 400 }}
|
|
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
|
|
/>
|
|
<QualificationFormModal
|
|
visible={formVisible}
|
|
onOk={handleFormSubmit}
|
|
onCancel={() => setFormVisible(false)}
|
|
initialValues={editingRecord || undefined}
|
|
readOnly={isViewMode}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QualificationTab;
|