人日新需求demo

config/router.config.js

@@ -47,6 +47,10 @@ export default [
             path: '/home/approval/auth',
             component: './PurchaseAdmin/PurchaseList/Approval/Auth',
           },
+          {
+            path: '/home/demo',
+            component: './PurchaseAdmin/PurchaseList/Report/Demo',
+          },
         ],
       },
       {

src/pages/PurchaseAdmin/PurchaseList/Index.js

@@ -92,6 +92,10 @@ function LayoutDetail(props) {
                 </SubMenu>
               )}
 
+              {/* <Menu.Item key="/home/demo" title="demo">
+                <Link to="/home/demo">demo</Link>
+              </Menu.Item> */}
+
               {/* {isAdmin && (
               <Menu.Item key="/home">
                 <Link to="/home">采购清单</Link>

src/pages/PurchaseAdmin/PurchaseList/Report/Demo.js

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { Table, Modal } from 'antd';
+import styles from './report.less';
+
+function Demo(props) {
+  const [memberVisible, setMemberVisible] = useState(false);
+
+  const expandedRowRender = record => {
+    switch (record.index) {
+      case 1:
+        return <Table columns={column2} dataSource={temp1} pagination={false} />;
+      case 2:
+        return (
+          <Table
+            columns={column4}
+            dataSource={temp1}
+            pagination={false}
+            expandable={{
+              expandedRowRender: () => (
+                <Table columns={column5} dataSource={temp3} pagination={false} />
+              ),
+            }}
+            rowKey="index"
+          />
+        );
+    }
+  };
+
+  const temp = [
+    { index: 1, type: '售前项目' },
+    { index: 2, type: '执行项目' },
+  ];
+  const temp1 = [
+    { index: 1, name: '项目A' },
+    { index: 2, name: '项目B' },
+    { index: 3, name: '项目C' },
+  ];
+  const temp2 = [
+    { index: 1, name: '员工A' },
+    { index: 2, name: '员工B' },
+    { index: 3, name: '员工C' },
+  ];
+  const temp3 = [
+    { type: '建设期项目管理人日' },
+    { type: '运营期项目管理人日' },
+    { type: '工程设计人日(设计联络、工艺、电气自控、机械、审核）' },
+    { type: '培训人日' },
+    { type: '金科陪客户培训人日' },
+    { type: '运营期培训人日' },
+    { type: '采购和质量控制人日' },
+  ];
+  const column0 = [
+    { title: '未提交', render: () => 0 },
+    { title: '已提交', render: () => 0 },
+    { title: '已审批', render: () => 0 },
+    { title: '已拒绝', render: () => 0 },
+    { title: '计入考核范围', render: () => 0 },
+  ];
+  const column1 = [
+    { title: '序号', dataIndex: 'index' },
+    Table.EXPAND_COLUMN,
+    { title: '人日类型', dataIndex: 'type' },
+    { title: '技术中心', children: column0 },
+    { title: '招采中心', children: column0 },
+  ];
+  const column2 = [
+    { title: '序号', dataIndex: 'index' },
+    {
+      title: '项目名称',
+      dataIndex: 'name',
+      render: text => <a onClick={() => setMemberVisible(true)}>{text}</a>,
+    },
+    { title: '项目编号' },
+    { title: '技术中心', children: column0 },
+    { title: '招采中心', children: column0 },
+    { title: '总计', render: () => 0 },
+  ];
+  const column3 = [
+    { title: '序号', dataIndex: 'index' },
+    { title: '员工名称', dataIndex: 'name' },
+    { title: '归属部门' },
+    { title: '未提交', render: () => 0 },
+    { title: '已提交', render: () => 0 },
+    { title: '已审批', render: () => 0 },
+    { title: '已拒绝', render: () => 0 },
+    { title: '小计', render: () => 0 },
+  ];
+  const column4 = [
+    { title: '序号', dataIndex: 'index' },
+    Table.EXPAND_COLUMN,
+    { title: '项目名称', dataIndex: 'name' },
+    { title: '项目编号' },
+    { title: '本月人日数', render: () => 0 },
+    { title: '累计人日数', render: () => 0 },
+    { title: '项目预算人日数', render: () => '未设置' },
+  ];
+  const column5 = [
+    { title: '分项工作代码', dataIndex: 'type' },
+    { title: '本月人日数', render: () => 0 },
+    { title: '累计人日数', render: () => 0 },
+    { title: '项目预算人日数', render: () => <a>设置</a> },
+  ];
+  return (
+    <>
+      <Table
+        columns={column1}
+        dataSource={temp}
+        expandable={{
+          expandedRowRender,
+        }}
+        rowKey="index"
+        pagination={false}
+      />
+      <Modal visible={memberVisible} onCancel={() => setMemberVisible(false)} width="80%">
+        <Table columns={column3} dataSource={temp2} pagination={false} />
+      </Modal>
+    </>
+  );
+}
+
+export default Demo;