完善增删改功能及mock

src/_mock.js

@@ -18,19 +18,48 @@ const treeData = [
 
 export default {
   // 树
-  'GET /api/BLOCK_NAME_CAMEL_CASE/fetchTreeData': treeData,
+  'GET /api/BLOCK_NAME_CAMEL_CASE/fetchTreeData': {
+    code: 0,
+    msg: 'success',
+    data: treeData,
+  },
   // 节点
   'GET /api/BLOCK_NAME_CAMEL_CASE/fetchNodeData': (req, res) => {
     if (req.query.id == 1) {
       res.send({
-        id: 1,
-        name: '威发',
+        code: 0,
+        msg: 'success',
+        data: {
+          id: 1,
+          name: '威发',
+        },
       });
     } else if (req.query.id == 10) {
       res.send({
-        id: 10,
-        name: '前端组',
+        code: 0,
+        msg: 'success',
+        data: {
+          id: 10,
+          name: '前端组',
+        },
       });
     }
   },
+  // 保存
+  'POST /api/BLOCK_NAME_CAMEL_CASE/saveNodeData': {
+    code: 0,
+    msg: 'success',
+    data: null,
+  },
+  // 更新
+  'POST /api/BLOCK_NAME_CAMEL_CASE/updateNodeData': {
+    code: 0,
+    msg: 'success',
+    data: null,
+  },
+  'POST /api/BLOCK_NAME_CAMEL_CASE/deleteNode': {
+    code: 0,
+    msg: 'success',
+    data: null,
+  },
 };

src/components/SaveOrUpdate/index.js

@@ -52,10 +52,10 @@ class SaveOrUpdate extends PureComponent {
       let data;
       if (details) {
         data = { ...details, ...fieldsValue };
-        type = 'BLOCK_NAME_CAMEL_CASE/update';
+        type = 'BLOCK_NAME_CAMEL_CASE/updateNode';
       } else {
         data = { ...fieldsValue, parentId };
-        type = 'BLOCK_NAME_CAMEL_CASE/save';
+        type = 'BLOCK_NAME_CAMEL_CASE/saveNode';
       }
       dispatch({
         type,

src/index.js

 import React from 'react';
-import { Tree, Row, Col, Card, Menu, Spin } from 'antd';
+import { Tree, Row, Col, Card, Menu, Spin, Modal } from 'antd';
 import { connect } from 'dva';
 import { formatMessage } from 'umi-plugin-react/locale';
 import styles from './style.less';
 import { makeTreeNodeI18NNameAndOperation } from './utils/utils';
 import SaveOrUpdate from './components/SaveOrUpdate';
 
+const { confirm } = Modal;
+
 @connect(({ BLOCK_NAME_CAMEL_CASE, loading }) => ({
   BLOCK_NAME_CAMEL_CASE,
   loading: loading.models.BLOCK_NAME_CAMEL_CASE,

src/locales/en-US.js

@@ -21,4 +21,7 @@ export default {
   'BLOCK_NAME_CAMEL_CASE.cancel.button': 'Cancel',
   'BLOCK_NAME_CAMEL_CASE.update.button': 'Update',
   'BLOCK_NAME_CAMEL_CASE.save.button': 'Save',
+  'BLOCK_NAME_CAMEL_CASE.save.success': 'Save success',
+  'BLOCK_NAME_CAMEL_CASE.update.success': 'Update success',
+  'BLOCK_NAME_CAMEL_CASE.del.success': 'Delete success',
 };

src/locales/zh-CN.js

@@ -21,4 +21,7 @@ export default {
   'BLOCK_NAME_CAMEL_CASE.cancel.button': '取消',
   'BLOCK_NAME_CAMEL_CASE.update.button': '更新',
   'BLOCK_NAME_CAMEL_CASE.save.button': '保存',
+  'BLOCK_NAME_CAMEL_CASE.save.success': '保存成功',
+  'BLOCK_NAME_CAMEL_CASE.update.success': '更新成功',
+  'BLOCK_NAME_CAMEL_CASE.del.success': '删除成功',
 };

src/locales/zh-TW.js

@@ -21,4 +21,7 @@ export default {
   'BLOCK_NAME_CAMEL_CASE.cancel.button': '取消',
   'BLOCK_NAME_CAMEL_CASE.update.button': '更新',
   'BLOCK_NAME_CAMEL_CASE.save.button': '保存',
+  'BLOCK_NAME_CAMEL_CASE.save.success': '保存成功',
+  'BLOCK_NAME_CAMEL_CASE.update.success': '更新成功',
+  'BLOCK_NAME_CAMEL_CASE.del.success': '删除成功',
 };

src/model.js

+import { message } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
 import * as service from './service';
 
 export default {
@@ -21,8 +23,12 @@ export default {
     },
     // 获取树数据
     *getTree(_, { call, put }) {
-      const data = yield call(service.fetchTreeData);
-      yield put({ type: 'save', payload: { treeData: data } });
+      const result = yield call(service.fetchTreeData);
+      if (result.code === 0) {
+        yield put({ type: 'save', payload: { treeData: result.data } });
+      } else {
+        message.error(result.msg);
+      }
     },
     // 获取树节点数据
     *getNode(
@@ -31,63 +37,70 @@ export default {
       },
       { call, put },
     ) {
-      const data = yield call(service.fetchNodeData, id);
-      yield put({
-        type: 'save',
-        payload: {
-          details: data,
-        },
-      });
+      const result = yield call(service.fetchNodeData, id);
+      if (result.code === 0) {
+        yield put({
+          type: 'save',
+          payload: {
+            details: result.data,
+          },
+        });
+      } else {
+        message.error(result.msg);
+      }
     },
-    *save(
+    // 保存子级或者同级节点
+    *saveNode(
       {
         payload: { data, success },
       },
       { call, put },
     ) {
-      // const result = yield call(service.save, { ...data });
-      // if (result.code === 0) {
-      //   message.success(formatMessage({ id: 'menu.form.save.success' }));
-      //   yield put({
-      //     type: 'getNode',
-      //   });
-      //   success();
-      // } else {
-      //   message.error(result.msg);
-      // }
+      const result = yield call(service.saveNodeData, { ...data });
+      if (result.code === 0) {
+        message.success(formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.save.success' }));
+        yield put({
+          type: 'getTree',
+        });
+        success();
+      } else {
+        message.error(result.msg);
+      }
     },
-    *update(
+    // 编辑节点
+    *updateNode(
       {
         payload: { data, success },
       },
       { call, put },
     ) {
-      // const result = yield call(service.update, { ...data });
-      // if (result.code === 0) {
-      //   message.success(formatMessage({ id: 'menu.form.update.success' }));
-      //   yield put({
-      //     type: 'getSpaceTree',
-      //   });
-      //   success();
-      // } else {
-      //   message.error(result.msg);
-      // }
+      const result = yield call(service.updateNodeData, { ...data });
+      if (result.code === 0) {
+        message.success(formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.update.success' }));
+        yield put({
+          type: 'getTree',
+        });
+        success();
+      } else {
+        message.error(result.msg);
+      }
     },
+    // 删除节点
     *deleteNode(
       {
         payload: { id },
       },
       { call, put },
     ) {
-      // const result = yield call(service.deleteNode, id);
-      // if (result.code === 0) {
-      //   message.success(formatMessage({ id: 'menu.form.del.success' }));
-      //   yield put({
-      //     type: 'getSpaceTree',
-      //   });
-      // } else {
-      //   message.error(result.msg);
-      // }
+      const result = yield call(service.deleteNode, id);
+      if (result.code === 0) {
+        message.success(formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.del.success' }));
+        yield put({
+          type: 'getTree',
+        });
+      } else {
+        message.error(result.msg);
+      }
     },
   },
   subscriptions: {

src/service.js

@@ -8,7 +8,7 @@ const prefix = '/api/BLOCK_NAME_CAMEL_CASE';
  * @export
  * @returns
  */
-export function fetchTreeData() {
+export async function fetchTreeData() {
   return request(`${prefix}/fetchTreeData`);
 }
 /**
@@ -18,6 +18,44 @@ export function fetchTreeData() {
  * @param {*} id
  * @returns
  */
-export function fetchNodeData(id) {
+export async function fetchNodeData(id) {
   return request(`${prefix}/fetchNodeData?id=${id}`);
 }
+/**
+ *保存节点数据
+ *
+ * @export
+ * @param {*} payload
+ * @returns
+ */
+export async function saveNodeData(payload) {
+  return request(`${prefix}/saveNodeData`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+/**
+ *编辑更新节点数据
+ *
+ * @export
+ * @param {*} payload
+ * @returns
+ */
+export async function updateNodeData(payload) {
+  return request(`${prefix}/updateNodeData`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+/**
+ *删除节点
+ *
+ * @export
+ * @param {*} id
+ * @returns
+ */
+export async function deleteNode(id) {
+  return request(`${prefix}/deleteNode?id=${id}`, {
+    method: 'POST',
+  });
+}