GtDigManageWeb/src/pages/PSRManage/detail.js

import PageContent from '@/components/PageContent';
import { Button, Tabs, Space, Drawer, Timeline, message } from 'antd';
import styles from './index.less';
import { useEffect, useRef, useState } from 'react';
import axios from 'axios';
import { useRequest } from '@umijs/max';
import {
  queryPsrMonthDetail,
  queryPsrMonthList,
  queryPsrWorkLoad,
  querySavePsrMonth,
} from '../../services/psr';
import SaveModal from './components/saveOtherModal';
import dayjs from 'dayjs';
const PSRDetail = (props) => {
  const {
    projectId = 643,
    project_name = '测试2',
    flow_id = '1',
    node_id = '2',
  } = props;
  const [excelData, setExcelData] = useState();
  const [historyOpen, setHistoryOpen] = useState();
  const [open, setOpen] = useState();
  const [dataType, setDataType] = useState();

  const luckysheetRef = useRef();
  const iframeRef = useRef();

  const unableEdit = (option) => {
    option.showtoolbar = false;
    option.enableAddRow = false;
    option.sheetFormulaBar = false;
    option.enableAddBackTop = false;
    option.showsheetbarConfig = {
      add: false,
      sheet: false,
    };
    option.cellRightClickConfig = {
      copy: false, // 复制
      copyAs: false, // 复制为
      paste: false, // 粘贴
      insertRow: false, // 插入行
      insertColumn: false, // 插入列
      deleteRow: false, // 删除选中行
      deleteColumn: false, // 删除选中列
      deleteCell: false, // 删除单元格
      hideRow: false, // 隐藏选中行和显示选中行
      hideColumn: false, // 隐藏选中列和显示选中列
      rowHeight: false, // 行高
      columnWidth: false, // 列宽
      clear: false, // 清除内容
      matrix: false, // 矩阵操作选区
      sort: false, // 排序选区
      filter: false, // 筛选选区
      chart: false, // 图表生成
      image: false, // 插入图片
      link: false, // 插入链接
      data: false, // 数据验证
      cellFormat: false, // 设置单元格格式
    };
  };

  //请求月度psr和现金流列表 data_type 1 psr 2 现金流
  const {
    data,
    run: runList,
    loading: listLoading,
  } = useRequest(
    (data) =>
      queryPsrMonthList({
        project_id: projectId,
        data_type: dataType,
        ...data,
      }),
    { manual: true },
  );

  //保存/另存为月度psr和现金流接口
  const { run: runSave, loading: saveLoading } = useRequest(
    (data) => querySavePsrMonth(data),
    {
      manual: true,
      onSuccess: () => {
        message.success('保存成功');
        if (open) setOpen(false);
      },
      onError: () => {
        message.success('添加失败');
      },
    },
  );

  //请求月度psr和现金流详情接口
  const { run: runDetail } = useRequest((data) => queryPsrMonthDetail(data), {
    manual: true,
    formatResult: (res) => {
      if (res?.data) {
        let data = res.data;
        console.log(data);
        const day = dayjs(data.day).format('YYYY-MM');
        setExcelData({ ...data, dayFormat: day });
        setHistoryOpen(false);
        const jsonData = JSON.parse(data.json_data);
        renderSheet(jsonData, data.is_edit);
        if (data.is_edit) runWorkLoad({ project_id: projectId });
      }
    },
  });

  //请求人日有效工时
  const { data: workData, run: runWorkLoad } = useRequest(
    (data) => queryPsrWorkLoad(data),
    {
      manual: true,
    },
  );

  const onChange = (key) => {
    if (key == '3' || key == '4') {
      const data_type = key == '3' ? 1 : 2;
      setDataType(data_type);
      runList({ data_type });
    }
  };

  // useEffect(() => {
  //   axios.get('/excelData.json').then((res) => {
  //     if (res.status == 200) {
  //       renderSheet(res.data);
  //     }
  //   });
  // }, []);

  const handlerSaveOther = (date) => {
    const luckyData = luckysheetRef.current?.toJson();
    if (luckyData?.data) {
      console.log('========================', luckyData);
      const params = {
        day: date,
        project_id: projectId,
        json_data: JSON.stringify(luckyData.data),
        data_type: dataType,
      };
      runSave(params);
    }
  };
  const handlerSave = () => {
    const luckyData = luckysheetRef.current?.toJson();
    const params = {
      id: excelData?.id,
      data_type: excelData?.data_type,
      project_id: excelData?.project_id,
      day: dayjs(excelData?.day).format('YYYY-MM-DD'),
      json_data: JSON.stringify(luckyData.data),
    };
    runSave(params);
  };
  const renderSheet = (currentData, is_edit = false) => {
    const data = currentData;
    //设置单元格不可编辑
    data?.forEach((item) => {
      item.config.authority = is_edit
        ? null
        : {
            sheet: true,
            hintText: '当前excel不可编辑！',
          };
    });
    console.log(data);
    let option = {
      lang: 'zh',
      showinfobar: false,
      showstatisticBar: false,
      data: JSON.parse(JSON.stringify(data)),
      hook: {
        cellMousedown: (cell, position, sheet) => {
          console.log(cell, position, sheet);
        },
        cellUpdated: () => {
          luckysheetRef.current.refreshFormula();
        },
      },
    };
    //设置不可编辑
    if (!is_edit) unableEdit(option);

    luckysheetRef.current.destroy();
    luckysheetRef.current.create(option);
  };
  const renderTitle = (data_type) => {
    const title = data_type == 1 ? 'PSR' : '现金流';
    return (
      <div className={styles.excelTitle}>
        <div>
          当前PSR表单：
          <span style={{ color: 'blue' }}>{excelData?.dayFormat}</span>
        </div>
        <Space>
          <Button
            type="primary"
            onClick={() => {
              runList();
              setHistoryOpen(true);
            }}
          >
            {`${title}历史版本`}
          </Button>
          <Button
            type="primary"
            onClick={() => setOpen(true)}
            disabled={!excelData?.is_edit}
          >
            另存为
          </Button>
          {/* <Button type="primary">编辑</Button> */}
          <Button
            type="primary"
            onClick={handlerSave}
            disabled={!excelData?.is_edit}
          >
            保存
          </Button>
        </Space>
      </div>
    );
  };
  const handlerLoad = () => {
    const contentWindow = iframeRef.current.contentWindow;
    luckysheetRef.current = contentWindow.luckysheet;
  };
  const items = [
    {
      key: '1',
      label: '投标版PSR',
      // children: `Content of Tab Pane 1`,
    },
    {
      key: '2',
      label: '签字版PSR',
      // children: `Content of Tab Pane 2`,
    },
    {
      key: '3',
      label: '终版PSR',
      children: renderTitle(1),
    },
    {
      key: '4',
      label: '现金流',
      children: renderTitle(2),
    },
  ];
  return (
    <PageContent>
      <div className={styles.titleDev}>
        <Button type="primary">返回</Button>
        <span className={styles.title}>{project_name}</span>
      </div>
      <Tabs
        defaultActiveKey="1"
        type="card"
        items={items}
        onChange={onChange}
      />
      <iframe
        style={{
          width: '100%',
          height: '80vh',
        }}
        ref={iframeRef}
        onLoad={handlerLoad}
        src="/luckysheet.html"
      />
      <Drawer
        title="历史版本"
        placement="right"
        loading={listLoading}
        onClose={() => setHistoryOpen(false)}
        open={historyOpen}
      >
        <Timeline
          items={data?.list?.map((item) => {
            return {
              children: (
                <a onClick={() => runDetail({ id: item.id })}>
                  {dayjs(item.day).format('YYYY-MM')}
                </a>
              ),
            };
          })}
        />
      </Drawer>
      <SaveModal
        loading={saveLoading}
        open={open}
        onCancel={() => setOpen(false)}
        onOk={handlerSaveOther}
      />
    </PageContent>
  );
};
export default PSRDetail;