150 lines
4.2 KiB
TypeScript
150 lines
4.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Table, Button, message, Switch } from 'antd';
|
|
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
|
import { battachmentsGetPage, attachmentsEdit } from '../services';
|
|
import { useIntl } from 'umi';
|
|
import AttachmentsFormModal from './AttachmentsFormModal';
|
|
|
|
interface attachmentsAdd {
|
|
id: string;
|
|
attachmentsType?: string;
|
|
fileName?: string;
|
|
filePath?: string;
|
|
fileSize?: string;
|
|
fileType?: string;
|
|
fileUrl?: string;
|
|
supplierId?: string;
|
|
certificateUrl?: string;
|
|
delFlag: string;
|
|
}
|
|
|
|
interface Props {
|
|
viewType?: boolean;
|
|
record?: string;
|
|
}
|
|
const OtherAttachmentsTab: React.FC<Props> = (props) => {
|
|
const userId = sessionStorage.getItem('userId') || '';
|
|
const { viewType = false, record = userId } = props;
|
|
//语言切换
|
|
const intl = useIntl();
|
|
//列表渲染数据
|
|
const [data, setData] = useState<attachmentsAdd[]>([]);
|
|
//列表加载
|
|
const [loading, setLoading] = useState(false);
|
|
//列表分页
|
|
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
|
|
|
|
//列表方法
|
|
const getList = async (pageNo = 1, pageSize = 10) => {
|
|
setLoading(true);
|
|
try {
|
|
const { code, data } = await battachmentsGetPage({ pageNo, pageSize, supplierId: record });
|
|
if (code === 200) {
|
|
setData(data.records);
|
|
setPagination({ current: pageNo, pageSize, total: data.total });
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
//增改查
|
|
const [formVisible, setFormVisible] = useState(false);
|
|
const [editingRecord, setEditingRecord] = useState<attachmentsAdd | null>(null);
|
|
const [isViewMode, setIsViewMode] = useState(false);
|
|
const handleFormSubmit = () => {
|
|
setFormVisible(false);
|
|
getList();
|
|
};
|
|
//新增
|
|
const handleAdd = () => {
|
|
setEditingRecord(null);
|
|
setIsViewMode(false);
|
|
setFormVisible(true);
|
|
};
|
|
//是否作废
|
|
const handleObsoleteChange = async (checked: boolean, id:string) => {
|
|
// 调用你的作废接口
|
|
const res = await attachmentsEdit( { id, delFlag: checked? 'normal':'deleted' } );
|
|
if (res.code === 200) {
|
|
message.success('操作成功');
|
|
getList(pagination.current, pagination.pageSize); // 刷新列表
|
|
} else {
|
|
message.error('操作失败');
|
|
}
|
|
}
|
|
//初始化
|
|
useEffect(() => {
|
|
if(record) {
|
|
getList();
|
|
}
|
|
}, [record]);
|
|
|
|
|
|
const columns: ColumnsType<attachmentsAdd> = [
|
|
{
|
|
title: intl.formatMessage({ id: 'page.workbench.attachments.index' }),
|
|
render: (_: any, __: any, index: number) => index + 1,
|
|
width: 60,
|
|
},
|
|
{
|
|
title: '附件',
|
|
dataIndex: 'fileName',
|
|
render: (_: any, record: attachmentsAdd) => (
|
|
<a href={record.fileUrl} target="_blank" rel="noreferrer">{record.fileName}</a>
|
|
),
|
|
},
|
|
{
|
|
title: '更新时间',
|
|
dataIndex: 'updateTime',
|
|
},
|
|
|
|
{
|
|
title: '是否作废',
|
|
dataIndex: 'delFlag',
|
|
align: 'center',
|
|
width: 100,
|
|
render: (value, record: attachmentsAdd) => {
|
|
let checkedType = value === 'normal' ? true : false;
|
|
return (
|
|
<Switch
|
|
checked={checkedType}
|
|
disabled={viewType}
|
|
onChange={(checked) => handleObsoleteChange(checked, record.id)}
|
|
/>
|
|
)
|
|
|
|
},
|
|
},
|
|
];
|
|
return (
|
|
<div style={{ padding: '0 30px 0 0' }}>
|
|
<div style={{ marginBottom: 16 }}>
|
|
{!viewType && (
|
|
<Button type="primary" onClick={handleAdd}>新增</Button>
|
|
)}
|
|
</div>
|
|
<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!)}
|
|
/>
|
|
<AttachmentsFormModal
|
|
visible={formVisible}
|
|
onOk={handleFormSubmit}
|
|
onCancel={() => setFormVisible(false)}
|
|
initialValues={editingRecord || undefined}
|
|
readOnly={isViewMode}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OtherAttachmentsTab; |