Merge pull request #42 from DataLinkDC/dev

修复右键菜单位置及执行选中无效的bug
DataLinkDC · Dec 1, 2021 · a515622 · a515622
2 parents 524ffda + 744c07a
commit a515622
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 33 deletions.
diff --git a/dlink-web/src/components/Studio/StudioEdit/index.tsx b/dlink-web/src/components/Studio/StudioEdit/index.tsx
@@ -3,7 +3,6 @@ import * as _monaco from "monaco-editor";
 import MonacoEditor from "react-monaco-editor";
 import {BaseDataSourceField, BaseDataSourceHeader, CompletionItem} from "./data";
 import styles from './index.less';
-
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
 import {DocumentStateType} from "@/pages/Document/model";
@@ -15,13 +14,6 @@ let provider = {
   dispose: () => {},
 };
 
-interface IRightContent {
-  key: string;
-  value: any;
-  handleCheck: () => Promise<boolean>;
-  secondRightData: (BaseDataSourceField|BaseDataSourceHeader)[];
-}
-
 interface ISuggestions {
   label: string;
   kind: string;
@@ -31,6 +23,7 @@ interface ISuggestions {
 
 const FlinkSqlEditor = (props:any) => {
   const {
+      tabsKey,
       height = '100%',
       width = '100%',
       language = 'sql',
@@ -42,13 +35,9 @@ const FlinkSqlEditor = (props:any) => {
     tabs,
     fillDocuments,
     dispatch,
-    } = props
-  ;
-
-  const { tabsKey, value, handleCheck, secondRightData = [] }: IRightContent = props;
+    } = props;
 
   const editorInstance:any = useRef<any>();
-
   const monacoInstance: any = useRef();
 
   const getTabIndex = ():number=>{

diff --git a/dlink-web/src/components/Studio/StudioMenu/index.tsx b/dlink-web/src/components/Studio/StudioMenu/index.tsx
@@ -45,11 +45,11 @@ const StudioMenu = (props: any) => {
     }
     let useSession = !!currentSession.session;
     let param = {
+      ...current.task,
       useSession: useSession,
       session: currentSession.session,
-      statement: selectsql,
       configJson: JSON.stringify(current.task.config),
-      ...current.task,
+      statement: selectsql,
     };
     const key = current.key;
     const taskKey = (Math.random() * 1000) + '';

diff --git a/dlink-web/src/components/Studio/StudioTree/index.tsx b/dlink-web/src/components/Studio/StudioTree/index.tsx
@@ -14,16 +14,17 @@ import UpdateCatalogueForm from './components/UpdateCatalogueForm';
 import {ActionType} from "@ant-design/pro-table";
 import UpdateTaskForm from "@/components/Studio/StudioTree/components/UpdateTaskForm";
 import { Scrollbars } from 'react-custom-scrollbars';
-
 const { DirectoryTree } = Tree;
-
 const {Search} = Input;
 
+
 type StudioTreeProps = {
   rightClickMenu:StateType['rightClickMenu'];
   dispatch:any;
   tabs:StateType['tabs'];
   current:StateType['current'];
+  toolHeight:number;
+  refs:any;
 };
 
 type RightClickMenu = {
@@ -50,7 +51,6 @@ const getParentKey = (key, tree) => {
 
 const StudioTree: React.FC<StudioTreeProps> = (props) => {
   const {rightClickMenu,dispatch,tabs,refs,toolHeight} = props;
-
   const [treeData, setTreeData] = useState<TreeDataNode[]>();
   const [dataList, setDataList] = useState<[]>();
   const [expandedKeys, setExpandedKeys] = useState<[]>();
@@ -62,6 +62,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
   const [taskFormValues, setTaskFormValues] = useState({});
   const [rightClickNode, setRightClickNode] = useState<TreeDataNode>();
   const [available, setAvailable] = useState<boolean>(true);
+  let sref = React.createRef<Scrollbars>();
 
   const getTreeData = async () => {
     const result = await getCatalogueTreeData();
@@ -95,9 +96,6 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     getTreeData();
   }, []);
 
-  const onChange = (e:any) => {
-
-  };
 
   const handleMenuClick=(key:string)=>{
     if(key=='Open'){
@@ -255,10 +253,8 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     const {pageX, pageY} = {...rightClickNodeTreeItem};
     const tmpStyle = {
       position: 'absolute',
-      // left: `${pageX - 50}px`,
-      // top: `${pageY - 202}px`,
-      left: `${pageX}px`,
-      top: `${pageY - 120}px`,
+      left: `${pageX - 40}px`,
+      top: `${pageY - 150}px`,
     };
     let menuItems;
     if(rightClickNode&&rightClickNode.isLeaf){
@@ -308,13 +304,13 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     return (treeData&&treeData.length==0)?empty:'';
   };
 
-  const onRightClick = (e:any) => {
-    setRightClickNode(e.node);
+  const handleContextMenu = (e: React.MouseEvent, node: TreeDataNode) => {
+    setRightClickNode(node);
     setRightClickNodeTreeItem({
-      pageX: e.event.pageX,
-      pageY: e.event.pageY,
-      id: e.node.id,
-      categoryName: e.node.name
+      pageX: e.pageX,
+      pageY: e.pageY+sref.current.getScrollTop(),
+      id: node.id,
+      categoryName: node.name
     });
     dispatch&&dispatch({
       type: "Studio/showRightClickMenu",
@@ -360,11 +356,13 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
         </Tooltip>
         </Col>
       </Row>
-      <Scrollbars  style={{height:(toolHeight-32)}}>
+      <Scrollbars  style={{height:(toolHeight-32)}} ref={sref}>
       {/*<Search style={{marginBottom: 8}} placeholder="Search" onChange={onChange}/>*/}
         <DirectoryTree
           multiple
-          onRightClick={onRightClick}
+          onRightClick={({event, node}: any) => {
+            handleContextMenu(event, node)
+          }}
           onSelect={onSelect}
           switcherIcon={<DownOutlined/>}
           treeData={treeData}