sk_fems_ui commit

components/common/form/TextArea.vue

@@ -0,0 +1,114 @@
+<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' : ''"
+		>
+			<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>
+			<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)"
+			></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>