124 lines
3.6 KiB
JavaScript
124 lines
3.6 KiB
JavaScript
import '../assets/index.less';
|
|
import TreeSelect from '../index';
|
|
import Select from '../../vc-select';
|
|
import { createForm } from '../../vc-form';
|
|
import { regionStyle, errorStyle } from './styles';
|
|
import { gData } from './util';
|
|
import '../../vc-select/assets/index.less';
|
|
import './demo.less';
|
|
|
|
const { Option } = Select;
|
|
|
|
const TreeSelectInput = {
|
|
props: ['multiple', 'treeData', 'treeCheckable', 'value'],
|
|
methods: {
|
|
onChange(value) {
|
|
console.log(value, arguments);
|
|
this.$emit('change', value);
|
|
},
|
|
},
|
|
|
|
render() {
|
|
return <TreeSelect {...{ props: this.$props }} onChange={this.onChange} />;
|
|
},
|
|
};
|
|
|
|
const Form = {
|
|
methods: {
|
|
onSubmit(e) {
|
|
console.log('submit');
|
|
e.preventDefault();
|
|
this.form.validateFields((error, values) => {
|
|
if (!error) {
|
|
console.log('ok', values);
|
|
} else {
|
|
console.log('error', error, values);
|
|
}
|
|
});
|
|
},
|
|
reset(e) {
|
|
e.preventDefault();
|
|
this.form.resetFields();
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const { form } = this;
|
|
const { getFieldDecorator, getFieldError } = form;
|
|
const tProps = {
|
|
props: {
|
|
multiple: true,
|
|
treeData: gData,
|
|
treeCheckable: true,
|
|
__propsSymbol__: Symbol(),
|
|
// treeDefaultExpandAll: true,
|
|
},
|
|
};
|
|
return (
|
|
<div style={{ margin: '20px' }}>
|
|
<h2>validity</h2>
|
|
<form onSubmit={this.onSubmit}>
|
|
<div style={regionStyle}>
|
|
<div>
|
|
<p style={{ color: 'blue' }}>no onChange</p>
|
|
{getFieldDecorator('tree-select', {
|
|
initialValue: ['0-0-0-value'],
|
|
rules: [{ required: true, type: 'array', message: 'tree-select 需要必填' }],
|
|
})(<TreeSelect {...tProps} style={{ width: '300px' }} />)}
|
|
</div>
|
|
<p style={errorStyle}>
|
|
{getFieldError('tree-select') ? getFieldError('tree-select').join(',') : null}
|
|
</p>
|
|
</div>
|
|
|
|
<div style={regionStyle}>
|
|
<div>
|
|
<p style={{ color: 'blue' }}>custom onChange</p>
|
|
{getFieldDecorator('tree-select1', {
|
|
initialValue: ['0-0-0-value'],
|
|
rules: [{ required: true, type: 'array', message: 'tree-select1 需要必填' }],
|
|
})(
|
|
<TreeSelectInput
|
|
{...tProps}
|
|
style={{ width: '300px' }}
|
|
// treeData={gData}
|
|
/>,
|
|
)}
|
|
</div>
|
|
<p style={errorStyle}>
|
|
{getFieldError('tree-select1') ? getFieldError('tree-select1').join(',') : null}
|
|
</p>
|
|
</div>
|
|
|
|
<div style={regionStyle}>
|
|
{getFieldDecorator('select', {
|
|
initialValue: ['jack'],
|
|
rules: [{ required: true, type: 'array', message: 'select 需要必填' }],
|
|
})(
|
|
<Select style={{ width: '200px' }} allowClear multiple>
|
|
<Option value="jack">jack</Option>
|
|
<Option value="lucy">lucy</Option>
|
|
<Option value="disabled" disabled>
|
|
disabled
|
|
</Option>
|
|
<Option value="yiminghe">yiminghe</Option>
|
|
</Select>,
|
|
)}
|
|
<p style={errorStyle}>
|
|
{getFieldError('select') ? getFieldError('select').join(',') : null}
|
|
</p>
|
|
</div>
|
|
|
|
<div style={regionStyle}>
|
|
<button onClick={this.reset}>reset</button>
|
|
|
|
<input type="submit" value="submit" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export default createForm()(Form);
|