@bit-sun/business-component 2.3.22 → 2.3.24-alpha.1

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

@@ -1,1060 +1,895 @@
-/*
- * @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';
-import { getEmployeeId } from '@/utils/LocalstorageUtils';
-// import { getCurrentTargetBgId } from '@/utils/LocalstorageUtils';
-
-function handleSelectColumn(c: any, parentProps: any) {
-  let result = c;
-  const showColumns = parentProps?.showColumns || [];
-  const exceptColumns = parentProps?.exceptColumns || [];
-  const coverColumns = parentProps?.coverColumns || [];
-  const additionColumns = parentProps?.additionColumns || [];
-  // 仅展示内容
-  if(showColumns?.length) {
-    result = result.filter((i: any) => showColumns.includes(i.dataIndex))
-  }
-  // 过滤不需要展示内容
-  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
-}
-function handleSearchForm(c: any, parentProps: any) {
-  let result = c;
-  const showTableSearchForm = parentProps?.showTableSearchForm || [];
-  const exceptTableSearchForm= parentProps?.exceptTableSearchForm|| [];
-  const coverTableSearchForm = parentProps?.coverTableSearchForm || [];
-  // 仅展示内容
-  if(showTableSearchForm?.length) {
-    result = result.filter((i: any) => showTableSearchForm.includes(i.name))
-  }
-  // 过滤不需要展示内容
-  if(exceptTableSearchForm?.length) {
-    result = result.filter((i: any) => !exceptTableSearchForm.includes(i.name))
-  }
-  // 覆盖内容
-  if(coverTableSearchForm?.length) {
-    result = coverTableSearchForm;
-  }
-  return result;
-}
-function handleFormSearchSourceLoad(c: any, parentProps: any) {
-  let result = c;
-  const showTableFormSearchSourceLoad = parentProps?.showTableFormSearchSourceLoad || [];
-  const exceptTableFormSearchSourceLoad= parentProps?.exceptTableFormSearchSourceLoad|| [];
-  const coverTableFormSearchSourceLoad = parentProps?.coverTableFormSearchSourceLoad || [];
-  const noNeedTableFormSearchSourceLoad = parentProps?.noNeedTableFormSearchSourceLoad
-  // 仅展示内容
-  if(showTableFormSearchSourceLoad?.length) {
-    result = result.filter((i: any) => showTableFormSearchSourceLoad.includes(i.url))
-  }
-  // 过滤不需要展示内容
-  if(exceptTableFormSearchSourceLoad?.length) {
-    result = result.filter((i: any) => !exceptTableFormSearchSourceLoad.includes(i.url))
-  }
-  // 覆盖内容
-  if(coverTableFormSearchSourceLoad?.length) {
-    result = coverTableFormSearchSourceLoad;
-  }
-  // 不需要默认请求
-  if(noNeedTableFormSearchSourceLoad) {
-    result = [];
-  }
-  return result;
-}
-
-export const AddSkuSelect = (parProps: any) => {
-  const selectProps = {
-    mode: 'multiple',
-  }
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  const isNoUseItemBarcode = parProps?.noUseItemEancode !== undefined ? parProps?.noUseItemEancode : true; // 默认不加商品条码，兼容老项目
-  //注⚠️：自定义过表头的请记得传tableCodeList参数
-  const initialSelectColumn = [
-    {
-      title: 'SKU编码',
-      width: 150,
-      dataIndex: 'skuCode',
-    },
-    ...(isNoUseItemBarcode ? [] : [
-      {
-        title: '商品条码',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        dataIndex: 'itemEancode',
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-      }
-    ]),
-    {
-      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 initialTableColumn = [
-    {
-      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>
-      ),
-    },
-    ...(isNoUseItemBarcode ? []: [
-      {
-        title: '商品条码',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        dataIndex: 'itemEancode',
-        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',
-    },
-  ]
-  const mTpTableColumn = handleSelectColumn(initialTableColumn, parProps);
-  const initialTableSearchForm = [
-    {
-      name: 'qp-skuCode-like', label: 'SKU编码'
-    },
-    { name: 'qp-skuName-like', label: 'SKU名称' },
-    ...(isNoUseItemBarcode ? []: [
-      { name: 'qp-code-in', label: '商品条码', field: {
-          type: 'multipleQueryInput',
-          props: {
-            ...(parProps.requestConfig?.itemEancodeValueRequestConfig || {}),
-          },
-        }}
-    ]),
-    { 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' }
-        },
-      } },
-    ...(parProps?.addTableSearchForm||[])
-  ]
-  const mTpTableSearchForm = handleSearchForm(initialTableSearchForm, parProps);
-  const initialPromiseLoadList = [
-    {
-      url: `/items/brand/queryBrandList`,
-      params: {
-        pageSize: 5000,
-        currentPage: 1,
-        'ctl-withAuth': true
-      },
-      resType: 'list',
-      resPosition: isNoUseItemBarcode ? 2 : 3,
-      resKeyValue: ['id','name']
-    },
-    {
-      url: `/items/category/queryCategoryTree`,
-      params: {
-        pageSize: 5000,
-        currentPage: 1,
-      },
-      resType: 'treeList',
-      resPosition: isNoUseItemBarcode ? 3 : 4
-    },
-  ]
-  const mTpPromiseLoadList = handleFormSearchSourceLoad(initialPromiseLoadList, 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,
-        // 'useOrgSign': getCurrentTargetBgId(), // 根据品牌、账号授权的组织+商品授权使用组织做权限过滤  这个交给业务使用的地方去做,传addOtherParams:{useOrgSign:单据中所选组织}
-        ...(parProps?.requestConfig?.addOtherParams || {}), // 允许在默认参数基础上，追加/覆盖已有 参数
-      }, // 默认参数
-      mappingTextField: 'name',
-      mappingValueField: 'skuCode',
-      ...parProps.requestConfig
-    },
-    selectProps,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    beforeShowModal: parProps?.beforeShowModal,
-    onSaveCallback: parProps.onSaveCallback,
-    businessType: 'sku',
-    isAllowRepeatedSelect: !!parProps?.isAllowRepeatedSelect,
-  };
-  const modalTableProps = {
-    modalTableTitle: '选择商品',
-    tableSearchForm: mTpTableSearchForm,
-    tableColumns: mTpTableColumn,
-    selectColumn: mTpSelectColumn,
-    promiseLoadList: mTpPromiseLoadList,
-  }
-
-  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&qp-status-eq=1`).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 initialPromiseLoadList = [
-    {
-      url: `/items/item/propertyValue/sizeBySkcConfig`,
-      params: {
-        pageSize: 10000,
-        currentPage: 1,
-        type: 2, // 类型：1尺码；2颜色
-      },
-      resType: 'list',
-      resPosition: 3,
-      resKeyValue: ['value','value']
-    },
-    {
-      url: `/items/category/queryCategoryTree`,
-      params: {
-        pageSize: 5000,
-        currentPage: 1,
-      },
-      resType: 'treeList',
-      resPosition: 4,
-    },
-    {
-      url: `/items/class/withProperty`,
-      params: {
-        pageSize: 5000,
-        currentPage: 1,
-      },
-      resType: 'list',
-      resPosition: 5,
-      resKeyValue: ['id','name']
-    },
-    {
-      url: `/items/brand/queryBrandList`,
-      params: {
-        pageSize: 5000,
-        currentPage: 1,
-        'ctl-withAuth': true
-      },
-      resType: 'list',
-      resPosition: 6,
-      resKeyValue: ['id','name']
-    },
-  ]
-  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: {
-        'qp-skcStatus-eq': 1,
-        ...(parProps?.requestConfig?.addOtherParams || {}), // 允许在默认参数基础上，追加/覆盖已有 参数
-      }, // 默认参数
-      mappingTextField: 'name',
-      mappingValueField: 'code',
-      ...parProps.requestConfig
-    },
-    selectProps,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    beforeShowModal: parProps?.beforeShowModal,
-    onSaveCallback: parProps.onSaveCallback,
-    businessType: 'skc',
-    isAllowRepeatedSelect: parProps?.isAllowRepeatedSelect!==undefined ? !!parProps?.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,
-    promiseLoadList: initialPromiseLoadList
-  }
-
-  return (
-    <div>
-      <AddSelect
-        {...props}
-        modalTableProps={modalTableProps}
-      />
-    </div>
-  );
-};
-
-export const AddSpuSelect = (parProps: any) => {
-  const selectProps = {
-    mode: 'multiple',
-  }
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  const [propertyList, setPropertyList] = useState([]);
-
-  useEffect(() => {
-    if(parProps?.isSingleColor) {
-      // type: 1 尺码组; 2 配码组
-      axios.get(`/items/itemPropertyValueGroup/listNoPage?qp-type-eq=2&qp-status-eq=1`).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: '商品编码',
-      width: 150,
-      dataIndex: 'itemCode',
-    },
-    {
-      title: '商品名称',
-      width: 200,
-      ellipsis: {
-        showTitle: false,
-      },
-      render: (text: any) => (
-        <Tooltip placement="topLeft" title={text}>
-          {text}
-        </Tooltip>
-      ),
-      dataIndex: 'name',
-    },
-    {
-      title: '颜色',
-      dataIndex: 'colorName',
-      width: 200,
-      isSelectItem: true,
-      dataSourceCode: 'colorValues',
-      dataSourceMapping: ['value', 'value']
-    },
-    {
-      title: '配码',
-      dataIndex: 'selectPropertyGroupCode',
-      width: 160,
-      isSelectItem: true,
-      dataSource: propertyList,
-      filterDataSourceCode: 'matchingCodes',
-    },
-    {
-      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 initialPromiseLoadList = [
-    {
-      url: `/user/orgViewNode/listNoPage`,
-      params: {
-        'qp-employeeId-eq': getEmployeeId(),
-        'qp-orgViewCode-eq': 'business-organizational-view',
-        'ctl-withDefaultOrg': true,
-      },
-      resType: 'list',
-      resPosition: 2,
-      resKeyValue: ['targetId','name']
-    },
-    {
-      url: `/items/brand/queryBrandList`,
-      params: {
-        pageSize: 5000,
-        currentPage: 1,
-        'ctl-withAuth': true
-      },
-      resType: 'list',
-      resPosition: 3,
-      resKeyValue: ['id','name']
-    },
-    {
-      url: `/items/category/queryCategoryTree`,
-      params: {
-        pageSize: 5000,
-        currentPage: 1,
-      },
-      resType: 'treeList',
-      resPosition: 4,
-    },
-    {
-      url: `/items/class/withProperty`,
-      params: {
-        pageSize: 5000,
-        currentPage: 1,
-      },
-      resType: 'list',
-      resPosition: 5,
-      resKeyValue: ['id','name']
-    },
-  ]
-  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.审批未通过)
-        'qp-status-eq': 1,
-        sorter: 'desc-id',
-        ...(parProps?.requestConfig?.addOtherParams || {}), // 允许在默认参数基础上，追加/覆盖已有 参数
-      }, // 默认参数
-      mappingTextField: 'name',
-      mappingValueField: 'itemCode',
-      ...parProps.requestConfig
-    },
-    selectProps,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    beforeShowModal: parProps?.beforeShowModal,
-    onSaveCallback: parProps.onSaveCallback,
-    businessType: 'spu',
-    isAllowRepeatedSelect: !!parProps?.isAllowRepeatedSelect,
-  };
-  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,
-    promiseLoadList: initialPromiseLoadList
-  }
-
-  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';
+// import { getCurrentTargetBgId } from '@/utils/LocalstorageUtils';
+
+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 isNoUseItemBarcode = parProps?.noUseItemEancode !== undefined ? parProps?.noUseItemEancode : true; // 默认不加商品条码，兼容老项目
+  //注⚠️：自定义过表头的请记得传tableCodeList参数
+  const initialSelectColumn = [
+    {
+      title: 'SKU编码',
+      width: 150,
+      dataIndex: 'skuCode',
+    },
+    ...(isNoUseItemBarcode ? [] : [
+      {
+        title: '商品条码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemEancode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      }
+    ]),
+    {
+      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,
+        // 'useOrgSign': getCurrentTargetBgId(), // 根据品牌、账号授权的组织+商品授权使用组织做权限过滤  这个交给业务使用的地方去做,传addOtherParams:{useOrgSign:单据中所选组织}
+        ...(parProps?.requestConfig?.addOtherParams || {}), // 允许在默认参数基础上，追加/覆盖已有 参数
+      }, // 默认参数
+      mappingTextField: 'name',
+      mappingValueField: 'skuCode',
+      ...parProps.requestConfig
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    beforeShowModal: parProps?.beforeShowModal,
+    onSaveCallback: parProps.onSaveCallback,
+    businessType: 'sku',
+    isAllowRepeatedSelect: !!parProps?.isAllowRepeatedSelect,
+    noUseItemEancode: isNoUseItemBarcode
+  };
+  const modalTableProps = {
+    modalTableTitle: '选择商品',
+    tableSearchForm: [
+      {
+        name: 'qp-skuCode-like', label: 'SKU编码'
+      },
+      { name: 'qp-skuName-like', label: 'SKU名称' },
+      ...(isNoUseItemBarcode ? []: [
+          { name: 'qp-code-in', label: '商品条码', field: {
+            type: 'multipleQueryInput',
+            props: {
+              ...(parProps.requestConfig?.itemEancodeValueRequestConfig || {}),
+            },
+          }}
+      ]),
+      { 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>
+        ),
+      },
+      ...(isNoUseItemBarcode ? []: [
+        {
+          title: '商品条码',
+          width: 100,
+          ellipsis: {
+            showTitle: false,
+          },
+          dataIndex: 'itemEancode',
+          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&qp-status-eq=1`).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: {
+        'qp-skcStatus-eq': 1,
+        ...(parProps?.requestConfig?.addOtherParams || {}), // 允许在默认参数基础上，追加/覆盖已有 参数
+      }, // 默认参数
+      mappingTextField: 'name',
+      mappingValueField: 'code',
+      ...parProps.requestConfig
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    beforeShowModal: parProps?.beforeShowModal,
+    onSaveCallback: parProps.onSaveCallback,
+    businessType: 'skc',
+    isAllowRepeatedSelect: parProps?.isAllowRepeatedSelect!==undefined ? !!parProps?.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);
+  const [propertyList, setPropertyList] = useState([]);
+
+  useEffect(() => {
+    if(parProps?.isSingleColor) {
+      // type: 1 尺码组; 2 配码组
+      axios.get(`/items/itemPropertyValueGroup/listNoPage?qp-type-eq=2&qp-status-eq=1`).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: '商品编码',
+      width: 150,
+      dataIndex: 'itemCode',
+    },
+    {
+      title: '商品名称',
+      width: 200,
+      ellipsis: {
+        showTitle: false,
+      },
+      render: (text: any) => (
+        <Tooltip placement="topLeft" title={text}>
+          {text}
+        </Tooltip>
+      ),
+      dataIndex: 'name',
+    },
+    {
+      title: '颜色',
+      dataIndex: 'colorName',
+      width: 200,
+      isSelectItem: true,
+      dataSourceCode: 'colorValues',
+      dataSourceMapping: ['value', 'value']
+    },
+    {
+      title: '配码',
+      dataIndex: 'selectPropertyGroupCode',
+      width: 160,
+      isSelectItem: true,
+      dataSource: propertyList,
+      filterDataSourceCode: 'matchingCodes',
+    },
+    {
+      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.审批未通过)
+        'qp-status-eq': 1,
+        sorter: 'desc-id',
+        ...(parProps?.requestConfig?.addOtherParams || {}), // 允许在默认参数基础上，追加/覆盖已有 参数
+      }, // 默认参数
+      mappingTextField: 'name',
+      mappingValueField: 'itemCode',
+      ...parProps.requestConfig
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    beforeShowModal: parProps?.beforeShowModal,
+    onSaveCallback: parProps.onSaveCallback,
+    businessType: 'spu',
+    isAllowRepeatedSelect: !!parProps?.isAllowRepeatedSelect,
+  };
+  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>
+  );
+};