@bit-sun/business-component 2.4.23 → 2.4.24

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

@@ -1,70 +1,70 @@
----
-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 = () => {
-   console.log('关闭弹窗处理函数回调，可以处理刷新表格等操作（非必传）')
- }
-
-  const callbackHandleOk = (resultData, callback) => {
-    console.log('确定操作，可获取到成功录入的商品，做一系列操作')
-    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,
-   isCheckStockNum: false   // 默认为true，校验库存数量，false，则不校验库存
- }
- 
-  return (
-    <div>
-      <CommodityEntry {...props} />
-      <br />
-      <div>已录入sku有：{choosedSku.join(',')}</div>
-    </div>
-  );
-};
-```
-
-More skills for writing demo: https://d.umijs.org/guide/demo-principle
+---
+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 = () => {
+   console.log('关闭弹窗处理函数回调，可以处理刷新表格等操作（非必传）')
+ }
+
+  const callbackHandleOk = (resultData, callback) => {
+    console.log('确定操作，可获取到成功录入的商品，做一系列操作')
+    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,
+   isCheckStockNum: false   // 默认为true，校验库存数量，false，则不校验库存
+ }
+ 
+  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

@@ -1,80 +1,80 @@
-// @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 = '录入商品',
-    buttonProps = {},
-    callbackHideModal,
-    callbackHandleOk,
-    columns=["skuCode", "quantity", "price"],
-    validDataUrl="/items/sku/import/check",
-    isBrandAuth = true, // 默认做品牌过滤
-    isCheckStockNum = true
-  } = 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} {...buttonProps}>{buttonName}</Button>
-      {modalProps.visible && (
-        <Modal {...modalProps} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true} zIndex={15}>
-          <DataValidation
-            onRef={(ref) => { dataValidationRef = ref }}
-            columns={columns}
-            validDataUrl={validDataUrl}
-            isBrandAuth={isBrandAuth}
-            isCheckStockNum={isCheckStockNum}
-          />
-        </Modal>
-      ) || ''}
-    </div>
-  );
-};
-
-export default CommodityEntry;
+// @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 = '录入商品',
+    buttonProps = {},
+    callbackHideModal,
+    callbackHandleOk,
+    columns=["skuCode", "quantity", "price"],
+    validDataUrl="/items/sku/import/check",
+    isBrandAuth = true, // 默认做品牌过滤
+    isCheckStockNum = true
+  } = 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} {...buttonProps}>{buttonName}</Button>
+      {modalProps.visible && (
+        <Modal {...modalProps} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true} zIndex={15}>
+          <DataValidation
+            onRef={(ref) => { dataValidationRef = ref }}
+            columns={columns}
+            validDataUrl={validDataUrl}
+            isBrandAuth={isBrandAuth}
+            isCheckStockNum={isCheckStockNum}
+          />
+        </Modal>
+      ) || ''}
+    </div>
+  );
+};
+
+export default CommodityEntry;

package/src/components/Business/CommonGuideWrapper/index.less

@@ -1,112 +1,121 @@
-.form-guide {
-  cursor: pointer;
-  position: fixed;
-  right: 5px;
-  color: #B1BAD4;
-  padding: 5px 0;
-  width: 48px;
-  z-index: 10;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: #141620;
-  .form-guide-top {
-    padding: 0px 10px;
-    display: flex;
-    justify-content: center;
-  }
-  border-radius: 5px;
-  .form-guide-center {
-    border-top: 1px solid #6E7588;
-    border-bottom: 1px solid #6E7588;
-    padding: 0px 10px;
-  }
-  .form-guide-item {
-    width: 28px;
-    padding: 5px 0;
-    display: block;
-    word-break: break-all;
-    color: #B1BAD4;
-    font-size: 14px;
-    line-height: 16px;
-    position: relative;
-  }
-  .form-guide-item::after {
-    content: '';
-    display: block;
-    width: 15px;
-    height: 1px;
-    background-color: #6E7588;
-    position: absolute;
-    bottom: 0px;
-    left: 7px;
-  }
-
-  .form-guide-bottom {
-    padding: 5px 10px;
-    display: flex;
-    justify-content: center;
-  }
-  .form-guide-item:last-child::after {
-    content: '';
-    display: none;
-    width: 15px;
-    height: 1px;
-    background-color: #6E7588;
-    position: absolute;
-    bottom: 0px;
-    left: 7px;
-  }
-}
-
-.white-card.bitsun-form-card-class {
-  .ant-card-body {
-    background-color: #FFFFFF;
-    padding: 0px;
-  }
-}
-
-.bitsun-form-card-class {
-  &>.ant-card-body {
-    margin-bottom: 10px;
-  }
-}
-
-.bitsun-form-card-class {
-  .ant-card-head {
-    border: 0px;
-    padding: 0px;
-    height: 48px;
-  }
-
-  .ant-card-body {
-    padding: 12px 0 0;
-    margin-top: -4px;
-    background-color: #F3F3F3;
-  }
-
-  .ant-card-head-title {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    color: #000000;
-    font-weight: 600;
-    font-family: PingFangSC;
-    background-color: #FFFFFF;
-    padding: 8px 0;
-    margin: 0px;
-    .title-left-line {
-      display: inline-block;
-      width: 4px;
-      height: 100%;
-      background-color: #005CFF;
-      height: 20px;
-      margin-right: 16px;
-    }
-  }
-}
-
-.field-group-hidden {
-  .ant-card-body {
-    display: none !important;
-  }
-}
+.guide-wrapper {
+  .form-guide {
+    cursor: pointer;
+    position: fixed;
+    right: 5px;
+    color: #B1BAD4;
+    padding: 5px 0;
+    width: 48px;
+    z-index: 10;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: #141620;
+
+    .form-guide-top {
+      padding: 0px 10px;
+      display: flex;
+      justify-content: center;
+    }
+
+    border-radius: 5px;
+
+    .form-guide-center {
+      border-top: 1px solid #6E7588;
+      border-bottom: 1px solid #6E7588;
+      padding: 0px 10px;
+    }
+
+    .form-guide-item {
+      width: 28px;
+      padding: 5px 0;
+      display: block;
+      word-break: break-all;
+      color: #B1BAD4;
+      font-size: 14px;
+      line-height: 16px;
+      position: relative;
+    }
+
+    .form-guide-item::after {
+      content: '';
+      display: block;
+      width: 15px;
+      height: 1px;
+      background-color: #6E7588;
+      position: absolute;
+      bottom: 0px;
+      left: 7px;
+    }
+
+    .form-guide-bottom {
+      padding: 5px 10px;
+      display: flex;
+      justify-content: center;
+    }
+
+    .form-guide-item:last-child::after {
+      content: '';
+      display: none;
+      width: 15px;
+      height: 1px;
+      background-color: #6E7588;
+      position: absolute;
+      bottom: 0px;
+      left: 7px;
+    }
+  }
+
+  .white-card.bitsun-form-card-class {
+    .ant-card-body {
+      background-color: #FFFFFF;
+      padding: 0px;
+    }
+  }
+
+  .bitsun-form-card-class {
+    &>.ant-card-body {
+      margin-bottom: 10px;
+    }
+  }
+
+  .bitsun-form-card-class {
+    .ant-card-head {
+      border: 0px;
+      padding: 0px;
+      height: 48px;
+    }
+
+    .ant-card-body {
+      padding: 12px 0 0;
+      margin-top: -4px;
+      background-color: #F3F3F3;
+    }
+
+    .ant-card-head-title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      color: #000000;
+      font-weight: 600;
+      font-family: PingFangSC;
+      background-color: #FFFFFF;
+      padding: 8px 0;
+      margin: 0px;
+
+      .title-left-line {
+        display: inline-block;
+        width: 4px;
+        height: 100%;
+        background-color: #005CFF;
+        height: 20px;
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .field-group-hidden {
+    .ant-card-body {
+      display: none !important;
+    }
+  }
+}

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

@@ -1,39 +1,39 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 业务组件
-  order: 1
-title: 模块导航容器组件
-order: 1
----
-
-# GuideWrapper
-
-
-## 容器模块导航
-
-```tsx
-import React, { useState } from 'react';
-import { GuideWrapper } from '../../../index.ts';
-
-export default () => {
-  const { Field } = GuideWrapper;
-
-  return (
-     <GuideWrapper>
-        <Field id='test1' title='基础信息'>
-          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块一</div>
-        </Field>    
-        <Field id='test2' title='销售信息' isWhiteCard={true}>
-          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块二</div>
-        </Field>    
-        <Field id='test3' title='其他信息'>
-          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块三</div>
-        </Field>    
-     </GuideWrapper>
-
-  );
-};
-```
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 模块导航容器组件
+order: 1
+---
+
+# GuideWrapper
+
+
+## 容器模块导航
+
+```tsx
+import React, { useState } from 'react';
+import { GuideWrapper } from '../../../index.ts';
+
+export default () => {
+  const { Field } = GuideWrapper;
+
+  return (
+     <GuideWrapper>
+        <Field id='test1' title='基础信息'>
+          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块一</div>
+        </Field>    
+        <Field id='test2' title='销售信息' isWhiteCard={true}>
+          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块二</div>
+        </Field>    
+        <Field id='test3' title='其他信息'>
+          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块三</div>
+        </Field>    
+     </GuideWrapper>
+
+  );
+};
+```