陈裕财
3 years ago
8 changed files with 326 additions and 649 deletions
-
79src/components/Mdp/index.scss
-
84src/components/MdpDateRangeX/index.vue
-
79src/components/MdpDateX/index.vue
-
88src/components/MdpFieldX/index.vue
-
31src/components/MdpSelectDictTag/index.vue
-
401src/components/MdpSelectDictX/index.vue
-
108src/components/MdpSelectUserX/index.vue
-
105src/views/xm/core/components/MdpSelectUserXm/index.vue
@ -0,0 +1,79 @@ |
|||||
|
|
||||
|
.field-box { |
||||
|
display: flex; |
||||
|
margin-right: 5px; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
.field-avater { |
||||
|
background-color: #ff9f73; |
||||
|
} |
||||
|
|
||||
|
.field-info { |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
margin-left: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
.field-value { |
||||
|
height: 20px; |
||||
|
line-height: 20px; |
||||
|
font-size: 0.75rem; |
||||
|
} |
||||
|
.field-label { |
||||
|
height: 20px; |
||||
|
line-height: 20px; |
||||
|
font-size: 0.75rem; |
||||
|
color: #c0c4cc; |
||||
|
} |
||||
|
} |
||||
|
.field-oper { |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
margin-left: 5px; |
||||
|
margin-right: 5px; |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
.field-box:hover .field-info.enabled { |
||||
|
display: none; |
||||
|
} |
||||
|
.field-box:hover .field-oper.enabled { |
||||
|
display: inline; |
||||
|
} |
||||
|
.dashed-circle { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border: 2px dashed #000000; |
||||
|
border-radius: 40px/40px; |
||||
|
} |
||||
|
.field-box:hover .dashed-circle { |
||||
|
border: 2px dashed #409eff; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.avatar-container { |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.avatar-wrapper { |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
.user-avatar { |
||||
|
height: 34px; |
||||
|
width: 34px; |
||||
|
border-radius: 50%; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
.username{ |
||||
|
color: #7D7D7D; |
||||
|
font-size: 0.75rem; |
||||
|
} |
||||
|
.el-icon-caret-bottom { |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1,238 +1,201 @@ |
|||||
<template> |
|
||||
|
|
||||
<div class="field-box" @click="showSelect"> |
|
||||
<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> |
|
||||
|
|
||||
<div class="field-info" > |
|
||||
<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span> |
|
||||
<span class="field-value" v-else><span class="label-font-color">无</span></span> |
|
||||
<span class="field-label" >{{label}}</span> |
|
||||
<mdp-select-dict v-if="disabled!==true" :dict="dict" ref="selectRef" v-model="myVal" @change="onChange" :get-icon="getIcon" :get-color="getColor" :icon="icon"></mdp-select-dict> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
|
<template> |
||||
|
<div class="field-box" @click="showSelect"> |
||||
|
<slot name="avater" class="field-avater"> |
||||
|
<el-avatar |
||||
|
:class="{ 'dashed-circle': avaterCpd.isNull }" |
||||
|
:icon="avaterCpd.icon" |
||||
|
:style="{ backgroundColor: avaterCpd.color }" |
||||
|
>{{ avaterCpd.innerText }}</el-avatar |
||||
|
> |
||||
|
</slot> |
||||
|
|
||||
|
<div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}"> |
||||
|
<slot name="info"> |
||||
|
<span class="field-value" v-if="!avaterCpd.isNull" |
||||
|
>{{ avaterCpd.innerText }} |
||||
|
</span> |
||||
|
<span class="field-value" v-else |
||||
|
><span class="label-font-color">无</span></span |
||||
|
> |
||||
|
<span class="field-label">{{ label }}</span> |
||||
|
</slot> |
||||
|
</div> |
||||
|
<div class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}"> |
||||
|
<slot name="oper"> |
||||
|
<mdp-select-dict |
||||
|
v-if="disabled !== true" |
||||
|
:dict="dict" |
||||
|
ref="selectRef" |
||||
|
v-model="myVal" |
||||
|
@change="onChange" |
||||
|
:get-icon="getIcon" |
||||
|
:get-color="getColor" |
||||
|
:icon="icon" |
||||
|
></mdp-select-dict> |
||||
|
</slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
import util from '@/common/js/util' |
|
||||
export default { |
|
||||
name: 'mdp-select-dict-x', |
|
||||
components: { }, |
|
||||
computed: { |
|
||||
currentItem(){ |
|
||||
if(this.dict){ |
|
||||
return this.dict.find(k=>k.id==this.myVal) |
|
||||
}else{ |
|
||||
return null; |
|
||||
} |
|
||||
}, |
|
||||
avaterCpd(){ |
|
||||
var currentItem = null |
|
||||
if(this.dict){ |
|
||||
currentItem= this.dict.find(k=>k.id==this.myVal) |
|
||||
} |
|
||||
var isEmpty=this.isEmpty(this.myVal) |
|
||||
var obj={isNull:isEmpty,icon:'el-icon-full-screen',color:'#E4E7ED',innerText:''} |
|
||||
if(this.getColor||this.color){ |
|
||||
if(this.getColor){ |
|
||||
obj.color= this.getColor(this.myVal,currentItem,this.dict) |
|
||||
}else{ |
|
||||
obj.color=this.color |
|
||||
} |
|
||||
|
|
||||
}else{ |
|
||||
if(!isEmpty){ |
|
||||
if(currentItem&¤tItem.color){ |
|
||||
obj.color=currentItem.color |
|
||||
}else{ |
|
||||
obj.color= util.getColor(this.myVal) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
if(this.getIcon||this.icon){ |
|
||||
if(this.getIcon){ |
|
||||
obj.icon= this.getIcon(this.myVal,currentItem,this.dict) |
|
||||
}else if(this.icon){ |
|
||||
obj.icon=this.icon |
|
||||
} |
|
||||
}else { |
|
||||
if(!isEmpty){ |
|
||||
if(currentItem && currentItem.icon){ |
|
||||
obj.icon= currentItem.icon |
|
||||
}else{ |
|
||||
obj.icon='' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
if(isEmpty){ |
|
||||
obj.innerText='' |
|
||||
}else{ |
|
||||
if(currentItem==null){ |
|
||||
obj.innerText=this.myVal |
|
||||
}else{ |
|
||||
obj.innerText=currentItem.name |
|
||||
} |
|
||||
} |
|
||||
return obj; |
|
||||
|
<script> |
||||
|
import util from "@/common/js/util"; |
||||
|
export default { |
||||
|
name: "mdp-select-dict-x", |
||||
|
components: {}, |
||||
|
computed: { |
||||
|
currentItem() { |
||||
|
if (this.dict) { |
||||
|
return this.dict.find((k) => k.id == this.myVal); |
||||
|
} else { |
||||
|
return null; |
||||
} |
} |
||||
}, |
}, |
||||
data(){ |
|
||||
return { |
|
||||
myVal:'', |
|
||||
|
avaterCpd() { |
||||
|
var currentItem = null; |
||||
|
if (this.dict) { |
||||
|
currentItem = this.dict.find((k) => k.id == this.myVal); |
||||
|
} |
||||
|
var isEmpty = this.isEmpty(this.myVal); |
||||
|
var obj = { |
||||
|
isNull: isEmpty, |
||||
|
icon: "el-icon-full-screen", |
||||
|
color: "#E4E7ED", |
||||
|
innerText: "", |
||||
|
}; |
||||
|
if (this.getColor || this.color) { |
||||
|
if (this.getColor) { |
||||
|
obj.color = this.getColor(this.myVal, currentItem, this.dict); |
||||
|
} else { |
||||
|
obj.color = this.color; |
||||
} |
} |
||||
}, |
|
||||
watch:{ |
|
||||
value:{ |
|
||||
deep:true, |
|
||||
handler(){ |
|
||||
this.initData(); |
|
||||
|
} else { |
||||
|
if (!isEmpty) { |
||||
|
if (currentItem && currentItem.color) { |
||||
|
obj.color = currentItem.color; |
||||
|
} else { |
||||
|
obj.color = util.getColor(this.myVal); |
||||
} |
} |
||||
|
|
||||
}, |
|
||||
|
|
||||
myVal(){ |
|
||||
this.$emit('input',this.myVal) |
|
||||
|
} |
||||
} |
} |
||||
}, |
|
||||
props: { |
|
||||
|
|
||||
disabled:{ |
|
||||
type:Boolean, |
|
||||
default:false, |
|
||||
}, |
|
||||
label:{ |
|
||||
type:String, |
|
||||
default:'' |
|
||||
}, |
|
||||
clearable:{ |
|
||||
type:Boolean, |
|
||||
default:false, |
|
||||
}, |
|
||||
dict:{ |
|
||||
type:Array, |
|
||||
default:function(){return []} |
|
||||
}, |
|
||||
value: { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
icon:{ |
|
||||
type:String, |
|
||||
default:null, |
|
||||
}, |
|
||||
getIcon:{ |
|
||||
type:Function |
|
||||
}, |
|
||||
getColor:{ |
|
||||
type:Function |
|
||||
} , |
|
||||
}, |
|
||||
methods: { |
|
||||
showSelect(){ |
|
||||
if(this.disabled){ |
|
||||
return; |
|
||||
|
if (this.getIcon || this.icon) { |
||||
|
if (this.getIcon) { |
||||
|
obj.icon = this.getIcon(this.myVal, currentItem, this.dict); |
||||
|
} else if (this.icon) { |
||||
|
obj.icon = this.icon; |
||||
} |
} |
||||
if(this.$refs["selectRef"]){ |
|
||||
if(this.$refs["selectRef"].$refs["selectRef"]){ |
|
||||
this.$refs["selectRef"].$refs["selectRef"].toggleMenu(); |
|
||||
|
} else { |
||||
|
if (!isEmpty) { |
||||
|
if (currentItem && currentItem.icon) { |
||||
|
obj.icon = currentItem.icon; |
||||
|
} else { |
||||
|
obj.icon = ""; |
||||
} |
} |
||||
} |
} |
||||
}, |
|
||||
initData(){ |
|
||||
this.myVal=this.value |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
onChange(data){ |
|
||||
this.$emit('change',data) |
|
||||
}, |
|
||||
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; |
|
||||
for (var i in v) { |
|
||||
return false; |
|
||||
} |
|
||||
return true; |
|
||||
} |
|
||||
return false; |
|
||||
|
} |
||||
|
if (isEmpty) { |
||||
|
obj.innerText = ""; |
||||
|
} else { |
||||
|
if (currentItem == null) { |
||||
|
obj.innerText = this.myVal; |
||||
|
} else { |
||||
|
obj.innerText = currentItem.name; |
||||
} |
} |
||||
|
} |
||||
|
return obj; |
||||
}, |
}, |
||||
mounted(){ |
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
myVal: "", |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
value: { |
||||
|
deep: true, |
||||
|
handler() { |
||||
this.initData(); |
this.initData(); |
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
|
||||
.field-box { |
|
||||
display: flex; |
|
||||
margin-right:5px; |
|
||||
align-items: center; |
|
||||
cursor: pointer; |
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
.avater { |
|
||||
background-color:#FF9F73; |
|
||||
} |
|
||||
|
myVal() { |
||||
|
this.$emit("input", this.myVal); |
||||
|
}, |
||||
|
}, |
||||
|
props: { |
||||
|
disabled: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
label: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
clearable: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
dict: { |
||||
|
type: Array, |
||||
|
default: function () { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
value: {}, |
||||
|
|
||||
.field-info { |
|
||||
|
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
margin-left: 10px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
.field-value { |
|
||||
height: 20px; |
|
||||
line-height: 20px; |
|
||||
font-size: 0.75rem; |
|
||||
} |
|
||||
.field-label{ |
|
||||
height: 20px; |
|
||||
line-height: 20px; |
|
||||
font-size: 0.75rem; |
|
||||
color: #C0C4CC; |
|
||||
|
icon: { |
||||
|
type: String, |
||||
|
default: null, |
||||
|
}, |
||||
|
getIcon: { |
||||
|
type: Function, |
||||
|
}, |
||||
|
getColor: { |
||||
|
type: Function, |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
showSelect() { |
||||
|
if (this.disabled) { |
||||
|
return; |
||||
|
} |
||||
|
if (this.$refs["selectRef"]) { |
||||
|
if (this.$refs["selectRef"].$refs["selectRef"]) { |
||||
|
this.$refs["selectRef"].$refs["selectRef"].toggleMenu(); |
||||
} |
} |
||||
|
|
||||
} |
|
||||
.my-select{ |
|
||||
height: 20px; |
|
||||
line-height: 20px; |
|
||||
margin-left: 5px; |
|
||||
margin-right:5px; |
|
||||
max-width: 250px; |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
.field-box:hover .field-label{ |
|
||||
display: none; |
|
||||
} |
|
||||
.field-box:hover .my-select{ |
|
||||
height: 20px; |
|
||||
margin-left: 5px; |
|
||||
display: inline; |
|
||||
} |
|
||||
.dashed-circle{ |
|
||||
width:40px; |
|
||||
height:40px; |
|
||||
border:2px dashed #000000; |
|
||||
border-radius:40px/40px; |
|
||||
} |
|
||||
.field-box:hover .dashed-circle{ |
|
||||
|
} |
||||
|
}, |
||||
|
initData() { |
||||
|
this.myVal = this.value; |
||||
|
}, |
||||
|
|
||||
|
onChange(data) { |
||||
|
this.$emit("change", data); |
||||
|
}, |
||||
|
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; |
||||
|
for (var i in v) { |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initData(); |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
border:2px dashed #409EFF; |
|
||||
} |
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '../Mdp/index.scss'; |
||||
</style> |
</style> |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue