|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template>
<a-row class="j-select-biz-component-box" type="flex" :gutter="8">
<a-col class="left" :class="{'full': !buttons}">
<slot name="left">
<a-select
mode="multiple"
:placeholder="placeholder"
v-model="selectValue"
:options="selectOptions"
allowClear
:disabled="disabled"
:open="selectOpen"
style="width: 100%;"
@dropdownVisibleChange="handleDropdownVisibleChange"
@click.native="visible=(buttons || disabled ?visible:true)"
/>
</slot>
</a-col>
<a-col v-if="buttons" class="right">
|
|
21
22
|
<a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{ selectButtonText }}
</a-button>
|
|
23
24
25
26
27
28
29
30
31
32
33
34
|
</a-col>
<j-select-biz-component-modal
v-model="selectValue"
:visible.sync="visible"
v-bind="modalProps"
@options="handleOptions"
/>
</a-row>
</template>
<script>
|
|
35
|
import JSelectBizComponentModal from './JSelectBizComponentModal'
|
|
36
|
|
|
37
38
39
40
41
42
43
|
export default {
name: 'JSelectBizComponent',
components: {JSelectBizComponentModal},
props: {
value: {
type: String,
default: ''
|
|
44
|
},
|
|
45
46
47
48
|
/** 是否返回 id,默认 false,返回 code */
returnId: {
type: Boolean,
default: false
|
|
49
|
},
|
|
50
51
52
|
placeholder: {
type: String,
default: '请选择'
|
|
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
103
104
105
106
107
108
109
110
111
112
113
114
|
disabled: {
type: Boolean,
default: false
},
// 是否支持多选,默认 true
multiple: {
type: Boolean,
default: true
},
// 是否显示按钮,默认 true
buttons: {
type: Boolean,
default: true
},
// 显示的 Key
displayKey: {
type: String,
default: null
},
// 返回的 key
returnKeys: {
type: Array,
default: () => ['id', 'id']
},
// 选择按钮文字
selectButtonText: {
type: String,
default: '选择'
},
},
data() {
return {
selectValue: [],
selectOptions: [],
dataSourceMap: {},
visible: false,
selectOpen: false,
}
},
computed: {
valueKey() {
return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
},
modalProps() {
return Object.assign({
valueKey: this.valueKey,
multiple: this.multiple,
returnKeys: this.returnKeys,
displayKey: this.displayKey || this.valueKey
}, this.$attrs)
},
},
watch: {
value: {
immediate: true,
handler(val) {
if (val) {
this.selectValue = val.split(',')
} else {
this.selectValue = []
|
|
115
116
117
|
}
}
},
|
|
118
119
120
121
122
123
124
125
126
127
128
|
selectValue: {
deep: true,
handler(val) {
let rows = val.map(key => this.dataSourceMap[key])
let data = val.join(',')
if (data !== this.value) {
this.$emit('select', rows)
this.$emit('input', data)
this.$emit('change', data)
}
}
|
|
129
|
}
|
|
130
131
132
133
134
135
136
137
138
139
140
141
142
|
},
methods: {
handleOptions(options, dataSourceMap) {
this.selectOptions = options
this.dataSourceMap = dataSourceMap
},
handleDropdownVisibleChange() {
// 解决antdv自己的bug —— open 设置为 false 了,点击后还是添加了 open 样式,导致点击事件失效
this.selectOpen = true
this.$nextTick(() => {
this.selectOpen = false
})
},
|
|
143
|
}
|
|
144
|
}
|
|
145
146
147
|
</script>
<style lang="less" scoped>
|
|
148
|
.j-select-biz-component-box {
|
|
149
|
|
|
150
|
@width: 82px;
|
|
151
|
|
|
152
153
154
|
.left {
width: calc(100% - @width - 8px);
}
|
|
155
|
|
|
156
157
158
|
.right {
width: @width;
}
|
|
159
|
|
|
160
161
162
|
.full {
width: 100%;
}
|
|
163
|
|
|
164
165
|
/deep/ .ant-select-search__field {
display: none !important;
|
|
166
|
}
|
|
167
|
}
|
|
168
|
</style>
|