组件拆分组合

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

@@ -2,6 +2,153 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Table, Modal, Select } from 'antd';
 import * as echarts from 'echarts';
 import styles from './report.less';
+import { index } from '@antv/x6/lib/util/dom/elem';
+
+function ProjectTable(props) {
+  const { type, expandedTable, setMemberVisible } = props;
+
+  const temp = [
+    { index: 1, name: '项目A' },
+    { index: 2, name: '项目B' },
+    { index: 3, name: '项目C' },
+  ];
+
+  const column0 = [
+    { title: '未提交', render: () => 0 },
+    { title: '已提交', render: () => 0 },
+    { title: '已审批', render: () => 0 },
+    { title: '已拒绝', render: () => 0 },
+    { title: '计入考核范围', render: () => 0 },
+  ];
+
+  const column1 = [
+    { 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 column2 = [
+    { title: '序号', dataIndex: 'index' },
+    Table.EXPAND_COLUMN,
+    { title: '项目名称', dataIndex: 'name' },
+    { title: '项目编号' },
+    { title: '本月人日数', render: () => 0 },
+    { title: '累计人日数', render: () => 0 },
+    { title: '项目预算人日数', render: () => '未设置' },
+  ];
+
+  switch (type) {
+    case 1:
+      return (
+        <Table
+          columns={column1}
+          dataSource={temp}
+          pagination={false}
+          rowKey="index"
+          expandable={expandedTable ? { expandedRowRender: () => expandedTable } : null}
+        />
+      );
+    case 2:
+      return (
+        <Table
+          columns={column2}
+          dataSource={temp}
+          pagination={false}
+          rowKey="index"
+          expandable={expandedTable ? { expandedRowRender: () => expandedTable } : null}
+        />
+      );
+  }
+}
+
+function ProjectManagerTable(props) {
+  const { expandedTable } = props;
+  const column = [
+    { title: '序号', dataIndex: 'index' },
+    { title: '项目经理', dataIndex: 'name' },
+    Table.EXPAND_COLUMN,
+    { title: '本月人日数', render: () => 0 },
+    { title: '截止到目前为止的人日数', render: () => 0 },
+    { title: '预算人日数', render: () => 0 },
+  ];
+  const temp = [
+    { index: 1, name: '项目经理A' },
+    { index: 2, name: '项目经理B' },
+    { index: 3, name: '项目经理C' },
+  ];
+  return (
+    <Table
+      columns={column}
+      dataSource={temp}
+      pagination={false}
+      rowKey="index"
+      expandable={expandedTable ? { expandedRowRender: () => expandedTable } : null}
+    />
+  );
+}
+
+function ProjectTypeTable(props) {
+  const { expandedTable } = props;
+
+  const temp = [
+    { type: '建设期项目管理人日' },
+    { type: '运营期项目管理人日' },
+    { type: '工程设计人日(设计联络、工艺、电气自控、机械、审核）' },
+    { type: '培训人日' },
+    { type: '金科陪客户培训人日' },
+    { type: '运营期培训人日' },
+    { type: '采购和质量控制人日' },
+  ];
+
+  const column = [
+    { title: '分项工作代码', dataIndex: 'type' },
+    { title: '本月人日数', render: () => 0 },
+    { title: '累计人日数', render: () => 0 },
+    { title: '项目预算人日数', render: () => <a>设置</a> },
+  ];
+
+  return (
+    <Table
+      columns={column}
+      dataSource={temp}
+      expandable={expandedTable ? { expandedRowRender: () => expandedTable } : null}
+    />
+  );
+}
+
+function MemberModal(props) {
+  const { memberVisible, setMemberVisible } = props;
+
+  const column = [
+    { title: '序号', dataIndex: 'index' },
+    { title: '员工名称', dataIndex: 'name' },
+    { title: '归属部门' },
+    { title: '未提交', render: () => 0 },
+    { title: '已提交', render: () => 0 },
+    { title: '已审批', render: () => 0 },
+    { title: '已拒绝', render: () => 0 },
+    { title: '小计', render: () => 0 },
+  ];
+
+  const temp = [
+    { index: 1, name: '员工A' },
+    { index: 2, name: '员工B' },
+    { index: 3, name: '员工C' },
+  ];
+
+  return (
+    <Modal visible={memberVisible} onCancel={() => setMemberVisible(false)} width="80%">
+      <Table columns={column} dataSource={temp} pagination={false} />
+    </Modal>
+  );
+}
 
 function Demo(props) {
   const [memberVisible, setMemberVisible] = useState(false);
@@ -11,21 +158,9 @@ function Demo(props) {
   const expandedRowRender = record => {
     switch (record.index) {
       case 1:
-        return <Table columns={column2} dataSource={temp1} pagination={false} />;
+        return <ProjectTable type={1} setMemberVisible={setMemberVisible} />;
       case 2:
-        return (
-          <Table
-            columns={column4}
-            dataSource={temp1}
-            pagination={false}
-            expandable={{
-              expandedRowRender: () => (
-                <Table columns={column5} dataSource={temp3} pagination={false} />
-              ),
-            }}
-            rowKey="index"
-          />
-        );
+        return <ProjectTable type={2} expandedTable={<ProjectTypeTable />} />;
     }
   };
 
@@ -110,25 +245,6 @@ function Demo(props) {
     { 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 },
@@ -143,43 +259,6 @@ function Demo(props) {
     { 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> },
-  ];
   const select = [
     { value: 1, key: '部门A' },
     { value: 2, key: '部门B' },
@@ -189,6 +268,7 @@ function Demo(props) {
   ];
   return (
     <>
+      <div>事业部总</div>
       <Table
         columns={column1}
         dataSource={temp}
@@ -198,6 +278,16 @@ function Demo(props) {
         rowKey="index"
         pagination={false}
       />
+
+      <div>销售副总/执行副总</div>
+      <ProjectManagerTable expandedTable={<ProjectTable type={2} />} />
+
+      <div>销售项目经理</div>
+      <ProjectTable type={2} />
+
+      <div>执行项目经理</div>
+      <ProjectTable type={2} expandedTable={<ProjectTypeTable />} />
+
       <Select style={{ width: '100px' }} defaultValue={1} onChange={onSelect}>
         {select.map(item => (
           <Select.Option value={item.value} key={item.value}>
@@ -206,9 +296,7 @@ function Demo(props) {
         ))}
       </Select>
       <div id="chart" style={{ width: '600px', height: '600px' }}></div>
-      <Modal visible={memberVisible} onCancel={() => setMemberVisible(false)} width="80%">
-        <Table columns={column3} dataSource={temp2} pagination={false} />
-      </Modal>
+      <MemberModal memberVisible={memberVisible} setMemberVisible={setMemberVisible} />
     </>
   );
 }