116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
<template>
|
|
<v-row class="search-box" align="center" no-gutters>
|
|
<v-col
|
|
v-if="item.label"
|
|
:cols="item.cols == 12 ? 2 : 4"
|
|
:style="item.padding ? 'padding-left:10px' : ''"
|
|
class="mb-2"
|
|
>
|
|
<label for="" class="search-box-label">
|
|
<v-icon
|
|
small
|
|
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
|
>$icoBulletPoint</v-icon
|
|
>
|
|
{{ item.label }}
|
|
<span v-if="item.essential">*</span>
|
|
</label>
|
|
<span v-if="item.maxlength" class="search-box-label body-2">
|
|
({{ InputValue ? InputValue.length : 0 }}/{{ item.maxlength }}자)
|
|
</span>
|
|
</v-col>
|
|
<v-col :cols="item.label ? (item.textCols ? item.textCols : 7) : ''">
|
|
<v-textarea
|
|
v-model="InputValue"
|
|
class="v-input__custom"
|
|
:rows="item.rows"
|
|
:disabled="
|
|
item.disabled ||
|
|
(item.elseDisabled &&
|
|
myBindingData &&
|
|
item.elseDisabled !== myBindingData.rowStat) ||
|
|
false
|
|
"
|
|
:readonly="
|
|
item.readonly ||
|
|
(item.elseReadonly &&
|
|
myBindingData &&
|
|
item.elseReadonly !== myBindingData.rowStat) ||
|
|
false
|
|
"
|
|
:required="item.required || false"
|
|
:maxlength="item.maxlength"
|
|
@input="modifyValue($event, item.valueNm)"
|
|
outlined
|
|
></v-textarea>
|
|
</v-col>
|
|
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
|
|
<label for="" class="search-box-label px-1">
|
|
({{ InputValue.length }} / {{ item.lengthCheck.maxLength }})
|
|
</label>
|
|
</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,
|
|
},
|
|
bindingData: {
|
|
type: String,
|
|
require: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
myBindingData(state) {
|
|
if (!this.bindingData) {
|
|
return state.pageData[this.parentPrgmId].rowGridSelectData;
|
|
} else {
|
|
return state.pageData[this.parentPrgmId][this.bindingData]
|
|
.rowGridSelectData;
|
|
}
|
|
},
|
|
}),
|
|
InputValue: {
|
|
get() {
|
|
return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
|
|
},
|
|
set(value) {
|
|
this.$emit('getValue', {
|
|
key: this.item.valueNm,
|
|
value: value,
|
|
});
|
|
return value;
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
setPageData: 'setPageData',
|
|
}),
|
|
modifyValue(v, n) {
|
|
const dt = {
|
|
columnName: n,
|
|
value: v,
|
|
};
|
|
this.$emit('gridEditingFinish', dt);
|
|
this.setPageData({ [n] : v})
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|