feat: add ec-quotaselect

.umirc.js

@@ -102,7 +102,7 @@ export default {
     '/extend-components': [
       {
         title: 'base',
-        children: ['EC-DeviceTree'],
+        children: ['EC-DeviceTree', 'EC-QuotaSelect'],
       },
     ],
   },

packages/base-components/QuotaSelect/src/demos/Basic.tsx

@@ -19,16 +19,6 @@ const Demo = () => {
       .then(function (response) {
         if (response.code == '0') {
           let curData = response.data;
-          curData.forEach((item) => {
-            item.decimalBit = item.DecimalBit;
-            item.deviation = item.Deviation;
-            item.format = item.Format;
-            item.isShow = item.IsShow;
-            item.name = item.Name;
-            item.style = item.Style;
-            item.type = item.Type;
-            item.unit = item.Unit;
-          });
           setQuotaList(curData);
         }
       })

packages/extend-components/EC-DeviceTree/src/EC-DeviceTree.md

@@ -7,7 +7,7 @@ group:
   path: /
 ---
 
-# DeviceTree 设备树
+# EC-DeviceTree 设备树
 
 基础业务组件
 

packages/extend-components/EC-DeviceTree/src/demos/Basic.tsx

@@ -3,22 +3,22 @@ import PandaDeviceTree from '../index';
 import { service } from '@wisdom-utils/utils';
 
 const REQUEST_HTTP = 'http';
-const REQUEST_METHOD_GET = 'post';
+const REQUEST_METHOD_POST = 'post';
 
-const GET_SKETCHPAD_LIST =
+const GET_DEVICE_LIST =
   'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/DeviceTree'; //获取设备树列表
 
 const deviceTreeService = {
-  getDeviceTreeList: {
-    url: GET_SKETCHPAD_LIST,
-    method: REQUEST_METHOD_GET,
+  getDeviceList: {
+    url: GET_DEVICE_LIST,
+    method: REQUEST_METHOD_POST,
     type: REQUEST_HTTP,
   },
 };
 
 const dtService = service(deviceTreeService);
 
-const getDeviceTreeList = dtService.getDeviceTreeList;
+const getDeviceList = dtService.getDeviceList;
 
 const Demo = () => {
   const onTreeCheck = (checkedKeysValue) => {
@@ -35,7 +35,7 @@ const Demo = () => {
         checkable
         onTreeCheck={onTreeCheck}
         onTreeSelect={onTreeSelect}
-        deviceTreeService={getDeviceTreeList}
+        deviceTreeService={getDeviceList}
         serviceParams={
           {
             // pageIndex: 1,

packages/extend-components/EC-QuotaSelect/README.md

+# `@wisdom-components/EC-QuotaSelect`
+
+> TODO: description
+
+## Usage
+
+```
+const ecQuotaSelect = require('@wisdom-components/EC-QuotaSelect');
+
+// TODO: DEMONSTRATE API
+```

packages/extend-components/EC-QuotaSelect/package.json

+{
+  "name": "@wisdom-components/ec-quotaselect",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "tuqian <webtuqian@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/EC-QuotaSelect.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/extend-components/EC-QuotaSelect/src/EC-QuotaSelect.md

+---
+title: EC-QuotaSelect - 指标选择
+nav:
+  title: 业务组件
+  path: /extend-components
+group:
+  path: /
+---
+
+# EC-QuotaSelect 指标选择
+
+基础业务组件
+
+- 允许对分类指标进行选择
+- 允许限制选择最大指标数
+- 允许搜索指标
+
+## 何时使用
+
+- 在指标选择时。
+
+## 代码演示
+
+<code src="./demos/Basic.tsx">
+
+## API
+
+指标选择按钮 props 参考 https://ant.design/components/button-cn/#API
+
+已选指标树 props 参考 https://ant.design/components/tree-cn/#API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| buttonProps | 指标选择按钮 | object | { } |
+| width | 模态框宽度 | number | 900 |
+| title | 模态框标题 | string | 选择显示字段 |
+| cancelText | 模态框取消按钮文字 | string | 取消选择 |
+| okText | 模态框确认按钮文字 | string | 确定 |
+| placeholder | 搜索框占位符 | string | 搜索关键词 |
+| searchPrefix | 搜索框前置图标 | ReactNode | SearchOutlined |
+| maximum`必需` | 最多可选择指标数量 | number | 0 |
+| deviceList`必需` | 设备列表数据源 | array | [ ] |
+| confList `必需` | 设备配置数据源 | array | [ ] |
+| user | 用户登录名 | string | null |
+| pointType`必需` | 指标类型 | string | cardPoints |
+| treeProps | 已选指标树 props | object | { } |
+| onSelect | 模态框点击确定，选中的数据 | function(device, selectKey, selectList){ } | - |
+| onModalCancel | 点击模态框取消按钮的回调 | function(value){ } | - |
+| onModalOk | 模态框点击确定回调 | function(value){ } | - |
+| onModalClose | 模态框点击关闭回调 | function(value){ } | - |
+| quotaListService`必需` | 获取指标列表的服务 | promise | - |
+| updateDeviceConfService`user存在时必需` | 更新设备配置的服务 | promise | - |

packages/extend-components/EC-QuotaSelect/src/demos/Basic.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import request from 'umi-request';
+import { UnorderedListOutlined, SearchOutlined } from '@ant-design/icons';
+import PandaQuotaSelect from '../index';
+import { service } from '@wisdom-utils/utils';
+
+const REQUEST_HTTP = 'http';
+const REQUEST_METHOD_GET = 'get';
+const REQUEST_METHOD_POST = 'post';
+
+const GET_QUOTA_LIST =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetQuotaList'; //获取指标列表
+
+const GET_DEVICE_CONF =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetDeviceConf'; //获取设备配置
+
+const UPDATE_DEVICE_CONF =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/SaveDeviceConf'; //更新设备配置
+
+const quotaSelectService = {
+  getQuotaList: {
+    url: GET_QUOTA_LIST,
+    method: REQUEST_METHOD_GET,
+    type: REQUEST_HTTP,
+  },
+  getDeviceConf: {
+    url: GET_DEVICE_CONF,
+    method: REQUEST_METHOD_GET,
+    type: REQUEST_HTTP,
+  },
+  updateDeviceConfService: {
+    url: UPDATE_DEVICE_CONF,
+    method: REQUEST_METHOD_POST,
+    type: REQUEST_HTTP,
+  },
+};
+
+const qsService = service(quotaSelectService);
+
+const getQuotaList = qsService.getQuotaList;
+const getDeviceConf = qsService.getDeviceConf;
+const updateDeviceConfService = qsService.updateDeviceConfService;
+
+const pointType = 'cardPoints';
+
+const Demo = () => {
+  const [deviceList, setDeviceList] = useState([]); // 设备列表
+  const [confList, setConfList] = useState([]); // 设备配置列表
+
+  const fetchData = () => {
+    getDeviceConf({
+      user: 'user',
+      showAll: true,
+      deviceType: '二供泵房,二供机组',
+    })
+      .then(function (response) {
+        if (response.code == '0') {
+          let curData = response.data;
+          DeviceList.forEach((item) => {
+            curData.forEach((child) => {
+              if (item.deviceType === child.deviceType) item.confList = child[pointType].split(',');
+            });
+          });
+          setConfList(curData);
+          setDeviceList(DeviceList);
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const onModalOk = () => {
+    console.log('onModalOk');
+  };
+
+  const onModalClose = () => {
+    console.log('onModalClose');
+  };
+
+  const onModalCancel = () => {
+    console.log('onModalCancel');
+  };
+
+  const onSelect = ({ device, selectKey, selectList }) => {
+    let list = [...deviceList];
+    list.forEach((child) => {
+      if (child.stationID === device.stationID) {
+        child.confList = selectKey;
+      }
+    });
+    setDeviceList(list);
+  };
+
+  return (
+    <>
+      <h3>无 user, 无“保存修改”按钮</h3>
+      <PandaQuotaSelect
+        buttonProps={
+          {
+            // icon: <UnorderedListOutlined />,
+            // children: `指标选择(${selectData.length})`,
+          }
+        }
+        deviceList={deviceList}
+        quotaListService={getQuotaList}
+        pointType={pointType}
+        onSelect={onSelect}
+        // onModalCancel={onModalCancel}
+        // onModalOk={onModalOk}
+        // onModalClose={onModalClose}
+        maximum={5}
+      />
+      <br />
+      <h3>带 user, 有“保存修改”按钮</h3>
+      <PandaQuotaSelect
+        buttonProps={
+          {
+            // icon: <UnorderedListOutlined />,
+            // children: `指标选择(${selectData.length})`,
+          }
+        }
+        deviceList={deviceList}
+        quotaListService={getQuotaList}
+        updateDeviceConfService={updateDeviceConfService}
+        confList={confList}
+        pointType={pointType}
+        onSelect={onSelect}
+        onModalCancel={onModalCancel}
+        onModalOk={onModalOk}
+        onModalClose={onModalClose}
+        maximum={5}
+        user={'user'}
+      />
+    </>
+  );
+};
+
+export default Demo;
+
+const DeviceList = [
+  {
+    deviceName: '001东北明珠',
+    shortName: '001东北明珠',
+    code: 'EGBF00000001',
+    fatherCode: null,
+    deviceType: '二供泵房',
+    entryTime: '2020-03-29 04:20:49',
+    deviceGroup: '箱式变频',
+    pointAddressID: 4,
+    children: [],
+    stationID: 27,
+  },
+  {
+    deviceName: '低区',
+    shortName: '低区',
+    code: 'EGJZ00000162',
+    fatherCode: 'EGBF00000001',
+    deviceType: '二供机组',
+    entryTime: '2020-03-29 04:20:49',
+    deviceGroup: '箱式变频',
+    pointAddressID: 30,
+    children: [],
+    stationID: 28,
+  },
+  {
+    deviceName: '002世元国际',
+    shortName: '002世元国际',
+    code: 'EGBF00000002',
+    fatherCode: null,
+    deviceType: '二供机组',
+    entryTime: '2020-03-29 04:24:19',
+    deviceGroup: '智慧标准泵房',
+    pointAddressID: 4,
+    children: [],
+    stationID: 29,
+  },
+];

packages/extend-components/EC-QuotaSelect/src/index.js

+import React, { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {
+  Button,
+  Input,
+  Radio,
+  Modal,
+  Checkbox,
+  Row,
+  Col,
+  Tree,
+  ConfigProvider,
+  message,
+} from 'antd';
+import Empty from '@wisdom-components/empty';
+import {
+  UnorderedListOutlined,
+  ExclamationCircleFilled,
+  SearchOutlined,
+  CloseOutlined,
+} from '@ant-design/icons';
+import './index.less';
+
+const { TreeNode } = Tree;
+
+const QuotaSelect = ({
+  buttonProps,
+  deviceList,
+  quotaListService,
+  updateDeviceConfService,
+  confList,
+  onSelect,
+  pointType,
+  width,
+  title,
+  cancelText,
+  okText,
+  onModalOk,
+  onModalClose,
+  onModalCancel,
+  searchPrefix,
+  placeholder,
+  maximum,
+  user,
+  treeProps,
+}) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('ec-quota-select');
+
+  const [visible, setVisible] = useState(false);
+  const [targetValue, setTargetValue] = useState('emphasis');
+  const [allQuotaList, setAllQuotaList] = useState([]);
+  const [quotaList, setQuotaList] = useState([]);
+  const [selectDevice, setSelectDevice] = useState({}); // 选中的设备
+  const [selectData, setSelectData] = useState([]); // 选中的指标数据
+  const [confParams, setConfParams] = useState({});
+
+  const fetchData = (item = {}) => {
+    // 请求指标列表
+    quotaListService({
+      acountName: item.deviceType,
+      addrSchemeID: item.pointAddressID,
+    }).then((res) => {
+      if (res.code === 0) {
+        const data =
+          res.data.length > 0
+            ? res.data.map((child) => ({
+                ...child,
+                checked: item.confList.includes(child.name),
+                title: child.name,
+                key: child.name,
+              }))
+            : [];
+        setAllQuotaList(data);
+        setSelectData(data.filter((child) => child.checked));
+      } else {
+        message.error(res.msg);
+      }
+    });
+  };
+
+  // 更新设备配置
+  const updateDeviceConf = () => {
+    const params = {
+      ...confParams,
+      loginName: user,
+      type: '用户',
+    };
+    const curSelectList = JSON.parse(JSON.stringify(selectData));
+    const curSelectKey = curSelectList.map((child) => child.key);
+    params[pointType] = curSelectKey.join(',');
+    updateDeviceConfService(params).then((response) => {
+      if (response.code === 0) {
+        message.success('保存成功');
+      } else {
+        message.error(response.msg);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (targetValue === 'emphasis') {
+      filterEmphasisQuota();
+    } else {
+      setQuotaList(allQuotaList);
+    }
+  }, [allQuotaList]);
+
+  useEffect(() => {
+    let data = JSON.parse(JSON.stringify(allQuotaList));
+    data.forEach((item) => {
+      item.checked = false;
+      if (selectData.length > 0) {
+        selectData.forEach((child) => {
+          if (child.key === item.key) {
+            item.checked = true;
+          }
+        });
+      }
+    });
+    setAllQuotaList(data);
+  }, [selectData]);
+
+  // 过滤重点指标
+  const filterEmphasisQuota = () => {
+    let newQuotaList = [...allQuotaList];
+    newQuotaList = newQuotaList.filter((item) => item.isShow === '1');
+    setQuotaList(newQuotaList);
+  };
+
+  // 展示模态框
+  const showModal = (item) => {
+    setVisible(true);
+    setSelectDevice(item);
+    fetchData(item);
+  };
+
+  useEffect(() => {
+    const param = confList.filter((child) => child.deviceType === selectDevice.deviceType)[0];
+    setConfParams({ ...param });
+  }, [selectDevice]);
+
+  // 关闭模态框
+  const handleCancel = (e) => {
+    if (e.target.innerHTML === cancelText) {
+      setSelectData([]);
+      onModalCancel && onModalCancel();
+    } else {
+      onModalClose && onModalClose();
+      setVisible(false);
+    }
+  };
+
+  const onOk = () => {
+    onModalOk && onModalOk();
+    handleOk();
+    setVisible(false);
+  };
+
+  const handleOk = () => {
+    const curSelectList = JSON.parse(JSON.stringify(selectData));
+    const curSelectKey = curSelectList.map((child) => child.key);
+    onSelect({
+      device: selectDevice,
+      selectKey: curSelectKey,
+      selectList: curSelectList,
+    });
+  };
+
+  // 切换重点与全部
+  const onRadioChange = (e) => {
+    if (e.target.value === 'all') {
+      setQuotaList(allQuotaList);
+    } else {
+      filterEmphasisQuota();
+    }
+    setTargetValue(e.target.value);
+  };
+
+  // 搜索指标
+  const onSearch = (e) => {
+    if (e.type === 'keydown' || e.target.value === '') {
+      if (e.target.value !== '') {
+        let newQuotaList = [];
+        quotaList.forEach((item) => {
+          if (item.name.indexOf(e.target.value) > -1) newQuotaList.push(item);
+        });
+        setQuotaList(newQuotaList);
+      } else {
+        if (targetValue === 'all') {
+          setQuotaList(allQuotaList);
+        } else {
+          filterEmphasisQuota();
+        }
+      }
+    }
+  };
+
+  // 处理复选框点击事件
+  const handleCheckboxChange = (e, item) => {
+    let curSelectList = JSON.parse(JSON.stringify(selectData));
+    if (item.checked) {
+      curSelectList = curSelectList.filter((child) => child.title !== item.title);
+    } else {
+      curSelectList.push({ ...item, checked: !item.checked });
+    }
+    setSelectData(curSelectList);
+  };
+
+  // 处理取消选择按钮点击事件
+  const handleCancelSelect = ({ title }) => {
+    let data = [...selectData];
+    data = data.filter((item) => item.title !== title);
+    setSelectData(data);
+  };
+
+  // 拖动选中树节点
+  const handleDrop = (info) => {
+    const dropKey = info.node.key;
+    const dragKey = info.dragNode.key;
+    const dropPos = info.node.pos.split('-');
+    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+
+    const loop = (data, key, callback) => {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].key === key) {
+          return callback(data[i], i, data);
+        }
+        if (data[i].children) {
+          loop(data[i].children, key, callback);
+        }
+      }
+    };
+
+    const data = [...selectData];
+
+    let dragObj;
+    loop(data, dragKey, (item, index, arr) => {
+      arr.splice(index, 1);
+      dragObj = item;
+    });
+
+    if (!info.dropToGap) {
+      loop(data, dropKey, (item) => {
+        item.children = item.children || [];
+        item.children.unshift(dragObj);
+      });
+    } else if (
+      (info.node.props.children || []).length > 0 && // Has children
+      info.node.props.expanded && // Is expanded
+      dropPosition === 1 // On the bottom gap
+    ) {
+      loop(data, dropKey, (item) => {
+        item.children = item.children || [];
+        item.children.unshift(dragObj);
+      });
+    } else {
+      let ar;
+      let i;
+      loop(data, dropKey, (item, index, arr) => {
+        ar = arr;
+        i = index;
+      });
+      if (dropPosition === -1) {
+        ar.splice(i, 0, dragObj);
+      } else {
+        ar.splice(i + 1, 0, dragObj);
+      }
+    }
+
+    setSelectData(data);
+  };
+
+  return (
+    <div className={classNames(prefixCls)}>
+      <div className={classNames(`${prefixCls}-btn-wrap`)}>
+        {deviceList.length &&
+          deviceList.map((item, index) => (
+            <Button
+              key={index}
+              icon={<UnorderedListOutlined />}
+              {...buttonProps}
+              onClick={() => showModal(item)}
+            >
+              {buttonProps.children
+                ? buttonProps.children
+                : `${item.deviceName}(${item.confList ? item.confList.length : 0})`}
+            </Button>
+          ))}
+      </div>
+      {visible && (
+        <Modal
+          centered
+          width={width}
+          title={title}
+          cancelText={cancelText}
+          okText={okText}
+          visible={true}
+          onCancel={handleCancel}
+          onOk={onOk}
+          className={classNames(`${prefixCls}-modal`)}
+          footer={[
+            user ? (
+              <Button
+                style={{ float: 'left' }}
+                key="save"
+                type="primary"
+                onClick={() => {
+                  updateDeviceConf();
+                  onOk();
+                }}
+              >
+                保存修改
+              </Button>
+            ) : null,
+            <Button key="cancel" onClick={handleCancel}>
+              取消选择
+            </Button>,
+            <Button key="ok" type="primary" onClick={onOk}>
+              确定
+            </Button>,
+          ]}
+        >
+          <div className={classNames(`${prefixCls}-modal-wrap`)}>
+            <div className={classNames(`${prefixCls}-modal-left`)}>
+              <div className={classNames(`${prefixCls}-modal-select-wrap`)}>
+                <Input
+                  className={classNames(`${prefixCls}-modal-search`)}
+                  placeholder={placeholder}
+                  bordered={false}
+                  prefix={searchPrefix}
+                  onChange={onSearch}
+                  onPressEnter={onSearch}
+                />
+                <div className={classNames(`${prefixCls}-modal-target`)}>
+                  <div>指标：</div>
+                  <Radio.Group onChange={onRadioChange} value={targetValue}>
+                    <Radio.Button value="emphasis">重点指标</Radio.Button>
+                    <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 className={classNames(`${prefixCls}-modal-option-wrap`)}>
+                {!quotaList.length && <Empty />}
+                <Row gutter={[0, 6]}>
+                  {!!quotaList.length &&
+                    quotaList.map((item) => (
+                      <Col span={8} key={item.key}>
+                        <Checkbox
+                          value={item.title}
+                          checked={item.checked}
+                          disabled={
+                            (selectData.length > maximum || selectData.length === maximum) &&
+                            !item.checked
+                          }
+                          onChange={(e) => handleCheckboxChange(e, item)}
+                        >
+                          {item.title}
+                        </Checkbox>
+                      </Col>
+                    ))}
+                </Row>
+              </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>
+        </Modal>
+      )}
+    </div>
+  );
+};
+
+QuotaSelect.defaultProps = {
+  buttonProps: {},
+  width: 900,
+  title: '选择显示字段',
+  cancelText: '取消选择',
+  okText: '确定',
+  placeholder: '搜索关键词',
+  searchPrefix: <SearchOutlined />,
+  maximum: 0,
+  user: null,
+  pointType: 'cardPoints',
+  deviceList: [],
+  confList: [],
+  treeProps: {},
+  quotaListService: () => {},
+  updateDeviceConfService: () => {},
+  onSelect: () => {},
+  onModalCancel: () => {},
+  onModalOk: () => {},
+  onModalClose: () => {},
+};
+
+QuotaSelect.propTypes = {
+  buttonProps: PropTypes.object,
+  width: PropTypes.number,
+  title: PropTypes.string,
+  cancelText: PropTypes.string,
+  okText: PropTypes.string,
+  placeholder: PropTypes.string,
+  searchPrefix: PropTypes.node,
+  maximum: PropTypes.number,
+  user: PropTypes.string,
+  pointType: PropTypes.string,
+  deviceList: PropTypes.array,
+  confList: PropTypes.array,
+  treeProps: PropTypes.object,
+  quotaListService: PropTypes.func,
+  updateDeviceConfService: PropTypes.func,
+  onSelect: PropTypes.func,
+  onModalCancel: PropTypes.func,
+  onModalOk: PropTypes.func,
+  onModalClose: PropTypes.func,
+};
+
+export default QuotaSelect;

packages/extend-components/EC-QuotaSelect/src/index.less

+@import (reference) '../../../../node_modules/antd/es/style/themes/default';
+@ec-quota-select-prefix-cls: ~'@{ant-prefix}-ec-quota-select';
+
+.@{ec-quota-select-prefix-cls} {
+  &-btn-wrap {
+    overflow: auto;
+    white-space: nowrap;
+
+    button {
+      margin-right: 20px;
+    }
+  }
+}
+
+.@{ec-quota-select-prefix-cls}-modal {
+  &-wrap {
+    display: flex;
+    height: 500px;
+  }
+
+  &-left {
+    flex: 7;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+
+    .empty {
+      margin: 128px 0;
+    }
+  }
+
+  &-right {
+    flex: 3;
+  }
+
+  &-select-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px 0 0;
+  }
+
+  &-search {
+    width: 160px;
+    background-color: #eef1f9;
+    border-radius: 15px;
+
+    .ant-input-prefix {
+      color: #5a6c8a;
+    }
+  }
+
+  &-search:hover {
+    background-color: #eef1f9;
+  }
+
+  &-target {
+    display: flex;
+    align-items: center;
+    margin: 0 10px 0 10px;
+    white-space: nowrap;
+  }
+
+  &-select {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    span {
+      margin-right: 6px;
+      color: #52c41a;
+      font-size: 16px;
+    }
+  }
+
+  &-select.warning {
+    color: #f0495d;
+
+    span {
+      color: #f0495d;
+    }
+  }
+
+  &-option-wrap {
+    height: calc(100% - 52px);
+    margin-top: 20px;
+    overflow-y: auto;
+  }
+
+  &-number {
+    margin-bottom: 10px;
+    padding: 4px 0 10px 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  &-tree {
+    height: calc(100% - 47px);
+    overflow-y: auto;
+
+    .ant-tree-treenode,
+    .ant-tree-node-content-wrapper {
+      width: 100%;
+    }
+  }
+
+  &-tree-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+}