2017-07-12 10:17:57 +08:00
|
|
|
import React, { Component } from 'react'
|
2017-07-14 16:54:20 +08:00
|
|
|
import PropTypes from 'prop-types'
|
2017-07-12 10:17:57 +08:00
|
|
|
// import { connect } from 'react-redux'
|
2017-07-14 16:54:20 +08:00
|
|
|
import { Table, Button, Modal, Form, Input, Icon, Tooltip } from 'antd';
|
|
|
|
const { TextArea } = Input;
|
|
|
|
const FormItem = Form.Item;
|
2017-07-12 10:17:57 +08:00
|
|
|
|
|
|
|
const columns = [{
|
|
|
|
title: 'Name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
key: 'name',
|
2017-07-12 14:18:17 +08:00
|
|
|
render: text => <a href="#">{text}</a>
|
2017-07-12 10:17:57 +08:00
|
|
|
}, {
|
|
|
|
title: 'Age',
|
|
|
|
dataIndex: 'age',
|
2017-07-12 14:18:17 +08:00
|
|
|
key: 'age'
|
2017-07-12 10:17:57 +08:00
|
|
|
}, {
|
|
|
|
title: 'Action',
|
|
|
|
key: 'action',
|
|
|
|
render: () => (
|
|
|
|
<span>
|
|
|
|
<a href="#">修改</a>
|
|
|
|
<span className="ant-divider" />
|
|
|
|
<a href="#">删除</a>
|
|
|
|
</span>
|
2017-07-12 14:18:17 +08:00
|
|
|
)
|
2017-07-12 10:17:57 +08:00
|
|
|
}];
|
|
|
|
|
|
|
|
const data = [{
|
|
|
|
key: '1',
|
|
|
|
age: 32
|
|
|
|
}, {
|
|
|
|
key: '2',
|
|
|
|
age: 42
|
|
|
|
}, {
|
|
|
|
key: '3',
|
|
|
|
age: 32
|
|
|
|
}];
|
|
|
|
|
2017-07-14 16:54:20 +08:00
|
|
|
const formItemLayout = {
|
|
|
|
labelCol: {
|
|
|
|
xs: { span: 24 },
|
|
|
|
sm: { span: 6 }
|
|
|
|
},
|
|
|
|
wrapperCol: {
|
|
|
|
xs: { span: 24 },
|
|
|
|
sm: { span: 14 }
|
|
|
|
}
|
|
|
|
};
|
|
|
|
class ProjectList extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
visible: false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
static propTypes = {
|
|
|
|
form: PropTypes.object
|
|
|
|
}
|
|
|
|
addProject = () => {
|
|
|
|
this.setState({
|
|
|
|
visible: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
handleOk = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.form.validateFields((err, values) => {
|
|
|
|
if (!err) {
|
|
|
|
console.log('Received values of form: ', values);
|
|
|
|
this.setState({
|
|
|
|
visible: false
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
handleCancel = () => {
|
|
|
|
this.props.form.resetFields();
|
|
|
|
this.setState({
|
|
|
|
visible: false
|
|
|
|
});
|
|
|
|
}
|
|
|
|
handleSubmit = (e) => {
|
|
|
|
console.log(e);
|
|
|
|
}
|
2017-07-12 10:17:57 +08:00
|
|
|
render() {
|
2017-07-14 16:54:20 +08:00
|
|
|
const { getFieldDecorator } = this.props.form;
|
2017-07-12 10:17:57 +08:00
|
|
|
return (
|
2017-07-14 16:54:20 +08:00
|
|
|
<div>
|
|
|
|
<Modal
|
|
|
|
title="创建项目"
|
|
|
|
visible={this.state.visible}
|
|
|
|
onOk={this.handleOk}
|
|
|
|
onCancel={this.handleCancel}
|
|
|
|
>
|
|
|
|
<Form onSubmit={this.handleSubmit}>
|
|
|
|
|
|
|
|
<FormItem
|
|
|
|
{...formItemLayout}
|
|
|
|
label="项目名称"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('name', {
|
|
|
|
rules: [{
|
|
|
|
required: true, message: '请输入项目名称!'
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<Input />
|
|
|
|
)}
|
|
|
|
</FormItem>
|
|
|
|
|
|
|
|
<FormItem
|
|
|
|
{...formItemLayout}
|
|
|
|
label={(
|
|
|
|
<span>
|
|
|
|
线上域名
|
|
|
|
<Tooltip title="将根据配置的线上域名访问mock数据">
|
|
|
|
<Icon type="question-circle-o" />
|
|
|
|
</Tooltip>
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{getFieldDecorator('prd_host', {
|
|
|
|
rules: [{
|
|
|
|
required: true, message: '请输入项目线上域名!'
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<Input />
|
|
|
|
)}
|
|
|
|
</FormItem>
|
|
|
|
|
|
|
|
<FormItem
|
|
|
|
{...formItemLayout}
|
|
|
|
label="URL"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('basepath', {
|
|
|
|
rules: [{
|
|
|
|
required: true, message: '请输入项目基本路径!'
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<Input />
|
|
|
|
)}
|
|
|
|
</FormItem>
|
|
|
|
|
|
|
|
<FormItem
|
|
|
|
{...formItemLayout}
|
|
|
|
label="描述"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('desc', {
|
|
|
|
rules: [{
|
|
|
|
required: true, message: '请输入描述!'
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<TextArea rows={4} />
|
|
|
|
)}
|
|
|
|
</FormItem>
|
|
|
|
</Form>
|
|
|
|
</Modal>
|
|
|
|
|
|
|
|
<Table
|
|
|
|
columns={columns}
|
|
|
|
dataSource={data}
|
|
|
|
title={() => <Button type="primary" onClick={this.addProject}>创建项目</Button>}
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
2017-07-12 10:17:57 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2017-07-14 16:54:20 +08:00
|
|
|
|
|
|
|
export default Form.create()(ProjectList);
|