dbsd_kczx_java/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/index.vue

167 lines
3.8 KiB
Java
Raw Normal View History

<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"
:open="selectOpen"
2019-12-25 13:25:10 +08:00
style="width: 100%;"
@dropdownVisibleChange="handleDropdownVisibleChange"
2019-12-25 13:25:10 +08:00
@click.native="visible=(buttons?visible:true)"
/>
</slot>
</a-col>
2019-11-21 18:17:25 +08:00
<a-col v-if="buttons" class="right">
<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"
/>
</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
},
// 显示的 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: {},
visible: false,
selectOpen: false,
}
},
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)
},
},
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(',')
if (data !== this.value) {
this.$emit('select', rows)
this.$emit('input', data)
this.$emit('change', data)
}
}
}
},
2019-12-25 13:25:10 +08:00
methods: {
handleOptions(options, dataSourceMap) {
this.selectOptions = options
this.dataSourceMap = dataSourceMap
},
handleDropdownVisibleChange() {
// 解决antdv自己的bug —— open 设置为 false 了,点击后还是添加了 open 样式,导致点击事件失效
this.selectOpen = true
this.$nextTick(() => {
this.selectOpen = false
})
},
2019-12-25 13:25:10 +08:00
}
}
</script>
<style lang="less" scoped>
.j-select-biz-component-box {
@width: 82px;
.left {
width: calc(100% - @width - 8px);
}
.right {
width: @width;
}
2019-11-21 18:17:25 +08:00
.full {
width: 100%;
}
2019-12-25 13:25:10 +08:00
/deep/ .ant-select-search__field {
display: none !important;
}
}
</style>