任务详情脚本增加编辑功能

src/pages/crontab/detail.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Modal,
   message,
@@ -9,6 +9,7 @@ import {
   Tag,
   List,
   Divider,
+  Typography,
 } from 'antd';
 import {
   ClockCircleOutlined,
@@ -24,6 +25,8 @@ import config from '@/utils/config';
 import CronLogModal from './logModal';
 import Editor from '@monaco-editor/react';
 
+const { Text } = Typography;
+
 const tabList = [
   {
     key: 'log',
@@ -59,6 +62,8 @@ const CronDetailModal = ({
   const [log, setLog] = useState('');
   const [value, setValue] = useState('');
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
+  const editorRef = useRef<any>(null);
+  const [scriptInfo, setScriptInfo] = useState<any>({});
 
   const contentList: any = {
     log: (
@@ -79,7 +84,6 @@ const CronDetailModal = ({
         theme={theme}
         value={value}
         options={{
-          readOnly: true,
           fontSize: 12,
           lineNumbersMinChars: 3,
           fontFamily: 'Source Code Pro',
@@ -87,6 +91,9 @@ const CronDetailModal = ({
           glyphMargin: false,
           wordWrap: 'on',
         }}
+        onMount={(editor) => {
+          editorRef.current = editor;
+        }}
       />
     ),
   };
@@ -128,6 +135,7 @@ const CronDetailModal = ({
         s = p;
         p = '';
       }
+      setScriptInfo({ parent: p, filename: s });
       request
         .get(`${config.apiPrefix}scripts/${s}?path=${p || ''}`)
         .then((data) => {
@@ -136,6 +144,48 @@ const CronDetailModal = ({
     }
   };
 
+  const saveFile = () => {
+    Modal.confirm({
+      title: `确认保存`,
+      content: (
+        <>
+          确认保存文件
+          <Text style={{ wordBreak: 'break-all' }} type="warning">
+            {scriptInfo.filename}
+          </Text>{' '}
+          ，保存后不可恢复
+        </>
+      ),
+      onOk() {
+        const content = editorRef.current
+          ? editorRef.current.getValue().replace(/\r\n/g, '\n')
+          : value;
+        return new Promise((resolve, reject) => {
+          request
+            .put(`${config.apiPrefix}scripts`, {
+              data: {
+                filename: scriptInfo.filename,
+                path: scriptInfo.parent || '',
+                content,
+              },
+            })
+            .then((_data: any) => {
+              if (_data.code === 200) {
+                message.success(`保存成功`);
+              } else {
+                message.error(_data);
+              }
+              resolve(null);
+            })
+            .catch((e) => reject(e));
+        });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+
   useEffect(() => {
     if (cron && cron.id) {
       getLogs();
@@ -245,6 +295,17 @@ const CronDetailModal = ({
           onTabChange={(key) => {
             onTabChange(key);
           }}
+          tabBarExtraContent={
+            activeTabKey === 'script' && (
+              <Button
+                type="primary"
+                style={{ marginRight: 8 }}
+                onClick={saveFile}
+              >
+                保存
+              </Button>
+            )
+          }
           bodyStyle={{ height: 'calc(80vh - 188px)', overflowY: 'auto' }}
         >
           {contentList[activeTabKey]}