picker-dict.vue
2.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
<u-picker ref="picker" :show="show" :columns="columns" @confirm="onConfirm" @cancel="onClose"
keyName="valueName" :defaultIndex="defaultIndex" immediate-change>
</u-picker>
</template>
<script>
import {
mapGetters
} from 'vuex'
export default {
props: {
value: [String, Number, Boolean],
dict: String,
visible: {
type: Boolean,
default: false
},
options: {
type: Array,
default: () => [],
},
excludes: Array,
},
data() {
return {
show: this.visible,
defaultIndex: []
}
},
computed: {
...mapGetters(['dictInfo', 'dictList']),
columns({
dictOptions
}) {
return [dictOptions.map(item => item.valueName)];
},
dictOptions({
dict,
dictList,
excludes = [],
options = []
}) {
let hash = {};
const matchDictList = dictList(dict) || [];
return [...matchDictList, ...options]
.reduce((result, item) => {
if (!hash[`${item.valueCode}`]) {
hash[`${item.valueCode}`] = true;
if (`${item.valueCode || ''}` && `${item.valueName || ''}` && !excludes.includes(item
.valueCode)) {
result.push(item);
}
}
return result; // 返回结果数组
}, [])
.sort((a, b) => a.sort - b.sort);
},
},
watch: {
value: {
handler(val) {
this.$nextTick(() => {
this.refresh(this.value);
})
},
immediate: true,
},
visible(val) {
this.show = val
}
},
methods: {
refresh(value) {
const matchIndex = this.dictOptions.findIndex(item => item.valueCode === value);
const defaultIndex = matchIndex > -1 ? matchIndex : 0;
this.defaultIndex = [defaultIndex]
},
onClose() {
this.show = false
this.$emit('update:visible', false)
},
onConfirm(item) {
const {
indexs
} = item || {}
const target = this.dictOptions || []
const valueMap = target[indexs] || {}
this.$emit('change', valueMap.valueCode)
this.onClose()
}
}
}
</script>
<style lang="scss">
.u-popup__content {
border-top-left-radius: 4% !important;
border-top-right-radius: 4% !important;
}
</style>