陈裕财
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(); |
|||
} |
|||
} |
|||
</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> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue