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 @@
margin-top: 110px;
}
.replenishScanPageErrorSku .handleForgetSku{
line-height: 90px;
}
.replenishScanPageErrorSku .btn{
flex-direction: column;
align-items: center;
}
.replenishScanPageForgetSku .replenishSkuInfo{
margin-top: 8%;
}
.recoveryScanDom{
position: relative;
width: 100%;
......
client/components/ReplenishComponent/ReplenishScanPage/ReplenishScanPage.jsx
......@@ -15,15 +15,33 @@ export default class ReplenishScanPage extends React.Component{
this.makeSureScanOver = this.makeSureScanOver.bind(this);
this.submitBarcode = this.submitBarcode.bind(this);
this.failSubmit = this.failSubmit.bind(this);
this.changeShowInput = this.changeShowInput.bind(this);
this.getScanDom = this.getScanDom.bind(this);
this.state = {
barcodeText : ''
barcodeText : '',
barcodeErrorText : '',
showInput : false
}
}
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{
getBarcodeInput(){
return (
<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)}/>
<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}/>
</div>
)
......@@ -57,13 +75,14 @@ export default class ReplenishScanPage extends React.Component{
//扫描货品异常
errorSku(){
//货道已满解决办法
let {showPopup,hidePopup} = this.props;
let btnDom = <Button btnContainer={"replenishScanPageErrorSkuBtn font32 backff775c colfff"} key={"replenishScanPageErrorSkuBtn"} text={"确认扫描完毕"} option={this.makeSureScanOver}/>
let {showPopup,hidePopup,barcodeInfo} = this.props;
let {product} = barcodeInfo;
let btnDom = <Button btnContainer={"replenishScanPageErrorSkuBtn font32 backff775c colfff"} style={{marginTop:'10%'}} key={"replenishScanPageErrorSkuBtn"} text={"确认扫描完毕"} option={this.makeSureScanOver}/>
let popDom =
<PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo replenishScanPageErrorSku"}>
<div className={"icon iconfont icon-exclamation colf5a623 font150"} />
<div className={"text font40 col000"}>
<p>您需要补完【XXX】，才能补其他货品</p>
<p>您需要补完【{product.skuName || ""}】，才能补其他货品</p>
</div>
<div className={"btn"}>
{btnDom}
......@@ -76,7 +95,7 @@ export default class ReplenishScanPage extends React.Component{
//忘记样子
forgetSku(){
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 =
<PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo replenishScanPageForgetSku"}>
{this.getSkuInfo()}
......@@ -91,9 +110,9 @@ export default class ReplenishScanPage extends React.Component{
outReplenish(){
//货道已满解决办法
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 =
<PopModel popupTitle={"扫描货品异常"} classContainer={"recoveryPopInfo"}>
<PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo"}>
<div className={"icon iconfont icon-wrong font150"} />
<div className={"text font40 col000"}>
<p>此货品不在本次补货范围内，请放入物流回收箱！</p>
......@@ -109,7 +128,7 @@ export default class ReplenishScanPage extends React.Component{
let {barcodeInfo} = this.props;
return(
<div className={"replenishSkuInfo"}>
<div className={"skuName font30 col333"}>商品名称：雪碧</div>
<div className={"skuName font30 col333"}>商品名称：{barcodeInfo.skuName || ""}</div>
<div className={"skuInfo"}>
<div className={"skuImg"}>
<img src="" alt=""/>
......@@ -119,12 +138,12 @@ export default class ReplenishScanPage extends React.Component{
</div>
<div className={"skuPos col333 font30"}>
<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={""}>
<span className={"skuPosTitle"}>货道信息：</span>
<span className={""}>一个字一个字一个字一个字一个字一个字</span>
<span className={""}>{barcodeInfo.position || ""}</span>
</li>
<li><span className={"skuPosTitle fl"}>货道编号：</span>一个字</li>
<li><span className={"skuPosTitle fl"}>货道编号：</span>{product.positionNum || ""}</li>
</ul>
</div>
</div>
......@@ -158,34 +177,16 @@ export default class ReplenishScanPage extends React.Component{
getBarCodeProductInfo(barcodeText);
}else{
//提示条形码不正确
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode2"} text={"关闭"} option={this.failSubmit}/>
let popDom =
<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});
this.setState({
barcodeErrorText : '条形码输入错误，请重新输入'
})
}
}else{
//提示输入条形码
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode1"} text={"关闭"} option={this.failSubmit}/>
let popDom =
<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});
this.setState({
barcodeErrorText : '请输入条形码'
})
}
}
......@@ -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(){
let props = this.props;
......@@ -213,7 +237,9 @@ export default class ReplenishScanPage extends React.Component{
>
{this.getOtherHeader()}
</Header>
{this.getBarcodeInput()}
{
this.state.showInput ? this.getBarcodeInput() : this.getScanDom()
}
</div>
)
}
......
client/components/ReplenishComponent/ReplenishScanPage/index.css
......@@ -38,3 +38,35 @@
.replenishScanPageForgetSku .replenishSkuInfo{
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{
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);
if(this.state.pageType !== 2){
console.log("2222222")
console.log("2222222");
nextProps.hidePopup();
this.setState({
pageType : 2,
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