From 27a9fc32a683401b08fb0a403c6b8b483055d7ea Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot Date: Sat, 26 Oct 2024 19:23:53 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=B1:=20[client]=20sync=20upgrade=20wit?= =?UTF-8?q?h=202=20commits=20[trident-sync]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit perf: editable row 优化添加 --- .../src/router/source/modules/crud.ts | 6 + .../src/views/crud/editable/menus/crud.tsx | 107 ++++++++++++++++++ .../src/views/crud/editable/menus/index.vue | 32 ++++++ 3 files changed, 145 insertions(+) create mode 100644 packages/ui/certd-client/src/views/crud/editable/menus/crud.tsx create mode 100644 packages/ui/certd-client/src/views/crud/editable/menus/index.vue diff --git a/packages/ui/certd-client/src/router/source/modules/crud.ts b/packages/ui/certd-client/src/router/source/modules/crud.ts index 1719f9d0..d3a034ad 100644 --- a/packages/ui/certd-client/src/router/source/modules/crud.ts +++ b/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" } ] }, diff --git a/packages/ui/certd-client/src/views/crud/editable/menus/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/menus/crud.tsx new file mode 100644 index 00000000..0d33a0a9 --- /dev/null +++ b/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: "请输入链接" }] + } + } + } + } + }; +} diff --git a/packages/ui/certd-client/src/views/crud/editable/menus/index.vue b/packages/ui/certd-client/src/views/crud/editable/menus/index.vue new file mode 100644 index 00000000..b0a4f29c --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/menus/index.vue @@ -0,0 +1,32 @@ + + +