jiangyq
/
YZProjectCloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改flowable

dev_xd
haha 2024-08-21 23:41:28 +08:00
parent 73f42a722d
commit 72cf76c249
11 changed files with 527 additions and 1352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
yanzhu-ui-vue3/src/components/ProcessDesigner/index.vue
View File

@ -19,43 +19,43 @@
<my-process-penal :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" /> <my-process-penal :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" />
<!-- demo config --> <!-- demo config -->
<!-- <div class="demo-control-bar">--> <div class="demo-control-bar">
<!-- <div class="open-model-button" @click="controlDrawerVisible = true"><el-icon><setting /></el-icon></div>--> <div class="open-model-button" @click="controlDrawerVisible = true"><el-icon><setting /></el-icon></div>
<!-- </div>--> </div>
<!-- <el-drawer v-model="controlDrawerVisible" size="400px" title="偏好设置" append-to-body destroy-on-close>--> <el-drawer v-model="controlDrawerVisible" size="400px" title="偏好设置" append-to-body destroy-on-close>
<!-- <el-form :model="controlForm" size="small" label-width="100px" class="control-form" @submit.prevent>--> <el-form :model="controlForm" size="small" label-width="100px" class="control-form" @submit.prevent>
<!-- <el-form-item label="流程ID">--> <el-form-item label="流程ID">
<!-- <el-input v-model="controlForm.processId" @change="reloadProcessDesigner(true)" />--> <el-input v-model="controlForm.processId" @change="reloadProcessDesigner(true)" />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="流程名称">--> <el-form-item label="流程名称">
<!-- <el-input v-model="controlForm.processName" @change="reloadProcessDesigner(true)" />--> <el-input v-model="controlForm.processName" @change="reloadProcessDesigner(true)" />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="流转模拟">--> <el-form-item label="流转模拟">
<!-- <el-switch v-model="controlForm.simulation" inactive-text="停用" active-text="启用" @change="reloadProcessDesigner()" />--> <el-switch v-model="controlForm.simulation" inactive-text="停用" active-text="启用" @change="reloadProcessDesigner()" />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="禁用双击">--> <el-form-item label="禁用双击">
<!-- <el-switch v-model="controlForm.labelEditing" inactive-text="停用" active-text="启用" @change="changeLabelEditingStatus" />--> <el-switch v-model="controlForm.labelEditing" inactive-text="停用" active-text="启用" @change="changeLabelEditingStatus" />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="自定义渲染">--> <el-form-item label="自定义渲染">
<!-- <el-switch v-model="controlForm.labelVisible" inactive-text="停用" active-text="启用" @change="changeLabelVisibleStatus" />--> <el-switch v-model="controlForm.labelVisible" inactive-text="停用" active-text="启用" @change="changeLabelVisibleStatus" />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="流程引擎">--> <el-form-item label="流程引擎">
<!-- <el-radio-group v-model="controlForm.prefix" @change="reloadProcessDesigner()">--> <el-radio-group v-model="controlForm.prefix" @change="reloadProcessDesigner()">
<!-- <el-radio label="camunda">camunda</el-radio>--> <el-radio label="camunda">camunda</el-radio>
<!-- <el-radio label="flowable">flowable</el-radio>--> <el-radio label="flowable">flowable</el-radio>
<!-- <el-radio label="activiti">activiti</el-radio>--> <el-radio label="activiti">activiti</el-radio>
<!-- </el-radio-group>--> </el-radio-group>
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="工具栏">--> <el-form-item label="工具栏">
<!-- <el-radio-group v-model="controlForm.headerButtonSize">--> <el-radio-group v-model="controlForm.headerButtonSize">
<!-- <el-radio label="small">small</el-radio>--> <el-radio label="small">small</el-radio>
<!-- <el-radio label="default">default</el-radio>--> <el-radio label="default">default</el-radio>
<!-- <el-radio label="large">large</el-radio>--> <el-radio label="large">large</el-radio>
<!-- </el-radio-group>--> </el-radio-group>
<!-- </el-form-item>--> </el-form-item>
<!-- <el-switch v-model="pageMode" active-text="dark" inactive-text="light" @change="changePageMode"></el-switch>--> <el-switch v-model="pageMode" active-text="dark" inactive-text="light" @change="changePageMode"></el-switch>
<!-- </el-form>--> </el-form>
<!-- </el-drawer>--> </el-drawer>
</div> </div>
</template> </template>

26
yanzhu-ui-vue3/src/package/designer/ProcessDesigner.vue
View File

@ -20,7 +20,7 @@
<template #content> <template #content>
<el-button :size="headerButtonSize" type="text" @click="previewProcessXML">预览XML</el-button> <el-button :size="headerButtonSize" type="text" @click="previewProcessXML">预览XML</el-button>
<br /> <br />
<el-button :size="headerButtonSize" type="text" @click="previewProcessJson">预览JSON</el-button> <!-- <el-button :size="headerButtonSize" type="text" @click="previewProcessJson">预览JSON</el-button> -->
</template> </template>
<el-button :size="headerButtonSize" :type="headerButtonType" :icon="View">预览</el-button> <el-button :size="headerButtonSize" :type="headerButtonType" :icon="View">预览</el-button>
</el-tooltip> </el-tooltip>
@ -111,8 +111,7 @@ import camundaModdleExtension from './plugins/extension-moddle/camunda';
import activitiModdleExtension from './plugins/extension-moddle/activiti'; import activitiModdleExtension from './plugins/extension-moddle/activiti';
import flowableModdleExtension from './plugins/extension-moddle/flowable'; import flowableModdleExtension from './plugins/extension-moddle/flowable';
// 引入json转换与高亮 // 引入json转换与高亮
// import convert from "xml-js"; // import X2JS from "x2js";
import X2JS from "x2js";
import Codemirror from 'codemirror-editor-vue3'; import Codemirror from 'codemirror-editor-vue3';
import 'codemirror/theme/monokai.css' import 'codemirror/theme/monokai.css'
@ -497,23 +496,18 @@ export default {
}); });
}, },
previewProcessJson() { previewProcessJson() {
// const newConvert = new X2JS();
// this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => { // this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
// this.previewResult = convert.xml2json(xml, { spaces: 2 }); // const { definitions } = newConvert.xml2js(xml);
// if (definitions) {
// this.previewResult = JSON.stringify(definitions, null, 4);
// } else {
// this.previewResult = "";
// }
// this.previewType = "json"; // this.previewType = "json";
// this.previewModelVisible = true; // this.previewModelVisible = true;
// }); // });
const newConvert = new X2JS();
this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
const { definitions } = newConvert.xml2js(xml);
if (definitions) {
this.previewResult = JSON.stringify(definitions, null, 4);
} else {
this.previewResult = "";
}
this.previewType = "json";
this.previewModelVisible = true;
});
} }
} }
}; };

15
yanzhu-ui-vue3/src/package/designer/plugins/descriptor/flowableDescriptor.json
View File

@ -319,21 +319,6 @@
"name": "priority", "name": "priority",
"isAttr": true, "isAttr": true,
"type": "String" "type": "String"
},
{
"name": "dataType",
"isAttr": true,
"type": "String"
},
{
"name": "text",
"isAttr": true,
"type": "String"
},
{
"name": "deptId",
"isAttr": true,
"type": "String"
} }
] ]
}, },

16
yanzhu-ui-vue3/src/package/penal/PropertiesPanel.vue
View File

@ -21,6 +21,7 @@
</el-collapse-item> </el-collapse-item>
<el-collapse-item name="condition" v-if="formVisible" key="form"> <el-collapse-item name="condition" v-if="formVisible" key="form">
<template #title> <template #title>
<div class="panel-tab__title"><el-icon><list /></el-icon>表单</div> <div class="panel-tab__title"><el-icon><list /></el-icon>表单</div>
</template> </template>
<element-form :id="elementId" :type="elementType" /> <element-form :id="elementId" :type="elementType" />
@ -37,20 +38,23 @@
</template> </template>
<element-multi-instance :business-object="elementBusinessObject" :type="elementType" /> <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
</el-collapse-item> </el-collapse-item>
<el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
<template #title>
<div class="panel-tab__title"><el-icon><bell-filled /></el-icon>任务监听器</div>
</template>
<user-task-listeners :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="listeners" key="listeners"> <el-collapse-item name="listeners" key="listeners">
<template #title> <template #title>
<div class="panel-tab__title"><el-icon><bell-filled /></el-icon>执行监听器</div> <div class="panel-tab__title"><el-icon><bell-filled /></el-icon>执行监听器</div>
</template> </template>
<element-listeners :id="elementId" :type="elementType" /> <element-listeners :id="elementId" :type="elementType" />
</el-collapse-item> </el-collapse-item>
<el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
<template #title>
<div class="panel-tab__title"><el-icon><bell-filled /></el-icon>任务监听器</div>
</template>
<user-task-listeners :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="extensions" key="extensions"> <el-collapse-item name="extensions" key="extensions">
<template #title> <template #title>
<div class="panel-tab__title"><el-icon><circle-plus /></el-icon>扩展属性</div> <div class="panel-tab__title"><el-icon><circle-plus /></el-icon>扩展属性</div>
</template> </template>
<element-properties :id="elementId" :type="elementType" /> <element-properties :id="elementId" :type="elementType" />

289
yanzhu-ui-vue3/src/package/penal/form/ElementForm.vue
View File

@ -1,155 +1,128 @@
<template> <template>
<div class="panel-tab__content"> <div class="panel-tab__content">
<el-form size="small" label-width="80px" @submit.prevent> <el-form size="small" label-width="80px" @submit.prevent>
<el-form-item label="表单" prop="formKey"> <el-form-item label="表单标识">
<el-select v-model="formKey" placeholder="请选择表单" @change="updateElementFormKey" clearable> <el-input v-model="formKey" clearable @change="updateElementFormKey" />
<el-option v-for="item in formOptions" :key="item.formId" :label="item.formName" :value="`key_${item.formId}`" /> </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-select>
</el-form-item> </el-form-item>
<el-form-item prop="localScope">
<template #label>
<div class="flex align-center">
<el-tooltip content="若为节点表单，则表单信息仅在此节点可用，默认为全局表单，表单信息在整个流程实例中可用" placement="top-start">
<el-icon><InfoFilled /></el-icon>
</el-tooltip>
<span>节点表单</span>
</div>
</template>
<el-switch
:disabled="type === 'StartEvent'"
v-model="localScope"
active-text="是"
inactive-text="否"
@change="updateElementFormScope()"
></el-switch>
</el-form-item>
<!-- <el-form-item label="表单标识">-->
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
<!-- </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> </el-form>
<!--字段列表--> <!--字段列表-->
<!-- <div class="element-property list-property">--> <div class="element-property list-property">
<!-- <el-divider><el-icon><coin /></el-icon> 表单字段</el-divider>--> <el-divider><el-icon><coin /></el-icon> 表单字段</el-divider>
<!-- <el-table :data="fieldList" size="small" max-height="240" border fit>--> <el-table :data="fieldList" size="small" max-height="240" border fit>
<!-- <el-table-column label="序号" type="index" width="50px" />--> <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="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="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="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />
<!-- <el-table-column label="操作" width="90px">--> <el-table-column label="操作" width="90px">
<!-- <template v-slot="{ row, $index }">--> <template v-slot="{ row, $index }">
<!-- <el-button link type="" @click="openFieldForm(row, $index)">编辑</el-button>--> <el-button link type="" @click="openFieldForm(row, $index)">编辑</el-button>
<!-- <el-divider direction="vertical" />--> <el-divider direction="vertical" />
<!-- <el-button link type="" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>--> <el-button link type="" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>
<!-- </template>--> </template>
<!-- </el-table-column>--> </el-table-column>
<!-- </el-table>--> </el-table>
<!-- </div>--> </div>
<!-- <div class="element-drawer__button">--> <div class="element-drawer__button">
<!-- <el-button size="small" type="primary" :icon="Plus" @click="openFieldForm(null, -1)">添加字段</el-button>--> <el-button size="small" type="primary" :icon="Plus" @click="openFieldForm(null, -1)">添加字段</el-button>
<!-- </div>--> </div>
<!--字段配置侧边栏--> <!--字段配置侧边栏-->
<!-- <el-drawer v-model="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>--> <el-drawer v-model="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>
<!-- <el-form :model="formFieldForm" label-width="90px" size="small" @submit.prevent>--> <el-form :model="formFieldForm" label-width="90px" size="small" @submit.prevent>
<!-- <el-form-item label="字段ID">--> <el-form-item label="字段ID">
<!-- <el-input v-model="formFieldForm.id" clearable />--> <el-input v-model="formFieldForm.id" clearable />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="类型">--> <el-form-item label="类型">
<!-- <el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">--> <el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">
<!-- <el-option v-for="(value, key) of fieldType" :key="key" :label="value" :value="key" />--> <el-option v-for="(value, key) of fieldType" :key="key" :label="value" :value="key" />
<!-- </el-select>--> </el-select>
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item v-if="formFieldForm.typeType === 'custom'" label="类型名称">--> <el-form-item v-if="formFieldForm.typeType === 'custom'" label="类型名称">
<!-- <el-input v-model="formFieldForm.type" clearable />--> <el-input v-model="formFieldForm.type" clearable />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="名称">--> <el-form-item label="名称">
<!-- <el-input v-model="formFieldForm.label" clearable />--> <el-input v-model="formFieldForm.label" clearable />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item v-if="formFieldForm.typeType === 'date'" label="时间格式">--> <el-form-item v-if="formFieldForm.typeType === 'date'" label="时间格式">
<!-- <el-input v-model="formFieldForm.datePattern" clearable />--> <el-input v-model="formFieldForm.datePattern" clearable />
<!-- </el-form-item>--> </el-form-item>
<!-- <el-form-item label="默认值">--> <el-form-item label="默认值">
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />--> <el-input v-model="formFieldForm.defaultValue" clearable />
<!-- </el-form-item>--> </el-form-item>
<!-- </el-form>--> </el-form>
<!-- 枚举值设置 --> <!-- 枚举值设置 -->
<!-- <template v-if="formFieldForm.type === 'enum'">--> <template v-if="formFieldForm.type === 'enum'">
<!-- <el-divider key="enum-divider" />--> <el-divider key="enum-divider" />
<!-- <p key="enum-title" class="listener-filed__title">--> <p key="enum-title" class="listener-filed__title">
<!-- <span>--> <span><el-icon><menu /></el-icon>枚举值列表：</span>
<!-- <el-icon>--> <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>
<!-- <menu />--> </p>
<!-- </el-icon>--> <el-table key="enum-table" :data="fieldEnumList" size="small" max-height="240" border fit>
<!-- 枚举值列表：--> <el-table-column label="序号" width="50px" type="index" />
<!-- </span>--> <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>--> <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />
<!-- </p>--> <el-table-column label="操作" width="90px">
<!-- <el-table key="enum-table" :data="fieldEnumList" size="small" max-height="240" border fit>--> <template v-slot="{ row, $index }">
<!-- <el-table-column label="序号" width="50px" type="index" />--> <el-button link type="" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />--> <el-divider direction="vertical" />
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />--> <el-button link type="" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>
<!-- <el-table-column label="操作" width="90px">--> </template>
<!-- <template v-slot="{ row, $index }">--> </el-table-column>
<!-- <el-button link type="" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>--> </el-table>
<!-- <el-divider direction="vertical" />--> </template>
<!-- <el-button link type="" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </template>-->
<!-- 校验规则 --> <!-- 校验规则 -->
<!-- <el-divider key="validation-divider" />--> <el-divider key="validation-divider" />
<!-- <p key="validation-title" class="listener-filed__title">--> <p key="validation-title" class="listener-filed__title">
<!-- <span><el-icon><menu /></el-icon>约束条件列表：</span>--> <span><el-icon><menu /></el-icon>约束条件列表：</span>
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>--> <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>
<!-- </p>--> </p>
<!-- <el-table key="validation-table" :data="fieldConstraintsList" size="small" max-height="240" border fit>--> <el-table key="validation-table" :data="fieldConstraintsList" size="small" max-height="240" border fit>
<!-- <el-table-column label="序号" width="50px" type="index" />--> <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="name" min-width="100px" show-overflow-tooltip />
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />--> <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />
<!-- <el-table-column label="操作" width="90px">--> <el-table-column label="操作" width="90px">
<!-- <template v-slot="{ row, $index }">--> <template v-slot="{ row, $index }">
<!-- <el-button link type="" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>--> <el-button link type="" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>
<!-- <el-divider direction="vertical" />--> <el-divider direction="vertical" />
<!-- <el-button link type="" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>--> <el-button link type="" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>
<!-- </template>--> </template>
<!-- </el-table-column>--> </el-table-column>
<!-- </el-table>--> </el-table>
<!-- 表单属性 --> <!-- 表单属性 -->
<!-- <el-divider key="property-divider" />--> <el-divider key="property-divider" />
<!-- <p key="property-title" class="listener-filed__title">--> <p key="property-title" class="listener-filed__title">
<!-- <span><el-icon><menu /></el-icon>字段属性列表：</span>--> <span><el-icon><menu /></el-icon>字段属性列表：</span>
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>--> <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>
<!-- </p>--> </p>
<!-- <el-table key="property-table" :data="fieldPropertiesList" size="small" max-height="240" border fit>--> <el-table key="property-table" :data="fieldPropertiesList" size="small" max-height="240" border fit>
<!-- <el-table-column label="序号" width="50px" type="index" />--> <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="id" min-width="100px" show-overflow-tooltip />
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />--> <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<!-- <el-table-column label="操作" width="90px">--> <el-table-column label="操作" width="90px">
<!-- <template v-slot="{ row, $index }">--> <template v-slot="{ row, $index }">
<!-- <el-button link type="" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>--> <el-button link type="" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>
<!-- <el-divider direction="vertical" />--> <el-divider direction="vertical" />
<!-- <el-button link type="" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>--> <el-button link type="" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>
<!-- </template>--> </template>
<!-- </el-table-column>--> </el-table-column>
<!-- </el-table>--> </el-table>
<!-- 底部按钮 --> <!-- 底部按钮 -->
<!-- <div class="element-drawer__button">--> <div class="element-drawer__button">
<!-- <el-button size="small">取 消</el-button>--> <el-button size="small">取 消</el-button>
<!-- <el-button size="small" type="primary" @click="saveField">保 存</el-button>--> <el-button size="small" type="primary" @click="saveField">保 存</el-button>
<!-- </div>--> </div>
<!-- </el-drawer>--> </el-drawer>
<el-dialog v-model="fieldOptionModelVisible" :title="optionModelTitle" width="600px" append-to-body destroy-on-close> <el-dialog v-model="fieldOptionModelVisible" :title="optionModelTitle" width="600px" append-to-body destroy-on-close>
<el-form :model="fieldOptionForm" size="small" label-width="96px" @submit.prevent> <el-form :model="fieldOptionForm" size="small" label-width="96px" @submit.prevent>
@ -176,8 +149,6 @@
<script> <script>
import { Plus } from '@element-plus/icons-vue'; import { Plus } from '@element-plus/icons-vue';
import { listAllForm } from "@/api/workflow/form";
export default { export default {
name: 'ElementForm', name: 'ElementForm',
setup() { setup() {
@ -196,8 +167,6 @@ export default {
data() { data() {
return { return {
formKey: '', formKey: '',
formOptions: [],
localScope: false,
businessKey: '', businessKey: '',
optionModelTitle: '', optionModelTitle: '',
fieldList: [], fieldList: [],
@ -229,50 +198,38 @@ export default {
} }
} }
}, },
created() {
/** 查询流程分类列表 */
this.getFormList();
},
methods: { methods: {
/** 查询表单列表 */
getFormList() {
listAllForm().then(response => this.formOptions = response.data)
},
resetFormList() { resetFormList() {
this.bpmnELement = window.bpmnInstances.bpmnElement; this.bpmnELement = window.bpmnInstances.bpmnElement;
this.formKey = this.bpmnELement.businessObject.formKey; this.formKey = this.bpmnELement.businessObject.formKey;
this.localScope = this.bpmnELement.businessObject.localScope;
// 获取元素扩展属性 或者 创建扩展属性 // 获取元素扩展属性 或者 创建扩展属性
this.elExtensionElements = this.elExtensionElements =
this.bpmnELement.businessObject.get('extensionElements') || window.bpmnInstances.moddle.create('bpmn:ExtensionElements', { values: [] }); this.bpmnELement.businessObject.get('extensionElements') || window.bpmnInstances.moddle.create('bpmn:ExtensionElements', { values: [] });
// 获取元素表单配置 或者 创建新的表单配置 // 获取元素表单配置 或者 创建新的表单配置
// try { try {
// this.formData = this.formData =
// this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)[0] || this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)[0] ||
// window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] }); window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
// } catch (error) { } catch (error) {
// this.formData = {} this.formData = {}
// console.log(error) console.log(error)
// } }
// 业务标识 businessKey， 绑定在 formData 中 // 业务标识 businessKey， 绑定在 formData 中
// this.businessKey = this.formData.businessKey; this.businessKey = this.formData.businessKey;
// 保留剩余扩展元素，便于后面更新该元素对应属性 // 保留剩余扩展元素，便于后面更新该元素对应属性
this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`); this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`);
// 复制原始值，填充表格 // 复制原始值，填充表格
// this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || [])); this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
// 更新元素扩展属性，避免后续报错 // 更新元素扩展属性，避免后续报错
// this.updateElementExtensions(); this.updateElementExtensions();
}, },
updateElementFormKey() { updateElementFormKey() {
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey }); window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey });
}, },
updateElementFormScope() {
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { localScope: this.localScope });
},
updateElementBusinessKey() { updateElementBusinessKey() {
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey }); window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey });
}, },

240
yanzhu-ui-vue3/src/package/penal/listeners/UserTaskListeners.vue
View File

@ -2,13 +2,14 @@
<div class="panel-tab__content"> <div class="panel-tab__content">
<el-table :data="elementListenersList" size="small" border> <el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="50px" type="index" /> <el-table-column label="序号" width="50px" type="index" />
<el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="formatterEvent" /> <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="事件id" min-width="80px" prop="id" show-overflow-tooltip />
<el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="formatterListener" /> <el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template v-slot="{ row, $index }"> <template v-slot="{ row, $index }">
<el-button link type="primary" @click="openListenerForm(row, $index)">编辑</el-button> <el-button link type="" @click="openListenerForm(row, $index)">编辑</el-button>
<el-button link type="danger" @click="removeListener(row, $index)">移除</el-button> <el-divider direction="vertical" />
<el-button link type="" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -17,79 +18,95 @@
</div> </div>
<!-- 监听器 编辑/创建 部分 --> <!-- 监听器 编辑/创建 部分 -->
<el-drawer <el-drawer v-model="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
v-model="listenerFormModelVisible" <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.prevent>
title="任务监听器" <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
:size="`${width}px`" <el-select v-model="listenerForm.event">
class="listener-drawer" <el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
append-to-body
destroy-on-close>
<el-form :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.prevent>
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择事件类型' }">
<el-select v-model="listenerForm.event" style="width: 100%">
<el-option v-for="item in TASK_EVENT_TYPE" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择监听器类型' }"> <el-form-item label="监听器ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input <el-input v-model="listenerForm.id" clearable />
v-model="listenerForm[selectedProp]"
clearable
class="input-with-select">
<template #prepend>
<el-select v-model="listenerForm.listenerType" style="width: 100%">
<el-option v-for="item in LISTENER_TYPE" :key="item.key" :label="item.label" :value="item.value" />
</el-select>
</template>
<template #append>
<el-button :icon="Search" />
</template>
</el-input>
</el-form-item> </el-form-item>
<!-- 脚本类型 --> <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<!-- <template v-if="listenerForm.listenerType === LISTENER_TYPE[LISTENER_TYPE.length - 1].value">--> <el-select v-model="listenerForm.listenerType">
<!-- <el-form-item--> <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
<!-- label="脚本格式"--> </el-select>
<!-- prop="scriptFormat"--> </el-form-item>
<!-- key="listener-script-format"--> <el-form-item
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"--> v-if="listenerForm.listenerType === 'classListener'"
<!-- >--> label="Java类"
<!-- <el-input v-model="listenerForm.scriptFormat" clearable />--> prop="class"
<!-- </el-form-item>--> key="listener-class"
<!-- <el-form-item--> :rules="{ required: true, trigger: ['blur', 'change'] }"
<!-- label="脚本类型"--> >
<!-- prop="scriptType"--> <el-input v-model="listenerForm.class" clearable />
<!-- key="listener-script-type"--> </el-form-item>
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"--> <el-form-item
<!-- >--> v-if="listenerForm.listenerType === 'expressionListener'"
<!-- <el-select v-model="listenerForm.scriptType">--> label="表达式"
<!-- <el-option v-for="item in SCRIPT_TYPE" :key="item.value" :label="item.label" :value="item.value" />--> prop="expression"
<!-- </el-select>--> key="listener-expression"
<!-- </el-form-item>--> :rules="{ required: true, trigger: ['blur', 'change'] }"
<!-- <el-form-item--> >
<!-- v-if="listenerForm.scriptType === SCRIPT_TYPE[0].value"--> <el-input v-model="listenerForm.expression" clearable />
<!-- label="脚本内容"--> </el-form-item>
<!-- prop="value"--> <el-form-item
<!-- key="listener-script"--> v-if="listenerForm.listenerType === 'delegateExpressionListener'"
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"--> label="代理表达式"
<!-- >--> prop="delegateExpression"
<!-- <el-input v-model="listenerForm.value" clearable />--> key="listener-delegate"
<!-- </el-form-item>--> :rules="{ required: true, trigger: ['blur', 'change'] }"
<!-- <el-form-item--> >
<!-- v-if="listenerForm.scriptType === SCRIPT_TYPE[1].value"--> <el-input v-model="listenerForm.delegateExpression" clearable />
<!-- label="资源地址"--> </el-form-item>
<!-- prop="resource"--> <template v-if="listenerForm.listenerType === 'scriptListener'">
<!-- key="listener-resource"--> <el-form-item
<!-- :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"--> label="脚本格式"
<!-- >--> prop="scriptFormat"
<!-- <el-input v-model="listenerForm.resource" clearable />--> key="listener-script-format"
<!-- </el-form-item>--> :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
<!-- </template>--> >
<!-- 监听事件： 超时 --> <el-input v-model="listenerForm.scriptFormat" clearable />
<template v-if="listenerForm.event === TASK_EVENT_TYPE[TASK_EVENT_TYPE.length - 1].value"> </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-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
<el-select v-model="listenerForm.eventDefinitionType"> <el-select v-model="listenerForm.eventDefinitionType">
<el-option v-for="item in EVENT_DEFINITION_TYPE" :key="item.value" :value="item.value" :label="item.label" /> <el-option label="日期" value="date" />
<el-option label="持续时长" value="duration" />
<el-option label="循环" value="cycle" />
<el-option label="无" value="null" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@ -103,79 +120,73 @@
</el-form-item> </el-form-item>
</template> </template>
</el-form> </el-form>
<el-divider /> <el-divider />
<div class="listener-filed__title"> <p class="listener-filed__title">
<span><el-icon><Menu /></el-icon>注入字段：</span> <span><el-icon><Menu /></el-icon>注入字段：</span>
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button> <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</div> </p>
<el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none"> <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="序号" width="50px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" /> <el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="formatterField" /> <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="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
<el-table-column label="操作" width="100px"> <el-table-column label="操作" width="100px">
<template v-slot="{ row, $index }"> <template v-slot="{ row, $index }">
<el-button link type="primary" @click="openListenerFieldForm(row, $index)">编辑</el-button> <el-button link type="" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-button link type="danger" @click="removeListenerField(row, $index)">移除</el-button> <el-divider direction="vertical" />
<el-button link type="" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="element-drawer__button"> <div class="element-drawer__button">
<el-button @click="listenerFormModelVisible = false">取 消</el-button> <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button type="primary" @click="saveListenerConfig">保 存</el-button> <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
</div> </div>
</el-drawer> </el-drawer>
<!-- 注入西段 编辑/创建 部分 --> <!-- 注入西段 编辑/创建 部分 -->
<el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close> <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" @submit.prevent> <el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.prevent>
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段名称' }"> <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input v-model="listenerFieldForm.name" clearable /> <el-input v-model="listenerFieldForm.name" clearable />
</el-form-item> </el-form-item>
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择字段类型' }"> <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerFieldForm.fieldType"> <el-select v-model="listenerFieldForm.fieldType">
<el-option v-for="item in FIELD_TYPE" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="listenerFieldForm.fieldType === FIELD_TYPE[0].value" v-if="listenerFieldForm.fieldType === 'string'"
label="字段值：" label="字段值："
prop="string" prop="string"
key="field-string" key="field-string"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段值' }" :rules="{ required: true, trigger: ['blur', 'change'] }"
> >
<el-input v-model="listenerFieldForm.string" clearable /> <el-input v-model="listenerFieldForm.string" clearable />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="listenerFieldForm.fieldType === FIELD_TYPE[1].value" v-if="listenerFieldForm.fieldType === 'expression'"
label="表达式：" label="表达式："
prop="expression" prop="expression"
key="field-expression" key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写表达式' }" :rules="{ required: true, trigger: ['blur', 'change'] }"
> >
<el-input v-model="listenerFieldForm.expression" clearable /> <el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template v-slot:footer> <template v-slot:footer>
<el-button @click="listenerFieldFormModelVisible = false">取 消</el-button> <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button type="primary" @click="saveListenerFiled">确 定</el-button> <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { createListenerObject, updateElementExtensions } from "../../utils"; import { createListenerObject, updateElementExtensions } from "../../utils";
import { import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from "./utilSelf";
initListenerForm,
initListenerType,
FIELD_TYPE,
LISTENER_TYPE,
TASK_EVENT_TYPE,
SCRIPT_TYPE,
EVENT_DEFINITION_TYPE
} from "./utilSelf";
import { Plus, Search } from '@element-plus/icons-vue'
export default { export default {
name: "UserTaskListeners", name: "UserTaskListeners",
props: { props: {
@ -186,14 +197,14 @@ export default {
prefix: "prefix", prefix: "prefix",
width: "width" width: "width"
}, },
setup() {
return { Plus, Search }
},
data() { data() {
return { return {
elementListenersList: [], elementListenersList: [],
listenerEventTypeObject: eventType,
listenerTypeObject: listenerType,
listenerFormModelVisible: false, listenerFormModelVisible: false,
listenerForm: {}, listenerForm: {},
fieldTypeObject: fieldType,
fieldsListOfListener: [], fieldsListOfListener: [],
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态 listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
editingListenerIndex: -1, // 监听器所在下标，-1 为新增 editingListenerIndex: -1, // 监听器所在下标，-1 为新增
@ -209,31 +220,6 @@ export default {
} }
} }
}, },
computed: {
TASK_EVENT_TYPE() { return TASK_EVENT_TYPE },
LISTENER_TYPE() { return LISTENER_TYPE },
FIELD_TYPE() { return FIELD_TYPE },
SCRIPT_TYPE() { return SCRIPT_TYPE },
EVENT_DEFINITION_TYPE() { return EVENT_DEFINITION_TYPE },
formatterEvent() {
return (row) => {
return TASK_EVENT_TYPE.find(find => find.value === row.event)?.label || ""
}
},
formatterListener() {
return (row) => {
return LISTENER_TYPE.find(find => find.value === row.listener)?.label || ""
}
},
formatterField() {
return (row) => {
return FIELD_TYPE.find(find => find.value === row.fieldType)?.label || ""
}
},
selectedProp() {
return LISTENER_TYPE.find(find => find.value === this.listenerForm.listenerType)?.prop || ''
}
},
methods: { methods: {
resetListenersList() { resetListenersList() {
this.bpmnElement = window.bpmnInstances.bpmnElement; this.bpmnElement = window.bpmnInstances.bpmnElement;

58
yanzhu-ui-vue3/src/package/penal/listeners/utilSelf.js
View File

@ -40,41 +40,23 @@ export function initListenerType(listener) {
}; };
} }
// 监听类型 export const listenerType = {
export const LISTENER_TYPE = [ classListener: "Java 类",
{ label: "Java 类", value: "classListener", prop: "class", key: "listener-class" }, expressionListener: "表达式",
{ label: "表达式", value: "expressionListener", prop: "expression", key: "listener-expression" }, delegateExpressionListener: "代理表达式",
{ label: "代理表达式", value: "delegateExpressionListener", prop: "delegateExpression", key: "listener-delegate" }, scriptListener: "脚本"
// { label: "脚本", value: "scriptListener", prop: "scriptFormat", key: "listener-script-format" }, };
]
// 脚本类型 export const eventType = {
export const SCRIPT_TYPE = [ create: "创建",
{ label: "内联脚本", value: "inlineScript" }, assignment: "指派",
{ label: "外部脚本", value: "externalScript" }, complete: "完成",
] delete: "删除",
// 任务监听器: 事件类型 update: "更新",
export const TASK_EVENT_TYPE = [ timeout: "超时"
{ label: "创建", value: "create" }, };
{ label: "指派", value: "assignment" },
{ label: "完成", value: "complete" }, export const fieldType = {
{ label: "删除", value: "delete" }, string: "字符串",
{ label: "更新", value: "update" }, expression: "表达式"
{ label: "超时", value: "timeout" }, };
]
// 执行监听器: 事件类型
export const EXECUTION_EVENT_TYPE = [
{ label: "开始", value: "start" },
{ label: "结束", value: "end" },
]
// 事件类型: 定时器类型
export const EVENT_DEFINITION_TYPE = [
{ label: "无", value: "null" },
{ label: "日期", value: "date" },
{ label: "持续时长", value: "duration" },
{ label: "循环", value: "cycle" },
]
// 字段配置
export const FIELD_TYPE = [
{ label: "字符串", value: "string" },
{ label: "表达式", value: "expression" },
]

439
yanzhu-ui-vue3/src/package/penal/multi-instance/ElementMultiInstance.vue
View File

@ -1,331 +1,200 @@
<template> <template>
<div class="panel-tab__content"> <div class="panel-tab__content">
<el-table :data="elementListenersList" size="small" border> <el-form size="small" label-width="90px" @submit.prevent>
<el-table-column label="序号" width="50px" type="index" /> <el-form-item label="回路特性">
<el-table-column label="事件类型" min-width="100px" prop="event" :formatter="formatterEvent" /> <el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="formatterListener" /> <!--bpmn:MultiInstanceLoopCharacteristics-->
<el-table-column label="操作" width="90px"> <el-option label="并行多重事件" value="ParallelMultiInstance" />
<template v-slot="{ row, $index }"> <el-option label="时序多重事件" value="SequentialMultiInstance" />
<el-button link type="primary" @click="openListenerForm(row, $index)">编辑</el-button> <!--bpmn:StandardLoopCharacteristics-->
<el-button link type="danger" @click="removeListener(row, $index)">移除</el-button> <el-option label="循环事件" value="StandardLoop" />
</template> <el-option label="无" value="Null" />
</el-table-column> </el-select>
</el-table> </el-form-item>
<div class="element-drawer__button"> <template v-if="loopCharacteristics === 'ParallelMultiInstance' || loopCharacteristics === 'SequentialMultiInstance'">
<el-button size="small" type="primary" :icon="Plus" @click="openListenerForm(null)">添加监听器</el-button> <el-form-item label="循环基数" key="loopCardinality">
</div> <el-input v-model="loopInstanceForm.loopCardinality" clearable @change="updateLoopCardinality" />
<!-- 监听器 编辑/创建 部分 -->
<el-drawer
v-model="listenerFormModelVisible"
title="执行监听器"
:size="`${width}px`"
class="listener-drawer"
append-to-body
destroy-on-close>
<el-form :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.prevent>
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择事件类型' }">
<el-select v-model="listenerForm.event">
<el-option v-for="item in EXECUTION_EVENT_TYPE" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择监听器类型' }"> <el-form-item label="集合" key="collection">
<el-input <el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
v-model="listenerForm[selectedProp]"
clearable
class="input-with-select">
<template #prepend>
<el-select v-model="listenerForm.listenerType" style="width: 100%">
<el-option v-for="item in LISTENER_TYPE" :key="item.key" :label="item.label" :value="item.value" />
</el-select>
</template>
<template #append>
<el-button :icon="Search" />
</template>
</el-input>
</el-form-item> </el-form-item>
<template v-for="item in LISTENER_TYPEWithoutJB"> <el-form-item label="元素变量" key="elementVariable">
<el-form-item <el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
v-if="listenerForm.listenerType === item.value"
:key="item.key"
:label="item.label"
:prop="item.prop"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm[item.prop]" clearable />
</el-form-item>
</template>
<!-- 脚本类型 -->
<!-- <template v-if="listenerForm.listenerType === LISTENER_TYPE[LISTENER_TYPE.length - 1].value">-->
<!-- <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 v-for="item in SCRIPT_TYPE" :key="item.value" :label="item.label" :value="item.value" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item-->
<!-- v-if="listenerForm.scriptType === SCRIPT_TYPE[0].value"-->
<!-- 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 === SCRIPT_TYPE[1].value"-->
<!-- 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 />
<div class="listener-filed__title">
<span><el-icon><Menu /></el-icon>注入字段：</span>
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</div>
<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="formatterField" />
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
<el-table-column label="操作" width="100px">
<template v-slot="{ row, $index }">
<el-button link type="primary" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-button link type="danger" @click="removeListenerField(row, $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" @submit.prevent>
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段名称' }">
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item> </el-form-item>
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择字段类型' }"> <el-form-item label="完成条件" key="completionCondition">
<el-select v-model="listenerFieldForm.fieldType"> <el-input v-model="loopInstanceForm.completionCondition" clearable @change="updateLoopCondition" />
<el-option v-for="item in FIELD_TYPE" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="异步状态" key="async">
v-if="listenerFieldForm.fieldType === FIELD_TYPE[0].value" <el-checkbox v-model="loopInstanceForm.asyncBefore" label="异步前" @change="updateLoopAsync('asyncBefore')" />
label="字段值：" <el-checkbox v-model="loopInstanceForm.asyncAfter" label="异步后" @change="updateLoopAsync('asyncAfter')" />
prop="string" <el-checkbox
key="field-string" v-model="loopInstanceForm.exclusive"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段值' }" v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
> label="排除"
<el-input v-model="listenerFieldForm.string" clearable /> @change="updateLoopAsync('exclusive')"
/>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="重试周期" prop="timeCycle" v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore" key="timeCycle">
v-if="listenerFieldForm.fieldType === FIELD_TYPE[1].value" <el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
label="表达式："
prop="expression"
key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写表达式' }"
>
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item> </el-form-item>
</el-form>
<template v-slot:footer>
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template> </template>
</el-dialog> </el-form>
</div> </div>
</template> </template>
<script>
import { createListenerObject, updateElementExtensions } from "../../utils";
import {
initListenerType,
initListenerForm,
EXECUTION_EVENT_TYPE,
LISTENER_TYPE,
FIELD_TYPE,
SCRIPT_TYPE,
EVENT_DEFINITION_TYPE
} from "./utilSelf";
import { Plus, Search } from "@element-plus/icons-vue";
<script>
export default { export default {
name: "ElementListeners", name: "ElementMultiInstance",
setup() {
return { Plus, Search }
},
props: { props: {
id: String, businessObject: Object,
type: String type: String
}, },
inject: { inject: {
prefix: "prefix", prefix: "prefix"
width: "width"
}, },
data() { data() {
return { return {
elementListenersList: [], // 监听器列表 loopCharacteristics: "",
listenerForm: {}, // 监听器详情表单 //默认配置，用来覆盖原始不存在的选项，避免报错
listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态 defaultLoopInstanceForm: {
fieldsListOfListener: [], completionCondition: "",
listenerFieldForm: {}, // 监听器 注入字段 详情表单 loopCardinality: "",
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态 extensionElements: [],
editingListenerIndex: -1, // 监听器所在下标，-1 为新增 asyncAfter: false,
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增 asyncBefore: false,
exclusive: false
},
loopInstanceForm: {}
}; };
}, },
watch: { watch: {
id: { businessObject: {
immediate: true, immediate: true,
handler(val) { handler(val) {
val && val.length && this.$nextTick(() => this.resetListenersList()); this.bpmnElement = window.bpmnInstances.bpmnElement;
this.getElementLoop(val);
} }
} }
}, },
computed: {
EXECUTION_EVENT_TYPE() { return EXECUTION_EVENT_TYPE },
LISTENER_TYPE() { return LISTENER_TYPE },
FIELD_TYPE() { return FIELD_TYPE },
SCRIPT_TYPE() { return SCRIPT_TYPE },
EVENT_DEFINITION_TYPE() { return EVENT_DEFINITION_TYPE },
formatterEvent() {
return (row) => {
return EXECUTION_EVENT_TYPE.find(find => find.value === row.event)?.label || ""
}
},
formatterListener() {
return (row) => {
return LISTENER_TYPE.find(find => find.value === row.listener)?.label || ""
}
},
formatterField() {
return (row) => {
return FIELD_TYPE.find(find => find.value === row.fieldType)?.label || ""
}
},
selectedProp() {
return LISTENER_TYPE.find(find => find.value === this.listenerForm.listenerType)?.prop || ''
}
},
methods: { methods: {
resetListenersList() { getElementLoop(businessObject) {
this.bpmnElement = window.bpmnInstances.bpmnElement; if (!businessObject.loopCharacteristics) {
this.otherExtensionList = []; this.loopCharacteristics = "Null";
this.bpmnElementListeners = this.loopInstanceForm = {};
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? []; return;
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener)); }
if (businessObject.loopCharacteristics.$type === "bpmn:StandardLoopCharacteristics") {
this.loopCharacteristics = "StandardLoop";
this.loopInstanceForm = {};
return;
}
if (businessObject.loopCharacteristics.isSequential) {
this.loopCharacteristics = "SequentialMultiInstance";
} else {
this.loopCharacteristics = "ParallelMultiInstance";
}
// 合并配置
this.loopInstanceForm = {
...this.defaultLoopInstanceForm,
...businessObject.loopCharacteristics,
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? "",
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ""
};
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
this.multiLoopInstance = window.bpmnInstances.bpmnElement.businessObject.loopCharacteristics;
// 更新表单
if (
businessObject.loopCharacteristics.extensionElements &&
businessObject.loopCharacteristics.extensionElements.values &&
businessObject.loopCharacteristics.extensionElements.values.length
) {
this.loopInstanceForm["timeCycle"] = businessObject.loopCharacteristics.extensionElements.values[0].body
}
}, },
// 打开 监听器详情 侧边栏 changeLoopCharacteristicsType(type) {
openListenerForm(listener, index) { // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
if (listener) { // 取消多实例配置
this.listenerForm = initListenerForm(listener); if (type === "Null") {
this.editingListenerIndex = index; window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null });
} else { return;
this.listenerForm = {};
this.editingListenerIndex = -1; // 标记为新增
} }
if (listener && listener.fields) { // 配置循环
this.fieldsListOfListener = listener.fields.map(field => ({ if (type === "StandardLoop") {
...field, const loopCharacteristicsObject = window.bpmnInstances.moddle.create("bpmn:StandardLoopCharacteristics");
fieldType: field.string ? "string" : "expression" window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
})); loopCharacteristics: loopCharacteristicsObject
} else { });
this.fieldsListOfListener = []; this.multiLoopInstance = null;
this.listenerForm["fields"] = [] return;
} }
// 打开侧边栏并清楚验证状态 // 时序
this.listenerFormModelVisible = true; if (type === "SequentialMultiInstance") {
this.$nextTick(() => { this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", {
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate(); isSequential: true
});
} else {
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics");
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
loopCharacteristics: this.multiLoopInstance
}); });
}, },
// 打开监听器字段编辑弹窗 // 循环基数
openListenerFieldForm(field, index) { updateLoopCardinality(cardinality) {
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {}; let loopCardinality = null;
this.editingListenerFieldIndex = field ? index : -1; if (cardinality && cardinality.length) {
this.listenerFieldFormModelVisible = true; loopCardinality = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: cardinality });
this.$nextTick(() => { }
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate(); window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
loopCardinality
}); });
}, },
// 保存监听器注入字段 // 完成条件
async saveListenerFiled() { updateLoopCondition(condition) {
let validateStatus = await this.$refs["listenerFieldFormRef"].validate(); let completionCondition = null;
if (!validateStatus) return; // 验证不通过直接返回 if (condition && condition.length) {
if (this.editingListenerFieldIndex === -1) { completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: condition });
this.fieldsListOfListener.push(this.listenerFieldForm);
this.listenerForm.fields.push(this.listenerFieldForm);
} else {
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
} }
this.listenerFieldFormModelVisible = false; window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
this.$nextTick(() => (this.listenerFieldForm = {})); completionCondition
});
}, },
// 移除监听器字段 // 重试周期
removeListenerField(field, index) { updateLoopTimeCycle(timeCycle) {
this.$confirm("确认移除该字段吗？", "提示", { const extensionElements = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
confirmButtonText: "确 认", values: [
cancelButtonText: "取 消" window.bpmnInstances.moddle.create(`${this.prefix}:FailedJobRetryTimeCycle`, {
}) body: timeCycle
.then(() => { })
this.fieldsListOfListener.splice(index, 1); ]
this.listenerForm.fields.splice(index, 1); });
}) window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
.catch(() => console.info("操作取消")); extensionElements
});
}, },
// 移除监听器 // 直接更新的基础信息
removeListener(listener, index) { updateLoopBase() {
this.$confirm("确认移除该监听器吗？", "提示", { window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
confirmButtonText: "确 认", collection: this.loopInstanceForm.collection || null,
cancelButtonText: "取 消" elementVariable: this.loopInstanceForm.elementVariable || null
}) });
.then(() => {
this.bpmnElementListeners.splice(index, 1);
this.elementListenersList.splice(index, 1);
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
})
.catch(() => console.info("操作取消"));
}, },
// 保存监听器配置 // 各异步状态
async saveListenerConfig() { updateLoopAsync(key) {
let validateStatus = await this.$refs["listenerFormRef"].validate(); const { asyncBefore, asyncAfter } = this.loopInstanceForm;
if (!validateStatus) return; // 验证不通过直接返回 let asyncAttr = Object.create(null);
const listenerObject = createListenerObject(this.listenerForm, false, this.prefix); if (!asyncBefore && !asyncAfter) {
if (this.editingListenerIndex === -1) { this.loopInstanceForm["exclusive"] = false
this.bpmnElementListeners.push(listenerObject); asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null };
this.elementListenersList.push(this.listenerForm);
} else { } else {
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject); asyncAttr[key] = this.loopInstanceForm[key];
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
} }
// 保存其他配置 window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, asyncAttr);
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
// 4. 隐藏侧边栏
this.listenerFormModelVisible = false;
this.listenerForm = {};
} }
},
beforeUnmount() {
this.multiLoopInstance = null;
this.bpmnElement = null;
} }
}; };
</script> </script>

18
yanzhu-ui-vue3/src/package/penal/task/ElementTask.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="panel-tab__content"> <div class="panel-tab__content">
<el-form size="small" label-width="90px" @submit.prevent> <el-form size="small" label-width="90px" @submit.prevent>
<!-- <el-form-item label="异步延续">--> <el-form-item label="异步延续">
<!-- <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />--> <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />
<!-- <el-checkbox v-model="taskConfigForm.asyncAfter" 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-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />
<!-- </el-form-item>--> </el-form-item>
<component :is="witchTaskComponent" v-bind="$props" /> <component :is="witchTaskComponent" v-bind="$props" />
</el-form> </el-form>
</div> </div>
@ -46,15 +46,15 @@ export default {
immediate: true, immediate: true,
handler() { handler() {
this.bpmnElement = window.bpmnInstances.bpmnElement; this.bpmnElement = window.bpmnInstances.bpmnElement;
// this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore; this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
// this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter; this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
// this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive; this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
} }
}, },
type: { type: {
immediate: true, immediate: true,
handler() { handler() {
this.witchTaskComponent = this.installedComponent[this.$props.type]; this.witchTaskComponent = this.installedComponent[this.type];
} }
} }
}, },

682
yanzhu-ui-vue3/src/package/penal/task/task-components/UserTask.vue
View File

@ -1,241 +1,51 @@
<template> <template>
<div style="margin-top: 16px"> <div style="margin-top: 16px">
<el-row> <el-form-item label="处理用户">
<h4 class="mb-10 fw-700">审批人设置</h4> <el-select v-model="userTaskForm.assignee" @change="updateElementTask('assignee')">
<el-radio-group v-model="dataType" @change="changeDataType"> <el-option v-for="ak in mockData" :key="'ass-' + ak" :label="`用户${ak}`" :value="`user${ak}`" />
<el-radio </el-select>
v-for="item in USER_TASK_GROUP" </el-form-item>
:key="item.value" <el-form-item label="候选用户">
:label="item.value" <el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">
>{{item.label}}</el-radio> <el-option v-for="uk in mockData" :key="'user-' + uk" :label="`用户${uk}`" :value="`user${uk}`" />
</el-radio-group> </el-select>
</el-row> </el-form-item>
<el-row> <el-form-item label="候选分组">
<el-col :span="24" v-if="dataType === USER_TASK_GROUP[0].value"> <el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">
<el-tag v-for="userText in selectedUser.text" :key="userText" effect="plain" closable @close="handleClose(userText)"> <el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />
{{userText}} </el-select>
</el-tag> </el-form-item>
<div class="element-drawer__button"> <el-form-item label="到期时间">
<el-button size="default" type="primary" :icon="Plus" @click="onSelectUsers()">添加用户</el-button> <el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
</div> </el-form-item>
</el-col> <el-form-item label="跟踪时间">
<el-col :span="24" v-else-if="dataType === USER_TASK_GROUP[1].value"> <el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
<el-select v-model="roleIds" multiple size="default" placeholder="请选择角色" @change="changeSelectRoles" style="width: 100%"> </el-form-item>
<el-option <el-form-item label="优先级">
v-for="item in roleOptions" <el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
:key="item.roleId" </el-form-item>
:label="item.roleName"
:value="`ROLE${item.roleId}`"
:disabled="item.status === 1">
</el-option>
</el-select>
</el-col>
<el-col :span="24" v-else-if="dataType === USER_TASK_GROUP[2].value">
<TreeSelect
size="small"
:options="deptTreeData"
:objMap="deptProps"
multiple
clearable
checkStrictly
nodeKey="id"
:selectValue="deptIds"
collapseTags
@change="checkedDeptChange">
</TreeSelect>
</el-col>
</el-row>
<el-row>
<el-col :span="24" v-show="showMultiFlog">
<el-divider />
<h4><b>多实例审批方式</b></h4>
<el-row>
<el-radio-group v-model="multiLoopType" @change="changeMultiLoopType()" class="flex-column radio-group-flex">
<el-row v-for="item in MULTI_INSTANCE_TYPE" :key="item.value">
<el-radio :label="item.value">{{item.label}}</el-radio>
</el-row>
</el-radio-group>
</el-row>
<el-row v-if="multiLoopType !== MULTI_INSTANCE_TYPE[0].value">
<el-tooltip content="开启后，实例需按顺序轮流审批" placement="top-start" @click.stop.prevent>
<el-icon><InfoFilled /></el-icon>
</el-tooltip>
<span class="custom-label">顺序审批：</span>
<el-switch v-model="isSequential" @change="changeMultiLoopType()" />
</el-row>
</el-col>
</el-row>
<!-- 候选用户弹窗 -->
<el-dialog title="候选用户" v-model="userOpen" width="60%" append-to-body>
<el-row type="flex" :gutter="20">
<!--部门数据-->
<el-col :span="7">
<el-card shadow="never" style="height: 100%">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
:prefix-icon="Search"
style="margin-bottom: 20px"
/>
<el-tree
:data="deptOptions"
:props="deptProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="deptTree"
:default-expand-all="false"
node-key="id"
highlight-current
@current-change="handleNodeClick"
/>
</div>
</el-card>
</el-col>
<el-col :span="17">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="用户名称" prop="nickName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="Search"
@click="handleQuery"
>搜索</el-button>
<el-button
:icon="Refresh"
@click="resetQuery"
>重置</el-button>
</el-form-item>
</el-form>
<el-table
ref="multipleTable"
height="600"
v-loading="tableLoading"
:data="userTableList"
border
@row-click="clickRow"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户名" align="center" prop="nickName" />
<el-table-column label="部门" align="center" prop="dept.deptName" />
</el-table>
<pagination
:total="userTotal"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<template #footer class="dialog-footer">
<el-button type="primary" size="default" @click="handleTaskUserComplete">确 定</el-button>
<el-button size="default" @click="userOpen = false">取 消</el-button>
</template>
</el-dialog>
</div> </div>
</template> </template>
<script>
import { listUser, deptTreeSelect } from "@/api/system/user";
import { listRole } from "@/api/system/role";
import TreeSelect from "@/components/TreeSelect/index";
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
import { uniqBy } from 'lodash'
const USER_TASK_GROUP = [ <script>
{
label: "指定用户",
value: "USERS",
},
{
label: "角色",
value: "ROLES",
},
{
label: "部门",
value: "DEPTS",
},
{
label: "发起人",
value: "INITIATOR",
},
]
const USER_TASK_FORM = {
dataType: '',
assignee: '',
candidateUsers: '',
candidateGroups: '',
text: '',
deptId: '',
// dueDate: '',
// followUpDate: '',
// priority: ''
}
const MULTI_INSTANCE_TYPE = [
{ label: "无", value: 'Null' },
{ label: "会签（需所有审批人同意）", value: 'SequentialMultiInstance' },
{ label: "或签（一名审批人同意即可）", value: 'ParallelMultiInstance' },
{ label: "自定义", value: 'DiyMultiInstance' },
]
export default { export default {
name: "UserTask", name: "UserTask",
props: { props: {
id: String, id: String,
type: String type: String
}, },
components: { TreeSelect },
setup() {
return { Plus, Search, Refresh }
},
data() { data() {
return { return {
tableLoading: false, defaultTaskForm: {
dataType: USER_TASK_GROUP[0].value, assignee: "",
selectedUser: { candidateUsers: [],
ids: [], candidateGroups: [],
text: [] dueDate: "",
followUpDate: "",
priority: ""
}, },
userOpen: false, userTaskForm: {},
deptName: undefined, mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
deptOptions: [], //部门列表
deptProps: {
children: "children",
label: "label",
value: 'id'
},
userTableList: [],
userTotal: 0,
selectedUserDate: [],
roleOptions: [],
roleIds: [],
deptTreeData: [],
deptIds: [],
// 查询参数
queryParams: {
deptId: undefined,
nickName: undefined,
pageNum: 1,
pageSize: 20,
},
showMultiFlog: false,
isSequential: false,
multiLoopType: MULTI_INSTANCE_TYPE[0].value,
}; };
}, },
watch: { watch: {
@ -245,422 +55,32 @@ export default {
this.bpmnElement = window.bpmnInstances.bpmnElement; this.bpmnElement = window.bpmnInstances.bpmnElement;
this.$nextTick(() => this.resetTaskForm()); this.$nextTick(() => this.resetTaskForm());
} }
}, }
// 根据名称筛选部门树
deptName(val) {
this.$refs.deptTree.filter(val);
},
userTableList: {
handler(tableList) {
if(tableList.length > 0) {
this.$nextTick(() => {
setTimeout(() => {
if(!!USER_TASK_FORM.assignee) {
//单选用户
const findObj = tableList.find(item => item.userId === USER_TASK_FORM.assignee)
this.selectedUserDate = [findObj]
} else if (!!USER_TASK_FORM.candidateUsers) {
this.selectedUserDate = USER_TASK_FORM.candidateUsers?.split(',')?.map(Id => {
const findObj = tableList.find(item => item.userId === Id)
return {...findObj}
}) || []
}
// console.log('this.selectedUserDate', this.selectedUserDate);
}, 100)
})
}
},
deep: true,
},
},
computed: {
USER_TASK_GROUP() { return USER_TASK_GROUP },
MULTI_INSTANCE_TYPE() { return MULTI_INSTANCE_TYPE }
}, },
methods: { methods: {
// 初始化变量 resetTaskForm() {
async resetTaskForm() { for (let key in this.defaultTaskForm) {
const bpmnElementObj = this.bpmnElement?.businessObject; let value;
if (!bpmnElementObj) { if (key === "candidateUsers" || key === "candidateGroups") {
return; value = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") : [];
}
this.clearOptionsData()
this.dataType = bpmnElementObj.dataType;
if (this.dataType === USER_TASK_GROUP[0].value) {
let userIdData = bpmnElementObj['candidateUsers'] || bpmnElementObj['assignee'];
let userText = bpmnElementObj.text || [];
if (userIdData && userIdData.toString().length > 0 && userText && userText.length > 0) {
this.selectedUser.ids = userIdData?.toString().split(',');
this.selectedUser.text = userText?.split(',');
}
if (this.selectedUser.ids.length > 1) {
this.showMultiFlog = true;
}
} else if (this.dataType === USER_TASK_GROUP[1].value) {
// 获取角色列表
this.getRoleOptions();
let roleIdData = bpmnElementObj['candidateGroups'] || [];
if (roleIdData && roleIdData.length > 0) {
this.roleIds = roleIdData.split(',')
}
this.showMultiFlog = true;
} else if (this.dataType === USER_TASK_GROUP[2].value) {
// 获取部门列表
await this.getDeptTreeData();
let deptIdData = bpmnElementObj['candidateGroups'] || [];
if (deptIdData && deptIdData.length > 0) {
this.deptIds = deptIdData.split(',');
// 回显
this.checkedDeptChange(this.deptIds);
}
this.showMultiFlog = true;
}
this.getElementLoop(bpmnElementObj);
},
// 清空选项数据
clearOptionsData() {
this.selectedUser.ids = [];
this.selectedUser.text = [];
this.roleIds = [];
this.deptIds = [];
},
// 更新节点数据
updateElementTask() {
const taskObj = Object.assign({}, { ...USER_TASK_FORM })
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskObj);
// console.log('updateElementTask', this.bpmnElement?.businessObject);
},
// 查询部门下拉树结构
getDeptOptions() {
return new Promise((resolve, reject) => {
if (!this.deptOptions || this.deptOptions.length <= 0) {
// 选择部门树 数据第一次请求
deptTreeSelect().then(response => {
this.deptOptions = [].concat(
[{ id: '', label: '全部', children: [] }],
[...response.data]
);
this.handleNodeClick(this.deptOptions[0])
resolve()
})
} else { } else {
// 确保选择部门树已初始化 但仍请求表格数据 复选框回显 value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
this.handleNodeClick(this.deptOptions[0])
} }
}); this.userTaskForm[key] = value
},
// 查询部门下拉树结构（含部门前缀）
getDeptTreeData() {
function refactorTree(data) {
return data.map(node => {
let treeData = { id: `DEPT${node.id}`, label: node.label, parentId: node.parentId, weight: node.weight };
if (node.children && node.children.length > 0) {
treeData.children = refactorTree(node.children);
}
return treeData;
});
}
return new Promise((resolve, reject) => {
if (!this.deptTreeData || this.deptTreeData.length <= 0) {
deptTreeSelect().then((res) => {
this.deptTreeData = refactorTree(res.data);
resolve()
}).catch(() => {
reject()
})
} else {
resolve()
}
})
},
// 查询部门下拉树结构
getRoleOptions() {
if (!this.roleOptions || this.roleOptions.length <= 0) {
listRole().then(response => this.roleOptions = response.rows);
} }
}, },
// 查询用户列表 updateElementTask(key) {
getList() { const taskAttr = Object.create(null);
this.tableLoading = true if (key === "candidateUsers" || key === "candidateGroups") {
listUser({ ...this.queryParams }).then(response => { taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
this.userTableList = response.rows;
this.userTotal = response.total;
this.$nextTick(() => {
setTimeout(() => {
this.selectedUserDate?.forEach(each => {
const findObj = this.userTableList.find(find => find.userId === each.userId) || {}
if(Object.keys(findObj).length > 0) {
this.$refs.multipleTable.toggleRowSelection(findObj)
}
})
}, 500)
})
}).finally(() => {
this.tableLoading = false
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.$refs.queryForm.resetFields();
this.$refs.queryForm.clearValidate();
this.queryParams = {
deptId: '',
nickName: undefined,
pageSize: 20
};
this.handleQuery();
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
},
// 关闭标签
handleClose(tag) {
this.selectedUserDate.splice(this.selectedUserDate.indexOf(tag), 1);
this.handleTaskUserChange()
},
/**
* 选择行
*/
clickRow(row) {
this.$refs.multipleTable.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
if(selection.length) {
const concatData = [].concat(selection, this.selectedUserDate);
this.selectedUserDate = uniqBy(concatData, 'userId');
}
},
// 添加用户
onSelectUsers() {
this.$refs.multipleTable?.clearSelection();
this.getDeptOptions()
this.userOpen = true;
},
// 添加用户-确认按钮
handleTaskUserComplete() {
if (!this.selectedUserDate || this.selectedUserDate.length <= 0) {
this.$modal.msgError('请选择用户');
return;
}
USER_TASK_FORM.dataType = USER_TASK_GROUP[0].value;
USER_TASK_FORM.deptId = this.queryParams.deptId;
this.handleTaskUserChange()
this.changeMultiLoopType();
this.userOpen = false;
},
// 指定用户改变确定
handleTaskUserChange() {
this.selectedUser.text = this.selectedUserDate.map(item => item.nickName) || [];
if (this.selectedUserDate.length === 1) {
let data = this.selectedUserDate[0];
USER_TASK_FORM.assignee = data.userId;
USER_TASK_FORM.text = data.nickName;
USER_TASK_FORM.candidateUsers = null;
this.showMultiFlog = false;
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
} else { } else {
USER_TASK_FORM.candidateUsers = this.selectedUserDate.map(item => item.userId).join() || null; taskAttr[key] = this.userTaskForm[key] || null;
USER_TASK_FORM.text = this.selectedUserDate.map(item => item.nickName).join() || null;
USER_TASK_FORM.assignee = null;
this.showMultiFlog = true;
} }
this.updateElementTask(); window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
}, }
// 选中角色
changeSelectRoles(roleArray) {
let groups = null;
let text = null;
if (roleArray && roleArray.length > 0) {
USER_TASK_FORM.dataType = USER_TASK_GROUP[1].value;
groups = roleArray.join() || null;
let textArr = this.roleOptions.filter(k => roleArray.indexOf(`ROLE${k.roleId}`) >= 0);
text = textArr?.map(k => k.roleName).join() || null;
} else {
USER_TASK_FORM.dataType = null;
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
}
USER_TASK_FORM.candidateGroups = groups;
USER_TASK_FORM.text = text;
this.updateElementTask();
this.changeMultiLoopType();
},
// 选中部门
checkedDeptChange(deptArray) {
let groups = null;
let text = null;
this.deptIds = deptArray;
if (deptArray && deptArray.length > 0) {
USER_TASK_FORM.dataType = USER_TASK_GROUP[2].value;
groups = deptArray.join(',') || null;
let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
const filterData = treeStarkData?.filter(item => {
return deptArray.includes(item.id)
})
text = filterData?.map(item => item.label).join(',') || null
} else {
USER_TASK_FORM.dataType = null;
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
}
USER_TASK_FORM.candidateGroups = groups;
USER_TASK_FORM.text = text;
this.updateElementTask();
this.changeMultiLoopType();
},
// 修改审批人类型
changeDataType(val) {
if (val === USER_TASK_GROUP[1].value || val === USER_TASK_GROUP[2].value || (val === USER_TASK_GROUP[0].value && this.selectedUser.ids.length > 1)) {
this.showMultiFlog = true;
} else {
this.showMultiFlog = false;
}
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
this.changeMultiLoopType();
// 清空 USER_TASK_FORM 所有属性值
Object.keys(USER_TASK_FORM).forEach(key => USER_TASK_FORM[key] = null);
USER_TASK_FORM.dataType = val;
if (val === USER_TASK_GROUP[0].value) {
if (this.selectedUser && this.selectedUser.ids && this.selectedUser.ids.length > 0) {
if (this.selectedUser.ids.length === 1) {
USER_TASK_FORM.assignee = this.selectedUser.ids[0];
} else {
USER_TASK_FORM.candidateUsers = this.selectedUser.ids.join()
}
USER_TASK_FORM.text = this.selectedUser.text?.join() || null
}
} else if (val === USER_TASK_GROUP[1].value) {
this.getRoleOptions();
if (this.roleIds && this.roleIds.length > 0) {
USER_TASK_FORM.candidateGroups = this.roleIds.join() || null;
let textArr = this.roleOptions.filter(k => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0);
USER_TASK_FORM.text = textArr?.map(k => k.roleName).join() || null;
}
} else if (val === USER_TASK_GROUP[2].value) {
this.getDeptTreeData();
if (this.deptIds && this.deptIds.length > 0) {
USER_TASK_FORM.candidateGroups = this.deptIds.join() || null;
let textArr = []
let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
this.deptIds.forEach(id => {
let stark = []
stark = stark.concat(treeStarkData);
while(stark.length) {
let temp = stark.shift();
if(temp.children) {
stark = temp.children.concat(stark);
}
if(id === temp.id) {
textArr.push(temp);
}
}
})
USER_TASK_FORM.text = textArr?.map(k => k.label).join() || null;
}
} else {
USER_TASK_FORM.assignee = "${initiator}";
USER_TASK_FORM.text = "流程发起人";
}
this.updateElementTask();
},
// 初始化多实例变量
getElementLoop(businessObject) {
if (!businessObject.loopCharacteristics) {
this.multiLoopType = MULTI_INSTANCE_TYPE[0].value;
return;
}
this.isSequential = businessObject.loopCharacteristics.isSequential;
if (businessObject.loopCharacteristics.completionCondition) {
if (businessObject.loopCharacteristics.completionCondition.body === "${nrOfCompletedInstances >= nrOfInstances}") {
this.multiLoopType = MULTI_INSTANCE_TYPE[1].value; // 会签
} else if (businessObject.loopCharacteristics.completionCondition.body === "${nrOfCompletedInstances >= 0}") {
this.multiLoopType = MULTI_INSTANCE_TYPE[2].value; // 或签
} else {
this.multiLoopType = MULTI_INSTANCE_TYPE[3].value; // 自定义
}
}
},
// 更新多实例变量
changeMultiLoopType() {
// 取消多实例配置
if (this.multiLoopType === MULTI_INSTANCE_TYPE[0].value) {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null, assignee: null });
return;
}
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: this.isSequential });
// 更新多实例配置
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
loopCharacteristics: this.multiLoopInstance,
assignee: '${assignee}'
});
// 设置审批人
USER_TASK_FORM.assignee = '${assignee}';
// 完成条件
let completionCondition = null;
switch (this.multiLoopType) {
case MULTI_INSTANCE_TYPE[1].value:
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances >= nrOfInstances}" });
break;
case MULTI_INSTANCE_TYPE[2].value:
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances > 0}" });
break;
default:
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "" });
break;
}
// 更新模块属性信息
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
collection: MULTI_INSTANCE_TYPE[1].value || MULTI_INSTANCE_TYPE[2].value ? '${multiInstanceHandler.getUserIds(execution)}' : "",
elementVariable: MULTI_INSTANCE_TYPE[1].value || MULTI_INSTANCE_TYPE[2].value ? 'assignee' : "",
completionCondition
});
},
}, },
beforeDestroy() { beforeUnmount() {
this.bpmnElement = null; this.bpmnElement = null;
}, }
}; };
</script> </script>
<style scoped lang="scss">
.el-row .el-radio-group {
margin-bottom: 15px;
.el-radio {
line-height: 28px;
}
}
.el-tag {
margin-bottom: 10px;
+ .el-tag {
margin-left: 10px;
}
}
.custom-label {
padding-left: 5px;
font-weight: 500;
font-size: 14px;
color: #606266;
}
.head-container {
height: 480px;
overflow-y: auto;
}
.el-row .radio-group-flex {
margin: 15px 0 0 0;
justify-items: flex-start;
align-items: flex-start !important;
}
</style>

22
yanzhu-ui-vue3/src/package/theme/process-panel.scss
View File

@ -68,28 +68,6 @@
margin-top: 8px; margin-top: 8px;
} }
} }
.listener-drawer {
.el-drawer__header {
margin: 0PX;
padding: 10PX;
border-bottom: 1px solid #eeeeee;
.el-drawer__title {
font-size: 18px
}
}
.el-drawer__body {
.el-form-item__label {
font-size: 14PX;
font-weight: 500;
}
.input-with-select .el-input-group__prepend {
background-color: var(--el-fill-color-blank);
padding: 0;
}
}
}
.listener-filed__title { .listener-filed__title {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;