clay
/
workflow-engine-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

master #33

Merged
clay merged 4 commits from master into pro 2023-03-03 18:06:36 +00:00
Conversation 0 Commits 4 Files Changed 18 +272 -148
14 changed files with 272 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 74fbae3095 - Show all commits

7
flowable-engine-web/src/store/index.js
View File

@ -8,6 +8,7 @@ export default new Vuex.Store({
state: {
nodeMap: new Map(),
parentMap: new Map(),
selectUserMap: new Map(),
isEdit: null,
selectedNode: {},
selectFormItem: null,
@ -29,7 +30,11 @@ export default new Vuex.Store({
state.isEdit = val
}
},
getters: {},
getters: {
selectedNode(){
return state.selectedNode
}
},
actions: {},
modules: {}
})

1
flowable-engine-web/src/views/admin/layout/ProcessDesign.vue
View File

@ -30,7 +30,6 @@
<script>
import ProcessTree from './process/ProcessTree.vue'
// import ProcessTree from './process/ProcessTreeBack.vue'
import NodeConfig from '../../common/process/config/NodeConfig'
//流程设计器
export default {

17
flowable-engine-web/src/views/admin/layout/ProcessDiagramViewer.vue
View File

@ -9,7 +9,7 @@
</div>
<el-main>
<div class="design" :style="'transform: scale('+ scale / 100 +');'">
<process-tree ref="process-tree-view"/>
<process-tree ref="process-tree"/>
</div>
</el-main>
</div>
@ -34,6 +34,21 @@ export default {
},
beforeDestroy() {
this.$store.state.diagramMode = "design";
},
methods:{
//校验数据配置的合法性
validate() {
return this.$refs["process-tree"].validateProcess()
},
validate_ASSIGN_USER(err) {
if (this.config.props.assignedUser.length > 0) {
return true;
} else {
this.errorInfo = '请指定审批人员'
err.push(`${this.config.name} 未指定审批人员`)
return false
}
},
}
};
</script>

2
flowable-engine-web/src/views/admin/layout/form/FormDesignRender.vue
View File

@ -1,6 +1,6 @@
<template>
<!--todo 预览时渲染的component-->
<component ref="form" :is="config.name" :mode="mode" :perm="perm" v-model="_value" v-bind="config.props"/>
<component ref="form" :is="config.name" :config="config" :mode="mode" :perm="perm" v-model="_value" v-bind="config.props"/>
</template>
<script>

1
flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue
View File

@ -261,6 +261,7 @@ export default {
},
//选中一个节点
selectNode(node) {
console.log(node)
this.$store.commit('selectedNode', node)
console.log(node, "node")
if (!this.isConcurrentNode(node)) {

9
flowable-engine-web/src/views/common/form/components/UserPicker.vue
View File

@ -22,7 +22,7 @@
</div>
</template>
<template v-else-if="perm === 'R'">
<div style="display: flex;">
<div style="display: flex;">
<div v-for="(user, i) in _value" :key="i" class="view_user">
<el-avatar :src="user.avatar"/>
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
@ -59,6 +59,12 @@ export default {
type: String,
default: '请选择人员'
},
config: {
type: Object,
default: () => {
return {}
}
},
multiple: {
type: Boolean,
default: false
@ -116,6 +122,7 @@ export default {
display: flex;
flex-direction: column;
margin-right: 10px;
span {
text-align: center;
text-overflow: ellipsis;

76
flowable-engine-web/src/views/common/process/config/ApprovalNodeConfig.vue
View File

@ -7,7 +7,7 @@
</el-radio-group>
<div v-if="nodeProps.assignedType === 'ASSIGN_USER'">
<el-button size="mini" icon="el-icon-plus" type="primary" @click="selectUser" round>选择人员</el-button>
<org-items v-model="nodeProps.assignedUser"/>
<avatar-ellipsis :row="3" :user-info="nodeProps.assignedUser"/>
</div>
<div v-else-if="nodeProps.assignedType === 'SELF_SELECT'">
<el-radio-group size="mini" v-model="nodeProps.selfSelect.multiple">
@ -118,8 +118,8 @@
</el-form-item>
<el-form-item label="🙅‍ 如果审批被驳回 👇">
<el-radio-group v-model="nodeProps.refuse.type">
<el-radio label="TO_END">直接结束流程</el-radio>
<!-- <el-radio label="TO_BEFORE">驳回到上级审批节点</el-radio>-->
<el-radio label="TO_INITIAL">直接结束流程</el-radio>
<el-radio label="TO_BEFORE">驳回到上级审批节点</el-radio>
<!-- <el-radio label="TO_NODE">驳回到指定节点</el-radio>-->
</el-radio-group>
<div v-if="nodeProps.refuse.type === 'TO_NODE'">
@ -133,19 +133,22 @@
</el-form-item>
</el-form>
<role-picker :title="pickerTitle" multiple ref="rolePicker" :v-model="select" @ok="selectedRole"/>
<role-picker title="请选择人员" multiple ref="rolePicker" :v-model="roleList" @ok="selectedRole"/>
<user-picker title="请选择系统角色" multiple ref="userPicker" :v-model="assignedUser" @ok="selectedUser"/>
</div>
</template>
<script>
import RolePicker from "@/components/common/RolePicker";
import UserPicker from "@/components/common/UserPicker";
import RoleItems from "../RoleItems";
import OrgItems from "../OrgItems";
export default {
name: "ApprovalNodeConfig",
components: {RoleItems, OrgItems, RolePicker},
components: {RoleItems, OrgItems, RolePicker, UserPicker},
props: {
config: {
type: Object,
@ -158,7 +161,6 @@ export default {
return {
showOrgSelect: false,
orgPickerSelected: [],
orgPickerType: "user",
approvalTypes: [
{name: "指定人员", type: "ASSIGN_USER"},
{name: "发起人自选", type: "SELF_SELECT"},
@ -174,27 +176,27 @@ export default {
nodeProps() {
return this.$store.state.selectedNode.props;
},
select() {
return this.config.assignedUser || [];
assignedUser: {
get() {
return this.config.assignedUser || [];
},
set(val) {
this.config.assignedUser = val
}
},
roleList() {
return this.config.roleList || [];
roleList:{
get() {
return this.config.roleList || [];
},
set(val) {
this.config.roleList = val
}
},
forms() {
return this.$store.state.design.formItems.filter(f => {
return f.name === "UserPicker";
});
},
pickerTitle() {
switch (this.orgPickerType) {
case "user":
return "请选择人员";
case "role":
return "请选择系统角色";
default:
return null;
}
},
nodeOptions() {
let values = [];
const excType = ["ROOT", "EMPTY", "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"];
@ -224,34 +226,30 @@ export default {
},
methods: {
selectUser() {
this.orgPickerSelected = this.select;
this.orgPickerType = "user";
this.$refs.orgPicker.show();
this.$refs.userPicker.showUserPicker()
},
selectNoSetUser() {
this.orgPickerSelected = this.config.nobody.assignedUser;
this.orgPickerType = "user";
this.$refs.orgPicker.show();
},
//弹出角色选择器,选择系统角色
selectRole() {
this.orgPickerType = "role";
this.$refs.rolePicker.showRolePicker();
},
selectedRole(select) {
select.forEach(val => {
for (let i = 0; i < this.roleList.length; i++) {
if (this.roleList[i].roleId === val.roleId) {
this.roleList.splice(i, 1);
break;
}
}
this.roleList.push(val);
});
this.roleList = select
},
selectedUser(select) {
let userInfoList = []
for (let val of select) {
let userInfo = {
id: val.id,
name: val.name,
avatar: val.avatar,
}
userInfoList.push(userInfo)
}
this.assignedUser = userInfoList
},
removeOrgItem(index) {
this.select.splice(index, 1);
}
}
};
</script>

46
flowable-engine-web/src/views/common/process/config/CcNodeConfig.vue
View File

@ -1,21 +1,21 @@
<template>
<div>
<el-button size="mini" icon="el-icon-plus" type="primary" @click="selectOrg" round>选择抄送人</el-button>
<el-button size="mini" icon="el-icon-plus" type="primary" @click="selectUser" round>选择抄送人</el-button>
<div class="option">
<el-checkbox label="允许发起人添加抄送人" v-model="config.shouldAdd"></el-checkbox>
<el-checkbox label="允许发起人添加抄送人" v-model="shouldAdd"></el-checkbox>
</div>
<org-items v-model="select"/>
<org-picker multiple ref="orgPicker" :selected="select" @ok="selected"/>
<!-- <org-items v-model="select"/>-->
<avatar-ellipsis :row="3" :user-info="assignedUser"/>
<user-picker title="请选择系统角色" multiple ref="userPicker" :v-model="assignedUser" @ok="selectedUser"/>
</div>
</template>
<script>
import OrgPicker from "@/components/common/Test";
import OrgItems from "../OrgItems";
import UserPicker from "@/components/common/UserPicker";
export default {
name: "CcNodeConfig.vue",
components: {OrgPicker, OrgItems},
components: {UserPicker},
props:{
config:{
type: Object,
@ -25,7 +25,16 @@ export default {
}
},
computed:{
select: {
shouldAdd:{
get(){
return this.config.shouldAdd || false
},
set(val){
console.log("asdjhajdhasjdhasdhasjdad")
this.config.shouldAdd = val
}
},
assignedUser: {
get(){
return this.config.assignedUser || []
},
@ -38,16 +47,21 @@ export default {
return {}
},
methods: {
selectOrg() {
this.$refs.orgPicker.show()
selectUser() {
this.$refs.userPicker.showUserPicker()
},
selected(select) {
console.log(select)
this.select = Object.assign([], select)
selectedUser(select) {
let userInfoList = []
for (let val of select) {
let userInfo = {
id: val.id,
name: val.name,
avatar: val.avatar,
}
userInfoList.push(userInfo)
}
this.assignedUser = userInfoList
},
removeOrgItem(index){
this.select.splice(index, 1)
}
}
}
</script>

94
flowable-engine-web/src/views/common/process/nodes/ApprovalNode.vue
View File

@ -1,8 +1,10 @@
<template>
<node :title="config.name" :show-error="showError" :content="content" :user-info="config.props.assignedUser" :error-info="errorInfo"
<node :title="config.name" :show-error="showError" :content="content"
:show-avatar="config.props.assignedType === 'ASSIGN_USER'" :user-info="assignedUser"
:error-info="errorInfo"
:select-user="selectUser"
@selected="$emit('selected')" @delNode="$emit('delNode')" @insertNode="type => $emit('insertNode', type)"
placeholder="请设置审批人" :header-bgc="headerBgc" header-icon="el-icon-s-check"/>
</template>
<script>
@ -10,8 +12,8 @@ import Node from './Node'
export default {
name: "ApprovalNode",
props:{
config:{
props: {
config: {
type: Object,
default: () => {
return {}
@ -25,120 +27,136 @@ export default {
errorInfo: '',
}
},
computed:{
viewer(){
computed: {
selectUser() {
return {
show: this.config.props.assignedType === 'SELF_SELECT',
multiple: this.config.props.selfSelect.multiple
};
},
assignedUser() {
if (this.config.props.assignedType === 'SELF_SELECT') {
this.config.props.assignedUser = []
}
return this.config.props.assignedUser;
},
viewer() {
return this.$store.state.diagramMode === 'viewer'
},
preview(){
preview() {
return this.$store.state.preview;
},
headerBgc() {
if (this.preview || !this.viewer){
if (this.preview || !this.viewer) {
return '#ff943e'
}else {
} else {
return this.config.props.headerBgc
}
},
content(){
content() {
const config = this.config.props
switch (config.assignedType){
switch (config.assignedType) {
case "ASSIGN_USER":
if (config.assignedUser.length > 0){
if (config.assignedUser.length > 0) {
let texts = []
config.assignedUser.forEach(org => texts.push(org.name))
return String(texts).replaceAll(',', '、')
}else {
} else {
return '请指定审批人'
}
case "SELF":
return '发起人自己'
case "SELF_SELECT":
return config.selfSelect.multiple ? '发起人自选多人':'发起人自选一人'
return config.selfSelect.multiple ? '发起人自选多人' : '发起人自选一人'
case "LEADER_TOP":
return '多级主管依次审批'
case "LEADER":
return config.leader.level > 1 ? '发起人的第 ' + config.leader.level + ' 级主管' : '发起人的直接主管'
case "FORM_USER":
if (!config.formUser || config.formUser === ''){
if (!config.formUser || config.formUser === '') {
return '表单内联系人（未选择）'
}else {
} else {
let text = this.getFormItemById(config.formUser)
if (text && text.title){
if (text && text.title) {
return `表单（${text.title}）内的人员`
}else {
} else {
return '该表单已被移除😥'
}
}
case "ROLE":
if (config.roleList.length > 0){
return config.roleList.map(role=>{
if (config.roleList.length > 0) {
return config.roleList.map(role => {
return role.roleName;
}).join("、")
}else {
} else {
return '指定角色（未设置）'
}
default: return '未知设置项😥'
default:
return '未知设置项😥'
}
}
},
methods: {
getFormItemById(id){
getFormItemById(id) {
return this.$store.state.design.formItems.find(item => item.id === id)
},
//校验数据配置的合法性
validate(err){
validate(err) {
try {
this.showError = !this[`validate_${this.config.props.assignedType}`](err)
if (this.config.props.nobody.handler === 'TO_USER' && this.config.props.nobody.assignedUser.length === 0) {
this.errorInfo = '审批人为空时， 转交给指定人员：【请指定一个具体的人】'
err.push('审批人为空时， 转交给指定人员：【请指定一个具体的人】')
this.showError = true
} else if (this.viewer) {
this.showError = !this.validate_ASSIGN_USER(err)
console.log(this.showError)
}
return this.showError
} catch (e) {
console.log(e)
return true;
}
},
validate_ASSIGN_USER(err){
if(this.config.props.assignedUser.length > 0){
validate_ASSIGN_USER(err) {
if (this.config.props.assignedUser.length > 0) {
return true;
}else {
} else {
this.errorInfo = '请指定审批人员'
err.push(`${this.config.name} 未指定审批人员`)
return false
}
},
validate_SELF_SELECT(err){
validate_SELF_SELECT(err) {
return true;
},
validate_LEADER_TOP(err){
validate_LEADER_TOP(err) {
return true;
},
validate_LEADER(err){
validate_LEADER(err) {
return true;
},
validate_ROLE(err){
if (this.config.props.roleList.length <= 0){
validate_ROLE(err) {
if (this.config.props.roleList.length <= 0) {
this.errorInfo = '请指定负责审批的系统角色'
err.push(`${this.config.name} 未指定审批角色`)
return false
}
return true;
},
validate_SELF(err){
validate_SELF(err) {
return true;
},
validate_FORM_USER(err){
if (this.config.props.formUser === ''){
validate_FORM_USER(err) {
if (this.config.props.formUser === '') {
this.errorInfo = '请指定表单中的人员组件'
err.push(`${this.config.name} 审批人为表单中人员，但未指定`)
return false
}
return true;
},
validate_REFUSE(err){
validate_REFUSE(err) {
return true;
},
}

8
flowable-engine-web/src/views/common/process/nodes/CcNode.vue
View File

@ -1,5 +1,5 @@
<template>
<node :title="config.name" :show-error="showError" :content="content" :error-info="errorInfo" :user-info="config.props.assignedUser"
<node :title="config.name" :show-error="showError" :select-user="selectUser" :content="content" :error-info="errorInfo" :show-avatar="true" :user-info="config.props.assignedUser"
@selected="$emit('selected')" @delNode="$emit('delNode')" @insertNode="type => $emit('insertNode', type)"
placeholder="请设置抄送人" :header-bgc="headerBgc" header-icon="el-icon-s-promotion"/>
</template>
@ -25,6 +25,12 @@ export default {
}
},
computed:{
selectUser(){
return {
show: this.config.props.shouldAdd,
multiple: true
};
},
viewer(){
return this.$store.state.diagramMode === 'viewer'
},

151
flowable-engine-web/src/views/common/process/nodes/Node.vue
View File

@ -1,27 +1,26 @@
<template>
<div :class="{'node': true, 'root': isRoot || !show, 'node-error-state': showError}">
<div v-if="show" @click="$emit('selected')" :class="{'node-body': true, 'error': showError}" >
<div v-if="show" @click="$emit('selected')" :class="{'node-body': true, 'error': showError}">
<div>
<div class="node-body-header" :style="{'background-color': headerBgc}">
<i :class="headerIcon" style="margin-right: 5px" v-if="(headerIcon || '') !== ''"></i>
<ellipsis class="name" hover-tip :content="title"/>
<i class="el-icon-close" v-if="!isRoot && $store.state.diagramMode !== 'viewer'" style="float:right;" @click="$emit('delNode')"></i>
<i class="el-icon-close" v-if="!isRoot && $store.state.diagramMode !== 'viewer'" style="float:right;"
@click="$emit('delNode')"></i>
</div>
<div class="node-body-content">
<i :class="leftIcon" v-if="leftIcon"></i>
<template v-if="$store.state.diagramMode !== 'viewer'">
<span class="placeholder" v-if="(content || '').trim() === ''">{{placeholder}}</span>
<ellipsis :row="3" :content="content" v-else/>
<i class="el-icon-arrow-right"></i>
<template v-if="viewer && selectUser.show">
<el-button type="primary" icon="el-icon-plus" circle @click="$refs.userPicker.showUserPicker()"/>
<avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
</template>
<template v-else-if="showAvatar">
<span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
<avatar-ellipsis :row="3" :user-info="userInfo" v-else/>
</template>
<template v-else>
<template v-if="userInfo.length > 0">
<avatar-ellipsis :row="3" :user-info="userInfo"/>
</template>
<template v-else>
<span class="placeholder" v-if="(content || '').trim() === ''">{{placeholder}}</span>
<ellipsis :row="3" :content="content" v-else/>
</template>
<span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
<ellipsis :row="3" :content="content" v-else/>
</template>
</div>
<div class="node-error" v-if="showError">
@ -32,21 +31,29 @@
</div>
</div>
<div class="node-footer">
<div v-if="merge" class="branch-merge"><img data-v-1e7b1da5="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABXlJREFUeF7tmm2IVGUUx3/nLkQUqxmkpAVhSPUllZX8EEGhvVgZQWCU6wcpsqi2mXtnoaBwoqLCufeO9oJYUJQiFZWlZPQCfYiIXkylstTyS1oWWeYWCe6cuLsz7t3r3Ll3du6907oz35bnPM9z/r895zznmWeECf6RCa6fDoBOBExwAp0UmOAB0CmCnRTopECbCZi2nivK1CMD7FpXlH+ydqctKZBz9QyjwkqFG4HzfKK/0gpvl/ulmBWIzAHkVmlRDFY2EihwwLFkRhYQxgzAtHW2CpcBc4CpOsg26eK7yVPYVFwu/9ZzPufq2VLhQBxhAk85lvSF2Y5l/3prjQlAvqR3IjwJTKqz6DeGssQuyLfBsbyjz6PcFgeAZyOwzLFk/QnrjHH/RACYtj6ncHuUCDWYXs7Lz367XEn3inB+1NzauMLGsiW3+u1b2b9lAH22LuiCD2IJED5yTbmiZpt3dAbKT7Hmjhjtdi25oPZnK/uH7dtUCpi2vqVwQ1wRWuHhWkW3StpTEb6IO3fIThhwTemuzWll/0QA5G39FTgrtghhs2vKELA7inra6d38HXvusOEnriWXHo+iFvZvGUDfap3VdYzdzQgIHmd5W7cBc2Ovoax1C3KXZ5/E/i3VgCQciNMD+J1Ug55yXjxo7QfgOdFKCvjyeL/C9MgoEBa5przrt0ti/+C+mRVB/8amrWsU7m2Ql/c5lqwJjre9CDZ1DMFnriXzw0SatvZW4FqBW6o2vwGvCGxyLPmw3rym9g8cwy0XQV8Ix2qEgH0C1ziWNCyceVu1uvZrriVLGqVGsainHO7mRyDynlCvEWupCI7Kxcat6BFg+OwW9ohyfSMIcQF44v/sZovAlRH1I7QVTwyAt1Cjy8hfh9hYvepGQogDoI74HYbSXzHwusTYl7FEAURVcdPWN+NAiAJQTzzCda4p+6N8iDPe1CkQZ8FAtY+E0AhA2uKHszTlT1QkhAHIQnwmAKr1IjQS6gHISnxmABpBCALIUnymAMIgKHxf6wMmH6E3cNTtSLLgZXoKNOgAR6UDyqyq7esKk3znfOriM48AXzc5AmGE1EFgWvXPTMS3DcAJ6TA6XDIT31YAoRCEc5JqcuKc8Kn3AVFO+E4BryvJVHzbI8BzwAdgi2vJ4ihgSY//nyIg8jqctPi2RYBp61wV5qsyR2BFVdhBhBe0wtdisNU15VAagoNrZh4BOVsfFcVCODVUoLBn6E2hIBvShpApgLyt3nvhRXFFCWxwLOmNaz8Wu8wA5G31ntQWNOukwD2OJc80Oy+ufSYAciVdJsJLcZ0K2nV1MbuUk51jnd9oXuoACmW9eHCQj49/T+j3RtiJslPgFxXmoVxe11nhPdeUq8clANPWPoXVQef9D6e1saEHVINHUBYF7Q1lnl2QL5OGkHoE5G19GRhVyBQ+L1tyST0xoa/Iygq3IOvGI4BdwIWjHBeecE15IExM3tYfgJmBOetcU2o9Q2IcsoiAw8Gf0qhyU7kgb4QCcPRTlNGvSspmtzD81J7kJ30AJX0fYeHo2seLjiXLG0TA78CZ/nGFB8uWPJakeG+t9AE4+jjK/XGLWtgTusBix5It4w5ArqRLRTjhl14IW40KD/kre66ki0R4p57IrgozS/2yb9wByDvqhbKX07Xv/oIavMfOP6pFb0pdgcqrbkFuTlp8JingbRIaBfEUHUOYltbtMPUaUNNo2rpeYWk8zSNWqvSmeSvMDIAnybT1boWnY0I4aigL7YJ4bXRqn0wBeCqG7gYVVqFcFapKWXt0gP5nizKQmvLqwpkDqAkaanmhB4MelOkI27XCDjHY7pqyN23htfXbBiArgVH7dABEETrZxzsRcLL/h6P0/Qc1qphfvB2K3wAAAABJRU5ErkJggg==" alt=""></div>
<div v-if="merge" class="branch-merge">
<img data-v-1e7b1da5=""
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABXlJREFUeF7tmm2IVGUUx3/nLkQUqxmkpAVhSPUllZX8EEGhvVgZQWCU6wcpsqi2mXtnoaBwoqLCufeO9oJYUJQiFZWlZPQCfYiIXkylstTyS1oWWeYWCe6cuLsz7t3r3Ll3du6907oz35bnPM9z/r895zznmWeECf6RCa6fDoBOBExwAp0UmOAB0CmCnRTopECbCZi2nivK1CMD7FpXlH+ydqctKZBz9QyjwkqFG4HzfKK/0gpvl/ulmBWIzAHkVmlRDFY2EihwwLFkRhYQxgzAtHW2CpcBc4CpOsg26eK7yVPYVFwu/9ZzPufq2VLhQBxhAk85lvSF2Y5l/3prjQlAvqR3IjwJTKqz6DeGssQuyLfBsbyjz6PcFgeAZyOwzLFk/QnrjHH/RACYtj6ncHuUCDWYXs7Lz367XEn3inB+1NzauMLGsiW3+u1b2b9lAH22LuiCD2IJED5yTbmiZpt3dAbKT7Hmjhjtdi25oPZnK/uH7dtUCpi2vqVwQ1wRWuHhWkW3StpTEb6IO3fIThhwTemuzWll/0QA5G39FTgrtghhs2vKELA7inra6d38HXvusOEnriWXHo+iFvZvGUDfap3VdYzdzQgIHmd5W7cBc2Ovoax1C3KXZ5/E/i3VgCQciNMD+J1Ug55yXjxo7QfgOdFKCvjyeL/C9MgoEBa5przrt0ti/+C+mRVB/8amrWsU7m2Ql/c5lqwJjre9CDZ1DMFnriXzw0SatvZW4FqBW6o2vwGvCGxyLPmw3rym9g8cwy0XQV8Ix2qEgH0C1ziWNCyceVu1uvZrriVLGqVGsainHO7mRyDynlCvEWupCI7Kxcat6BFg+OwW9ohyfSMIcQF44v/sZovAlRH1I7QVTwyAt1Cjy8hfh9hYvepGQogDoI74HYbSXzHwusTYl7FEAURVcdPWN+NAiAJQTzzCda4p+6N8iDPe1CkQZ8FAtY+E0AhA2uKHszTlT1QkhAHIQnwmAKr1IjQS6gHISnxmABpBCALIUnymAMIgKHxf6wMmH6E3cNTtSLLgZXoKNOgAR6UDyqyq7esKk3znfOriM48AXzc5AmGE1EFgWvXPTMS3DcAJ6TA6XDIT31YAoRCEc5JqcuKc8Kn3AVFO+E4BryvJVHzbI8BzwAdgi2vJ4ihgSY//nyIg8jqctPi2RYBp61wV5qsyR2BFVdhBhBe0wtdisNU15VAagoNrZh4BOVsfFcVCODVUoLBn6E2hIBvShpApgLyt3nvhRXFFCWxwLOmNaz8Wu8wA5G31ntQWNOukwD2OJc80Oy+ufSYAciVdJsJLcZ0K2nV1MbuUk51jnd9oXuoACmW9eHCQj49/T+j3RtiJslPgFxXmoVxe11nhPdeUq8clANPWPoXVQef9D6e1saEHVINHUBYF7Q1lnl2QL5OGkHoE5G19GRhVyBQ+L1tyST0xoa/Iygq3IOvGI4BdwIWjHBeecE15IExM3tYfgJmBOetcU2o9Q2IcsoiAw8Gf0qhyU7kgb4QCcPRTlNGvSspmtzD81J7kJ30AJX0fYeHo2seLjiXLG0TA78CZ/nGFB8uWPJakeG+t9AE4+jjK/XGLWtgTusBix5It4w5ArqRLRTjhl14IW40KD/kre66ki0R4p57IrgozS/2yb9wByDvqhbKX07Xv/oIavMfOP6pFb0pdgcqrbkFuTlp8JingbRIaBfEUHUOYltbtMPUaUNNo2rpeYWk8zSNWqvSmeSvMDIAnybT1boWnY0I4aigL7YJ4bXRqn0wBeCqG7gYVVqFcFapKWXt0gP5nizKQmvLqwpkDqAkaanmhB4MelOkI27XCDjHY7pqyN23htfXbBiArgVH7dABEETrZxzsRcLL/h6P0/Qc1qphfvB2K3wAAAABJRU5ErkJggg=="
alt=""></div>
<div class="btn">
<insert-button v-show="$store.state.diagramMode !== 'viewer'" @insertNode="type => $emit('insertNode', type)"></insert-button>
<insert-button v-show="$store.state.diagramMode !== 'viewer'"
@insertNode="type => $emit('insertNode', type)"></insert-button>
</div>
</div>
<user-picker v-if="selectUser.show" title="请选择系统角色" :multiple="selectUser.multiple" ref="userPicker"
:v-model="userInfo"
@ok="selectedUser"/>
</div>
</template>
<script>
import UserPicker from "@/components/common/UserPicker";
import InsertButton from '@/views/common/InsertButton.vue'
export default {
name: "Node",
components: {InsertButton},
props:{
components: {InsertButton, UserPicker},
props: {
//是否为根节点
isRoot: {
type: Boolean,
@ -70,13 +77,29 @@ export default {
//节点内容区域文字
userInfo: {
type: Array,
default: []
default(){
return []
}
},
title:{
//节点内容区域文字
showAvatar: {
type: Boolean,
default: false
},
selectUser: {
type: Object,
default() {
return {
show: false,
multiple: false,
}
}
},
title: {
type: String,
default: "标题"
},
placeholder:{
placeholder: {
type: String,
default: "请设置"
},
@ -86,49 +109,71 @@ export default {
default: undefined
},
//头部图标
headerIcon:{
headerIcon: {
type: String,
default: ''
},
//头部背景色
headerBgc:{
headerBgc: {
type: String,
default: '#576a95'
},
//是否显示错误状态
showError:{
showError: {
type: Boolean,
default: false
},
errorInfo:{
errorInfo: {
type: String,
default: '无信息'
},
},
data() {
return {}
return{}
},
methods: {}
computed: {
viewer() {
return this.$store.state.diagramMode === 'viewer'
},
},
methods: {
selectedUser(select) {
let userInfoList = []
for (let val of select) {
let userInfo = {
id: val.id,
name: val.name,
avatar: val.avatar,
}
userInfoList.push(userInfo)
}
this.userInfo = userInfoList
this.$store.state.selectUserMap.set(this.$store.state.selectedNode.id,userInfoList)
},
}
}
</script>
<style lang="less" scoped>
.root{
&:before{
.root {
&:before {
display: none !important;
}
}
.node-error-state{
.node-body{
.node-error-state {
.node-body {
box-shadow: 0px 0px 5px 0px #F56C6C !important;
}
}
.node{
.node {
padding: 0 50px;
width: 220px;
position: relative;
&:before{
&:before {
content: '';
position: absolute;
top: -12px;
@ -141,15 +186,18 @@ export default {
border-color: #CACACA transparent transparent;
background: #F5F5F7;
}
.node-body{
.node-body {
cursor: pointer;
max-height: 120px;
position: relative;
border-radius: 5px;
background-color: white;
box-shadow: 0px 0px 5px 0px #d8d8d8;
&:hover{
&:hover {
box-shadow: 0px 0px 3px 0px @theme-primary;
.node-body-header {
.el-icon-close {
display: inline;
@ -157,36 +205,43 @@ export default {
}
}
}
.node-body-header{
.node-body-header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 5px 15px;
color: white;
font-size: xx-small;
.el-icon-close{
.el-icon-close {
display: none;
}
.name{
.name {
height: 14px;
width: 150px;
display: inline-block
}
}
.node-body-content{
.node-body-content {
padding: 18px;
color: #656363;
font-size: 14px;
i{
i {
position: absolute;
top: 55%;
right: 5px;
font-size: medium;
}
.placeholder{
.placeholder {
color: #8c8c8c;
}
}
.node-error{
.node-error {
position: absolute;
right: -40px;
top: 20px;
@ -195,9 +250,10 @@ export default {
}
}
.node-footer{
.node-footer {
position: relative;
.branch-merge{
.branch-merge {
font-size: 12px;
display: flex;
width: 38px;
@ -210,17 +266,20 @@ export default {
flex-direction: column;
box-shadow: 0 0 5px 0 #d8d8d8;
}
.btn{
.btn {
width: 100%;
display: flex;
padding: 20px 0 32px;
justify-content: center;
z-index: 10;
}
/deep/ .el-button{
/deep/ .el-button {
height: 32px;
}
&::before{
&::before {
content: "";
position: absolute;
top: 0;

2
flowable-engine-web/src/views/common/process/nodes/RootNode.vue
View File

@ -1,5 +1,5 @@
<template>
<node title="发起人" :is-root="true" :content="content" :user-info="config.props.assignedUser"
<node title="发起人" :is-root="true" :content="content" show-avatar :user-info="config.props.assignedUser"
@selected="$emit('selected')" @insertNode="type => $emit('insertNode', type)"
placeholder="所有人" :header-bgc="config.props.headerBgc" header-icon="el-icon-user-solid"/>
</template>

3
flowable-engine-web/src/views/workspace/InitiateProcess.vue
View File

@ -6,7 +6,7 @@
</div>
<div style="display: flex;justify-content: center;flex-direction: column;min-width: 1036px;">
<span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
<process-diagram-viewer/>
<process-diagram-viewer ref="processDiagramViewer"/>
<!--渲染流程执行过程-->
<el-timeline :reverse="false">
<!-- <el-timeline-item v-for="(activity, index) in activities" :key="index">-->
@ -75,6 +75,7 @@ export default {
},
validate(call) {
this.$refs.initiateForm.validate(call);
this.$refs.processDiagramViewer.validate(call);
}
}
};

3
flowable-engine-web/src/views/workspace/WorkSpace.vue
View File

@ -122,7 +122,8 @@ export default {
let processInstance = this.$refs.processInstance;
let paramsData = {
processDefinitionId: this.selectForm.processDefinitionId,
formData: JSON.stringify(processInstance.formData)
formData: JSON.stringify(processInstance.formData),
selectUserMap: this.$store.state.selectUserMap
}
processInstance.validate(valid => {
if (valid) {