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 vote down vote up
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 vote down vote up
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 vote down vote up
{ TreeNode } = TreeSelect
Example #4
Source File: async.jsx    From virtuoso-design-system with MIT License 6 votes vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
{ TreeNode } = TreeSelect
Example #15
Source File: suffix.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up
{ TreeNode } = TreeSelect
Example #16
Source File: basic.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up
{ TreeNode } = TreeSelect
Example #17
Source File: caseModal.js    From AgileTC with Apache License 2.0 5 votes vote down vote up
{ TreeNode } = TreeSelect
Example #18
Source File: AddCertificate.js    From react-portal with MIT License 5 votes vote down vote up
{ TreeNode } = TreeSelect
Example #19
Source File: checkable.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up
{ SHOW_PARENT } = TreeSelect
Example #20
Source File: multiple.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up
{ TreeNode } = TreeSelect
Example #21
Source File: direction.jsx    From virtuoso-design-system with MIT License 4 votes vote down vote up
// ==== 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}
            />
            &nbsp;&nbsp;&nbsp;&nbsp; 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>
            &nbsp;&nbsp;
            <Switch defaultChecked />
            &nbsp;&nbsp;
            <Switch loading defaultChecked />
            &nbsp;&nbsp;
            <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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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>
    );
  }