1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
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
| <template>
| <div>
| <a-row class="j-select-row" type="flex" :gutter="8">
| <a-col class="left" :class="{ full: !showButton }">
| <a-select
| ref="select"
| v-model:value="selectValues.value"
| :mode="multiple"
| :open="false"
| :options="options"
| @change="handleChange"
| style="width: 100%"
| />
| </a-col>
| <a-col v-if="showButton" class="right">
| <a-button type="primary" @click="openModal">选择</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';
|
| export default defineComponent({
| name: 'JSelectBiz',
| components: {},
| inheritAttrs: false,
| props: {
| showButton: propTypes.bool.def(true),
| // 是否支持多选，默认 true
| multiple: {
| type: Boolean,
| default: 'multiple',
| },
| },
| emits: ['btnOk'],
| setup(props, { emit, refs }) {
| //接收下拉框选项
| const options = inject('selectOptions') || ref([]);
| //接收选择的值
| const selectValues = inject('selectValues') || ref({});
| const attrs = useAttrs();
|
| /**
| * 打开弹出框
| */
| function openModal() {
| emit('btnOk');
| }
|
| /**
| * 下拉框值改变事件
| */
| function handleChange(value) {
| selectValues.value = value;
| selectValues.change = true;
| }
|
| 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>
|
|
