点击任务名跳转脚本管理编辑脚本 (#929)

* 增加捷径：点击任务名跳转脚本管理编辑脚本

* 修正树节点选中，父节点自动展开

src/pages/crontab/index.less

@@ -1,3 +1,11 @@
 .ant-table-pagination.ant-pagination {
   margin-bottom: 0 !important;
 }
+
+tr {
+  td:nth-child(2) {
+    span {
+      cursor: pointer;
+    }
+  }
+}

src/pages/crontab/index.tsx

@@ -35,6 +35,7 @@ import CronLogModal from './logModal';
 import cron_parser from 'cron-parser';
 import { diffTime } from '@/utils/date';
 import { getTableScroll } from '@/utils/index';
+import { history } from 'umi';
 import './index.less';
 
 const { Text } = Typography;
@@ -76,7 +77,11 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
       width: 150,
       align: 'center' as const,
       render: (text: string, record: any) => (
-        <span>
+        <span
+          onClick={() => {
+            goToScriptManager(record);
+          }}
+        >
           {record.name || record._id}{' '}
           {record.isPinned ? (
             <span>
@@ -329,6 +334,20 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
   const [pageSize, setPageSize] = useState(20);
   const [tableScrollHeight, setTableScrollHeight] = useState<number>();
 
+  const goToScriptManager = (record: any) => {
+    const cmd = record.command.split(' ');
+    if (cmd[0] === 'task') {
+      let [p, s] = cmd[1].split('/');
+      if (!s) {
+        s = p;
+        p = '';
+      }
+      history.push(`/script?p=${p}&s=${s}`);
+    } else if (cmd[1] === 'repo') {
+      location.href = cmd[2];
+    }
+  };
+
   const getCrons = () => {
     setLoading(true);
     request

src/pages/script/index.tsx

@@ -31,6 +31,8 @@ import {
   UserOutlined,
 } from '@ant-design/icons';
 import EditScriptNameModal from './editNameModal';
+import debounce from 'lodash/debounce';
+import { history } from 'umi';
 
 const { Text } = Typography;
 
@@ -95,7 +97,10 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
         setData(data.data);
         setFilterData(data.data);
       })
-      .finally(() => setLoading(false));
+      .finally(() => {
+        setLoading(false);
+        initGetScript();
+      });
   };
 
   const getDetail = (node: any) => {
@@ -106,6 +111,22 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
       });
   };
 
+  const initGetScript = () => {
+    const { p, s } = history.location.query as any;
+    if (s) {
+      const obj = {
+        node: {
+          title: s,
+          value: s,
+          key: p ? `${p}-${s}` : s,
+          parent: p,
+        },
+      };
+      setExpandedKeys([p]);
+      onTreeSelect([`${p}-${s}`], obj);
+    }
+  };
+
   const onSelect = (value: any, node: any) => {
     if (node.key === select || !value) {
       return;
@@ -119,6 +140,10 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
     getDetail(node);
   };
 
+  const onExpand = (expKeys: any) => {
+    setExpandedKeys(expKeys);
+  };
+
   const onTreeSelect = useCallback(
     (keys: Key[], e: any) => {
       const content = editorRef.current
@@ -147,6 +172,13 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
   const onSearch = useCallback(
     (e) => {
       const keyword = e.target.value;
+      debounceSearch(keyword);
+    },
+    [data, setFilterData],
+  );
+
+  const debounceSearch = useCallback(
+    debounce((keyword) => {
       setSearchValue(keyword);
       const { tree, expandedKeys } = getFilterData(
         keyword.toLocaleLowerCase(),
@@ -154,7 +186,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
       );
       setExpandedKeys(expandedKeys);
       setFilterData(tree);
-    },
+    }, 300),
     [data, setFilterData],
   );
 
@@ -451,6 +483,8 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
                   showIcon={true}
                   height={height}
                   selectedKeys={[select]}
+                  expandedKeys={expandedKeys}
+                  onExpand={onExpand}
                   showLine={{ showLeafIcon: true }}
                   onSelect={onTreeSelect}
                 ></Tree>