antd#TreeSelect JavaScript Examples
The following examples show how to use
antd#TreeSelect.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: treeData.jsx From virtuoso-design-system with MIT License | 6 votes |
render() {
return (
<TreeSelect
style={{ width: '100%' }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={treeData}
placeholder="Please select"
treeDefaultExpandAll
onChange={this.onChange}
/>
);
}
Example #2
Source File: EditHike.js From volt-mx-tutorials with Apache License 2.0 | 6 votes |
render() {
const { treeData } = this.state;
return (
<TreeSelect
treeDataSimpleMode
style={{ width: "100%" }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
placeholder="Please select"
onChange={this.onChange}
loadData={this.onLoadData}
treeData={treeData}
/>
);
}
Example #3
Source File: index.js From gobench with Apache License 2.0 | 6 votes |
{ TreeNode } = TreeSelect
Example #4
Source File: async.jsx From virtuoso-design-system with MIT License | 6 votes |
render() {
const { treeData } = this.state;
return (
<TreeSelect
treeDataSimpleMode
style={{ width: '100%' }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
onChange={this.onChange}
loadData={this.onLoadData}
treeData={treeData}
/>
);
}
Example #5
Source File: basic.jsx From virtuoso-design-system with MIT License | 6 votes |
Demo = () => {
const [value, setValue] = useState(undefined);
const onChange = () => {
setValue(value);
};
return (
<TreeSelect
showSearch
style={{ width: '100%' }}
value={value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
onChange={onChange}
>
<TreeNode value="parent 1" title="parent 1">
<TreeNode value="parent 1-0" title="parent 1-0">
<TreeNode value="leaf1" title="leaf1" />
<TreeNode value="leaf2" title="leaf2" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1">
<TreeNode value="leaf3" title={<b style={{ color: '#08c' }}>leaf3</b>} />
</TreeNode>
</TreeNode>
</TreeSelect>
);
}
Example #6
Source File: checkable.jsx From virtuoso-design-system with MIT License | 6 votes |
render() {
const tProps = {
treeData,
value: this.state.value,
onChange: this.onChange,
treeCheckable: true,
showCheckedStrategy: SHOW_PARENT,
placeholder: 'Please select',
style: {
width: '100%',
},
};
return <TreeSelect {...tProps} />;
}
Example #7
Source File: multiple.jsx From virtuoso-design-system with MIT License | 6 votes |
render() {
return (
<TreeSelect
showSearch
style={{ width: '100%' }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
multiple
treeDefaultExpandAll
onChange={this.onChange}
>
<TreeNode value="parent 1" title="parent 1">
<TreeNode value="parent 1-0" title="parent 1-0">
<TreeNode value="leaf1" title="my leaf" />
<TreeNode value="leaf2" title="your leaf" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1">
<TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
</TreeNode>
</TreeNode>
</TreeSelect>
);
}
Example #8
Source File: suffix.jsx From virtuoso-design-system with MIT License | 6 votes |
render() {
return (
<TreeSelect
showSearch
suffixIcon={icon}
style={{ width: '100%' }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
onChange={this.onChange}
>
<TreeNode value="parent 1" title="parent 1">
<TreeNode value="parent 1-0" title="parent 1-0">
<TreeNode value="leaf1" title="my leaf" />
<TreeNode value="leaf2" title="your leaf" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1">
<TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
</TreeNode>
</TreeNode>
</TreeSelect>
);
}
Example #9
Source File: align.jsx From virtuoso-design-system with MIT License | 5 votes |
storiesOf('antd/Input', module).add('align', () =>
<>
<Mentions style={{ width: 100 }} rows={1} />
<Input.TextArea rows={1} style={{ width: 100 }} />
<Button type="primary">Button</Button>
<Input style={{ width: 100 }} />
<Text copyable>Ant Design</Text>
<Input prefix="1" suffix="2" style={{ width: 100 }} />
<Input addonBefore="1" addonAfter="2" style={{ width: 100 }} />
<InputNumber style={{ width: 100 }} />
<DatePicker style={{ width: 100 }} />
<TimePicker style={{ width: 100 }} />
<Select style={{ width: 100 }} defaultValue="jack">
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<TreeSelect style={{ width: 100 }} />
<Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} />
<RangePicker />
<DatePicker picker="month" />
<Radio.Group defaultValue="a">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
</Radio.Group>
<AutoComplete style={{ width: 100 }} placeholder="input here" />
<br />
<Input prefix="$" addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
<Input style={narrowStyle} suffix="Y" />
<Input style={narrowStyle} />
<Input style={narrowStyle} defaultValue="1" suffix="Y" />
</>,
{ docs: { page: () => (<><hr />
<p>order: 99
title:
zh-CN: 文本对齐
en-US: Text Align</p>
<h2 id="debugtrue">debug: true</h2></>) } });
Example #10
Source File: index.jsx From mixbox with GNU General Public License v3.0 | 5 votes |
function getElement(item) {
const {type = 'input', component, ...props} = item;
const commonProps = {
size: 'default',
};
// 样式
// const width = props.width || '100%';
// const elementCommonStyle = {width};
// props.style = props.style ? {...elementCommonStyle, ...props.style} : elementCommonStyle;
// 如果 component 存在,说明是自定义组件
if (component) {
return typeof component === 'function' ? component() : component;
}
if (isInputLikeElement(type)) {
if (type === 'number') return <InputNumber {...commonProps} {...props}/>;
if (type === 'textarea') return <TextArea {...commonProps} {...props}/>;
if (type === 'password') return <Password {...commonProps} {...props}/>;
return <Input {...commonProps} type={type} {...props}/>;
}
if (type === 'select') {
const {options = [], ...others} = props;
return (
<Select {...commonProps} {...others}>
{
options.map(opt => <Select.Option key={opt.value} {...opt}>{opt.label}</Select.Option>)
}
</Select>
);
}
if (type === 'select-tree') return <TreeSelect {...commonProps} {...props} treeData={props.options}/>;
if (type === 'checkbox') return <Checkbox {...commonProps} {...props}>{props.label}</Checkbox>;
if (type === 'checkbox-group') return <Checkbox.Group {...commonProps} {...props}/>;
if (type === 'radio') return <Radio {...commonProps} {...props}>{props.label}</Radio>;
if (type === 'radio-group') return <Radio.Group {...commonProps} {...props}/>;
if (type === 'radio-button') {
const {options = [], ...others} = props;
return (
<Radio.Group buttonStyle="solid" {...commonProps} {...others}>
{options.map(opt => <Radio.Button key={opt.value} {...opt}>{opt.label}</Radio.Button>)}
</Radio.Group>
);
}
if (type === 'cascader') return <Cascader {...commonProps} {...props}/>;
if (type === 'switch') return <Switch {...commonProps} {...props} style={{...props.style, width: 'auto'}}/>;
if (type === 'date') return <DatePicker {...commonProps} {...props}/>;
if (type === 'date-time') return <DatePicker {...commonProps} showTime {...props}/>;
if (type === 'date-range') return <DatePicker.RangePicker {...commonProps} {...props}/>;
if (type === 'month') return <DatePicker.MonthPicker {...commonProps} {...props}/>;
if (type === 'time') return <TimePicker {...commonProps} {...props}/>;
if (type === 'transfer') return <Transfer {...commonProps} {...props}/>;
if (type === 'icon-picker') return <IconPicker {...commonProps} {...props}/>;
throw new Error(`no such type: ${type}`);
}
Example #11
Source File: index.js From scalable-form-platform with MIT License | 5 votes |
render() {
const popupContainer = this.props.formContext && this.props.formContext.popupContainer;
const {required, schema, options, disabled, readonly, placeholder, onChange} = this.props;
// 兼容没有配置数据源的情形
let data = schema.data || [];
// 对于value值为空字符串的情况,value的值传入undefined,这样才能显示组件的placeholder
let {value} = this.props;
if (value === '') {
value = undefined;
}
// 是否只能选择叶子节点项
let selectLeafOnly = false;
if (typeof options.selectLeafOnly === 'boolean') {
selectLeafOnly = options.selectLeafOnly;
}
if (selectLeafOnly && (data && data.length > 0)) {
// 为treeData添加selectable属性
data.map((node) => {
this._setTreeNodeSelectable(node);
});
}
// 对treeData做格式化处理
this.formatTreeData(data);
//解析schema中约定的_errorType字段,用来标识是validate中哪种类型校验不通过
let validateMessage = '';
let _errorType = options._errorType || '';
if (_errorType !== '' && typeof options.validate !== 'undefined') {
validateMessage = this._getValidateMessage(_errorType, options.validate);
}
return (
<div className={classnames({
'ant-form-item-control': true,
'xform-custom-widget': true,
'xform-custom-tree-select': true,
'has-error': _errorType !== ''
})}>
<TreeSelect
showSearch
allowClear
value={value}
treeData={data}
disabled={disabled}
readonly={readonly}
required={required}
filterTreeNode={this.handleFilterTreeNode}
getPopupContainer={popupContainer}
onChange={(value) => {
onChange(value);
}}
placeholder={placeholder}
{...options}
/>
<div className="ant-form-explain">{validateMessage}</div>
</div>
);
}
Example #12
Source File: index.js From gobench with Apache License 2.0 | 5 votes |
render() {
return (
<div>
<div className="row">
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<TreeSelect
showSearch
style={{ width: 300 }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
onChange={this.onChange}
>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode
value="sss"
title={<b style={{ color: '#08c' }}>sss</b>}
key="random3"
/>
</TreeNode>
</TreeNode>
</TreeSelect>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Multiple</strong>
</h5>
<div className="mb-5">
<TreeSelect
showSearch
style={{ width: 300 }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
multiple
treeDefaultExpandAll
onChange={this.onChange}
>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode
value="sss"
title={<b style={{ color: '#08c' }}>sss</b>}
key="random3"
/>
</TreeNode>
</TreeNode>
</TreeSelect>
</div>
</div>
</div>
</div>
)
}
Example #13
Source File: config-provider.jsx From virtuoso-design-system with MIT License | 5 votes |
render() {
const { customize } = this.state;
return (
<div>
<Switch
unCheckedChildren="default"
checkedChildren="customize"
checked={customize}
onChange={val => {
this.setState({ customize: val });
}}
/>
<Divider />
<ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
<div className="config-provider">
<h4>Select</h4>
<Select style={style} />
<h4>TreeSelect</h4>
<TreeSelect style={style} treeData={[]} />
<h4>Cascader</h4>
<Cascader style={style} options={[]} showSearch />
<h4>Transfer</h4>
<Transfer />
<h4>Table</h4>
<Table
style={{ marginTop: 8 }}
columns={[
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
]}
/>
<h4>List</h4>
<List />
</div>
</ConfigProvider>
</div>
);
}
Example #14
Source File: ParticipantsOptions.js From react-portal with MIT License | 5 votes |
{ TreeNode } = TreeSelect
Example #15
Source File: suffix.jsx From virtuoso-design-system with MIT License | 5 votes |
{ TreeNode } = TreeSelect
Example #16
Source File: basic.jsx From virtuoso-design-system with MIT License | 5 votes |
{ TreeNode } = TreeSelect
Example #17
Source File: caseModal.js From AgileTC with Apache License 2.0 | 5 votes |
{ TreeNode } = TreeSelect
Example #18
Source File: AddCertificate.js From react-portal with MIT License | 5 votes |
{ TreeNode } = TreeSelect
Example #19
Source File: checkable.jsx From virtuoso-design-system with MIT License | 5 votes |
{ SHOW_PARENT } = TreeSelect
Example #20
Source File: multiple.jsx From virtuoso-design-system with MIT License | 5 votes |
{ TreeNode } = TreeSelect
Example #21
Source File: direction.jsx From virtuoso-design-system with MIT License | 4 votes |
// ==== End Badge ====
render() {
const { currentStep } = this.state;
return (
<div className="direction-components">
<Row>
<Col span={24}>
<Divider orientation="left">Cascader example</Divider>
<Cascader
suffixIcon={<SearchIcon />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="یک مورد انتخاب کنید"
popupPlacement={this.props.popupPlacement}
/>
With search:
<Cascader
suffixIcon={<SmileOutlined />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="Select an item"
popupPlacement={this.props.popupPlacement}
showSearch={this.cascaderFilter}
/>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Switch example</Divider>
<Switch defaultChecked />
<Switch loading defaultChecked />
<Switch size="small" loading />
</Col>
<Col span={12}>
<Divider orientation="left">Radio Group example</Divider>
<Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">تهران</Radio.Button>
<Radio.Button value="b" disabled>
اصفهان
</Radio.Button>
<Radio.Button value="c">فارس</Radio.Button>
<Radio.Button value="d">خوزستان</Radio.Button>
</Radio.Group>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Button example</Divider>
<div className="button-demo">
<Button type="primary" icon={<DownloadOutlined />} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />}>
Download
</Button>
<br />
<Button.Group>
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Tree example</Divider>
<Tree
showLine
checkable
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
defaultCheckedKeys={['0-0-0', '0-0-1']}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0" disabled>
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
<TreeNode title="leaf" key="0-0-0-1" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
</TreeNode>
</TreeNode>
</Tree>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Input (Input Group) example</Divider>
<InputGroup size="large">
<Row gutter={8}>
<Col span={5}>
<Input defaultValue="0571" />
</Col>
<Col span={8}>
<Input defaultValue="26888888" />
</Col>
</Row>
</InputGroup>
<br />
<InputGroup compact>
<Input style={{ width: '20%' }} defaultValue="0571" />
<Input style={{ width: '30%' }} defaultValue="26888888" />
</InputGroup>
<br />
<InputGroup compact>
<Select defaultValue="Option1">
<Option value="Option1">Option1</Option>
<Option value="Option2">Option2</Option>
</Select>
<Input style={{ width: '50%' }} defaultValue="input content" />
<InputNumber />
</InputGroup>
<br />
<Search placeholder="input search text" enterButton="Search" size="large" />
<br />
<br />
<div style={{ marginBottom: 16 }}>
<Input
addonBefore={this.selectBefore}
addonAfter={this.selectAfter}
defaultValue="mysite"
/>
</div>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Select example</Divider>
<Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
<Option value="jack">Jack</Option>
<Option value="مورچه">مورچه</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} disabled>
<Option value="مورچه">مورچه</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} loading>
<Option value="مورچه">مورچه</Option>
</Select>
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="سعید">سعید</Option>
<Option value="tom">Tom</Option>
</Select>
</Col>
<Col span={12}>
<Divider orientation="left">TreeSelect example</Divider>
<div>
<TreeSelect
showSearch
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode
value="sss"
title={<b style={{ color: '#08c' }}>sss</b>}
key="random3"
/>
</TreeNode>
</TreeNode>
</TreeSelect>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Modal example</Divider>
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="پنچره ساده"
visible={this.state.modalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
</Modal>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Steps example</Divider>
<div>
<Steps progressDot current={currentStep}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<br />
<Steps current={currentStep} onChange={this.onStepsChange}>
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Rate example</Divider>
<div>
<Rate defaultValue={2.5} />
<br />
<strong>* Note:</strong> Half star not implemented in RTL direction, it will be
supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
implement rtl support.
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Badge example</Divider>
<div>
<div>
<Badge count={this.state.badgeCount}>
<a href="#" className="head-example" />
</Badge>
<ButtonGroup>
<Button onClick={this.declineBadge}>
<MinusOutlined />
</Button>
<Button onClick={this.increaseBadge}>
<PlusOutlined />
</Button>
</ButtonGroup>
</div>
<div style={{ marginTop: 10 }}>
<Badge dot={this.state.showBadge}>
<a href="#" className="head-example" />
</Badge>
<Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
</div>
</div>
</Col>
</Row>
</Col>
</Row>
<br />
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Pagination example</Divider>
<Pagination showSizeChanger defaultCurrent={3} total={500} />
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Grid System example</Divider>
<div className="grid-demo">
<div className="code-box-demo">
<p>
<strong>* Note:</strong> Every calculation in RTL grid system is from right side
(offset, push, etc.)
</p>
<Row>
<Col span={8}>col-8</Col>
<Col span={8} offset={8}>
col-8
</Col>
</Row>
<Row>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
</Row>
<Row>
<Col span={12} offset={6}>
col-12 col-offset-6
</Col>
</Row>
<Row>
<Col span={18} push={6}>
col-18 col-push-6
</Col>
<Col span={6} pull={18}>
col-6 col-pull-18
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
);
}
Example #22
Source File: create.jsx From egoshop with Apache License 2.0 | 4 votes |
render() { const { photoGalleryVisible, previewVisible, previewImage } = this.state; const { form, cateListLoading,cateList,cateTree } = this.props; const cateTreeSelect = Antd.treeData(cateTree); const { getFieldDecorator, getFieldValue, setFieldsValue } = form; const selectOptions = cateList.map(d => <Option key={d.id}>{d.name}</Option>); return ( <PageHeaderWrapper hiddenBreadcrumb={true}> <Card bordered={false}> <Spin size="large" spinning={cateListLoading}> <Form onSubmit={this.handleSubmit} style={{ width: 1000 }}> <div className={styles.item}> <h3>基本信息</h3> <FormItem {...formItemLayout} label='商品图' > {getFieldDecorator("gallery", { rules: [{ required: true, message: "请选择商品图" }], valuePropName: "url", })( <UploadGroupImage onClick={(onChange, values) => { values = values ? values : []; this.openPhotoGallery({ photoGalleryOnOk: (e) => { onChange([...values, ...e]); } }); }} preview={(previewImage) => { this.openPreviewModal({ previewImage }); }} /> )} </FormItem> <FormItem {...formItemLayout} label='商品名称' > {getFieldDecorator("title", { rules: [{ required: true, message: "请输入商品名称" }], })( <Input placeholder="请输入商品名称" /> )} </FormItem> <FormItem {...formItemLayout} label='商品副名称' > {getFieldDecorator("subTitle", { rules: [{ required: true, message: "商品副名称" }], })( <Input placeholder="商品副名称" /> )} </FormItem> <FormItem {...formItemLayout} label='商品分类' > {getFieldDecorator("cids", { rules: [{ required: true, message: "请选择商品分类" }] })( <TreeSelect treeData={cateTreeSelect} showSearonChangech dropdownStyle={{ maxHeight: 400, overflow: "auto" }} placeholder="请选择商品分类" allowClear multiple treeDefaultExpandAll onChange={(value) => { setFieldsValue({ cids: value }); }} /> )} <a onClick={() => { router.push("/comcate/create"); }} > 新增分类 </a> </FormItem> </div> <div className={styles.item}> <h3>型号价格</h3> <FormItem {...formItemLayout}> {getFieldDecorator("skuList", { rules: [{ validator: Sku.validator, required: true }], })(<Sku form={form} />)} </FormItem> </div> <div className={styles.item}> <h3>运费其他</h3> <FormItem {...formItemLayout} label={"运费"}> {getFieldDecorator("freight", { rules: [{ required: true }], })(<Freight />)} </FormItem> <FormItem {...formItemLayout} label={"开售时间"}> {getFieldDecorator("saleTime", { rules: [{ required: true }], })( <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择时间" style={{ marginRight: 15 }} /> )} </FormItem> </div> <FormItem {...tailFormItemLayout}> <Button type="primary" htmlType="submit" style={{ marginRight: 10 }} > 保存添加 </Button> <Button onClick={()=>{ router.goBack() }} > 返回 </Button> </FormItem> </Form> <PhotoGallery visible={photoGalleryVisible} onCancel={this.onCancelPhotoGallery} onOk={this.onOkPhotoGallery} /> <Modal visible={previewVisible} footer={null} onCancel={this.previewCancel}> <img alt="example" style={{ width: "100%" }} src={previewImage} /> </Modal> </Spin> </Card> </PageHeaderWrapper> ); }
Example #23
Source File: MenuControl.js From ant-back with MIT License | 4 votes |
render() {
const {
updateModalVisible,
handleUpdateModalVisible,
handleUpdate,
form,
currentRecord,
isPageAuth,
menu,
} = this.props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
if (currentRecord.id) {
handleUpdate(fieldsValue, currentRecord.id);
}
});
};
const allmenus = menu.allmenus ? menu.allmenus : [];
const filterData = array => {
return array.filter(item => {
return item.resourceType === 'menu' && item.id !== currentRecord.id;
});
};
// 新建菜单->选择父级菜单时的数据->格式化
const formateData = data => {
if (Array.isArray(data)) {
return filterData(data).map(item => {
return item.childData
? {
title: item.name,
value: item.id,
key: item.id,
children: formateData(item.childData),
}
: {
title: item.name,
value: item.id,
key: item.id,
};
});
}
return [];
};
const treeData = allmenus.length === 0 ? [] : formateData(allmenus);
treeData.unshift({
title: '无',
value: 0,
key: 0,
});
// 编辑菜单需要填的表单
const menuForm = !isPageAuth && (
<Form>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="菜单名">
{form.getFieldDecorator('name', {
initialValue: currentRecord.name,
rules: [{ required: true, message: '请输入菜单名!' }],
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限编码">
{form.getFieldDecorator('code', {
initialValue: currentRecord.code,
rules: [{ required: true, message: '请输入权限编码!' }],
})(<Input placeholder="请输入" disabled />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="菜单URL">
{form.getFieldDecorator('href', {
initialValue: currentRecord.href,
rules: [{ required: true, message: '请输入菜单URL!' }],
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="父级菜单">
{form.getFieldDecorator('parentId', {
initialValue: currentRecord.parentId,
rules: [{ required: true, message: '请选择父级菜单!' }],
})(
<TreeSelect
style={{ width: 300 }}
// value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={treeData}
placeholder="请选择"
treeDefaultExpandAll
/>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="类型">
{form.getFieldDecorator('resourceType', {
initialValue: currentRecord.resourceType,
rules: [{ required: true, message: '请输入类型!' }],
})(
<Select style={{ width: 120 }} onChange={this.onSelect} placeholder="请选择">
<Option value="menu">父级菜单</Option>
<Option value="button">页面</Option>
</Select>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="菜单栏">
{form.getFieldDecorator('isShow', {
initialValue: Number(!currentRecord.hideInMenu),
rules: [{ required: true, message: '请选择' }],
})(
<Radio.Group>
<Radio value={0}>隐藏</Radio>
<Radio value={1}>显示</Radio>
</Radio.Group>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
{form.getFieldDecorator('remark', {
initialValue: currentRecord.remark,
})(<TextArea placeholder="请输入" />)}
</FormItem>
</Form>
);
// 编辑按钮级权限需要填的表单
const pageAuthForm = isPageAuth && (
<Form>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限名">
{form.getFieldDecorator('name', {
initialValue: currentRecord.name,
rules: [{ required: true, message: '请输入权限名!' }],
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限编码">
{form.getFieldDecorator('code', {
initialValue: currentRecord.code,
rules: [{ required: true, message: '请输入权限编码!' }],
})(<Input placeholder="请输入" disabled />)}
</FormItem>
{currentRecord.apiUrl && (
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="接口路径">
{form.getFieldDecorator('apiUrl', {
initialValue: currentRecord.apiUrl,
rules: [{ required: true, message: '请输入接口路径!' }],
})(<Input placeholder="如:/empty-item/sysUser/editPassword" />)}
</FormItem>
)}
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
{form.getFieldDecorator('remark', {
initialValue: currentRecord.remark,
})(<Input placeholder="请输入" />)}
</FormItem>
</Form>
);
return (
<Modal
maskClosable={false}
width={640}
bodyStyle={{ padding: '32px 40px 48px' }}
destroyOnClose
title={!isPageAuth ? '编辑菜单' : '编辑按钮级权限'}
visible={updateModalVisible}
onOk={okHandle}
onCancel={() => handleUpdateModalVisible(false)}
afterClose={() => handleUpdateModalVisible()}
okText="确定"
cancelText="取消"
confirmLoading={menu.loading}
>
{!isPageAuth ? menuForm : pageAuthForm}
</Modal>
);
}
Example #24
Source File: MenuControl.js From ant-back with MIT License | 4 votes |
render() {
const { form, handleAddModalVisible, handleAdd, modalVisible, menu, isPageAuth } = this.props;
const { menuType, isApi } = this.state;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
handleAdd(fieldsValue, form);
});
};
const allmenus = menu.allmenus ? menu.allmenus : [];
const filterData = array => {
return array.filter(item => {
return item.resourceType === 'menu';
});
};
// 新建菜单->选择父级菜单时的数据->格式化
const formateData = data => {
if (Array.isArray(data)) {
return filterData(data).map(item => {
return item.childData
? {
title: item.name,
value: item.id,
key: item.id,
children: formateData(item.childData),
}
: {
title: item.name,
value: item.id,
key: item.id,
};
});
}
return [];
};
// 新建按钮级权限->选择页面时的数据->格式化
const formatePageData = data => {
if (Array.isArray(data)) {
return data.map(item => {
return {
title: item.name,
value: item.id,
key: item.id,
children: item.resourceType === 'button' ? null : formatePageData(item.childData),
selectable: item.resourceType === 'button',
};
});
}
return [];
};
const treeData = allmenus.length === 0 ? [] : formateData(allmenus);
const pageData = allmenus.length === 0 ? [] : formatePageData(allmenus);
treeData.unshift({
title: '无',
value: 0,
key: 0,
});
// 新建菜单需要填的表单
const menuForm = !isPageAuth && (
<Form>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="菜单名">
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入菜单名!' }],
})(<Input placeholder="用于菜单栏中名称显示" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限编码">
{form.getFieldDecorator('code', {
rules: [{ required: true, message: '请输入权限编码!' }],
})(<Input placeholder="前端代码根据编码判断按钮显示隐藏" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="菜单URL">
{form.getFieldDecorator('href', {
rules: [{ required: true, message: '请输入菜单URL!' }],
})(<Input placeholder="应与router.config.js中path路径一致" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="父级菜单">
{form.getFieldDecorator('parentId', {
rules: [{ required: true, message: '请选择父级菜单!' }],
})(
<TreeSelect
style={{ width: 300 }}
// value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={treeData}
placeholder="请选择"
treeDefaultExpandAll
/>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="类型">
{form.getFieldDecorator('resourceType', {
rules: [{ required: true, message: '请输入类型!' }],
})(
<Select style={{ width: 120 }} onChange={this.onSelect} placeholder="请选择">
<Option value="menu">父级菜单</Option>
<Option value="button">页面</Option>
</Select>
)}
</FormItem>
{menuType === 'button' && (
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="菜单栏">
{form.getFieldDecorator('isShow',{
rules: [{ required: true, message: '请选择!' }],
})(
<Radio.Group>
<Radio value={1}>显示</Radio>
<Radio value={0}>隐藏</Radio>
</Radio.Group>
)}
</FormItem>
)}
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
{form.getFieldDecorator('remark', {})(<TextArea placeholder="请输入" />)}
</FormItem>
</Form>
);
// 新建按钮级权限需要填的表单
const pageAuthForm = isPageAuth && (
<Form>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限名">
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入权限名!' }],
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限范围">
{form.getFieldDecorator('isApi', {
initialValue: 0,
rules: [{ required: true, message: '请选择权限范围!' }],
})(
<Radio.Group
onChange={e => {
this.setState({
isApi: e.target.value === 1,
});
}}
>
<Radio value={0}>页面</Radio>
<Radio value={1}>页面 + 接口</Radio>
</Radio.Group>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限编码">
{form.getFieldDecorator('code', {
rules: [{ required: true, message: '请输入权限编码!' }],
})(<Input placeholder="前端代码根据编码判断按钮显示隐藏" />)}
</FormItem>
{isApi && (
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="接口路径">
{form.getFieldDecorator('apiUrl', {
rules: [{ required: true, message: '请输入接口路径!' }],
})(<Input placeholder="如:/empty-item/sysUser/editPassword" />)}
</FormItem>
)}
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="所属页面">
{form.getFieldDecorator('parentId', {
rules: [{ required: true, message: '请选择页面!' }],
})(
<TreeSelect
style={{ width: 300 }}
// value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={pageData}
placeholder="请选择"
treeDefaultExpandAll
/>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="类型">
{form.getFieldDecorator('resourceType', {
initialValue: 'pageAuth',
rules: [{ required: true, message: '请选择类型!' }],
})(
<Select style={{ width: 120 }} onChange={this.onSelect} disabled>
<Option value="pageAuth">pageAuth</Option>
</Select>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
{form.getFieldDecorator('remark', {})(<TextArea placeholder="请输入" />)}
</FormItem>
</Form>
);
return (
<Modal
maskClosable={false}
destroyOnClose
title={!isPageAuth ? '新建菜单' : '新建按钮级权限'}
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleAddModalVisible()}
okText="确定"
cancelText="取消"
confirmLoading={menu.loading}
>
{!isPageAuth ? menuForm : pageAuthForm}
</Modal>
);
}
Example #25
Source File: update.js From egoshop with Apache License 2.0 | 4 votes |
render() {
const { form, listData,cateTree,infoData, loading } = this.props;
const { name, pid, icon } = infoData || {};
const { getFieldDecorator } = form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 }
}
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0
},
sm: {
span: 16,
offset: 6
}
}
};
let hasChild = false;
listData.list.map((e) => {
(hasChild === false && e.pid === infoData.id) ? hasChild = true : null;
});
// 最多3级 去掉自己
let treeData = [];
cateTree.forEach(function(item) {
if (item.id !== infoData.id) {
treeData.push({
title: item.name,
value: `${item.id}`,
key: `${item.id}`,
children: typeof item["children"] === "undefined" ? [] : ((item) => {
let _data = [];
item.children.map((sub) => {
if (sub.id !== infoData.id) {
_data.push({
title: sub.name,
value: `${sub.id}`,
key: `${sub.id}`
});
}
});
return _data;
})(item)
});
}
});
return (
<PageHeaderWrapper hiddenBreadcrumb={true}>
<Card bordered={false}>
<Spin size="large" spinning={loading}>
<Form onSubmit={this.handleSubmit} style={{ maxWidth: 600 }}>
<FormItem
label="分类名称"
{...formItemLayout}
>
{getFieldDecorator("name", {
initialValue: name,
rules: [{
required: true,
message: "请输入分类名称"
}]
})(
<Input
placeholder='请输入分类名称'
style={{ width: "100%" }}
/>
)}
</FormItem>
{hasChild === false ? <FormItem
label="上级分类"
help="如不选择,则默认为一级分类"
{...formItemLayout}
>
{getFieldDecorator("pid", {
initialValue: pid === 0 ? 0 : pid
})(
<TreeSelect
treeData={treeData}
showSearch
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
placeholder="请输入分类名称"
allowClear
treeDefaultExpandAll
/>
)}
</FormItem> : null}
<FormItem
{...formItemLayout}
extra="分类展示图,建议尺寸:140*140 像素"
label="上传分类图"
>
{getFieldDecorator("icon", {
initialValue: icon,
rules: [{
message: "请上传分类图"
}],
valuePropName: "url"
})(
<UploadImage />
)}
</FormItem>
<FormItem {...tailFormItemLayout}>
<Button
type="primary"
htmlType="submit"
style={{
marginRight: 10
}}
>
保存
</Button>
<Button
onClick={() => {
router.goBack();
}}
>
返回
</Button>
</FormItem>
</Form>
</Spin>
</Card>
</PageHeaderWrapper>
);
}
Example #26
Source File: create.js From egoshop with Apache License 2.0 | 4 votes |
render() {
const { form, listData,cateTree, comcateModelLoading } = this.props;
const { getFieldDecorator } = form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 }
}
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0
},
sm: {
span: 16,
offset: 6
}
}
};
// 最多3级
let treeData = [];
cateTree.forEach(function(item) {
treeData.push({
title: item.name,
value: `${item.id}`,
key: `${item.id}`,
children: typeof item["children"] === "undefined" ? [] : ((item) => {
let _data = [];
item.children.map((sub) => {
_data.push({
title: sub.name,
value: `${sub.id}`,
key: `${sub.id}`
});
});
return _data;
})(item)
});
});
return (
<PageHeaderWrapper hiddenBreadcrumb={true}>
<Card bordered={false}>
<Spin size="large" spinning={comcateModelLoading}>
<Form onSubmit={this.handleSubmit} style={{ maxWidth: 600 }}>
<FormItem
label="分类名称"
{...formItemLayout}
>
{getFieldDecorator("name", {
rules: [{
required: true,
message: "请输入分类名称"
}]
})(
<Input
placeholder='请输入分类名称'
style={{ width: "100%" }}
/>
)}
</FormItem>
<FormItem
label="上级分类"
help="如不选择,则默认为一级分类"
{...formItemLayout}
>
{getFieldDecorator("pid", {
initialValue: 0
})(
<TreeSelect
treeData={treeData}
showSearch
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
placeholder="请输入分类名称"
allowClear
treeDefaultExpandAll
/>
)}
</FormItem>
<FormItem
{...formItemLayout}
extra="分类展示图,建议尺寸:140*140 像素"
label="上传分类图"
>
{getFieldDecorator("icon", {
rules: [{
message: "请上传分类图"
}],
valuePropName: "url"
})(
<UploadImage />
)}
</FormItem>
<FormItem {...tailFormItemLayout}>
<Button type="primary" htmlType="submit" loading={comcateModelLoading} style={{
marginRight: 10
}}>保存</Button>
<Button
onClick={() => {
router.goBack();
}}
>
返回
</Button>
</FormItem>
</Form>
</Spin>
</Card>
</PageHeaderWrapper>
);
}
Example #27
Source File: update.jsx From egoshop with Apache License 2.0 | 4 votes |
render() {
const { photoGalleryVisible, previewVisible, previewImage } = this.state;
const { form, cateListLoading,cateList,cateTree,oneData } = this.props;
const { cids,skuList } = oneData
const { getFieldDecorator, getFieldValue, setFieldsValue } = form;
const cateTreeSelect = Antd.treeData(cateTree);
console.log("skuList",skuList)
// TreeSelect 只接受string
let _categoryIds = [];
if (Array.isArray(cids) && cids.length > 0) {
_categoryIds = cids.map((item) => {
return item + "";
});
}
return (
<PageHeaderWrapper hiddenBreadcrumb={true}>
<Card bordered={false}>
<Spin size="large" spinning={cateListLoading}>
{ oneData.id > 0 && <Form onSubmit={this.handleSubmit} style={{ width: 1000 }}>
<div className={styles.item}>
<h3>基本信息</h3>
<FormItem
{...formItemLayout}
label='商品图'
>
{getFieldDecorator("gallery", {
rules: [{ required: true, message: "请选择商品图" }],
valuePropName: "url",
initialValue:oneData.gallery,
})(
<UploadGroupImage
onClick={(onChange, values) => {
values = values ? values : [];
this.openPhotoGallery({
photoGalleryOnOk: (e) => {
onChange([...values, ...e]);
}
});
}}
preview={(previewImage) => {
this.openPreviewModal({
previewImage
});
}}
/>
)}
</FormItem>
<FormItem
{...formItemLayout}
label='商品名称'
>
{getFieldDecorator("title", {
rules: [{ required: true, message: "请输入商品名称" }],
initialValue:oneData.title,
})(
<Input
placeholder="请输入商品名称"
/>
)}
</FormItem>
<FormItem
{...formItemLayout}
label='商品副名称'
>
{getFieldDecorator("subTitle", {
rules: [{ required: true, message: "商品副名称" }],
initialValue:oneData.subTitle,
})(
<Input
placeholder="商品副名称"
/>
)}
</FormItem>
<FormItem
{...formItemLayout}
label='商品分类'
>
{getFieldDecorator("cids", {
initialValue: _categoryIds,
rules: [{ required: true, message: "请选择商品分类" }]
})(
<TreeSelect
treeData={cateTreeSelect}
showSearch
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
placeholder="请选择商品分类"
allowClearsetFieldsValue
multiple
treeDefaultExpandAll
onChange={(value) => {
setFieldsValue({
cids: value
});
}}
/>
)}
<a
onClick={() => {
router.push("/comcate/create");
}}
>
新增分类
</a>
</FormItem>
</div>
<div className={styles.item}>
<h3>型号价格</h3>
<FormItem {...formItemLayout}>
{getFieldDecorator("skuList", {
rules: [{
validator: Sku.validator,
required: true
}],
initialValue: skuList.length > 0 ? skuList : null
})(<Sku form={form} />)}
</FormItem>
</div>
<div className={styles.item}>
<h3>运费其他</h3>
<FormItem {...formItemLayout} label={"运费"}>
{getFieldDecorator("freight", {
rules: [{
required: true
}],
initialValue: {
freightId: oneData.freightId,
freightFee: oneData.freightFee,
}
})(<Freight />)}
</FormItem>
<FormItem {...formItemLayout} label={"开售时间"}>
{getFieldDecorator("saleTime", {
rules: [{
required: true
}],
initialValue:moment(oneData.saleTime),
})(
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="选择时间"
style={{ marginRight: 15 }}
/>
)}
</FormItem>
</div>
<FormItem {...tailFormItemLayout}>
<Button
type="primary"
htmlType="submit"
style={{
marginRight: 10
}}
>
保存添加
</Button>
<Button
onClick={()=>{
router.goBack()
}}
>
返回
</Button>
</FormItem>
</Form>}
<PhotoGallery
visible={photoGalleryVisible}
onCancel={this.onCancelPhotoGallery}
onOk={this.onOkPhotoGallery}
/>
<Modal visible={previewVisible} footer={null} onCancel={this.previewCancel}>
<img alt="example" style={{ width: "100%" }} src={previewImage} />
</Modal>
</Spin>
</Card>
</PageHeaderWrapper>
);
}
Example #28
Source File: index.js From egoshop with Apache License 2.0 | 4 votes |
render() {
const { form, goodsCategory, loading } = this.props;
const { getFieldDecorator } = form;
const { sale_state, title, category_ids, order_type } = this.state.queryParams;
let tree = Arr.toTree(goodsCategory.list)
const treeData = categoryTreeData(tree);
// console.log(treeData)
// TreeSelect 只接受string
let _category_ids = category_ids && category_ids.length ? [...category_ids] : [];
return (
<Form
layout="inline"
style={{
paddingBottom: "24px",
marginBottom: "24px",
borderBottom: "1px dashed #ededed"
}}
onSubmit={this.handleSubmit}
>
<FormItem label="商品名称">
{getFieldDecorator("title", { initialValue: title })(
<Input
placeholder='请输入商品名称'
/>
)}
</FormItem>
<FormItem
label="商品状态"
>
{getFieldDecorator("sale_state", {
initialValue: sale_state
})(
<Select
placeholder="请选择"
style={{ width: 200 }}
>
{
tabsList.map((e, i) => (
<Option value={e.id} key={i}>{e.title}</Option>
))
}
</Select>
)}
</FormItem>
<FormItem
label="商品分类"
>
{getFieldDecorator("category_ids", { initialValue: _category_ids })(
<TreeSelect
style={{ width: 200 }}
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
treeData={treeData}
placeholder="请选择"
treeDefaultExpandAll
allowClear={true}
multiple
/>
)}
</FormItem>
<FormItem
label="排序"
>
{getFieldDecorator("order_type", { initialValue: order_type })(
<Select
placeholder="请选择"
style={{ width: 200 }}
>
{
order_typeArray.map((e, i) => (
<Option value={e.id} key={i}>{e.title}</Option>
))
}
</Select>
)}
</FormItem>
<FormItem>
<Button
type="primary"
style={{ marginRight: 15 }}
htmlType="submit"
loading={loading}
>
筛选
</Button>
<Button
onClick={() => {
router.push("/goods/list");
}}
>
清空筛选
</Button>
</FormItem>
</Form>
);
}
Example #29
Source File: SysUserUpdate.jsx From spring-boot-plus-admin-react with Apache License 2.0 | 4 votes |
render() {
const {SysUserModel: {roles = [], departments = [], user = {},}, submitting, form} = this.props;
const {getFieldDecorator} = form;
return (
<div>
<Modal
width={416*2}
title="修改系统用户"
destroyOnClose
okText="更新"
onOk={this.handlerSubmit}
onCancel={() => this.props.handlerVisibleAddModal()}
confirmLoading={submitting}
visible={this.props.visible}
>
<Form onSubmit={this.handlerSubmit} layout="vertical">
<Form.Item label="id" style={{display: 'none'}}>
{getFieldDecorator('id', {
initialValue: user.id,
rules: [
{
required: true,
message: '请输入用户名!',
},
],
})(<Input placeholder="请输入用户编号"/>)}
</Form.Item>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="用户名">
{getFieldDecorator('username', {
initialValue: user.username,
rules: [
{
required: true,
message: '请输入用户名!',
},
],
})(<Input placeholder="请输入用户名"/>)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="昵称">
{getFieldDecorator('nickname', {
initialValue: user.nickname,
rules: [
{
required: false,
message: '请输入昵称!',
},
],
})(<Input placeholder="请输入昵称"/>)}
</Form.Item>
</Col>
</Row>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="密码">
{getFieldDecorator('password', {
initialValue: user.password,
rules: [
{
required: true,
message: '请输入密码!',
},
],
})(<Input.Password placeholder="请输入密码"/>)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="手机号">
{getFieldDecorator('phone', {
initialValue: user.phone,
rules: [
{
required: true,
message: '请输入手机号!',
},
],
})(<Input placeholder="请输入手机号"/>)}
</Form.Item>
</Col>
</Row>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="角色">
{getFieldDecorator('roleId', {
initialValue: user.roleId,
rules: [
{
required: true,
message: '请选择角色!',
},
],
})(<Select showSearch allowClear>
{roles.map(
role => <Select.Option key={role.id} value={role.id}>{role.name}</Select.Option>
)}
</Select>)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="部门">
{getFieldDecorator('departmentId', {
initialValue: user.departmentId,
rules: [
{
required: true,
message: '请选择部门!',
},
],
})(<TreeSelect showSearch allowClear treeData={departments}/>)}
</Form.Item>
</Col>
</Row>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="状态">
{getFieldDecorator('state', {
initialValue: `${user.state}`,
rules: [
{
required: true,
message: '请选择状态!',
},
],
})(<Select>
<Select.Option value="0">禁用</Select.Option>
<Select.Option value="1">启用</Select.Option>
<Select.Option value="2">锁定</Select.Option>
</Select>)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="性别">
{getFieldDecorator('gender', {
initialValue: `${user.gender}`,
rules: [
{
required: true,
message: '请选择性别!',
},
],
})(<Select>
<Select.Option value="0">女</Select.Option>
<Select.Option value="1">男</Select.Option>
</Select>)}
</Form.Item>
</Col>
</Row>
<Row gutter={24}>
<Col span={24}>
<Form.Item label="备注">
{getFieldDecorator('remark', {
initialValue: user.remark,
rules: [
{
required: false,
message: '请输入备注!',
},
],
})(<Input.TextArea rows={4}/>)}
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
</div>
);
}