sk_fems_ui commit

components/common/form/SelectBox.vue

@@ -0,0 +1,127 @@
+<template>
+	<v-row class="search-box" align="center" no-gutters>
+		<v-col
+			v-if="item.label"
+			cols="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 }}
+			</label>
+		</v-col>
+		<v-col :cols="item.label ? (item.textCols ? item.textCols : 7) : ''">
+			<v-select
+				v-model="selectValue"
+				:items="typeof item.list != 'string' ? item.list : myListData"
+				:item-text="typeof item.list != 'string' ? 'text' : item.itemText"
+				:item-value="typeof item.list != 'string' ? 'value' : item.itemValue"
+				outlined
+				:hide-details="true"
+				append-icon="mdi-chevron-down"
+				class="v-select__custom"
+				:disabled="item.disabled || false"
+				:readonly="item.readonly || false"
+				:required="item.required || false"
+				@change="modifyValue($event, item.valueNm)"
+			></v-select>
+		</v-col>
+	</v-row>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+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({
+			myListData(state) {
+				let list = [...state.pageData[this.parentPrgmId][this.item.list]];
+				list.forEach((item, idx) => {
+					if (item.commCdNm && item.commCdNm == '전체') {
+						list.splice(idx, 1);
+					}
+					if (this.item.addNull && idx == 0) {
+						list.unshift({
+							commCd: '',
+							commCdNm: '',
+							commCdAbbrnm: '',
+							commGrpCd: 'EM_ECC_KIND',
+						});
+					}
+				});
+				return list;
+			},
+			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'
+				];
+			},
+		}),
+		selectValue: {
+			get() {
+				return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
+			},
+			set(value) {
+				this.$emit('getValue', {
+					key: this.item.valueNm,
+					value: value,
+				});
+				return value;
+				// return this.setGridDataEdit({
+				//   gridKey: this.bindingData,
+				//   selectRow: this.selectRow,
+				//   objKey: this.item.valueNm,
+				//   value
+				// });
+			},
+		},
+	},
+	created() {},
+	methods: {
+		...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
+		modifyValue(v, n) {
+			const dt = {
+				columnName: n,
+				value: v,
+			};
+			this.$emit('gridEditingFinish', dt);
+		},
+	},
+};
+</script>
+
+<style></style>