@bit-sun/business-component 2.0.12 → 2.0.13

package/src/components/Functional/QueryMutipleInput/index.less

@@ -1,37 +1,37 @@
-.query_input {
-  &_show {
-    display: flex;
-  }
-
-  &_expand_button {
-    position: relative;
-    width: 30px;
-    color: #ffffff;
-    cursor: pointer;
-
-    span {
-      position: absolute;
-      height: 20px;
-      line-height: 14px;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  &_wrapper {
-    display: flex;
-
-    &_left {
-      width: 100px;
-    }
-
-    &_right {
-      color: #9e9e9e;
-    }
-  }
-
-  &_textArea {
-    margin-top: 15px;
-  }
-}
+.query_input {
+  &_show {
+    display: flex;
+  }
+
+  &_expand_button {
+    position: relative;
+    width: 30px;
+    color: #ffffff;
+    cursor: pointer;
+
+    span {
+      position: absolute;
+      height: 20px;
+      line-height: 14px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &_wrapper {
+    display: flex;
+
+    &_left {
+      width: 100px;
+    }
+
+    &_right {
+      color: #9e9e9e;
+    }
+  }
+
+  &_textArea {
+    margin-top: 15px;
+  }
+}

package/src/components/Functional/QueryMutipleInput/index.md

@@ -1,33 +1,33 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 功能组件
-  order: 0
-title: 批量查询组件
-order: 2
----
-
-## QueryMutipleInput
-
-Demo:
-
-```tsx
-import React, { useRef } from 'react';
-import { QueryMutipleInput } from '../../../index';
-
-export default () => {
-  const handleOnChange = (value) => {
-    console.log(value);
-  };
-
-  return (
-    <div>
-      <QueryMutipleInput onValueChange={handleOnChange} />
-    </div>
-  );
-};
-```
-
-More skills for writing demo: https://d.umijs.org/guide/demo-principle
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 功能组件
+  order: 0
+title: 批量查询组件
+order: 2
+---
+
+## QueryMutipleInput
+
+Demo:
+
+```tsx
+import React, { useRef } from 'react';
+import { QueryMutipleInput } from '../../../index';
+
+export default () => {
+  const handleOnChange = (value) => {
+    console.log(value);
+  };
+
+  return (
+    <div>
+      <QueryMutipleInput onValueChange={handleOnChange} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/Functional/QueryMutipleInput/index.tsx

@@ -1,128 +1,128 @@
-/*
- * @Description:
- * @Author: rodchen
- * @Date: 2021-12-01 10:52:08
- * @LastEditTime: 2021-12-29 19:14:56
- * @LastEditors: rodchen
- */
-// @ts-nocheck
-import React, { useState, useEffect } from 'react';
-import { useDebounceFn } from 'ahooks';
-import { Input, Button, Modal } from 'antd';
-import './index.less';
-
-const QueryMutipleInput = ({ onValueChange }) => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [value, setValue] = useState('');
-  const [popvalue, setPopValue] = useState('');
-  const { run } = useDebounceFn(
-    () => {
-      formaData(value);
-    },
-    {
-      wait: 1000,
-    },
-  );
-
-  useEffect(() => {
-    setPopValue(value);
-    onValueChange(value);
-  }, [value]);
-
-  const showModal = () => {
-    setIsModalVisible(true);
-  };
-
-  const handleOk = () => {
-    formaData(popvalue);
-    setIsModalVisible(false);
-  };
-
-  const formaData = (value) => {
-    let formatValue = ToCDB(value)
-      .split(/[/\n/\s,;]/)
-      .filter((item) => item)
-      .join(',');
-    setValue(formatValue);
-  };
-
-  const handleCancel = () => {
-    setIsModalVisible(false);
-  };
-
-  const outerChange = (e) => {
-    setValue(e.target.value);
-    run();
-  };
-
-  const onChange = (e) => {
-    setPopValue(e.target.value);
-  };
-
-  return (
-    <div className={'query_input'}>
-      <div className="query_input_show">
-        <Input
-          value={value}
-          onChange={outerChange}
-          onBlur={(e) => {
-            formaData(e.target.value);
-          }}
-          onPaste={(e) => {
-            formaData(e.clipboardData.getData('text'));
-            e.preventDefault();
-          }}
-          style={{ width: 'calc(100% - 30px)' }}
-          placeholder="请输入（查询多个值请用 ; 或 , 分割）"
-        />
-        <Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">...</Button>
-      </div>
-      <Modal
-        width={600}
-        title="多值录入"
-        visible={isModalVisible}
-        onOk={handleOk}
-        onCancel={handleCancel}
-        footer={[
-          <Button key="back" onClick={handleCancel}>
-            取消
-          </Button>,
-          <Button key="submit" type="primary" onClick={handleOk}>
-            录入
-          </Button>,
-        ]}
-      >
-        <div className={'query_input_wrapper'}>
-          <div className={'query_input_wrapper_left'}>录入区：</div>
-          <div className={'query_input_wrapper_right'}>
-            <div>
-              如需同时使用多个值进行查询，请使用逗号、分号、空格或换行进行值的分隔，中英文格式的符号均支持
-            </div>
-            <div className={'query_input_textArea'}>
-              <Input.TextArea
-                value={popvalue}
-                onChange={onChange}
-                rows={6}
-                showCount
-              />
-            </div>
-          </div>
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-function ToCDB(str) {
-  var tmp = '';
-  for (var i = 0; i < str.length; i++) {
-    if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
-      tmp += String.fromCharCode(str.charCodeAt(i) - 65248);
-    } else {
-      tmp += String.fromCharCode(str.charCodeAt(i));
-    }
-  }
-  return tmp;
-}
-
-export default QueryMutipleInput;
+/*
+ * @Description:
+ * @Author: rodchen
+ * @Date: 2021-12-01 10:52:08
+ * @LastEditTime: 2021-12-29 19:14:56
+ * @LastEditors: rodchen
+ */
+// @ts-nocheck
+import React, { useState, useEffect } from 'react';
+import { useDebounceFn } from 'ahooks';
+import { Input, Button, Modal } from 'antd';
+import './index.less';
+
+const QueryMutipleInput = ({ onValueChange }) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [value, setValue] = useState('');
+  const [popvalue, setPopValue] = useState('');
+  const { run } = useDebounceFn(
+    () => {
+      formaData(value);
+    },
+    {
+      wait: 1000,
+    },
+  );
+
+  useEffect(() => {
+    setPopValue(value);
+    onValueChange(value);
+  }, [value]);
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleOk = () => {
+    formaData(popvalue);
+    setIsModalVisible(false);
+  };
+
+  const formaData = (value) => {
+    let formatValue = ToCDB(value)
+      .split(/[/\n/\s,;]/)
+      .filter((item) => item)
+      .join(',');
+    setValue(formatValue);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const outerChange = (e) => {
+    setValue(e.target.value);
+    run();
+  };
+
+  const onChange = (e) => {
+    setPopValue(e.target.value);
+  };
+
+  return (
+    <div className={'query_input'}>
+      <div className="query_input_show">
+        <Input
+          value={value}
+          onChange={outerChange}
+          onBlur={(e) => {
+            formaData(e.target.value);
+          }}
+          onPaste={(e) => {
+            formaData(e.clipboardData.getData('text'));
+            e.preventDefault();
+          }}
+          style={{ width: 'calc(100% - 30px)' }}
+          placeholder="请输入（查询多个值请用 ; 或 , 分割）"
+        />
+        <Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">...</Button>
+      </div>
+      <Modal
+        width={600}
+        title="多值录入"
+        visible={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        footer={[
+          <Button key="back" onClick={handleCancel}>
+            取消
+          </Button>,
+          <Button key="submit" type="primary" onClick={handleOk}>
+            录入
+          </Button>,
+        ]}
+      >
+        <div className={'query_input_wrapper'}>
+          <div className={'query_input_wrapper_left'}>录入区：</div>
+          <div className={'query_input_wrapper_right'}>
+            <div>
+              如需同时使用多个值进行查询，请使用逗号、分号、空格或换行进行值的分隔，中英文格式的符号均支持
+            </div>
+            <div className={'query_input_textArea'}>
+              <Input.TextArea
+                value={popvalue}
+                onChange={onChange}
+                rows={6}
+                showCount
+              />
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+function ToCDB(str) {
+  var tmp = '';
+  for (var i = 0; i < str.length; i++) {
+    if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
+      tmp += String.fromCharCode(str.charCodeAt(i) - 65248);
+    } else {
+      tmp += String.fromCharCode(str.charCodeAt(i));
+    }
+  }
+  return tmp;
+}
+
+export default QueryMutipleInput;

package/src/components/Functional/SearchSelect/index.less

@@ -1,115 +1,115 @@
-.search_select {
-  &_show {
-    display: flex;
-  }
-
-  &_expand_button {
-    position: relative;
-    width: 30px;
-    color: #ffffff;
-    cursor: pointer;
-
-    span {
-      position: absolute;
-      height: 20px;
-      line-height: 14px;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  &_wrapper {
-    position: relative;
-    display: flex;
-    min-height: 60vh;
-    max-height: 60vh;
-    overflow: hidden;
-    font-size: 14px;
-
-    &_click_flag {
-      position: absolute;
-      z-index: 10;
-      &_arrow {
-        transform: rotate(0deg);
-        transition: transform 0.5s;
-      }
-      &_arrow_1 {
-        transform: rotate(-180deg);
-        transition: transform 0.5s;
-      }
-    }
-
-    &_left {
-      width: 28%;
-      overflow-y: hidden;
-      //background-color: yellow;
-      transition: all 0.3s;
-      margin-left: 20px;
-    }
-
-    &_left1 {
-      width: 0;
-      height: 0;
-      transition: all 0.3s;
-      display: none;
-    }
-
-    &_right {
-      width: 70%;
-      margin-left: 1%;
-      //background-color: pink;
-    }
-
-    &_right1 {
-      width: 100%;
-      margin-left: 20px;
-      //background-color: green;
-    }
-
-    &_right, &_right1 {
-      overflow-x: auto;
-    }
-
-    .select_list_columns {
-      width: 100%;
-      height: calc(60vh - 60px);
-      overflow-y: auto;
-      border: 1px solid #d8d8d8;
-      &_tips {
-        background: #eee;
-        padding: 6px 20px;
-        margin-bottom: 10px;
-      }
-      &_formItems {
-        padding: 0 20px;
-      }
-    }
-    .select_list_searchButton {
-      display: flex;
-      margin: 10px 0px;
-      justify-content: flex-end;
-    }
-
-    .select_list_button_space {
-      margin-right: 10px;
-    }
-
-    .select_list_selectTips {
-      display: flex;
-      justify-content: space-between;
-      height: 34px;
-      line-height: 32px;
-      background-color: #eee;
-      margin-bottom: 10px;
-      padding: 0 12px;
-    }
-
-    .select_list_selectAll {
-      position: relative;
-      top: -40px;
-      left: 20px;
-      width: 160px;
-    }
-  }
-}
+.search_select {
+  &_show {
+    display: flex;
+  }
+
+  &_expand_button {
+    position: relative;
+    width: 30px;
+    color: #ffffff;
+    cursor: pointer;
+
+    span {
+      position: absolute;
+      height: 20px;
+      line-height: 14px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &_wrapper {
+    position: relative;
+    display: flex;
+    min-height: 60vh;
+    max-height: 60vh;
+    overflow: hidden;
+    font-size: 14px;
+
+    &_click_flag {
+      position: absolute;
+      z-index: 10;
+      &_arrow {
+        transform: rotate(0deg);
+        transition: transform 0.5s;
+      }
+      &_arrow_1 {
+        transform: rotate(-180deg);
+        transition: transform 0.5s;
+      }
+    }
+
+    &_left {
+      width: 28%;
+      overflow-y: hidden;
+      //background-color: yellow;
+      transition: all 0.3s;
+      margin-left: 20px;
+    }
+
+    &_left1 {
+      width: 0;
+      height: 0;
+      transition: all 0.3s;
+      display: none;
+    }
+
+    &_right {
+      width: 70%;
+      margin-left: 1%;
+      //background-color: pink;
+    }
+
+    &_right1 {
+      width: 100%;
+      margin-left: 20px;
+      //background-color: green;
+    }
+
+    &_right, &_right1 {
+      overflow-x: auto;
+    }
+
+    .select_list_columns {
+      width: 100%;
+      height: calc(60vh - 60px);
+      overflow-y: auto;
+      border: 1px solid #d8d8d8;
+      &_tips {
+        background: #eee;
+        padding: 6px 20px;
+        margin-bottom: 10px;
+      }
+      &_formItems {
+        padding: 0 20px;
+      }
+    }
+    .select_list_searchButton {
+      display: flex;
+      margin: 10px 0px;
+      justify-content: flex-end;
+    }
+
+    .select_list_button_space {
+      margin-right: 10px;
+    }
+
+    .select_list_selectTips {
+      display: flex;
+      justify-content: space-between;
+      height: 34px;
+      line-height: 32px;
+      background-color: #eee;
+      margin-bottom: 10px;
+      padding: 0 12px;
+    }
+
+    .select_list_selectAll {
+      position: relative;
+      top: -40px;
+      left: 20px;
+      width: 160px;
+    }
+  }
+}