Commit e6962545 by yaxiLiuu

developer other problems â€

parent 144150e6
import fetch from 'isomorphic-fetch';
import * as actionTypes from '../actiontype/ScanBarCodeContainer';
import * as actionTypes from '../actiontype/ScanBarCode';
const domain = 'http://test.mjitech.com';
const fakeJsonData = {
......
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
/*const INIT_SCANBARCODEGETPRODUCTINFO_SUCCESS = 'INIT_SCANBARCODEGETPRODUCTINFO_SUCCESS'*/
const INIT_GETNEWPROBLEM_SUCCESS = 'INIT_GETNEWPROBLEM_SUCCESS'
module.exports = {INIT_GETNEWPROBLEM_SUCCESS}
......@@ -16,8 +16,8 @@ export default class ImgToolComponent extends React.Component{
render(){
let props = this.props;
let type = props.type;
console.log(type)
let imgSrc = '';
let noCloseBtn = props.noCloseBtn;
switch(type){
case "custom":
......@@ -31,12 +31,13 @@ export default class ImgToolComponent extends React.Component{
break;
}
console.log(imgSrc)
return(
<div className={"ImgToolComponent"}>
<div className={"imgItem"}>
<img src={imgSrc} alt=""/>
<span className={"closeBtn"}>×</span>
{
noCloseBtn?"":(<span className={"closeBtn"}>×</span>)
}
</div>
</div>
)
......
......@@ -6,7 +6,7 @@
height: 90px;
display: inline-block;
box-sizing: border-box;
margin-right: 30px;
margin-right: 25px;
position: relative;
border: 1px solid #e5e5e5;
}
......
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 : ''
}
}
]
}*/
.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
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
.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
.troubleItemComponent{
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;
}
.editUploadItem .newTroubleContent .problemCategory{
.troubleItemComponent .rel{
position: relative;
padding-left: 44px;
}
.troubleItemComponent .itemText{
font-weight: bold;
}
.troubleItemComponent .itemWrongInfo{
height: 86px;
position: relative;
}
.troubleItemComponent .itemWrongInfo>p{
line-height: 32px;
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;
.editUploadItem .newTroubleContent .DetailProblem{}
.editUploadItem .newTroubleRemark{
margin-top: 4px;
}
.troubleItemComponent .itemTextArea{
height: 198px;
margin-bottom: 29px;
.editUploadItem .newTroubleRemark .startIcon{
float: left;
}
.troubleItemComponent .itemTextAreaBox{
.editUploadItem .newTroubleRemark .remarkContent{
float: left;
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;
position: absolute;
line-height: 57px;
top: -57px;
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%);
}
padding: 13px 10px;
font-size: 24px;
color: #ff7860;
.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{
position: absolute;
.editUploadItem .newTroubleRemark .remarkContent .remarkText{
height: 198px;
border: 1px solid #e5e5e5;
border-radius: 10px;
background-color: #f2f2f2;
line-height: 198px;
text-align: center;
width: 178px;
height: 178px;
line-height: 126px;
left: -89px;
top: -89px;
transform: rotate(45deg);
font-size: 24px;
color: #999999;
}
.troubleItemComponent.finish{
border: 3px solid #26ce61;
.editUploadItem .damageImgs .uploadImgRight{
float: left;
}
.troubleItemComponent.finish .finishBox{
display: block;
.editUploadItem .damageImgs .operationLeft{
float: left;
}
\ No newline at end of file
module.exports = {
troubleSwiperContainer : 'troubleSwiperContainer',
damageSwiperContainer : 'damageSwiperContainer',
editProblemSwiperContainer:'editProblemSwiperContainer'
}
\ No newline at end of file
'use strict';
import React from 'react';
import { connect } from 'react-redux';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer'
import EditProblemItem from '../../components/OtherQuestionComponent/EditProblemComponent'
import {getOtherProblem} from '../../actions/otherQuestion'
require('./index.css');
class OtherQuestionContainer extends React.Component{
export default class OtherQuestionContainer extends React.Component{
constructor(props){
super(props)
this.state = {
......@@ -12,6 +15,21 @@ class OtherQuestionContainer extends React.Component{
currentLiIndex:0
}
}
componentWillMount() {
let {dispatch,initStart} = this.props;
console.log(this.props);
let postData = {};
initStart(postData)
}
componentDidMount(){
}
componentDidUpdate() {
}
componentWillReceiveProps(nextProps){
}
componentWillUnmount(){
}
handleShowElement(value){
console.log(value);
console.log(this.state[value])
......@@ -27,82 +45,41 @@ class OtherQuestionContainer extends React.Component{
})
}
render(){
let detailData1 = ["机器故障","机器故障","机器故障","机器故障","机器故障","机器故障","机器故障"];
let detailData2 = ["机器故障","机器故障","机器故障","机器故障","机器故障","机器故障","机器故障"];
let categoryProblemUi = detailData1.map((item,index)=>{
return <li key={index}
date-index={index}
className={this.state.currentLiIndex == index ? 'active_li':''}
onClick={(e)=>(this.handleDetailProblem.bind(this,e))()}>{item}</li>
})
let detailCategoryProblemUi = detailData2.map((item,index)=>{
return <li key={'detailProblem'+index}
date-index={index}
className={this.state.currentLiIndex == index ? 'active_li':''}
onClick={(e)=>(this.handleDetailProblem.bind(this,e))()}>{item}</li>
//let 难道初始化的数据:
let {state} = this.props;
console.log(state)
let {otherQuestion} = state;
let {feeds,problems} = otherQuestion;
let editProblemItemUI = '';
let swiperCount = 0;
feeds && feeds.length>0 ?(
editProblemItemUI = feeds.map((i,k)=>{
return <EditProblemItem problemInfo = {problems} baseInfo = {feeds[k]} key={k}/>;
})
):""
feeds && feeds.length>0 ?(
swiperCount = feeds.length
):""
let swiperOptions = {
width : 1396,
spaceBetween: 30,
freeMode:true,
// slidesPerView: 2.6,
};
let swiperContainer = CONFIG.swiperContainers.editProblemSwiperContainer;
return (
<div className={"OtherQuestionContainer"}>
<div className={"otherQuestionTitleContainer"}>你是否有其他问题希望反馈(<i>*</i>必填项)</div>
<div className={"editOtherQuestionContainer clearfix"}>
<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"} 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>
<SwiperComponent
swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
>
{editProblemItemUI}
</SwiperComponent>
</div>
<div className={"opeationContainer clearfix"}>
<button className={"addMoreBtn"}><span>+</span>录入更多</button>
......@@ -113,8 +90,3 @@ class OtherQuestionContainer extends React.Component{
)
}
}
\ No newline at end of file
function select(store) {
return Object.assign({}, {state: store})
}
export default connect(select)(OtherQuestionContainer)
\ No newline at end of file
......@@ -11,135 +11,16 @@
font-size: 25px;
}
.OtherQuestionContainer .editOtherQuestionContainer{}
.OtherQuestionContainer .editOtherQuestionContainer .editUploadItem{
border: 2px solid #e5e5e5;
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 .editProblemSwiperContainer{
overflow: visible;
}
.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 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{
margin-top: 20px;
text-align: left;
......
......@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
import {getStoreInfo} from "../../actions/getStore";
import {getTroubleList} from "../../actions/getTroubles";
import {intGetOtherProblem} from "../../actions/otherQuestion"
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
......@@ -34,7 +35,7 @@ const showPage = {
const defaultPopupInfo = {
showPopup : false, //是否显示弹窗
popupChild : null, // 自定义弹窗内部html
popupChild : null, // 自定义弹窗内部htmls
popupText : "", //默认弹窗的文本 (必填)
popupButtons : [], // 默认弹窗的按钮
classNames : '' //自定义类名
......@@ -45,7 +46,7 @@ class PageContainer extends React.Component {
super(props);
// UTILPATH.socket.getIp();
this.state = {
showPage : showPage[1],
showPage : showPage[4],
page : null,
popupInfo : defaultPopupInfo,
pageStyle : {
......@@ -98,6 +99,7 @@ class PageContainer extends React.Component {
getPages(){
let pages = null;
let{state,dispatch} = this.props;
switch (this.state.showPage){
case showPage[1]:
pages = <TroubleContainer />;
......@@ -109,7 +111,10 @@ class PageContainer extends React.Component {
pages = <ReportDamagesListContainer />;
break;
case showPage[4]:
pages = <OtherQuestionContainer />;
pages = <OtherQuestionContainer
initStart = {(postData)=>dispatch(intGetOtherProblem(postData))}
state = {state}
/>;
break;
case showPage[5]:
pages = <TextAreaContainer />;
......@@ -135,7 +140,7 @@ class PageContainer extends React.Component {
<div className={"pageContainer "} style={this.state.pageStyle}>
<HeaderComponent />
<PopupComponent popupInfo={this.state.popupInfo} />
{this.state.page}
{this.getPages()}
</div>
)
}
......
.pageContainer{
position: relative;
height: 956px;
width: 1920px;
/* height: 956px;
width: 1920px;*/
}
.pageContainer.backColfff{
background-color: #ffffff;
......
'use strict';
import React from 'react';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import { connect } from 'react-redux';
require('./index.css');
import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer'
import DamageItem from '../../components/ReportDamageListComponent/DamageItemComponent/DamageItem'
class ReportDamagesListContainer extends React.Component{
constructor(props){
super(props)
}
render(){
let arr = [1,2,3,4];
let dom = arr.map((i,k)=>{
return <DamageItem key={k}/>;
});
let swiperOptions = {
width : 1396,
spaceBetween: 30,
freeMode:true,
// slidesPerView: 2.6,
};
let swiperContainer = CONFIG.swiperContainers.damageSwiperContainer;
let swiperCount = arr.length;
return (
<div className={"ReportDamagesListContainer"}>
<div className={"damageTitleContainer"}>故障相关报损商品(非货架区)</div>
<div className={"damageProductList clearfix"}>
<div className={"damageProductItem"}>
<span className={"closeBtn"}>×</span>
<div className={"productBaseInfo clearfix"}>
<img className={"productImg"} src= { require('../OtherQuestionContainer/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>
{/* <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"}>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
</div>
</div>
</div>
<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"}>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
</div>
<SwiperComponent
swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
>
{dom}
</SwiperComponent>
</div>
</div>
<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"}>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
</div>
</div>
</div>*/}
</div>
<div className={"opeationContainer clearfix"}>
<button className={"addMoreBtn"}><span>+</span>录入更多</button>
......@@ -247,5 +45,3 @@ class ReportDamagesListContainer extends React.Component{
function select(store) {
return Object.assign({}, {state: store})
}
\ No newline at end of file
export default connect(select)(ReportDamagesListContainer)
\ No newline at end of file
......@@ -11,127 +11,8 @@
font-size: 25px;
}
.ReportDamagesListContainer .damageProductList{}
.ReportDamagesListContainer .damageProductList .damageProductItem{
border: 2px solid #e5e5e5;
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 .damageSwiperContainer{
overflow: visible;
}
.ReportDamagesListContainer .opeationContainer{
margin-top: 20px;
......
'use strict';
import React from 'react';
import { connect } from 'react-redux';
import { scanBarCodeGetProductInfo } from '../../actions/ScanBarCodeContainer'
import { scanBarCodeGetProductInfo } from '../../actions/ScanBarCode'
import ImgToolComponent from '../../components/CommonComponent/CommonSmallComponent/ImgToolComponent/CommonSmalContainer'
require('./index.css');
......@@ -125,5 +125,3 @@ class ScanBarCodeContainer extends React.Component{
function select(store) {
return Object.assign({}, {state: store})
}
\ No newline at end of file
export default connect(select)(ScanBarCodeContainer)
\ No newline at end of file
......@@ -31,6 +31,7 @@ export default class TroubleContainer extends React.Component{
return <TroubleItem key={k}/>;
});
let swiperOptions = {
width : 1396,
spaceBetween: 30,
freeMode:true,
......
......@@ -2,11 +2,13 @@ import { combineReducers } from 'redux'
import trouble from './trouble'
import storeInfo from './store'
import scanBarCodeContainer from './scanBarCodeContainer'
import otherQuestion from './otherQuestion'
export default combineReducers({
trouble,
storeInfo,
scanBarCodeContainer
scanBarCodeContainer,
otherQuestion
})
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
import * as actionTypes from '../actiontype/ScanBarCodeContainer';
import * as actionTypes from '../actiontype/ScanBarCode';
function initSuccess(state,data) {
let newInfo = Object.assign({},state,data);
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