perf(editable): 增加示例

src/mock/base.ts

@@ -1,7 +1,8 @@
 import _ from 'lodash-es';
 function copyList(originList: any, newList: any, options: any, parentId?: any) {
   for (const item of originList) {
-    const newItem = { ...item, parentId };
+    const newItem: any = _.cloneDeep(item);
+    newItem.parentId = parentId;
     newItem.id = ++options.idGenerator;
     newList.push(newItem);
     if (item.children != null) {
@@ -297,6 +298,62 @@ const mockUtil: any = {
           };
         },
       },
+      {
+        path: '/mock/' + name + '/cellUpdate',
+        method: 'post',
+        handle(req: any): any {
+          console.log('req', req);
+          let item = findById(req.body.id, list);
+          if (item) {
+            _.mergeWith(item, { [req.body.key]: req.body.value }, (objValue, srcValue) => {
+              if (srcValue == null) {
+                return;
+              }
+              // 如果被合并对象为数组，则直接被覆盖对象覆盖，只要覆盖对象不为空
+              if (_.isArray(objValue)) {
+                return srcValue;
+              }
+            });
+          } else {
+            item = {
+              id: ++options.idGenerator,
+              [req.body.key]: req.body.value,
+            };
+            list.unshift(item);
+          }
+
+          return {
+            code: 0,
+            msg: 'success',
+            data: item,
+          };
+        },
+      },
+      {
+        path: '/mock/' + name + '/columnUpdate',
+        method: 'post',
+        handle(req: any): any {
+          for (const item of req.body) {
+            const item2 = findById(item.id, list);
+            if (item2) {
+              _.mergeWith(item2, item, (objValue, srcValue) => {
+                if (srcValue == null) {
+                  return;
+                }
+                // 如果被合并对象为数组，则直接被覆盖对象覆盖，只要覆盖对象不为空
+                if (_.isArray(objValue)) {
+                  return srcValue;
+                }
+              });
+            }
+          }
+          return {
+            code: 0,
+            msg: 'success',
+            data: null,
+          };
+        },
+      },
     ];
   },
 };

src/router/modules/crud.ts

@@ -12,6 +12,7 @@ import {
   ExtensionPuzzleOutline,
   FlameOutline,
   CubeOutline,
+  PencilOutline,
 } from '@vicons/ionicons5';
 
 const basicRoute: RouteRecordRaw = {
@@ -700,18 +701,6 @@ const featureRoutes = {
       path: 'height',
       component: () => import('@/views/crud/feature/height/index.vue'),
     },
-    {
-      meta: { title: '可编辑', keepAlive: true },
-      name: 'FeatureEditable',
-      path: 'editable',
-      component: () => import('@/views/crud/feature/editable/index.vue'),
-    },
-    {
-      meta: { title: '行编辑', keepAlive: true },
-      name: 'FeatureEditableRow',
-      path: 'editable-row',
-      component: () => import('@/views/crud/feature/editable-row/index.vue'),
-    },
     {
       meta: { title: '查询框', keepAlive: true },
       name: 'FeatureSearch',
@@ -780,6 +769,57 @@ const featureRoutes = {
     },
   ],
 };
+
+const editableRoute: RouteRecordRaw = {
+  path: 'editable',
+  name: 'Editable',
+  redirect: '/crud/editable/free',
+  meta: {
+    title: '可编辑',
+    icon: renderIcon(PencilOutline),
+  },
+  component: ParentLayout,
+  children: [
+    {
+      name: 'EditableFree',
+      path: 'free',
+      meta: {
+        title: '自由编辑',
+        keepAlive: true,
+      },
+      component: () => import('@/views/crud/editable/free/index.vue'),
+    },
+    {
+      name: 'EditableRow',
+      path: 'row',
+      meta: {
+        title: '行编辑',
+        keepAlive: true,
+      },
+      component: () => import('@/views/crud/editable/row/index.vue'),
+    },
+
+    {
+      name: 'EditableCell',
+      path: 'cell',
+      meta: {
+        title: '单元格编辑',
+        keepAlive: true,
+      },
+      component: () => import('@/views/crud/editable/cell/index.vue'),
+    },
+
+    {
+      name: 'EditableVModel',
+      path: 'vmodel',
+      meta: {
+        title: '子表格编辑',
+        keepAlive: true,
+      },
+      component: () => import('@/views/crud/editable/vmodel/index.vue'),
+    },
+  ],
+};
 const slotRoutes = {
   name: 'Slots',
   path: 'slots',
@@ -931,6 +971,7 @@ const routes = [
       rowHandleRoute,
       componentRoute,
       featureRoutes,
+      editableRoute,
       formRoutes,
       slotRoutes,
       advancedRoutes,

src/styles/common.less

@@ -175,3 +175,7 @@ img, video{
   margin-left: 5px;
   margin-right: 5px;
 }
+
+.ml-5{
+  margin-left:5px;
+}

src/views/crud/editable/cell/api.ts

@@ -0,0 +1,67 @@
+import { requestForMock } from '@/utils/http/service';
+const request = (req) => {
+  return requestForMock(req);
+};
+const apiPrefix = '/mock/EditableCell';
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + '/page',
+    method: 'get',
+    data: query,
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + '/add',
+    method: 'post',
+    data: obj,
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + '/update',
+    method: 'post',
+    data: obj,
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + '/delete',
+    method: 'post',
+    params: { id },
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + '/get',
+    method: 'get',
+    params: { id },
+  });
+}
+
+export function BatchDelete(ids: any) {
+  return request({
+    url: apiPrefix + '/batchDelete',
+    method: 'post',
+    data: { ids },
+  });
+}
+
+export function UpdateCell(id: number, key: string, value: any) {
+  return request({
+    url: apiPrefix + '/cellUpdate',
+    method: 'post',
+    data: { id, key, value },
+  });
+}
+export function UpdateColumn(data) {
+  return request({
+    url: apiPrefix + '/columnUpdate',
+    method: 'post',
+    data,
+  });
+}