fix:新增商品

src/module/productModule/index.ts

@@ -8,4 +8,5 @@ export interface IProductModule {
   setProductSelectAttribute(list: any[]):void;
   setSelectedGoods(lists: any[]):void;
   setTableDataSource(datas: any[]):void;
+  clearData(data: any[]):void;
 }

src/pages/commodity/products/addProducts.tsx

@@ -27,11 +27,22 @@ const AddProducts: React.FC<{}> = (props) => {
   const onSave = () => {
     console.log('点击保存')
     console.log(formRefs, 'formrefs')
+    if(formRefs.length > 0){
+      try{
+        let data = formRefs.map(async __ => {
+          return (  await __.current.validateFields())
+        })
+        console.log(data)
+        // let vaild = data.every(__ => Boolean(__))
+        // return vaild ? data :vaild
+      }catch(e){
+        console.log(e,'error')
+      }
+    }
   }
 
   const callback = (key: any) => {
     console.log(key)
-    console.log(attributeList)
   }
 
   return (<PageHeaderWrapper

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

 import React, { useState, useEffect, useRef } from 'react'
 import {history} from 'umi'
 import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
-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 } from '@ant-design/icons'
+import { GetLogisticsSelectListCompanyResponse, GetLogisticsSelectListShipperAddressResponse } from '@/services'
 
 const layout = {
   labelCol: {
@@ -27,10 +24,22 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
 
   const logisticsFormRef = useRef()
   const [logisticsForm] = Form.useForm()
+  const [logisticsCompanyLists, setLogisticsCompanyLists] = useState<GetLogisticsSelectListCompanyResponse>()
+  const [logisticsAddressList, setLogisticsAddressList] = useState<GetLogisticsSelectListShipperAddressResponse>()
 
   useEffect(()=>{
     //传入ref给父级
     onRef(logisticsFormRef)
+
+    // 获取发货地址 物流公司
+    PublicApi.getLogisticsSelectListShipperAddress().then(res=>{
+      setLogisticsAddressList(res.data)
+    })
+
+    PublicApi.getLogisticsSelectListCompany().then(res=>{
+      setLogisticsCompanyLists(res.data)
+    })
+
   }, [])
 
   return (<>
@@ -42,7 +51,7 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
       ref={logisticsFormRef}
     >
       <Form.Item
-        name="transportType"
+        name="deliveryType"
         label="配送方式"
         rules={[
           {
@@ -59,7 +68,7 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
         </Radio.Group>
       </Form.Item>
       <Form.Item
-        name="chargeType"
+        name="carriageType"
         label="运费方式"
         rules={[
           {
@@ -85,9 +94,9 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
         ]}
       >
         <Input suffix="KG" placeholder="请输入重量" />
-        <Checkbox>使用运费模板（只有买家承担运费才能选择）</Checkbox>
+        {/* <Checkbox>使用运费模板（只有买家承担运费才能选择）</Checkbox> */}
       </Form.Item>
-      <Form.Item
+      {/* <Form.Item
         name="chargeTemplate"
         label="运费模板"
       >
@@ -99,31 +108,31 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
           <Option value="EMS">EMS模板</Option>
           <Option value="COM">一般快递模板</Option>
         </Select>
-      </Form.Item>
+      </Form.Item> */}
       <Form.Item
-        name="address"
+        name="sendAddressId"
         label="发货地址"
       >
         <Select
           placeholder="请选择发货地址"
           allowClear
         >
-          <Option value="1">1</Option>
-          <Option value="2">2</Option>
-          <Option value="3">3</Option>
+          {
+            logisticsAddressList?.length > 0 && logisticsAddressList.map(_=><Option key={_.id} value={_.id}>{_.fullAddress}</Option>)
+          }
         </Select>
       </Form.Item>
       <Form.Item
-        name="express"
+        name="companyId"
         label="物流公司"
       >
         <Select
           placeholder="请选择物流公司"
           allowClear
         >
-          <Option value="EMS">EMS</Option>
-          <Option value="SF">顺丰</Option>
-          <Option value="CN">菜鸟果果</Option>
+          {
+            logisticsCompanyLists?.length > 0 && logisticsCompanyLists.map(_=><Option key={_.id} value={_.id}>{_.name}</Option>)
+          }
         </Select>
       </Form.Item>
     </Form>

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

@@ -42,28 +42,28 @@ const OtherForm: React.FC<Iprops> = (props) => {
       ref={otherFormRef}
     >
       <Form.Item
-        name="bill"
+        name="isInvoice"
         label="提供发票"
       >
         <Radio.Group size="small">
-          <Radio.Button value="1" style={{ width: 100, textAlign: 'center' }}>是</Radio.Button>
-          <Radio.Button value="0" style={{ width: 100, textAlign: 'center' }}>否</Radio.Button>
+          <Radio.Button value={true} style={{ width: 100, textAlign: 'center' }}>是</Radio.Button>
+          <Radio.Button value={false} style={{ width: 100, textAlign: 'center' }}>否</Radio.Button>
         </Radio.Group>
       </Form.Item>
       <Form.Item
-        name="maitou"
+        name="marks"
         label="唛头"
       >
         <Input maxLength={25} placeholder="请输入唛头（最长25个字符）" />
       </Form.Item>
       <Form.Item
-        name="statement"
+        name="packing"
         label="包装清单"
       >
         <TextArea maxLength={120} rows={4} placeholder="最长120个字符" />
       </Form.Item>
       <Form.Item
-        name="saleService"
+        name="afterService"
         label="售后服务"
       >
         <TextArea maxLength={300} rows={4} placeholder="最长300个字符" />

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

@@ -2,10 +2,6 @@ import React, { useState, useEffect, useRef, useContext } from 'react'
 import {history} from 'umi'
 import { Button, Form, Select, Checkbox, Tabs, Input } from 'antd'
 import styles from './index.less'
-import { PublicApi } from '@/services/api'
-import { StandardTable } from 'god'
-import { ColumnType } from 'antd/lib/table/interface'
-import { EyeOutlined } from '@ant-design/icons'
 
 import { inject, observer } from 'mobx-react'
 // import { IProductModule } from '@/module/productModule'
@@ -36,19 +32,20 @@ const { TabPane } = Tabs
 const { Option } = Select
 const { TextArea } = Input
 
+let paramsArray = [];
+
 const ProductAttributeForm: React.FC<Iprops> = (props) => { 
   const { attributesData, onRef } = props
   const productAttributeFormRef = useRef()
   const [attributeForm] = Form.useForm()
   const { ProductStore } = store
+  const [paramsData, setParamsData] = useState<any>()
 
   useEffect(()=>{
     //传入ref给父级
     onRef(productAttributeFormRef)
   }, [])
   
-  let paramsArray = [];
-
   const onFinish = (values) => {
     
     console.log(values)
@@ -93,8 +90,8 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
       item[next.customerAttributeId] = next;
       return item
     },{}))
-    console.log(resultParams, 'resultParams') // 最终转换数据
-    ProductStore.setProductSelectAttribute(resultParams) //注入mobx
+    console.log(resultParams,'result', paramsArray)  // 最终传输数据
+    ProductStore.setProductSelectAttribute(resultParams)
   }
 
   const renderTabPanchildren = (attrItem: any) => {
@@ -136,7 +133,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
             <Checkbox.Group onChange={(v)=>onChange(v, attrItem)}>
               {
                 attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any, index: string) => (
-                  <Checkbox key={item.id + index} value={item.id}>{item.value}</Checkbox>
+                  <Checkbox key={item.id} value={item.id}>{item.value}</Checkbox>
                 ))
               }
             </Checkbox.Group>

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

 import React, { useState, useEffect } from 'react'
 import {history} from 'umi'
-import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col, Alert } from 'antd'
+import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col, Alert, Upload } from 'antd'
 import styles from '../index.less'
 import { PublicApi } from '@/services/api'
 import { StandardTable } from 'god'
@@ -20,30 +20,30 @@ const layoutAdd = {
 }
 
 const _fileList = [
-  {
-    uid: '-1',
-    name: 'image.png',
-    status: 'done',
-    url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-  },
-  {
-    uid: '-2',
-    name: 'image.png',
-    status: 'done',
-    url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-  },
-  {
-    uid: '-3',
-    name: 'image.png',
-    status: 'done',
-    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-  },
-  {
-    uid: '-4',
-    name: 'image.png',
-    status: 'done',
-    url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-  },
+  // {
+  //   uid: '-1',
+  //   name: 'image.png',
+  //   status: 'done',
+  //   url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+  // },
+  // {
+  //   uid: '-2',
+  //   name: 'image.png',
+  //   status: 'done',
+  //   url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+  // },
+  // {
+  //   uid: '-3',
+  //   name: 'image.png',
+  //   status: 'done',
+  //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  // },
+  // {
+  //   uid: '-4',
+  //   name: 'image.png',
+  //   status: 'done',
+  //   url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+  // },
 ]
 
 const _panes = [
@@ -61,13 +61,17 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
   const [visibleAddTabs, setVisibleAddTabs] = useState(false)
   const [visibleMedias, setVisibleMedias] = useState(false)
 
-  const [fileList, setFileList] = useState(_fileList)
+  const [fileList, setFileList] = useState<any[]>(_fileList)
 
   const [visibleCrop, setVisibleCrop] = useState(false)
   const [imgCropUrl, setImgCropUrl] = useState("")
   const [imgCropCurrent, setImgCropCurrent] = useState({})
   const [imgCropView, setImgCropView] = useState("")
 
+  const [previewVisible, setPreviewVisible] = useState(false)
+  const [previewImage, setPreviewImage] = useState('')
+  const [previewTitle, setPreviewTitle] = useState('')
+
   useEffect(() => {
     let newPane = [...panes]
     newPane[0].content = pictureCrads()
@@ -140,10 +144,38 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
     setPanes(paneArray)
   }
 
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div className="ant-upload-text">点击上传</div>
+    </div>
+  );
+
+  const getBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+  }
+
+  const handlePreview = async file => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj);
+    }
+
+    setPreviewImage(file.url || file.preview)
+    setPreviewVisible(true)
+    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1))
+  };
+
+  const handleChange = ({ fileList }) => setFileList(fileList);
+
   const pictureCrads = () => (
     <>
       <div className={styles.pictureCardBox}>
-        {
+        {/* {
           fileList && fileList.length > 0 && fileList.map((item, index) =>
             <div className={styles.cardBox} key={item.uid}>
               <div className={styles.contentBox}>
@@ -155,10 +187,24 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
               </div>
             </div>
           )
-        }
-        <div className={styles.cardAddBox} onClick={handleUpload}>
+        } */}
+
+      <div className="clearfix">
+        <Upload
+          action="/api/file/file/upload"
+          listType="picture-card"
+          fileList={fileList}
+          onPreview={handlePreview}
+          onChange={handleChange}
+          data={{fileType: 2}}
+        >
+          {fileList.length >= 6 ? null : uploadButton}
+        </Upload>
+      </div>
+
+        {/* <div className={styles.cardAddBox} onClick={handleUpload}>
           <p><PlusOutlined /><br />点击上传</p>
-        </div>
+        </div> */}
       </div>
       <Alert
         banner
@@ -169,10 +215,10 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
         closable
         style={{ backgroundColor: '#F0F8FF', color: '#1B9AEE' }}
       />
-      <div>
+      {/* <div>
         <i>图片预览(供调试)</i>
         {imgCropView ? <img src={imgCropView} alt="预览" /> : <p>暂空</p>}
-      </div>
+      </div> */}
     </>
   )
 
@@ -213,6 +259,8 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
       visible={visibleAddTabs}
       onOk={handleOkAddTabs}
       onCancel={handleCancelAddTabs}
+      okText="确定"
+      cancelText="取消"
     >
       <Form
         {...layoutAdd}
@@ -240,6 +288,15 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
       clickOkAddMedias={handleOkAddMedias}
       clickCancelAddMedias={handleCancelAddMedias}
     />
+
+      <Modal
+        visible={previewVisible}
+        title={previewTitle}
+        footer={null}
+        onCancel={()=>setPreviewVisible(false)}
+      >
+        <img alt="商品图片" style={{ width: '100%' }} src={previewImage} />
+      </Modal>
   </>)
 }
 

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

@@ -84,6 +84,7 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => {
 
   const onSelectGoodsChange = (value: any) => {
     setSelectedGoodsRowKeys([])
+    ProductStore.setSelectedGoods([])
     setIsSelectGoods(value.target.checked)
   }
 

src/pages/commodity/products/index.less

@@ -29,7 +29,7 @@
 //图片画廊
 .picture-card-box{
   margin-bottom: 30px;
-  display: flex;
+  // display: flex; 
   .card-add-box{
     width: 196px;
     height: 196px;

src/store/product/index.ts

@@ -29,6 +29,11 @@ class ProductStore implements IProductModule {
     console.log(datas, 'innerBox')
     this.tableDataSource = datas;
   }
+
+  @action.bound
+  public clearData(data: any[]) {
+    this.tableDataSource = data;
+  }
   
 }