Skip to content

M
max_android_panel
Commit febaa0ed by Zhang Xin
Options

自己梳ç理捕èŽ补货逻辑

parent 227254f4
Showing with 103 additions and 58 deletions
client/components/RecoveryComponent/RecoveryScanPage/index.css
...@@ -27,21 +27,6 @@ ...@@ -27,21 +27,6 @@
margin-top: 110px; margin-top: 110px;
} }
.replenishScanPageErrorSku .handleForgetSku{
line-height: 90px;
}
.replenishScanPageErrorSku .btn{
flex-direction: column;
align-items: center;
}
.replenishScanPageForgetSku .replenishSkuInfo{
margin-top: 8%;
}
.recoveryScanDom{ .recoveryScanDom{
position: relative; position: relative;
width: 100%; width: 100%;
......
client/components/ReplenishComponent/ReplenishScanPage/ReplenishScanPage.jsx
...@@ -15,15 +15,33 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -15,15 +15,33 @@ export default class ReplenishScanPage extends React.Component{
this.makeSureScanOver = this.makeSureScanOver.bind(this); this.makeSureScanOver = this.makeSureScanOver.bind(this);
this.submitBarcode = this.submitBarcode.bind(this); this.submitBarcode = this.submitBarcode.bind(this);
this.failSubmit = this.failSubmit.bind(this); this.failSubmit = this.failSubmit.bind(this);
this.changeShowInput = this.changeShowInput.bind(this);
this.getScanDom = this.getScanDom.bind(this);
this.state = { this.state = {
barcodeText : '' barcodeText : '',
barcodeErrorText : '',
showInput : false
} }
} }
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps){
if(nextProps.replenishInfo && nextProps.replenishInfo.errorInfo){ if(nextProps.replenishInfo && nextProps.replenishInfo.errorInfo && nextProps.replenishInfo.errorInfo.errorMessage){
//有错误信息，再对应页面弹出错误信息弹窗，要区分错误信息 //有错误信息，再对应页面弹出错误信息弹窗，要区分错误信息
nextProps.hidePopup();
if(nextProps.replenishInfo.errorInfo.errorType){
switch (nextProps.replenishInfo.errorInfo.errorType) {
case "NT":
case "NA":
this.outReplenish();
break;
case "NS":
this.errorSku();
break;
}
}else{
//没有错误类型的错误
console.log("ReplenishScanPage ",nextProps.replenishInfo.errorInfo.errorMessage)
}
} }
} }
...@@ -45,9 +63,9 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -45,9 +63,9 @@ export default class ReplenishScanPage extends React.Component{
getBarcodeInput(){ getBarcodeInput(){
return ( return (
<div className={"barcodeInputDom"}> <div className={"barcodeInputDom"}>
<div className={"barcodeInputText font30"}>条形码输入错误，请重新输入</div> <div className={"barcodeInputText font30"}>{this.state.barcodeErrorText}</div>
<input value={this.state.barcodeText} className={"barcodeInput font30 col000"} type="text" onChange={this.handleInputChange.bind(this)}/> <input value={this.state.barcodeText} className={"barcodeInput font30 col000"} type="text" onChange={this.handleInputChange.bind(this)}/>
<div className={"barcodeInputTip font30 colff775c"}><span className={"colfff"}>or</span>条形码扫描</div> <div className={"barcodeInputTip font30 colff775c"} onClick={()=>this.changeShowInput()}><span className={"colfff"}>or</span>条形码扫描</div>
<Button btnContainer={"barcodeInputBarcode font32 backff775c colfff"} key={"barcodeInputBarcode"} text={"确定"} option={this.submitBarcode}/> <Button btnContainer={"barcodeInputBarcode font32 backff775c colfff"} key={"barcodeInputBarcode"} text={"确定"} option={this.submitBarcode}/>
</div> </div>
) )
...@@ -57,13 +75,14 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -57,13 +75,14 @@ export default class ReplenishScanPage extends React.Component{
//扫描货品异常 //扫描货品异常
errorSku(){ errorSku(){
//货道已满解决办法 //货道已满解决办法
let {showPopup,hidePopup} = this.props; let {showPopup,hidePopup,barcodeInfo} = this.props;
let btnDom = <Button btnContainer={"replenishScanPageErrorSkuBtn font32 backff775c colfff"} key={"replenishScanPageErrorSkuBtn"} text={"确认扫描完毕"} option={this.makeSureScanOver}/> let {product} = barcodeInfo;
let btnDom = <Button btnContainer={"replenishScanPageErrorSkuBtn font32 backff775c colfff"} style={{marginTop:'10%'}} key={"replenishScanPageErrorSkuBtn"} text={"确认扫描完毕"} option={this.makeSureScanOver}/>
let popDom = let popDom =
<PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo replenishScanPageErrorSku"}> <PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo replenishScanPageErrorSku"}>
<div className={"icon iconfont icon-exclamation colf5a623 font150"} /> <div className={"icon iconfont icon-exclamation colf5a623 font150"} />
<div className={"text font40 col000"}> <div className={"text font40 col000"}>
<p>您需要补完【XXX】，才能补其他货品</p> <p>您需要补完【{product.skuName || ""}】，才能补其他货品</p>
</div> </div>
<div className={"btn"}> <div className={"btn"}>
{btnDom} {btnDom}
...@@ -76,7 +95,7 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -76,7 +95,7 @@ export default class ReplenishScanPage extends React.Component{
//忘记样子 //忘记样子
forgetSku(){ forgetSku(){
let {showPopup,hidePopup} = this.props; let {showPopup,hidePopup} = this.props;
let btnDom = <Button btnContainer={"replenishScanPageForgetSkuBtn font32 backff775c colfff"} key={"replenishScanPageForgetSkuBtn"} text={"继续扫描"} option={hidePopup}/> let btnDom = <Button btnContainer={"replenishScanPageForgetSkuBtn font32 backff775c colfff"} style={{marginTop:'10%'}} key={"replenishScanPageForgetSkuBtn"} text={"继续扫描"} option={hidePopup}/>
let popDom = let popDom =
<PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo replenishScanPageForgetSku"}> <PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo replenishScanPageForgetSku"}>
{this.getSkuInfo()} {this.getSkuInfo()}
...@@ -91,9 +110,9 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -91,9 +110,9 @@ export default class ReplenishScanPage extends React.Component{
outReplenish(){ outReplenish(){
//货道已满解决办法 //货道已满解决办法
let {showPopup,hidePopup} = this.props; let {showPopup,hidePopup} = this.props;
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode"} text={"关闭"} option={hidePopup}/> let btnDom = <Button btnContainer={"replenishContainerQrcode font32 backff775c colfff"} style={{marginTop:'10%'}} key={"replenishContainerWrongQrcode"} text={"关闭"} option={hidePopup}/>
let popDom = let popDom =
<PopModel popupTitle={"扫描货品异常"} classContainer={"recoveryPopInfo"}> <PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo"}>
<div className={"icon iconfont icon-wrong font150"} /> <div className={"icon iconfont icon-wrong font150"} />
<div className={"text font40 col000"}> <div className={"text font40 col000"}>
<p>此货品不在本次补货范围内，请放入物流回收箱！</p> <p>此货品不在本次补货范围内，请放入物流回收箱！</p>
...@@ -109,7 +128,7 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -109,7 +128,7 @@ export default class ReplenishScanPage extends React.Component{
let {barcodeInfo} = this.props; let {barcodeInfo} = this.props;
return( return(
<div className={"replenishSkuInfo"}> <div className={"replenishSkuInfo"}>
<div className={"skuName font30 col333"}>商品名称：雪碧</div> <div className={"skuName font30 col333"}>商品名称：{barcodeInfo.skuName || ""}</div>
<div className={"skuInfo"}> <div className={"skuInfo"}>
<div className={"skuImg"}> <div className={"skuImg"}>
<img src="" alt=""/> <img src="" alt=""/>
...@@ -119,12 +138,12 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -119,12 +138,12 @@ export default class ReplenishScanPage extends React.Component{
</div> </div>
<div className={"skuPos col333 font30"}> <div className={"skuPos col333 font30"}>
<ul> <ul>
<li><span className={"skuPosTitle fl"}>所在区域：</span>A区域<span className={"colff775c showAreaImg"}>区域照片</span></li> <li><span className={"skuPosTitle fl"}>所在区域：</span>{barcodeInfo.area || ""}区域<span className={"colff775c showAreaImg"}>区域照片</span></li>
<li className={""}> <li className={""}>
<span className={"skuPosTitle"}>货道信息：</span> <span className={"skuPosTitle"}>货道信息：</span>
<span className={""}>一个字一个字一个字一个字一个字一个字</span> <span className={""}>{barcodeInfo.position || ""}</span>
</li> </li>
<li><span className={"skuPosTitle fl"}>货道编号：</span>一个字</li> <li><span className={"skuPosTitle fl"}>货道编号：</span>{product.positionNum || ""}</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -158,34 +177,16 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -158,34 +177,16 @@ export default class ReplenishScanPage extends React.Component{
getBarCodeProductInfo(barcodeText); getBarCodeProductInfo(barcodeText);
}else{ }else{
//提示条形码不正确 //提示条形码不正确
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode2"} text={"关闭"} option={this.failSubmit}/> this.setState({
let popDom = barcodeErrorText : '条形码输入错误，请重新输入'
<PopModel popupTitle={"补货-输入提示"} classContainer={"recoveryPopInfo"}> })
<div className={"icon iconfont icon-wrong font150"} />
<div className={"text font40 col000"}>
<p>您输入的条形码格式不正确</p>
</div>
<div className={"btn"}>
{btnDom}
</div>
</PopModel>
showPopup({popupChild:popDom});
} }
}else{ }else{
//提示输入条形码 //提示输入条形码
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode1"} text={"关闭"} option={this.failSubmit}/> this.setState({
let popDom = barcodeErrorText : '请输入条形码'
<PopModel popupTitle={"补货-输入提示"} classContainer={"recoveryPopInfo"}> })
<div className={"icon iconfont icon-wrong font150"} />
<div className={"text font40 col000"}>
<p>请输入条形码</p>
</div>
<div className={"btn"}>
{btnDom}
</div>
</PopModel>
showPopup({popupChild:popDom});
} }
} }
...@@ -201,6 +202,29 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -201,6 +202,29 @@ export default class ReplenishScanPage extends React.Component{
} }
/**
* 调用扫描条形码
* @returns {*}
*/
getScanDom(){
let {headerInfo} = this.props;
return (
<div className={"replenishScanDom"}>
<div className={"colff775c scanTips font30"} onClick={()=>this.changeShowInput()}><span className={"colfff font26"}>or</span> 手动输入条形码</div>
</div>
)
}
/**
* 条形码扫描和输入框切换
*/
changeShowInput(){
this.setState({
showInput : !this.state.showInput,
barcodeText :""
})
}
render(){ render(){
let props = this.props; let props = this.props;
...@@ -213,7 +237,9 @@ export default class ReplenishScanPage extends React.Component{ ...@@ -213,7 +237,9 @@ export default class ReplenishScanPage extends React.Component{
> >
{this.getOtherHeader()} {this.getOtherHeader()}
</Header> </Header>
{this.getBarcodeInput()} {
this.state.showInput ? this.getBarcodeInput() : this.getScanDom()
}
</div> </div>
) )
} }
......
client/components/ReplenishComponent/ReplenishScanPage/index.css
...@@ -37,4 +37,36 @@ ...@@ -37,4 +37,36 @@
.replenishScanPageForgetSku .replenishSkuInfo{ .replenishScanPageForgetSku .replenishSkuInfo{
margin-top: 8%; margin-top: 8%;
}
.replenishScanDom{
position: relative;
width: 100%;
height: 90%;
text-align: center;
}
.replenishScanDom>div{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.replenishScanDom .scanText{
top: 8%;
}
.replenishScanDom .scanTips{
top: 80%;
}
.replenishScanDom .scanTips>span{
margin-right: 20px;
}
.replenishScanDom .scanInfo{
top: 90%;
width: 100%;
white-space: nowrap;
}
.replenishScanDom .scanInfo>span{
margin-right: 30px;
}
.replenishScanDom .scanInfo>span:last-child{
margin-right: 0;
} }
\ No newline at end of file
client/containers/ReplenishContainer/ReplenishContainer.jsx
...@@ -33,17 +33,18 @@ export default class ReplenishContainer extends React.Component{ ...@@ -33,17 +33,18 @@ export default class ReplenishContainer extends React.Component{
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps){
console.log("componentWillReceiveProps ",nextProps) console.log("componentWillReceiveProps ",nextProps)
if(nextProps.barcodeInfo && nextProps.barcodeInfo.product && nextProps.replenishInfo && !nextProps.replenishInfo.errorInfo){ if(nextProps.barcodeInfo && nextProps.barcodeInfo.product && nextProps.replenishInfo && (!nextProps.replenishInfo.errorInfo || !nextProps.replenishInfo.errorInfo.errorMessage)){
//有条形码信息且 没有错误信息 进入条形码扫描成功页面 //有条形码信息且 没有错误信息 进入条形码扫描成功页面
console.log("in ",this.state.pageType,typeof this.state.pageType); console.log("in ",this.state.pageType,typeof this.state.pageType);
if(this.state.pageType !== 2){ if(this.state.pageType !== 2){
console.log("2222222") console.log("2222222");
nextProps.hidePopup();
this.setState({ this.setState({
pageType : 2, pageType : 2,
showScanQrcode : false showScanQrcode : false
}) })
} }
}else if(nextProps.replenishInfo && nextProps.replenishInfo.errorInfo){ }else if(nextProps.replenishInfo && nextProps.replenishInfo.errorInfo && nextProps.replenishInfo.errorInfo.errorMessage){
//有错误信息，再对应页面弹出错误信息弹窗，要区分错误信息 //有错误信息，再对应页面弹出错误信息弹窗，要区分错误信息
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment