Skip to content

M
max_android_panel
Commit e6962545 by yaxiLiuu
Options

developer other problems â€

parent 144150e6
Showing with 690 additions and 465 deletions
client/actions/ScanBarCodeContainer.js → client/actions/ScanBarCode.js
import fetch from 'isomorphic-fetch'; import fetch from 'isomorphic-fetch';
import * as actionTypes from '../actiontype/ScanBarCodeContainer'; import * as actionTypes from '../actiontype/ScanBarCode';
const domain = 'http://test.mjitech.com'; const domain = 'http://test.mjitech.com';
const fakeJsonData = { const fakeJsonData = {
......
client/actions/otherQuestion.js 0 → 100644
import fetch from 'isomorphic-fetch';
import * as actionTypes from '../actiontype/otherQuestion';
const domain = 'http://test.mjitech.com';
const fakeJsonData = {
"meta": {
"code": "200",
"message": "成功",
"success": true
},
"data": {
"feeds": [
{
"id": 6,
"files": [
{
"id": 13,
"filePath": "http://static.mjitech.com/static/sku/0/0/2/1471329355724.jpg"
},
{
"id": 14,
"filePath": "http://static.mjitech.com/static/sku/0/0/425/1471329537289.jpg"
},
{
"id": 17,
"filePath": "http://static.mjitech.com/static/sku/0/0/427/1471329704482.jpg"
}
],
"parentProblemName": null,
"subProblemName": null
},
{
"id": 6,
"files": [
/*{
"id": 13,
"filePath": "http://static.mjitech.com/static/sku/0/0/2/1471329355724.jpg"
},
{
"id": 14,
"filePath": "http://static.mjitech.com/static/sku/0/0/425/1471329537289.jpg"
},
{
"id": 17,
"filePath": "http://static.mjitech.com/static/sku/0/0/427/1471329704482.jpg"
}*/
],
"parentProblemName": null,
"subProblemName": null
}
],
"employee": {
"id": 5,
"employeeName": "机器库管员",
"headImageUrl": "/static/coupon/gounian/banner_hongbaotupian-3-14.jpg"
},
"warehouse": {
"id": 13,
"name": "华贸商业街",
"image": "/tmp/2018-05-25/1527243213701.jpg"
},
"problems": [
{
"id": 18,
"message": "机械故障",
"type": "OP",
"dicDetails": [
{
"messageId": 2,
"parentId": null,
"message": "fdffdfde3"
},
{
"messageId": 2,
"parentId": null,
"message": "55d5fdf"
},
{
"messageId": 2,
"parentId": null,
"message": "dfdf"
}
]
},
{
"id": 19,
"message": "下位机程序Bug",
"type": "OP",
"dicDetails": [
{
"messageId": 2,
"parentId": null,
"message": "其他问题89"
},
{
"messageId": 2,
"parentId": null,
"message": "dfdfdf"
},
{
"messageId": 2,
"parentId": null,
"message": "werer"
}
]
}
]
}
}
export function intGetOtherProblem(postData) {
return (dispatch) => {
/*let url = String(domain+'/web/machine_pad/list_other_fault.action');
fetch(url,{
credentials : 'include',
method : 'POST',
mode : 'cors',
body : JSON.stringify(postData)
}).then((response) => response.json())
.then(
(json)=>{
if(json.meta.is_succ){
initSuccess(json.data)
}else{
}
}
).catch(e=>dispatch(console.log("出现错误"))
)*/
dispatch(initSuccess(fakeJsonData.data))
}
}
function initSuccess(data) {
return {
type: actionTypes.INIT_GETNEWPROBLEM_SUCCESS,
data
}
}
\ No newline at end of file
client/actiontype/otherQuestion.js 0 → 100644
/*const INIT_SCANBARCODEGETPRODUCTINFO_SUCCESS = 'INIT_SCANBARCODEGETPRODUCTINFO_SUCCESS'*/
const INIT_GETNEWPROBLEM_SUCCESS = 'INIT_GETNEWPROBLEM_SUCCESS'
module.exports = {INIT_GETNEWPROBLEM_SUCCESS}
client/components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer.jsx
...@@ -16,8 +16,8 @@ export default class ImgToolComponent extends React.Component{ ...@@ -16,8 +16,8 @@ export default class ImgToolComponent extends React.Component{
render(){ render(){
let props = this.props; let props = this.props;
let type = props.type; let type = props.type;
console.log(type)
let imgSrc = ''; let imgSrc = '';
let noCloseBtn = props.noCloseBtn;
switch(type){ switch(type){
case "custom": case "custom":
...@@ -31,12 +31,13 @@ export default class ImgToolComponent extends React.Component{ ...@@ -31,12 +31,13 @@ export default class ImgToolComponent extends React.Component{
break; break;
} }
console.log(imgSrc)
return( return(
<div className={"ImgToolComponent"}> <div className={"ImgToolComponent"}>
<div className={"imgItem"}> <div className={"imgItem"}>
<img src={imgSrc} alt=""/> <img src={imgSrc} alt=""/>
<span className={"closeBtn"}>×</span> {
noCloseBtn?"":(<span className={"closeBtn"}>×</span>)
}
</div> </div>
</div> </div>
) )
......
client/components/CommonComponent/CommonSmallComponent/ImgToolComponent/index.css
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
height: 90px; height: 90px;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
margin-right: 30px; margin-right: 25px;
position: relative; position: relative;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
} }
......
client/components/OtherQuestionComponent/EditProblemComponent.jsx 0 → 100644
import React from 'react';
require('./index.css');
import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer'
export default class EditProblemItem extends React.Component{
constructor(props){
super(props)
this.state = {
showCategoryElement:false,
showDetailElement:false,
currentFatherLiIndex:undefined,
currentChildLiIndex:undefined,
currentBigId:undefined,
currentSmallId:undefined,
problemList:{},
currentDetailProblem:[]
}
}
componentWillMount(){
let props = this.props;
let Problems_format = {};
props.problemInfo.map((item,index)=>{
Problems_format[item.id] = {};
Problems_format[item.id].message = item.message;
Problems_format[item.id].type = item.type;
Problems_format[item.id].dicDetails = item.dicDetails;
});
this.setState({
problemList:Problems_format,
currentDetailProblem:props.problemInfo[0].dicDetails
})
}
handleShowElement(value){
console.log(value);
console.log(this.state[value]);
if(value == "showDetailElement"){
//点击了 小分类 检查如果大分类未选择则进行提示
if(!this.state.currentBigId){
console.log("请先选择大分类")
return;
}
}
this.setState(
{
[value]:!this.state[value]
}
)
}
handleDetailProblem_Father(event){
//处理选中样式
this.setState({
currentFatherLiIndex: parseInt(event.currentTarget.getAttribute('date-index'))
});
//处理数据
let bigProblemId = event.currentTarget.getAttribute('data-id');
let childProblem = this.state.problemList[String(bigProblemId)].dicDetails;
this.setState({
currentDetailProblem:childProblem,
currentBigId:bigProblemId
})
}
handleDetailProblem_Child(event){
//处理选中样式
this.setState({
currentChildLiIndex: parseInt(event.currentTarget.getAttribute('date-index'))
});
//处理数据
//处理数据
let smallProblemId = event.currentTarget.getAttribute('data-id');
this.setState({
currentSmallIdss:smallProblemId
})
}
handleClickEditRemark(){
console.log("点击编辑跳转到文本框")
}
render(){
let props = this.props;
let imgFiles = props.baseInfo.files;
//问题分类
let categoryProblemUi = props.problemInfo.map((item,index)=>{
return <li key={"bigProblem"+index}
date-index={index}
data-id = {item.id}
className={this.state.currentFatherLiIndex == index ? 'active_li':''}
onClick={(e)=>(this.handleDetailProblem_Father.bind(this,e))()}>{item.message}</li>
});
let detailCategoryProblemUi = this.state.currentDetailProblem.map((item,index)=>{
return <li key={'detailProblem'+index}
date-index={index}
date-id = {item.messageId}
className={this.state.currentChildLiIndex == index ? 'active_li':''}
onClick={(e)=>(this.handleDetailProblem_Child.bind(this,e))()}>{item.message}</li>
})
//图片部分
let imgListUi = imgFiles.map((item,index)=>{
return <ImgToolComponent key={"troubelImg"+index} noCloseBtn={false} type={"custom"} imgSrc = {item.filePath} ></ImgToolComponent>
})
return (
<div className={"editUploadItem clearfix"}>
<span className={"closeBtn"}>×</span>
<div className={"newTroubleTitle"}>
新故障问题：故障 <span>SD568844</span>
</div>
<div className={"newTroubleContent clearfix"}>
<span className={"startIcon"}>*</span>
<div className={"fakeSelect"}>
<div className={"problemCategoryTitle"} onClick={this.handleShowElement.bind(this,"showCategoryElement")} >分类问题</div>
{
this.state.showCategoryElement?(
<ul className={"problemCategory"} name="" id="">
{
categoryProblemUi
}
</ul>
):""
}
</div>
<div className={"fakeSelect"}>
<div className={"problemCategoryTitle detailTitle "+(this.state.currentBigId?"":"noActive")} onClick={this.handleShowElement.bind(this,"showDetailElement")}>具体问题</div>
{
this.state.showDetailElement?(
<ul className={"DetailProblem"} name="" id="">
{
detailCategoryProblemUi
}
</ul>
):""
}
</div>
</div>
<div className={"newTroubleRemark clearfix"}>
<span className={"startIcon"}>*</span>
<div className={"remarkContent"}>
<div className={"editIcon"}>编辑</div>
<div className={"remarkText"}>编辑检查结果</div>
</div>
</div>
<div className={"damageImgs clearfix"}>
<div className={"uploadImgRight"}>
{imgListUi}
</div>
<div className={"operationLeft"}>
<ImgToolComponent type={"add"} noCloseBtn = {true}></ImgToolComponent>
{
imgFiles && imgFiles.length>0?(<ImgToolComponent type={"refresh"} noCloseBtn = {true}></ImgToolComponent>):""
}
</div>
</div>
</div>
)
}
}
/*
EditProblemItem.PropTypes = {
productItemList : React.PropTypes.array
}
EditProblemItem.defaultProps = {
productItemList : [
{
sku : {
imagePath : ''
}
}
]
}*/
client/components/OtherQuestionComponent/index.css 0 → 100644
.editUploadItem{
border: 2px solid #e5e5e5;
padding: 40px 40px 40px 40px;
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
position: relative;
float: left;
}
.editUploadItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px;
}
.editUploadItem .newTroubleTitle{
font-size: 43px;
font-weight: 700;
}
.editUploadItem .newTroubleContent{
margin-top: 36px;
}
.editUploadItem .startIcon{
height: 80px;
line-height: 80px;
color: #ff7860;
font-size: 15px;
float: left;
display: inline-block;
margin-right: 15px;
}
.editUploadItem .newTroubleContent .fakeSelect{
float: left;
display: inline-block;
width: 320px;
position: relative;
}
.editUploadItem .newTroubleContent .fakeSelect ul{
position: absolute;
width: 320px;
left: 0;
top: 80px;
z-index: 50;
max-height: 500px;
}
.editUploadItem .newTroubleContent li, .editUploadItem .newTroubleContent .problemCategoryTitle{
height: 80px;
text-align: center;
box-sizing: border-box;
line-height:80px;
border: 1px solid #e5e5e5;
background-color: #fff;
color: #333333;
font-size: 32px;
margin: 0 15px;
}
.editUploadItem .damageImgs{
margin-top: 30px;
}
.editUploadItem .newTroubleContent .noActive{
color: #999999;
}
.editUploadItem .newTroubleContent li{
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
background-color: #fff;
}
.editUploadItem .newTroubleContent li.active_li{
background-color: #474950;
color: #ffffff;
}
\ No newline at end of file
client/components/ReportDamageListComponent/DamageItemComponent/DamageItem.jsx 0 → 100644
import React from 'react';
require('./index.css');
import ImgToolComponent from '../../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer'
export default class DamageItem extends React.Component{
constructor(props){
super(props)
this.state = {
text: ''
}
}
render(){
return (
<div className={"damageProductItem"}>
<span className={"closeBtn"}>×</span>
<div className={"productBaseInfo clearfix"}>
<img className={"productImg"} src= { require('./img/lol.gif')} alt=""/>
<div className={"baseNumber"}>
<p className={"barcode"}>9038383832</p>
<p className={"skuNumnber"}>SKU00001</p>
<p className={"productName"}>可口可乐</p>
<p className={"net"}>250ml</p>
</div>
<div className={"productCount"}>
<span className={"multipleIcon"}>×</span>
<span className={"count"}>1</span>
</div>
</div>
<div className={"productOtherInfo"}>
<div className={"locationAndStatusInfo"}>
<p className={"location"}>商品位置:<span>机械手平台</span></p>
<p className={"status"}>商品状态:<span>机械手平台</span></p>
</div>
<div className={"damageImgs clearfix"}>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
</div>
</div>
</div>
)
}
}
\ No newline at end of file
client/components/ReportDamageListComponent/DamageItemComponent/index.css 0 → 100644
.damageProductItem{
border: 2px solid #e5e5e5;
padding: 60px;
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
position: relative;
float: left;
}
.damageProductItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px
}
.damageProductItem .productBaseInfo{
border-bottom: 1px dashed #e5e5e5;
padding-bottom: 30px;
}
.damageProductItem .productBaseInfo .productImg{
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid #e5e5e5;
/*background-color: darkgoldenrod;*/
float: left;
}
.damageProductItem .productBaseInfo .baseNumber{
float: left;
width: 200px;
margin-left: 30px;
width: 315px;
}
.damageProductItem .productBaseInfo .baseNumber p{
margin-top: 8px;
font-size: 32px;
line-height: 44px;
color: #333333;
}
.damageProductItem .productBaseInfo .baseNumber .barcode{}
.damageProductItem .productBaseInfo .baseNumber .skuNumnber{}
.damageProductItem .productBaseInfo .baseNumber .productName{
font-weight: bolder;
}
.damageProductItem .productBaseInfo .baseNumber .net{
color: #999999;
font-size: 24px;
}
.damageProductItem .productBaseInfo .productCount{
display: inline-block;
padding-top: 140px;
float: right;
margin:0 20px 0 220px;
box-sizing: border-box;
}
.damageProductItem .productBaseInfo .productCount .multipleIcon{
font-size: 32px;
display: inline-block;
margin-right: 30px;
color: #909099;
}
.damageProductItem .productBaseInfo .count{
color: #909099;
font-size: 40px;
}
.damageProductItem .productOtherInfo{
margin-top: 16px;
}
.damageProductItem .productOtherInfo .locationAndStatusInfo{
}
.damageProductItem .productOtherInfo .locationAndStatusInfo p{
color: #333333;
font-size: 30px;
margin-right: 80px;
padding: 8px 0;
}
.damageProductItem .productOtherInfo .locationAndStatusInfo p span{
display: inline;
margin-left: 15px;
}
.damageProductItem .productOtherInfo .damageImgs{
margin-top: 40px;
}
.damageProductItem .productOtherInfo .damageImgs .imgItem {
width: 90px;
height: 90px;
display: inline-block;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #e5e5e5;
margin-right: 30px;
position: relative;
}
.damageProductItem .productOtherInfo .damageImgs .imgItem img{
width: 90px;
height: 90px;
}
.damageProductItem .productOtherInfo .damageImgs .imgItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px
}
\ No newline at end of file
client/components/TroubleComponent/TroubleItemComponent/index.css
.troubleItemComponent{ .editUploadItem .newTroubleContent .problemCategory{
width: 1396px;
height: 608px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
border-radius: 20px;
overflow: hidden;
padding: 42px 45px 0 45px;
position: relative;
}
.troubleItemComponent .border_e5{
border: 2px solid #e5e5e5;
border-radius: 10px;
}
.troubleItemComponent .border_dashed_e5{
border: 2px dashed #e5e5e5;
border-radius: 10px;
}
.troubleItemComponent .rel{
position: relative;
padding-left: 44px;
}
.troubleItemComponent .itemText{
font-weight: bold;
} }
.troubleItemComponent .itemWrongInfo{ .editUploadItem .newTroubleContent .DetailProblem{}
height: 86px; .editUploadItem .newTroubleRemark{
position: relative; margin-top: 4px;
} }
.troubleItemComponent .itemWrongInfo>p{ .editUploadItem .newTroubleRemark .startIcon{
line-height: 32px; float: left;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
.troubleItemComponent .star{
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.troubleItemComponent .jugdeQuestion{
height: 61px;
line-height: 61px;
margin-bottom: 30px;
}
.troubleItemComponent .jugdeQuestion .questionBox{
height: 100%;
width: 161px;
text-align: center;
display: inline-block;
margin-left: 30px;
}
.troubleItemComponent .jugdeQuestion .questionBox.active{
border-color: #26ce61;
}
.troubleItemComponent .itemTextArea{
height: 198px;
margin-bottom: 29px;
} }
.troubleItemComponent .itemTextAreaBox{ .editUploadItem .newTroubleRemark .remarkContent{
float: left;
width: 1250px; width: 1250px;
height: 100%;
display: inline-block;
background-color: #f2f2f2;
padding: 20px;
overflow: hidden;
}
.itemTextAreaBoxs{
background-color: #f2f2f2;
border: none;
resize: none;
width: 100%;
height: 100%;
line-height: 40px;
text-align: justify;
}
.troubleItemComponent .itemTextArea .itemPlayceHolder{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
} }
.troubleItemComponent .itemTextArea .itemTextEdit{ .editUploadItem .newTroubleRemark .remarkContent .editIcon{
text-align: right; text-align: right;
position: absolute; padding: 13px 10px;
line-height: 57px; font-size: 24px;
top: -57px; color: #ff7860;
right: 46px;
}
.troubleItemComponent .itemControl .controlBox{
width: 90px;
height: 90px;
position: relative;
display: inline-block;
margin-right: 30px;
}
.troubleItemComponent .itemControl .controlBox>img{
position: absolute;
width: 90px;
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.troubleItemComponent .finishBox{
display: none;
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 63px solid #26ce61;
border-bottom: 63px solid transparent;
border-left: 63px solid transparent;
border-right: 63px solid #26ce61;
} }
.troubleItemComponent .finishBox .finishText{ .editUploadItem .newTroubleRemark .remarkContent .remarkText{
position: absolute; height: 198px;
border: 1px solid #e5e5e5;
border-radius: 10px;
background-color: #f2f2f2;
line-height: 198px;
text-align: center; text-align: center;
width: 178px; font-size: 24px;
height: 178px; color: #999999;
line-height: 126px;
left: -89px;
top: -89px;
transform: rotate(45deg);
}
.troubleItemComponent.finish{
border: 3px solid #26ce61;
} }
.troubleItemComponent.finish .finishBox{ .editUploadItem .damageImgs .uploadImgRight{
display: block; float: left;
} }
.editUploadItem .damageImgs .operationLeft{
float: left;
}
\ No newline at end of file
client/config/swiperContainer.js
module.exports = { module.exports = {
troubleSwiperContainer : 'troubleSwiperContainer', troubleSwiperContainer : 'troubleSwiperContainer',
damageSwiperContainer : 'damageSwiperContainer',
editProblemSwiperContainer:'editProblemSwiperContainer'
} }
\ No newline at end of file
client/containers/OtherQuestionContainer/OtherQuestionContainer.jsx
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
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 {getOtherProblem} from '../../actions/otherQuestion'
require('./index.css'); require('./index.css');
class OtherQuestionContainer extends React.Component{ export default class OtherQuestionContainer extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
this.state = { this.state = {
...@@ -12,6 +15,21 @@ class OtherQuestionContainer extends React.Component{ ...@@ -12,6 +15,21 @@ class OtherQuestionContainer extends React.Component{
currentLiIndex:0 currentLiIndex:0
} }
} }
componentWillMount() {
let {dispatch,initStart} = this.props;
console.log(this.props);
let postData = {};
initStart(postData)
}
componentDidMount(){
}
componentDidUpdate() {
}
componentWillReceiveProps(nextProps){
}
componentWillUnmount(){
}
handleShowElement(value){ handleShowElement(value){
console.log(value); console.log(value);
console.log(this.state[value]) console.log(this.state[value])
...@@ -27,82 +45,41 @@ class OtherQuestionContainer extends React.Component{ ...@@ -27,82 +45,41 @@ class OtherQuestionContainer extends React.Component{
}) })
} }
render(){ render(){
let detailData1 = ["机器故障","机器故障","机器故障","机器故障","机器故障","机器故障","机器故障"]; //let 难道初始化的数据：
let detailData2 = ["机器故障","机器故障","机器故障","机器故障","机器故障","机器故障","机器故障"]; let {state} = this.props;
let categoryProblemUi = detailData1.map((item,index)=>{ console.log(state)
return <li key={index} let {otherQuestion} = state;
date-index={index} let {feeds,problems} = otherQuestion;
className={this.state.currentLiIndex == index ? 'active_li':''} let editProblemItemUI = '';
onClick={(e)=>(this.handleDetailProblem.bind(this,e))()}>{item}</li> let swiperCount = 0;
}) feeds && feeds.length>0 ?(
let detailCategoryProblemUi = detailData2.map((item,index)=>{ editProblemItemUI = feeds.map((i,k)=>{
return <li key={'detailProblem'+index} return <EditProblemItem problemInfo = {problems} baseInfo = {feeds[k]} key={k}/>;
date-index={index} })
className={this.state.currentLiIndex == index ? 'active_li':''} ):""
onClick={(e)=>(this.handleDetailProblem.bind(this,e))()}>{item}</li> feeds && feeds.length>0 ?(
}) swiperCount = feeds.length
):""
let swiperOptions = {
width : 1396,
spaceBetween: 30,
freeMode:true,
// slidesPerView: 2.6,
};
let swiperContainer = CONFIG.swiperContainers.editProblemSwiperContainer;
return ( return (
<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"}>
<div className={"editUploadItem clearfix"}> <SwiperComponent
<span className={"closeBtn"}>×</span> swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
<div className={"newTroubleTitle"}> >
新故障问题：故障 <span>SD568844</span> {editProblemItemUI}
</div> </SwiperComponent>
<div className={"newTroubleContent clearfix"}>
<span className={"startIcon"}>*</span>
<div className={"fakeSelect"}>
<div className={"problemCategoryTitle"} onClick={this.handleShowElement.bind(this,"showCategoryElement")} >分类问题</div>
{
this.state.showCategoryElement?(
<ul className={"problemCategory"} name="" id="">
{
categoryProblemUi
}
</ul>
):""
}
</div>
<div className={"fakeSelect"}>
<div className={"problemCategoryTitle"} onClick={this.handleShowElement.bind(this,"showDetailElement")}>具体问题</div>
{
this.state.showDetailElement?(
<ul className={"DetailProblem"} name="" id="">
{
detailCategoryProblemUi
}
</ul>
):""
}
</div>
</div>
<div className={"newTroubleRemark clearfix"}>
<span className={"startIcon"}>*</span>
<div className={"remarkContent"}>
<div className={"editIcon"}>编辑</div>
<div className={"remarkText"}>编辑检查结果</div>
</div>
</div>
<div className={"damageImgs clearfix"}>
<div className={"uploadImgRight"}>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
<ImgToolComponent type={"custom"} imgSrc = { require('./img/lol.gif')} ></ImgToolComponent>
</div>
<div className={"operationLeft"}>
<ImgToolComponent type={"refresh"}></ImgToolComponent>
<ImgToolComponent type={"add"}></ImgToolComponent>
</div>
</div>
</div>
</div> </div>
<div className={"opeationContainer clearfix"}> <div className={"opeationContainer clearfix"}>
<button className={"addMoreBtn"}><span>+</span>录入更多</button> <button className={"addMoreBtn"}><span>+</span>录入更多</button>
...@@ -112,9 +89,4 @@ class OtherQuestionContainer extends React.Component{ ...@@ -112,9 +89,4 @@ class OtherQuestionContainer extends React.Component{
</div> </div>
) )
} }
} }
function select(store) { \ No newline at end of file
return Object.assign({}, {state: store})
}
export default connect(select)(OtherQuestionContainer)
\ No newline at end of file
client/containers/OtherQuestionContainer/index.css
...@@ -11,135 +11,16 @@ ...@@ -11,135 +11,16 @@
font-size: 25px; font-size: 25px;
} }
.OtherQuestionContainer .editOtherQuestionContainer{} .OtherQuestionContainer .editOtherQuestionContainer{}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem{ .OtherQuestionContainer .editOtherQuestionContainer .editProblemSwiperContainer{
border: 2px solid #e5e5e5; overflow: visible;
padding: 40px 40px 40px 40px;
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
position: relative;
float: left;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px;
} }
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleTitle{
font-size: 43px;
font-weight: 700;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent{
margin-top: 36px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .startIcon{
height: 80px;
line-height: 80px;
color: #ff7860;
font-size: 15px;
float: left;
display: inline-block;
margin-right: 15px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .fakeSelect{
float: left;
display: inline-block;
width: 320px;
position: relative;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .fakeSelect ul{
position: absolute;
width: 320px;
left: 0;
top: 80px;
z-index: 50;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent li,.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .problemCategoryTitle{
height: 80px;
text-align: center;
box-sizing: border-box;
line-height:80px;
border: 1px solid #e5e5e5;
background-color: #fff;
color: #333333;
font-size: 32px;
margin: 0 15px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent li{
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
background-color: #fff;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent li.active_li{
background-color: #474950;
color: #ffffff;
}
.OtherQuestionContainer .problemCategory,.OtherQuestionContainer .DetailProblem{ .OtherQuestionContainer .problemCategory,.OtherQuestionContainer .DetailProblem{
} }
/*.OtherQuestionContainer .problemCategory li,.OtherQuestionContainer .DetailProblem li{
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
background-color: #fff;
}
.OtherQuestionContainer .problemCategory li:hover,.OtherQuestionContainer .DetailProblem li:hover{
background-color: #474950;
color: #ffffff;
}*/
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .problemCategory{
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleContent .DetailProblem{}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark{
margin-top: 4px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark .startIcon{
float: left;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark .remarkContent{
float: left;
width: 1250px;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark .remarkContent .editIcon{
text-align: right;
padding: 13px 10px;
font-size: 24px;
color: #ff7860;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .newTroubleRemark .remarkContent .remarkText{
height: 198px;
border: 1px solid #e5e5e5;
border-radius: 10px;
background-color: #f2f2f2;
line-height: 198px;
text-align: center;
font-size: 24px;
color: #999999;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .damageImgs .uploadImgRight{
float: left;
}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem .damageImgs .operationLeft{
float: left;
}
.OtherQuestionContainer .opeationContainer{ .OtherQuestionContainer .opeationContainer{
margin-top: 20px; margin-top: 20px;
text-align: left; text-align: left;
......
client/containers/PageContainer/PageContainer.jsx
...@@ -4,6 +4,7 @@ import { connect } from 'react-redux'; ...@@ -4,6 +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 HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent' import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent' import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
...@@ -34,7 +35,7 @@ const showPage = { ...@@ -34,7 +35,7 @@ const showPage = {
const defaultPopupInfo = { const defaultPopupInfo = {
showPopup : false, //是否显示弹窗 showPopup : false, //是否显示弹窗
popupChild : null, // 自定义弹窗内部html popupChild : null, // 自定义弹窗内部htmls
popupText : "", //默认弹窗的文本 （必填） popupText : "", //默认弹窗的文本 （必填）
popupButtons : [], // 默认弹窗的按钮 popupButtons : [], // 默认弹窗的按钮
classNames : '' //自定义类名 classNames : '' //自定义类名
...@@ -45,7 +46,7 @@ class PageContainer extends React.Component { ...@@ -45,7 +46,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],
page : null, page : null,
popupInfo : defaultPopupInfo, popupInfo : defaultPopupInfo,
pageStyle : { pageStyle : {
...@@ -98,6 +99,7 @@ class PageContainer extends React.Component { ...@@ -98,6 +99,7 @@ class PageContainer extends React.Component {
getPages(){ getPages(){
let pages = null; let pages = null;
let{state,dispatch} = this.props;
switch (this.state.showPage){ switch (this.state.showPage){
case showPage[1]: case showPage[1]:
pages = <TroubleContainer />; pages = <TroubleContainer />;
...@@ -109,7 +111,10 @@ class PageContainer extends React.Component { ...@@ -109,7 +111,10 @@ class PageContainer extends React.Component {
pages = <ReportDamagesListContainer />; pages = <ReportDamagesListContainer />;
break; break;
case showPage[4]: case showPage[4]:
pages = <OtherQuestionContainer />; pages = <OtherQuestionContainer
initStart = {(postData)=>dispatch(intGetOtherProblem(postData))}
state = {state}
/>;
break; break;
case showPage[5]: case showPage[5]:
pages = <TextAreaContainer />; pages = <TextAreaContainer />;
...@@ -135,7 +140,7 @@ class PageContainer extends React.Component { ...@@ -135,7 +140,7 @@ class PageContainer extends React.Component {
<div className={"pageContainer "} style={this.state.pageStyle}> <div className={"pageContainer "} style={this.state.pageStyle}>
<HeaderComponent /> <HeaderComponent />
<PopupComponent popupInfo={this.state.popupInfo} /> <PopupComponent popupInfo={this.state.popupInfo} />
{this.state.page} {this.getPages()}
</div> </div>
) )
} }
......
client/containers/PageContainer/index.css
.pageContainer{ .pageContainer{
position: relative; position: relative;
height: 956px; /* height: 956px;
width: 1920px; width: 1920px;*/
} }
.pageContainer.backColfff{ .pageContainer.backColfff{
background-color: #ffffff; background-color: #ffffff;
......
client/containers/ReportDamagesListContainer/index.css
...@@ -11,127 +11,8 @@ ...@@ -11,127 +11,8 @@
font-size: 25px; font-size: 25px;
} }
.ReportDamagesListContainer .damageProductList{} .ReportDamagesListContainer .damageProductList{}
.ReportDamagesListContainer .damageProductList .damageProductItem{ .ReportDamagesListContainer .damageSwiperContainer{
border: 2px solid #e5e5e5; overflow: visible;
padding: 60px;
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
position: relative;
float: left;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo{
border-bottom: 1px dashed #e5e5e5;
padding-bottom: 30px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .productImg{
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid #e5e5e5;
/*background-color: darkgoldenrod;*/
float: left;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber{
float: left;
width: 200px;
margin-left: 30px;
width: 315px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber p{
margin-top: 8px;
font-size: 32px;
line-height: 44px;
color: #333333;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber .barcode{}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber .skuNumnber{}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber .productName{
font-weight: bolder;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .baseNumber .net{
color: #999999;
font-size: 24px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .productCount{
display: inline-block;
padding-top: 140px;
float: right;
margin:0 20px 0 220px;
box-sizing: border-box;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .productCount .multipleIcon{
font-size: 32px;
display: inline-block;
margin-right: 30px;
color: #909099;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productBaseInfo .count{
color: #909099;
font-size: 40px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo{
margin-top: 16px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .locationAndStatusInfo{
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .locationAndStatusInfo p{
color: #333333;
font-size: 30px;
margin-right: 80px;
padding: 8px 0;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .locationAndStatusInfo p span{
display: inline;
margin-left: 15px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .damageImgs{
margin-top: 40px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .damageImgs .imgItem {
width: 90px;
height: 90px;
display: inline-block;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #e5e5e5;
margin-right: 30px;
position: relative;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .damageImgs .imgItem img{
width: 90px;
height: 90px;
}
.ReportDamagesListContainer .damageProductList .damageProductItem .productOtherInfo .damageImgs .imgItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px
} }
.ReportDamagesListContainer .opeationContainer{ .ReportDamagesListContainer .opeationContainer{
margin-top: 20px; margin-top: 20px;
......
client/containers/ScanBarCodeContainer/ScanBarCodeContaienr.jsx
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { scanBarCodeGetProductInfo } from '../../actions/ScanBarCodeContainer' import { scanBarCodeGetProductInfo } from '../../actions/ScanBarCode'
import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer' import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer'
require('./index.css'); require('./index.css');
...@@ -124,6 +124,4 @@ class ScanBarCodeContainer extends React.Component{ ...@@ -124,6 +124,4 @@ class ScanBarCodeContainer extends React.Component{
} }
function select(store) { function select(store) {
return Object.assign({}, {state: store}) return Object.assign({}, {state: store})
} }
\ No newline at end of file
export default connect(select)(ScanBarCodeContainer)
\ No newline at end of file
client/containers/TroubleContainer/TroubleContainer.jsx
...@@ -31,6 +31,7 @@ export default class TroubleContainer extends React.Component{ ...@@ -31,6 +31,7 @@ export default class TroubleContainer extends React.Component{
return <TroubleItem key={k}/>; return <TroubleItem key={k}/>;
}); });
let swiperOptions = { let swiperOptions = {
width : 1396, width : 1396,
spaceBetween: 30, spaceBetween: 30,
freeMode:true, freeMode:true,
......
client/reducers/index.js
...@@ -2,11 +2,13 @@ import { combineReducers } from 'redux' ...@@ -2,11 +2,13 @@ import { combineReducers } from 'redux'
import trouble from './trouble' import trouble from './trouble'
import storeInfo from './store' import storeInfo from './store'
import scanBarCodeContainer from './scanBarCodeContainer' import scanBarCodeContainer from './scanBarCodeContainer'
import otherQuestion from './otherQuestion'
export default combineReducers({ export default combineReducers({
trouble, trouble,
storeInfo, storeInfo,
scanBarCodeContainer scanBarCodeContainer,
otherQuestion
}) })
client/reducers/otherQuestion.js 0 → 100644
import * as actionTypes from '../actiontype/otherQuestion';
function initSuccess(state,data) {
let newInfo = Object.assign({},state,data);
return newInfo;
}
export default function(state={}, action) {
switch (action.type) {
case actionTypes.INIT_GETNEWPROBLEM_SUCCESS:
return initSuccess(state,action.data);
default:
return state;
}
}
\ No newline at end of file
client/reducers/scanBarCodeContainer.js
import * as actionTypes from '../actiontype/ScanBarCodeContainer'; import * as actionTypes from '../actiontype/ScanBarCode';
function initSuccess(state,data) { function initSuccess(state,data) {
let newInfo = Object.assign({},state,data); let newInfo = Object.assign({},state,data);
return newInfo; return newInfo;
......
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