脚本管理支持重命名文件/文件夹

back/api/script.ts

@@ -274,4 +274,31 @@ export default (app: Router) => {
       }
     },
   );
+
+  route.put(
+    '/rename',
+    celebrate({
+      body: Joi.object({
+        filename: Joi.string().required(),
+        path: Joi.string().allow(''),
+        newFilename: Joi.string().required(),
+      }),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        let { filename, path, type, newFilename } = req.body as {
+          filename: string;
+          path: string;
+          type: string;
+          newFilename: string;
+        };
+        const filePath = join(config.scriptPath, path, filename);
+        const newPath = join(config.scriptPath, path, newFilename);
+        fs.renameSync(filePath, newPath);
+        res.send({ code: 200 });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
 };

src/components/iconfont.tsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: ['//at.alicdn.com/t/c/font_3354854_z0d9rbri1ci.js'],
+  scriptUrl: ['//at.alicdn.com/t/c/font_3354854_ob5y15ewlyq.js'],
 });
 
 export default IconFont;

src/pages/script/index.tsx

@@ -39,6 +39,8 @@ import { depthFirstSearch } from '@/utils';
 import { SharedContext } from '@/layouts';
 import useFilterTreeData from '@/hooks/useFilterTreeData';
 import uniq from 'lodash/uniq';
+import IconFont from '@/components/iconfont';
+import RenameModal from './renameModal';
 
 const { Text } = Typography;
 
@@ -64,20 +66,22 @@ const Script = () => {
   const [isEditing, setIsEditing] = useState(false);
   const editorRef = useRef<any>(null);
   const [isAddFileModalVisible, setIsAddFileModalVisible] = useState(false);
+  const [isRenameFileModalVisible, setIsRenameFileModalVisible] = useState(false);
   const [currentNode, setCurrentNode] = useState<any>();
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
 
-  const getScripts = () => {
-    setLoading(true);
+  const getScripts = (needLoading: boolean = true) => {
+    needLoading && setLoading(true);
     request
       .get(`${config.apiPrefix}scripts`)
       .then(({ code, data }) => {
         if (code === 200) {
           setData(data);
+          initState();
           initGetScript();
         }
       })
-      .finally(() => setLoading(false));
+      .finally(() => needLoading && setLoading(false));
   };
 
   const getDetail = (node: any) => {
@@ -287,6 +291,15 @@ const Script = () => {
     });
   };
 
+  const renameFile = () => {
+    setIsRenameFileModalVisible(true);
+  }
+
+  const handleRenameFileCancel = () => {
+    setIsRenameFileModalVisible(false);
+    getScripts(false);
+  }
+
   const addFile = () => {
     setIsAddFileModalVisible(true);
   };
@@ -381,6 +394,9 @@ const Script = () => {
       case 'delete':
         deleteFile();
         break;
+      case 'rename':
+        renameFile();
+        break;
       default:
         break;
     }
@@ -407,6 +423,12 @@ const Script = () => {
           icon: <EditOutlined />,
           disabled: !select,
         },
+        {
+          label: '重命名',
+          key: 'rename',
+          icon: <IconFont type="ql-icon-rename" />,
+          disabled: !select,
+        },
         {
           label: '删除',
           key: 'delete',
@@ -471,6 +493,14 @@ const Script = () => {
                   icon={<EditOutlined />}
                 />
               </Tooltip>,
+              <Tooltip title="重命名">
+                <Button
+                  disabled={!select}
+                  type="primary"
+                  onClick={renameFile}
+                  icon={<IconFont type="ql-icon-rename" />}
+                />
+              </Tooltip>,
               <Tooltip title="删除">
                 <Button
                   type="primary"
@@ -585,6 +615,11 @@ const Script = () => {
           treeData={data}
           handleCancel={addFileModalClose}
         />
+        <RenameModal
+          visible={isRenameFileModalVisible}
+          handleCancel={handleRenameFileCancel}
+          currentNode={currentNode}
+        />
       </div>
     </PageContainer>
   );

src/pages/script/renameModal.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, message, Input, Form } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+
+const RenameModal = ({
+  currentNode,
+  handleCancel,
+  visible,
+}: {
+  currentNode?: any;
+  visible: boolean;
+  handleCancel: () => void;
+}) => {
+  console.log(currentNode);
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const handleOk = async (values: any) => {
+    setLoading(true);
+    try {
+      const { code, data } = await request.put(
+        `${config.apiPrefix}scripts/rename`,
+        {
+          data: {
+            filename: currentNode.title,
+            path: currentNode.parent || '',
+            newFilename: values.name,
+          },
+        },
+      );
+
+      if (code === 200) {
+        message.success('更新名称成功');
+        handleCancel();
+      }
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    form.resetFields();
+  }, [currentNode, visible]);
+
+  return (
+    <Modal
+      title="重命名"
+      open={visible}
+      forceRender
+      centered
+      maskClosable={false}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            handleOk(values);
+          })
+          .catch((info) => {
+            console.log('Validate Failed:', info);
+          });
+      }}
+      onCancel={() => handleCancel()}
+      confirmLoading={loading}
+    >
+      <Form form={form} layout="vertical" name="edit_name_modal">
+        <Form.Item
+          name="name"
+          rules={[{ required: true, message: '请输入新名称' }]}
+        >
+          <Input placeholder="请输入新名称" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default RenameModal;