feat: 完成 商家优惠券页面 UI相关

src/pages/transaction/marketingAbility/merchantCoupon/merchantCouponAnalysis/deliver/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-28 17:51:33
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-28 17:53:45
+ * @Description: 
+ */
+import React, { useState, useEffect } from 'react';
+import {
+  Row,
+  Col,
+  Spin,
+} from 'antd';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberV2Api';
+import AnchorPage from '@/layouts/AnchorPage';
+import AuditProcess from '@/components/AuditProcess';
+import BacisInfo from '../../components/BacisInfo';
+import CouponRules from '../../components/CouponRules';
+import DeliverCoupon from '../../components/DeliverCoupon';
+
+const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
+  const { id } = usePageStatus();
+  const [memberInfo, setMemberInfo] = useState<GetMemberAbilityMaintenanceDetailBasicResponse>(null);
+  const [infoLoading, setInfoLoaading] = useState(false);
+
+  const getBasicInfo = () => {
+    if (!id) {
+      return;
+    }
+    setInfoLoaading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailBasic({
+      validateId: id,
+    }).then(res => {
+      if (res.code === 1000) {
+        setMemberInfo(res.data);
+      }
+    }).finally(() => {
+      setInfoLoaading(false);
+    });
+  };
+
+  useEffect(() => {
+    getBasicInfo();
+  }, []);
+
+  const anchorsArr = [
+    {
+      key: 'verifySteps',
+      name: '流转进度',
+    },
+    {
+      key: 'basicInfo',
+      name: '基本信息',
+    },
+    {
+      key: 'couponRules',
+      name: '优惠券规则',
+    },
+    {
+      key: 'deliverCoupon',
+      name: '发券明细',
+    },
+  ].filter(Boolean);
+
+  return (
+    <Spin spinning={infoLoading}>
+      <AnchorPage
+        title={memberInfo?.name}
+        anchors={anchorsArr}
+      >
+        <Row gutter={[16, 16]}>
+          {/* 流转记录 */}
+          <Col span={24}>
+            <AuditProcess
+              innerVerifySteps={memberInfo?.innerVerifySteps}
+              innerVerifyCurrent={memberInfo?.currentInnerStep}
+              id="verifySteps"
+            />
+          </Col>
+          
+          {/* 基本信息 */}
+          <Col span={24}>
+            <BacisInfo
+              dataSource={{}}
+              id="basicInfo"
+            />
+          </Col>
+          
+          {/* 优惠券规则 */}
+          <Col span={24}>
+            <CouponRules
+              dataSource={{}}
+              id="couponRules"
+            />
+          </Col>
+          
+          {/* 优惠券规则 */}
+          <Col span={24}>
+            <DeliverCoupon
+              id="deliverCoupon"
+            />
+          </Col>
+        </Row>
+      </AnchorPage>
+    </Spin>
+  );
+};
+
+export default MerchantCouponAnalysisDeliver;

src/pages/transaction/marketingAbility/merchantCoupon/merchantCouponAnalysis/detail/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-28 17:49:52
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-28 18:15:21
+ * @Description: 
+ */
+import React, { useState, useEffect } from 'react';
+import {
+  Row,
+  Col,
+  Spin,
+} from 'antd';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberV2Api';
+import AnchorPage from '@/layouts/AnchorPage';
+import AuditProcess from '@/components/AuditProcess';
+import BacisInfo from '../../components/BacisInfo';
+import CouponRules from '../../components/CouponRules';
+import RunningInfo from '../../components/RunningInfo';
+
+const MerchantCouponAnalysisDetail: React.FC<{}> = () => {
+  const { id } = usePageStatus();
+  const [memberInfo, setMemberInfo] = useState<GetMemberAbilityMaintenanceDetailBasicResponse>(null);
+  const [infoLoading, setInfoLoaading] = useState(false);
+
+  const getBasicInfo = () => {
+    if (!id) {
+      return;
+    }
+    setInfoLoaading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailBasic({
+      validateId: id,
+    }).then(res => {
+      if (res.code === 1000) {
+        setMemberInfo(res.data);
+      }
+    }).finally(() => {
+      setInfoLoaading(false);
+    });
+  };
+
+  useEffect(() => {
+    getBasicInfo();
+  }, []);
+
+  const anchorsArr = [
+    {
+      key: 'verifySteps',
+      name: '流转进度',
+    },
+    {
+      key: 'basicInfo',
+      name: '基本信息',
+    },
+    {
+      key: 'couponRules',
+      name: '优惠券规则',
+    },
+    {
+      key: 'runningInfo',
+      name: '执行明细',
+    },
+  ].filter(Boolean);
+
+  return (
+    <Spin spinning={infoLoading}>
+      <AnchorPage
+        title={memberInfo?.name}
+        anchors={anchorsArr}
+      >
+        <Row gutter={[16, 16]}>
+          {/* 流转记录 */}
+          <Col span={24}>
+            <AuditProcess
+              innerVerifySteps={memberInfo?.innerVerifySteps}
+              innerVerifyCurrent={memberInfo?.currentInnerStep}
+              id="verifySteps"
+            />
+          </Col>
+          
+          {/* 基本信息 */}
+          <Col span={24}>
+            <BacisInfo
+              dataSource={{}}
+              id="basicInfo"
+            />
+          </Col>
+          
+          {/* 优惠券规则 */}
+          <Col span={24}>
+            <CouponRules
+              dataSource={{}}
+              id="couponRules"
+            />
+          </Col>
+          
+          {/* 优惠券规则 */}
+          <Col span={24}>
+            <RunningInfo
+              id="runningInfo"
+            />
+          </Col>
+        </Row>
+      </AnchorPage>
+    </Spin>
+  );
+};
+
+export default MerchantCouponAnalysisDetail;

src/pages/transaction/marketingAbility/merchantCoupon/merchantCouponAnalysis/index.tsx

@@ -2,15 +2,147 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-22 11:10:57
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-22 11:11:38
+ * @LastEditTime: 2021-06-28 17:47:58
  * @Description: 商家优惠劵执行
  */
-import React from 'react';
-import styles from './index.less';
+import React, { useRef } from 'react';
+import { history } from 'umi';
+import {
+  Card,
+  Space,
+  Button,
+} from 'antd';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+import { createFormActions } from '@formily/antd';
+import { DatePicker } from '@formily/antd-components';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import NiceForm from '@/components/NiceForm';
+import { PublicApi } from '@/services/api';
+import useSpliceArray from '@/hooks/useSpliceArray';
+import verifySchema from '../common/schemas/verify';
+import commonColumn from '../common/columns/coupon';
+
+const formActions = createFormActions();
 
 const MerchantCouponAnalysis: React.FC = () => {
+  const ref = useRef<any>({});
+
+  const fetchData = async (params: any) => {
+    let res = await PublicApi.getMemberAbilityMaintenancePage(params);
+    return res.data;
+  };
+
+  const baseColumns: ColumnType<any>[]  = commonColumn('/memberCenter/marketingAbility/merchantCoupon/analysis/detail');
+  baseColumns.pop();
+  const defaultColumns = baseColumns.concat([
+    {
+      title: '已领取',
+      dataIndex: 'received',
+    },
+    {
+      title: '已使用',
+      dataIndex: 'used',
+    },
+    {
+      title: '已过期',
+      dataIndex: 'expired',
+    },
+    {
+      title: '内部状态',
+      dataIndex: 'statusName',
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      align: 'center',
+      render: (_, record) => (
+        <>
+          <Button
+            type="link"
+            onClick={() => history.push(`/memberCenter/marketingAbility/merchantCoupon/analysis/deliver?id=${record.validateId}`)}
+          >
+            发券
+          </Button>
+        </>
+      ),
+    },
+  ]);
+
+  const [columns, columnsHandle] = useSpliceArray<ColumnType<any>>(defaultColumns);
+
+  // 初始化高级筛选选项
+  const fetchSelectOptions = async () => {
+    const res = await PublicApi.getMemberAbilityInfoPageitems();
+
+    if (res.code === 1000) {
+      const { data = {} }: any = res;
+      const { 
+        outerStatus = [], 
+      } = data;
+
+      const outerIndex = columns.findIndex((item) => item.dataIndex === 'memberTypeName');
+      
+      if (outerIndex) {
+        columnsHandle.replace(outerIndex, {
+          ...columns[outerIndex],
+          filters: outerStatus.map(item => ({ text: item.text, value: item.id })).filter(item => item.value !== 0),
+        });
+      }
+
+      return {
+        innerStatus: outerStatus.map(item => ({ label: item.text, value: item.id })), 
+      };
+    }
+    return {};
+  };
+
+  const ControllerBtns = () => (
+    <Space size={16}>
+      <Button
+        onClick={() => {}}
+      >
+        批量审核通过
+      </Button>
+    </Space>
+  );
+  
   return (
-    <div>MerchantCouponAnalysis</div>
+    <Card>
+      <StandardTable
+        tableProps={{
+          rowKey: 'validateId',
+        }}
+        columns={columns}
+        currentRef={ref}
+        fetchTableData={(params: any) => fetchData(params)}
+        controlRender={
+          <NiceForm
+            actions={formActions}
+            components={{
+              ControllerBtns,
+              RangePicker: DatePicker.RangePicker,
+            }}
+            onSubmit={values => ref.current.reload(values)}
+            effects={($, actions) => {
+              useStateFilterSearchLinkageEffect(
+                $,
+                actions,
+                'name',
+                FORM_FILTER_PATH,
+              );
+              useAsyncInitSelect(
+                ['outerStatus'],
+                fetchSelectOptions,
+              );
+            }}
+            schema={verifySchema}
+          />
+        }
+      />
+    </Card>
   );
 };