@bit-sun/business-component 4.0.0-alpha.3 → 4.0.2

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

@@ -0,0 +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

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

@@ -0,0 +1,65 @@
+// @ts-nocheck
+import React, {Ref} from 'react'
+import {message, Popconfirm, Tooltip} from "antd";
+import request from '@/utils/request';
+import exportlogo from '../../../../assets/exportlogo.png'
+import {omit} from 'lodash'
+import { judgeIsRequestError } from '@/utils/requestUtils';
+interface exportIconType{
+	/** others选填，使用axios发请求，*/
+	request:{
+		url: string,
+		params: Function | Object,
+		others?: Object
+	},
+	/** BsSulaQueryTable的tableRef*/
+	tableRef: any,
+}
+
+const ExportIcon = ({request:exportRequest, tableRef, allowSelect, columnsRowKey}: exportIconType) => {
+	const {url, params, others} = exportRequest
+
+	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')}
+              requestData.pageSize=100000
+						}else if(typeof params === 'object'){
+							requestData = {...params}
+						}
+						if(!params){
+							requestData = omit(convertedParams, 'selectedRows')
+              requestData.pageSize=100000
+						}
+
+            if (allowSelect) {
+              let selectKey = allowSelect?.key || columnsRowKey;
+              requestData[`qp-${selectKey}-in`] = convertedParams?.selectedRows?.map((d: any) => d[selectKey])?.join(',')
+            }
+
+						request({
+							url,
+							method:'POST',
+							data:requestData,
+							...others,
+						})
+							.then((result: any) => {
+								result = result.data;
+								if (judgeIsRequestError(result)) {
+									message.error(result?.msg);
+									return;
+								}
+								message.success('任务已排入导出队列')
+							})
+					}} />
+				</Tooltip>
+		</div>
+	)
+}
+
+export default ExportIcon

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

@@ -0,0 +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;
+  }
+}

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

@@ -0,0 +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

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

@@ -0,0 +1,129 @@
+/*
+ * @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,onPressEnter }) => {
+  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="请输入（查询多个值请用 ; 或 , 分割）"
+          onPressEnter={()=>onPressEnter?.()}
+        />
+        <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

@@ -0,0 +1,121 @@
+.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;
+    }
+  }
+}
+
+.searchSelectSpin{
+  &>div{
+    height: 300px !important;
+  }
+}

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

@@ -0,0 +1,141 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 功能组件
+  order: 0
+title: 档案选择器
+order: 3
+---
+
+## SearchSelect
+
+Demo:
+
+```tsx
+import React, { useState } from 'react';
+import { SearchSelect } from '../../../index';
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const props = {
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    requestConfig: {
+      url: `/bop/api/supplier`,
+      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
+      otherParams: {}, // 默认参数
+      // mappingTextField: 'name',
+      // mappingValueField: 'code',
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    }
+  };
+  const DictionaryUC000013 = [{ text: '共享', value: '10' }, { text: '私有', value: '20' }]
+  const modalTableProps = {
+    modalTableTitle: '选择供应商',
+    tableSearchForm: [
+      { name: 'qp-name-like', label: '客户名称' }, // field: { type: 'input', props: { placeholder: '8888'}}
+      { name: 'qp-code-like', label: '客户编码' },
+      {
+        name: 'qp-conglomerateCode-in', type: 'select', label: '归属集团', field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        },
+        initialSource: [{ text: '英伦宝贝儿童用品有限公司', value: 'A0001' }]
+      },
+      {
+        name: 'qp-accountingCode-in', type: 'select', label: '归属核算主体', field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        },
+        initialSource: [{ text: '上海哲雄母婴用品有限公司', value: 'F002' }, { text: '上海英伦宝贝儿童用品有限公司', value: 'F001' }]
+      },
+      {
+        name: 'qp-companyCode-in', type: 'select', label: '归属法人公司', field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        },
+        initialSource: [{ text: '上海哲雄母婴用品有限公司', value: 'F002' }, { text: '上海英伦宝贝儿童用品有限公司', value: 'F001' }]
+      },
+      { name: 'qp-sharingType-eq', type: 'select', label: '共享类型', initialSource: DictionaryUC000013 }, // 页面可以直接使用getDictionarySource('UC000013')
+    ],
+    tableColumns: [
+      {
+        title: '客户编码',
+        dataIndex: 'code',
+      },
+      {
+        title: '客户名称',
+        dataIndex: 'name',
+      },
+      {
+        title: '归属集团',
+        dataIndex: 'conglomerateName',
+      },
+      {
+        title: '归属法人公司',
+        dataIndex: 'legalCompanyName',
+      },
+      {
+        title: '归属核算主体',
+        dataIndex: 'accountingName',
+      },
+      {
+        title: '共享类型',
+        dataIndex: 'sharingType',
+        render: (text) => DictionaryUC000013?.find((i) => i.value === text)?.text, // getDictionaryTextByValue('UC000013', text)
+      },
+    ]
+  }
+
+  return (
+    <div>
+      <SearchSelect
+        {...props}
+        modalTableProps={modalTableProps}
+      />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle