sk_fems_ui commit

components/common/form/InputNumber.vue

@@ -0,0 +1,171 @@
+<template>
+	<v-row class="search-box" align="center" no-gutters>
+		<v-col v-if="item.label" :cols="item.cols == 12 ? 2 : 4">
+			<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 :cols="item.label ? 7 : ''">
+			<!-- v-model="InputValue" -->
+			<v-text-field
+				v-model="textValue"
+				class="v-input__custom"
+				type=""
+				:disabled="
+					item.disabled ||
+						(item.elseDisabled &&
+							myBindingData &&
+							item.elseDisabled !== myBindingData.rowStat) ||
+						disabledCondition ||
+						false
+				"
+				outlined
+				:hide-details="true"
+				:readonly="item.readonly || false"
+				:required="item.required || false"
+				@keyup="modifyValue"
+			></v-text-field>
+		</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 {
+			textValue: null,
+		};
+	},
+	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"
+			//   ];
+			// }
+		}),
+		getValue() {
+			return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
+		},
+		// InputValue: {
+		//   get() {
+		//     // console.log(this.myBindingData);
+		//     return this.myBindingData ? this.myBindingData[this.item.valueNm] : " ";
+		//   },
+		//   set(value) {
+		//     let setVal = this.validateNumber(value);
+		//     console.log("setVal", setVal);
+		//     return this.newValue(setVal);
+		//   }
+		// },
+		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;
+			}
+		},
+	},
+	watch: {
+		getValue() {
+			// this.textValue = this.validateNumber(this.getValue);
+			// this.textValue = this.validateNumber(this.getValue);
+		},
+	},
+	created() {
+		// console.log(this.bindingData);
+	},
+	methods: {
+		// ...mapMutations({ setGridDataEdit: "setGridDataEdit" }),
+		modifyValue(e) {
+			let val = e.target.value.replace(/[^-.0-9]/g, '');
+
+			console.log('val : ', val);
+
+			if(this.item.min != undefined && parseFloat(val) < this.item.min){
+				val = this.item.min;
+			}
+
+			if(this.item.max != undefined && parseFloat(val) > this.item.max){
+				val = this.item.max;
+			}
+			console.log('val2 : ', val);
+
+			this.textValue = val;
+			// this.textValue = this.validateNumber(val);
+
+			const dt = {
+				columnName: this.item.valueNm,
+				value: val,
+				// value: this.newValue(val),
+			};
+			this.$emit('gridEditingFinish', dt);
+		},
+		newValue(value) {
+			let returnVal = value;
+			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;
+		},
+		validateNumber(value) {
+			let returnVal = String(value).replaceAll(',', '');
+			returnVal = Utility.setFormatInt(returnVal);
+			if (returnVal == 'NaN') returnVal = null;
+
+			return returnVal;
+		},
+	},
+};
+</script>
+
+<style></style>