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.
|
||||
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)
|
||||
|
||||
**Note:** Version bump only for package @fast-crud/fs-admin-antdv
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@fast-crud/fs-admin-antdv",
|
||||
"version": "1.13.12",
|
||||
"version": "1.14.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
|
@ -25,11 +25,10 @@
|
|||
"@ant-design/icons-vue": "^6.1.0",
|
||||
"@aws-sdk/client-s3": "^3.292.0",
|
||||
"@aws-sdk/s3-request-presigner": "^3.292.0",
|
||||
"@fast-crud/fast-bpmn": "^1.0.14",
|
||||
"@fast-crud/fast-crud": "^1.13.12",
|
||||
"@fast-crud/fast-extends": "^1.13.12",
|
||||
"@fast-crud/ui-antdv": "^1.13.12",
|
||||
"@fast-crud/ui-interface": "^1.13.12",
|
||||
"@fast-crud/fast-crud": "^1.14.0",
|
||||
"@fast-crud/fast-extends": "^1.14.0",
|
||||
"@fast-crud/ui-antdv": "^1.14.0",
|
||||
"@fast-crud/ui-interface": "^1.14.0",
|
||||
"@iconify/iconify": "^3.1.0",
|
||||
"@iconify/json": "^2.2.35",
|
||||
"@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 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 {
|
||||
|
|
|
|||
|
|
@ -42,14 +42,14 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
|
|||
toggleColumnSetShow: {
|
||||
text: "切换列设置项显隐",
|
||||
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列的列设置显隐");
|
||||
}
|
||||
},
|
||||
toggleColumnSetDisabled: {
|
||||
text: "切换列设置项禁用",
|
||||
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列的列设置禁用启用");
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
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 {
|
||||
crudBinding,
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import * as api from "./api";
|
|||
import { requestForMock } from "/src/api/service";
|
||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, GetContextFn, ScopeContext, useCompute, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
import { message } from "ant-design-vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { computed } from "vue";
|
||||
|
||||
const { asyncCompute, compute } = useCompute();
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
|
|
@ -21,24 +21,9 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
|
|||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
//普通的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 { showRef, showTableComputed, columnComponentShowComputed } = context;
|
||||
|
||||
return {
|
||||
output: {
|
||||
showRef,
|
||||
showTableRef,
|
||||
columnComponentShowRef
|
||||
},
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<span class="ml-1">表格显隐:<a-switch v-model:checked="showTableRef"></a-switch></span>
|
||||
</a-tooltip>
|
||||
<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="点击下方右边的编辑按钮查看示例效果-----------> ↓↓↓↓↓" />
|
||||
</template>
|
||||
<template #form_refSwitch>
|
||||
|
|
@ -25,15 +26,37 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { computed, defineComponent, onMounted, ref } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
|
||||
export default defineComponent({
|
||||
name: "BasisCompute",
|
||||
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(() => {
|
||||
crudExpose.doRefresh();
|
||||
|
|
@ -42,7 +65,8 @@ export default defineComponent({
|
|||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
...output
|
||||
...context,
|
||||
columnsMapSetShow
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,8 +32,10 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
|
|||
},
|
||||
form: {
|
||||
//表单跨列
|
||||
col: { span: 24 },
|
||||
labelCol: { span: 6 }
|
||||
col: { span: 24 }
|
||||
},
|
||||
rowHandle: {
|
||||
order: 1000
|
||||
},
|
||||
columns: {
|
||||
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