@bit-sun/business-component 1.1.21 → 1.1.24

package/src/components/{SearchSelect/business/BusinessSearchSelect.tsx → Business/SearchSelect/index.tsx}

@@ -1,17 +1,18 @@
 import React from 'react';
 import { commonFun } from './BusinessUtils';
-import SearchSelect from '../index';
+import SearchSelect from '@/components/Functional/SearchSelect';
 
 
 const  BusinessSearchSelect = (props: any) => {
   const businessType = props?.selectBusinessType || 'supplier';
   const prefixUrl = props?.prefixUrl || { selectPrefix: '/bop/api', formSelectFix: '/bop/api' };
 
-  const { requestConfig, modalTableProps } = commonFun(businessType, prefixUrl);
+  const { requestConfig, modalTableProps, needModalTable } = commonFun(businessType, prefixUrl);
 
   const currentProps = {
     requestConfig,
     ...props,
+    needModalTable,
     modalTableProps
   }
 

package/src/components/Business/SearchSelect/utils.ts

@@ -0,0 +1,71 @@
+import axios from 'axios';
+import { message } from 'antd';
+import { stringify } from 'querystring';
+
+const getDicData = (dicCode: string) => {
+  let dicData = {};
+  let dictionaryData;
+  if (!dictionaryData) {
+    let storageDic = localStorage.getItem('dicData')
+      ? JSON.parse(localStorage.getItem('dicData') || '{}')
+      : {};
+    dicData = storageDic[dicCode];
+  } else {
+    dicData = dictionaryData[dicCode];
+  }
+  if (!dicData || !dicData.length) {
+    // throw new Error(`当前没有${dicCode}字典值`);
+  }
+  return dicData
+}
+
+const getDictionarySource = (dicCode: string, needConvertInterger = false) => {
+  let dicData = getDicData(dicCode);
+
+  try {
+    if (needConvertInterger) {
+      dicData = dicData.map((item: { text: string; value: string }) => ({
+        ...item,
+        value: parseFloat(item.value),
+      }));
+    }
+  } catch (e) {}
+  return dicData;
+};
+
+const getDictionaryTextByValue = (dicCode: string, value: string | number) => {
+  let dicData = getDicData(dicCode);
+
+  if (value === undefined) return '';
+
+  const dicItemArray = dicData?.filter(
+    (item: { value: string }) => item.value === value.toString(),
+  );
+
+  if (!dicItemArray?.length) {
+    // throw new Error(`当前${dicCode}字典值合没有${value}的数据`)
+    return value;
+  }
+
+  return dicItemArray[0].text;
+};
+
+const loadSelectSource = (url: string, params?: any) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .get(`${url}?${stringify(params)}`)
+      .then((result: any) => {
+        result = result.data;
+        if (result.status !== '0') {
+          message.error(result.msg);
+          return;
+        }
+        resolve(result);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  })
+};
+
+export { getDictionarySource, getDictionaryTextByValue, loadSelectSource }

package/src/components/{DataValidation → Functional/DataValidation}/index.md

@@ -3,7 +3,7 @@ nav:
   title: '组件'
   order: 1
 group:
-  title: 组件
+  title: 功能组件
   order: 0
 title: 数据校验
 order: 1
@@ -15,7 +15,7 @@ Demo:
 
 ```tsx
 import React, { useRef } from 'react';
-import { DataValidation } from '../../index';
+import { DataValidation } from '../../../index';
 
 export default () => {
   let dataValidationRef: DataValidation = useRef();
@@ -25,7 +25,7 @@ export default () => {
       <DataValidation
         // columns={['skuCode', 'quantity', 'price']}
         columns={["skuCode", "quantity", "price"]}  // 需要哪些列展示，以及展示的顺序
-          validDataUrl="http://test.i-baby.net/wms-ops/recordDetailImport/check" // 校验的接口url
+        validDataUrl="/wms-ops/recordDetailImport/check" // 校验的接口url
         onRef={(ref) => {
           dataValidationRef = ref;
         }}

package/src/components/{DataValidation → Functional/DataValidation}/index.tsx

@@ -373,7 +373,7 @@ class DataValidation extends React.Component {
   getData = () => {
     console.time();
     let sheetData = luckysheet.getSheetData();
-    let data = sheetData
+    let data = JSON.parse(JSON.stringify(sheetData))
       .filter((item) => item[0])
       .map((item) => {
         let obj = {};

package/src/components/{QueryMutipleInput → Functional/QueryMutipleInput}/index.md

@@ -3,10 +3,10 @@ nav:
   title: '组件'
   order: 1
 group:
-  title: 组件
+  title: 功能组件
   order: 0
 title: 批量查询组件
-order: 1
+order: 2
 ---
 
 ## QueryMutipleInput
@@ -15,7 +15,7 @@ Demo:
 
 ```tsx
 import React, { useRef } from 'react';
-import { QueryMutipleInput } from '../../index';
+import { QueryMutipleInput } from '../../../index';
 
 export default () => {
   const handleOnChange = (value) => {

package/src/components/{SearchSelect → Functional/SearchSelect}/index.md

@@ -3,10 +3,10 @@ nav:
   title: '组件'
   order: 1
 group:
-  title: 组件
+  title: 功能组件
   order: 0
 title: 档案选择器
-order: 2
+order: 3
 ---
 
 ## SearchSelect
@@ -15,19 +15,19 @@ Demo:
 
 ```tsx
 import React, { useState } from 'react';
-import {SearchSelect} from '../../index.ts';
+import { SearchSelect } from '../../../index';
 
 export default () => {
   const selectProps = {
-      // mode: 'multiple',
-      // maxTagCount: 1,
+    // mode: 'multiple',
+    // maxTagCount: 1,
   }
   const [value, setValue] = useState(selectProps?.mode ? [] : null);
   const props = {
     value,
     // labelInValue: true, // 非必填 默认为false
     requestConfig: {
-      url: `http://test.i-baby.net/bop/api/supplier`,
+      url: `/bop/api/supplier`,
       filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
       otherParams: {}, // 默认参数
       // mappingTextField: 'name',
@@ -42,10 +42,11 @@ export default () => {
   const DictionaryUC000013 = [{ text: '共享', value: '10' }, { text: '私有', value: '20' }]
   const modalTableProps = {
     modalTableTitle: '选择供应商',
-    tableSearchForm:[
+    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: {
+      {
+        name: 'qp-conglomerateCode-in', type: 'select', label: '归属集团', field: {
           type: 'select',
           props: {
             mode: 'multiple',
@@ -61,7 +62,8 @@ export default () => {
         },
         initialSource: [{ text: '英伦宝贝儿童用品有限公司', value: 'A0001' }]
       },
-      { name: 'qp-accountingCode-in', type: 'select', label: '归属核算主体', field: {
+      {
+        name: 'qp-accountingCode-in', type: 'select', label: '归属核算主体', field: {
           type: 'select',
           props: {
             mode: 'multiple',
@@ -77,7 +79,8 @@ export default () => {
         },
         initialSource: [{ text: '上海哲雄母婴用品有限公司', value: 'F002' }, { text: '上海英伦宝贝儿童用品有限公司', value: 'F001' }]
       },
-      { name: 'qp-companyCode-in', type: 'select', label: '归属法人公司', field: {
+      {
+        name: 'qp-companyCode-in', type: 'select', label: '归属法人公司', field: {
           type: 'select',
           props: {
             mode: 'multiple',
@@ -123,7 +126,7 @@ export default () => {
       },
     ]
   }
-  
+
   return (
     <div>
       <SearchSelect

package/src/components/{SearchSelect → Functional/SearchSelect}/index.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { useState, useEffect } from 'react';
 import { useDebounceFn } from 'ahooks';
-import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox, TreeSelect } from 'antd';
+import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox, TreeSelect, Tooltip, Tag } from 'antd';
 import { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import { stringify } from 'querystring';
@@ -20,6 +20,7 @@ const SearchSelect = (props: any) => {
     requestConfig,
     ctx,
     sourceName,
+    needModalTable=true,
   } = props;
   const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField='name', mappingTextShowKeyField,mappingValueField='code' } = requestConfig || {};
   const resultSourceKey = sourceName || requestConfig?.sourceName || 'supplierCode'
@@ -78,6 +79,7 @@ const SearchSelect = (props: any) => {
   const [checkedAll, setCheckedAll] = useState(false)
   const [indeterminate, setIndeterminate] = useState(false)
   const [tableFormParams, setTableFormParams] = useState({});
+  const [tooltipVisible, setTooltipVisible] = useState(false);
 
   // 获取数据源 （type: 1下拉框 2弹框  不传值默认为下拉框）
   const getData = (params={}, type=1) => {
@@ -96,6 +98,95 @@ const SearchSelect = (props: any) => {
       });
     }
 
+    // 数组对象处理,对带有特殊标记的name进行处理
+    for (const key in params) {
+      if (Object.prototype.hasOwnProperty.call(params, key)) {
+        const element = params[key];
+        if (element && key.indexOf('*number*') >= 0) {
+          const dataParams = key.split('*number*');
+          dataParams.forEach((value, index) => {
+            params[value] = element[index];
+          });
+          delete params[key];
+        } else if (element && key.indexOf('*address*') >= 0) {
+          const dataParams = key.split('*address*');
+          dataParams.forEach((value, index) => {
+            params[value] = element.PCDCode[index];
+          });
+          delete params[key];
+        } else if (element && key.indexOf('*costType*') >= 0) {
+          const dataParams = key.split('*costType*');
+          // eslint-disable-next-line prefer-destructuring
+          params[dataParams[0]] = element[1];
+          delete params[key];
+        } else if (element && key.indexOf('*fullDate*') >= 0) {
+          const dataParams = key.split('*fullDate*');
+          dataParams.forEach((value, index) => {
+            if (index === 0) {
+              params[value] = moment(element[index])
+                .millisecond(0)
+                .second(0)
+                .minute(0)
+                .hour(0)
+                .format('YYYY-MM-DD HH:mm:ss');
+            } else {
+              params[value] = moment(element[index])
+                .millisecond(59)
+                .second(59)
+                .minute(59)
+                .hour(23)
+                .format('YYYY-MM-DD HH:mm:ss');
+            }
+          });
+          delete params[key];
+        } else if (typeof element === 'boolean' && key.indexOf('*checkBox*') >= 0) {
+          const dataParams = key.split('*checkBox*');
+          if(element){
+            params[dataParams[0]] = 0
+          }
+          delete params[key];
+        }else if (element && key.indexOf('*cascader*') >= 0) {
+          const dataParams = key.split('*cascader*');
+          params[dataParams[0]] = element[element.length -1]
+          delete params[key];
+        } else if (element && key.indexOf('*date*') >= 0) {
+          const dataParams = key.split('*date*')
+          dataParams.forEach((value, index) => {
+            if (index === 0) {
+              params[value] = moment(element[index])
+                .format('YYYY-MM-DD');
+            } else {
+              params[value] = moment(element[index])
+                .format('YYYY-MM-DD');
+            }
+          });
+          delete params[key];
+        }
+        else if (element && key.indexOf('*') >= 0) {
+          const dataParams = key.split('*');
+          dataParams.forEach((value, index) => {
+            params[value] = element[index].format('YYYY-MM-DD HH:mm:ss');
+          });
+          delete params[key];
+        } else if (element && key.indexOf('_selectNumberRange') >= 0) { // key = xxxxx_selectNumberRange   qp-xxxxx-gt
+          const dataParams = key.split('_selectNumberRange')[0]
+          if (params[key][0] === 'range') {
+            if (params[key][1][0]) {
+              params[`qp-${dataParams}-ge`] = params[key][1][0]
+            }
+            if (params[key][1][1]) {
+              params[`qp-${dataParams}-le`] = params[key][1][1]
+            }
+          } else {
+            params[`qp-${dataParams}-${params[key][0]}`] = params[key][1]
+          }
+          delete params[key]
+        }else if (Array.isArray(element)) {
+          params[key] = element.join(',');
+        }
+      }
+    }
+
     const queryParams = {
       pageSize,
       currentPage,
@@ -255,7 +346,7 @@ const SearchSelect = (props: any) => {
   const onResetTable = () => {
     form.resetFields();
     setTableFormParams({});
-    handleTableChange({ pageSize: tableInitPageSize, currentPage: 1 })
+    getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
   }
 
   const handleTableChange = (pagination) => {
@@ -408,120 +499,149 @@ const SearchSelect = (props: any) => {
     }
   }
 
+  const TooltipContent = () => {
+    if(selectMode && value && value?.length){
+      const listSelected = JSON.parse(JSON.stringify(items)).filter((i: any) => value.find(item => item === i.value)) || []
+      const onClose = (e: any,item: any) => {
+        e.preventDefault();
+        const newValue = JSON.parse(JSON.stringify(value)).filter((i: any) => i !== item.value)
+        onChange(newValue);
+      }
+      return listSelected?.length && listSelected.map((i: any) => (
+        <Tag
+          closable={true}
+          onClose={(e) => onClose(e,i)}
+          style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
+        >
+          {i.text}
+        </Tag>
+      )) || ''
+    } else {
+      setTooltipVisible(false)
+    }
+    return ''
+  }
+
   return (
     <div className={'search_select'}>
       <div className="search_select_show" id={`search_select_div_${uniqueValue}`}>
-        <Select
-          virtual
-          labelInValue={labelInValue}
-          value={value}
-          onChange={onChange}
-          dropdownRender={menu => (
-            <>
-              <Input
-                value={searchValue}
-                style={{ width: '98%', marginLeft: '1%' }}
-                placeholder="请输入"
-                onChange={e=> onSearchChange(e)}
-                onBlur={onSearchBlur}
-                onKeyDown={(e) => {
-                  //  阻止多选的冒泡
-                  e.stopPropagation()
-                }}
-              />
-              <Divider style={{ margin: '8px 0' }} />
-              {menu}
-            </>
-          )}
-          notFoundContent={
-            fetching ? <Spin size="small" /> :
-              <div style={{ textAlign: 'center'}}>
-                <div style={{ marginBottom: 16 }}>
-                  <CopyOutlined style={{ fontSize: '50px' }} />
+        <Tooltip title={TooltipContent} visible={tooltipVisible} trigger={'hover'} onVisibleChange={visible => { if(selectMode && value && value?.length) { setTooltipVisible(visible)} }}>
+          <Select
+            virtual
+            labelInValue={labelInValue}
+            value={value}
+            onChange={onChange}
+            dropdownRender={menu => (
+              <>
+                <Input
+                  value={searchValue}
+                  style={{ width: '98%', marginLeft: '1%' }}
+                  placeholder="请输入"
+                  onChange={e=> onSearchChange(e)}
+                  onBlur={onSearchBlur}
+                  onKeyDown={(e) => {
+                    //  阻止多选的冒泡
+                    e.stopPropagation()
+                  }}
+                />
+                <Divider style={{ margin: '8px 0' }} />
+                {menu}
+              </>
+            )}
+            notFoundContent={
+              fetching ? <Spin size="small" /> :
+                <div style={{ textAlign: 'center'}}>
+                  <div style={{ marginBottom: 16 }}>
+                    <CopyOutlined style={{ fontSize: '50px' }} />
+                  </div>
+                  <div>无匹配结果，请更换其他内容再试</div>
                 </div>
-                <div>无匹配结果，请更换其他内容再试</div>
-              </div>
-          }
-          onPopupScroll={SelectScroll}
-          {...currentSelectProps}
-          getPopupContainer={() => document.getElementById(`search_select_div_${uniqueValue}`)}
-          style={{ width: 'calc(100% - 30px)' }}
-          placeholder="请选择"
-        >
-          {items.map(item => (
-            <Option key={item.value} label={item.text}>
-              {LightHeightOption({ text: `${item.textShowKey}       ${item.text}`, filterTxt: searchValue })}
-            </Option>
-          ))}
-        </Select>
-        <Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">
-          <SearchOutlined />
-        </Button>
-      </div>
-      <Modal
-        width='80%'
-        title={modalTableProps?.modalTableTitle}
-        visible={isModalVisible}
-        onOk={handleOk}
-        onCancel={handleCancel}
-        footer={[
-          <Button key="back" onClick={handleCancel}>
-            取消
-          </Button>,
-          <Button
-            key="submit"
-            type="primary"
-            onClick={handleOk}
-            disabled={!tableData.length || (selectProps?.disabled || props?.disabled)}
+            }
+            onPopupScroll={SelectScroll}
+            style={{ width: needModalTable?'calc(100% - 30px)':'calc(100%)' }}
+            placeholder="请选择"
+            {...currentSelectProps}
+            getPopupContainer={() => document.getElementById(`search_select_div_${uniqueValue}`)}
           >
-            确定
-          </Button>,
-        ]}
-      >
-        <div className={'search_select_wrapper'}>
-          <div className={'search_select_wrapper_click_flag'} onClick={() => setCaretLeftFlag(!caretLeftFlag)}>
-            <CaretLeftOutlined className={caretLeftFlag ? 'search_select_wrapper_click_flag_arrow' : 'search_select_wrapper_click_flag_arrow_1' } />
-          </div>
-          <div className={caretLeftFlag ? 'search_select_wrapper_left' : 'search_select_wrapper_left1'}>
-            <div className={'select_list_columns'}>
-              <div className={'select_list_columns_tips'}>搜索</div>
-              <div className={'select_list_columns_formItems'}>
-                <Form form={form} layout='vertical' key='modalForm'>
-                  {formItem(modalTableProps?.tableSearchForm)}
-                </Form>
-              </div>
+            {items.map(item => (
+              <Option key={item.value} label={item.text}>
+                {LightHeightOption({ text: `${item.textShowKey}       ${item.text}`, filterTxt: searchValue })}
+              </Option>
+            ))}
+          </Select>
+        </Tooltip>
+        {needModalTable && (
+          <Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">
+            <SearchOutlined />
+          </Button>
+        )}
+      </div>
+      {needModalTable && isModalVisible && (
+        <Modal
+          width='80%'
+          title={modalTableProps?.modalTableTitle}
+          visible={isModalVisible}
+          onOk={handleOk}
+          onCancel={handleCancel}
+          footer={[
+            <Button key="back" onClick={handleCancel}>
+              取消
+            </Button>,
+            <Button
+              key="submit"
+              type="primary"
+              onClick={handleOk}
+              disabled={!tableData.length || (selectProps?.disabled || props?.disabled)}
+            >
+              确定
+            </Button>,
+          ]}
+        >
+          <div className={'search_select_wrapper'}>
+            <div className={'search_select_wrapper_click_flag'} onClick={() => setCaretLeftFlag(!caretLeftFlag)}>
+              <CaretLeftOutlined className={caretLeftFlag ? 'search_select_wrapper_click_flag_arrow' : 'search_select_wrapper_click_flag_arrow_1' } />
             </div>
-            <div className={'select_list_searchButton'}>
-              <Button key='reset' className={'select_list_button_space'}  onClick={onResetTable}>重置</Button>
-              <Button key='search' type="primary" onClick={onSearchTable}>查询</Button>
+            <div className={caretLeftFlag ? 'search_select_wrapper_left' : 'search_select_wrapper_left1'}>
+              <div className={'select_list_columns'}>
+                <div className={'select_list_columns_tips'}>搜索</div>
+                <div className={'select_list_columns_formItems'}>
+                  <Form form={form} layout='vertical' key='modalForm'>
+                    {formItem(modalTableProps?.tableSearchForm)}
+                  </Form>
+                </div>
+              </div>
+              <div className={'select_list_searchButton'}>
+                <Button key='reset' className={'select_list_button_space'}  onClick={onResetTable}>重置</Button>
+                <Button key='search' type="primary" onClick={onSearchTable}>查询</Button>
+              </div>
             </div>
-          </div>
-          <div className={caretLeftFlag ? 'search_select_wrapper_right': 'search_select_wrapper_right1'}>
-            <div>
-              <div className={'select_list_selectTips'}>
-                <div style={{ marginLeft: 8 }}>搜索结果共<span style={themeColor}>{tablePagination?.total || 0}</span>项{selectMode ? <span>， 本次已选<span style={themeColor}>{selectedRowKeys?.length || 0}</span>项</span> : ''}</div>
-                <div style={{ color: 'rgba(127, 127, 127, 0.6470588235294118)' }}>{selectMode ? '勾选后点击确定按钮完成选择' : '双击数据行或点击单选图标完成选择'}</div>
+            <div className={caretLeftFlag ? 'search_select_wrapper_right': 'search_select_wrapper_right1'}>
+              <div>
+                <div className={'select_list_selectTips'}>
+                  <div style={{ marginLeft: 8 }}>搜索结果共<span style={themeColor}>{tablePagination?.total || 0}</span>项{selectMode ? <span>， 本次已选<span style={themeColor}>{selectedRowKeys?.length || 0}</span>项</span> : ''}</div>
+                  <div style={{ color: 'rgba(127, 127, 127, 0.6470588235294118)' }}>{selectMode ? '勾选后点击确定按钮完成选择' : '双击数据行或点击单选图标完成选择'}</div>
+                </div>
+                <Table
+                  size='small'
+                  rowSelection={rowSelection}
+                  columns={modalTableProps?.tableColumns}
+                  dataSource={tableData}
+                  pagination={tablePagination}
+                  onChange={handleTableChange}
+                  rowKey={mappingValueField}
+                  scroll={{ x: modalTableProps.overScrollX || 'max-content', y: modalTableProps.overScrollY || null }}
+                  onRow={record => {
+                    return {
+                      onDoubleClick: event => onDoubleClickSelect(event, record),
+                    };
+                  }}
+                />
+                {selectMode ? <div className={'select_list_selectAll'}><Checkbox indeterminate={indeterminate} checked={checkedAll} onChange={onChangeCheckAll} /> 全选所有页面</div> : ''}
               </div>
-              <Table
-                size='small'
-                rowSelection={rowSelection}
-                columns={modalTableProps?.tableColumns}
-                dataSource={tableData}
-                pagination={tablePagination}
-                onChange={handleTableChange}
-                rowKey={mappingValueField}
-                scroll={{ x: modalTableProps.overScrollX || 'max-content', y: modalTableProps.overScrollY || null }}
-                onRow={record => {
-                  return {
-                    onDoubleClick: event => onDoubleClickSelect(event, record),
-                  };
-                }}
-              />
-              {selectMode ? <div className={'select_list_selectAll'}><Checkbox indeterminate={indeterminate} checked={checkedAll} onChange={onChangeCheckAll} /> 全选所有页面</div> : ''}
             </div>
           </div>
-        </div>
-      </Modal>
+        </Modal>
+      )}
     </div>
   );
 };

package/src/index.ts

@@ -13,8 +13,9 @@ const resposne = JSON.parse(localStorage.getItem('userInfo') || '{}');
 
 axios.defaults.headers.common['sso-sessionid'] = resposne?.sessionId || '';
 
-export { default as DataValidation } from './components/DataValidation';
-export { default as QueryMutipleInput } from './components/QueryMutipleInput';
+export { default as DataValidation } from './components/Functional/DataValidation';
+export { default as QueryMutipleInput } from './components/Functional/QueryMutipleInput';
+export { default as SearchSelect } from './components/Functional/SearchSelect';
+export { default as BusinessSearchSelect } from './components/Business/SearchSelect';
+export { default as CommodityEntry } from './components/Business/CommodityEntry';
 export { default as CheckOneUser } from './utils/CheckOneUser';
-export { default as SearchSelect } from './components/SearchSelect';
-export { default as BusinessSearchSelect } from './components/SearchSelect/business/BusinessSearchSelect';