修复脚本管理删除、新建增加选择父目录

src/pages/script/editNameModal.tsx

@@ -1,28 +1,42 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, message, Input, Form } from 'antd';
+import { Modal, message, Input, Form, Select } from 'antd';
 import { request } from '@/utils/http';
 import config from '@/utils/config';
 
+const { Option } = Select;
+
 const EditScriptNameModal = ({
   handleCancel,
+  treeData,
   visible,
 }: {
   visible: boolean;
-  handleCancel: (file?: { filename: string }) => void;
+  treeData: any[];
+  handleCancel: (file?: {
+    filename: string;
+    path: string;
+    key: string;
+  }) => void;
 }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
+  const [dirs, setDirs] = useState<any[]>([]);
 
   const handleOk = async (values: any) => {
     setLoading(true);
+    values.path = values.path || '';
     request
       .post(`${config.apiPrefix}scripts`, {
-        data: { filename: values.filename, content: '' },
+        data: { filename: values.filename, path: values.path, content: '' },
       })
       .then(({ code, data }) => {
         if (code === 200) {
           message.success('保存文件成功');
-          handleCancel({ filename: values.filename });
+          handleCancel({
+            filename: values.filename,
+            path: values.path,
+            key: `${values.path}-${values.filename}`,
+          });
         } else {
           message.error(data);
         }
@@ -33,6 +47,8 @@ const EditScriptNameModal = ({
 
   useEffect(() => {
     form.resetFields();
+    const originDirs = treeData.filter((x) => x.disabled);
+    setDirs([{ key: '' }, ...originDirs]);
   }, [visible]);
 
   return (
@@ -56,10 +72,22 @@ const EditScriptNameModal = ({
       <Form form={form} layout="vertical" name="edit_name_modal">
         <Form.Item
           name="filename"
+          label="文件名"
           rules={[{ required: true, message: '请输入文件名' }]}
         >
           <Input placeholder="请输入文件名" />
         </Form.Item>
+        <Form.Item
+          label="父目录"
+          name="path"
+          initialValue={dirs && dirs.length > 0 ? dirs[0].key : ''}
+        >
+          <Select placeholder="请选择父目录">
+            {dirs.map((x) => (
+              <Option value={x.key}>{x.key || '根'}</Option>
+            ))}
+          </Select>
+        </Form.Item>
       </Form>
     </Modal>
   );

src/pages/script/index.tsx

@@ -113,7 +113,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
     setValue('加载中...');
     const newMode = value ? LangMap[value.slice(-3)] : '';
     setMode(isPhone && newMode === 'typescript' ? 'javascript' : newMode);
-    setSelect(value);
+    setSelect(node.key);
     setTitle(node.parent || node.value);
     setCurrentNode(node);
     getDetail(node);
@@ -167,7 +167,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
   const cancelEdit = () => {
     setIsEditing(false);
     setValue('加载中...');
-    getDetail({ value: select });
+    getDetail(currentNode);
   };
 
   const saveFile = () => {
@@ -177,7 +177,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
         <>
           确认保存文件
           <Text style={{ wordBreak: 'break-all' }} type="warning">
-            {select}
+            {currentNode.value}
           </Text>{' '}
           ，保存后不可恢复
         </>
@@ -190,7 +190,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
           request
             .put(`${config.apiPrefix}scripts`, {
               data: {
-                filename: select,
+                filename: currentNode.value,
                 path: currentNode.parent || '',
                 content,
               },
@@ -230,15 +230,30 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
         request
           .delete(`${config.apiPrefix}scripts`, {
             data: {
-              filename: select,
+              filename: currentNode.value,
+              path: currentNode.parent || '',
             },
           })
           .then((_data: any) => {
             if (_data.code === 200) {
               message.success(`删除成功`);
               let newData = [...data];
-              const index = newData.findIndex((x) => x.value === select);
-              newData.splice(index, 1);
+              if (currentNode.parent) {
+                const parentNodeIndex = newData.findIndex(
+                  (x) => x.key === currentNode.parent,
+                );
+                const parentNode = newData[parentNodeIndex];
+                const index = parentNode.children.findIndex(
+                  (y) => y.key === currentNode.key,
+                );
+                parentNode.children.splice(index, 1);
+                newData.splice(parentNodeIndex, 1, { ...parentNode });
+              } else {
+                const index = newData.findIndex(
+                  (x) => x.key === currentNode.key,
+                );
+                newData.splice(index, 1);
+              }
               setData(newData);
             } else {
               message.error(_data);
@@ -256,12 +271,27 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
   };
 
   const addFileModalClose = (
-    { filename }: { filename: string } = { filename: '' },
+    { filename, path, key }: { filename: string; path: string; key: string } = {
+      filename: '',
+      path: '',
+      key: '',
+    },
   ) => {
     if (filename) {
       const newData = [...data];
-      const _file = { title: filename, key: filename, value: filename };
-      newData.unshift(_file);
+      const _file = { title: filename, key, value: filename, parent: path };
+      if (path) {
+        const parentNodeIndex = newData.findIndex((x) => x.key === path);
+        const parentNode = newData[parentNodeIndex];
+        if (parentNode.children && parentNode.children.length > 0) {
+          parentNode.children.unshift(_file);
+        } else {
+          parentNode.children = [_file];
+        }
+        newData.splice(parentNodeIndex, 1, { ...parentNode });
+      } else {
+        newData.unshift(_file);
+      }
       setData(newData);
       onSelect(_file.value, _file);
       setIsEditing(true);
@@ -273,7 +303,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
     request
       .post(`${config.apiPrefix}scripts/download`, {
         data: {
-          filename: select,
+          filename: currentNode.value,
         },
       })
       .then((_data: any) => {
@@ -281,7 +311,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
-        a.download = select;
+        a.download = currentNode.value;
         document.documentElement.appendChild(a);
         a.click();
         document.documentElement.removeChild(a);
@@ -319,10 +349,20 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
       <Menu.Item key="add" icon={<PlusOutlined />} onClick={addFile}>
         添加
       </Menu.Item>
-      <Menu.Item key="edit" icon={<EditOutlined />} onClick={editFile}>
+      <Menu.Item
+        key="edit"
+        icon={<EditOutlined />}
+        onClick={editFile}
+        disabled={!select}
+      >
         编辑
       </Menu.Item>
-      <Menu.Item key="delete" icon={<DeleteOutlined />} onClick={deleteFile}>
+      <Menu.Item
+        key="delete"
+        icon={<DeleteOutlined />}
+        onClick={deleteFile}
+        disabled={!select}
+      >
         删除
       </Menu.Item>
     </Menu>
@@ -368,6 +408,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
               </Tooltip>,
               <Tooltip title="编辑">
                 <Button
+                  disabled={!select}
                   type="primary"
                   onClick={editFile}
                   icon={<EditOutlined />}
@@ -376,6 +417,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
               <Tooltip title="删除">
                 <Button
                   type="primary"
+                  disabled={!select}
                   onClick={deleteFile}
                   icon={<DeleteOutlined />}
                 />
@@ -459,6 +501,7 @@ const Script = ({ headerStyle, isPhone, theme }: any) => {
         />
         <EditScriptNameModal
           visible={isAddFileModalVisible}
+          treeData={data}
           handleCancel={addFileModalClose}
         />
       </div>