Skip to content

W
wisdom-components
Commit 2bdb602d authored by 涂茜's avatar 涂茜
Browse files
Options

fix: update quotaselect

parent d5841ce2
Pipeline #26462 failed with stages
          in 14 seconds
          Hide whitespace changes
          Inline Side-by-side
          Showing with 130 additions and 125 deletions
          packages/ImageSelect/src/index.js
          View file @ 2bdb602d
          ...@@ -50,7 +50,7 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) ...@@ -50,7 +50,7 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
          const renderImageList = (data = []) => { const renderImageList = (data = []) => {
          return ( return (
          <Row gutter={[0, 24]}> <Row gutter={[0, 12]}>
          {!!data && {!!data &&
          data.map((item, index) => ( data.map((item, index) => (
          <Col <Col
          ...@@ -93,39 +93,41 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) ...@@ -93,39 +93,41 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
          </div> </div>
          )} )}
          </div> </div>
          <Modal {visible && (
          width={width} <Modal
          centered width={width}
          title={ centered
          <div className={classNames(`${prefixCls}-modal-header`)}> title={
          <div className={classNames(`${prefixCls}-modal-title`)}>{title}</div> <div className={classNames(`${prefixCls}-modal-header`)}>
          <Input <div className={classNames(`${prefixCls}-modal-title`)}>{title}</div>
          className={classNames(`${prefixCls}-modal-search`)} <Input
          placeholder="搜索图片关键词" className={classNames(`${prefixCls}-modal-search`)}
          allowClear placeholder="搜索图片关键词"
          bordered={false} allowClear
          prefix={<SearchOutlined />} bordered={false}
          onChange={onChange} prefix={<SearchOutlined />}
          onPressEnter={onPressEnter} onChange={onChange}
          /> onPressEnter={onPressEnter}
          </div> />
          } </div>
          footer={null} }
          visible={visible} footer={null}
          onCancel={handleCancel} visible={true}
          className={classNames(`${prefixCls}-modal`)} onCancel={handleCancel}
          > className={classNames(`${prefixCls}-modal`)}
          {!!imgList.length && >
          imgList.map((item, index) => { {!!imgList.length &&
          return ( imgList.map((item, index) => {
          <div key={item.text + index} className={classNames(`${prefixCls}-modal-folder`)}> return (
          <div className={classNames(`${prefixCls}-modal-path-title`)}>{item.text}</div> <div key={item.text + index} className={classNames(`${prefixCls}-modal-folder`)}>
          <div>{renderImageList(item.list)}</div> <div className={classNames(`${prefixCls}-modal-path-title`)}>{item.text}</div>
          </div> <div>{renderImageList(item.list)}</div>
          ); </div>
          })} );
          {!imgList.length && <Empty />} })}
          </Modal> {!imgList.length && <Empty />}
          </Modal>
          )}
          </div> </div>
          ); );
          }; };
          ......
          packages/ImageSelect/src/index.less
          View file @ 2bdb602d
          ...@@ -80,8 +80,15 @@ ...@@ -80,8 +80,15 @@
          } }
          &-item-wrap { &-item-wrap {
          padding: 10px 0;
          text-align: center; text-align: center;
          border: 1px solid transparent; border: 1px solid transparent;
          &.selected {
          background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
          border: 1px solid #b8d6fb;
          border-radius: 2px;
          }
          } }
          &-item-wrap:hover { &-item-wrap:hover {
          ...@@ -96,12 +103,6 @@ ...@@ -96,12 +103,6 @@
          height: 40px; height: 40px;
          } }
          &.selected {
          background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
          border: 1px solid #b8d6fb;
          border-radius: 2px;
          }
          &-item-text { &-item-text {
          font-size: 12px; font-size: 12px;
          white-space: nowrap; white-space: nowrap;
          ......
          packages/QuotaSelect/src/index.js
          View file @ 2bdb602d
          ...@@ -221,97 +221,99 @@ const QuotaSelect = ({ ...@@ -221,97 +221,99 @@ const QuotaSelect = ({
          return ( return (
          <div className={classNames(prefixCls)}> <div className={classNames(prefixCls)}>
          <Button {...buttonProps} onClick={showModal} /> <Button {...buttonProps} onClick={showModal} />
          <Modal {visible && (
          centered <Modal
          width={width} centered
          title={title} width={width}
          cancelText={cancelText} title={title}
          okText={okText} cancelText={cancelText}
          visible={visible} okText={okText}
          onCancel={handleCancel} visible={true}
          onOk={onOk} onCancel={handleCancel}
          className={classNames(`${prefixCls}-modal`)} onOk={onOk}
          > className={classNames(`${prefixCls}-modal`)}
          <div className={classNames(`${prefixCls}-modal-wrap`)}> >
          <div className={classNames(`${prefixCls}-modal-left`)}> <div className={classNames(`${prefixCls}-modal-wrap`)}>
          <div className={classNames(`${prefixCls}-modal-select-wrap`)}> <div className={classNames(`${prefixCls}-modal-left`)}>
          <Input <div className={classNames(`${prefixCls}-modal-select-wrap`)}>
          className={classNames(`${prefixCls}-modal-search`)} <Input
          placeholder={placeholder} className={classNames(`${prefixCls}-modal-search`)}
          bordered={false} placeholder={placeholder}
          prefix={searchPrefix} bordered={false}
          onChange={onSearch} prefix={searchPrefix}
          onPressEnter={onSearch} onChange={onSearch}
          /> onPressEnter={onSearch}
          <div className={classNames(`${prefixCls}-modal-target`)}> />
          <div>指标：</div> <div className={classNames(`${prefixCls}-modal-target`)}>
          <Radio.Group onChange={onRadioChange} defaultValue={targetValue}> <div>指标：</div>
          <Radio.Button value="emphasis">重点指标</Radio.Button> <Radio.Group onChange={onRadioChange} defaultValue={targetValue}>
          <Radio.Button value="all">全部</Radio.Button> <Radio.Button value="emphasis">重点指标</Radio.Button>
          </Radio.Group> <Radio.Button value="all">全部</Radio.Button>
          </Radio.Group>
          </div>
          <div
          className={classNames(`${prefixCls}-modal-select`, {
          warning: !(selectData.length < maximum),
          })}
          >
          {selectData.length < maximum ? (
          <>
          <ExclamationCircleFilled />
          <div>已选择 {selectData.length} 个指标</div>
          </>
          ) : (
          <>
          <ExclamationCircleFilled />
          <div>已达上限，最多选择 {maximum} 个指标</div>
          </>
          )}
          </div>
          </div> </div>
          <div <div className={classNames(`${prefixCls}-modal-option-wrap`)}>
          className={classNames(`${prefixCls}-modal-select`, { {!quotaList.length && <Empty />}
          warning: !(selectData.length < maximum), <Row gutter={[0, 6]}>
          })} {!!quotaList.length &&
          > quotaList.map((item) => (
          {selectData.length < maximum ? ( <Col span={8} key={item.key}>
          <> <Checkbox
          <ExclamationCircleFilled /> value={item.title}
          <div>已选择 {selectData.length} 个指标</div> checked={item.checked}
          </> disabled={
          ) : ( (selectData.length > maximum || selectData.length === maximum) &&
          <> !item.checked
          <ExclamationCircleFilled /> }
          <div>已达上限，最多选择 {maximum} 个指标</div> onChange={handleCheckboxChange}
          </> >
          )} {item.title}
          </Checkbox>
          </Col>
          ))}
          </Row>
          </div> </div>
          </div> </div>
          <div className={classNames(`${prefixCls}-modal-option-wrap`)}> <div className={classNames(`${prefixCls}-modal-right`)}>
          {!quotaList.length && <Empty />} <div className={classNames(`${prefixCls}-modal-number`)}>
          <Row gutter={[0, 6]}> 已选：{selectData.length}/{maximum}
          {!!quotaList.length && </div>
          quotaList.map((item) => ( <div className={classNames(`${prefixCls}-modal-tree`)}>
          <Col span={8} key={item.key}> <Tree draggable={true} onDrop={handleDrop} {...treeProps}>
          <Checkbox {selectData.map((item) => (
          value={item.title} <TreeNode
          checked={item.checked} key={item.key}
          disabled={ title={
          (selectData.length > maximum || selectData.length === maximum) && <div className={classNames(`${prefixCls}-modal-tree-title`)}>
          !item.checked <div>{item.title}</div>
          } <CloseOutlined onClick={() => handleCancelSelect(item)} />
          onChange={handleCheckboxChange} </div>
          > }
          {item.title} />
          </Checkbox>
          </Col>
          ))} ))}
          </Row> </Tree>
          </div> </div>
          </div>
          <div className={classNames(`${prefixCls}-modal-right`)}>
          <div className={classNames(`${prefixCls}-modal-number`)}>
          已选：{selectData.length}/{maximum}
          </div>
          <div className={classNames(`${prefixCls}-modal-tree`)}>
          <Tree draggable={true} onDrop={handleDrop} {...treeProps}>
          {selectData.map((item) => (
          <TreeNode
          key={item.key}
          title={
          <div className={classNames(`${prefixCls}-modal-tree-title`)}>
          <div>{item.title}</div>
          <CloseOutlined onClick={() => handleCancelSelect(item)} />
          </div>
          }
          />
          ))}
          </Tree>
          </div> </div>
          </div> </div>
          </div> </Modal>
          </Modal> )}
          </div> </div>
          ); );
          }; };
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment