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)) {

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

@ -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;

70
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() {
assignedUser: {
get() {
return this.config.assignedUser || [];
},
roleList() {
set(val) {
this.config.assignedUser = val
}
},
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
},
removeOrgItem(index) {
this.select.splice(index, 1);
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
},
}
};
</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)
},
removeOrgItem(index){
this.select.splice(index, 1)
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
},
}
}
</script>

28
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>
@ -26,6 +28,18 @@ export default {
}
},
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'
},
@ -77,9 +91,11 @@ export default {
} else {
return '指定角色（未设置）'
}
default: return '未知设置项😥'
default:
return '未知设置项😥'
}
}
},
methods: {
getFormItemById(id) {
@ -89,15 +105,17 @@ export default {
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;
}
},

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'
},

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

@ -5,24 +5,23 @@
<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>
<template v-if="userInfo.length > 0">
<avatar-ellipsis :row="3" :user-info="userInfo"/>
<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>
<span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
<ellipsis :row="3" :content="content" v-else/>
</template>
</template>
</div>
<div class="node-error" v-if="showError">
<el-tooltip effect="dark" :content="errorInfo" placement="top-start">
@ -32,20 +31,28 @@
</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},
components: {InsertButton, UserPicker},
props: {
//是否为根节点
isRoot: {
@ -70,7 +77,23 @@ export default {
//节点内容区域文字
userInfo: {
type: Array,
default: []
default(){
return []
}
},
//节点内容区域文字
showAvatar: {
type: Boolean,
default: false
},
selectUser: {
type: Object,
default() {
return {
show: false,
multiple: false,
}
}
},
title: {
type: String,
@ -108,7 +131,26 @@ export default {
data() {
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>
@ -119,15 +161,18 @@ export default {
display: none !important;
}
}
.node-error-state {
.node-body {
box-shadow: 0px 0px 5px 0px #F56C6C !important;
}
}
.node {
padding: 0 50px;
width: 220px;
position: relative;
&:before {
content: '';
position: absolute;
@ -141,6 +186,7 @@ export default {
border-color: #CACACA transparent transparent;
background: #F5F5F7;
}
.node-body {
cursor: pointer;
max-height: 120px;
@ -148,8 +194,10 @@ export default {
border-radius: 5px;
background-color: white;
box-shadow: 0px 0px 5px 0px #d8d8d8;
&:hover {
box-shadow: 0px 0px 3px 0px @theme-primary;
.node-body-header {
.el-icon-close {
display: inline;
@ -157,35 +205,42 @@ export default {
}
}
}
.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 {
display: none;
}
.name {
height: 14px;
width: 150px;
display: inline-block
}
}
.node-body-content {
padding: 18px;
color: #656363;
font-size: 14px;
i {
position: absolute;
top: 55%;
right: 5px;
font-size: medium;
}
.placeholder {
color: #8c8c8c;
}
}
.node-error {
position: absolute;
right: -40px;
@ -197,6 +252,7 @@ export default {
.node-footer {
position: relative;
.branch-merge {
font-size: 12px;
display: flex;
@ -210,6 +266,7 @@ export default {
flex-direction: column;
box-shadow: 0 0 5px 0 #d8d8d8;
}
.btn {
width: 100%;
display: flex;
@ -217,9 +274,11 @@ export default {
justify-content: center;
z-index: 10;
}
/deep/ .el-button {
height: 32px;
}
&::before {
content: "";
position: absolute;

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) {