BomWeb/src/pages/Detail/Index.js

import React, { useEffect, useState, useRef, useMemo } from 'react';
import { UnorderedListOutlined, PlusOutlined, InfoOutlined } from '@ant-design/icons';
import { Button, Modal, message, Alert, Avatar } from 'antd';
import { connect } from 'dva';
import styles from './Index.less';
import LuckySheet from './LuckySheet';
import AuditModal from './AuditModal';
// import CommentDrawer from './CommentDrawer';
import RightDrawer from './RightDrawer';
import CommitModal from './CommitModal';
import CompareModal from './CompareModal';
import ExportModal from './ExportModal';
import FlowModal from './FlowModal';
import HistoryModal from './HistoryModal';
import TimeNode from './TimeNode';
import FilesModal from './FilesModal';
import VersionModal from './VersionModal';
import CommitAuditModal from './CommitAuditModal';
import CommentContent from '@/components/CommentContent';
import MergeModal from './MergeModal';
import { GetTokenFromUrl, getToken } from '@/utils/utils';
import {
  getAuditDetail,
  queryDelSheetRecord,
  queryDetail,
  queryDingInstanceExecute,
  setLastVersion,
} from '@/services/boom';
import HistoryDrawer from './HistoryDrawer';
import AuditFlow from './AuditFlow';
import { getCurrentUser } from '@/utils/authority';
import { async } from '@antv/x6/es/registry/marker/async';
import FileViewerModal from '@/components/FileViewer';
import PreviewFile from '@/components/PreviewFile';
import FormAndFilesNode from './FormAndFilesNode';
import DropdownMenu from './DropdownMenu';
import CurrentInfo from './CurrentInfo';
import moment from 'moment';
import { LocalStorage } from '@antv/x6';

const LocalData = localStorage.luckysheet;

function Detail(props) {
  const {
    dispatch,
    loading,
    currentUser,
    versionList,
    auditList,
    flowDetail,
    versionTree,
    match: { params },
    location: { query },
    instanceDetail,
    typeOptions,
    classifyList,
    excelFileList,
    comment,
  } = props;
  const [versionTreeVisible, setVersionTreeVisible] = useState(false);
  const [commentVisible, setCommentVisible] = useState(false);
  const [mergeVisible, setMergeVisible] = useState(false);
  const [compareVisible, setCompareVisible] = useState(false);
  const [exportVisible, setExportVisible] = useState(false);
  const [commitVisible, setCommitVisible] = useState(false);
  // false 关闭  1=审批通过  2=审批拒绝
  const [auditVisible, setAuditVisible] = useState(false);
  const [flowVisible, setFlowVisible] = useState(false);
  const [versionVisible, setVersionVisible] = useState(false);
  const [commitAuditVisible, setCommitAuditVisible] = useState(false);
  const [sheet, setSheet] = useState({});
  const [compareList, setCompareList] = useState([]);
  const [isMerge, setIsMerge] = useState(false);
  const [version, setVersion] = useState({});
  const [user, setUser] = useState([]);
  const [updateCount, setUpdateCount] = useState({
    diff: 0,
    add: 0,
  });
  const [saveTime, setSaveTime] = useState();
  const [exportDate, setExportData] = useState([]);
  const sheetRef = useRef();
  const sheetRef2 = useRef();
  const sheetRef3 = useRef();
  const fileRef = useRef();
  const userRef = useRef();
  const statusRef = useRef({
    edit: false,
    compare: false,
  });
  const cellPosition = useRef({});

  useEffect(() => {
    // if (!version.id) return
    // 不请求excelFileList 时清空excelFileList,否则会出现清单切换后如果attachment_id不存在，附件信息没有更新
    if (!version.attachment_id) {
      dispatch({
        type: 'detail/save',
        payload: {
          excelFileList: [],
        },
      });
    } else {
      dispatch({
        type: 'detail/QueryExcelFiles',
        payload: {
          excel_id: version.attachment_id,
        },
      });
    }
  }, [version.id]);

  const projectId = parseInt(params.projectId);
  const templateId = parseInt(params.templateId);
  const excelID = parseInt(query.excel_id);
  const TOKEN = query['JWT-TOKEN'];
  if (!localStorage.getItem('JWT-TOKEN')) {
    localStorage['JWT-TOKEN'] = TOKEN;
  }

  const flow = useMemo(() => {
    let data = {
      active: 0,
      active_id: null,
      current: 0,
      currentNode: {},
      list: {
        FlowNodes: [],
      },
    };
    if (version?.flow_id && auditList?.length > 0) {
      let item = auditList.find(item => item.list.id == version.flow_id);
      if (!item) return data;
      // 查询当前节点
      let current = item.list.FlowNodes.findIndex(node => node.seq == item.active);
      item.current = current == -1 ? 0 : current;
      // 保存当前所处节点
      item.currentNode = item.list.FlowNodes[item.current];
      data = item;
    }
    return data;
  }, [auditList, version]);
  const active_audit = flow.active_audit;
  const isAuditor = useMemo(() => {
    return active_audit == 1 && flow.currentNode?.auditor == currentUser.ID;
  }, [active_audit, flow, currentUser]);

  const onCompare = async checkSheets => {
    if (checkSheets) {
      const [sheet1, sheet2] = checkSheets;
      sheet1.data = (
        await queryDetail({
          excel_id: sheet1.id,
        })
      ).data;
      sheet2.data = (
        await queryDetail({
          excel_id: sheet2.id,
        })
      ).data;

      setCompareList(checkSheets);
      statusRef.current.compare = true;
    } else {
      let index = compareList.findIndex(item => item.id == sheet.id);
      // 退出比对模式
      if (index == 0) {
        sheetRef3.current.toggleCompare(false);
      } else if (index == 1) {
        sheetRef2.current.toggleCompare(false);
      }

      setIsMerge(false);
      setCompareList([]);
      setSheet({
        ...sheet,
      });
      setUpdateCount({
        diff: 0,
        add: 0,
      });
      statusRef.current.compare = false;
    }
    setCommentVisible(false);
  };

  const renderSheetDom = (item, index) => {
    return (
      <div key={item?.id || 'temp'} className={styles.sheetItem}>
        <h3>{item.version_name || item?.name}</h3>
        <LuckySheet
          className={styles.sheet}
          ref={!index ? sheetRef3 : sheetRef2}
          data={item.data || null}
        />
      </div>
    );
  };

  const onClickCell = (cell, position, s) => {
    if (cell?.cid && !statusRef.current.edit) {
      let payload = {
        sheet_id: s.order || '0',
        excel_id: version.id,
        cid: cell.cid,
        sheet_index: String(s.seq || 0),
      };
      cellPosition.current = {
        ...payload,
      };
      dispatch({
        type: 'detail/queryComment',
        payload,
      });
    }
  };

  const onCommit = params => {
    let currentData = sheetRef.current.getSheetJson().data;
    let sheets = JSON.parse(JSON.stringify(currentData));
    sheets.forEach(item => {
      delete item.data;
    });
    dispatch({
      type: 'detail/commitSheet',
      payload: {
        ...params,
        data: JSON.stringify(sheets),
      },
      callback: newVersion => {
        onCompare(false);
        setCommitVisible(false);
        setVersionVisible(false);
        changeVersion(newVersion);

        // 更新flow流程图
        dispatch({
          type: 'xflow/queryBoomFlowDetail',
          payload: {
            id: templateId,
          },
        });
      },
    });
  };
  // 更新表单，flag为true时不判断是否属于审批，强制更新
  const onUpdate = flag => {
    if (!flag && flow.active != 0) return;
    let currentData = sheetRef.current.getSheetJson().data;
    let sheets = JSON.parse(JSON.stringify(currentData));
    sheets.forEach(item => {
      delete item.data;
    });
    let params = {
      ...version,
      data: JSON.stringify(sheets),
    };

    dispatch({
      type: 'detail/saveSheet',
      payload: params,
      callback: () => {
        setSaveTime(moment().format('HH:mm:ss'));
      },
    });
  };

  const onDelSheet = async id => {
    const params = {
      excel_id: version.id,
      sheet_id: id,
    };
    await queryDelSheetRecord(params);
  };

  const onAudit = ({ audit_comment, audit_status }) => {
    const flowNode = flow.currentNode;
    dispatch({
      type: 'detail/approve',
      payload: {
        id: flow.active_id,
        project_id: projectId,
        flow_id: flowNode.flow_id,
        node_id: flowNode.seq,
        audit_comment,
        audit_status,
      },
      callback: newVersion => {
        setAuditVisible(false);
        // 更新flow流程图
        dispatch({
          type: 'xflow/queryBoomFlowDetail',
          payload: {
            id: templateId,
          },
        });
        if (audit_status == 3) {
          // 更新审批流
          dispatch({
            type: 'detail/queryAuditList',
            payload: {
              template_id: version.template_id,
              template_node_id: version.template_node_id,
              flow_id: version.flow_id,
              version_id: version.version_id,
              audit_series: version.audit_series,
            },
          });
        } else {
          dispatch({
            type: 'authList/queryAuthList',
            payloda: { user_id: currentUser.ID },
          });
          localStorage.excelId = newVersion.id;
          setVersion({
            ...version,
            flow_id: newVersion.flow_id,
            id: newVersion.id,
          });
        }
        //更新未审批列表
        dispatch({
          type: 'authList/queryAuthList',
          payloda: { user_id: currentUser.ID },
        });
      },
    });
  };

  const onMergeVersion = async sheet2 => {
    const sheet1 = version;
    if (!sheet1.data) {
      sheet1.data = (
        await queryDetail({
          excel_id: sheet1.id,
        })
      ).data;
    }
    if (!sheet2.data) {
      sheet2.data = (
        await queryDetail({
          excel_id: sheet2.id,
        })
      ).data;
    }

    setIsMerge(true);
    setCompareList([sheet1, sheet2]);
  };

  const handleMenuClick = e => {
    switch (e.key) {
      case 'bomDetail':
        // 清单
        setCommentVisible(true);
        break;
      case 'export':
        // 导出
        handleExportClick();
        break;
      case 'commitAudit':
        // 提交流转
        setCommitAuditVisible(true);
        break;
      case 'compare':
        // 比对
        setCompareVisible(true);
        break;
      case 'merge':
        // 同步清单
        setMergeVisible(true);
        break;
      case 'compare':
        // 同步
        onCompare(e.data);
        break;
    }
  };

  const exportExcl = files => {
    sheetRef.current.uploadExcel(files, () => {
      fileRef.current.value = null;
    });
  };

  //点击导出弹出选择导出列弹框
  const handleExportClick = () => {
    setExportData(sheetRef.current.getSheetJson());
    setExportVisible(true);
  };

  const downloadExcel = checkValue => {
    sheetRef.current.downloadExcel(checkValue);
    setExportVisible(false);
  };

  const getLoading = () => {
    let effects = loading.effects;
    return !loading.effects['detail/queryComment'] && loading.models.detail;
  };

  const changeVersion = async id => {
    let version;
    if (typeof id == 'object') {
      version = id;
      localStorage.excelId = version.id;
      localStorage.excelItem = JSON.stringify(version);
    } else {
      version = await getAuditDetail({ userId: currentUser.ID, excelID });
      if (!version) {
        const excelId = localStorage.excelItem
          ? JSON.parse(localStorage.excelItem)
          : localStorage.excelId;
        if (typeof excelId === 'object') {
          changeVersion(excelId);
          return;
        }
      }
      localStorage.excelId = id;
    }
    setVersion(version);
    setSaveTime(null);
    //请求历史版本
    dispatch({
      type: 'detail/queryVersionsTree',
      payload: {
        excel_id: version.id || localStorage.excelId,
      },
    });
    // 判断是否审批节点
    if (version.flow_id) {
      dispatch({
        type: 'detail/queryAuditList',
        payload: {
          template_id: version.template_id,
          template_node_id: version.template_node_id,
          flow_id: version.flow_id,
          version_id: version.version_id,
          audit_series: version.audit_series,
        },
      });
    }
  };

  const getUser = newUser => {
    try {
      if (JSON.stringify(newUser) != JSON.stringify(userRef.current)) {
        userRef.current = newUser;
        setUser(newUser);
      }
    } catch (error) {}
  };
  const handleSubmitCell = (value, callback) => {
    if (!value) return;
    dispatch({
      type: 'detail/addComment',
      payload: {
        ...cellPosition.current,
        comment: value,
      },
      callback,
    });
  };
  useEffect(() => {
    dispatch({
      type: 'detail/queryProjectRecord',
      payload: {
        project_id: projectId,
      },
    });
    dispatch({
      type: 'xflow/queryBoomFlowDetail',
      payload: {
        id: templateId,
      },
    });
    dispatch({
      type: 'user/getRoleList',
    });
    dispatch({
      type: 'user/fetch',
    });
    dispatch({
      type: 'user/fetchDepV2',
    });
    dispatch({
      type: 'detail/queryClassify',
    });

    dispatch({
      type: 'detail/queryBindClassify',
      payload: {
        project_id: projectId,
      },
    });

    // dispatch({
    //   type: 'detail/queryListParentByUser',
    //   payload: {
    //     userid: currentUser.DingUserId || getCurrentUser()?.DingUserId,
    //   },
    // });
  }, []);

  useEffect(() => {
    if (compareList.length == 2) {
      const callback = ({ diff, add }) => {
        setUpdateCount(updateCount => {
          return {
            diff: diff.length,
            add: updateCount.add + add.length,
          };
        });
      };
      var update1 = sheetRef3.current.toggleCompare(true, compareList[1].data, callback);
      var update2 = sheetRef2.current.toggleCompare(true, compareList[0].data, callback);
    }
  }, [compareList]);

  useEffect(() => {
    // if (versionList.length == 0) return;
    if (!currentUser.ID) return;
    if (!version.id) {
      changeVersion(excelID);
    } else {
      changeVersion(version.id);
    }
  }, [versionList, currentUser]);

  return (
    <>
      <div className={styles.top}>
        <div>
          <Button type="primary" style={{ marginRight: 20 }} onClick={() => setFlowVisible(true)}>
            查看流程
          </Button>

          {/* 非审批节点可以创建清单 */}
          {flow?.active == 0 && (
            <Button type="primary" onClick={() => setVersionVisible(true)}>
              新建清单
            </Button>
          )}
          <CurrentInfo version={version} flowDetail={flowDetail} />
        </div>
        <div className={styles.btns}>
          {saveTime && <span style={{ color: '#333', fontSize: 14 }}>上次保存时间 {saveTime}</span>}
          {version.audit_status === 0 && (
            <Button type="primary" loading={loading.effects['detail/saveSheet']} onClick={onUpdate}>
              保存
            </Button>
          )}
          <Button
            type="primary"
            style={{ marginRight: 20 }}
            onClick={() => setVersionTreeVisible(true)}
          >
            历史版本
          </Button>
          <Avatar.Group style={{ marginRight: 20 }}>
            {user.map((item, id) => (
              <Avatar
                key={`${id}-${item.name}`}
                style={{ backgroundColor: '#008dff' }}
                size="large"
              >
                {item.Name}
              </Avatar>
            ))}
          </Avatar.Group>
          <DropdownMenu
            compareList={compareList}
            isMerge={isMerge}
            version={version}
            flowDetail={flowDetail}
            classifyList={classifyList}
            currentUser={currentUser}
            isAuditor={isAuditor}
            flow={flow}
            sheetRef3={sheetRef3}
            onClick={handleMenuClick}
            setVersion={setVersion}
          />
        </div>
        <input
          type="file"
          ref={fileRef}
          style={{ display: 'none' }}
          onChange={e => exportExcl(e.target.files)}
        />
      </div>
      <div style={{ display: 'flex' }}>
        <div
          className={styles.content}
          style={{
            width: '100%',
            // 合同清单先显示附件再显示清单详情
            flexDirection: version?.TemplateNodeInfo?.flow_id == 9 ? 'column-reverse' : 'column',
          }}
        >
          {/* 判断是否为比对模式 */}
          {compareList.length == 2 ? (
            <>
              <Alert
                message={`比对结果：${updateCount.diff}项差异。${updateCount.add}项新增`}
                type="info"
              />
              <div className={styles.sheetBox}>{compareList.map(renderSheetDom)}</div>
            </>
          ) : (
            <div className={styles.sheetBox}>
              {version.id && (
                <LuckySheet
                  className={styles.sheet}
                  ref={sheetRef}
                  onClickCell={onClickCell}
                  version={version}
                  templateId={templateId}
                  getUser={getUser}
                  onUpdate={onUpdate}
                  onDelSheet={onDelSheet}
                />
              )}
            </div>
          )}

          <FormAndFilesNode
            formData={version?.ding_schema}
            excelFileList={excelFileList}
            version={version}
          />
        </div>
        <TimeNode
          flow={flow}
          flowDetail={flowDetail}
          isAuditor={isAuditor}
          version={version}
          templateId={templateId}
          projectId={projectId}
          setAuditVisible={setAuditVisible}
          stepDirection="vertical"
          style={{
            maxWidth: '20%',
            display: 'inline',
            marginLeft: '20px',
          }}
        />
      </div>

      <CommentContent
        title="单元格沟通记录"
        comment={comment}
        onSubmit={handleSubmitCell}
        loading={loading.effects['detail/queryComment'] || loading.effects['detail/addComment']}
      />
      <HistoryDrawer
        versionTree={versionTree}
        version={version}
        visible={versionTreeVisible}
        onChangeVersion={version => changeVersion(version)}
        onClose={() => setVersionTreeVisible(false)}
      />

      <RightDrawer
        version={version}
        visible={commentVisible}
        onClose={() => setCommentVisible(false)}
      />
      <CompareModal
        visible={compareVisible}
        version={version}
        onClose={() => setCompareVisible(false)}
        onOk={onCompare}
      />
      <MergeModal
        visible={mergeVisible}
        version={version}
        onClose={() => setMergeVisible(false)}
        onOk={onMergeVersion}
      />
      <ExportModal
        visible={exportVisible}
        sheet={exportDate.data}
        onClose={() => setExportVisible(false)}
        onOk={downloadExcel}
      />
      <FlowModal
        typeOptions={typeOptions}
        flowDetail={flowDetail}
        visible={flowVisible}
        templateId={templateId}
        onClose={() => setFlowVisible(false)}
        version={version}
        onChangeVersion={version => changeVersion(version)}
      />
      <AuditModal
        loading={getLoading()}
        visible={auditVisible}
        sheetRef={sheetRef}
        onClose={() => setAuditVisible(false)}
        onOk={onAudit}
        flow={flow}
        flowDetail={flowDetail}
        version={version}
        versionList={versionList}
      />
      <VersionModal
        typeOptions={typeOptions}
        visible={versionVisible}
        flowDetail={flowDetail}
        versionList={versionList}
        version={version}
        onClose={() => setVersionVisible(false)}
        onOk={values => onCommit(values)}
        loading={getLoading()}
      />
      <CommitAuditModal
        visible={commitAuditVisible}
        version={version}
        onClose={() => setCommitAuditVisible(false)}
        luckysheet={sheetRef}
        templateId={templateId}
      />
    </>
  );
}

export default connect(({ detail, user, xflow, loading }) => ({
  flowDetail: xflow.flowDetail,
  auditList: detail.auditList,
  instanceDetail: detail.dingInstanceDetail,
  currentUser: user.currentUser,
  versionList: detail.versionList,
  versionTree: detail.versionTree,
  typeOptions: detail.typeOptions,
  classifyList: detail.classifyList,
  excelFileList: detail.excelFileList,
  comment: detail.comment,
  loading,
}))(Detail);