Files
sk_fems_ui/components/common/search/SearchSelect.vue
2025-07-12 15:13:46 +09:00

113 lines
2.2 KiB
Vue

<template>
<v-row
class="search-box"
align="center"
no-gutters
style="margin: 14px 0px 0px"
>
<v-col v-if="item.label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
{{ item.label }}
</label>
</v-col>
<v-col :cols="labelCols ? 11 - labelCols : ''">
<v-select
v-model="selectValue"
:items="searchParam[item.resKey + 'List']"
item-text="text"
item-value="code"
solo
outlined
:hide-details="true"
append-icon="mdi-chevron-down"
class="v-select__custom"
></v-select>
</v-col>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
},
item: {
type: Object,
require: true,
},
},
data() {
return {};
},
computed: {
...mapState({
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
}),
selectValue: {
get() {
return this.searchParam[this.item.resKey];
},
set(value) {
return this.setPageData({ [this.item.resKey]: value });
},
},
labelCols() {
let myCols = 0;
if (this.item.label) {
myCols = this.item.labelCols || '4';
}
return myCols;
},
// chkVlue() {
// return this.searchParam.blocId;
// },
chkBefoerLoad() {
return this.item.befoerLoad
? this.searchParam[this.item.befoerLoad]
: null;
},
},
watch: {
selectValue() {
if (this.item.autoLoad) this.setPageData({ isFind: true });
},
chkBefoerLoad() {
if (this.item.befoerLoad)
this.loadData(
Object.assign(this.item.sendParam, {
[this.item.paramKey]: this.searchParam[this.item.befoerLoad],
}),
);
},
},
created() {
if (!this.item.befoerLoad) this.loadData(this.item.sendParam || {});
},
methods: {
...mapMutations({ setPageData: 'setPageData' }),
...mapActions({
getSearchList: 'modules/search/getSearchList',
}),
loadData(params) {
this.getSearchList({
apiKey: this.item.apiKey,
resKey: this.item.resKey,
dataCd: this.item.dataCd,
dataNm: this.item.dataNm,
addAll: this.item.addAll,
params,
// addAll: this.item.addAll || false
});
},
},
};
</script>
<style></style>