<template>
|
<div>
|
<a-row class="j-select-row" type="flex" :gutter="8">
|
<a-col class="left" :class="{ full: !showButton }">
|
<!-- 显示加载效果 -->
|
<a-input v-if="loading" readOnly placeholder="加载中…">
|
<template #prefix>
|
<LoadingOutlined />
|
</template>
|
</a-input>
|
<a-select
|
v-else
|
ref="select"
|
v-model:value="selectValues.value"
|
:placeholder="placeholder"
|
:mode="multiple"
|
:open="false"
|
:disabled="disabled"
|
:options="options"
|
:maxTagCount="maxTagCount"
|
@change="handleChange"
|
style="width: 100%"
|
@click="!disabled && openModal(false)"
|
v-bind="attrs"
|
></a-select>
|
</a-col>
|
<a-col v-if="showButton" class="right">
|
<a-button v-if="buttonIcon" :preIcon="buttonIcon" type="primary" @click="openModal(true)" :disabled="disabled">选择</a-button>
|
<a-button v-else type="primary" @click="openModal(true)" :disabled="disabled">选择</a-button>
|
</a-col>
|
</a-row>
|
</div>
|
</template>
|
<script lang="ts">
|
import { defineComponent, ref, inject, reactive } from 'vue';
|
import { propTypes } from '/@/utils/propTypes';
|
import { useAttrs } from '/@/hooks/core/useAttrs';
|
import { LoadingOutlined } from '@ant-design/icons-vue';
|
|
export default defineComponent({
|
name: 'JSelectBiz',
|
components: { LoadingOutlined },
|
inheritAttrs: false,
|
props: {
|
showButton: propTypes.bool.def(true),
|
disabled: propTypes.bool.def(false),
|
placeholder: {
|
type: String,
|
default: '请选择',
|
},
|
// 是否支持多选，默认 true
|
multiple: {
|
type: String,
|
default: 'multiple',
|
},
|
// 是否正在加载
|
loading: propTypes.bool.def(false),
|
// 最多显示多少个 tag
|
maxTagCount: propTypes.number,
|
// buttonIcon
|
buttonIcon: propTypes.string.def(''),
|
},
|
emits: ['handleOpen', 'change'],
|
setup(props, { emit, refs }) {
|
//接收下拉框选项
|
const options = inject('selectOptions') || ref([]);
|
//接收选择的值
|
const selectValues = inject('selectValues') || ref({});
|
const attrs = useAttrs();
|
|
/**
|
* 打开弹出框
|
*/
|
function openModal(isButton) {
|
if (props.showButton && isButton) {
|
emit('handleOpen');
|
}
|
if (!props.showButton && !isButton) {
|
emit('handleOpen');
|
}
|
}
|
|
/**
|
* 下拉框值改变事件
|
*/
|
function handleChange(value) {
|
selectValues.value = value;
|
selectValues.change = true;
|
emit('change', value);
|
}
|
|
return {
|
attrs,
|
selectValues,
|
options,
|
handleChange,
|
openModal,
|
};
|
},
|
});
|
</script>
|
<style lang="less" scoped>
|
.j-select-row {
|
@width: 82px;
|
|
.left {
|
width: calc(100% - @width - 8px);
|
}
|
|
.right {
|
width: @width;
|
}
|
|
.full {
|
width: 100%;
|
}
|
|
:deep(.ant-select-search__field) {
|
display: none !important;
|
}
|
}
|
</style>
|
