|
|
1
2
|
<template>
<a-row class="j-select-biz-component-box" type="flex" :gutter="8">
|
|
|
3
|
<a-col class="left" :class="{'full': !buttons}">
|
|
|
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<slot name="left">
<a-select
mode="multiple"
:placeholder="placeholder"
v-model="selectValue"
:options="selectOptions"
allowClear
:disabled="disabled"
:open="false"
style="width: 100%;"
@click.native="visible=(buttons?visible:true)"
/>
</slot>
|
|
|
17
18
|
</a-col>
|
|
|
19
|
<a-col v-if="buttons" class="right">
|
|
|
20
21
22
23
24
25
|
<a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button>
</a-col>
<j-select-biz-component-modal
v-model="selectValue"
:visible.sync="visible"
|
|
|
26
27
|
v-bind="modalProps"
@options="handleOptions"
|
|
|
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
|
/>
</a-row>
</template>
<script>
import JSelectBizComponentModal from './JSelectBizComponentModal'
export default {
name: 'JSelectBizComponent',
components: { JSelectBizComponentModal },
props: {
value: {
type: String,
default: ''
},
/** 是否返回 id，默认 false，返回 code */
returnId: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: '请选择'
},
disabled: {
type: Boolean,
default: false
},
// 是否支持多选，默认 true
multiple: {
type: Boolean,
default: true
},
|
|
|
61
62
63
64
65
|
// 是否显示按钮，默认 true
buttons: {
type: Boolean,
default: true
},
|
|
|
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
// 显示的 Key
displayKey: {
type: String,
default: null
},
// 返回的 key
returnKeys: {
type: Array,
default: () => ['id', 'id']
},
// 选择按钮文字
selectButtonText: {
type: String,
default: '选择'
},
},
data() {
return {
selectValue: [],
selectOptions: [],
|
|
|
87
|
dataSourceMap: {},
|
|
|
88
89
90
91
92
93
|
visible: false
}
},
computed: {
valueKey() {
return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
|
|
|
94
95
96
97
98
99
100
101
102
|
},
modalProps() {
return Object.assign({
valueKey: this.valueKey,
multiple: this.multiple,
returnKeys: this.returnKeys,
displayKey: this.displayKey || this.valueKey
}, this.$attrs)
},
|
|
|
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
},
watch: {
value: {
immediate: true,
handler(val) {
if (val) {
this.selectValue = val.split(',')
} else {
this.selectValue = []
}
}
},
selectValue: {
deep: true,
handler(val) {
|
|
|
118
119
120
|
let rows = val.map(key => this.dataSourceMap[key])
this.$emit('select', rows)
let data = val.join(',')
|
|
|
121
122
123
124
125
|
this.$emit('input', data)
this.$emit('change', data)
}
}
},
|
|
|
126
127
128
129
130
131
|
methods: {
handleOptions(options, dataSourceMap) {
this.selectOptions = options
this.dataSourceMap = dataSourceMap
},
}
|
|
|
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
}
</script>
<style lang="scss" scoped>
.j-select-biz-component-box {
$width: 82px;
.left {
width: calc(100% - #{$width} - 8px);
}
.right {
width: #{$width};
}
|
|
|
147
148
149
150
|
.full {
width: 100%;
}
|
|
|
151
152
153
154
155
156
|
/deep/ {
.ant-select-search__field {
display: none !important;
}
}
|
|
|
157
158
|
}
</style>
|
