fix:新增查看商品

src/module/productModule/index.ts

-import { GetProductGoodsGetGoodsListResponseDetail } from '@/services';
+import { GetProductGoodsGetGoodsListResponseDetail, GetProductCommodityGetCommodityResponse } from '@/services';
+
+export interface IBasicFormParam {
+  brandId: number;
+  brandName: string;
+  commodityAreaList: string[][];
+  customerCategoryId: number[];
+  name: string;
+  sellingPoint: string[];
+  slogan: string;
+}
 
 interface InnerAttributeValueList {
   customerAttributeValueId: number;
@@ -13,6 +23,7 @@ export interface IProductSelectAttribute {
 }
 
 export interface IProductModule {
+  productInfoByEdit: GetProductCommodityGetCommodityResponse;
   attributeLists: any[];
   productName: string;
   productSelectAttribute: IProductSelectAttribute[]; //商品属性传输数据
@@ -31,4 +42,5 @@ export interface IProductModule {
   setPriceAttributeParams<T>(datas: T[]): void;
   setProductAttributeAndImageParams(datas: any[]): void;
   setAreaOption(datas: any[]): void;
+  setProductInfoByEdit(data: GetProductCommodityGetCommodityResponse): void;
 }

src/pages/commodity/products/addProducts.tsx

@@ -16,6 +16,7 @@ import OtherForm from './addProductsItem/otherForm';
 import ProductImageForm from './addProductsItem/productImageForm';
 import ProductDescFormOne from './addProductsItem/productDescFormOne';
 
+import { inject, observer } from 'mobx-react'
 import { store } from '@/store'
 import { PublicApi } from '@/services/api';
 
@@ -27,7 +28,23 @@ const AddProducts: React.FC<{}> = (props) => {
   const [attributeList, setAttributeList] = useState<any[]>([])
   let [formRefs, setFormRefs] = useState([]) //子form的ref数组
   const { ProductStore } = store
-  const { productSelectAttribute, productAttributeAndImageParams, areaOption } = ProductStore
+  const { productSelectAttribute, productAttributeAndImageParams, areaOption, setProductName, setAttributeLists, setProductInfoByEdit } = ProductStore
+
+  useEffect(()=>{
+    const { id } = history.location.query
+    if(id){
+      const makeRequest = async () => {
+        const productRes = await PublicApi.getProductCommodityGetCommodity({id: id})
+        const { data } = productRes
+        setProductInfoByEdit(data)
+        setProductName(data.name)
+        const attributeRes = await PublicApi.getProductCustomerGetCustomerCategoryById({ id: 47 + '' })
+        setAttributeLists(attributeRes.data?.customerAttributeList)
+      }
+      makeRequest()
+
+    }
+  }, [])
 
   const onSave = () => {
     console.log('点击保存')
@@ -47,40 +64,25 @@ const AddProducts: React.FC<{}> = (props) => {
               delete _itme.attributeName
               delete _itme.isPrice
           })
-            if(productAttributeAndImageParams.length>0){
-              productAttributeAndImageParams.map(_item => {
-                if(_item.goodsCustomerAttributeList.length>0){
-                  _item.goodsCustomerAttributeList.map(__item => {
-                    delete __item.customerAttributeName
-                  })
-                }
-                if(_item.commodityPic.length>0){
-                  _item.commodityPic = _item.commodityPic.map(__item => {
-                    return __item?.response?.data
-                  })
-                }else{
-                  return message.error("每项请至少上传一张商品图片！")
-                }
-              })
-            }
-            else{
-              return message.error("每项请至少上传一张商品图片！")
-            }
-          // productAttributeAndImageParams.length>0 && productAttributeAndImageParams.map(_item => {
-          //   if(_item.goodsCustomerAttributeList.length>0){
-          //     _item.goodsCustomerAttributeList.map(__item => {
-          //       delete __item.customerAttributeName
-          //     })
-          //   }
-          //   if(_item.commodityPic.length>0){
-          //     _item.commodityPic = _item.commodityPic.map(__item => {
-          //       return __item?.response?.data
-          //     })
-          //   }else{
-          //     console.log(13213)
-          //     return message.error("每项请至少上传一张商品图片！")
-          //   }
-          // })
+          if(productAttributeAndImageParams.length>0){
+            productAttributeAndImageParams.map(_item => {
+              if(_item.goodsCustomerAttributeList.length>0){
+                _item.goodsCustomerAttributeList.map(__item => {
+                  delete __item.customerAttributeName
+                })
+              }
+              if(_item.commodityPic.length>0){
+                _item.commodityPic = _item.commodityPic.map(__item => {
+                  return __item?.response?.data
+                })
+              }else{
+                return message.error("每项请至少上传一张商品图片！")
+              }
+            })
+          }
+          else{
+            return message.error("每项请至少上传一张商品图片！")
+          }
           let _bacsicForm = {...values[0]}
           _bacsicForm.customerCategoryId = _bacsicForm.customerCategoryId[_bacsicForm.customerCategoryId.length-1]
           let _params = {..._bacsicForm, ...values[2], logistics: {...values[3]}, ...values[4], customerAttributeList: productSelectAttribute, unitPriceAndPicList: productAttributeAndImageParams}
@@ -129,7 +131,7 @@ const AddProducts: React.FC<{}> = (props) => {
   return (<PageHeaderWrapper
     onBack={() => history.goBack()}
     backIcon={<ReutrnEle description="返回" />}
-    title="新建商品"
+    title={history.location.query.id?'编辑商品':'新建商品'}
     extra={[
       <Button key="2" disabled={isEnableCheck} onClick={handleApplyCheck}>直接提交审核</Button>,
       <Button key="1" type="primary" icon={<SaveOutlined />} onClick={onSave}>
@@ -179,4 +181,4 @@ const AddProducts: React.FC<{}> = (props) => {
   </PageHeaderWrapper>)
 }
 
-export default AddProducts
\ No newline at end of file
+export default observer(AddProducts)
\ No newline at end of file

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

@@ -17,7 +17,6 @@ import { inject, observer } from 'mobx-react'
 // import { IStore } from '@/store';
 import { store } from '@/store'
 
-
 const { Option } = Select
 const layout = {
   labelCol: {
@@ -67,6 +66,7 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
   const [showCategory, setShowCategory] = useState(null)
   const [areaParams, setAreaParams] = useState<AreaParams>()
   const { ProductStore } = store
+  const { setAreaOption, productInfoByEdit, getBasicFormParamsByEdit, setAttributeLists, setProductName } = ProductStore
 
   useEffect(() => {
     // 获取品类树
@@ -86,18 +86,20 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
           }
         }
         setProviceOptions(arr)
-        ProductStore.setAreaOption(arr)
+        setAreaOption(arr)
       }
     })
-    //传入ref给父级
     onRef(basicFormRef)
+    if(productInfoByEdit?.id){
+      console.log(productInfoByEdit,'productInfoByEdit')
+      handleBrandSearch(getBasicFormParamsByEdit.brandName)
+      onCustomerCategoryChange([45, 47])
+    }
   }, [])
 
-  const onFinish = (values: any) => {
-    console.log(values,'原values')
-    let params = {...values, commodityAreaList: areaParams, customerCategoryId: values?.customerCategoryId.pop()}
-    console.log(params, '加工后的values')
-  }
+  // const onFinish = (values: any) => {
+  //   console.log(values,'原values')
+  // }
 
   const handleBrandSearch = (value: any) => {  // end value
     console.log(value, 'handleBrandSearch')
@@ -122,7 +124,7 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
         <Tag closable={closable} onClose={onClose} style={{ marginRight: 4, border: '1px solid #f0f0f0' }}>
           {label}
         </Tag>
-      )
+      ) 
   }
 
   const onCustomerCategoryChange = (value: any) => {
@@ -132,7 +134,7 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
         const { data } = res
         onChangeAttributeList(data?.customerAttributeList)
         setShowCategory(data.name)
-        ProductStore.setAttributeLists(data?.customerAttributeList)
+        setAttributeLists(data?.customerAttributeList)
       })
     }
     else
@@ -157,7 +159,7 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
   }
 
   const onChangeName = (value: any) => {
-    ProductStore.setProductName(value)
+    setProductName(value)
   }
 
   return (<>
@@ -166,16 +168,11 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
           form={basicForm}
           name="basic-form"
           labelAlign="left"
-          onFinish={onFinish}
+          // onFinish={onFinish}
           colon={false}
           ref={basicFormRef}
+          initialValues={productInfoByEdit?.id ? getBasicFormParamsByEdit : {}}
         >
-          {/* <Form.Item
-            name="commodityAreaParams"
-            style={{display:'none'}}
-          >
-            <Input disabled />
-          </Form.Item> */}
           <Form.Item
             name="customerCategoryId"
             label="商品品类"

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

@@ -5,11 +5,9 @@ import styles from './index.less'
 import { PublicApi } from '@/services/api'
 import { StandardTable } from 'god'
 import { ColumnType } from 'antd/lib/table/interface'
-import { EyeOutlined, QuestionCircleOutlined, SettingOutlined, PlusOutlined, MinusOutlined, ContactsFilled, CodeSandboxCircleFilled } from '@ant-design/icons'
+import { EyeOutlined, QuestionCircleOutlined, SettingOutlined, PlusOutlined, MinusOutlined, } from '@ant-design/icons'
 
 import { inject, observer } from 'mobx-react'
-// import { IProductModule } from '@/module/productModule'
-// import { IStore } from '@/store';
 import { store } from '@/store'
 
 const layout = {
@@ -57,28 +55,16 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
   _tableDataSource = useMemo(() =>tableDataSource, [tableDataSource]) // 保持最新值
 
   useEffect(()=>{
-    console.log('000')
-    //传入ref给父级
-    onRef(priceFormRef) //初始化或组件卸载先置空_tableDataSource和tableDataSource
-    // clearData([])
-    // _tableDataSource = []
-    return () => {
-      console.log(111)
-      // clearData([])
-      // _tableDataSource = []
-      console.log(_tableDataSource, tableDataSource, '组件卸载清空data')
-    }
+    onRef(priceFormRef)
   },[])
 
   useEffect(()=>{
-    console.log(222)
     constructedCallback()
   },[productName, selectedGoods, productSelectAttribute, planPrice])
 
   /* 构建表格列和data */
   const constructedCallback = () => {
     console.log(productName,'name')
-    console.log(333)
     let _col = [];
     let col_productName = { title: '商品名称', dataIndex: '商品名称', key: '商品名称' }
     _col.push(col_productName)

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

@@ -4,8 +4,6 @@ import { Button, Form, Select, Checkbox, Tabs, Input } from 'antd'
 import styles from './index.less'
 
 import { inject, observer } from 'mobx-react'
-// import { IProductModule } from '@/module/productModule'
-// import { IStore } from '@/store';
 import { store } from '@/store'
 
 const layout = {
@@ -39,15 +37,14 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
   const productAttributeFormRef = useRef()
   const [attributeForm] = Form.useForm()
   const { ProductStore } = store
-  const [paramsData, setParamsData] = useState<any>()
+  const { setProductSelectAttribute, getProductAttributeFormParamsByEdit, productInfoByEdit } = ProductStore
 
   useEffect(()=>{
-    //传入ref给父级
     onRef(productAttributeFormRef)
   }, [])
   
   const onFinish = (values) => {
-    console.log(values)
+    console.log(values, 'values')
   }
 
   /**
@@ -95,7 +92,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
     let resultParams = _resultParams.filter((_item: any)=>_item.customerAttributeValueList.length!=0)
 
     console.log(resultParams,'resultParams')  // 最终传输数据
-    ProductStore.setProductSelectAttribute(resultParams)
+    setProductSelectAttribute(resultParams)
   }
 
   const renderTabPanchildren = (attrItem: any) => {
@@ -166,9 +163,10 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
       form={attributeForm}
       name="attribute-form"
       labelAlign="left"
-      // onFinish={onFinish}
+      onFinish={onFinish}
       ref={productAttributeFormRef}
       colon={false}
+      initialValues={productInfoByEdit?.id ? getProductAttributeFormParamsByEdit : {}}
     >
       <Tabs defaultActiveKey="1" tabPosition="left">
         {
@@ -182,14 +180,14 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
           )
         }
       </Tabs>
-      {/* <Form.Item {...tailLayout}>
+      <Form.Item {...tailLayout}>
         <Button type="primary" htmlType="submit">
           保存
         </Button>
         <Button className={styles.ml20}>
           取消
         </Button>
-      </Form.Item> */}
+      </Form.Item>
     </Form>
     {attributesData?.length === 0 && "请先选择基本信息中商品品类项！"}
   </>)

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

@@ -7,9 +7,8 @@ import { StandardTable } from 'god'
 import { ColumnType } from 'antd/lib/table/interface'
 import { EyeOutlined } from '@ant-design/icons'
 import { GetProductGoodsGetGoodsListResponseDetail } from '@/services';
+
 import { inject, observer } from 'mobx-react'
-// import { IProductModule } from '@/module/productModule'
-// import { IStore } from '@/store';
 import { store } from '@/store'
 
 const layout = {

src/pages/commodity/products/index.less

@@ -154,6 +154,10 @@
     height:104px;
     margin-right: 16px;
     border:1px solid rgba(235,236,240,1);
+    .pic{
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 .pruduct-status{

src/pages/commodity/products/index.tsx

@@ -217,7 +217,7 @@ const Products: React.FC<{}> = () => {
                 </Menu.Item>
                 {(record.status === 4 || record.status === 6) ? <Menu.Item><Button type='link' onClick={() => clickUp(1)}>上架</Button></Menu.Item> : ''}
                 {record.status === 5 ? <Menu.Item><Button type='link' onClick={() => clickUp(0)}>下架</Button></Menu.Item> : ''}
-                {record.status === 3 ? <Menu.Item><Button type='link'>修改</Button></Menu.Item> : ''}
+                {record.status === 3 ? <Menu.Item><Button type='link' onClick={() => clickModify(record.id)}>修改</Button></Menu.Item> : ''}
                 <Menu.Item>
                   <Button type='link' onClick={()=>clickCopy(record)}>复制</Button>
                 </Menu.Item>
@@ -250,6 +250,10 @@ const Products: React.FC<{}> = () => {
     history.push(`/memberCenter/commodityAbility/commodity/products/viewProducts?id=${record.id}`)
   }
 
+  const clickModify = (id: number) => {
+    history.push(`/memberCenter/commodityAbility/commodity/products/addProducts?id=${id}`)
+  }
+
   const confirm = () => {
     console.log('confirm')
   }

src/store/product/index.ts

 import {action, computed, observable, runInAction} from 'mobx'
-import { IProductModule, IProductSelectAttribute } from '@/module/productModule'; // mobx要用到的数据类型
-import { GetProductGoodsGetGoodsListResponseDetail } from '@/services';
+import { IProductModule, IProductSelectAttribute, IBasicFormParam } from '@/module/productModule'; // mobx要用到的数据类型
+import { GetProductGoodsGetGoodsListResponseDetail, GetProductCommodityGetCommodityResponse } from '@/services';
 
 class ProductStore implements IProductModule {
   @observable public attributeLists: any[] = [];
@@ -11,6 +11,37 @@ class ProductStore implements IProductModule {
   @observable public priceAttributeParams: any[] = [];
   @observable public productAttributeAndImageParams: any[] = [];
   @observable public areaOption: any[] = [];
+  @observable public productInfoByEdit: GetProductCommodityGetCommodityResponse; // id属性可以作为判断是否是编辑状态的依据
+
+  @computed
+  public get getBasicFormParamsByEdit(): IBasicFormParam {
+    return {
+      brandId: this.productInfoByEdit?.brand?.id,
+      brandName: this.productInfoByEdit?.brand?.name,
+      name: this.productInfoByEdit?.name,
+      slogan: this.productInfoByEdit?.slogan,
+      sellingPoint: this.productInfoByEdit?.sellingPoint,
+      commodityAreaList: this.productInfoByEdit?.commodityAreaList.map(item => [item.provinceCode, item.cityCode]),
+      customerCategoryId: [45, 47]
+    }
+  }
+
+  @computed
+  public get getProductAttributeFormParamsByEdit(): any {
+    let attributeArr = this.productInfoByEdit.commodityAttributeList.map(item => item.customerAttribute)
+    let attributeValueArr = this.productInfoByEdit.commodityAttributeList.map(item => item.customerAttributeValueList)
+    let attributeIdArr = attributeArr.map(item => item.id)
+    let attributeValueIdArr = attributeValueArr.map(item => item.map(_item => _item.id))
+    let tempObj = {}
+    attributeIdArr.map((item, index) => {
+      if(attributeValueIdArr[index].length>1){
+        tempObj[item] = attributeValueIdArr[index]
+      }else{
+        tempObj[item] = attributeValueIdArr[index][0]
+      }
+    })
+    return tempObj
+  }
 
   /** 定义动作区块，外部调用，改变对应的状态 **/
   // 可以改变存的testText值
@@ -59,6 +90,11 @@ class ProductStore implements IProductModule {
   public setAreaOption(datas: any[]) {
     this.areaOption = datas
   }
+
+  @action.bound
+  public setProductInfoByEdit(data: GetProductCommodityGetCommodityResponse) {
+    this.productInfoByEdit = data
+  }
   
 }