import React, {
Component
} from 'react';
import pdaApi from '../../common/api/pdauser'
import './index.less';
import { Button, Toast, Modal,Switch } from 'antd-mobile'
import box from '../../assets/box.png'
import redscan from '../../assets/redscan.png'
import success from '../../assets/succssed.png'
import checkon from '../../assets/checkon.png'
import checkoff from '../../assets/checkoff.png'
import HomeHeader from '../../common/commonview/homeheader'
import SingleItem, { SpecialSingleItem } from '../../common/commonview/singleitem'
import SingleModal from '../../common/commonview/singlemodal'
import DoubleModal from '../../common/commonview/doublemodal'
import RightModal from '../../common/commonview/rightmodal'
import http from "../../common/api/http";
const getQuery = function (key) {
var url = window.location.href;
var svalue = url.match(new RegExp("[\?\&]" + key + "=([^\&]*)(\&?)", "i"));
return svalue ? svalue[1] : svalue;
}
const olddata = getQuery("olddata");
const alert = Modal.alert
export default class Tab1 extends Component {
constructor(props) {
super(props)
this.state = {
height: '',
boxnum: '',
data: [],
num: 0,//已扫描箱数
errbox: false,//箱号验证，箱号错误
repbox: false,//箱号验证，箱号重复
addboxisshow: false,//添加的箱号提示框是否出现
addboxid: '',//添加的箱号
delisshow: false,//删除提示框是否出现
delindex: '',//删除的数据序号
delok: false,//删除成功提示框是否出现
saveshow: false,//提交提示框是否出现
savenullvaule: false,//提交空值提示框是否出现
valuateisshow: false,//提交成功评价提示框是否出现
currentShipment:"",//签收的运单号
allSelectFlag:0,//20220316 全选标识
boxshow:false,
checked:false,
scanName:"扫描查询"
}
this.handleInputChange = this.handleInputChange.bind(this)
this.checkboxs = this.checkboxs.bind(this)
this.checkgetAllboxs = this.checkgetAllboxs.bind(this)
this.Scan = this.Scan.bind(this)
this.scanName = "扫描查询"
this.allNum = 0
}
handleInputChange(event) {
this.setState({
boxnum: event.target.value
})
}
// 经销商按箱号签收功能
render() {
return (
<div className="container">
<div style={{ flex: "1 1 0", overflowY: 'scroll' }}>
<SpecialSingleItem
singleName="箱号"
name="boxnum"
inputPosition="0"
onClick={this.checkgetAllboxs}
value={this.state.boxnum}
onChange={this.handleInputChange}
outerStyle={{ height: '.7rem' }}
/>
<HomeHeader
leftheadericon={box}
rightheadericon={redscan}
leftheadertext="箱号查询"
rightheadertext={this.state.scanName}
outerStyle={{ height: '1.6rem', marginTop: '0.2rem' }}
leftTextStyle={{ color: '#f5a623' }}
rightTextStyle={{ color: '#eb5a6c' }}
LeftonClick={() => { this.seacherShow() }}
RightonClick={() => { this.Scan() }}
/>
<div className="table" style={{ display: (this.state.data.length>0) ? "block" : "none"}}>
<div className="table-head">
<div className="table-head-item item-null" >
<Switch
checked={this.state.checked}
onChange={() => {this.chageScan()}}
/>
</div>
<div className="table-head-item item-left">交接单号</div>
{/* <div className="table-head-item item-state">状态</div> */}
{/*20220316 增加全选、反选功能*/}
<div className="table-head-item item-right" onClick={() => { this.selectAllBox()}} >
<img style={{ marginTop: '.15rem' }} src={this.state.allSelectFlag == 1 ? checkon : checkoff} />
</div>
</div>
{/*<div className="table-container-none-display">*/}
{/* {this.state.data.map((item, index) => (*/}
{/* <div key={index} className="table-item">*/}
{/* </div>*/}
{/* ))}*/}
{/*</div>*/}
<div className="table-container">
{this.state.data.map((item, index) => (
<div key={index} className="table-item">
<div className="table-item-icon-letf">
</div>
<div className="table-item-left-float">
{item.pod_no}
</div>
<div className={item.boxshow? "table-item-icon" : "table-item-icon-old"} onClick={() => { this.showBow(index)}}>
<svg t="1675742360113" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4384" width="110" height="110"><path d="M736 480c-12.5-12.5-32.8-12.5-45.3 0L523.3 647.4c-6.2 6.2-16.4 6.2-22.6 0L333.3 480c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L466.7 704c25 25 65.5 25 90.5 0L736 525.3c12.5-12.5 12.5-32.8 0-45.3z" p-id="4385" fill="#1296db"></path></svg>
</div>
<div className="table-item-left-boxnum">{'箱数：'+item.box_num}</div>
<div className="table-item-icon-right" onClick={() => { this.selectAllBox2(index)}}>
<img style={{ marginTop: '.15rem' }} src={item.statuscode == 0 ? checkon : checkoff} />
</div>
{item.box_list.map((row, indexs) => (
<div key={indexs} style={{ display: (item.boxshow) ? "block" : "none",width:'100%',height: '0.8rem'}}>
<div className="table-item-left-icon" onClick={() => { row.status == 0 ? this.delboxnumshow(indexs,index) : this.delboxnum(indexs,index) }}>
</div>
<div className="table-item-right-row">
{row.box_number}</div>
<div className="table-item-left-row"></div>
<div className="table-item-right-icon" onClick={() => { row.status == 0 ? this.delboxnumshow(indexs,index) : this.delboxnum(indexs,index) }}>
<img style={{ marginTop: '.15rem' }} src={row.statuscode == 0 ? checkon : checkoff} />
</div>
</div>
))}
</div>
))}
</div>
</div>
</div>
<div className="prompt">已扫描箱数量:{this.allNum} 已选箱数量:{this.state.num}</div>
<div className="submitContainer">
<Button
className="submit"
type="primary"
// loading={this.state.loading}
onClick={() => { this.saveboxshow() }}>提交</Button>
</div>
{/* 验证箱号 ---箱号错误 */}
<SingleModal
addboxisshow={this.state.errbox}
modaltext="箱号错误"
Close={() => { this.setState({ errbox: false }) }}
></SingleModal>
{/* 验证箱号 ---箱号已存在 */}
<SingleModal
addboxisshow={this.state.repbox}
modaltext="箱号已存在"
Close={() => { this.setState({ repbox: false }) }}
></SingleModal>
{/* 箱号查询 */}
<Modal
visible={this.state.addboxisshow}
transparent
maskClosable={false}
>
<div className="addboxtitle">
请输入箱号
</div>
<div className="addboxinput">
<input type='text' onChange={(e) => { this.setState({ addboxid: e.target.value }) }} />
</div>
<div className="addboxbutton">
<Button className="addboxbutton1" onClick={() => { this.setState({ addboxisshow: false }) }}>取消</Button>
<Button className="addboxbutton2" onClick={() => { this.seacherget() }}>确定</Button>
</div>
</Modal>
{/* 删除箱号 */}
<DoubleModal
title='删除确认'
isshow={this.state.delisshow}
modaltext="继续删除数据，请点击确认！"
Close={() => { this.setState({ delisshow: false }) }}
Ok={() => { this.delboxnumshowok() }}
>
</DoubleModal>
{/* 删除成功 */}
{/* <RightModal
isshow={this.state.delok}
modaltext="删除成功"
Close={()=>{this.setState({delok:false})}}
></RightModal> */}
{/* 确认提交 */}
<DoubleModal
title='提示消息'
isshow={this.state.saveshow}
modaltext="确认提交吗？"
Close={() => { this.setState({ saveshow: false }) }}
Ok={() => { this.saveboxshowok() }}
>
</DoubleModal>
{/* 提交空值 */}
<SingleModal
addboxisshow={this.state.savenullvaule}
modaltext="请先添加箱号"
Close={() => { this.setState({ savenullvaule: false }) }}
></SingleModal>
{/* 提交成功，进入评价页面 */}
<Modal
visible={this.state.valuateisshow}
transparent
maskClosable={false}
>
<div className="valuatetitlewrap">
<div className="valuatetitleimg">
<img src={success} style={{ width: '100%', height: '100%' }} />
</div>
<div className="valuatetitletexxt">
操作成功
</div>
</div>
<div className="valuatebutton">
<Button className="valuatebutton1" onClick={() => { this.govaluate() }}>评价</Button>
<Button className="valuatebutton2" onClick={() => { this.setState({ valuateisshow: false, boxnum: '', data: [], num: 0, }) }}>关闭</Button>
</div>
</Modal>
</div>
)
}
componentDidMount() {
// const height = (document.querySelector('body').offsetHeight - 350)/100-3
const height = (window.screen.height * 2 - 350) / 100 + .1 - 2
console.log('屏幕高度', height);
this.setState({ height: height + 'rem' })
var url = window.location.href
pdaApi.jssdk({ url }).then(res => {
console.log('微信配置', res);
if (res.code == 1) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.result.appId, // 必填，公众号的唯一标识
timestamp: res.result.timestamp, // 必填，生成签名的时间戳
nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
signature: res.result.signature,// 必填，签名
jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
});
wx.error(function (res) {
alert(JSON.stringify(res))
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
}
})
if (olddata) {
let newdata = JSON.parse(localStorage.getItem("tempdata")) || [];
let newnum = JSON.parse(localStorage.getItem("num")) || 0;
console.log('旧数据', newdata);
this.setState({
data: newdata,
num: newnum
})
}
// 获取用户信息
let userInfo = JSON.parse(localStorage.getItem("userInfo")) || ''
if (userInfo != '') {
console.log('用户信息', userInfo);
this.setState({
userInfo: userInfo
})
} else {
// window.location.href = "/binduser.html";
// Leo 20220304 测试，不执行跳转
}
}
//验证箱号，获取详细信息
checkboxs() {
//G0143806 00001
var sitecode = this.state.userInfo.code || ""//站点
var data = this.state.data
if (this.state.boxnum) {
if (data.length == 0) {
var box_number = this.state.boxnum
} else {
for (var i = 0; i < data.length; i++) {
if (data[i].box_number == this.state.boxnum) {
if (data[i].statuscode == 0) {
// Toast.info('该箱号已存在')
this.setState({
repbox: true
})
return
} else {
let newObj = data[i]
if (item.state == "S") {
newObj.statuscode = 2;
} else {
newObj.statuscode = 0
this.setState({
num: this.state.num + 1
})
}
this.state.data.splice(i, 1, newObj)
this.setState({
data: this.state.data.concat()
})
return
}
} else {
var box_number = this.state.boxnum
}
}
}
Toast.loading('Loading...', 0, () => {
},true);
pdaApi.getdealerboxs({ box_number, sitecode }).then(res => {
Toast.hide();
// var res=pdaApi.getdealerboxs({box_number,sitecode})
console.log('验证箱号，获取详细信息', res, box_number);
if (res.code == 1 && res.result.length != 0) {
var tempdata = this.state.data
if (res.result.state == "S") {
tempdata = tempdata.concat(Object.assign({}, res.result, { statuscode: 2 }));
} else {
tempdata = tempdata.concat(Object.assign({}, res.result, { statuscode: 0 }));
this.setState({
num: this.state.num + 1
})
}
} else if(res.code == -1){
alert('提示信息','网络异常，请检查网络状况',[
{text:'确定',onPress:()=>console.log('确定')},
])
}else if(res.code == 0){
alert('提示信息', res.result, [
{ text: '确定', onPress: () => console.log('确定') },
])
}else{
alert('提示信息', '系统错误，请联系客服人员处理', [
{ text: '确定', onPress: () => console.log('确定') },
])
}
})
} else {
Toast.info('请先输入箱号')
}
}
chageScan(){
if(this.state.checked){
this.setState({
scanName: "扫描查询",
checked: !this.state.checked,
});
}else{
if(this.state.num>0){
alert('提示信息', '操作错误，请取消箱号勾选再重试', [
{ text: '确定', onPress: () => console.log('确定') },
])
}else{
this.setState({
scanName: "扫描验证",
checked: !this.state.checked,
});
}
}
}
chageit(box_number){
var data = this.state.data
var chose = false;
for (var i = 0; i < data.length; i++) {
var boxdata = data[i]['box_list']
for(var j = 0; j < boxdata.length; j++){
var row = boxdata[j]
if(row.box_number==box_number){
chose =true
if(row.statuscode == 0){
alert('提示信息', '验证失败，该箱号已验证', [
{ text: '确定', onPress: () => console.log('确定') },
])
return
}else{
this.state.data[i].box_list[j].statuscode = 0
this.setState({
num: this.state.num + 1
})
Toast.success('扫码验证成功!!!', 1);
return
}
}
}
}
if(chose){
}else{
alert('提示信息', '验证失败，查询箱号中没有验证的箱号', [
{ text: '确定', onPress: () => console.log('确定') },
])
}
}
//20220316 全选或者反选所有箱号
//20220316 全选或者反选所有箱号
selectAllBox(){
if(this.state.checked){
return
}
let data = this.state.data;
var box_total = 0
if(this.state.data){
var fdata = this.state.data
for(var i=0;i<fdata.length;i++){
box_total = box_total + this.state.data[i]['box_list'].length;
}
}else{
box_total = 0
}
console.log(box_total);
let flag = this.state.allSelectFlag;
//如果flag等于0，表示当前的状态是未全选的状态，需要将所有的数据全选(statuscode == 0)
if(flag == 0){
for(var i = 0;i< data.length;i++){
let datas = this.state.data[i]['box_list'];
//全选数据
data[i].statuscode = 0;
//更新状态为全选
flag = 1;
for(var j = 0;j< datas.length;j++){
//全选数据
datas[j].statuscode = 0;
//更新状态为全选
}
}
}else{
for(var i = 0;i< data.length;i++){
let datas = this.state.data[i]['box_list'];
//取消全选数据
data[i].statuscode = 1;
//更新状态为全不选中
flag = 0;
for(var j = 0;j< datas.length;j++){
//全选数据
datas[j].statuscode = 1;
//更新状态为全选
}
}
}
//设置数据
this.setState({
data: data,
allSelectFlag: flag,
num:flag == 1 ? box_total: 0
})
}
//20220316 全选或者反选所有箱号
getnumbox(){
let data = this.state.data
var num = 0
data.map((row, index) => {
var boxList = row['box_list']
boxList.map((item, index) => {
if (item.statuscode == 0) {
num+=1
}
})
})
return num
}
selectAllBox2(index){
if(this.state.checked){
return
}
let data = this.state.data;
var box_total = 0
let flag = this.state.data[index].statuscode;
let datas = this.state.data[index]['box_list'];
//如果flag等于0，表示当前的状态是未全选的状态，需要将所有的数据全选(statuscode == 0)
if(flag==undefined||flag == 1){
for(var i = 0;i< datas.length;i++){
//全选数据
datas[i].statuscode = 0;
//更新状态为全选
flag = 0;
}
}else{
for(var i = 0;i< datas.length;i++){
//取消全选数据
datas[i].statuscode = 1;
//更新状态为全不选中
flag = 1;
}
}
//设置数据
box_total = this.getnumbox()
this.state.data[index].statuscode = flag
this.setState({
data: data,
num:box_total
})
}
//20220316 检查全选或者反选的状态
checkSelectAllBox(){
let data = this.state.data; //数据
let flag = 1 ; //this.state.allSelectFlag; //全选标识
if(data.length == 0){
flag = 0;
}else{
for(var i = 0;i< data.length;i++){
if(data[i].statuscode == 1){ //statuscode == 1 表示存在未选中的数据
flag = 0;
}
}
};
//更新选中状态
this.setState({
allSelectFlag: flag
})
}
//验证箱号，根据箱号获取所有箱号
checkgetAllboxs() {
//G0143806 00001
var sitecode = this.state.userInfo.code || ""//站点
var box_number = this.state.boxnum
// Leo 20220308
// if(!box_number){
// box_number = 'test00000 00001'
// var sitecode = 'CMAL/SP.51710'
// }
if (box_number) {
Toast.loading('Loading...', 0, () => {
},true);
//Leo 20220308
pdaApi.getAllBoxsByBox({ box_number, sitecode }).then(res => {
Toast.hide();
console.log('根据箱号,获取箱号列表详细信息', res);
if (res.code == 1 && res.result.length != 0) {
var tempdata = this.state.data
var allNum = this.allNum
res.result.map((item, index) => {
if (tempdata.length == 0) {
if (item.state == "S") {
tempdata = tempdata.concat(Object.assign({}, item, { statuscode: 2 }));
} else {
tempdata = tempdata.concat(Object.assign({}, item, { statuscode: 1 }));
// this.setState({
// num: this.state.num + 1
// })
}
} else {
var bj = true;
for (var i = 0; i < tempdata.length; i++) {
var boxlist = tempdata[i]['box_list']
for(var j = 0; j < boxlist.length; j++){
var box_number = boxlist[j]['box_number']
for(var n = 0; n < item.box_list.length; n++){
var itembox = item.box_list[n]['box_number']
if (box_number == itembox) {
bj = false;
this.setState({
repbox: true
})
return
}else{
}
}
}
}
if(bj){
tempdata = tempdata.concat(Object.assign({}, item, { statuscode: 1 }));
}
// if (item.state == "S") {
// tempdata = tempdata.concat(Object.assign({}, item, { statuscode: 2 }));
// } else {
// tempdata = tempdata.concat(Object.assign({}, item, { statuscode: 1 }));
// // this.setState({
// // num: this.state.num + 1
// // })
// }
}
allNum+=item.box_list.length
this.allNum = allNum
})
let currentShipment = res.result[0].shipment_gid;
//20220316 增加选中状态判断,如果是第一次添加，直接将flag置位1
// if(this.state.data.length == 0){
// this.setState({
// allSelectFlag:1
// })
// }else{
// this.checkSelectAllBox();
// }
this.setState({
data: tempdata,
currentShipment:currentShipment
})
}else if(res.code == -1){
alert('提示信息','网络异常，请检查网络状况',[
{text:'确定',onPress:()=>console.log('确定')},
])
}else if(res.code == 0){
alert('提示信息', res.result, [
{ text: '确定', onPress: () => console.log('确定') },
])
}else{
alert('提示信息', '系统错误，请联系客服人员处理', [
{ text: '确定', onPress: () => console.log('确定') },
])
}
console.log(this.state)
})
} else {
Toast.info('请先输入箱号')
}
}
showBow(index){
let newObj = this.state.data[index]
if(newObj.boxshow!=null){
newObj.boxshow = !newObj.boxshow
}else{
newObj.boxshow =true
}
//这里毫无意义只是刷新
this.setState({
boxshow: true
})
}
//删除
delboxnumshow(index,findex) {
if(this.state.checked){
return
}
this.setState({
delisshow: true,
delindex: index
})
}
//确认删除
delboxnumshowok() {
this.setState({
delisshow: false,
}, () => {
let index = this.state.delindex
console.log(index);
this.delboxnum(index)
})
}
//删除箱号
delboxnum(index,findex) {
if(this.state.checked){
return
}
let newObj = this.state.data[findex].box_list[index]
if (newObj.statuscode == 0) {
newObj.statuscode = 1
//去除上级的全选
this.state.data[findex].statuscode = 1
this.state.allSelectFlag = 0
this.setState({
num: this.state.num - 1,
// delok:true
})
}
else {
newObj.statuscode = 0
this.setState({
num: this.state.num + 1
})
}
}
//扫描
Scan() {
// wx.ready(function () {
// wx.checkJsApi({
// jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
// success: function(res) {
// alert(JSON.stringify(res))
// // 以键值对的形式返回，可用的api值true，不可用为false
// // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
// }
// });、
var self = this;
//需在用户可能点击分享按钮前就先调用
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode","datamatrix"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
//处理扫描datamatrix类型的二维码结果中存在“DATA_MATRIX,”前缀
if(result){
var results = result.split("DATA_MATRIX,");
if(results.length == 1){
result = results[0]
}else{
result = results[1]
}
} //end
// console.log('扫描信息',result);
if(self.state.checked){
self.chageit(result)
}else{
self.setState({ boxnum: result }, () => {
self.checkgetAllboxs()
})
}
}
});
// });
}
//显示查询箱号
seacherShow() {
if (this.state.data.length == 0) {
Toast.info("请先添加箱号")
return
}
this.setState({ addboxisshow: true })
}
//获取查询箱号数据
seacherget() {
let seacherboxid = this.state.addboxid;
if (!seacherboxid) {
Toast.info("请输入箱号")
return
}
this.setState({ addboxisshow: false })
let seacherdata = this.state.data
this.seacher(seacherboxid, seacherdata)
}
//查询箱号
seacher(seacherboxid, seacherdata) {
for (let i = 0; i < this.state.data.length; i++) {
if (this.state.data[i].box_number === seacherboxid) {
seacherdata.unshift(seacherdata[i])//添加查找的元素到第一位
this.setState({
data: this.state.data.concat()
}, () => {
this.state.data.splice(i + 1, 1); // 如果数据组存在该元素，则把该元素删除
Toast.info('查询成功')
this.setState({
data: this.state.data.concat()
})
})
return
} else {
Toast.info('没有查询到该箱号')
}
}
}
//显示保存箱号
saveboxshow() {
this.setState({
saveshow: true
})
}
//确认保存箱号
saveboxshowok() {
this.setState({
saveshow: false
})
this.savebox()
}
// 根据箱号签收
savebox() {
let tempdata = this.state.data
let newdata = []
tempdata.map((row, index) => {
var boxList = row['box_list']
boxList.map((item, index) => {
if (item.statuscode == 0) {
newdata.push(item)
}
})
})
if (newdata.length == 0) {
this.setState({
savenullvaule: true
})
return
}
let boxData = newdata
let cell_phone = this.state.userInfo.mobile || ""
let op_user = this.state.userInfo.membername || ""
let op_location_gid = this.state.userInfo.code || ""
let memberid = this.state.userInfo.innerid || ""
let shipment_gid = this.state.currentShipment
let op_type = "正常签收";
Toast.loading('Loading...', 0, () => {
},true);
pdaApi.saveboxs({
boxData, cell_phone, op_user, op_location_gid, memberid,shipment_gid,op_type
}).then(res => {
Toast.hide();
console.log('根据箱号签收', res);
if (res.code == 1) {
this.setState({
num: 0,
valuateisshow: true
})
}else if(res.code == -1){
alert('提示信息','网络异常，请检查网络状况',[
{text:'确定',onPress:()=>console.log('确定')},
])
} else {
Toast.info('签收失败')
this.setState({
data: [],
num: 0,
})
}
})
}
gogoodlist(box_number) {
if (box_number) {
var tempdata = JSON.stringify(this.state.data)
localStorage.setItem("tempdata", tempdata)
localStorage.setItem("num", this.state.num)
localStorage.setItem("box_number", box_number)
window.location.href = "/dstributorGoodList.html?type=tab1";
} else {
return
}
}
govaluate() {
let tempdata = this.state.data
tempdata.map((item, index) => {
if (item.status == 0) {
localStorage.setItem("pod_no1", item.pod_no)
}
})
window.location.href = "/dstributorSiginInevaluate.html";
}
}