tqv-data-operation-screen/src/pages/frame/view.jsx

import React, { useState, useEffect, useCallback, useRef } from "react";
import { useHistory } from "react-router-dom";
import PropTypes from "prop-types";
import styles from "./style.less";
import Navigator from "./component/navigator/view.jsx";
import Top from "./component/top/view.jsx";
import ModelMsg from "./component/modelMsg/view.jsx";
import BreadcrumbView from "./component/breadcrumb/view";
import TipMsg from "./component/tipMsg/view.jsx";

import $store from "@store/";
import {
  Dropdown,
  Menu,
  message,
  Button,
  Form,
  Modal,
  Tabs,
  Input,
} from "antd";
import DefaultImg from "@components/defaultImg/view.jsx";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  AreaChartOutlined,
  PieChartOutlined,
  BarChartOutlined,
  DotChartOutlined,
  LineChartOutlined,
  RadarChartOutlined,
  HeatMapOutlined,
  FallOutlined,
  RiseOutlined,
  StockOutlined,
  BoxPlotOutlined,
  FundOutlined,
  SlidersOutlined,
  DatabaseOutlined,
  DollarOutlined,
  ControlOutlined,
  CodeOutlined,
  BarsOutlined,
  AppstoreAddOutlined,
  ApartmentOutlined,
  InfoCircleOutlined,
  StarOutlined,
  StarFilled,
} from "@ant-design/icons";
import {
  getDmpAccessUrl,
  getFineBiToken,
  getValueByDictCode,
  getPreFineBiUrl,
  getSunwayAccessUrl,
} from "./component/top/api";
import { dealDiffSheetType, crossMenuClick } from "@utils/util";
import utils from "@utils/index";
import "@themes/themes.less";
import { saveMenu } from "@apis/enter.js";
import { careOrCancelResource, getUserResourceTree } from "./api";
import { observer, observable } from "mobx-react";
import { toJS } from "mobx";
const { SubMenu } = Menu;
const { TabPane } = Tabs;

// Frame.propTypes = {
//   child: PropTypes.object,
// };

let keys = [];

let attrs = {
  style: { color: "#c7c7c7", fontSize: 13 },
};

const iconObj = {
  AreaChartOutlined: <AreaChartOutlined {...attrs} />,
  PieChartOutlined: <PieChartOutlined {...attrs} />,
  BarChartOutlined: <BarChartOutlined {...attrs} />,
  DotChartOutlined: <DotChartOutlined {...attrs} />,
  LineChartOutlined: <DotChartOutlined {...attrs} />,
  RadarChartOutlined: <RadarChartOutlined {...attrs} />,
  HeatMapOutlined: <HeatMapOutlined {...attrs} />,
  FallOutlined: <FallOutlined {...attrs} />,
  RiseOutlined: <RiseOutlined {...attrs} />,
  StockOutlined: <StockOutlined {...attrs} />,
  BoxPlotOutlined: <BoxPlotOutlined {...attrs} />,
  FundOutlined: <FundOutlined {...attrs} />,
  SlidersOutlined: <SlidersOutlined {...attrs} />,
  DatabaseOutlined: <DatabaseOutlined {...attrs} />,
  DollarOutlined: <DollarOutlined {...attrs} />,
  ControlOutlined: <ControlOutlined {...attrs} />,
  CodeOutlined: <CodeOutlined {...attrs} />,
  BarsOutlined: <BarsOutlined {...attrs} />,
  AppstoreAddOutlined: <AppstoreAddOutlined {...attrs} />,
  ApartmentOutlined: <ApartmentOutlined {...attrs} />,
};

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 18,
  },
};

let leafNode = {
  // nodeId: {num, parentIds}
};

const findLeaves = (tree = []) => {
  function loop(list, parentIds = []) {
    list.map((item) => {
      // 新建当前ID的键值对
      if ((item.resourceList || []).length > 0) {
        loop(item.resourceList, parentIds.concat([item.resourceId]));
      } else {
        leafNode[item.resourceId] = {
          name: item.resourceName,
          id: item.resourceId,
          parentIds,
        };
      }
    });
  }

  loop(tree, []);
};

let sVal = "";

export default observer(function Frame(props) {
  const [searchVal, setSearchVal] = useState(""); /**搜索关键词内容 */
  const [collapsed, setCollapsed] = useState(false);
  const [leftMenuHeight, setleftMenuHeight] = useState("100%");
  const [leftMenuWidth, setleftMenuWidth] = useState(220);
  const [modelMsgs, setModelMsgs] = useState({});
  const [tipMsgs, setTipMsgs] = useState({});
  const history = useHistory();
  const [curKey, setKey] = useState("1");
  const moveBar = useRef();
  const $search = useRef();
  const leftMenu = useRef();
  const [isMove, setisMove] = useState(false);

  const { Search } = Input;
  let showIds = $store.app.showIds;

  function calcValue(str) {
    if (str === "sysToken") {
      return `${sessionStorage.getItem("token")}$`;
    }
  }

  document.onmousemove = function (e) {
    //是否为可移动状态
    if (isMove) {
      let e = e || window.event;

      let moveX = e.clientX; //得到距离左边移动距离
      if (moveX < 44) {
        moveX = 44;
      } else if (moveX > 800) {
        moveX = 800;
      }
      setleftMenuWidth(moveX);
    } else {
      return;
    }
  };

  document.onmouseup = () => {
    setisMove(false);
  };

  const stopLeftMenu = () => {
    setisMove(false);
  };

  const moveLeftMenu = () => {
    setisMove(true);
  };
  const handleClick = (data) => {

    let { key } = data;
    let item = JSON.parse(key || "{}");
    if (item.openType === "close") {
      message.destroy();
      return message.warning("该菜单暂未开放");
    }
    modelMsgs.isShow(item.resourceId, item.resourceName,item);
    $store.app.setNavList({
      name: item.resourceName,
      path: item.resourceUrl,
      type: item.resourceType,
      openType: item.openType,
      id: item.resourceId,
    });

    $store.app.setCurNav(item.resourceUrl);

    sessionStorage.setItem("curNodeId", item.resourceId);
    // sessionStorage.setItem("jumpType", item.props.type);

    dealDiffSheetType(item).then((response) => {
      if (response.type === "sys") {
        history.push(response.link);
      } else {
        history.push(`/home/outer/${response.activeItem.resourceId}`);
      }
    });
    saveMenu(item);
  };

  /**打开 报表目录 */
  const openReportDire = (key) => {
    let activePath = `/home/directory/${key}`;
    let navObj = {
      name: sessionStorage.getItem("resourceName"),
      path: activePath,
      type: "sys",
      openType: "self",
      id: key,
    };
    // $store.app.setNavList(navObj);
    // $store.app.setCurNav(activePath);
    // history.push(activePath);
  };

  function callback(key) {
    return setKey(key);
  }

  const onResize = useCallback(() => {
    setleftMenuHeight(document.documentElement.clientHeight - 82 + "px");
  }, []);
  const onResize_pop = useCallback(() => {
  }, []);

  useEffect(() => {
    setSearchVal("");
    leafNode = {};
    $store.app.setShowIds([]);
    // showIds = [];
    setleftMenuHeight(document.documentElement.clientHeight - 82 + "px");
    window.addEventListener("resize", onResize);

    findLeaves($store.sysMenu.submenuList);

    return () => {
      window.removeEventListener("resize", onResize);
      window.removeEventListener("popstate", onResize_pop);
    };
  }, [$store.app.refresh]);

  function loopMenu(list) {
    if(!$store.app.curNav){$store.app.curNav = ""}
    return list.map((menu, index) => {
      if (menu.resourceType !== "module_menu" && menu.resourceList.length > 0) {
        return (
          <SubMenu
            key={`${menu.resourceId}Sub`}
            title={menu.resourceName}
            icon={iconObj[menu.resourceIcon]}
            className={`normal_menu ${menu.resourceUrl === $store.app.curNav ||  $store.app.curNav.indexOf('/'+menu.resourceId) > -1 ? "click_active" : ""
              }`}
            onTitleClick={(val, domEvent) => {
              let titleKey = val.key.slice(
                0,
                val.key.length - 3
              ); /**侧边父级id */
              let activeUrl = $store.app.activedUrl;
              sessionStorage.setItem("resourceName", menu.resourceName);
              if (
                activeUrl.indexOf("/home/outer") > -1 ||
                activeUrl === "/home/report" ||
                activeUrl === "/home/write"
              ) {
                openReportDire(titleKey);
              }
            }}
          // style={{ backgroundColor: "#031646" }}
          >
            {loopMenu(menu.resourceList)}
          </SubMenu>
        );
      } else {
        return (
          <>
            <Menu.Item
              key={JSON.stringify(menu)}
              icon={iconObj[menu.resourceIcon]}
              className={`${menu.resourceUrl === $store.app.curNav ||  $store.app.curNav.indexOf('/'+menu.resourceId) > -1
                  ? "click_active"
                  : "normal_menu"
                }`}
            // style={{ backgroundColor: "#031646" }}
            >
              <span>
                <span className="text_over" title={menu.resourceName}>
                  {menu.resourceName}
                </span>
                {menu.resourceType.match(/fine_bi|dmpReport|report|yonghong/) && (
                  <>
                    {/* <span
                      style={{ paddingLeft: 5 }}
                      onClick={(e) => {
                        e.stopPropagation();
                        getMenuDesc({
                          resourceId: menu.resourceId,
                        }).then(({ data, resultCode }) => {
                          if (+resultCode === 0) {
                            $store.app.setMetaData({
                              data,
                              visible: true,
                            });
                          }
                        });
                      }}
                    >
                      <InfoCircleOutlined />
                    </span> */}

                    <span
                      className={menu.isCare ? "care_color" : "emptystar"}
                      twotonecolor ="#FFBF00"
                      style={{ paddingLeft: 5 }}
                      onClick={(e) => {
                        menu.isCare = !menu.isCare;
                        $store.sysMenu.setSubmenuList(
                          $store.sysMenu.submenuList
                        );
                        sessionStorage.setItem(
                          "subMenuList",
                          JSON.stringify($store.sysMenu.submenuList)
                        );

                        const config = {
                          isCare: menu.isCare,
                          resourceId: menu.resourceId,
                        };
                        careOrCancelResource(config).then(
                          ({ data, resultCode }) => {
                            if (+resultCode === 0) {
                              message.success(
                                menu.isCare ? "关注成功" : "取消关注成功"
                              );
                              //重新发送请求
                              let subMenuList = JSON.parse(
                                sessionStorage.getItem("subMenuList")
                              );
                              subMenuList.filter((item) => {
                                if (item.resourceId === menu.resourceId) {
                                }
                              });
                            }
                          }
                        );
                        e.stopPropagation();
                      }}
                    >
                      {menu.isCare ? <StarFilled /> : <StarOutlined />}
                    </span>
                  </>
                )}
              </span>
            </Menu.Item>
          </>
        );
      }
    });
  }

  function loopMenu2(list) {
    // console.log("showIds==", [...showIds]);
    return list.map((menu, index) => {
      if (showIds.indexOf(menu.resourceId) === -1) {
        return null;
      }
      if (menu.resourceList.length > 0) {
        return (
          <SubMenu
            key={`${menu.resourceId}Sub`}
            title={menu.resourceName}
            icon={iconObj[menu.resourceIcon]}
            className={`normal_menu ${menu.resourceUrl === $store.app.curNav ? "click_active" : ""
              }`}
            onTitleClick={(val, domEvent) => {
              let titleKey = val.key.slice(
                0,
                val.key.length - 3
              ); /**侧边父级id */
              let activeUrl = $store.app.activedUrl;
              sessionStorage.setItem("resourceName", menu.resourceName);
              if (
                activeUrl.indexOf("/home/outer") > -1 ||
                activeUrl === "/home/report" ||
                activeUrl === "/home/write"
              ) {
                openReportDire(titleKey);
              }
            }}
          // style={{ backgroundColor: "#031646" }}
          >
            {loopMenu2(menu.resourceList)}
          </SubMenu>
        );
      } else {
        return (
          <>
            <Menu.Item
              key={JSON.stringify(menu)}
              icon={iconObj[menu.resourceIcon]}
              className={`${menu.resourceUrl === $store.app.curNav
                  ? "click_active"
                  : "normal_menu"
                }`}
            // style={{ backgroundColor: "#031646" }}
            >
              <span>
                <span className="text_over" title={menu.resourceName}>
                  {menu.resourceName}
                </span>
              </span>
            </Menu.Item>
          </>
        );
      }
    });
  }
  const onRef = (ref) => {
    setModelMsgs(ref);
  };
  const getTips = () => {
    tipMsgs.getTip()
  };
  const cleatTips = () => {
    tipMsgs.cleatTips()
  };
  const onRef2 = (ref) => {
    setTipMsgs(ref);
    console.log(tipMsgs,"tipMsgs")
  };

  return (
    <div className={styles.frame}>
      <Top />
      <ModelMsg onRef={onRef} getTips={getTips} cleatTips={cleatTips}/>

      {/* 断网或超时显示提示 */}
      {/* <div className="nowifi-tip">当前网络状态不佳</div> */}

      {/* 正文 */}
      <div style={{ display: "flex", height: '100%' }}>
        {$store.sysMenu.submenuList.length > 0 && !collapsed && (
          <div
            className="movebar"
            style={{ left: leftMenuWidth }}
            ref={moveBar}
            onMouseDown={moveLeftMenu}
            onMouseUp={stopLeftMenu}
          ></div>
        )}
        {isMove && <div className="markmore"></div>}

        <div
          className={"body_box homePage"}
        >
          <Navigator
            style={{
              display:"none",
            }}
          />
          <TipMsg onRef={onRef2}></TipMsg>
          {$store.app.navList.length === 0 && false &&
            !history.location.pathname.match(/index|work|center|clush/) ? (
            <DefaultImg />
          ) : (
            props.child && props.child
          )}
        </div>
      </div>

      {/* 元数据展示 */}
      <Modal
        title="报表元数据"
        visible={$store.app.metaData.visible}
        width="665px"
        onCancel={() => {
          $store.app.setMetaData({
            visible: false,
          });
        }}
        footer={null}
      >
        <Form {...layout}>
          <Tabs defaultActiveKey="0" onChange={callback}>
            <TabPane tab="基础信息" key="0">
              <Form.Item name="remark" label="报表描述" {...formItemLayout}>
                <span>{$store.app.metaData.data.remark}</span>
              </Form.Item>

              <Form.Item name="department" label="责任部门" {...formItemLayout}>
                <span>{$store.app.metaData.data.departmentInfo}</span>
              </Form.Item>

              <Form.Item name="charger" label="资产责任人" {...formItemLayout}>
                <span>{$store.app.metaData.data.charger}</span>
              </Form.Item>

              <Form.Item name="itManager" label="IT经理" {...formItemLayout}>
                <span>{$store.app.metaData.data.itManager}</span>
              </Form.Item>

              <Form.Item name="itDeveloper" label="IT研发" {...formItemLayout}>
                <span>{$store.app.metaData.data.itDeveloper}</span>
              </Form.Item>
            </TabPane>

            <TabPane tab="资产信息" key="1">
              <Form.Item name="dataFrom" label="数据来源" {...formItemLayout}>
                <span>{$store.app.metaData.data.dataFrom}</span>
              </Form.Item>

              <Form.Item
                name="updateFrequency"
                label="数据更新频率"
                {...formItemLayout}
              >
                <span>{$store.app.metaData.data.updateFrequency}</span>
              </Form.Item>

              <Form.Item name="businessFormat" label="业态" {...formItemLayout}>
                <span>{$store.app.metaData.data.businessFormat}</span>
              </Form.Item>

              <Form.Item name="module" label="业务模块" {...formItemLayout}>
                <span>{$store.app.metaData.data.module}</span>
              </Form.Item>

              <Form.Item
                name="sonModule"
                label="业务子模块"
                {...formItemLayout}
              >
                <span>{$store.app.metaData.data.sonModule}</span>
              </Form.Item>

              <Form.Item name="assetType" label="资产类型" {...formItemLayout}>
                <span>{$store.app.metaData.data.assetType}</span>
              </Form.Item>

              <Form.Item name="assetLevel" label="资产密级" {...formItemLayout}>
                <span>{$store.app.metaData.data.assetLevel}</span>
              </Form.Item>
            </TabPane>
          </Tabs>
        </Form>
      </Modal>
    </div>
  );
});