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

View File

@ -3,7 +3,7 @@
:title="hoverTip ? content: null"
:style="{'--row':row}">
<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">
<el-avatar size="large"
:src="user.avatar"></el-avatar>
@ -20,6 +20,7 @@
<span class="item_name">{{ user.name }}</span>
</el-tooltip>
</div>
<!-- <el-button type="primary" icon="el-icon-plus" circle @click="$refs.userPicker.showUserPicker()"/>-->
</div>
</div>
</template>
@ -96,12 +97,19 @@ export default {
align-items: center;
margin-right: 5px;
/*width: 45px;*/
position: relative;
}
.el-timeline-item__node {
position: absolute;
bottom: 20px;
right: 1px;
}
.item_name{
width: 45px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
overflow: hidden;
padding-top: 3px;
}
</style>

View File

@ -17,11 +17,12 @@
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
<el-scrollbar style="height:317px">
<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"
>
<!-- :style="data.avatar!==null ? {'height':'50px'}:''"-->
<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>
{{ node.label }}
</div>
@ -104,8 +105,11 @@ export default {
value: 'value',
label: 'name',
children: 'children',
isLeaf: function (data, node) {
return !!data.avatar
}
}
};
}
},
watch: {
filterText(val) {
@ -134,14 +138,13 @@ export default {
getUserTree(this.radio, this.chooseId).then(res => {
console.log('人员', res.data)
// if (res.data) {
if (this.selectItem.type === -1 || this.selectItem.type === -2) {
this.dataList = res.data
}
else if (this.selectItem.type === 1) {
this.selectItem.children = res.data
} else if (this.selectItem.type === 2) {
this.selectItem.children = res.data
}
if (this.selectItem.type === -1 || this.selectItem.type === -2) {
this.dataList = res.data
} else if (this.selectItem.type === 1) {
this.selectItem.children = res.data
} else if (this.selectItem.type === 2) {
this.selectItem.children = res.data
}
// }
});
},
@ -171,25 +174,31 @@ export default {
},
//
handleChange(item, check) {
handleChange(item, data, node) {
this.selectItem = item
this.expandedKeys.push(item.value)
if (item.type !== 0) {
this.chooseId = item.id
this.getList()
return
}
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;
}
//getList()
if (node.expanded === false) {
if (item.type !== 0) {
this.chooseId = item.id
this.getList()
return
}
}
//
if (item.avatar !== null) {
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
},
@ -227,12 +236,21 @@ export default {
@containWidth: 278px;
/deep/ .el-tree-node {
.el-tree-node__children {
.el-tree-node__content {
height: 42px;
.el-tree-node {
.el-tree-node__content {
height: 42px;
}
}
}
}
///deep/.el-tree-node__children{
// .is-current{
// .el-tree-node__content{
// height: 42px;
// }
// }
//}
.tree-node {
div {
.el-avatar {

View File

@ -10,10 +10,10 @@
<el-card>
<div style="display: flex;">
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
<el-avatar size="large"
:src="user.avatar"></el-avatar>
<div v-if="!$slots.dot && operation.userInfo.length > 1"
class="el-timeline-item__node avatar_icon" :style="{
<el-avatar size="large" :src="user.avatar"></el-avatar>
<!--v-if="!$slots.dot && operation.userInfo.length > 1" -->
<div v-if="user.icon"
class="el-timeline-item__node" :style="{
backgroundColor: user.color
}">
<i v-if="user.icon"
@ -241,10 +241,10 @@ export default {
position: relative;
margin-right: 5px;
}
.avatar_icon{
.el-timeline-item__node{
position: absolute;
bottom: 16px;
right: -2px;
bottom: 20px;
right: 1px;
}
.username{
width: 45px;

View File

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

View File

@ -56,7 +56,7 @@
</div>
<div class="top_right">
<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 === '4'" size="mini" type="success">审批通过</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>