@bit-sun/business-component 2.2.9 → 2.2.10

package/package.json

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

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

@@ -5,12 +5,11 @@ nav:
 group:
   title: 业务组件
   order: 1
-title: 业务档录入器
+title: 商品档案录入器
 order: 1
 ---
 
-# BusinessSearchSelect
-
+# AddSkuSelect
 
 ## 商品选择录入器
 
@@ -61,3 +60,34 @@ export default () => {
   );
 };
 ```
+
+# AddSkcSelect
+
+## SKC选择录入器
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import { AddSkcSelect } from '../../../index.ts';
+
+export default () => {
+  const config = {
+    buttonText: 'context',
+    buttonProps: { disabled: false },
+    beforeShowModal: () => {
+      return Promise.resolve(true);
+      // return Promise.reject('校验有误');
+    },
+    onSaveCallback: (rows) => {
+      console.log('save call', rows);
+      return Promise.resolve(true);
+      // return Promise.reject('FAILE')
+    }
+  }
+  return (
+    <div>
+      <AddSkcSelect {...config}  />
+    </div>
+  );
+};
+```

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

@@ -5,8 +5,9 @@
  * @LastEditTime: 2022-05-08 21:01:21
  * @LastEditors: rodchen
  */
-import React, { useState } from 'react';
-import { Tooltip, Select } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Tooltip, Select, message } from 'antd';
+import axios from 'axios';
 import { AddSelect } from '../../../index';
 import { tableColumnsImage } from '@/components/Business/BsSulaQueryTable/utils';
 import { getSkuImg } from '@/utils/TableUtils';
@@ -146,7 +147,8 @@ export const AddSkuSelect = (parProps: any) => {
       setValue(value)
     },
     beforeShowModal: parProps?.beforeShowModal,
-    onSaveCallback: parProps.onSaveCallback
+    onSaveCallback: parProps.onSaveCallback,
+    businessType: 'sku'
     // onSaveCallback: (rows) => {
     //   console.log('save call', rows);
     //   // return Promise.resolve(true);
@@ -342,3 +344,258 @@ export const AddSkuSelect = (parProps: any) => {
     </div>
   );
 };
+
+export const AddSkcSelect = (parProps: any) => {
+  const selectProps = {
+    mode: 'multiple',
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const [propertyList, setPropertyList] = useState([]);
+
+  useEffect(() => {
+    axios.get(`/items/itemPropertyValueGroup/listNoPage`).then((result: any) => {
+      result = result.data;
+      if ((result?.status && result.status !== '0') || (result?.code && result.code !== '000000')) {
+        message.error(result.msg);
+        return;
+      }
+      const data = result.data || [];
+      setPropertyList(data)
+    }).catch((err) => {});
+  },[])
+
+  const initialSelectColumn = [
+    {
+      title: 'SKC编码',
+      width: 150,
+      dataIndex: 'code',
+    },
+    {
+      title: 'SKC名称',
+      width: 200,
+      ellipsis: {
+        showTitle: false,
+      },
+      render: (text: any) => (
+        <Tooltip placement="topLeft" title={text}>
+          {text}
+        </Tooltip>
+      ),
+      dataIndex: 'name',
+    },
+    {
+      title: '颜色',
+      width: 200,
+      ellipsis: {
+        showTitle: false,
+      },
+      render: (text: any) => (
+        <Tooltip placement="topLeft" title={text}>
+          {text}
+        </Tooltip>
+      ),
+      dataIndex: 'colorName',
+    },
+    {
+      title: '配码',
+      dataIndex: 'selectPropertyGroupCode',
+      width: 160,
+      isSelectItem: true,
+      dataSource: propertyList,
+    },
+    {
+      title: '数量',
+      width: 100,
+      isInputItem: true,
+      dataIndex: 'count',
+    },
+  ]
+  const mTpSelectColumn = handleSelectColumn(initialSelectColumn, parProps)
+  const props = {
+    buttonText: parProps.buttonText || '新增',
+    buttonProps: parProps.buttonProps || {},
+    tableCodeList: parProps.tableCodeList || ['skcSelect-tableOptionsToChoosePartCode','skcSelect-tableSelectedItemPartCode'],
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    requestConfig: {
+      url: `/items/skc/skcSelect`,
+      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
+      otherParams: {}, // 默认参数
+      mappingTextField: 'name',
+      mappingValueField: 'code',
+      ...parProps.requestConfig
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    beforeShowModal: parProps?.beforeShowModal,
+    onSaveCallback: parProps.onSaveCallback,
+    businessType: 'skc',
+    isAllowRepeatedSelect: true
+  };
+  const modalTableProps = {
+    modalTableTitle: '选择商品',
+    tableSearchForm: [
+      { name: 'qp-code-like', label: 'SKC编码' },
+      { name: 'qp-skcName-like', label: 'SKC名称' },
+      { name: 'qp-itemName-like', label: '商品名称' },
+      { name: 'qp-colorName-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' }
+          },
+        } },
+      { name: 'qp-classId-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-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,
+          },
+        } },
+    ],
+    tableColumns: [
+      {
+        title: 'SKC编码',
+        width: 150,
+        dataIndex: 'code',
+      },
+      {
+        title: 'SKC名称',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'name',
+      },
+      {
+        title: '商品名称',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemName',
+        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: 'colorName',
+      },
+      {
+        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: mTpSelectColumn,
+  }
+
+  return (
+    <div>
+      <AddSelect
+        {...props}
+        modalTableProps={modalTableProps}
+      />
+    </div>
+  );
+};

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

@@ -5,7 +5,7 @@ nav:
 group:
   title: 业务组件
   order: 1
-title: 商品录入器
+title: 商品导入录入器
 order: 0
 ---
 

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

@@ -609,6 +609,143 @@ export function commonFun (type?: string, prefixUrl: any, requestConfigProp?: an
     }
   }
 
+  // 商品选择器skc
+  if(type === 'skcCommodity') {
+    requestConfig = {
+      url: `${prefixUrl.selectPrefix}/skc/skcSelect`,
+      filter: 'qp-code,name-orGroup,like', // 过滤参数
+      mappingTextField: 'name',
+      mappingValueField: 'code',
+      sourceName: 'qp-skcCode-eq',
+      ...requestConfigProp,
+    }
+    tableSearchForm = [
+      { name: 'qp-code-like', label: 'SKC编码' },
+      { name: 'qp-skcName-like', label: 'SKC名称' },
+      { name: 'qp-itemName-like', label: '商品名称' },
+      { name: 'qp-colorName-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' }
+          },
+        } },
+      { name: 'qp-classId-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-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,
+          },
+        } },
+    ]
+    Promise.all([
+      loadSelectSource(`${prefixUrl.formSelectFix}/item/propertyValue`, {
+        pageSize: 5000,
+        currentPage: 1,
+        'qp-propertyId-eq': '1467042217951883265'
+      }),
+      loadSelectSource(`${prefixUrl.formSelectFix}/category/queryCategoryTree`, {
+        pageSize: 5000,
+        currentPage: 1,
+      }),
+      loadSelectSource(`${prefixUrl.formSelectFix}/class/withProperty`, {
+        pageSize: 5000,
+        currentPage: 1,
+      }),
+      loadSelectSource(`${prefixUrl.formSelectFix}/brand/queryBrandList`, {
+        pageSize: 5000,
+        currentPage: 1,
+        'ctl-withAuth': true
+      }),
+    ]).then((x: any)=>{
+      formatSource(x,0, 3, tableSearchForm,['value','value']);
+      formatTreeDataSource(x,1, 4, tableSearchForm);
+      formatSource(x,2, 5, tableSearchForm,['id','name']);
+      formatSource(x,3, 6, tableSearchForm,['id','name']);
+    })
+    modalTableProps = {
+      modalTableTitle: '选择SKC',
+      tableSearchForm,
+      tableColumns: [
+        {
+          title: 'SKC编码',
+          dataIndex: 'code',
+        },
+        {
+          title: 'SKC名称',
+          dataIndex: 'name',
+        },
+        {
+          title: '商品名称',
+          dataIndex: 'itemName',
+        },
+        {
+          title: '颜色',
+          dataIndex: 'colorName',
+        },
+        {
+          title: '类目',
+          dataIndex: 'categoryText',
+        },
+        {
+          title: '品类',
+          dataIndex: 'className',
+        },
+        {
+          title: '品牌',
+          dataIndex: 'brandName',
+        },
+      ],
+      ...modalTableBusProps
+    }
+  }
+
   // 商品规格选择器（无弹窗）
   if(type === 'skuPropertyValue') {
     requestConfig = {

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

@@ -321,6 +321,62 @@ export default () => {
 };
 ```
 
+## 商品SKC选择器 Select-SKC-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 6,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'skcCommodity',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
 
 ## 仓库选择器(物理仓) Select-Warehouse-001
 

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

@@ -78,7 +78,7 @@ const handleDefaultPrefixUrl = (type: string) => {
     case 'supplier2': case 'customer2': case 'shopFile2':
       result =  '/channel-manage';
       break;
-    case 'skuCommodity': case 'skuPropertyValue': case 'spuCommodity':
+    case 'skuCommodity': case 'skuPropertyValue': case 'spuCommodity': case 'skcCommodity':
       result =  '/items';
       break;
     case 'physicalWarehouse': case 'realWarehouse': case 'virtualWarehouse': case 'channelWarehouse': case 'ownerWarehouse':