🎉 init: 更改代码配置以及增加静态路由
This commit is contained in:
ycy
parent
28994465f8
commit
daeb6fe9eb
|
|
@ -1,49 +0,0 @@
|
||||||
import request from '@/config/axios'
|
|
||||||
import qs from 'qs'
|
|
||||||
|
|
||||||
export interface NotifyMessageVO {
|
|
||||||
id: number
|
|
||||||
userId: number
|
|
||||||
userType: number
|
|
||||||
templateId: number
|
|
||||||
templateCode: string
|
|
||||||
templateNickname: string
|
|
||||||
templateContent: string
|
|
||||||
templateType: number
|
|
||||||
templateParams: string
|
|
||||||
readStatus: boolean
|
|
||||||
readTime: Date
|
|
||||||
createTime: Date
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询站内信消息列表
|
|
||||||
export const getNotifyMessagePage = async (params: PageParam) => {
|
|
||||||
return await request.get({ url: '/system/notify-message/page', params })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得我的站内信分页
|
|
||||||
export const getMyNotifyMessagePage = async (params: PageParam) => {
|
|
||||||
return await request.get({ url: '/system/notify-message/my-page', params })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 批量标记已读
|
|
||||||
export const updateNotifyMessageRead = async (ids) => {
|
|
||||||
return await request.put({
|
|
||||||
url: '/system/notify-message/update-read?' + qs.stringify({ ids: ids }, { indices: false })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 标记所有站内信为已读
|
|
||||||
export const updateAllNotifyMessageRead = async () => {
|
|
||||||
return await request.put({ url: '/system/notify-message/update-all-read' })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取当前用户的最新站内信列表
|
|
||||||
export const getUnreadNotifyMessageList = async () => {
|
|
||||||
return await request.get({ url: '/system/notify-message/get-unread-list' })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得当前用户的未读站内信数量
|
|
||||||
export const getUnreadNotifyMessageCount = async () => {
|
|
||||||
return await request.get({ url: '/system/notify-message/get-unread-count' })
|
|
||||||
}
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
export interface NotifyTemplateVO {
|
|
||||||
id?: number
|
|
||||||
name: string
|
|
||||||
nickname: string
|
|
||||||
code: string
|
|
||||||
content: string
|
|
||||||
type?: number
|
|
||||||
params: string
|
|
||||||
status: number
|
|
||||||
remark: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface NotifySendReqVO {
|
|
||||||
userId: number | null
|
|
||||||
templateCode: string
|
|
||||||
templateParams: Map<String, Object>
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询站内信模板列表
|
|
||||||
export const getNotifyTemplatePage = async (params: PageParam) => {
|
|
||||||
return await request.get({ url: '/system/notify-template/page', params })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询站内信模板详情
|
|
||||||
export const getNotifyTemplate = async (id: number) => {
|
|
||||||
return await request.get({ url: '/system/notify-template/get?id=' + id })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新增站内信模板
|
|
||||||
export const createNotifyTemplate = async (data: NotifyTemplateVO) => {
|
|
||||||
return await request.post({ url: '/system/notify-template/create', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 修改站内信模板
|
|
||||||
export const updateNotifyTemplate = async (data: NotifyTemplateVO) => {
|
|
||||||
return await request.put({ url: '/system/notify-template/update', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除站内信模板
|
|
||||||
export const deleteNotifyTemplate = async (id: number) => {
|
|
||||||
return await request.delete({ url: '/system/notify-template/delete?id=' + id })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 发送站内信
|
|
||||||
export const sendNotify = (data: NotifySendReqVO) => {
|
|
||||||
return request.post({ url: '/system/notify-template/send-notify', data })
|
|
||||||
}
|
|
||||||
|
|
@ -23,7 +23,7 @@ export default defineComponent({
|
||||||
dictOptions.forEach((dict: DictDataType) => {
|
dictOptions.forEach((dict: DictDataType) => {
|
||||||
if (dict.value === value) {
|
if (dict.value === value) {
|
||||||
if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
|
if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
|
||||||
dict.colorType = ''
|
// dict.colorType = ''
|
||||||
}
|
}
|
||||||
dictData.value = dict
|
dictData.value = dict
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,704 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="my-process-designer">
|
|
||||||
<div class="my-process-designer__header" style="z-index: 999; display: table-row-group">
|
|
||||||
<slot name="control-header"></slot>
|
|
||||||
<template v-if="!$slots['control-header']">
|
|
||||||
<ElButtonGroup key="file-control">
|
|
||||||
<XButton preIcon="ep:folder-opened" title="打开文件" @click="refFile.click()" />
|
|
||||||
<el-tooltip effect="light" placement="bottom">
|
|
||||||
<template #content>
|
|
||||||
<div style="color: #409eff">
|
|
||||||
<!-- <el-button link @click="downloadProcessAsXml()">下载为XML文件</el-button> -->
|
|
||||||
<XTextButton title="下载为XML文件" @click="downloadProcessAsXml()" />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<!-- <el-button link @click="downloadProcessAsSvg()">下载为SVG文件</el-button> -->
|
|
||||||
<XTextButton title="下载为SVG文件" @click="downloadProcessAsSvg()" />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<!-- <el-button link @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button> -->
|
|
||||||
<XTextButton title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<XButton title="下载文件" preIcon="ep:download" />
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="light">
|
|
||||||
<XButton preIcon="ep:view" title="浏览" />
|
|
||||||
<template #content>
|
|
||||||
<!-- <el-button link @click="previewProcessXML">预览XML</el-button> -->
|
|
||||||
<XTextButton title="预览XML" @click="previewProcessXML" />
|
|
||||||
<br />
|
|
||||||
<!-- <el-button link @click="previewProcessJson">预览JSON</el-button> -->
|
|
||||||
<XTextButton title="预览JSON" @click="previewProcessJson" />
|
|
||||||
</template>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
v-if="props.simulation"
|
|
||||||
effect="light"
|
|
||||||
:content="simulationStatus ? '退出模拟' : '开启模拟'"
|
|
||||||
>
|
|
||||||
<XButton preIcon="ep:cpu" title="模拟" @click="processSimulation" />
|
|
||||||
</el-tooltip>
|
|
||||||
</ElButtonGroup>
|
|
||||||
<ElButtonGroup key="align-control">
|
|
||||||
<el-tooltip effect="light" content="向左对齐">
|
|
||||||
<!-- <el-button
|
|
||||||
class="align align-left"
|
|
||||||
icon="el-icon-s-data"
|
|
||||||
@click="elementsAlign('left')"
|
|
||||||
/> -->
|
|
||||||
<XButton
|
|
||||||
preIcon="fa:align-left"
|
|
||||||
class="align align-bottom"
|
|
||||||
@click="elementsAlign('left')"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="light" content="向右对齐">
|
|
||||||
<!-- <el-button
|
|
||||||
class="align align-right"
|
|
||||||
icon="el-icon-s-data"
|
|
||||||
@click="elementsAlign('right')"
|
|
||||||
/> -->
|
|
||||||
<XButton
|
|
||||||
preIcon="fa:align-left"
|
|
||||||
class="align align-top"
|
|
||||||
@click="elementsAlign('right')"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="light" content="向上对齐">
|
|
||||||
<!-- <el-button
|
|
||||||
class="align align-top"
|
|
||||||
icon="el-icon-s-data"
|
|
||||||
@click="elementsAlign('top')"
|
|
||||||
/> -->
|
|
||||||
<XButton
|
|
||||||
preIcon="fa:align-left"
|
|
||||||
class="align align-left"
|
|
||||||
@click="elementsAlign('top')"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="light" content="向下对齐">
|
|
||||||
<!-- <el-button
|
|
||||||
class="align align-bottom"
|
|
||||||
icon="el-icon-s-data"
|
|
||||||
@click="elementsAlign('bottom')"
|
|
||||||
/> -->
|
|
||||||
<XButton
|
|
||||||
preIcon="fa:align-left"
|
|
||||||
class="align align-right"
|
|
||||||
@click="elementsAlign('bottom')"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="light" content="水平居中">
|
|
||||||
<!-- <el-button
|
|
||||||
class="align align-center"
|
|
||||||
icon="el-icon-s-data"
|
|
||||||
@click="elementsAlign('center')"
|
|
||||||
/> -->
|
|
||||||
<!-- class="align align-center" -->
|
|
||||||
<XButton
|
|
||||||
preIcon="fa:align-left"
|
|
||||||
class="align align-center"
|
|
||||||
@click="elementsAlign('center')"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="light" content="垂直居中">
|
|
||||||
<!-- <el-button
|
|
||||||
class="align align-middle"
|
|
||||||
icon="el-icon-s-data"
|
|
||||||
@click="elementsAlign('middle')"
|
|
||||||
/> -->
|
|
||||||
<XButton
|
|
||||||
preIcon="fa:align-left"
|
|
||||||
class="align align-middle"
|
|
||||||
@click="elementsAlign('middle')"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
</ElButtonGroup>
|
|
||||||
<ElButtonGroup key="scale-control">
|
|
||||||
<el-tooltip effect="light" content="缩小视图">
|
|
||||||
<!-- <el-button
|
|
||||||
:disabled="defaultZoom < 0.2"
|
|
||||||
icon="el-icon-zoom-out"
|
|
||||||
@click="processZoomOut()"
|
|
||||||
/> -->
|
|
||||||
<XButton
|
|
||||||
preIcon="ep:zoom-out"
|
|
||||||
@click="processZoomOut()"
|
|
||||||
:disabled="defaultZoom < 0.2"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-button>{{ Math.floor(defaultZoom * 10 * 10) + '%' }}</el-button>
|
|
||||||
<el-tooltip effect="light" content="放大视图">
|
|
||||||
<!-- <el-button
|
|
||||||
:disabled="defaultZoom > 4"
|
|
||||||
icon="el-icon-zoom-in"
|
|
||||||
@click="processZoomIn()"
|
|
||||||
/> -->
|
|
||||||
<XButton preIcon="ep:zoom-in" @click="processZoomIn()" :disabled="defaultZoom > 4" />
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="light" content="重置视图并居中">
|
|
||||||
<!-- <el-button icon="el-icon-c-scale-to-original" @click="processReZoom()" /> -->
|
|
||||||
<XButton preIcon="ep:scale-to-original" @click="processReZoom()" />
|
|
||||||
</el-tooltip>
|
|
||||||
</ElButtonGroup>
|
|
||||||
<ElButtonGroup key="stack-control">
|
|
||||||
<el-tooltip effect="light" content="撤销">
|
|
||||||
<!-- <el-button :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" /> -->
|
|
||||||
<XButton preIcon="ep:refresh-left" @click="processUndo()" :disabled="!revocable" />
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="light" content="恢复">
|
|
||||||
<!-- <el-button
|
|
||||||
:disabled="!recoverable"
|
|
||||||
icon="el-icon-refresh-right"
|
|
||||||
@click="processRedo()"
|
|
||||||
/> -->
|
|
||||||
<XButton preIcon="ep:refresh-right" @click="processRedo()" :disabled="!recoverable" />
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="light" content="重新绘制">
|
|
||||||
<!-- <el-button icon="el-icon-refresh" @click="processRestart" /> -->
|
|
||||||
<XButton preIcon="ep:refresh" @click="processRestart()" />
|
|
||||||
</el-tooltip>
|
|
||||||
</ElButtonGroup>
|
|
||||||
<XButton
|
|
||||||
preIcon="ep:plus"
|
|
||||||
title="保存模型"
|
|
||||||
@click="processSave"
|
|
||||||
:type="props.headerButtonType"
|
|
||||||
:disabled="simulationStatus"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<!-- 用于打开本地文件-->
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="files"
|
|
||||||
ref="refFile"
|
|
||||||
style="display: none"
|
|
||||||
accept=".xml, .bpmn"
|
|
||||||
@change="importLocalFile"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="my-process-designer__container">
|
|
||||||
<div
|
|
||||||
class="my-process-designer__canvas"
|
|
||||||
ref="bpmnCanvas"
|
|
||||||
id="bpmnCanvas"
|
|
||||||
style="width: 1680px; height: 800px"
|
|
||||||
></div>
|
|
||||||
<!-- <div id="js-properties-panel" class="panel"></div> -->
|
|
||||||
<!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
|
|
||||||
</div>
|
|
||||||
<Dialog
|
|
||||||
title="预览"
|
|
||||||
v-model="previewModelVisible"
|
|
||||||
width="80%"
|
|
||||||
:scroll="true"
|
|
||||||
max-height="600px"
|
|
||||||
>
|
|
||||||
<!-- append-to-body -->
|
|
||||||
<div v-highlight>
|
|
||||||
<code class="hljs">
|
|
||||||
<!-- 高亮代码块 -->
|
|
||||||
{{ previewResult }}
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
// import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
|
|
||||||
// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
|
|
||||||
// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
|
|
||||||
// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
|
|
||||||
// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
|
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
||||||
import BpmnModeler from 'bpmn-js/lib/Modeler'
|
|
||||||
import DefaultEmptyXML from './plugins/defaultEmpty'
|
|
||||||
// 翻译方法
|
|
||||||
import customTranslate from './plugins/translate/customTranslate'
|
|
||||||
import translationsCN from './plugins/translate/zh'
|
|
||||||
// 模拟流转流程
|
|
||||||
import tokenSimulation from 'bpmn-js-token-simulation'
|
|
||||||
// 标签解析构建器
|
|
||||||
// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
|
|
||||||
// import propertiesPanelModule from 'bpmn-js-properties-panel'
|
|
||||||
// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
|
|
||||||
// 标签解析 Moddle
|
|
||||||
import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json'
|
|
||||||
import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json'
|
|
||||||
import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json'
|
|
||||||
// 标签解析 Extension
|
|
||||||
import camundaModdleExtension from './plugins/extension-moddle/camunda'
|
|
||||||
import activitiModdleExtension from './plugins/extension-moddle/activiti'
|
|
||||||
import flowableModdleExtension from './plugins/extension-moddle/flowable'
|
|
||||||
// 引入json转换与高亮
|
|
||||||
// import xml2js from 'xml-js'
|
|
||||||
// import xml2js from 'fast-xml-parser'
|
|
||||||
import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
|
|
||||||
// 代码高亮插件
|
|
||||||
// import hljs from 'highlight.js/lib/highlight'
|
|
||||||
// import 'highlight.js/styles/github-gist.css'
|
|
||||||
// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml')
|
|
||||||
// hljs.registerLanguage('json', 'highlight.js/lib/languages/json')
|
|
||||||
// const eventName = reactive({
|
|
||||||
// name: ''
|
|
||||||
// })
|
|
||||||
|
|
||||||
defineOptions({ name: 'MyProcessDesigner' })
|
|
||||||
|
|
||||||
const bpmnCanvas = ref()
|
|
||||||
const refFile = ref()
|
|
||||||
const emit = defineEmits([
|
|
||||||
'destroy',
|
|
||||||
'init-finished',
|
|
||||||
'save',
|
|
||||||
'commandStack-changed',
|
|
||||||
'input',
|
|
||||||
'change',
|
|
||||||
'canvas-viewbox-changed',
|
|
||||||
// eventName.name
|
|
||||||
'element-click'
|
|
||||||
])
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
value: String, // xml 字符串
|
|
||||||
// valueWatch: true, // xml 字符串的 watch 状态
|
|
||||||
processId: String, // 流程 key 标识
|
|
||||||
processName: String, // 流程 name 名字
|
|
||||||
formId: Number, // 流程 form 表单编号
|
|
||||||
translations: {
|
|
||||||
// 自定义的翻译文件
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
},
|
|
||||||
additionalModel: [Object, Array], // 自定义model
|
|
||||||
moddleExtension: {
|
|
||||||
// 自定义moddle
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
},
|
|
||||||
onlyCustomizeAddi: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
onlyCustomizeModdle: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
simulation: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
keyboard: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
prefix: {
|
|
||||||
type: String,
|
|
||||||
default: 'camunda'
|
|
||||||
},
|
|
||||||
events: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ['element.click']
|
|
||||||
},
|
|
||||||
headerButtonSize: {
|
|
||||||
type: String,
|
|
||||||
default: 'small',
|
|
||||||
validator: (value: string) => ['default', 'medium', 'small', 'mini'].indexOf(value) !== -1
|
|
||||||
},
|
|
||||||
headerButtonType: {
|
|
||||||
type: String,
|
|
||||||
default: 'primary',
|
|
||||||
validator: (value: string) =>
|
|
||||||
['default', 'primary', 'success', 'warning', 'danger', 'info'].indexOf(value) !== -1
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
provide('configGlobal', props)
|
|
||||||
let bpmnModeler: any = null
|
|
||||||
const defaultZoom = ref(1)
|
|
||||||
const previewModelVisible = ref(false)
|
|
||||||
const simulationStatus = ref(false)
|
|
||||||
const previewResult = ref('')
|
|
||||||
const previewType = ref('xml')
|
|
||||||
const recoverable = ref(false)
|
|
||||||
const revocable = ref(false)
|
|
||||||
const additionalModules = computed(() => {
|
|
||||||
console.log(props.additionalModel, 'additionalModel')
|
|
||||||
const Modules: any[] = []
|
|
||||||
// 仅保留用户自定义扩展模块
|
|
||||||
if (props.onlyCustomizeAddi) {
|
|
||||||
if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
|
|
||||||
return props.additionalModel || []
|
|
||||||
}
|
|
||||||
return [props.additionalModel]
|
|
||||||
}
|
|
||||||
|
|
||||||
// 插入用户自定义扩展模块
|
|
||||||
if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
|
|
||||||
Modules.push(...(props.additionalModel as any[]))
|
|
||||||
} else {
|
|
||||||
props.additionalModel && Modules.push(props.additionalModel)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 翻译模块
|
|
||||||
const TranslateModule = {
|
|
||||||
translate: ['value', customTranslate(props.translations || translationsCN)]
|
|
||||||
}
|
|
||||||
Modules.push(TranslateModule)
|
|
||||||
|
|
||||||
// 模拟流转模块
|
|
||||||
if (props.simulation) {
|
|
||||||
Modules.push(tokenSimulation)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据需要的流程类型设置扩展元素构建模块
|
|
||||||
// if (this.prefix === "bpmn") {
|
|
||||||
// Modules.push(bpmnModdleExtension);
|
|
||||||
// }
|
|
||||||
console.log(props.prefix, 'props.prefix ')
|
|
||||||
if (props.prefix === 'camunda') {
|
|
||||||
Modules.push(camundaModdleExtension)
|
|
||||||
}
|
|
||||||
if (props.prefix === 'flowable') {
|
|
||||||
Modules.push(flowableModdleExtension)
|
|
||||||
}
|
|
||||||
if (props.prefix === 'activiti') {
|
|
||||||
Modules.push(activitiModdleExtension)
|
|
||||||
}
|
|
||||||
|
|
||||||
return Modules
|
|
||||||
})
|
|
||||||
const moddleExtensions = computed(() => {
|
|
||||||
console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
|
|
||||||
console.log(props.moddleExtension, 'props.moddleExtension')
|
|
||||||
console.log(props.prefix, 'props.prefix')
|
|
||||||
const Extensions: any = {}
|
|
||||||
// 仅使用用户自定义模块
|
|
||||||
if (props.onlyCustomizeModdle) {
|
|
||||||
return props.moddleExtension || null
|
|
||||||
}
|
|
||||||
|
|
||||||
// 插入用户自定义模块
|
|
||||||
if (props.moddleExtension) {
|
|
||||||
for (let key in props.moddleExtension) {
|
|
||||||
Extensions[key] = props.moddleExtension[key]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据需要的 "流程类型" 设置 对应的解析文件
|
|
||||||
if (props.prefix === 'activiti') {
|
|
||||||
Extensions.activiti = activitiModdleDescriptor
|
|
||||||
}
|
|
||||||
if (props.prefix === 'flowable') {
|
|
||||||
Extensions.flowable = flowableModdleDescriptor
|
|
||||||
}
|
|
||||||
if (props.prefix === 'camunda') {
|
|
||||||
Extensions.camunda = camundaModdleDescriptor
|
|
||||||
}
|
|
||||||
return Extensions
|
|
||||||
})
|
|
||||||
console.log(additionalModules, 'additionalModules()')
|
|
||||||
console.log(moddleExtensions, 'moddleExtensions()')
|
|
||||||
const initBpmnModeler = () => {
|
|
||||||
if (bpmnModeler) return
|
|
||||||
let data = document.getElementById('bpmnCanvas')
|
|
||||||
console.log(data, 'data')
|
|
||||||
console.log(props.keyboard, 'props.keyboard')
|
|
||||||
console.log(additionalModules, 'additionalModules()')
|
|
||||||
console.log(moddleExtensions, 'moddleExtensions()')
|
|
||||||
|
|
||||||
bpmnModeler = new BpmnModeler({
|
|
||||||
// container: this.$refs['bpmn-canvas'],
|
|
||||||
// container: getCurrentInstance(),
|
|
||||||
// container: needClass,
|
|
||||||
// container: bpmnCanvas.value,
|
|
||||||
container: data,
|
|
||||||
// width: '100%',
|
|
||||||
// 添加控制板
|
|
||||||
// propertiesPanel: {
|
|
||||||
// parent: '#js-properties-panel'
|
|
||||||
// },
|
|
||||||
keyboard: props.keyboard ? { bindTo: document } : null,
|
|
||||||
// additionalModules: additionalModules.value,
|
|
||||||
additionalModules: additionalModules.value,
|
|
||||||
moddleExtensions: moddleExtensions.value
|
|
||||||
|
|
||||||
// additionalModules: [
|
|
||||||
// additionalModules.value
|
|
||||||
// propertiesPanelModule,
|
|
||||||
// propertiesProviderModule
|
|
||||||
// propertiesProviderModule
|
|
||||||
// ],
|
|
||||||
// moddleExtensions: { camunda: moddleExtensions.value }
|
|
||||||
})
|
|
||||||
|
|
||||||
// bpmnModeler.createDiagram()
|
|
||||||
|
|
||||||
// console.log(bpmnModeler, 'bpmnModeler111111')
|
|
||||||
emit('init-finished', bpmnModeler)
|
|
||||||
initModelListeners()
|
|
||||||
}
|
|
||||||
|
|
||||||
const initModelListeners = () => {
|
|
||||||
const EventBus = bpmnModeler.get('eventBus')
|
|
||||||
console.log(EventBus, 'EventBus')
|
|
||||||
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
|
|
||||||
props.events.forEach((event: any) => {
|
|
||||||
EventBus.on(event, function (eventObj) {
|
|
||||||
let eventName = event.replace(/\./g, '-')
|
|
||||||
// eventName.name = eventName
|
|
||||||
let element = eventObj ? eventObj.element : null
|
|
||||||
console.log(eventName, 'eventName')
|
|
||||||
console.log(element, 'element')
|
|
||||||
emit('element-click', element, eventObj)
|
|
||||||
// emit(eventName, element, eventObj)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// 监听图形改变返回xml
|
|
||||||
EventBus.on('commandStack.changed', async (event) => {
|
|
||||||
try {
|
|
||||||
recoverable.value = bpmnModeler.get('commandStack').canRedo()
|
|
||||||
revocable.value = bpmnModeler.get('commandStack').canUndo()
|
|
||||||
let { xml } = await bpmnModeler.saveXML({ format: true })
|
|
||||||
emit('commandStack-changed', event)
|
|
||||||
emit('input', xml)
|
|
||||||
emit('change', xml)
|
|
||||||
} catch (e: any) {
|
|
||||||
console.error(`[Process Designer Warn]: ${e.message || e}`)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 监听视图缩放变化
|
|
||||||
bpmnModeler.on('canvas.viewbox.changed', ({ viewbox }) => {
|
|
||||||
emit('canvas-viewbox-changed', { viewbox })
|
|
||||||
const { scale } = viewbox
|
|
||||||
defaultZoom.value = Math.floor(scale * 100) / 100
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/* 创建新的流程图 */
|
|
||||||
const createNewDiagram = async (xml) => {
|
|
||||||
console.log(xml, 'xml')
|
|
||||||
// 将字符串转换成图显示出来
|
|
||||||
let newId = props.processId || `Process_${new Date().getTime()}`
|
|
||||||
let newName = props.processName || `业务流程_${new Date().getTime()}`
|
|
||||||
let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
|
|
||||||
try {
|
|
||||||
// console.log(xmlString, 'xmlString')
|
|
||||||
// console.log(this.bpmnModeler.importXML);
|
|
||||||
let { warnings } = await bpmnModeler.importXML(xmlString)
|
|
||||||
console.log(warnings, 'warnings')
|
|
||||||
if (warnings && warnings.length) {
|
|
||||||
warnings.forEach((warn) => console.warn(warn))
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
console.error(`[Process Designer Warn]: ${e.message || e}`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 下载流程图到本地
|
|
||||||
const downloadProcess = async (type) => {
|
|
||||||
try {
|
|
||||||
// 按需要类型创建文件并下载
|
|
||||||
if (type === 'xml' || type === 'bpmn') {
|
|
||||||
const { err, xml } = await bpmnModeler.saveXML()
|
|
||||||
// 读取异常时抛出异常
|
|
||||||
if (err) {
|
|
||||||
console.error(`[Process Designer Warn ]: ${err.message || err}`)
|
|
||||||
}
|
|
||||||
let { href, filename } = setEncoded(type.toUpperCase(), xml)
|
|
||||||
downloadFunc(href, filename)
|
|
||||||
} else {
|
|
||||||
const { err, svg } = await bpmnModeler.saveSVG()
|
|
||||||
// 读取异常时抛出异常
|
|
||||||
if (err) {
|
|
||||||
return console.error(err)
|
|
||||||
}
|
|
||||||
let { href, filename } = setEncoded('SVG', svg)
|
|
||||||
downloadFunc(href, filename)
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
console.error(`[Process Designer Warn ]: ${e.message || e}`)
|
|
||||||
}
|
|
||||||
// 文件下载方法
|
|
||||||
function downloadFunc(href, filename) {
|
|
||||||
if (href && filename) {
|
|
||||||
let a = document.createElement('a')
|
|
||||||
a.download = filename //指定下载的文件名
|
|
||||||
a.href = href // URL对象
|
|
||||||
a.click() // 模拟点击
|
|
||||||
URL.revokeObjectURL(a.href) // 释放URL 对象
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据所需类型进行转码并返回下载地址
|
|
||||||
const setEncoded = (type, data) => {
|
|
||||||
const filename = 'diagram'
|
|
||||||
const encodedData = encodeURIComponent(data)
|
|
||||||
return {
|
|
||||||
filename: `${filename}.${type}`,
|
|
||||||
href: `data:application/${
|
|
||||||
type === 'svg' ? 'text/xml' : 'bpmn20-xml'
|
|
||||||
};charset=UTF-8,${encodedData}`,
|
|
||||||
data: data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载本地文件
|
|
||||||
const importLocalFile = () => {
|
|
||||||
const file = refFile.value.files[0]
|
|
||||||
const reader = new FileReader()
|
|
||||||
reader.readAsText(file)
|
|
||||||
reader.onload = function () {
|
|
||||||
let xmlStr = this.result
|
|
||||||
createNewDiagram(xmlStr)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* ------------------------------------------------ refs methods ------------------------------------------------------ */
|
|
||||||
const downloadProcessAsXml = () => {
|
|
||||||
downloadProcess('xml')
|
|
||||||
}
|
|
||||||
const downloadProcessAsBpmn = () => {
|
|
||||||
downloadProcess('bpmn')
|
|
||||||
}
|
|
||||||
const downloadProcessAsSvg = () => {
|
|
||||||
downloadProcess('svg')
|
|
||||||
}
|
|
||||||
const processSimulation = () => {
|
|
||||||
simulationStatus.value = !simulationStatus.value
|
|
||||||
console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
|
|
||||||
props.simulation && bpmnModeler.get('toggleMode', 'strict').toggleMode()
|
|
||||||
}
|
|
||||||
const processRedo = () => {
|
|
||||||
bpmnModeler.get('commandStack').redo()
|
|
||||||
}
|
|
||||||
const processUndo = () => {
|
|
||||||
bpmnModeler.get('commandStack').undo()
|
|
||||||
}
|
|
||||||
const processZoomIn = (zoomStep = 0.1) => {
|
|
||||||
let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100
|
|
||||||
if (newZoom > 4) {
|
|
||||||
throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
|
|
||||||
}
|
|
||||||
defaultZoom.value = newZoom
|
|
||||||
bpmnModeler.get('canvas').zoom(defaultZoom.value)
|
|
||||||
}
|
|
||||||
const processZoomOut = (zoomStep = 0.1) => {
|
|
||||||
let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100
|
|
||||||
if (newZoom < 0.2) {
|
|
||||||
throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
|
|
||||||
}
|
|
||||||
defaultZoom.value = newZoom
|
|
||||||
bpmnModeler.get('canvas').zoom(defaultZoom.value)
|
|
||||||
}
|
|
||||||
// const processZoomTo = (newZoom = 1) => {
|
|
||||||
// if (newZoom < 0.2) {
|
|
||||||
// throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
|
|
||||||
// }
|
|
||||||
// if (newZoom > 4) {
|
|
||||||
// throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
|
|
||||||
// }
|
|
||||||
// defaultZoom = newZoom
|
|
||||||
// bpmnModeler.get('canvas').zoom(newZoom)
|
|
||||||
// }
|
|
||||||
const processReZoom = () => {
|
|
||||||
defaultZoom.value = 1
|
|
||||||
bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
|
|
||||||
}
|
|
||||||
const processRestart = () => {
|
|
||||||
recoverable.value = false
|
|
||||||
revocable.value = false
|
|
||||||
createNewDiagram(null)
|
|
||||||
}
|
|
||||||
const elementsAlign = (align) => {
|
|
||||||
const Align = bpmnModeler.get('alignElements')
|
|
||||||
const Selection = bpmnModeler.get('selection')
|
|
||||||
const SelectedElements = Selection.get()
|
|
||||||
if (!SelectedElements || SelectedElements.length <= 1) {
|
|
||||||
ElMessage.warning('请按住 Shift 键选择多个元素对齐')
|
|
||||||
// alert('请按住 Ctrl 键选择多个元素对齐
|
|
||||||
return
|
|
||||||
}
|
|
||||||
ElMessageBox.confirm('自动对齐可能造成图形变形，是否继续？', '警告', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
Align.trigger(SelectedElements, align)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/*----------------------------- 方法结束 ---------------------------------*/
|
|
||||||
const previewProcessXML = () => {
|
|
||||||
console.log(bpmnModeler.saveXML, 'bpmnModeler')
|
|
||||||
bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
|
||||||
// console.log(xml, 'xml111111')
|
|
||||||
previewResult.value = xml
|
|
||||||
previewType.value = 'xml'
|
|
||||||
previewModelVisible.value = true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const previewProcessJson = () => {
|
|
||||||
bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
|
||||||
// console.log(xml, 'xml')
|
|
||||||
|
|
||||||
// const rootNode = parseXmlString(xml)
|
|
||||||
// console.log(rootNode, 'rootNoderootNode')
|
|
||||||
const rootNodes = new XmlNode(XmlNodeType.Root, parseXmlString(xml))
|
|
||||||
// console.log(rootNodes, 'rootNodesrootNodesrootNodes')
|
|
||||||
// console.log(rootNodes.parent.toJsObject(), 'rootNodes.toJSON()')
|
|
||||||
// console.log(JSON.stringify(rootNodes.parent.toJsObject()), 'rootNodes.toJSON()')
|
|
||||||
// console.log(JSON.stringify(rootNodes.parent.toJSON()), 'rootNodes.toJSON()')
|
|
||||||
|
|
||||||
// const parser = new xml2js.XMLParser()
|
|
||||||
// let jObj = parser.parse(xml)
|
|
||||||
// console.log(jObj, 'jObjjObjjObjjObjjObj')
|
|
||||||
// const builder = new xml2js.XMLBuilder(xml)
|
|
||||||
// const xmlContent = builder
|
|
||||||
// console.log(xmlContent, 'xmlContent')
|
|
||||||
// console.log(xml2js, 'convertconvertconvert')
|
|
||||||
previewResult.value = rootNodes.parent?.toJSON() as unknown as string
|
|
||||||
// previewResult.value = jObj
|
|
||||||
// previewResult.value = convert.xml2json(xml, {explicitArray : false},{ spaces: 2 })
|
|
||||||
previewType.value = 'json'
|
|
||||||
previewModelVisible.value = true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
|
|
||||||
const processSave = async () => {
|
|
||||||
// console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
|
|
||||||
const { err, xml } = await bpmnModeler.saveXML()
|
|
||||||
// console.log(err, 'errerrerrerrerr')
|
|
||||||
// console.log(xml, 'xmlxmlxmlxmlxml')
|
|
||||||
// 读取异常时抛出异常
|
|
||||||
if (err) {
|
|
||||||
// this.$modal.msgError('保存模型失败，请重试！')
|
|
||||||
alert('保存模型失败，请重试！')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 触发 save 事件
|
|
||||||
emit('save', xml)
|
|
||||||
}
|
|
||||||
/** 高亮显示 */
|
|
||||||
// const highlightedCode = (previewType, previewResult) => {
|
|
||||||
// console.log(previewType, 'previewType, previewResult')
|
|
||||||
// console.log(previewResult, 'previewType, previewResult')
|
|
||||||
// console.log(hljs.highlight, 'hljs.highlight')
|
|
||||||
// const result = hljs.highlight(previewType, previewResult.value || '', true)
|
|
||||||
// return result.value || ' '
|
|
||||||
// }
|
|
||||||
onBeforeMount(() => {
|
|
||||||
console.log(props, 'propspropspropsprops')
|
|
||||||
})
|
|
||||||
onMounted(() => {
|
|
||||||
initBpmnModeler()
|
|
||||||
createNewDiagram(props.value)
|
|
||||||
})
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
// this.$once('hook:beforeDestroy', () => {
|
|
||||||
// })
|
|
||||||
if (bpmnModeler) bpmnModeler.destroy()
|
|
||||||
emit('destroy', bpmnModeler)
|
|
||||||
bpmnModeler = null
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,664 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="my-process-designer">
|
|
||||||
<div class="my-process-designer__container">
|
|
||||||
<div class="my-process-designer__canvas" style="height: 760px" ref="bpmnCanvas"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import BpmnViewer from 'bpmn-js/lib/Viewer'
|
|
||||||
import DefaultEmptyXML from './plugins/defaultEmpty'
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import { isEmpty } from '@/utils/is'
|
|
||||||
|
|
||||||
defineOptions({ name: 'MyProcessViewer' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
value: {
|
|
||||||
// BPMN XML 字符串
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
prefix: {
|
|
||||||
// 使用哪个引擎
|
|
||||||
type: String,
|
|
||||||
default: 'camunda'
|
|
||||||
},
|
|
||||||
activityData: {
|
|
||||||
// 活动的数据。传递时，可高亮流程
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
processInstanceData: {
|
|
||||||
// 流程实例的数据。传递时，可展示流程发起人等信息
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
},
|
|
||||||
taskData: {
|
|
||||||
// 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
provide('configGlobal', props)
|
|
||||||
|
|
||||||
const emit = defineEmits(['destroy'])
|
|
||||||
|
|
||||||
let bpmnModeler
|
|
||||||
|
|
||||||
const xml = ref('')
|
|
||||||
const activityLists = ref<any[]>([])
|
|
||||||
const processInstance = ref<any>(undefined)
|
|
||||||
const taskList = ref<any[]>([])
|
|
||||||
const bpmnCanvas = ref()
|
|
||||||
// const element = ref()
|
|
||||||
const elementOverlayIds = ref<any>(null)
|
|
||||||
const overlays = ref<any>(null)
|
|
||||||
|
|
||||||
const initBpmnModeler = () => {
|
|
||||||
if (bpmnModeler) return
|
|
||||||
bpmnModeler = new BpmnViewer({
|
|
||||||
container: bpmnCanvas.value,
|
|
||||||
bpmnRenderer: {}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 创建新的流程图 */
|
|
||||||
const createNewDiagram = async (xml) => {
|
|
||||||
// 将字符串转换成图显示出来
|
|
||||||
let newId = `Process_${new Date().getTime()}`
|
|
||||||
let newName = `业务流程_${new Date().getTime()}`
|
|
||||||
let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
|
|
||||||
try {
|
|
||||||
let { warnings } = await bpmnModeler.importXML(xmlString)
|
|
||||||
if (warnings && warnings.length) {
|
|
||||||
warnings.forEach((warn) => console.warn(warn))
|
|
||||||
}
|
|
||||||
// 高亮流程图
|
|
||||||
await highlightDiagram()
|
|
||||||
const canvas = bpmnModeler.get('canvas')
|
|
||||||
canvas.zoom('fit-viewport', 'auto')
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e)
|
|
||||||
// console.error(`[Process Designer Warn]: ${e?.message || e}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 高亮流程图 */
|
|
||||||
// TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
|
|
||||||
const highlightDiagram = async () => {
|
|
||||||
const activityList = activityLists.value
|
|
||||||
if (activityList.length === 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
|
|
||||||
// 再次基础上，增加不同审批结果的颜色等等
|
|
||||||
let canvas = bpmnModeler.get('canvas')
|
|
||||||
let todoActivity: any = activityList.find((m: any) => !m.endTime) // 找到待办的任务
|
|
||||||
let endActivity: any = activityList[activityList.length - 1] // 获得最后一个任务
|
|
||||||
let findProcessTask = false //是否已经高亮了进行中的任务
|
|
||||||
//进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
|
|
||||||
let removeTaskDefinitionKeyList = []
|
|
||||||
// debugger
|
|
||||||
bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n: any) => {
|
|
||||||
let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
|
|
||||||
if (!activity) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (n.$type === 'bpmn:UserTask') {
|
|
||||||
// 用户任务
|
|
||||||
// 处理用户任务的高亮
|
|
||||||
const task: any = taskList.value.find((m: any) => m.id === activity.taskId) // 找到活动对应的 taskId
|
|
||||||
if (!task) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 进行中的任务已经高亮过了，则不高亮后面的任务了
|
|
||||||
if (findProcessTask) {
|
|
||||||
removeTaskDefinitionKeyList.push(n.id)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 高亮任务
|
|
||||||
canvas.addMarker(n.id, getResultCss(task.status))
|
|
||||||
//标记是否高亮了进行中任务
|
|
||||||
if (task.status === 1) {
|
|
||||||
findProcessTask = true
|
|
||||||
}
|
|
||||||
// 如果非通过，就不走后面的线条了
|
|
||||||
if (task.status !== 2) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 处理 outgoing 出线
|
|
||||||
const outgoing = getActivityOutgoing(activity)
|
|
||||||
outgoing?.forEach((nn: any) => {
|
|
||||||
// debugger
|
|
||||||
let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
|
|
||||||
// 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
|
|
||||||
if (targetActivity) {
|
|
||||||
canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo')
|
|
||||||
} else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
|
|
||||||
// TODO 芋艿：这个流程，暂时没走到过
|
|
||||||
canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo')
|
|
||||||
canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo')
|
|
||||||
} else if (nn.targetRef.$type === 'bpmn:EndEvent') {
|
|
||||||
// TODO 芋艿：这个流程，暂时没走到过
|
|
||||||
if (!todoActivity && endActivity.key === n.id) {
|
|
||||||
canvas.addMarker(nn.id, 'highlight')
|
|
||||||
canvas.addMarker(nn.targetRef.id, 'highlight')
|
|
||||||
}
|
|
||||||
if (!activity.endTime) {
|
|
||||||
canvas.addMarker(nn.id, 'highlight-todo')
|
|
||||||
canvas.addMarker(nn.targetRef.id, 'highlight-todo')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else if (n.$type === 'bpmn:ExclusiveGateway') {
|
|
||||||
// 排它网关
|
|
||||||
// 设置【bpmn:ExclusiveGateway】排它网关的高亮
|
|
||||||
canvas.addMarker(n.id, getActivityHighlightCss(activity))
|
|
||||||
// 查找需要高亮的连线
|
|
||||||
let matchNN: any = undefined
|
|
||||||
let matchActivity: any = undefined
|
|
||||||
n.outgoing?.forEach((nn: any) => {
|
|
||||||
let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
|
|
||||||
if (!targetActivity) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
|
|
||||||
// 1. 一个是 UserTask => EndEvent
|
|
||||||
// 2. 一个是 EndEvent
|
|
||||||
// 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
|
|
||||||
// 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
|
|
||||||
if (!matchActivity || matchActivity.type === 'endEvent') {
|
|
||||||
matchNN = nn
|
|
||||||
matchActivity = targetActivity
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (matchNN && matchActivity) {
|
|
||||||
canvas.addMarker(matchNN.id, getActivityHighlightCss(matchActivity))
|
|
||||||
}
|
|
||||||
} else if (n.$type === 'bpmn:ParallelGateway') {
|
|
||||||
// 并行网关
|
|
||||||
// 设置【bpmn:ParallelGateway】并行网关的高亮
|
|
||||||
canvas.addMarker(n.id, getActivityHighlightCss(activity))
|
|
||||||
n.outgoing?.forEach((nn: any) => {
|
|
||||||
// 获得连线是否有指向目标。如果有，则进行高亮
|
|
||||||
const targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
|
|
||||||
if (targetActivity) {
|
|
||||||
canvas.addMarker(nn.id, getActivityHighlightCss(targetActivity)) // 高亮【bpmn:SequenceFlow】连线
|
|
||||||
// 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
|
|
||||||
canvas.addMarker(nn.targetRef.id, getActivityHighlightCss(targetActivity))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else if (n.$type === 'bpmn:StartEvent') {
|
|
||||||
// 开始节点
|
|
||||||
canvas.addMarker(n.id, 'highlight')
|
|
||||||
n.outgoing?.forEach((nn) => {
|
|
||||||
// outgoing 例如说【bpmn:SequenceFlow】连线
|
|
||||||
// 获得连线是否有指向目标。如果有，则进行高亮
|
|
||||||
let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
|
|
||||||
if (targetActivity) {
|
|
||||||
canvas.addMarker(nn.id, 'highlight') // 高亮【bpmn:SequenceFlow】连线
|
|
||||||
canvas.addMarker(n.id, 'highlight') // 高亮【bpmn:StartEvent】开始节点（自己）
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else if (n.$type === 'bpmn:EndEvent') {
|
|
||||||
// 结束节点
|
|
||||||
if (!processInstance.value || processInstance.value.status === 1) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas.addMarker(n.id, getResultCss(processInstance.value.status))
|
|
||||||
} else if (n.$type === 'bpmn:ServiceTask') {
|
|
||||||
//服务任务
|
|
||||||
if (activity.startTime > 0 && activity.endTime === 0) {
|
|
||||||
//进入执行，标识进行色
|
|
||||||
canvas.addMarker(n.id, getResultCss(1))
|
|
||||||
}
|
|
||||||
if (activity.endTime > 0) {
|
|
||||||
// 执行完成，节点标识完成色, 所有outgoing标识完成色。
|
|
||||||
canvas.addMarker(n.id, getResultCss(2))
|
|
||||||
const outgoing = getActivityOutgoing(activity)
|
|
||||||
outgoing?.forEach((out) => {
|
|
||||||
canvas.addMarker(out.id, getResultCss(2))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (n.$type === 'bpmn:SequenceFlow') {
|
|
||||||
let targetActivity = activityList.find((m: any) => m.key === n.targetRef.id)
|
|
||||||
if (targetActivity) {
|
|
||||||
canvas.addMarker(n.id, getActivityHighlightCss(targetActivity))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (!isEmpty(removeTaskDefinitionKeyList)) {
|
|
||||||
taskList.value = taskList.value.filter(
|
|
||||||
(item) => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getActivityHighlightCss = (activity) => {
|
|
||||||
return activity.endTime ? 'highlight' : 'highlight-todo'
|
|
||||||
}
|
|
||||||
|
|
||||||
const getResultCss = (status) => {
|
|
||||||
if (status === 1) {
|
|
||||||
// 审批中
|
|
||||||
return 'highlight-todo'
|
|
||||||
} else if (status === 2) {
|
|
||||||
// 已通过
|
|
||||||
return 'highlight'
|
|
||||||
} else if (status === 3) {
|
|
||||||
// 不通过
|
|
||||||
return 'highlight-reject'
|
|
||||||
} else if (status === 4) {
|
|
||||||
// 已取消
|
|
||||||
return 'highlight-cancel'
|
|
||||||
} else if (status === 5) {
|
|
||||||
// 退回
|
|
||||||
return 'highlight-return'
|
|
||||||
} else if (status === 6) {
|
|
||||||
// 委派
|
|
||||||
return 'highlight-todo'
|
|
||||||
} else if (status === 7) {
|
|
||||||
// 审批通过中
|
|
||||||
return 'highlight-todo'
|
|
||||||
} else if (status === 0) {
|
|
||||||
// 待审批
|
|
||||||
return 'highlight-todo'
|
|
||||||
}
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
|
|
||||||
const getActivityOutgoing = (activity) => {
|
|
||||||
// 如果有 outgoing，则直接使用它
|
|
||||||
if (activity.outgoing && activity.outgoing.length > 0) {
|
|
||||||
return activity.outgoing
|
|
||||||
}
|
|
||||||
// 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
|
|
||||||
const flowElements = bpmnModeler.getDefinitions().rootElements[0].flowElements
|
|
||||||
const outgoing: any[] = []
|
|
||||||
flowElements.forEach((item: any) => {
|
|
||||||
if (item.$type !== 'bpmn:SequenceFlow') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (item.sourceRef.id === activity.key) {
|
|
||||||
outgoing.push(item)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return outgoing
|
|
||||||
}
|
|
||||||
const initModelListeners = () => {
|
|
||||||
const EventBus = bpmnModeler.get('eventBus')
|
|
||||||
// 注册需要的监听事件
|
|
||||||
EventBus.on('element.hover', function (eventObj) {
|
|
||||||
let element = eventObj ? eventObj.element : null
|
|
||||||
elementHover(element)
|
|
||||||
})
|
|
||||||
EventBus.on('element.out', function (eventObj) {
|
|
||||||
let element = eventObj ? eventObj.element : null
|
|
||||||
elementOut(element)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 流程图的元素被 hover
|
|
||||||
const elementHover = (element) => {
|
|
||||||
element.value = element
|
|
||||||
!elementOverlayIds.value && (elementOverlayIds.value = {})
|
|
||||||
!overlays.value && (overlays.value = bpmnModeler.get('overlays'))
|
|
||||||
// 展示信息
|
|
||||||
// console.log(activityLists.value, 'activityLists.value')
|
|
||||||
// console.log(element.value, 'element.value')
|
|
||||||
const activity = activityLists.value.find((m) => m.key === element.value.id)
|
|
||||||
// console.log(activity, 'activityactivityactivityactivity')
|
|
||||||
if (!activity) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
|
|
||||||
let html = `<div class="element-overlays">
|
|
||||||
<p>Elemet id: ${element.value.id}</p>
|
|
||||||
<p>Elemet type: ${element.value.type}</p>
|
|
||||||
</div>` // 默认值
|
|
||||||
if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
|
|
||||||
html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
|
|
||||||
<p>部门：${processInstance.value.startUser.deptName}</p>
|
|
||||||
<p>创建时间：${formatDate(processInstance.value.createTime)}`
|
|
||||||
} else if (element.value.type === 'bpmn:UserTask') {
|
|
||||||
let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
|
|
||||||
if (!task) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
|
|
||||||
let dataResult = ''
|
|
||||||
optionData.forEach((element) => {
|
|
||||||
if (element.value == task.status) {
|
|
||||||
dataResult = element.label
|
|
||||||
}
|
|
||||||
})
|
|
||||||
html = `<p>审批人：${task.assigneeUser.nickname}</p>
|
|
||||||
<p>部门：${task.assigneeUser.deptName}</p>
|
|
||||||
<p>结果：${dataResult}</p>
|
|
||||||
<p>创建时间：${formatDate(task.createTime)}</p>`
|
|
||||||
// html = `<p>审批人：${task.assigneeUser.nickname}</p>
|
|
||||||
// <p>部门：${task.assigneeUser.deptName}</p>
|
|
||||||
// <p>结果：${getIntDictOptions(
|
|
||||||
// DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
|
|
||||||
// task.status
|
|
||||||
// )}</p>
|
|
||||||
// <p>创建时间：${formatDate(task.createTime)}</p>`
|
|
||||||
if (task.endTime) {
|
|
||||||
html += `<p>结束时间：${formatDate(task.endTime)}</p>`
|
|
||||||
}
|
|
||||||
if (task.reason) {
|
|
||||||
html += `<p>审批建议：${task.reason}</p>`
|
|
||||||
}
|
|
||||||
} else if (element.value.type === 'bpmn:ServiceTask' && processInstance.value) {
|
|
||||||
if (activity.startTime > 0) {
|
|
||||||
html = `<p>创建时间：${formatDate(activity.startTime)}</p>`
|
|
||||||
}
|
|
||||||
if (activity.endTime > 0) {
|
|
||||||
html += `<p>结束时间：${formatDate(activity.endTime)}</p>`
|
|
||||||
}
|
|
||||||
console.log(html)
|
|
||||||
} else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
|
|
||||||
let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
|
|
||||||
let dataResult = ''
|
|
||||||
optionData.forEach((element) => {
|
|
||||||
if (element.value == processInstance.value.status) {
|
|
||||||
dataResult = element.label
|
|
||||||
}
|
|
||||||
})
|
|
||||||
html = `<p>结果：${dataResult}</p>`
|
|
||||||
// html = `<p>结果：${getIntDictOptions(
|
|
||||||
// DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
|
|
||||||
// processInstance.value.status
|
|
||||||
// )}</p>`
|
|
||||||
if (processInstance.value.endTime) {
|
|
||||||
html += `<p>结束时间：${formatDate(processInstance.value.endTime)}</p>`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// console.log(html, 'html111111111111111')
|
|
||||||
elementOverlayIds.value[element.value.id] = toRaw(overlays.value)?.add(element.value, {
|
|
||||||
position: { left: 0, bottom: 0 },
|
|
||||||
html: `<div class="element-overlays">${html}</div>`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 流程图的元素被 out
|
|
||||||
const elementOut = (element) => {
|
|
||||||
toRaw(overlays.value).remove({ element })
|
|
||||||
elementOverlayIds.value[element.id] = null
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
xml.value = props.value
|
|
||||||
activityLists.value = props.activityData
|
|
||||||
// 初始化
|
|
||||||
initBpmnModeler()
|
|
||||||
createNewDiagram(xml.value)
|
|
||||||
// 初始模型的监听器
|
|
||||||
initModelListeners()
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
// this.$once('hook:beforeDestroy', () => {
|
|
||||||
// })
|
|
||||||
if (bpmnModeler) bpmnModeler.destroy()
|
|
||||||
emit('destroy', bpmnModeler)
|
|
||||||
bpmnModeler = null
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.value,
|
|
||||||
(newValue) => {
|
|
||||||
xml.value = newValue
|
|
||||||
createNewDiagram(xml.value)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
watch(
|
|
||||||
() => props.activityData,
|
|
||||||
(newActivityData) => {
|
|
||||||
activityLists.value = newActivityData
|
|
||||||
createNewDiagram(xml.value)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
watch(
|
|
||||||
() => props.processInstanceData,
|
|
||||||
(newProcessInstanceData) => {
|
|
||||||
processInstance.value = newProcessInstanceData
|
|
||||||
createNewDiagram(xml.value)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
watch(
|
|
||||||
() => props.taskData,
|
|
||||||
(newTaskListData) => {
|
|
||||||
taskList.value = newTaskListData
|
|
||||||
createNewDiagram(xml.value)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
/** 处理中 */
|
|
||||||
.highlight-todo.djs-connection > .djs-visual > path {
|
|
||||||
stroke: #1890ff !important;
|
|
||||||
stroke-dasharray: 4px !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
|
||||||
fill: #1890ff !important;
|
|
||||||
stroke: #1890ff !important;
|
|
||||||
stroke-dasharray: 4px !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-todo.djs-connection > .djs-visual > path) {
|
|
||||||
stroke: #1890ff !important;
|
|
||||||
stroke-dasharray: 4px !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
|
|
||||||
fill: #1890ff !important;
|
|
||||||
stroke: #1890ff !important;
|
|
||||||
stroke-dasharray: 4px !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 通过 */
|
|
||||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
|
||||||
fill: green !important;
|
|
||||||
stroke: green !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
|
||||||
fill: green !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight.djs-shape .djs-visual > path {
|
|
||||||
fill: green !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
stroke: green !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight.djs-connection > .djs-visual > path {
|
|
||||||
stroke: green !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
|
|
||||||
fill: green !important; /* color elements as green */
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
|
|
||||||
fill: green !important;
|
|
||||||
stroke: green !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
|
|
||||||
fill: green !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight.djs-shape .djs-visual > path) {
|
|
||||||
fill: green !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
stroke: green !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight.djs-connection > .djs-visual > path) {
|
|
||||||
stroke: green !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.djs-element.highlight > .djs-visual > path {
|
|
||||||
stroke: green !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 不通过 */
|
|
||||||
.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
|
|
||||||
fill: red !important;
|
|
||||||
stroke: red !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
|
|
||||||
fill: red !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-reject.djs-shape .djs-visual > path {
|
|
||||||
fill: red !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
stroke: red !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-reject.djs-connection > .djs-visual > path {
|
|
||||||
stroke: red !important;
|
|
||||||
marker-end: url(#sequenceflow-end-white-success) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
|
|
||||||
fill: red !important; /* color elements as green */
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
|
|
||||||
fill: red !important;
|
|
||||||
stroke: red !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
|
|
||||||
fill: red !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-reject.djs-shape .djs-visual > path) {
|
|
||||||
fill: red !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
stroke: red !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-reject.djs-connection > .djs-visual > path) {
|
|
||||||
stroke: red !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 已取消 */
|
|
||||||
.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
|
|
||||||
fill: grey !important;
|
|
||||||
stroke: grey !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
|
|
||||||
fill: grey !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-cancel.djs-shape .djs-visual > path {
|
|
||||||
fill: grey !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
stroke: grey !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-cancel.djs-connection > .djs-visual > path {
|
|
||||||
stroke: grey !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
|
|
||||||
fill: grey !important; /* color elements as green */
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
|
|
||||||
fill: grey !important;
|
|
||||||
stroke: grey !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
|
|
||||||
fill: grey !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-cancel.djs-shape .djs-visual > path) {
|
|
||||||
fill: grey !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
stroke: grey !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
|
|
||||||
stroke: grey !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 回退 */
|
|
||||||
.highlight-return.djs-shape .djs-visual > :nth-child(1) {
|
|
||||||
fill: #e6a23c !important;
|
|
||||||
stroke: #e6a23c !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-return.djs-shape .djs-visual > :nth-child(2) {
|
|
||||||
fill: #e6a23c !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-return.djs-shape .djs-visual > path {
|
|
||||||
fill: #e6a23c !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
stroke: #e6a23c !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-return.djs-connection > .djs-visual > path {
|
|
||||||
stroke: #e6a23c !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-return:not(.djs-connection) .djs-visual > :nth-child(1) {
|
|
||||||
fill: #e6a23c !important; /* color elements as green */
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-return.djs-shape .djs-visual > :nth-child(1)) {
|
|
||||||
fill: #e6a23c !important;
|
|
||||||
stroke: #e6a23c !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-return.djs-shape .djs-visual > :nth-child(2)) {
|
|
||||||
fill: #e6a23c !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-return.djs-shape .djs-visual > path) {
|
|
||||||
fill: #e6a23c !important;
|
|
||||||
fill-opacity: 0.2 !important;
|
|
||||||
stroke: #e6a23c !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.highlight-return.djs-connection > .djs-visual > path) {
|
|
||||||
stroke: #e6a23c !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-overlays {
|
|
||||||
width: 200px;
|
|
||||||
padding: 8px;
|
|
||||||
color: #fafafa;
|
|
||||||
background: rgb(0 0 0 / 60%);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import MyProcessDesigner from './ProcessDesigner.vue'
|
|
||||||
|
|
||||||
MyProcessDesigner.install = function (Vue) {
|
|
||||||
Vue.component(MyProcessDesigner.name, MyProcessDesigner)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 流程图的设计器，可编辑
|
|
||||||
export default MyProcessDesigner
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import MyProcessViewer from './ProcessViewer.vue'
|
|
||||||
|
|
||||||
MyProcessViewer.install = function (Vue) {
|
|
||||||
Vue.component(MyProcessViewer.name, MyProcessViewer)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 流程图的查看器，不可编辑
|
|
||||||
export default MyProcessViewer
|
|
||||||
|
|
@ -1,423 +0,0 @@
|
||||||
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
|
|
||||||
) {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import CustomContextPadProvider from './contentPadProvider'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
__init__: ['contextPadProvider'],
|
|
||||||
contextPadProvider: ['type', CustomContextPadProvider]
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
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
|
|
@ -1,83 +0,0 @@
|
||||||
'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
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
/*
|
|
||||||
* @author igdianov
|
|
||||||
* address https://github.com/igdianov/activiti-bpmn-moddle
|
|
||||||
* */
|
|
||||||
|
|
||||||
import activitiExtension from './activitiExtension'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
__init__: ['ActivitiModdleExtension'],
|
|
||||||
ActivitiModdleExtension: ['type', activitiExtension]
|
|
||||||
}
|
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
'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) {
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
'use strict'
|
|
||||||
|
|
||||||
import extension from './extension'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
__init__: ['camundaModdleExtension'],
|
|
||||||
camundaModdleExtension: ['type', extension]
|
|
||||||
}
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
'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
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
/*
|
|
||||||
* @author igdianov
|
|
||||||
* address https://github.com/igdianov/activiti-bpmn-moddle
|
|
||||||
* */
|
|
||||||
import flowableExtension from './flowableExtension'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
__init__: ['FlowableModdleExtension'],
|
|
||||||
FlowableModdleExtension: ['type', flowableExtension]
|
|
||||||
}
|
|
||||||
|
|
@ -1,221 +0,0 @@
|
||||||
import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider'
|
|
||||||
import { assign } from 'min-dash'
|
|
||||||
|
|
||||||
export default function CustomPalette(
|
|
||||||
palette,
|
|
||||||
create,
|
|
||||||
elementFactory,
|
|
||||||
spaceTool,
|
|
||||||
lassoTool,
|
|
||||||
handTool,
|
|
||||||
globalConnect,
|
|
||||||
translate
|
|
||||||
) {
|
|
||||||
PaletteProvider.call(
|
|
||||||
this,
|
|
||||||
palette,
|
|
||||||
create,
|
|
||||||
elementFactory,
|
|
||||||
spaceTool,
|
|
||||||
lassoTool,
|
|
||||||
handTool,
|
|
||||||
globalConnect,
|
|
||||||
translate,
|
|
||||||
2000
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const F = function () {} // 核心，利用空对象作为中介；
|
|
||||||
F.prototype = PaletteProvider.prototype // 核心，将父类的原型赋值给空对象F；
|
|
||||||
|
|
||||||
// 利用中介函数重写原型链方法
|
|
||||||
F.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: '激活抓手工具',
|
|
||||||
// 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
|
|
||||||
}
|
|
||||||
|
|
||||||
CustomPalette.$inject = [
|
|
||||||
'palette',
|
|
||||||
'create',
|
|
||||||
'elementFactory',
|
|
||||||
'spaceTool',
|
|
||||||
'lassoTool',
|
|
||||||
'handTool',
|
|
||||||
'globalConnect',
|
|
||||||
'translate'
|
|
||||||
]
|
|
||||||
|
|
||||||
CustomPalette.prototype = new F() // 核心，将 F的实例赋值给子类；
|
|
||||||
CustomPalette.prototype.constructor = CustomPalette // 修复子类CustomPalette的构造器指向，防止原型链的混乱；
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
// 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]
|
|
||||||
}
|
|
||||||
|
|
@ -1,213 +0,0 @@
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
// 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 + '}'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,240 +0,0 @@
|
||||||
/**
|
|
||||||
* 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 {
|
|
||||||
// 添加部分
|
|
||||||
'Append EndEvent': '追加结束事件',
|
|
||||||
'Append Gateway': '追加网关',
|
|
||||||
'Append Task': '追加任务',
|
|
||||||
'Append Intermediate/Boundary Event': '追加中间抛出事件/边界事件',
|
|
||||||
|
|
||||||
'Activate the global connect tool': '激活全局连接工具',
|
|
||||||
'Append {type}': '添加 {type}',
|
|
||||||
'Add Lane above': '在上面添加道',
|
|
||||||
'Divide into two Lanes': '分割成两个道',
|
|
||||||
'Divide into three Lanes': '分割成三个道',
|
|
||||||
'Add Lane below': '在下面添加道',
|
|
||||||
'Append compensation activity': '追加补偿活动',
|
|
||||||
'Change type': '修改类型',
|
|
||||||
'Connect using Association': '使用关联连接',
|
|
||||||
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
|
|
||||||
'Connect using DataInputAssociation': '使用数据输入关联连接',
|
|
||||||
Remove: '移除',
|
|
||||||
'Activate the hand tool': '激活抓手工具',
|
|
||||||
'Activate the lasso tool': '激活套索工具',
|
|
||||||
'Activate the create/remove space tool': '激活创建/删除空间工具',
|
|
||||||
'Create expanded SubProcess': '创建扩展子过程',
|
|
||||||
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
|
|
||||||
'Create Pool/Participant': '创建池/参与者',
|
|
||||||
'Parallel Multi Instance': '并行多重事件',
|
|
||||||
'Sequential Multi Instance': '时序多重事件',
|
|
||||||
DataObjectReference: '数据对象参考',
|
|
||||||
DataStoreReference: '数据存储参考',
|
|
||||||
Loop: '循环',
|
|
||||||
'Ad-hoc': '即席',
|
|
||||||
'Create {type}': '创建 {type}',
|
|
||||||
Task: '任务',
|
|
||||||
'Send Task': '发送任务',
|
|
||||||
'Receive Task': '接收任务',
|
|
||||||
'User Task': '用户任务',
|
|
||||||
'Manual Task': '手工任务',
|
|
||||||
'Business Rule Task': '业务规则任务',
|
|
||||||
'Service Task': '服务任务',
|
|
||||||
'Script Task': '脚本任务',
|
|
||||||
'Call Activity': '调用活动',
|
|
||||||
'Sub Process (collapsed)': '子流程（折叠的）',
|
|
||||||
'Sub Process (expanded)': '子流程（展开的）',
|
|
||||||
'Start Event': '开始事件',
|
|
||||||
StartEvent: '开始事件',
|
|
||||||
'Intermediate Throw Event': '中间事件',
|
|
||||||
'End Event': '结束事件',
|
|
||||||
EndEvent: '结束事件',
|
|
||||||
'Create StartEvent': '创建开始事件',
|
|
||||||
'Create EndEvent': '创建结束事件',
|
|
||||||
'Create Task': '创建任务',
|
|
||||||
'Create User Task': '创建用户任务',
|
|
||||||
'Create Gateway': '创建网关',
|
|
||||||
'Create DataObjectReference': '创建数据对象',
|
|
||||||
'Create DataStoreReference': '创建数据存储',
|
|
||||||
'Create Group': '创建分组',
|
|
||||||
'Create Intermediate/Boundary Event': '创建中间/边界事件',
|
|
||||||
'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)': '升级开始事件（非中断）',
|
|
||||||
'Message Intermediate Catch Event': '消息中间捕获事件',
|
|
||||||
'Message Intermediate Throw Event': '消息中间抛出事件',
|
|
||||||
'Timer Intermediate Catch Event': '定时中间捕获事件',
|
|
||||||
'Escalation Intermediate Throw Event': '升级中间抛出事件',
|
|
||||||
'Conditional Intermediate Catch Event': '条件中间捕获事件',
|
|
||||||
'Link Intermediate Catch Event': '链接中间捕获事件',
|
|
||||||
'Link Intermediate Throw Event': '链接中间抛出事件',
|
|
||||||
'Compensation Intermediate Throw Event': '补偿中间抛出事件',
|
|
||||||
'Signal Intermediate Catch Event': '信号中间捕获事件',
|
|
||||||
'Signal Intermediate Throw Event': '信号中间抛出事件',
|
|
||||||
'Message End Event': '消息结束事件',
|
|
||||||
'Escalation End Event': '定时结束事件',
|
|
||||||
'Error End Event': '错误结束事件',
|
|
||||||
'Cancel End Event': '取消结束事件',
|
|
||||||
'Compensation End Event': '补偿结束事件',
|
|
||||||
'Signal End Event': '信号结束事件',
|
|
||||||
'Terminate End Event': '终止结束事件',
|
|
||||||
'Message Boundary Event': '消息边界事件',
|
|
||||||
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
|
|
||||||
'Timer Boundary Event': '定时边界事件',
|
|
||||||
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
|
|
||||||
'Escalation Boundary Event': '升级边界事件',
|
|
||||||
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
|
|
||||||
'Conditional Boundary Event': '条件边界事件',
|
|
||||||
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
|
|
||||||
'Error Boundary Event': '错误边界事件',
|
|
||||||
'Cancel Boundary Event': '取消边界事件',
|
|
||||||
'Signal Boundary Event': '信号边界事件',
|
|
||||||
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
|
|
||||||
'Compensation Boundary Event': '补偿边界事件',
|
|
||||||
'Exclusive Gateway': '互斥网关',
|
|
||||||
'Parallel Gateway': '并行网关',
|
|
||||||
'Inclusive Gateway': '相容网关',
|
|
||||||
'Complex Gateway': '复杂网关',
|
|
||||||
'Event based Gateway': '事件网关',
|
|
||||||
Transaction: '转运',
|
|
||||||
'Sub Process': '子流程',
|
|
||||||
'Event Sub Process': '事件子流程',
|
|
||||||
'Collapsed Pool': '折叠池',
|
|
||||||
'Expanded Pool': '展开池',
|
|
||||||
|
|
||||||
// Errors
|
|
||||||
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
|
|
||||||
'no shape type specified': '没有指定的形状类型',
|
|
||||||
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
|
|
||||||
'out of bounds release': 'out of bounds release',
|
|
||||||
'more than {count} child lanes': '子道大于{count} ',
|
|
||||||
'element required': '元素不能为空',
|
|
||||||
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
|
|
||||||
'no diagram to display': '没有可展示的流程图',
|
|
||||||
'no process or collaboration to display': '没有可展示的流程/协作',
|
|
||||||
'element {element} referenced by {referenced}#{property} not yet drawn':
|
|
||||||
'由{referenced}#{property}引用的{element}元素仍未绘制',
|
|
||||||
'already rendered {element}': '{element} 已被渲染',
|
|
||||||
'failed to import {element}': '导入{element}失败',
|
|
||||||
//属性面板的参数
|
|
||||||
Id: '编号',
|
|
||||||
Name: '名称',
|
|
||||||
General: '常规',
|
|
||||||
Details: '详情',
|
|
||||||
'Message Name': '消息名称',
|
|
||||||
Message: '消息',
|
|
||||||
Initiator: '创建者',
|
|
||||||
'Asynchronous Continuations': '持续异步',
|
|
||||||
'Asynchronous Before': '异步前',
|
|
||||||
'Asynchronous After': '异步后',
|
|
||||||
'Job Configuration': '工作配置',
|
|
||||||
Exclusive: '排除',
|
|
||||||
'Job Priority': '工作优先级',
|
|
||||||
'Retry Time Cycle': '重试时间周期',
|
|
||||||
Documentation: '文档',
|
|
||||||
'Element Documentation': '元素文档',
|
|
||||||
'History Configuration': '历史配置',
|
|
||||||
'History Time To Live': '历史的生存时间',
|
|
||||||
Forms: '表单',
|
|
||||||
'Form Key': '表单key',
|
|
||||||
'Form Fields': '表单字段',
|
|
||||||
'Business Key': '业务key',
|
|
||||||
'Form Field': '表单字段',
|
|
||||||
ID: '编号',
|
|
||||||
Type: '类型',
|
|
||||||
Label: '名称',
|
|
||||||
'Default Value': '默认值',
|
|
||||||
'Default Flow': '默认流转路径',
|
|
||||||
'Conditional Flow': '条件流转路径',
|
|
||||||
'Sequence Flow': '普通流转路径',
|
|
||||||
Validation: '校验',
|
|
||||||
'Add Constraint': '添加约束',
|
|
||||||
Config: '配置',
|
|
||||||
Properties: '属性',
|
|
||||||
'Add Property': '添加属性',
|
|
||||||
Value: '值',
|
|
||||||
Listeners: '监听器',
|
|
||||||
'Execution Listener': '执行监听',
|
|
||||||
'Event Type': '事件类型',
|
|
||||||
'Listener Type': '监听器类型',
|
|
||||||
'Java Class': 'Java类',
|
|
||||||
Expression: '表达式',
|
|
||||||
'Must provide a value': '必须提供一个值',
|
|
||||||
'Delegate Expression': '代理表达式',
|
|
||||||
Script: '脚本',
|
|
||||||
'Script Format': '脚本格式',
|
|
||||||
'Script Type': '脚本类型',
|
|
||||||
'Inline Script': '内联脚本',
|
|
||||||
'External Script': '外部脚本',
|
|
||||||
Resource: '资源',
|
|
||||||
'Field Injection': '字段注入',
|
|
||||||
Extensions: '扩展',
|
|
||||||
'Input/Output': '输入/输出',
|
|
||||||
'Input Parameters': '输入参数',
|
|
||||||
'Output Parameters': '输出参数',
|
|
||||||
Parameters: '参数',
|
|
||||||
'Output Parameter': '输出参数',
|
|
||||||
'Timer Definition Type': '定时器定义类型',
|
|
||||||
'Timer Definition': '定时器定义',
|
|
||||||
Date: '日期',
|
|
||||||
Duration: '持续',
|
|
||||||
Cycle: '循环',
|
|
||||||
Signal: '信号',
|
|
||||||
'Signal Name': '信号名称',
|
|
||||||
Escalation: '升级',
|
|
||||||
Error: '错误',
|
|
||||||
'Link Name': '链接名称',
|
|
||||||
Condition: '条件名称',
|
|
||||||
'Variable Name': '变量名称',
|
|
||||||
'Variable Event': '变量事件',
|
|
||||||
'Specify more than one variable change event as a comma separated list.':
|
|
||||||
'多个变量事件以逗号隔开',
|
|
||||||
'Wait for Completion': '等待完成',
|
|
||||||
'Activity Ref': '活动参考',
|
|
||||||
'Version Tag': '版本标签',
|
|
||||||
Executable: '可执行文件',
|
|
||||||
'External Task Configuration': '扩展任务配置',
|
|
||||||
'Task Priority': '任务优先级',
|
|
||||||
External: '外部',
|
|
||||||
Connector: '连接器',
|
|
||||||
'Must configure Connector': '必须配置连接器',
|
|
||||||
'Connector Id': '连接器编号',
|
|
||||||
Implementation: '实现方式',
|
|
||||||
'Field Injections': '字段注入',
|
|
||||||
Fields: '字段',
|
|
||||||
'Result Variable': '结果变量',
|
|
||||||
Topic: '主题',
|
|
||||||
'Configure Connector': '配置连接器',
|
|
||||||
'Input Parameter': '输入参数',
|
|
||||||
Assignee: '代理人',
|
|
||||||
'Candidate Users': '候选用户',
|
|
||||||
'Candidate Groups': '候选组',
|
|
||||||
'Due Date': '到期时间',
|
|
||||||
'Follow Up Date': '跟踪日期',
|
|
||||||
Priority: '优先级',
|
|
||||||
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
|
|
||||||
'跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
|
||||||
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
|
|
||||||
'跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
|
||||||
Variables: '变量',
|
|
||||||
'Candidate Starter Configuration': '候选人起动器配置',
|
|
||||||
'Candidate Starter Groups': '候选人起动器组',
|
|
||||||
'This maps to the process definition key.': '这映射到流程定义键。',
|
|
||||||
'Candidate Starter Users': '候选人起动器的用户',
|
|
||||||
'Specify more than one user as a comma separated list.': '指定多个用户作为逗号分隔的列表。',
|
|
||||||
'Tasklist Configuration': 'Tasklist配置',
|
|
||||||
Startable: '启动',
|
|
||||||
'Specify more than one group as a comma separated list.': '指定多个组作为逗号分隔的列表。'
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
import MyProcessDesigner from './designer'
|
|
||||||
import MyProcessPenal from './penal'
|
|
||||||
import MyProcessViewer from './designer/index2'
|
|
||||||
|
|
||||||
import './theme/index.scss'
|
|
||||||
import 'bpmn-js/dist/assets/diagram-js.css'
|
|
||||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
|
|
||||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
|
|
||||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
|
|
||||||
|
|
||||||
export { MyProcessDesigner, MyProcessPenal, MyProcessViewer }
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<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 lang="ts" setup>
|
|
||||||
import { assign } from 'min-dash'
|
|
||||||
|
|
||||||
defineOptions({ name: 'MyProcessPalette' })
|
|
||||||
|
|
||||||
const bpmnInstances = () => (window as any).bpmnInstances
|
|
||||||
const addTask = (event, options: any = {}) => {
|
|
||||||
const ElementFactory = bpmnInstances().elementFactory
|
|
||||||
const create = 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 {
|
|
||||||
padding: 80px 20px 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.test-button {
|
|
||||||
padding: 8px 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid rgb(24 144 255 / 80%);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,206 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="process-panel__container" :style="{ width: `${width}px` }">
|
|
||||||
<el-collapse v-model="activeTab">
|
|
||||||
<el-collapse-item name="base">
|
|
||||||
<!-- class="panel-tab__title" -->
|
|
||||||
<template #title>
|
|
||||||
<Icon icon="ep:info-filled" />
|
|
||||||
常规</template
|
|
||||||
>
|
|
||||||
<ElementBaseInfo
|
|
||||||
:id-edit-disabled="idEditDisabled"
|
|
||||||
:business-object="elementBusinessObject"
|
|
||||||
:type="elementType"
|
|
||||||
:model="model"
|
|
||||||
/>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
|
|
||||||
<template #title><Icon icon="ep:comment" />消息与信号</template>
|
|
||||||
<signal-and-massage />
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
|
|
||||||
<template #title><Icon icon="ep:promotion" />流转条件</template>
|
|
||||||
<flow-condition :business-object="elementBusinessObject" :type="elementType" />
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="condition" v-if="formVisible" key="form">
|
|
||||||
<template #title><Icon icon="ep:list" />表单</template>
|
|
||||||
<element-form :id="elementId" :type="elementType" />
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
|
|
||||||
<template #title><Icon icon="ep:checked" />任务（审批人）</template>
|
|
||||||
<element-task :id="elementId" :type="elementType" />
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item
|
|
||||||
name="multiInstance"
|
|
||||||
v-if="elementType.indexOf('Task') !== -1"
|
|
||||||
key="multiInstance"
|
|
||||||
>
|
|
||||||
<template #title><Icon icon="ep:help-filled" />多实例（会签配置）</template>
|
|
||||||
<element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="listeners" key="listeners">
|
|
||||||
<template #title><Icon icon="ep:bell-filled" />执行监听器</template>
|
|
||||||
<element-listeners :id="elementId" :type="elementType" />
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
|
|
||||||
<template #title><Icon icon="ep:bell-filled" />任务监听器</template>
|
|
||||||
<user-task-listeners :id="elementId" :type="elementType" />
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="extensions" key="extensions">
|
|
||||||
<template #title><Icon icon="ep:circle-plus-filled" />扩展属性</template>
|
|
||||||
<element-properties :id="elementId" :type="elementType" />
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="other" key="other">
|
|
||||||
<template #title><Icon icon="ep:promotion" />其他</template>
|
|
||||||
<element-other-config :id="elementId" />
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import ElementBaseInfo from './base/ElementBaseInfo.vue'
|
|
||||||
import ElementOtherConfig from './other/ElementOtherConfig.vue'
|
|
||||||
import ElementTask from './task/ElementTask.vue'
|
|
||||||
import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
|
|
||||||
import FlowCondition from './flow-condition/FlowCondition.vue'
|
|
||||||
import SignalAndMassage from './signal-message/SignalAndMessage.vue'
|
|
||||||
import ElementListeners from './listeners/ElementListeners.vue'
|
|
||||||
import ElementProperties from './properties/ElementProperties.vue'
|
|
||||||
// import ElementForm from './form/ElementForm.vue'
|
|
||||||
import UserTaskListeners from './listeners/UserTaskListeners.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'MyPropertiesPanel' })
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 侧边栏
|
|
||||||
* @Author MiyueFE
|
|
||||||
* @Home https://github.com/miyuesc
|
|
||||||
* @Date 2021年3月31日18:57:51
|
|
||||||
*/
|
|
||||||
const props = defineProps({
|
|
||||||
bpmnModeler: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
},
|
|
||||||
prefix: {
|
|
||||||
type: String,
|
|
||||||
default: 'camunda'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: Number,
|
|
||||||
default: 480
|
|
||||||
},
|
|
||||||
idEditDisabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
model: Object // 流程模型的数据
|
|
||||||
})
|
|
||||||
|
|
||||||
const activeTab = ref('base')
|
|
||||||
const elementId = ref('')
|
|
||||||
const elementType = ref('')
|
|
||||||
const elementBusinessObject = ref<any>({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用
|
|
||||||
const conditionFormVisible = ref(false) // 流转条件设置
|
|
||||||
const formVisible = ref(false) // 表单配置
|
|
||||||
const bpmnElement = ref()
|
|
||||||
|
|
||||||
provide('prefix', props.prefix)
|
|
||||||
provide('width', props.width)
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
|
|
||||||
// 监听 props.bpmnModeler 然后 initModels
|
|
||||||
const unwatchBpmn = watch(
|
|
||||||
() => props.bpmnModeler,
|
|
||||||
() => {
|
|
||||||
// 避免加载时 流程图 并未加载完成
|
|
||||||
if (!props.bpmnModeler) {
|
|
||||||
console.log('缺少props.bpmnModeler')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('props.bpmnModeler 有值了！！！')
|
|
||||||
const w = window as any
|
|
||||||
w.bpmnInstances = {
|
|
||||||
modeler: props.bpmnModeler,
|
|
||||||
modeling: props.bpmnModeler.get('modeling'),
|
|
||||||
moddle: props.bpmnModeler.get('moddle'),
|
|
||||||
eventBus: props.bpmnModeler.get('eventBus'),
|
|
||||||
bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
|
|
||||||
elementFactory: props.bpmnModeler.get('elementFactory'),
|
|
||||||
elementRegistry: props.bpmnModeler.get('elementRegistry'),
|
|
||||||
replace: props.bpmnModeler.get('replace'),
|
|
||||||
selection: props.bpmnModeler.get('selection')
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(bpmnInstances(), 'window.bpmnInstances')
|
|
||||||
getActiveElement()
|
|
||||||
unwatchBpmn()
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const getActiveElement = () => {
|
|
||||||
// 初始第一个选中元素 bpmn:Process
|
|
||||||
initFormOnChanged(null)
|
|
||||||
props.bpmnModeler.on('import.done', (e) => {
|
|
||||||
console.log(e, 'eeeee')
|
|
||||||
initFormOnChanged(null)
|
|
||||||
})
|
|
||||||
// 监听选择事件，修改当前激活的元素以及表单
|
|
||||||
props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
|
|
||||||
initFormOnChanged(newSelection[0] || null)
|
|
||||||
})
|
|
||||||
props.bpmnModeler.on('element.changed', ({ element }) => {
|
|
||||||
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
|
|
||||||
if (element && element.id === elementId.value) {
|
|
||||||
initFormOnChanged(element)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 初始化数据
|
|
||||||
const initFormOnChanged = (element) => {
|
|
||||||
let activatedElement = element
|
|
||||||
if (!activatedElement) {
|
|
||||||
activatedElement =
|
|
||||||
bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Process') ??
|
|
||||||
bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration')
|
|
||||||
}
|
|
||||||
if (!activatedElement) return
|
|
||||||
console.log(`
|
|
||||||
----------
|
|
||||||
select element changed:
|
|
||||||
id: ${activatedElement.id}
|
|
||||||
type: ${activatedElement.businessObject.$type}
|
|
||||||
----------
|
|
||||||
`)
|
|
||||||
console.log('businessObject: ', activatedElement.businessObject)
|
|
||||||
bpmnInstances().bpmnElement = activatedElement
|
|
||||||
bpmnElement.value = activatedElement
|
|
||||||
elementId.value = activatedElement.id
|
|
||||||
elementType.value = activatedElement.type.split(':')[1] || ''
|
|
||||||
elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
|
|
||||||
conditionFormVisible.value = !!(
|
|
||||||
elementType.value === 'SequenceFlow' &&
|
|
||||||
activatedElement.source &&
|
|
||||||
activatedElement.source.type.indexOf('StartEvent') === -1
|
|
||||||
)
|
|
||||||
formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
|
|
||||||
}
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
const w = window as any
|
|
||||||
w.bpmnInstances = null
|
|
||||||
console.log(props, 'props1')
|
|
||||||
console.log(props.bpmnModeler, 'props.bpmnModeler1')
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => elementId.value,
|
|
||||||
() => {
|
|
||||||
activeTab.value = 'base'
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,180 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<el-form label-width="90px" :model="needProps" :rules="rules">
|
|
||||||
<div v-if="needProps.type == 'bpmn:Process'">
|
|
||||||
<!-- 如果是 Process 信息的时候，使用自定义表单 -->
|
|
||||||
<el-form-item label="流程标识" prop="id">
|
|
||||||
<el-input
|
|
||||||
v-model="needProps.id"
|
|
||||||
placeholder="请输入流标标识"
|
|
||||||
:disabled="needProps.id !== undefined && needProps.id.length > 0"
|
|
||||||
@change="handleKeyUpdate"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="流程名称" prop="name">
|
|
||||||
<el-input
|
|
||||||
v-model="needProps.name"
|
|
||||||
placeholder="请输入流程名称"
|
|
||||||
clearable
|
|
||||||
@change="handleNameUpdate"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<el-form-item label="ID">
|
|
||||||
<el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="名称">
|
|
||||||
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({ name: 'ElementBaseInfo' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
businessObject: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
},
|
|
||||||
model: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const needProps = ref<any>({})
|
|
||||||
const bpmnElement = ref()
|
|
||||||
const elementBaseInfo = ref<any>({})
|
|
||||||
// 流程表单的下拉框的数据
|
|
||||||
// const forms = ref([])
|
|
||||||
// 流程模型的校验
|
|
||||||
const rules = reactive({
|
|
||||||
id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
|
|
||||||
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
const resetBaseInfo = () => {
|
|
||||||
console.log(window, 'window')
|
|
||||||
console.log(bpmnElement.value, 'bpmnElement')
|
|
||||||
|
|
||||||
bpmnElement.value = bpmnInstances()?.bpmnElement
|
|
||||||
// console.log(bpmnElement.value, 'resetBaseInfo11111111111')
|
|
||||||
elementBaseInfo.value = bpmnElement.value.businessObject
|
|
||||||
needProps.value['type'] = bpmnElement.value.businessObject.$type
|
|
||||||
// elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
|
|
||||||
|
|
||||||
// elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
|
|
||||||
// console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
|
|
||||||
}
|
|
||||||
const handleKeyUpdate = (value) => {
|
|
||||||
// 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
|
|
||||||
if (!value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
|
|
||||||
console.log('key 不满足 XML NCName 规则，所以不进行赋值')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
console.log('key 满足 XML NCName 规则，所以进行赋值')
|
|
||||||
|
|
||||||
// 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
|
|
||||||
elementBaseInfo.value['id'] = value
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
updateBaseInfo('id')
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
const handleNameUpdate = (value) => {
|
|
||||||
console.log(elementBaseInfo, 'elementBaseInfo')
|
|
||||||
if (!value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
elementBaseInfo.value['name'] = value
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
updateBaseInfo('name')
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
// const handleDescriptionUpdate=(value)=> {
|
|
||||||
// TODO 芋艿：documentation 暂时无法修改，后续在看看
|
|
||||||
// this.elementBaseInfo['documentation'] = value;
|
|
||||||
// this.updateBaseInfo('documentation');
|
|
||||||
// }
|
|
||||||
const updateBaseInfo = (key) => {
|
|
||||||
console.log(key, 'key')
|
|
||||||
// 触发 elementBaseInfo 对应的字段
|
|
||||||
const attrObj = Object.create(null)
|
|
||||||
// console.log(attrObj, 'attrObj')
|
|
||||||
attrObj[key] = elementBaseInfo.value[key]
|
|
||||||
// console.log(attrObj, 'attrObj111')
|
|
||||||
// const attrObj = {
|
|
||||||
// id: elementBaseInfo.value[key]
|
|
||||||
// // di: { id: `${elementBaseInfo.value[key]}_di` }
|
|
||||||
// }
|
|
||||||
// console.log(elementBaseInfo, 'elementBaseInfo11111111111')
|
|
||||||
needProps.value = { ...elementBaseInfo.value, ...needProps.value }
|
|
||||||
|
|
||||||
if (key === 'id') {
|
|
||||||
// console.log('jinru')
|
|
||||||
console.log(window, 'window')
|
|
||||||
console.log(bpmnElement.value, 'bpmnElement')
|
|
||||||
console.log(toRaw(bpmnElement.value), 'bpmnElement')
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
id: elementBaseInfo.value[key],
|
|
||||||
di: { id: `${elementBaseInfo.value[key]}_di` }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
console.log(attrObj, 'attrObj')
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.businessObject,
|
|
||||||
(val) => {
|
|
||||||
// console.log(val, 'val11111111111111111111')
|
|
||||||
if (val) {
|
|
||||||
// nextTick(() => {
|
|
||||||
resetBaseInfo()
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.model?.key,
|
|
||||||
(val) => {
|
|
||||||
// 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
|
|
||||||
if (val) {
|
|
||||||
handleKeyUpdate(props.model.key)
|
|
||||||
handleNameUpdate(props.model.name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
// watch(
|
|
||||||
// () => ({ ...props }),
|
|
||||||
// (oldVal, newVal) => {
|
|
||||||
// console.log(oldVal, 'oldVal')
|
|
||||||
// console.log(newVal, 'newVal')
|
|
||||||
// if (newVal) {
|
|
||||||
// needProps.value = newVal
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// immediate: true
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
// 'model.key': {
|
|
||||||
// immediate: false,
|
|
||||||
// handler: function (val) {
|
|
||||||
// this.handleKeyUpdate(val)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
bpmnElement.value = null
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,191 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<el-form :model="flowConditionForm" label-width="90px" size="small">
|
|
||||||
<el-form-item label="流转类型">
|
|
||||||
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
|
|
||||||
<el-option label="普通流转路径" value="normal" />
|
|
||||||
<el-option label="默认流转路径" value="default" />
|
|
||||||
<el-option label="条件流转路径" value="condition" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
|
|
||||||
<el-select v-model="flowConditionForm.conditionType">
|
|
||||||
<el-option label="表达式" value="expression" />
|
|
||||||
<el-option label="脚本" value="script" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="表达式"
|
|
||||||
v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'"
|
|
||||||
key="express"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="flowConditionForm.body"
|
|
||||||
style="width: 192px"
|
|
||||||
clearable
|
|
||||||
@change="updateFlowCondition"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<template
|
|
||||||
v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'"
|
|
||||||
>
|
|
||||||
<el-form-item label="脚本语言" key="language">
|
|
||||||
<el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="脚本类型" key="scriptType">
|
|
||||||
<el-select v-model="flowConditionForm.scriptType">
|
|
||||||
<el-option label="内联脚本" value="inlineScript" />
|
|
||||||
<el-option label="外部脚本" value="externalScript" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="脚本"
|
|
||||||
v-if="flowConditionForm.scriptType === 'inlineScript'"
|
|
||||||
key="body"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="flowConditionForm.body"
|
|
||||||
type="textarea"
|
|
||||||
clearable
|
|
||||||
@change="updateFlowCondition"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="资源地址"
|
|
||||||
v-if="flowConditionForm.scriptType === 'externalScript'"
|
|
||||||
key="resource"
|
|
||||||
>
|
|
||||||
<el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({ name: 'FlowCondition' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
businessObject: Object,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
const flowConditionForm = ref<any>({})
|
|
||||||
const bpmnElement = ref()
|
|
||||||
const bpmnElementSource = ref()
|
|
||||||
const bpmnElementSourceRef = ref()
|
|
||||||
const flowConditionRef = ref()
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
const resetFlowCondition = () => {
|
|
||||||
bpmnElement.value = bpmnInstances().bpmnElement
|
|
||||||
bpmnElementSource.value = bpmnElement.value.source
|
|
||||||
bpmnElementSourceRef.value = bpmnElement.value.businessObject.sourceRef
|
|
||||||
// 初始化默认type为default
|
|
||||||
flowConditionForm.value = { type: 'default' }
|
|
||||||
if (
|
|
||||||
bpmnElementSourceRef.value &&
|
|
||||||
bpmnElementSourceRef.value.default &&
|
|
||||||
bpmnElementSourceRef.value.default.id === bpmnElement.value.id
|
|
||||||
) {
|
|
||||||
flowConditionForm.value = { type: 'default' }
|
|
||||||
} else if (!bpmnElement.value.businessObject.conditionExpression) {
|
|
||||||
// 普通
|
|
||||||
flowConditionForm.value = { type: 'normal' }
|
|
||||||
} else {
|
|
||||||
// 带条件
|
|
||||||
const conditionExpression = bpmnElement.value.businessObject.conditionExpression
|
|
||||||
flowConditionForm.value = { ...conditionExpression, type: 'condition' }
|
|
||||||
// resource 可直接标识 是否是外部资源脚本
|
|
||||||
if (flowConditionForm.value.resource) {
|
|
||||||
// this.$set(this.flowConditionForm, "conditionType", "script");
|
|
||||||
// this.$set(this.flowConditionForm, "scriptType", "externalScript");
|
|
||||||
flowConditionForm.value['conditionType'] = 'script'
|
|
||||||
flowConditionForm.value['scriptType'] = 'externalScript'
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (conditionExpression.language) {
|
|
||||||
// this.$set(this.flowConditionForm, "conditionType", "script");
|
|
||||||
// this.$set(this.flowConditionForm, "scriptType", "inlineScript");
|
|
||||||
flowConditionForm.value['conditionType'] = 'script'
|
|
||||||
flowConditionForm.value['scriptType'] = 'inlineScript'
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// this.$set(this.flowConditionForm, "conditionType", "expression");
|
|
||||||
flowConditionForm.value['conditionType'] = 'expression'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const updateFlowType = (flowType) => {
|
|
||||||
// 正常条件类
|
|
||||||
if (flowType === 'condition') {
|
|
||||||
flowConditionRef.value = bpmnInstances().moddle.create('bpmn:FormalExpression')
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
conditionExpression: flowConditionRef.value
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 默认路径
|
|
||||||
if (flowType === 'default') {
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
conditionExpression: null
|
|
||||||
})
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
|
|
||||||
default: bpmnElement.value
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
|
|
||||||
if (
|
|
||||||
bpmnElementSourceRef.value.default &&
|
|
||||||
bpmnElementSourceRef.value.default.id === bpmnElement.value.id
|
|
||||||
) {
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
|
|
||||||
default: null
|
|
||||||
})
|
|
||||||
}
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
conditionExpression: null
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const updateFlowCondition = () => {
|
|
||||||
let { conditionType, scriptType, body, resource, language } = flowConditionForm.value
|
|
||||||
let condition
|
|
||||||
if (conditionType === 'expression') {
|
|
||||||
condition = bpmnInstances().moddle.create('bpmn:FormalExpression', { body })
|
|
||||||
} else {
|
|
||||||
if (scriptType === 'inlineScript') {
|
|
||||||
condition = bpmnInstances().moddle.create('bpmn:FormalExpression', { body, language })
|
|
||||||
// this.$set(this.flowConditionForm, "resource", "");
|
|
||||||
flowConditionForm.value['resource'] = ''
|
|
||||||
} else {
|
|
||||||
// this.$set(this.flowConditionForm, "body", "");
|
|
||||||
flowConditionForm.value['body'] = ''
|
|
||||||
condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
|
||||||
resource,
|
|
||||||
language
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
conditionExpression: condition
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
bpmnElement.value = null
|
|
||||||
bpmnElementSource.value = null
|
|
||||||
bpmnElementSourceRef.value = null
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.businessObject,
|
|
||||||
(val) => {
|
|
||||||
console.log(val, 'val')
|
|
||||||
nextTick(() => {
|
|
||||||
resetFlowCondition()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,478 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<el-form label-width="80px">
|
|
||||||
<el-form-item label="流程表单">
|
|
||||||
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
|
|
||||||
<el-select v-model="formKey" clearable @change="updateElementFormKey">
|
|
||||||
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item label="业务标识">-->
|
|
||||||
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
|
|
||||||
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
|
|
||||||
<!-- <el-option label="无" value="" />-->
|
|
||||||
<!-- </el-select>-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<!--字段列表-->
|
|
||||||
<!-- <div class="element-property list-property">-->
|
|
||||||
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
|
|
||||||
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
|
|
||||||
<!-- <el-table-column label="序号" type="index" width="50px" />-->
|
|
||||||
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="字段类型"-->
|
|
||||||
<!-- prop="type"-->
|
|
||||||
<!-- min-width="80px"-->
|
|
||||||
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
|
|
||||||
<!-- show-overflow-tooltip-->
|
|
||||||
<!-- />-->
|
|
||||||
<!-- <el-table-column-->
|
|
||||||
<!-- label="默认值"-->
|
|
||||||
<!-- prop="defaultValue"-->
|
|
||||||
<!-- min-width="80px"-->
|
|
||||||
<!-- show-overflow-tooltip-->
|
|
||||||
<!-- />-->
|
|
||||||
<!-- <el-table-column label="操作" width="90px">-->
|
|
||||||
<!-- <template #default="scope">-->
|
|
||||||
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
|
|
||||||
<!-- >编辑</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <el-divider direction="vertical" />-->
|
|
||||||
<!-- <el-button-->
|
|
||||||
<!-- type="primary"-->
|
|
||||||
<!-- link-->
|
|
||||||
<!-- style="color: #ff4d4f"-->
|
|
||||||
<!-- @click="removeField(scope, scope.$index)"-->
|
|
||||||
<!-- >移除</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
<!-- </el-table>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div class="element-drawer__button">-->
|
|
||||||
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!--字段配置侧边栏-->
|
|
||||||
<!-- <el-drawer-->
|
|
||||||
<!-- v-model="fieldModelVisible"-->
|
|
||||||
<!-- title="字段配置"-->
|
|
||||||
<!-- :size="`${width}px`"-->
|
|
||||||
<!-- append-to-body-->
|
|
||||||
<!-- destroy-on-close-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <el-form :model="formFieldForm" label-width="90px">-->
|
|
||||||
<!-- <el-form-item label="字段ID">-->
|
|
||||||
<!-- <el-input v-model="formFieldForm.id" clearable />-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- <el-form-item label="类型">-->
|
|
||||||
<!-- <el-select-->
|
|
||||||
<!-- v-model="formFieldForm.typeType"-->
|
|
||||||
<!-- placeholder="请选择字段类型"-->
|
|
||||||
<!-- clearable-->
|
|
||||||
<!-- @change="changeFieldTypeType"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
|
|
||||||
<!-- </el-select>-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
|
|
||||||
<!-- <el-input v-model="formFieldForm.type" clearable />-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- <el-form-item label="名称">-->
|
|
||||||
<!-- <el-input v-model="formFieldForm.label" clearable />-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
|
|
||||||
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- <el-form-item label="默认值">-->
|
|
||||||
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- </el-form>-->
|
|
||||||
|
|
||||||
<!-- <!– 枚举值设置 –>-->
|
|
||||||
<!-- <template v-if="formFieldForm.type === 'enum'">-->
|
|
||||||
<!-- <el-divider key="enum-divider" />-->
|
|
||||||
<!-- <p class="listener-filed__title" key="enum-title">-->
|
|
||||||
<!-- <span><Icon icon="ep:menu" />枚举值列表：</span>-->
|
|
||||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
|
|
||||||
<!-- >添加枚举值</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- </p>-->
|
|
||||||
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
|
|
||||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
|
||||||
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
|
||||||
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
|
||||||
<!-- <el-table-column label="操作" width="90px">-->
|
|
||||||
<!-- <template #default="scope">-->
|
|
||||||
<!-- <el-button-->
|
|
||||||
<!-- type="primary"-->
|
|
||||||
<!-- link-->
|
|
||||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
|
|
||||||
<!-- >编辑</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <el-divider direction="vertical" />-->
|
|
||||||
<!-- <el-button-->
|
|
||||||
<!-- type="primary"-->
|
|
||||||
<!-- link-->
|
|
||||||
<!-- style="color: #ff4d4f"-->
|
|
||||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
|
|
||||||
<!-- >移除</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
<!-- </el-table>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
|
|
||||||
<!-- <!– 校验规则 –>-->
|
|
||||||
<!-- <el-divider key="validation-divider" />-->
|
|
||||||
<!-- <p class="listener-filed__title" key="validation-title">-->
|
|
||||||
<!-- <span><Icon icon="ep:menu" />约束条件列表：</span>-->
|
|
||||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
|
|
||||||
<!-- >添加约束</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- </p>-->
|
|
||||||
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
|
|
||||||
<!-- <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="config" min-width="100px" show-overflow-tooltip />-->
|
|
||||||
<!-- <el-table-column label="操作" width="90px">-->
|
|
||||||
<!-- <template #default="scope">-->
|
|
||||||
<!-- <el-button-->
|
|
||||||
<!-- type="primary"-->
|
|
||||||
<!-- link-->
|
|
||||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
|
|
||||||
<!-- >编辑</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <el-divider direction="vertical" />-->
|
|
||||||
<!-- <el-button-->
|
|
||||||
<!-- type="primary"-->
|
|
||||||
<!-- link-->
|
|
||||||
<!-- style="color: #ff4d4f"-->
|
|
||||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
|
|
||||||
<!-- >移除</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
<!-- </el-table>-->
|
|
||||||
|
|
||||||
<!-- <!– 表单属性 –>-->
|
|
||||||
<!-- <el-divider key="property-divider" />-->
|
|
||||||
<!-- <p class="listener-filed__title" key="property-title">-->
|
|
||||||
<!-- <span><Icon icon="ep:menu" />字段属性列表：</span>-->
|
|
||||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
|
|
||||||
<!-- >添加属性</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- </p>-->
|
|
||||||
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
|
|
||||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
|
||||||
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
|
||||||
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
|
|
||||||
<!-- <el-table-column label="操作" width="90px">-->
|
|
||||||
<!-- <template #default="scope">-->
|
|
||||||
<!-- <el-button-->
|
|
||||||
<!-- type="primary"-->
|
|
||||||
<!-- link-->
|
|
||||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
|
|
||||||
<!-- >编辑</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <el-divider direction="vertical" />-->
|
|
||||||
<!-- <el-button-->
|
|
||||||
<!-- type="primary"-->
|
|
||||||
<!-- link-->
|
|
||||||
<!-- style="color: #ff4d4f"-->
|
|
||||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
|
|
||||||
<!-- >移除</el-button-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>-->
|
|
||||||
<!-- </el-table>-->
|
|
||||||
|
|
||||||
<!-- <!– 底部按钮 –>-->
|
|
||||||
<!-- <div class="element-drawer__button">-->
|
|
||||||
<!-- <el-button>取 消</el-button>-->
|
|
||||||
<!-- <el-button type="primary" @click="saveField">保 存</el-button>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </el-drawer>-->
|
|
||||||
|
|
||||||
<!-- <el-dialog-->
|
|
||||||
<!-- v-model="fieldOptionModelVisible"-->
|
|
||||||
<!-- :title="optionModelTitle"-->
|
|
||||||
<!-- width="600px"-->
|
|
||||||
<!-- append-to-body-->
|
|
||||||
<!-- destroy-on-close-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
|
|
||||||
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
|
|
||||||
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
|
|
||||||
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
|
|
||||||
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
|
|
||||||
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<!-- </el-form>-->
|
|
||||||
<!-- <template #footer>-->
|
|
||||||
<!-- <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
|
|
||||||
<!-- <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-dialog>-->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import * as FormApi from '@/api/bpm/form'
|
|
||||||
|
|
||||||
defineOptions({ name: 'ElementForm' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
id: String,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
const prefix = inject('prefix')
|
|
||||||
const width = inject('width')
|
|
||||||
|
|
||||||
const formKey = ref('')
|
|
||||||
const businessKey = ref('')
|
|
||||||
const optionModelTitle = ref('')
|
|
||||||
const fieldList = ref<any[]>([])
|
|
||||||
const formFieldForm = ref<any>({})
|
|
||||||
const fieldType = ref({
|
|
||||||
long: '长整型',
|
|
||||||
string: '字符串',
|
|
||||||
boolean: '布尔类',
|
|
||||||
date: '日期类',
|
|
||||||
enum: '枚举类',
|
|
||||||
custom: '自定义类型'
|
|
||||||
})
|
|
||||||
const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
|
|
||||||
const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
|
|
||||||
const fieldModelVisible = ref(false)
|
|
||||||
const fieldOptionModelVisible = ref(false)
|
|
||||||
const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
|
|
||||||
const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
|
|
||||||
const fieldEnumList = ref<any[]>([]) // 枚举值列表
|
|
||||||
const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
|
|
||||||
const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
|
|
||||||
const bpmnELement = ref()
|
|
||||||
const elExtensionElements = ref()
|
|
||||||
const formData = ref()
|
|
||||||
const otherExtensions = ref()
|
|
||||||
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
const resetFormList = () => {
|
|
||||||
bpmnELement.value = bpmnInstances().bpmnElement
|
|
||||||
formKey.value = bpmnELement.value.businessObject.formKey
|
|
||||||
if (formKey.value?.length > 0) {
|
|
||||||
formKey.value = parseInt(formKey.value)
|
|
||||||
}
|
|
||||||
// 获取元素扩展属性 或者 创建扩展属性
|
|
||||||
elExtensionElements.value =
|
|
||||||
bpmnELement.value.businessObject.get('extensionElements') ||
|
|
||||||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
|
|
||||||
// 获取元素表单配置 或者 创建新的表单配置
|
|
||||||
formData.value =
|
|
||||||
elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
|
|
||||||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
|
|
||||||
|
|
||||||
// 业务标识 businessKey， 绑定在 formData 中
|
|
||||||
businessKey.value = formData.value.businessKey
|
|
||||||
|
|
||||||
// 保留剩余扩展元素，便于后面更新该元素对应属性
|
|
||||||
otherExtensions.value = elExtensionElements.value.values.filter(
|
|
||||||
(ex) => ex.$type !== `${prefix}:FormData`
|
|
||||||
)
|
|
||||||
|
|
||||||
// 复制原始值，填充表格
|
|
||||||
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
|
|
||||||
|
|
||||||
// 更新元素扩展属性，避免后续报错
|
|
||||||
updateElementExtensions()
|
|
||||||
}
|
|
||||||
const updateElementFormKey = () => {
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
|
||||||
formKey: formKey.value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const updateElementBusinessKey = () => {
|
|
||||||
bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
|
|
||||||
businessKey: businessKey.value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 根据类型调整字段type
|
|
||||||
const changeFieldTypeType = (type) => {
|
|
||||||
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
|
|
||||||
formFieldForm.value['type'] = type === 'custom' ? '' : type
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开字段详情侧边栏
|
|
||||||
const openFieldForm = (field, index) => {
|
|
||||||
formFieldIndex.value = index
|
|
||||||
if (index !== -1) {
|
|
||||||
const FieldObject = formData.value.fields[index]
|
|
||||||
formFieldForm.value = JSON.parse(JSON.stringify(field))
|
|
||||||
// 设置自定义类型
|
|
||||||
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
|
|
||||||
formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
|
|
||||||
// 初始化枚举值列表
|
|
||||||
field.type === 'enum' &&
|
|
||||||
(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
|
|
||||||
// 初始化约束条件列表
|
|
||||||
fieldConstraintsList.value = JSON.parse(
|
|
||||||
JSON.stringify(FieldObject?.validation?.constraints || [])
|
|
||||||
)
|
|
||||||
// 初始化自定义属性列表
|
|
||||||
fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
|
|
||||||
} else {
|
|
||||||
formFieldForm.value = {}
|
|
||||||
// 初始化枚举值列表
|
|
||||||
fieldEnumList.value = []
|
|
||||||
// 初始化约束条件列表
|
|
||||||
fieldConstraintsList.value = []
|
|
||||||
// 初始化自定义属性列表
|
|
||||||
fieldPropertiesList.value = []
|
|
||||||
}
|
|
||||||
fieldModelVisible.value = true
|
|
||||||
}
|
|
||||||
// 打开字段 某个 配置项 弹窗
|
|
||||||
const openFieldOptionForm = (option, index, type) => {
|
|
||||||
fieldOptionModelVisible.value = true
|
|
||||||
fieldOptionType.value = type
|
|
||||||
formFieldOptionIndex.value = index
|
|
||||||
if (type === 'property') {
|
|
||||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
|
||||||
return (optionModelTitle.value = '属性配置')
|
|
||||||
}
|
|
||||||
if (type === 'enum') {
|
|
||||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
|
||||||
return (optionModelTitle.value = '枚举值配置')
|
|
||||||
}
|
|
||||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
|
||||||
return (optionModelTitle.value = '约束条件配置')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存字段 某个 配置项
|
|
||||||
const saveFieldOption = () => {
|
|
||||||
if (formFieldOptionIndex.value === -1) {
|
|
||||||
if (fieldOptionType.value === 'property') {
|
|
||||||
fieldPropertiesList.value.push(fieldOptionForm.value)
|
|
||||||
}
|
|
||||||
if (fieldOptionType.value === 'constraint') {
|
|
||||||
fieldConstraintsList.value.push(fieldOptionForm.value)
|
|
||||||
}
|
|
||||||
if (fieldOptionType.value === 'enum') {
|
|
||||||
fieldEnumList.value.push(fieldOptionForm.value)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
fieldOptionType.value === 'property' &&
|
|
||||||
fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
|
||||||
fieldOptionType.value === 'constraint' &&
|
|
||||||
fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
|
||||||
fieldOptionType.value === 'enum' &&
|
|
||||||
fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
|
||||||
}
|
|
||||||
fieldOptionModelVisible.value = false
|
|
||||||
fieldOptionForm.value = {}
|
|
||||||
}
|
|
||||||
// 保存字段配置
|
|
||||||
const saveField = () => {
|
|
||||||
const { id, type, label, defaultValue, datePattern } = formFieldForm.value
|
|
||||||
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
|
|
||||||
defaultValue && (Field.defaultValue = defaultValue)
|
|
||||||
datePattern && (Field.datePattern = datePattern)
|
|
||||||
// 构建属性
|
|
||||||
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
|
|
||||||
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
|
|
||||||
return bpmnInstances().moddle.create(`${prefix}:Property`, {
|
|
||||||
id: fp.id,
|
|
||||||
value: fp.value
|
|
||||||
})
|
|
||||||
})
|
|
||||||
Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
|
|
||||||
values: fieldPropertyList
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 构建校验规则
|
|
||||||
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
|
|
||||||
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
|
|
||||||
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
|
|
||||||
name: fc.name,
|
|
||||||
config: fc.config
|
|
||||||
})
|
|
||||||
})
|
|
||||||
Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
|
|
||||||
constraints: fieldConstraintList
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 构建枚举值
|
|
||||||
if (fieldEnumList.value && fieldEnumList.value.length) {
|
|
||||||
Field.values = fieldEnumList.value.map((fe) => {
|
|
||||||
return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 更新数组 与 表单配置实例
|
|
||||||
if (formFieldIndex.value === -1) {
|
|
||||||
fieldList.value.push(formFieldForm.value)
|
|
||||||
formData.value.fields.push(Field)
|
|
||||||
} else {
|
|
||||||
fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
|
|
||||||
formData.value.fields.splice(formFieldIndex.value, 1, Field)
|
|
||||||
}
|
|
||||||
updateElementExtensions()
|
|
||||||
fieldModelVisible.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 移除某个 字段的 配置项
|
|
||||||
const removeFieldOptionItem = (option, index, type) => {
|
|
||||||
// console.log(option, 'option')
|
|
||||||
if (type === 'property') {
|
|
||||||
fieldPropertiesList.value.splice(index, 1)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (type === 'enum') {
|
|
||||||
fieldEnumList.value.splice(index, 1)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
fieldConstraintsList.value.splice(index, 1)
|
|
||||||
}
|
|
||||||
// 移除 字段
|
|
||||||
const removeField = (field, index) => {
|
|
||||||
console.log(field, 'field')
|
|
||||||
fieldList.value.splice(index, 1)
|
|
||||||
formData.value.fields.splice(index, 1)
|
|
||||||
updateElementExtensions()
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateElementExtensions = () => {
|
|
||||||
// 更新回扩展元素
|
|
||||||
const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
|
|
||||||
values: otherExtensions.value.concat(formData.value)
|
|
||||||
})
|
|
||||||
// 更新到元素上
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
|
||||||
extensionElements: newElExtensionElements
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const formList = ref([]) // 流程表单的下拉框的数据
|
|
||||||
onMounted(async () => {
|
|
||||||
formList.value = await FormApi.getFormSimpleList()
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.id,
|
|
||||||
(val) => {
|
|
||||||
val &&
|
|
||||||
val.length &&
|
|
||||||
nextTick(() => {
|
|
||||||
resetFormList()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import MyPropertiesPanel from './PropertiesPanel.vue'
|
|
||||||
|
|
||||||
MyPropertiesPanel.install = function (Vue) {
|
|
||||||
Vue.component(MyPropertiesPanel.name, MyPropertiesPanel)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MyPropertiesPanel
|
|
||||||
|
|
@ -1,448 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<el-table :data="elementListenersList" size="small" border>
|
|
||||||
<el-table-column label="序号" width="50px" type="index" />
|
|
||||||
<el-table-column label="事件类型" min-width="100px" prop="event" />
|
|
||||||
<el-table-column
|
|
||||||
label="监听器类型"
|
|
||||||
min-width="100px"
|
|
||||||
show-overflow-tooltip
|
|
||||||
:formatter="(row) => listenerTypeObject[row.listenerType]"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" width="100px">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
|
|
||||||
>编辑</el-button
|
|
||||||
>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<el-button size="small" link style="color: #ff4d4f" @click="removeListener(scope.$index)"
|
|
||||||
>移除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="element-drawer__button">
|
|
||||||
<XButton
|
|
||||||
type="primary"
|
|
||||||
preIcon="ep:plus"
|
|
||||||
title="添加监听器"
|
|
||||||
size="small"
|
|
||||||
@click="openListenerForm(null)"
|
|
||||||
/>
|
|
||||||
<XButton
|
|
||||||
type="success"
|
|
||||||
preIcon="ep:select"
|
|
||||||
title="选择监听器"
|
|
||||||
size="small"
|
|
||||||
@click="openProcessListenerDialog"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 监听器 编辑/创建 部分 -->
|
|
||||||
<el-drawer
|
|
||||||
v-model="listenerFormModelVisible"
|
|
||||||
title="执行监听器"
|
|
||||||
:size="`${width}px`"
|
|
||||||
append-to-body
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<el-form :model="listenerForm" label-width="96px" ref="listenerFormRef">
|
|
||||||
<el-form-item
|
|
||||||
label="事件类型"
|
|
||||||
prop="event"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-select v-model="listenerForm.event">
|
|
||||||
<el-option label="start" value="start" />
|
|
||||||
<el-option label="end" value="end" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="监听器类型"
|
|
||||||
prop="listenerType"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-select v-model="listenerForm.listenerType">
|
|
||||||
<el-option
|
|
||||||
v-for="i in Object.keys(listenerTypeObject)"
|
|
||||||
:key="i"
|
|
||||||
:label="listenerTypeObject[i]"
|
|
||||||
:value="i"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.listenerType === 'classListener'"
|
|
||||||
label="Java类"
|
|
||||||
prop="class"
|
|
||||||
key="listener-class"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.class" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
|
||||||
label="表达式"
|
|
||||||
prop="expression"
|
|
||||||
key="listener-expression"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.expression" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
|
||||||
label="代理表达式"
|
|
||||||
prop="delegateExpression"
|
|
||||||
key="listener-delegate"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
|
||||||
<el-form-item
|
|
||||||
label="脚本格式"
|
|
||||||
prop="scriptFormat"
|
|
||||||
key="listener-script-format"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="脚本类型"
|
|
||||||
prop="scriptType"
|
|
||||||
key="listener-script-type"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
|
||||||
>
|
|
||||||
<el-select v-model="listenerForm.scriptType">
|
|
||||||
<el-option label="内联脚本" value="inlineScript" />
|
|
||||||
<el-option label="外部脚本" value="externalScript" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
|
||||||
label="脚本内容"
|
|
||||||
prop="value"
|
|
||||||
key="listener-script"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.value" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.scriptType === 'externalScript'"
|
|
||||||
label="资源地址"
|
|
||||||
prop="resource"
|
|
||||||
key="listener-resource"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.resource" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</el-form>
|
|
||||||
<el-divider />
|
|
||||||
<p class="listener-filed__title">
|
|
||||||
<span><Icon icon="ep:menu" />注入字段：</span>
|
|
||||||
<XButton type="primary" @click="openListenerFieldForm(null)" title="添加字段" />
|
|
||||||
</p>
|
|
||||||
<el-table
|
|
||||||
:data="fieldsListOfListener"
|
|
||||||
size="small"
|
|
||||||
max-height="240"
|
|
||||||
fit
|
|
||||||
border
|
|
||||||
style="flex: none"
|
|
||||||
>
|
|
||||||
<el-table-column label="序号" width="50px" type="index" />
|
|
||||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
|
||||||
<el-table-column
|
|
||||||
label="字段类型"
|
|
||||||
min-width="80px"
|
|
||||||
show-overflow-tooltip
|
|
||||||
:formatter="(row) => fieldTypeObject[row.fieldType]"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="字段值/表达式"
|
|
||||||
min-width="100px"
|
|
||||||
show-overflow-tooltip
|
|
||||||
:formatter="(row) => row.string || row.expression"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" width="130px">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
|
|
||||||
>编辑</el-button
|
|
||||||
>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<el-button
|
|
||||||
size="small"
|
|
||||||
link
|
|
||||||
style="color: #ff4d4f"
|
|
||||||
@click="removeListenerField(scope.$index)"
|
|
||||||
>移除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<div class="element-drawer__button">
|
|
||||||
<el-button @click="listenerFormModelVisible = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="saveListenerConfig">保 存</el-button>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
|
||||||
|
|
||||||
<!-- 注入西段 编辑/创建 部分 -->
|
|
||||||
<el-dialog
|
|
||||||
title="字段配置"
|
|
||||||
v-model="listenerFieldFormModelVisible"
|
|
||||||
width="600px"
|
|
||||||
append-to-body
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<el-form
|
|
||||||
:model="listenerFieldForm"
|
|
||||||
label-width="96spx"
|
|
||||||
ref="listenerFieldFormRef"
|
|
||||||
style="height: 136px"
|
|
||||||
>
|
|
||||||
<el-form-item
|
|
||||||
label="字段名称："
|
|
||||||
prop="name"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerFieldForm.name" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="字段类型："
|
|
||||||
prop="fieldType"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-select v-model="listenerFieldForm.fieldType">
|
|
||||||
<el-option
|
|
||||||
v-for="i in Object.keys(fieldTypeObject)"
|
|
||||||
:key="i"
|
|
||||||
:label="fieldTypeObject[i]"
|
|
||||||
:value="i"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerFieldForm.fieldType === 'string'"
|
|
||||||
label="字段值："
|
|
||||||
prop="string"
|
|
||||||
key="field-string"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerFieldForm.string" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
|
||||||
label="表达式："
|
|
||||||
prop="expression"
|
|
||||||
key="field-expression"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
|
||||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 选择弹窗 -->
|
|
||||||
<ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ElMessageBox } from 'element-plus'
|
|
||||||
import { createListenerObject, updateElementExtensions } from '../../utils'
|
|
||||||
import {
|
|
||||||
initListenerType,
|
|
||||||
initListenerForm,
|
|
||||||
listenerType,
|
|
||||||
fieldType,
|
|
||||||
initListenerForm2
|
|
||||||
} from './utilSelf'
|
|
||||||
import ProcessListenerDialog from './ProcessListenerDialog.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'ElementListeners' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
id: String,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
const prefix = inject('prefix')
|
|
||||||
const width = inject('width')
|
|
||||||
const elementListenersList = ref<any[]>([]) // 监听器列表
|
|
||||||
const listenerForm = ref<any>({}) // 监听器详情表单
|
|
||||||
const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
|
|
||||||
const fieldsListOfListener = ref<any[]>([])
|
|
||||||
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
|
|
||||||
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
|
|
||||||
const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
|
|
||||||
const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
|
|
||||||
const listenerTypeObject = ref(listenerType)
|
|
||||||
const fieldTypeObject = ref(fieldType)
|
|
||||||
const bpmnElement = ref()
|
|
||||||
const otherExtensionList = ref()
|
|
||||||
const bpmnElementListeners = ref()
|
|
||||||
const listenerFormRef = ref()
|
|
||||||
const listenerFieldFormRef = ref()
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
|
|
||||||
const resetListenersList = () => {
|
|
||||||
bpmnElement.value = bpmnInstances().bpmnElement
|
|
||||||
otherExtensionList.value = []
|
|
||||||
bpmnElementListeners.value =
|
|
||||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
|
||||||
(ex) => ex.$type === `${prefix}:ExecutionListener`
|
|
||||||
) ?? []
|
|
||||||
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
|
|
||||||
initListenerType(listener)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
// 打开 监听器详情 侧边栏
|
|
||||||
const openListenerForm = (listener, index?) => {
|
|
||||||
// debugger
|
|
||||||
if (listener) {
|
|
||||||
listenerForm.value = initListenerForm(listener)
|
|
||||||
editingListenerIndex.value = index
|
|
||||||
} else {
|
|
||||||
listenerForm.value = {}
|
|
||||||
editingListenerIndex.value = -1 // 标记为新增
|
|
||||||
}
|
|
||||||
if (listener && listener.fields) {
|
|
||||||
fieldsListOfListener.value = listener.fields.map((field) => ({
|
|
||||||
...field,
|
|
||||||
fieldType: field.string ? 'string' : 'expression'
|
|
||||||
}))
|
|
||||||
} else {
|
|
||||||
fieldsListOfListener.value = []
|
|
||||||
listenerForm.value['fields'] = []
|
|
||||||
}
|
|
||||||
// 打开侧边栏并清楚验证状态
|
|
||||||
listenerFormModelVisible.value = true
|
|
||||||
nextTick(() => {
|
|
||||||
if (listenerFormRef.value) {
|
|
||||||
listenerFormRef.value.clearValidate()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 打开监听器字段编辑弹窗
|
|
||||||
const openListenerFieldForm = (field, index?) => {
|
|
||||||
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
|
|
||||||
editingListenerFieldIndex.value = field ? index : -1
|
|
||||||
listenerFieldFormModelVisible.value = true
|
|
||||||
nextTick(() => {
|
|
||||||
if (listenerFieldFormRef.value) {
|
|
||||||
listenerFieldFormRef.value.clearValidate()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 保存监听器注入字段
|
|
||||||
const saveListenerFiled = async () => {
|
|
||||||
// debugger
|
|
||||||
let validateStatus = await listenerFieldFormRef.value.validate()
|
|
||||||
if (!validateStatus) return // 验证不通过直接返回
|
|
||||||
if (editingListenerFieldIndex.value === -1) {
|
|
||||||
fieldsListOfListener.value.push(listenerFieldForm.value)
|
|
||||||
listenerForm.value.fields.push(listenerFieldForm.value)
|
|
||||||
} else {
|
|
||||||
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
|
||||||
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
|
||||||
}
|
|
||||||
listenerFieldFormModelVisible.value = false
|
|
||||||
nextTick(() => {
|
|
||||||
listenerFieldForm.value = {}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 移除监听器字段
|
|
||||||
const removeListenerField = (index) => {
|
|
||||||
// debugger
|
|
||||||
ElMessageBox.confirm('确认移除该字段吗？', '提示', {
|
|
||||||
confirmButtonText: '确 认',
|
|
||||||
cancelButtonText: '取 消'
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
fieldsListOfListener.value.splice(index, 1)
|
|
||||||
listenerForm.value.fields.splice(index, 1)
|
|
||||||
})
|
|
||||||
.catch(() => console.info('操作取消'))
|
|
||||||
}
|
|
||||||
// 移除监听器
|
|
||||||
const removeListener = (index) => {
|
|
||||||
debugger
|
|
||||||
ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
|
|
||||||
confirmButtonText: '确 认',
|
|
||||||
cancelButtonText: '取 消'
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
bpmnElementListeners.value.splice(index, 1)
|
|
||||||
elementListenersList.value.splice(index, 1)
|
|
||||||
updateElementExtensions(
|
|
||||||
bpmnElement.value,
|
|
||||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
.catch(() => console.info('操作取消'))
|
|
||||||
}
|
|
||||||
// 保存监听器配置
|
|
||||||
const saveListenerConfig = async () => {
|
|
||||||
// debugger
|
|
||||||
let validateStatus = await listenerFormRef.value.validate()
|
|
||||||
if (!validateStatus) return // 验证不通过直接返回
|
|
||||||
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
|
|
||||||
if (editingListenerIndex.value === -1) {
|
|
||||||
bpmnElementListeners.value.push(listenerObject)
|
|
||||||
elementListenersList.value.push(listenerForm.value)
|
|
||||||
} else {
|
|
||||||
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
|
|
||||||
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
|
|
||||||
}
|
|
||||||
// 保存其他配置
|
|
||||||
otherExtensionList.value =
|
|
||||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
|
||||||
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
|
||||||
) ?? []
|
|
||||||
updateElementExtensions(
|
|
||||||
bpmnElement.value,
|
|
||||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
|
||||||
)
|
|
||||||
// 4. 隐藏侧边栏
|
|
||||||
listenerFormModelVisible.value = false
|
|
||||||
listenerForm.value = {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开监听器弹窗
|
|
||||||
const processListenerDialogRef = ref()
|
|
||||||
const openProcessListenerDialog = async () => {
|
|
||||||
processListenerDialogRef.value.open('execution')
|
|
||||||
}
|
|
||||||
const selectProcessListener = (listener) => {
|
|
||||||
const listenerForm = initListenerForm2(listener)
|
|
||||||
const listenerObject = createListenerObject(listenerForm, false, prefix)
|
|
||||||
bpmnElementListeners.value.push(listenerObject)
|
|
||||||
elementListenersList.value.push(listenerForm)
|
|
||||||
|
|
||||||
// 保存其他配置
|
|
||||||
otherExtensionList.value =
|
|
||||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
|
||||||
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
|
||||||
) ?? []
|
|
||||||
updateElementExtensions(
|
|
||||||
bpmnElement.value,
|
|
||||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.id,
|
|
||||||
(val) => {
|
|
||||||
val &&
|
|
||||||
val.length &&
|
|
||||||
nextTick(() => {
|
|
||||||
resetListenersList()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
<!-- 执行器选择 -->
|
|
||||||
<template>
|
|
||||||
<Dialog title="请选择监听器" v-model="dialogVisible" width="1024px">
|
|
||||||
<ContentWrap>
|
|
||||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
|
||||||
<el-table-column label="名字" align="center" prop="name" />
|
|
||||||
<el-table-column label="类型" align="center" prop="type">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_LISTENER_TYPE" :value="scope.row.type" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="事件" align="center" prop="event" />
|
|
||||||
<el-table-column label="值类型" align="center" prop="valueType">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag
|
|
||||||
:type="DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE"
|
|
||||||
:value="scope.row.valueType"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="值" align="center" prop="value" />
|
|
||||||
<el-table-column label="操作" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button link type="primary" @click="select(scope.row)"> 选择 </el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ProcessListenerApi, ProcessListenerVO } from '@/api/bpm/processListener'
|
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
|
|
||||||
/** BPM 流程 表单 */
|
|
||||||
defineOptions({ name: 'ProcessListenerDialog' })
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const loading = ref(true) // 列表的加载中
|
|
||||||
const list = ref<ProcessListenerVO[]>([]) // 列表的数据
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
type: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE
|
|
||||||
})
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string) => {
|
|
||||||
dialogVisible.value = true
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
queryParams.type = type
|
|
||||||
const data = await ProcessListenerApi.getProcessListenerPage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const select = async (row) => {
|
|
||||||
dialogVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('select', row)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,491 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<el-table :data="elementListenersList" size="small" border>
|
|
||||||
<el-table-column label="序号" width="50px" type="index" />
|
|
||||||
<el-table-column
|
|
||||||
label="事件类型"
|
|
||||||
min-width="80px"
|
|
||||||
show-overflow-tooltip
|
|
||||||
:formatter="(row) => listenerEventTypeObject[row.event]"
|
|
||||||
/>
|
|
||||||
<el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
|
|
||||||
<el-table-column
|
|
||||||
label="监听器类型"
|
|
||||||
min-width="80px"
|
|
||||||
show-overflow-tooltip
|
|
||||||
:formatter="(row) => listenerTypeObject[row.listenerType]"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" width="90px">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
|
|
||||||
>编辑</el-button
|
|
||||||
>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<el-button
|
|
||||||
size="small"
|
|
||||||
link
|
|
||||||
style="color: #ff4d4f"
|
|
||||||
@click="removeListener(scope.row, scope.$index)"
|
|
||||||
>移除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="element-drawer__button">
|
|
||||||
<XButton
|
|
||||||
size="small"
|
|
||||||
type="primary"
|
|
||||||
preIcon="ep:plus"
|
|
||||||
title="添加监听器"
|
|
||||||
@click="openListenerForm(null)"
|
|
||||||
/>
|
|
||||||
<XButton
|
|
||||||
type="success"
|
|
||||||
preIcon="ep:select"
|
|
||||||
title="选择监听器"
|
|
||||||
size="small"
|
|
||||||
@click="openProcessListenerDialog"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 监听器 编辑/创建 部分 -->
|
|
||||||
<el-drawer
|
|
||||||
v-model="listenerFormModelVisible"
|
|
||||||
title="任务监听器"
|
|
||||||
:size="`${width}px`"
|
|
||||||
append-to-body
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef">
|
|
||||||
<el-form-item
|
|
||||||
label="事件类型"
|
|
||||||
prop="event"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-select v-model="listenerForm.event">
|
|
||||||
<el-option
|
|
||||||
v-for="i in Object.keys(listenerEventTypeObject)"
|
|
||||||
:key="i"
|
|
||||||
:label="listenerEventTypeObject[i]"
|
|
||||||
:value="i"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="监听器ID"
|
|
||||||
prop="id"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.id" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="监听器类型"
|
|
||||||
prop="listenerType"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-select v-model="listenerForm.listenerType">
|
|
||||||
<el-option
|
|
||||||
v-for="i in Object.keys(listenerTypeObject)"
|
|
||||||
:key="i"
|
|
||||||
:label="listenerTypeObject[i]"
|
|
||||||
:value="i"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.listenerType === 'classListener'"
|
|
||||||
label="Java类"
|
|
||||||
prop="class"
|
|
||||||
key="listener-class"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.class" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
|
||||||
label="表达式"
|
|
||||||
prop="expression"
|
|
||||||
key="listener-expression"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.expression" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
|
||||||
label="代理表达式"
|
|
||||||
prop="delegateExpression"
|
|
||||||
key="listener-delegate"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
|
||||||
<el-form-item
|
|
||||||
label="脚本格式"
|
|
||||||
prop="scriptFormat"
|
|
||||||
key="listener-script-format"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="脚本类型"
|
|
||||||
prop="scriptType"
|
|
||||||
key="listener-script-type"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
|
||||||
>
|
|
||||||
<el-select v-model="listenerForm.scriptType">
|
|
||||||
<el-option label="内联脚本" value="inlineScript" />
|
|
||||||
<el-option label="外部脚本" value="externalScript" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
|
||||||
label="脚本内容"
|
|
||||||
prop="value"
|
|
||||||
key="listener-script"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.value" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.scriptType === 'externalScript'"
|
|
||||||
label="资源地址"
|
|
||||||
prop="resource"
|
|
||||||
key="listener-resource"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.resource" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="listenerForm.event === 'timeout'">
|
|
||||||
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
|
|
||||||
<el-select v-model="listenerForm.eventDefinitionType">
|
|
||||||
<el-option label="日期" value="date" />
|
|
||||||
<el-option label="持续时长" value="duration" />
|
|
||||||
<el-option label="循环" value="cycle" />
|
|
||||||
<el-option label="无" value="null" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
|
|
||||||
label="定时器"
|
|
||||||
prop="eventTimeDefinitions"
|
|
||||||
key="eventTimeDefinitions"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<el-divider />
|
|
||||||
<p class="listener-filed__title">
|
|
||||||
<span><Icon icon="ep:menu" />注入字段：</span>
|
|
||||||
<el-button size="small" type="primary" @click="openListenerFieldForm(null)"
|
|
||||||
>添加字段</el-button
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
<el-table
|
|
||||||
:data="fieldsListOfListener"
|
|
||||||
size="small"
|
|
||||||
max-height="240"
|
|
||||||
fit
|
|
||||||
border
|
|
||||||
style="flex: none"
|
|
||||||
>
|
|
||||||
<el-table-column label="序号" width="50px" type="index" />
|
|
||||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
|
||||||
<el-table-column
|
|
||||||
label="字段类型"
|
|
||||||
min-width="80px"
|
|
||||||
show-overflow-tooltip
|
|
||||||
:formatter="(row) => fieldTypeObject[row.fieldType]"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="字段值/表达式"
|
|
||||||
min-width="100px"
|
|
||||||
show-overflow-tooltip
|
|
||||||
:formatter="(row) => row.string || row.expression"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" width="100px">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
|
|
||||||
>编辑</el-button
|
|
||||||
>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<el-button
|
|
||||||
size="small"
|
|
||||||
link
|
|
||||||
style="color: #ff4d4f"
|
|
||||||
@click="removeListenerField(scope.row, scope.$index)"
|
|
||||||
>移除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<div class="element-drawer__button">
|
|
||||||
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
|
|
||||||
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
|
||||||
|
|
||||||
<!-- 注入西段 编辑/创建 部分 -->
|
|
||||||
<el-dialog
|
|
||||||
title="字段配置"
|
|
||||||
v-model="listenerFieldFormModelVisible"
|
|
||||||
width="600px"
|
|
||||||
append-to-body
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<el-form
|
|
||||||
:model="listenerFieldForm"
|
|
||||||
size="small"
|
|
||||||
label-width="96px"
|
|
||||||
ref="listenerFieldFormRef"
|
|
||||||
style="height: 136px"
|
|
||||||
>
|
|
||||||
<el-form-item
|
|
||||||
label="字段名称："
|
|
||||||
prop="name"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerFieldForm.name" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="字段类型："
|
|
||||||
prop="fieldType"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-select v-model="listenerFieldForm.fieldType">
|
|
||||||
<el-option
|
|
||||||
v-for="i in Object.keys(fieldTypeObject)"
|
|
||||||
:key="i"
|
|
||||||
:label="fieldTypeObject[i]"
|
|
||||||
:value="i"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerFieldForm.fieldType === 'string'"
|
|
||||||
label="字段值："
|
|
||||||
prop="string"
|
|
||||||
key="field-string"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerFieldForm.string" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
|
||||||
label="表达式："
|
|
||||||
prop="expression"
|
|
||||||
key="field-expression"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
|
||||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 选择弹窗 -->
|
|
||||||
<ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ElMessageBox } from 'element-plus'
|
|
||||||
import { createListenerObject, updateElementExtensions } from '../../utils'
|
|
||||||
import {
|
|
||||||
initListenerForm,
|
|
||||||
initListenerType,
|
|
||||||
eventType,
|
|
||||||
listenerType,
|
|
||||||
fieldType,
|
|
||||||
initListenerForm2
|
|
||||||
} from './utilSelf'
|
|
||||||
import ProcessListenerDialog from '@/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'UserTaskListeners' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
id: String,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
const prefix = inject('prefix')
|
|
||||||
const width = inject('width')
|
|
||||||
const elementListenersList = ref<any[]>([])
|
|
||||||
const listenerEventTypeObject = ref(eventType)
|
|
||||||
const listenerTypeObject = ref(listenerType)
|
|
||||||
const listenerFormModelVisible = ref(false)
|
|
||||||
const listenerForm = ref<any>({})
|
|
||||||
const fieldTypeObject = ref(fieldType)
|
|
||||||
const fieldsListOfListener = ref<any[]>([])
|
|
||||||
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
|
|
||||||
const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
|
|
||||||
const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
|
|
||||||
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
|
|
||||||
const bpmnElement = ref()
|
|
||||||
const bpmnElementListeners = ref()
|
|
||||||
const otherExtensionList = ref()
|
|
||||||
const listenerFormRef = ref()
|
|
||||||
const listenerFieldFormRef = ref()
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
|
|
||||||
const resetListenersList = () => {
|
|
||||||
console.log(
|
|
||||||
bpmnInstances().bpmnElement,
|
|
||||||
'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
|
|
||||||
)
|
|
||||||
bpmnElement.value = bpmnInstances().bpmnElement
|
|
||||||
otherExtensionList.value = []
|
|
||||||
bpmnElementListeners.value =
|
|
||||||
bpmnElement.value.businessObject?.extensionElements?.values.filter(
|
|
||||||
(ex) => ex.$type === `${prefix}:TaskListener`
|
|
||||||
) ?? []
|
|
||||||
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
|
|
||||||
initListenerType(listener)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
const openListenerForm = (listener, index?) => {
|
|
||||||
if (listener) {
|
|
||||||
listenerForm.value = initListenerForm(listener)
|
|
||||||
editingListenerIndex.value = index
|
|
||||||
} else {
|
|
||||||
listenerForm.value = {}
|
|
||||||
editingListenerIndex.value = -1 // 标记为新增
|
|
||||||
}
|
|
||||||
if (listener && listener.fields) {
|
|
||||||
fieldsListOfListener.value = listener.fields.map((field) => ({
|
|
||||||
...field,
|
|
||||||
fieldType: field.string ? 'string' : 'expression'
|
|
||||||
}))
|
|
||||||
} else {
|
|
||||||
fieldsListOfListener.value = []
|
|
||||||
listenerForm.value['fields'] = []
|
|
||||||
}
|
|
||||||
// 打开侧边栏并清楚验证状态
|
|
||||||
listenerFormModelVisible.value = true
|
|
||||||
nextTick(() => {
|
|
||||||
if (listenerFormRef.value) listenerFormRef.value.clearValidate()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 移除监听器
|
|
||||||
const removeListener = (listener, index?) => {
|
|
||||||
console.log(listener, 'listener')
|
|
||||||
ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
|
|
||||||
confirmButtonText: '确 认',
|
|
||||||
cancelButtonText: '取 消'
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
bpmnElementListeners.value.splice(index, 1)
|
|
||||||
elementListenersList.value.splice(index, 1)
|
|
||||||
updateElementExtensions(
|
|
||||||
bpmnElement.value,
|
|
||||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
.catch(() => console.info('操作取消'))
|
|
||||||
}
|
|
||||||
// 保存监听器
|
|
||||||
const saveListenerConfig = async () => {
|
|
||||||
let validateStatus = await listenerFormRef.value.validate()
|
|
||||||
if (!validateStatus) return // 验证不通过直接返回
|
|
||||||
const listenerObject = createListenerObject(listenerForm.value, true, prefix)
|
|
||||||
if (editingListenerIndex.value === -1) {
|
|
||||||
bpmnElementListeners.value.push(listenerObject)
|
|
||||||
elementListenersList.value.push(listenerForm.value)
|
|
||||||
} else {
|
|
||||||
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
|
|
||||||
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
|
|
||||||
}
|
|
||||||
// 保存其他配置
|
|
||||||
otherExtensionList.value =
|
|
||||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
|
||||||
(ex) => ex.$type !== `${prefix}:TaskListener`
|
|
||||||
) ?? []
|
|
||||||
updateElementExtensions(
|
|
||||||
bpmnElement.value,
|
|
||||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
|
||||||
)
|
|
||||||
// 4. 隐藏侧边栏
|
|
||||||
listenerFormModelVisible.value = false
|
|
||||||
listenerForm.value = {}
|
|
||||||
}
|
|
||||||
// 打开监听器字段编辑弹窗
|
|
||||||
const openListenerFieldForm = (field, index?) => {
|
|
||||||
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
|
|
||||||
editingListenerFieldIndex.value = field ? index : -1
|
|
||||||
listenerFieldFormModelVisible.value = true
|
|
||||||
nextTick(() => {
|
|
||||||
if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 保存监听器注入字段
|
|
||||||
const saveListenerFiled = async () => {
|
|
||||||
let validateStatus = await listenerFieldFormRef.value.validate()
|
|
||||||
if (!validateStatus) return // 验证不通过直接返回
|
|
||||||
if (editingListenerFieldIndex.value === -1) {
|
|
||||||
fieldsListOfListener.value.push(listenerFieldForm.value)
|
|
||||||
listenerForm.value.fields.push(listenerFieldForm.value)
|
|
||||||
} else {
|
|
||||||
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
|
||||||
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
|
||||||
}
|
|
||||||
listenerFieldFormModelVisible.value = false
|
|
||||||
nextTick(() => {
|
|
||||||
listenerFieldForm.value = {}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 移除监听器字段
|
|
||||||
const removeListenerField = (field, index) => {
|
|
||||||
console.log(field, 'field')
|
|
||||||
ElMessageBox.confirm('确认移除该字段吗？', '提示', {
|
|
||||||
confirmButtonText: '确 认',
|
|
||||||
cancelButtonText: '取 消'
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
fieldsListOfListener.value.splice(index, 1)
|
|
||||||
listenerForm.value.fields.splice(index, 1)
|
|
||||||
})
|
|
||||||
.catch(() => console.info('操作取消'))
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开监听器弹窗
|
|
||||||
const processListenerDialogRef = ref()
|
|
||||||
const openProcessListenerDialog = async () => {
|
|
||||||
processListenerDialogRef.value.open('task')
|
|
||||||
}
|
|
||||||
const selectProcessListener = (listener) => {
|
|
||||||
const listenerForm = initListenerForm2(listener)
|
|
||||||
const listenerObject = createListenerObject(listenerForm, true, prefix)
|
|
||||||
bpmnElementListeners.value.push(listenerObject)
|
|
||||||
elementListenersList.value.push(listenerForm)
|
|
||||||
|
|
||||||
// 保存其他配置
|
|
||||||
otherExtensionList.value =
|
|
||||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
|
||||||
(ex) => ex.$type !== `${prefix}:TaskListener`
|
|
||||||
) ?? []
|
|
||||||
updateElementExtensions(
|
|
||||||
bpmnElement.value,
|
|
||||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.id,
|
|
||||||
(val) => {
|
|
||||||
val &&
|
|
||||||
val.length &&
|
|
||||||
nextTick(() => {
|
|
||||||
resetListenersList()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,178 +0,0 @@
|
||||||
export const template = (isTaskListener) => {
|
|
||||||
return `
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<el-table :data="elementListenersList" size="small" border>
|
|
||||||
<el-table-column label="序号" width="50px" type="index" />
|
|
||||||
<el-table-column label="事件类型" min-width="100px" prop="event" />
|
|
||||||
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
|
||||||
<el-table-column label="操作" width="90px">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button size="small" type="primary" link @click="openListenerForm(scope, scope.$index)">编辑</el-button>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="element-drawer__button">
|
|
||||||
<el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 监听器 编辑/创建 部分 -->
|
|
||||||
<el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
|
|
||||||
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
|
|
||||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
|
||||||
<el-select v-model="listenerForm.event">
|
|
||||||
<el-option label="start" value="start" />
|
|
||||||
<el-option label="end" value="end" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
|
||||||
<el-select v-model="listenerForm.listenerType">
|
|
||||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.listenerType === 'classListener'"
|
|
||||||
label="Java类"
|
|
||||||
prop="class"
|
|
||||||
key="listener-class"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.class" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
|
||||||
label="表达式"
|
|
||||||
prop="expression"
|
|
||||||
key="listener-expression"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.expression" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
|
||||||
label="代理表达式"
|
|
||||||
prop="delegateExpression"
|
|
||||||
key="listener-delegate"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
|
||||||
<el-form-item
|
|
||||||
label="脚本格式"
|
|
||||||
prop="scriptFormat"
|
|
||||||
key="listener-script-format"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="脚本类型"
|
|
||||||
prop="scriptType"
|
|
||||||
key="listener-script-type"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
|
||||||
>
|
|
||||||
<el-select v-model="listenerForm.scriptType">
|
|
||||||
<el-option label="内联脚本" value="inlineScript" />
|
|
||||||
<el-option label="外部脚本" value="externalScript" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
|
||||||
label="脚本内容"
|
|
||||||
prop="value"
|
|
||||||
key="listener-script"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.value" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerForm.scriptType === 'externalScript'"
|
|
||||||
label="资源地址"
|
|
||||||
prop="resource"
|
|
||||||
key="listener-resource"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerForm.resource" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
${
|
|
||||||
isTaskListener
|
|
||||||
? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
|
|
||||||
"<el-select v-model='listenerForm.eventDefinitionType'>" +
|
|
||||||
"<el-option label='日期' value='date' />" +
|
|
||||||
"<el-option label='持续时长' value='duration' />" +
|
|
||||||
"<el-option label='循环' value='cycle' />" +
|
|
||||||
"<el-option label='无' value='' />" +
|
|
||||||
'</el-select>' +
|
|
||||||
'</el-form-item>' +
|
|
||||||
"<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
|
|
||||||
"<el-input v-model='listenerForm.eventDefinitions' clearable />" +
|
|
||||||
'</el-form-item>'
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
</el-form>
|
|
||||||
<el-divider />
|
|
||||||
<p class="listener-filed__title">
|
|
||||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
|
||||||
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
|
||||||
</p>
|
|
||||||
<el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
|
|
||||||
<el-table-column label="序号" width="50px" type="index" />
|
|
||||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
|
||||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
|
|
||||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
|
||||||
<el-table-column label="操作" width="100px">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button size="small" type="primary" link @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<div class="element-drawer__button">
|
|
||||||
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
|
|
||||||
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
|
||||||
|
|
||||||
<!-- 注入西段 编辑/创建 部分 -->
|
|
||||||
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
|
||||||
<el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
|
|
||||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
|
||||||
<el-input v-model="listenerFieldForm.name" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
|
||||||
<el-select v-model="listenerFieldForm.fieldType">
|
|
||||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerFieldForm.fieldType === 'string'"
|
|
||||||
label="字段值："
|
|
||||||
prop="string"
|
|
||||||
key="field-string"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerFieldForm.string" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
|
||||||
label="表达式："
|
|
||||||
prop="expression"
|
|
||||||
key="field-expression"
|
|
||||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
|
||||||
>
|
|
||||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
|
||||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
// 初始化表单数据
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 将 ProcessListenerDO 转换成 initListenerForm 想同的 Form 对象 */
|
|
||||||
export function initListenerForm2(processListener) {
|
|
||||||
if (processListener.valueType === 'class') {
|
|
||||||
return {
|
|
||||||
listenerType: 'classListener',
|
|
||||||
class: processListener.value,
|
|
||||||
event: processListener.event,
|
|
||||||
fields: []
|
|
||||||
}
|
|
||||||
} else if (processListener.valueType === 'expression') {
|
|
||||||
return {
|
|
||||||
listenerType: 'expressionListener',
|
|
||||||
expression: processListener.value,
|
|
||||||
event: processListener.event,
|
|
||||||
fields: []
|
|
||||||
}
|
|
||||||
} else if (processListener.valueType === 'delegateExpression') {
|
|
||||||
return {
|
|
||||||
listenerType: 'delegateExpressionListener',
|
|
||||||
delegateExpression: processListener.value,
|
|
||||||
event: processListener.event,
|
|
||||||
fields: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
throw new Error('未知的监听器类型')
|
|
||||||
}
|
|
||||||
|
|
||||||
export const listenerType = {
|
|
||||||
classListener: 'Java 类',
|
|
||||||
expressionListener: '表达式',
|
|
||||||
delegateExpressionListener: '代理表达式',
|
|
||||||
scriptListener: '脚本'
|
|
||||||
}
|
|
||||||
|
|
||||||
export const eventType = {
|
|
||||||
create: '创建',
|
|
||||||
assignment: '指派',
|
|
||||||
complete: '完成',
|
|
||||||
delete: '删除',
|
|
||||||
update: '更新',
|
|
||||||
timeout: '超时'
|
|
||||||
}
|
|
||||||
|
|
||||||
export const fieldType = {
|
|
||||||
string: '字符串',
|
|
||||||
expression: '表达式'
|
|
||||||
}
|
|
||||||
|
|
@ -1,280 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<el-form label-width="90px">
|
|
||||||
<el-form-item label="快捷配置">
|
|
||||||
<el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
|
|
||||||
<el-button size="small" @click="changeConfig('会签')">会签</el-button>
|
|
||||||
<el-button size="small" @click="changeConfig('或签')">或签</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="会签类型">
|
|
||||||
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
|
|
||||||
<el-option label="并行多重事件" value="ParallelMultiInstance" />
|
|
||||||
<el-option label="时序多重事件" value="SequentialMultiInstance" />
|
|
||||||
<el-option label="无" value="Null" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<template
|
|
||||||
v-if="
|
|
||||||
loopCharacteristics === 'ParallelMultiInstance' ||
|
|
||||||
loopCharacteristics === 'SequentialMultiInstance'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<el-form-item label="循环数量" key="loopCardinality">
|
|
||||||
<el-input
|
|
||||||
v-model="loopInstanceForm.loopCardinality"
|
|
||||||
clearable
|
|
||||||
@change="updateLoopCardinality"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="集合" key="collection" v-show="false">
|
|
||||||
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
|
|
||||||
</el-form-item>
|
|
||||||
<!-- add by 芋艿：由于「元素变量」暂时用不到，所以这里 display 为 none -->
|
|
||||||
<el-form-item label="元素变量" key="elementVariable" style="display: none">
|
|
||||||
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="完成条件" key="completionCondition">
|
|
||||||
<el-input
|
|
||||||
v-model="loopInstanceForm.completionCondition"
|
|
||||||
clearable
|
|
||||||
@change="updateLoopCondition"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- add by 芋艿：由于「异步状态」暂时用不到，所以这里 display 为 none -->
|
|
||||||
<el-form-item label="异步状态" key="async" style="display: none">
|
|
||||||
<el-checkbox
|
|
||||||
v-model="loopInstanceForm.asyncBefore"
|
|
||||||
label="异步前"
|
|
||||||
@change="updateLoopAsync('asyncBefore')"
|
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
v-model="loopInstanceForm.asyncAfter"
|
|
||||||
label="异步后"
|
|
||||||
@change="updateLoopAsync('asyncAfter')"
|
|
||||||
/>
|
|
||||||
<el-checkbox
|
|
||||||
v-model="loopInstanceForm.exclusive"
|
|
||||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
|
||||||
label="排除"
|
|
||||||
@change="updateLoopAsync('exclusive')"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="重试周期"
|
|
||||||
prop="timeCycle"
|
|
||||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
|
||||||
key="timeCycle"
|
|
||||||
>
|
|
||||||
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({ name: 'ElementMultiInstance' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
businessObject: Object,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
const prefix = inject('prefix')
|
|
||||||
const loopCharacteristics = ref('')
|
|
||||||
//默认配置，用来覆盖原始不存在的选项，避免报错
|
|
||||||
const defaultLoopInstanceForm = ref({
|
|
||||||
completionCondition: '',
|
|
||||||
loopCardinality: '',
|
|
||||||
extensionElements: [],
|
|
||||||
asyncAfter: false,
|
|
||||||
asyncBefore: false,
|
|
||||||
exclusive: false
|
|
||||||
})
|
|
||||||
const loopInstanceForm = ref<any>({})
|
|
||||||
const bpmnElement = ref(null)
|
|
||||||
const multiLoopInstance = ref(null)
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
|
|
||||||
const getElementLoop = (businessObject) => {
|
|
||||||
if (!businessObject.loopCharacteristics) {
|
|
||||||
loopCharacteristics.value = 'Null'
|
|
||||||
loopInstanceForm.value = {}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
|
|
||||||
loopCharacteristics.value = 'StandardLoop'
|
|
||||||
loopInstanceForm.value = {}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (businessObject.loopCharacteristics.isSequential) {
|
|
||||||
loopCharacteristics.value = 'SequentialMultiInstance'
|
|
||||||
} else {
|
|
||||||
loopCharacteristics.value = 'ParallelMultiInstance'
|
|
||||||
}
|
|
||||||
// 合并配置
|
|
||||||
loopInstanceForm.value = {
|
|
||||||
...defaultLoopInstanceForm.value,
|
|
||||||
...businessObject.loopCharacteristics,
|
|
||||||
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
|
|
||||||
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
|
|
||||||
}
|
|
||||||
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
|
|
||||||
multiLoopInstance.value = bpmnInstances().bpmnElement.businessObject.loopCharacteristics
|
|
||||||
// 更新表单
|
|
||||||
if (
|
|
||||||
businessObject.loopCharacteristics.extensionElements &&
|
|
||||||
businessObject.loopCharacteristics.extensionElements.values &&
|
|
||||||
businessObject.loopCharacteristics.extensionElements.values.length
|
|
||||||
) {
|
|
||||||
loopInstanceForm.value['timeCycle'] =
|
|
||||||
businessObject.loopCharacteristics.extensionElements.values[0].body
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeLoopCharacteristicsType = (type) => {
|
|
||||||
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
|
|
||||||
// 取消多实例配置
|
|
||||||
if (type === 'Null') {
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
loopCharacteristics: null
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 配置循环
|
|
||||||
if (type === 'StandardLoop') {
|
|
||||||
const loopCharacteristicsObject = bpmnInstances().moddle.create(
|
|
||||||
'bpmn:StandardLoopCharacteristics'
|
|
||||||
)
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
loopCharacteristics: loopCharacteristicsObject
|
|
||||||
})
|
|
||||||
multiLoopInstance.value = null
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 时序
|
|
||||||
if (type === 'SequentialMultiInstance') {
|
|
||||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
|
||||||
'bpmn:MultiInstanceLoopCharacteristics',
|
|
||||||
{ isSequential: true }
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
|
||||||
'bpmn:MultiInstanceLoopCharacteristics',
|
|
||||||
{ collection: '${coll_userList}' }
|
|
||||||
)
|
|
||||||
}
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
loopCharacteristics: toRaw(multiLoopInstance.value)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 循环基数
|
|
||||||
const updateLoopCardinality = (cardinality) => {
|
|
||||||
let loopCardinality = null
|
|
||||||
if (cardinality && cardinality.length) {
|
|
||||||
loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
|
||||||
body: cardinality
|
|
||||||
})
|
|
||||||
}
|
|
||||||
bpmnInstances().modeling.updateModdleProperties(
|
|
||||||
toRaw(bpmnElement.value),
|
|
||||||
multiLoopInstance.value,
|
|
||||||
{
|
|
||||||
loopCardinality
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 完成条件
|
|
||||||
const updateLoopCondition = (condition) => {
|
|
||||||
let completionCondition = null
|
|
||||||
if (condition && condition.length) {
|
|
||||||
completionCondition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
|
||||||
body: condition
|
|
||||||
})
|
|
||||||
}
|
|
||||||
bpmnInstances().modeling.updateModdleProperties(
|
|
||||||
toRaw(bpmnElement.value),
|
|
||||||
multiLoopInstance.value,
|
|
||||||
{
|
|
||||||
completionCondition
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重试周期
|
|
||||||
const updateLoopTimeCycle = (timeCycle) => {
|
|
||||||
const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
|
|
||||||
values: [
|
|
||||||
bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
|
|
||||||
body: timeCycle
|
|
||||||
})
|
|
||||||
]
|
|
||||||
})
|
|
||||||
bpmnInstances().modeling.updateModdleProperties(
|
|
||||||
toRaw(bpmnElement.value),
|
|
||||||
multiLoopInstance.value,
|
|
||||||
{
|
|
||||||
extensionElements
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 直接更新的基础信息
|
|
||||||
const updateLoopBase = () => {
|
|
||||||
bpmnInstances().modeling.updateModdleProperties(
|
|
||||||
toRaw(bpmnElement.value),
|
|
||||||
multiLoopInstance.value,
|
|
||||||
{
|
|
||||||
collection: loopInstanceForm.value.collection || null,
|
|
||||||
elementVariable: loopInstanceForm.value.elementVariable || null
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 各异步状态
|
|
||||||
const updateLoopAsync = (key) => {
|
|
||||||
const { asyncBefore, asyncAfter } = loopInstanceForm.value
|
|
||||||
let asyncAttr = Object.create(null)
|
|
||||||
if (!asyncBefore && !asyncAfter) {
|
|
||||||
// this.$set(this.loopInstanceForm, "exclusive", false);
|
|
||||||
loopInstanceForm.value['exclusive'] = false
|
|
||||||
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
|
|
||||||
} else {
|
|
||||||
asyncAttr[key] = loopInstanceForm.value[key]
|
|
||||||
}
|
|
||||||
bpmnInstances().modeling.updateModdleProperties(
|
|
||||||
toRaw(bpmnElement.value),
|
|
||||||
multiLoopInstance.value,
|
|
||||||
asyncAttr
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeConfig = (config) => {
|
|
||||||
if (config === '依次审批') {
|
|
||||||
changeLoopCharacteristicsType('SequentialMultiInstance')
|
|
||||||
updateLoopCardinality('1')
|
|
||||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
|
||||||
} else if (config === '会签') {
|
|
||||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
|
||||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
|
||||||
} else if (config === '或签') {
|
|
||||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
|
||||||
updateLoopCondition('${ nrOfCompletedInstances > 0 }')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
multiLoopInstance.value = null
|
|
||||||
bpmnElement.value = null
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.businessObject,
|
|
||||||
(val) => {
|
|
||||||
bpmnElement.value = bpmnInstances().bpmnElement
|
|
||||||
getElementLoop(val)
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<div class="element-property input-property">
|
|
||||||
<div class="element-property__label">元素文档：</div>
|
|
||||||
<div class="element-property__value">
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
v-model="documentation"
|
|
||||||
resize="vertical"
|
|
||||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
||||||
@input="updateDocumentation"
|
|
||||||
@blur="updateDocumentation"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({ name: 'ElementOtherConfig' })
|
|
||||||
const props = defineProps({
|
|
||||||
id: String
|
|
||||||
})
|
|
||||||
const documentation = ref('')
|
|
||||||
const bpmnElement = ref()
|
|
||||||
const bpmnInstances = () => (window as any).bpmnInstances
|
|
||||||
const updateDocumentation = () => {
|
|
||||||
;(bpmnElement.value && bpmnElement.value.id === props.id) ||
|
|
||||||
(bpmnElement.value = bpmnInstances().elementRegistry.get(props.id))
|
|
||||||
const documentations = bpmnInstances().bpmnFactory.create('bpmn:Documentation', {
|
|
||||||
text: documentation.value
|
|
||||||
})
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
documentation: [documentations]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
bpmnElement.value = null
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.id,
|
|
||||||
(id) => {
|
|
||||||
if (id && id.length) {
|
|
||||||
nextTick(() => {
|
|
||||||
const documentations = bpmnInstances().bpmnElement.businessObject?.documentation
|
|
||||||
documentation.value = documentations && documentations.length ? documentations[0].text : ''
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
documentation.value = ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,169 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<el-table :data="elementPropertyList" max-height="240" fit border>
|
|
||||||
<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 lang="ts" setup>
|
|
||||||
import { ElMessageBox } from 'element-plus'
|
|
||||||
defineOptions({ name: 'ElementProperties' })
|
|
||||||
const props = defineProps({
|
|
||||||
id: String,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
const prefix = inject('prefix')
|
|
||||||
// const width = inject('width')
|
|
||||||
|
|
||||||
const elementPropertyList = ref<any[]>([])
|
|
||||||
const propertyForm = ref<any>({})
|
|
||||||
const editingPropertyIndex = ref(-1)
|
|
||||||
const propertyFormModelVisible = ref(false)
|
|
||||||
const bpmnElement = ref()
|
|
||||||
const otherExtensionList = ref()
|
|
||||||
const bpmnElementProperties = ref()
|
|
||||||
const bpmnElementPropertyList = ref()
|
|
||||||
const attributeFormRef = ref()
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
|
|
||||||
const resetAttributesList = () => {
|
|
||||||
console.log(window, 'windowwindowwindowwindowwindowwindowwindow')
|
|
||||||
bpmnElement.value = 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 = 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) {
|
|
||||||
bpmnInstances().modeling.updateModdleProperties(
|
|
||||||
toRaw(bpmnElement.value),
|
|
||||||
toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
|
|
||||||
{
|
|
||||||
name,
|
|
||||||
value
|
|
||||||
}
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
// 新建属性字段
|
|
||||||
const newPropertyObject = bpmnInstances().moddle.create(`${prefix}:Property`, {
|
|
||||||
name,
|
|
||||||
value
|
|
||||||
})
|
|
||||||
// 新建一个属性字段的保存列表
|
|
||||||
const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
|
|
||||||
values: bpmnElementPropertyList.value.concat([newPropertyObject])
|
|
||||||
})
|
|
||||||
updateElementExtensions(propertiesObject)
|
|
||||||
}
|
|
||||||
propertyFormModelVisible.value = false
|
|
||||||
resetAttributesList()
|
|
||||||
}
|
|
||||||
const updateElementExtensions = (properties) => {
|
|
||||||
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
|
|
||||||
values: otherExtensionList.value.concat([properties])
|
|
||||||
})
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
extensionElements: extensions
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.id,
|
|
||||||
(val) => {
|
|
||||||
if (val) {
|
|
||||||
val && val.length && resetAttributesList()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<div class="panel-tab__content--title">
|
|
||||||
<span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />消息列表</span>
|
|
||||||
<XButton type="primary" title="创建新消息" preIcon="ep:plus" @click="openModel('message')" />
|
|
||||||
</div>
|
|
||||||
<el-table :data="messageList" border>
|
|
||||||
<el-table-column type="index" label="序号" width="60px" />
|
|
||||||
<el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
|
|
||||||
<el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
|
|
||||||
</el-table>
|
|
||||||
<div
|
|
||||||
class="panel-tab__content--title"
|
|
||||||
style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eee"
|
|
||||||
>
|
|
||||||
<span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />信号列表</span>
|
|
||||||
<XButton type="primary" title="创建新信号" preIcon="ep:plus" @click="openModel('signal')" />
|
|
||||||
</div>
|
|
||||||
<el-table :data="signalList" border>
|
|
||||||
<el-table-column type="index" label="序号" width="60px" />
|
|
||||||
<el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
|
|
||||||
<el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<el-dialog
|
|
||||||
v-model="dialogVisible"
|
|
||||||
:title="modelConfig.title"
|
|
||||||
:close-on-click-modal="false"
|
|
||||||
width="400px"
|
|
||||||
append-to-body
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<el-form :model="modelObjectForm" label-width="90px">
|
|
||||||
<el-form-item :label="modelConfig.idLabel">
|
|
||||||
<el-input v-model="modelObjectForm.id" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="modelConfig.nameLabel">
|
|
||||||
<el-input v-model="modelObjectForm.name" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="addNewObject">保 存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({ name: 'SignalAndMassage' })
|
|
||||||
|
|
||||||
const message = useMessage()
|
|
||||||
const signalList = ref<any[]>([])
|
|
||||||
const messageList = ref<any[]>([])
|
|
||||||
const dialogVisible = ref(false)
|
|
||||||
const modelType = ref('')
|
|
||||||
const modelObjectForm = ref<any>({})
|
|
||||||
const rootElements = ref()
|
|
||||||
const messageIdMap = ref()
|
|
||||||
const signalIdMap = ref()
|
|
||||||
const modelConfig = computed(() => {
|
|
||||||
if (modelType.value === 'message') {
|
|
||||||
return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
|
|
||||||
} else {
|
|
||||||
return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' }
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
|
|
||||||
const initDataList = () => {
|
|
||||||
console.log(window, 'window')
|
|
||||||
rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
|
|
||||||
messageIdMap.value = {}
|
|
||||||
signalIdMap.value = {}
|
|
||||||
messageList.value = []
|
|
||||||
signalList.value = []
|
|
||||||
rootElements.value.forEach((el) => {
|
|
||||||
if (el.$type === 'bpmn:Message') {
|
|
||||||
messageIdMap.value[el.id] = true
|
|
||||||
messageList.value.push({ ...el })
|
|
||||||
}
|
|
||||||
if (el.$type === 'bpmn:Signal') {
|
|
||||||
signalIdMap.value[el.id] = true
|
|
||||||
signalList.value.push({ ...el })
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const openModel = (type) => {
|
|
||||||
modelType.value = type
|
|
||||||
modelObjectForm.value = {}
|
|
||||||
dialogVisible.value = true
|
|
||||||
}
|
|
||||||
const addNewObject = () => {
|
|
||||||
if (modelType.value === 'message') {
|
|
||||||
if (messageIdMap.value[modelObjectForm.value.id]) {
|
|
||||||
message.error('该消息已存在，请修改id后重新保存')
|
|
||||||
}
|
|
||||||
const messageRef = bpmnInstances().moddle.create('bpmn:Message', modelObjectForm.value)
|
|
||||||
rootElements.value.push(messageRef)
|
|
||||||
} else {
|
|
||||||
if (signalIdMap.value[modelObjectForm.value.id]) {
|
|
||||||
message.error('该信号已存在，请修改id后重新保存')
|
|
||||||
}
|
|
||||||
const signalRef = bpmnInstances().moddle.create('bpmn:Signal', modelObjectForm.value)
|
|
||||||
rootElements.value.push(signalRef)
|
|
||||||
}
|
|
||||||
dialogVisible.value = false
|
|
||||||
initDataList()
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initDataList()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="panel-tab__content">
|
|
||||||
<el-form size="small" label-width="90px">
|
|
||||||
<!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
|
|
||||||
<el-form-item label="异步延续" style="display: none">
|
|
||||||
<el-checkbox
|
|
||||||
v-model="taskConfigForm.asyncBefore"
|
|
||||||
label="异步前"
|
|
||||||
@change="changeTaskAsync"
|
|
||||||
/>
|
|
||||||
<el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />
|
|
||||||
<el-checkbox
|
|
||||||
v-model="taskConfigForm.exclusive"
|
|
||||||
v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore"
|
|
||||||
label="排除"
|
|
||||||
@change="changeTaskAsync"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<component :is="witchTaskComponent" v-bind="$props" />
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import UserTask from './task-components/UserTask.vue'
|
|
||||||
import ScriptTask from './task-components/ScriptTask.vue'
|
|
||||||
import ReceiveTask from './task-components/ReceiveTask.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'ElementTaskConfig' })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
id: String,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
const taskConfigForm = ref({
|
|
||||||
asyncAfter: false,
|
|
||||||
asyncBefore: false,
|
|
||||||
exclusive: false
|
|
||||||
})
|
|
||||||
const witchTaskComponent = ref()
|
|
||||||
const installedComponent = ref({
|
|
||||||
// 手工任务与普通任务一致，不需要其他配置
|
|
||||||
// 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
|
|
||||||
// 发送任务、服务任务、业务规则任务共用一个相同配置
|
|
||||||
UserTask: 'UserTask', // 用户任务配置
|
|
||||||
ScriptTask: 'ScriptTask', // 脚本任务配置
|
|
||||||
ReceiveTask: 'ReceiveTask' // 消息接收任务
|
|
||||||
})
|
|
||||||
const bpmnElement = ref()
|
|
||||||
|
|
||||||
const bpmnInstances = () => (window as any).bpmnInstances
|
|
||||||
const changeTaskAsync = () => {
|
|
||||||
if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
|
|
||||||
taskConfigForm.value.exclusive = false
|
|
||||||
}
|
|
||||||
bpmnInstances().modeling.updateProperties(bpmnInstances().bpmnElement, {
|
|
||||||
...taskConfigForm.value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.id,
|
|
||||||
() => {
|
|
||||||
bpmnElement.value = bpmnInstances().bpmnElement
|
|
||||||
taskConfigForm.value.asyncBefore = bpmnElement.value?.businessObject?.asyncBefore
|
|
||||||
taskConfigForm.value.asyncAfter = bpmnElement.value?.businessObject?.asyncAfter
|
|
||||||
taskConfigForm.value.exclusive = bpmnElement.value?.businessObject?.exclusive
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
watch(
|
|
||||||
() => props.type,
|
|
||||||
() => {
|
|
||||||
// witchTaskComponent.value = installedComponent.value[props.type]
|
|
||||||
if (props.type == installedComponent.value.UserTask) {
|
|
||||||
witchTaskComponent.value = UserTask
|
|
||||||
}
|
|
||||||
if (props.type == installedComponent.value.ScriptTask) {
|
|
||||||
witchTaskComponent.value = ScriptTask
|
|
||||||
}
|
|
||||||
if (props.type == installedComponent.value.ReceiveTask) {
|
|
||||||
witchTaskComponent.value = ReceiveTask
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<!-- 表达式选择 -->
|
|
||||||
<template>
|
|
||||||
<Dialog title="请选择表达式" v-model="dialogVisible" width="1024px">
|
|
||||||
<ContentWrap>
|
|
||||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
|
||||||
<el-table-column label="名字" align="center" prop="name" />
|
|
||||||
<el-table-column label="表达式" align="center" prop="expression" />
|
|
||||||
<el-table-column label="操作" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button link type="primary" @click="select(scope.row)"> 选择 </el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
import { ProcessExpressionApi, ProcessExpressionVO } from '@/api/bpm/processExpression'
|
|
||||||
|
|
||||||
/** BPM 流程 表单 */
|
|
||||||
defineOptions({ name: 'ProcessExpressionDialog' })
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const loading = ref(true) // 列表的加载中
|
|
||||||
const list = ref<ProcessExpressionVO[]>([]) // 列表的数据
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
type: undefined,
|
|
||||||
status: CommonStatusEnum.ENABLE
|
|
||||||
})
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string) => {
|
|
||||||
dialogVisible.value = true
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
queryParams.type = type
|
|
||||||
const data = await ProcessExpressionApi.getProcessExpressionPage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const select = async (row) => {
|
|
||||||
dialogVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('select', row)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
<template>
|
|
||||||
<div style="margin-top: 16px">
|
|
||||||
<el-form-item label="消息实例">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<el-select v-model="bindMessageId" @change="updateTaskMessage">
|
|
||||||
<el-option
|
|
||||||
v-for="key in Object.keys(messageMap)"
|
|
||||||
:value="key"
|
|
||||||
:label="messageMap[key]"
|
|
||||||
:key="key"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
<XButton
|
|
||||||
type="primary"
|
|
||||||
preIcon="ep:plus"
|
|
||||||
style="margin-left: 8px"
|
|
||||||
@click="openMessageModel"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-dialog
|
|
||||||
v-model="messageModelVisible"
|
|
||||||
:close-on-click-modal="false"
|
|
||||||
title="创建新消息"
|
|
||||||
width="400px"
|
|
||||||
append-to-body
|
|
||||||
destroy-on-close
|
|
||||||
>
|
|
||||||
<el-form :model="newMessageForm" size="small" label-width="90px">
|
|
||||||
<el-form-item label="消息ID">
|
|
||||||
<el-input v-model="newMessageForm.id" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="消息名称">
|
|
||||||
<el-input v-model="newMessageForm.name" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineOptions({ name: 'ReceiveTask' })
|
|
||||||
const props = defineProps({
|
|
||||||
id: String,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
|
|
||||||
const message = useMessage()
|
|
||||||
|
|
||||||
const bindMessageId = ref('')
|
|
||||||
const newMessageForm = ref<any>({})
|
|
||||||
const messageMap = ref<any>({})
|
|
||||||
const messageModelVisible = ref(false)
|
|
||||||
const bpmnElement = ref<any>()
|
|
||||||
const bpmnMessageRefsMap = ref<any>()
|
|
||||||
const bpmnRootElements = ref<any>()
|
|
||||||
|
|
||||||
const bpmnInstances = () => (window as any).bpmnInstances
|
|
||||||
const getBindMessage = () => {
|
|
||||||
bpmnElement.value = bpmnInstances().bpmnElement
|
|
||||||
bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
|
|
||||||
}
|
|
||||||
const openMessageModel = () => {
|
|
||||||
messageModelVisible.value = true
|
|
||||||
newMessageForm.value = {}
|
|
||||||
}
|
|
||||||
const createNewMessage = () => {
|
|
||||||
if (messageMap.value[newMessageForm.value.id]) {
|
|
||||||
message.error('该消息已存在，请修改id后重新保存')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
|
|
||||||
bpmnRootElements.value.push(newMessage)
|
|
||||||
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
|
|
||||||
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
|
|
||||||
messageModelVisible.value = false
|
|
||||||
}
|
|
||||||
const updateTaskMessage = (messageId) => {
|
|
||||||
if (messageId === '-1') {
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
messageRef: null
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
messageRef: bpmnMessageRefsMap.value[messageId]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
bpmnMessageRefsMap.value = Object.create(null)
|
|
||||||
bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
|
|
||||||
bpmnRootElements.value
|
|
||||||
.filter((el) => el.$type === 'bpmn:Message')
|
|
||||||
.forEach((m) => {
|
|
||||||
bpmnMessageRefsMap.value[m.id] = m
|
|
||||||
messageMap.value[m.id] = m.name
|
|
||||||
})
|
|
||||||
messageMap.value['-1'] = '无'
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
bpmnElement.value = null
|
|
||||||
})
|
|
||||||
watch(
|
|
||||||
() => props.id,
|
|
||||||
() => {
|
|
||||||
// bpmnElement.value = bpmnInstances().bpmnElement
|
|
||||||
nextTick(() => {
|
|
||||||
getBindMessage()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,99 +0,0 @@
|
||||||
<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 lang="ts" setup>
|
|
||||||
defineOptions({ name: 'ScriptTask' })
|
|
||||||
const props = defineProps({
|
|
||||||
id: String,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
const defaultTaskForm = ref({
|
|
||||||
scriptFormat: '',
|
|
||||||
script: '',
|
|
||||||
resource: '',
|
|
||||||
resultVariable: ''
|
|
||||||
})
|
|
||||||
const scriptTaskForm = ref<any>({})
|
|
||||||
const bpmnElement = ref()
|
|
||||||
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
|
|
||||||
}
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
bpmnElement.value = null
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.id,
|
|
||||||
() => {
|
|
||||||
bpmnElement.value = bpmnInstances().bpmnElement
|
|
||||||
nextTick(() => {
|
|
||||||
resetTaskForm()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,232 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-form label-width="100px">
|
|
||||||
<el-form-item label="规则类型" prop="candidateStrategy">
|
|
||||||
<el-select
|
|
||||||
v-model="userTaskForm.candidateStrategy"
|
|
||||||
clearable
|
|
||||||
style="width: 100%"
|
|
||||||
@change="changeCandidateStrategy"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="userTaskForm.candidateStrategy == 10"
|
|
||||||
label="指定角色"
|
|
||||||
prop="candidateParam"
|
|
||||||
>
|
|
||||||
<el-select
|
|
||||||
v-model="userTaskForm.candidateParam"
|
|
||||||
clearable
|
|
||||||
multiple
|
|
||||||
style="width: 100%"
|
|
||||||
@change="updateElementTask"
|
|
||||||
>
|
|
||||||
<el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="userTaskForm.candidateStrategy == 20 || userTaskForm.candidateStrategy == 21"
|
|
||||||
label="指定部门"
|
|
||||||
prop="candidateParam"
|
|
||||||
span="24"
|
|
||||||
>
|
|
||||||
<el-tree-select
|
|
||||||
ref="treeRef"
|
|
||||||
v-model="userTaskForm.candidateParam"
|
|
||||||
:data="deptTreeOptions"
|
|
||||||
:props="defaultProps"
|
|
||||||
empty-text="加载中，请稍后"
|
|
||||||
multiple
|
|
||||||
node-key="id"
|
|
||||||
show-checkbox
|
|
||||||
@change="updateElementTask"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="userTaskForm.candidateStrategy == 22"
|
|
||||||
label="指定岗位"
|
|
||||||
prop="candidateParam"
|
|
||||||
span="24"
|
|
||||||
>
|
|
||||||
<el-select
|
|
||||||
v-model="userTaskForm.candidateParam"
|
|
||||||
clearable
|
|
||||||
multiple
|
|
||||||
style="width: 100%"
|
|
||||||
@change="updateElementTask"
|
|
||||||
>
|
|
||||||
<el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="userTaskForm.candidateStrategy == 30"
|
|
||||||
label="指定用户"
|
|
||||||
prop="candidateParam"
|
|
||||||
span="24"
|
|
||||||
>
|
|
||||||
<el-select
|
|
||||||
v-model="userTaskForm.candidateParam"
|
|
||||||
clearable
|
|
||||||
multiple
|
|
||||||
style="width: 100%"
|
|
||||||
@change="updateElementTask"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in userOptions"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.nickname"
|
|
||||||
:value="item.id"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="userTaskForm.candidateStrategy === 40"
|
|
||||||
label="指定用户组"
|
|
||||||
prop="candidateParam"
|
|
||||||
>
|
|
||||||
<el-select
|
|
||||||
v-model="userTaskForm.candidateParam"
|
|
||||||
clearable
|
|
||||||
multiple
|
|
||||||
style="width: 100%"
|
|
||||||
@change="updateElementTask"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in userGroupOptions"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-if="userTaskForm.candidateStrategy === 60"
|
|
||||||
label="流程表达式"
|
|
||||||
prop="candidateParam"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
v-model="userTaskForm.candidateParam[0]"
|
|
||||||
clearable
|
|
||||||
style="width: 72%"
|
|
||||||
@change="updateElementTask"
|
|
||||||
/>
|
|
||||||
<el-button class="ml-5px" size="small" type="success" @click="openProcessExpressionDialog"
|
|
||||||
>选择表达式</el-button
|
|
||||||
>
|
|
||||||
<!-- 选择弹窗 -->
|
|
||||||
<ProcessExpressionDialog ref="processExpressionDialogRef" @select="selectProcessExpression" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { defaultProps, handleTree } from '@/utils/tree'
|
|
||||||
import * as RoleApi from '@/api/system/role'
|
|
||||||
import * as DeptApi from '@/api/system/dept'
|
|
||||||
import * as PostApi from '@/api/system/post'
|
|
||||||
import * as UserApi from '@/api/system/user'
|
|
||||||
import * as UserGroupApi from '@/api/bpm/userGroup'
|
|
||||||
import ProcessExpressionDialog from './ProcessExpressionDialog.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'UserTask' })
|
|
||||||
const props = defineProps({
|
|
||||||
id: String,
|
|
||||||
type: String
|
|
||||||
})
|
|
||||||
const userTaskForm = ref({
|
|
||||||
candidateStrategy: undefined, // 分配规则
|
|
||||||
candidateParam: [] // 分配选项
|
|
||||||
})
|
|
||||||
const bpmnElement = ref()
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
|
|
||||||
const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
|
|
||||||
const deptTreeOptions = ref() // 部门树
|
|
||||||
const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
|
|
||||||
const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
|
|
||||||
const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
|
|
||||||
|
|
||||||
const resetTaskForm = () => {
|
|
||||||
const businessObject = bpmnElement.value.businessObject
|
|
||||||
if (!businessObject) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (businessObject.candidateStrategy != undefined) {
|
|
||||||
userTaskForm.value.candidateStrategy = parseInt(businessObject.candidateStrategy) as any
|
|
||||||
} else {
|
|
||||||
userTaskForm.value.candidateStrategy = undefined
|
|
||||||
}
|
|
||||||
if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
|
|
||||||
if (userTaskForm.value.candidateStrategy === 60) {
|
|
||||||
// 特殊：流程表达式，只有一个 input 输入框
|
|
||||||
userTaskForm.value.candidateParam = [businessObject.candidateParam]
|
|
||||||
} else {
|
|
||||||
userTaskForm.value.candidateParam = businessObject.candidateParam
|
|
||||||
.split(',')
|
|
||||||
.map((item) => +item)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
userTaskForm.value.candidateParam = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
|
|
||||||
const changeCandidateStrategy = () => {
|
|
||||||
userTaskForm.value.candidateParam = []
|
|
||||||
updateElementTask()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 选中某个 options 时候，更新 bpmn 图 */
|
|
||||||
const updateElementTask = () => {
|
|
||||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
|
||||||
candidateStrategy: userTaskForm.value.candidateStrategy,
|
|
||||||
candidateParam: userTaskForm.value.candidateParam.join(',')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开监听器弹窗
|
|
||||||
const processExpressionDialogRef = ref()
|
|
||||||
const openProcessExpressionDialog = async () => {
|
|
||||||
processExpressionDialogRef.value.open()
|
|
||||||
}
|
|
||||||
const selectProcessExpression = (expression) => {
|
|
||||||
userTaskForm.value.candidateParam = [expression.expression]
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.id,
|
|
||||||
() => {
|
|
||||||
bpmnElement.value = bpmnInstances().bpmnElement
|
|
||||||
nextTick(() => {
|
|
||||||
resetTaskForm()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
// 获得角色列表
|
|
||||||
roleOptions.value = await RoleApi.getSimpleRoleList()
|
|
||||||
// 获得部门列表
|
|
||||||
const deptOptions = await DeptApi.getSimpleDeptList()
|
|
||||||
deptTreeOptions.value = handleTree(deptOptions, 'id')
|
|
||||||
// 获得岗位列表
|
|
||||||
postOptions.value = await PostApi.getSimplePostList()
|
|
||||||
// 获得用户列表
|
|
||||||
userOptions.value = await UserApi.getSimpleUserList()
|
|
||||||
// 获得用户组列表
|
|
||||||
userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
bpmnElement.value = null
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
/* 改变主题色变量 */
|
|
||||||
$--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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
@import './process-designer.scss';
|
|
||||||
@import './process-panel.scss';
|
|
||||||
|
|
@ -1,161 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
import { toRaw } from 'vue'
|
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
|
||||||
// 创建监听器实例
|
|
||||||
export function createListenerObject(options, isTask, prefix) {
|
|
||||||
debugger
|
|
||||||
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 = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
|
||||||
body: options.eventTimeDefinitions
|
|
||||||
})
|
|
||||||
const TimerEventDefinition = bpmnInstances().moddle.create('bpmn:TimerEventDefinition', {
|
|
||||||
id: `TimerEventDefinition_${uuid(8)}`,
|
|
||||||
[`time${options.eventDefinitionType.replace(/^\S/, (s) => s.toUpperCase())}`]: timeDefinition
|
|
||||||
})
|
|
||||||
listenerObj.eventDefinitions = [TimerEventDefinition]
|
|
||||||
}
|
|
||||||
return 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 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 bpmnInstances().moddle.create(`${prefix}:Script`, scriptConfig)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新元素扩展属性
|
|
||||||
export function updateElementExtensions(element, extensionList) {
|
|
||||||
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
|
|
||||||
values: extensionList
|
|
||||||
})
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
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
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import BpmnRenderer from 'bpmn-js/lib/draw/BpmnRenderer'
|
|
||||||
|
|
||||||
export default function CustomRenderer(config, eventBus, styles, pathMap, canvas, textRenderer) {
|
|
||||||
BpmnRenderer.call(this, config, eventBus, styles, pathMap, canvas, textRenderer, 2000)
|
|
||||||
|
|
||||||
this.handlers['label'] = function () {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const F = function () {} // 核心，利用空对象作为中介；
|
|
||||||
F.prototype = BpmnRenderer.prototype // 核心，将父类的原型赋值给空对象F；
|
|
||||||
CustomRenderer.prototype = new F() // 核心，将 F的实例赋值给子类；
|
|
||||||
CustomRenderer.prototype.constructor = CustomRenderer // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import CustomRenderer from './CustomRenderer'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
__init__: ['customRenderer'],
|
|
||||||
customRenderer: ['type', CustomRenderer]
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import CustomRules from './CustomRules'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
__init__: ['customRules'],
|
|
||||||
customRules: ['type', CustomRules]
|
|
||||||
}
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
/**
|
|
||||||
* 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)': '升级启动事件 (非中断)'
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
//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]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
export function debounce(fn, delay = 500) {
|
|
||||||
let timer
|
|
||||||
return function (...args) {
|
|
||||||
if (timer) {
|
|
||||||
clearTimeout(timer)
|
|
||||||
timer = null
|
|
||||||
}
|
|
||||||
timer = setTimeout(fn.bind(this, ...args), delay)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
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
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
import Message from './src/Message.vue'
|
|
||||||
|
|
||||||
export { Message }
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import * as NotifyMessageApi from '@/api/system/notify/message'
|
|
||||||
|
|
||||||
defineOptions({ name: 'Message' })
|
|
||||||
|
|
||||||
const { push } = useRouter()
|
|
||||||
const activeName = ref('notice')
|
|
||||||
const unreadCount = ref(0) // 未读消息数量
|
|
||||||
const list = ref<any[]>([]) // 消息列表
|
|
||||||
|
|
||||||
// 获得消息列表
|
|
||||||
const getList = async () => {
|
|
||||||
list.value = await NotifyMessageApi.getUnreadNotifyMessageList()
|
|
||||||
// 强制设置 unreadCount 为 0，避免小红点因为轮询太慢，不消除
|
|
||||||
unreadCount.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得未读消息数
|
|
||||||
const getUnreadCount = async () => {
|
|
||||||
NotifyMessageApi.getUnreadNotifyMessageCount().then((data) => {
|
|
||||||
unreadCount.value = data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 跳转我的站内信
|
|
||||||
const goMyList = () => {
|
|
||||||
push({
|
|
||||||
name: 'MyNotifyMessage'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// ========== 初始化 =========
|
|
||||||
onMounted(() => {
|
|
||||||
// 首次加载小红点
|
|
||||||
getUnreadCount()
|
|
||||||
// 轮询刷新小红点
|
|
||||||
setInterval(
|
|
||||||
() => {
|
|
||||||
getUnreadCount()
|
|
||||||
},
|
|
||||||
1000 * 60 * 2
|
|
||||||
)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="message">
|
|
||||||
<ElPopover :width="400" placement="bottom" trigger="click">
|
|
||||||
<template #reference>
|
|
||||||
<ElBadge :is-dot="unreadCount > 0" class="item">
|
|
||||||
<Icon :size="18" class="cursor-pointer" icon="ep:bell" @click="getList" />
|
|
||||||
</ElBadge>
|
|
||||||
</template>
|
|
||||||
<ElTabs v-model="activeName">
|
|
||||||
<ElTabPane label="我的站内信" name="notice">
|
|
||||||
<el-scrollbar class="message-list">
|
|
||||||
<template v-for="item in list" :key="item.id">
|
|
||||||
<div class="message-item">
|
|
||||||
<img alt="" class="message-icon" src="@/assets/imgs/avatar.gif" />
|
|
||||||
<div class="message-content">
|
|
||||||
<span class="message-title">
|
|
||||||
{{ item.templateNickname }}：{{ item.templateContent }}
|
|
||||||
</span>
|
|
||||||
<span class="message-date">
|
|
||||||
{{ formatDate(item.createTime) }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-scrollbar>
|
|
||||||
</ElTabPane>
|
|
||||||
</ElTabs>
|
|
||||||
<!-- 更多 -->
|
|
||||||
<div style="margin-top: 10px; text-align: right">
|
|
||||||
<XButton preIcon="ep:view" title="查看全部" type="primary" @click="goMyList" />
|
|
||||||
</div>
|
|
||||||
</ElPopover>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.message-empty {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 260px;
|
|
||||||
line-height: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-list {
|
|
||||||
display: flex;
|
|
||||||
height: 400px;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.message-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20px 0;
|
|
||||||
border-bottom: 1px solid var(--el-border-color-light);
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-icon {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
margin: 0 20px 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.message-title {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-date {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--el-text-color-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<script lang="tsx">
|
<script lang="tsx">
|
||||||
import { defineComponent, computed } from 'vue'
|
import { defineComponent, computed } from 'vue'
|
||||||
import { Message } from '@/layout/components//Message'
|
|
||||||
import { Collapse } from '@/layout/components/Collapse'
|
import { Collapse } from '@/layout/components/Collapse'
|
||||||
import { UserInfo } from '@/layout/components/UserInfo'
|
import { UserInfo } from '@/layout/components/UserInfo'
|
||||||
import { Screenfull } from '@/layout/components/Screenfull'
|
import { Screenfull } from '@/layout/components/Screenfull'
|
||||||
|
|
@ -38,8 +37,6 @@ const layout = computed(() => appStore.getLayout)
|
||||||
// 多语言图标
|
// 多语言图标
|
||||||
const locale = computed(() => appStore.getLocale)
|
const locale = computed(() => appStore.getLocale)
|
||||||
|
|
||||||
// 消息图标
|
|
||||||
const message = computed(() => appStore.getMessage)
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'ToolHeader',
|
name: 'ToolHeader',
|
||||||
|
|
@ -75,9 +72,6 @@ export default defineComponent({
|
||||||
color="var(--top-header-text-color)"
|
color="var(--top-header-text-color)"
|
||||||
></LocaleDropdown>
|
></LocaleDropdown>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
{message.value ? (
|
|
||||||
<Message class="custom-hover" color="var(--top-header-text-color)"></Message>
|
|
||||||
) : undefined}
|
|
||||||
<UserInfo></UserInfo>
|
<UserInfo></UserInfo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -86,7 +86,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||||
title: t('角色页面'),
|
title: t('角色页面'),
|
||||||
icon: 'ep:home-filled',
|
icon: 'ep:home-filled',
|
||||||
noCache: false,
|
noCache: false,
|
||||||
affix: true
|
affix: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -97,7 +97,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||||
title: t('职位'),
|
title: t('职位'),
|
||||||
icon: 'ep:home-filled',
|
icon: 'ep:home-filled',
|
||||||
noCache: false,
|
noCache: false,
|
||||||
affix: true
|
affix: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -108,7 +108,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||||
title: t('菜单'),
|
title: t('菜单'),
|
||||||
icon: 'ep:home-filled',
|
icon: 'ep:home-filled',
|
||||||
noCache: false,
|
noCache: false,
|
||||||
affix: true
|
affix: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -119,7 +119,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||||
title: t('租户'),
|
title: t('租户'),
|
||||||
icon: 'ep:home-filled',
|
icon: 'ep:home-filled',
|
||||||
noCache: false,
|
noCache: false,
|
||||||
affix: true
|
affix: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
@ -144,18 +144,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||||
title: t('common.profile')
|
title: t('common.profile')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'notify-message',
|
|
||||||
component: () => import('@/views/system/notify/my/index.vue'),
|
|
||||||
name: 'MyNotifyMessage',
|
|
||||||
meta: {
|
|
||||||
canTo: true,
|
|
||||||
hidden: true,
|
|
||||||
noTagsView: false,
|
|
||||||
icon: 'ep:message',
|
|
||||||
title: '我的站内信'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -181,53 +169,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
// {
|
|
||||||
// path: '/codegen',
|
|
||||||
// component: Layout,
|
|
||||||
// name: 'CodegenEdit',
|
|
||||||
// meta: {
|
|
||||||
// hidden: true
|
|
||||||
// },
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'edit',
|
|
||||||
// component: () => import('@/views/infra/codegen/EditTable.vue'),
|
|
||||||
// name: 'InfraCodegenEditTable',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// icon: 'ep:edit',
|
|
||||||
// title: '修改生成配置',
|
|
||||||
// activeMenu: 'infra/codegen/index'
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/job',
|
|
||||||
// component: Layout,
|
|
||||||
// name: 'JobL',
|
|
||||||
// meta: {
|
|
||||||
// hidden: true
|
|
||||||
// },
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'job-log',
|
|
||||||
// component: () => import('@/views/infra/job/logger/index.vue'),
|
|
||||||
// name: 'InfraJobLog',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// icon: 'ep:edit',
|
|
||||||
// title: '调度日志',
|
|
||||||
// activeMenu: 'infra/job/index'
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
component: () => import('@/views/Login/Login.vue'),
|
component: () => import('@/views/Login/Login.vue'),
|
||||||
|
|
@ -288,346 +229,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||||
noTagsView: true
|
noTagsView: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// path: '/bpm',
|
|
||||||
// component: Layout,
|
|
||||||
// name: 'bpm',
|
|
||||||
// meta: {
|
|
||||||
// hidden: true
|
|
||||||
// },
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'manager/form/edit',
|
|
||||||
// component: () => import('@/views/bpm/form/editor/index.vue'),
|
|
||||||
// name: 'BpmFormEditor',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// title: '设计流程表单',
|
|
||||||
// activeMenu: '/bpm/manager/form'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'manager/model/edit',
|
|
||||||
// component: () => import('@/views/bpm/model/editor/index.vue'),
|
|
||||||
// name: 'BpmModelEditor',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// title: '设计流程',
|
|
||||||
// activeMenu: '/bpm/manager/model'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'manager/simple/workflow/model/edit',
|
|
||||||
// component: () => import('@/views/bpm/simpleWorkflow/index.vue'),
|
|
||||||
// name: 'SimpleWorkflowDesignEditor',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// title: '仿钉钉设计流程',
|
|
||||||
// activeMenu: '/bpm/manager/model'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'manager/definition',
|
|
||||||
// component: () => import('@/views/bpm/definition/index.vue'),
|
|
||||||
// name: 'BpmProcessDefinition',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// title: '流程定义',
|
|
||||||
// activeMenu: '/bpm/manager/model'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'process-instance/detail',
|
|
||||||
// component: () => import('@/views/bpm/processInstance/detail/index.vue'),
|
|
||||||
// name: 'BpmProcessInstanceDetail',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// title: '流程详情',
|
|
||||||
// activeMenu: '/bpm/task/my'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'oa/leave/create',
|
|
||||||
// component: () => import('@/views/bpm/oa/leave/create.vue'),
|
|
||||||
// name: 'OALeaveCreate',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// title: '发起 OA 请假',
|
|
||||||
// activeMenu: '/bpm/oa/leave'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'oa/leave/detail',
|
|
||||||
// component: () => import('@/views/bpm/oa/leave/detail.vue'),
|
|
||||||
// name: 'OALeaveDetail',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// title: '查看 OA 请假',
|
|
||||||
// activeMenu: '/bpm/oa/leave'
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/mall/product', // 商品中心
|
|
||||||
// component: Layout,
|
|
||||||
// name: 'ProductCenter',
|
|
||||||
// meta: {
|
|
||||||
// hidden: true
|
|
||||||
// },
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'spu/add',
|
|
||||||
// component: () => import('@/views/mall/product/spu/form/index.vue'),
|
|
||||||
// name: 'ProductSpuAdd',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// icon: 'ep:edit',
|
|
||||||
// title: '商品添加',
|
|
||||||
// activeMenu: '/mall/product/spu'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'spu/edit/:id(\\d+)',
|
|
||||||
// component: () => import('@/views/mall/product/spu/form/index.vue'),
|
|
||||||
// name: 'ProductSpuEdit',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// icon: 'ep:edit',
|
|
||||||
// title: '商品编辑',
|
|
||||||
// activeMenu: '/mall/product/spu'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'spu/detail/:id(\\d+)',
|
|
||||||
// component: () => import('@/views/mall/product/spu/form/index.vue'),
|
|
||||||
// name: 'ProductSpuDetail',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// icon: 'ep:view',
|
|
||||||
// title: '商品详情',
|
|
||||||
// activeMenu: '/mall/product/spu'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'property/value/:propertyId(\\d+)',
|
|
||||||
// component: () => import('@/views/mall/product/property/value/index.vue'),
|
|
||||||
// name: 'ProductPropertyValue',
|
|
||||||
// meta: {
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// canTo: true,
|
|
||||||
// icon: 'ep:view',
|
|
||||||
// title: '商品属性值',
|
|
||||||
// activeMenu: '/product/property'
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/mall/trade', // 交易中心
|
|
||||||
// component: Layout,
|
|
||||||
// name: 'TradeCenter',
|
|
||||||
// meta: {
|
|
||||||
// hidden: true
|
|
||||||
// },
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'order/detail/:id(\\d+)',
|
|
||||||
// component: () => import('@/views/mall/trade/order/detail/index.vue'),
|
|
||||||
// name: 'TradeOrderDetail',
|
|
||||||
// meta: { title: '订单详情', icon: 'ep:view', activeMenu: '/mall/trade/order' }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'after-sale/detail/:id(\\d+)',
|
|
||||||
// component: () => import('@/views/mall/trade/afterSale/detail/index.vue'),
|
|
||||||
// name: 'TradeAfterSaleDetail',
|
|
||||||
// meta: { title: '退款详情', icon: 'ep:view', activeMenu: '/mall/trade/after-sale' }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/member',
|
|
||||||
// component: Layout,
|
|
||||||
// name: 'MemberCenter',
|
|
||||||
// meta: { hidden: true },
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'user/detail/:id',
|
|
||||||
// name: 'MemberUserDetail',
|
|
||||||
// meta: {
|
|
||||||
// title: '会员详情',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/member/user/detail/index.vue')
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/pay',
|
|
||||||
// component: Layout,
|
|
||||||
// name: 'pay',
|
|
||||||
// meta: { hidden: true },
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'cashier',
|
|
||||||
// name: 'PayCashier',
|
|
||||||
// meta: {
|
|
||||||
// title: '收银台',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/pay/cashier/index.vue')
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/diy',
|
|
||||||
// name: 'DiyCenter',
|
|
||||||
// meta: { hidden: true },
|
|
||||||
// component: Layout,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'template/decorate/:id',
|
|
||||||
// name: 'DiyTemplateDecorate',
|
|
||||||
// meta: {
|
|
||||||
// title: '模板装修',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/mall/promotion/diy/template'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/mall/promotion/diy/template/decorate.vue')
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'page/decorate/:id',
|
|
||||||
// name: 'DiyPageDecorate',
|
|
||||||
// meta: {
|
|
||||||
// title: '页面装修',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/mall/promotion/diy/page'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/mall/promotion/diy/page/decorate.vue')
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/crm',
|
|
||||||
// component: Layout,
|
|
||||||
// name: 'CrmCenter',
|
|
||||||
// meta: { hidden: true },
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: 'clue/detail/:id',
|
|
||||||
// name: 'CrmClueDetail',
|
|
||||||
// meta: {
|
|
||||||
// title: '线索详情',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/crm/clue'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/crm/clue/detail/index.vue')
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'customer/detail/:id',
|
|
||||||
// name: 'CrmCustomerDetail',
|
|
||||||
// meta: {
|
|
||||||
// title: '客户详情',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/crm/customer'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/crm/customer/detail/index.vue')
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'business/detail/:id',
|
|
||||||
// name: 'CrmBusinessDetail',
|
|
||||||
// meta: {
|
|
||||||
// title: '商机详情',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/crm/business'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/crm/business/detail/index.vue')
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'contract/detail/:id',
|
|
||||||
// name: 'CrmContractDetail',
|
|
||||||
// meta: {
|
|
||||||
// title: '合同详情',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/crm/contract'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/crm/contract/detail/index.vue')
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'receivable-plan/detail/:id',
|
|
||||||
// name: 'CrmReceivablePlanDetail',
|
|
||||||
// meta: {
|
|
||||||
// title: '回款计划详情',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/crm/receivable-plan'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/crm/receivable/plan/detail/index.vue')
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'receivable/detail/:id',
|
|
||||||
// name: 'CrmReceivableDetail',
|
|
||||||
// meta: {
|
|
||||||
// title: '回款详情',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/crm/receivable'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/crm/receivable/detail/index.vue')
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'contact/detail/:id',
|
|
||||||
// name: 'CrmContactDetail',
|
|
||||||
// meta: {
|
|
||||||
// title: '联系人详情',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/crm/contact'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/crm/contact/detail/index.vue')
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: 'product/detail/:id',
|
|
||||||
// name: 'CrmProductDetail',
|
|
||||||
// meta: {
|
|
||||||
// title: '产品详情',
|
|
||||||
// noCache: true,
|
|
||||||
// hidden: true,
|
|
||||||
// activeMenu: '/crm/product'
|
|
||||||
// },
|
|
||||||
// component: () => import('@/views/crm/product/detail/index.vue')
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default remainingRouter
|
export default remainingRouter
|
||||||
|
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
<template>
|
|
||||||
<Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情">
|
|
||||||
<el-descriptions :column="1" border>
|
|
||||||
<el-descriptions-item label="编号" min-width="120">
|
|
||||||
{{ detailData.id }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="用户类型">
|
|
||||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="用户编号">
|
|
||||||
{{ detailData.userId }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模版编号">
|
|
||||||
{{ detailData.templateId }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模板编码">
|
|
||||||
{{ detailData.templateCode }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="发送人名称">
|
|
||||||
{{ detailData.templateNickname }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模版内容">
|
|
||||||
{{ detailData.templateContent }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模版参数">
|
|
||||||
{{ detailData.templateParams }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="模版类型">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="是否已读">
|
|
||||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="阅读时间">
|
|
||||||
{{ formatDate(detailData.readTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="创建时间">
|
|
||||||
{{ formatDate(detailData.createTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import * as NotifyMessageApi from '@/api/system/notify/message'
|
|
||||||
|
|
||||||
defineOptions({ name: 'SystemNotifyMessageDetail' })
|
|
||||||
|
|
||||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const detailLoading = ref(false) // 表单的加载中
|
|
||||||
const detailData = ref({} as NotifyMessageApi.NotifyMessageVO) // 详情数据
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
|
|
||||||
dialogVisible.value = true
|
|
||||||
// 设置数据
|
|
||||||
detailLoading.value = true
|
|
||||||
try {
|
|
||||||
detailData.value = data
|
|
||||||
} finally {
|
|
||||||
detailLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,212 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" /> -->
|
|
||||||
|
|
||||||
<ContentWrap>
|
|
||||||
<!-- 搜索工作栏 -->
|
|
||||||
<el-form
|
|
||||||
class="-mb-15px"
|
|
||||||
:model="queryParams"
|
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="68px"
|
|
||||||
>
|
|
||||||
<el-form-item label="用户编号" prop="userId">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.userId"
|
|
||||||
placeholder="请输入用户编号"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户类型" prop="userType">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.userType"
|
|
||||||
placeholder="请选择用户类型"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模板编码" prop="templateCode">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.templateCode"
|
|
||||||
placeholder="请输入模板编码"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模版类型" prop="templateType">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.templateType"
|
|
||||||
placeholder="请选择模版类型"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="创建时间" prop="createTime">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="queryParams.createTime"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
type="daterange"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
||||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-table v-loading="loading" :data="list">
|
|
||||||
<el-table-column label="编号" align="center" prop="id" />
|
|
||||||
<el-table-column label="用户类型" align="center" prop="userType">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="用户编号" align="center" prop="userId" width="80" />
|
|
||||||
<el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
|
|
||||||
<el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
|
|
||||||
<el-table-column
|
|
||||||
label="模版内容"
|
|
||||||
align="center"
|
|
||||||
prop="templateContent"
|
|
||||||
width="200"
|
|
||||||
show-overflow-tooltip
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="模版参数"
|
|
||||||
align="center"
|
|
||||||
prop="templateParams"
|
|
||||||
width="180"
|
|
||||||
show-overflow-tooltip
|
|
||||||
>
|
|
||||||
<template #default="scope"> {{ scope.row.templateParams }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="模版类型" align="center" prop="templateType" width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="是否已读" align="center" prop="readStatus" width="100">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="阅读时间"
|
|
||||||
align="center"
|
|
||||||
prop="readTime"
|
|
||||||
width="180"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="创建时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
width="180"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" align="center" fixed="right">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="openDetail(scope.row)"
|
|
||||||
v-hasPermi="['system:notify-message:query']"
|
|
||||||
>
|
|
||||||
详情
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 表单弹窗：详情 -->
|
|
||||||
<NotifyMessageDetail ref="detailRef" />
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
|
||||||
import * as NotifyMessageApi from '@/api/system/notify/message'
|
|
||||||
import NotifyMessageDetail from './NotifyMessageDetail.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'SystemNotifyMessage' })
|
|
||||||
|
|
||||||
const loading = ref(true) // 列表的加载中
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const list = ref([]) // 列表的数据
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
userType: undefined,
|
|
||||||
userId: undefined,
|
|
||||||
templateCode: undefined,
|
|
||||||
templateType: undefined,
|
|
||||||
createTime: []
|
|
||||||
})
|
|
||||||
const queryFormRef = ref() // 搜索的表单
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields()
|
|
||||||
handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 详情操作 */
|
|
||||||
const detailRef = ref()
|
|
||||||
const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
|
|
||||||
detailRef.value.open(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(() => {
|
|
||||||
getList()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="消息详情">
|
|
||||||
<el-descriptions :column="1" border>
|
|
||||||
<el-descriptions-item label="发送人">
|
|
||||||
{{ detailData.templateNickname }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="发送时间">
|
|
||||||
{{ formatDate(detailData.createTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="消息类型">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="是否已读">
|
|
||||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item v-if="detailData.readStatus" label="阅读时间">
|
|
||||||
{{ formatDate(detailData.readTime) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="内容">
|
|
||||||
{{ detailData.templateContent }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
|
||||||
import { formatDate } from '@/utils/formatTime'
|
|
||||||
import * as NotifyMessageApi from '@/api/system/notify/message'
|
|
||||||
|
|
||||||
defineOptions({ name: 'MyNotifyMessageDetailDetail' })
|
|
||||||
|
|
||||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const detailLoading = ref(false) // 表单的加载中
|
|
||||||
const detailData = ref({} as NotifyMessageApi.NotifyMessageVO) // 详情数据
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
|
|
||||||
dialogVisible.value = true
|
|
||||||
// 设置数据
|
|
||||||
detailLoading.value = true
|
|
||||||
try {
|
|
||||||
detailData.value = data
|
|
||||||
} finally {
|
|
||||||
detailLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,218 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" /> -->
|
|
||||||
|
|
||||||
<ContentWrap>
|
|
||||||
<!-- 搜索工作栏 -->
|
|
||||||
<el-form
|
|
||||||
class="-mb-15px"
|
|
||||||
:model="queryParams"
|
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="68px"
|
|
||||||
>
|
|
||||||
<el-form-item label="是否已读" prop="readStatus">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.readStatus"
|
|
||||||
placeholder="请选择状态"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
|
||||||
:key="dict.value as any"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="发送时间" prop="createTime">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="queryParams.createTime"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
type="daterange"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
||||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
||||||
<el-button @click="handleUpdateList">
|
|
||||||
<Icon icon="ep:reading" class="mr-5px" /> 标记已读
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="handleUpdateAll">
|
|
||||||
<Icon icon="ep:reading" class="mr-5px" /> 全部已读
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-table
|
|
||||||
v-loading="loading"
|
|
||||||
:data="list"
|
|
||||||
ref="tableRef"
|
|
||||||
row-key="id"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" :selectable="selectable" :reserve-selection="true" />
|
|
||||||
<el-table-column label="发送人" align="center" prop="templateNickname" width="180" />
|
|
||||||
<el-table-column
|
|
||||||
label="发送时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
width="200"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
/>
|
|
||||||
<el-table-column label="类型" align="center" prop="templateType" width="180">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="消息内容"
|
|
||||||
align="center"
|
|
||||||
prop="templateContent"
|
|
||||||
show-overflow-tooltip
|
|
||||||
/>
|
|
||||||
<el-table-column label="是否已读" align="center" prop="readStatus" width="160">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="阅读时间"
|
|
||||||
align="center"
|
|
||||||
prop="readTime"
|
|
||||||
width="200"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" align="center" width="160">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
:type="scope.row.readStatus ? 'primary' : 'warning'"
|
|
||||||
@click="openDetail(scope.row)"
|
|
||||||
>
|
|
||||||
{{ scope.row.readStatus ? '详情' : '已读' }}
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 表单弹窗：详情 -->
|
|
||||||
<MyNotifyMessageDetail ref="detailRef" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
|
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
|
||||||
import * as NotifyMessageApi from '@/api/system/notify/message'
|
|
||||||
import MyNotifyMessageDetail from './MyNotifyMessageDetail.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'SystemMyNotify' })
|
|
||||||
|
|
||||||
const message = useMessage() // 消息
|
|
||||||
|
|
||||||
const loading = ref(true) // 列表的加载中
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const list = ref([]) // 列表的数据
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
readStatus: undefined,
|
|
||||||
createTime: []
|
|
||||||
})
|
|
||||||
const queryFormRef = ref() // 搜索的表单
|
|
||||||
const tableRef = ref() // 表格的 Ref
|
|
||||||
const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const data = await NotifyMessageApi.getMyNotifyMessagePage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields()
|
|
||||||
tableRef.value.clearSelection()
|
|
||||||
handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 详情操作 */
|
|
||||||
const detailRef = ref()
|
|
||||||
const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
|
|
||||||
if (!data.readStatus) {
|
|
||||||
handleReadOne(data.id)
|
|
||||||
}
|
|
||||||
detailRef.value.open(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 标记一条站内信已读 */
|
|
||||||
const handleReadOne = async (id) => {
|
|
||||||
await NotifyMessageApi.updateNotifyMessageRead(id)
|
|
||||||
await getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 标记全部站内信已读 **/
|
|
||||||
const handleUpdateAll = async () => {
|
|
||||||
await NotifyMessageApi.updateAllNotifyMessageRead()
|
|
||||||
message.success('全部已读成功！')
|
|
||||||
tableRef.value.clearSelection()
|
|
||||||
await getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 标记一些站内信已读 **/
|
|
||||||
const handleUpdateList = async () => {
|
|
||||||
if (selectedIds.value.length === 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
|
|
||||||
message.success('批量已读成功！')
|
|
||||||
tableRef.value.clearSelection()
|
|
||||||
await getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 某一行，是否允许选中 */
|
|
||||||
const selectable = (row) => {
|
|
||||||
return !row.readStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 当表格选择项发生变化时会触发该事件 */
|
|
||||||
const handleSelectionChange = (array: NotifyMessageApi.NotifyMessageVO[]) => {
|
|
||||||
selectedIds.value = []
|
|
||||||
if (!array) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
array.forEach((row) => selectedIds.value.push(row.id))
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(() => {
|
|
||||||
getList()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,141 +0,0 @@
|
||||||
<template>
|
|
||||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="140px"
|
|
||||||
v-loading="formLoading"
|
|
||||||
>
|
|
||||||
<el-form-item label="模版编码" prop="code">
|
|
||||||
<el-input v-model="formData.code" placeholder="请输入模版编码" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模板名称" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入模版名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="发件人名称" prop="nickname">
|
|
||||||
<el-input v-model="formData.nickname" placeholder="请输入发件人名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模板内容" prop="content">
|
|
||||||
<el-input type="textarea" v-model="formData.content" placeholder="请输入模板内容" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="类型" prop="type">
|
|
||||||
<el-select v-model="formData.type" placeholder="请选择类型">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="开启状态" prop="status">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.value"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="formData.remark" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import * as NotifyTemplateApi from '@/api/system/notify/template'
|
|
||||||
import { CommonStatusEnum } from '@/utils/constants'
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const dialogTitle = ref('') // 弹窗的标题
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formType = ref('') // 表单的类型
|
|
||||||
const formData = ref<NotifyTemplateApi.NotifyTemplateVO>({
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
nickname: '',
|
|
||||||
code: '',
|
|
||||||
content: '',
|
|
||||||
type: undefined,
|
|
||||||
params: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
type: [{ required: true, message: '消息类型不能为空', trigger: 'change' }],
|
|
||||||
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
|
|
||||||
code: [{ required: true, message: '模板编码不能为空', trigger: 'blur' }],
|
|
||||||
name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
|
|
||||||
nickname: [{ required: true, message: '发件人姓名不能为空', trigger: 'blur' }],
|
|
||||||
content: [{ required: true, message: '模板内容不能为空', trigger: 'blur' }]
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = async (type: string, id?: number) => {
|
|
||||||
dialogVisible.value = true
|
|
||||||
dialogTitle.value = type
|
|
||||||
formType.value = type
|
|
||||||
resetForm()
|
|
||||||
// 修改时，设置数据
|
|
||||||
if (id) {
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
formData.value = await NotifyTemplateApi.getNotifyTemplate(id)
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as NotifyTemplateApi.NotifyTemplateVO
|
|
||||||
if (formType.value === 'create') {
|
|
||||||
await NotifyTemplateApi.createNotifyTemplate(data)
|
|
||||||
message.success('新增成功')
|
|
||||||
} else {
|
|
||||||
await NotifyTemplateApi.updateNotifyTemplate(data)
|
|
||||||
message.success('修改成功')
|
|
||||||
}
|
|
||||||
dialogVisible.value = false
|
|
||||||
// 发送操作成功的事件
|
|
||||||
emit('success')
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
id: undefined,
|
|
||||||
name: '',
|
|
||||||
nickname: '',
|
|
||||||
code: '',
|
|
||||||
content: '',
|
|
||||||
type: undefined,
|
|
||||||
params: '',
|
|
||||||
status: CommonStatusEnum.ENABLE,
|
|
||||||
remark: ''
|
|
||||||
}
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,146 +0,0 @@
|
||||||
<template>
|
|
||||||
<Dialog v-model="dialogVisible" title="测试发送" :max-height="500">
|
|
||||||
<el-form
|
|
||||||
ref="formRef"
|
|
||||||
v-loading="formLoading"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="140px"
|
|
||||||
>
|
|
||||||
<el-form-item label="模板内容" prop="content">
|
|
||||||
<el-input
|
|
||||||
v-model="formData.content"
|
|
||||||
placeholder="请输入模板内容"
|
|
||||||
readonly
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户类型" prop="userType">
|
|
||||||
<el-radio-group v-model="formData.userType">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.value"
|
|
||||||
>
|
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-show="formData.userType === 1" label="接收人ID" prop="userId">
|
|
||||||
<el-input v-model="formData.userId" style="width: 160px" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-show="formData.userType === 2" label="接收人" prop="userId">
|
|
||||||
<el-select v-model="formData.userId" placeholder="请选择接收人">
|
|
||||||
<el-option
|
|
||||||
v-for="item in userOption"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.nickname"
|
|
||||||
:value="item.id"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
v-for="param in formData.params"
|
|
||||||
:key="param"
|
|
||||||
:label="'参数 {' + param + '}'"
|
|
||||||
:prop="'templateParams.' + param"
|
|
||||||
>
|
|
||||||
<el-input
|
|
||||||
v-model="formData.templateParams[param]"
|
|
||||||
:placeholder="'请输入 ' + param + ' 参数'"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import * as UserApi from '@/api/system/user'
|
|
||||||
import * as NotifyTemplateApi from '@/api/system/notify/template'
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
|
|
||||||
defineOptions({ name: 'SystemNotifyTemplateSendForm' })
|
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
||||||
const formData = ref({
|
|
||||||
content: '',
|
|
||||||
params: {},
|
|
||||||
userId: undefined,
|
|
||||||
userType: 1,
|
|
||||||
templateCode: '',
|
|
||||||
templateParams: new Map()
|
|
||||||
})
|
|
||||||
const formRules = reactive({
|
|
||||||
userId: [{ required: true, message: '用户编号不能为空', trigger: 'change' }],
|
|
||||||
templateCode: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
|
|
||||||
templateParams: {}
|
|
||||||
})
|
|
||||||
const formRef = ref() // 表单 Ref
|
|
||||||
const userOption = ref<UserApi.UserVO[]>([])
|
|
||||||
|
|
||||||
const open = async (id: number) => {
|
|
||||||
dialogVisible.value = true
|
|
||||||
resetForm()
|
|
||||||
// 设置数据
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = await NotifyTemplateApi.getNotifyTemplate(id)
|
|
||||||
// 设置动态表单
|
|
||||||
formData.value.content = data.content
|
|
||||||
formData.value.params = data.params
|
|
||||||
formData.value.templateCode = data.code
|
|
||||||
formData.value.templateParams = data.params.reduce((obj, item) => {
|
|
||||||
obj[item] = '' // 给每个动态属性赋值，避免无法读取
|
|
||||||
return obj
|
|
||||||
}, {})
|
|
||||||
formRules.templateParams = data.params.reduce((obj, item) => {
|
|
||||||
obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
|
|
||||||
return obj
|
|
||||||
}, {})
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
// 加载用户列表
|
|
||||||
userOption.value = await UserApi.getSimpleUserList()
|
|
||||||
}
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
||||||
|
|
||||||
/** 提交表单 */
|
|
||||||
const submitForm = async () => {
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
|
||||||
const valid = await formRef.value.validate()
|
|
||||||
if (!valid) return
|
|
||||||
// 提交请求
|
|
||||||
formLoading.value = true
|
|
||||||
try {
|
|
||||||
const data = formData.value as unknown as NotifyTemplateApi.NotifySendReqVO
|
|
||||||
const logId = await NotifyTemplateApi.sendNotify(data)
|
|
||||||
if (logId) {
|
|
||||||
message.success('提交发送成功！发送结果，见发送日志编号：' + logId)
|
|
||||||
}
|
|
||||||
dialogVisible.value = false
|
|
||||||
} finally {
|
|
||||||
formLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置表单 */
|
|
||||||
const resetForm = () => {
|
|
||||||
formData.value = {
|
|
||||||
content: '',
|
|
||||||
params: {},
|
|
||||||
mobile: '',
|
|
||||||
templateCode: '',
|
|
||||||
templateParams: new Map(),
|
|
||||||
userType: 1
|
|
||||||
} as any
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,235 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" /> -->
|
|
||||||
|
|
||||||
<!-- 搜索工作栏 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-form
|
|
||||||
class="-mb-15px"
|
|
||||||
:model="queryParams"
|
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="68px"
|
|
||||||
>
|
|
||||||
<el-form-item label="模板名称" prop="name">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.name"
|
|
||||||
placeholder="请输入模板名称"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="模板编号" prop="code">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.code"
|
|
||||||
placeholder="请输入模版编码"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="status">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.status"
|
|
||||||
placeholder="请选择开启状态"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="创建时间" prop="createTime">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="queryParams.createTime"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
type="daterange"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
||||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
@click="openForm('create')"
|
|
||||||
v-hasPermi="['system:notify-template:create']"
|
|
||||||
>
|
|
||||||
<Icon icon="ep:plus" class="mr-5px" />新增
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<ContentWrap>
|
|
||||||
<el-table v-loading="loading" :data="list">
|
|
||||||
<el-table-column
|
|
||||||
label="模板编码"
|
|
||||||
align="center"
|
|
||||||
prop="code"
|
|
||||||
width="120"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="模板名称"
|
|
||||||
align="center"
|
|
||||||
prop="name"
|
|
||||||
width="120"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
/>
|
|
||||||
<el-table-column label="类型" align="center" prop="type">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.type" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="发送人名称" align="center" prop="nickname" />
|
|
||||||
<el-table-column
|
|
||||||
label="模板内容"
|
|
||||||
align="center"
|
|
||||||
prop="content"
|
|
||||||
width="200"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
/>
|
|
||||||
<el-table-column label="开启状态" align="center" prop="status" width="80">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="备注" align="center" prop="remark" />
|
|
||||||
<el-table-column
|
|
||||||
label="创建时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
width="180"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" align="center" width="210" fixed="right">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="openForm('update', scope.row.id)"
|
|
||||||
v-hasPermi="['system:notify-template:update']"
|
|
||||||
>
|
|
||||||
修改
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
@click="openSendForm(scope.row)"
|
|
||||||
v-hasPermi="['system:notify-template:send-notify']"
|
|
||||||
>
|
|
||||||
测试
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
link
|
|
||||||
type="danger"
|
|
||||||
@click="handleDelete(scope.row.id)"
|
|
||||||
v-hasPermi="['system:notify-template:delete']"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
<!-- 表单弹窗：添加/修改 -->
|
|
||||||
<NotifyTemplateForm ref="formRef" @success="getList" />
|
|
||||||
<!-- 表单弹窗：测试发送 -->
|
|
||||||
<NotifyTemplateSendForm ref="sendFormRef" />
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
|
||||||
import * as NotifyTemplateApi from '@/api/system/notify/template'
|
|
||||||
import NotifyTemplateForm from './NotifyTemplateForm.vue'
|
|
||||||
import NotifyTemplateSendForm from './NotifyTemplateSendForm.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'NotifySmsTemplate' })
|
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
const loading = ref(false) // 列表的加载中
|
|
||||||
const total = ref(0) // 列表的总页数
|
|
||||||
const list = ref([]) // 列表的数据
|
|
||||||
const queryParams = reactive({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
name: undefined,
|
|
||||||
status: undefined,
|
|
||||||
code: undefined,
|
|
||||||
createTime: []
|
|
||||||
})
|
|
||||||
const queryFormRef = ref() // 搜索的表单
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const data = await NotifyTemplateApi.getNotifyTemplatePage(queryParams)
|
|
||||||
list.value = data.list
|
|
||||||
total.value = data.total
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.pageNo = 1
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields()
|
|
||||||
handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 添加/修改操作 */
|
|
||||||
const formRef = ref()
|
|
||||||
const openForm = (type: string, id?: number) => {
|
|
||||||
formRef.value.open(type, id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
const handleDelete = async (id: number) => {
|
|
||||||
try {
|
|
||||||
// 删除的二次确认
|
|
||||||
await message.delConfirm()
|
|
||||||
// 发起删除
|
|
||||||
await NotifyTemplateApi.deleteNotifyTemplate(id)
|
|
||||||
message.success('删除成功')
|
|
||||||
// 刷新列表
|
|
||||||
await getList()
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 发送站内信按钮 */
|
|
||||||
const sendFormRef = ref() // 表单 Ref
|
|
||||||
const openSendForm = (row: NotifyTemplateApi.NotifyTemplateVO) => {
|
|
||||||
sendFormRef.value.open(row.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(() => {
|
|
||||||
getList()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -7,19 +7,19 @@
|
||||||
:rules="formRules"
|
:rules="formRules"
|
||||||
label-width="80px"
|
label-width="80px"
|
||||||
>
|
>
|
||||||
<el-form-item label="上级部门" prop="parentId">
|
<el-form-item label="上级职位" prop="parentId">
|
||||||
<el-tree-select
|
<el-tree-select
|
||||||
v-model="formData.parentId"
|
v-model="formData.parentId"
|
||||||
:data="deptTree"
|
:data="deptTree"
|
||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
check-strictly
|
check-strictly
|
||||||
default-expand-all
|
default-expand-all
|
||||||
placeholder="请选择上级部门"
|
placeholder="请选择上级职位"
|
||||||
value-key="deptId"
|
value-key="deptId"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="部门名称" prop="name">
|
<el-form-item label="职位名称" prop="name">
|
||||||
<el-input v-model="formData.name" placeholder="请输入部门名称" />
|
<el-input v-model="formData.name" placeholder="请输入职位名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="显示排序" prop="sort">
|
<el-form-item label="显示排序" prop="sort">
|
||||||
<el-input-number v-model="formData.sort" :min="0" controls-position="right" />
|
<el-input-number v-model="formData.sort" :min="0" controls-position="right" />
|
||||||
|
|
@ -86,8 +86,8 @@ const formData = ref({
|
||||||
status: CommonStatusEnum.ENABLE
|
status: CommonStatusEnum.ENABLE
|
||||||
})
|
})
|
||||||
const formRules = reactive<FormRules>({
|
const formRules = reactive<FormRules>({
|
||||||
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
|
parentId: [{ required: true, message: '上级职位不能为空', trigger: 'blur' }],
|
||||||
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
|
name: [{ required: true, message: '职位名称不能为空', trigger: 'blur' }],
|
||||||
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
|
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
|
||||||
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
|
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
|
||||||
phone: [
|
phone: [
|
||||||
|
|
@ -116,7 +116,7 @@ const open = async (type: string, id?: number) => {
|
||||||
}
|
}
|
||||||
// 获得用户列表
|
// 获得用户列表
|
||||||
userList.value = await UserApi.getSimpleUserList()
|
userList.value = await UserApi.getSimpleUserList()
|
||||||
// 获得部门树
|
// 获得职位树
|
||||||
await getTree()
|
await getTree()
|
||||||
}
|
}
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||||
|
|
@ -163,11 +163,11 @@ const resetForm = () => {
|
||||||
formRef.value?.resetFields()
|
formRef.value?.resetFields()
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 获得部门树 */
|
/** 获得职位树 */
|
||||||
const getTree = async () => {
|
const getTree = async () => {
|
||||||
deptTree.value = []
|
deptTree.value = []
|
||||||
const data = await DeptApi.getSimpleDeptList()
|
const data = await DeptApi.getSimpleDeptList()
|
||||||
let dept: Tree = { id: 0, name: '顶级部门', children: [] }
|
let dept: Tree = { id: 0, name: '顶级职位', children: [] }
|
||||||
dept.children = handleTree(data)
|
dept.children = handleTree(data)
|
||||||
deptTree.value.push(dept)
|
deptTree.value.push(dept)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,18 +8,18 @@
|
||||||
:inline="true"
|
:inline="true"
|
||||||
label-width="68px"
|
label-width="68px"
|
||||||
>
|
>
|
||||||
<el-form-item label="部门名称" prop="name">
|
<el-form-item label="职位名称" prop="name">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.name"
|
v-model="queryParams.name"
|
||||||
placeholder="请输入部门名称"
|
placeholder="请输入职位名称"
|
||||||
clearable
|
clearable
|
||||||
class="!w-240px"
|
class="!w-240px"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="部门状态" prop="status">
|
<el-form-item label="职位状态" prop="status">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="queryParams.status"
|
v-model="queryParams.status"
|
||||||
placeholder="请选择部门状态"
|
placeholder="请选择职位状态"
|
||||||
clearable
|
clearable
|
||||||
class="!w-240px"
|
class="!w-240px"
|
||||||
>
|
>
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
:default-expand-all="isExpandAll"
|
:default-expand-all="isExpandAll"
|
||||||
v-if="refreshTable"
|
v-if="refreshTable"
|
||||||
>
|
>
|
||||||
<el-table-column prop="name" label="部门名称" />
|
<el-table-column prop="name" label="职位名称" />
|
||||||
<el-table-column prop="leader" label="负责人">
|
<el-table-column prop="leader" label="负责人">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ userList.find((user) => user.id === scope.row.leaderUserId)?.nickname }}
|
{{ userList.find((user) => user.id === scope.row.leaderUserId)?.nickname }}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user