陈裕财
4 years ago
4 changed files with 181 additions and 26 deletions
-
101src/components/DictSelect/index.vue
-
60src/components/DictTag/index.vue
-
6src/main.js
-
40src/views/xm/core/xmTestPlanCase/XmTestPlanCaseEdit.vue
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<el-select class="my-select" v-model="myVal" @change="onChange" :clearable="clearable"> |
|||
<slot> |
|||
<el-option :style="styleObj" v-for="(item,index) in dict" :key="index" :value="item.id" :label="item.name"> |
|||
<slot :item="item" :dict="dict"> |
|||
<span :style="{backgroundColor:getMyColor(item),color:'aliceblue'}" class="padding"> |
|||
<i v-if="item.icon||getIcon" :class="getMyIcon(item)" ></i> |
|||
{{item.name}} |
|||
</span> |
|||
<i v-if="myVal==item.id" class="el-icon-check"></i> |
|||
<i v-else> </i> |
|||
</slot> |
|||
</el-option> |
|||
</slot> |
|||
</el-select> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'dict-select', |
|||
components: { }, |
|||
computed: { |
|||
|
|||
}, |
|||
data(){ |
|||
return { |
|||
myVal:'', |
|||
} |
|||
}, |
|||
watch:{ |
|||
value:{ |
|||
deep:true, |
|||
handler(){ |
|||
this.initData(); |
|||
} |
|||
|
|||
}, |
|||
myVal(){ |
|||
this.$emit('input',this.myVal) |
|||
} |
|||
}, |
|||
props: { |
|||
clearable:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
dict:{ |
|||
type:Array, |
|||
default:function(){return []} |
|||
}, |
|||
value: { |
|||
|
|||
}, |
|||
getIcon:{ |
|||
type:Function |
|||
}, |
|||
getColor:{ |
|||
type:Function |
|||
} , |
|||
styleObj:{ |
|||
type:Object, |
|||
default:function(){return { marginTop:'5px' }} |
|||
}, |
|||
}, |
|||
methods: { |
|||
|
|||
initData(){ |
|||
this.myVal=this.value |
|||
|
|||
}, |
|||
getMyColor(item){ |
|||
if(this.getColor){ |
|||
return this.getColor(item.id) |
|||
} |
|||
if(item.color){ |
|||
return item.color |
|||
} |
|||
return "" |
|||
}, |
|||
getMyIcon(item){ |
|||
if(this.getIcon){ |
|||
return this.getIcon(item.id) |
|||
} |
|||
if(item.icon){ |
|||
return item.icon |
|||
} |
|||
return ""; |
|||
}, |
|||
onChange(data){ |
|||
this.$emit('change',data) |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.initData(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
</style> |
|||
|
|||
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<el-tag v-if="currentItem" :type="currentItem.className" :closable="closable">{{currentItem.name}}</el-tag> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'dict-tag', |
|||
components: { }, |
|||
computed: { |
|||
currentItem(){ |
|||
if(this.dict){ |
|||
return this.dict.find(k=>k.id==this.myVal) |
|||
}else{ |
|||
return null; |
|||
} |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
myVal:'', |
|||
} |
|||
}, |
|||
watch:{ |
|||
value:{ |
|||
deep:true, |
|||
handler(){ |
|||
this.initData(); |
|||
} |
|||
|
|||
}, |
|||
}, |
|||
props: { |
|||
closable:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
dict:{ |
|||
type:Array, |
|||
default:function(){return []} |
|||
}, |
|||
value: { |
|||
|
|||
}, |
|||
}, |
|||
methods: { |
|||
|
|||
initData(){ |
|||
this.myVal=this.value |
|||
|
|||
}, |
|||
}, |
|||
mounted(){ |
|||
this.initData(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue