208 lines
4.6 KiB
Vue
208 lines
4.6 KiB
Vue
<style lang='scss' scoped>
|
|
.pickerGroup-list-picker{
|
|
background-color: #fff;
|
|
display: flex;
|
|
box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08);
|
|
&-left{
|
|
border-right: 1px solid #eee;
|
|
}
|
|
&-left,&-right{
|
|
width: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 26rpx 0;
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="pickerGroup">
|
|
<view class="pickerGroup-list-picker">
|
|
<view class="pickerGroup-list-picker-left" @click="leftSelectShow = true">
|
|
<text>{{getLeftSelectTextCmp}}</text>
|
|
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
|
</view>
|
|
<picker v-if="rightSelectType=='date'" class="pickerGroup-list-picker-right"
|
|
mode="date" :fields="dateTypeMode" :value="dateVal" @change="bindDateChange">
|
|
<view class="">
|
|
<text>{{getRightSelectTextCmp}}</text>
|
|
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
|
</view>
|
|
</picker>
|
|
<view v-else class="pickerGroup-list-picker-right" @click="rightSelectShow = true">
|
|
<text>{{getRightSelectTextCmp}}</text>
|
|
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
|
</view>
|
|
</view>
|
|
<u-select
|
|
v-model="leftSelectShow"
|
|
:list="leftSelectList"
|
|
@confirm="onLeftSelectConfirmFn"
|
|
:value-name="leftValueName"
|
|
:label-name="leftLabelName"
|
|
:child-name="leftChildName"
|
|
:mode="leftMode"
|
|
></u-select>
|
|
<u-select
|
|
v-model="rightSelectShow"
|
|
:list="rightSelectList"
|
|
@confirm="onRightSelectConfirmFn"
|
|
:value-name="rightValueName"
|
|
:label-name="rightLabelName"
|
|
:child-name="rightChildName"
|
|
:mode="rightMode"
|
|
></u-select>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
leftSelectValue:"",
|
|
leftSelectShow: false, // 报警预警弹框
|
|
|
|
rightSelectValue:"",
|
|
rightSelectShow: false, // 状态弹框
|
|
|
|
dateVal:"",
|
|
|
|
leftSelectLabel: "全部",
|
|
rightSelectLabel: "",
|
|
}
|
|
},
|
|
watch:{
|
|
rightValue(newVal){
|
|
this.dateVal = this.rightValue;
|
|
}
|
|
},
|
|
computed:{
|
|
getLeftSelectTextCmp(){
|
|
// let obj = this.leftSelectList.find((item)=>{
|
|
// return item[this.leftValueName] === this.leftSelectValue
|
|
// });
|
|
// if (!!obj) {
|
|
// return obj[this.leftLabelName];
|
|
// } else{
|
|
// return "-";
|
|
// }
|
|
return this.leftSelectLabel
|
|
},
|
|
getRightSelectTextCmp(){
|
|
if(this.rightSelectType==="date"){
|
|
if (!!this.dateVal) {
|
|
return this.dateVal
|
|
} else{
|
|
return "-"
|
|
}
|
|
}else{
|
|
// let obj = this.rightSelectList.find((item)=>{
|
|
// return item[this.rightValueName] === this.rightSelectValue
|
|
// });
|
|
// if (!!obj) {
|
|
// return obj[this.rightLabelName];
|
|
// } else{
|
|
// return "-";
|
|
// }
|
|
return this.rightSelectLabel
|
|
}
|
|
}
|
|
},
|
|
props:{
|
|
rightSelectType:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
dateTypeMode :{
|
|
type:String,
|
|
default:"month"
|
|
},
|
|
leftSelectList: {
|
|
type:Array,
|
|
default () {
|
|
return []
|
|
},
|
|
},
|
|
rightSelectList:{
|
|
type:Array,
|
|
default:()=>{
|
|
return []
|
|
},
|
|
},
|
|
// 左边默认值
|
|
leftValue:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
// 右边默认值
|
|
rightValue:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
// 自定义属性值
|
|
leftValueName: {
|
|
type: String,
|
|
default: "value"
|
|
},
|
|
leftLabelName: {
|
|
type: String,
|
|
default: "label"
|
|
},
|
|
leftChildName: {
|
|
type: String,
|
|
default: "children"
|
|
},
|
|
rightValueName: {
|
|
type: String,
|
|
default: "value"
|
|
},
|
|
rightLabelName: {
|
|
type: String,
|
|
default: "label"
|
|
},
|
|
rightChildName: {
|
|
type: String,
|
|
default: "children"
|
|
},
|
|
// 左、右侧下拉模式
|
|
leftMode: {
|
|
type: String,
|
|
default: "single-column"
|
|
},
|
|
rightMode: {
|
|
type: String,
|
|
default: "single-column"
|
|
},
|
|
},
|
|
created() {
|
|
this.leftSelectValue = this.leftValue;
|
|
this.rightSelectValue = this.rightValue;
|
|
this.dateVal = this.rightValue;
|
|
},
|
|
methods: {
|
|
bindDateChange(e){
|
|
this.dateVal = e.detail.value;
|
|
// this.rightValue = e.detail.value;
|
|
this.$emit("onDateChange",e.detail.value);
|
|
},
|
|
onRightSelectConfirmFn(arr){
|
|
// this.rightSelectValue = arr[0].value;
|
|
this.rightSelectLabel = arr[arr.length - 1].label;
|
|
this.$emit("onRightConfirm",arr[arr.length - 1].value);
|
|
},
|
|
//
|
|
onLeftSelectConfirmFn(arr){
|
|
// this.leftSelectValue = arr[0].value;
|
|
this.leftSelectLabel = arr[arr.length - 1].label;
|
|
this.$emit("onLeftConfirm",arr[arr.length - 1].value);
|
|
},
|
|
getLabel(arr) {
|
|
let label = '';
|
|
for (let item of arr) {
|
|
label += item.label
|
|
}
|
|
return label
|
|
}
|
|
}
|
|
}
|
|
</script>
|