feat: 对接今日待办

src/pages/srmHome/components/TodoCard/index.less

@@ -19,10 +19,14 @@
       margin-right: @margin-md;
       margin-bottom: @margin-md;
       background-color: #EBF9F6;
-      color: @primary-color;
+      color: @text-color-secondary;
       border-radius: 2px;
       cursor: pointer;
 
+      &-active {
+        color: @primary-color;
+      }
+
       &:hover {
         background-color: rgba(34,41,50,0.04);
       }
@@ -46,8 +50,10 @@
 
     &-group {
       display: inline-block;
-      width: 50%;
       padding-left: @margin-md;
+      width: 50%;
+      min-height: 184px;
+      vertical-align: middle;
     }
 
     &-item {

src/pages/srmHome/components/TodoCard/index.tsx

 /**
  * @Description 欢迎卡片
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { message } from 'antd';
+import classNames from 'classnames';
+import { history } from 'umi';
+import { SRM_HOME_TODO } from '@/constants/home';
+import { IRequestSuccess } from '@/index';
+import { getAuth } from '@/utils/auth';
+import {
+  getReportMemberHomeGetAfterSaleTally,
+  getReportMemberHomeGetCommodityTally,
+  getReportMemberHomeGetContractTally,
+  getReportMemberHomeGetLogisticsTally,
+  getReportMemberHomeGetMemberTally,
+  getReportMemberHomeGetOrderTally,
+  getReportMemberHomeGetPurchaseTally,
+  getReportMemberHomeGetSettleAccountTally,
+} from '@/services/ReportV2Api';
 import MellowCard from '@/components/MellowCard';
 import styles from './index.less';
 
-const mockTags = [
-  {
-    id: 1,
-    name: '供应商管理',
-  },
-  {
-    id: 2,
-    name: '订单中心',
-  },
-  {
-    id: 3,
-    name: '采购中心',
-  },
-  {
-    id: 4,
-    name: '合同中心',
-  },
-];
-
-const mockData = [
-  [
-    {
-      id: 1,
-      name: '待审核入库资料',
-      total: 5,
-    },
-    {
-      id: 2,
-      name: '待审核入库资质',
-      total: 3,
-    },
-    {
-      id: 3,
-      name: '待审核考察',
-      total: 1,
-    },
-  ],
-  [
-    {
-      id: 1,
-      name: '待审核入库资料',
-      total: 5,
-    },
-    {
-      id: 2,
-      name: '待审核入库资质',
-      total: 3,
-    },
-    {
-      id: 3,
-      name: '待审核考察',
-      total: 1,
-    },
-  ],
-  [
-    {
-      id: 1,
-      name: '待审核入库资料',
-      total: 5,
-    },
-    {
-      id: 2,
-      name: '待审核入库资质',
-      total: 3,
-    },
-    {
-      id: 3,
-      name: '待审核考察',
-      total: 1,
-    },
-  ],
-];
+type Apikeys = keyof typeof SRM_HOME_TODO
+
+type TallyType = {
+  /**
+   * 计数名称
+   */
+  name: string
+  /**
+   * 链接
+   */
+  link: string
+  /**
+   * 数量
+   */
+  count: number
+}
+
+type TallyReseponseType = { [key: string]: TallyType[] } | TallyType[]
+
+type ApiFnType = () => Promise<IRequestSuccess<TallyReseponseType>>
+
+const API_MAP: { [key in Apikeys]: ApiFnType } = {
+  '/memberCenter/memberAbility': getReportMemberHomeGetMemberTally as unknown as ApiFnType,
+  '/memberCenter/order': getReportMemberHomeGetOrderTally as unknown as ApiFnType,
+  '/memberCenter/procurementAbility': getReportMemberHomeGetPurchaseTally as unknown as ApiFnType,
+  '/memberCenter/contract': getReportMemberHomeGetContractTally as unknown as ApiFnType,
+  '/memberCenter/commodityAbility': () => (
+    new Promise((resolve, reject) => {
+      getReportMemberHomeGetCommodityTally().then((res) => {
+        if (res.code === 1000) {
+          resolve({
+            ...res,
+            data: {
+              commodity: res.data,
+            },
+          });
+        }
+      })
+    })
+  ),
+  '/memberCenter/balance': getReportMemberHomeGetSettleAccountTally as unknown as ApiFnType,
+  '/memberCenter/afterService': getReportMemberHomeGetAfterSaleTally as unknown as ApiFnType,
+  '/memberCenter/logisticsAbility': () => (
+    new Promise((resolve, reject) => {
+      getReportMemberHomeGetLogisticsTally().then((res) => {
+        if (res.code === 1000) {
+          resolve({
+            ...res,
+            data: {
+              logistics: [
+                {
+                  name: '物流派单',
+                  link: '/memberCenter/logisticsAbility/logisticsBillSubmit/waitSbumitLogisticsBill',
+                  count: res.data.toBeCommitCount,
+                },
+                {
+                  name: '接单报价',
+                  link: '/memberCenter/logisticsAbility/logisticsBillManage/waitConfirmLogisticsBill',
+                  count: res.data.toBeConfirmCount,
+                },
+              ]
+            },
+          });
+        }
+      })
+    })
+  ),
+};
+
+type TodoTagType = {
+  /**
+   * 地址
+   */
+  url: Apikeys,
+  /**
+   * 名称
+   */
+  name: string,
+}
+
+
+type TodoType = {
+  /**
+   * 名称
+   */
+  name: string,
+  /**
+   * 待办总计
+   */
+  total: number,
+  /**
+   * 地址
+   */
+  url: string,
+}
+
+// 一组最多三个
+const GROUP_MAX_LEN = 3;
+
+const normalizeTodoList = (dataSource: TallyReseponseType): TodoType[][] => {
+  const ret = [];
+  let group: TodoType[] = [];
+
+  const keys = Object.keys((dataSource))
+
+  keys.forEach((item, keyIndex) => {
+    const todos: TallyType[] = dataSource[item];
+    if (todos) {
+      todos.forEach((todo, todoIndex) => {
+        group.push({
+          name: todo.name,
+          url: todo.link,
+          total: todo.count,
+        });
+        if (group.length === GROUP_MAX_LEN) {
+          ret.push(group);
+          group = [];
+        }
+      });
+    }
+    if (keyIndex === keys.length - 1 && group.length < GROUP_MAX_LEN) {
+      ret.push(group);
+      group = [];
+    }
+  });
+
+  return ret;
+};
 
 const TodoCard: React.FC = () => {
+  const [currentTag, setCurrentTag] = useState<Apikeys | ''>('');
+  const [todoTags, setTodoTags] = useState<TodoTagType[]>([]);
+  const [todoList, setTodoList] = useState<TodoType[][]>([]);
+
+  const handleTagChange = (url: Apikeys) => {
+    setCurrentTag(url);
+
+    if (!API_MAP[url]) {
+      message.warning('出错了，请检查菜单配置与项目菜单是否一致');
+      return;
+    }
+
+    API_MAP[url]().then((res) => {
+      if (res.code === 1000) {
+        setTodoList(normalizeTodoList(res.data));
+      }
+    });
+  };
+
+  const initTags = () => {
+    const userAuth = getAuth();
+    const routes = Object.keys(SRM_HOME_TODO).map((item) => ({
+      url: item as Apikeys,
+      name: SRM_HOME_TODO[item],
+    })).filter((item) => userAuth.urls.includes(item.url));
+    setTodoTags(routes);
+    if (routes.length) {
+      handleTagChange(routes[0].url);
+    }
+  };
+
+  useEffect(() => {
+    initTags();
+  }, []);
+
+  const handleJump = (url: string) => {
+    history.push(url);
+  };
+
   return (
     <MellowCard title="今日待办">
       <ul className={styles['todo-tag-list']}>
-        {mockTags.map((item) => (
-          <li key={item.id} className={styles['todo-tag-item']}>
+        {todoTags.map((item) => (
+          <li
+            key={item.url}
+            className={classNames(
+              styles['todo-tag-item'],
+              {
+                [styles['todo-tag-item-active']]: item.url === currentTag,
+              },
+            )}
+            onClick={() => handleTagChange(item.url)}
+          >
             {item.name}
           </li>
         ))}
       </ul>
       <div className={styles['todo-list']}>
         <div className={styles['todo-list-content']}>
-          {mockData.map((group, index) => (
+          {todoList.map((group, index) => (
             <div key={index} className={styles['todo-list-group']}>
-              {group.map((item) => (
-                <div key={item.id} className={styles['todo-list-item']}>
+              {group.map((item, groupItemIndex) => (
+                <div
+                  key={`${item.url + groupItemIndex}`}
+                  className={styles['todo-list-item']}
+                  onClick={() => handleJump(item.url)}
+                >
                   <div className={styles['todo-list-item-name']}>
                     {item.name}
                   </div>