12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- import React, { useEffect, useState } from 'react';
- import { Upload, Button, Space } from 'antd';
- import ImgCrop from 'antd-img-crop';
- import { connect } from 'react-redux';
- import { backURL } from '../api';
- import { actionUploadImg, actionGoodById , actionChangeArrInGood, actionImgClear } from '../action';
- import { Link } from 'react-router-dom';
- const Additional = ({imgs, upload, _id, goodById, good, saveImg, imgClear}) => {
- const [fileList, setFileList] = useState([]);
- //const [selectGood, setSelectGood] = useState(good);
-
- useEffect(() => {
- goodById(_id);
-
- }, [_id])
- console.log('gooood', good);
- const onChange = ({ fileList: newFileList }) => {
- setFileList(newFileList); console.log('newFileList', newFileList)
- };
- const onPreview = async file => {
- let src = file.url; console.log('file', file)
- if (!src) {
- src = await new Promise(resolve => {
- const reader = new FileReader();
- reader.readAsDataURL(file.originFileObj);
- reader.onload = () => resolve(reader.result);
- });
- }
- const image = new Image();
- image.src = src;
- const imgWindow = window.open(src);
- imgWindow.document.write(image.outerHTML);
- };
- const onChangeArrImg = () => {
-
- const newArrImg = [... good.images].map((item) => ({"_id": item._id}));
- for (let i = 0; i < Object.keys(imgs).length; i++) {
- const newImgId = imgs[`${i}`].payload._id;
-
- newArrImg.push({"_id":newImgId});
- saveImg(good._id, newArrImg);
- }
- }
- const onSave = async () => {
- const newF = [...fileList].map((item) => [item.originFileObj]);
- const newFF = await newF.map((item, index) => [upload(item, index)]);
- // await onChangeArrImg();
- setFileList([]);
- // imgClear();
-
- }
- return (
- <div>
- <ImgCrop rotate>
- <Upload
- action=""
- listType="picture-card"
- fileList={fileList}
- onChange={onChange}
- onPreview={onPreview}
- >
- {fileList.length < 4 && '+ Добавить фото'}
- </Upload>
- </ImgCrop>
-
- <Space direction="vertical">
- <Button type="primary" onClick={onSave}>Закачать</Button>
- <Button type="primary" onClick={() => {onChangeArrImg(); imgClear()}}>Сохранить</Button>
- <Link to={`/goodAdmin/${_id}`}>
- <Button type="primary" >Просмотреть карточку товара</Button>
- </Link>
- </Space>
-
- </div>
- );
- };
- const mapStateToProps = (state) => ({
- imgs: state.img || [],
- good: state.promise.goodById?.payload || {},
- })
- const mapDispatchToProps = {
- upload: actionUploadImg,
- goodById: actionGoodById,
- saveImg: actionChangeArrInGood,
- imgClear: actionImgClear,
- }
- const AdditionalImages = connect(mapStateToProps, mapDispatchToProps)(Additional);
- export default AdditionalImages;
|