From 55e05afe0e98d2944da2a82a1b25ce844d2a2b52 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot Date: Mon, 3 Apr 2023 19:24:05 +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 perf: 增加自定义组件示例 Merge remote-tracking branch 'origin/main' refactor: fs-bpmn refactor: integration fs-bpmn refactor: 集成fs-bpmn refactor: refactor: 优化i18n --- packages/ui/certd-client/package.json | 1 + packages/ui/certd-client/src/i18n/index.ts | 8 - packages/ui/certd-client/src/main.ts | 1 - .../ui/certd-client/src/plugin/bpmn/index.ts | 106 +++++++++++++ packages/ui/certd-client/src/plugin/index.ts | 3 + .../src/router/source/framework.ts | 2 + .../src/router/source/modules/crud.ts | 6 + .../src/router/source/modules/integration.ts | 22 +++ .../src/views/crud/basis/custom/api.ts | 42 +++++ .../src/views/crud/basis/custom/crud.tsx | 146 ++++++++++++++++++ .../src/views/crud/basis/custom/index.vue | 32 ++++ .../src/views/crud/basis/custom/mock.ts | 22 +++ .../crud/basis/custom/vmodel-counter.vue | 45 ++++++ .../integration/bpmn/ElementUserAssign.vue | 144 +++++++++++++++++ .../src/views/integration/bpmn/index.vue | 126 +++++++++++++++ .../src/views/integration/bpmn/preview.vue | 38 +++++ .../src/views/integration/bpmn/xml.ts | 27 ++++ packages/ui/certd-client/vite.config.ts | 10 +- 18 files changed, 767 insertions(+), 14 deletions(-) create mode 100644 packages/ui/certd-client/src/plugin/bpmn/index.ts create mode 100644 packages/ui/certd-client/src/router/source/modules/integration.ts create mode 100644 packages/ui/certd-client/src/views/crud/basis/custom/api.ts create mode 100644 packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx create mode 100644 packages/ui/certd-client/src/views/crud/basis/custom/index.vue create mode 100644 packages/ui/certd-client/src/views/crud/basis/custom/mock.ts create mode 100644 packages/ui/certd-client/src/views/crud/basis/custom/vmodel-counter.vue create mode 100644 packages/ui/certd-client/src/views/integration/bpmn/ElementUserAssign.vue create mode 100644 packages/ui/certd-client/src/views/integration/bpmn/index.vue create mode 100644 packages/ui/certd-client/src/views/integration/bpmn/preview.vue create mode 100644 packages/ui/certd-client/src/views/integration/bpmn/xml.ts diff --git a/packages/ui/certd-client/package.json b/packages/ui/certd-client/package.json index 96bf30d8a..59ff9e93e 100644 --- a/packages/ui/certd-client/package.json +++ b/packages/ui/certd-client/package.json @@ -29,6 +29,7 @@ "@fast-crud/fast-extends": "^1.12.0", "@fast-crud/ui-antdv": "^1.12.0", "@fast-crud/ui-interface": "^1.12.0", + "@fast-crud/fast-bpmn": "^1.0.3", "@iconify/iconify": "^3.1.0", "@iconify/json": "^2.2.35", "@purge-icons/generated": "^0.9.0", diff --git a/packages/ui/certd-client/src/i18n/index.ts b/packages/ui/certd-client/src/i18n/index.ts index 76146d299..da107b472 100644 --- a/packages/ui/certd-client/src/i18n/index.ts +++ b/packages/ui/certd-client/src/i18n/index.ts @@ -1,21 +1,13 @@ import { createI18n } from "vue-i18n"; -//@ts-ignore -import enFsLocale from "@fast-crud/fast-crud/dist/locale/lang/en.js"; -//@ts-ignore -import zhFsLocale from "@fast-crud/fast-crud/dist/locale/lang/zh-cn.js"; import en from "./locale/en"; import zh from "./locale/zh_CN"; const messages = { en: { label: "English", - // 定义您自己的字典，但是请不要和 `fs` 重复，这样会导致 fast-crud 内部组件的翻译失效. - fs: enFsLocale.fs, ...en }, "zh-cn": { label: "简体中文", - // 定义您自己的字典，但是请不要和 `fs` 重复，这样会导致 fast-crud 内部组件的翻译失效. - fs: zhFsLocale.fs, ...zh } }; diff --git a/packages/ui/certd-client/src/main.ts b/packages/ui/certd-client/src/main.ts index 1810666e1..6e01a577e 100644 --- a/packages/ui/certd-client/src/main.ts +++ b/packages/ui/certd-client/src/main.ts @@ -12,7 +12,6 @@ import components from "./components"; import plugin from "./plugin/"; // @ts-ignore const app = createApp(App); -// 尽量 app.use(Antd); app.use(router); app.use(i18n); diff --git a/packages/ui/certd-client/src/plugin/bpmn/index.ts b/packages/ui/certd-client/src/plugin/bpmn/index.ts new file mode 100644 index 000000000..f79e6820a --- /dev/null +++ b/packages/ui/certd-client/src/plugin/bpmn/index.ts @@ -0,0 +1,106 @@ +import "@fast-crud/fast-bpmn/dist/style.css"; +import FastBpmn, { FsBpmnSetupOptions, PanelComponentItem, Base, Shape } from "@fast-crud/fast-bpmn"; + +const fsBpmnOpts: FsBpmnSetupOptions = { + // 注册panel公共组件 + // @ts-ignore + registerPanelComponents(element: Base): Record { + return {}; + }, + //自定义增强contextPad + createEnhancementContextPadActions(provider) { + const actions: Record = {}; + const appendUserTask = (event: Event, element: Shape) => { + const shape = provider.elementFactory.createShape({ type: "bpmn:UserTask" }); + provider.create.start(event, shape, { + source: element + }); + }; + + const append = provider.autoPlace + ? // @ts-ignore + (event: Event, element: Shape) => { + const shape = provider.elementFactory.createShape({ type: "bpmn:UserTask" }); + provider.autoPlace.append(element, shape); + } + : appendUserTask; + + // 添加创建用户任务按钮 + actions["append.append-user-task"] = { + group: "model", + className: "bpmn-icon-user-task", + title: "用户任务", + action: { + dragstart: appendUserTask, + click: append + } + }; + + // 添加一个与edit一组的按钮 + actions["enhancement-op-1"] = { + group: "edit", + className: "enhancement-op", + title: "扩展操作1", + action: { + // @ts-ignore + click: function (e: Event) { + alert("点击 扩展操作1"); + } + } + }; + + // 添加一个新分组的自定义按钮 + actions["enhancement-op"] = { + group: "enhancement", + className: "enhancement-op", + title: "扩展操作2", + action: { + // @ts-ignore + click: function (e: Event) { + alert("点击 扩展操作2"); + } + } + }; + + return actions; + }, + + //自定义重写contextPad + // @ts-ignore + createRewriteContextPadActions(provider: any, element: Base) { + const actions: Record = {}; + + // 添加一个与edit一组的按钮 + actions["enhancement-op-1"] = { + group: "edit", + className: "enhancement-op", + title: "扩展操作1", + action: { + // @ts-ignore + click: function (e: Event) { + alert("点击 扩展操作1"); + } + } + }; + + // 添加一个新分组的自定义按钮 + actions["enhancement-op"] = { + group: "enhancement", + className: "enhancement-op", + title: "扩展操作2", + action: { + // @ts-ignore + click: function (e: Event) { + alert("点击 扩展操作2"); + } + } + }; + + return actions; + } +} as FsBpmnSetupOptions; + +export default function (app: any, i18n: any) { + fsBpmnOpts.i18n = i18n.global; + app.use(FastBpmn, fsBpmnOpts); +} diff --git a/packages/ui/certd-client/src/plugin/index.ts b/packages/ui/certd-client/src/plugin/index.ts index 243c5683a..64bb56184 100644 --- a/packages/ui/certd-client/src/plugin/index.ts +++ b/packages/ui/certd-client/src/plugin/index.ts @@ -2,9 +2,12 @@ import "./iconify"; import "./iconfont"; import FastCrud from "./fast-crud"; import permission from "./permission"; +import FsBpmn from "./bpmn"; + function install(app: any, options: any = {}) { app.use(FastCrud, options); app.use(permission); + app.use(FsBpmn, options.i18n); } export default { diff --git a/packages/ui/certd-client/src/router/source/framework.ts b/packages/ui/certd-client/src/router/source/framework.ts index a89c9f407..2f4890168 100644 --- a/packages/ui/certd-client/src/router/source/framework.ts +++ b/packages/ui/certd-client/src/router/source/framework.ts @@ -1,6 +1,7 @@ import LayoutFramework from "/src/layout/layout-framework.vue"; import { crudResources } from "/@/router/source/modules/crud"; import { uiResources } from "/@/router/source/modules/ui"; +import { integrationResources } from "/@/router/source/modules/integration"; import { sysResources } from "/@/router/source/modules/sys"; export const frameworkResource = [ { @@ -25,6 +26,7 @@ export const frameworkResource = [ } }, ...crudResources, + ...integrationResources, ...sysResources ] } 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 36c86a027..3451e7aab 100644 --- a/packages/ui/certd-client/src/router/source/modules/crud.ts +++ b/packages/ui/certd-client/src/router/source/modules/crud.ts @@ -74,6 +74,12 @@ export const crudResources = [ path: "/crud/basis/layout-custom", component: "/crud/basis/layout-custom/index.vue" }, + { + title: "自定义组件", + name: "BasisCustom", + path: "/crud/basis/custom", + component: "/crud/basis/custom/index.vue" + }, { title: "列设置", name: "BasisColumnsSet", diff --git a/packages/ui/certd-client/src/router/source/modules/integration.ts b/packages/ui/certd-client/src/router/source/modules/integration.ts new file mode 100644 index 000000000..0b0c8cd86 --- /dev/null +++ b/packages/ui/certd-client/src/router/source/modules/integration.ts @@ -0,0 +1,22 @@ +export const integrationResources = [ + { + title: "集成", + name: "integration", + path: "/integration", + redirect: "/integration/bpmn", + meta: { + icon: "ion:apps-sharp" + }, + children: [ + { + title: "FsBpmn", + name: "FsBpmn", + path: "/integration/bpmn", + component: "/integration/bpmn/index.vue", + meta: { + icon: "ion:disc-outline" + } + } + ] + } +]; diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/api.ts b/packages/ui/certd-client/src/views/crud/basis/custom/api.ts new file mode 100644 index 000000000..dcb36ac80 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/basis/custom/api.ts @@ -0,0 +1,42 @@ +import { requestForMock } from "/src/api/service"; +const request = requestForMock; +const apiPrefix = "/mock/BasisCustom"; +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 + "/info", + method: "get", + params: { id } + }); +} diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx new file mode 100644 index 000000000..318f5f975 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx @@ -0,0 +1,146 @@ +import * as api from "./api"; +import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { shallowRef } from "vue"; +import VmodelCounter from "./vmodel-counter.vue"; +import { message } from "ant-design-vue"; + +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) => { + return await api.AddObj(form); + }; + + return { + crudOptions: { + request: { + pageRequest, + addRequest, + editRequest, + delRequest + }, + columns: { + id: { + title: "ID", + key: "id", + type: "number", + column: { + width: 50 + }, + form: { + show: false + } + }, + counter: { + title: "自定义组件", + type: "text", + column: { + component: { + //引用自定义组件 + name: shallowRef(VmodelCounter), + color: "blue", + slots: { + //插槽示例 + default() { + return counter on cell:; + } + }, + on: { + //监听事件 + onChange({ $event, row }) { + message.info("counter changed:" + $event); + } + } + } + }, + form: { + //form表单 + component: { + //引用自定义组件 + name: shallowRef(VmodelCounter), + vModel: "modelValue", + color: "red", + on: { + //监听事件 + onChange({ $event, form }) { + message.info("counter changed:" + $event); + } + }, + slots: { + //插槽示例 + default() { + return counter on form:; + } + } + } + }, + search: { + show: true, + //form表单 + component: { + color: "yellow", + slots: { + //插槽示例 + default() { + return "counter:"; + } + } + } + } + }, + cellRender: { + title: "单元格render", + type: "text", + column: { + cellRender({ value }) { + return {value}; + } + } + }, + formAroundRender: { + title: "表单组件周围的render", + type: "text", + form: { + helper: "演示组件周围自定义render", + topRender({ value }) { + return topRender; + }, + bottomRender({ value }) { + return bottomRender {value ?? ""}; + }, + prefixRender({ value }) { + return prefixRender; + }, + suffixRender({ value }) { + return suffixRender; + } + } + }, + formRender: { + title: "字段组件本身render", + type: "text", + form: { + helper: "组件本身render", + render({ form }) { + return ( +
+ + render value : {form.formRender} +
+ ); + } + } + } + } + } + }; +} diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/index.vue b/packages/ui/certd-client/src/views/crud/basis/custom/index.vue new file mode 100644 index 000000000..461dfbcc3 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/basis/custom/index.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/mock.ts b/packages/ui/certd-client/src/views/crud/basis/custom/mock.ts new file mode 100644 index 000000000..84e0ca9fd --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/basis/custom/mock.ts @@ -0,0 +1,22 @@ +import mockUtil from "/src/mock/base"; +const options: any = { + name: "BasisCustom", + idGenerator: 0 +}; +const list = [ + { + counter: 1, + cellRender: "cellRender1" + }, + { + counter: 2, + cellRender: "cellRender2" + }, + { + counter: 3, + cellRender: "cellRender3" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/vmodel-counter.vue b/packages/ui/certd-client/src/views/crud/basis/custom/vmodel-counter.vue new file mode 100644 index 000000000..226c0a5c1 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/basis/custom/vmodel-counter.vue @@ -0,0 +1,45 @@ + + + diff --git a/packages/ui/certd-client/src/views/integration/bpmn/ElementUserAssign.vue b/packages/ui/certd-client/src/views/integration/bpmn/ElementUserAssign.vue new file mode 100644 index 000000000..e779dafd2 --- /dev/null +++ b/packages/ui/certd-client/src/views/integration/bpmn/ElementUserAssign.vue @@ -0,0 +1,144 @@ + + + diff --git a/packages/ui/certd-client/src/views/integration/bpmn/index.vue b/packages/ui/certd-client/src/views/integration/bpmn/index.vue new file mode 100644 index 000000000..0f2a9371e --- /dev/null +++ b/packages/ui/certd-client/src/views/integration/bpmn/index.vue @@ -0,0 +1,126 @@ + + + diff --git a/packages/ui/certd-client/src/views/integration/bpmn/preview.vue b/packages/ui/certd-client/src/views/integration/bpmn/preview.vue new file mode 100644 index 000000000..e8443633a --- /dev/null +++ b/packages/ui/certd-client/src/views/integration/bpmn/preview.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/ui/certd-client/src/views/integration/bpmn/xml.ts b/packages/ui/certd-client/src/views/integration/bpmn/xml.ts new file mode 100644 index 000000000..7e6ccab65 --- /dev/null +++ b/packages/ui/certd-client/src/views/integration/bpmn/xml.ts @@ -0,0 +1,27 @@ +export const demoXml = ` + + + Flow_0z7lqtc + + + + Flow_1rf2bmgFlow_06ulhtm + + + + Flow_0z7lqtcFlow_1p9en55Flow_1xxl1vf + + Flow_06ulhtm + + Flow_1xxl1vfFlow_1rf2bmgFlow_11pwko7 + + + + Flow_11pwko7Flow_1p9en55 + + + + + + +`; diff --git a/packages/ui/certd-client/vite.config.ts b/packages/ui/certd-client/vite.config.ts index 193f89380..ec18c9ae9 100644 --- a/packages/ui/certd-client/vite.config.ts +++ b/packages/ui/certd-client/vite.config.ts @@ -23,11 +23,11 @@ export default ({ command, mode }) => { if (mode.startsWith("debug")) { devAlias = [ { find: /@fast-crud\/fast-crud\/dist/, replacement: path.resolve("../../fast-crud/src/") }, - { find: /@fast-crud\/fast-crud$/, replacement: path.resolve("../../fast-crud/src/") }, - { find: /@fast-crud\/fast-extends\/dist/, replacement: path.resolve("../../fast-extends/src/") }, - { find: /@fast-crud\/fast-extends$/, replacement: path.resolve("../../fast-extends/src/") }, - { find: /@fast-crud\/ui-antdv$/, replacement: path.resolve("../../ui/ui-antdv/src/") }, - { find: /@fast-crud\/ui-interface$/, replacement: path.resolve("../../ui/ui-interface/src/") } + // { find: /@fast-crud\/fast-crud$/, replacement: path.resolve("../../fast-crud/src/") }, + { find: /@fast-crud\/fast-extends\/dist/, replacement: path.resolve("../../fast-extends/src/") } + // { find: /@fast-crud\/fast-extends$/, replacement: path.resolve("../../fast-extends/src/") }, + // { find: /@fast-crud\/ui-antdv$/, replacement: path.resolve("../../ui/ui-antdv/src/") }, + // { find: /@fast-crud\/ui-interface$/, replacement: path.resolve("../../ui/ui-interface/src/") } ]; devServerFs = { // 这里配置dev启动时读取的项目根目录