import React from 'react';
|
import { Card, Row, Col, Form, Input, Button, Spin } from 'antd';
|
|
const FormItem = Form.Item;
|
const { TextArea } = Input;
|
|
class FunctionDetail extends React.Component {
|
constructor(props) {
|
super(props)
|
this.state = {
|
dataSet: {}
|
}
|
}
|
|
handleSubmit = (e) => { // 提交表单数据
|
e.preventDefault();
|
this.props.form.validateFields((err, values) => {
|
console.log('提交表单数据：', values);
|
if (err) return;
|
let obj = {
|
...values,
|
id: this.props.params.id, //编号
|
moduleId: this.props.params.currentNode[0].id //模块编号
|
}
|
this.props.saveFun(obj);
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form;
|
const { params, dataSet } = this.props;
|
const formItemLayout = {
|
labelCol: { xs: { span: 24 }, sm: { span: 5 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 19 }, },
|
};
|
|
return (
|
<div className="functiondetail-main">
|
<Spin spinning={this.props.loading}>
|
<div style={{ margin: 20 }}>
|
<Form onSubmit={this.handleSubmit}>
|
<Card title={params.id ? '功能信息（编辑）' : '功能信息（新增）'} bordered={false}
|
extra={
|
<Row type="flex" gutter={20}>
|
<Col>
|
<Button onClick={this.props.cancelFun}>返回</Button>
|
</Col>
|
<Col>
|
<Button type="primary" htmlType="submit">确认</Button>
|
</Col>
|
</Row>
|
}
|
>
|
<Row type="flex">
|
<Col span={14}>
|
<FormItem label={"模块名称"} {...formItemLayout}>
|
<span>{this.props.params.currentNode[0].name}</span>
|
</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={14}>
|
<FormItem label={"标识符"} {...formItemLayout}>
|
{getFieldDecorator('symbol', {
|
rules: [{ required: true, message: '请输入标识符' }],
|
initialValue: dataSet.symbol || '',
|
})(
|
<Input placeholder="请输入标识符" />
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={14}>
|
<FormItem label={"功能名称"} {...formItemLayout}>
|
{getFieldDecorator('name', {
|
rules: [{ required: true, message: '请输入功能名称' }],
|
initialValue: dataSet.name || '',
|
})(
|
<Input placeholder="请输入功能名称" />
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={14}>
|
<FormItem label={"描述"} {...formItemLayout}>
|
{getFieldDecorator('description', {
|
rules: [{ max: 200, message: '描述的内容不能超过200字' }],
|
initialValue: dataSet.description
|
})(
|
<TextArea placeholder="请输入描述" rows={5} />
|
)}</FormItem>
|
</Col>
|
</Row>
|
</Card>
|
</Form>
|
</div>
|
</Spin>
|
</div>
|
)
|
}
|
}
|
|
const FunctionDetailForm = Form.create()(FunctionDetail);
|
export default FunctionDetailForm;
|
