From 2ea0c4885377d9ed28b813b52152a62bb032f177 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot Date: Mon, 20 Nov 2023 19:24:12 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=B1:=20[client]=20sync=20upgrade=20wit?= =?UTF-8?q?h=208=20commits=20[trident-sync]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit build: publish success chore: chore: chore: chore: build: publish success chore: --- packages/ui/certd-client/.eslintrc.js | 1 + packages/ui/certd-client/CHANGELOG.md | 12 + packages/ui/certd-client/package.json | 10 +- packages/ui/certd-client/src/mock/base.ts | 59 ++++- .../src/router/source/modules/crud.ts | 47 +++- .../src/views/crud/editable/cell/api.ts | 66 ++++++ .../src/views/crud/editable/cell/crud.tsx | 206 ++++++++++++++++++ .../src/views/crud/editable/cell/index.vue | 90 ++++++++ .../src/views/crud/editable/cell/mock.ts | 25 +++ .../src/views/crud/editable/free/api.ts | 50 +++++ .../src/views/crud/editable/free/crud.tsx | 115 ++++++++++ .../src/views/crud/editable/free/index.vue | 76 +++++++ .../src/views/crud/editable/free/mock.ts | 24 ++ .../src/views/crud/editable/row/api.ts | 50 +++++ .../src/views/crud/editable/row/crud.tsx | 143 ++++++++++++ .../src/views/crud/editable/row/index.vue | 43 ++++ .../src/views/crud/editable/row/mock.ts | 24 ++ .../src/views/crud/editable/vmodel/api.ts | 50 +++++ .../src/views/crud/editable/vmodel/crud.tsx | 79 +++++++ .../views/crud/editable/vmodel/free/api.ts | 50 +++++ .../views/crud/editable/vmodel/free/crud.tsx | 89 ++++++++ .../views/crud/editable/vmodel/free/index.vue | 70 ++++++ .../views/crud/editable/vmodel/free/mock.ts | 20 ++ .../src/views/crud/editable/vmodel/index.vue | 40 ++++ .../src/views/crud/editable/vmodel/mock.ts | 20 ++ packages/ui/certd-client/tsconfig.json | 3 +- 26 files changed, 1443 insertions(+), 19 deletions(-) create mode 100644 packages/ui/certd-client/src/views/crud/editable/cell/api.ts create mode 100644 packages/ui/certd-client/src/views/crud/editable/cell/crud.tsx create mode 100644 packages/ui/certd-client/src/views/crud/editable/cell/index.vue create mode 100644 packages/ui/certd-client/src/views/crud/editable/cell/mock.ts create mode 100644 packages/ui/certd-client/src/views/crud/editable/free/api.ts create mode 100644 packages/ui/certd-client/src/views/crud/editable/free/crud.tsx create mode 100644 packages/ui/certd-client/src/views/crud/editable/free/index.vue create mode 100644 packages/ui/certd-client/src/views/crud/editable/free/mock.ts create mode 100644 packages/ui/certd-client/src/views/crud/editable/row/api.ts create mode 100644 packages/ui/certd-client/src/views/crud/editable/row/crud.tsx create mode 100644 packages/ui/certd-client/src/views/crud/editable/row/index.vue create mode 100644 packages/ui/certd-client/src/views/crud/editable/row/mock.ts create mode 100644 packages/ui/certd-client/src/views/crud/editable/vmodel/api.ts create mode 100644 packages/ui/certd-client/src/views/crud/editable/vmodel/crud.tsx create mode 100644 packages/ui/certd-client/src/views/crud/editable/vmodel/free/api.ts create mode 100644 packages/ui/certd-client/src/views/crud/editable/vmodel/free/crud.tsx create mode 100644 packages/ui/certd-client/src/views/crud/editable/vmodel/free/index.vue create mode 100644 packages/ui/certd-client/src/views/crud/editable/vmodel/free/mock.ts create mode 100644 packages/ui/certd-client/src/views/crud/editable/vmodel/index.vue create mode 100644 packages/ui/certd-client/src/views/crud/editable/vmodel/mock.ts diff --git a/packages/ui/certd-client/.eslintrc.js b/packages/ui/certd-client/.eslintrc.js index 1f4b3d0e..d873ce44 100644 --- a/packages/ui/certd-client/.eslintrc.js +++ b/packages/ui/certd-client/.eslintrc.js @@ -20,6 +20,7 @@ module.exports = { rules: { //"max-len": [0, 200, 2, { ignoreUrls: true }], "@typescript-eslint/no-unused-vars": "off", + "no-unused-vars": "off", "@typescript-eslint/ban-ts-ignore": "off", "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/no-explicit-any": "off", diff --git a/packages/ui/certd-client/CHANGELOG.md b/packages/ui/certd-client/CHANGELOG.md index 52395cc4..5ca51044 100644 --- a/packages/ui/certd-client/CHANGELOG.md +++ b/packages/ui/certd-client/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.19.1](https://github.com/fast-crud/fast-crud/compare/v1.19.0...v1.19.1) (2023-11-20) + +### Bug Fixes + +* 修复一些错误的类型定义 ([e098f51](https://github.com/fast-crud/fast-crud/commit/e098f511160148a824a1950bf4e85325c2ac50f0)) + +# [1.19.0](https://github.com/fast-crud/fast-crud/compare/v1.18.5...v1.19.0) (2023-11-20) + +### Features + +* **editable:** editable优化重构，分三种模式：free、row、cell，本次为破坏性更新，请谨慎升级 ([a592780](https://github.com/fast-crud/fast-crud/commit/a592780697dc723117bce8759b2c02223ed930c8)) + ## [1.18.5](https://github.com/fast-crud/fast-crud/compare/v1.18.4...v1.18.5) (2023-11-08) ### Bug Fixes diff --git a/packages/ui/certd-client/package.json b/packages/ui/certd-client/package.json index a1e536a6..ccbef7ba 100644 --- a/packages/ui/certd-client/package.json +++ b/packages/ui/certd-client/package.json @@ -1,6 +1,6 @@ { "name": "@fast-crud/fs-admin-antdv", - "version": "1.18.5", + "version": "1.19.1", "private": true, "scripts": { "dev": "vite", @@ -26,10 +26,10 @@ "@ant-design/icons-vue": "^6.1.0", "@aws-sdk/client-s3": "^3.383.0", "@aws-sdk/s3-request-presigner": "^3.383.0", - "@fast-crud/fast-crud": "^1.18.5", - "@fast-crud/fast-extends": "^1.18.5", - "@fast-crud/ui-antdv": "^1.18.5", - "@fast-crud/ui-interface": "^1.18.5", + "@fast-crud/fast-crud": "^1.19.1", + "@fast-crud/fast-extends": "^1.19.1", + "@fast-crud/ui-antdv": "^1.19.1", + "@fast-crud/ui-interface": "^1.19.1", "@iconify/iconify": "^3.1.1", "@iconify/json": "^2.2.98", "@purge-icons/generated": "^0.9.0", diff --git a/packages/ui/certd-client/src/mock/base.ts b/packages/ui/certd-client/src/mock/base.ts index c5084a6a..7a8cecfa 100644 --- a/packages/ui/certd-client/src/mock/base.ts +++ b/packages/ui/certd-client/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) { @@ -293,6 +294,62 @@ const mockUtil: any = { data: list }; } + }, + { + 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 + }; + } } ]; } 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 b6291772..19216858 100644 --- a/packages/ui/certd-client/src/router/source/modules/crud.ts +++ b/packages/ui/certd-client/src/router/source/modules/crud.ts @@ -537,18 +537,6 @@ export const crudResources = [ path: "/crud/feature/height", component: "/crud/feature/height/index.vue" }, - { - title: "可编辑", - name: "FeatureEditable", - path: "/crud/feature/editable", - component: "/crud/feature/editable/index.vue" - }, - { - title: "行编辑", - name: "FeatureEditableRow", - path: "/crud/feature/editable-row", - component: "/crud/feature/editable-row/index.vue" - }, { title: "查询框", name: "FeatureSearch", @@ -623,6 +611,41 @@ export const crudResources = [ } ] }, + { + title: "可编辑", + name: "Editable", + path: "/crud/editable", + redirect: "/crud/editable/free", + meta: { + icon: "ion:extension-puzzle-outline" + }, + children: [ + { + title: "自由编辑", + name: "EditableFree", + path: "/crud/editable/free", + component: "/crud/editable/free/index.vue" + }, + { + title: "行编辑", + name: "EditableRow", + path: "/crud/editable/row", + component: "/crud/editable/row/index.vue" + }, + { + title: "单元格编辑", + name: "EditableCell", + path: "/crud/editable/cell", + component: "/crud/editable/cell/index.vue" + }, + { + title: "子表格编辑", + name: "EditableVModel", + path: "/crud/editable/vmodel", + component: "/crud/editable/vmodel/index.vue" + } + ] + }, { title: "插槽", name: "Slots", diff --git a/packages/ui/certd-client/src/views/crud/editable/cell/api.ts b/packages/ui/certd-client/src/views/crud/editable/cell/api.ts new file mode 100644 index 00000000..ec4489fe --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/cell/api.ts @@ -0,0 +1,66 @@ +// @ts-ignore +import { requestForMock } from "/src/api/service"; +const request = requestForMock; +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 + }); +} diff --git a/packages/ui/certd-client/src/views/crud/editable/cell/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/cell/crud.tsx new file mode 100644 index 00000000..453043da --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/cell/crud.tsx @@ -0,0 +1,206 @@ +import * as api from "./api"; +import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud"; +import { computed, reactive, ref } from "vue"; +import _ from "lodash-es"; +import { EditableEachCellsOpts } from "@fast-crud/fast-crud"; +export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { + const { crudBinding } = crudExpose; + const pageRequest = async (query: UserPageQuery): Promise => { + return await api.GetList(query); + }; + const editRequest = async ({ form, row }: EditReq) => { + form.id = row.id; + return await api.UpdateObj(form); + }; + const delRequest = async ({ row }: DelReq) => { + return await api.DelObj(row.id); + }; + + const addRequest = async ({ form }: AddReq) => { + return await api.AddObj(form); + }; + + const radioDictRef = dict({ + url: "/mock/dicts/OpenStatusEnum?single" + }); + + const radioColumnValue = ref(""); + function columnUpdate(event: Event) { + //批量设置值 + // _.forEach(crudBinding.value?.data, (item) => { + // item.radio = event.target.value; + // }); + crudExpose.editable.eachCells((opts: EditableEachCellsOpts) => { + const { key, cell, rowData } = opts; + if (key === "radio") { + if (cell.isEditing) { + //@ts-ignore + rowData.radio = event.target.value; + } + } + }); + } + const radioColumnEditor = reactive({ + editing: false, + loading: false, + onSubmit: async () => { + console.log("onSubmit"); + radioColumnEditor.loading = true; + try { + const data: any[] = []; + for (const row of crudBinding.value.data) { + data.push({ id: row.id, radio: row.radio }); + } + await api.UpdateColumn(data); + crudExpose.editable.persist(); + radioColumnEditor.editing = false; + } finally { + radioColumnEditor.loading = false; + } + }, + onCancel: () => { + console.log("cancel"); + crudExpose.editable.cancel(); + radioColumnEditor.editing = false; + }, + "onUpdate:editing": (value: boolean) => { + radioColumnEditor.editing = value; + if (value === true) { + crudExpose.editable.activeCols({ cols: ["radio"], showAction: false }); + } + }, + vSlots: { + edit: () => { + return ; + } + } + }); + + return { + crudOptions: { + request: { + pageRequest, + addRequest, + editRequest, + delRequest + }, + actionbar: { + buttons: { + // add: { + // show: computed(() => { + // if (crudBinding.value) { + // return !crudBinding.value?.table.editable.enabled; + // } + // return false; + // }) + // }, + // addRow: { + // show: computed(() => { + // if (crudBinding.value) { + // return crudBinding.value?.table.editable.enabled; + // } + // return false; + // }) + // } + } + }, + table: { + editable: { + mode: "cell", + exclusive: true, + exclusiveEffect: "cancel", + async updateCell(opts) { + const { row, key, value } = opts; + return await api.UpdateCell(row.id, key, value); + } + }, + slots: { + //编辑列 + headerCell({ column }: any) { + if (column.key === "radio") { + return ( +
+ + {column.title} (点我批量编辑) + +
+ ); + } + } + } + }, + columns: { + id: { + title: "ID", + type: "number", + form: { + show: false + }, + column: { width: 80, align: "center" } + }, + disable: { + title: "禁止编辑", + type: "text", + column: { + editable: { + disabled: true //也可以配置为方法，根据条件禁用或启用编辑 + // disabled: ({ column, index, row }) => { + // return index % 2 === 0; + // } + } + } + }, + radio: { + title: "状态", + search: { show: true }, + type: "dict-radio", + dict: radioDictRef, + column: { + width: 300 + } + }, + name: { + title: "姓名", + type: "text", + form: { + rules: [ + { required: true, message: "请输入姓名" }, + { + type: "string", + min: 2, + max: 10, + message: "长度在 2 到 10 个字符" + } + ] + } + }, + address: { + title: "地址", + children: { + province: { + title: "省份", + search: { show: true }, + type: "text" + }, + city: { + title: "城市", + search: { show: true }, + type: "dict-select", + dict: dict({ + value: "id", + label: "text", + data: [ + { id: "sz", text: "深圳", color: "success" }, + { id: "gz", text: "广州", color: "primary" }, + { id: "bj", text: "北京" }, + { id: "wh", text: "武汉" }, + { id: "sh", text: "上海" } + ] + }) + } + } + } + } + } + }; +} diff --git a/packages/ui/certd-client/src/views/crud/editable/cell/index.vue b/packages/ui/certd-client/src/views/crud/editable/cell/index.vue new file mode 100644 index 00000000..52e4511b --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/cell/index.vue @@ -0,0 +1,90 @@ + + + diff --git a/packages/ui/certd-client/src/views/crud/editable/cell/mock.ts b/packages/ui/certd-client/src/views/crud/editable/cell/mock.ts new file mode 100644 index 00000000..c82de123 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/cell/mock.ts @@ -0,0 +1,25 @@ +// @ts-ignore +import mockUtil from "/src/mock/base"; +const options: any = { + name: "EditableCell", + idGenerator: 0 +}; +const list = [ + { + radio: "1", + children: [ + { + radio: "2" + } + ] + }, + { + radio: "2" + }, + { + radio: "0" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/editable/free/api.ts b/packages/ui/certd-client/src/views/crud/editable/free/api.ts new file mode 100644 index 00000000..d2a3098e --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/free/api.ts @@ -0,0 +1,50 @@ +import { requestForMock } from "/src/api/service"; +const request = requestForMock; +const apiPrefix = "/mock/EditableFree"; +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 } + }); +} diff --git a/packages/ui/certd-client/src/views/crud/editable/free/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/free/crud.tsx new file mode 100644 index 00000000..71b20de3 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/free/crud.tsx @@ -0,0 +1,115 @@ +import * as api from "./api"; +import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud"; +export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { + const { crudBinding } = crudExpose; + const pageRequest = async (query: UserPageQuery): Promise => { + return await api.GetList(query); + }; + const editRequest = async ({ form, row }: EditReq) => { + form.id = row.id; + return await api.UpdateObj(form); + }; + const delRequest = async ({ row }: DelReq) => { + return await api.DelObj(row.id); + }; + + const addRequest = async ({ form }: AddReq) => { + return await api.AddObj(form); + }; + + return { + crudOptions: { + request: { + pageRequest, + addRequest, + editRequest, + delRequest + }, + actionbar: { + buttons: { + add: { + show: false + }, + addRow: { + show: true + } + } + }, + table: { + editable: { + mode: "free" + } + }, + pagination: { + pageSize: 5, + pageSizes: [5, 10, 20, 50, 100] + }, + columns: { + id: { + title: "ID", + type: "number", + form: { + show: false + }, + column: { width: 80, align: "center" } + }, + disable: { + title: "禁止编辑", + type: "text", + column: { + editable: { + disabled: true //也可以配置为方法，根据条件禁用或启用编辑 + // disabled: ({ column, index, row }) => { + // return index % 2 === 0; + // } + } + } + }, + radio: { + title: "状态", + search: { show: true }, + type: "dict-radio", + dict: dict({ + url: "/mock/dicts/OpenStatusEnum?single" + }) + }, + name: { + title: "姓名", + type: "text", + form: { + rules: [ + { required: true, message: "请输入姓名" }, + { min: 2, max: 10, message: "长度在 2 到 10 个字符" } + ] + } + }, + address: { + title: "地址", + children: { + province: { + title: "省份", + search: { show: true }, + type: "text" + }, + city: { + title: "城市", + search: { show: true }, + type: "dict-select", + dict: dict({ + value: "id", + label: "text", + data: [ + { id: "sz", text: "深圳", color: "success" }, + { id: "gz", text: "广州", color: "primary" }, + { id: "bj", text: "北京" }, + { id: "wh", text: "武汉" }, + { id: "sh", text: "上海" } + ] + }) + } + } + } + } + } + }; +} diff --git a/packages/ui/certd-client/src/views/crud/editable/free/index.vue b/packages/ui/certd-client/src/views/crud/editable/free/index.vue new file mode 100644 index 00000000..ff6c8777 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/free/index.vue @@ -0,0 +1,76 @@ + + + diff --git a/packages/ui/certd-client/src/views/crud/editable/free/mock.ts b/packages/ui/certd-client/src/views/crud/editable/free/mock.ts new file mode 100644 index 00000000..e2471c7b --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/free/mock.ts @@ -0,0 +1,24 @@ +import mockUtil from "/src/mock/base"; +const options: any = { + name: "EditableFree", + idGenerator: 0 +}; +const list = [ + { + radio: "1", + children: [ + { + radio: "2" + } + ] + }, + { + radio: "2" + }, + { + radio: "0" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/editable/row/api.ts b/packages/ui/certd-client/src/views/crud/editable/row/api.ts new file mode 100644 index 00000000..cad7e571 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/row/api.ts @@ -0,0 +1,50 @@ +import { requestForMock } from "/src/api/service"; +const request = requestForMock; +const apiPrefix = "/mock/EditableRow"; +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 } + }); +} diff --git a/packages/ui/certd-client/src/views/crud/editable/row/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/row/crud.tsx new file mode 100644 index 00000000..ebdd18ce --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/row/crud.tsx @@ -0,0 +1,143 @@ +import * as api from "./api"; +import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { + const pageRequest = async (query: UserPageQuery): Promise => { + return await api.GetList(query); + }; + const editRequest = async ({ form, row }: EditReq) => { + form.id = row.id; + return await api.UpdateObj(form); + }; + const delRequest = async ({ row }: DelReq) => { + return await api.DelObj(row.id); + }; + + const addRequest = async ({ form }: AddReq) => { + const id = await api.AddObj(form); + return { id }; + }; + + return { + crudOptions: { + request: { + pageRequest, + addRequest, + editRequest, + delRequest + }, + //将 addRow 按钮启用 + actionbar: { buttons: { add: { show: false }, addRow: { show: true } } }, + table: { + editable: { + enabled: true, + mode: "row" + } + }, + columns: { + id: { + title: "ID", + type: "number", + form: { + show: false + }, + column: { width: 80, align: "center" } + }, + disable: { + title: "禁止编辑", + type: "text", + column: { + editable: { + disabled: true //也可以配置为方法，根据条件禁用或启用编辑 + // disabled: ({ column, index, row }) => { + // return index % 2 === 0; + // } + } + } + }, + radio: { + title: "状态", + search: { show: true }, + type: "dict-radio", + dict: dict({ + url: "/mock/dicts/OpenStatusEnum?single" + }), + column: { + width: 300 + }, + form: { + rules: { + async asyncValidator(context) { + console.log("context", context); + return true; + }, + message: "远程校验测试" + } + } + }, + target: { + title: "根据状态动态显隐", + search: { show: true }, + type: "text", + form: { + conditionalRender: { + match: ({ form }) => { + return form.radio === "2"; + }, + render: ({ form }) => { + return
已停止
; + } + }, + show: compute(({ form }) => { + return form.radio !== "0"; + }) + } + }, + "user.name": { + title: "姓名", + type: "text", + form: { + key: ["user", "name"], + rules: [ + { required: true, message: "请输入姓名" }, + { + type: "string", + min: 2, + max: 10, + message: "长度在 2 到 10 个字符" + } + ] + } + }, + address: { + title: "地址", + children: { + province: { + title: "省份", + search: { show: true }, + type: "text", + form: { + rules: [{ required: true, message: "请输入省份" }] + } + }, + city: { + title: "城市", + search: { show: true }, + type: "dict-select", + dict: dict({ + value: "id", + label: "text", + data: [ + { id: "sz", text: "深圳", color: "success" }, + { id: "gz", text: "广州", color: "primary" }, + { id: "bj", text: "北京" }, + { id: "wh", text: "武汉" }, + { id: "sh", text: "上海" } + ] + }) + } + } + } + } + } + }; +} diff --git a/packages/ui/certd-client/src/views/crud/editable/row/index.vue b/packages/ui/certd-client/src/views/crud/editable/row/index.vue new file mode 100644 index 00000000..0d019c89 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/row/index.vue @@ -0,0 +1,43 @@ + + + diff --git a/packages/ui/certd-client/src/views/crud/editable/row/mock.ts b/packages/ui/certd-client/src/views/crud/editable/row/mock.ts new file mode 100644 index 00000000..89207f5f --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/row/mock.ts @@ -0,0 +1,24 @@ +import mockUtil from "/src/mock/base"; +const options: any = { + name: "EditableRow", + idGenerator: 0 +}; +const list = [ + { + radio: "1", + children: [ + { + radio: "2" + } + ] + }, + { + radio: "2" + }, + { + radio: "0" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/api.ts b/packages/ui/certd-client/src/views/crud/editable/vmodel/api.ts new file mode 100644 index 00000000..aac4305d --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/api.ts @@ -0,0 +1,50 @@ +import { requestForMock } from "/src/api/service"; +const request = requestForMock; +const apiPrefix = "/mock/EditableVModel"; +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 } + }); +} diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/vmodel/crud.tsx new file mode 100644 index 00000000..9dac282f --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/crud.tsx @@ -0,0 +1,79 @@ +import * as api from "./api"; +import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud"; +import EditableFreeSub from "./free/index.vue"; +export default function (props: CreateCrudOptionsProps): CreateCrudOptionsRet { + const { crudBinding } = props.crudExpose; + const { crudExpose } = props; + const pageRequest = async (query: UserPageQuery): Promise => { + return await api.GetList(query); + }; + const editRequest = async ({ form, row }: EditReq) => { + form.id = row.id; + return await api.UpdateObj(form); + }; + const delRequest = async ({ row }: DelReq) => { + return await api.DelObj(row.id); + }; + + const addRequest = async ({ form }: AddReq) => { + return await api.AddObj(form); + }; + + return { + crudOptions: { + request: { + pageRequest, + addRequest, + editRequest, + delRequest + }, + form: { + wrapper: { + width: "80%" + }, + async beforeSubmit() { + const validate = await crudExpose.getFormComponentRef("subTable")?.validate(); + if (validate !== true) { + return false; + } + } + }, + columns: { + id: { + title: "ID", + type: "number", + form: { + show: false + }, + column: { width: 80, align: "center" } + }, + radio: { + title: "状态", + search: { show: true }, + type: "dict-radio", + dict: dict({ + url: "/mock/dicts/OpenStatusEnum?single" + }) + }, + subTable: { + title: "子表格", + type: "text", + form: { + component: { + name: EditableFreeSub, + vModel: "modelValue" + }, + col: { + span: 24 + } + }, + column: { + formatter: ({ row }) => { + return row.subTable?.length + "条数据"; + } + } + } + } + } + }; +} diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/free/api.ts b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/api.ts new file mode 100644 index 00000000..4d602ee8 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/api.ts @@ -0,0 +1,50 @@ +import { requestForMock } from "/src/api/service"; +const request = requestForMock; +const apiPrefix = "/mock/EditableFreeSub"; +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 } + }); +} diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/free/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/crud.tsx new file mode 100644 index 00000000..8bd58ca9 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/crud.tsx @@ -0,0 +1,89 @@ +import * as api from "./api"; +import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud"; +export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { + const { crudBinding } = crudExpose; + // const pageRequest = async (query: UserPageQuery): Promise => { + // return await api.GetList(query); + // }; + // const editRequest = async ({ form, row }: EditReq) => { + // form.id = row.id; + // return await api.UpdateObj(form); + // }; + // const delRequest = async ({ row }: DelReq) => { + // return await api.DelObj(row.id); + // }; + // + // const addRequest = async ({ form }: AddReq) => { + // return await api.AddObj(form); + // }; + + return { + crudOptions: { + actionbar: { + buttons: { + add: { + show: false + }, + addRow: { + show: true + } + } + }, + search: { + show: false + }, + toolbar: { + buttons: { + refresh: { + show: false + } + } + }, + mode: { + name: "local", + isMergeWhenUpdate: true, + isAppendWhenAdd: true + }, + table: { + editable: { + enabled: true, + mode: "free" + } + }, + pagination: { show: false, pageSize: 9999999 }, + columns: { + id: { + title: "ID", + type: "number", + form: { + show: false + }, + column: { width: 80, align: "center" } + }, + radio: { + title: "状态", + search: { show: true }, + type: "dict-radio", + dict: dict({ + url: "/mock/dicts/OpenStatusEnum?single" + }) + }, + name: { + title: "姓名", + type: "text", + form: { + rules: [ + { required: true, message: "请输入姓名" }, + { min: 2, max: 10, message: "长度在 2 到 10 个字符" } + ] + } + }, + createdAt: { + column: { + show: false + } + } + } + } + }; +} diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/free/index.vue b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/index.vue new file mode 100644 index 00000000..9c67a047 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/index.vue @@ -0,0 +1,70 @@ + + + diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/free/mock.ts b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/mock.ts new file mode 100644 index 00000000..faff20e7 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/mock.ts @@ -0,0 +1,20 @@ +import mockUtil from "/src/mock/base"; +const options: any = { + name: "EditableFreeSub", + idGenerator: 0 +}; +const list = [ + { + radio: "1", + name: "王强" + }, + { + radio: "2" + }, + { + radio: "0" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/index.vue b/packages/ui/certd-client/src/views/crud/editable/vmodel/index.vue new file mode 100644 index 00000000..eb5019ff --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/index.vue @@ -0,0 +1,40 @@ + + + diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/mock.ts b/packages/ui/certd-client/src/views/crud/editable/vmodel/mock.ts new file mode 100644 index 00000000..a43343c5 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/mock.ts @@ -0,0 +1,20 @@ +import mockUtil from "/src/mock/base"; +const options: any = { + name: "EditableVModel", + idGenerator: 0 +}; +const list = [ + { + radio: "1", + subTable: [{ id: 0, name: "王小虎" }] + }, + { + radio: "2" + }, + { + radio: "0" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/tsconfig.json b/packages/ui/certd-client/tsconfig.json index c9ea1dd5..a9342927 100644 --- a/packages/ui/certd-client/tsconfig.json +++ b/packages/ui/certd-client/tsconfig.json @@ -1,7 +1,8 @@ { "compilerOptions": { // 这样就可以对 `this` 上的数据属性进行更严格的推断` - "noImplicitAny": true, + "noImplicitAny": false, + "allowJs": true, "target": "esnext", "module": "esnext", "strict": true,