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

dengjie : 修改人员选择bug及部分样式

This commit is contained in:
邓洁 2023-03-21 22:59:31 +08:00
parent a84bbbeedb
commit 2c8b9978e8
5 changed files with 73 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

76
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) {
@ -134,14 +138,13 @@ export default {
getUserTree(this.radio, this.chooseId).then(res => { getUserTree(this.radio, this.chooseId).then(res => {
console.log('人员', res.data) console.log('人员', res.data)
// 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,25 +174,31 @@ 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)
if (item.type !== 0) { //不重复发送请求getList()
this.chooseId = item.id if (node.expanded === false) {
this.getList() if (item.type !== 0) {
return this.chooseId = item.id
} this.getList()
if (this.multiple) { return
//不添加重复的数据到右边 }
for (let i = 0; i < this.selectList.length; i++) { }
if (this.selectList[i].id === item.id) { //仅选择用户
this.selectList.splice(i, 1); if (item.avatar !== null) {
break; if (this.multiple) {
} //不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].id === item.id) {
this.selectList.splice(i, 1);
break;
}
}
this.selectList.push(item);
} else {
this.selectList = [item];
} }
this.selectList.push(item);
} else {
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__content { .el-tree-node {
height: 42px; .el-tree-node__content {
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 {

14
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"
@ -241,10 +241,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>