fix: 商品编辑图片乱序

src/pages/commodity/products/addProductsItem/logisticsForm.tsx

@@ -23,7 +23,6 @@ const { Option } = Select
 
 const LogisticsForm: React.FC<Iprops> = (props) => { 
   const { onRef } = props
-
   const logisticsFormRef = useRef()
   const [logisticsForm] = Form.useForm()
   const [logisticsCompanyLists, setLogisticsCompanyLists] = useState<GetLogisticsSelectListCompanyResponse>()
@@ -32,14 +31,20 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
   const [isTemplate, setIsTemplate] = useState<boolean>(false)
   const [deliveryType, setDeliveryType] = useState<number>(1)
   const [carriageType, setCarriageType] = useState<number>()
-  const { productInfoByEdit } = ProductStore
+  const flagRef = useRef<boolean>(false)
+
+  const { productInfoByEdit, selectCategoryId } = ProductStore
 
   useEffect(()=>{
     //传入ref给父级
     onRef(logisticsFormRef)
 
-    if(history.location.query?.id)
+    if(history.location.query?.id){
       setDeliveryType(productInfoByEdit.logistics?.deliveryType)
+      logisticsForm.setFieldsValue(productInfoByEdit.logistics)
+    }else{
+      logisticsForm.setFieldsValue({deliveryType:1, carriageType:1})
+    }
 
     // 获取发货地址 物流公司 运费模板
     PublicApi.getLogisticsSelectListShipperAddress().then(res=>{
@@ -56,6 +61,16 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
 
   }, [])
 
+  useEffect(() => {
+    // 品类 变动清空form
+    if(history.location.query?.id && !flagRef.current) {
+      flagRef.current = true 
+    } else {
+      logisticsForm.resetFields()
+      logisticsForm.setFieldsValue({deliveryType:1, carriageType:1})
+    }
+  }, [selectCategoryId])
+
   const changeDeliveryType = (e) => {
     setDeliveryType(e.target.value)
     setCarriageType(1)
@@ -77,7 +92,7 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
       labelAlign="left"
       ref={logisticsFormRef}
       colon={false}
-      initialValues={history.location.query?.id ? productInfoByEdit.logistics : {deliveryType:1, carriageType:1}}
+      // initialValues={history.location.query?.id ? productInfoByEdit.logistics : {deliveryType:1, carriageType:1}}
       autoComplete="off"
     >
       <Form.Item

src/pages/commodity/products/addProductsItem/otherForm.tsx

@@ -24,14 +24,27 @@ const { TextArea } = Input
 const OtherForm: React.FC<Iprops> = (props) => { 
   const { onRef } = props
   const otherFormRef = useRef()
+  const flagRef = useRef<boolean>(false)
   const [otherForm] = Form.useForm()
-  const { getOtherFormParamsByEdit } = ProductStore
+  const { getOtherFormParamsByEdit, selectCategoryId } = ProductStore
 
   useEffect(()=>{
     //传入ref给父级
     onRef(otherFormRef)
+
+    if(history.location.query?.id)
+      otherForm.setFieldsValue(getOtherFormParamsByEdit)
   }, [])
 
+  useEffect(() => {
+    // 品类 变动清空form
+    if(history.location.query?.id && !flagRef.current) {
+      flagRef.current = true 
+    } else {
+      otherForm.resetFields()
+    }
+  }, [selectCategoryId])
+
   return (<>
     <Form
       {...layout}
@@ -41,7 +54,6 @@ const OtherForm: React.FC<Iprops> = (props) => {
       ref={otherFormRef}
       colon={false}
       autoComplete="off"
-      initialValues={history.location.query?.id ? getOtherFormParamsByEdit : {}}
     >
       <Form.Item
         name="isInvoice"

src/pages/commodity/products/addProductsItem/priceAttributeForm.tsx

@@ -43,8 +43,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
   const updateFlag = useRef(true) // 是否第一次构建
   const [priceForm] = Form.useForm()
   const [setPriceForm] = Form.useForm()
-  const [planPrice, setPlanPrice] = useState(1) //商品定价类型 ref替代
-  // const priceTypeRef = useRef<number>(1)
+  const [planPrice, setPlanPrice] = useState(1)
   const [unitData, setUnitData] = useState<any>([])
   const [unitValue, setUnitValue] = useState(undefined)
   const [setPriceModal, setSetPriceModal] = useState(false)
@@ -56,6 +55,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
   const [attributeValObjArr, setAttributeValObjArr] = useState<any[]>([])
   const [minOrderNumber, setMinOrderNumber] = useState<number>()
   const [isBatchSetting, setIsBatchSetting] = useState<boolean>(false) //是否点击批量设置
+  const flagRef = useRef<boolean>(false)
 
   const [colums, setColumns] = useState<ColumnType<any>[]>()
   const { ProductStore } = store
@@ -63,12 +63,14 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
     productName, 
     selectedGoods, 
     productSelectAttribute, 
+    setProductSelectAttribute, 
     tableDataSource, 
     setTableDataSource, 
     clearData, 
     setPriceAttributeParams, 
     productInfoByEdit, 
     getPriceAttributeFormParamsByEdit,
+    selectCategoryId,
   } = ProductStore
 
   _tableDataSource = useMemo(() => tableDataSource, [tableDataSource]) // 保持最新值
@@ -77,9 +79,9 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
     onRef(priceFormRef)
     if(history.location.query?.id){  // 编辑情况下 用于判断价格类型和显示单位
       setPlanPrice(productInfoByEdit?.priceType)
-      // priceTypeRef.current = productInfoByEdit?.priceType
       handleUnitSearch(getPriceAttributeFormParamsByEdit.unitName)
       setMinOrderNumber(productInfoByEdit?.minOrder)
+      priceForm.setFieldsValue(getPriceAttributeFormParamsByEdit)
     }
     return ()=>{
       console.log('价格属性组件卸载')
@@ -87,6 +89,17 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
     }
   },[])
 
+  useEffect(() => {
+    // 品类 变动清空form和属性组合
+    if(history.location.query?.id && !flagRef.current) {
+      flagRef.current = true 
+    } else {
+      setProductSelectAttribute([])
+      priceForm.resetFields()
+      priceForm.setFieldsValue({isMemberPrice: false, priceType: planPrice})
+    }
+  }, [selectCategoryId])
+
   useEffect(()=>{
     constructedCallback()
     // console.log(productSelectAttribute, 'productSelectAttribute')
@@ -300,10 +313,10 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
     _tableDataSource = _tableData
     // 有前面tab变动引起的二次构建 需要清空价格数据
     if(updateFlag.current){
-      // *****bug编辑积分商品（非现货价格）会导致价格类型变动引发重复渲染*****
+      // ***** bug编辑积分商品（非现货价格）会导致价格类型变动引发重复渲染 *****
       updateFlag.current = false
     } else {
-      // ***** 编辑情况下且是积分商品 不做清空单价处理*****
+      // ***** 编辑情况下且是积分商品 不做清空单价处理 *****
       if(!(productInfoByEdit?.id && planPrice === 3))
         _tableDataSource.map(item => item['单价'] = {})
     }
@@ -552,7 +565,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
       labelAlign="left"
       ref={priceFormRef}
       colon={false}
-      initialValues={productInfoByEdit?.id ? getPriceAttributeFormParamsByEdit : {isMemberPrice: false, priceType: planPrice}}
+      // initialValues={productInfoByEdit?.id ? getPriceAttributeFormParamsByEdit : {isMemberPrice: false, priceType: planPrice}}
       autoComplete="off"
     >
       <Form.Item 

src/pages/commodity/products/addProductsItem/productAttributeForm.tsx

@@ -15,12 +15,6 @@ const layout = {
     span: 12,
   },
 }
-const tailLayout = {
-  wrapperCol: {
-    offset: 2,
-    span: 12,
-  },
-}
 
 export interface Iprops {
   attributesData: any[];
@@ -36,7 +30,6 @@ let paramsArray = [];
 
 const ProductAttributeForm: React.FC<Iprops> = (props) => { 
   const { attributesData, onRef } = props
-  const [attributeParamsArray, setAttributeParamsArray] = useState<any>([])
   const [isClearFormAndDataInEdit, setIsClearFormAndDataInEdit] = useState<boolean>(false) // 编辑情况下 是否要清空商品属性表单数据和页面全局数据
   const productAttributeFormRef = useRef()
   const [attributeForm] = Form.useForm()

src/pages/commodity/products/addProductsItem/productDescFormDefault.tsx

-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import {history} from 'umi'
 import { Button, message, Upload } from 'antd'
 import cx from 'classnames'
-import { Player } from 'video-react';
 import styles from '../index.less'
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
-// import { PublicApi } from '@/services/api'
 import { UPLOAD_TYPE } from '@/constants'
 
-export interface Iprops {
-  
-}
-
 import { inject, observer } from 'mobx-react'
 import { store } from '@/store'
 
-const ProductDescFormDefualt: React.FC<Iprops> = (props) => { 
+const ProductDescFormDefualt: React.FC<{}> = (props) => { 
   const [fileImageList, setFileImageList] = useState<any>([])
   const [videoList, setVideoList] = useState<any>([])
+  const flagRef = useRef<boolean>(false)
 
   const { ProductStore } = store
-  const { productInfoByEdit, setProductDescription } = ProductStore
+  const { productInfoByEdit, setProductDescription, selectCategoryId } = ProductStore
 
   useEffect(()=>{
     if(history.location.query?.id){ // 编辑状态下
@@ -35,6 +30,18 @@ const ProductDescFormDefualt: React.FC<Iprops> = (props) => {
   }, [])
 
   useEffect(() => {
+    // 品类 变动清空数据
+    // 编辑下 flag为false 不清空；编辑下 flag为true 新建清空
+    if(history.location.query?.id && !flagRef.current) {
+      flagRef.current = true 
+    } else {
+      setFileImageList([])
+      setVideoList([])
+    }
+  
+  }, [selectCategoryId])
+
+  useEffect(() => {
     // 设置传输数据
     setProductDescription({
       video: videoList,

src/pages/commodity/products/addProductsItem/productImageForm.tsx

-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import {history} from 'umi'
 import { Button, Form, Select, Checkbox, message, Input, Table, Modal, Row, Col, Alert, Upload, Radio } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
@@ -12,34 +12,44 @@ import { inject, observer } from 'mobx-react'
 // import { IStore } from '@/store';
 import { store } from '@/store'
 
-export interface Iprops {
-  
-}
-
-const layoutAdd = {
-  labelCol: { span: 4 },
-  wrapperCol: { span: 20 },
-}
-
-const ProductImageForm: React.FC<Iprops> = (props) => {
-  const [addTabsForm] = Form.useForm()
+const ProductImageForm: React.FC<{}> = (props) => {
   const [defaultChecked, setDefaultChecked] = useState(-1) 
-
   const [priceAttributeParamsByRender, setPriceAttributeParamsByRender] = useState<any[]>([])
   const [commonImageList, setCommonImageList] = useState<any>([])
   const [previewVisible, setPreviewVisible] = useState(false)
   const [previewImage, setPreviewImage] = useState('')
   const [previewTitle, setPreviewTitle] = useState('')
   const [setImageType, setSetImageType] = useState<boolean>(true)
+  const flagRef = useRef<boolean>(false)
 
   const { ProductStore } = store
-  const { priceAttributeParams, productInfoByEdit, setProductAttributeAndImageParams, setIsAllAttributePic } = ProductStore
+  const { priceAttributeParams, productInfoByEdit, setProductAttributeAndImageParams, setIsAllAttributePic, selectCategoryId } = ProductStore
+
+  useEffect(() => {
+    if(history.location.query?.id){
+      setSetImageType(productInfoByEdit.isAllAttributePic)
+    }
+  }, [])
+
+  useEffect(() => {
+    // 品类 变动清空数据
+    // 编辑下 flag为false 不清空；编辑下 flag为true 新建清空
+    if(history.location.query?.id && !flagRef.current) {
+      flagRef.current = true  
+      console.log('不清空')
+    } else {
+      // constructImageListByRender([])
+      // setSetImageType(true)
+      onChangeSetImageType({target: { value: true }})
+      console.log('清空')
+    }
+  }, [selectCategoryId])
 
   useEffect(()=>{
     if(priceAttributeParams.length > 0){
       console.log(priceAttributeParams, '对比')
       constructImageListByRender(priceAttributeParams)
-    }else if(history.location.query?.id){
+    }else if(history.location.query?.id){  // 不点击前面 直接进入图片tab
       console.log(productInfoByEdit.unitPriceAndPicList, '对比')
       constructImageListByRender(productInfoByEdit.unitPriceAndPicList)
     }
@@ -50,18 +60,28 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
   const constructImageListByRender = (priceAttributeParams?: any) => {
     let _priceAttributeParams: any = []
     if(productInfoByEdit?.id){ // id判断是否新增还是编辑
-      setSetImageType(productInfoByEdit.isAllAttributePic)
+      // setSetImageType(productInfoByEdit.isAllAttributePic)
       setIsAllAttributePic(productInfoByEdit.isAllAttributePic)
-      let _commodityPicList = productInfoByEdit.unitPriceAndPicList.map(_ => _.commodityPic)
+
       _priceAttributeParams = priceAttributeParams.map((_item, _index) => {
         // 为图片字符串数组手动添加 uid 和 status
-        let _commodityPicItem = Array.isArray(_commodityPicList[_index]) ? _commodityPicList[_index].map((__ele, __i) => {
+        // console.log(_item, '_____')
+        // 查询编辑详情中属性值id相匹配的图片
+        let _pic = null
+        let _priceAndPicList = productInfoByEdit.unitPriceAndPicList
+        for(let i = 0; i < _priceAndPicList.length; i++) {
+          if(_priceAndPicList[i].attributeAndValueList.map(item => item.customerAttributeValue.id).sort().toString() == _item.attributeAndValueList.map(item => item.customerAttributeValue.id).sort().toString()){
+            _pic = _priceAndPicList[i].commodityPic
+          }
+        }
+
+        let _commodityPicItem = Array.isArray(_pic) ? _pic.map((__ele, __i) => {
           return {
             uid: __i * -1,
             status: 'done',
             url: __ele,
           }
-        }) :[]
+        }) : []
         let _obj = {..._item}
         _obj.commodityPic = _commodityPicItem
         return _obj
@@ -77,7 +97,7 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
     clickItemTab(0)
     setPriceAttributeParamsByRender(_priceAttributeParams)
     setProductAttributeAndImageParams(_priceAttributeParams)
-    console.log(_priceAttributeParams, priceAttributeParams, '_p') // 这里可能为空数组 ** 如果不到此页面 前一个是旧数据 后面的为新数据
+    // console.log(_priceAttributeParams, priceAttributeParams, '_p')
     // 初始化若是按所有属性共用做显示处理
     if(setImageType && _priceAttributeParams.length>0){
       setCommonImageList(_priceAttributeParams[0].commodityPic)