@cniot/android-pda-components 0.2.20 → 0.2.21

package/packages/BaseLayout/BarcodeScan.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+import BaseLayoutContainer from './BaseLayoutContainer'
+import classNames from "classnames";
+import { playSound } from "../utils";
+
+const blankFunc = () => { };
+
+// onBarcodeScan 按下键才开始监听
+// onScanBarcode 一直监听
+export default class BarcodeScan extends React.Component {
+    constructor(props) {
+        super(props);
+        this._barcodeBeginScan = false;
+        this._handleBarcodeScan = e => {
+            const { onBarcodeScan } = this.props;
+            this._stopWork();
+            playSound('scan');
+            onBarcodeScan && onBarcodeScan(e.param);
+        }
+        this._startWork = e => {
+            document.addEventListener('BarcodeScan', this._handleBarcodeScan);
+            this._barcodeBeginScan = true;
+        }
+        this._stopWork = e => {
+            document.removeEventListener('BarcodeScan', this._handleBarcodeScan);
+        }
+        this._handleKeyDown = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            // console.log('keydown code: ', code, keyCode, key);
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                if (!this._barcodeBeginScan) {
+                    this._startWork();
+                }
+            }
+        }
+        this._handleKeyUp = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                this._stopWork();
+                this._barcodeBeginScan = false;
+            }
+        }
+
+        this.onScanBarcode = this.onScanBarcode.bind(this);
+    }
+
+    onScanBarcode(e){
+        this.props.onScanBarcode && this.props.onScanBarcode(e.param);
+    }
+
+    componentDidMount() {
+        const {onBarcodeScan} = this.props;
+        if(onBarcodeScan){
+            document.addEventListener('keydown', this._handleKeyDown);
+            document.addEventListener('keyup', this._handleKeyUp);
+        }
+        document.addEventListener('BarcodeScan', this.onScanBarcode);
+        WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'keyboard', 'method': 'changeScanMode', 'params': {'scanMode': 'barcode'}}", function (e) {
+            // alert('success ' + JSON.stringify(e));
+        }, function (e) {
+            // alert('failure ' + JSON.stringify(e));
+        });
+    }
+    componentWillUnmount() {
+        const {onBarcodeScan} = this.props;
+        if(onBarcodeScan){
+            document.removeEventListener('keydown', this._handleKeyDown);
+            document.removeEventListener('keyup', this._handleKeyUp);
+        }
+        document.removeEventListener('BarcodeScan', this.onScanBarcode)
+    }
+
+
+    render() {
+        // console.log('onBarcode render');
+
+        const props = this.props;
+        const { onBarcodeScan = blankFunc, ...opts } = props;
+
+        return (
+            <BaseLayoutContainer
+                {...opts}
+            />
+        )
+    }
+}
+
+

package/packages/BaseLayout/BaseLayoutContainer.jsx

@@ -0,0 +1,208 @@
+import React from "react";
+import "./index.less";
+import classNames from "classnames";
+import { WindVaneLog } from '../utils';
+
+const blankFunc = () => { };
+
+export default class BaseLayoutContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showLoading: false,
+    }
+    this._handleKeyUp = e => {
+      const { onScan = blankFunc, onEnter = blankFunc, onEsc = blankFunc, onDelete = blankFunc, scanMode = null } = this.props;
+
+      const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+      if (code === 'Enter') {
+        e.preventDefault();
+        onEnter(e);
+        return;
+      }
+      if (code === 'Delete') {
+        e.preventDefault();
+        onDelete(e);
+        return;
+      }
+      if (code === 'Esc') {
+        e.preventDefault();
+        onEsc(e);
+        return;
+      }
+    }
+    this._handleBeforeUnload = e => {
+      e.returnValue = ("确定离开当前页面吗？");
+      return true;
+    }
+    this._handleUnload = e => {
+      WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopRfidScan', 'params':null}", function (e) {
+        // alert('success ' + JSON.stringify(e));
+      }, function (e) {
+        // alert('failure ' + JSON.stringify(e));
+      });
+      const stopParam = {
+        tag: 'stopRfid',
+        level: 'd',
+        message: 'stop rfid scan!!!'
+      };
+      WindVaneLog(stopParam);
+
+      const leaveParam = {
+        tag: 'leavePage',
+        level: 'd',
+        message: 'leave page: ' + window.location.href,
+      }
+      WindVaneLog(stopParam);
+    }
+  }
+  componentDidMount() {
+    // console.log('这里增加监听');
+    // window.onbeforeunload = this._handleBeforeUnload;
+    window.onunload = this._handleUnload;
+    document.addEventListener('keyup', this._handleKeyUp);
+  }
+  componentWillUnmount() {
+    // console.log('这里关闭页面了');
+    window.onbeforeunload = null;
+    window.onunload = null;
+    document.removeEventListener('keyup', this._handleKeyUp)
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    if(nextProps.loading && !this.props.loading) {
+      this.setState({
+        showLoading: true,
+      })
+      if(nextProps.loadingTimeout) {
+        setTimeout(() => {
+          this.setState({
+            showLoading: false,
+          });
+        }, nextProps.loadingTimeout);
+      }
+    }
+    if(!nextProps.loading && this.state.showLoading) {
+      this.setState({
+        showLoading: false,
+      })
+    }
+    return true;
+  }
+
+  render() {
+    const props = this.props;
+    const { style = {}, header, footer, loading } = this.props;
+
+    return (
+      <div
+        className={classNames({ 'baselayout-wrapper': true, })} style={style}
+      >
+        {
+          header && <div className={classNames({ 'baselayout-header': true })}>
+            {header}
+          </div>
+        }
+        <div className={classNames({ 'baselayout-container': true })}>
+          {props.children}
+        </div>
+        {
+          footer && <div className={classNames({ 'baselayout-footer': true })}>
+            {footer}
+          </div>
+        }
+        {
+          this.state.showLoading ? (
+            <div className="loading">
+              {/* 加载中 */}
+            </div>
+          ) : null
+        }
+
+      </div>
+    )
+  }
+}
+
+
+// export default function BaseLayout(props) {
+//   console.log('render baseLayout:', props);
+
+//   const { style = {}, header, footer, continuousRfidScan = false, onRfidScan = blankFunc, onScan = blankFunc, onEnter = blankFunc, onEsc = blankFunc, onDelete = blankFunc } = props;
+
+//   // const [continuousRfidScanState, setContinuousRfidScanState] = useState(continuousRfidScan)
+
+//   // 监听按键事件
+//   useEffect(() => {
+//     const handleKeyUp = e => {
+//       // console.log(e);
+//       e.preventDefault();
+//       const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+//       if (code === 'F23' || code === 'F24') {
+//         // console.log('scan');
+//         onScan(e);
+//         return;
+//       }
+//       if (code === 'Enter') {
+//         onEnter(e);
+//         return;
+//       }
+//       if (code === 'Delete') {
+//         onDelete(e);
+//         return;
+//       }
+//       if (code === 'Esc') {
+//         onEsc(e);
+//         return;
+//       }
+//     }
+//     document.addEventListener('keyup', handleKeyUp);
+//     return () => {
+//       document.removeEventListener('keyup', handleKeyUp);
+//     }
+//   }, [])
+
+//   // 监听连扫
+//   useEffect(() => {
+//     const handleContinuousRfidScan = (ev) => {
+//       onRfidScan(ev.param);
+//     }
+//     if(continuousRfidScan) {
+//       document.addEventListener('ContinuousRfidScan', handleContinuousRfidScan, false);
+//       WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'startScan', 'params': null}", function (e) {
+//         // console.log('start success ' + JSON.stringify(e));
+//       }, function (e) {
+//         console.log('failure-1 ' + JSON.stringify(e));
+//       });
+//     }
+
+//     return () => {
+//       WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopScan', 'params':null}", function (e) {
+//         // console.log('stop success ' + JSON.stringify(e));
+//       }, function (e) {
+//         console.log('failure-2 ' + JSON.stringify(e));
+//       });
+//       document.removeEventListener('ContinuousRfidScan', handleContinuousRfidScan, false)
+//     }
+//   }, [])
+
+//   return (
+//     <div
+//       className={classNames({ 'baselayout-wrapper': true, })} style={style}
+//     >
+//       {
+//         header && <div className={classNames({ 'baselayout-header': true })}>
+//           {header}
+//         </div>
+//       }
+//       <div className={classNames({ 'baselayout-container': true })}>
+//         {props.children}
+//       </div>
+//       {
+//         footer && <div className={classNames({ 'baselayout-footer': true })}>
+//           {footer}
+//         </div>
+//       }
+//       {/* <div className="baselayout-paddingbottom"></div> */}
+//     </div>
+//   )
+// }

package/packages/BaseLayout/RfidOnce.jsx

@@ -0,0 +1,106 @@
+import React from "react";
+import BaseLayoutContainer from './BaseLayoutContainer'
+import classNames from "classnames";
+import { playSound } from "../utils";
+
+const blankFunc = () => { };
+
+export default class RfidOnce extends React.Component {
+    constructor(props) {
+        super(props);
+        this._rfidBeginScan = false;
+        this._handleRfidScan = e => {
+            const { onRfidOnce, onRfidBoxOnce, onRfidPalletOnce } = this.props;
+            const data = e.param;
+            const isBox = data.rfidData.startsWith("0F006");
+            const isPallet = data.rfidData.startsWith("0F011");
+
+            playSound('single_recog');
+
+            if(isPallet) {
+                let rfidData = data.rfidData;
+                data.originData = rfidData;
+                data.rfidData = rfidData.substr(5, 12)
+            }
+
+            if(onRfidBoxOnce && isBox) {
+                this._stopWork();
+                onRfidBoxOnce(data);
+            } else if(onRfidPalletOnce && isPallet) {
+                this._stopWork();
+                onRfidPalletOnce(data);
+            }
+            if(onRfidOnce){
+                this._stopWork();
+                onRfidOnce(data);
+            }
+        }
+        this._startWork = e => {
+            // console.log('start work');
+            document.addEventListener('ContinuousRfidScan', this._handleRfidScan);
+            WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'startScan', 'params': null}", function(e) {
+                // alert('success ' + JSON.stringify(e));
+            }, function(e) {
+                // alert('failure ' + JSON.stringify(e));
+            });
+            this._rfidBeginScan = true;
+        }
+        this._stopWork = e => {
+            // console.log('stop work');
+            document.removeEventListener('ContinuousRfidScan', this._handleRfidScan);
+            WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopRfidScan', 'params':null}", function(e) {
+            }, function(e) {
+            });
+        }
+        this._handleKeyDown = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                // console.log('keydown', this._rfidBeginScan);
+                if (!this._rfidBeginScan) {
+                    this._startWork();
+                }
+            }
+        }
+        this._handleKeyUp = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                // console.log('keyup stop');
+                this._stopWork();
+                this._rfidBeginScan = false;
+            }
+        }
+    }
+
+    componentDidMount() {
+        document.addEventListener('keydown', this._handleKeyDown);
+        document.addEventListener('keyup', this._handleKeyUp);
+        // document.addEventListener('ContinuousRfidScan', function (data) {
+        //     // console.log(JSON.stringify(data));
+        //     // console.log(data);
+        // }, false);
+
+        WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'keyboard', 'method': 'changeScanMode', 'params': {'scanMode': 'RFID'}}", function (e) {
+            // alert('success ' + JSON.stringify(e));
+        }, function (e) {
+            // alert('failure ' + JSON.stringify(e));
+        });
+    }
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this._handleKeyDown);
+        document.removeEventListener('keyup', this._handleKeyUp);
+        this._stopWork();
+    }
+
+    render() {
+        // console.log('onRfidOnce render');
+
+        const props = this.props;
+        const { onRfidOnce = blankFunc, ...opts } = props;
+
+        return (
+            <BaseLayoutContainer
+                {...opts}
+            />
+        )
+    }
+}

package/packages/BaseLayout/RfidScan.jsx

@@ -0,0 +1,118 @@
+import React from "react";
+import BaseLayoutContainer from './BaseLayoutContainer'
+import classNames from "classnames";
+
+const blankFunc = () => { };
+
+export default class RfidOnce extends React.Component {
+    static defaultProps = {
+        rfidReaderSleep: false,
+    }
+    constructor(props) {
+        super(props);
+        this._rfidBeginScan = false;
+        this._handleRfidScan = e => {
+            const { onRfidScan, onRfidBoxScan, onRfidPalletScan } = this.props;
+            const data = e.param;
+            const isBox = data.rfidData.startsWith("0F006");
+            const isPallet = data.rfidData.startsWith("0F011");
+            if(isPallet) {
+                let rfidData = data.rfidData;
+                data.originData = rfidData;
+                data.rfidData = rfidData.substr(5, 12)
+            }
+
+            if(isBox && onRfidBoxScan) {
+                onRfidBoxScan(data);
+            } else if(isPallet && onRfidPalletScan) {
+                onRfidPalletScan(data);
+            }
+            if(onRfidScan) {
+                onRfidScan(data);
+            }
+        }
+        this._startWork = e => {
+            document.addEventListener('ContinuousRfidScan', this._handleRfidScan);
+            WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'startScan', 'params': null}", function(e) {
+
+            }, function(e) {
+
+            });
+            this._rfidBeginScan = true;
+        }
+        this._stopWork = e => {
+            document.removeEventListener('ContinuousRfidScan', this._handleRfidScan);
+            // WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopScan', 'params':null}", function(e) {
+            // }, function(e) {
+            // });
+            WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopRfidScan', 'params':null}", function(e) {
+            }, function(e) {
+            });
+        }
+        this._handleKeyDown = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                if (!this._rfidBeginScan) {
+                    this._startWork();
+                }
+            }
+        }
+        this._handleKeyUp = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                this._stopWork();
+                this._rfidBeginScan = false;
+            }
+        }
+    }
+
+    componentDidMount() {
+        // console.log('Rfid Scan didMount');
+        const { autoRfidScan = false, rfidReaderSleep } = this.props;
+
+        WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'keyboard', 'method': 'changeScanMode', 'params': {'scanMode': 'RFID'}}", function (e) {
+            // alert('success ' + JSON.stringify(e));
+        }, function (e) {
+            // alert('failure ' + JSON.stringify(e));
+        });
+
+        if(!autoRfidScan) {
+            document.addEventListener('keydown', this._handleKeyDown);
+            document.addEventListener('keyup', this._handleKeyUp);
+        } else {
+            if(!rfidReaderSleep) {
+                this._startWork();
+            }
+        }
+    }
+    componentWillUnmount() {
+        // const { autoRfidScan = false } = this.props;
+        document.removeEventListener('keydown', this._handleKeyDown);
+        document.removeEventListener('keyup', this._handleKeyUp);
+        this._stopWork();
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if(this.props.autoRfidScan && (this.props.rfidReaderSleep !== nextProps.rfidReaderSleep) ) {
+            if(!nextProps.rfidReaderSleep) {
+                this._startWork();
+            } else {
+                this._stopWork();
+            }
+        }
+        return true;
+    }
+
+
+    render() {
+        // console.log('onRfidScan render');
+
+        const props = this.props;
+        const { onRfidScan = blankFunc, autoRfidScan, ...opts } = props;
+
+        return (
+            <BaseLayoutContainer
+                {...opts}
+            />
+        )
+    }
+}

package/packages/BaseLayout/doc.jsx

@@ -0,0 +1,177 @@
+import React, {useState} from "react";
+import BaseLayout from "./index";
+import Title from '../PdaTitle';
+import InfoCard from '../InfoCard';
+import Button from '../Button';
+import Presentation from '../Presentation';
+
+// const ButtonGroup = Button.Group;
+
+export default function () {
+  const [loading, setLoading] = useState(false);
+
+  const header = <Title></Title>;
+  const footer = (
+    <Button.Group>
+      <Button type="cutout" onClick={e => {
+        console.log('cancle')
+        setLoading(true);
+        if(!loading) {
+          setTimeout(() => {
+            setLoading(false);
+          }, 2000);
+        }
+      }}>取消</Button>
+      <Button type="primary">确认</Button>
+    </Button.Group>
+  )
+  const infoCard = [{}, {}, {}]
+
+  return (
+    <div>
+      <h1>Scan</h1>
+      <p>扫码组件</p>
+      <h2>示例</h2>
+      {/* const { type="default", width, style = {}, onClick } = this.props; */}
+      <div className="light-block" style={{display: 'flex'}}>
+        <div style={{width: 480, height: 800, position: 'relative'}}>
+          <BaseLayout
+            style={{backgroundColor: 'black', marginRight: 20,}}
+            header={header}
+            footer={footer}
+            loading={loading}
+            // loadingTimeout={2000}
+          >
+            <Presentation text="请靠近箱码进行识别" ></Presentation>
+
+          </BaseLayout>
+        </div>
+        <div style={{width: 480, height: 800, position: 'relative'}}>
+          <BaseLayout
+            style={{backgroundColor: 'black'}}
+            header={header}
+            footer={footer}
+          >
+            {
+              infoCard.map((item, index) => {
+                return <InfoCard
+                  key={index}
+                  title="待拣件数"
+                  highlightInfo="800"
+                  highlightInfoCN = "件"
+                  highlightSubInfo="/800"
+                  highlightSubInfoCN="件"
+                  boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
+                  style={{
+                    width: '400px',
+                    backgroundColor: 'black',
+                  }}
+                  theme='dark'
+                  infoList={
+                    [
+                      {label: '商品条码', content: '623126388798'},
+                      {label: '截止日期', content: '2022-07-25'},
+                      {label: '产品名称', content: '商品的名称'},
+                      {label: '品号', content: '12398765423'},
+                    ]
+                  }
+                />
+              })
+            }
+          </BaseLayout>
+        </div>
+      </div>
+      <code className="code">{`
+        const header = <Title></Title>;
+        const footer = (
+          <Button.Group>
+            <Button type="cutout" onClick={e => console.log('cancle')}>取消</Button>
+            <Button type="primary">确认</Button>
+          </Button.Group>
+        )
+
+        <BaseLayout
+          header={header}
+          footer={footer}
+        >
+          <Presentation text="请靠近箱码进行识别" ></Presentation>
+        </BaseLayout>
+      `}</code>
+      <h2>参数</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>header</td>
+            <td>吸顶组件</td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>footer</td>
+            <td>吸底组件</td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>onBarcodeScan</td>
+            <td>注册扫描二维码/条形码[徐福记项目专用]</td>
+            <td>Function</td>
+            <td>data => data.scanData</td>
+          </tr>
+
+          <tr>
+            <td>onScanBarcode</td>
+            <td>注册扫描二维码/条形码[推荐使用]</td>
+            <td>Function</td>
+            <td>data => data.scanData</td>
+          </tr>
+          
+          <tr>
+            <td>onRfidOnce</td>
+            <td>按键按下/抬起，只触发第一个rfid码</td>
+            <td>Function</td>
+            <td>data => {}</td>
+          </tr>
+          <tr>
+            <td>onRfidBoxOnce</td>
+            <td>按键按下/抬起，只触发第一个 rfid 箱码</td>
+            <td>Function</td>
+            <td>data => {}</td>
+          </tr>
+          <tr>
+            <td>onRfidPalletOnce</td>
+            <td>按键按下/抬起，只触发第一个 rfid 栈板码</td>
+            <td>Function</td>
+            <td>data => {}</td>
+          </tr>
+          <tr>
+            <td>onRfidScan</td>
+            <td>按键按下/抬起触发 rfid 连续扫描</td>
+            <td>Function</td>
+            <td>data => {}</td>
+          </tr>
+          <tr>
+            <td>onRfidBoxScan</td>
+            <td>按键按下/抬起触发 rfid 箱码连续扫描</td>
+            <td>Function</td>
+            <td>data => {}</td>
+          </tr>
+          <tr>
+            <td>onRfidPalletScan</td>
+            <td>按键按下/抬起触发 rfid 栈板码连续扫描</td>
+            <td>Function</td>
+            <td>data => {}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}