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

Compare commits

base: clay:76726e75bad75c06a46c608c5954730dd10e4b2e
Branches Tags
clay:master
clay:pro
clay:DJ
clay:chatGPT
clay:master-back
clay:clay
...
compare: clay:dc8bebf6f124be1b8f08d00131835ebf3b84f0a1
Branches Tags
clay:pro
clay:master
clay:DJ
clay:chatGPT
clay:master-back
clay:clay

4 Commits
76726e75ba ... dc8bebf6f1

Author SHA1 Message Date
clay dc8bebf6f1 Merge pull request 'clay : 触发器节点和用户边界事件处理完成' (#36) from master into pro
continuous-integration/drone/push Build is passing Details 
Reviewed-on: http://git.hchyun.com/clay/workflow-engine-web/pulls/36
 2023-03-21 15:00:05 +00:00
邓洁 08fe77cf2f Merge remote-tracking branch 'origin/master' 2023-03-21 22:59:39 +08:00
邓洁 2c8b9978e8 dengjie : 修改人员选择bug及部分样式 2023-03-21 22:59:31 +08:00
clay 92e66c2f45 clay : 节点渲染细节处理 2023-03-21 22:56:57 +08:00
5 changed files with 104 additions and 65 deletions
Show Stats Expand all files Collapse all files

16
flowable-engine-web/src/components/common/AvatarEllipsis.vue
View File

@ -3,7 +3,7 @@
:title="hoverTip ? content: null" :title="hoverTip ? content: null"
:style="{'--row':row}"> :style="{'--row':row}">
<slot name="pre"></slot> <slot name="pre"></slot>
<div style="display: flex;"> <div style="display: flex;flex-wrap: wrap;">
<div v-for="(user,index) in userInfo" :key="index" class="avatar_name"> <div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
<el-avatar size="large" <el-avatar size="large"
:src="user.avatar"></el-avatar> :src="user.avatar"></el-avatar>
@ -20,6 +20,7 @@
<span class="item_name">{{ user.name }}</span> <span class="item_name">{{ user.name }}</span>
</el-tooltip> </el-tooltip>
</div> </div>
<!-- <el-button type="primary" icon="el-icon-plus" circle @click="$refs.userPicker.showUserPicker()"/>-->
</div> </div>
</div> </div>
</template> </template>
@ -65,7 +66,7 @@ export default {
this.$set(user, "color", "#0bbd87") this.$set(user, "color", "#0bbd87")
} }
//审批通过 //审批通过
if (state === 'AGREE') { if (state === 'AGREE' || state === 'AUTO_PASS') {
this.$set(user, "icon", "el-icon-check") this.$set(user, "icon", "el-icon-check")
this.$set(user, "color", "#0bbd87") this.$set(user, "color", "#0bbd87")
} }
@ -75,7 +76,7 @@ export default {
this.$set(user, "color", "#f78f5f") this.$set(user, "color", "#f78f5f")
} }
//拒绝后评论 //拒绝后评论
if (state === 'REFUSE') { if (state === 'REFUSE' || state === 'AUTO_REFUSE') {
this.$set(user, "icon", "el-icon-close") this.$set(user, "icon", "el-icon-close")
this.$set(user, "color", "#f56c6c") this.$set(user, "color", "#f56c6c")
} }
@ -96,12 +97,19 @@ export default {
align-items: center; align-items: center;
margin-right: 5px; margin-right: 5px;
/*width: 45px;*/ /*width: 45px;*/
position: relative;
}
.el-timeline-item__node {
position: absolute;
bottom: 20px;
right: 1px;
} }
.item_name{ .item_name{
width: 45px; width: 45px;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden overflow: hidden;
padding-top: 3px;
} }
</style> </style>

30
flowable-engine-web/src/components/common/UserPicker.vue
View File

@ -17,11 +17,12 @@
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/> <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
<el-scrollbar style="height:317px"> <el-scrollbar style="height:317px">
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value" <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
:default-expanded-keys="expandedKeys" :default-expanded-keys="expandedKeys" lazy accordion
@node-click="handleChange" @node-click="handleChange"
> >
<!-- :style="data.avatar!==null ? {'height':'50px'}:''"-->
<div class="tree-node" slot-scope="{ node,data }"> <div class="tree-node" slot-scope="{ node,data }">
<div v-if="data.type === 0" style="display: flex;align-items: center"> <div v-if="data.type === 0" style="display: flex;align-items: center;">
<el-avatar :src="data.avatar"></el-avatar> <el-avatar :src="data.avatar"></el-avatar>
{{ node.label }} {{ node.label }}
</div> </div>
@ -104,8 +105,11 @@ export default {
value: 'value', value: 'value',
label: 'name', label: 'name',
children: 'children', children: 'children',
isLeaf: function (data, node) {
return !!data.avatar
}
}
} }
};
}, },
watch: { watch: {
filterText(val) { filterText(val) {
@ -136,8 +140,7 @@ export default {
// if (res.data) { // if (res.data) {
if (this.selectItem.type === -1 || this.selectItem.type === -2) { if (this.selectItem.type === -1 || this.selectItem.type === -2) {
this.dataList = res.data this.dataList = res.data
} } else if (this.selectItem.type === 1) {
else if (this.selectItem.type === 1) {
this.selectItem.children = res.data this.selectItem.children = res.data
} else if (this.selectItem.type === 2) { } else if (this.selectItem.type === 2) {
this.selectItem.children = res.data this.selectItem.children = res.data
@ -171,14 +174,19 @@ export default {
}, },
//渲染子节点用户或部门及用户数据 //渲染子节点用户或部门及用户数据
handleChange(item, check) { handleChange(item, data, node) {
this.selectItem = item this.selectItem = item
this.expandedKeys.push(item.value) this.expandedKeys.push(item.value)
//不重复发送请求getList()
if (node.expanded === false) {
if (item.type !== 0) { if (item.type !== 0) {
this.chooseId = item.id this.chooseId = item.id
this.getList() this.getList()
return return
} }
}
//仅选择用户
if (item.avatar !== null) {
if (this.multiple) { if (this.multiple) {
//不添加重复的数据到右边 //不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) { for (let i = 0; i < this.selectList.length; i++) {
@ -191,6 +199,7 @@ export default {
} else { } else {
this.selectList = [item]; this.selectList = [item];
} }
}
// this._value = this.selectList // this._value = this.selectList
}, },
//右侧的× //右侧的×
@ -227,12 +236,21 @@ export default {
@containWidth: 278px; @containWidth: 278px;
/deep/ .el-tree-node { /deep/ .el-tree-node {
.el-tree-node__children { .el-tree-node__children {
.el-tree-node {
.el-tree-node__content { .el-tree-node__content {
height: 42px; height: 42px;
} }
} }
} }
}
///deep/.el-tree-node__children{
// .is-current{
// .el-tree-node__content{
// height: 42px;
// }
// }
//}
.tree-node { .tree-node {
div { div {
.el-avatar { .el-avatar {

48
flowable-engine-web/src/views/common/operation/OperationRender.vue
View File

@ -10,10 +10,10 @@
<el-card> <el-card>
<div style="display: flex;"> <div style="display: flex;">
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name"> <div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
<el-avatar size="large" <el-avatar size="large" :src="user.avatar"></el-avatar>
:src="user.avatar"></el-avatar> <!--v-if="!$slots.dot && operation.userInfo.length > 1" -->
<div v-if="!$slots.dot && operation.userInfo.length > 1" <div v-if="user.icon"
class="el-timeline-item__node avatar_icon" :style="{ class="el-timeline-item__node" :style="{
backgroundColor: user.color backgroundColor: user.color
}"> }">
<i v-if="user.icon" <i v-if="user.icon"
@ -30,12 +30,12 @@
<div style="font-size: 14px; font-weight: bold;">{{ operation.remark }}</div> <div style="font-size: 14px; font-weight: bold;">{{ operation.remark }}</div>
</div> </div>
</div> </div>
<template v-if="operation.operation === 'comment' || operation.operation === 'refuse'"> <template v-if="operation.comment">
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;"> <div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
<div> <div>
{{ operation.comment.context }} {{ operation.comment.context }}
</div> </div>
<div style="margin-top: 10px;" v-if="operation.comment.attachments.length > 0"> <div style="margin-top: 10px;" v-if="operation.comment.attachments && operation.comment.attachments.length > 0">
<template v-for="(item) in getAttachmentList(operation.comment.attachments,true)"> <template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
<el-image <el-image
style="width: 100px; height: 100px" style="width: 100px; height: 100px"
@ -125,11 +125,13 @@ export default {
for (let i = 0;i<this.operationList.length;i++) { for (let i = 0;i<this.operationList.length;i++) {
let operationNew = this.initOperationFun(this.operationList[i]) let operationNew = this.initOperationFun(this.operationList[i])
let userList = [] let userList = []
if (operationNew.userInfo){
for (let user of operationNew.userInfo) { for (let user of operationNew.userInfo) {
let userNew = this.initUser(user) let userNew = this.initUser(user)
userList.push(userNew) userList.push(userNew)
} }
operationNew.userInfo = userList operationNew.userInfo = userList
}
// operationListNew.push(operationNew) // operationListNew.push(operationNew)
// this.operationList.push(operationNew) // this.operationList.push(operationNew)
this.operationList[i] = operationNew this.operationList[i] = operationNew
@ -138,11 +140,14 @@ export default {
//获取到对应附件的地址 //获取到对应附件的地址
getAttachmentList(attachments, image) { getAttachmentList(attachments, image) {
let result = []; let result = [];
console.log(attachments)
if (attachments){
for (let attachment of attachments) { for (let attachment of attachments) {
if (attachment.isImage === image) { if (attachment.isImage === image) {
result.push(attachment) result.push(attachment)
} }
} }
}
return result; return result;
}, },
initUser(user) { initUser(user) {
@ -153,7 +158,7 @@ export default {
this.$set(user, "color", "#0bbd87") this.$set(user, "color", "#0bbd87")
} }
//审批通过 //审批通过
if (state === 'AGREE') { if (state === 'AGREE' || state === 'AUTO_PASS') {
this.$set(user, "icon", "el-icon-check") this.$set(user, "icon", "el-icon-check")
this.$set(user, "color", "#0bbd87") this.$set(user, "color", "#0bbd87")
} }
@ -180,13 +185,12 @@ export default {
if (state === 'CREATE') { if (state === 'CREATE') {
this.$set(operation, "icon", "el-icon-check") this.$set(operation, "icon", "el-icon-check")
this.$set(operation, "color", "#0bbd87") this.$set(operation, "color", "#0bbd87")
this.$set(operation, "remark", operation.userInfo.name)
} }
//审批通过 //审批通过
if (state === 'AGREE') { if (state === 'AGREE' || state === 'AUTO_PASS') {
this.$set(operation, "icon", "el-icon-check") this.$set(operation, "icon", "el-icon-check")
this.$set(operation, "color", "#0bbd87") this.$set(operation, "color", "#0bbd87")
this.$set(operation, "remark", operation.userInfo.name + ' (已同意)') this.$set(operation, "remark", ' (已同意)')
} }
if (state === 'PASS'){ if (state === 'PASS'){
this.$set(operation, "icon", "el-icon-more") this.$set(operation, "icon", "el-icon-more")
@ -196,31 +200,37 @@ export default {
if (state === 'RUNNING') { if (state === 'RUNNING') {
this.$set(operation, "icon", "el-icon-loading") this.$set(operation, "icon", "el-icon-loading")
this.$set(operation, "color", "#f78f5f") this.$set(operation, "color", "#f78f5f")
this.$set(operation, "remark", operation.userInfo.name + ' (处理中)') this.$set(operation, "remark",' (处理中)')
}
//回退
if (state === 'ROLLBACK') {
this.$set(operation, "icon", "el-icon-refresh")
this.$set(operation, "color", "#f78f5f")
this.$set(operation, "remark", ' (回退成功)')
} }
//抄送 //抄送
if (type === 'CC') { if (type === 'CC') {
this.$set(operation, "icon", "el-icon-s-promotion") this.$set(operation, "icon", "el-icon-s-promotion")
this.$set(operation, "color", "#3395f8") this.$set(operation, "color", "#3395f8")
this.$set(operation, "remark", operation.userInfo.name + ' (抄送成功)') this.$set(operation, "remark", ' (抄送成功)')
} }
//评论 //评论
if (state === 'COMMENT') { if (state === 'COMMENT') {
this.$set(operation, "icon", "el-icon-chat-dot-round") this.$set(operation, "icon", "el-icon-chat-dot-round")
this.$set(operation, "color", "#0bbd87") this.$set(operation, "color", "#0bbd87")
this.$set(operation, "remark", operation.userInfo.name + ' (添加了评论)') this.$set(operation, "remark", ' (添加了评论)')
} }
//拒绝后评论 //拒绝后评论
if (state === 'REFUSE' && type === 'COMMENT') { if (state === 'REFUSE' && type === 'COMMENT') {
this.$set(operation, "icon", "el-icon-chat-dot-round") this.$set(operation, "icon", "el-icon-chat-dot-round")
this.$set(operation, "color", "#f56c6c") this.$set(operation, "color", "#f56c6c")
this.$set(operation, "remark", operation.userInfo.name + ' (填写拒绝理由)') this.$set(operation, "remark", ' (填写拒绝理由)')
} }
//拒绝操作 //拒绝操作
if (state === 'REFUSE' && type === 'OPINION') { if ((state === 'REFUSE' || state === 'AUTO_REFUSE')&& type === 'OPINION') {
this.$set(operation, "icon", "el-icon-close") this.$set(operation, "icon", "el-icon-close")
this.$set(operation, "color", "#f56c6c") this.$set(operation, "color", "#f56c6c")
this.$set(operation, "remark", operation.userInfo.name + ' (拒绝)') this.$set(operation, "remark", ' (拒绝)')
} }
return operation; return operation;
}, },
@ -241,10 +251,10 @@ export default {
position: relative; position: relative;
margin-right: 5px; margin-right: 5px;
} }
.avatar_icon{ .el-timeline-item__node{
position: absolute; position: absolute;
bottom: 16px; bottom: 20px;
right: -2px; right: 1px;
} }
.username{ .username{
width: 45px; width: 45px;

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

@ -200,7 +200,7 @@ export default {
.node-body { .node-body {
cursor: pointer; cursor: pointer;
max-height: 120px; min-height: 63px;
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
background-color: white; background-color: white;
@ -236,17 +236,20 @@ export default {
} }
.node-body-content { .node-body-content {
padding: 18px; padding: 10px;
color: #656363; color: #656363;
font-size: 14px; font-size: 14px;
.avatar_button { .avatar_button {
//float: left;
display: flex; display: flex;
//flex: 1;
flex-wrap: wrap;
button { button {
margin-top: 3px;
height: 40px; height: 40px;
flex-shrink: 0; //flex-shrink: 0;
flex-grow: 0; //flex-grow: 0;
} }
} }

2
flowable-engine-web/src/views/workspace/InitiatedInstance.vue
View File

@ -56,7 +56,7 @@
</div> </div>
<div class="top_right"> <div class="top_right">
<div style="margin-bottom: 12px"> <div style="margin-bottom: 12px">
<span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span> <span style="font-size: 15px;margin-right: 15px">{{ selectProcessInstance.deploymentName }}</span>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag> <el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag> <el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag> <el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>