sk_fems_ui/components/common/form/InputText.vue

<template>
	<v-row v-if="!item.showValue" class="search-box" align="center">
		<v-col
			v-if="item.label"
			:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 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 }}
				<span v-if="item.essential">*</span>
			</label>
		</v-col>
		<v-col class="py-0" v-if="!item.hideText" :cols="item.textCols !== undefined ? item.textCols : item.label ? 8 : ''" :style="item.noText ? 'padding-top:0px' : ''">
			<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>