🔱: [client] sync upgrade with 2 commits [trident-sync]

perf: editable row 优化添加

packages/ui/certd-client/src/router/source/modules/crud.ts

@@ -682,6 +682,12 @@ export const crudResources = [
             name: "EditableSubCrud",
             path: "/crud/editable/sub-crud",
             component: "/crud/editable/sub-crud/index.vue"
+          },
+          {
+            title: "行编辑VModel",
+            name: "EditableRowVModel",
+            path: "/crud/editable/menus",
+            component: "/crud/editable/menus/index.vue"
           }
         ]
       },

packages/ui/certd-client/src/views/crud/editable/menus/crud.tsx

@@ -0,0 +1,107 @@
+import * as api from "./api";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
+import { nextTick, ref } from "vue";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  let idGen = 1;
+  function nextId() {
+    return idGen++;
+  }
+  const { crudBinding } = crudExpose;
+  const expandedRowKeys = ref([]);
+  return {
+    crudOptions: {
+      //将 addRow 按钮启用
+      actionbar: {
+        buttons: {
+          add: { show: false },
+          addRow: {
+            show: true,
+            click: async () => {
+              crudExpose.editable.addRow({
+                active: true,
+                addRowFunc: () => {
+                  const row = { id: nextId() };
+                  crudBinding.value.data.push(row);
+                  return row;
+                }
+              });
+            }
+          }
+        }
+      },
+      mode: {
+        name: "local",
+        isMergeWhenUpdate: true,
+        isAppendWhenAdd: true
+      },
+      table: {
+        expandedRowKeys: expandedRowKeys,
+        "onUpdate:expandedRowKeys": (keys: any) => {
+          expandedRowKeys.value = keys;
+        },
+        editable: {
+          enabled: true,
+          mode: "row",
+          // activeDefault: true,
+          exclusive: true, //排他式激活
+          exclusiveEffect: "save" //排他式激活时，其他行的编辑状态的处理方式
+        }
+      },
+      rowHandle: {
+        width: 350,
+        group: {
+          editRow: {
+            addChild: {
+              text: "添加子菜单",
+              click: async ({ row }) => {
+                const newRow = { id: nextId(), parentId: row.id };
+                if (!row.children) {
+                  row.children = [];
+                }
+                crudExpose.editable.addRow({
+                  active: true,
+                  addRowFunc: () => {
+                    expandedRowKeys.value.push(row.id);
+                    row.children.push(newRow);
+                    return newRow;
+                  }
+                });
+              }
+            }
+          }
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          type: "number",
+          form: {
+            show: false
+          },
+          column: { width: 80, align: "center" }
+        },
+        title: {
+          title: "标题",
+          type: "text",
+          form: {
+            rules: [{ required: true, message: "请输入标题" }]
+          }
+        },
+        icon: {
+          title: "图标",
+          type: "text",
+          form: {
+            rules: [{ required: true, message: "请选择图标" }]
+          }
+        },
+        link: {
+          title: "链接",
+          type: "link",
+          form: {
+            rules: [{ required: true, message: "请输入链接" }]
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/editable/menus/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        vModel+行编辑
+        <span class="sub">在表格内编辑每行数据</span>
+      </div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#editable">文档</a></div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right> </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useFs } from "@fast-crud/fast-crud";
+
+defineOptions({
+  name: "EditableRowVModel"
+});
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+
+// 页面打开后获取列表数据
+onMounted(() => {
+  // crudExpose.doRefresh();
+  crudExpose.crudBinding.value.data = [];
+  // crudExpose.editable.enable({});
+});
+</script>