陈裕财
3 years ago
3 changed files with 317 additions and 33 deletions
-
41src/views/xm/core/components/MdpSelectUserXm/index.vue
-
293src/views/xm/core/xmGroup/XmGroupSelectForProduct.vue
-
16src/views/xm/core/xmGroup/XmGroupSelectForProject.vue
@ -0,0 +1,293 @@ |
|||
<template> |
|||
<section class="border padding-left"> |
|||
<el-row class="padding-top"> |
|||
|
|||
<xm-product-select style="display:inline;" v-if="!xmProduct" :auto-select="false" :xm-product="xmProduct" @row-click="onProductRowClick" @clear="onProductClose"></xm-product-select> |
|||
|
|||
|
|||
<el-button type="primary" @click="userConfirm" icon="el-icon-finished">确认选择</el-button> |
|||
</el-row> |
|||
<el-row class="padding-top" v-loading="load.list" :style="{height:maxTableHeight+'px'}" ref="table"> |
|||
<el-row v-for="(item,index) in xmGroupFormworkSels" :key="index"> |
|||
<h3> |
|||
<div class="padding-top">{{item.groupName}} |
|||
</div> |
|||
</h3> |
|||
<el-col :span="24" style="margin-left:30px;display:flex;flex-wrap: wrap;width:100%;"> |
|||
<div :class="v.isSelected=='1'?'checkCopyButton':'copyButton'" v-for="(v,valueIndex) in item.groupUsers" :key="valueIndex" @click="toggleSelected(index,valueIndex)"> |
|||
|
|||
|
|||
|
|||
<div class="avatar-container"> |
|||
<div class="avatar-wrapper"> |
|||
<img class="user-avatar" :src="getHeadimgurl(v.userid)" @error="onImgError(v.userid,$event)"></img> |
|||
<span class="username">{{v.username}}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
</section> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/common/js/util'; //全局公共库 |
|||
import imgUtil from '@/api/imgUtil'; |
|||
//import Sticky from '@/components/Sticky' // 粘性header组件 |
|||
import { initSimpleDicts } from '@/api/mdp/meta/item';//下拉框数据查询 |
|||
import { getGroups } from '@/api/xm/core/xmGroup'; |
|||
import XmProductSelect from '@/views/xm/core/components/XmProductSelect'; |
|||
|
|||
import {mapGetters} from 'vuex' |
|||
|
|||
export default { |
|||
computed: { |
|||
...mapGetters([ |
|||
'userInfo','userInfo','roles' |
|||
]) |
|||
}, |
|||
// |
|||
props: ['visible','isSelectSingleUser','isSelectMultiUser','xmProduct'], |
|||
watch: { |
|||
"selGroups": function(selGroups) { |
|||
if(this.selGroups){ |
|||
this.selGroups.forEach(i=>{ |
|||
if(i.groupUsers){ |
|||
i.groupUsers.forEach(k=>k.isSelected="0") |
|||
} |
|||
}) |
|||
this.xmGroupFormworkSels = JSON.parse(JSON.stringify(this.selGroups)); |
|||
}else{ |
|||
this.xmGroupFormworkSels = []; |
|||
} |
|||
// this.applyData(); |
|||
}, |
|||
'visible': function(visible) { |
|||
if (visible == true) { |
|||
|
|||
} |
|||
}, |
|||
xmProduct(xmProduct){ |
|||
this.filters.xmProduct=xmProduct |
|||
}, |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
filters: { |
|||
key: '', |
|||
xmProduct:null, |
|||
}, |
|||
selGroups:[], |
|||
load: {list: false,edit: false,del: false,add: false}, //查询中... |
|||
sels: [], //列表选中数据 |
|||
dicts: { |
|||
productGroupType:[] |
|||
}, //下拉选择框的所有静态数据 params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]} |
|||
|
|||
/**begin 自定义属性请在下面加 请加备注**/ |
|||
xmGroupFormworkSels: [], |
|||
selectProductVisible:false, |
|||
maxTableHeight:300, |
|||
/**end 自定义属性请在上面加 请加备注**/ |
|||
} |
|||
}, //end data |
|||
methods: { |
|||
...imgUtil, |
|||
toggleSelected(index,valueIndex) { |
|||
if(this.isSelectSingleUser=='1' || this.isSelectMultiUser=='1'){ |
|||
if(this.xmGroupFormworkSels[index].groupUsers[valueIndex].isSelected == '1'){ |
|||
this.xmGroupFormworkSels[index].groupUsers[valueIndex].isSelected ='0' |
|||
}else{ |
|||
this.xmGroupFormworkSels[index].groupUsers[valueIndex].isSelected ='1' |
|||
} |
|||
} |
|||
|
|||
}, |
|||
//确认项目团队组成员 |
|||
groupConfirm(){ |
|||
this.$emit("select-confirm",this.xmGroupFormworkSels); |
|||
}, |
|||
userConfirm(){ |
|||
var users=[]; |
|||
this.xmGroupFormworkSels.forEach(i=>{ |
|||
if(i.groupUsers){ |
|||
i.groupUsers.forEach(k=>{ |
|||
if(k.isSelected=='1'){ |
|||
users.push(k); |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
if(this.isSelectSingleUser=='1'){ |
|||
if(users.length>1){ |
|||
|
|||
this.$notify({position:'bottom-left',showClose: true, |
|||
message: '只能选中一个用户', |
|||
type: 'error' |
|||
}); |
|||
return |
|||
} |
|||
} |
|||
this.$emit("user-confirm",users); |
|||
}, |
|||
getGroups(){ |
|||
var params={}; |
|||
if(this.filters.xmProduct){ |
|||
params.productId=this.filters.xmProduct.id |
|||
} |
|||
|
|||
if( !params.productId){ |
|||
this.$notify({position:'bottom-left',showClose:true,message:'请选择产品',type:'warning'}) |
|||
} |
|||
getGroups(params).then(res=>{ |
|||
var tips = res.data.tips; |
|||
if(tips.isOk){ |
|||
this.selGroups=res.data.data; |
|||
}else{ |
|||
this.$notify({position:'bottom-left',showClose:true,message: tips.msg, type: 'error' }); |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
onProductRowClick:function(product){ |
|||
this.filters.xmProduct=product |
|||
this.selectProductVisible=false; |
|||
this.getGroups(); |
|||
}, |
|||
onProductClose(){ |
|||
this.filters.xmProduct=null |
|||
this.getGroups(); |
|||
}, |
|||
/**end 自定义函数请在上面加**/ |
|||
|
|||
}, //end methods |
|||
components: { |
|||
|
|||
XmProductSelect |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.maxTableHeight = util.calcTableMaxHeight(this.$refs.table.$el); |
|||
if(this.selGroups){ |
|||
this.selGroups.forEach(i=>{ |
|||
if(i.groupUsers){ |
|||
i.groupUsers.forEach(k=>k.isSelected="0") |
|||
} |
|||
}) |
|||
this.xmGroupFormworkSels = JSON.parse(JSON.stringify(this.selGroups)); |
|||
} |
|||
if(this.xmProduct){ |
|||
this.filters.xmProduct=this.xmProduct |
|||
} |
|||
this.getGroups(); |
|||
}); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
@import '@/components/Mdp/index.scss'; |
|||
.group-name{ |
|||
color: rgb(107, 88, 88); |
|||
} |
|||
.copyButton { |
|||
margin-left: 10px; |
|||
margin-top:2px; |
|||
border-radius: 20px; |
|||
padding: 2px 2px; |
|||
border: 1px solid rgb(220, 223, 230); |
|||
/* color:#039; */ |
|||
} |
|||
|
|||
.copyButton:hover { |
|||
color: #409eff; |
|||
border-color: #c6e2ff; |
|||
background-color: #ecf5ff; |
|||
cursor: default; |
|||
} |
|||
|
|||
.checkCopyButton { |
|||
/*color: #fff;*/ |
|||
margin-left: 10px; |
|||
margin-top:2px; |
|||
border-radius: 20px; |
|||
padding: 2px 2px; |
|||
border: 1px solid #FFA00A; |
|||
/*background-color: rgba(230, 162, 60, .1);*/ |
|||
/* background-color: #f9f9f9; */ |
|||
background-color: #fff; |
|||
/*border-color: rgba(230,162,60,.2);*/ |
|||
color: #FFA00A; |
|||
} |
|||
|
|||
.add { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 10px; |
|||
margin-top: 2px; |
|||
} |
|||
|
|||
.add:hover { |
|||
cursor: pointer; |
|||
animation: myrotate 0.5s linear infinite; |
|||
} |
|||
|
|||
|
|||
.input-xmGroupFormwork { |
|||
margin-left:10px; |
|||
margin-top: 2px; |
|||
align-self: center; |
|||
} |
|||
.closeStyle { |
|||
padding: 1px; |
|||
} |
|||
|
|||
.closeStyle:hover { |
|||
cursor: pointer; |
|||
/* border-color:#f40; */ |
|||
/* border: 1px solid #f40; */ |
|||
background-color: #FFA00A; |
|||
color: #fff; |
|||
border-radius: 50%; |
|||
padding: 1px; |
|||
animation: myrotate 1s linear; |
|||
} |
|||
|
|||
.addXmGroupFormworkSquare { |
|||
width: 15px; |
|||
height: 15px; |
|||
display: inline-block; |
|||
background-color: #FFA00A; |
|||
animation: myrotate 2s linear infinite; |
|||
} |
|||
|
|||
.closeXmGroupFormworkSquare { |
|||
width: 15px; |
|||
height: 15px; |
|||
display: inline-block; |
|||
background-color: #fff; |
|||
animation: myrotate 2s linear infinite; |
|||
} |
|||
@keyframes myrotate { |
|||
0% { |
|||
transform: rotate(0deg); |
|||
box-shadow: 0px 0px 10px #fff; |
|||
} |
|||
|
|||
50% { |
|||
transform: rotate(180deg); |
|||
box-shadow: 0px 0px 45px #fff; |
|||
} |
|||
|
|||
100% { |
|||
transform: rotate(360deg); |
|||
box-shadow: 0px 0px 10px #fff; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue