slproj-web/src/views/progress/Schedule/ProjectSchedule.tsx

import { Card, Modal, Radio, Space } from 'antd';
import { Gantt, Task, ViewMode } from 'gantt-task-react';
import "gantt-task-react/dist/index.css";
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import CancelCrud from '../../../components/crud/CancelCrud';
import { CrudContext } from '../../../components/crud/useCrud';
import { Dispatch, RootState } from '../../../models/store';
import { Schedule, ScheduleProps } from '../../../service/def';
import useRequest from '../../../utils/useRequest';
import { demoDate } from '../../../utils/utils';
import { TaskListHeader } from './components/task-list-header';
import { TaskListTable } from './components/task-list-table';
import DataForm from './DataForm';


type IProps = {
  crudCtx: CrudContext;
}

let id = 1;
const wbsProps: ScheduleProps = { wbs: true, level: '单项工程', status: '未开工', phase: '[C]项目实时阶段', };
const taskProps: ScheduleProps = { task: true, type: 'xxxxx', calendar: 'xxxxx', schedule: 'xxxxxx' };

async function demodata(): Promise<Schedule[]> {
  return [{
    id: `${id++}`,
    name: '工程里程碑',
    stm1: demoDate(2),
    etm1: demoDate(100),
    props: wbsProps,
    progress: 77,
    _indent: 1,
    children: [
      {
        id: `${id++}`,
        name: '正式开工',
        stm1: demoDate(2),
        etm1: demoDate(2),
        _indent: 2,
        props: taskProps,
        progress: 77,
      },
      {
        id: `${id++}`,
        name: '完成导流洞施工',
        stm1: demoDate(20),
        etm1: demoDate(20),
        _indent: 2,
        props: taskProps,
        progress: 77,
      },
      {
        id: `${id++}`,
        name: '开始下闸蓄水',
        stm1: demoDate(50),
        etm1: demoDate(50),
        _indent: 2,
        props: taskProps,
        progress: 77,
      },
      {
        id: `${id++}`,
        name: '完工',
        stm1: demoDate(100),
        etm1: demoDate(100),
        _indent: 2,
        props: taskProps,
        progress: 77,
      },
    ]
  }, {
    id: `${id++}`,
    name: '设计任务',
    stm1: demoDate(2),
    etm1: demoDate(10),
    props: wbsProps,
    _indent: 1,
    progress: 77,
    children: [
      {
        id: `${id++}`,
        name: '详细设计',
        stm1: demoDate(2),
        etm1: demoDate(8),
        _indent: 2,
        props: taskProps,
        progress: 77,
      },
      {
        id: `${id++}`,
        name: '评审',
        stm1: demoDate(8),
        etm1: demoDate(10),
        _indent: 2,
        props: taskProps,
        progress: 77,
      },
    ]
  }, {
    id: `${id++}`,
    name: '采购任务',
    stm1: demoDate(11),
    etm1: demoDate(40),
    props: wbsProps,
    _indent: 1,
    progress: 77,
    children: [
      {
        id: `${id++}`,
        name: '详细设计',
        stm1: demoDate(11),
        etm1: demoDate(20),
        props: wbsProps,
        _indent: 2,
        progress: 77,
        children: [
          {
            id: `${id++}`,
            name: 'asfgiywefb',
            stm1: demoDate(11),
            etm1: demoDate(13),
            _indent: 3,
            props: taskProps,
            progress: 77,
          },
          {
            id: `${id++}`,
            name: 'asfaefuijkbsdv',
            stm1: demoDate(13),
            etm1: demoDate(15),
            _indent: 3,
            props: taskProps,
            progress: 77,
          },
          {
            id: `${id++}`,
            name: 'asfkugasvuig',
            stm1: demoDate(15),
            etm1: demoDate(17),
            _indent: 3,
            props: taskProps,
            progress: 77,
          },
          {
            id: `${id++}`,
            name: 'asfaefrgwg',
            stm1: demoDate(17),
            etm1: demoDate(20),
            _indent: 3,
            props: taskProps,
            progress: 77,
          },
        ]
      },
      {
        id: `${id++}`,
        name: '评审',
        stm1: demoDate(23),
        etm1: demoDate(40),
        _indent: 2,
        props: taskProps,
        progress: 77,
      },
    ]
  }, {
    id: `${id++}`,
    name: '施工任务',
    stm1: demoDate(11),
    etm1: demoDate(40),
    props: wbsProps,
    _indent: 1,
    progress: 77,
    children: []
  }, {
    id: `${id++}`,
    name: '管理任务',
    stm1: demoDate(11),
    etm1: demoDate(40),
    props: wbsProps,
    _indent: 1,
    progress: 77,
    children: []
  }];
}
const VIEWWMODEOPTIONS = [
  { label: '日', value: ViewMode.Day },
  { label: '周', value: ViewMode.Week },
  { label: '月', value: ViewMode.Month },
];

const ProjectSchedule: React.FC<IProps> = ({ crudCtx }) => {


  const { data } = useRequest(demodata);
  const dispatch = useDispatch<Dispatch>();

  const tasks = useSelector((s: RootState) => s.progress.tasks);

  const crud = useSelector((s: RootState) => s.progress.scheduleCrud);

  const [viewMode, setViewmode] = useState<ViewMode>(ViewMode.Day);

  useEffect(() => {
    if (data) {
      dispatch.progress.loadSchedules(data);
    }
  }, [data]);

  const onExpanderClick = (task: Task) => {
    console.log(task);
    dispatch.progress.setTasks(tasks?.map(o => o.id === task.id ? task : o));
  }

  return (
    <Card
      title="test项目"
      extra={
        <Space>
          <Radio.Group options={VIEWWMODEOPTIONS} optionType="button" buttonStyle="solid" onChange={(e) => setViewmode(e.target.value)} value={viewMode} />
          <CancelCrud crudCtx={crudCtx} text="返回项目列表" />
        </Space>

      }
      bodyStyle={{ padding: 0 }}
    >
      {
        tasks?.length ? (
          <Gantt
            viewMode={viewMode}
            tasks={tasks}
            TaskListHeader={TaskListHeader}
            TaskListTable={TaskListTable}
            onExpanderClick={onExpanderClick}
          />
        ) : null
      }
      {
        crud ? (
          <Modal
            visible
            footer={null}
            title={crud.mode === 'new' ? '新增进度' : crud.record.name}
            onCancel={() => dispatch.progress.setScheduleCrud(undefined)}>
            <DataForm />
          </Modal>
        ) : null
      }
    </Card>
  )
}

export default ProjectSchedule