@bit-sun/business-component 3.1.7 → 3.1.8

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

@@ -1,84 +1,84 @@
----
-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，则不校验库存
-   customerColumnsMapping: [
-      {
-        title: 'SKU编码',
-        name: 'skuCode'
-      },
-      {
-        title: '批号',
-        name: 'lotNumberCode'
-      },
-      {
-        title: '数量',
-        name: 'quantity'
-      }
-  ] // 自定义展示列
- }
- 
-  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，则不校验库存
+   customerColumnsMapping: [
+      {
+        title: 'SKU编码',
+        name: 'skuCode'
+      },
+      {
+        title: '批号',
+        name: 'lotNumberCode'
+      },
+      {
+        title: '数量',
+        name: 'quantity'
+      }
+  ] // 自定义展示列
+ }
+ 
+  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,82 +1,82 @@
-// @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,
-    otherModalProps = {},
-  } = 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} {...otherModalProps} >
-          <DataValidation
-            {...props}
-            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,
+    otherModalProps = {},
+  } = 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} {...otherModalProps} >
+          <DataValidation
+            {...props}
+            onRef={(ref) => { dataValidationRef = ref }}
+            columns={columns}
+            validDataUrl={validDataUrl}
+            isBrandAuth={isBrandAuth}
+            isCheckStockNum={isCheckStockNum}
+          />
+        </Modal>
+      ) || ''}
+    </div>
+  );
+};
+
+export default CommodityEntry;

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

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Alert } from 'antd';
-import './index.less';
-
-export default (props: any) => {
-  const { message, type='info', ...reset } = props
-  return (
-    <div style={{ width: '100%', background: '#fff', padding: '0 20px' }} className={'common_Alert'}>
-      <Alert
-        style={{
-          borderColor: '#005CFF',
-          background: '#e5eeff',
-          borderRadius: '4px',
-        }}
-        message={message}
-        type={type}
-        showIcon
-        closable
-        {...reset}
-      />
-    </div>
-  )
-}
+import React from 'react';
+import { Alert } from 'antd';
+import './index.less';
+
+export default (props: any) => {
+  const { message, type='info', ...reset } = props
+  return (
+    <div style={{ width: '100%', background: '#fff', padding: '0 20px' }} className={'common_Alert'}>
+      <Alert
+        style={{
+          borderColor: '#005CFF',
+          background: '#e5eeff',
+          borderRadius: '4px',
+        }}
+        message={message}
+        type={type}
+        showIcon
+        closable
+        {...reset}
+      />
+    </div>
+  )
+}

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

@@ -1,121 +1,121 @@
-.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;
-    }
-  }
-}
+.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;
+    }
+  }
+}