@bit-sun/business-component 2.2.49 → 2.3.0

package/src/components/Functional/EllipsisTooltip/index.d.ts

@@ -0,0 +1,5 @@
+export class EllipsisTooltip {
+  maxLength: number;
+  title: string;
+  style?: any
+}

package/src/components/Functional/EllipsisTooltip/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+
+class EllipsisTooltip extends React.Component {
+  state = {
+    visible: false,
+  };
+
+  handleVisibleChange = (visible) => {
+    if (this.props.title.length > this.props.maxLength) {
+      this.setState({
+        visible,
+      });
+    }
+  };
+
+  render() {
+    const style = {
+      ...this.props.style,
+    };
+
+    return (
+      <Tooltip
+        visible={this.state.visible}
+        onVisibleChange={this.handleVisibleChange}
+        title={this.props.title}
+      >
+        <div className="customEllipse" style={style}>
+          {this.props.showInfo && this.props.showInfo ||
+          (this.props.title.length > this.props.maxLength ? `${this.props.title.substring(0, this.props.maxLength)}...` : this.props.title)}
+        </div>
+      </Tooltip>
+    );
+  }
+}
+export default EllipsisTooltip;

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

@@ -0,0 +1,30 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 功能组件
+  order: 0
+title: 字符超长处理组件
+order: 6
+---
+
+## EllipsisTooltip
+
+字符超长处理组件
+
+```tsx
+import React, { useRef } from 'react';
+import { EllipsisTooltip } from '../../../index';
+
+export default () => {
+  
+  return (
+    <div>
+      <EllipsisTooltip maxLength={10} title={'一二三四五六七八九十十一十二十三'} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/Functional/ExportFunctions/ExportIcon/index.md

@@ -1,37 +1,37 @@
----
-title: 导出按钮
-order: 5
-nav:
-  title: 组件
-  order: 1
-group:
-  path: /components/functional
-  order: 0
-  title: 功能组件
----
-
-## ExportIcon
-
-导出按钮demo
-
-```tsx
-import React, { useState, useRef } from 'react';
-import {ExportIcon}  from '../../../../index';
-
-
-
-export default () => {
-	
-	const tableRef = useRef()
-
-  return (
-    <div>
-      <ExportIcon request={{url:'abc'}} tableRef={tableRef}/>
-    </div>
-  );
-};
-```
-
-<API></API>
-
-More skills for writing demo: https://d.umijs.org/guide/demo-principle
+---
+title: 导出按钮
+order: 5
+nav:
+  title: 组件
+  order: 1
+group:
+  path: /components/functional
+  order: 0
+  title: 功能组件
+---
+
+## ExportIcon
+
+导出按钮demo
+
+```tsx
+import React, { useState, useRef } from 'react';
+import {ExportIcon}  from '../../../../index';
+
+
+
+export default () => {
+	
+	const tableRef = useRef()
+
+  return (
+    <div>
+      <ExportIcon request={{url:'abc'}} tableRef={tableRef}/>
+    </div>
+  );
+};
+```
+
+<API></API>
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/Functional/ExportFunctions/ExportIcon/index.tsx

@@ -1,59 +1,59 @@
-// @ts-nocheck
-import React, {Ref} from 'react'
-import {message, Popconfirm, Tooltip} from "antd";
-import axios from 'axios'
-import exportlogo from '../../../../assets/exportlogo.png'
-import {omit} from 'lodash'
-interface exportIconType{
-	/** others选填，使用axios发请求，*/
-	request:{
-		url: string,
-		params: Function | Object,
-		others?: Object
-	},
-	/** BsSulaQueryTable的tableRef*/
-	tableRef: any,
-}
-
-const ExportIcon = ({request, tableRef}: exportIconType) => {
-	const {url, params, others} = request
-
-	return (
-		<div style={{ cursor: 'pointer' }}>
-				<Tooltip title="导出数据">
-					<img width={32} src={exportlogo} onClick={() =>{
-						const convertedParams = tableRef?.current?.getExportParams()
-						let requestData: any
-
-						if(typeof params === 'function'){
-							requestData = {...omit(params(convertedParams),'selectedRows')}
-						}else if(typeof params === 'object'){
-							requestData = {...params}
-						}
-						if(!params){
-							requestData = omit(convertedParams, 'selectedRows')
-						}
-
-						requestData['qp-id-in'] = convertedParams?.selectedRows?.map((d: any) => d.id)?.join(',')
-
-						axios({
-							url,
-							method:'POST',
-							data:requestData,
-							...others,
-						})
-							.then((result: any) => {
-								result = result.data;
-								if (result.code !== '000000') {
-									message.error(result?.msg);
-									return;
-								}
-								message.success('任务已排入导出队列')
-							})
-					}} />
-				</Tooltip>
-		</div>
-	)
-}
-
-export default ExportIcon
+// @ts-nocheck
+import React, {Ref} from 'react'
+import {message, Popconfirm, Tooltip} from "antd";
+import axios from 'axios'
+import exportlogo from '../../../../assets/exportlogo.png'
+import {omit} from 'lodash'
+interface exportIconType{
+	/** others选填，使用axios发请求，*/
+	request:{
+		url: string,
+		params: Function | Object,
+		others?: Object
+	},
+	/** BsSulaQueryTable的tableRef*/
+	tableRef: any,
+}
+
+const ExportIcon = ({request, tableRef}: exportIconType) => {
+	const {url, params, others} = request
+
+	return (
+		<div style={{ cursor: 'pointer' }}>
+				<Tooltip title="导出数据">
+					<img width={32} src={exportlogo} onClick={() =>{
+						const convertedParams = tableRef?.current?.getExportParams()
+						let requestData: any
+
+						if(typeof params === 'function'){
+							requestData = {...omit(params(convertedParams),'selectedRows')}
+						}else if(typeof params === 'object'){
+							requestData = {...params}
+						}
+						if(!params){
+							requestData = omit(convertedParams, 'selectedRows')
+						}
+
+						requestData['qp-id-in'] = convertedParams?.selectedRows?.map((d: any) => d.id)?.join(',')
+
+						axios({
+							url,
+							method:'POST',
+							data:requestData,
+							...others,
+						})
+							.then((result: any) => {
+								result = result.data;
+								if (result.code !== '000000') {
+									message.error(result?.msg);
+									return;
+								}
+								message.success('任务已排入导出队列')
+							})
+					}} />
+				</Tooltip>
+		</div>
+	)
+}
+
+export default ExportIcon

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;