Skip to content

M
max_android_panel
Commit c1c9e40a by yaxiLiuu
Options

finished commonimg component

parent 336d5a4a
Showing with 219 additions and 38 deletions
client/actions/otherQuestion.js
...@@ -10,7 +10,7 @@ const fakeJsonData = { ...@@ -10,7 +10,7 @@ const fakeJsonData = {
"data": { "data": {
"feeds": [ "feeds": [
{ {
"id": 6, "id": 7,
"files": [ "files": [
{ {
"id": 13, "id": 13,
...@@ -31,7 +31,7 @@ const fakeJsonData = { ...@@ -31,7 +31,7 @@ const fakeJsonData = {
{ {
"id": 6, "id": 6,
"files": [ "files": [
/*{ {
"id": 13, "id": 13,
"filePath": "http://static.mjitech.com/static/sku/0/0/2/1471329355724.jpg" "filePath": "http://static.mjitech.com/static/sku/0/0/2/1471329355724.jpg"
}, },
...@@ -42,7 +42,7 @@ const fakeJsonData = { ...@@ -42,7 +42,7 @@ const fakeJsonData = {
{ {
"id": 17, "id": 17,
"filePath": "http://static.mjitech.com/static/sku/0/0/427/1471329704482.jpg" "filePath": "http://static.mjitech.com/static/sku/0/0/427/1471329704482.jpg"
}*/ }
], ],
"parentProblemName": null, "parentProblemName": null,
"subProblemName": null "subProblemName": null
...@@ -106,7 +106,22 @@ const fakeJsonData = { ...@@ -106,7 +106,22 @@ const fakeJsonData = {
] ]
} }
} }
export function intGetOtherProblem(postData) { const fakseJsonData2 = {
"meta":
{
"code": "200",
"message": "成功",
"success": true
},
"data":
{
"feed":
{
"id": 10,
}
}
}
export function initGetOtherProblem(postData) {
return (dispatch) => { return (dispatch) => {
/*let url = String(domain+'/web/machine_pad/list_other_fault.action'); /*let url = String(domain+'/web/machine_pad/list_other_fault.action');
fetch(url,{ fetch(url,{
...@@ -128,9 +143,19 @@ export function intGetOtherProblem(postData) { ...@@ -128,9 +143,19 @@ export function intGetOtherProblem(postData) {
dispatch(initSuccess(fakeJsonData.data)) dispatch(initSuccess(fakeJsonData.data))
} }
} }
export function addNewProbem(postaData) {
dispatch(addNewProblemSuccess(fakseJsonData2.data))
}
function initSuccess(data) { function initSuccess(data) {
return { return {
type: actionTypes.INIT_GETNEWPROBLEM_SUCCESS, type: actionTypes.INIT_GETNEWPROBLEM_SUCCESS,
data data
} }
} }
function addNewProblemSuccess(data) {
return{
type:actionTypes.ADD_NEWPROBLEM_SUCCESS,
data
}
}
\ No newline at end of file
client/actiontype/otherQuestion.js
/*const INIT_SCANBARCODEGETPRODUCTINFO_SUCCESS = 'INIT_SCANBARCODEGETPRODUCTINFO_SUCCESS'*/ /*const INIT_SCANBARCODEGETPRODUCTINFO_SUCCESS = 'INIT_SCANBARCODEGETPRODUCTINFO_SUCCESS'*/
const INIT_GETNEWPROBLEM_SUCCESS = 'INIT_GETNEWPROBLEM_SUCCESS' const INIT_GETNEWPROBLEM_SUCCESS = 'INIT_GETNEWPROBLEM_SUCCESS';
const ADD_NEWPROBLEM_SUCCESS = 'ADD_NEWPROBLEM_SUCCESS';
module.exports = {INIT_GETNEWPROBLEM_SUCCESS}
module.exports = {INIT_GETNEWPROBLEM_SUCCESS,ADD_NEWPROBLEM_SUCCESS}
client/components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer.jsx
...@@ -7,6 +7,9 @@ let refreshIconSrc = UTILPATH.localImg.refreshIcon; ...@@ -7,6 +7,9 @@ let refreshIconSrc = UTILPATH.localImg.refreshIcon;
* type == custom 为要显示的图片 * type == custom 为要显示的图片
* type == add 为添加图片的icon 不需要传入imgSrc * type == add 为添加图片的icon 不需要传入imgSrc
* type == refresh 为刷新的icon 不需要传入imgSrc * type == refresh 为刷新的icon 不需要传入imgSrc
* handleClikImgFunc 为点击当前图片的方法
* noCloseBtn 为是否有删除按钮
* handleClikCloseFunc 为点击删除按钮的方法
*/ */
export default class ImgToolComponent extends React.Component{ export default class ImgToolComponent extends React.Component{
constructor(props){ constructor(props){
...@@ -18,6 +21,8 @@ export default class ImgToolComponent extends React.Component{ ...@@ -18,6 +21,8 @@ export default class ImgToolComponent extends React.Component{
let type = props.type; let type = props.type;
let imgSrc = ''; let imgSrc = '';
let noCloseBtn = props.noCloseBtn; let noCloseBtn = props.noCloseBtn;
let handleClikImgFunc = props.handleClikImgFunc;
let handleClikCloseFunc = props.handleClikCloseFunc;
switch(type){ switch(type){
case "custom": case "custom":
...@@ -34,9 +39,9 @@ export default class ImgToolComponent extends React.Component{ ...@@ -34,9 +39,9 @@ export default class ImgToolComponent extends React.Component{
return( return(
<div className={"ImgToolComponent"}> <div className={"ImgToolComponent"}>
<div className={"imgItem"}> <div className={"imgItem"}>
<img src={imgSrc} alt=""/> <img src={imgSrc} alt="" onClick={handleClikImgFunc()}/>
{ {
noCloseBtn?"":(<span className={"closeBtn"}>×</span>) noCloseBtn?"":(<span className={"closeBtn"} onClick={handleClikCloseFunc()}>×</span>)
} }
</div> </div>
</div> </div>
......
client/components/OtherQuestionComponent/EditProblemComponent.jsx
import React from 'react'; import React from 'react';
require('./index.css'); require('./index.css');
import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer' import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer';
export default class EditProblemItem extends React.Component{ export default class EditProblemItem extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
...@@ -76,6 +76,16 @@ export default class EditProblemItem extends React.Component{ ...@@ -76,6 +76,16 @@ export default class EditProblemItem extends React.Component{
render(){ render(){
let props = this.props; let props = this.props;
let imgFiles = props.baseInfo.files; let imgFiles = props.baseInfo.files;
let troubleId = props.trouleId;
// 方法
// 1. 删除问题
let deleteProblem = props.deleteProblem;
// 2. 刷新图片
let reRreshImg = props.reRreshImg;
// 3. 添加图片
let addImg = props.addImg;
// 4. 删除图片
let deleteImg = props.deleteImg;
//问题分类 //问题分类
let categoryProblemUi = props.problemInfo.map((item,index)=>{ let categoryProblemUi = props.problemInfo.map((item,index)=>{
return <li key={"bigProblem"+index} return <li key={"bigProblem"+index}
...@@ -93,12 +103,21 @@ export default class EditProblemItem extends React.Component{ ...@@ -93,12 +103,21 @@ export default class EditProblemItem extends React.Component{
}) })
//图片部分 //图片部分
let imgListUi = imgFiles.map((item,index)=>{ let imgListUi = imgFiles.map((item,index)=>{
return <ImgToolComponent key={"troubelImg"+index} noCloseBtn={false} type={"custom"} imgSrc = {item.filePath} ></ImgToolComponent> return <ImgToolComponent
}) key={"troubelImg"+index}
noCloseBtn={false}
handleClikCloseFunc = {deleteImg}
handleClikImgFunc = {()=>{}}
type={"custom"}
imgSrc = {item.filePath}
></ImgToolComponent>
});
//备注部分
let remarkText = props.remarkText;
return ( return (
<div className={"editUploadItem clearfix"}> <div className={"editUploadItem clearfix"}>
<span className={"closeBtn"}>×</span> <span className={"closeBtn"} onClick={deleteProblem()}>×</span>
<div className={"newTroubleTitle"}> <div className={"newTroubleTitle"}>
新故障问题：故障 <span>SD568844</span> 新故障问题：故障 <span>SD568844</span>
</div> </div>
...@@ -132,8 +151,8 @@ export default class EditProblemItem extends React.Component{ ...@@ -132,8 +151,8 @@ export default class EditProblemItem extends React.Component{
<div className={"newTroubleRemark clearfix"}> <div className={"newTroubleRemark clearfix"}>
<span className={"startIcon"}>*</span> <span className={"startIcon"}>*</span>
<div className={"remarkContent"}> <div className={"remarkContent"}>
<div className={"editIcon"}>编辑</div> <div className={"editIcon"} onClick={props.clickEdit}>编辑</div>
<div className={"remarkText"}>编辑检查结果</div> <div className={"remarkText"}>{remarkText?remarkText:("编辑检查结果")}</div>
</div> </div>
</div> </div>
<div className={"damageImgs clearfix"}> <div className={"damageImgs clearfix"}>
...@@ -142,9 +161,9 @@ export default class EditProblemItem extends React.Component{ ...@@ -142,9 +161,9 @@ export default class EditProblemItem extends React.Component{
{imgListUi} {imgListUi}
</div> </div>
<div className={"operationLeft"}> <div className={"operationLeft"}>
<ImgToolComponent type={"add"} noCloseBtn = {true}></ImgToolComponent> <ImgToolComponent type={"add"} handleClikImgFunc = {addImg} noCloseBtn = {true}></ImgToolComponent>
{ {
imgFiles && imgFiles.length>0?(<ImgToolComponent type={"refresh"} noCloseBtn = {true}></ImgToolComponent>):"" imgFiles && imgFiles.length>0?(<ImgToolComponent handleClikImgFunc = {reRreshImg} type={"refresh"} noCloseBtn = {true}></ImgToolComponent>):""
} }
</div> </div>
</div> </div>
......
client/containers/OtherQuestionContainer/OtherQuestionContainer.jsx
...@@ -4,22 +4,25 @@ import { connect } from 'react-redux'; ...@@ -4,22 +4,25 @@ import { connect } from 'react-redux';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent' import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer' import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer'
import EditProblemItem from '../../components/OtherQuestionComponent/EditProblemComponent' import EditProblemItem from '../../components/OtherQuestionComponent/EditProblemComponent'
import TextArea from "../TextAreaContainer/TextAreaContainer";
import {getOtherProblem} from '../../actions/otherQuestion' import {getOtherProblem} from '../../actions/otherQuestion'
import trouble from "../../reducers/trouble";
require('./index.css'); require('./index.css');
export default class OtherQuestionContainer extends React.Component{ export default class OtherQuestionContainer extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
this.state = { this.state = {
showCategoryElement:false, showTextArea:false,
showDetailElement:false, tmpText:"",
currentLiIndex:0 problemList:{},
currentProblemId:''
} }
} }
componentWillMount() { componentWillMount() {
let {dispatch,initStart} = this.props; let {dispatch,initStart,state} = this.props;
console.log(this.props); // 请求 初始数据接口
let postData = {}; let postData = {};
initStart(postData) initStart(postData);
} }
componentDidMount(){ componentDidMount(){
...@@ -27,26 +30,112 @@ export default class OtherQuestionContainer extends React.Component{ ...@@ -27,26 +30,112 @@ export default class OtherQuestionContainer extends React.Component{
componentDidUpdate() { componentDidUpdate() {
} }
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps){
let {state} = nextProps;
let {otherQuestion} = state;
let {feeds} = otherQuestion;
let problemList = {};
feeds.map((item,index)=>{
problemList[item.id] = {}
problemList[item.id].remarkText = ""
});
this.setState({
problemList:problemList
})
} }
componentWillUnmount(){ componentWillUnmount(){
} }
handleShowElement(value){ /*
console.log(value); * 输入故障备注信息部分
console.log(this.state[value]) * */
this.setState( // 1. 显示编辑备注组件
{ handleShowRemark(troubleId){
[value]:!this.state[value] let currentProblem = this.state.problemList[troubleId];
let tmpText = currentProblem.remarkText;
this.setState({
showTextArea : true,
tmpText: tmpText,
currentProblemId:troubleId
})
} }
) // 2. 在编辑备注页面组件 点击返回
handleEditGoBack(){
this.setState({
showTextArea:false
})
console.log("点击文本框页的返回键");
} }
handleDetailProblem(event){ // 3. 在编辑备注组件页面 点击保存
handleSaveRemarkText(text){
let troubleId = this.state.currentProblemId;
let currentRemark = text;
let problemList = this.state.problemList;
problemList[troubleId].remarkText = currentRemark;
this.setState({ this.setState({
currentLiIndex: parseInt(event.currentTarget.getAttribute('date-index')) problemList:problemList,
showTextArea:false
},()=>{
console.log(this.state.problemList)
}) })
} }
/*
* 点击录入更多 添加新故障
* */
handleAddNewTroble(){
let postData = {};
let {addNewProblem} = this.props;
postData.employeeId = "dfdf";
postData.employeeId = "dfdf";
addNewProblem();
}
/*
* 删除已经编辑的的问题
* */
handleDeleteProblem(){
console.log("删除编辑的问题");
}
/*
*添加照片
* */
handleAddImg(){
console.log("添加照片")
}
/*
*刷新当前图片
* */
handleRefreshProbelmImg(){
console.log("刷新当前问题备注图片")
}
/*
* 删除图片
* */
handleDeleteImg(){
console.log("删除图片")
}
/*
* 整体提交已经编辑的问题
* */
handleSubmitProblemList(){
console.log("=======提交已经编辑的问题==")
}
/*
* 直接跳过
* */
handleOverPass(){
console.log("++++++++跳过=====")
}
render(){ render(){
//let 难道初始化的数据： //let 难道初始化的数据：
let {state} = this.props; let {state,addNewProblem} = this.props;
console.log(state) console.log(state)
let {otherQuestion} = state; let {otherQuestion} = state;
let {feeds,problems} = otherQuestion; let {feeds,problems} = otherQuestion;
...@@ -54,7 +143,20 @@ export default class OtherQuestionContainer extends React.Component{ ...@@ -54,7 +143,20 @@ export default class OtherQuestionContainer extends React.Component{
let swiperCount = 0; let swiperCount = 0;
feeds && feeds.length>0 ?( feeds && feeds.length>0 ?(
editProblemItemUI = feeds.map((i,k)=>{ editProblemItemUI = feeds.map((i,k)=>{
return <EditProblemItem problemInfo = {problems} baseInfo = {feeds[k]} key={k}/>; console.log(this.state);
let troubleId = i.id;
let currentRemark = this.state.problemList[troubleId].remarkText;
return <EditProblemItem
trouleId = {troubleId}
clickEdit = {this.handleShowRemark.bind(this,troubleId)}
problemInfo = {problems}
baseInfo = {i}
remarkText = {currentRemark}
deleteProblem = {()=>(this.handleDeleteProblem.bind(this))}
addImg = {()=>(this.handleAddImg.bind(this))}
reRreshImg = {()=>(this.handleRefreshProbelmImg.bind(this))}
deleteImg = {()=>(this.handleDeleteImg.bind(this))}
key={k}/>;
}) })
):"" ):""
feeds && feeds.length>0 ?( feeds && feeds.length>0 ?(
...@@ -72,6 +174,13 @@ export default class OtherQuestionContainer extends React.Component{ ...@@ -72,6 +174,13 @@ export default class OtherQuestionContainer extends React.Component{
return ( return (
this.state.showTextArea?(
<TextArea
text={this.state.tmpText}
goBack={this.handleEditGoBack.bind(this)}
saveText={this.handleSaveRemarkText.bind(this)}
></TextArea>
):(
<div className={"OtherQuestionContainer"}> <div className={"OtherQuestionContainer"}>
<div className={"otherQuestionTitleContainer"}>你是否有其他问题希望反馈(<i>*</i>必填项)</div> <div className={"otherQuestionTitleContainer"}>你是否有其他问题希望反馈(<i>*</i>必填项)</div>
<div className={"editOtherQuestionContainer clearfix"}> <div className={"editOtherQuestionContainer clearfix"}>
...@@ -82,11 +191,14 @@ export default class OtherQuestionContainer extends React.Component{ ...@@ -82,11 +191,14 @@ export default class OtherQuestionContainer extends React.Component{
</SwiperComponent> </SwiperComponent>
</div> </div>
<div className={"opeationContainer clearfix"}> <div className={"opeationContainer clearfix"}>
<button className={"addMoreBtn"}><span>+</span>录入更多</button> <button className={"addMoreBtn"} onClick={this.handleAddNewTroble.bind(this)}><span>+</span>录入更多</button>
<button className={"noMoreBtn"}>没有更多</button> <button className={"noMoreBtn"}>没有更多</button>
</div> </div>
<div className={"overPass"} onClick={this.handleOverPass.bind(this)}>跳过</div>
</div> </div>
) )
)
} }
} }
\ No newline at end of file
client/containers/OtherQuestionContainer/index.css
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
width: 100%; width: 100%;
background-color: #f5f5f5; background-color: #f5f5f5;
padding-left: 30px; padding-left: 30px;
position: relative;
} }
.OtherQuestionContainer .otherQuestionTitleContainer{ .OtherQuestionContainer .otherQuestionTitleContainer{
...@@ -14,6 +15,12 @@ ...@@ -14,6 +15,12 @@
.OtherQuestionContainer .editOtherQuestionContainer .editProblemSwiperContainer{ .OtherQuestionContainer .editOtherQuestionContainer .editProblemSwiperContainer{
overflow: visible; overflow: visible;
} }
.OtherQuestionContainer .overPass{
position: absolute;
right: 0px;
top: 0;
display: inline-block;
}
.OtherQuestionContainer .problemCategory,.OtherQuestionContainer .DetailProblem{ .OtherQuestionContainer .problemCategory,.OtherQuestionContainer .DetailProblem{
......
client/containers/PageContainer/PageContainer.jsx
...@@ -4,7 +4,7 @@ import { connect } from 'react-redux'; ...@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import {getStoreInfo} from "../../actions/getStore"; import {getStoreInfo} from "../../actions/getStore";
import {getTroubleList} from "../../actions/getTroubles"; import {getTroubleList} from "../../actions/getTroubles";
import {intGetOtherProblem} from "../../actions/otherQuestion" import {initGetOtherProblem,addNewProbem} from "../../actions/otherQuestion"
import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent' import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
import TroubleContainer from '../TroubleContainer/TroubleContainer' import TroubleContainer from '../TroubleContainer/TroubleContainer'
...@@ -37,7 +37,7 @@ class PageContainer extends React.Component { ...@@ -37,7 +37,7 @@ class PageContainer extends React.Component {
super(props); super(props);
// UTILPATH.socket.getIp(); // UTILPATH.socket.getIp();
this.state = { this.state = {
showPage : showPage[1], showPage : showPage[4],
lastPage : '', lastPage : '',
page : null, page : null,
popupInfo : defaultPopupInfo, popupInfo : defaultPopupInfo,
...@@ -146,7 +146,8 @@ class PageContainer extends React.Component { ...@@ -146,7 +146,8 @@ class PageContainer extends React.Component {
break; break;
case showPage[4]: case showPage[4]:
pages = <OtherQuestionContainer pages = <OtherQuestionContainer
initStart = {(postData)=>dispatch(intGetOtherProblem(postData))} initStart = {(postData)=>dispatch(initGetOtherProblem(postData))}
addNewProblem = {(postData)=>dispatch(addNewProbem(postData))}
state = {state} state = {state}
/>; />;
break; break;
......
client/containers/TroubleContainer/TroubleContainer.jsx
...@@ -78,12 +78,14 @@ export default class TroubleContainer extends React.Component{ ...@@ -78,12 +78,14 @@ export default class TroubleContainer extends React.Component{
let index = details.findIndex(d=>d.errorCode === errcode); let index = details.findIndex(d=>d.errorCode === errcode);
if(index > -1){ if(index > -1){
let text = details[index]['explanation']; let text = details[index]['explanation'];
console.log("text ",text) console.log("text ",text);
this.setState({ this.setState({
currentErrorCode : errcode, currentErrorCode : errcode,
showTextArea : true, showTextArea : true,
tmpText: text tmpText: text
}) })
} }
......
client/reducers/otherQuestion.js
...@@ -4,10 +4,16 @@ function initSuccess(state,data) { ...@@ -4,10 +4,16 @@ function initSuccess(state,data) {
let newInfo = Object.assign({},state,data); let newInfo = Object.assign({},state,data);
return newInfo; return newInfo;
} }
function addNewProblem(state,data) {
let newInfo = Object.assign({},state,data);
return newInfo;
}
export default function(state={}, action) { export default function(state={}, action) {
switch (action.type) { switch (action.type) {
case actionTypes.INIT_GETNEWPROBLEM_SUCCESS: case actionTypes.INIT_GETNEWPROBLEM_SUCCESS:
return initSuccess(state,action.data); return initSuccess(state,action.data);
case actionTypes.ADD_NEWPROBLEM_SUCCESS:
return initSuccess(state,action.data);
default: default:
return state; return state;
} }
......
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