diff --git a/src/pages/exchangecode/product/add copy.js b/src/pages/exchangecode/product/add copy.js new file mode 100644 index 00000000..5f076076 --- /dev/null +++ b/src/pages/exchangecode/product/add copy.js @@ -0,0 +1,661 @@ +import ReactDOM from 'react-dom' +import React from 'react' +import './add.less' +import Ipt from '../../../components/input/main' +import Form from '../../../components/form/main' +import FormItem from '../../../components/form-item/main' +import { + Select, + Button, + ImageUpload, + onUpload, + Sweetalert, + RadioButton, + RadioGroup, + Notify +} from 'zent' +import Swiper from 'swiper/dist/js/swiper.js' +import 'swiper/dist/css/swiper.min.css' +import Bus from '../../../assets/eventBus.js' +import { + getProductInfoSelect, + handelResponse, + uploadImg +} from '../../../assets/api.js' +import _ from 'lodash' + +var mySwiper = null +var timer = null +export default class adduserinfo extends React.Component { + constructor(props) { + super(props) + this.state = { + model: { + //数据模型不可少 + product_id: '', + product_type: '1', + contract_price: '', + official_price: '', + cost_price: '', + quantity: '', + product_name: '', + weight: '0', + show_url: '', + describe_url: [], + detail_url: '', + stock: '', + usage: '', + detail_url: '', + map_product_name: '' + }, + cur_product: null, + productOption: [], + products: [], + productpic: [], + productsList: [], + isSelectGoods: false + } + } + componentDidMount() { + 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' + }) + } + + componentWillReceiveProps() { + mySwiper.update() + } + + 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.weight = model_temp.weight + model.show_url = model_temp.show_url + model.account_type = model_temp.account_type + model.detail_url = model_temp.detail_url + let defaultPic = [] + let arr = [] + + let temp_productpic = this.state.productpic + let pics = '' + console.log("model_temp.describe_url =>", model_temp.describe_url) + if (Array.isArray(model_temp.describe_url)) { + pics = model_temp.describe_url + } else { + if ( + model_temp.describe_url != '' && + model_temp.describe_url != undefined + ) { + pics = model_temp.describe_url.split(',') + } else { + pics = [] + } + } + + for (let i = 0; i < pics.length; i++) { + let obj = {} + let nameArr = pics[i].split('/') + obj.name = nameArr[5] + obj.src = pics[i] + obj.url = pics[i] + defaultPic.push(obj) + temp_productpic.push(obj) + } + console.log("temp_productpic ==>", temp_productpic); + this.setState({ temp_productpic }) + model.describe_url = defaultPic + model.stock = model_temp.stock + model.usage = model_temp.usage + model.map_product_name = model_temp.map_product_name + console.log('model => 编辑', model) + this.setState({ model: model }) + } + this.getProductInfo() + } + + //获取直连天下商品映射信息 + getProductInfo() { + let productList = sessionStorage.getItem('productsList') + productList = JSON.parse(productList) + + let product_data = [] + if (sessionStorage.getItem('productData')) { + product_data = JSON.parse(sessionStorage.getItem('productData')) + } + let checked_product = product_data ? product_data : [] + console.log('product_data ==>1', product_data) + + let arr = [] + this.setState({ products: productList }) + + _.map(productList, (res) => { + let index = checked_product.findIndex((item) => { + return item.product_id == res.id + }) + let obj = {} + obj.key = res.id + obj.text = res.title + obj.disabled = index > -1 ? true : false + if (obj.disabled) { + } + obj.in = index > -1 ? checked_product[index].in : false + arr.push(obj) + return obj + }) + + this.setState({ productOption: arr }) + console.log('this.state.model.product_id =>', this.state.model.product_id) + 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 }) + + console.log('cur_product ==>2', cur_product) + console.log('arr ==>', arr) + + if (cur_product && cur_product.in) { + this.setState({ isSelectGoods: true }) + } + } + } + + async submit() { + if (this.refs.form1.validator()) { + if (this.props.data) { + let temp = [] + if (sessionStorage.getItem('productData')) { + temp = JSON.parse(sessionStorage.getItem('productData')) + + let index = temp.findIndex((item) => { + return item.product_id == this.props.data.product_id + }) + + temp[index].product_name = this.state.model.product_name + temp[index].weight = this.state.model.weight + 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 + let urls = _.map(this.state.productpic, (o) => { + return o.src + }) + if (urls.length <= 0) { + Notify.error(`商品图至少请上传一张`) + return + } + + 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 + + sessionStorage.setItem('productData', JSON.stringify(temp)) + } + } else { + let model = this.state.model + + let urls = _.map(this.state.productpic, (o) => { + return o.src + }) + + if (urls.length <= 0) { + Notify.error(`商品图至少请上传一张`) + return + } + + model.describe_url = urls + + this.setState({ model: model }) + + if (this.state.model.show_url == '') { + Notify.error(`请上传商品Logo`) + return + } + let temp = [] + if (sessionStorage.getItem('productData')) { + temp = JSON.parse(sessionStorage.getItem('productData')) + } + let data = temp ? temp : [] + 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 + }) + let picItem = window.goods.find((item) => { + return item.id == cur_product.product_category_id + }) + const obj1 = [] + if(picItem.describe_url){ + let id_name = `${new Date().getTime()}`; + picItem?.describe_url.map((item) => { + obj1.push({ src: item, url: item, id: `${id_name}`, type:"add", name:`${picItem.name}`}) + }) + } + console.log(" picItem =>", picItem); + + let quantity = this.state.model.quantity + let model2 = { + product_id: cur_product.id, + product_type: cur_product.type, + contract_price: this.state.model.contract_price, + official_price: cur_product.official_price, + cost_price: cur_product.cost_price, + quantity: quantity, + stock: quantity, + usage: 0, + weight: this.state.model.weight, + product_name: cur_product.title, + show_url: picItem ? picItem.pic : '', + describe_url: obj1, + detail_url: '', + map_product_name: cur_product.title, + account_type: cur_product.account_type + } + console.log('model2 =>111', model2) + this.setState({ model: model2, productpic: obj1 }) + } + onTypeChange(e) { + let model2 = this.state.model + model2.type = e.target.value + this.setState({ model: model2 }) + } + + onUpload = (file, report) => { + return new Promise((resolve, reject) => {}) + } + onUploadChange(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.show_url = path + + this.setState({ model: model }) + }, + (err) => {} + ) + }) + } else { + let model = this.state.model + model.show_url = '' + this.setState({ model: model }) + } + } + onUploadChange1(fileLists, detail) { + console.log('files ==>', fileLists) + console.log("detail =>", detail) + console.log("productpic ==>", this.state.productpic) + + if (mySwiper !== 0) { + mySwiper.destroy() + } + mySwiper = new Swiper('.swiper-container', { + observer: true, //修改swiper自己或子元素时,自动初始化swiper + observeParents: true, //修改swiper的父元素时,自动初始化swiper + pagination: '.swiper-pagination', + paginationClickable: true, + autoplay: 3000 + }) + clearTimeout(timer) + timer = setTimeout(() => { + if(!detail){ + return + } + // 第一步:判断是否是新增还是编辑 + if(detail.type === "add"){ + let formdata = new FormData() + formdata.append('file', detail.item.file) + formdata.append('path', 'common_image') + uploadImg(formdata).then((res) => { + handelResponse( + res, + (req, msg) => { + let file_s = fileLists.slice(0); + file_s[file_s.length -1].src = req.path; + console.log("file_s =>",file_s) + const model = this.state.model + model.describe_url = file_s; + + let arr = this.state.productpic + arr = file_s; + + this.setState({ productpic: arr, model }) + }, + (err) => {} + ) + }) + }else{ + // 删除 + let new_files_list = fileLists.filter((item) => item.id !== detail.item.id); + new_files_list = new_files_list.map(item =>{ + return { + ...item, + url:item.src + } + }) + + const model = this.state.model + model.describe_url = new_files_list; + this.setState({ productpic:new_files_list, model }) + + console.log("new_files_list =>", new_files_list); + } + + }, 500) + } + onUploadError = (type, data) => { + if (type === 'overMaxAmount') { + Notify.error(`最多可上传 ${data.maxAmount} 张图片`) + } else if (type === 'overMaxSize') { + Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`) + } + } + 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() { + //校验规则 + const rules = { + product: [{ type: 'required', message: '请选择映射商品' }], + quantity: [ + { type: 'required', message: '请输入商品库存' }, + { + type: 'regExp', + message: '请输入小于100万的整数', + reg: '^(?!0)(?:[0-9]{1,6}|1000000)$' + } + ], + contract_price: [ + { type: 'required', message: '请输入合同价' }, + { + type: 'regExp', + message: '最多保留4位小数', + reg: '^[0-9]+(.[0-9]{1,4})?$' + } + ], + product_name: [{ type: 'required', message: '请输入商品名称' }], + /* 权重 */ + weight: [ + { type: 'required', message: '请输入权重' }, + { + type: 'regExp', + message: '请输入0~100权重数字', + reg: '^([0-9]{0,2}|100)$' + } + ] + } + return ( +