2019-10-18 18:37:41 +08:00
|
|
|
|
<template>
|
|
|
|
|
<a-row class="j-select-biz-component-box" type="flex" :gutter="8">
|
2019-11-21 18:17:25 +08:00
|
|
|
|
<a-col class="left" :class="{'full': !buttons}">
|
2019-12-25 13:25:10 +08:00
|
|
|
|
<slot name="left">
|
|
|
|
|
<a-select
|
|
|
|
|
mode="multiple"
|
|
|
|
|
:placeholder="placeholder"
|
|
|
|
|
v-model="selectValue"
|
|
|
|
|
:options="selectOptions"
|
|
|
|
|
allowClear
|
|
|
|
|
:disabled="disabled"
|
2020-05-03 12:43:53 +08:00
|
|
|
|
:open="selectOpen"
|
2019-12-25 13:25:10 +08:00
|
|
|
|
style="width: 100%;"
|
2020-05-03 12:43:53 +08:00
|
|
|
|
@dropdownVisibleChange="handleDropdownVisibleChange"
|
2019-12-25 13:25:10 +08:00
|
|
|
|
@click.native="visible=(buttons?visible:true)"
|
|
|
|
|
/>
|
|
|
|
|
</slot>
|
2019-10-18 18:37:41 +08:00
|
|
|
|
</a-col>
|
|
|
|
|
|
2019-11-21 18:17:25 +08:00
|
|
|
|
<a-col v-if="buttons" class="right">
|
2019-10-18 18:37:41 +08:00
|
|
|
|
<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"
|
2019-12-25 13:25:10 +08:00
|
|
|
|
v-bind="modalProps"
|
|
|
|
|
@options="handleOptions"
|
2019-10-18 18:37:41 +08:00
|
|
|
|
/>
|
|
|
|
|
</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
|
|
|
|
|
},
|
2019-11-21 18:17:25 +08:00
|
|
|
|
// 是否显示按钮,默认 true
|
|
|
|
|
buttons: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: true
|
|
|
|
|
},
|
2019-10-18 18:37:41 +08:00
|
|
|
|
// 显示的 Key
|
|
|
|
|
displayKey: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: null
|
|
|
|
|
},
|
|
|
|
|
// 返回的 key
|
|
|
|
|
returnKeys: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => ['id', 'id']
|
|
|
|
|
},
|
|
|
|
|
// 选择按钮文字
|
|
|
|
|
selectButtonText: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '选择'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
selectValue: [],
|
|
|
|
|
selectOptions: [],
|
2019-12-25 13:25:10 +08:00
|
|
|
|
dataSourceMap: {},
|
2020-05-03 12:43:53 +08:00
|
|
|
|
visible: false,
|
|
|
|
|
selectOpen: false,
|
2019-10-18 18:37:41 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
valueKey() {
|
|
|
|
|
return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
|
2019-12-25 13:25:10 +08:00
|
|
|
|
},
|
|
|
|
|
modalProps() {
|
|
|
|
|
return Object.assign({
|
|
|
|
|
valueKey: this.valueKey,
|
|
|
|
|
multiple: this.multiple,
|
|
|
|
|
returnKeys: this.returnKeys,
|
|
|
|
|
displayKey: this.displayKey || this.valueKey
|
|
|
|
|
}, this.$attrs)
|
|
|
|
|
},
|
2019-10-18 18:37:41 +08:00
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
value: {
|
|
|
|
|
immediate: true,
|
|
|
|
|
handler(val) {
|
|
|
|
|
if (val) {
|
|
|
|
|
this.selectValue = val.split(',')
|
|
|
|
|
} else {
|
|
|
|
|
this.selectValue = []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
selectValue: {
|
|
|
|
|
deep: true,
|
|
|
|
|
handler(val) {
|
2019-12-25 13:25:10 +08:00
|
|
|
|
let rows = val.map(key => this.dataSourceMap[key])
|
|
|
|
|
let data = val.join(',')
|
2020-07-11 12:54:57 +08:00
|
|
|
|
if (data !== this.value) {
|
|
|
|
|
this.$emit('select', rows)
|
|
|
|
|
this.$emit('input', data)
|
|
|
|
|
this.$emit('change', data)
|
|
|
|
|
}
|
2019-10-18 18:37:41 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
2019-12-25 13:25:10 +08:00
|
|
|
|
methods: {
|
|
|
|
|
handleOptions(options, dataSourceMap) {
|
|
|
|
|
this.selectOptions = options
|
|
|
|
|
this.dataSourceMap = dataSourceMap
|
|
|
|
|
},
|
2020-05-03 12:43:53 +08:00
|
|
|
|
handleDropdownVisibleChange() {
|
|
|
|
|
// 解决antdv自己的bug —— open 设置为 false 了,点击后还是添加了 open 样式,导致点击事件失效
|
|
|
|
|
this.selectOpen = true
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.selectOpen = false
|
|
|
|
|
})
|
|
|
|
|
},
|
2019-12-25 13:25:10 +08:00
|
|
|
|
}
|
2019-10-18 18:37:41 +08:00
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
2020-03-04 22:37:17 +08:00
|
|
|
|
<style lang="less" scoped>
|
2019-10-18 18:37:41 +08:00
|
|
|
|
.j-select-biz-component-box {
|
|
|
|
|
|
2020-03-04 22:37:17 +08:00
|
|
|
|
@width: 82px;
|
2019-10-18 18:37:41 +08:00
|
|
|
|
|
|
|
|
|
.left {
|
2020-03-04 22:37:17 +08:00
|
|
|
|
width: calc(100% - @width - 8px);
|
2019-10-18 18:37:41 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
2020-05-03 12:43:53 +08:00
|
|
|
|
width: @width;
|
2019-10-18 18:37:41 +08:00
|
|
|
|
}
|
2019-11-21 18:17:25 +08:00
|
|
|
|
|
|
|
|
|
.full {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2019-12-25 13:25:10 +08:00
|
|
|
|
|
2020-03-04 22:37:17 +08:00
|
|
|
|
/deep/ .ant-select-search__field {
|
2020-05-03 12:43:53 +08:00
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
2019-10-18 18:37:41 +08:00
|
|
|
|
}
|
|
|
|
|
</style>
|