fix

src/components/CustomTabs/index.tsx

@@ -35,7 +35,7 @@ const CustomTabs: React.FC<ITabsProps> = props => {
             {
               renderTabs && renderTabs.length>0 && renderTabs.map(
                 (item, index) => <>
-                  <li className={defaultChecked == index ? styles.activedLi : ""} onClick={()=>clickItemTab(index)}>
+                  <li key={item.key} className={defaultChecked == index ? styles.activedLi : ""} onClick={()=>clickItemTab(index)}>
                     <span>{item.title}</span>
                     {item.isDelete && <a onClick={(e)=>handleDelete(e, index)}><DeleteOutlined /></a>}
                   </li>
@@ -57,7 +57,7 @@ const CustomTabs: React.FC<ITabsProps> = props => {
         <Col span={20} style={{ padding: 24 }}>
           {
             renderTabs && renderTabs.length>0 && renderTabs.map(
-              (item, index) => <div style={defaultChecked == index ? {display: 'block'} : {display: 'none'}}>
+              (item, index) => <div key={item.key} style={defaultChecked == index ? {display: 'block'} : {display: 'none'}}>
                 { item.content }
               </div>
             )

src/components/MediaLibrary/index.less

+.modalMainContentBox{
+  margin: 10px 0 30px;
+  ul{
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    li{
+      width: 162px;
+      height: 162px;
+      margin: 20px 8px;
+      align-self: start;
+      p{
+        font-size: 12px;
+        line-height: 24px;
+        text-align: center;
+      }
+      a{
+        img{
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .isCheckedCss{
+      box-sizing: border-box;
+      border:2px solid @main-color;
+      position: relative;
+      &::before{
+        content: '√';
+        width:20px;
+        height:20px;
+        line-height: 20px;
+        text-align: center;
+        font-weight: bold;
+        font-size: 16px;
+        color: #fff;
+        background: @main-color;
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+}
+.footerPage{
+  display: flex;
+  justify-content: flex-end;
+}
\ No newline at end of file

src/components/MediaLibrary/index.tsx

+import React, { useState, useRef, useEffect, ReactNode } from "react";
+import { Button, Form, Input, Row, Col, Modal, Alert, Upload, Select, DatePicker, Pagination } from "antd";
+import { PlusOutlined, DeleteOutlined, FormOutlined, UploadOutlined } from "@ant-design/icons";
+import styles from "./index.less";
+
+export interface IProps {
+  visibleMedias: boolean;
+  clickOkAddMedias: (selectedArray: ILists[])=>void;
+  clickCancelAddMedias: ()=>void;
+}
+
+export interface ILists {
+  id: string;
+  image: string;
+  title: string;
+  isCheck: boolean;
+}
+
+export interface Iparams {
+  current: number;
+  pageSize: number;
+  name: string;
+  canal: number;
+  group: number;
+  tag: number;
+  rangeDate: string[];
+}
+
+const {Option} = Select
+const { RangePicker } = DatePicker
+
+let _imgLists: ILists[] = [
+  {
+    id: '10',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '11',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '12',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '13',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '14',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '15',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+]
+
+const CustomMediaLibrary: React.FC<IProps> = props => {
+
+  const { visibleMedias, clickOkAddMedias, clickCancelAddMedias } = props
+
+  const [searchParams, setSearchParams] = useState<Iparams>({ current: 1, pageSize: 10, name: '', canal: null, group: null, tag: null, rangeDate: [] })
+  let [imgLists, setImgLists] = useState<ILists[]>(_imgLists)
+
+  const clickCheck = (id: any, index: any) => {
+    console.log('选中', id, index)
+    for(let item of imgLists){
+      let bool = item.isCheck
+      if(item.id===id){
+        item.isCheck = !bool
+      }
+    }
+    let newArr = [...imgLists]
+    setImgLists(newArr)
+  }
+
+  const confirmClickOk = () => {
+    console.log('内部确定选择')
+    let selectedArray = imgLists.filter(item=>item.isCheck)
+    clickOkAddMedias(selectedArray)
+  }
+
+  const confirmCancel = () => {
+    console.log('内部取消选择')
+    for(let item of imgLists){
+      item.isCheck = false
+    }
+    setImgLists([...imgLists])
+    clickCancelAddMedias()
+  }
+
+  const clickSearch = (value?:string) => {
+    if(value){
+      searchParams['current'] = 1
+      searchParams['name'] = value
+    } 
+    setSearchParams({...searchParams})
+    console.log(searchParams)
+    // ...搜索
+  }
+
+  const onChange = (value:any, type: string) => {
+    searchParams[type] = value
+    setSearchParams({...searchParams})
+  }
+
+  const pageChange = (page, pageSize) => {
+    searchParams['current'] = page
+    setSearchParams({...searchParams})
+    clickSearch()
+  }
+
+  return (
+    <div className={styles.mediaLibraryBox}>
+      <Modal
+        width={960}
+        title="添加媒体" 
+        visible={visibleMedias}
+        onOk={confirmClickOk}
+        onCancel={confirmCancel}
+        okText="确定"
+        cancelText="取消"
+        forceRender={true}
+      >
+        <div className={styles.modalFitllerBox}>
+          <Row gutter={[16,16]} justify="space-between">
+            <Col span={12}>
+              <Upload 
+                name='file'
+                action='/api/file/file/upload'
+                headers={{
+                  authorization: 'authorization-text'
+                }}
+              >
+                <Button type="primary">
+                  <UploadOutlined /> 上传文件
+                </Button>
+              </Upload>
+            </Col>
+            <Col span={12} style={{display:'flex', justifyContent: 'flex-end'}}>
+              <Input.Search
+                placeholder="搜素"
+                onSearch={value => clickSearch(value)}
+                style={{ width: 200 }}
+              />
+            </Col>
+          </Row>
+          <Row gutter={[16,16]}>
+            <Col span={6}>
+              <Select allowClear style={{ width: '100%' }} placeholder="使用渠道" onChange={(v)=>onChange(v,'canal')}>
+                <Option value={0}>Jack</Option>
+                <Option value={1}>Lucy</Option>
+              </Select>
+            </Col>
+            <Col span={6}>
+              <Select allowClear style={{ width: '100%' }} placeholder="分组" onChange={(v)=>onChange(v,'group')}>
+                <Option value={10}>Jack</Option>
+                <Option value={11}>Lucy</Option>
+              </Select>
+            </Col>
+            <Col span={6}>
+              <Select allowClear style={{ width: '100%' }} placeholder="标签" onChange={(v)=>onChange(v,'tag')}>
+                <Option value={20}>Jack</Option>
+                <Option value={21}>Lucy</Option>
+              </Select>
+            </Col>
+            <Col span={6}>
+              <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder={['开始时间','结束时间']} onChange={(v)=>onChange(v,'rangeDate')} />
+            </Col>
+          </Row>
+        </div>
+        <div className={styles.modalMainContentBox}>
+          <ul>
+            {
+              imgLists.length>0 && imgLists.map((item, index)=>(
+                <li key={item.id} className={item.isCheck?styles.isCheckedCss:''}>
+                  <a onClick={()=>clickCheck(item.id, index)}>
+                    <img src={item.image} alt={item.title}/>
+                  </a>
+                  <p>{item.title}</p>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+        <div className={styles.footerPage}>
+          <Pagination current={searchParams?.current} total={50} onChange={pageChange} />
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default CustomMediaLibrary

src/global/config/global.d.ts

@@ -17,7 +17,7 @@ export interface Element {
 	id: number;
 	fieldName: string;
 	fieldCNName: string;
-	fieldType?: any;
+	fieldType: string;
 	fieldLength: number;
 	fieldEmpty: number;
 	fieldOrder: number;

src/pages/commodity/products/index.tsx

@@ -213,7 +213,7 @@ const Products: React.FC<{}> = () => {
             <Dropdown overlay={
               <Menu>
                 <Menu.Item>
-                  {record.status === 1 ? <Button type='link'>提交审核</Button> : ''}
+                  {record.status === 1 ? <Button type='link' onClick={()=>clickSubmitCheck(record)}>提交审核</Button> : ''}
                 </Menu.Item>
                 {(record.status === 3 || 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> : ''}
@@ -417,8 +417,17 @@ const Products: React.FC<{}> = () => {
 
   const clickCopy = (record: any) => {
     console.log('复制商品')
+    const { id } = record;
+    if(id)
+      PublicApi.postProductCommodityCopyCommodity({id: id})
   }
 
+  const clickSubmitCheck = (record:any) => {
+    console.log('提交审核')
+    const { id } = record;
+    if(id)
+      PublicApi.postProductCommodityApplyCheckCommodity({id: id})
+  }
 
   const handleMenuClick = (e: any) => {
     console.log('menu', e, selectedRowKeys); // 1 批量删除；2 删除导入批次
@@ -433,6 +442,8 @@ const Products: React.FC<{}> = () => {
 
   const handleBatchDelete = (ids: string[]) => {
     console.log('删除', ids)
+    //@ts-ignore
+    PublicApi.postProductCommodityDeleteBatchCommodity({idList: ids})  //......
   }
 
   const handleReset = () => {

src/pages/commodity/products/viewProducts.tsx

-import React, { useState, useRef, ReactNode } from 'react'
+import React, { useState, useRef, ReactNode, useEffect } from 'react'
 import { history } from 'umi'
 import { Button, Steps, Card, Space, Radio, Row, Col, Descriptions, Table, Tabs, Tag, Avatar } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
@@ -10,12 +10,56 @@ import {
 import { ColumnType } from 'antd/lib/table/interface'
 import ReutrnEle from '@/components/ReturnEle'
 import styles from "./index.less"
+import { PublicApi } from '@/services/api'
+import { 
+  GetProductCommodityGetCommodityResponse, 
+  GetProductCommodityGetCommodityCheckRecordResponse, 
+  GetProductCommodityGetShopResponse 
+} from '@/services'
 
 const { Step } = Steps;
 const { TabPane } = Tabs;
 
 const viewProducts: React.FC<{}> = () => {
   
+  const [productDetail, setPorductDetail] = useState<GetProductCommodityGetCommodityResponse>()
+  const [checkRecord, setCheckRecord] = useState<GetProductCommodityGetCommodityCheckRecordResponse>()
+  const [productGetShop, setProductGetShop] = useState<GetProductCommodityGetShopResponse>()
+  const [fixStep, setFixStep] = useState(0)
+
+  useEffect(() => {
+    const { id } = history.location.query
+    if(id){
+      PublicApi.getProductCommodityGetCommodity({id: id}).then(res=>{
+        const { code, data } = res
+        if(code===1000){
+          console.log(data)
+          setPorductDetail(data)
+          if(data.status===1) setFixStep(0)
+          else if(data.status===2) setFixStep(1)
+          else if(data.status===3) setFixStep(2)
+          else if(data.status===4) setFixStep(2)
+          else if(data.status===5) setFixStep(3)
+          else if(data.status===6) setFixStep(3)
+        }
+      })
+      PublicApi.getProductCommodityGetCommodityCheckRecord({commodityId: id}).then(res=>{
+        const { code, data } = res
+        if(code===1000){
+          console.log(data)
+          setCheckRecord(data)
+        }
+      })
+      PublicApi.getProductCommodityGetShop({id: id}).then(res=>{
+        const { code, data } = res
+        if(code===1000){
+          console.log(data)
+          setProductGetShop(data)
+        }
+      })
+    }
+  }, [])
+
   const dataSource = [
     {
       key: '1',
@@ -145,20 +189,44 @@ const viewProducts: React.FC<{}> = () => {
     }
   ]
 
+  // 1 审核状态 2 商品状态
+  const renderStatus = (status: number, type: number) => {
+    let component: ReactNode = null
+    if(type===1){
+      if (status === 1)
+        component = (<><span className="commonStatusStop"></span>待提交审核</>)
+      else if (status === 2)
+        component = (<><span className="commonStatusModify"></span>待审核</>)
+      else if (status === 3)
+        component = (<><span className="commonStatusValid"></span>审核通过</>)
+      else if (status === 4)
+        component = (<><span className="commonStatusInvalid">审核不通过</span></>)
+    }
+    if (status === 5)
+      component = (<span style={{ color: '#00B37A', padding: '2px 5px', background: 'rgba(235,247,242,1)', borderRadius: '4px' }}>已上架</span>) 
+    else if (status === 6)
+      component = (<span style={{ padding: '2px 5px', background: 'rgba(244,245,247,1)', borderRadius: '4px' }}>已下架</span>)
+    return component
+  }
+
   const content = <>
       <Descriptions colon={true} style={{paddingLeft:128}}>
-        <Descriptions.Item label="商品品牌">APPLE</Descriptions.Item>
-        <Descriptions.Item label="商品品类">成品皮 --&gt; 牛皮 --&gt; 头层牛皮</Descriptions.Item>
-        <Descriptions.Item label="上架商城"><Avatar size="small" icon={<UserOutlined />} />&nbsp;<Avatar size="small" icon={<UserOutlined />} /></Descriptions.Item>
-        <Descriptions.Item label="审核状态"><span className="commonStatusValid"></span>审核通过</Descriptions.Item>
-        <Descriptions.Item label="商品状态"><span className="pruduct-status">已上架</span></Descriptions.Item>
+        <Descriptions.Item label="商品品牌">{productDetail?.brand?.name}</Descriptions.Item>
+        <Descriptions.Item label="商品品类">{productDetail?.customerCategoryName}</Descriptions.Item>
+        <Descriptions.Item label="上架商城">
+        {
+          productGetShop?.length>0 && productGetShop.map(item=><>{item.isCheck && item.name}&nbsp;</>)
+        }
+        </Descriptions.Item>
+        <Descriptions.Item label="审核状态">{renderStatus(productDetail?.status, 1)}</Descriptions.Item>
+        <Descriptions.Item label="商品状态">{renderStatus(productDetail?.status, 2)}</Descriptions.Item>
         <Descriptions.Item label="商品类型"><span className="commonStatusValid"></span>实物商品</Descriptions.Item>
       </Descriptions>
     </>
 
   return (
     <PageHeaderWrapper
-      title="进口头层牛皮荔枝纹"
+      title={productDetail?.name}
       onBack={() => history.goBack()}
       backIcon={<ReutrnEle logoSrc='https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' />}
       content={content}
@@ -170,9 +238,10 @@ const viewProducts: React.FC<{}> = () => {
     >
       <Space direction="vertical" style={{width:'100%'}}>
         <Card headStyle={{borderBottom:'none'}} title="流程进度">
-          <Steps progressDot current={2}>
+          <Steps progressDot current={fixStep}>
+            <Step title="新建商品" description="供应商" />
             <Step title="提交审核" description="供应商" />
-            <Step title="审核品牌" description="平台" />
+            <Step title="审核" description="平台" />
             <Step title="完成" description="" />
           </Steps>
         </Card>
@@ -186,7 +255,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>商品标语：</p>
                 </Col>
                 <Col span={20}>
-                  <p>厚1.407548530856、张幅12尺</p>
+                  <p>{productDetail?.slogan}</p>
                 </Col>
               </Row>
               <Row>
@@ -194,7 +263,8 @@ const viewProducts: React.FC<{}> = () => {
                   <p>商品卖点：</p>
                 </Col>
                 <Col span={20}>
-                  <p><Tag>双十一大促</Tag><Tag>新用户专享大礼包</Tag><Tag>成交量遥遥领先</Tag></p>
+                  {/* <p><Tag>双十一大促</Tag><Tag>新用户专享大礼包</Tag><Tag>成交量遥遥领先</Tag></p> */}
+                  <p>{productDetail?.sellingPoint}</p>
                 </Col>
               </Row>
               <Row>
@@ -202,7 +272,8 @@ const viewProducts: React.FC<{}> = () => {
                   <p>归属地市：</p>
                 </Col>
                 <Col span={20}>
-                  <p>广东省 / 广州市<br />新疆 / 克孜勒苏柯尔克孜自治州</p>
+                  {/* <p>广东省 / 广州市<br />新疆 / 克孜勒苏柯尔克孜自治州</p> */}
+                  <p>{productDetail?.area.toString()}</p>
                 </Col>
               </Row>
             </Card>
@@ -219,7 +290,7 @@ const viewProducts: React.FC<{}> = () => {
               </Row>
               <Row>
                 <Col span={4}>
-                  <p>运送方式：</p>
+                  <p>运费方式：</p>
                 </Col>
                 <Col span={20}>
                   <p>买家承担运费</p>
@@ -230,7 +301,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>重量：</p>
                 </Col>
                 <Col span={20}>
-                  <p>1.55KG（公斤）</p>
+                  <p>{productDetail?.logistics?.weight}KG（公斤）</p>
                 </Col>
               </Row>
               <Row>
@@ -246,7 +317,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>物流公司：</p>
                 </Col>
                 <Col span={20}>
-                  <p>顺丰</p>
+                  <p>{productDetail?.logistics?.company}</p>
                 </Col>
               </Row>
               <Row>
@@ -254,7 +325,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>发货地址：</p>
                 </Col>
                 <Col span={20}>
-                  <p>广东省广州市海珠区型钢东欧1068号中洲中心北塔6楼</p>
+                  <p>{productDetail?.logistics?.sendAddress}</p>
                 </Col>
               </Row>
             </Card>
@@ -266,7 +337,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>提供发票：</p>
                 </Col>
                 <Col span={20}>
-                  <p>是</p>
+                  <p>{productDetail?.isInvoice?'是':'否'}</p>
                 </Col>
               </Row>
               <Row>
@@ -274,7 +345,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>唛头：</p>
                 </Col>
                 <Col span={20}>
-                  <p>PELLE</p>
+                  <p>{productDetail?.marks}</p>
                 </Col>
               </Row>
               <Row>
@@ -282,7 +353,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>包装清单：</p>
                 </Col>
                 <Col span={20}>
-                  <p>商品*1，说明书*1</p>
+                  <p>{productDetail?.packing}</p>
                 </Col>
               </Row>
               <Row>
@@ -290,7 +361,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>售后服务：</p>
                 </Col>
                 <Col span={20}>
-                  <p>1年免费保修，7天免费退换</p>
+                  <p>{productDetail?.afterService}</p>
                 </Col>
               </Row>
             </Card>