更新商品编辑
This commit is contained in:
姜棚
parent
f31deff8f1
commit
c0d2727524
|
|
@ -11,7 +11,7 @@ import Filterbar from "../../../components/filterbar/main.js"
|
|||
import {getCodeProductList,handelResponse,delCodeProduct} from "../../../assets/api.js"
|
||||
import Productform from "../product/add"
|
||||
import _ from "lodash";
|
||||
/* <span className="grid-link" onClick={(e)=>this.editinfo(e,rowData)}>编辑</span> */
|
||||
|
||||
const Column = [
|
||||
{
|
||||
title: '商品编号',
|
||||
|
|
@ -292,7 +292,7 @@ export default class commoditylist extends React.Component{
|
|||
if(com == "opearo")
|
||||
{
|
||||
return <div>
|
||||
|
||||
<span className="grid-link" onClick={(e)=>this.editinfo(e,rowData)}>编辑</span>
|
||||
<span className="grid-link" onClick={(e)=>this.deleteFn(e,rowData)}>删除</span>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,11 @@ import Bus from "../../../assets/eventBus.js"
|
|||
import {getProductInfoSelect,handelResponse,uploadImg,getCodeProduct,putCodeProduct} from "../../../assets/api.js"
|
||||
import _ from "lodash";
|
||||
import "./commodity.less"
|
||||
|
||||
import "./goodedit.less"
|
||||
import Swiper from 'swiper/dist/js/swiper.js'
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
export default class adduserinfo extends React.Component{
|
||||
mySwiper = null;
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state={
|
||||
|
|
@ -23,37 +26,48 @@ export default class adduserinfo extends React.Component{
|
|||
quantity:"",
|
||||
usage:"",
|
||||
name:"",
|
||||
show_url:"",
|
||||
loadshow:false,
|
||||
show_url:"",
|
||||
loadshow:false,
|
||||
describe_url:"",
|
||||
map_product_name:''
|
||||
map_product_name:'',
|
||||
detail_url:"",
|
||||
},
|
||||
cur_product:null,
|
||||
cur_product:null,
|
||||
productOption:[],
|
||||
img:[{src:"https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/account_avatar/20211119/ae4e7d7eafd6eb1a4d9ca0efd281dba0.png"}]
|
||||
productpic:[]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
this.mySwiper = new Swiper('.swiper-container', {
|
||||
slidesPerView: 1,
|
||||
centeredSlides: true,
|
||||
loop : true,
|
||||
autoplay : 3000,
|
||||
initialSlide :0,
|
||||
observer: true, // 修改swiper自己或子元素时，自动初始化swiper
|
||||
observeParents: true, // 修改swiper的父元素时，自动初始化swiper
|
||||
pagination: '.swiper-pagination',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
componentWillMount(e){
|
||||
//获取商品信息
|
||||
this.getProductInfo()
|
||||
}
|
||||
componentWillReceiveProps() {
|
||||
this.mySwiper.update();
|
||||
}
|
||||
//获取直连天下商品映射信息
|
||||
getProductInfo(){
|
||||
// getProductInfoSelect().then((res)=>{
|
||||
// handelResponse(res,(req,msg)=>{
|
||||
|
||||
|
||||
|
||||
let productList = sessionStorage.getItem("productsList")
|
||||
|
||||
|
||||
|
||||
|
||||
productList = JSON.parse(productList);
|
||||
|
||||
let product_data = []
|
||||
|
|
@ -89,6 +103,29 @@ export default class adduserinfo extends React.Component{
|
|||
|
||||
getCodeProduct(code_batch_id,product_id).then(res=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
|
||||
let defaultPic = []
|
||||
let arr = []
|
||||
|
||||
|
||||
let temp_productpic = this.state.productpic
|
||||
for(let i = 0;i < req.describe_url.length;i++)
|
||||
{
|
||||
let obj = {}
|
||||
let nameArr = req.describe_url[i].split('/');
|
||||
obj.name = nameArr[5]
|
||||
obj.src = req.describe_url[i];
|
||||
defaultPic.push(obj)
|
||||
let obj2={
|
||||
name:nameArr[5],
|
||||
url:req.describe_url[i]
|
||||
}
|
||||
temp_productpic.push(obj2)
|
||||
}
|
||||
this.setState({temp_productpic})
|
||||
|
||||
|
||||
|
||||
let temp ={ //数据模型不可少
|
||||
id:req.product_id,
|
||||
type:req.product_type,
|
||||
|
|
@ -101,8 +138,9 @@ export default class adduserinfo extends React.Component{
|
|||
usage:req.usage,
|
||||
name:req.product_name,
|
||||
show_url:req.show_url[0],
|
||||
describe_url: req.describe_url[0] ,
|
||||
map_product_name:req.map_product_name
|
||||
describe_url: defaultPic ,
|
||||
map_product_name:req.map_product_name,
|
||||
detail_url:req.detail_url
|
||||
}
|
||||
|
||||
let sel_item = this.state.productOption.find((o)=>{
|
||||
|
|
@ -111,21 +149,12 @@ export default class adduserinfo extends React.Component{
|
|||
|
||||
this.setState({cur_product:sel_item})
|
||||
this.setState({model:temp,loadshow:true})
|
||||
console.log(789798)
|
||||
console.log(this.state.model)
|
||||
|
||||
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
}).catch(err=>{
|
||||
});
|
||||
|
||||
|
||||
|
||||
// },(err)=>{
|
||||
// })
|
||||
// })
|
||||
|
||||
}
|
||||
|
||||
cancel(){
|
||||
|
|
@ -157,6 +186,10 @@ export default class adduserinfo extends React.Component{
|
|||
Notify.error(`商品总库存量不能小于已使用数量`);
|
||||
return;
|
||||
}
|
||||
let urls = _.map(this.state.productpic,(o)=>{
|
||||
return o.url
|
||||
})
|
||||
|
||||
let formdata = {
|
||||
"product_type": this.state.model.type,
|
||||
"product_name": this.state.model.name,
|
||||
|
|
@ -168,8 +201,9 @@ export default class adduserinfo extends React.Component{
|
|||
"usage": this.state.model.usage,
|
||||
"stock":this.state.model.quantity - this.state.model.usage,
|
||||
"show_url": this.state.model.show_url,
|
||||
"describe_url": this.state.model.describe_url,
|
||||
// "map_product_name": this.state.model.map_product_name
|
||||
"describe_url": urls.toString(),
|
||||
"detail_url":this.state.model.detail_url,
|
||||
"map_product_name": this.state.model.map_product_name
|
||||
}
|
||||
|
||||
putCodeProduct(code_batch_id,product_id,formdata).then((res)=>{
|
||||
|
|
@ -207,8 +241,9 @@ export default class adduserinfo extends React.Component{
|
|||
stock:this.state.model.quantity - this.state.model.usage,
|
||||
account_type:cur_product.account_type,
|
||||
show_url:picItem ? picItem.pic : "",
|
||||
describe_url:this.state.describe_url ,
|
||||
map_product_name:cur_product.title
|
||||
describe_url:this.state.model.describe_url ,
|
||||
map_product_name:cur_product.title,
|
||||
detail_url:""
|
||||
}
|
||||
|
||||
this.setState({model:model2})
|
||||
|
|
@ -337,6 +372,108 @@ export default class adduserinfo extends React.Component{
|
|||
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
onUploadChange3(files,e){
|
||||
let arr =_.map(files,(o)=>{
|
||||
return o.name
|
||||
})
|
||||
console.log("保留的数据",arr)
|
||||
|
||||
if(arr.length > this.state.productpic.length)
|
||||
{
|
||||
//新增
|
||||
for(let i = 0;i < arr.length;i++)
|
||||
{
|
||||
|
||||
let index = this.state.productpic.findIndex((o)=>{
|
||||
return o.name == arr[i]
|
||||
})
|
||||
if(index < 0)
|
||||
{
|
||||
let path = ""
|
||||
let formdata= new FormData();
|
||||
formdata.append("file",files[i].file)
|
||||
formdata.append("path","common_image")
|
||||
|
||||
uploadImg(formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
path = req.path;
|
||||
let obj={
|
||||
name:files[i].name,
|
||||
url:path
|
||||
}
|
||||
let arr = this.state.productpic;
|
||||
arr.push(obj)
|
||||
this.setState({arr})
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
if(arr.length < this.state.productpic.length)
|
||||
{
|
||||
let temp_arr = Object.assign([],this.state.productpic);
|
||||
this.setState({productpic:[]})
|
||||
this.state.productpic = []
|
||||
let temp_arr2 = this.state.productpic
|
||||
console.log(temp_arr)
|
||||
console.log("删除前的数据",this.state.productpic)
|
||||
for(let i = 0;i < temp_arr.length;i++ )
|
||||
{
|
||||
let temp =temp_arr[i]
|
||||
if(arr.indexOf(temp.name) > -1)
|
||||
{
|
||||
temp_arr2.push(temp)
|
||||
}
|
||||
}
|
||||
console.log("删除过后的数组",this.state.productpic)
|
||||
this.setState({temp_arr2})
|
||||
}
|
||||
|
||||
// //调整位置
|
||||
if(arr.length == this.state.productpic.length)
|
||||
{
|
||||
let temp_arr = []
|
||||
let pic_arr = this.state.productpic
|
||||
for(let i = 0;i < arr.length;i++ )
|
||||
{
|
||||
let temp = pic_arr.find((o)=>{return o.name == arr[i]})
|
||||
temp_arr[i] = temp
|
||||
}
|
||||
this.setState({productpic:temp_arr})
|
||||
}
|
||||
};
|
||||
onUploadChange2(files){
|
||||
if(files.length > 0 )
|
||||
{
|
||||
let formdata= new FormData();
|
||||
formdata.append("file",files[0].file)
|
||||
formdata.append("path","common_image")
|
||||
uploadImg(formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
let path = req.path;
|
||||
let model = this.state.model;
|
||||
model.detail_url = path;
|
||||
|
||||
this.setState({model:model})
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
});
|
||||
}
|
||||
else{
|
||||
let model = this.state.model;
|
||||
model.detail_url = "";
|
||||
this.setState({model:model})
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
|
|
@ -466,21 +603,73 @@ export default class adduserinfo extends React.Component{
|
|||
|
||||
{
|
||||
this.state.loadshow? <FormItem prop="describe_url" labelname="商品图" id="describe_url" required={false}>
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
tips="建议尺寸 30*30，图片不超过 20KB"
|
||||
maxAmount={1}
|
||||
onChange={(e)=>{this.onUploadChange1(e)}}
|
||||
onUpload={this.onUpload}
|
||||
fileList={this.state.model.describe_url ? [{'src':this.state.model.describe_url}] : null}
|
||||
value={this.state.model.describe_url}
|
||||
/></FormItem>:null
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
tips="建议尺寸 30*30，图片不超过 20KB"
|
||||
maxAmount={9}
|
||||
sortable
|
||||
defaultFileList={this.state.model.describe_url }
|
||||
multiple
|
||||
onChange={(e)=>{this.onUploadChange3(e)}}
|
||||
/></FormItem>:null
|
||||
}
|
||||
|
||||
|
||||
|
||||
{
|
||||
this.state.loadshow? <FormItem prop="detail_url" labelname="商品详情" id="detail_url" required={false}>
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
tips="建议尺寸 30*30，图片不超过 20KB"
|
||||
maxAmount={1}
|
||||
fileList={this.state.model.detail_url ? [{'src':this.state.model.detail_url}] : null}
|
||||
onChange={(e)=>{this.onUploadChange2(e)}}
|
||||
/>
|
||||
</FormItem> : null
|
||||
}
|
||||
</Form>
|
||||
|
||||
<div className="mobile">
|
||||
<div className="mobile_top">
|
||||
{
|
||||
this.state.productpic ?
|
||||
(
|
||||
<div className="swiper-container">
|
||||
<div className="swiper-wrapper" ref="swiperwrapper">
|
||||
|
||||
{
|
||||
this.state.productpic.map((item, index) => {
|
||||
|
||||
|
||||
return (<div className="swiper-slide" >
|
||||
|
||||
<img src={item.url} />
|
||||
|
||||
</div>)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
<div className="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
) : null
|
||||
|
||||
}
|
||||
</div>
|
||||
<div className="mobile_center">
|
||||
</div>
|
||||
<div className="mobile_bottom">
|
||||
{
|
||||
this.state.model.detail_url ? (<img src={this.state.model.detail_url} />) : null
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</Card>
|
||||
|
||||
<div className="btnList" >
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
.zent-image-upload-item-delete{
|
||||
display: inline-block !important;
|
||||
}
|
||||
.mobile{
|
||||
width: 375px;
|
||||
height: 667px;
|
||||
max-height: 667px;
|
||||
background-color: #fafafa;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: 60px;
|
||||
border-color: 1px solid #B4B6B9;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.mobile_top{
|
||||
width: 100%;
|
||||
height: 373px;
|
||||
background-image: url(https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailtop.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
.mobile_center{
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 158px;
|
||||
background-image: url(https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.mobile_bottom{
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
// background-image: url;
|
||||
|
||||
}
|
||||
.swiper-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-slide{
|
||||
img{
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.swiper-mobile-simple{
|
||||
height: 100% !important;
|
||||
}
|
||||
|
|
@ -63,6 +63,8 @@ export default class adduserinfo extends React.Component{
|
|||
if(this.props.data)
|
||||
{
|
||||
let model_temp = this.props.data;
|
||||
|
||||
|
||||
let model = this.state.model;
|
||||
model.product_id = model_temp.product_id;
|
||||
model.product_type = model_temp.product_type
|
||||
|
|
@ -76,7 +78,7 @@ export default class adduserinfo extends React.Component{
|
|||
let defaultPic = []
|
||||
let arr = []
|
||||
|
||||
console.log("描述图",model_temp.describe_url)
|
||||
|
||||
let temp_productpic = this.state.productpic
|
||||
for(let i = 0;i < model_temp.describe_url.length;i++)
|
||||
{
|
||||
|
|
@ -168,26 +170,28 @@ export default class adduserinfo extends React.Component{
|
|||
temp[index].stock = this.state.model.quantity
|
||||
temp[index].usage = this.state.model.usage
|
||||
temp[index].show_url = this.state.model.show_url
|
||||
|
||||
temp[index].detail_url = this.state.model.detail_url
|
||||
let urls = _.map(this.state.productpic,(o)=>{
|
||||
return o.url
|
||||
})
|
||||
|
||||
|
||||
console.log("提交数据url",urls)
|
||||
temp[index].describe_url = urls
|
||||
|
||||
|
||||
|
||||
temp[index].map_product_name = this.state.model.map_product_name
|
||||
temp[index].account_type = this.state.model.account_type
|
||||
|
||||
console.log("临时存储",temp)
|
||||
|
||||
sessionStorage.setItem('productData', JSON.stringify(temp));
|
||||
}
|
||||
}
|
||||
else{
|
||||
console.log("模型")
|
||||
let model = this.state.model;
|
||||
|
||||
|
||||
let urls = _.map(this.state.productpic,(o)=>{
|
||||
return o.url
|
||||
})
|
||||
model.describe_url = urls
|
||||
|
||||
this.setState({model:model})
|
||||
|
||||
|
||||
if(this.state.model.show_url == "")
|
||||
{
|
||||
|
|
@ -223,6 +227,7 @@ export default class adduserinfo extends React.Component{
|
|||
product_name:cur_product.title,
|
||||
show_url:picItem ? picItem.pic : "",
|
||||
describe_url: "",
|
||||
detail_url:'',
|
||||
map_product_name:cur_product.title,
|
||||
account_type:cur_product.account_type
|
||||
}
|
||||
|
|
@ -347,26 +352,6 @@ export default class adduserinfo extends React.Component{
|
|||
}
|
||||
this.setState({productpic:temp_arr})
|
||||
}
|
||||
// console.log("swiperwrapper",this.refs.swiperwrapper)
|
||||
// this.refs.swiperwrapper.innerHTML=""
|
||||
|
||||
|
||||
// this.mySwiper.destroy();
|
||||
|
||||
// this.mySwiper = new Swiper('.swiper-container', {
|
||||
// slidesPerView: 1,
|
||||
// centeredSlides: true,
|
||||
// loop : true,
|
||||
// autoplay : 3000,
|
||||
// observer: true, // 修改swiper自己或子元素时，自动初始化swiper
|
||||
// observeParents: true, // 修改swiper的父元素时，自动初始化swiper
|
||||
// pagination: '.swiper-pagination',
|
||||
// watchSlidesVisibility: true,
|
||||
|
||||
// })
|
||||
// this.mySwiper.update();
|
||||
// let swiperBox = this.refs.swiperwrapper
|
||||
|
||||
};
|
||||
onUploadError = (type, data) => {
|
||||
if (type === 'overMaxAmount') {
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ export default class acclist extends React.Component{
|
|||
uploading:false,
|
||||
rowIndex:-1,
|
||||
isload:props.isload ? props.isload : false,
|
||||
product_title:"新建商品"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,6 +156,7 @@ export default class acclist extends React.Component{
|
|||
}
|
||||
addProduct(){
|
||||
this.setState({drawerVisible2:true})
|
||||
this.setState({productData:null})
|
||||
}
|
||||
async productSubmit(){
|
||||
let visible = await this.refs.product.submit()
|
||||
|
|
@ -269,7 +271,8 @@ export default class acclist extends React.Component{
|
|||
obj.official_price= item.official_price;
|
||||
obj.quantity = item.quantity;
|
||||
obj.show_url = item.show_url;
|
||||
obj.describe_url = item.describe_url;
|
||||
obj.describe_url = item.describe_url.toString();
|
||||
obj.detail_url = item.detail_url;
|
||||
obj.account_type = item.account_type;
|
||||
obj.map_product_name = item.map_product_name;
|
||||
return obj
|
||||
|
|
@ -528,6 +531,12 @@ export default class acclist extends React.Component{
|
|||
|
||||
|
||||
}
|
||||
productEditShow(rowData){
|
||||
this.setState({drawerVisible2:true})
|
||||
this.setState({productData:rowData})
|
||||
this.setState({product_title:"编辑商品"})
|
||||
}
|
||||
|
||||
|
||||
render(){
|
||||
|
||||
|
|
@ -640,20 +649,13 @@ export default class acclist extends React.Component{
|
|||
type: "slot",
|
||||
width:'auto',
|
||||
},
|
||||
{
|
||||
title: '商品Logo',
|
||||
prop: 'show_url',
|
||||
name: 'show_url',
|
||||
type: "slot",
|
||||
width:'auto',
|
||||
},
|
||||
{
|
||||
title: '商品图',
|
||||
prop: 'describe_url',
|
||||
name: 'describe_url',
|
||||
type: "slot",
|
||||
width:'auto',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
prop: 'edit',
|
||||
name: 'edit',
|
||||
type: "slot",
|
||||
width:'auto',
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -963,33 +965,15 @@ export default class acclist extends React.Component{
|
|||
return <Input width={100} placeholder="请输入合同价" value={rowData.contract_price} onChange={(e)=>{this.onPriceChange(e,rowData,rowIndex)}} />
|
||||
}
|
||||
|
||||
if(com == "show_url")
|
||||
if(com == "edit")
|
||||
{
|
||||
return <ImageUpload
|
||||
style={{width:"30px",height:"30px"}}
|
||||
className="td-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
onChange={(e)=>{this.onUploadChange1(e,rowData)}}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={[{'src':rowData.show_url}]}
|
||||
value={rowData.show_url}
|
||||
/>
|
||||
return <a className="grid-link" onClick={(e)=>{
|
||||
this.productEditShow(rowData)
|
||||
|
||||
}} >编辑</a>
|
||||
}
|
||||
|
||||
if(com == "describe_url")
|
||||
{
|
||||
return <ImageUpload
|
||||
style={{width:"30px",height:"30px"}}
|
||||
className="td-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
onChange={(e)=>{this.onUploadChange2(e,rowData)}}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={ rowData.describe_url ? [{'src':rowData.describe_url}] : null}
|
||||
value={rowData.describe_url}
|
||||
/>
|
||||
}
|
||||
|
||||
|
||||
|
||||
}}
|
||||
|
|
@ -1002,8 +986,8 @@ export default class acclist extends React.Component{
|
|||
</Drawer>
|
||||
<Drawer
|
||||
className="draw"
|
||||
width={"60%"}
|
||||
title={"新建商品"}
|
||||
width={"80%"}
|
||||
title={this.state.product_title}
|
||||
footer={
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Button type="primary" onClick={(e) =>{this.productSubmit()} }>提交</Button>
|
||||
|
|
@ -1017,7 +1001,7 @@ export default class acclist extends React.Component{
|
|||
<div className="draw2">
|
||||
<Card style={{ width:'90%',"margin":"10px auto" }} >
|
||||
|
||||
<Productform ref="product" data={this.state.productData}/>
|
||||
<Productform ref="product" data={this.state.productData} />
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@ import {Select,Button,ImageUpload ,onUpload,Sweetalert,RadioButton,RadioGroup,No
|
|||
import Bus from "../../../assets/eventBus.js"
|
||||
import {getProductInfoSelect,handelResponse,uploadImg} from "../../../assets/api.js"
|
||||
import _ from "lodash";
|
||||
|
||||
import Swiper from 'swiper/dist/js/swiper.js'
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
|
||||
export default class adduserinfo extends React.Component{
|
||||
mySwiper = null
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state={
|
||||
|
|
@ -25,6 +27,7 @@ export default class adduserinfo extends React.Component{
|
|||
show_url:"",
|
||||
describe_url:"",
|
||||
map_product_name:"",
|
||||
detail_url:""
|
||||
},
|
||||
cur_product:null,
|
||||
productOption:[],
|
||||
|
|
@ -32,63 +35,189 @@ export default class adduserinfo extends React.Component{
|
|||
show_url:"",
|
||||
describe_url:"",
|
||||
loadshow:false,
|
||||
productpic:[],
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
this.mySwiper = new Swiper('.swiper-container', {
|
||||
slidesPerView: 1,
|
||||
centeredSlides: true,
|
||||
loop : true,
|
||||
autoplay : 3000,
|
||||
initialSlide :0,
|
||||
observer: true, // 修改swiper自己或子元素时，自动初始化swiper
|
||||
observeParents: true, // 修改swiper的父元素时，自动初始化swiper
|
||||
pagination: '.swiper-pagination',
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
componentWillMount(e){
|
||||
if(this.props.data)
|
||||
{
|
||||
let model_temp = this.props.data;
|
||||
let model = this.state.model;
|
||||
model.product_id = model_temp.product_id;
|
||||
model.product_type = model_temp.product_type
|
||||
model.contract_price = model_temp.contract_price
|
||||
model.official_price = model_temp.official_price
|
||||
model.cost_price = model_temp.cost_price
|
||||
model.quantity = model_temp.quantity
|
||||
model.product_name = model_temp.product_name
|
||||
model.show_url = model_temp.show_url
|
||||
model.detail_url = model_temp.detail_url
|
||||
let defaultPic = []
|
||||
let arr = []
|
||||
|
||||
|
||||
let temp_productpic = this.state.productpic
|
||||
let pics = ""
|
||||
|
||||
if(Array.isArray(model_temp.describe_url))
|
||||
{
|
||||
pics = model_temp.describe_url
|
||||
}
|
||||
else{
|
||||
if(model_temp.describe_url !="")
|
||||
{
|
||||
pics = model_temp.describe_url.split(',')
|
||||
}
|
||||
else{
|
||||
pics = []
|
||||
}
|
||||
|
||||
}
|
||||
console.log("默认图",pics)
|
||||
for(let i = 0;i < pics.length;i++)
|
||||
{
|
||||
let obj = {}
|
||||
let nameArr = pics[i].split('/');
|
||||
obj.name = nameArr[5]
|
||||
obj.src = pics[i];
|
||||
defaultPic.push(obj)
|
||||
let obj2={
|
||||
name:nameArr[5],
|
||||
url:pics[i]
|
||||
}
|
||||
temp_productpic.push(obj2)
|
||||
}
|
||||
this.setState({temp_productpic})
|
||||
|
||||
model.describe_url = defaultPic == [] ? "" : defaultPic
|
||||
model.stock = model_temp.stock
|
||||
model.usage = model_temp.usage
|
||||
model.map_product_name = model_temp.map_product_name
|
||||
model.account_type = model_temp.account_type
|
||||
this.setState({model:model})
|
||||
|
||||
}
|
||||
this.getProductInfo()
|
||||
}
|
||||
|
||||
|
||||
componentWillReceiveProps() {
|
||||
|
||||
this.mySwiper.update();
|
||||
}
|
||||
|
||||
|
||||
componentDidMount(e){
|
||||
//获取商品信息
|
||||
|
||||
this.getProductInfo()
|
||||
|
||||
}
|
||||
//获取直连天下商品映射信息
|
||||
getProductInfo(){
|
||||
|
||||
// getProductInfoSelect().then((res)=>{
|
||||
// handelResponse(res,(req,msg)=>{
|
||||
let product_data = []
|
||||
let productList = sessionStorage.getItem("productsList")
|
||||
|
||||
productList = JSON.parse(productList);
|
||||
if(sessionStorage.getItem("productData"))
|
||||
{
|
||||
product_data = JSON.parse( sessionStorage.getItem("productData")) ;
|
||||
}
|
||||
|
||||
let checked_product= product_data ? product_data : [];
|
||||
|
||||
let arr = [];
|
||||
this.setState({products:productList})
|
||||
_.map(productList,(res)=>{
|
||||
let obj = {};
|
||||
obj.key = res.id;
|
||||
obj.text= res.title;
|
||||
obj.disabled = checked_product.findIndex((item)=>{return item.product_id == res.id}) > -1;
|
||||
if(obj.disabled)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
arr.push(obj)
|
||||
|
||||
return obj;
|
||||
})
|
||||
|
||||
let product_data = []
|
||||
let productList = sessionStorage.getItem("productsList")
|
||||
|
||||
productList = JSON.parse(productList);
|
||||
if(sessionStorage.getItem("productData"))
|
||||
{
|
||||
product_data = JSON.parse( sessionStorage.getItem("productData")) ;
|
||||
}
|
||||
|
||||
let checked_product= product_data ? product_data : [];
|
||||
|
||||
let arr = [];
|
||||
this.setState({products:productList})
|
||||
_.map(productList,(res)=>{
|
||||
let obj = {};
|
||||
obj.key = res.id;
|
||||
obj.text= res.title;
|
||||
obj.disabled = checked_product.findIndex((item)=>{return item.product_id == res.id}) > -1;
|
||||
if(obj.disabled)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
arr.push(obj)
|
||||
|
||||
return obj;
|
||||
})
|
||||
|
||||
this.setState({"productOption":arr})
|
||||
|
||||
// },(err)=>{
|
||||
// })
|
||||
// })
|
||||
|
||||
if(this.state.model.product_id)
|
||||
{
|
||||
let cur_product = arr.find((item)=>{return item.key ==this.state.model.product_id})
|
||||
this.setState({cur_product:cur_product})
|
||||
}
|
||||
}
|
||||
|
||||
async submit(){
|
||||
if(this.refs.form1.validator())
|
||||
{
|
||||
|
||||
|
||||
console.log("提交新增数据",this.props.data)
|
||||
|
||||
if(this.props.data)
|
||||
{ let temp = []
|
||||
|
||||
console.log("编辑",this.state.model)
|
||||
if(sessionStorage.getItem("productData"))
|
||||
{
|
||||
|
||||
temp = JSON.parse(sessionStorage.getItem("productData"));
|
||||
|
||||
let index = temp.findIndex((item)=>{return item.product_id ==this.props.data.product_id})
|
||||
|
||||
console.log("账号类型",this.state.model.account_type)
|
||||
|
||||
temp[index].product_name = this.state.model.product_name
|
||||
temp[index].account_type = this.state.model.account_type
|
||||
temp[index].product_id = this.state.model.product_id
|
||||
temp[index].product_type = this.state.model.product_type
|
||||
temp[index].contract_price = this.state.model.contract_price
|
||||
temp[index].official_price = this.state.model.official_price
|
||||
temp[index].cost_price = this.state.model.cost_price
|
||||
temp[index].quantity = this.state.model.quantity
|
||||
temp[index].stock = this.state.model.quantity
|
||||
temp[index].usage = this.state.model.usage
|
||||
temp[index].show_url = this.state.model.show_url
|
||||
temp[index].detail_url = this.state.model.detail_url
|
||||
console.log(77777)
|
||||
let urls = _.map(this.state.productpic,(o)=>{
|
||||
return o.url
|
||||
})
|
||||
console.log(8888)
|
||||
temp[index].describe_url = urls
|
||||
temp[index].map_product_name = this.state.model.map_product_name
|
||||
|
||||
sessionStorage.setItem('productData', JSON.stringify(temp));
|
||||
return true;
|
||||
}
|
||||
}
|
||||
else{
|
||||
|
||||
let model = this.state.model;
|
||||
|
||||
console.log("商品",this.state.model)
|
||||
let urls = _.map(this.state.productpic,(o)=>{
|
||||
return o.url
|
||||
})
|
||||
model.describe_url = urls
|
||||
|
||||
this.setState({model:model})
|
||||
if(this.state.model.show_url == "")
|
||||
{
|
||||
Notify.error(`请上传商品Logo`);
|
||||
|
|
@ -104,18 +233,16 @@ export default class adduserinfo extends React.Component{
|
|||
data.push(this.state.model)
|
||||
sessionStorage.setItem('productData', JSON.stringify(data));
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
onProductChange(e){
|
||||
this.setState({cur_product:e})
|
||||
let cur_product = this.state.products.find((item)=>{return item.id == e.key})
|
||||
console.log(window.goods)
|
||||
console.log(cur_product.product_category_id)
|
||||
|
||||
console.log("当前商品",cur_product)
|
||||
let picItem = window.goods.find((item)=>{return item.id == cur_product.product_category_id})
|
||||
|
||||
console.log(picItem)
|
||||
|
||||
let model2 = {...this.state.model}
|
||||
model2.product_id = cur_product.id;
|
||||
model2.product_type=cur_product.type;
|
||||
|
|
@ -128,7 +255,7 @@ export default class adduserinfo extends React.Component{
|
|||
model2.show_url=picItem ? picItem.pic : "";
|
||||
model2.describe_url= "";
|
||||
model2.map_product_name= cur_product.title;
|
||||
|
||||
model2.detail_url = "";
|
||||
// let model2 = {
|
||||
// product_id:cur_product.id,
|
||||
// product_type:cur_product.type,
|
||||
|
|
@ -152,28 +279,14 @@ export default class adduserinfo extends React.Component{
|
|||
|
||||
onUpload = (file, report) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
console.log(file)
|
||||
console.log(report)
|
||||
// let count = file.size;
|
||||
// const update = () => {
|
||||
// console.log(count)
|
||||
// if(count < 0)
|
||||
// {
|
||||
// resolve();
|
||||
// }
|
||||
// else{
|
||||
// count -= 10000;
|
||||
// report(10);
|
||||
// setTimeout(update, 100);
|
||||
// }
|
||||
// };
|
||||
// setTimeout(update, 100);
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onUploadChange(files){
|
||||
console.log(files)
|
||||
if(files.length > 0 )
|
||||
|
|
@ -183,19 +296,19 @@ export default class adduserinfo extends React.Component{
|
|||
Notify.error(`图片大小不能超过 20KB`);
|
||||
return;
|
||||
}
|
||||
let formdata= new FormData();
|
||||
formdata.append("file",files[0].file)
|
||||
formdata.append("path","common_image")
|
||||
uploadImg(formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
let path = req.path;
|
||||
let model = this.state.model;
|
||||
model.show_url = path;
|
||||
this.setState({model:model})
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
});
|
||||
let formdata= new FormData();
|
||||
formdata.append("file",files[0].file)
|
||||
formdata.append("path","common_image")
|
||||
uploadImg(formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
let path = req.path;
|
||||
let model = this.state.model;
|
||||
model.show_url = path;
|
||||
this.setState({model:model})
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
});
|
||||
}
|
||||
else{
|
||||
let model = this.state.model;
|
||||
|
|
@ -240,6 +353,109 @@ export default class adduserinfo extends React.Component{
|
|||
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
onUploadChange3(files,e){
|
||||
let arr =_.map(files,(o)=>{
|
||||
return o.name
|
||||
})
|
||||
if(arr.length > this.state.productpic.length)
|
||||
{
|
||||
//新增
|
||||
for(let i = 0;i < arr.length;i++)
|
||||
{
|
||||
|
||||
let index = this.state.productpic.findIndex((o)=>{
|
||||
return o.name == arr[i]
|
||||
})
|
||||
if(index < 0)
|
||||
{
|
||||
let path = ""
|
||||
let formdata= new FormData();
|
||||
formdata.append("file",files[i].file)
|
||||
formdata.append("path","common_image")
|
||||
|
||||
uploadImg(formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
path = req.path;
|
||||
let obj={
|
||||
name:files[i].name,
|
||||
url:path
|
||||
}
|
||||
let arr = this.state.productpic;
|
||||
arr.push(obj)
|
||||
this.setState({arr})
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
if(arr.length < this.state.productpic.length)
|
||||
{
|
||||
let temp_arr = Object.assign([],this.state.productpic);
|
||||
this.setState({productpic:[]})
|
||||
this.state.productpic = []
|
||||
let temp_arr2 = this.state.productpic
|
||||
console.log(temp_arr)
|
||||
console.log("删除前的数据",this.state.productpic)
|
||||
for(let i = 0;i < temp_arr.length;i++ )
|
||||
{
|
||||
let temp =temp_arr[i]
|
||||
if(arr.indexOf(temp.name) > -1)
|
||||
{
|
||||
temp_arr2.push(temp)
|
||||
}
|
||||
}
|
||||
console.log("删除过后的数组",this.state.productpic)
|
||||
this.setState({temp_arr2})
|
||||
}
|
||||
|
||||
// //调整位置
|
||||
if(arr.length == this.state.productpic.length)
|
||||
{
|
||||
let temp_arr = []
|
||||
let pic_arr = this.state.productpic
|
||||
for(let i = 0;i < arr.length;i++ )
|
||||
{
|
||||
let temp = pic_arr.find((o)=>{return o.name == arr[i]})
|
||||
temp_arr[i] = temp
|
||||
}
|
||||
this.setState({productpic:temp_arr})
|
||||
}
|
||||
|
||||
this.mySwiper.update();
|
||||
};
|
||||
|
||||
onUploadChange2(files){
|
||||
if(files.length > 0 )
|
||||
{
|
||||
let formdata= new FormData();
|
||||
formdata.append("file",files[0].file)
|
||||
formdata.append("path","common_image")
|
||||
uploadImg(formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
let path = req.path;
|
||||
let model = this.state.model;
|
||||
model.detail_url = path;
|
||||
|
||||
this.setState({model:model})
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
});
|
||||
}
|
||||
else{
|
||||
let model = this.state.model;
|
||||
model.detail_url = "";
|
||||
this.setState({model:model})
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
//校验规则
|
||||
|
|
@ -359,19 +575,70 @@ export default class adduserinfo extends React.Component{
|
|||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
tips="建议尺寸 30*30，图片不超过 20KB"
|
||||
maxAmount={1}
|
||||
onChange={(e)=>{this.onUploadChange1(e)}}
|
||||
|
||||
fileList={this.state.model.describe_url ? [{'src':this.state.model.describe_url}] : null}
|
||||
value={this.state.model.describe_url}
|
||||
maxAmount={9}
|
||||
onChange={(e)=>{this.onUploadChange3(e)}}
|
||||
sortable
|
||||
defaultFileList={this.state.model.describe_url }
|
||||
multiple
|
||||
/>
|
||||
|
||||
|
||||
</FormItem>
|
||||
|
||||
<FormItem prop="detail_url" labelname="商品详情" id="detail_url" required={false}>
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
tips="建议尺寸 30*30，图片不超过 20KB"
|
||||
maxAmount={1}
|
||||
fileList={this.state.model.detail_url ? [{'src':this.state.model.detail_url}] : null}
|
||||
onUpload={this.onUpload}
|
||||
onChange={(e)=>{this.onUploadChange2(e)}}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
||||
</Form>
|
||||
|
||||
|
||||
<div className="mobile">
|
||||
<div className="mobile_top">
|
||||
{
|
||||
this.state.productpic ?
|
||||
(
|
||||
<div className="swiper-container">
|
||||
<div className="swiper-wrapper" ref="swiperwrapper">
|
||||
|
||||
{
|
||||
this.state.productpic.map((item, index) => {
|
||||
|
||||
|
||||
return (<div className="swiper-slide" >
|
||||
|
||||
<img src={item.url} />
|
||||
|
||||
</div>)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
<div className="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
) : null
|
||||
|
||||
}
|
||||
</div>
|
||||
<div className="mobile_center">
|
||||
</div>
|
||||
<div className="mobile_bottom">
|
||||
{
|
||||
this.state.model.detail_url ? (<img src={this.state.model.detail_url} />) : null
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue