GtDigManageWeb/src/pages/Cad/detail.js

import { useRef, useEffect, useMemo } from 'react';
import PageContent from '@/components/PageContent';
import { useLocation, useNavigate, useRequest } from '@umijs/max';
import { Button, message } from 'antd';
import md5 from 'md5';
import {
  queryCadCommitCreate,
  queryCadCommitDel,
  queryCadCommitList,
} from '../../services/cad';
import moment from 'moment';

const CadDeTail = () => {
  const navigate = useNavigate();
  const cadRef = useRef();
  const location = useLocation();
  const {
    state: { path, user = {}, project_id },
  } = location;
  console.log('---------------------------', path, user, project_id);

  //当前登录的用户信息
  let currentUser = {
    userId: user.ID,
    userName: user.CName,
    phone: user.Mobile,
    email: user.Email,
    description: '',
    type: 'FREE',
  };
  const doc_id = useMemo(() => md5(path), [path]);

  //添加、编辑评论
  const { run: runAdd, loading: loadingAdd } = useRequest(
    queryCadCommitCreate,
    {
      manual: true,
      onSuccess: (data) => {
        message.success('新建成功');
        setCommitList(data);
      },
    },
  );
  //删除评论
  const { run: runDel, loading: loadingDel } = useRequest(queryCadCommitDel, {
    manual: true,
    onSuccess: (data) => {
      message.success('删除成功');
      run();
    },
  });
  //请求评论列表
  const { run: run, loading } = useRequest(
    () => queryCadCommitList({ doc_id }),
    {
      manual: true,
      onSuccess: (data) => {
        setCommitList(data);
      },
    },
  );

  // let commentList = {
  //   msg: '操作成功',
  //   code: 0,
  //   data: {
  //     total: 2,
  //     rows: [
  //       {
  //         createBy: 1317,
  //         creator: '皮卡丘',
  //         createTime: 1672040045000,
  //         id: '1737299871415943168',
  //         docId: '1703039467897',
  //         handleId: '34',
  //         parentId: '0',
  //         level: 0,
  //         withAt: 'NO',
  //         withMark: 'NO',
  //         content: '###梵蒂冈梵蒂冈发的',
  //         mark: '',
  //         replyList: [],
  //       },
  //       {
  //         createBy: 1317,
  //         creator: '柯南',
  //         createTime: 1672040002000,
  //         id: '1737299871415943169',
  //         docId: '1703039467897',
  //         handleId: '34',
  //         parentId: '1737299871415943168',
  //         level: 0,
  //         withAt: 'NO',
  //         withMark: 'YES',
  //         content: '对符合法规和法国###',
  //         mark: '[{"id":"7a4f4b9f-992d-15ef-9b17-7ca8abe833df","pt":[532.2265851288126,664.973293757502,0],"color":"red","type":0},{"id":"8bac4935-2e0b-444c-212e-bfca607c4f8e","points":[614.8609930415427,634.9244181528729,0,813.1835720320946,678.495287779585,0,834.217784955335,418.5725137995435,0,811.6811282518631,329.9283307658877,0],"color":"red","type":3},{"id":"a664f1ab-359b-87a0-7db9-f758e0e9e958","center":[294.8404678522429,338.9429934472764,0],"endPt":[365.45532552312125,275.84035467755535,0],"color":"cyan","type":1}]',
  //         replyList: [],
  //       },
  //     ],
  //   },
  // };
  //设置群组成员列表，作为@用户列表供用户选择
  let memberList = {
    msg: '操作成功',
    code: 0,
    data: {
      total: 2,
      rows: [
        // {
        //   memberId: '2138',
        //   phone: '',
        //   email: '',
        //   memberName: '何为',
        //   memberType: 'USER',
        //   lastTime: 1672039449000,
        //   roleId: '1607272382833942531',
        //   roleName: '查看者',
        //   color: '#87CEFA',
        // },
        // {
        //   memberId: '1317',
        //   phone: '',
        //   email: '',
        //   memberName: '柯南',
        //   memberType: 'PROJECT_ADMIN',
        //   lastTime: 1672038572000,
        //   roleId: '1607272382833942528',
        //   roleName: '管理员',
        //   color: '#87CEFA',
        // },
      ],
    },
  };

  useEffect(() => {
    const content = document.getElementById('container');
    ZwCloud2D.ZwEditor.ZwInit(content);
    ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl(
      'https://cad.greentech.com.cn',
      'wss://cad.greentech.com.cn:5121',
      'https://cad.greentech.com.cn',
    );
    //加载图纸
    ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg(path);
    ZwCloud2D.ZwDataProcessor.ZwLoad();
    //请求评论内容并注入cad评论列表
    setTimeout(() => {
      run();
    }, 1000);

    //拦截cad评论面板方法，调用后端接口处理
    ZwCloud2D.ZwMessageCallback.ZwEvtUpdateCommentData = function (data) {
      console.log('------------------', data);
      switch (data.type) {
        case 'create':
          // 补充data.data中缺失的参数，保存新增的评论数据\
          const paramsAdd = {
            id: 0,
            project_id,
            user_name: user.CName,
            content: data.data.content,
            doc_id,
            parent_id: 0,
            with_mark: data.data.withMark || '',
            mark: data.data.mark || '',
          };
          runAdd(paramsAdd);
          break;
        case 'reply':
          const paramsReply = {
            id: 0,
            project_id,
            user_name: user.CName,
            content: data.data.content,
            doc_id,
            parent_id: data.data.parentId,
            with_mark: data.data.withMark || '',
            mark: data.data.mark || '',
          };
          runAdd(paramsReply);
          break;
        case 'delete':
          // 删除评论数据
          const paramsDel = {
            project_id,
            id: data.data.id,
          };
          runDel(paramsDel);
          break;
        case 'edit':
          // 编辑评论数据
          const paramsEdit = {
            project_id,
            id: data.data.id,
            user_name: user.CName,
            content: data.data.content,
            doc_id,
            parent_id: 0,
            with_mark: data.data.withMark || '',
            mark: data.data.mark || '',
          };
          runAdd(paramsEdit);
          break;
        default:
          break;
      }
    };
  }, []);

  const getRows = (list) => {
    if (!list || list?.length == 0) return [];
    return list?.map((item) => {
      const {
        user_id,
        user_name,
        id,
        parent_id = 0,
        content,
        create_time,
        mark,
        with_mark,
        children,
      } = item;
      return {
        createBy: user_id,
        creator: user_name,
        createTime: moment(create_time).valueOf(),
        id: id,
        docId: path,
        handleId: '34',
        parentId: parent_id,
        level: 0,
        withAt: 'NO',
        withMark: 'NO',
        content,
        mark,
        withMark: with_mark,
        replyList: getRows(children),
      };
    });
  };

  const setCommitList = (data) => {
    const resultData = {
      total: data.all_count,
      rows: [],
    };
    resultData.rows = getRows(data.list);
    //注入评论列表、用户列表（目前为空）， 个人信息
    ZwCloud2D.ZwDataManager.ZwSetCommentData({
      commentList: { msg: '操作成功', code: 0, data: resultData },
      memberList: memberList,
      user: currentUser,
    });
  };

  const handleBackClick = () => {
    navigate(-1);
  };

  return (
    <PageContent>
      <div style={{ fontSize: '20px', marginBottom: '10px' }}>
        CAD在线审批
        <Button
          type="primary"
          style={{ float: 'right' }}
          onClick={handleBackClick}
        >
          返回
        </Button>
      </div>

      <div
        id="container"
        style={{ width: '100%', height: '80vh' }}
        ref={cadRef}
      />
    </PageContent>
  );
};

export default CadDeTail;