feat: 添加待审核品牌页面

config/routes/commodityRoute.ts

@@ -103,37 +103,90 @@ const CommodityRoute: RouterChild = {
         },
       ]
     },
-    // 品牌
+    // 品牌管理
     {
       path: '/memberCenter/commodityAbility/trademark',
       name: 'trademark',
-      icon: 'smile',
-      component: '@/pages/trademark',
-    },
-    // 品牌-新增
-    {
-      path: '/memberCenter/commodityAbility/trademark/add',
-      name: 'addBrand',
-      icon: 'smile',
-      hideInMenu: true,
-      component: '@/pages/trademark/addBrand',
-    },
-    // 品牌-编辑
-    {
-      path: '/memberCenter/commodityAbility/trademark/edit',
-      name: 'editBrand',
-      icon: 'smile',
-      hideInMenu: true,
-      component: '@/pages/trademark/addBrand',
-    },
-    // 品牌-查看
-    {
-      path: '/memberCenter/commodityAbility/trademark/detail',
-      name: 'brandDetail',
-      hideInMenu: true,
-      icon: 'smile',
-      component: '@/pages/trademark/viewBrand',
+      routes: [
+        // 品牌申请
+        {
+          path: '/memberCenter/commodityAbility/trademark/trademarkApply',
+          name: 'trademarkApply',
+          icon: 'smile',
+          component: '@/pages/trademark',
+        },
+        // 品牌-新增
+        {
+          path: '/memberCenter/commodityAbility/trademarkApply/add',
+          name: 'addBrand',
+          icon: 'smile',
+          hideInMenu: true,
+          component: '@/pages/trademark/addBrand',
+        },
+        // 品牌-编辑
+        {
+          path: '/memberCenter/commodityAbility/trademarkApply/edit',
+          name: 'editBrand',
+          icon: 'smile',
+          hideInMenu: true,
+          component: '@/pages/trademark/addBrand',
+        },
+        // 品牌-查看
+        {
+          path: '/memberCenter/commodityAbility/trademarkApply/detail',
+          name: 'brandDetail',
+          hideInMenu: true,
+          icon: 'smile',
+          component: '@/pages/trademark/viewBrand',
+        },
+        // 待审核品牌
+        {
+          path: '/memberCenter/commodityAbility/trademark/trademarkWillCheck',
+          name: 'trademarkWillCheck',
+          icon: 'smile',
+          component: '@/pages/trademark/checkBrand',
+        },
+        // 品牌审核
+        {
+          path: '/memberCenter/commodityAbility/trademark/trademarkWillCheck/detail',
+          name: 'trademarkWillCheckDetail',
+          hideInMenu: true,
+          icon: 'smile',
+          component: '@/pages/trademark/checkBrandDetail',
+        },
+      ]
     },
+    // // 品牌
+    // {
+    //   path: '/memberCenter/commodityAbility/trademark',
+    //   name: 'trademark',
+    //   icon: 'smile',
+    //   component: '@/pages/trademark',
+    // },
+    // // 品牌-新增
+    // {
+    //   path: '/memberCenter/commodityAbility/trademark/add',
+    //   name: 'addBrand',
+    //   icon: 'smile',
+    //   hideInMenu: true,
+    //   component: '@/pages/trademark/addBrand',
+    // },
+    // // 品牌-编辑
+    // {
+    //   path: '/memberCenter/commodityAbility/trademark/edit',
+    //   name: 'editBrand',
+    //   icon: 'smile',
+    //   hideInMenu: true,
+    //   component: '@/pages/trademark/addBrand',
+    // },
+    // // 品牌-查看
+    // {
+    //   path: '/memberCenter/commodityAbility/trademark/detail',
+    //   name: 'brandDetail',
+    //   hideInMenu: true,
+    //   icon: 'smile',
+    //   component: '@/pages/trademark/viewBrand',
+    // },
     // 商品
     {
       path: '/memberCenter/commodityAbility/commodity',

config/routes/index.ts

@@ -4,13 +4,13 @@
  * @LastEditors: XieZhiXiong
  * @LastEditTime: 2021-08-26 16:31:22
  */
-// import CommodityRoute from './commodityRoute' // 商品能力路由
+import CommodityRoute from './commodityRoute' // 商品能力路由
 // import MemberRoute from './memberRoute' //  会员能力路由
 // import ShopRoute from './shopRoute' // 店铺能力路由
 // import ChannelRoute from './channelRoute' // 渠道能力路由
 // import TranactionRoute from './tranactionRoute' // 交易能力路由
 // import LogisticsRoute from './logisticsRoutes' // 物流能力路由
-import PayandSettleRoute from './payandSettle' //支付与结算
+// import PayandSettleRoute from './payandSettle' //支付与结算
 // import AuthConfigRoute from './authConfigRoute'
 // import AfterService from './afterServiceRoute' // 售后
 // import HandlingRoute from './handlingRoute'; // 加工能力
@@ -33,7 +33,7 @@ const homeRoute = {
   component: '@/pages/home',
 };
 // const routes = isDev ? [ homeRoute, marketingRoute, MemberRoute ] : asyncRoutes;
-const routes = isDev ? [ PayandSettleRoute ] : asyncRoutes;
+const routes = isDev ? [ CommodityRoute ] : asyncRoutes;
 
 const memberCenterRoute = {
   path: '/memberCenter',

src/pages/trademark/checkBrand.tsx

+import React, { ReactNode, useRef } from 'react'
+import { history } from 'umi'
+import { Button, Card } from 'antd'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import { StandardTable } from 'god'
+import { ColumnType } from 'antd/lib/table/interface'
+import moment from 'moment'
+import EyePreview from '@/components/EyePreview'
+import { getProductBrandGetPlatformBrandList } from '@/services/ProductV2Api'
+
+/**
+ * 待审核品牌列表
+ * @returns
+ */
+const CheckBrand: React.FC<{}> = () => {
+  const ref = useRef<any>({})
+
+  const fetchData = (params: any) => {
+    return new Promise((resolve, reject) => {
+      getProductBrandGetPlatformBrandList({ ...params, name: params.name || '', status: 2 }).then(res => {
+        const { data } = res
+        resolve(data)
+      })
+    })
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '品牌名称',
+      dataIndex: 'name',
+      key: 'name',
+      className: 'commonPickColor',
+      render: (text: any, record: any) => <EyePreview
+        url={`/productManage/trademark/trademarkWillCheck/detail?id=${record.id}&preview=1`}
+      >
+        {text}
+      </EyePreview>
+    },
+    {
+      title: '商家名称',
+      dataIndex: 'memberName',
+      key: 'memberName',
+    },
+    {
+      title: '申请审核时间',
+      dataIndex: 'applyTime',
+      key: 'applyTime',
+      render: (text: any, record: any) => text && moment(text).format('YYYY-MM-DD HH:mm:ss'),
+      defaultSortOrder: 'descend',
+      sorter: (a, b) => a.applyTime - b.applyTime,
+    },
+    {
+      title: '审核状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (text: any, record: any) => {
+        let component: ReactNode = null
+        if (record.status === 1)
+          component = (<><span className="commonStatusInvalid"></span>待提交审核</>)
+        else if (record.status === 2)
+          component = (<><span className="commonStatusModify"></span>待审核</>)
+        else if (record.status === 3)
+          component = (<><span className="commonStatusStop"></span>审核不通过</>)
+        else if (record.status === 4)
+          component = (<><span className="commonStatusValid"></span>审核通过</>)
+        return component
+      }
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      render: (text: any, record: any) => {
+        return (
+          <>
+            <Button type='link' onClick={() => history.push(`/productManage/trademark/trademarkWillCheck/detail?id=${record.id}`)}>审核</Button>
+          </>
+        )
+      }
+    }
+  ]
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <StandardTable
+          columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchData(params)}
+          formilyProps={{
+            layouts: {
+              span: 4,
+            },
+            ctx: {
+              inline: false,
+              schema: {
+                type: 'object',
+                properties: {
+                  megaLayout0: {
+                    type: 'object',
+                    'x-component': 'mega-layout',
+                    "x-component-props": {
+                      grid: true,
+                      columns: 2,
+                    },
+                    properties: {
+                      name: {
+                        type: 'string',
+                        'x-component-props': {
+                          placeholder: '品牌名称',
+                        },
+                        'x-component': 'Search'
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }}
+        />
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default CheckBrand

src/pages/trademark/checkBrandDetail.tsx

+import React, { useState, ReactNode, useEffect } from 'react'
+import { history } from 'umi'
+import { Button, Steps, Card, Space, Tooltip, Row, Col, Descriptions, Table, Form, Modal, Radio, Input, Image } from 'antd'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import {
+  QuestionCircleOutlined,
+  CheckSquareOutlined,
+} from '@ant-design/icons'
+import { ColumnType } from 'antd/lib/table/interface'
+import ReutrnEle from '@/components/ReturnEle'
+import moment from 'moment'
+import styles from './index.less'
+import { getProductBrandGetBrandCheckRecord, getProductBrandGetPlatformBrand, postProductBrandCheckBrand } from '@/services/ProductV2Api'
+
+const { Step } = Steps
+const { TextArea } = Input
+
+/**
+ * 待审核品牌 详情审核
+ * @returns
+ */
+const CheckBrandDetail: React.FC<{}> = () => {
+  const [visibleModal, setVisibleModal] = useState<boolean>(false)
+  const [brandInfo, setBrandInfo] = useState<any>({})
+  const [fixStep, setFixStep] = useState(0)
+  const [recordData, setRecordData] = useState<any[]>([])
+  const [checkForm] = Form.useForm();
+  const [disableCheck, setDisableCheck] = useState<boolean>(false)
+  const [checkStatus, setCheckStatus] = useState<number>(4)
+
+  useEffect(() => {
+    const { id } = history.location.query
+    if(id){
+      loadPageData(id)
+    }
+  }, [])
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '序号',
+      dataIndex: 'id',
+      key: 'id',
+      render: (text, record, index)=> index + 1
+    },
+    {
+      title: '角色',
+      dataIndex: 'memberRoleName',
+      key: 'memberRoleName',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (text:any, record:any) => {
+        let component: ReactNode = null
+        if(record.status === 1)
+          component = (<><span className="commonStatusInvalid"></span>待提交审核</>)
+        else if(record.status === 2)
+          component = (<><span className="commonStatusModify"></span>待审核</>)
+        else if(record.status === 3)
+          component = (<><span className="commonStatusStop"></span>审核不通过</>)
+        else if(record.status === 4)
+          component = (<><span className="commonStatusValid"></span>审核通过</>)
+        return component
+      }
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      key: 'operation',
+      render: (text:any, record:any) => {
+        let component: ReactNode = null
+        if(record.operation === 1)
+          component = (<>提价审核</>)
+        else if(record.operation === 2)
+          component = (<>修改品牌</>)
+        else if(record.operation === 3)
+          component = (<>审核品牌</>)
+        return component
+      }
+    },
+    {
+      title: '操作时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      render: (text:any, record:any) => moment(text).format('YYYY-MM-DD HH:mm:ss')
+    },
+    {
+      title: '意见',
+      dataIndex: 'checkRemark',
+      key: 'checkRemark',
+    },
+  ];
+
+  const loadPageData = (id) => {
+    getProductBrandGetPlatformBrand({id: id}).then(res => {
+      if(res.code===1000){
+        setBrandInfo(res.data)
+        if(res.data.status===1)
+          setFixStep(0)
+        else if(res.data.status===2)
+          setFixStep(1)
+        else
+          setFixStep(2)
+      }
+    })
+    getProductBrandGetBrandCheckRecord({brandId: id}).then(res=> {
+      if(res.code===1000)
+        setRecordData(res.data)
+    })
+  }
+
+  const fixStatus = (state: number) => {
+    if(state === 1)
+      return <><span className="commonStatusInvalid"></span>待提交审核</>
+    else if(state === 2)
+      return <><span className="commonStatusModify"></span>待审核</>
+    else if(state === 3)
+      return <><span className="commonStatusStop"></span>审核不通过</>
+    else if(state === 4)
+      return <><span className="commonStatusValid"></span>审核通过</>
+    else if(state === 5)
+      return <><span className="commonStatusValid"></span>已上架</>
+    else if(state === 6)
+      return <><span className="commonStatusStop"></span>已下架</>
+  }
+
+  const fixProveUrl = (proveInfo: any) => {
+    if(proveInfo){
+      let imgArray = Object.values(proveInfo)
+       return imgArray.map((item: any, index: number) => <Col key={index} span={3} xxl={3} xl={4} lg={4}>
+        <div className={styles.proveBox}>
+          <Image
+            width={175}
+            height={120}
+            src={item}
+            alt="品牌相关证明材料"
+          />
+        </div>
+      </Col>
+      )
+    }
+  }
+
+  const tips = <>证明材料<Tooltip title="证明材料：如商标注册证书、品牌授权证书等证明材料"><span>&nbsp;<QuestionCircleOutlined /></span></Tooltip></>
+  const content = <>
+      <Descriptions colon={true}  style={{textAlign: 'left', marginLeft: 100, width: 800}}>
+        <Descriptions.Item span={1} label="商家名称">{brandInfo?.memberName}</Descriptions.Item>
+        <Descriptions.Item span={1} label="申请审核时间">{brandInfo.applyTime && moment(brandInfo.applyTime).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
+        <Descriptions.Item span={1} label="审核状态">
+          {
+            fixStatus(brandInfo?.status)
+          }
+        </Descriptions.Item>
+        <Descriptions.Item span={1} label="品牌状态">{brandInfo.isEnable?'有效':'无效'}</Descriptions.Item>
+      </Descriptions>
+    </>
+
+  const handleApplyCheck = () => {
+    setVisibleModal(true)
+  }
+
+  const handleOK = () => {
+    checkForm.validateFields().then(values => {
+      postProductBrandCheckBrand({ id: brandInfo?.id, ...values }).then(res=>{
+        if(res.code=1000){
+          handleCancel()
+          setDisableCheck(true)
+          loadPageData(res.data)
+        }
+      })
+    })
+  }
+
+  const handleCancel = () => {
+    checkForm.resetFields()
+    setVisibleModal(false)
+  }
+
+  const handleStatusChange = (value: any) => {
+    setCheckStatus(value.target.value)
+  }
+
+  return (
+    <PageHeaderWrapper
+      title={brandInfo?.name}
+      onBack={() => history.goBack()}
+      backIcon={<ReutrnEle logoSrc={brandInfo?.logoUrl} />}
+      content={content}
+      extra={[
+        <Button
+          icon={<CheckSquareOutlined />}
+          key="1"
+          type="primary"
+          onClick={handleApplyCheck}
+          disabled={disableCheck}
+        >
+          品牌审核
+        </Button>
+      ]}
+    >
+      <Space direction="vertical" style={{width:'100%'}}>
+        <Card headStyle={{borderBottom:'none'}} title={tips}>
+          <Row gutter={24}>
+            {
+              fixProveUrl(brandInfo.proveUrl)
+            }
+          </Row>
+        </Card>
+      </Space>
+      <Space direction="vertical" style={{width:'100%'}}>
+        <Card headStyle={{borderBottom:'none'}} title="流程进度">
+          <Steps progressDot current={fixStep}>
+            <Step title="提交审核" description="供应商" />
+            <Step title="审核品牌" description="平台" />
+            <Step title="完成" description="" />
+          </Steps>
+        </Card>
+      </Space>
+      <Space direction="vertical" style={{width:'100%'}}>
+        <Card headStyle={{borderBottom:'none'}} title="审核历史">
+          <Table dataSource={recordData} columns={columns} pagination={false} />
+        </Card>
+      </Space>
+      <Modal
+        title="品牌审核"
+        visible={visibleModal}
+        onOk={handleOK}
+        onCancel={handleCancel}
+      >
+        <Form
+          layout="vertical"
+          form={checkForm}
+        >
+          <Form.Item
+            name="status"
+            label=""
+            rules={[
+              {
+                required: true,
+                message: '请选择审核状态'
+              }
+            ]}
+            initialValue={4}
+          >
+            <Radio.Group onChange={handleStatusChange}>
+              <Radio value={4}>审核通过</Radio>
+              <Radio value={3}>审核不通过</Radio>
+            </Radio.Group>
+          </Form.Item>
+          {
+            checkStatus===3 && <Form.Item
+              name="checkRemark"
+              label='审核不通过原因'
+              rules={[
+                {
+                  required: true,
+                  message: '请填写原因'
+                }
+              ]}
+            >
+              <TextArea rows={3} maxLength={60} placeholder="请填写原因" />
+            </Form.Item>
+          }
+        </Form>
+      </Modal>
+    </PageHeaderWrapper>
+  )
+}
+
+export default CheckBrandDetail