Skip to content

M
max_android_panel
Commit f24d78c8 by Zhang Xin
Options

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

parent 54f8f3f4
Showing with 140 additions and 39 deletions
client/components/CommonComponent/ImgToolComponent/CommonSmalContainer.jsx
...@@ -16,6 +16,14 @@ let refreshIconDisabledSrc = UTILPATH.localImg.refresh_disabled; ...@@ -16,6 +16,14 @@ let refreshIconDisabledSrc = UTILPATH.localImg.refresh_disabled;
export default class ImgToolComponent extends React.Component{ export default class ImgToolComponent extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
this.handleImgClick = this.handleImgClick.bind(this)
}
handleImgClick(){
let {disabled,handleClikImgFunc} = this.props;
if(!disabled){
handleClikImgFunc();
}
} }
render(){ render(){
...@@ -39,7 +47,7 @@ export default class ImgToolComponent extends React.Component{ ...@@ -39,7 +47,7 @@ export default class ImgToolComponent extends React.Component{
break; break;
} }
if(type == "add" && disabled){ if(type === "add" && disabled){
imgSrc = addIconDisabledSrc; imgSrc = addIconDisabledSrc;
} }
if(type === "refresh" && disabled){ if(type === "refresh" && disabled){
...@@ -47,7 +55,13 @@ export default class ImgToolComponent extends React.Component{ ...@@ -47,7 +55,13 @@ export default class ImgToolComponent extends React.Component{
} }
return( return(
<div className={"ImgToolComponent"}> <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>) noCloseBtn?"":(<span className={"closeBtn"} onClick={props.handleClikCloseFunc}>×</span>)
} }
......
client/components/CommonComponent/SwiperComponent/SwiperComponent.jsx
...@@ -29,19 +29,24 @@ export default class SwiperComponent extends React.Component{ ...@@ -29,19 +29,24 @@ export default class SwiperComponent extends React.Component{
} }
componentWillReceiveProps(nextProps){ 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){ componentDidUpdate(prevProps){
const { swiperCount,swiperContainer,initialSlide,initialSlideTime } = this.props; const { swiperCount,swiperContainer,initialSlide,initialSlideTime,swiperOptions,canMove } = this.props;
if (prevProps.swiperCount !== swiperCount) { if (prevProps.swiperCount !== swiperCount) {
this.state.swiperList[swiperContainer].init(); 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() { componentWillUnmount() {
...@@ -52,7 +57,8 @@ export default class SwiperComponent extends React.Component{ ...@@ -52,7 +57,8 @@ export default class SwiperComponent extends React.Component{
render(){ render(){
let props = this.props; 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) { let childNodes = React.Children.map(props.children,function (child,index) {
return ( return (
<div key={swiperContainer + "swiper" +index} className={"swiper-slide"}> <div key={swiperContainer + "swiper" +index} className={"swiper-slide"}>
...@@ -61,7 +67,7 @@ export default class SwiperComponent extends React.Component{ ...@@ -61,7 +67,7 @@ export default class SwiperComponent extends React.Component{
) )
}); });
return( return(
<div className={"swiper-container " + swiperContainer}> <div className={"swiper-container " + swiperContainer + extraClass }>
<div className={"swiper-wrapper"}> <div className={"swiper-wrapper"}>
{childNodes} {childNodes}
</div> </div>
......
client/components/TroubleComponent/TroubleItemComponent/TroubleItemComponent.jsx
import React from 'react'; import React from 'react';
import ImageComponent from '../../CommonComponent/ImgToolComponent/CommonSmalContainer'; import ImageComponent from '../../CommonComponent/ImgToolComponent/CommonSmalContainer';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent' import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import SwiperComponent from '../../CommonComponent/SwiperComponent/SwiperComponent'
require('./index.css') require('./index.css')
export default class TroubleItemComponent extends React.Component{ export default class TroubleItemComponent extends React.Component{
constructor(props){ constructor(props){
...@@ -45,14 +46,12 @@ export default class TroubleItemComponent extends React.Component{ ...@@ -45,14 +46,12 @@ export default class TroubleItemComponent extends React.Component{
deleteImgById(fileId){ deleteImgById(fileId){
console.log("deleteImgById :",fileId); console.log("deleteImgById :",fileId);
let {hidePopup} = this.props;
let props = this.props; let props = this.props;
let {deleteImg} = props; let {deleteImg,hidePopup} = props;
let item = props.item; let item = props.item;
let errorId = item.id; let errorId = item.id;
let type = item.type; let type = item.type;
console.log(errorId,type,fileId); hidePopup();
hidePopup()
deleteImg(errorId,type,fileId) deleteImg(errorId,type,fileId)
} }
...@@ -89,7 +88,35 @@ export default class TroubleItemComponent extends React.Component{ ...@@ -89,7 +88,35 @@ export default class TroubleItemComponent extends React.Component{
type={"custom"} type={"custom"}
imgSrc = {f.filePath}/> 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 ( return (
<div className={"troubleItemComponent "+((item.isExistProblem === 1 && item.explanation) || item.isExistProblem === 2 ? 'finish':'')}> <div className={"troubleItemComponent "+((item.isExistProblem === 1 && item.explanation) || item.isExistProblem === 2 ? 'finish':'')}>
...@@ -112,13 +139,13 @@ export default class TroubleItemComponent extends React.Component{ ...@@ -112,13 +139,13 @@ export default class TroubleItemComponent extends React.Component{
</div> </div>
<div className={"itemTextArea rel font24"}> <div className={"itemTextArea rel font24"}>
<div className={"itemTextEdit font24 colff7860"} onClick={()=>props.showText(item.errorCode)}> <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> <span> 编辑</span>
</div> </div>
<span className={"colff7860 font32 star"}>*</span> <span className={"colff7860 font32 star"}>*</span>
<div className={"itemTextAreaBox col999 border_e5"} onClick={()=>props.showText(item.errorCode)}> <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> <span className={"itemPlayceHolder"}>编辑检查结果</span>
} }
...@@ -127,9 +154,6 @@ export default class TroubleItemComponent extends React.Component{ ...@@ -127,9 +154,6 @@ export default class TroubleItemComponent extends React.Component{
<div className={"itemControl rel"}> <div className={"itemControl rel"}>
{imgFiles} {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>
</div> </div>
) )
......
client/components/TroubleComponent/TroubleItemComponent/index.css
...@@ -58,7 +58,8 @@ ...@@ -58,7 +58,8 @@
} }
.troubleItemComponent .itemTextArea{ .troubleItemComponent .itemTextArea{
height: 198px; height: 198px;
margin-bottom: 29px; /*margin-bottom: 29px;*/
margin-bottom: 9px;
} }
.troubleItemComponent .itemTextAreaBox{ .troubleItemComponent .itemTextAreaBox{
width: 1250px; width: 1250px;
...@@ -94,6 +95,14 @@ ...@@ -94,6 +95,14 @@
/*display: flex;*/ /*display: flex;*/
/*flex-direction: row;*/ /*flex-direction: row;*/
/*flex-wrap: nowrap;*/ /*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{ .troubleItemComponent .itemControl .controlBox{
width: 90px; width: 90px;
......
client/config/swiperContainer.js
module.exports = { module.exports = {
troubleSwiperContainer : 'troubleSwiperContainer', troubleSwiperContainer : 'troubleSwiperContainer',
troubleSwiperImgContainer : 'troubleSwiperImgContainer',
damageSwiperContainer : 'damageSwiperContainer', damageSwiperContainer : 'damageSwiperContainer',
editProblemSwiperContainer:'editProblemSwiperContainer', editProblemSwiperContainer:'editProblemSwiperContainer',
productPostionContainer:"productPostionContainer" productPostionContainer:"productPostionContainer"
......
client/containers/OtherQuestionContainer/OtherQuestionContainer.jsx
...@@ -76,7 +76,7 @@ export default class OtherQuestionContainer extends React.Component{ ...@@ -76,7 +76,7 @@ export default class OtherQuestionContainer extends React.Component{
} }
} }
// 2. 在编辑备注页面组件 点击返回 // 2. 在编辑备注页面组件 点击返回
handleEditGoBack(){ handleEditGoBack(hasChange){
this.setState({ this.setState({
showPop:true, showPop:true,
popupInfo:{ popupInfo:{
......
client/containers/TextAreaContainer/TextAreaContainer.jsx
...@@ -6,17 +6,28 @@ export default class TextAreaContainer extends React.Component{ ...@@ -6,17 +6,28 @@ export default class TextAreaContainer extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
this.state = { this.state = {
text : '' text : '',
} originText : ''
};
this.getOtherHeader = this.getOtherHeader.bind(this); this.getOtherHeader = this.getOtherHeader.bind(this);
this.saveText = this.saveText.bind(this); this.saveText = this.saveText.bind(this);
this.goBack = this.goBack.bind(this);
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
} }
componentWillMount() { componentWillMount() {
let {text} = this.props; let {text} = this.props;
let hasChange = text ? true : false ;
this.setState({ this.setState({
text : text text : text,
originText : text,
})
}
componentWillUnmount(){
this.setState({
text : "",
originText : "",
}) })
} }
...@@ -43,10 +54,15 @@ export default class TextAreaContainer extends React.Component{ ...@@ -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(){ getOtherHeader(){
let {goBack} = this.props; let {goBack} = this.props;
return <div className={"otherHeader font32 clearfix"}> 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> <i className={"iconfont middle icon font58 icon-circle-left circleIcon"}></i>
<span className={"middle"}>编辑检查结果</span> <span className={"middle"}>编辑检查结果</span>
</div> </div>
......
client/containers/TroubleContainer/TroubleContainer.jsx
...@@ -40,6 +40,7 @@ export default class TroubleContainer extends React.Component{ ...@@ -40,6 +40,7 @@ export default class TroubleContainer extends React.Component{
this.dealTrouble = this.dealTrouble.bind(this); this.dealTrouble = this.dealTrouble.bind(this);
this.setStyle = this.setStyle.bind(this); this.setStyle = this.setStyle.bind(this);
this.onSlideChangeEnd = this.onSlideChangeEnd.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{ ...@@ -52,6 +53,7 @@ export default class TroubleContainer extends React.Component{
} }
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps){
console.log("troubleList in")
let troubleList = nextProps.troubleList; let troubleList = nextProps.troubleList;
let nowTroubleList = this.state.troubleList; let nowTroubleList = this.state.troubleList;
let troubleErrorCodeList = Array.isArray(troubleList.details) ? troubleList.details.map(i=>i.errorCode) : []; let troubleErrorCodeList = Array.isArray(troubleList.details) ? troubleList.details.map(i=>i.errorCode) : [];
...@@ -68,7 +70,6 @@ export default class TroubleContainer extends React.Component{ ...@@ -68,7 +70,6 @@ export default class TroubleContainer extends React.Component{
troubleList : troubleList troubleList : troubleList
}) })
} }
let refreshImg = nextProps.refreshImg; let refreshImg = nextProps.refreshImg;
if(refreshImg && refreshImg.errorId && refreshImg.type && refreshImg.files){ if(refreshImg && refreshImg.errorId && refreshImg.type && refreshImg.files){
this.updateImg(refreshImg); this.updateImg(refreshImg);
...@@ -121,6 +122,22 @@ export default class TroubleContainer extends React.Component{ ...@@ -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){ setItem(errcode,option,info){
let troubleList = this.state.troubleList; let troubleList = this.state.troubleList;
let details = troubleList.details; let details = troubleList.details;
...@@ -140,8 +157,9 @@ export default class TroubleContainer extends React.Component{ ...@@ -140,8 +157,9 @@ export default class TroubleContainer extends React.Component{
this.setItem(errcode,'explanation',text); this.setItem(errcode,'explanation',text);
} }
goBack(){ abandonSaveText(){
console.log("goBack initialSlide ", this.state.initialSlide) let {showPopup,hidePopup} = this.props;
hidePopup();
this.setState({ this.setState({
currentErrorCode : 0, currentErrorCode : 0,
showStatus : showDom[1], showStatus : showDom[1],
...@@ -152,6 +170,21 @@ export default class TroubleContainer extends React.Component{ ...@@ -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(){ dealTrouble(){
let {showPopup,hidePopup,updateTroubleList} = this.props; let {showPopup,hidePopup,updateTroubleList} = this.props;
let troubleList = this.state.troubleList; let troubleList = this.state.troubleList;
...@@ -159,7 +192,6 @@ export default class TroubleContainer extends React.Component{ ...@@ -159,7 +192,6 @@ export default class TroubleContainer extends React.Component{
let arr = details.filter(d=>{ let arr = details.filter(d=>{
return !d.isExistProblem || ( d.isExistProblem === 1 && ! d.explanation) return !d.isExistProblem || ( d.isExistProblem === 1 && ! d.explanation)
}); });
let btnDom = <Button key={"dealTrouble1"} style={{'width':'260px'}} text={"关闭"} option={hidePopup}/> let btnDom = <Button key={"dealTrouble1"} style={{'width':'260px'}} text={"关闭"} option={hidePopup}/>
if(arr && arr.length > 0){ if(arr && arr.length > 0){
showPopup({ showPopup({
...@@ -185,17 +217,20 @@ export default class TroubleContainer extends React.Component{ ...@@ -185,17 +217,20 @@ export default class TroubleContainer extends React.Component{
let troubleList = this.state.troubleList; let troubleList = this.state.troubleList;
let showTrouble = Array.isArray(troubleList.details) && troubleList.details.length > 0; let showTrouble = Array.isArray(troubleList.details) && troubleList.details.length > 0;
let details = Array.isArray(troubleList.details) ? troubleList.details : []; 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)=>{ let dom = details.map((i,k)=>{
return <TroubleItem key={k} item={i} num={k+1} setItem={this.setItem} return <TroubleItem key={k} item={i} num={k+1} setItem={this.setItem}
showText={this.showText} showQrcode={this.showQrcode} showText={this.showText} showQrcode={this.showQrcode}
getRefreshImg={getRefreshImg} getRefreshImg={getRefreshImg}
deleteImg={deleteImg} deleteImg={(errorId,type,fileId)=>this.handleDeleteImg(errorId,type,fileId)}
showPopup={showPopup} showPopup={showPopup}
hidePopup={hidePopup} hidePopup={hidePopup}
/>; />;
}); });
let initialSlide = this.state.initialSlide; let initialSlide = this.state.initialSlide;
let swiperCount = details.length + imgLength;
let swiperOptions = { let swiperOptions = {
width : 1396, width : 1396,
spaceBetween: 30, spaceBetween: 30,
...@@ -206,8 +241,6 @@ export default class TroubleContainer extends React.Component{ ...@@ -206,8 +241,6 @@ export default class TroubleContainer extends React.Component{
touchRatio:0.5, touchRatio:0.5,
longSwipesRatio:0.1, longSwipesRatio:0.1,
threshold:50, threshold:50,
lazyLoadingInPrevNext:true,
lazyLoading : true,
followFinger:false, followFinger:false,
observer: true,//修改swiper自己或子元素时，自动初始化swiper observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper
...@@ -216,10 +249,7 @@ export default class TroubleContainer extends React.Component{ ...@@ -216,10 +249,7 @@ export default class TroubleContainer extends React.Component{
initialSlide : initialSlide initialSlide : initialSlide
}; };
let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer; let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
let swiperCount = details.length;
console.log("render slide ",this.state.initialSlide)
return( return(
<div className={"toubleContainer " + (showTrouble ? '' : 'hide')}> <div className={"toubleContainer " + (showTrouble ? '' : 'hide')}>
...@@ -236,7 +266,7 @@ export default class TroubleContainer extends React.Component{ ...@@ -236,7 +266,7 @@ export default class TroubleContainer extends React.Component{
<div className={"troubleBox"}> <div className={"troubleBox"}>
<SwiperComponent <SwiperComponent
swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount} swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
initialSlide={initialSlide} initialSlide={initialSlide} canMove={true}
> >
{dom} {dom}
</SwiperComponent> </SwiperComponent>
......
client/index.js
...@@ -31,6 +31,6 @@ let store = activateVendor(); ...@@ -31,6 +31,6 @@ let store = activateVendor();
// UTILPATH.socket.init(129,17); // UTILPATH.socket.init(129,17);
UTILPATH.socket.testIp(209); UTILPATH.socket.testIp(209);
// UTILPATH.socket.testIp(199); // UTILPATH.socket.testIp(179);
renderPage(store); renderPage(store);
\ No newline at end of file
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