@bit-sun/business-component 2.0.0 → 2.0.3

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.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

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

@@ -0,0 +1,37 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 业务档录入器
+order: 1
+---
+
+# BusinessSearchSelect
+
+
+## 商品选择录入器
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import { AddSkuSelect } from '../../../index.ts';
+
+export default () => {
+  const config = {
+    buttonText: 'context',
+    onSaveCallback: (rows) => {
+      console.log('save call', rows);
+      return Promise.resolve(true);
+      // return Promise.reject('FAILE')
+    }
+  }
+  return (
+    <div>
+      <AddSkuSelect {...config}  />
+    </div>
+  );
+};
+```

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

@@ -0,0 +1,295 @@
+/*
+ * @Description:
+ * @Author: rodchen
+ * @Date: 2022-05-07 15:17:28
+ * @LastEditTime: 2022-05-08 21:01:21
+ * @LastEditors: rodchen
+ */
+import React, { useState } from 'react';
+import { Tooltip, Select } from 'antd';
+import { AddSelect } from '../../../index';
+
+export const AddSkuSelect = (parProps: any) => {
+  const selectProps = {
+    mode: 'multiple',
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const props = {
+    buttonText: parProps.buttonText || '新增',
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    requestConfig: {
+      url: `/items/sku/pager/v2`,
+      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
+      otherParams: {}, // 默认参数
+      mappingTextField: 'name',
+      mappingValueField: 'skuCode',
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    onSaveCallback: parProps.onSaveCallback
+    // onSaveCallback: (rows) => {
+    //   console.log('save call', rows);
+    //   // return Promise.resolve(true);
+    //   // return Promise.reject('FAILE')
+    // }
+  };
+  const modalTableProps = {
+    modalTableTitle: '选择商品',
+    tableSearchForm: [
+      {
+        name: 'qp-skuCode-like', label: 'SKU编码'
+      },
+      { name: 'qp-skuName-like', label: 'SKU名称' },
+      { name: 'qp-brandId-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,
+        },
+      } },
+      { name: 'qp-categoryId-in', type: 'treeSelect', label: '类目', field: {
+        type: 'treeSelect',
+        props: {
+          treeData: [],
+          treeCheckable: true,
+          showSearch: true,
+          allowClear: true,
+          showArrow: true,
+          treeNodeFilterProp: 'title',
+          treeDefaultExpandAll: true,
+          maxTagCount: 1,
+          placeholder: '请选择',
+          style: {
+            width: '100%',
+          },
+          dropdownStyle: { maxHeight: 400, maxWidth: 100, overflow: 'auto' }
+        },
+      } }
+    ],
+    tableColumns: [
+      {
+        title: 'SKU编码',
+        width: 150,
+        dataIndex: 'skuCode',
+      },
+      {
+        title: 'SKU名称',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'name',
+      },
+      {
+        title: '国际条码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'barCode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '所属SPU名称',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemName',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '所属SPU编码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemCode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '外部编码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'externalCode',
+      },
+      {
+        title: '规格',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'propertyNameAndValue',
+      },
+      {
+        title: '类目',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'categoryName',
+      },
+      {
+        title: '品类',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'className',
+      },
+      {
+        title: '品牌',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'brandName',
+      },
+    ],
+    selectColumn: [
+      {
+        title: 'SKU编码',
+        width: 150,
+        dataIndex: 'skuCode',
+      },
+      {
+        title: 'SKU名称',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'name',
+      },
+      {
+        title: '数量',
+        width: 100,
+        isInputItem: true,
+        dataIndex: 'count',
+      },
+      {
+        title: '单位',
+        dataIndex: 'selectUnitCode',
+        width: 80,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any, record: any) => {
+          let baseUnitCode = '';
+          if (record?.packingUnitList) {
+            let base = record.packingUnitList.filter((item: any) => item.unitCode)
+            if (base.length) {
+              baseUnitCode = base[0].unitCode
+              record.selectUnitCode = base[0].unitCode
+            }
+          }
+
+          if (baseUnitCode) {
+            return <>
+              <Select defaultValue={baseUnitCode}  onChange={(value) => {record.selectUnitCode = value}} style={{width: '60px'}}>
+                  {record.packingUnitList && record.packingUnitList.map((item: any) => {
+                    return <Select.Option value={item.unitCode}>{item.name}</Select.Option>
+                  })}
+                </Select>
+              </>
+          }
+          return <></>
+        },
+      },
+      {
+        title: '所属SPU编码',
+        width: 150,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemCode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '规格',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'propertyNameAndValue',
+      }
+    ]
+  }
+
+  return (
+    <div>
+      <AddSelect
+        {...props}
+        modalTableProps={modalTableProps}
+      />
+    </div>
+  );
+};

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

@@ -9,10 +9,12 @@ const CommodityEntry = (props: any) => {
   const {
     buttonName=' + 录入商品',
     modalTitle = '录入商品',
+    buttonProps = {},
     callbackHideModal,
     callbackHandleOk,
     columns=["skuCode", "quantity", "price"],
-    validDataUrl="/bop/api/recordDetailImport/check"
+    validDataUrl="/items/sku/import/check",
+    isBrandAuth = true // 默认做品牌过滤
   } = props;
 
   const [modalProps, setModalProps]: any = useState({
@@ -58,13 +60,14 @@ const CommodityEntry = (props: any) => {
 
   return (
     <div>
-      <Button onClick={handleShowModal}>{buttonName}</Button>
+      <Button onClick={handleShowModal} {...buttonProps}>{buttonName}</Button>
       {modalProps.visible && (
         <Modal {...modalProps} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true} zIndex={15}>
           <DataValidation
             onRef={(ref) => { dataValidationRef = ref }}
             columns={columns}
             validDataUrl={validDataUrl}
+            isBrandAuth={isBrandAuth}
           />
         </Modal>
       ) || ''}

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 }