<template>
|
<view class="showData" ref="echartsWrapper" :class="[isLine?'isLine':'']">
|
<view v-if="isShow" :class="isLineFeed?'showData-field-line':'showData-field-input'" @click="open">
|
<view class="showData-field-label"
|
:style="{minWidth:isLineFeed?'':labelWidths,width:isLineFeed?'':labelWidths,color:labelColor}"
|
v-if="label"><span v-if="required" style="color: red">*</span>{{label}}</view>
|
<!-- 多选 -->
|
<view :class="direction=='left'?'textleft':'textR'" :style="{width: inpeWidth}"
|
class="inputs checkbox showDatas" v-if="checkbox && !clickable">
|
<view :style="{color: value?valueColor?valueColor:'':'#999',width: inpeWidthLfet}"
|
:class="isoverflow?'showData-field-pu':''">
|
<view v-if="ListXz.length>0">
|
<view v-if="!isJoin">
|
<view v-for="(item,index) in ListXz" :key="'a'+index">{{KeyType?item[showName]:item}}</view>
|
</view>
|
<view v-else>
|
{{KeyType?ListXz.map(el=>{return el[showName]}).join(','):ListXz.map(el=>{return el}).join(',')}}
|
</view>
|
</view>
|
<view :style="{color: placeholderColor }" v-else>{{placeholder}}</view>
|
</view>
|
<view v-if="arrow" class="arrows">
|
<image src="./arrow.png" style="width: 30rpx;height: 30rpx;"></image>
|
</view>
|
</view>
|
<!-- 单选 -->
|
<view :style="{width: inpeWidth}" :class="direction=='left'?'textleft':'textR'" class="inputs showDatas"
|
v-if="!checkbox && !clickable">
|
<view :style="{color: ListXz.length>0?valueColor?valueColor:'':placeholderColor,width: inpeWidthLfet}"
|
:class="isoverflow?'showData-field-pu':''">
|
{{ListXz.length>0?(KeyType?ListXz[0][showName]:ListXz[0]):placeholder}}
|
</view>
|
<view v-if="arrow" class="arrows">
|
<image src="./arrow.png" style="width: 30rpx;height: 30rpx;"></image>
|
</view>
|
</view>
|
<!-- 可以点击 -->
|
<view :style="{width: inpeWidth}" :class="direction=='left'?'textleft':'textR'" class="inputs showDatas"
|
v-if="clickable">
|
<view :style="{color: value?valueColor?valueColor:'':placeholderColor,width: inpeWidthLfet}"
|
:class="isoverflow?'showData-field-pu':''">{{value?value:placeholder}}</view>
|
<view v-if="arrow" class="arrows">
|
<image src="./arrow.png" style="width: 30rpx;height: 30rpx;"></image>
|
</view>
|
</view>
|
</view>
|
<slot />
|
|
<view class="bottomPopup" v-if="showPicker">
|
<transition name="slide-up" appear>
|
<view class="popup-content">
|
<view class="pop-header" v-if="isHeader">
|
<span class="pop-header-left" @click="onCancel">{{cancelText}}</span>
|
<span class="pop-header-title">{{title}}</span>
|
<span class="pop-header-right" :style="{color}" @click="onConfirm">{{confirmText}}</span>
|
</view>
|
<view class="pop-header" v-if="!isHeader">
|
<slot name="popHeader" />
|
</view>
|
<view v-if="isSearch">
|
<view style="background-color: #fff;padding: 15rpx 25rpx;">
|
<view
|
style="border-radius: 10rpx;padding: 0 25rpx;;display: flex;justify-content: center;background-color: #f5f5f5;line-height: 65rpx;height: 65rpx;">
|
<view style="display: flex;justify-content: center;flex: 1;">
|
<input style="line-height: 65rpx;height: 65rpx;flex: 1;" v-model.trim="key"
|
:placeholder="headerPlaceholder" />
|
</view>
|
<view @click="onSearch" :style="{color}"
|
style="width: 80rpx;text-align: center;margin-left: 25rpx;">
|
搜索
|
</view>
|
</view>
|
</view>
|
</view>
|
<view v-if="isLoading && popList.length==0" class="pop-main loading">
|
<loading></loading>
|
</view>
|
<view v-else>
|
<view class="pop-main">
|
<view v-if="popList.length>0">
|
<checkbox-group v-if="checkbox" @change="checkboxChange">
|
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in popList"
|
:key="KeyType?item[keys]:item">
|
<view>{{KeyType?item[showName]:item}}</view>
|
<view>
|
<checkbox :color="color" :value="KeyType?item[keys]:item"
|
:checked="getChecked(KeyType?item[keys]:item)" />
|
</view>
|
</label>
|
</checkbox-group>
|
<radio-group v-else @change="radioChange">
|
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in popList"
|
:key="KeyType?item[keys]:item">
|
<view>{{KeyType?item[showName]:item}}</view>
|
<view>
|
<radio :color="color" :value="KeyType?item[keys]:item"
|
:checked="(KeyType?item[keys]:item) == resultRadio" />
|
</view>
|
</label>
|
</radio-group>
|
</view>
|
|
<view v-else class="noData">
|
暂无可选数据
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</transition>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import loading from './loading.vue'
|
export default {
|
name: 'showData',
|
components: {
|
loading
|
},
|
props: {
|
list: {
|
type: Array,
|
default () {
|
return []
|
},
|
},
|
value: {
|
type: [String, Array, Number],
|
default: '',
|
},
|
valName: {
|
type: String,
|
default: '',
|
},
|
keys: {
|
//需要识别的code标识
|
type: String,
|
default: 'code',
|
},
|
showName: {
|
//需要展示标识
|
type: String,
|
default: 'name',
|
},
|
direction: {
|
type: String,
|
default: 'left',
|
},
|
clickable: {
|
type: [Boolean, String],
|
default: false,
|
},
|
isShow: {
|
type: [Boolean, String],
|
default: true,
|
},
|
isJoin: {
|
type: [Boolean, String],
|
default: false,
|
},
|
label: {
|
type: String,
|
default: '',
|
},
|
color: {
|
type: String,
|
default: '#00aaff',
|
},
|
labelColor: {
|
type: String,
|
default: '#646566',
|
},
|
placeholder: {
|
type: String,
|
default: '请选择',
|
},
|
placeholderColor: {
|
type: String,
|
default: '#999',
|
},
|
labelWidth: {
|
type: String,
|
default: '90px',
|
},
|
valueColor: {
|
type: String,
|
default: '',
|
},
|
required: {
|
type: [Boolean, String],
|
default: false,
|
},
|
isLineFeed: {
|
type: [Boolean, String],
|
default: true,
|
},
|
isLine: {
|
//是否换显示线
|
type: [Boolean, String],
|
default: true,
|
},
|
isoverflow: {
|
//是否超出隐藏
|
type: [Boolean, String],
|
default: true,
|
},
|
checkbox: {
|
//是多选
|
type: [Boolean, String],
|
default: false,
|
},
|
disabled: {
|
type: [Boolean, String],
|
default: false,
|
},
|
arrow: {
|
type: [Boolean, String],
|
default: true,
|
},
|
title: {
|
type: String,
|
default: '请选择',
|
},
|
cancelText: {
|
type: String,
|
default: '取消',
|
},
|
confirmText: {
|
type: String,
|
default: '确定',
|
},
|
headerPlaceholder: {
|
type: String,
|
default: '请输入关键字进行搜索',
|
},
|
isSearch: {
|
type: [Boolean, String],
|
default: false,
|
},
|
isHeader: {
|
type: [Boolean, String],
|
default: true,
|
},
|
isSearchFun: {
|
type: [Boolean, String],
|
default: false,
|
},
|
alls: {
|
type: [Boolean, String],
|
default: false,
|
},
|
isLoading: {
|
type: [Boolean, String],
|
default: false,
|
},
|
},
|
watch: {
|
list() {
|
this.loading = false
|
this.popList = JSON.parse(JSON.stringify(this.list))
|
this.setList()
|
},
|
value() {
|
this.popList = JSON.parse(JSON.stringify(this.list))
|
this.setList()
|
},
|
},
|
// 数据说明
|
/* list 传进来的数据
|
* popList 可以选择的数据
|
* result 当前选中的数据 ，key 数组
|
* ListJz 确定选择的数据 ，key 数组
|
* ListXz 确定选择的数据 ，全数组
|
*
|
*/
|
data() {
|
return {
|
loading: false,
|
finished: false,
|
popList: [],
|
ListJz: [],
|
ListXz: [],
|
primary: "#f39800",
|
result: [],
|
KeyType: false,
|
valueType: false,
|
valueTypeObject: false,
|
showPicker: false,
|
eWidth: 0,
|
inpeWidth: '',
|
inpeWidthLfet: '',
|
labelWidths: '90px',
|
key: '',
|
resultRadio: ''
|
}
|
},
|
created() {
|
this.loading = false
|
this.popList = JSON.parse(JSON.stringify(this.list))
|
this.setList()
|
},
|
methods: {
|
getChecked(code) {
|
return this.result.some(el => {
|
return el == code
|
})
|
},
|
checkboxChange(evt) {
|
this.result = evt.detail.value
|
console.log(this.result)
|
},
|
radioChange(evt) {
|
this.result = [evt.detail.value]
|
this.resultRadio = evt.detail.value
|
},
|
onSearch() {
|
if (this.isSearchFun) {
|
this.$emit('onSearch', this.key)
|
} else {
|
if (this.key) {
|
this.popList = this.list.filter((el) => {
|
return (this.KeyType ? el[this.showName] : el).indexOf(this.key) != -1
|
})
|
} else {
|
this.popList = JSON.parse(JSON.stringify(this.list))
|
}
|
}
|
},
|
open() {
|
if (!this.checkbox) {
|
if (typeof this.value == 'string' || typeof this.value == 'number') {
|
this.resultRadio = this.value
|
} else {
|
this.resultRadio = this.value[0]
|
}
|
} else {
|
this.result = this.value
|
}
|
if (!this.disabled && !this.clickable) {
|
this.showPicker = true
|
}
|
this.$emit('onOpen')
|
},
|
close() {
|
this.showPicker = false
|
},
|
setList() {
|
if (this.popList.length == 0) {
|
if (this.disabled) {
|
if (this.value) {
|
if (this.checkbox) {
|
this.ListXz = this.value
|
} else {
|
this.ListXz = [this.value]
|
}
|
} else {
|
this.ListXz = []
|
}
|
}
|
return
|
}
|
if (this.popList.length > 0) {
|
if (typeof this.popList[0] == 'object') {
|
this.KeyType = true
|
} else {
|
this.KeyType = false
|
}
|
}
|
if (typeof this.value == 'string' || typeof this.value == 'number') {
|
this.valueType = false
|
} else {
|
this.valueType = true
|
}
|
if (typeof this.value == 'string' || typeof this.value == 'number') {
|
this.result = this.value ? [JSON.parse(JSON.stringify(this.value))] : []
|
} else {
|
let popList = this.value || []
|
this.result = popList.map((el) => {
|
let a = el
|
if (typeof a == 'object') {
|
a = el[this.keys]
|
}
|
return a
|
})
|
}
|
this.ListJz = JSON.parse(JSON.stringify(this.result))
|
this.ListXz = []
|
this.popList.forEach((el, index) => {
|
let type = this.result.some((a) => {
|
let elc = this.KeyType ? el[this.keys] : el
|
return elc == a
|
})
|
if (type) {
|
this.ListXz.push(JSON.parse(JSON.stringify(el)))
|
}
|
})
|
},
|
opened() {
|
this.normal = false
|
},
|
closed() {
|
this.showPicker = false
|
if (this.normal) {
|
this.ListJz = JSON.parse(JSON.stringify(this.result))
|
} else {
|
this.result = JSON.parse(JSON.stringify(this.ListJz))
|
}
|
},
|
onCancel() {
|
this.normal = false
|
this.showPicker = false
|
this.$emit('cancel')
|
},
|
onConfirm() {
|
if (this.required && this.result.length < 1) {
|
this.$toast('您还未选择')
|
return
|
}
|
this.ListXz = []
|
this.popList.forEach((el, index) => {
|
let type = this.result.some((a) => {
|
let elc = this.KeyType ? el[this.keys] : el
|
return elc == a
|
})
|
if (type) {
|
this.ListXz.push(el)
|
}
|
})
|
this.normal = true
|
let firm = null
|
if (this.valueType) {
|
//返回数组 valueType
|
firm = this.result
|
} else {
|
if (this.result.length > 0) {
|
firm = this.result[0]
|
} else {
|
firm = ''
|
}
|
}
|
this.showPicker = false
|
this.$emit('input', this.alls ? this.ListXz : firm)
|
this.$emit('toConfirm', this.ListXz)
|
|
let nameData = this.ListXz.length > 0 ? this.ListXz[0] : ''
|
let valName = (typeof nameData == 'object') ? nameData[this.showName] : nameData
|
this.$emit('update:valName', valName)
|
},
|
dissatisfactionToggle(index) {
|
if (!this.checkbox) {
|
this.result = []
|
}
|
this.$refs.dissatisfactionCheckboxes[index].toggle()
|
},
|
},
|
mounted() {
|
this.eWidth = this.$refs.echartsWrapper?.clientWidth
|
if (this.isLineFeed) {
|
this.labelWidths = this.eWidth + 'px'
|
} else {
|
this.labelWidths = this.labelWidth
|
}
|
this.inpeWidth = this.label ?
|
this.isLineFeed ?
|
this.eWidth + 'px' :
|
'calc(' + (this.eWidth - 12 + 'px') + ' - ' + this.labelWidth + ')' :
|
this.eWidth + 'px'
|
this.inpeWidthLfet = this.label ?
|
this.isLineFeed ?
|
this.eWidth + 'px' :
|
'calc(' + (this.eWidth - 12 - 20 + 'px') + ' - ' + this.labelWidth + ')' :
|
this.eWidth - 20 + 'px'
|
},
|
}
|
</script>
|
<style scoped lang="scss">
|
.bottomPopup {
|
position: fixed;
|
left: 0;
|
top: 0;
|
bottom: 0;
|
right: 0;
|
z-index: 999;
|
background-color: rgba(0, 0, 0, 0.5);
|
|
.popup-content {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
// top: 0;
|
background-color: #ffffff;
|
}
|
|
.slide-up-enter-active,
|
.slide-up-leave-active {
|
transition: all .3s ease;
|
}
|
|
.slide-up-enter,
|
.slide-up-leave-to {
|
transform: translateY(100%);
|
}
|
|
.uni-list-cell {
|
padding: 12rpx 20rpx;
|
border-bottom: 1px solid #f5f5f5;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.uni-list-cell:active {
|
background-color: #f5f5f5;
|
}
|
}
|
|
.loading {
|
text-align: center;
|
line-height: 80px;
|
}
|
|
.textR {
|
text-align: right;
|
}
|
|
.noData {
|
text-align: center;
|
line-height: 40vh;
|
color: #999;
|
}
|
|
.inputs {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.arrows {
|
width: 20px;
|
font-size: 16px;
|
margin-left: 4px;
|
line-height: 25px;
|
text-align: right;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #969799;
|
}
|
}
|
|
.checkbox {
|
line-height: 25px;
|
// padding: 5px 0px;
|
}
|
|
.showData:active {
|
background-color: #f9f9f9;
|
}
|
|
.showData {
|
width: 100%;
|
position: relative;
|
|
.showData-field-input {
|
line-height: 25px;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
width: 100%;
|
padding: 10px 0;
|
|
.showData-field-label {
|
margin-right: 12px;
|
color: #969799;
|
}
|
|
.showData-field-pu::-webkit-scrollbar {
|
display: none;
|
/* Chrome Safari */
|
}
|
|
.showData-field-pu {
|
padding-right: 5px;
|
color: #323233;
|
font-size: 14px;
|
overflow-y: hidden;
|
overflow-x: auto;
|
scrollbar-width: none;
|
/* firefox */
|
-ms-overflow-style: none;
|
/* IE 10+ */
|
white-space: nowrap;
|
}
|
}
|
|
.showData-field-line {
|
padding: 10px 0;
|
line-height: 25px;
|
width: 100%;
|
|
.showData-field-label {
|
margin-right: 12px;
|
color: #969799;
|
}
|
|
.showData-field-pu::-webkit-scrollbar {
|
display: none;
|
/* Chrome Safari */
|
}
|
|
.showData-field-pu {
|
padding-right: 5px;
|
color: #323233;
|
font-size: 14px;
|
overflow-y: hidden;
|
overflow-x: auto;
|
scrollbar-width: none;
|
/* firefox */
|
-ms-overflow-style: none;
|
/* IE 10+ */
|
white-space: nowrap;
|
}
|
}
|
|
.color96 {
|
color: #969799;
|
}
|
}
|
|
.isLine::after {
|
position: absolute;
|
content: ' ';
|
left: 0;
|
right: 0;
|
bottom: 0;
|
border-bottom: 1px solid #ebedf0;
|
-webkit-transform: scaleY(0.5);
|
transform: scaleY(0.5);
|
width: 100%;
|
}
|
|
.pop {
|
&-header {
|
height: 44px;
|
border-bottom: 1px solid #ebedf0;
|
background-color: #f7f8fa;
|
align-items: center;
|
display: flex;
|
justify-content: center;
|
font-size: 26rpx;
|
|
&-left {
|
width: 44px;
|
text-align: center;
|
color: #666;
|
}
|
|
&-right {
|
width: 44px;
|
text-align: center;
|
}
|
|
&-title {
|
flex: 4;
|
text-align: center;
|
color: 32rpx;
|
padding: 0 5px;
|
}
|
}
|
|
&-main {
|
overflow-x: hidden;
|
overflow-y: auto;
|
-webkit-overflow-scrolling: touch;
|
scroll-behavior: smooth;
|
height: 40vh;
|
}
|
}
|
</style>
|
