Files
sk_fems_ui/components/common/select/SelectBox.vue
2025-07-22 09:58:38 +07:00

118 lines
2.2 KiB
Vue

<template>
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-select v-model="innerValue" :items="itemList" item-text="text" item-value="value" solo outlined
:hide-details="true" append-icon="" :class="['v-select__custom', customClass]" :disabled="disabled"
:readonly="readonly"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoChevronDown</v-icon>
</template></v-select>
<!-- @change="updateBlocCode($event)" -->
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
props: {
autoLoad: {
type: Boolean,
require: false,
default: true,
},
label: {
type: String,
require: false,
default: null,
},
textCols: {
type: Number,
require: false,
default: 12,
},
labelCols: {
type: Number,
require: false,
default: 12,
},
itemList: {
type: Array,
require: true,
default: () => [],
},
propsValue: {
type: String,
require: true,
default: null,
},
required: {
type: Boolean,
require: false,
default: false
},
iconShow: {
type: Boolean,
require: false,
default: true
},
disabled: {
type: Boolean,
require: false,
default: false
},
readonly: {
type: Boolean,
require: false,
default: false
},
customClass: {
type: String,
require: false,
},
},
emits: ['update:propsValue'],
data() {
return {};
},
computed: {
...mapState({
searchParam: state => state.pageData,
}),
innerValue: {
get() {
return this.propsValue;
},
set(value) {
// console.log('value[setValue] : ', value)
this.$emit('update:propsValue', value);
},
},
},
created() {
// console.log('created SelectBox')
// console.log('itemList : ', this.itemList);
// console.log('propsValue : ', this.propsValue);
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
...mapActions({}),
},
};
</script>
<style></style>