@bit-sun/business-component 2.0.8 → 2.0.11

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

@@ -1,299 +1,300 @@
-/*
- * @Description:
- * @Author: rodchen
- * @Date: 2022-05-07 15:17:28
- * @LastEditTime: 2022-05-08 21:01:21
- * @LastEditors: rodchen
- */
-import React, { useState } from 'react';
-import { Tooltip, Select } from 'antd';
-import { AddSelect } from '../../../index';
-
-export const AddSkuSelect = (parProps: any) => {
-  const selectProps = {
-    mode: 'multiple',
-  }
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  const props = {
-    buttonText: parProps.buttonText || '新增',
-    value,
-    // labelInValue: true, // 非必填 默认为false
-    requestConfig: {
-      url: `/items/sku/pager/v2`,
-      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
-      otherParams: {
-        'qp-combination-eq': false,
-      }, // 默认参数
-      mappingTextField: 'name',
-      mappingValueField: 'skuCode',
-    },
-    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: '国际条码',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        dataIndex: 'barCode',
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-      },
-      {
-        title: '所属SPU名称',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        dataIndex: 'itemName',
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-      },
-      {
-        title: '所属SPU编码',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        dataIndex: 'itemCode',
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-      },
-      {
-        title: '外部编码',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-        dataIndex: 'externalCode',
-      },
-      {
-        title: '规格',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-        dataIndex: 'propertyNameAndValue',
-      },
-      {
-        title: '类目',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-        dataIndex: 'categoryName',
-      },
-      {
-        title: '品类',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-        dataIndex: 'className',
-      },
-      {
-        title: '品牌',
-        width: 100,
-        ellipsis: {
-          showTitle: false,
-        },
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-        dataIndex: 'brandName',
-      },
-    ],
-    selectColumn: [
-      {
-        title: 'SKU编码',
-        width: 150,
-        dataIndex: 'skuCode',
-      },
-      {
-        title: 'SKU名称',
-        width: 200,
-        ellipsis: {
-          showTitle: false,
-        },
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-        dataIndex: 'name',
-      },
-      {
-        title: '数量',
-        width: 100,
-        isInputItem: true,
-        dataIndex: 'count',
-      },
-      {
-        title: '单位',
-        dataIndex: 'selectUnitCode',
-        width: 80,
-        ellipsis: {
-          showTitle: false,
-        },
-        render: (text: any, record: any) => {
-          let baseUnitCode = '';
-          if (record?.packingUnitList) {
-            let base = record.packingUnitList.filter((item: any) => item.unitCode)
-            if (base.length) {
-              baseUnitCode = base[0].unitCode
-              record.selectUnitCode = base[0].unitCode
-              record.selectedScale = base[0]?.baseUnitScale || 1
-            }
-          }
-
-          if (baseUnitCode) {
-            return <>
-              <Select defaultValue={baseUnitCode}  onChange={(value) => {record.selectUnitCode = value;record.selectedScale = record?.packingUnitList?.find((item: any) => item.unitCode === value)?.baseUnitScale || 1}} style={{width: '60px'}}>
-                  {record.packingUnitList && record.packingUnitList.map((item: any) => {
-                    return <Select.Option value={item.unitCode}>{item.name}</Select.Option>
-                  })}
-                </Select>
-              </>
-          }
-          return <></>
-        },
-      },
-      {
-        title: '所属SPU编码',
-        width: 150,
-        ellipsis: {
-          showTitle: false,
-        },
-        dataIndex: 'itemCode',
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-      },
-      {
-        title: '规格',
-        width: 200,
-        ellipsis: {
-          showTitle: false,
-        },
-        render: (text: any) => (
-          <Tooltip placement="topLeft" title={text}>
-            {text}
-          </Tooltip>
-        ),
-        dataIndex: 'propertyNameAndValue',
-      }
-    ]
-  }
-
-  return (
-    <div>
-      <AddSelect
-        {...props}
-        modalTableProps={modalTableProps}
-      />
-    </div>
-  );
-};
+/*
+ * @Description:
+ * @Author: rodchen
+ * @Date: 2022-05-07 15:17:28
+ * @LastEditTime: 2022-05-08 21:01:21
+ * @LastEditors: rodchen
+ */
+import React, { useState } from 'react';
+import { Tooltip, Select } from 'antd';
+import { AddSelect } from '../../../index';
+
+export const AddSkuSelect = (parProps: any) => {
+  const selectProps = {
+    mode: 'multiple',
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const props = {
+    buttonText: parProps.buttonText || '新增',
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    requestConfig: {
+      url: `/items/sku/pager/v2`,
+      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
+      otherParams: {
+        'qp-combination-eq': false,
+      }, // 默认参数
+      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: '国际条码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'barCode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '所属SPU名称',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemName',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '所属SPU编码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemCode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '外部编码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'externalCode',
+      },
+      {
+        title: '规格',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'propertyNameAndValue',
+      },
+      {
+        title: '类目',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'categoryName',
+      },
+      {
+        title: '品类',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'className',
+      },
+      {
+        title: '品牌',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'brandName',
+      },
+    ],
+    selectColumn: [
+      {
+        title: 'SKU编码',
+        width: 150,
+        dataIndex: 'skuCode',
+      },
+      {
+        title: 'SKU名称',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'name',
+      },
+      {
+        title: '数量',
+        width: 100,
+        isInputItem: true,
+        dataIndex: 'count',
+      },
+      {
+        title: '单位',
+        dataIndex: 'selectUnitCode',
+        width: 80,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any, record: any) => {
+          let baseUnitCode = '';
+          if (record?.packingUnitList) {
+            let base = record.packingUnitList.filter((item: any) => item.unitCode)
+            if (base.length) {
+              baseUnitCode = base[0].unitCode
+              record.selectUnitCode = base[0].unitCode
+              record.selectedScale = base[0]?.baseUnitScale || 1
+            }
+          }
+
+          if (baseUnitCode) {
+            return <>
+              <Select defaultValue={baseUnitCode}  onChange={(value) => {record.selectUnitCode = value;record.selectedScale = record?.packingUnitList?.find((item: any) => item.unitCode === value)?.baseUnitScale || 1}} style={{width: '60px'}}>
+                  {record.packingUnitList && record.packingUnitList.map((item: any) => {
+                    return <Select.Option value={item.unitCode}>{item.name}</Select.Option>
+                  })}
+                </Select>
+              </>
+          }
+          return <></>
+        },
+      },
+      {
+        title: '所属SPU编码',
+        width: 150,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemCode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '规格',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'propertyNameAndValue',
+      }
+    ]
+  }
+
+  return (
+    <div>
+      <AddSelect
+        {...props}
+        modalTableProps={modalTableProps}
+      />
+    </div>
+  );
+};