Commit a5835643 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

fix:商品图片可每张替换,商品描述上传显示加载中

parent 64c7300a
import React, { useState, useEffect, useRef } from 'react'
import {history} from 'umi'
import { Button, message, Upload } from 'antd'
import { Button, message, Upload, Spin } from 'antd'
import cx from 'classnames'
import styles from '../index.less'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
......@@ -13,6 +13,7 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
const [fileImageList, setFileImageList] = useState<any>([])
const [videoList, setVideoList] = useState<any>([])
const flagRef = useRef<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(false) // 上传的加载状态
const { ProductStore } = store
const { productInfoByEdit, setProductDescription, selectCategoryId } = ProductStore
......@@ -56,27 +57,17 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
showUploadList: false,
data: { fileType: UPLOAD_TYPE },
onChange(info) {
setIsLoading(true)
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
// console.log(info.file.response)
if(Array.isArray(fileImageList)){
setFileImageList([...fileImageList, info.file.response.data])
// 设置传输数据
// setProductDescription({
// video: videoList,
// image: [...fileImageList, info.file.response.data],
// word: []
// })
}else{
setFileImageList([info.file.response.data])
// 设置传输数据
// setProductDescription({
// video: videoList,
// image: [info.file.response.data],
// word: []
// })
}
setIsLoading(false)
} else if (info.file.status === 'error') {
setIsLoading(false)
message.error(`${info.file.name} 文件上传失败`);
}
},
......@@ -96,44 +87,34 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
// return isVideo
// },
onChange(info) {
setIsLoading(true)
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
if(Array.isArray(videoList)){
setVideoList([...videoList, info.file.response.data])
// 设置传输数据
// setProductDescription({
// video: [...videoList],
// image: fileImageList,
// word: []
// })
}else{
setVideoList([info.file.response.data])
// 设置传输数据
// setProductDescription({
// video: [info.file.response.data],
// image: fileImageList,
// word: []
// })
}
setIsLoading(false)
} else if (info.file.status === 'error') {
setIsLoading(false)
message.error(`${info.file.name} 文件上传失败`);
}
},
}
const handleDeleteVideo = (_index: number) => {
// console.log(_index, '删除的视频索引')
setVideoList([])
}
const handleDeleteImage = (_index: number) => {
// console.log(_index, '删除的图片索引')
let imageArr = [...fileImageList]
imageArr.splice(_index, 1)
setFileImageList(imageArr)
}
return (<>
return (<div>
<Spin spinning={isLoading}>
{
videoList?.length>0
?
......@@ -195,7 +176,8 @@ const ProductDescFormDefualt: React.FC<{}> = (props) => {
</Upload>
</div>
</div>
</>)
</Spin>
</div>)
}
export default observer(ProductDescFormDefualt)
\ No newline at end of file
import React, { useState, useEffect, useRef } from 'react'
import {history} from 'umi'
import { message, Modal, Row, Col, Alert, Upload, Radio } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { message, Modal, Row, Col, Alert, Upload, Radio, Button } from 'antd'
import { EditOutlined, PlusOutlined } from '@ant-design/icons'
import styles from './index.less'
import { UploadFile } from 'antd/lib/upload/interface';
import { UPLOAD_TYPE } from '@/constants'
......@@ -19,8 +19,14 @@ const ProductImageForm: React.FC<{}> = (props) => {
const [previewImage, setPreviewImage] = useState('')
const [previewTitle, setPreviewTitle] = useState('')
const [setImageType, setSetImageType] = useState<boolean>(true)
const [openFileDialogFlag, setOpenFileDialogFlag] = useState<boolean>(false)
const flagRef = useRef<boolean>(false)
// 选中的图片
const uploadFileSelectRef = useRef<any>({})
const editRowIndexRef = useRef<number>(0)
const { ProductStore } = store
const { priceAttributeParams, productInfoByEdit, setProductAttributeAndImageParams, setIsAllAttributePic, selectCategoryId } = ProductStore
......@@ -72,7 +78,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
let _commodityPicItem = Array.isArray(_pic) ? _pic.map((__ele, __i) => {
return {
uid: __i * -1,
uid: (__i+1) * -1,
status: 'done',
url: __ele,
}
......@@ -166,14 +172,27 @@ const ProductImageForm: React.FC<{}> = (props) => {
const handleChange = ({ file, fileList }, index) => {
let _priceAttributeParams = [...priceAttributeParamsByRender]
// console.log(fileList, file?.response?.data, '响应')
// console.log(fileList, file, index, editRowIndexRef, '响应')
// console.log(uploadFileSelectRef.current)
const selectUuid = uploadFileSelectRef.current.uid
if (selectUuid) {
// 点了图片编辑
const editPicIndex = fileList.findIndex(v => v.uid === selectUuid)
// console.log(editPicIndex)
fileList.splice(editPicIndex, 1, file)
if (fileList.length > 1) {
fileList.pop()
}
uploadFileSelectRef.current = {}
}
setCommonImageList(fileList)
// if(file?.response?.data){ // 服务端是否响应正常url字符
_priceAttributeParams[index].commodityPic = fileList
// }
// console.log(index||editRowIndexRef.current, fileList, '132456')
_priceAttributeParams[index||editRowIndexRef.current].commodityPic = fileList
if(!file?.status && file?.status !== 'done'){
let ttt = _priceAttributeParams[index].commodityPic.filter(_ => _.status === 'done')
_priceAttributeParams[index].commodityPic = ttt
let ttt = _priceAttributeParams[index||editRowIndexRef.current].commodityPic.filter(_ => _.status === 'done')
_priceAttributeParams[index||editRowIndexRef.current].commodityPic = ttt
setCommonImageList(ttt)
}
setPriceAttributeParamsByRender(_priceAttributeParams)
......@@ -194,6 +213,15 @@ const ProductImageForm: React.FC<{}> = (props) => {
setCommonImageList([])
}
const handlefileEdit = (file, index) => {
// console.log(file, index)
const uploadEle = document.querySelector(`#uploadEle${index}`) as any
uploadFileSelectRef.current = (file)
editRowIndexRef.current = index
// 触发图片上传
uploadEle.click()
}
return (<div>
<div style={{marginBottom:15}}>设置方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Radio.Group onChange={onChangeSetImageType} value={setImageType}>
......@@ -227,6 +255,7 @@ const ProductImageForm: React.FC<{}> = (props) => {
}
</ul>
</Col>
{/* 按属性设置---所有属性共用 */}
<Col span={20} style={{ padding: 24 }}>
{
!setImageType ?
......@@ -236,12 +265,15 @@ const ProductImageForm: React.FC<{}> = (props) => {
<div className="clearfix">
<Upload
name="file"
id={`uploadEle${index}`}
action="/api/file/file/upload"
listType="picture-card"
fileList={item.commodityPic}
beforeUpload={beforeUpload}
onPreview={handlePreview}
onChange={(files)=>handleChange(files, index)}
onDownload={(file)=>handlefileEdit(file, index)}
showUploadList={{showDownloadIcon: true, downloadIcon: <EditOutlined style={{color: '#fff'}} />}}
data={{fileType: UPLOAD_TYPE}}
>
{item.commodityPic.length >= 6 ? null : uploadButton}
......@@ -265,11 +297,14 @@ const ProductImageForm: React.FC<{}> = (props) => {
<Upload
name="file"
action="/api/file/file/upload"
id='uploadEle0'
listType="picture-card"
fileList={commonImageList}
beforeUpload={beforeUpload}
onPreview={handlePreview}
onChange={(files)=>handleChange(files, 0)} //-1
onDownload={(file)=>handlefileEdit(file, 0)}
showUploadList={{showDownloadIcon: true, downloadIcon: <EditOutlined style={{color: '#fff'}} />}}
data={{fileType: UPLOAD_TYPE}}
>
{commonImageList.length >= 6 ? null : uploadButton}
......
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