@bit-sun/business-component 2.2.13 → 2.2.15

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

@@ -1,601 +1,835 @@
-/*
- * @Description:
- * @Author: rodchen
- * @Date: 2022-05-07 15:17:28
- * @LastEditTime: 2022-05-08 21:01:21
- * @LastEditors: rodchen
- */
-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';
-
-function handleSelectColumn(c: any, parentProps: any) {
-  let result = c;
-  const exceptColumns = parentProps?.exceptColumns || [];
-  const coverColumns = parentProps?.coverColumns || [];
-  const additionColumns = parentProps?.additionColumns || [];
-  // 过滤不需要展示内容
-  if(exceptColumns?.length) {
-    result = result.filter((i: any) => !exceptColumns.includes(i.dataIndex))
-  }
-  // 追加
-  if(additionColumns?.length) {
-    additionColumns.forEach((i: any) => {
-      result.splice(i.position,0,i.column)
-    })
-  }
-  // 覆盖内容
-  if(coverColumns?.length) {
-    result = coverColumns;
-  }
-  return result
-}
-
-export const AddSkuSelect = (parProps: any) => {
-  const selectProps = {
-    mode: 'multiple',
-  }
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  const initialSelectColumn = [
-    {
-      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: '图片',
-      dataIndex: 'itemUrl',
-      width: 200,
-      ellipsis: {
-        showTitle: false,
-      },
-      render: (text: any,record: any) => (
-        <Tooltip placement="topLeft" title={text}>
-          {tableColumnsImage(getSkuImg(record),{ width: 28, height: 28 })}
-        </Tooltip>
-      ),
-    },
-    {
-      title: '数量',
-      width: 100,
-      isInputItem: true,
-      dataIndex: 'count',
-    },
-    {
-      title: '单位',
-      dataIndex: 'selectUnitCode',
-      width: 80,
-      ellipsis: {
-        showTitle: false,
-      },
-      render: (text: any, record: any) => {
-        if (record?.packingUnitList?.length) {
-          const basePackUnit = record?.packingUnitList[0]
-          record.selectUnitCode = basePackUnit.unitCode
-          return basePackUnit.name || basePackUnit.unitCode
-        }
-
-
-        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',
-    }
-  ]
-  const mTpSelectColumn = handleSelectColumn(initialSelectColumn, parProps)
-  const props = {
-    buttonText: parProps.buttonText || '新增',
-    buttonProps: parProps.buttonProps || {},
-    tableCodeList: parProps.tableCodeList || [],
-    value,
-    // labelInValue: true, // 非必填 默认为false
-    requestConfig: {
-      url: `/items/sku/pager/v2`,
-      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
-      otherParams: {
-        'qp-combination-eq': false,
-        'qp-approveStatus-eq': 1,
-        'qp-status-eq': 1,
-      }, // 默认参数
-      mappingTextField: 'name',
-      mappingValueField: 'skuCode',
-      ...parProps.requestConfig
-    },
-    selectProps,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    beforeShowModal: parProps?.beforeShowModal,
-    onSaveCallback: parProps.onSaveCallback,
-    businessType: 'sku'
-    // 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: '图片',
-        dataIndex: 'itemUrl',
-        width: 200,
-        ellipsis: {
-          showTitle: false,
-        },
-        render: (text: any,record: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {tableColumnsImage(getSkuImg(record),{ width: 20, height: 20 })}
-          </Tooltip>
-        ),
-      },
-      {
-        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: mTpSelectColumn
-  }
-
-  return (
-    <div>
-      <AddSelect
-        {...props}
-        modalTableProps={modalTableProps}
-      />
-    </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>
-  );
-};
+/*
+ * @Description:
+ * @Author: rodchen
+ * @Date: 2022-05-07 15:17:28
+ * @LastEditTime: 2022-05-08 21:01:21
+ * @LastEditors: rodchen
+ */
+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';
+
+function handleSelectColumn(c: any, parentProps: any) {
+  let result = c;
+  const exceptColumns = parentProps?.exceptColumns || [];
+  const coverColumns = parentProps?.coverColumns || [];
+  const additionColumns = parentProps?.additionColumns || [];
+  // 过滤不需要展示内容
+  if(exceptColumns?.length) {
+    result = result.filter((i: any) => !exceptColumns.includes(i.dataIndex))
+  }
+  // 追加
+  if(additionColumns?.length) {
+    additionColumns.forEach((i: any) => {
+      result.splice(i.position,0,i.column)
+    })
+  }
+  // 覆盖内容
+  if(coverColumns?.length) {
+    result = coverColumns;
+  }
+  return result
+}
+
+export const AddSkuSelect = (parProps: any) => {
+  const selectProps = {
+    mode: 'multiple',
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  //注⚠️：自定义过表头的请记得传tableCodeList参数
+  const initialSelectColumn = [
+    {
+      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: '图片',
+      dataIndex: 'itemUrl',
+      width: 200,
+      ellipsis: {
+        showTitle: false,
+      },
+      render: (text: any,record: any) => (
+        <Tooltip placement="topLeft" title={text}>
+          {tableColumnsImage(getSkuImg(record),{ width: 28, height: 28 })}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '数量',
+      width: 100,
+      isInputItem: true,
+      dataIndex: 'count',
+    },
+    {
+      title: '单位',
+      dataIndex: 'selectUnitCode',
+      width: 80,
+      ellipsis: {
+        showTitle: false,
+      },
+      render: (text: any, record: any) => {
+        if (record?.packingUnitList?.length) {
+          const basePackUnit = record?.packingUnitList[0]
+          record.selectUnitCode = basePackUnit.unitCode
+          return basePackUnit.name || basePackUnit.unitCode
+        }
+
+
+        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',
+    }
+  ]
+  const mTpSelectColumn = handleSelectColumn(initialSelectColumn, parProps)
+  const props = {
+    buttonText: parProps.buttonText || '新增',
+    buttonProps: parProps.buttonProps || {},
+    tableCodeList: parProps.tableCodeList || [],
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    requestConfig: {
+      url: `/items/sku/pager/v2`,
+      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
+      otherParams: {
+        'qp-combination-eq': false,
+        'qp-approveStatus-eq': 1,
+        'qp-status-eq': 1,
+      }, // 默认参数
+      mappingTextField: 'name',
+      mappingValueField: 'skuCode',
+      ...parProps.requestConfig
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    beforeShowModal: parProps?.beforeShowModal,
+    onSaveCallback: parProps.onSaveCallback,
+    businessType: 'sku'
+    // 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: '图片',
+        dataIndex: 'itemUrl',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any,record: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {tableColumnsImage(getSkuImg(record),{ width: 20, height: 20 })}
+          </Tooltip>
+        ),
+      },
+      {
+        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: mTpSelectColumn
+  }
+
+  return (
+    <div>
+      <AddSelect
+        {...props}
+        modalTableProps={modalTableProps}
+      />
+    </div>
+  );
+};
+
+export const AddSkcSelect = (parProps: any) => {
+  const selectProps = {
+    mode: 'multiple',
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const [propertyList, setPropertyList] = useState([]);
+
+  useEffect(() => {
+    // type: 1 尺码组; 2 配码组
+    axios.get(`/items/itemPropertyValueGroup/listNoPage?qp-type-eq=2`).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) => {});
+  },[])
+
+  //注⚠️：自定义过表头的请记得传tableCodeList参数
+  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>
+  );
+};
+
+export const AddSpuSelect = (parProps: any) => {
+  const selectProps = {
+    mode: 'multiple',
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  //注⚠️：自定义过表头的请记得传tableCodeList参数
+  const initialSelectColumn = [
+    {
+      title: '商品编码',
+      width: 150,
+      dataIndex: 'itemCode',
+    },
+    {
+      title: '商品名称',
+      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: 'ownOrgSignName',
+    },
+    {
+      title: '品牌',
+      dataIndex: 'brandName',
+    },
+    {
+      title: '类目',
+      dataIndex: 'categoryText',
+    },
+    {
+      title: '品类',
+      dataIndex: 'className',
+    },
+  ]
+  const mTpSelectColumn = handleSelectColumn(initialSelectColumn, parProps)
+  const props = {
+    buttonText: parProps.buttonText || '新增',
+    buttonProps: parProps.buttonProps || {},
+    tableCodeList: parProps.tableCodeList || [],
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    requestConfig: {
+      url: `/items/item`,
+      filter: 'qp-itemCode,name-orGroup,like', // 过滤参数
+      otherParams: {
+        'qp-approveStatus-eq': 1, // 审核状态(0.待审批;1.审批通过;2.驳回;3.审批未通过)
+        sorter: 'desc-id'
+      }, // 默认参数
+      mappingTextField: 'name',
+      mappingValueField: 'itemCode',
+      ...parProps.requestConfig
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    beforeShowModal: parProps?.beforeShowModal,
+    onSaveCallback: parProps.onSaveCallback,
+    businessType: 'spu',
+    // onSaveCallback: (rows) => {
+    //   console.log('save call', rows);
+    //   // return Promise.resolve(true);
+    //   // return Promise.reject('FAILE')
+    // }
+  };
+  const modalTableProps = {
+    modalTableTitle: '选择商品',
+    tableSearchForm: [
+      { name: 'qp-itemCode-like', label: '商品编码' },
+      { name: 'qp-name-like', label: '商品名称' },
+      { name: 'qp-ownOrgSign-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,
+          },
+        } },
+      { 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,
+          },
+        } },
+    ],
+    tableColumns: [
+      {
+        title: '商品编码',
+        width: 150,
+        dataIndex: 'itemCode',
+      },
+      {
+        title: '商品名称',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'name',
+      },
+      {
+        title: '所属组织',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'ownOrgSignName',
+      },
+      {
+        title: '品牌',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'brandName',
+      },
+      {
+        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',
+      },
+    ],
+    selectColumn: mTpSelectColumn
+  }
+
+  return (
+    <div>
+      <AddSelect
+        {...props}
+        modalTableProps={modalTableProps}
+      />
+    </div>
+  );
+};