|
@@ -1,17 +1,25 @@
|
|
<template>
|
|
<template>
|
|
<view class="labelColor itemBox" style="height: 45px;">
|
|
<view class="labelColor itemBox" style="height: 45px;">
|
|
<view class="item" v-for="item in filterList" :key="item[props.idValue]">
|
|
<view class="item" v-for="item in filterList" :key="item[props.idValue]">
|
|
- <uni-data-picker
|
|
|
|
- v-slot:default="{ error }"
|
|
|
|
|
|
+ <uni-data-picker
|
|
|
|
+ ref="picker"
|
|
|
|
+ v-slot:default="{ data, error }"
|
|
:localdata="item.array"
|
|
:localdata="item.array"
|
|
:clear-icon="true"
|
|
:clear-icon="true"
|
|
:popup-title="'请选择' + item[labelValue]"
|
|
:popup-title="'请选择' + item[labelValue]"
|
|
:map="item.map || { text: 'label', value: 'value' }"
|
|
:map="item.map || { text: 'label', value: 'value' }"
|
|
@change="e => handleClick(e, item)"
|
|
@change="e => handleClick(e, item)"
|
|
|
|
+ @nodeclick="handleChange"
|
|
>
|
|
>
|
|
<view v-if="error" class="error">
|
|
<view v-if="error" class="error">
|
|
<text>{{error}}</text>
|
|
<text>{{error}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view v-else-if="data.length" class="selected">
|
|
|
|
+ <view class="selected-item d-flex align-center">
|
|
|
|
+ <view class="ellipsis" style="max-width: 100rpx;">{{ data.length > 1 ? data[data.length - 1].text : data[0].text }}</view>
|
|
|
|
+ <uni-icons type="closeempty" size="18" @click="data = [], handleClear"></uni-icons>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
<view v-else>
|
|
<view v-else>
|
|
{{ item[labelValue] }}
|
|
{{ item[labelValue] }}
|
|
<uni-icons type="icon-arrow-sortdown-smal" custom-prefix="iconfont" color="#999"/>
|
|
<uni-icons type="icon-arrow-sortdown-smal" custom-prefix="iconfont" color="#999"/>
|
|
@@ -36,12 +44,19 @@ const props = defineProps({
|
|
lazy: { type: Boolean, default: false },
|
|
lazy: { type: Boolean, default: false },
|
|
})
|
|
})
|
|
|
|
|
|
|
|
+const picker = ref()
|
|
const handleClick = (e, item) => {
|
|
const handleClick = (e, item) => {
|
|
const obj = e.detail.value
|
|
const obj = e.detail.value
|
|
item.value = obj.length && obj.length === 1 ? obj[0].value : obj[obj.length - 1].value
|
|
item.value = obj.length && obj.length === 1 ? obj[0].value : obj[obj.length - 1].value
|
|
emit('change', item.key, item.value)
|
|
emit('change', item.key, item.value)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+const handleClear = () => {
|
|
|
|
+ console.log(picker.value)
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const handleChange = () => {}
|
|
|
|
+
|
|
// 获取字典数据
|
|
// 获取字典数据
|
|
const getData = (e) => {
|
|
const getData = (e) => {
|
|
getDict(e.dictType, e.map ? {} : null, e.map ? e.dictType : 'dict').then(({ data }) => {
|
|
getDict(e.dictType, e.map ? {} : null, e.map ? e.dictType : 'dict').then(({ data }) => {
|
|
@@ -70,14 +85,17 @@ watch(() => props.list,
|
|
.labelColor { color: #5c5c5c; }
|
|
.labelColor { color: #5c5c5c; }
|
|
.marginR5 { margin-right: 5px; }
|
|
.marginR5 { margin-right: 5px; }
|
|
.itemBox {
|
|
.itemBox {
|
|
|
|
+ width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
.item {
|
|
.item {
|
|
|
|
+ width: 20%;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
- margin: 0 5px;
|
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ // margin: 0 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.popup {
|
|
.popup {
|