@bit-sun/business-component 1.1.21 → 1.1.24

package/package.json

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

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

@@ -0,0 +1,69 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 商品录入器
+order: 0
+---
+
+# CommodityEntry
+
+## 商品录入器
+
+```tsx
+import React, { useState } from 'react';
+import { CommodityEntry } from '../../../index';
+
+export default () => {
+ const [choosedSku, setChoosedSku] = useState([]);
+ 
+ const callbackHideModal = () => {
+   alert('关闭弹窗处理函数回调，可以处理刷新表格等操作（非必传）')
+ }
+
+  const callbackHandleOk = (resultData, callback) => {
+    alert('确定操作，可获取到成功录入的商品，做一系列操作')
+    console.log(resultData)
+    // 一般拿到导入数据是做请求接口操作
+    // import {request} from "bssula";
+    // request({
+    //   url: `/bop/api/sku/import/save`,
+    //   method: "POST",
+    //   successMessage: "操作成功",
+    //   convertParams: () => {
+    //     const targetData = resultData.successData;
+    //     return {
+    //       columns: ['skuCode', 'quantity', 'price'],
+    //       data: targetData
+    //     };
+    //   },
+    //   converter: () => {
+    //     props.hideModal()
+    //   },
+    // });
+    
+    // 示例处理
+    setChoosedSku(resultData.successData.map((i: any) => i.skuCode))
+    
+    callback()
+  }
+ 
+ const props = {
+   callbackHideModal,
+   callbackHandleOk
+ }
+ 
+  return (
+    <div>
+      <CommodityEntry {...props} />
+      <br />
+      <div>已录入sku有：{choosedSku.join(',')}</div>
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

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

@@ -0,0 +1,75 @@
+// @ts-nocheck
+import React, { useRef, useState } from 'react';
+import { Modal, Button, message } from 'antd';
+import DataValidation from '@/components/Functional/DataValidation';
+
+const CommodityEntry = (props: any) => {
+  let dataValidationRef: DataValidation = useRef();
+
+  const {
+    buttonName=' + 录入商品',
+    modalTitle = '录入商品',
+    callbackHideModal,
+    callbackHandleOk,
+    columns=["skuCode", "quantity", "price"],
+    validDataUrl="/bop/api/recordDetailImport/check"
+  } = props;
+
+  const [modalProps, setModalProps]: any = useState({
+    maskClosable: false,
+    width: 800,
+    visible: false,
+    title: modalTitle,
+    okText: '确定',
+    cancelText: '取消',
+    hideModal: () => {
+      setModalProps(() => ({ ...modalProps, visible: false }));
+      callbackHideModal && callbackHideModal()
+    },
+  });
+
+  const handleOk = () => {
+    // 方法获取当前组件内部的数据，然后进行自身的业务操作
+    const resultData = dataValidationRef.getValidateData();
+
+    if (!resultData.successData.length) {
+      message.error("无校验通过数据，请校验数据");
+      return;
+    }
+
+    if (resultData.failData.length) {
+      message.error(`有${resultData.failData.length}条校验失败数据`);
+      return;
+    }
+
+    callbackHandleOk(resultData, () => {
+      modalProps.hideModal()
+    })
+
+  }
+
+  const handleShowModal = () => {
+    setModalProps({ ...modalProps, visible: true})
+  }
+
+  const handleCancel = () => {
+    modalProps.hideModal()
+  }
+
+  return (
+    <div>
+      <Button onClick={handleShowModal}>{buttonName}</Button>
+      {modalProps.visible && (
+        <Modal {...modalProps} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true} zIndex={15}>
+          <DataValidation
+            onRef={(ref) => { dataValidationRef = ref }}
+            columns={columns}
+            validDataUrl={validDataUrl}
+          />
+        </Modal>
+      ) || ''}
+    </div>
+  );
+};
+
+export default CommodityEntry;