148 lines
4.0 KiB
TypeScript
148 lines
4.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Divider, Switch, Tag } from 'antd';
|
|
import ProTable, { ProColumns } from '@ant-design/pro-table';
|
|
import { EditOutlined, PlusOutlined } from '@ant-design/icons';
|
|
import CreateDocument from './components/CreateDocument';
|
|
|
|
export interface Status {
|
|
color: string;
|
|
text: string;
|
|
}
|
|
|
|
const statusMap = {
|
|
0: {
|
|
color: '',
|
|
text: '未归档',
|
|
},
|
|
1: {
|
|
color: 'green',
|
|
text: '已归档',
|
|
},
|
|
};
|
|
|
|
export interface TableListItem {
|
|
key: number;
|
|
name: string;
|
|
containers: number;
|
|
creator: string;
|
|
status: Status;
|
|
createdAt: number;
|
|
}
|
|
const tableListDataSource: TableListItem[] = [];
|
|
|
|
const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];
|
|
|
|
for (let i = 0; i < 5; i += 1) {
|
|
tableListDataSource.push({
|
|
key: i,
|
|
name: 'AppName',
|
|
containers: Math.floor(Math.random() * 20),
|
|
creator: creators[Math.floor(Math.random() * creators.length)],
|
|
status: statusMap[Math.floor(Math.random() * 10) % 5],
|
|
createdAt: Date.now() - Math.floor(Math.random() * 100000),
|
|
});
|
|
}
|
|
|
|
const onChange = (value: any) => {
|
|
console.log(value)
|
|
}
|
|
|
|
const expandedRowRender = () => {
|
|
const data = [];
|
|
for (let i = 0; i < 3; i += 1) {
|
|
data.push({
|
|
key: i,
|
|
id: i+1,
|
|
to: "项目建档",
|
|
upgradeNum: 'Upgraded: 56',
|
|
name: 'This is production name',
|
|
is: "有",
|
|
ispaper: 1,
|
|
state:statusMap[ i == 0 || i == 1 ? 0 : 1 ]
|
|
});
|
|
}
|
|
return (
|
|
<ProTable
|
|
columns={[
|
|
{ title: '序号', dataIndex: 'id', key: 'id' },
|
|
{ title: '归档目录', dataIndex: 'to', key: 'to' },
|
|
|
|
{ title: '文档类型', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
|
{ title: '文档名称', dataIndex: 'name', key: 'name' },
|
|
{ title: '有无电子档', dataIndex: 'is', key: 'is' },
|
|
{ title: '有无纸质', dataIndex: 'ispaper', key: 'ispaper',render:(_,record) => <Switch checkedChildren="有" unCheckedChildren="无" onChange={onChange}/> },
|
|
{ title: '状态', dataIndex: 'state', key: 'state', render: (_, record) => <Tag color={record.state.color}>{record.state.text}</Tag>,},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'operation',
|
|
key: 'operation',
|
|
valueType: 'option',
|
|
render: () => [<a key="Pause">移除</a>, <a key="Stop">编辑</a>, <a key="total">详情</a>],
|
|
},
|
|
]}
|
|
headerTitle={false}
|
|
search={false}
|
|
options={false}
|
|
dataSource={data}
|
|
// pagination={false}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const ProjectArchive: React.FC<{}> = () => {
|
|
//新增档案文件弹出参数
|
|
const [addDocument, setAddDocument] = useState<boolean>(false)
|
|
|
|
const columns: ProColumns<TableListItem>[] = [
|
|
{
|
|
title: '业务编号',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
width: 120,
|
|
render: (_) => <a>{_}</a>,
|
|
},
|
|
{
|
|
title: '标段名称',
|
|
dataIndex: 'containers',
|
|
key: 'containers',
|
|
width: 120,
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'option',
|
|
valueType: 'option',
|
|
width: 164,
|
|
render: (_,record) => [
|
|
<a key="1" onClick={() => setAddDocument(true)}><PlusOutlined />新增</a>,
|
|
<a key="2"><EditOutlined />归档</a>
|
|
]
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<ProTable<TableListItem>
|
|
columns={columns}
|
|
request={(params, sorter, filter) => {
|
|
// 表单搜索项会从 params 传入，传递给后端接口。
|
|
console.log(params, sorter, filter);
|
|
return Promise.resolve({
|
|
data: tableListDataSource,
|
|
success: true,
|
|
});
|
|
}}
|
|
rowKey="key"
|
|
pagination={{
|
|
showQuickJumper: true,
|
|
}}
|
|
expandable={{ expandedRowRender }}
|
|
search={false}
|
|
dateFormatter="string"
|
|
options={false}
|
|
/>
|
|
<CreateDocument title="新增档案文件" onCancel={() => setAddDocument(false)} modalVisible={addDocument} />
|
|
</>
|
|
);
|
|
}
|
|
export default ProjectArchive
|