|
|
|
<template>
|
|
|
|
<div class="select-option-container" :style="styleObj">
|
|
|
|
<div class="select-option-title" :style="titleStyle">
|
|
|
|
<img :src="imgStyle.titleIcon" alt="" class="icon-title">
|
|
|
|
{{elTreeBtnTitleName}}{{ transStyle.titleName }}
|
|
|
|
</div>
|
|
|
|
<div class="select-option-item">
|
|
|
|
<el-select v-model="selectVal" @change="selectChange" :style="selectStyle"
|
|
|
|
:placeholder="placeholderVal" :clearable="clearable"
|
|
|
|
:filterable="filterable" :multiple="multiple">
|
|
|
|
<el-option
|
|
|
|
v-for="item in selectOption"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value"
|
|
|
|
:disabled="item.disabled"
|
|
|
|
/>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {mapGetters} from "vuex";
|
|
|
|
export default {
|
|
|
|
name: "selectOption",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
selectVal:'',
|
|
|
|
selectOption:[{value:1,label:'选项1',disabled:false},{value:2,label:'选项3',disabled:true}],
|
|
|
|
options: {},
|
|
|
|
optionsSetUp: {},
|
|
|
|
optionsPosition:{},
|
|
|
|
optionsData:{},
|
|
|
|
//按钮组
|
|
|
|
btnGroup:[
|
|
|
|
{name:'月',code:'month',isDisplay:'true'},
|
|
|
|
{name:'季度',code:'quarter',isDisplay:'true'},
|
|
|
|
{name:'年',code:'year',isDisplay:'true'},
|
|
|
|
],
|
|
|
|
btnActive:'month',
|
|
|
|
dataTitle:''
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {},
|
|
|
|
props: {
|
|
|
|
value: Object,
|
|
|
|
ispreview: Boolean
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
//placeholderVal的值
|
|
|
|
placeholderVal(){
|
|
|
|
return this.optionsSetUp.placeholderVal;
|
|
|
|
},
|
|
|
|
//是否可清空
|
|
|
|
clearable(){
|
|
|
|
return this.optionsSetUp.clearable;
|
|
|
|
},
|
|
|
|
//是否可筛选
|
|
|
|
filterable(){
|
|
|
|
return this.optionsSetUp.filterable;
|
|
|
|
},
|
|
|
|
//是否可多选
|
|
|
|
multiple(){
|
|
|
|
return this.optionsSetUp.multiple;
|
|
|
|
},
|
|
|
|
elTreeBtnTitleName(){
|
|
|
|
let btnTitleName=this.$route.query.btnTitleName
|
|
|
|
return btnTitleName;
|
|
|
|
},
|
|
|
|
//下拉列表样式
|
|
|
|
selectStyle(){
|
|
|
|
return{
|
|
|
|
width:this.optionsSetUp.selectWidth+'px',
|
|
|
|
// height:this.optionsSetUp.selectHeight+'px'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
transStyle() {
|
|
|
|
return this.objToOne(this.options);
|
|
|
|
},
|
|
|
|
styleObj() {
|
|
|
|
const allStyle = this.optionsPosition;
|
|
|
|
return {
|
|
|
|
position: this.ispreview ? "absolute" : "static",
|
|
|
|
width: allStyle.width + "px",
|
|
|
|
height: allStyle.height + "px",
|
|
|
|
left: allStyle.left + "px",
|
|
|
|
top: allStyle.top + "px",
|
|
|
|
'background':this.transStyle.bgColor,
|
|
|
|
'border':this.transStyle.isBorder?'0.5px solid '+this.transStyle.borderColor:'none',
|
|
|
|
'box-shadow':this.transStyle.isShadow?'0px 3px 12px '+this.transStyle.borderColor:'none',
|
|
|
|
'background-image':'url(' + this.transStyle.imageAdress + ')',
|
|
|
|
// 'background-position':'center',
|
|
|
|
'background-repeat':'no-repeat',
|
|
|
|
'background-size':'contain'
|
|
|
|
};
|
|
|
|
},
|
|
|
|
//图片样式
|
|
|
|
imgStyle(){
|
|
|
|
return{
|
|
|
|
titleIcon:this.transStyle.titleIcon
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//标题样式设置
|
|
|
|
titleStyle(){
|
|
|
|
return{
|
|
|
|
'display':this.transStyle.isTitle?'flex':'none',
|
|
|
|
'text-align':this.transStyle.textAlign,
|
|
|
|
'font-size':this.transStyle.titleFontSize+'px',
|
|
|
|
color: this.transStyle.titleColor,
|
|
|
|
'font-weight': this.transStyle.titleFontWeight
|
|
|
|
}
|
|
|
|
},
|
|
|
|
btnStyle(){
|
|
|
|
return{
|
|
|
|
'font-size':this.transStyle.fontSize
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
value: {
|
|
|
|
handler(val) {
|
|
|
|
this.options = val;
|
|
|
|
this.optionsSetUp = val.setup;
|
|
|
|
this.optionsPosition = val.position;
|
|
|
|
this.handlerData();
|
|
|
|
this.pushAll();
|
|
|
|
this.btnDisplay();
|
|
|
|
|
|
|
|
},
|
|
|
|
deep: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
// this.initImageUrl();
|
|
|
|
this.options=this.value;
|
|
|
|
this.optionsSetUp = this.value.setup;
|
|
|
|
this.optionsPosition = this.value.position;
|
|
|
|
this.handlerData();
|
|
|
|
this.pushAll();
|
|
|
|
this.btnDisplay();
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
//选项是否加全部
|
|
|
|
pushAll(){
|
|
|
|
if(this.optionsSetUp.isAll){
|
|
|
|
this.selectOption.unshift({label:'全部',value:'all'})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//select的change事件
|
|
|
|
selectChange(val){
|
|
|
|
let data=[];
|
|
|
|
if(!this.optionsSetUp.multiple){
|
|
|
|
data.push(val);
|
|
|
|
}
|
|
|
|
this.$store.commit('SELECT_VAL_ARR', data);
|
|
|
|
|
|
|
|
},
|
|
|
|
//计算按钮是否显示
|
|
|
|
btnDisplay(){
|
|
|
|
this.btnGroup.map((item,index)=>{
|
|
|
|
if(item.code=='year'){
|
|
|
|
item.isDisplay=this.transStyle.isYear;
|
|
|
|
}else if(item.code=='quarter'){
|
|
|
|
item.isDisplay=this.transStyle.isQuarter;
|
|
|
|
}else{
|
|
|
|
item.isDisplay=this.transStyle.isMonth;
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
this.btnGroup.some((item, index) => {
|
|
|
|
if(item.isDisplay){
|
|
|
|
this.btnActive=item.code;
|
|
|
|
return true;//当内部return true时跳出整个循环
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.setBtnVal(this.btnActive);
|
|
|
|
},
|
|
|
|
changeType(item){
|
|
|
|
this.btnActive=item.code;
|
|
|
|
this.setBtnVal(item.code);
|
|
|
|
},
|
|
|
|
//传值-vuex-按钮值
|
|
|
|
setBtnVal(val){
|
|
|
|
this.$store.commit('CHANGE_BUTTON',val);
|
|
|
|
|
|
|
|
},
|
|
|
|
handlerData() {
|
|
|
|
const resData = this.optionsData;
|
|
|
|
resData.dataType == "staticData"
|
|
|
|
? this.handlerStaticData(resData.staticData)
|
|
|
|
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
|
|
|
|
},
|
|
|
|
handlerStaticData(data) {
|
|
|
|
|
|
|
|
},
|
|
|
|
handlerDynamicData(data, refreshTime) {
|
|
|
|
if (!data) return;
|
|
|
|
/* if (this.ispreview) {
|
|
|
|
this.getEchartData(data);
|
|
|
|
this.flagInter = setInterval(() => {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}, refreshTime);
|
|
|
|
} else {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}*/
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.select-option-container{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding:10px;
|
|
|
|
}
|
|
|
|
.select-option-style{
|
|
|
|
width:60px;
|
|
|
|
}
|
|
|
|
.select-option-title{
|
|
|
|
padding:5px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.icon-title{
|
|
|
|
margin-right:5px;
|
|
|
|
}
|
|
|
|
.select-option-item{
|
|
|
|
padding:5px;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
