|
@@ -1,7 +1,7 @@
|
|
import React from 'react';
|
|
import React from 'react';
|
|
-import { AutoComplete, Button, Form, Input } from 'antd';
|
|
|
|
|
|
+import { AutoComplete, Form, Input, message, Modal } from 'antd';
|
|
import { connectAlita } from 'redux-alita';
|
|
import { connectAlita } from 'redux-alita';
|
|
-
|
|
|
|
|
|
+import * as PropTypes from 'prop-types';
|
|
|
|
|
|
/**
|
|
/**
|
|
* 添加属性标签的表单,
|
|
* 添加属性标签的表单,
|
|
@@ -15,71 +15,130 @@ class AddLabelForm extends React.Component {
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+ static propTypes = {
|
|
|
|
+ visible: PropTypes.bool,
|
|
|
|
+ refresh: PropTypes.func,
|
|
|
|
+ };
|
|
|
|
+
|
|
constructor(props) {
|
|
constructor(props) {
|
|
super(props);
|
|
super(props);
|
|
let { label } = props;
|
|
let { label } = props;
|
|
this.state = {
|
|
this.state = {
|
|
label: label || { pid: 0 },
|
|
label: label || { pid: 0 },
|
|
labelList: [],
|
|
labelList: [],
|
|
|
|
+ visible: false,
|
|
};
|
|
};
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ pLabel = {};
|
|
|
|
+
|
|
|
|
+ componentWillReceiveProps(nextProps, nextContext) {
|
|
|
|
+ let { label, visible } = nextProps;
|
|
|
|
+ this.setState({ label: label || { pid: 0 }, visible });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ closeModal() {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ handleLabelAdd = (values, label) => {
|
|
|
|
+ let params = { id: this.state.label.id, pid: label.pid };
|
|
|
|
+ this.props.setAlitaState({ funcName: 'labelAdd', params: { ...values, ...params } })
|
|
|
|
+ .then(() => {
|
|
|
|
+ message.success('添加成功');
|
|
|
|
+ this.props.refresh && this.props.refresh();
|
|
|
|
+ this.setState({ visible: false });
|
|
|
|
+ })
|
|
|
|
+ .catch(e => {
|
|
|
|
+ console.log('catch ', e);
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ handleLabelEdit = (values, label) => {
|
|
|
|
+ let params = { id: this.state.label.id, pid: label.pid };
|
|
|
|
+ this.props.setAlitaState({ funcName: 'labelEdit', params: { ...values, ...params } })
|
|
|
|
+ .then(() => {
|
|
|
|
+ message.success('编辑成功');
|
|
|
|
+ this.props.refresh && this.props.refresh();
|
|
|
|
+ this.setState({ visible: false });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ };
|
|
|
|
+
|
|
handleSubmit = e => {
|
|
handleSubmit = e => {
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
const _this = this;
|
|
const _this = this;
|
|
- let params = { id: _this.state.label.id, pid: _this.state.label.pid };
|
|
|
|
|
|
+ let pLabel = _this.pLabel;
|
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
|
if (!err) {
|
|
if (!err) {
|
|
- if (_this.state.label.id) {
|
|
|
|
- _this.props.setAlitaState({ funcName: 'labelEdit', params: { ...values, ...params } })
|
|
|
|
- .then((resp) => {
|
|
|
|
- console.log(' resp ', resp);
|
|
|
|
- });
|
|
|
|
|
|
+ if (pLabel.id) {
|
|
|
|
+ _this.handleLabelEdit(values, pLabel);
|
|
} else {
|
|
} else {
|
|
- _this.props.setAlitaState({ funcName: 'labelAdd', params: { ...values, ...params } });
|
|
|
|
|
|
+ _this.handleLabelAdd(values, pLabel);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
};
|
|
};
|
|
|
|
|
|
handleSearchLabel = (keywords) => {
|
|
handleSearchLabel = (keywords) => {
|
|
- this.props.setAlitaState({ funcName: 'searchLabel', params: { keywords } });
|
|
|
|
|
|
+ this.props.setAlitaState({ funcName: 'searchLabel', params: { keywords } })
|
|
|
|
+ .then(resp => {
|
|
|
|
+ console.log('resp label ', resp);
|
|
|
|
+ })
|
|
|
|
+ .catch(e => {
|
|
|
|
+ console.log('err ', e);
|
|
|
|
+ });
|
|
};
|
|
};
|
|
|
|
|
|
onSelect(sources = [], path) {
|
|
onSelect(sources = [], path) {
|
|
for (let i in sources) {
|
|
for (let i in sources) {
|
|
let source = sources[i];
|
|
let source = sources[i];
|
|
if (source.path === path) {
|
|
if (source.path === path) {
|
|
- let oldV = this.state.label;
|
|
|
|
- this.setState({ label: { ...oldV, pid: source.id } });
|
|
|
|
|
|
+ this.pLabel = { pid: source.id };
|
|
break;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
render() {
|
|
render() {
|
|
- const { getFieldDecorator } = this.props.form;
|
|
|
|
let { label } = this.props;
|
|
let { label } = this.props;
|
|
if (!label) return null;
|
|
if (!label) return null;
|
|
const { data: dataSource, isFetching } = this.props.searchLabel || { data: {} };
|
|
const { data: dataSource, isFetching } = this.props.searchLabel || { data: {} };
|
|
const { isFetching: isSubmitLoading } = this.props.labelAdd || {};
|
|
const { isFetching: isSubmitLoading } = this.props.labelAdd || {};
|
|
const { isFetching: isEditLoading } = this.props.labelEdit || {};
|
|
const { isFetching: isEditLoading } = this.props.labelEdit || {};
|
|
|
|
|
|
- if (!dataSource.records) dataSource.records = [];
|
|
|
|
|
|
+ let records = dataSource ? dataSource.records : [];
|
|
|
|
+ if (!records) records = [];
|
|
|
|
+
|
|
|
|
+ return (<Modal visible={this.state.visible}
|
|
|
|
+ title={label.id ? '编辑标签' : '添加标签'}
|
|
|
|
+ onOk={this.handleSubmit.bind(this)}
|
|
|
|
+ onCancel={() => this.setState({ visible: false })}>
|
|
|
|
+ {this.renderForm(records, label, isFetching, isSubmitLoading || isEditLoading)}
|
|
|
|
+ </Modal>);
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ renderForm(records = [], label = {}, isFetching, isLoading = false) {
|
|
|
|
+ const { getFieldDecorator } = this.props.form;
|
|
return (<Form onSubmit={this.handleSubmit}>
|
|
return (<Form onSubmit={this.handleSubmit}>
|
|
{(!label.id) && (<Form.Item>
|
|
{(!label.id) && (<Form.Item>
|
|
{getFieldDecorator('path')(<AutoComplete onSearch={this.handleSearchLabel}
|
|
{getFieldDecorator('path')(<AutoComplete onSearch={this.handleSearchLabel}
|
|
- dataSource={dataSource.records.map(item => item.path)}
|
|
|
|
|
|
+ dataSource={records.map(item => item.path)}
|
|
loading={isFetching}
|
|
loading={isFetching}
|
|
- onSelect={this.onSelect.bind(this, dataSource.records)}
|
|
|
|
- placeholder='输入关键词查询上级标签'/>)}
|
|
|
|
|
|
+ onSelect={this.onSelect.bind(this, records)}
|
|
|
|
+ placeholder="输入关键词查询上级标签"
|
|
|
|
+ />)}
|
|
</Form.Item>)}
|
|
</Form.Item>)}
|
|
<Form.Item>
|
|
<Form.Item>
|
|
{getFieldDecorator('label', {
|
|
{getFieldDecorator('label', {
|
|
rules: [{ required: true, message: '请输入标签' }],
|
|
rules: [{ required: true, message: '请输入标签' }],
|
|
initialValue: label.label,
|
|
initialValue: label.label,
|
|
})
|
|
})
|
|
- (<Input disabled={!!label.id} placeholder='请输入标签'/>)}
|
|
|
|
|
|
+ (<Input disabled={!!label.id} placeholder="请输入标签"/>)}
|
|
</Form.Item>
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Form.Item>
|
|
{getFieldDecorator('title', { initialValue: label.title })(<Input placeholder='请输入标签名称'/>)}
|
|
{getFieldDecorator('title', { initialValue: label.title })(<Input placeholder='请输入标签名称'/>)}
|
|
@@ -87,10 +146,6 @@ class AddLabelForm extends React.Component {
|
|
<Form.Item>
|
|
<Form.Item>
|
|
{getFieldDecorator('description', { initialValue: label.description })(<Input placeholder='请输入标签简介'/>)}
|
|
{getFieldDecorator('description', { initialValue: label.description })(<Input placeholder='请输入标签简介'/>)}
|
|
</Form.Item>
|
|
</Form.Item>
|
|
- <Form.Item>
|
|
|
|
- <Button type='default' htmlType='button' onClick={this.props.cancel}>取消</Button>
|
|
|
|
- <Button loading={isSubmitLoading || isEditLoading} htmlType='submit' type='primary'>提交</Button>
|
|
|
|
- </Form.Item>
|
|
|
|
</Form>);
|
|
</Form>);
|
|
}
|
|
}
|
|
|
|
|