Skip to content

J
jinfa-platform
Commit bc821a87 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix: 新增商品图片描述添加厂商商品资质图片

parent f27d1bee
Hide whitespace changes
Inline Side-by-side
Showing with 460 additions and 6 deletions
src/pages/commodity/products/addProducts.tsx
View file @ bc821a87
......@@ -14,6 +14,7 @@ import OtherForm from './addProductsItem/otherForm'
import ProductImageForm from './addProductsItem/productImageForm'
import ProductDescFormDefualt from './addProductsItem/productDescFormDefault'
import ProductDescFormCloud from './addProductsItem/productDescFormCloud'
import ProductDescFormYang from './addProductsItem/productDescFormYang'
import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
......@@ -139,9 +140,10 @@ const AddProducts: React.FC<{}> = (props) => {
// 切换模板
const renderTemplate = () => {
// if(currentTemplateName === 'science')
return <ProductDescFormDefualt />
// return <ProductDescFormDefualt />
// else if(currentTemplateName === 'cloud')
// return <ProductDescFormCloud />
return <ProductDescFormYang />
}
const onSave = () => {
......
src/pages/commodity/products/addProductsItem/productAttributeForm.tsx
View file @ bc821a87
......@@ -25,6 +25,8 @@ const { RangePicker } = DatePicker
let paramsArray = [];
const isEdit = history.location.query?.id
const ProductAttributeForm: React.FC<Iprops> = (props) => {
const { attributesData, onRef } = props
const [isClearFormAndDataInEdit, setIsClearFormAndDataInEdit] = useState<boolean>(false) // 编辑情况下 是否要清空商品属性表单数据和页面全局数据
......@@ -43,7 +45,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
useEffect(()=>{
onRef(productAttributeFormRef)
// 编辑情况下 构建选中属性数据 给paramsArray初始化数据用于编辑 设置表单数据
if(history.location.query?.id){
if(isEdit){
constructProductSelectAttribute()
attributeForm.setFieldsValue(getProductAttributeFormParamsByEdit)
}
......@@ -51,7 +53,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
useEffect(() => {
// 属性变动 表明品类品牌变动 清空页面全局参数组合和store的选中属性 重置表单 (只对新增有效)
if(history.location.query?.id){
if(isEdit){
// 编辑第一次执行不清空，之后的变动需要清空
if(isClearFormAndDataInEdit){
paramsArray = []
......@@ -148,7 +150,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
let _isPrice = null
let _isUpdateAttribute = null
let _isDisabled = false
if(history.location.query?.id){
if(isEdit){
_isPrice = attrItem.isPrice
_isUpdateAttribute = productInfoByEdit.isUpdateAttribute
_isDisabled = _isPrice && !_isUpdateAttribute
......@@ -156,7 +158,6 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
if(!_isUpdateAttribute && (attrItem.createTime > productInfoByEdit.createTime)) {
return null
}
console.log(attrItem, attributesData, productInfoByEdit, 'data')
}
return (
......@@ -267,7 +268,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
<Tabs defaultActiveKey="1" tabPosition="left">
{
attributesData?.length > 0 && attributesData.map(attributeItem =>
!productInfoByEdit.isUpdateAttribute && (attributeItem.createTime > productInfoByEdit.createTime) ? null : <TabPane tab={attributeItem.name} key={attributeItem.id}>
isEdit && !productInfoByEdit.isUpdateAttribute && (attributeItem.createTime > productInfoByEdit.createTime) ? null : <TabPane tab={attributeItem.name} key={attributeItem.id}>
{
renderTabPanchildren(attributeItem)
}
......
src/pages/commodity/products/addProductsItem/productDescFormYang.tsx 0 → 100644
View file @ bc821a87
import React, { useState, useEffect, useRef, useCallback } from 'react'
import {history} from 'umi'
import { Button, message, Upload, Spin } from 'antd'
import cx from 'classnames'
import styles from '../index.less'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import { UPLOAD_TYPE } from '@/constants'
import { observer } from 'mobx-react'
import { store } from '@/store'
import { getAuth } from '@/utils/auth'
import ModalForm from '@/components/ModalForm'
import { createFormActions } from '@formily/antd'
import { useHttpRequest } from '@/hooks/useHttpRequest'
import { PublicApi } from '@/services/api'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import DragSortImageList from '../components/dragSortImageList'
import update from 'immutability-helper';
import { CommodityImagesType } from '../constant'
const schemaActions = createFormActions()
const imagesTypeKeyValue = ['', 'descriptionImages', 'certificationImages', 'reportImages']
const ProductDescFormDefualt: React.FC<{}> = () => {
const [fileImageList, setFileImageList] = useState<any>({
descriptionImages: [], // 商品描述
certificationImages: [], // 厂商资质
reportImages: [] // 报告
})
const [videoList, setVideoList] = useState<any>([])
const flagRef = useRef<boolean>(false)
const currentRef = useRef<any>({})
const [isLoading, setIsLoading] = useState<boolean>(false) // 上传的加载状态
const { token } = getAuth() || {}
const { ProductStore } = store
const { productInfoByEdit, setProductDescription, selectCategoryId } = ProductStore
const { run, loading } = useHttpRequest(PublicApi.postContractContractSignSaleSignContractCreate, {ctlType: 'none'})
useEffect(()=>{
if(history.location.query?.id){ // 编辑状态下
setFileImageList(() => {
const images = productInfoByEdit.commodityRemark?.imageList
return {
descriptionImages: images.filter(item => item.imageType === CommodityImagesType.DESCRIPTION_IMAGES),
certificationImages: images.filter(item => item.imageType === CommodityImagesType.CERTIFICATION_IMAGES),
reportImages: images.filter(item => item.imageType === CommodityImagesType.REPORT_IMAGES)
}
})
setVideoList(productInfoByEdit.commodityRemark?.video)
setProductDescription({
video: productInfoByEdit.commodityRemark?.video,
imageList: productInfoByEdit.commodityRemark?.imageList,
word: productInfoByEdit.commodityRemark?.word
})
}
}, [])
useEffect(() => {
// 品类 变动清空数据
// 编辑下 flag为false 不清空；编辑下 flag为true 新建清空
if(history.location.query?.id && !flagRef.current) {
flagRef.current = true
} else {
setFileImageList({
descriptionImages: [],
certificationImages: [],
reportImages: []
})
setVideoList([])
}
}, [selectCategoryId])
useEffect(() => {
console.log(fileImageList, 'fileImageList')
// 设置传输数据
setProductDescription({
video: videoList,
// @ts-ignore
imageList: Object.values(fileImageList).reduce((x, y) => x.concat(y), []),
word: []
})
}, [fileImageList, videoList])
/** 拖拽后 改变数据位置 */
const changePosition = useCallback((dragIndex: number, hoverIndex: number, imagesType: number) => {
const sourceImages = fileImageList[imagesTypeKeyValue[imagesType]]
const dragImage = sourceImages[dragIndex]
const tempObject = {}
tempObject[imagesTypeKeyValue[imagesType]] = update(sourceImages, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragImage],
],
})
setFileImageList(() => ({
...fileImageList,
...tempObject
}))
// setFileImageList(
// update(fileImageList, {
// $splice: [
// [dragIndex, 1],
// [hoverIndex, 0, dragImage],
// ],
// }),
// )
}, [fileImageList])
const commonImgProps = {
name: 'file',
action: '/api/file/file/upload',
showUploadList: false,
headers: { token },
data: { fileType: UPLOAD_TYPE },
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/gif';
if (!isJpgOrPng) {
message.error('仅支持jpeg/jpg/png/gif格式的图片文件!');
}
// const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isLt2M) {
// message.error('Image must smaller than 2MB!');
// }
return isJpgOrPng;
},
}
const uploadDescriptionImgProps = {
...commonImgProps,
onChange(info) {
setIsLoading(true)
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
const files = fileImageList[imagesTypeKeyValue[CommodityImagesType.DESCRIPTION_IMAGES]]
const tempObject = {}
tempObject[imagesTypeKeyValue[CommodityImagesType.DESCRIPTION_IMAGES]] = []
if(Array.isArray(files)){
tempObject[imagesTypeKeyValue[CommodityImagesType.DESCRIPTION_IMAGES]] = [...files, { url: info.file.response.data, linkType: 1, imageType: CommodityImagesType.DESCRIPTION_IMAGES, link: null }]
}else{
tempObject[imagesTypeKeyValue[CommodityImagesType.DESCRIPTION_IMAGES]] = [{url: info.file.response.data, linkType: 1, imageType: CommodityImagesType.DESCRIPTION_IMAGES, link: null}]
}
setFileImageList({
...fileImageList,
...tempObject
})
setIsLoading(false)
} else if (info.file.status === 'error') {
setIsLoading(false)
message.error(`${info.file.name} 文件上传失败`);
} else if(!info.file.status) {
setIsLoading(false)
}
},
}
const uploadCertificationImgProps = {
...commonImgProps,
onChange(info) {
setIsLoading(true)
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
const files = fileImageList[imagesTypeKeyValue[CommodityImagesType.CERTIFICATION_IMAGES]]
const tempObject = {}
tempObject[imagesTypeKeyValue[CommodityImagesType.CERTIFICATION_IMAGES]] = []
if(Array.isArray(files)){
tempObject[imagesTypeKeyValue[CommodityImagesType.CERTIFICATION_IMAGES]] = [...files, { url: info.file.response.data, linkType: 1, imageType: CommodityImagesType.CERTIFICATION_IMAGES, link: null }]
}else{
tempObject[imagesTypeKeyValue[CommodityImagesType.CERTIFICATION_IMAGES]] = [{url: info.file.response.data, linkType: 1, imageType: CommodityImagesType.CERTIFICATION_IMAGES, link: null}]
}
setFileImageList({
...fileImageList,
...tempObject
})
setIsLoading(false)
} else if (info.file.status === 'error') {
setIsLoading(false)
message.error(`${info.file.name} 文件上传失败`);
} else if(!info.file.status) {
setIsLoading(false)
}
},
}
const uploadReportImgProps = {
...commonImgProps,
onChange(info) {
setIsLoading(true)
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
const files = fileImageList[imagesTypeKeyValue[CommodityImagesType.REPORT_IMAGES]]
const tempObject = {}
tempObject[imagesTypeKeyValue[CommodityImagesType.REPORT_IMAGES]] = []
if(Array.isArray(files)){
tempObject[imagesTypeKeyValue[CommodityImagesType.REPORT_IMAGES]] = [...files, { url: info.file.response.data, linkType: 1, imageType: CommodityImagesType.REPORT_IMAGES, link: null }]
}else{
tempObject[imagesTypeKeyValue[CommodityImagesType.REPORT_IMAGES]] = [{url: info.file.response.data, linkType: 1, imageType: CommodityImagesType.REPORT_IMAGES, link: null}]
}
setFileImageList({
...fileImageList,
...tempObject
})
setIsLoading(false)
} else if (info.file.status === 'error') {
setIsLoading(false)
message.error(`${info.file.name} 文件上传失败`);
} else if(!info.file.status) {
setIsLoading(false)
}
},
}
const uploadVideoProps = {
name: 'file',
action: '/api/file/file/upload',
showUploadList: false,
headers: { token },
data: { fileType: UPLOAD_TYPE },
beforeUpload(file) {
const isVideo = file.type === 'video/mp4';
if (!isVideo) {
message.error('请上传mp4格式的视频文件!');
}
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isLt10M) {
message.error('请上传小于10M的视频文件!');
}
return isVideo && isLt10M;
},
onChange(info) {
setIsLoading(true)
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
if(Array.isArray(videoList)){
setVideoList([...videoList, info.file.response.data])
}else{
setVideoList([info.file.response.data])
}
setIsLoading(false)
} else if (info.file.status === 'error') {
setIsLoading(false)
message.error(`${info.file.name} 文件上传失败`);
} else if(!info.file.status) {
setIsLoading(false)
}
},
}
const handleDeleteVideo = (_index: number) => {
setVideoList([])
}
const handleDeleteImage = (_index: number, imagesType: number) => {
let imageArr = [...fileImageList[imagesTypeKeyValue[imagesType]]]
imageArr.splice(_index, 1)
const tempObject = {}
tempObject[imagesTypeKeyValue[imagesType]] = [...imageArr]
setFileImageList(()=>({
...fileImageList,
...tempObject
}))
}
const handleAddHyperlink = (idx: number, imagesType: number) => {
currentRef.current.setVisible(true)
schemaActions.setFieldValue('idx', idx)
schemaActions.setFieldValue('imagesType', imagesType)
schemaActions.setFieldValue('hyperlink', fileImageList[imagesTypeKeyValue[imagesType]][idx]?.link)
}
const handleConfirm = () => {
schemaActions.submit()
}
const handleSubmit = async (value) => {
console.log(value)
const { idx, hyperlink, imagesType } = value
let list = [...fileImageList[imagesTypeKeyValue[imagesType]]]
list[idx]['link'] = hyperlink
const tempObject = {}
tempObject[imagesTypeKeyValue[imagesType]] = [...list]
setFileImageList(() => ({
...fileImageList,
...tempObject
}))
currentRef.current.setVisible(false)
}
return (<div>
<Spin spinning={isLoading}>
{
videoList?.length>0
?
videoList.map((item, index) => <div key={index} className={cx(styles.descriptBox, styles.mediaContentBox)}>
<div className={styles.divVideo}>
<video src={item} controls={true} width={320} height={240}>
您的浏览器不支持视频标签，请及时升级。
</video>
</div>
<div className={styles.rightBtn}>
<Upload {...uploadVideoProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
</Upload>
<Button size="small" onClick={()=>handleDeleteVideo(index)} icon={<DeleteOutlined />} />
</div>
</div> )
:
<div className={styles.descriptBox}>
<p className={styles.pVideo}>视频区域<br />（数量限一个）</p>
<div className={styles.rightBtn}>
<Upload {...uploadVideoProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
</Upload>
<Button size="small" icon={<DeleteOutlined />} />
</div>
</div>
}
{/* 描述图片拖拽排序 */}
<DndProvider backend={HTML5Backend}>
<DragSortImageList
imageList={fileImageList['descriptionImages']}
handleDelete={(idx) => handleDeleteImage(idx, CommodityImagesType.DESCRIPTION_IMAGES)}
handleAddlink={(idx) => handleAddHyperlink(idx, CommodityImagesType.DESCRIPTION_IMAGES)}
changePosition={(dIdx, hIdx) => changePosition(dIdx, hIdx, CommodityImagesType.DESCRIPTION_IMAGES)}
/>
</DndProvider>
<div className={styles.descriptBox}>
<div className={styles.middleAddBtn}>
<Upload {...uploadDescriptionImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<br/>
<span>添加描述图片</span>
</Upload>
</div>
</div>
{/* 厂商资质图片 */}
<DndProvider backend={HTML5Backend}>
<DragSortImageList
imageList={fileImageList['certificationImages']}
handleDelete={(idx) => handleDeleteImage(idx, CommodityImagesType.CERTIFICATION_IMAGES)}
handleAddlink={(idx) => handleAddHyperlink(idx, CommodityImagesType.CERTIFICATION_IMAGES)}
changePosition={(dIdx, hIdx) => changePosition(dIdx, hIdx, CommodityImagesType.CERTIFICATION_IMAGES)}
/>
</DndProvider>
<div className={styles.descriptBox}>
<div className={styles.middleAddBtn}>
<Upload {...uploadCertificationImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<br/>
<span>添加厂商资质图片</span>
</Upload>
</div>
</div>
{/* 商品检测报告图片 */}
<DndProvider backend={HTML5Backend}>
<DragSortImageList
imageList={fileImageList['reportImages']}
handleDelete={(idx) => handleDeleteImage(idx, CommodityImagesType.REPORT_IMAGES)}
handleAddlink={(idx) => handleAddHyperlink(idx, CommodityImagesType.REPORT_IMAGES)}
changePosition={(dIdx, hIdx) => changePosition(dIdx, hIdx, CommodityImagesType.REPORT_IMAGES)}
/>
</DndProvider>
<div className={styles.descriptBox}>
<div className={styles.middleAddBtn}>
<Upload {...uploadReportImgProps}>
<Button size="small" type="text">
<PlusOutlined />
</Button>
<br/>
<span>添加商品检测报告图片</span>
</Upload>
</div>
</div>
</Spin>
{/* 添加链接模态框 */}
<ModalForm
modalTitle='添加链接'
previewPlaceholder=''
currentRef={currentRef}
schema={{
type: 'object',
properties: {
NO_SUBMIT: {
type: 'object',
"x-component": "mega-layout",
"x-component-props": {
labelAlign: 'left',
labelCol: 6,
},
properties: {
"hyperlink": {
type: "string",
title: "跳转链接",
},
"idx": {
type: "number",
title: "当前索引",
visible: false,
},
"imagesType": {
type: "number",
title: "图片类型",
visible: false,
}
}
}
}
}}
actions={schemaActions}
onSubmit={handleSubmit}
confirm={handleConfirm}
modalProps={{
confirmLoading: loading
}}
effects={($, actions) => {
$('onFormInit').subscribe(async () => {
})
}}
/>
</div>)
}
export default observer(ProductDescFormDefualt)
src/pages/commodity/products/constant/index.tsx
View file @ bc821a87
......@@ -75,6 +75,16 @@ export enum CommodityType {
AGENT_SALE_COMMODITY = 3,
}
/** 商品描述图片类型枚举 */
export enum CommodityImagesType {
/** 描述图片 */
DESCRIPTION_IMAGES = 1,
/** 厂商资质图片 */
CERTIFICATION_IMAGES = 2,
/** 商品检测报告 */
REPORT_IMAGES = 3,
}
/** 商品的操作文本 */
export const opeartionLabel = [
'',
......
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