mirror of https://github.com/certd/certd
🔱: [client] sync upgrade with 5 commits [trident-sync]
chore: 1.14.0 chore: 1 feat: crudBinding.value.table.columns由array改成map chore: 1pull/14/head
GitHub Actions Bot
parent
c4fe19f2e6
commit
7904e05b4a
|
|
@ -3,6 +3,12 @@
|
||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# [1.14.0](https://github.com/fast-crud/fast-crud/compare/v1.13.12...v1.14.0) (2023-06-09)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* crudBinding.value.table.columns由array改成map ([8f89d2b](https://github.com/fast-crud/fast-crud/commit/8f89d2b26e12be0b3bcec2da8b4d7a2942395e8e))
|
||||||
|
|
||||||
## [1.13.12](https://github.com/fast-crud/fast-crud/compare/v1.13.11...v1.13.12) (2023-06-08)
|
## [1.13.12](https://github.com/fast-crud/fast-crud/compare/v1.13.11...v1.13.12) (2023-06-08)
|
||||||
|
|
||||||
**Note:** Version bump only for package @fast-crud/fs-admin-antdv
|
**Note:** Version bump only for package @fast-crud/fs-admin-antdv
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fast-crud/fs-admin-antdv",
|
"name": "@fast-crud/fs-admin-antdv",
|
||||||
"version": "1.13.12",
|
"version": "1.14.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
|
@ -25,11 +25,10 @@
|
||||||
"@ant-design/icons-vue": "^6.1.0",
|
"@ant-design/icons-vue": "^6.1.0",
|
||||||
"@aws-sdk/client-s3": "^3.292.0",
|
"@aws-sdk/client-s3": "^3.292.0",
|
||||||
"@aws-sdk/s3-request-presigner": "^3.292.0",
|
"@aws-sdk/s3-request-presigner": "^3.292.0",
|
||||||
"@fast-crud/fast-bpmn": "^1.0.14",
|
"@fast-crud/fast-crud": "^1.14.0",
|
||||||
"@fast-crud/fast-crud": "^1.13.12",
|
"@fast-crud/fast-extends": "^1.14.0",
|
||||||
"@fast-crud/fast-extends": "^1.13.12",
|
"@fast-crud/ui-antdv": "^1.14.0",
|
||||||
"@fast-crud/ui-antdv": "^1.13.12",
|
"@fast-crud/ui-interface": "^1.14.0",
|
||||||
"@fast-crud/ui-interface": "^1.13.12",
|
|
||||||
"@iconify/iconify": "^3.1.0",
|
"@iconify/iconify": "^3.1.0",
|
||||||
"@iconify/json": "^2.2.35",
|
"@iconify/json": "^2.2.35",
|
||||||
"@purge-icons/generated": "^0.9.0",
|
"@purge-icons/generated": "^0.9.0",
|
||||||
|
|
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
import "@fast-crud/fast-bpmn/dist/style.css";
|
|
||||||
// @ts-ignore
|
|
||||||
import FastBpmn, { FsBpmnSetupOptions, PanelComponentItem, Base, Shape } from "@fast-crud/fast-bpmn";
|
|
||||||
|
|
||||||
const fsBpmnOpts: FsBpmnSetupOptions = {
|
|
||||||
// 注册panel公共组件
|
|
||||||
// @ts-ignore
|
|
||||||
registerPanelComponents(element: Base): Record<string, PanelComponentItem> {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
//自定义增强contextPad
|
|
||||||
createEnhancementContextPadActions(provider) {
|
|
||||||
const actions: Record<string, any> = {};
|
|
||||||
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<string, any> = {};
|
|
||||||
|
|
||||||
// 添加一个与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);
|
|
||||||
}
|
|
||||||
|
|
@ -2,12 +2,10 @@ import "./iconify";
|
||||||
import "./iconfont";
|
import "./iconfont";
|
||||||
import FastCrud from "./fast-crud";
|
import FastCrud from "./fast-crud";
|
||||||
import permission from "./permission";
|
import permission from "./permission";
|
||||||
// import FsBpmn from "./bpmn";
|
|
||||||
|
|
||||||
function install(app: any, options: any = {}) {
|
function install(app: any, options: any = {}) {
|
||||||
app.use(FastCrud, options);
|
app.use(FastCrud, options);
|
||||||
app.use(permission);
|
app.use(permission);
|
||||||
// app.use(FsBpmn, options.i18n);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -42,14 +42,14 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
|
||||||
toggleColumnSetShow: {
|
toggleColumnSetShow: {
|
||||||
text: "切换列设置项显隐",
|
text: "切换列设置项显隐",
|
||||||
click() {
|
click() {
|
||||||
crudBinding.value.toolbar.columnsFilter.originalColumns[3].columnSetShow = !crudBinding.value.toolbar.columnsFilter.originalColumns[3].columnSetShow;
|
crudBinding.value.toolbar.columnsFilter.originalColumns.hidden.columnSetShow = !crudBinding.value.toolbar.columnsFilter.originalColumns.hidden.columnSetShow;
|
||||||
message.info("切换第4列的列设置显隐");
|
message.info("切换第4列的列设置显隐");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
toggleColumnSetDisabled: {
|
toggleColumnSetDisabled: {
|
||||||
text: "切换列设置项禁用",
|
text: "切换列设置项禁用",
|
||||||
click() {
|
click() {
|
||||||
crudBinding.value.toolbar.columnsFilter.originalColumns[2].columnSetDisabled = !crudBinding.value.toolbar.columnsFilter.originalColumns[2].columnSetDisabled;
|
crudBinding.value.toolbar.columnsFilter.originalColumns.disabled.columnSetDisabled = !crudBinding.value.toolbar.columnsFilter.originalColumns.disabled.columnSetDisabled;
|
||||||
message.info("切换第3列的列设置禁用启用");
|
message.info("切换第3列的列设置禁用启用");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
function columnsSetShowToggle() {
|
function columnsSetShowToggle() {
|
||||||
crudBinding.value.table.columns[3].columnSetShow = !crudBinding.value.table.columns[3].columnSetShow;
|
crudBinding.value.table.columns.disabled.columnSetShow = !crudBinding.value.table.columns.disabled.columnSetShow;
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
crudBinding,
|
crudBinding,
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,10 @@ import * as api from "./api";
|
||||||
import { requestForMock } from "/src/api/service";
|
import { requestForMock } from "/src/api/service";
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, GetContextFn, ScopeContext, useCompute, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, GetContextFn, ScopeContext, useCompute, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||||
import { message } from "ant-design-vue";
|
import { message } from "ant-design-vue";
|
||||||
import { computed, ref } from "vue";
|
import { computed } from "vue";
|
||||||
|
|
||||||
const { asyncCompute, compute } = useCompute();
|
const { asyncCompute, compute } = useCompute();
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||||
return await api.GetList(query);
|
return await api.GetList(query);
|
||||||
};
|
};
|
||||||
|
|
@ -21,24 +21,9 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
|
||||||
return await api.AddObj(form);
|
return await api.AddObj(form);
|
||||||
};
|
};
|
||||||
|
|
||||||
//普通的ref引用，可以动态切换配置
|
const { showRef, showTableComputed, columnComponentShowComputed } = context;
|
||||||
const showRef = ref(false);
|
|
||||||
const showTableRef = ref(true);
|
|
||||||
const showTableComputed = computed(() => {
|
|
||||||
return showTableRef.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
const columnComponentShowRef = ref(true);
|
|
||||||
const columnComponentShowComputed = computed(() => {
|
|
||||||
return columnComponentShowRef.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
output: {
|
|
||||||
showRef,
|
|
||||||
showTableRef,
|
|
||||||
columnComponentShowRef
|
|
||||||
},
|
|
||||||
crudOptions: {
|
crudOptions: {
|
||||||
request: {
|
request: {
|
||||||
pageRequest,
|
pageRequest,
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
<span class="ml-1">表格显隐:<a-switch v-model:checked="showTableRef"></a-switch></span>
|
<span class="ml-1">表格显隐:<a-switch v-model:checked="showTableRef"></a-switch></span>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
<span class="ml-1">列显隐:<a-switch v-model:checked="columnComponentShowRef"></a-switch></span>
|
<span class="ml-1">列显隐:<a-switch v-model:checked="columnComponentShowRef"></a-switch></span>
|
||||||
|
<span class="ml-1">列显隐2:<a-button @click="columnsMapSetShow">列显隐2</a-button></span>
|
||||||
<a-alert class="ml-1" type="info" message="点击下方右边的编辑按钮查看示例效果-----------> ↓↓↓↓↓" />
|
<a-alert class="ml-1" type="info" message="点击下方右边的编辑按钮查看示例效果-----------> ↓↓↓↓↓" />
|
||||||
</template>
|
</template>
|
||||||
<template #form_refSwitch>
|
<template #form_refSwitch>
|
||||||
|
|
@ -25,15 +26,37 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, onMounted } from "vue";
|
import { computed, defineComponent, onMounted, ref } from "vue";
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
import { useFs } from "@fast-crud/fast-crud";
|
||||||
import createCrudOptions from "./crud";
|
import createCrudOptions from "./crud";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "BasisCompute",
|
name: "BasisCompute",
|
||||||
setup() {
|
setup() {
|
||||||
const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
|
//普通的ref引用，可以动态切换配置
|
||||||
|
const showRef = ref(false);
|
||||||
|
const showTableRef = ref(true);
|
||||||
|
const showTableComputed = computed(() => {
|
||||||
|
return showTableRef.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
const columnComponentShowRef = ref(true);
|
||||||
|
const columnComponentShowComputed = computed(() => {
|
||||||
|
return columnComponentShowRef.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
const context = {
|
||||||
|
showRef,
|
||||||
|
showTableRef,
|
||||||
|
showTableComputed,
|
||||||
|
columnComponentShowRef,
|
||||||
|
columnComponentShowComputed
|
||||||
|
};
|
||||||
|
|
||||||
|
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
|
||||||
|
function columnsMapSetShow() {
|
||||||
|
crudBinding.value.table.columnsMap["id"].show = !crudBinding.value.table.columnsMap["id"].show;
|
||||||
|
}
|
||||||
// 页面打开后获取列表数据
|
// 页面打开后获取列表数据
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
crudExpose.doRefresh();
|
crudExpose.doRefresh();
|
||||||
|
|
@ -42,7 +65,8 @@ export default defineComponent({
|
||||||
return {
|
return {
|
||||||
crudBinding,
|
crudBinding,
|
||||||
crudRef,
|
crudRef,
|
||||||
...output
|
...context,
|
||||||
|
columnsMapSetShow
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -32,8 +32,10 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
|
||||||
},
|
},
|
||||||
form: {
|
form: {
|
||||||
//表单跨列
|
//表单跨列
|
||||||
col: { span: 24 },
|
col: { span: 24 }
|
||||||
labelCol: { span: 6 }
|
},
|
||||||
|
rowHandle: {
|
||||||
|
order: 1000
|
||||||
},
|
},
|
||||||
columns: {
|
columns: {
|
||||||
col1: {
|
col1: {
|
||||||
|
|
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
<template>
|
|
||||||
<component :is="ui.collapseItem.name" name="element-user-assign">
|
|
||||||
<template #header>
|
|
||||||
<collapse-title :title="$t('panel.userAssign')">
|
|
||||||
<lucide-icon name="FileText" />
|
|
||||||
</collapse-title>
|
|
||||||
</template>
|
|
||||||
<edit-item :label="$t('panel.userType')" :label-width="120">
|
|
||||||
<component
|
|
||||||
:is="ui.select.name"
|
|
||||||
class="w-full"
|
|
||||||
v-bind="
|
|
||||||
ui.select.builder({
|
|
||||||
props: {
|
|
||||||
options: userTypeOptions
|
|
||||||
},
|
|
||||||
vModel: vModeler('userType')
|
|
||||||
}).props
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</edit-item>
|
|
||||||
<edit-item v-if="formData.userType === 'assignUser'" :label="$t('panel.assignUser')" :label-width="120">
|
|
||||||
<component
|
|
||||||
:is="ui.select.name"
|
|
||||||
class="w-full"
|
|
||||||
v-bind="
|
|
||||||
ui.select.builder({
|
|
||||||
multiple: false,
|
|
||||||
options: userList,
|
|
||||||
valueName: 'id',
|
|
||||||
labelName: 'name',
|
|
||||||
vModel: vModeler('assignUser')
|
|
||||||
}).props
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</edit-item>
|
|
||||||
|
|
||||||
<edit-item v-if="formData.userType === 'candidateUsers'" :label="$t('panel.candidateUsers')" :label-width="120">
|
|
||||||
<component
|
|
||||||
:is="ui.select.name"
|
|
||||||
class="w-full"
|
|
||||||
v-bind="
|
|
||||||
ui.select.builder({
|
|
||||||
multiple: true,
|
|
||||||
options: userList,
|
|
||||||
valueName: 'id',
|
|
||||||
labelName: 'name',
|
|
||||||
vModel: vModeler('candidateUsers')
|
|
||||||
}).props
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</edit-item>
|
|
||||||
<edit-item v-if="formData.userType === 'candidateGroups'" :label="$t('panel.candidateGroups')" :label-width="120">
|
|
||||||
<component
|
|
||||||
:is="ui.select.name"
|
|
||||||
class="w-full"
|
|
||||||
v-bind="
|
|
||||||
ui.select.builder({
|
|
||||||
multiple: true,
|
|
||||||
options: groupList,
|
|
||||||
valueName: 'id',
|
|
||||||
labelName: 'name',
|
|
||||||
vModel: vModeler('candidateGroups')
|
|
||||||
}).props
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</edit-item>
|
|
||||||
</component>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, onMounted, onUnmounted, Ref, ref } from "vue";
|
|
||||||
import { useUi } from "@fast-crud/ui-interface";
|
|
||||||
import { useModelerStore, Base } from "@fast-crud/fast-bpmn";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "ElementUserAssign",
|
|
||||||
setup() {
|
|
||||||
const { ui } = useUi();
|
|
||||||
const userTypeOptions = ref([
|
|
||||||
{ value: "assignUser", label: "直接指派" },
|
|
||||||
{ value: "candidateUsers", label: "候选人" },
|
|
||||||
{ value: "candidateGroups", label: "候选组" }
|
|
||||||
]);
|
|
||||||
const userList = ref([
|
|
||||||
{ id: "1", username: "admin", name: "管理员" },
|
|
||||||
{ id: "2", username: "zhangsan", name: "张三" },
|
|
||||||
{ id: "3", username: "lisi", name: "李四" }
|
|
||||||
]);
|
|
||||||
const groupList = ref([
|
|
||||||
{ id: "1", name: "总经办" },
|
|
||||||
{ id: "2", name: "研发部" },
|
|
||||||
{ id: "3", name: "测试部" }
|
|
||||||
]);
|
|
||||||
|
|
||||||
const { injectModelerStore } = useModelerStore();
|
|
||||||
const modelerStore = injectModelerStore();
|
|
||||||
|
|
||||||
const getActive = computed(() => modelerStore!.getActive!);
|
|
||||||
const helper = modelerStore.helper;
|
|
||||||
|
|
||||||
const formData: Ref = ref({});
|
|
||||||
|
|
||||||
function reload() {
|
|
||||||
let element = getActive.value as Base;
|
|
||||||
formData.value = {
|
|
||||||
userType: helper.getElementProperty(element, "userType"),
|
|
||||||
assignUser: helper.getElementProperty(element, "assignUser"),
|
|
||||||
candidateUsers: helper.getElementProperty(element, "candidateUsers"),
|
|
||||||
candidateGroups: helper.getElementProperty(element, "candidateGroups")
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
modelerStore.onElementUpdate(reload);
|
|
||||||
|
|
||||||
function vModeler(key: string) {
|
|
||||||
const valueKey = key ? "value." + key : "value";
|
|
||||||
return {
|
|
||||||
ref: formData,
|
|
||||||
key: valueKey,
|
|
||||||
onChange: (value: any) => {
|
|
||||||
helper.setElementProperty(getActive.value as Base, key, value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return { ui, userTypeOptions, vModeler, formData, userList, groupList };
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,172 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="fs-bpmn-demo-page">
|
|
||||||
<div class="demo-tool">
|
|
||||||
<span class="m-l"> <a-button @click="getDetail">GetDetail</a-button> </span>
|
|
||||||
<span class="m-l"> <a-button @click="getXml">GetXml</a-button> </span>
|
|
||||||
<span class="m-l"> <a-button @click="getJson">GetJson</a-button> </span>
|
|
||||||
<span class="m-l"></span>
|
|
||||||
<span class="m-l"> showMiniMapButton<a-switch v-model:checked="toolbarProps.buttons.miniMap" /> </span>
|
|
||||||
<span class="m-l"></span>
|
|
||||||
<span class="m-l"> showExtensionProperties <a-switch v-model:checked="binding.showExtensionProperties" /> </span>
|
|
||||||
<span class="m-l"> showNameAndCode<a-switch v-model:checked="binding.showNameAndCode" /> </span>
|
|
||||||
<span class="m-l"></span>
|
|
||||||
<span class="m-l"> showToolbar<a-switch v-model:checked="binding.showToolbar" /> </span>
|
|
||||||
<span class="m-l"> showMiniMap<a-switch v-model:checked="binding.showMinimap" /> </span>
|
|
||||||
<span class="m-l"> showPanel<a-switch v-model:checked="binding.showPanel" /> </span>
|
|
||||||
<span class="m-l"> showSettings<a-switch v-model:checked="binding.showSettings" /> </span>
|
|
||||||
<span class="m-l"> showPalette<a-switch v-model:checked="binding.showPalette" /> </span>
|
|
||||||
<span class="m-l"> showContextMenu<a-switch v-model:checked="binding.showContextMenu" /> </span>
|
|
||||||
|
|
||||||
<fs-bpmn-preview-demo></fs-bpmn-preview-demo>
|
|
||||||
</div>
|
|
||||||
<div class="header">
|
|
||||||
<component :is="ui.tabs.name" v-model:active-key="activeKey" type="card">
|
|
||||||
<component :is="ui.tabPane.name" key="designer" tab="设计器"> </component>
|
|
||||||
</component>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
|
||||||
<fs-bpmn ref="bpmnRef" v-model:xml="xmlRef" :panel="panelProps" :toolbar="toolbarProps" v-bind="binding" @save="onSave">
|
|
||||||
<template #toolbar_left>
|
|
||||||
<a-tag>toolbar_left插槽</a-tag>
|
|
||||||
</template>
|
|
||||||
<template #toolbar_right>
|
|
||||||
<a-tag>toolbar_right插槽</a-tag>
|
|
||||||
</template>
|
|
||||||
</fs-bpmn>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import zhCN from "ant-design-vue/es/locale/zh_CN";
|
|
||||||
|
|
||||||
import { defineComponent, Ref, ref } from "vue";
|
|
||||||
import FsBpmnPreviewDemo from "./preview.vue";
|
|
||||||
import { demoXml } from "./xml";
|
|
||||||
import { useUi } from "@fast-crud/ui-interface";
|
|
||||||
import { FsBpmnPanelProps, Base, FsBpmnToolbarProps } from "@fast-crud/fast-bpmn";
|
|
||||||
import ElementUserAssign from "./ElementUserAssign.vue";
|
|
||||||
|
|
||||||
const FsBpmnDemo = defineComponent({
|
|
||||||
components: { FsBpmnPreviewDemo },
|
|
||||||
setup() {
|
|
||||||
const localRef = ref(zhCN);
|
|
||||||
const xmlRef = ref(demoXml);
|
|
||||||
const { ui } = useUi();
|
|
||||||
const activeKey = ref("designer");
|
|
||||||
const binding: Ref = ref({
|
|
||||||
showToolbar: true,
|
|
||||||
showMinimap: true,
|
|
||||||
showPanel: true,
|
|
||||||
showSettings: false,
|
|
||||||
showPalette: true,
|
|
||||||
showContextMenu: true,
|
|
||||||
showNameAndCode: true,
|
|
||||||
showExtensionProperties: true
|
|
||||||
});
|
|
||||||
const toolbarProps = ref<FsBpmnToolbarProps>({
|
|
||||||
buttons: {
|
|
||||||
miniMap: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const panelProps = ref<FsBpmnPanelProps>({
|
|
||||||
//注册自定义组件
|
|
||||||
registerComponents() {
|
|
||||||
//也可以写在 bpmn-setup进行全局注册
|
|
||||||
return {
|
|
||||||
ElementUserAssign: {
|
|
||||||
order: 3,
|
|
||||||
component: ElementUserAssign,
|
|
||||||
props: {},
|
|
||||||
show(element: any) {
|
|
||||||
//什么情况下显示此组件， element为当前选中的元素节点
|
|
||||||
return element.type === "bpmn:UserTask";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
//重新设置组件配置
|
|
||||||
resetComponents(elements, components) {
|
|
||||||
//ElementGenerations
|
|
||||||
//ElementDocumentations
|
|
||||||
//ElementJobExecution
|
|
||||||
//ElementExtensionProperties
|
|
||||||
//ElementExecutionListeners
|
|
||||||
//ElementAsyncContinuations
|
|
||||||
//ElementStartInitiator
|
|
||||||
//ElementUserAssign
|
|
||||||
components.ElementGenerations.props.showNameAndCode = binding.value.showNameAndCode;
|
|
||||||
|
|
||||||
components.ElementDocumentations.show = true;
|
|
||||||
|
|
||||||
if (binding.value.showExtensionProperties === false) {
|
|
||||||
components.ElementExtensionProperties.show = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function onSave(xml: string) {
|
|
||||||
console.log("onsave", xml);
|
|
||||||
}
|
|
||||||
|
|
||||||
const bpmnRef = ref();
|
|
||||||
async function getDetail() {
|
|
||||||
const detail = await bpmnRef.value.getDetail();
|
|
||||||
console.log("detail", detail);
|
|
||||||
}
|
|
||||||
async function getXml() {
|
|
||||||
const xml = await bpmnRef.value.getXml();
|
|
||||||
console.log("xml", xml);
|
|
||||||
}
|
|
||||||
async function getJson() {
|
|
||||||
const json = await bpmnRef.value.getJson();
|
|
||||||
console.log("json", json);
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
localRef,
|
|
||||||
xmlRef,
|
|
||||||
bpmnRef,
|
|
||||||
ui,
|
|
||||||
activeKey,
|
|
||||||
panelProps,
|
|
||||||
binding,
|
|
||||||
onSave,
|
|
||||||
getDetail,
|
|
||||||
getXml,
|
|
||||||
getJson,
|
|
||||||
toolbarProps
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default FsBpmnDemo;
|
|
||||||
</script>
|
|
||||||
<style lang="less">
|
|
||||||
.fs-bpmn-demo-page {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
.demo-tool {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
padding: 20px 20px 0 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
.ant-tabs-nav {
|
|
||||||
padding: 0px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.main {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.ant-tabs-content {
|
|
||||||
height: 100%;
|
|
||||||
.ant-tabs-tabpane {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
<template>
|
|
||||||
<component :is="ui.button.name" @click="openPreview">预览</component>
|
|
||||||
|
|
||||||
<component :is="ui.dialog.name" v-if="dialogShow" v-model:[ui.dialog.visible]="dialogShow" title="预览" :width="1200">
|
|
||||||
<fs-bpmn-preview v-if="processXmlRef" :xml="processXmlRef" :highlight="highlightRef" style="height: 600px"></fs-bpmn-preview>
|
|
||||||
</component>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="tsx">
|
|
||||||
import { defineComponent, Ref, ref } from "vue";
|
|
||||||
import { useUi } from "@fast-crud/ui-interface";
|
|
||||||
import { demoXml } from "./xml";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "FsBpmnPreviewDemo",
|
|
||||||
setup() {
|
|
||||||
const { ui } = useUi();
|
|
||||||
const processXmlRef: Ref = ref();
|
|
||||||
const highlightRef: Ref<any[]> = ref([]);
|
|
||||||
const dialogShow = ref(false);
|
|
||||||
function openPreview() {
|
|
||||||
processXmlRef.value = demoXml;
|
|
||||||
//type 暂时无所谓
|
|
||||||
highlightRef.value = [{ id: "Activity_1evmidl", type: "node", flicker: true }, { id: "Gateway_01mlwlp", type: "node" }, { id: "Event_0u7us6f", type: "node" }, { id: "Flow_0z7lqtc" }, { id: "Flow_1xxl1vf" }];
|
|
||||||
dialogShow.value = true;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
ui,
|
|
||||||
processXmlRef,
|
|
||||||
highlightRef,
|
|
||||||
openPreview,
|
|
||||||
dialogShow
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
export const demoXml = `<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="Definitions_Process_1679537772748" targetNamespace="http://bpmn.io/schema/bpmn">
|
|
||||||
<bpmn:process id="Process_1679537772748" name="业务流程_1679537772748" isExecutable="true">
|
|
||||||
<bpmn:startEvent id="Event_0u7us6f"><bpmn:outgoing>Flow_0z7lqtc</bpmn:outgoing>
|
|
||||||
</bpmn:startEvent>
|
|
||||||
<bpmn:sequenceFlow id="Flow_0z7lqtc" sourceRef="Event_0u7us6f" targetRef="Activity_1evmidl" />
|
|
||||||
<bpmn:userTask id="Activity_08zwh5z" name="二级审批" camunda:candidateGroups="1" camunda:userType="candidateGroups">
|
|
||||||
<bpmn:incoming>Flow_1rf2bmg</bpmn:incoming><bpmn:outgoing>Flow_06ulhtm</bpmn:outgoing>
|
|
||||||
</bpmn:userTask>
|
|
||||||
<bpmn:sequenceFlow id="Flow_1xxl1vf" sourceRef="Activity_1evmidl" targetRef="Gateway_01mlwlp" />
|
|
||||||
<bpmn:userTask id="Activity_1evmidl" name="一级审批" camunda:candidateGroups="2" camunda:userType="candidateGroups">
|
|
||||||
<bpmn:incoming>Flow_0z7lqtc</bpmn:incoming><bpmn:incoming>Flow_1p9en55</bpmn:incoming><bpmn:outgoing>Flow_1xxl1vf</bpmn:outgoing>
|
|
||||||
</bpmn:userTask>
|
|
||||||
<bpmn:endEvent id="Event_0lu13jx"><bpmn:incoming>Flow_06ulhtm</bpmn:incoming></bpmn:endEvent>
|
|
||||||
<bpmn:sequenceFlow id="Flow_06ulhtm" sourceRef="Activity_08zwh5z" targetRef="Event_0lu13jx" />
|
|
||||||
<bpmn:exclusiveGateway id="Gateway_01mlwlp"><bpmn:incoming>Flow_1xxl1vf</bpmn:incoming><bpmn:outgoing>Flow_1rf2bmg</bpmn:outgoing><bpmn:outgoing>Flow_11pwko7</bpmn:outgoing></bpmn:exclusiveGateway>
|
|
||||||
<bpmn:sequenceFlow id="Flow_1rf2bmg" sourceRef="Gateway_01mlwlp" targetRef="Activity_08zwh5z" />
|
|
||||||
<bpmn:sequenceFlow id="Flow_11pwko7" sourceRef="Gateway_01mlwlp" targetRef="Activity_15z3qp6" />
|
|
||||||
<bpmn:userTask id="Activity_15z3qp6" name="修改" camunda:userType="assignUser" camunda:assignUser="2">
|
|
||||||
<bpmn:incoming>Flow_11pwko7</bpmn:incoming><bpmn:outgoing>Flow_1p9en55</bpmn:outgoing>
|
|
||||||
</bpmn:userTask>
|
|
||||||
<bpmn:sequenceFlow id="Flow_1p9en55" sourceRef="Activity_15z3qp6" targetRef="Activity_1evmidl" />
|
|
||||||
</bpmn:process>
|
|
||||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
|
||||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1679537772748"><bpmndi:BPMNShape id="Event_0u7us6f_di" bpmnElement="Event_0u7us6f"><dc:Bounds x="252" y="172" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_0qkxfyi_di" bpmnElement="Activity_1evmidl"><dc:Bounds x="388" y="130" width="120" height="120" /><bpmndi:BPMNLabel /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_08zwh5z_di" bpmnElement="Activity_08zwh5z"><dc:Bounds x="730" y="130" width="120" height="120" /><bpmndi:BPMNLabel /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Gateway_01mlwlp_di" bpmnElement="Gateway_01mlwlp" isMarkerVisible="true"><dc:Bounds x="595" y="165" width="50" height="50" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_0qiby6r_di" bpmnElement="Activity_15z3qp6"><dc:Bounds x="560" y="350" width="120" height="120" /><bpmndi:BPMNLabel /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_0lu13jx_di" bpmnElement="Event_0lu13jx"><dc:Bounds x="952" y="172" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNEdge id="Flow_0z7lqtc_di" bpmnElement="Flow_0z7lqtc"><di:waypoint x="288" y="190" /><di:waypoint x="388" y="190" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_1xxl1vf_di" bpmnElement="Flow_1xxl1vf"><di:waypoint x="508" y="190" /><di:waypoint x="595" y="190" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_06ulhtm_di" bpmnElement="Flow_06ulhtm"><di:waypoint x="850" y="190" /><di:waypoint x="952" y="190" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_1rf2bmg_di" bpmnElement="Flow_1rf2bmg"><di:waypoint x="645" y="190" /><di:waypoint x="730" y="190" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_11pwko7_di" bpmnElement="Flow_11pwko7"><di:waypoint x="620" y="215" /><di:waypoint x="620" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_1p9en55_di" bpmnElement="Flow_1p9en55"><di:waypoint x="560" y="410" /><di:waypoint x="448" y="410" /><di:waypoint x="448" y="250" /></bpmndi:BPMNEdge></bpmndi:BPMNPlane>
|
|
||||||
</bpmndi:BPMNDiagram>
|
|
||||||
</bpmn:definitions>`;
|
|
||||||
Loading…
Reference in New Issue