sk_fems_ui commit

components/common/form/CheckBox.vue

@@ -0,0 +1,153 @@
+<template>
+	<v-row class="search-box" align="center" no-gutters>
+		<v-col v-if="item.label" cols="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 }}
+			</label>
+		</v-col>
+		<v-col :cols="item.label ? 7 : ''">
+			<v-checkbox
+				v-model="chkValue"
+				style= "height: 36px; align-items: center;"
+				:disabled="disabledFlag"
+				:readonly="item.readonly || false"
+				:required="item.required || false"
+				:false-value="false"
+				:color="isDarkMode ? '#fff' : '#4777d9'"
+				@change="modifyValue"
+			></v-checkbox>
+		</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 {
+			chkValue: false,
+			testData: false,
+			disabledFlag: false,
+		};
+	},
+	//rowGridSelectKey
+	computed: {
+		...mapState({
+			isDarkMode: state => state.isDarkMode,
+			myBindingData(state) {
+				// if(state.pageData[this.parentPrgmId]["rowGridSelectData"] != null){
+				//   state.pageData[this.parentPrgmId]["rowGridSelectData"][this.item.valueNm] = state.pageData[this.parentPrgmId]["rowGridSelectData"][this.item.valueNm] == "1"? true : false;
+				// }
+				// return state.pageData[this.parentPrgmId]["rowGridSelectData"];
+				if (!this.bindingData) {
+					return state.pageData[this.parentPrgmId]['rowGridSelectData'];
+				} else {
+					return state.pageData[this.parentPrgmId][this.bindingData][
+						'rowGridSelectData'
+					];
+				}
+			},
+			pageData(state) {
+				return state.pageData[this.parentPrgmId];
+			},
+			selectRow(state) {
+				return state.pageData[this.parentPrgmId][
+					this.bindingData + 'SelectKey'
+				];
+			},
+		}),
+		// checkValue: {
+		//   get() {
+		//     return this.myBindingData ? this.myBindingData[this.item.valueNm] : "";
+		//   },
+		//   set(value) {
+		//     console.log(value);
+		//     return value;
+		//     // return this.setGridDataEdit({
+		//     //   gridKey: this.bindingData,
+		//     //   selectRow: this.selectRow,
+		//     //   objKey: this.item.valueNm,
+		//     //   value
+		//     //   // value: this.getKeyByValue(this.item.value, value)
+		//     // });
+		//   }
+		// },
+		// checkValue: {
+		//   get() {
+		//     return this.myBindingData[this.selectRow]
+		//       ? this.item.value[
+		//           this.myBindingData[this.selectRow][this.item.valueNm]
+		//         ]
+		//       : false;
+		//   },
+		//   set(value) {
+		//     return this.setGridDataEdit({
+		//       gridKey: this.bindingData,
+		//       selectRow: this.selectRow,
+		//       objKey: this.item.valueNm,
+		//       value: this.getKeyByValue(this.item.value, value)
+		//     });
+		//   }
+		// }
+	},
+	watch: {
+		myBindingData: {
+			deep: true,
+			handler(val) {
+				if (val) {
+					this.chkValue = val[this.item.valueNm];
+					// 대상 유형이 'TAG' 일 때만 계산 여부 disabled 처리
+					if (
+						this.item.valueNm == 'calcFg' &&
+						val[this.item.disabledFg] == 'TAG'
+					) {
+						this.disabledFlag = true;
+					} else {
+						this.disabledFlag = this.item.disabled || false;
+					}
+				}
+			},
+		},
+	},
+	created() {},
+	methods: {
+		...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
+		// getKeyByValue(object, value) {
+		//   // 추후 utility 로 빼야할 듯,, 값을 이용해서 키를 찾는 기능
+		//   return Object.keys(object).find(key => object[key] === value);
+		// },
+		modifyValue(e) {
+			const dt = {
+				columnName: this.item.valueNm,
+				value: e,
+			};
+			this.$emit('gridEditingFinish', dt);
+		},
+	},
+};
+</script>
+
+<style></style>