select-dict.vue
2.22 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
<template>
<view class="select-dict">
<u-cell :title="title" is-link :required="required" @click="openPicker">
<template #value>
<render-dict v-if="value" :dict="dict" :value="value" />
<text v-else class="placeholder">{{ placeholder }}</text>
</template>
</u-cell>
<u-picker ref="picker" :show="visible" :columns="columns" @confirm="onConfirm" @cancel="onClose" :default-index="defaultIndex" immediate-change />
</view>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'SelectDict',
props: {
title: String,
dict: String,
value: [String, Number, Boolean],
required: Boolean,
options: {
type: Array,
default: () => [],
},
excludes: Array,
disabled: Boolean,
placeholder: {
type: String,
default: '请选择'
}
},
data() {
return {
visible: false,
};
},
computed: {
...mapGetters(['dictList']),
list({ 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);
},
columns({ list }) {
return [list.map(item => item.valueName)];
},
defaultIndex() {
const matchIndex = this.list.findIndex(item => item.valueCode === this.value);
return [matchIndex > -1 ? matchIndex : 0];
}
},
methods: {
openPicker() {
if (!this.disabled) {
this.visible = true;
}
},
onConfirm({ indexs = [] }) {
const index = indexs[0];
const item = this.list[index] || {};
this.visible = false;
this.$emit('input', item.valueCode);
},
onClose() {
this.visible = false;
}
},
};
</script>
<style lang="scss">
.select-dict {
.placeholder {
color: $color-text-placeholder;
font-weight: normal;
}
}
</style>