@bit-sun/business-component 2.0.0 → 2.0.1

package/dist/utils/CheckOneUser/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (storageKeyString: string, seconds?: number, tipsCallFunction?: (() => {}) | undefined) => void;
+declare const _default: (storageKeyString: string, seconds?: number, tipsCallFunction?: () => {}) => void;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Business/CommodityEntry/index.md

@@ -21,11 +21,11 @@ export default () => {
  const [choosedSku, setChoosedSku] = useState([]);
  
  const callbackHideModal = () => {
-   alert('关闭弹窗处理函数回调，可以处理刷新表格等操作（非必传）')
+   console.log('关闭弹窗处理函数回调，可以处理刷新表格等操作（非必传）')
  }
 
   const callbackHandleOk = (resultData, callback) => {
-    alert('确定操作，可获取到成功录入的商品，做一系列操作')
+    console.log('确定操作，可获取到成功录入的商品，做一系列操作')
     console.log(resultData)
     // 一般拿到导入数据是做请求接口操作
     // import {request} from "bssula";

package/src/components/Business/CommodityEntry/index.tsx

@@ -12,7 +12,7 @@ const CommodityEntry = (props: any) => {
     callbackHideModal,
     callbackHandleOk,
     columns=["skuCode", "quantity", "price"],
-    validDataUrl="/bop/api/recordDetailImport/check"
+    validDataUrl="/items/api/recordDetailImport/check"
   } = props;
 
   const [modalProps, setModalProps]: any = useState({

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

@@ -381,6 +381,7 @@ export function commonFun (type?: string, prefixUrl: any, requestConfigProp?: an
       loadSelectSource(`${prefixUrl.formSelectFix}/brand/queryBrandList`, {
         pageSize: 5000,
         currentPage: 1,
+        'ctl-withAuth': true
       }),
       loadSelectSource(`${prefixUrl.formSelectFix}/category/queryCategoryTree`, {
         pageSize: 5000,
@@ -549,6 +550,7 @@ export function commonFun (type?: string, prefixUrl: any, requestConfigProp?: an
       loadSelectSource(`${prefixUrl.formSelectFix}/brand/queryBrandList`, {
         pageSize: 5000,
         currentPage: 1,
+        'ctl-withAuth': true
       }),
       loadSelectSource(`${prefixUrl.formSelectFix}/category/queryCategoryTree`, {
         pageSize: 5000,

package/src/components/Business/TreeSearchSelect/index.md

@@ -0,0 +1,126 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 树型业务选择器
+order: 2
+---
+
+## BusinessTreeSearchSelect
+
+Demo
+
+部门选择器:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessTreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    value,
+    onChange: (v) => {
+      setValue(v)
+    },
+    businessType: 'department'
+  };
+
+  return (
+    <div>
+      <BusinessTreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+
+销售组织选择器:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessTreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    value,
+    onChange: (v) => {
+      setValue(v)
+    },
+    businessType: 'sales-organization'
+  };
+
+  return (
+    <div>
+      <BusinessTreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+采购组织选择器:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessTreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    value,
+    onChange: (v) => {
+      setValue(v)
+    },
+    businessType: 'purchase-organization'
+  };
+
+  return (
+    <div>
+      <BusinessTreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+库存组织选择器:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessTreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    value,
+    isChoose: false, // 控制是否父节点可选中，默认不可选中
+    onChange: (v) => {
+      setValue(v)
+    },
+    businessType: 'stock-organization'
+  };
+
+  return (
+    <div>
+      <BusinessTreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/Business/TreeSearchSelect/index.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { handleDefaultProps } from './utils';
+import TreeSearchSelect from '@/components/Functional/TreeSearchSelect';
+
+const MemoTreeSearchSelect = React.memo(TreeSearchSelect)
+
+const  BusinessTreeSearchSelect = (props: any) => {
+  const businessType = props?.businessType || 'department';
+
+  const handleBusinessProps = handleDefaultProps(businessType);
+
+  const currentProps = useMemo(() => {
+    return {
+      ...handleBusinessProps,
+      ...props,
+    }
+  }, [props?.value])
+
+  return (
+    <div>
+      <MemoTreeSearchSelect {...currentProps} />
+    </div>
+  );
+};
+
+export default React.memo(BusinessTreeSearchSelect, (props, nextProps) => {
+  if(props && props.labelInValue && props.value && JSON.stringify(props.value) !== JSON.stringify(nextProps.value)) {
+    return false
+  }
+  if(props && props.value !== nextProps.value) {
+    return false
+  }
+  return true
+});

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

@@ -0,0 +1,60 @@
+const handleDefaultProps = (type: string) => {
+  let result = {};
+  switch (type){
+    case 'department':
+      result =  {
+        treeCheckable: true,
+        isChoose: true,
+        remoteSource: {
+          url: `/user/orgViewNode/common/getTreeForOrgViewAndTenant`,
+          initialParams: { 'orgViewCode': 'administrative-organization-view' },
+          resKeyValue: ['code', 'name'],
+        },
+      };
+      break;
+    case 'sales-organization':
+      result =  {
+        isChoose: true,
+        remoteSource: {
+          url: `/user/orgViewNode/common/getTreeForOrgViewAndTenant`,
+          initialParams: { 'orgViewCode': 'sales-organizational-view' },
+          resKeyValue: ['code', 'name'],
+        },
+      };
+      break;
+    case 'purchase-organization':
+      result =  {
+        isChoose: true,
+        remoteSource: {
+          url: `/user/orgViewNode/common/getTreeForOrgViewAndTenant`,
+          initialParams: { 'orgViewCode': 'purchase-organizational-view' },
+          resKeyValue: ['code', 'name'],
+        },
+      };
+      break;
+    case 'stock-organization':
+      result =  {
+        isChoose: true,
+        remoteSource: {
+          url: `/user/orgViewNode/common/getTreeForOrgViewAndTenant`,
+          initialParams: { 'orgViewCode': 'stock-organizational-view' },
+          resKeyValue: ['code', 'name'],
+        },
+      };
+      break;
+    default:
+      result =  {
+        treeCheckable: true,
+        isChoose: true,
+        remoteSource: {
+          url: `/user/orgViewNode/common/getTreeForOrgViewAndTenant`,
+          initialParams: { 'orgViewCode': 'administrative-organization-view' },
+          resKeyValue: ['code', 'name'],
+        },
+      };
+      break
+  }
+  return result;
+}
+
+export { handleDefaultProps }

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

@@ -0,0 +1,47 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 功能组件
+  order: 0
+title: 树型选择器
+order: 4
+---
+
+## TreeSearchSelect
+
+部门选择器Demo:
+
+```tsx
+import React, { useState } from 'react';
+import { TreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    remoteSource: {
+      url: `/user/orgViewNode/common/getTreeForOrgViewAndTenant`,
+      initialParams: { 'orgViewCode': 'administrative-organization-view' },
+      resKeyValue: ['code', 'name'],
+    },
+    value,
+    isChoose: false, // 控制是否父节点可选中，默认不可选中
+    treeCheckable: true,
+    onChange: (v) => {
+      setValue(v)
+    }
+  };
+
+  return (
+    <div>
+      <TreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

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

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import { TreeSelect, Tooltip, Tag } from 'antd';
+import axios from 'axios';
+import { stringify } from 'querystring';
+
+const TreeSearchSelect = (props: any) => {
+  const [treeData, setTreeData] = useState([]);
+  const {
+    ctx,                      // ctx中有自己的name
+    value,
+    valueName,   // 当labelInValue为true时，值为null
+    onChange,
+    onChangeName, // 当labelInValue为true时，此函数无意义，故无需传
+    placeholder,
+    remoteSource,
+    initialValue,
+    treeCheckable = false,
+    showSearch = true,
+    maxTagCount = 1,
+    multiple = false,
+    isChoose = false,
+    mode,
+    getPopupContainer,
+    labelInValue = false,
+    showArrow = true,
+    allowClear = true,
+    showCheckedStrategy = TreeSelect.SHOW_PARENT,
+    style = { width: '100%' },
+    getTreeData
+  } = props;
+
+  const {
+    url,
+    paramsKey = 'qp-name-like',
+    resKeyValue = ['id', 'name'],
+    initialParams = {},
+  } = remoteSource;
+
+  const mapSearchTree = (treeDataItem: any) => {
+    const haveChildren = Array.isArray(treeDataItem.children) && treeDataItem.children.length > 0;
+    return {
+      title: treeDataItem[resKeyValue[1]],
+      key: treeDataItem[resKeyValue[0]],
+      value: treeDataItem[resKeyValue[0]],
+      parentId: treeDataItem.parent,
+      data: { ...treeDataItem },
+      isLeaf: !haveChildren,
+      disabled: isDisabled(haveChildren),
+      children: haveChildren ? treeDataItem.children.map((i: any) => mapSearchTree(i)) : [],
+    };
+  };
+
+  const isDisabled = (children: any) => {
+    if (isChoose) {
+      return false;
+    }
+    return children;
+  }
+
+  /* 实时查询   但是目前用的直接是完整数据源, 所以没有使用 */
+  const handleSearch = (q: string) => {
+    const paramsData = {
+      [`${paramsKey}`]: q,
+      ...initialParams,
+    }
+    axios.get(`${url}?${stringify(paramsData)}`).then(async (res: any) => {
+      const resData = res?.data || [];
+      let coverData;
+
+      if(resData.status === '0') {
+        const { data } = resData;
+        if (remoteSource.converter) {
+          coverData = await remoteSource.converter({ data: [data] })
+        } else {
+          const dataList = (data && Array.isArray(data)) ? data : (data && [data] || []);
+          coverData = dataList.length && dataList.map((ites: any) => mapSearchTree(ites)) || [];
+        }
+      } else {
+        coverData = []
+      }
+
+      setTreeData(coverData);
+      ctx?.form?.setFieldSource(ctx.name, coverData);
+    });
+  };
+
+  const handleChange = (data: any, dataName: any) => {
+    onChange(data);
+    onChangeName && onChangeName(dataName);
+    getTreeData && getTreeData(treeData); // 把树节点暴露出去
+    ctx?.form?.setFieldValue(ctx.name, data);
+  };
+
+  useEffect(() => {
+    handleSearch(initialValue);
+  }, []);
+
+  const maxTagPlaceholder = (selectedValues: any) => {
+    const onClose = (e: any,item: any) => {
+      e.preventDefault();
+      const newValue = labelInValue ? JSON.parse(JSON.stringify(value)).filter((i: any) => i.value !== item.value): JSON.parse(JSON.stringify(value)).filter((i: any) => i !== item.value)
+      const newValueName = labelInValue ? null: JSON.parse(JSON.stringify(valueName)).filter((i: any) => i !== item.label)
+      handleChange(newValue, newValueName);
+    }
+    return (
+      <Tooltip title={selectedValues.map((i: any) => (
+        <Tag
+          closable={true}
+          onClose={(e) => onClose(e,i)}
+          style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
+        >
+          {i.label}
+        </Tag>
+      ))}>
+        {`+ ${selectedValues?.length}`}
+      </Tooltip>
+    )
+  }
+
+  return (
+    <div className={'tree_search_select'}>
+      <TreeSelect
+        treeCheckable={treeCheckable}
+        maxTagCount={maxTagCount}
+        showSearch={showSearch}
+        style={style}
+        value={value}
+        dropdownStyle={{ maxHeight: 400, maxWidth: 100, overflow: 'auto' }}
+        treeData={treeData}
+        placeholder={placeholder}
+        allowClear={allowClear}
+        labelInValue={labelInValue}
+        showArrow={showArrow}
+        showCheckedStrategy={showCheckedStrategy}
+        treeNodeFilterProp={'title'}
+        treeDefaultExpandAll
+        multiple={multiple} // 	支持多选（当设置 treeCheckable 时自动变为 true）
+        maxTagPlaceholder={maxTagPlaceholder}
+        onChange={handleChange}
+        disabled={mode==='view' || ctx?.mode === 'view'}
+        getPopupContainer={() => (getPopupContainer && getPopupContainer()) || document.body}
+      >
+      </TreeSelect>
+    </div>
+  );
+};
+
+export default TreeSearchSelect;

package/src/index.ts

@@ -13,6 +13,10 @@ const resposne = JSON.parse(localStorage.getItem('userInfo') || '{}');
 
 axios.defaults.headers.common['sso-sessionid'] = resposne?.sessionId || '';
 axios.defaults.headers.common['x-tenant-id'] = resposne?.tenantId || '1';
+if (localStorage.getItem('x-user-auth-context')) {
+  // @ts-ignore
+  axios.defaults.headers.common['x-user-auth-context'] = localStorage.getItem('x-user-auth-context');
+}
 
 export { default as DataValidation } from './components/Functional/DataValidation';
 export { default as DataImport } from './components/Functional/DataImport';
@@ -21,3 +25,5 @@ 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 TreeSearchSelect } from './components/Functional/TreeSearchSelect';
+export { default as BusinessTreeSearchSelect } from './components/Business/TreeSearchSelect';