Merge branch 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into v2

config/routes/marketingRoute/index.ts

@@ -6,22 +6,26 @@ import { selfManagementRoute } from './selfManagementRoute';
 import { paltformSignRoute } from './paltformSignRoute';
 import { selfbuiltexecutionRoute } from './selfbuiltexecutionRoute';
 import { platformexecutionRoute } from './platformexecutionRoute';
+import { selfManagementMonitorRoute } from './selfManagementMonitorRoute';
 import merchantCouponRoute from './merchantCouponRoute';
 
 
 const MarketingRoute = {
   path: "/memberCenter/marketingAbility",
-  name: "marketingAbility",
+  name: "营销能力",
   icon: "commodity",
   routes: [
     /** 自建营销活动管理 */
     ...selfManagementRoute,
     /** 平台营销活动报名 */
     ...paltformSignRoute,
-    /** 营销活动执行(自建) */
-    ...platformexecutionRoute,
-    // /** 营销活动执行(平台) */
+    /** 自建营销活动执行 */
     ...selfbuiltexecutionRoute,
+    /** 营销活动执行 */
+    ...platformexecutionRoute,
+    /** 自建营销活动监控 */
+    ...selfManagementMonitorRoute,
+    /** 商家优惠劵管理 */
     ...merchantCouponRoute,
   ],
 

config/routes/marketingRoute/platformexecutionRoute.ts

@@ -3,17 +3,17 @@ export const platformexecutionRoute = [
   // 营销活动执行(平台)
   {
     path: '/memberCenter/marketingAbility/platformexeCution',
-    name: '营销活动执行(平台)',
+    name: '平台营销活动执行',
     routes: [
       // 营销活动执行查询
       {
         path: '/memberCenter/marketingAbility/platformexeCution/search',
-        name: '平台营销活动查询',
+        name: '自建营销活动执行',
         component: '@/pages/transaction/marketingAbility/platformexeCution/search'
       },
       {
         path: '/memberCenter/marketingAbility/platformexeCution/search/detail',
-        name: '平台营销活动详情',
+        name: '自建营销活动执行详情',
         component: '@/pages/transaction/marketingAbility/platformexeCution/detail',
         hideInMenu: true,
         noMargin: true,

config/routes/marketingRoute/selfManagementMonitorRoute.ts

+export const selfManagementMonitorRoute = [
+  /*自建营销活动监控*/
+  {
+    path: '/memberCenter/marketingAbility/selfManagementMonitor',
+    name: '自建营销活动监控',
+    component: '@/pages/transaction/marketingAbility/selfManagementMonitor',
+  },
+]

config/routes/marketingRoute/selfbuiltexecutionRoute.ts

@@ -3,18 +3,18 @@ export const selfbuiltexecutionRoute = [
   /*营销活动执行(平台)*/
   {
     path: '/memberCenter/marketingAbility/selfbuiltexeCution',
-    name: '营销活动执行(自建)',
+    name: '自建营销活动执行',
     routes: [
       /*营销活动执行查询*/
       {
         path: '/memberCenter/marketingAbility/selfbuiltexeCution/search',
-        name: '平台营销活动查询',
+        name: '自建营销活动执行',
         component: '@/pages/transaction/marketingAbility/selfbuiltexeCution/search'
       },
       /*详情*/
       {
         path: '/memberCenter/marketingAbility/selfbuiltexeCution/search/detail',
-        name: '平台营销活动详情',
+        name: '自建营销活动执行详情',
         component: '@/pages/transaction/marketingAbility/selfbuiltexeCution/detail',
         hideInMenu: true,
         noMargin: true,

src/pages/transaction/components/TableLayout/index.tsx

@@ -53,12 +53,8 @@ const Table: React.FC<Iprops> = (props: any) => {
   /** 列表数据 */
   const fetchData = (params?: any) => {
     return new Promise((resolve, reject) => {
-      // fetch({ ...params }).then(res => {
-      //   resolve(res.data)
-      // })
-      resolve({
-        code: 1000,
-        data: fetch,
+      fetch({ ...params }).then(res => {
+        resolve(res.data)
       })
     })
   }

src/pages/transaction/components/detailLayout/components/listLayout/index.tsx

@@ -15,7 +15,7 @@ export interface ListLayoutIProps {
   columns: ColumnType<any>[],
   /** 接口 */
   fetch?: () => Promise<unknown>,
-  /** 是否请求 */
+  /** 是否不发送请求 */
   done?: boolean,
   /** 展示的数据 */
   data?: [],
@@ -58,7 +58,9 @@ const ListLayout: React.FC<ListLayoutIProps> = (props: any) => {
           rowKey="id"
           columns={columns}
           dataSource={data}
-          pagination={false}
+          pagination={{
+            size: 'small'
+          }}
         />
       )}
     </Card>

src/pages/transaction/dealAbility/confirmOffer/detail/index.tsx

@@ -14,6 +14,7 @@ import ListLayout from '@/pages/transaction/components/detailLayout/components/l
 import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
 import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
 import ModalOperate from '@/pages/transaction/components/modalOperate';
+import { ENTERPRISE_CENTER_URL } from '@/constants';
 
 const TABLINK = [
   { id: 'progressLayout', title: '流转进度' },
@@ -55,7 +56,7 @@ const ConfirmOfferDetail = () => {
       {
         col: [
           { label: '对应询价单号', extra: data.inquiryListNo },
-          { label: '询价会员', extra: data.memberName },
+          { label: '报价会员', extra: data.supplyMembersName },
           { label: '报价截止时间', extra: format(data.quotationAsTime) },
         ]
       },
@@ -98,7 +99,7 @@ const ConfirmOfferDetail = () => {
           {
             label: '附件',
             extra: <>
-              {data.enclosureUrls.map((item: any, index: number) => (
+              {data.enclosureUrls && data.enclosureUrls.map((item: any, index: number) => (
                 <Typography.Link
                   style={{ display: 'block', paddingBottom: '8px' }}
                   key={`link_${index + 1}`}
@@ -117,7 +118,7 @@ const ConfirmOfferDetail = () => {
   }
 
   const fetchDataSource = async () => {
-    await PublicApi.getTransactionNotarizeEnquiryProductQuotationDetails({ id }).then(res => {
+    await PublicApi.getTransactionNotarizeEnquiryProductQuotationDetails({ id }).then((res: any) => {
       if (res.code !== 1000) {
         history.goBack();
         return;
@@ -145,7 +146,7 @@ const ConfirmOfferDetail = () => {
       dataIndex: 'productId',
       render: (productId, data) => (
         <Space direction='vertical'>
-          <Typography.Link target="_blank" href={`/shop/commodity/detail?id=${productId}&type=2&shopId=${btoa(JSON.stringify({ roleId: data.memberRoleId, memberId: data.memberId }))}`}>{productId}</Typography.Link>
+          <Typography.Link target="_blank" href={`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${productId}`}>{productId}</Typography.Link>
           <Typography.Text>{data.productName}</Typography.Text>
         </Space>
       )
@@ -173,8 +174,8 @@ const ConfirmOfferDetail = () => {
     },
     {
       title: '含税/税率',
-      key: 'purchaseCount',
-      dataIndex: 'purchaseCount',
+      key: 'isTax',
+      dataIndex: 'isTax',
     },
     {
       title: '报价单价',

src/pages/transaction/dealAbility/confirmOffer/offerSearch/index.tsx

@@ -39,8 +39,8 @@ const OfferSearch = () => {
     },
     {
       title: '报价会员',
-      key: 'memberName',
-      dataIndex: 'memberName',
+      key: 'offerMemberName',
+      dataIndex: 'offerMemberName',
     },
     {
       title: '报价截止时间',
@@ -75,7 +75,7 @@ const OfferSearch = () => {
       effects="quotationNo"
       fetch={PublicApi.getTransactionNotarizeEnquiryProductQuotationList}
       reload={reload}
-      externalStatusFetch={PublicApi.getTransactionProductInquiryExternalStateEnum({ type: '3' })}
+      externalStatusFetch={PublicApi.getTransactionNotarizeEnquiryExternalStateEnum()}
       interiorStatusFetch={PublicApi.getTransactionProductInquiryInteriorStateEnum({ type: '3' })}
     />
   )

src/pages/transaction/dealAbility/confirmOffer/preview/index.tsx

@@ -14,6 +14,7 @@ import ListLayout from '@/pages/transaction/components/detailLayout/components/l
 import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
 import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
 import EyePreview from '@/components/EyePreview';
+import { ENTERPRISE_CENTER_URL } from '@/constants';
 
 const TABLINK = [
   { id: 'progressLayout', title: '流转进度' },
@@ -56,7 +57,7 @@ const ConfirmOfferPreview = () => {
       },
       {
         col: [
-          { label: '询价会员', extra: data.inquiryListMemberName },
+          { label: '询价会员', extra: data.createMemberName },
           { label: '单据时间', extra: format(data.voucherTime) },
         ]
       },
@@ -96,7 +97,7 @@ const ConfirmOfferPreview = () => {
           {
             label: '附件',
             extra: <>
-              {data.enclosureUrls.map((item: any, index: number) => (
+              {data.enclosureUrls && data.enclosureUrls.map((item: any, index: number) => (
                 <Typography.Link
                   style={{ display: 'block', paddingBottom: '8px' }}
                   key={`link_${index + 1}`}
@@ -115,7 +116,7 @@ const ConfirmOfferPreview = () => {
   }
 
   const fetchDataSource = async () => {
-    await PublicApi.getTransactionNotarizeEnquiryQuotedPriceDetails({ id }).then(res => {
+    await PublicApi.getTransactionNotarizeEnquiryQuotedPriceDetails({ id }).then((res: any) => {
       if (res.code !== 1000) {
         history.goBack();
         return;
@@ -137,7 +138,7 @@ const ConfirmOfferPreview = () => {
   }, [])
 
   const handleJump = (data:any) => {
-    window.open(`/shop/commodity/detail?id=${data.productId}&type=2&shopId=${btoa(JSON.stringify({ roleId: data.memberRoleId, memberId: data.memberId }))}`)
+    window.open(`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${data.productId}`)
   }
 
   const columns: ColumnType<any>[] = [
@@ -145,6 +146,7 @@ const ConfirmOfferPreview = () => {
       title: 'ID',
       key: 'id',
       dataIndex: 'id',
+
     },
     {
       title: '商品名称',
@@ -189,7 +191,8 @@ const ConfirmOfferPreview = () => {
               anchor="inquiryProductLayout"
               title="询价商品"
               columns={columns}
-              fetch={PublicApi.getTransactionEnquiryProductList}
+              done
+              data={dataSource.inquiryListProductRequests}
             />
             <GeneralLayout
               anchor="conditionLayout"

src/pages/transaction/dealAbility/confirmOffer/waitAuditInquiryOne/index.tsx

@@ -45,8 +45,8 @@ const WaitAuditInquiryOne = () => {
     },
     {
       title: '报价会员',
-      key: 'memberName',
-      dataIndex: 'memberName',
+      key: 'offerMemberName',
+      dataIndex: 'offerMemberName',
     },
     {
       title: '报价截止时间',

src/pages/transaction/dealAbility/confirmOffer/waitAuditInquiryTwo/index.tsx

@@ -45,8 +45,8 @@ const WaitAuditInquiryOne = () => {
     },
     {
       title: '报价会员',
-      key: 'memberName',
-      dataIndex: 'memberName',
+      key: 'offerMemberName',
+      dataIndex: 'offerMemberName',
     },
     {
       title: '报价截止时间',

src/pages/transaction/dealAbility/confirmOffer/waitSubmitAuditOffer/index.tsx

@@ -50,8 +50,8 @@ const WaitSubmitAuditOffer = () => {
     },
     {
       title: '报价会员',
-      key: 'memberName',
-      dataIndex: 'memberName',
+      key: 'offerMemberName',
+      dataIndex: 'offerMemberName',
     },
     {
       title: '报价截止时间',

src/pages/transaction/dealAbility/confirmOffer/waitSubmitOffer/index.tsx

@@ -49,8 +49,8 @@ const WaitSubmitOffer = () => {
     },
     {
       title: '报价会员',
-      key: 'memberName',
-      dataIndex: 'memberName',
+      key: 'offerMemberName',
+      dataIndex: 'offerMemberName',
     },
     {
       title: '报价截止时间',

src/pages/transaction/dealAbility/inquiryOffer/detail/index.tsx

@@ -5,6 +5,7 @@ import { ColumnType } from 'antd/lib/table/interface';
 import PeripheralLayout from '@/pages/transaction/components/detailLayout';
 import { Context } from '@/pages/transaction/components/detailLayout/components/context';
 import moment from 'moment';
+import { ENTERPRISE_CENTER_URL } from '@/constants'
 import { PublicApi } from '@/services/api';
 import { ENTERPRISE_CENTER_URL } from '@/constants'
 import { CheckCircleOutlined, LinkOutlined } from '@ant-design/icons';
@@ -118,7 +119,7 @@ const InquiryOfferDetail = () => {
   }
 
   const fetchDataSource = async () => {
-    await PublicApi.getTransactionProductQuotationDetails({ id }).then(res => {
+    await PublicApi.getTransactionProductQuotationDetails({ id }).then((res: any) => {
       if (res.code !== 1000) {
         history.goBack();
         return;

src/pages/transaction/dealAbility/inquiryOffer/inquirySearch/index.tsx

@@ -74,7 +74,7 @@ const InquirySearch = () => {
       effects="inquiryListNo"
       fetch={PublicApi.getTransactionProductInquiryList}
       reload={reload}
-      externalStatusFetch={PublicApi.getTransactionProductInquiryExternalStateEnum({ type: '1' })}
+      externalStatusFetch={PublicApi.getTransactionQuotationtInquiryExternalStateEnum()}
     />
   )
 }

src/pages/transaction/dealAbility/inquiryOffer/offerSearch/index.tsx

@@ -75,7 +75,7 @@ const OfferSearch = () => {
       effects="quotationNo"
       fetch={PublicApi.getTransactionProductQuotationList}
       reload={reload}
-      externalStatusFetch={PublicApi.getTransactionProductInquiryExternalStateEnum({ type: '2' })}
+      externalStatusFetch={PublicApi.getTransactionQuotationtInquiryExternalStateEnum()}
       interiorStatusFetch={PublicApi.getTransactionProductInquiryInteriorStateEnum({ type: '2' })}
     />
   )

src/pages/transaction/dealAbility/inquiryOffer/preview/index.tsx

@@ -14,6 +14,7 @@ import ListLayout from '@/pages/transaction/components/detailLayout/components/l
 import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
 import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
 import EyePreview from '@/components/EyePreview';
+import { ENTERPRISE_CENTER_URL } from '@/constants';
 
 const TABLINK = [
   { id: 'progressLayout', title: '流转进度' },
@@ -56,7 +57,7 @@ const InquiryOfferPreview = () => {
       },
       {
         col: [
-          { label: '询价会员', extra: data.inquiryListMemberName },
+          { label: '询价会员', extra: data.createMemberName },
           { label: '单据时间', extra: format(data.voucherTime) },
         ]
       },
@@ -115,7 +116,7 @@ const InquiryOfferPreview = () => {
   }
 
   const fetchDataSource = async () => {
-    await PublicApi.getTransactionProductInquiryDetails({ id }).then(res => {
+    await PublicApi.getTransactionProductInquiryDetails({ id }).then((res: any) => {
       if (res.code !== 1000) {
         history.goBack();
         return;
@@ -135,7 +136,7 @@ const InquiryOfferPreview = () => {
   }, [])
 
   const handleJump = (data:any) => {
-    window.open(`/shop/commodity/detail?id=${data.productId}&type=2&shopId=${btoa(JSON.stringify({ roleId: data.memberRoleId, memberId: data.memberId }))}`)
+    window.open(`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${data.productId}`)
   }
 
   const columns: ColumnType<any>[] = [
@@ -187,7 +188,8 @@ const InquiryOfferPreview = () => {
               anchor="inquiryProductLayout"
               title="询价商品"
               columns={columns}
-              fetch={PublicApi.getTransactionEnquiryProductList}
+              done
+              data={dataSource.inquiryListProductRequests}
             />
             <GeneralLayout
               anchor="conditionLayout"

src/pages/transaction/dealAbility/inquiryOffer/waitAddOffer/components/basicInfo.tsx

@@ -94,7 +94,7 @@ const BasicInfoLayout: React.FC<BasicInfoLayoutProps> = (props: any) => {
       <Row gutter={[48, 24]}>
         <Col span={12} className={style.searchColor}>
           <Form.Item label="报价单摘要" name="details" rules={[{ required: true, message: '请输入报价单摘要' }]}>
-            <Input />
+            <Input maxLength={30} placeholder="最长60字符，30个汉字" />
           </Form.Item>
           <Form.Item label="对应询价单号" name='inquiryListNo' rules={[{ required: true, message: '请选择对应询价单号' }]}>
             <Input.Search onClick={hanleGoOrderInfo} readOnly onSearch={() => toggle(true)} enterButton={<Button disabled={isEdit} style={{ height: '31.19px' }} icon={<LinkOutlined />}>选择</Button>} />

src/pages/transaction/dealAbility/inquiryOffer/waitAddOffer/components/otherExplain.tsx

@@ -15,28 +15,37 @@ const OtherExplainLayout: React.FC<OtherExplainLayoutProps> = (props: any) => {
     >
       <Row gutter={[48, 24]}>
         <Col span={12}>
-          <Form.Item label='最小起订' name='minimumOrder' rules={[{ required: true, message: '请输入最小起订' }]}>
-            <InputNumber style={{ width: '100%' }} />
+          <Form.Item label='最小起订' name='minimumOrder' rules={[
+            {
+              required: true,
+              message: '请输入最小起订数'
+            },
+            {
+              pattern: /^\d+(\.\d{1,3})?$/,
+              message: '最小起订数小数点后仅限三位',
+            }
+          ]}>
+            <InputNumber min={0} style={{ width: '100%' }} />
           </Form.Item>
           <Form.Item label='交付说明' name='deliveryInstructions'>
-            <Input.TextArea autoSize placeholder='最长100个字符，50个汉字' />
+            <Input.TextArea maxLength={50} autoSize placeholder='最长100个字符，50个汉字' />
           </Form.Item>
           <Form.Item label='付款说明' name='paymentType'>
-            <Input.TextArea autoSize placeholder='最长100个字符，50个汉字' />
+            <Input.TextArea maxLength={50} autoSize placeholder='最长100个字符，50个汉字' />
           </Form.Item>
           <Form.Item label='税费说明' name='taxes'>
-            <Input.TextArea autoSize placeholder='最长100个字符，50个汉字' />
+            <Input.TextArea maxLength={50} autoSize placeholder='最长100个字符，50个汉字' />
           </Form.Item>
         </Col>
         <Col span={12}>
           <Form.Item label='物流说明' name='logistics'>
-            <Input.TextArea autoSize placeholder='最长100个字符，50个汉字' />
+            <Input.TextArea maxLength={50} autoSize placeholder='最长100个字符，50个汉字' />
           </Form.Item>
           <Form.Item label='包装说明' name='packRequire'>
-            <Input.TextArea autoSize placeholder='最长100个字符，50个汉字' />
+            <Input.TextArea maxLength={50} autoSize placeholder='最长100个字符，50个汉字' />
           </Form.Item>
           <Form.Item label='其他说明' name='otherRequire'>
-            <Input.TextArea autoSize placeholder='最长100个字符，50个汉字' />
+            <Input.TextArea maxLength={50} autoSize placeholder='最长100个字符，50个汉字' />
           </Form.Item>
         </Col>
       </Row>

src/pages/transaction/dealAbility/productInquiry/detail/index.tsx

@@ -14,6 +14,8 @@ import ListLayout from '@/pages/transaction/components/detailLayout/components/l
 import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
 import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
 import ModalOperate from '@/pages/transaction/components/modalOperate';
+import { ENTERPRISE_CENTER_URL } from '@/constants';
+import EyePreview from '@/components/EyePreview';
 
 const TABLINK = [
   { id: 'progressLayout', title: '流转进度' },
@@ -117,7 +119,7 @@ const ProductInquiryDetail = () => {
   }
 
   const fetchDataSource = async () => {
-    await PublicApi.getTransactionInquiryListDetails({ id }).then(res => {
+    await PublicApi.getTransactionInquiryListDetails({ id }).then((res: any) => {
       if (res.code !== 1000) {
         history.goBack();
         return;
@@ -138,6 +140,10 @@ const ProductInquiryDetail = () => {
     fetchDataSource();
   }, [])
 
+  const handleJump = (data:any) => {
+    window.open(`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${data.productId}`)
+  }
+
   const columns: ColumnType<any>[] = [
     {
       title: 'ID',
@@ -148,6 +154,7 @@ const ProductInquiryDetail = () => {
       title: '商品名称',
       key: 'productName',
       dataIndex: 'productName',
+      render: (text: any, record: any) => <EyePreview type='button' handleClick={() => handleJump(record)}>{text}</EyePreview>
     },
     {
       title: '品类',
@@ -213,7 +220,9 @@ const ProductInquiryDetail = () => {
               anchor="inquiryProductLayout"
               title="询价商品"
               columns={columns}
-              fetch={PublicApi.getTransactionEnquiryProductList}
+              done
+              data={dataSource.inquiryListProductRequests}
+              // fetch={PublicApi.getTransactionEnquiryProductList}
             />
             <GeneralLayout
               anchor="conditionLayout"

src/pages/transaction/dealAbility/productInquiry/waitAddInquiry/components/inquiryProduct.tsx

 import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Form, Table, InputNumber, Image, message } from 'antd';
+import { Button, Form, Table, InputNumber, Image, message, Typography } from 'antd';
+import { ENTERPRISE_CENTER_URL } from '@/constants';
 import Card from '@/pages/transaction/components/card';
 import { PlusOutlined } from '@ant-design/icons';
 import { ColumnType } from 'antd/lib/table/interface';
@@ -48,6 +49,7 @@ const InquiryProductLayout: React.FC<InquiryProductLayoutProps> = (props: any) =
       title: "商品ID",
       key: "productId",
       dataIndex: "productId",
+      render: (productId, data) => <Typography.Link target="_blank" href={`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${productId}`}>{productId}</Typography.Link>
     },
     {
       title: "商品图片",
@@ -81,7 +83,7 @@ const InquiryProductLayout: React.FC<InquiryProductLayoutProps> = (props: any) =
       dataIndex: "purchaseCount",
       render: (text, _data, index) => (
         <Form.Item initialValue={text} name={`purchaseCount${index}`} rules={[{ required: true, message: '请输入采购数量' }]} style={{ marginBottom: '0px' }}>
-          <InputNumber min={1} onChange={(val) => setInputNumber(val, index)} />
+          <InputNumber min={1} maxLength={8} onChange={(val) => setInputNumber(val, index)} />
         </Form.Item>
 
       )

src/pages/transaction/logisticsAbility/logisticsAdminister/logisticsCompanyManage/add.tsx

@@ -199,6 +199,7 @@ const LogisticsCompanyManageAdded = (props: any) => {
         title="选择平台物流服务商"
         mode="radio"
         modalType="Drawer"
+        customKey="memberId"
         columns={columns}
         schema={logisticsSchema}
         fetchData={handleFetchData}

src/pages/transaction/logisticsAbility/logisticsAdminister/logisticsCompanyManage/schema.ts

@@ -149,7 +149,7 @@ export const logisticsSchema: ISchema = {
                 placeholder: '选择会员角色',
                 fetchSearch: () => {
                   return new Promise(resolve => {
-                    PublicApi.getMemberManageRoleAll().then(res => {
+                    PublicApi.getMemberManageRoleAll({ roleTypeEnum: '1' }).then(res => {
                       res.data.forEach((item:any) => {
                         item.id = item.roleId;
                         item.name = item.roleName;

src/pages/transaction/marketingAbility/selfManagementMonitor/components/activityLayout/index.less

+.col {
+  display: flex;
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #FFF;
+  .col_20 {
+    flex: 4 4 auto ;
+  }
+  .col_icon {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    color: #FFFF;
+    .col_icon_fontSize {
+      font-size: 16px;
+    }
+  }
+}

src/pages/transaction/marketingAbility/selfManagementMonitor/components/activityLayout/index.tsx

+import React from 'react';
+import { Row, Col, Typography } from 'antd';
+import style from './index.less';
+import { BellOutlined, CheckCircleOutlined, ClockCircleOutlined, StockOutlined } from '@ant-design/icons';
+
+const ActivityLayout = () => {
+  return (
+    <Row gutter={[16, 16]}>
+      <Col xl={{ span: 6 }} span={12}>
+        <div className={style.col}>
+          <div className={style.col_20}>
+            <Typography.Title level={4}>10</Typography.Title>
+            <Typography.Text type='secondary'>今日正在执行活动数量 (个)</Typography.Text>
+          </div>
+          <div className={style.col_4}>
+            <div className={style.col_icon} style={{ backgroundColor: '#00A98F' }}>
+              <BellOutlined className={style.col_icon_fontSize} />
+            </div>
+          </div>
+        </div>
+      </Col>
+      <Col xl={{ span: 6 }} span={12}>
+        <div className={style.col}>
+          <div className={style.col_20}>
+            <Typography.Title level={4}>100</Typography.Title>
+            <Typography.Text type='secondary'>今日参与活动总客户数 (人)</Typography.Text>
+          </div>
+          <div className={style.col_4}>
+            <div className={style.col_icon} style={{ backgroundColor: '#007BFC' }}>
+              <ClockCircleOutlined className={style.col_icon_fontSize} />
+            </div>
+          </div>
+        </div>
+      </Col>
+      <Col xl={{ span: 6 }} span={12}>
+        <div className={style.col}>
+          <div className={style.col_20}>
+            <Typography.Title level={4}>100</Typography.Title>
+            <Typography.Text type='secondary'>今日活动商品总订单数量 (单)</Typography.Text>
+          </div>
+          <div className={style.col_4}>
+            <div className={style.col_icon} style={{ backgroundColor: '#EB9B00' }}>
+              <CheckCircleOutlined className={style.col_icon_fontSize} />
+            </div>
+          </div>
+        </div>
+      </Col>
+      <Col xl={{ span: 6 }} span={12}>
+        <div className={style.col}>
+          <div className={style.col_20}>
+            <Typography.Title level={4}>10,000.00</Typography.Title>
+            <Typography.Text type='secondary'>今日活动商品总购买金额 (元)</Typography.Text>
+          </div>
+          <div className={style.col_4}>
+            <div className={style.col_icon} style={{ backgroundColor: '#EF3346' }}>
+              <StockOutlined className={style.col_icon_fontSize} />
+            </div>
+          </div>
+        </div>
+      </Col>
+    </Row>
+  )
+}
+export default ActivityLayout;

src/pages/transaction/marketingAbility/selfManagementMonitor/components/productListLayout/index.less

+.card {
+  margin: 16px 0px;
+  border-radius: 8px;
+  background-color: #FFF;
+  .card_title {
+    padding: 17px 16px;
+    font-size: 14px;
+    color: #252D37;
+  }
+  .card_list {
+    padding: 0px 16px;
+    .card_list_item {
+      display: flex;
+      position: relative;
+      padding: 8px 0px;
+      .card_list_item_sort {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 8px;
+        font-size: 14px;
+        .card_list_item_sort_number {
+          width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .card_list_item_img {
+        width: 48px;
+        height: 48px;
+        border-radius: 4px;
+        overflow: hidden;
+        border: 1px solid #F5F6F7;
+        box-sizing: border-box;
+        margin-right: 12px;
+        position: relative;
+        z-index: 1;
+      }
+      .card_list_item_info {
+        position: absolute;
+        padding-left: 95px;
+        width: 100%;
+        :global {
+          div.ant-typography, .ant-typography p {
+            margin-bottom: 6px;
+          }
+        }
+        .info_icon_style {
+          font-size: 12px;
+          margin: 0 2px;
+        }
+      }
+      .card_list_item_tag {
+        padding: 2px 4px;
+        color: #EF3346;
+        background-color: #FFF0F2;
+        border-radius: 2px;
+        position: absolute;
+        bottom: 12px;
+        right: 0;
+      }
+    }
+    .card_list_wran {
+      padding-bottom: 12px;
+      display: block;
+      text-align: center;
+    }
+  }
+}

src/pages/transaction/marketingAbility/selfManagementMonitor/components/productListLayout/index.tsx

+import React from 'react';
+import { Typography, Image } from 'antd';
+import style from './index.less';
+import { CaretUpOutlined } from '@ant-design/icons';
+
+interface ProductListLayoutProps {
+  /** 标题 */
+  title?: string,
+  /** 列表数据 */
+  dataSource?: any[],
+}
+
+const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
+  const { title, dataSource } = props;
+  const data = [
+    { sort: 1, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+    { sort: 2, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+    { sort: 3, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+    { sort: 4, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+    { sort: 5, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+    { sort: 6, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+    { sort: 7, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+    { sort: 8, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+    { sort: 9, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+    { sort: 10, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
+  ]
+  return (
+    <div className={style.card}>
+      <div className={style.card_title}>今日活动商品购买排名</div>
+      <div className={style.card_list}>
+        {data.map(item => (
+          <div className={style.card_list_item} key={item.sort}>
+            <div className={style.card_list_item_sort}>
+              <div className={style.card_list_item_sort_number}>{item.sort}</div>
+            </div>
+            <div className={style.card_list_item_img}>
+              <Image width={48} height={48} src={item.img} />
+            </div>
+            <div className={style.card_list_item_info}>
+              <Typography.Paragraph ellipsis={{ rows: 1, expandable: false }}>{item.name}</Typography.Paragraph>
+              <div>
+                <Typography.Text type="secondary">{item.number}件，相比昨日</Typography.Text>
+                <Typography.Text type="danger"><CaretUpOutlined className={style.info_icon_style} />{item.percentum}%</Typography.Text>
+              </div>
+            </div>
+            <div className={style.card_list_item_tag}>{item.tag}</div>
+          </div>
+        ))}
+        <Typography.Text className={style.card_list_wran} type='secondary'>只展示前 10 名数据</Typography.Text>
+      </div>
+    </div>
+  )
+}
+export default ProductListLayout;

src/pages/transaction/marketingAbility/selfManagementMonitor/index.tsx

+import React from 'react';
+import { Row, Col, Card } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ActivityLayout from './components/activityLayout';
+import ProductListLayout from './components/productListLayout';
+
+const SelfManagementMonitor = () => {
+  return (
+    <PageHeaderWrapper>
+      <ActivityLayout />
+      <Row gutter={[16, 16]}>
+        <Col xl={{ span: 18 }} span={14}>1</Col>
+        <Col xl={{ span: 6 }} span={10}>
+          <ProductListLayout />
+          <ProductListLayout />
+        </Col>
+      </Row>
+    </PageHeaderWrapper>
+  )
+}
+export default SelfManagementMonitor;