import React from 'react';
|
import { Card, Row, Col, Icon, Form, Input, Button, Spin, Modal, Radio } from 'antd';
|
|
const { TextArea } = Input;
|
const FormItem = Form.Item;
|
const RadioButton = Radio.Button;
|
const RadioGroup = Radio.Group;
|
|
class ModuleDetailEdit extends React.Component {
|
constructor(props) {
|
super(props)
|
// this.id = props.match.params.id;
|
// this.flag = props.match.params.flag == 'Modify' ? '修改' : '新增';
|
this.state = {
|
spinning: false,
|
id: '',
|
parentId: '',
|
dataSet: {},
|
}
|
}
|
|
componentDidMount() { }
|
|
//提交表单数据(保存)
|
handleSubmit = (e) => {
|
e.preventDefault();
|
this.props.form.validateFields((err, values) => {
|
console.log('提交表单数据：', values);
|
if (err) return;
|
//触发父级保存接口函数
|
this.props.saveFun(values);
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form;
|
const formItemLayout = {
|
labelCol: { xs: { span: 24 }, sm: { span: 5 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 19 }, },
|
};
|
const { dataSet, params, loading } = this.props;
|
|
return (
|
<div>
|
{
|
this.props.edit == 'true' ?
|
<div>
|
<Spin spinning={loading}>
|
|
<div>
|
<Form onSubmit={this.handleSubmit}>
|
<Card title={params.id ? '模块信息（编辑）' : '模块信息（新增）'} bordered={false}>
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"资源类型"} {...formItemLayout}>
|
{getFieldDecorator('isMenu', {
|
rules: [{ required: true, message: '资源类型必选' }],
|
initialValue: dataSet.isMenu
|
})(
|
<RadioGroup>
|
<RadioButton value={1}>菜单</RadioButton>
|
<RadioButton value={0}>模块</RadioButton>
|
</RadioGroup>
|
)}
|
</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"标识符"} {...formItemLayout}>
|
{getFieldDecorator('symbol', {
|
rules: [{ required: true, message: '请输入标志符' }],
|
initialValue: dataSet.symbol || '',
|
})(
|
<Input placeholder="请输入标识符" />
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"资源名称"} {...formItemLayout}>
|
{getFieldDecorator('name', {
|
rules: [{ required: true, message: '请输入资源名称' }],
|
initialValue: dataSet.name || '',
|
})(
|
<Input placeholder="请输入资源名称" />
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"路径"} {...formItemLayout}>
|
{getFieldDecorator('url', {
|
rules: [{ required: true, message: '请输入路径' }],
|
initialValue: dataSet.url || '',
|
})(
|
<Input />
|
)}
|
</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"路径设置"} {...formItemLayout}>
|
{getFieldDecorator('urlType', {
|
rules: [{ required: true, message: '路径类型必选' }],
|
initialValue: dataSet.urlType || undefined
|
})(
|
<RadioGroup>
|
<RadioButton value={1}>相对路径</RadioButton>
|
<RadioButton value={0}>绝对路径</RadioButton>
|
</RadioGroup>
|
)}
|
</FormItem>
|
</Col>
|
</Row>
|
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"描述"} {...formItemLayout}>
|
{getFieldDecorator('description', {
|
rules: [{ max: 200, message: '描述的内容不能超过200字' }],
|
initialValue: dataSet.description || ''
|
})(
|
<TextArea placeholder="请输入描述" rows={5} />
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex" gutter={20} style={{ width: '75%' }} justify="center">
|
<Col>
|
<Button onClick={this.props.cancelFun}>取消</Button>
|
</Col>
|
<Col>
|
<Button className="button-do" htmlType="submit" type="primary">保存</Button>
|
</Col>
|
</Row>
|
</Card>
|
</Form>
|
</div>
|
</Spin>
|
</div>
|
:
|
<div>
|
<Spin spinning={loading}>
|
<div>
|
<Form onSubmit={this.props.editFun}>
|
<Card title={'模块信息'} bordered={false}>
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"资源类型"} {...formItemLayout}>
|
{dataSet.isMenu == 1 && '菜单'}
|
{dataSet.isMenu == 0 && '模块'}
|
|
</FormItem>
|
</Col>
|
</Row>
|
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"标识符"} {...formItemLayout}>
|
{dataSet.symbol}
|
</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"资源名称"} {...formItemLayout}>
|
{dataSet.name}
|
</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"路径"} {...formItemLayout}>
|
{dataSet.url}
|
{dataSet.urlType == 1 && "（相对地址）"}
|
{dataSet.urlType == 0 && "（绝对地址）"}
|
</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={16}>
|
<FormItem label={"描述"} {...formItemLayout}>
|
<TextArea value={dataSet.description} rows={5} disabled={true} />
|
</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex" gutter={20} style={{ width: '75%' }} justify="center">
|
<Col>
|
<Button onClick={this.props.cancelData}>取消</Button>
|
</Col>
|
<Col>
|
<Button type="primary" htmlType="submit">编辑</Button>
|
</Col>
|
</Row>
|
</Card>
|
</Form>
|
</div>
|
</Spin>
|
</div>
|
}
|
</div>
|
)
|
}
|
}
|
|
// const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
const ModuleDetailEditForm = Form.create()(ModuleDetailEdit);
|
export default ModuleDetailEditForm;
|
