sk_fems_ui/components/common/form/InputText.vue

<template>
	<v-row v-if="!item.showValue" class="search-box" align="center" no-gutters>
		<v-col
			v-if="item.label"
			:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4"
			:style="item.padding ? 'padding-left:10px' : ''"
		>
			<label for="" class="search-box-label">
				<v-icon
					x-small
					:color="item.required ? '#fb8200' : 'primary'"
					class="mr-1"
					>mdi-record-circle</v-icon
				>
				{{ item.label }}
				<span v-if="item.essential">*</span>
			</label>
		</v-col>
		<v-col
			v-if="!item.hideText"
			:cols="item.textCols !== undefined ? item.textCols : item.label ? 7 : ''"
		>
			<v-text-field
				v-model="InputValue"
				class="v-input__custom"
				outlined
				:type="item.inputType || 'text'"
				:min="item.min || ''"
				:max="item.max || ''"
				:onkeyup="item.onkeyup || ''"
				:onkeydown="item.onkeydown || ''"
				:hide-details="true"
				:disabled="
					item.disabled ||
						(item.elseDisabled &&
							myBindingData &&
							item.elseDisabled !== myBindingData.rowStat) ||
						disabledCondition ||
						false
				"
				:readonly="
					item.readonly ||
						(item.elseReadonly &&
							myBindingData &&
							item.elseReadonly !== myBindingData.rowStat) ||
						readonlyCondition ||
						false
				"
				:required="item.required || false"
				:placeholder="item.placeholder"
				@input="modifyValue($event, item.valueNm)"
				@click="onClick($event, item, item.valueNm)"
			></v-text-field>
		</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 } from 'vuex';
import Utility from '~/plugins/utility';
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({
			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"
			//   ];
			// }
		}),
		InputValue: {
			get() {
				// console.log(this.myBindingData);
				return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
			},
			set(value) {
				this.$emit('getValue', {
					key: this.item.valueNm,
					value: value,
				});
				return this.newValue(value);
			},
		},
		disabledCondition() {
			if (this.myBindingData && this.item.disabledCondition) {
				let isDisabled = false;
				this.item.disabledCondition.forEach(condition => {
					if (this.myBindingData[condition.dataKey] == condition.value) {
						isDisabled = true;
					}
				});
				return isDisabled;
			} else {
				return false;
			}
		},
		readonlyCondition() {
			if (this.myBindingData && this.item.readonlyCondition) {
				let isReadonly = false;
				this.item.readonlyCondition.forEach(condition => {
					if (this.myBindingData[condition.dataKey] == condition.value) {
						isReadonly = true;
					}
				});
				return isReadonly;
			} else {
				return false;
			}
		},
	},
	watch: {},
	created() {
		// console.log(this.bindingData);
	},
	methods: {
		// ...mapMutations({ setGridDataEdit: "setGridDataEdit" }),
		modifyValue(v, n) {
			// console.log(this.newValue(v));

			const dt = {
				columnName: n,
				// value: v.trim()
				value: this.newValue(v),
			};
			this.$emit('gridEditingFinish', dt);
		},
		newValue(value) {
			let returnVal = value.trim();
			if (this.item.decimalPlaces) {
				const x = returnVal.replace('.', '');
				const y = 10 ** -this.item.decimalPlaces;
				let z = x * y;
				// console.log(x * y);
				if (z === 0) {
					z = 10 ** -(this.item.decimalPlaces + 1);
				}
				// console.log(Utility.setFormatDecimal(z, this.item.decimalPlaces));
				returnVal = Utility.setFormatDecimal(z, this.item.decimalPlaces);
			}
			return returnVal;
		},
		onClick(event, item, valueNm) {
			this.$emit('inputClick', event, item, valueNm);
		},
	},
};
</script>

<style></style>