sk_fems_ui commit

components/common/form/InputText.vue

@@ -0,0 +1,182 @@
+<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>