芋道源码
3 years ago
committed by
Gitee
commit
5addbb23d2
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,8 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export const getActivityList = async (params) => {
|
||||
return await request.get({
|
||||
url: '/bpm/activity/list',
|
||||
params
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export const getProcessDefinitionBpmnXMLApi = async (id: number) => {
|
||||
return await request.get({
|
||||
url: '/bpm/process-definition/get-bpmn-xml?id=' + id
|
||||
})
|
||||
}
|
||||
|
||||
export const getProcessDefinitionPageApi = async (params) => {
|
||||
return await request.get({
|
||||
url: '/bpm/process-definition/page',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const getProcessDefinitionListApi = async (params) => {
|
||||
return await request.get({
|
||||
url: '/bpm/process-definition/list',
|
||||
params
|
||||
})
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
export type FormVO = {
|
||||
id: number
|
||||
name: string
|
||||
conf: string
|
||||
fields: string[]
|
||||
status: number
|
||||
remark: string
|
||||
createTime: string
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
export type LeaveVO = {
|
||||
id: number
|
||||
result: number
|
||||
type: number
|
||||
reason: string
|
||||
processInstanceId: string
|
||||
startTime: string
|
||||
endTime: string
|
||||
createTime: string
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
export type ProcessDefinitionVO = {
|
||||
id: string
|
||||
version: number
|
||||
deploymentTIme: string
|
||||
suspensionState: number
|
||||
}
|
||||
|
||||
export type ModelVO = {
|
||||
id: number
|
||||
formName: string
|
||||
key: string
|
||||
name: string
|
||||
description: string
|
||||
category: string
|
||||
formType: number
|
||||
formId: number
|
||||
formCustomCreatePath: string
|
||||
formCustomViewPath: string
|
||||
processDefinition: ProcessDefinitionVO
|
||||
status: number
|
||||
remark: string
|
||||
createTime: string
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
export type task = {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
export type ProcessInstanceVO = {
|
||||
id: number
|
||||
name: string
|
||||
processDefinitionId: string
|
||||
category: string
|
||||
result: number
|
||||
tasks: task[]
|
||||
fields: string[]
|
||||
status: number
|
||||
remark: string
|
||||
businessKey: string
|
||||
createTime: string
|
||||
endTime: string
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
export type FormVO = {
|
||||
id: number
|
||||
name: string
|
||||
conf: string
|
||||
fields: string[]
|
||||
status: number
|
||||
remark: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
export type TaskProcessVO = {
|
||||
id: string
|
||||
name: string
|
||||
startUserId: number
|
||||
startUserNickname: string
|
||||
processDefinitionId: string
|
||||
}
|
||||
|
||||
export type TaskTodoVO = {
|
||||
id: string
|
||||
name: string
|
||||
claimTime: string
|
||||
createTime: string
|
||||
suspensionState: number
|
||||
processInstance: TaskProcessVO
|
||||
}
|
||||
|
||||
export type TaskDoneVO = {
|
||||
id: string
|
||||
name: string
|
||||
claimTime: string
|
||||
createTime: string
|
||||
endTime: string
|
||||
durationInMillis: number
|
||||
suspensionState: number
|
||||
result: number
|
||||
reason: string
|
||||
processInstance: TaskProcessVO
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
export type TaskAssignVO = {
|
||||
id: number
|
||||
modelId: string
|
||||
processDefinitionId: string
|
||||
taskDefinitionKey: string
|
||||
taskDefinitionName: string
|
||||
options: string[]
|
||||
type: number
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
export type UserGroupVO = {
|
||||
id: number
|
||||
name: string
|
||||
description: string
|
||||
memberUserIds: number[]
|
||||
status: number
|
||||
remark: string
|
||||
createTime: string
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import MyProcessDesigner from './ProcessDesigner.vue'
|
||||
|
||||
MyProcessDesigner.install = function (Vue) {
|
||||
Vue.component(MyProcessDesigner.name, MyProcessDesigner)
|
||||
}
|
||||
|
||||
// 流程图的设计器，可编辑
|
||||
export default MyProcessDesigner
|
||||
@ -0,0 +1,8 @@
|
||||
import MyProcessViewer from './ProcessViewer.vue'
|
||||
|
||||
MyProcessViewer.install = function (Vue) {
|
||||
Vue.component(MyProcessViewer.name, MyProcessViewer)
|
||||
}
|
||||
|
||||
// 流程图的查看器，不可编辑
|
||||
export default MyProcessViewer
|
||||
@ -0,0 +1,390 @@
|
||||
import { assign, forEach, isArray } from 'min-dash'
|
||||
|
||||
import { is } from "bpmn-js/lib/util/ModelUtil"
|
||||
|
||||
import { isExpanded, isEventSubProcess } from "bpmn-js/lib/util/DiUtil"
|
||||
|
||||
import { isAny } from "bpmn-js/lib/features/modeling/util/ModelingUtil"
|
||||
|
||||
import { getChildLanes } from "bpmn-js/lib/features/modeling/util/LaneUtil"
|
||||
|
||||
import { hasPrimaryModifier } from "diagram-js/lib/util/Mouse"
|
||||
|
||||
/**
|
||||
* A provider for BPMN 2.0 elements context pad
|
||||
*/
|
||||
export default function ContextPadProvider (
|
||||
config,
|
||||
injector,
|
||||
eventBus,
|
||||
contextPad,
|
||||
modeling,
|
||||
elementFactory,
|
||||
connect,
|
||||
create,
|
||||
popupMenu,
|
||||
canvas,
|
||||
rules,
|
||||
translate,
|
||||
elementRegistry
|
||||
) {
|
||||
config = config || {}
|
||||
|
||||
contextPad.registerProvider(this)
|
||||
|
||||
this._contextPad = contextPad
|
||||
|
||||
this._modeling = modeling
|
||||
|
||||
this._elementFactory = elementFactory
|
||||
this._connect = connect
|
||||
this._create = create
|
||||
this._popupMenu = popupMenu
|
||||
this._canvas = canvas
|
||||
this._rules = rules
|
||||
this._translate = translate
|
||||
|
||||
if (config.autoPlace !== false) {
|
||||
this._autoPlace = injector.get("autoPlace", false)
|
||||
}
|
||||
|
||||
eventBus.on("create.end", 250, function (event) {
|
||||
const context = event.context,
|
||||
shape = context.shape
|
||||
|
||||
if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
|
||||
return
|
||||
}
|
||||
|
||||
const entries = contextPad.getEntries(shape)
|
||||
|
||||
if (entries.replace) {
|
||||
entries.replace.action.click(event, shape)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
ContextPadProvider.$inject = [
|
||||
"config.contextPad",
|
||||
"injector",
|
||||
"eventBus",
|
||||
"contextPad",
|
||||
"modeling",
|
||||
"elementFactory",
|
||||
"connect",
|
||||
"create",
|
||||
"popupMenu",
|
||||
"canvas",
|
||||
"rules",
|
||||
"translate",
|
||||
"elementRegistry"
|
||||
]
|
||||
|
||||
ContextPadProvider.prototype.getContextPadEntries = function (element) {
|
||||
const contextPad = this._contextPad,
|
||||
modeling = this._modeling,
|
||||
elementFactory = this._elementFactory,
|
||||
connect = this._connect,
|
||||
create = this._create,
|
||||
popupMenu = this._popupMenu,
|
||||
canvas = this._canvas,
|
||||
rules = this._rules,
|
||||
autoPlace = this._autoPlace,
|
||||
translate = this._translate
|
||||
|
||||
const actions = {}
|
||||
|
||||
if (element.type === "label") {
|
||||
return actions
|
||||
}
|
||||
|
||||
const businessObject = element.businessObject
|
||||
|
||||
function startConnect (event, element) {
|
||||
connect.start(event, element)
|
||||
}
|
||||
|
||||
function removeElement () {
|
||||
modeling.removeElements([element])
|
||||
}
|
||||
|
||||
function getReplaceMenuPosition (element) {
|
||||
const Y_OFFSET = 5
|
||||
|
||||
const diagramContainer = canvas.getContainer(),
|
||||
pad = contextPad.getPad(element).html
|
||||
|
||||
const diagramRect = diagramContainer.getBoundingClientRect(),
|
||||
padRect = pad.getBoundingClientRect()
|
||||
|
||||
const top = padRect.top - diagramRect.top
|
||||
const left = padRect.left - diagramRect.left
|
||||
|
||||
const pos = {
|
||||
x: left,
|
||||
y: top + padRect.height + Y_OFFSET
|
||||
}
|
||||
|
||||
return pos
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an append action
|
||||
*
|
||||
* @param {string} type
|
||||
* @param {string} className
|
||||
* @param {string} [title]
|
||||
* @param {Object} [options]
|
||||
*
|
||||
* @return {Object} descriptor
|
||||
*/
|
||||
function appendAction (type, className, title, options) {
|
||||
if (typeof title !== "string") {
|
||||
options = title
|
||||
title = translate("Append {type}", { type: type.replace(/^bpmn:/, "") })
|
||||
}
|
||||
|
||||
function appendStart (event, element) {
|
||||
const shape = elementFactory.createShape(assign({ type: type }, options))
|
||||
create.start(event, shape, {
|
||||
source: element
|
||||
})
|
||||
}
|
||||
|
||||
const append = autoPlace
|
||||
? function (event, element) {
|
||||
const shape = elementFactory.createShape(assign({ type: type }, options))
|
||||
|
||||
autoPlace.append(element, shape)
|
||||
}
|
||||
: appendStart
|
||||
|
||||
return {
|
||||
group: "model",
|
||||
className: className,
|
||||
title: title,
|
||||
action: {
|
||||
dragstart: appendStart,
|
||||
click: append
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function splitLaneHandler (count) {
|
||||
return function (event, element) {
|
||||
// actual split
|
||||
modeling.splitLane(element, count)
|
||||
|
||||
// refresh context pad after split to
|
||||
// get rid of split icons
|
||||
contextPad.open(element, true)
|
||||
}
|
||||
}
|
||||
|
||||
if (isAny(businessObject, ["bpmn:Lane", "bpmn:Participant"]) && isExpanded(businessObject)) {
|
||||
const childLanes = getChildLanes(element)
|
||||
|
||||
assign(actions, {
|
||||
"lane-insert-above": {
|
||||
group: "lane-insert-above",
|
||||
className: "bpmn-icon-lane-insert-above",
|
||||
title: translate("Add Lane above"),
|
||||
action: {
|
||||
click: function (event, element) {
|
||||
modeling.addLane(element, "top")
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (childLanes.length < 2) {
|
||||
if (element.height >= 120) {
|
||||
assign(actions, {
|
||||
"lane-divide-two": {
|
||||
group: "lane-divide",
|
||||
className: "bpmn-icon-lane-divide-two",
|
||||
title: translate("Divide into two Lanes"),
|
||||
action: {
|
||||
click: splitLaneHandler(2)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (element.height >= 180) {
|
||||
assign(actions, {
|
||||
"lane-divide-three": {
|
||||
group: "lane-divide",
|
||||
className: "bpmn-icon-lane-divide-three",
|
||||
title: translate("Divide into three Lanes"),
|
||||
action: {
|
||||
click: splitLaneHandler(3)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
assign(actions, {
|
||||
"lane-insert-below": {
|
||||
group: "lane-insert-below",
|
||||
className: "bpmn-icon-lane-insert-below",
|
||||
title: translate("Add Lane below"),
|
||||
action: {
|
||||
click: function (event, element) {
|
||||
modeling.addLane(element, "bottom")
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (is(businessObject, "bpmn:FlowNode")) {
|
||||
if (is(businessObject, "bpmn:EventBasedGateway")) {
|
||||
assign(actions, {
|
||||
"append.receive-task": appendAction("bpmn:ReceiveTask", "bpmn-icon-receive-task", translate("Append ReceiveTask")),
|
||||
"append.message-intermediate-event": appendAction(
|
||||
"bpmn:IntermediateCatchEvent",
|
||||
"bpmn-icon-intermediate-event-catch-message",
|
||||
translate("Append MessageIntermediateCatchEvent"),
|
||||
{ eventDefinitionType: "bpmn:MessageEventDefinition" }
|
||||
),
|
||||
"append.timer-intermediate-event": appendAction(
|
||||
"bpmn:IntermediateCatchEvent",
|
||||
"bpmn-icon-intermediate-event-catch-timer",
|
||||
translate("Append TimerIntermediateCatchEvent"),
|
||||
{ eventDefinitionType: "bpmn:TimerEventDefinition" }
|
||||
),
|
||||
"append.condition-intermediate-event": appendAction(
|
||||
"bpmn:IntermediateCatchEvent",
|
||||
"bpmn-icon-intermediate-event-catch-condition",
|
||||
translate("Append ConditionIntermediateCatchEvent"),
|
||||
{ eventDefinitionType: "bpmn:ConditionalEventDefinition" }
|
||||
),
|
||||
"append.signal-intermediate-event": appendAction(
|
||||
"bpmn:IntermediateCatchEvent",
|
||||
"bpmn-icon-intermediate-event-catch-signal",
|
||||
translate("Append SignalIntermediateCatchEvent"),
|
||||
{ eventDefinitionType: "bpmn:SignalEventDefinition" }
|
||||
)
|
||||
})
|
||||
} else if (isEventType(businessObject, "bpmn:BoundaryEvent", "bpmn:CompensateEventDefinition")) {
|
||||
assign(actions, {
|
||||
"append.compensation-activity": appendAction("bpmn:Task", "bpmn-icon-task", translate("Append compensation activity"), {
|
||||
isForCompensation: true
|
||||
})
|
||||
})
|
||||
} else if (
|
||||
!is(businessObject, "bpmn:EndEvent") &&
|
||||
!businessObject.isForCompensation &&
|
||||
!isEventType(businessObject, "bpmn:IntermediateThrowEvent", "bpmn:LinkEventDefinition") &&
|
||||
!isEventSubProcess(businessObject)
|
||||
) {
|
||||
assign(actions, {
|
||||
"append.end-event": appendAction("bpmn:EndEvent", "bpmn-icon-end-event-none", translate("Append EndEvent")),
|
||||
"append.gateway": appendAction("bpmn:ExclusiveGateway", "bpmn-icon-gateway-none", translate("Append Gateway")),
|
||||
"append.append-task": appendAction("bpmn:UserTask", "bpmn-icon-user-task", translate("Append Task")),
|
||||
"append.intermediate-event": appendAction(
|
||||
"bpmn:IntermediateThrowEvent",
|
||||
"bpmn-icon-intermediate-event-none",
|
||||
translate("Append Intermediate/Boundary Event")
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (!popupMenu.isEmpty(element, "bpmn-replace")) {
|
||||
// Replace menu entry
|
||||
assign(actions, {
|
||||
replace: {
|
||||
group: "edit",
|
||||
className: "bpmn-icon-screw-wrench",
|
||||
title: '修改类型',
|
||||
action: {
|
||||
click: function (event, element) {
|
||||
const position = assign(getReplaceMenuPosition(element), {
|
||||
cursor: { x: event.x, y: event.y }
|
||||
})
|
||||
|
||||
popupMenu.open(element, "bpmn-replace", position)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (isAny(businessObject, ["bpmn:FlowNode", "bpmn:InteractionNode", "bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
|
||||
assign(actions, {
|
||||
"append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation"),
|
||||
|
||||
connect: {
|
||||
group: "connect",
|
||||
className: "bpmn-icon-connection-multi",
|
||||
title: translate("Connect using " + (businessObject.isForCompensation ? "" : "Sequence/MessageFlow or ") + "Association"),
|
||||
action: {
|
||||
click: startConnect,
|
||||
dragstart: startConnect
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (isAny(businessObject, ["bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
|
||||
assign(actions, {
|
||||
connect: {
|
||||
group: "connect",
|
||||
className: "bpmn-icon-connection-multi",
|
||||
title: translate("Connect using DataInputAssociation"),
|
||||
action: {
|
||||
click: startConnect,
|
||||
dragstart: startConnect
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (is(businessObject, "bpmn:Group")) {
|
||||
assign(actions, {
|
||||
"append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation")
|
||||
})
|
||||
}
|
||||
|
||||
// delete element entry, only show if allowed by rules
|
||||
let deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
|
||||
|
||||
if (isArray(deleteAllowed)) {
|
||||
// was the element returned as a deletion candidate?
|
||||
deleteAllowed = deleteAllowed[0] === element
|
||||
}
|
||||
|
||||
if (deleteAllowed) {
|
||||
assign(actions, {
|
||||
delete: {
|
||||
group: "edit",
|
||||
className: "bpmn-icon-trash",
|
||||
title: translate("Remove"),
|
||||
action: {
|
||||
click: removeElement
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return actions
|
||||
}
|
||||
|
||||
// helpers /////////
|
||||
|
||||
function isEventType (eventBo, type, definition) {
|
||||
const isType = eventBo.$instanceOf(type)
|
||||
let isDefinition = false
|
||||
|
||||
const definitions = eventBo.eventDefinitions || []
|
||||
forEach(definitions, function (def) {
|
||||
if (def.$type === definition) {
|
||||
isDefinition = true
|
||||
}
|
||||
})
|
||||
|
||||
return isType && isDefinition
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
import CustomContextPadProvider from "./contentPadProvider";
|
||||
|
||||
export default {
|
||||
__init__: ["contextPadProvider"],
|
||||
contextPadProvider: ["type", CustomContextPadProvider]
|
||||
};
|
||||
@ -0,0 +1,24 @@
|
||||
export default (key, name, type) => {
|
||||
if (!type) type = "camunda";
|
||||
const TYPE_TARGET = {
|
||||
activiti: "http://activiti.org/bpmn",
|
||||
camunda: "http://bpmn.io/schema/bpmn",
|
||||
flowable: "http://flowable.org/bpmn"
|
||||
};
|
||||
return `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn2:definitions
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xmlns:bpmn2="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"
|
||||
id="diagram_${key}"
|
||||
targetNamespace="${TYPE_TARGET[type]}">
|
||||
<bpmn2:process id="${key}" name="${name}" isExecutable="true">
|
||||
</bpmn2:process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn2:definitions>`;
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,79 @@
|
||||
"use strict"
|
||||
|
||||
import { some } from 'min-dash'
|
||||
|
||||
// const some = require('min-dash').some
|
||||
// const some = some
|
||||
|
||||
const ALLOWED_TYPES = {
|
||||
FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
|
||||
Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
|
||||
Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
|
||||
}
|
||||
|
||||
function is (element, type) {
|
||||
return element && typeof element.$instanceOf === "function" && element.$instanceOf(type)
|
||||
}
|
||||
|
||||
function exists (element) {
|
||||
return element && element.length
|
||||
}
|
||||
|
||||
function includesType (collection, type) {
|
||||
return (
|
||||
exists(collection) &&
|
||||
some(collection, function (element) {
|
||||
return is(element, type)
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
function anyType (element, types) {
|
||||
return some(types, function (type) {
|
||||
return is(element, type)
|
||||
})
|
||||
}
|
||||
|
||||
function isAllowed (propName, propDescriptor, newElement) {
|
||||
const name = propDescriptor.name,
|
||||
types = ALLOWED_TYPES[name.replace(/activiti:/, '')]
|
||||
|
||||
return name === propName && anyType(newElement, types)
|
||||
}
|
||||
|
||||
function ActivitiModdleExtension (eventBus) {
|
||||
eventBus.on(
|
||||
"property.clone",
|
||||
function (context) {
|
||||
const newElement = context.newElement,
|
||||
propDescriptor = context.propertyDescriptor
|
||||
|
||||
this.canCloneProperty(newElement, propDescriptor)
|
||||
},
|
||||
this
|
||||
)
|
||||
}
|
||||
|
||||
ActivitiModdleExtension.$inject = ["eventBus"]
|
||||
|
||||
ActivitiModdleExtension.prototype.canCloneProperty = function (newElement, propDescriptor) {
|
||||
if (isAllowed("activiti:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
|
||||
return (
|
||||
includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
|
||||
includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
|
||||
is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
|
||||
)
|
||||
}
|
||||
|
||||
if (isAllowed("activiti:Connector", propDescriptor, newElement)) {
|
||||
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
|
||||
}
|
||||
|
||||
if (isAllowed("activiti:Field", propDescriptor, newElement)) {
|
||||
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
|
||||
}
|
||||
}
|
||||
|
||||
// module.exports = ActivitiModdleExtension;
|
||||
export default ActivitiModdleExtension
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
/*
|
||||
* @author igdianov
|
||||
* address https://github.com/igdianov/activiti-bpmn-moddle
|
||||
* */
|
||||
|
||||
import activitiExtension from "./activitiExtension"
|
||||
|
||||
export default {
|
||||
__init__: ["ActivitiModdleExtension"],
|
||||
ActivitiModdleExtension: ["type", activitiExtension]
|
||||
}
|
||||
@ -0,0 +1,157 @@
|
||||
"use strict"
|
||||
|
||||
|
||||
import {
|
||||
isFunction,
|
||||
isObject,
|
||||
some
|
||||
} from 'min-dash'
|
||||
|
||||
// const isFunction = isFunction,
|
||||
// isObject = isObject,
|
||||
// some = some
|
||||
// const isFunction = require('min-dash').isFunction,
|
||||
// isObject = require('min-dash').isObject,
|
||||
// some = require('min-dash').some
|
||||
|
||||
const WILDCARD = '*'
|
||||
|
||||
function CamundaModdleExtension (eventBus) {
|
||||
const self = this
|
||||
|
||||
eventBus.on("moddleCopy.canCopyProperty", function (context) {
|
||||
const property = context.property,
|
||||
parent = context.parent
|
||||
|
||||
return self.canCopyProperty(property, parent)
|
||||
})
|
||||
}
|
||||
|
||||
CamundaModdleExtension.$inject = ["eventBus"]
|
||||
|
||||
/**
|
||||
* Check wether to disallow copying property.
|
||||
*/
|
||||
CamundaModdleExtension.prototype.canCopyProperty = function (property, parent) {
|
||||
// (1) check wether property is allowed in parent
|
||||
if (isObject(property) && !isAllowedInParent(property, parent)) {
|
||||
return false
|
||||
}
|
||||
|
||||
// (2) check more complex scenarios
|
||||
|
||||
if (is(property, "camunda:InputOutput") && !this.canHostInputOutput(parent)) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (isAny(property, ["camunda:Connector", "camunda:Field"]) && !this.canHostConnector(parent)) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (is(property, "camunda:In") && !this.canHostIn(parent)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
CamundaModdleExtension.prototype.canHostInputOutput = function (parent) {
|
||||
// allowed in camunda:Connector
|
||||
const connector = getParent(parent, 'camunda:Connector')
|
||||
|
||||
if (connector) {
|
||||
return true
|
||||
}
|
||||
|
||||
// special rules inside bpmn:FlowNode
|
||||
const flowNode = getParent(parent, 'bpmn:FlowNode')
|
||||
|
||||
if (!flowNode) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (isAny(flowNode, ["bpmn:StartEvent", "bpmn:Gateway", "bpmn:BoundaryEvent"])) {
|
||||
return false
|
||||
}
|
||||
|
||||
return !(is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent"))
|
||||
|
||||
|
||||
}
|
||||
|
||||
CamundaModdleExtension.prototype.canHostConnector = function (parent) {
|
||||
const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike')
|
||||
|
||||
if (is(serviceTaskLike, "bpmn:MessageEventDefinition")) {
|
||||
// only allow on throw and end events
|
||||
return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent")
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
CamundaModdleExtension.prototype.canHostIn = function (parent) {
|
||||
const callActivity = getParent(parent, 'bpmn:CallActivity')
|
||||
|
||||
if (callActivity) {
|
||||
return true
|
||||
}
|
||||
|
||||
const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition')
|
||||
|
||||
if (signalEventDefinition) {
|
||||
// only allow on throw and end events
|
||||
return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent")
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
// module.exports = CamundaModdleExtension;
|
||||
export default CamundaModdleExtension
|
||||
|
||||
// helpers //////////
|
||||
|
||||
function is (element, type) {
|
||||
return element && isFunction(element.$instanceOf) && element.$instanceOf(type)
|
||||
}
|
||||
|
||||
function isAny (element, types) {
|
||||
return some(types, function (t) {
|
||||
return is(element, t)
|
||||
})
|
||||
}
|
||||
|
||||
function getParent (element, type) {
|
||||
if (!type) {
|
||||
return element.$parent
|
||||
}
|
||||
|
||||
if (is(element, type)) {
|
||||
return element
|
||||
}
|
||||
|
||||
if (!element.$parent) {
|
||||
return
|
||||
}
|
||||
|
||||
return getParent(element.$parent, type)
|
||||
}
|
||||
|
||||
function isAllowedInParent (property, parent) {
|
||||
// (1) find property descriptor
|
||||
const descriptor = property.$type && property.$model.getTypeDescriptor(property.$type)
|
||||
|
||||
const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn
|
||||
|
||||
if (!allowedIn || isWildcard(allowedIn)) {
|
||||
return true
|
||||
}
|
||||
|
||||
// (2) check wether property has parent of allowed type
|
||||
return some(allowedIn, function (type) {
|
||||
return getParent(parent, type)
|
||||
})
|
||||
}
|
||||
|
||||
function isWildcard (allowedIn) {
|
||||
return allowedIn.indexOf(WILDCARD) !== -1
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
"use strict"
|
||||
|
||||
import extension from "./extension"
|
||||
|
||||
export default {
|
||||
__init__: ["camundaModdleExtension"],
|
||||
camundaModdleExtension: ["type", extension]
|
||||
}
|
||||
@ -0,0 +1,80 @@
|
||||
"use strict"
|
||||
|
||||
import { some } from 'min-dash'
|
||||
|
||||
// const some = some
|
||||
// const some = require('min-dash').some
|
||||
|
||||
|
||||
|
||||
const ALLOWED_TYPES = {
|
||||
FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
|
||||
Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
|
||||
Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
|
||||
}
|
||||
|
||||
function is (element, type) {
|
||||
return element && typeof element.$instanceOf === "function" && element.$instanceOf(type)
|
||||
}
|
||||
|
||||
function exists (element) {
|
||||
return element && element.length
|
||||
}
|
||||
|
||||
function includesType (collection, type) {
|
||||
return (
|
||||
exists(collection) &&
|
||||
some(collection, function (element) {
|
||||
return is(element, type)
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
function anyType (element, types) {
|
||||
return some(types, function (type) {
|
||||
return is(element, type)
|
||||
})
|
||||
}
|
||||
|
||||
function isAllowed (propName, propDescriptor, newElement) {
|
||||
const name = propDescriptor.name,
|
||||
types = ALLOWED_TYPES[name.replace(/flowable:/, '')]
|
||||
|
||||
return name === propName && anyType(newElement, types)
|
||||
}
|
||||
|
||||
function FlowableModdleExtension (eventBus) {
|
||||
eventBus.on(
|
||||
"property.clone",
|
||||
function (context) {
|
||||
const newElement = context.newElement,
|
||||
propDescriptor = context.propertyDescriptor
|
||||
|
||||
this.canCloneProperty(newElement, propDescriptor)
|
||||
},
|
||||
this
|
||||
)
|
||||
}
|
||||
|
||||
FlowableModdleExtension.$inject = ["eventBus"]
|
||||
|
||||
FlowableModdleExtension.prototype.canCloneProperty = function (newElement, propDescriptor) {
|
||||
if (isAllowed("flowable:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
|
||||
return (
|
||||
includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
|
||||
includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
|
||||
is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
|
||||
)
|
||||
}
|
||||
|
||||
if (isAllowed("flowable:Connector", propDescriptor, newElement)) {
|
||||
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
|
||||
}
|
||||
|
||||
if (isAllowed("flowable:Field", propDescriptor, newElement)) {
|
||||
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
|
||||
}
|
||||
}
|
||||
|
||||
// module.exports = FlowableModdleExtension;
|
||||
export default FlowableModdleExtension
|
||||
@ -0,0 +1,10 @@
|
||||
/*
|
||||
* @author igdianov
|
||||
* address https://github.com/igdianov/activiti-bpmn-moddle
|
||||
* */
|
||||
import flowableExtension from "./flowableExtension"
|
||||
|
||||
export default {
|
||||
__init__: ["FlowableModdleExtension"],
|
||||
FlowableModdleExtension: ["type", flowableExtension]
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// import PaletteModule from "diagram-js/lib/features/palette";
|
||||
// import CreateModule from "diagram-js/lib/features/create";
|
||||
// import SpaceToolModule from "diagram-js/lib/features/space-tool";
|
||||
// import LassoToolModule from "diagram-js/lib/features/lasso-tool";
|
||||
// import HandToolModule from "diagram-js/lib/features/hand-tool";
|
||||
// import GlobalConnectModule from "diagram-js/lib/features/global-connect";
|
||||
// import translate from "diagram-js/lib/i18n/translate";
|
||||
//
|
||||
// import PaletteProvider from "./paletteProvider";
|
||||
//
|
||||
// export default {
|
||||
// __depends__: [PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate],
|
||||
// __init__: ["paletteProvider"],
|
||||
// paletteProvider: ["type", PaletteProvider]
|
||||
// };
|
||||
|
||||
import CustomPalette from "./CustomPalette";
|
||||
|
||||
export default {
|
||||
__init__: ["paletteProvider"],
|
||||
paletteProvider: ["type", CustomPalette]
|
||||
};
|
||||
@ -0,0 +1,160 @@
|
||||
import { assign } from "min-dash"
|
||||
|
||||
/**
|
||||
* A palette provider for BPMN 2.0 elements.
|
||||
*/
|
||||
export default function PaletteProvider (palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
|
||||
this._palette = palette
|
||||
this._create = create
|
||||
this._elementFactory = elementFactory
|
||||
this._spaceTool = spaceTool
|
||||
this._lassoTool = lassoTool
|
||||
this._handTool = handTool
|
||||
this._globalConnect = globalConnect
|
||||
this._translate = translate
|
||||
|
||||
palette.registerProvider(this)
|
||||
}
|
||||
|
||||
PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"]
|
||||
|
||||
PaletteProvider.prototype.getPaletteEntries = function () {
|
||||
const actions = {},
|
||||
create = this._create,
|
||||
elementFactory = this._elementFactory,
|
||||
spaceTool = this._spaceTool,
|
||||
lassoTool = this._lassoTool,
|
||||
handTool = this._handTool,
|
||||
globalConnect = this._globalConnect,
|
||||
translate = this._translate
|
||||
|
||||
function createAction (type, group, className, title, options) {
|
||||
function createListener (event) {
|
||||
const shape = elementFactory.createShape(assign({ type: type }, options))
|
||||
|
||||
if (options) {
|
||||
shape.businessObject.di.isExpanded = options.isExpanded
|
||||
}
|
||||
|
||||
create.start(event, shape)
|
||||
}
|
||||
|
||||
const shortType = type.replace(/^bpmn:/, '')
|
||||
|
||||
return {
|
||||
group: group,
|
||||
className: className,
|
||||
title: title || translate("Create {type}", { type: shortType }),
|
||||
action: {
|
||||
dragstart: createListener,
|
||||
click: createListener
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createSubprocess (event) {
|
||||
const subProcess = elementFactory.createShape({
|
||||
type: 'bpmn:SubProcess',
|
||||
x: 0,
|
||||
y: 0,
|
||||
isExpanded: true
|
||||
})
|
||||
|
||||
const startEvent = elementFactory.createShape({
|
||||
type: 'bpmn:StartEvent',
|
||||
x: 40,
|
||||
y: 82,
|
||||
parent: subProcess
|
||||
})
|
||||
|
||||
create.start(event, [subProcess, startEvent], {
|
||||
hints: {
|
||||
autoSelect: [startEvent]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function createParticipant (event) {
|
||||
create.start(event, elementFactory.createParticipantShape())
|
||||
}
|
||||
|
||||
assign(actions, {
|
||||
"hand-tool": {
|
||||
group: "tools",
|
||||
className: "bpmn-icon-hand-tool",
|
||||
title: translate("Activate the hand tool"),
|
||||
action: {
|
||||
click: function (event) {
|
||||
handTool.activateHand(event)
|
||||
}
|
||||
}
|
||||
},
|
||||
"lasso-tool": {
|
||||
group: "tools",
|
||||
className: "bpmn-icon-lasso-tool",
|
||||
title: translate("Activate the lasso tool"),
|
||||
action: {
|
||||
click: function (event) {
|
||||
lassoTool.activateSelection(event)
|
||||
}
|
||||
}
|
||||
},
|
||||
"space-tool": {
|
||||
group: "tools",
|
||||
className: "bpmn-icon-space-tool",
|
||||
title: translate("Activate the create/remove space tool"),
|
||||
action: {
|
||||
click: function (event) {
|
||||
spaceTool.activateSelection(event)
|
||||
}
|
||||
}
|
||||
},
|
||||
"global-connect-tool": {
|
||||
group: "tools",
|
||||
className: "bpmn-icon-connection-multi",
|
||||
title: translate("Activate the global connect tool"),
|
||||
action: {
|
||||
click: function (event) {
|
||||
globalConnect.toggle(event)
|
||||
}
|
||||
}
|
||||
},
|
||||
"tool-separator": {
|
||||
group: "tools",
|
||||
separator: true
|
||||
},
|
||||
"create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
|
||||
"create.intermediate-event": createAction(
|
||||
"bpmn:IntermediateThrowEvent",
|
||||
"event",
|
||||
"bpmn-icon-intermediate-event-none",
|
||||
translate("Create Intermediate/Boundary Event")
|
||||
),
|
||||
"create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
|
||||
"create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
|
||||
"create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
|
||||
"create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
|
||||
"create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
|
||||
"create.subprocess-expanded": {
|
||||
group: "activity",
|
||||
className: "bpmn-icon-subprocess-expanded",
|
||||
title: translate("Create expanded SubProcess"),
|
||||
action: {
|
||||
dragstart: createSubprocess,
|
||||
click: createSubprocess
|
||||
}
|
||||
},
|
||||
"create.participant-expanded": {
|
||||
group: "collaboration",
|
||||
className: "bpmn-icon-participant",
|
||||
title: translate("Create Pool/Participant"),
|
||||
action: {
|
||||
dragstart: createParticipant,
|
||||
click: createParticipant
|
||||
}
|
||||
},
|
||||
"create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
|
||||
})
|
||||
|
||||
return actions
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
// import translations from "./zh";
|
||||
//
|
||||
// export default function customTranslate(template, replacements) {
|
||||
// replacements = replacements || {};
|
||||
//
|
||||
// // Translate
|
||||
// template = translations[template] || template;
|
||||
//
|
||||
// // Replace
|
||||
// return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||
// let str = replacements[key];
|
||||
// if (
|
||||
// translations[replacements[key]] !== null &&
|
||||
// translations[replacements[key]] !== "undefined"
|
||||
// ) {
|
||||
// // eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||
// str = translations[replacements[key]];
|
||||
// // eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||
// }
|
||||
// return str || "{" + key + "}";
|
||||
// });
|
||||
// }
|
||||
|
||||
export default function customTranslate(translations) {
|
||||
return function(template, replacements) {
|
||||
replacements = replacements || {};
|
||||
// Translate
|
||||
template = translations[template] || template;
|
||||
|
||||
// Replace
|
||||
return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||
let str = replacements[key];
|
||||
if (translations[replacements[key]] !== null && translations[replacements[key]] !== undefined) {
|
||||
// eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||
str = translations[replacements[key]];
|
||||
// eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||
}
|
||||
return str || "{" + key + "}";
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import { App } from 'vue'
|
||||
import MyProcessDesigner from './designer'
|
||||
import MyProcessPenal from './penal'
|
||||
import MyProcessViewer from './designer/index2'
|
||||
|
||||
const components = [MyProcessDesigner, MyProcessPenal, MyProcessViewer]
|
||||
|
||||
// const install = function (Vue) {
|
||||
// components.forEach(component => {
|
||||
// Vue.component(component.name, component)
|
||||
// })
|
||||
// }
|
||||
|
||||
// if (typeof window !== "undefined" && window.Vue) {
|
||||
// install(window.Vue)
|
||||
// }
|
||||
// components.forEach(component => {
|
||||
// Vue.component(component.name, component)
|
||||
// })
|
||||
const componentss = {
|
||||
install: (Vue: App): void => {
|
||||
components.forEach((component) => {
|
||||
Vue.component(component.name, component)
|
||||
})
|
||||
}
|
||||
}
|
||||
// let version = "0.0.1"
|
||||
export const MyPD = (app) => {
|
||||
// export default {
|
||||
// app.use(version)
|
||||
// app.use(install)
|
||||
// app.use(MyProcessDesigner)
|
||||
// app.use(MyProcessPenal)
|
||||
// app.use(MyProcessViewer)
|
||||
// app.use(components)
|
||||
app.use(componentss)
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="my-process-palette">
|
||||
<div class="test-button" @click="addTask" @mousedown="addTask">测试任务</div>
|
||||
<div class="test-container" id="palette-container">1</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="MyProcessPalette">
|
||||
import { assign } from 'min-dash'
|
||||
|
||||
const addTask = (event, options = {}) => {
|
||||
const ElementFactory = window.bpmnInstances.elementFactory
|
||||
const create = window.bpmnInstances.modeler.get('create')
|
||||
|
||||
console.log(ElementFactory, create)
|
||||
|
||||
const shape = ElementFactory.createShape(assign({ type: 'bpmn:UserTask' }, options))
|
||||
|
||||
if (options) {
|
||||
shape.businessObject.di.isExpanded = options.isExpanded
|
||||
}
|
||||
|
||||
console.log(event, 'event')
|
||||
console.log(shape, 'shape')
|
||||
create.start(event, shape)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-process-palette {
|
||||
box-sizing: border-box;
|
||||
padding: 80px 20px 20px 20px;
|
||||
.test-button {
|
||||
box-sizing: border-box;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(24, 144, 255, 0.8);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
import MyPropertiesPanel from "./PropertiesPanel.vue";
|
||||
|
||||
MyPropertiesPanel.install = function(Vue) {
|
||||
Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
|
||||
};
|
||||
|
||||
export default MyPropertiesPanel;
|
||||
@ -0,0 +1,62 @@
|
||||
// 初始化表单数据
|
||||
export function initListenerForm(listener) {
|
||||
let self = {
|
||||
...listener
|
||||
}
|
||||
if (listener.script) {
|
||||
self = {
|
||||
...listener,
|
||||
...listener.script,
|
||||
scriptType: listener.script.resource ? 'externalScript' : 'inlineScript'
|
||||
}
|
||||
}
|
||||
if (listener.event === 'timeout' && listener.eventDefinitions) {
|
||||
if (listener.eventDefinitions.length) {
|
||||
let k = ''
|
||||
for (const key in listener.eventDefinitions[0]) {
|
||||
console.log(listener.eventDefinitions, key)
|
||||
if (key.indexOf('time') !== -1) {
|
||||
k = key
|
||||
self.eventDefinitionType = key.replace('time', '').toLowerCase()
|
||||
}
|
||||
}
|
||||
console.log(k)
|
||||
self.eventTimeDefinitions = listener.eventDefinitions[0][k].body
|
||||
}
|
||||
}
|
||||
return self
|
||||
}
|
||||
|
||||
export function initListenerType(listener) {
|
||||
let listenerType
|
||||
if (listener.class) listenerType = 'classListener'
|
||||
if (listener.expression) listenerType = 'expressionListener'
|
||||
if (listener.delegateExpression) listenerType = 'delegateExpressionListener'
|
||||
if (listener.script) listenerType = 'scriptListener'
|
||||
return {
|
||||
...JSON.parse(JSON.stringify(listener)),
|
||||
...(listener.script ?? {}),
|
||||
listenerType: listenerType
|
||||
}
|
||||
}
|
||||
|
||||
export const listenerType = {
|
||||
classListener: 'Java 类',
|
||||
expressionListener: '表达式',
|
||||
delegateExpressionListener: '代理表达式',
|
||||
scriptListener: '脚本'
|
||||
}
|
||||
|
||||
export const eventType = {
|
||||
create: '创建',
|
||||
assignment: '指派',
|
||||
complete: '完成',
|
||||
delete: '删除',
|
||||
update: '更新',
|
||||
timeout: '超时'
|
||||
}
|
||||
|
||||
export const fieldType = {
|
||||
string: '字符串',
|
||||
expression: '表达式'
|
||||
}
|
||||
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementPropertyList" max-height="240" border fit>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
|
||||
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="110px">
|
||||
<template #default="scope">
|
||||
<el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button
|
||||
link
|
||||
size="small"
|
||||
style="color: #ff4d4f"
|
||||
@click="removeAttributes(scope.row, scope.$index)"
|
||||
>移除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
title="添加属性"
|
||||
@click="openAttributesForm(null, -1)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="propertyFormModelVisible"
|
||||
title="属性配置"
|
||||
width="600px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model="propertyForm" label-width="80px" ref="attributeFormRef">
|
||||
<el-form-item label="属性名：" prop="name">
|
||||
<el-input v-model="propertyForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="属性值：" prop="value">
|
||||
<el-input v-model="propertyForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="propertyFormModelVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveAttribute">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ElementProperties">
|
||||
import { ref, inject, nextTick, watch, toRaw } from 'vue'
|
||||
import {
|
||||
ElMessageBox,
|
||||
ElDialog,
|
||||
ElButton,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElDivider,
|
||||
ElInput
|
||||
} from 'element-plus'
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
// const width = inject('width')
|
||||
|
||||
const elementPropertyList = ref([])
|
||||
const propertyForm = ref({})
|
||||
const editingPropertyIndex = ref(-1)
|
||||
const propertyFormModelVisible = ref(false)
|
||||
const bpmnElement = ref()
|
||||
const otherExtensionList = ref()
|
||||
const bpmnElementProperties = ref()
|
||||
const bpmnElementPropertyList = ref()
|
||||
const attributeFormRef = ref()
|
||||
|
||||
const resetAttributesList = () => {
|
||||
console.log(window, 'windowwindowwindowwindowwindowwindowwindow')
|
||||
bpmnElement.value = window.bpmnInstances.bpmnElement
|
||||
otherExtensionList.value = [] // 其他扩展配置
|
||||
bpmnElementProperties.value =
|
||||
// bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
|
||||
bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
|
||||
if (ex.$type !== `${prefix}:Properties`) {
|
||||
otherExtensionList.value.push(ex)
|
||||
}
|
||||
return ex.$type === `${prefix}:Properties`
|
||||
}) ?? []
|
||||
|
||||
// 保存所有的 扩展属性字段
|
||||
bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(
|
||||
(pre, current) => pre.concat(current.values),
|
||||
[]
|
||||
)
|
||||
// 复制 显示
|
||||
elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
|
||||
}
|
||||
const openAttributesForm = (attr, index) => {
|
||||
editingPropertyIndex.value = index
|
||||
propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
|
||||
propertyFormModelVisible.value = true
|
||||
nextTick(() => {
|
||||
if (attributeFormRef.value) attributeFormRef.value.clearValidate()
|
||||
})
|
||||
}
|
||||
const removeAttributes = (attr, index) => {
|
||||
console.log(attr, 'attr')
|
||||
ElMessageBox.confirm('确认移除该属性吗？', '提示', {
|
||||
confirmButtonText: '确 认',
|
||||
cancelButtonText: '取 消'
|
||||
})
|
||||
.then(() => {
|
||||
elementPropertyList.value.splice(index, 1)
|
||||
bpmnElementPropertyList.value.splice(index, 1)
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${prefix}:Properties`, {
|
||||
values: bpmnElementPropertyList.value
|
||||
})
|
||||
updateElementExtensions(propertiesObject)
|
||||
resetAttributesList()
|
||||
})
|
||||
.catch(() => console.info('操作取消'))
|
||||
}
|
||||
const saveAttribute = () => {
|
||||
console.log(propertyForm.value, 'propertyForm.value')
|
||||
const { name, value } = propertyForm.value
|
||||
if (editingPropertyIndex.value !== -1) {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
|
||||
{
|
||||
name,
|
||||
value
|
||||
}
|
||||
)
|
||||
} else {
|
||||
// 新建属性字段
|
||||
const newPropertyObject = window.bpmnInstances.moddle.create(`${prefix}:Property`, {
|
||||
name,
|
||||
value
|
||||
})
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${prefix}:Properties`, {
|
||||
values: bpmnElementPropertyList.value.concat([newPropertyObject])
|
||||
})
|
||||
updateElementExtensions(propertiesObject)
|
||||
}
|
||||
propertyFormModelVisible.value = false
|
||||
resetAttributesList()
|
||||
}
|
||||
const updateElementExtensions = (properties) => {
|
||||
const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
|
||||
values: otherExtensionList.value.concat([properties])
|
||||
})
|
||||
window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
extensionElements: extensions
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
if (val) {
|
||||
val && val.length && resetAttributesList()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="脚本格式">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.scriptFormat"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型">
|
||||
<el-select v-model="scriptTaskForm.scriptType">
|
||||
<el-option label="内联脚本" value="inline" />
|
||||
<el-option label="外部资源" value="external" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.script"
|
||||
type="textarea"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resource"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果变量">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resultVariable"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ScriptTask">
|
||||
import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
|
||||
import { ElInput, ElFormItem } from 'element-plus'
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const defaultTaskForm = ref({
|
||||
scriptFormat: '',
|
||||
script: '',
|
||||
resource: '',
|
||||
resultVariable: ''
|
||||
})
|
||||
const scriptTaskForm = ref({})
|
||||
const bpmnElement = ref()
|
||||
|
||||
const resetTaskForm = () => {
|
||||
for (let key in defaultTaskForm.value) {
|
||||
let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
|
||||
scriptTaskForm.value[key] = value
|
||||
}
|
||||
scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
|
||||
}
|
||||
const updateElementTask = () => {
|
||||
let taskAttr = Object.create(null)
|
||||
taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
|
||||
taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
|
||||
if (scriptTaskForm.value.scriptType === 'inline') {
|
||||
taskAttr.script = scriptTaskForm.value.script || null
|
||||
taskAttr.resource = null
|
||||
} else {
|
||||
taskAttr.resource = scriptTaskForm.value.resource || null
|
||||
taskAttr.script = null
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = window.bpmnInstances.bpmnElement
|
||||
nextTick(() => {
|
||||
resetTaskForm()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
@ -0,0 +1,70 @@
|
||||
/* 改变主题色变量 */
|
||||
$--color-primary: #1890ff;
|
||||
$--color-danger: #ff4d4f;
|
||||
|
||||
/* 改变 icon 字体路径变量，必需 */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
|
||||
.el-table td,
|
||||
.el-table th {
|
||||
color: #333;
|
||||
}
|
||||
.el-drawer__header {
|
||||
padding: 16px 16px 8px 16px;
|
||||
margin: 0;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
div[class^="el-drawer"]:focus,
|
||||
span:focus {
|
||||
outline: none;
|
||||
}
|
||||
.el-drawer__body {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
margin-top: 50vh !important;
|
||||
transform: translateY(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-dialog__wrapper {
|
||||
overflow: hidden;
|
||||
max-height: 100vh;
|
||||
}
|
||||
.el-dialog__header {
|
||||
padding: 16px 16px 8px 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 16px;
|
||||
max-height: 80vh;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
.el-dialog__close {
|
||||
font-weight: 600;
|
||||
}
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-divider:not(.el-divider--horizontal) {
|
||||
margin: 0 8px ;
|
||||
}
|
||||
.el-divider.el-divider--horizontal {
|
||||
margin: 16px 0;
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
@import "./process-designer.scss";
|
||||
@import "./process-panel.scss";
|
||||
@ -0,0 +1,161 @@
|
||||
@import 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
|
||||
@import 'bpmn-js-token-simulation/assets/css/font-awesome.min.css';
|
||||
@import 'bpmn-js-token-simulation/assets/css/normalize.css';
|
||||
|
||||
// 边框被 token-simulation 样式覆盖了
|
||||
.djs-palette {
|
||||
background: var(--palette-background-color);
|
||||
border: solid 1px var(--palette-border-color) !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.my-process-designer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
.my-process-designer__header {
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
.el-button {
|
||||
text-align: center;
|
||||
}
|
||||
.el-button-group {
|
||||
margin: 4px;
|
||||
}
|
||||
.el-tooltip__popper {
|
||||
.el-button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.el-button:hover {
|
||||
background: rgba(64, 158, 255, 0.8);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.align {
|
||||
position: relative;
|
||||
i {
|
||||
&:after {
|
||||
content: '|';
|
||||
position: absolute;
|
||||
// transform: rotate(90deg) translate(200%, 60%);
|
||||
transform: rotate(180deg) translate(271%, -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.align.align-left i {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.align.align-right i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.align.align-top i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.align.align-bottom i {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.align.align-center i {
|
||||
transform: rotate(0deg);
|
||||
&:after {
|
||||
// transform: rotate(90deg) translate(0, 60%);
|
||||
transform: rotate(0deg) translate(-0%, -5%);
|
||||
}
|
||||
}
|
||||
.align.align-middle i {
|
||||
transform: rotate(-90deg);
|
||||
&:after {
|
||||
// transform: rotate(90deg) translate(0, 60%);
|
||||
transform: rotate(0deg) translate(0, -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.my-process-designer__container {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.my-process-designer__canvas {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
|
||||
repeat !important;
|
||||
div.toggle-mode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.my-process-designer__property-panel {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//侧边栏配置
|
||||
// .djs-palette .two-column .open {
|
||||
.open {
|
||||
// .djs-palette.open {
|
||||
.djs-palette-entries {
|
||||
div[class^='bpmn-icon-']:before,
|
||||
div[class*='bpmn-icon-']:before {
|
||||
line-height: unset;
|
||||
}
|
||||
div.entry {
|
||||
position: relative;
|
||||
}
|
||||
div.entry:hover {
|
||||
&::after {
|
||||
width: max-content;
|
||||
content: attr(title);
|
||||
vertical-align: text-bottom;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
transform: translateX(100%);
|
||||
font-size: 0.5em;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
background: #fafafa;
|
||||
box-shadow: 0 0 6px #eeeeee;
|
||||
border: 1px solid #cccccc;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
max-height: calc(80vh - 32px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.hljs {
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.hljs * {
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
.process-panel__container {
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
border-left: 1px solid #eeeeee;
|
||||
box-shadow: 0 0 8px #cccccc;
|
||||
max-height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.panel-tab__title {
|
||||
font-weight: 600;
|
||||
padding: 0 8px;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2em;
|
||||
i {
|
||||
margin-right: 8px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.panel-tab__content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #eeeeee;
|
||||
padding: 8px 16px;
|
||||
.panel-tab__content--title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-property {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 8px 0;
|
||||
.element-property__label {
|
||||
display: block;
|
||||
width: 90px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
padding-right: 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.element-property__value {
|
||||
flex: 1;
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
}
|
||||
.list-property {
|
||||
flex-direction: column;
|
||||
.element-listener-item {
|
||||
width: 100%;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 16px auto 32px 32px;
|
||||
grid-column-gap: 8px;
|
||||
}
|
||||
.element-listener-item + .element-listener-item {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.listener-filed__title {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
span {
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.element-drawer__button {
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.element-drawer__button > .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.el-input.is-disabled .el-input__inner {
|
||||
color: #999999;
|
||||
}
|
||||
.el-form-item.el-form-item--mini {
|
||||
margin-bottom: 0;
|
||||
& + .el-form-item {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
import { toRaw } from 'vue'
|
||||
// 创建监听器实例
|
||||
export function createListenerObject(options, isTask, prefix) {
|
||||
const listenerObj = Object.create(null)
|
||||
listenerObj.event = options.event
|
||||
isTask && (listenerObj.id = options.id) // 任务监听器特有的 id 字段
|
||||
switch (options.listenerType) {
|
||||
case 'scriptListener':
|
||||
listenerObj.script = createScriptObject(options, prefix)
|
||||
break
|
||||
case 'expressionListener':
|
||||
listenerObj.expression = options.expression
|
||||
break
|
||||
case 'delegateExpressionListener':
|
||||
listenerObj.delegateExpression = options.delegateExpression
|
||||
break
|
||||
default:
|
||||
listenerObj.class = options.class
|
||||
}
|
||||
// 注入字段
|
||||
if (options.fields) {
|
||||
listenerObj.fields = options.fields.map((field) => {
|
||||
return createFieldObject(field, prefix)
|
||||
})
|
||||
}
|
||||
// 任务监听器的 定时器 设置
|
||||
if (isTask && options.event === 'timeout' && !!options.eventDefinitionType) {
|
||||
const timeDefinition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
|
||||
body: options.eventTimeDefinitions
|
||||
})
|
||||
const TimerEventDefinition = window.bpmnInstances.moddle.create('bpmn:TimerEventDefinition', {
|
||||
id: `TimerEventDefinition_${uuid(8)}`,
|
||||
[`time${options.eventDefinitionType.replace(/^\S/, (s) => s.toUpperCase())}`]: timeDefinition
|
||||
})
|
||||
listenerObj.eventDefinitions = [TimerEventDefinition]
|
||||
}
|
||||
return window.bpmnInstances.moddle.create(
|
||||
`${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`,
|
||||
listenerObj
|
||||
)
|
||||
}
|
||||
|
||||
// 创建 监听器的注入字段 实例
|
||||
export function createFieldObject(option, prefix) {
|
||||
const { name, fieldType, string, expression } = option
|
||||
const fieldConfig = fieldType === 'string' ? { name, string } : { name, expression }
|
||||
return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig)
|
||||
}
|
||||
|
||||
// 创建脚本实例
|
||||
export function createScriptObject(options, prefix) {
|
||||
const { scriptType, scriptFormat, value, resource } = options
|
||||
const scriptConfig =
|
||||
scriptType === 'inlineScript' ? { scriptFormat, value } : { scriptFormat, resource }
|
||||
return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig)
|
||||
}
|
||||
|
||||
// 更新元素扩展属性
|
||||
export function updateElementExtensions(element, extensionList) {
|
||||
const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
|
||||
values: extensionList
|
||||
})
|
||||
window.bpmnInstances.modeling.updateProperties(toRaw(element), {
|
||||
extensionElements: extensions
|
||||
})
|
||||
}
|
||||
|
||||
// 创建一个id
|
||||
export function uuid(length = 8, chars) {
|
||||
let result = ''
|
||||
const charsString = chars || '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
|
||||
for (let i = length; i > 0; --i) {
|
||||
result += charsString[Math.floor(Math.random() * charsString.length)]
|
||||
}
|
||||
return result
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
const hljs = require("highlight.js/lib/core");
|
||||
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
|
||||
|
||||
module.exports = hljs;
|
||||
@ -0,0 +1,6 @@
|
||||
import CustomRenderer from "./CustomRenderer";
|
||||
|
||||
export default {
|
||||
__init__: ["customRenderer"],
|
||||
customRenderer: ["type", CustomRenderer]
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
import BpmnRules from "bpmn-js/lib/features/rules/BpmnRules";
|
||||
import inherits from "inherits";
|
||||
|
||||
export default function CustomRules(eventBus) {
|
||||
BpmnRules.call(this, eventBus);
|
||||
}
|
||||
|
||||
inherits(CustomRules, BpmnRules);
|
||||
|
||||
CustomRules.prototype.canDrop = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
CustomRules.prototype.canMove = function() {
|
||||
return false;
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
import CustomRules from "./CustomRules";
|
||||
|
||||
export default {
|
||||
__init__: ["customRules"],
|
||||
customRules: ["type", CustomRules]
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* This is a sample file that should be replaced with the actual translation.
|
||||
*
|
||||
* Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
|
||||
* translations and labels to translate.
|
||||
*/
|
||||
export default {
|
||||
'Exclusive Gateway': 'Exklusives Gateway',
|
||||
'Parallel Gateway': 'Paralleles Gateway',
|
||||
'Inclusive Gateway': 'Inklusives Gateway',
|
||||
'Complex Gateway': 'Komplexes Gateway',
|
||||
'Event based Gateway': 'Ereignis-basiertes Gateway',
|
||||
'Message Start Event': '消息启动事件',
|
||||
'Timer Start Event': '定时启动事件',
|
||||
'Conditional Start Event': '条件启动事件',
|
||||
'Signal Start Event': '信号启动事件',
|
||||
'Error Start Event': '错误启动事件',
|
||||
'Escalation Start Event': '升级启动事件',
|
||||
'Compensation Start Event': '补偿启动事件',
|
||||
'Message Start Event (non-interrupting)': '消息启动事件 (非中断)',
|
||||
'Timer Start Event (non-interrupting)': '定时启动事件 (非中断)',
|
||||
'Conditional Start Event (non-interrupting)': '条件启动事件 (非中断)',
|
||||
'Signal Start Event (non-interrupting)': '信号启动事件 (非中断)',
|
||||
'Escalation Start Event (non-interrupting)': '升级启动事件 (非中断)'
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
//outside.js
|
||||
|
||||
const ctx = "@@clickoutsideContext";
|
||||
|
||||
export default {
|
||||
bind(el, binding, vnode) {
|
||||
const ele = el;
|
||||
const documentHandler = e => {
|
||||
if (!vnode.context || ele.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
// 调用指令回调
|
||||
if (binding.expression) {
|
||||
vnode.context[el[ctx].methodName](e);
|
||||
} else {
|
||||
el[ctx].bindingFn(e);
|
||||
}
|
||||
};
|
||||
// 将方法添加到ele
|
||||
ele[ctx] = {
|
||||
documentHandler,
|
||||
methodName: binding.expression,
|
||||
bindingFn: binding.value
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
document.addEventListener("touchstart", documentHandler); // 为document绑定事件
|
||||
});
|
||||
},
|
||||
update(el, binding) {
|
||||
const ele = el;
|
||||
ele[ctx].methodName = binding.expression;
|
||||
ele[ctx].bindingFn = binding.value;
|
||||
},
|
||||
unbind(el) {
|
||||
document.removeEventListener("touchstart", el[ctx].documentHandler); // 解绑
|
||||
delete el[ctx];
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
export function debounce(fn, delay = 500) {
|
||||
let timer;
|
||||
return function(...args) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
timer = setTimeout(fn.bind(this, ...args), delay);
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
class Log {
|
||||
static type = ["primary", "success", "warn", "error", "info"];
|
||||
|
||||
static typeColor(type = "default") {
|
||||
let color = "";
|
||||
switch (type) {
|
||||
case "primary":
|
||||
color = "#2d8cf0";
|
||||
break;
|
||||
case "success":
|
||||
color = "#19be6b";
|
||||
break;
|
||||
case "info":
|
||||
color = "#909399";
|
||||
break;
|
||||
case "warn":
|
||||
color = "#ff9900";
|
||||
break;
|
||||
case "error":
|
||||
color = "#f03f14";
|
||||
break;
|
||||
case "default":
|
||||
color = "#35495E";
|
||||
break;
|
||||
default:
|
||||
color = type;
|
||||
break;
|
||||
}
|
||||
return color;
|
||||
}
|
||||
|
||||
static print(text, type = "default", back = false) {
|
||||
if (typeof text === "object") {
|
||||
// 如果是對象則調用打印對象方式
|
||||
console.dir(text);
|
||||
return;
|
||||
}
|
||||
if (back) {
|
||||
// 如果是打印帶背景圖的
|
||||
console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px;color: #fff;`);
|
||||
} else {
|
||||
console.log(`%c ${text} `, `color: ${this.typeColor(type)};`);
|
||||
}
|
||||
}
|
||||
|
||||
static pretty(title, text, type = "primary") {
|
||||
if (typeof text === "object") {
|
||||
console.log(
|
||||
`%c ${title} %c`,
|
||||
`background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`
|
||||
);
|
||||
console.dir(text);
|
||||
return;
|
||||
}
|
||||
console.log(
|
||||
`%c ${title} %c ${text} %c`,
|
||||
`background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
|
||||
`border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
|
||||
"background:transparent"
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Log;
|
||||
@ -0,0 +1,50 @@
|
||||
function xmlStr2XmlObj(xmlStr) {
|
||||
let xmlObj = {};
|
||||
if (document.all) {
|
||||
const xmlDom = new window.ActiveXObject("Microsoft.XMLDOM");
|
||||
xmlDom.loadXML(xmlStr);
|
||||
xmlObj = xmlDom;
|
||||
} else {
|
||||
xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
|
||||
}
|
||||
return xmlObj;
|
||||
}
|
||||
|
||||
function xml2json(xml) {
|
||||
try {
|
||||
let obj = {};
|
||||
if (xml.children.length > 0) {
|
||||
for (let i = 0; i < xml.children.length; i++) {
|
||||
const item = xml.children.item(i);
|
||||
const nodeName = item.nodeName;
|
||||
if (typeof obj[nodeName] == "undefined") {
|
||||
obj[nodeName] = xml2json(item);
|
||||
} else {
|
||||
if (typeof obj[nodeName].push == "undefined") {
|
||||
const old = obj[nodeName];
|
||||
obj[nodeName] = [];
|
||||
obj[nodeName].push(old);
|
||||
}
|
||||
obj[nodeName].push(xml2json(item));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
obj = xml.textContent;
|
||||
}
|
||||
return obj;
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function xmlObj2json(xml) {
|
||||
const xmlObj = xmlStr2XmlObj(xml);
|
||||
console.log(xmlObj);
|
||||
let jsonObj = {};
|
||||
if (xmlObj.childNodes.length > 0) {
|
||||
jsonObj = xml2json(xmlObj);
|
||||
}
|
||||
return jsonObj;
|
||||
}
|
||||
|
||||
export default xmlObj2json;
|
||||
@ -0,0 +1,43 @@
|
||||
import type { App } from 'vue'
|
||||
// 👇使用 form-create 需额外全局引入 element plus 组件
|
||||
import {
|
||||
ElAside,
|
||||
ElPopconfirm,
|
||||
ElHeader,
|
||||
ElMain,
|
||||
ElContainer,
|
||||
ElDivider,
|
||||
ElTransfer,
|
||||
ElAlert,
|
||||
ElTabs,
|
||||
ElTabPane
|
||||
} from 'element-plus'
|
||||
|
||||
import formCreate from '@form-create/element-ui'
|
||||
import install from '@form-create/element-ui/auto-import'
|
||||
import FcDesigner from '@form-create/designer'
|
||||
|
||||
const components = [
|
||||
ElAside,
|
||||
ElPopconfirm,
|
||||
ElHeader,
|
||||
ElMain,
|
||||
ElContainer,
|
||||
ElDivider,
|
||||
ElTransfer,
|
||||
ElAlert,
|
||||
ElTabs,
|
||||
ElTabPane
|
||||
]
|
||||
|
||||
export const setupFormCreate = (app: App<Element>) => {
|
||||
components.forEach((component) => {
|
||||
app.component(component.name, component)
|
||||
})
|
||||
|
||||
formCreate.use(install)
|
||||
|
||||
app.use(formCreate)
|
||||
|
||||
app.use(FcDesigner)
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
/**
|
||||
* 针对 https://github.com/xaboy/form-create-designer 封装的工具类
|
||||
*/
|
||||
|
||||
// 编码表单 Conf
|
||||
export const encodeConf = (designerRef: object) => {
|
||||
// @ts-ignore
|
||||
return JSON.stringify(designerRef.value.getOption())
|
||||
}
|
||||
|
||||
// 编码表单 Fields
|
||||
export const encodeFields = (designerRef: object) => {
|
||||
// @ts-ignore
|
||||
const rule = designerRef.value.getRule()
|
||||
const fields: string[] = []
|
||||
rule.forEach((item) => {
|
||||
fields.push(JSON.stringify(item))
|
||||
})
|
||||
return fields
|
||||
}
|
||||
|
||||
// 解码表单 Fields
|
||||
export const decodeFields = (fields: string[]) => {
|
||||
const rule: object[] = []
|
||||
fields.forEach((item) => {
|
||||
rule.push(JSON.parse(item))
|
||||
})
|
||||
return rule
|
||||
}
|
||||
|
||||
// 设置表单的 Conf 和 Fields
|
||||
export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
|
||||
// @ts-ignore
|
||||
designerRef.value.setOption(JSON.parse(conf))
|
||||
// @ts-ignore
|
||||
designerRef.value.setRule(decodeFields(fields))
|
||||
}
|
||||
|
||||
// 设置表单的 Conf 和 Fields
|
||||
export const setConfAndFields2 = (
|
||||
detailPreview: object,
|
||||
conf: string,
|
||||
fields: string,
|
||||
value?: object
|
||||
) => {
|
||||
// @ts-ignore
|
||||
detailPreview.value.option = JSON.parse(conf)
|
||||
// @ts-ignore
|
||||
detailPreview.value.rule = decodeFields(fields)
|
||||
if (value) {
|
||||
// @ts-ignore
|
||||
detailPreview.value.value = value
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
import { reactive } from 'vue'
|
||||
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
|
||||
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
|
||||
// CrudSchema
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: null,
|
||||
action: true,
|
||||
columns: [
|
||||
{
|
||||
title: '定义编号',
|
||||
field: 'id',
|
||||
table: {
|
||||
width: 360
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '定义名称',
|
||||
field: 'name',
|
||||
table: {
|
||||
width: 120,
|
||||
slots: {
|
||||
default: 'name_default'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '流程分类',
|
||||
field: 'category',
|
||||
dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
|
||||
dictClass: 'number'
|
||||
},
|
||||
{
|
||||
title: '表单信息',
|
||||
field: 'formId',
|
||||
table: {
|
||||
width: 120,
|
||||
slots: {
|
||||
default: 'formId_default'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '流程版本',
|
||||
field: 'version',
|
||||
table: {
|
||||
width: 80,
|
||||
slots: {
|
||||
default: 'version_default'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '激活状态',
|
||||
field: 'suspensionState',
|
||||
table: {
|
||||
width: 80,
|
||||
slots: {
|
||||
default: 'suspensionState_default'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '部署时间',
|
||||
field: 'deploymentTime',
|
||||
isForm: false,
|
||||
formatter: 'formatDate',
|
||||
table: {
|
||||
width: 180
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
@ -1,69 +1,63 @@
|
||||
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
|
||||
import { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
// 表单校验
|
||||
export const rules = reactive({
|
||||
name: [required]
|
||||
name: [required],
|
||||
description: [required],
|
||||
memberUserIds: [required],
|
||||
status: [required]
|
||||
})
|
||||
|
||||
// CrudSchema
|
||||
const crudSchemas = reactive<CrudSchema[]>([
|
||||
{
|
||||
label: t('common.index'),
|
||||
field: 'id',
|
||||
type: 'index',
|
||||
form: {
|
||||
show: false
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: 'id',
|
||||
primaryTitle: '编号',
|
||||
action: true,
|
||||
columns: [
|
||||
{
|
||||
title: '组名',
|
||||
field: 'name',
|
||||
isSearch: true
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '组名',
|
||||
field: 'name',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '成员',
|
||||
field: 'memberUserIds'
|
||||
},
|
||||
{
|
||||
label: '描述',
|
||||
field: 'description'
|
||||
},
|
||||
{
|
||||
label: t('common.status'),
|
||||
field: 'status',
|
||||
dictType: DICT_TYPE.COMMON_STATUS,
|
||||
dictClass: 'number'
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
field: 'remark',
|
||||
table: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('table.action'),
|
||||
field: 'action',
|
||||
width: '240px',
|
||||
form: {
|
||||
show: false
|
||||
{
|
||||
title: '成员',
|
||||
field: 'memberUserIds',
|
||||
table: {
|
||||
slots: {
|
||||
default: 'memberUserIds_default'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
field: 'description'
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
{
|
||||
title: t('common.status'),
|
||||
field: 'status',
|
||||
dictType: DICT_TYPE.COMMON_STATUS,
|
||||
dictClass: 'number',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
formatter: 'formatDate',
|
||||
isForm: false,
|
||||
isSearch: true,
|
||||
search: {
|
||||
show: true,
|
||||
itemRender: {
|
||||
name: 'XDataTimePicker'
|
||||
}
|
||||
},
|
||||
table: {
|
||||
width: 180
|
||||
}
|
||||
}
|
||||
}
|
||||
])
|
||||
export const { allSchemas } = useCrudSchemas(crudSchemas)
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
|
||||
@ -1,78 +1,105 @@
|
||||
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
|
||||
import { reactive } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { required } from '@/utils/formRules'
|
||||
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
|
||||
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
// 表单校验
|
||||
export const rules = reactive({
|
||||
name: [required]
|
||||
key: [required],
|
||||
name: [required],
|
||||
category: [required],
|
||||
formType: [required],
|
||||
formId: [required],
|
||||
formCustomCreatePath: [required],
|
||||
formCustomViewPath: [required]
|
||||
})
|
||||
|
||||
// CrudSchema
|
||||
const crudSchemas = reactive<CrudSchema[]>([
|
||||
{
|
||||
label: t('common.index'),
|
||||
field: 'id',
|
||||
type: 'index',
|
||||
form: {
|
||||
show: false
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'key',
|
||||
primaryType: null,
|
||||
action: true,
|
||||
actionWidth: '540px',
|
||||
columns: [
|
||||
{
|
||||
title: '流程标识',
|
||||
field: 'key',
|
||||
isSearch: true,
|
||||
table: {
|
||||
width: 120
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '流程标识',
|
||||
field: 'key',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '流程名称',
|
||||
field: 'name',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '流程分类',
|
||||
field: 'category',
|
||||
dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
|
||||
dictClass: 'number',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '表单信息',
|
||||
field: 'formId'
|
||||
},
|
||||
{
|
||||
label: '最新部署的流程定义',
|
||||
field: 'processDefinition',
|
||||
form: {
|
||||
show: false
|
||||
{
|
||||
title: '流程名称',
|
||||
field: 'name',
|
||||
isSearch: true,
|
||||
table: {
|
||||
width: 120,
|
||||
slots: {
|
||||
default: 'name_default'
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('table.action'),
|
||||
field: 'action',
|
||||
width: '240px',
|
||||
form: {
|
||||
show: false
|
||||
{
|
||||
title: '流程分类',
|
||||
field: 'category',
|
||||
dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
|
||||
dictClass: 'number',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '表单信息',
|
||||
field: 'formId',
|
||||
table: {
|
||||
width: 180,
|
||||
slots: {
|
||||
default: 'formId_default'
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
{
|
||||
title: '最新部署的流程定义',
|
||||
field: 'processDefinition',
|
||||
isForm: false,
|
||||
table: {
|
||||
children: [
|
||||
{
|
||||
title: '流程版本',
|
||||
field: 'version',
|
||||
slots: {
|
||||
default: 'version_default'
|
||||
},
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '激活状态',
|
||||
field: 'status',
|
||||
slots: {
|
||||
default: 'status_default'
|
||||
},
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '部署时间',
|
||||
field: 'processDefinition.deploymentTime',
|
||||
formatter: 'formatDate',
|
||||
width: 180
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
isForm: false,
|
||||
formatter: 'formatDate',
|
||||
table: {
|
||||
width: 180
|
||||
}
|
||||
}
|
||||
}
|
||||
])
|
||||
export const { allSchemas } = useCrudSchemas(crudSchemas)
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
<template>
|
||||
<div>index</div>
|
||||
</template>
|
||||
<script setup lang="ts" name="Oa"></script>
|
||||
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 详情 -->
|
||||
<Descriptions :schema="allSchemas.detailSchema" :data="formData" />
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// 业务相关的 import
|
||||
import * as LeaveApi from '@/api/bpm/leave'
|
||||
import { allSchemas } from '@/views/bpm/oa/leave/leave.data'
|
||||
|
||||
const { query } = useRoute() // 查询参数
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const id = ref() // 请假编号
|
||||
// 表单参数
|
||||
const formData = ref({
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
type: undefined,
|
||||
reason: undefined
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
id.value = query.id
|
||||
if (!id.value) {
|
||||
message.error('未传递 id 参数，无法查看 OA 请假信息')
|
||||
return
|
||||
}
|
||||
// 获得请假信息
|
||||
LeaveApi.getLeaveApi(id.value).then((data) => {
|
||||
formData.value = data
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,90 @@
|
||||
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
// 表单校验
|
||||
export const rules = reactive({
|
||||
startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
|
||||
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }]
|
||||
})
|
||||
|
||||
// crudSchemas
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: 'id',
|
||||
primaryTitle: '申请编号',
|
||||
action: true,
|
||||
actionWidth: '260',
|
||||
columns: [
|
||||
{
|
||||
title: t('common.status'),
|
||||
field: 'result',
|
||||
dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
|
||||
dictClass: 'number',
|
||||
isSearch: true,
|
||||
isForm: false
|
||||
},
|
||||
{
|
||||
title: t('common.startTimeText'),
|
||||
field: 'startTime',
|
||||
formatter: 'formatDay',
|
||||
table: {
|
||||
width: 180
|
||||
},
|
||||
detail: {
|
||||
dateFormat: 'YYYY-MM-DD'
|
||||
},
|
||||
form: {
|
||||
component: 'DatePicker'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('common.endTimeText'),
|
||||
field: 'endTime',
|
||||
formatter: 'formatDay',
|
||||
table: {
|
||||
width: 180
|
||||
},
|
||||
detail: {
|
||||
dateFormat: 'YYYY-MM-DD'
|
||||
},
|
||||
form: {
|
||||
component: 'DatePicker'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '请假类型',
|
||||
field: 'type',
|
||||
dictType: DICT_TYPE.BPM_OA_LEAVE_TYPE,
|
||||
dictClass: 'number',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '原因',
|
||||
field: 'reason',
|
||||
isSearch: true,
|
||||
componentProps: {
|
||||
type: 'textarea',
|
||||
rows: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '申请时间',
|
||||
field: 'createTime',
|
||||
formatter: 'formatDate',
|
||||
table: {
|
||||
width: 180
|
||||
},
|
||||
isSearch: true,
|
||||
search: {
|
||||
show: true,
|
||||
itemRender: {
|
||||
name: 'XDataTimePicker'
|
||||
}
|
||||
},
|
||||
isForm: false
|
||||
}
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue