fix bugs æ¬滑动test(未完成)

f24d78c8 · Zhang Xin · 54f8f3f4 · f24d78c8 · f24d78c8 · f24d78c8
Commit f24d78c8 authored Aug 03, 2018 by Zhang Xin
9 changed files
--- a/client/components/CommonComponent/ImgToolComponent/CommonSmalContainer.jsx
+++ b/client/components/CommonComponent/ImgToolComponent/CommonSmalContainer.jsx
@@ -16,6 +16,14 @@ let refreshIconDisabledSrc = UTILPATH.localImg.refresh_disabled;
 export default class ImgToolComponent extends React.Component{
    constructor(props){
        super(props);
+        this.handleImgClick = this.handleImgClick.bind(this)
+    }
+    handleImgClick(){
+        let {disabled,handleClikImgFunc} = this.props;
+        if(!disabled){
+            handleClikImgFunc();
+        }
    }
    render(){
@@ -39,7 +47,7 @@ export default class ImgToolComponent extends React.Component{
                break;
        }
-       if(type == "add" && disabled){
+       if(type === "add" && disabled){
            imgSrc = addIconDisabledSrc;
       }
        if(type === "refresh" && disabled){
@@ -47,7 +55,13 @@ export default class ImgToolComponent extends React.Component{
        }
        return(
            <div className={"ImgToolComponent"}>
-                <img  src={imgSrc} data-src={imgSrc} className={"swiper-lazy"} alt="" onClick={props.handleClikImgFunc}/>
+                {
+                    // props.showSrc ? <img src={imgSrc} data-src={imgSrc} className={"swiper-lazy"} alt="" onClick={()=>this.handleImgClick()}/> :
+                    //     <img data-src={imgSrc} className={"swiper-lazy"} alt="" onClick={()=>this.handleImgClick()}/>
+                }
+                <img src={imgSrc} alt="" onClick={()=>this.handleImgClick()}/>
                {
                    noCloseBtn?"":(<span className={"closeBtn"} onClick={props.handleClikCloseFunc}>×</span>)
                }

--- a/client/components/CommonComponent/SwiperComponent/SwiperComponent.jsx
+++ b/client/components/CommonComponent/SwiperComponent/SwiperComponent.jsx
@@ -29,19 +29,24 @@ export default class SwiperComponent extends React.Component{
    }
    componentWillReceiveProps(nextProps){
+        // let {swiperContainer,initialSlideTime,initialSlide} = nextProps;
+        // if(initialSlide !== this.props.initialSlide){
+        //     let time = initialSlideTime ? initialSlideTime : 0
+        //     this.state.swiperList[swiperContainer].slideTo(initialSlide,time);
+        // }
    }
    componentDidUpdate(prevProps){
-        const { swiperCount,swiperContainer,initialSlide,initialSlideTime } = this.props;
+        const { swiperCount,swiperContainer,initialSlide,initialSlideTime,swiperOptions,canMove } = this.props;
        if (prevProps.swiperCount !== swiperCount) {
            this.state.swiperList[swiperContainer].init();
+            if(canMove){
+                let time = initialSlideTime ? initialSlideTime : 0
+                this.state.swiperList[swiperContainer].slideTo(initialSlide,time);
+            }
        }
-        // if(
-        //     initialSlideTime &&
-        //     initialSlide !== prevProps.initialSlide
-        // ){
-        //     this.state.swiperList[swiperContainer].slideTo(initialSlide,0);
-        // }
    }
    componentWillUnmount() {
@@ -52,7 +57,8 @@ export default class SwiperComponent extends React.Component{
    render(){
        let props = this.props;
-        let {swiperContainer,swiperOptions} = props;
+        let {swiperContainer,swiperOptions,extraClass} = props;
+        extraClass = extraClass ? " "+extraClass : ""
        let childNodes = React.Children.map(props.children,function (child,index) {
            return (
                <div key={swiperContainer + "swiper" +index} className={"swiper-slide"}>
@@ -61,7 +67,7 @@ export default class SwiperComponent extends React.Component{
            )
        });
        return(
-            <div className={"swiper-container " + swiperContainer}>
+            <div className={"swiper-container " + swiperContainer + extraClass }>
                <div className={"swiper-wrapper"}>
                    {childNodes}
                </div>

--- a/client/components/TroubleComponent/TroubleItemComponent/TroubleItemComponent.jsx
+++ b/client/components/TroubleComponent/TroubleItemComponent/TroubleItemComponent.jsx
 import React from 'react';
 import ImageComponent from '../../CommonComponent/ImgToolComponent/CommonSmalContainer';
 import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
+import SwiperComponent from '../../CommonComponent/SwiperComponent/SwiperComponent'
 require('./index.css')
 export default class TroubleItemComponent extends React.Component{
    constructor(props){
@@ -45,14 +46,12 @@ export default class TroubleItemComponent extends React.Component{
    deleteImgById(fileId){
        console.log("deleteImgById :",fileId);
-        let {hidePopup} = this.props;
        let props = this.props;
-        let {deleteImg} = props;
+        let {deleteImg,hidePopup} = props;
        let item = props.item;
        let errorId = item.id;
        let type = item.type;
-        console.log(errorId,type,fileId);
+        hidePopup();
-        hidePopup()
        deleteImg(errorId,type,fileId)
    }
@@ -89,7 +88,35 @@ export default class TroubleItemComponent extends React.Component{
                                   type={"custom"}
                                   imgSrc = {f.filePath}/>
-        }) : null;
+        }) : [];
+        let imgLength = imgFiles.length;
+        if(imgLength < 9){
+            imgFiles.push(<ImageComponent showSrc={true} key={"troubleItemImgadd"+imgLength} disabled={!(item.isExistProblem && parseInt(item.isExistProblem) === 1)} type={"add"} handleClikImgFunc = {this.addImg} noCloseBtn = {true} />);
+            imgLength++;
+        }
+        imgFiles.push(<ImageComponent key={"troubleItemImgrefresh"+imgLength} handleClikImgFunc = {this.reRreshImg} type={"refresh"} noCloseBtn = {true} />);
+        let swiperOptions = {
+            width : 90,
+            spaceBetween: 20,
+            // freeMode:true,
+            // pagination: '.pagination',
+            // loop:false,
+            mode: 'horizontal',
+            touchRatio:0.5,
+            longSwipesRatio:0.1,
+            threshold:50,
+            lazyLoadingInPrevNext:true,
+            lazyLoading : true,
+            followFinger:false,
+            observer: true,//修改swiper自己或子元素时，自动初始化swiper
+            observeParents: true,//修改swiper的父元素时，自动初始化swiper
+            lazyLoadingInPrevNextAmount: 11,
+        };
+        let swiperContainer = CONFIG.swiperContainers.troubleSwiperImgContainer + item.errorCode;
+        let swiperCount = imgLength+1;
+        let text = item.explanation.length > 200 ? item.explanation.substring(0,200) + '...' : item.explanation
        return (
            <div className={"troubleItemComponent "+((item.isExistProblem === 1 && item.explanation) || item.isExistProblem === 2 ? 'finish':'')}>
@@ -112,13 +139,13 @@ export default class TroubleItemComponent extends React.Component{
                </div>
                <div className={"itemTextArea rel font24"}>
                    <div className={"itemTextEdit font24 colff7860"} onClick={()=>props.showText(item.errorCode)}>
-                        <span className={"iconfont font24 icon icon-editor-line colff7860"}></span>
+                        <span className={"iconfont font24 icon icon-editor-line colff7860"} />
                        <span> 编辑</span>
                    </div>
                    <span className={"colff7860 font32 star"}>*</span>
                    <div className={"itemTextAreaBox col999 border_e5"} onClick={()=>props.showText(item.errorCode)}>
                        {
-                            item.explanation ? <textarea readOnly className={"itemTextAreaBoxs col999"} value={item.explanation}></textarea> :
+                            item.explanation ? <textarea maxlength="200" readOnly className={"itemTextAreaBoxs col999"} value={text} /> :
                                <span className={"itemPlayceHolder"}>编辑检查结果</span>
                        }
@@ -127,9 +154,6 @@ export default class TroubleItemComponent extends React.Component{
                <div className={"itemControl rel"}>
                    {imgFiles}
-                    <ImageComponent disabled={!(item.isExistProblem && parseInt(item.isExistProblem) === 1)} type={"add"} handleClikImgFunc = {this.addImg} noCloseBtn = {true} />
-                    <ImageComponent handleClikImgFunc = {this.reRreshImg} type={"refresh"} noCloseBtn = {true} />
                </div>
            </div>
        )

--- a/client/components/TroubleComponent/TroubleItemComponent/index.css
+++ b/client/components/TroubleComponent/TroubleItemComponent/index.css
@@ -58,7 +58,8 @@
 }
 .troubleItemComponent .itemTextArea{
    height: 198px;
-    margin-bottom: 29px;
+    /*margin-bottom: 29px;*/
+    margin-bottom: 9px;
 }
 .troubleItemComponent .itemTextAreaBox{
    width: 1250px;
@@ -94,6 +95,14 @@
    /*display: flex;*/
    /*flex-direction: row;*/
    /*flex-wrap: nowrap;*/
+    /*overflow:hidden;*/
+    padding-left: 0;
+    margin-left: 44px;
+    margin-top: 30px;
+}
+.troubleItemComponent .itemControl .troubleSwiperImgContainer{
+    margin-top: 20px;
+    overflow: visible;
 }
 .troubleItemComponent .itemControl .controlBox{
    width: 90px;

--- a/client/config/swiperContainer.js
+++ b/client/config/swiperContainer.js
 module.exports = {
    troubleSwiperContainer : 'troubleSwiperContainer',
+    troubleSwiperImgContainer : 'troubleSwiperImgContainer',
    damageSwiperContainer : 'damageSwiperContainer',
    editProblemSwiperContainer:'editProblemSwiperContainer',
    productPostionContainer:"productPostionContainer"

--- a/client/containers/OtherQuestionContainer/OtherQuestionContainer.jsx
+++ b/client/containers/OtherQuestionContainer/OtherQuestionContainer.jsx
@@ -76,7 +76,7 @@ export default class OtherQuestionContainer extends React.Component{
        }
    }
    // 2. 在编辑备注页面组件 点击返回
-    handleEditGoBack(){
+    handleEditGoBack(hasChange){
        this.setState({
            showPop:true,
            popupInfo:{

--- a/client/containers/TextAreaContainer/TextAreaContainer.jsx
+++ b/client/containers/TextAreaContainer/TextAreaContainer.jsx
@@ -6,17 +6,28 @@ export default class TextAreaContainer extends React.Component{
    constructor(props){
        super(props);
        this.state = {
-            text : ''
+            text : '',
-        }
+            originText : ''
+        };
        this.getOtherHeader = this.getOtherHeader.bind(this);
        this.saveText = this.saveText.bind(this);
+        this.goBack = this.goBack.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    componentWillMount() {
        let {text} = this.props;
+        let hasChange = text ? true : false ;
        this.setState({
-            text : text
+            text : text,
+            originText : text,
+        })
+    }
+    componentWillUnmount(){
+        this.setState({
+            text : "",
+            originText : "",
        })
    }
@@ -43,10 +54,15 @@ export default class TextAreaContainer extends React.Component{
        }
    }
+    goBack(){
+        let hasChange = this.state.text || this.state.text !== this.state.originText ? true : false;
+        this.props.goBack(hasChange);
+    }
    getOtherHeader(){
        let {goBack} = this.props;
        return <div className={"otherHeader font32 clearfix"}>
-            <div className={"fl colfff"} onClick={()=>goBack()}>
+            <div className={"fl colfff"} onClick={()=>this.goBack()}>
                <i className={"iconfont middle icon font58 icon-circle-left circleIcon"}></i>
                <span className={"middle"}>编辑检查结果</span>
            </div>

--- a/client/containers/TroubleContainer/TroubleContainer.jsx
+++ b/client/containers/TroubleContainer/TroubleContainer.jsx
@@ -40,6 +40,7 @@ export default class TroubleContainer extends React.Component{
        this.dealTrouble = this.dealTrouble.bind(this);
        this.setStyle = this.setStyle.bind(this);
        this.onSlideChangeEnd = this.onSlideChangeEnd.bind(this);
+        this.abandonSaveText = this.abandonSaveText.bind(this);
    }
@@ -52,6 +53,7 @@ export default class TroubleContainer extends React.Component{
    }
    componentWillReceiveProps(nextProps){
+        console.log("troubleList in")
        let troubleList = nextProps.troubleList;
        let nowTroubleList = this.state.troubleList;
        let troubleErrorCodeList = Array.isArray(troubleList.details) ? troubleList.details.map(i=>i.errorCode) : [];
@@ -68,7 +70,6 @@ export default class TroubleContainer extends React.Component{
                troubleList : troubleList
            })
        }
        let refreshImg = nextProps.refreshImg;
        if(refreshImg && refreshImg.errorId && refreshImg.type && refreshImg.files){
            this.updateImg(refreshImg);
@@ -121,6 +122,22 @@ export default class TroubleContainer extends React.Component{
        }
    }
+    handleDeleteImg(errorId,type,fileId){
+        let {deleteImg} = this.props;
+        let troubleList = this.state.troubleList;
+        let details = troubleList.details;
+        let index = details.findIndex(d=>d.id === errorId && d.type === type);
+        if(index > -1){
+            this.setState({
+                tempinitialSlide : index,
+                initialSlide : index,
+            },()=>{
+                deleteImg(errorId,type,fileId)
+            })
+        }
+    }
    setItem(errcode,option,info){
        let troubleList = this.state.troubleList;
        let details = troubleList.details;
@@ -140,8 +157,9 @@ export default class TroubleContainer extends React.Component{
        this.setItem(errcode,'explanation',text);
    }
-    goBack(){
+    abandonSaveText(){
-        console.log("goBack initialSlide ", this.state.initialSlide)
+        let {showPopup,hidePopup} = this.props;
+        hidePopup();
        this.setState({
            currentErrorCode : 0,
            showStatus : showDom[1],
@@ -152,6 +170,21 @@ export default class TroubleContainer extends React.Component{
        })
    }
+    goBack(hasChange){
+        let {showPopup,hidePopup} = this.props;
+        if(hasChange){
+            let btnDom1 = <Button key={"textGoBackTrouble1"} style={{'width':'260px','marginRight':'30px'}} text={"取消"} option={hidePopup}/>
+            let btnDom2 = <Button key={"textGoBackTrouble2"} style={{'width':'260px'}} text={"放弃"} option={this.abandonSaveText}/>
+            showPopup({
+                popupText:'是否放弃更新编辑的内容？',
+                popupButtons:[btnDom1,btnDom2]
+            })
+        }else{
+            this.abandonSaveText();
+        }
+    }
    dealTrouble(){
        let {showPopup,hidePopup,updateTroubleList} = this.props;
        let troubleList = this.state.troubleList;
@@ -159,7 +192,6 @@ export default class TroubleContainer extends React.Component{
        let arr = details.filter(d=>{
            return !d.isExistProblem || ( d.isExistProblem === 1 && ! d.explanation)
        });
        let btnDom = <Button key={"dealTrouble1"} style={{'width':'260px'}} text={"关闭"} option={hidePopup}/>
        if(arr && arr.length > 0){
            showPopup({
@@ -185,17 +217,20 @@ export default class TroubleContainer extends React.Component{
        let troubleList = this.state.troubleList;
        let showTrouble = Array.isArray(troubleList.details) && troubleList.details.length > 0;
        let details = Array.isArray(troubleList.details) ? troubleList.details : [];
+        let imgLength = details.map(d=>Array.isArray(d.files) ? d.files.length : 0).reduce((pre,next)=>{return pre + next},0);
+        console.log("imgLength ",imgLength);
        let dom = details.map((i,k)=>{
            return <TroubleItem key={k} item={i} num={k+1} setItem={this.setItem}
                                showText={this.showText} showQrcode={this.showQrcode}
                                getRefreshImg={getRefreshImg}
-                                deleteImg={deleteImg}
+                                deleteImg={(errorId,type,fileId)=>this.handleDeleteImg(errorId,type,fileId)}
                                showPopup={showPopup}
                                hidePopup={hidePopup}
            />;
        });
        let initialSlide = this.state.initialSlide;
+        let swiperCount = details.length + imgLength;
        let swiperOptions = {
            width : 1396,
            spaceBetween: 30,
@@ -206,8 +241,6 @@ export default class TroubleContainer extends React.Component{
            touchRatio:0.5,
            longSwipesRatio:0.1,
            threshold:50,
-            lazyLoadingInPrevNext:true,
-            lazyLoading : true,
            followFinger:false,
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
@@ -216,10 +249,7 @@ export default class TroubleContainer extends React.Component{
            initialSlide : initialSlide
        };
        let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
-        let swiperCount = details.length;
-        console.log("render slide ",this.state.initialSlide)
        return(
            <div className={"toubleContainer " + (showTrouble ? '' : 'hide')}>
@@ -236,7 +266,7 @@ export default class TroubleContainer extends React.Component{
                            <div className={"troubleBox"}>
                                <SwiperComponent
                                    swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
-                                    initialSlide={initialSlide}
+                                    initialSlide={initialSlide} canMove={true}
                                >
                                    {dom}
                                </SwiperComponent>

--- a/client/index.js
+++ b/client/index.js
@@ -31,6 +31,6 @@ let store = activateVendor();
 // UTILPATH.socket.init(129,17);
 UTILPATH.socket.testIp(209);
-// UTILPATH.socket.testIp(199);
+// UTILPATH.socket.testIp(179);
 renderPage(store);
\ No newline at end of file