/* eslint-disable */
|
import React from 'react';
|
import { Card, Row, Col, Form, Input, Button, Select, message, Spin } from 'antd';
|
import { createHashHistory } from 'history'
|
import fetch from '../../api/request'
|
|
const history = createHashHistory();
|
const { TextArea } = Input;
|
const FormItem = Form.Item;
|
const Option = Select.Option;
|
|
class GroupDetail extends React.Component {
|
constructor(props) {
|
super(props)
|
this.id = props.match.params.id == 'new' ? '' : props.match.params.id;
|
this.flag = props.match.params.flag == 'Modify' ? '修改' : '新增';
|
this.state = {
|
spinning: false,
|
dataSet: {}
|
}
|
}
|
|
componentDidMount() {
|
if (this.id) {
|
this.setState({ spinning: true });
|
fetch({
|
url: `api/group/getById`,
|
params: { id: this.id }
|
}).then(res => {
|
this.setState({ spinning: false });
|
if (res) {
|
this.setState({ dataSet: res });
|
}
|
})
|
}
|
}
|
|
// 返回
|
goBack = () => {
|
history.goBack();
|
}
|
|
// 确定
|
handleSubmit = (e) => {
|
e.preventDefault();
|
this.props.form.validateFields((err, values) => {
|
if (err) return;
|
this.setState({ spinning: true });
|
fetch({
|
url: `api/group/save`,
|
method: 'POST',
|
data: {
|
...this.state.dataSet,
|
...values
|
}
|
}).then(res => {
|
this.setState({ spinning: false });
|
message.success("保存组成功");
|
history.goBack();
|
})
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form;
|
const { dataSet } = this.state;
|
|
const formItemLayout1 = {
|
labelCol: { xs: { span: 24 }, sm: { span: 10 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, },
|
};
|
const formItemLayout2 = {
|
labelCol: { xs: { span: 24 }, sm: { span: 5 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 19 }, },
|
};
|
|
return (
|
<div className="groupdetail-main margin padding bg-white">
|
|
<Spin spinning={this.state.spinning}>
|
<div style={{ margin: 20 }}>
|
<Form onSubmit={this.handleSubmit}>
|
|
<Card title={this.id ? '基础信息（编辑）' : '基础信息（新增）'} bordered={false} extra={
|
<Row type="flex" gutter={20}>
|
<Col>
|
<Button onClick={this.goBack}>返回</Button>
|
</Col>
|
<Col>
|
<Button htmlType="submit" type="primary">确定</Button>
|
</Col>
|
</Row>
|
}>
|
<Row type="flex">
|
<Col span={8}>
|
<FormItem label={"标识符"} {...formItemLayout1}>
|
{getFieldDecorator('symbol', {
|
rules: [{ required: true, message: '标识符必填' }],
|
initialValue: dataSet.symbol || '',
|
})(
|
<Input placeholder="请输入标识符" />
|
)}</FormItem>
|
</Col>
|
<Col span={8}>
|
<FormItem label={"组名称"} {...formItemLayout1}>
|
{getFieldDecorator('name', {
|
rules: [{ required: true, message: '组名称必填' }],
|
initialValue: dataSet.name || ''
|
})(
|
<Input placeholder="请输入组名称" />
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={8}>
|
<FormItem label={"组类型"} {...formItemLayout1}>
|
{getFieldDecorator('groupType', {
|
rules: [{ required: true, message: '组类型必选' }],
|
initialValue: dataSet.groupType || undefined
|
})(
|
<Select style={{ width: '100%' }} placeholder="请选择" allowClear>
|
<Option value={1}>用户类型</Option>
|
<Option value={2}>角色类型</Option>
|
<Option value={3}>资源类型</Option>
|
</Select>
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={16}>
|
<FormItem label={"描述"} {...formItemLayout2}>
|
{getFieldDecorator('description', {
|
rules: [{ max: 200, message: '描述的内容不能超过200字' }],
|
initialValue: dataSet.description || ''
|
})(
|
<TextArea placeholder="请输入描述" rows={5} />
|
)}</FormItem>
|
</Col>
|
</Row>
|
</Card>
|
</Form>
|
</div>
|
</Spin>
|
</div>
|
)
|
}
|
}
|
|
const GroupDetailForm = Form.create()(GroupDetail);
|
export default GroupDetailForm;
|
