tab3.js

import React, {
    Component
} from 'react';
import './index.less';
import {Button, Toast, Modal, Accordion, List, Steps} from 'antd-mobile'
import box from '../../assets/box.png'
import deletepic from '../../assets/deleteNew.png'
import redscan from '../../assets/redscan.png'
import checkon from '../../assets/checkon.png'
import checkoff from '../../assets/checkoff.png'
import success from '../../assets/success.png';
import HomeHeader from '../../common/commonview/homeheader'
import SingleItem,{SpecialSingleItem,SingleInput} from '../../common/commonview/singleitem'
import pdaApi from '../../common/api/pdauser';
import headertitleicon1 from "../../assets/header_title_icon.png";
import headertitleicon2 from "../../assets/header_title_icon2.png";
import stepsicon from "../../assets/Steps_icon.png";

const alert = Modal.alert

const href = {
    searchPlate:'/adminOnTheWayVagueQuery.html',//查询页面
    searchStation:'/nextStationQuery.html',//查询页面
    searchDriver:'/driverQuery.html',//查询页面
}
//USE：中转站按照交接单号发货。1.箱号添加后不允许修改车牌、司机，如果修改，需要将箱号移除。2.添加下一站的时候要把统计的箱数量储存起来，否则会再添加下一站的时候丢失。
var ItemTitle = React.createClass({
    render: function () {
        return (
            <text className="itemtitle">{this.props.itemtext}</text>
        );
    }
})
export default class Tab3 extends Component{
    constructor(props) {
        super(props)
        this.state = {
            modalVisible: false,
            readOnly:false,
            // height:'',
            ho:'',
            plate:'',
            phone:'',
            driver:'',
            station:'', //下一站
            currentStation:'', //当前选中的站点
            boxData:[],//箱号列表
            station_scan_data:{},
            activeKey:0, //当前展开折叠的panel
            num:0,//已选数量
            total_num:0,//总共已扫描的箱数
            hoArr:[],//已扫描交接单号
            searchBoxid:'',//箱号查询的箱号
        }
        this.handleInputChange = this.handleInputChange.bind(this)
        this.addBoxByInput = this.addBoxByInput.bind(this)
        this.changeBoxStatus = this.changeBoxStatus.bind(this)
        this.submit = this.submit.bind(this)
        this.setModalVisible = this.setModalVisible.bind(this)
        this.Scan = this.Scan.bind(this)
        // this.searchBox = this.searchBox.bind(this)
        // this.getdriver = this.getdriver.bind(this)
        this.goSearchPlate = this.goSearchPlate.bind(this)
    }

    handleInputChange(event){
        const target = event.target
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name
        this.setState({
            [name]: value
        })
    }

    setModalVisible(visible){
        this.setState({
            modalVisible: visible,
        });
    }

    //根据交接单号获取箱号信息
    addBoxByInput(){
        if(  !this.state.driver || !this.state.plate){
            alert('提示信息', '请将信息填写完整', [
                { text: '确定', onPress: () => {return} },
            ])
            return
        }
        if(!this.state.ho){
            alert('提示信息', '请输入交接单号信息', [
                { text: '确定', onPress: () => {return} },
            ])
            return
        }

        let currentStation = this.state.currentStation;
        console.log('this.state.currentStation:',currentStation)
        if(!currentStation){
            alert('提示信息', '请选择发往的站点', [
                { text: '确定', onPress: () => {return} },
            ])
            return
        }
        Toast.loading('Loading...', 0, () => {
        },true);
        //查询交接单号TODO:改回sitecode:this.userInfo.code
        pdaApi.getoutboxsbyho({
            ho:this.state.ho,
            // sitecode:'CMAL/SP.LS-RL-STATION'
            sitecode:this.userInfo.code
        }).then(res=>{
            Toast.hide();
            if(res.code == 1){ //code==1 成功查询到数据
                //hoArr 用来校验交接单号是否重复
                for(let i = 0,len = this.state.hoArr.length;i<len;i++){
                    console.log('--------this.state.hoArr:',this.state.hoArr)
                    if(this.state.hoArr[i] == res.result[0].pod_no){
                        alert('提示信息', '该交接单号已存在', [
                            { text: '确定', onPress: () => {return} },
                        ])
                        return
                    }
                }
                // station_scan_data:{'经销商1':[{box_number:'box1',pod_no:'pod1',statuscode:1},{box_number:'box2',pod_no:'pod2',statuscode:1}],'经销商2':[{box_number:'box1',pod_no:'pod1',statuscode:1},{box_number:'box2',pod_no:'pod2',statuscode:1}]},//存放下一站

                //储存交接单号，用以验证是否有重复交接单号
                this.state.hoArr.push(res.result[0].pod_no)

                // let addDealerData = [{ ...data.result }, ...this.state.data[currentStation]]
                // //不清楚为什么这里不使用this.setState() 就能够更新this.state.data 的数据，因为对象，数组这种指针型数据可以直接修改键值，改动数据结构？
                // this.state.data[currentDealer] = addDealerData
                //将查询到的交接单号添加到下一站的对象数据中
                console.log(res.result)
                //将查询出的交接单数据添加到已有的数据中
                let addDealerData = [ ...res.result , ...this.state.station_scan_data[currentStation]]

                this.state.station_scan_data[currentStation] = addDealerData;
                console.log(this.state.station_scan_data)
                this.setState({
                    // boxData:[...this.state.boxData,{...res.result,status:0}]  //0代表选中1代表未选中
                    station_scan_data:this.state.station_scan_data,
                    num:Number(this.state.num) + res.result.length, //总共已添加且未移除的箱数
                    total_num:Number(this.state.total_num) + res.result.length, //总共已添加的箱数
                    readOnly:true,
                })
            }else if(res.code == -1){
                alert('提示信息','网络异常，请检查网络状况',[
                    {text:'确定',onPress:()=>console.log('确定')},
                ])
            }else{
                alert('提示信息', '该交接单号不存在，请确认后重新查询', [
                    { text: '确定', onPress: () => console.log('确定') },
                ])
            }
        })
    }

    onChangeAccordion(station){
        //选中当前手风琴的时候，记录当前选中的经销商currentDealer
        this.setState({
            currentStation:station,
        });

    }

    //点击某个panel之后折叠其他panel
    onChangePanel(activeKey) { //单个参数时，括号可以省略
        this.setState({ activeKey });
        Toast.info('折叠'+activeKey)
    };

    //切换箱号选中状态
    changeBoxStatus(index){
        let currenStation = this.state.currentStation;
        let newObj = this.state.station_scan_data[currenStation][index]
        if(newObj.statuscode == 0){
            alert('提示信息', '确定删除?', [
                { text: '取消', onPress: () => {return} },
                { text: '确定', onPress: () => {
                    newObj.statuscode = 1
                    this.state.station_scan_data[currenStation].splice(index,1,newObj)
                    this.setState({
                        num:this.state.num-1,
                        station_scan_data:this.state.station_scan_data
                    })
                }},
            ])
        }else{
            newObj.statuscode = 0
            this.state.station_scan_data[currenStation].splice(index,1,newObj)
            this.setState({
                num:this.state.num+1,
                station_scan_data:this.state.station_scan_data
            })
        }
    }

    //提交发货数据
    submit(){
        if(this.state.num==0){
            alert('提示信息', '箱号信息不得为空', [
                { text: '确定', onPress: () => console.log('确定') },
            ])
            return
        }
        let uploadBoxes = this.state.station_scan_data;
        console.log(uploadBoxes)
        // Toast.loading('Loading...', 0, () => {
        // },true);
        pdaApi.saveoutboxsbyho({
            power_unit_gid:this.state.plate, //车牌号
            driver_gid:this.state.driver,  //司机
            cell_phone:this.state.phone, //手机号码
            op_user:this.userInfo.membername, //操作人员名称
            op_location_gid:this.userInfo.code, //操作地点
            boxData:uploadBoxes
        }).then(res=>{
            Toast.hide();
            console.log(res);
            if(res.code == 1){
                this.setModalVisible(true)
            }else{
                Toast.info('提交失败')
            }
        })
    }

    //扫描
    Scan(){
        var self=this
        // 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"}
            //     }
            // });
            //需在用户可能点击分享按钮前就先调用
            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('扫描信息',res);
                    // alert(JSON.stringify(res))
                    self.setState({ho:result},()=>self.addBoxByInput())
                }
            });
        // });
    }

    //跳转车牌号模糊查询
    goSearchPlate(){
        //MLeoMdf2108051427 如果已经添加了箱号，则不允许修改车牌
        if(this.state.total_num != 0){
            alert('提示信息', '已扫描箱数据，不允许修改车牌', [
                { text: '确定', onPress: () => {return} },
            ])
            return
        }
        window.localStorage.setItem("currentTab",3)
        window.localStorage.setItem("readOnly",this.state.readOnly)
        window.localStorage.setItem("currentPhone",this.state.phone)||''
        window.localStorage.setItem("currentDriver",this.state.driver)||''
        window.location.href=href.searchPlate
    }

    //跳转司机模糊查询
    goSearchDriver(){
        //MLeoMdf2108051427 如果已经添加了箱号，则不允许修改司机
        if(this.state.total_num != 0){
            alert('提示信息', '已扫描箱数据，不允许修改司机', [
                { text: '确定', onPress: () => {return} },
            ])
            return
        }
        window.localStorage.setItem("currentTab",3)
        window.localStorage.setItem("readOnly",this.state.readOnly)
        window.localStorage.setItem("carid",this.state.plate)||''
        window.location.href=href.searchDriver
    }

    //设置下一站
    setNextStation(){
        if(!this.state.driver || !this.state.plate){
            alert('提示信息', '请先将车牌、司机信息填写完整', [
                { text: '确定', onPress: () => {return} },
            ])
            return
        }
        window.localStorage.setItem("currentTab",3)
        window.localStorage.setItem("readOnly",this.state.readOnly)
        window.localStorage.setItem("currentPhone",this.state.phone) ||''//防止切换页面的时候数据丢失？？
        window.localStorage.setItem("currentDriver",this.state.driver)||''
        window.localStorage.setItem("carid",this.state.plate)||''
        window.localStorage.setItem("station_scan_data",JSON.stringify(this.state.station_scan_data))
        //MLeoMdf2108051427 储存当前扫描的箱号统计信息，如果不存储，在切换界面时会丢失
        window.localStorage.setItem("box_scan_num",this.state.num)
        window.localStorage.setItem("box_scan_total_num",this.state.total_num)
        window.location.href=href.searchStation
    }

    //添加直发站点
    addDirectStation(){
        if(  !this.state.driver || !this.state.plate){
            alert('提示信息', '请先将车牌、司机信息填写完整', [
                { text: '确定', onPress: () => {return} },
            ])
            return
        }

        let station = '直发 默认一段'; //直发的默认命名为"直发 默认一段"

        //先判断该站点是否已经添加过，如果已存在，则给出提示不能添加
        if(this.state.station_scan_data[station]){
            alert('提示信息', '直发站点已存在，请勿重复添加', [
                { text: '确定', onPress: () => {return} },
            ])
        };
        let addData = {};
        addData[station] = [];
        //添加该站点
        this.setState({
            isLoadAll: false,
            currentStation:station, //默认选中新添加的站点
            station_scan_data: Object.assign(addData,this.state.station_scan_data) //将站点加入data对象
        })

    }

    //移除下一站
    removeNextStation(station){
        alert('提示信息', '确定移除'+station+'?', [
            { text: '取消', onPress: () => {return} },
            { text: '确定', onPress: () => {
                    this.removeNextStationYes()
                }},
        ])
    }
    //确定移除下一站
    removeNextStationYes(){
        //获取该站点下已添加的箱数量
        let currentStation = this.state.currentStation;
        let currentStationData = this.state.station_scan_data[currentStation];
        let currentTotalNum = currentStationData.length; //当前站点下所有已扫描的箱号
        let currentTotalSelectNum = 0; //当前站点下所有已选择的箱号
        //统计该站点下已经选中的箱号
        for(let i = 0,len = currentStationData.length;i<len;i++){
            if(currentStationData[i].statuscode == 0){
                currentTotalSelectNum ++
            }
        }
        //删除该站点
        delete this.state.station_scan_data[currentStation];

        this.setState({
            station_scan_data: this.state.station_scan_data,
            num:this.state.num - currentTotalSelectNum,
            total_num:this.state.total_num - currentTotalNum,
        })
    }
    render(){
        console.log('--this.state:',this.state);
        var accordionPanel= {
            width: '100%',
            display:'flex',
            flexDirection:'row',
        }
        var currentAccordionPanel= {
            width: '120%',
            display:'flex',
            flexDirection:'row',
            backgroundColor:'rgba(97,162,244,0.5)',
            marginLeft: '-0.3rem'
        }
        var accordionImg= {
            marginTop:'0.1rem',
            marginRight: '0.5rem',
            height: '0.6rem',
        }
        var currentAccordionImg= {
            marginTop:'0.1rem',
            marginRight: '1.2rem',
            height: '0.6rem',
        }

            return (
            <div className="container">
                {/*需要使用flex:"1 1 0",不能使用flex:0 ,使用后者会造成界面不能滚动*/}
                <div style={{flex:"1 1 0",overflowY:'scroll'}}>
                    <SingleItem
                        name="车牌号"
                        outerStyle={{marginTop:'.1rem',height:'.65rem'}}
                        onRightClick={()=>this.goSearchPlate()}>
                        {(this.state.plate).replace('CMAL/SP.','') || '车牌号'}
                    </SingleItem>
                    <SingleItem
                        name="司机"
                        outerStyle={{marginTop:'.1rem',height:'.65rem'}}
                        onRightClick={()=>this.goSearchDriver()}>
                        {this.state.driver } {this.state.phone || '输入司机或手机号码'}
                    </SingleItem>
                    <SpecialSingleItem
                        singleName="交接单号"
                        name="ho"
                        value={this.state.ho}
                        onClick={()=>this.addBoxByInput()}
                        onChange={this.handleInputChange}
                        inputPosition="0"
                        outerStyle={{marginTop:'.1rem',height:'.65rem'}}
                    /> 
                    <HomeHeader
                        displayDeleteStation = {true} //是否展示移除下一站的图标，不设置则不展示
                        leftheadericon={box}
                        midheadericon={box}
                        rightheadericon={redscan}
                        leftheadertext="添加下一站"
                        midheadertext="添加直发"
                        rightheadertext="扫描"
                        outerStyle={{height:'1.2rem',marginTop:'.2rem'}}
                        leftTextStyle={{color:'#f5a346'}}
                        midTextStyle={{color:'#f5a623'}}
                        rightTextStyle={{color:'#eb5a6c'}}
                        itemIconStyle = {{width:'0.35rem',height:'0.35rem'}}
                        // LeftonClick={()=>this.setState({searchModalVisible:true})}
                        LeftonClick={()=>this.setNextStation()}
                        midonClick={()=>this.addDirectStation()}
                        RightonClick={()=>this.Scan()}
                    />
                    {/*使用手风琴折叠的方式展示*/}
                    {Object.keys(this.state.station_scan_data).map((station,value)=>(
                        <Accordion
                            // defaultActiveKey="0"
                            accordion
                            className="my-accordion"
                            // activeKey={this.state.activeKey}
                            onChange={()=>this.onChangeAccordion(station)}
                        >
                            <Accordion.Panel
                                header={
                                    <div style={station == this.state.currentStation?currentAccordionPanel:accordionPanel}>
                                        <text numberOfLines={1} style={{
                                            fontSize: '0.30rem',
                                            color: '#000000',
                                            marginLeft: '0.22rem',
                                            overflow: 'scroll',
                                            flex:55,
                                        }}>{station.replace('CMAL/SP.','')}</text>
                                        <text style={{
                                            fontSize: '0.30rem',
                                            color: '#000000',
                                            marginLeft: '0.22rem',
                                            overflow: 'scroll',
                                            flex:25,
                                        }}>已扫描:{this.state.station_scan_data[station].length}</text>
                                        {/*LeoM 20210817*/}
                                        <img src={deletepic}
                                             onClick={()=>this.removeNextStation(station)}
                                             style={station == this.state.currentStation?currentAccordionImg:accordionImg}/>
                                    </div>
                                }
                            >
                                <div className="table">
                                    <div className="table-container">
                                        {this.state.station_scan_data[station].map((item, index) => (
                                            <div key={index} className="table-item">
                                                <div className="table-head-item item-left">{item.box_number}</div>
                                                <div className="table-head-item item-mid">{item.pod_no}</div>
                                                {/* <div className="table-head-item item-state">{item.state == 'S' ? "已收货" : item.state == 'F' ? "已发货" : "未操作"}</div> */}

                                                <div className="table-head-item item-right" onClick={() => this.changeBoxStatus(index)}>
                                                    <img style={{width:'0.4rem',height:'0.4rem'}} src={item.statuscode == 0 ? checkon : checkoff} />
                                                </div>

                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </Accordion.Panel>
                        </Accordion>
                    ))}

                </div>
                <div className="prompt">已扫描箱数量:{this.state.total_num}  已选箱数量:{this.state.num}</div>
                <div className="submitContainer">
                    <Button 
                        className="submit" 
                        type="primary"
                        loading={this.state.loading}
                        onClick={()=>alert('提示信息', '确定提交?', [
                            { text: '取消', onPress: () => console.log('取消') },
                            { text: '确定', onPress: () => this.submit() },
                        ])}>提交</Button>
                </div>
                <Modal
                    visible={this.state.modalVisible}
                    transparent
                    maskClosable={false}
                    onClose={()=>this.setModalVisible(false)}
                    footer={[{ text: '确定', onPress: () => {
                        this.setModalVisible(false)
                        location.reload()
                    }}]}>
                <div className="modalContainer">
                    <div className="modal-success-img">
                        <img src={success}/>
                    </div>
                    <div className="modal-success-detail">
                        提交成功！
                    </div>
                </div>
                </Modal>
                <Modal
                    visible={this.state.searchModalVisible}
                    transparent
                    maskClosable={false}
                    onClose={()=>this.setState({searchModalVisible:false})}
                    title="箱号查询"
                    footer={[
                        { text: '确定', onPress: () => { this.searchBox();this.setState({searchModalVisible:false}) }},
                        { text: '取消', onPress: () => { this.setState({searchModalVisible:false}) }}]}>
                <div style={{ height: 'auto' }}>
                    <SingleItem 
                        outerStyle={{height:'.55rem'}}
                        leftTextStyle="font"
                        name="箱号">
                        <SingleInput
                            name="searchBoxid"
                            onChange={this.handleInputChange}
                            placeholder="请输入"
                        />
                    </SingleItem>
                </div>
                </Modal>
            </div>
        )
    }
    //进入界面的时候，加载初始数据
    componentDidMount(){
        // const height = (window.screen.height * 2 - 350)/100 + .1
        // this.setState({height:height+'rem'})
        this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
        const carid = window.localStorage.getItem('carid')||''
        const phone = window.localStorage.getItem('currentPhone')||''
        const driver = window.localStorage.getItem('currentDriver')||''
        let station_scan_data = window.localStorage.getItem('station_scan_data')
        let currentStation = window.localStorage.getItem('currentStation')||''//当前选中的站点
        //MLeoMdf2108051427 获取已经扫描的箱数
        let num = window.localStorage.getItem('box_scan_num')||''//已选中箱数
        let total_num = window.localStorage.getItem('box_scan_total_num')||''//已扫描箱数
        const readOnly = eval(window.localStorage.getItem('readOnly')) || false
        console.log('--carid:',carid);
        console.log('--getitem:station_scan_data:',station_scan_data);
        if(!station_scan_data){
            station_scan_data = {}
        }else{
            //将station_scan_data转一次
            station_scan_data = JSON.parse(station_scan_data);
        }
        if(typeof(station_scan_data) == "string"){
            station_scan_data = JSON.parse(station_scan_data); //转一次不能成功
        };

        this.setState({
            plate:carid,
            phone,
            driver,
            station_scan_data,
            currentStation,
            num,//MLeoMdf2108051427 添加已经扫描的箱数
            total_num,
            readOnly,
        },()=>{
            window.localStorage.removeItem("carid")
            window.localStorage.removeItem("readOnly")
            window.localStorage.removeItem("currentPhone")
            window.localStorage.removeItem("currentDriver")
            window.localStorage.removeItem("station_scan_data")
            window.localStorage.removeItem("box_scan_num") //MLeoMdf2108051427 添加已经扫描的箱数
            window.localStorage.removeItem("box_scan_total_num")
            window.localStorage.removeItem("currentStation")
        })
        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可以在这里更新签名。
                });
            }
        })
    }
}

// const styles = StyleSheet.create({
//     accordionPanel:{
//         width:'100%',
//         height:30,
//         alignItems:'center',
//         flexDirection:'row',
//         borderStyle:'solid',
//         borderBottomWidth:0.1,
// //        backgroundColor:'rgba(97,162,244,0.9)'
//     },
//     accordionPanelcurrent:{
//         width:'109%',
//         height:30,
//         marginLeft:-15,
//         alignItems:'center',
//         flexDirection:'row',
//         borderStyle:'solid',
//         borderBottomWidth:0.1,
//         backgroundColor:'rgba(97,162,244,0.5)'
//     },
// });