end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化

master
陈裕财 2 years ago
parent
eaa247944d
commit
79c5299934
1 changed files with 0 additions and 294 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 294
      src/views/xm/core/components/MdpSelectUserXm/index.vue

294
src/views/xm/core/components/MdpSelectUserXm/index.vue
View File

@ -1,294 +0,0 @@
<template>
<el-row>
<div :class="{'field-box':true,'small':size=='small','medium':size=='medium'}">
<div class="avatar-container">
<div class="avatar-wrapper">
<img v-if="avaterCpd.userid" class="user-avatar" :class="{'dashed-circle':avaterCpd.isNull}" :style="{backgroundColor:avaterCpd.color}" :src="getHeadimgurl(avaterCpd.userid,avaterCpd.headimgurl)" @error="onImgError(avaterCpd.userid,$event)"></img>
<el-avatar v-else class="field-avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
</div>
</div>
<div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="field-info" :value="myVal" >
<span :class="{'field-value':label,'field-value-center':!label}" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
<span :class="{'field-value':label,'field-value-center':!label}" v-else><span class="label-font-color">无</span></span>
<slot name="label">
<span class="field-label" v-if="label">{{label}}</span>
</slot>
</slot>
</div>
<div v-if="disabled!==true" class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="oper">
<el-select :size="size" v-model="myVal" @change="onSelectChange" :clearable="clearable" filterable value-key="userid" @visible-change="$emit('visible-change',$event)" @focus="$emit('focus',$event)" @blur="$emit('blur',$event)" @clear="$emit('blur',$event)" @click="$emit('click',$event)">
<el-option :value="myVal" disabled v-if="users && users.length>10">
<el-row ><el-button v-if="users && users.length>0" :type="deptUserVisible?'':'primary'" @click.stop="deptUserVisible=false">常用用户</el-button> <el-button :type="deptUserVisible?'primary':''" @click.stop="deptUserVisible=true">部门用户</el-button>
<el-button v-if="projectId||productId" :type="projectVisible?'primary':''" @click.stop="projectVisible=true">项目组</el-button>
<el-button v-if="projectId||productId" :type="productVisible?'primary':''" @click.stop="productVisible=true">产品组</el-button>
</el-row>
</el-option>
<el-option class="avatar-container" v-for="(item,index) in users" :key="index" :value="item" :label="item.username">
<div class="avatar-wrapper">
<img class="user-avatar" :style="{backgroundColor:getMyColor(item)}" :src="getHeadimgurl(item.userid,item.headimgurl)" @error="onImgError(item.userid,$event)"></img>
<span class="username">{{item.username}}</span>
<i v-if="myVal && myVal.userid==item.userid" class="el-icon-check"></i>
<i v-else>&nbsp;&nbsp;</i>
</div>
</el-option>
<el-option :value="myVal" disabled>
<el-row>
<el-button v-if="users && users.length>0" :type="deptUserVisible?'':'primary'" @click.stop="deptUserVisible=false">常用用户</el-button>
<el-button :type="deptUserVisible?'primary':''" @click.stop="deptUserVisible=true">部门用户</el-button>
<el-button v-if="projectId||productId" :type="projectVisible?'primary':''" @click.stop="projectVisible=true">项目组</el-button>
<el-button v-if="projectId||productId" :type="productVisible?'primary':''" @click.stop="productVisible=true">产品组</el-button>
</el-row>
</el-option>
<slot name="extOper">
</slot>
</el-select>
</slot>
</div>
</div>
<el-dialog v-if="disabled!==true" :visible.sync="deptUserVisible" append-to-body top="20px" width="60%">
<users-select :visible="deptUserVisible" :isSingleUser="true" :isSelectByDept="true" @confirm="onTeamUsersConfirm"></users-select>
</el-dialog>
<el-dialog v-if="disabled!==true" :visible.sync="projectVisible" append-to-body top="20px" width="60%">
<xm-group-select-for-project :visible="projectVisible" :sel-project="projectId?{id:projectId}:null" :xm-product="productId?{id:productId}:null" :isSelectSingleUser="true" @user-confirm="onTeamUsersConfirm"></xm-group-select-for-project>
</el-dialog>
<el-dialog v-if="disabled!==true" :visible.sync="productVisible" append-to-body top="20px" width="60%">
<xm-group-select-for-product :visible="productVisible" :sel-project="projectId?{id:projectId}:null" :xm-product="productId?{id:productId}:null" :isSelectSingleUser="true" @user-confirm="onTeamUsersConfirm"></xm-group-select-for-product>
</el-dialog>
</el-row>
</template>
<script>
import util from '@/common/js/util';//全局公共库
import UsersSelect from '@/views/mdp/sys/user/UsersSelectOnly.vue'
import XmGroupSelectForProject from '@/views/xm/core/xmGroup/XmGroupSelectForProject.vue'
import XmGroupSelectForProduct from '@/views/xm/core/xmGroup/XmGroupSelectForProduct.vue'
var us=localStorage.getItem("mdp-his-users")
import imtUtil from '@/api/imgUtil';//全局公共库
var users=us?JSON.parse(us):[]
export default {
name: 'mdp-select-user-xm',
components: { UsersSelect, XmGroupSelectForProject,XmGroupSelectForProduct },
computed: {
avaterCpd(){
var isEmpty=this.isEmpty(this.myVal)
var username=isEmpty?"":(this.myVal.username?this.myVal.username:this.myVal.userid)
var obj={isNull:isEmpty,icon:'el-icon-user',color:'#E4E7ED',innerText:username,userid:'',headimgurl:''}
if(!isEmpty){
obj.headimgurl=this.myVal.headimgurl
obj.userid=this.myVal.userid
}
if(this.getColor||this.color){
if(this.getColor){
obj.color= this.getColor(this.myVal)
}else{
obj.color=this.color
}
}else{
if(!isEmpty){
obj.color= util.getColor(this.myVal.userid)
}
}
if(this.getIcon||this.icon){
if(this.getIcon){
obj.icon= this.getIcon(this.myVal)
}else if(this.icon){
obj.icon=this.icon
}
}
return obj;
}
},
data(){
return {
myVal:{userid:'',username:'',headimgurl:''},
users:[],
deptUserVisible:false,
projectVisible:false,
productVisible:false,
}
},
watch:{
value:{
handler(){
this.initData();
},
deep:true,
immediate:true,
},
myVal(){
if(!this.myVal||!this.myVal.userid){
if(this.value && this.value[this.useridKey]){
this.value[this.useridKey]=""
this.value[this.usernameKey]=""
this.$emit('input',this.value)
}
}else{
if(this.value){
if(this.value[this.useridKey]!=this.myVal.userid){
this.value[this.useridKey]=this.myVal.userid
this.value[this.usernameKey]=this.myVal.username
this.$emit('input',this.value)
}
}
}
}
},
props: {
size:{
type:String,
default:'small',// medium/small/mini
},
projectId:{
type:String,
default:''
},
productId:{
type:String,
default:''
},
disabled:{
type:Boolean,
default:false,
},
label:{
type:String,
default:''
},
clearable:{
type:Boolean,
default:false,
},
value: {
},
useridKey: {
type: String,
default: 'userid'
},
usernameKey: {
type: String,
default: 'username'
},
},
methods: {
...imtUtil,
isEmpty(v) {
switch (typeof v) {
case 'undefined':
return true;
case 'string':
if(v.length == 0) return true;
break;
case 'object':
if (null === v || v.length === 0) return true;
if(v.userid){
return false;
}
return true;
}
return false;
},
getMyColor(item){
if(item&&item.userid){
if(this.getColor){
return this.getColor(item.userid)
}
return util.getColor(item.userid)
}else{
if(this.getColor){
return this.getColor("0")
}else{
return util.getColor(0)
}
}
},
initData(){
var myVal={userid:'',username:'',headimgurl:''}
if(this.value){
myVal.userid=this.value[this.useridKey]
myVal.username=this.value[this.usernameKey]
myVal.headimgurl=this.value.headimgurl
this.myVal={...myVal}
}else{
this.myVal={...myVal}
}
},
onSelectChange(item){
this.onChange([item])
},
onChange(data){
this.$emit('change',data)
},
onTeamUsersConfirm(users){
this.onChange(users)
this.myVal=users[0]
this.projectVisible=false;
this.productVisible=false;
this.deptUserVisible=false;
var notHad=false;
users.forEach(u=>{
if(u.obranchId && !u.branchId){
u.branchId=u.obranchId
u.branchName=u.obranchName
}
if(!this.users.some(k=>k.userid==u.userid)){
notHad=true;
this.users.unshift(u)
}
})
if(notHad){
var us=JSON.stringify(this.users)
localStorage.setItem("mdp-his-users",us)
}
},
},
mounted(){
this.users=users
//this.initData();
}
}
</script>
<style lang="scss" scoped>
@import '@/components/Mdp/index.scss';
</style>
Write Preview
Loading…
Cancel
Save