12-23-上传master
This commit is contained in:
xingsy
@ -0,0 +1,91 @@
|
||||
import React from 'react';
|
||||
import { Button, Form, Input, Modal, Upload, Select } from 'antd';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
|
||||
interface CreateDocumentProps {
|
||||
//新增文档标题参数
|
||||
title: string;
|
||||
//控制弹出参数
|
||||
modalVisible: boolean;
|
||||
//返回参数
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 12 },
|
||||
};
|
||||
|
||||
const validateMessages = {
|
||||
required: '请填写${label}',
|
||||
};
|
||||
|
||||
const CreateDocument: React.FC<CreateDocumentProps> = (props) => {
|
||||
const { modalVisible, onCancel, title } = props;
|
||||
|
||||
const { Option } = Select;
|
||||
const { TextArea } = Input;
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title={title}
|
||||
visible={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
width={800}
|
||||
>
|
||||
<Form
|
||||
{...layout}
|
||||
form={form}
|
||||
name="nest-messages"
|
||||
onFinish={onFinish}
|
||||
validateMessages={validateMessages}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
float: 'right',
|
||||
marginRight: 221,
|
||||
marginTop: -22,
|
||||
position: 'relative',
|
||||
top: 25,
|
||||
color: '#808080',
|
||||
}}
|
||||
>
|
||||
最多上传一个文件，每个最大50MB
|
||||
</span>
|
||||
<Form.Item label="选择文档" rules={[{ required: true }]}>
|
||||
<Upload>
|
||||
<Button type="primary">
|
||||
<UploadOutlined />
|
||||
上传
|
||||
</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<Form.Item label="文档类型" rules={[{ required: true }]}>
|
||||
<Input placeholder="请填写文档类型" />
|
||||
</Form.Item>
|
||||
<Form.Item label="存档目录" rules={[{ required: true }]}>
|
||||
<Select style={{ width: 200 }} placeholder="请选择" optionFilterProp="children">
|
||||
<Option value="jack">项目建档</Option>
|
||||
<Option value="lucy">谈判邀请</Option>
|
||||
<Option value="tom">谈判准备</Option>
|
||||
<Option value="tom1">项目谈判</Option>
|
||||
<Option value="tom2">谈判结果</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="文档说明" rules={[{ required: true }]}>
|
||||
<TextArea rows={6} maxLength={2000} placeholder="请填写文档说明" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateDocument;
|
||||
147
src/pages/Archive/ProjectArchive/index.tsx
Normal file
147
src/pages/Archive/ProjectArchive/index.tsx
Normal file
@ -0,0 +1,147 @@
|
||||
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
|
||||
Reference in New Issue
Block a user