优化 bug fix 多选删除功能

ghostg00 · Jan 3, 2020 · 669b349 · 669b349
1 parent 15a33f2
commit 669b349
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 139 deletions.
diff --git a/src/renderer/declare/dva.d.ts b/src/renderer/declare/dva.d.ts
@@ -1,12 +1,11 @@
-import { Action, AnyAction, Reducer } from 'redux';
+import { Action, AnyAction, Reducer } from "redux";
 import { EffectsCommandMap, Model } from "dva";
 
 declare type Effect<S> = (
-  action: AnyAction,
+  action: AnyAction & { payload: any },
   effects: EffectsCommandMap & { select: <T>(func: (state: S) => T) => T }
-) => void;
+) => any;
 
-// @ts-ignore
 declare interface ModelType<S> extends Model {
   namespace: string;
   state?: S;

diff --git a/src/renderer/global.css b/src/renderer/global.css
@@ -1,108 +1,82 @@
 html,
 body,
 #root {
-    height: 100%;
+  height: 100%;
 }
 
 body {
-    margin: 0;
-    -webkit-user-select: none;
+  margin: 0;
+  -webkit-user-select: none;
 }
 
 ::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
-    height: 8px;
+  /*滚动条整体样式*/
+  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-    /*滚动条里面小方块*/
-    border-radius: 5px;
-    /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
-    background: #e0e0e0;
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
+  background: #e0e0e0;
 }
 
 ::-webkit-scrollbar-track {
-    /*滚动条里面轨道*/
-    /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
-    border-radius: 0;
-    background: #f7f7f7;
+  /*滚动条里面轨道*/
+  /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
+  border-radius: 0;
+  background: #f7f7f7;
 }
 
 .Resizer {
-    background: #000;
-    opacity: 0.2;
-    z-index: 1;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-background-clip: padding;
-    -webkit-background-clip: padding;
-    background-clip: padding-box;
+  background: #000;
+  opacity: 0.2;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
 }
 
 .Resizer:hover {
-    -webkit-transition: all 2s ease;
-    transition: all 2s ease;
+  -webkit-transition: all 2s ease;
+  transition: all 2s ease;
 }
 
 .Resizer.horizontal {
-    height: 11px;
-    margin: -5px 0;
-    border-top: 5px solid rgba(255, 255, 255, 0);
-    border-bottom: 5px solid rgba(255, 255, 255, 0);
-    cursor: row-resize;
-    width: 100%;
+  height: 11px;
+  margin: -5px 0;
+  border-top: 5px solid rgba(255, 255, 255, 0);
+  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  cursor: row-resize;
+  width: 100%;
 }
 
 .Resizer.horizontal:hover {
-    border-top: 5px solid rgba(0, 0, 0, 0.5);
-    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+  border-top: 5px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
 }
 
 .Resizer.vertical {
-    width: 11px;
-    margin: 0 -5px;
-    border-left: 5px solid rgba(255, 255, 255, 0);
-    border-right: 5px solid rgba(255, 255, 255, 0);
-    cursor: col-resize;
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
 }
 
 .Resizer.vertical:hover {
-    border-left: 5px solid rgba(0, 0, 0, 0.5);
-    border-right: 5px solid rgba(0, 0, 0, 0.5);
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
 }
 
 .Resizer.disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .Resizer.disabled:hover {
-    border-color: transparent;
+  border-color: transparent;
 }
-
-/*.card-container > .ant-tabs-card > .ant-tabs-content {*/
-/*    !*height: 120px;*!*/
-/*    margin-top: -16px;*/
-/*}*/
-
-/*.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {*/
-/*    background: #fff !important;*/
-/*    !*padding: 16px !important;*!*/
-/*}*/
-
-/*.card-container > .ant-tabs-card > .ant-tabs-bar {*/
-/*    border-color: #fff !important;*/
-/*}*/
-
-/*.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {*/
-/*    border-color: transparent !important;*/
-/*    background: transparent !important;*/
-/*}*/
-
-/*.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {*/
-/*    border-color: #fff !important;*/
-/*    background: #fff !important;*/
-/*}*/
-
-
diff --git a/src/renderer/pages/home/components/CreateNodeForm.tsx b/src/renderer/pages/home/components/CreateNodeForm.tsx
@@ -6,18 +6,23 @@ import TextArea from "antd/lib/input/TextArea";
 
 const { Item } = Form;
 
+export interface CreateData {
+  zkNodeName: string;
+  nodeData: string;
+}
+
 export interface CreateNodeFormProps extends FormComponentProps {
   visible: boolean;
   parentNode: string;
   onCancel: ModalProps["onCancel"];
-  onCreate: (values: any) => void;
+  onCreate: (values: CreateData) => void;
 }
 
 const CreateNodeForm: React.ComponentType<CreateNodeFormProps> = props => {
   const { visible, parentNode, onCancel, onCreate, form } = props;
-  const { getFieldDecorator } = form;
+  const { getFieldDecorator, validateFields } = form;
   const onOk = () => {
-    form.validateFields((err: any, values: any) => {
+    validateFields((err: any, values: CreateData) => {
       if (err) return;
       onCreate(values);
     });
@@ -45,12 +50,12 @@ const CreateNodeForm: React.ComponentType<CreateNodeFormProps> = props => {
       <Form {...formItemLayout}>
         <Item label="父节点">{parentNode}</Item>
         <Item label="节点名">
-          {getFieldDecorator("zkNodeName", {
+          {getFieldDecorator<CreateData>("zkNodeName", {
             rules: [{ required: true, message: "请输入节点名称" }]
           })(<Input placeholder={"请输入节点名称"} />)}
         </Item>
         <Item label="节点值">
-          {getFieldDecorator("nodeData")(
+          {getFieldDecorator<CreateData>("nodeData")(
             <TextArea
               placeholder={"请输入节点值"}
               autoSize={{ minRows: 4, maxRows: 4 }}

diff --git a/src/renderer/pages/home/index.tsx b/src/renderer/pages/home/index.tsx
@@ -28,7 +28,6 @@ import { useLocalStorageState } from "@umijs/hooks";
 import LogCard from "@/pages/home/components/LogCard";
 import { Dispatch } from "@/declare/dva";
 import Header from "@/pages/home/components/Header";
-// @ts-ignore
 
 const { TreeNode, DirectoryTree } = Tree;
 const { TextArea } = Input;
@@ -72,7 +71,7 @@ function Home(props: HomeProps) {
   const connect = () => {
     dispatch({
       type: "home/connect",
-      payload: { url }
+      payload: url
     }).then(() => {
       refreshRootTreeNode();
       setNodePath("/");
@@ -132,26 +131,12 @@ function Home(props: HomeProps) {
       }
       if (item.children && item.children.length > 0) {
         return (
-          <TreeNode
-            key={item.key}
-            title={title}
-            dataRef={item}
-            // icon={<Icon type="folder" />}
-            // icon={<IconFont type="icon-folder" style={{ fontSize: 20 }} />}
-          >
+          <TreeNode key={item.key} title={title} dataRef={item}>
             {renderTreeNodes(item.children!)}
           </TreeNode>
         );
       }
-      return (
-        <TreeNode
-          key={item.key}
-          title={title}
-          dataRef={item}
-          isLeaf
-          // icon={<IconFont type="icon-wenjian-" style={{ fontSize: 20 }} />}
-        />
-      );
+      return <TreeNode key={item.key} title={title} dataRef={item} isLeaf />;
     });
 
   const getParentKey = (key: string, tree: TreeNodeNormal[]) => {
@@ -210,7 +195,7 @@ function Home(props: HomeProps) {
       setNodeStat([]);
       setNodeACL(new ZkACL("", "", ""));
     } else {
-      setNodeName((e.node.props.title as any).props.children[2]);
+      setNodeName(e.node.props.dataRef.title);
       const path = e.node.props.eventKey as string;
       setNodePath(path);
       dispatch({
@@ -234,32 +219,35 @@ function Home(props: HomeProps) {
     }).then(() => message.success(`${nodePath}节点值更新成功`));
   };
 
-  const onCreate = (values: any) => {
-    let path = `${nodePath}${nodePath === "/" ? "" : "/"}${values.zkNodeName}`;
+  const onCreate = ({ zkNodeName, nodeData }) => {
+    const path = `${nodePath}${nodePath === "/" ? "" : "/"}${zkNodeName}`;
     dispatch({
       type: "home/create",
       payload: {
         path,
-        nodeData: values.nodeData
+        nodeData
       }
     }).then(() => {
       message.success(`${path}节点新增成功`);
+      setCreateNodeVisible(false);
     });
-    setCreateNodeVisible(false);
   };
 
   const onRemove = () => {
     if (nodePath) {
       Modal.confirm({
         title: "警告",
-        content: "您确定要删除此节点以及子节点吗？",
+        content: "您确定要删除选中节点以及子节点吗？",
+        okText: "确定",
+        cancelText: "取消",
         onOk: () => {
           return new Promise(resolve => {
             dispatch({
               type: "home/remove",
-              payload: { path: nodePath }
+              payload: { path: selectedKeys }
             }).then(() => {
-              message.success(`${nodePath}节点值删除成功`);
+              setSelectedKeys([]);
+              message.success(`节点删除成功`);
               resolve();
             });
           });
@@ -408,18 +396,16 @@ function Home(props: HomeProps) {
         </Row>
         <Row style={{ overflow: "auto", height: "calc(100% - 74px)" }}>
           <Spin spinning={treeLoading}>
-            <Tree
-              blockNode
-              // showIcon
-              // multiple
+            <DirectoryTree
+              multiple
               selectedKeys={selectedKeys}
               onSelect={onSelectTree}
               onExpand={onExpand}
               expandedKeys={expandedKeys}
               autoExpandParent={autoExpandParent}
             >
               {renderTreeNodes(treeData)}
-            </Tree>
+            </DirectoryTree>
           </Spin>
         </Row>
       </Card>