import React from 'react';
|
import { Card, Row, Col, Form, Input, Button, message, Spin } from 'antd';
|
import { createHashHistory } from 'history';
|
import fetch from '../../api/request';
|
|
const history = createHashHistory();
|
const FormItem = Form.Item;
|
const { TextArea } = Input;
|
|
class AppServiceDeatil 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,//页面loading
|
dataSet: {}
|
}
|
}
|
|
componentWillMount() { }
|
|
//获取应用服务详情
|
componentDidMount() {
|
if (this.id !== '') {
|
this.setState({ spinning: true });
|
fetch({
|
url: `api/app/getById`,
|
params: { id: this.id }
|
}).then(res => {
|
this.setState({ loading: false });
|
if (res) {
|
this.setState({ dataSet: res, spinning: false });
|
}
|
})
|
}
|
}
|
|
// 提交表单数据(保存)
|
handleSubmit = (e) => {
|
e.preventDefault();
|
this.props.form.validateFields((err, values) => {
|
if (err) return;
|
this.setState({ spinning: true });
|
fetch({
|
url: `api/app/save`,
|
method: 'POST',
|
data: { ...values, id: this.id }
|
}).then(res => {
|
this.setState({ spinning: false });
|
if (res) {
|
message.success('保存成功');
|
history.goBack();//返回至列表页面
|
}
|
})
|
})
|
}
|
|
//返回上一个页面
|
onBack = () => {
|
history.goBack();
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form;
|
const { dataSet } = this.state;
|
const formItemLayout = {
|
labelCol: { xs: { span: 24 }, sm: { span: 5 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 19 }, },
|
};
|
|
return (
|
<div className="appservicedetail-main h-100 margin padding bg-white">
|
<Spin spinning={this.state.spinning}>
|
<div>
|
<Form onSubmit={this.handleSubmit}>
|
<Card title={this.id ? '应用服务信息编辑' : '应用服务信息新增'} bordered={false}
|
extra={<Row type="flex" gutter={20}>
|
<Col>
|
<Button onClick={this.onBack}>返回</Button>
|
</Col>
|
<Col>
|
<Button type="primary" htmlType="submit">确定</Button>
|
</Col>
|
</Row>}
|
>
|
<Row type="flex">
|
<Col span={14}>
|
<FormItem label={"名称"} {...formItemLayout}>
|
{getFieldDecorator('name', {
|
rules: [{ required: true, message: '请输入名称' }],
|
initialValue: dataSet.name || ''
|
})(
|
<Input placeholder="请输入描述" rows={5} />
|
)}
|
</FormItem>
|
</Col>
|
</Row>
|
<Row type="flex">
|
<Col span={14}>
|
<FormItem label={"根路径"} {...formItemLayout}>
|
{getFieldDecorator('rootUrl', {
|
rules: [{ required: true, message: '请输入根路径' }],
|
initialValue: dataSet.rootUrl || '',
|
})(
|
<Input placeholder="请输入根路径" />
|
)}</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('description', {
|
rules: [{ max: 200, message: '描述的内容不能超过200字' }],
|
initialValue: dataSet.description || ''
|
})(
|
<TextArea placeholder="请输入描述" rows={5} />
|
)}</FormItem>
|
</Col>
|
</Row>
|
</Card>
|
</Form>
|
</div>
|
</Spin>
|
</div>
|
)
|
}
|
}
|
|
const AppServiceDeatilForm = Form.create()(AppServiceDeatil);
|
export default AppServiceDeatilForm;
|
