树为空时创建目录功能

dlink-admin/src/main/java/com/dlink/model/Catalogue.java

@@ -24,5 +24,5 @@ public class Catalogue extends SuperEntity {
 
     private Integer parentId;
 
-    private Boolean isDir;
+    private Boolean isLeaf;
 }

dlink-admin/src/main/resources/mapper/CatalogueMapper.xml

@@ -9,7 +9,7 @@
         <result column="task_id" property="taskId" />
         <result column="type" property="type" />
         <result column="parent_id" property="parentId" />
-        <result column="is_dir" property="isDir" />
+        <result column="is_leaf" property="isLeaf" />
         <result column="enabled" property="enabled" />
         <result column="create_time" property="createTime" />
         <result column="update_time" property="updateTime" />
@@ -17,7 +17,7 @@
 
     <!-- 通用查询结果列 -->
     <sql id="Base_Column_List">
-        id, name, task_id, type,parent_id,is_dir, enabled, create_time, update_time
+        id, name, task_id, type,parent_id,is_leaf, enabled, create_time, update_time
     </sql>
 
 

dlink-doc/sql/dlink.sql

@@ -25,10 +25,10 @@ CREATE TABLE `dlink_catalogue`  (
   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
   `task_id` int(11) NULL DEFAULT NULL COMMENT '任务ID',
   `name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '名称',
-  `type` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '类型',
+  `type` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '类型',
   `parent_id` int(11) NOT NULL DEFAULT 0 COMMENT '父ID',
   `enabled` tinyint(1) NOT NULL DEFAULT 1 COMMENT '启用',
-  `is_dir` tinyint(1) NOT NULL COMMENT '是否为文件夹',
+  `is_leaf` tinyint(1) NOT NULL COMMENT '是否为叶子',
   `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
   `update_time` datetime(0) NULL DEFAULT NULL COMMENT '最近修改时间',
   PRIMARY KEY (`id`) USING BTREE,

dlink-web/src/components/Studio/StudioConsole/index.tsx

@@ -70,7 +70,7 @@ const StudioConsole = (props:any) => {
           文档
         </span>
         }
-        key="4"
+        key="5"
       >
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
       </TabPane>

dlink-web/src/components/Studio/StudioTree/Function.ts

@@ -3,7 +3,6 @@ import {DataNode} from "antd/lib/tree";
 export type DataType = {
   id:number;
   parentId:number;
-  isDir:boolean;
   isLeaf:boolean;
   children:DataType[];
 };
@@ -11,7 +10,6 @@ export interface TreeDataNode extends DataNode {
   name:string;
   id:number;
   parentId:number;
-  isDir:boolean;
   path:string[];
 }
 
@@ -22,7 +20,6 @@ export function convertToTreeData(data:TreeDataNode[], pid:number,path?:string[]
   for (let i = 0; i < data.length; i++) {
     if (data[i].parentId === pid) {
       let obj = data[i];
-      obj.isLeaf = !obj.isDir;
       obj.title = obj.name;
       obj.key = obj.id;
       obj.path = path.slice();

dlink-web/src/components/Studio/StudioTree/components/UpdateCatalogueForm.tsx

+import React, {useEffect, useState} from 'react';
+import {Form, Button, Input, Modal} from 'antd';
+
+import type {CatalogueTableListItem} from '../data.d';
+
+export type UpdateFormProps = {
+  onCancel: (flag?: boolean, formVals?: Partial<CatalogueTableListItem>) => void;
+  onSubmit: (values: Partial<CatalogueTableListItem>) => void;
+  updateModalVisible: boolean;
+  isCreate: boolean;
+  values: Partial<CatalogueTableListItem>;
+};
+const FormItem = Form.Item;
+
+const formLayout = {
+  labelCol: {span: 7},
+  wrapperCol: {span: 13},
+};
+
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const [formVals, setFormVals] = useState<Partial<CatalogueTableListItem>>({
+    id: props.values.id,
+    name: props.values.name,
+    isLeaf: props.values.isLeaf,
+    parentId: props.values.parentId,
+  });
+
+  const [form] = Form.useForm();
+
+  const {
+    onSubmit: handleUpdate,
+    onCancel: handleUpdateModalVisible,
+    updateModalVisible,
+    values,
+    isCreate,
+  } = props;
+
+  const submitForm = async () => {
+    const fieldsValue = await form.validateFields();
+    setFormVals({...formVals, ...fieldsValue});
+    handleUpdate({...formVals, ...fieldsValue});
+  };
+
+  const renderContent = () => {
+    return (
+      <>
+        <FormItem
+          name="name"
+          label="名称"
+          rules={[{required: true, message: '请输入名称！'}]}>
+          <Input placeholder="请输入"/>
+        </FormItem>
+      </>
+    );
+  };
+
+  const renderFooter = () => {
+    return (
+      <>
+        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
+        <Button type="primary" onClick={() => submitForm()}>
+          完成
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <Modal
+      width={640}
+      bodyStyle={{padding: '32px 40px 48px'}}
+      destroyOnClose
+      title={isCreate ? '创建新目录' : ('重命名目录-' + formVals.name)}
+      visible={updateModalVisible}
+      footer={renderFooter()}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+      <Form
+        {...formLayout}
+        form={form}
+        initialValues={{
+          id: formVals.id,
+          name: formVals.name,
+          isLeaf: formVals.isLeaf,
+          parentId: formVals.parentId,
+        }}
+      >
+        {renderContent()}
+      </Form>
+    </Modal>
+  );
+};
+
+export default UpdateForm;

dlink-web/src/components/Studio/StudioTree/data.d.ts

+export type CatalogueTableListItem = {
+  id: number,
+  name: string,
+  isLeaf: string,
+  parentId: number,
+};

dlink-web/src/components/Studio/StudioTree/index.tsx

-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {connect} from "umi";
 import  {DownOutlined, FrownFilled, FrownOutlined, MehOutlined, SmileOutlined} from "@ant-design/icons";
 import {Tree, Input, Menu, Empty,Button} from 'antd';
@@ -6,6 +6,9 @@ import {getCatalogueTreeData} from "@/pages/FlinkSqlStudio/service";
 import {convertToTreeData, DataType, TreeDataNode} from "@/components/Studio/StudioTree/Function";
 import style from "./index.less";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
+import {handleAddOrUpdate} from "@/components/Common/crud";
+import UpdateCatalogueForm from './components/UpdateCatalogueForm';
+import {ActionType} from "@ant-design/pro-table";
 
 const { DirectoryTree } = Tree;
 
@@ -41,6 +44,10 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
   const [dataList, setDataList] = useState<[]>();
   const [rightClickNodeTreeItem,setRightClickNodeTreeItem] = useState<RightClickMenu>();
   const {currentPath,dispatch} = props;
+  const [updateCatalogueModalVisible, handleUpdateCatalogueModalVisible] = useState<boolean>(false);
+  const [isCreateCatalogue, setIsCreateCatalogue] = useState<boolean>(true);
+  const [catalogueFormValues, setCatalogueFormValues] = useState({});
+  const actionRef = useRef<ActionType>();
 
   const getTreeData = async () => {
     const result = await getCatalogueTreeData();
@@ -91,7 +98,14 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
   };
 
   const getEmpty = () =>{
-    const empty = (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} ><Button type="primary">创建目录</Button></Empty>);
+    const empty = (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} ><Button type="primary" onClick={() => {
+      handleUpdateCatalogueModalVisible(true);
+      setIsCreateCatalogue(true);
+      setCatalogueFormValues({
+        isLeaf:false,
+        parentId:0,
+      });
+    }}>创建目录</Button></Empty>);
     return (treeData&&treeData.length==0)?empty:'';
   };
 
@@ -125,6 +139,25 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
         />
       {getNodeTreeRightClickMenu()}
       {getEmpty()}
+      {updateCatalogueModalVisible? (
+        <UpdateCatalogueForm
+          onSubmit={async (value) => {
+            const success = await handleAddOrUpdate('api/catalogue',value);
+            if (success) {
+              handleUpdateCatalogueModalVisible(false);
+              setCatalogueFormValues({});
+              getTreeData()
+            }
+          }}
+          onCancel={() => {
+            handleUpdateCatalogueModalVisible(false);
+            setCatalogueFormValues({});
+          }}
+          updateModalVisible={updateCatalogueModalVisible}
+          values={catalogueFormValues}
+          isCreate={isCreateCatalogue}
+        />
+      ) : null}
     </div>
   );
 };

dlink-web/src/pages/Cluster/components/UpdateForm.tsx

 import React, {useEffect, useState} from 'react';
 import { Form, Button, Input, Modal,Select } from 'antd';
 
-import type { TableListItem } from '../data.d';
 import Switch from "antd/es/switch";
 import TextArea from "antd/es/input/TextArea";
+import {ClusterTableListItem} from "@/pages/Cluster/data";
+
 export type UpdateFormProps = {
-    onCancel: (flag?: boolean, formVals?: Partial<TableListItem>) => void;
-    onSubmit: (values: Partial<TableListItem>) => void;
+    onCancel: (flag?: boolean, formVals?: Partial<ClusterTableListItem>) => void;
+    onSubmit: (values: Partial<ClusterTableListItem>) => void;
     updateModalVisible: boolean;
-    values: Partial<TableListItem>;
+    values: Partial<ClusterTableListItem>;
 };
 const FormItem = Form.Item;
 
@@ -18,7 +19,7 @@ const formLayout = {
 };
 
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
-    const [formVals, setFormVals] = useState<Partial<TableListItem>>({
+    const [formVals, setFormVals] = useState<Partial<ClusterTableListItem>>({
         id: props.values.id,
         name: props.values.name,
         alias: props.values.alias,