128 lines
3.0 KiB
Vue
128 lines
3.0 KiB
Vue
<template>
|
|
<v-row class="search-box" align="center">
|
|
<v-col v-if="item.label" :cols="item.label ? (item.textCols ? item.textCols : 4) : ''"
|
|
:style="item.padding ? 'padding-left:10px' : ''" class="py-0">
|
|
<label for="" class="search-box-label">
|
|
<v-icon
|
|
v-if="item.iconShow"
|
|
small
|
|
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
|
>$icoBulletPoint</v-icon
|
|
>
|
|
{{ item.label }}
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="item.label ? (item.textCols ? item.textCols : 8) : ''" class="py-0">
|
|
<v-select v-model="selectValue" :items="typeof item.list != 'string' ? item.list : myListData"
|
|
:item-text="typeof item.list != 'string' ? 'text' : item.itemText"
|
|
:item-value="typeof item.list != 'string' ? 'value' : item.itemValue" outlined :hide-details="true"
|
|
class="v-select__custom" :disabled="item.disabled || false" :readonly="item.readonly || false"
|
|
:required="item.required || false" @change="modifyValue($event, item.valueNm)" append-icon="">
|
|
|
|
<template v-slot:append>
|
|
<!-- Custom SVG icon -->
|
|
<v-icon>$icoChevronDown</v-icon>
|
|
|
|
|
|
</template>
|
|
</v-select>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations } from 'vuex';
|
|
export default {
|
|
props: {
|
|
parentPrgmId: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
bindingData: {
|
|
type: String,
|
|
require: false,
|
|
},
|
|
item: {
|
|
type: Object,
|
|
require: true,
|
|
},
|
|
// myGrid: {
|
|
// require: true
|
|
// }
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
myListData(state) {
|
|
try{
|
|
let list = [...state.pageData[this.parentPrgmId][this.item.list]];
|
|
list.forEach((item, idx) => {
|
|
if (item.commCdNm && item.commCdNm == '전체') {
|
|
list.splice(idx, 1);
|
|
}
|
|
if (this.item.addNull && idx == 0) {
|
|
list.unshift({
|
|
commCd: '',
|
|
commCdNm: '',
|
|
commCdAbbrnm: '',
|
|
commGrpCd: 'EM_ECC_KIND',
|
|
});
|
|
}
|
|
});
|
|
return list;
|
|
}catch(err) {
|
|
return [];
|
|
}
|
|
},
|
|
myBindingData(state) {
|
|
if (!this.bindingData) {
|
|
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
|
} else {
|
|
return state.pageData[this.parentPrgmId][this.bindingData][
|
|
'rowGridSelectData'
|
|
];
|
|
}
|
|
},
|
|
selectRow(state) {
|
|
return state.pageData[this.parentPrgmId][
|
|
this.bindingData + 'SelectKey'
|
|
];
|
|
},
|
|
}),
|
|
selectValue: {
|
|
get() {
|
|
return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
|
|
},
|
|
set(value) {
|
|
this.$emit('getValue', {
|
|
key: this.item.valueNm,
|
|
value: value,
|
|
});
|
|
return value;
|
|
// return this.setGridDataEdit({
|
|
// gridKey: this.bindingData,
|
|
// selectRow: this.selectRow,
|
|
// objKey: this.item.valueNm,
|
|
// value
|
|
// });
|
|
},
|
|
},
|
|
},
|
|
created() { },
|
|
methods: {
|
|
...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
|
|
modifyValue(v, n) {
|
|
const dt = {
|
|
columnName: n,
|
|
value: v,
|
|
};
|
|
this.$emit('gridEditingFinish', dt);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|