@bit-sun/business-component 2.1.16 → 2.1.17

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

@@ -1,318 +1,319 @@
-/*
- * @Description:
- * @Author: rodchen
- * @Date: 2022-05-07 15:17:28
- * @LastEditTime: 2022-05-08 21:01:21
- * @LastEditors: rodchen
- */
-import React, { useState } from 'react';
-import { Tooltip, Select } from 'antd';
-import { AddSelect } from '../../../index';
-import { tableColumnsImage } from '@/components/Business/BsSulaQueryTable/utils';
-import { getSkuImg } from '@/utils/TableUtils';
-
-export const AddSkuSelect = (parProps: any) => {
-  const selectProps = {
-    mode: 'multiple',
-  }
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  const props = {
-    buttonText: parProps.buttonText || '新增',
-    value,
-    // labelInValue: true, // 非必填 默认为false
-    requestConfig: {
-      url: `/items/sku/pager/v2`,
-      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
-      otherParams: {
-        '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
-    // 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: [
-      {
-        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',
-      }
-    ]
-  }
-
-  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 } from 'react';
+import { Tooltip, Select } from 'antd';
+import { AddSelect } from '../../../index';
+import { tableColumnsImage } from '@/components/Business/BsSulaQueryTable/utils';
+import { getSkuImg } from '@/utils/TableUtils';
+
+export const AddSkuSelect = (parProps: any) => {
+  const selectProps = {
+    mode: 'multiple',
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const props = {
+    buttonText: parProps.buttonText || '新增',
+    buttonProps: parProps.buttonProps || {},
+    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
+    // 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: [
+      {
+        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',
+      }
+    ]
+  }
+
+  return (
+    <div>
+      <AddSelect
+        {...props}
+        modalTableProps={modalTableProps}
+      />
+    </div>
+  );
+};