assets/scss/common/input.scss

@@ -1,5 +1,5 @@
 .v-select__custom {
-  padding: 0.125rem;
+  // padding: 0.125rem;
 
   &.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot {
     box-shadow: none;

components/common/AdminMenu.vue

@@ -43,16 +43,16 @@
 			<!--        </div>-->
 			<!--      </v-list-item>-->
 			<v-list-item>
-				<v-btn @click="pswdChange" small elevation="0">
+				<v-list-item-title @click="pswdChange" class="body-2">
 					<v-icon class="mr-1" size="20">mdi-account-outline</v-icon>
 					<span class="body-2">비밀번호 변경</span>
-				</v-btn>
+				</v-list-item-title>
 			</v-list-item>
 			<v-list-item>
-				<v-btn @click="logout" small elevation="0">
+				<v-list-item-title @click="logout" class="body-2">
 					<v-icon class="mr-1" size="20">mdi-logout</v-icon>
 					<span class="body-2">로그아웃</span>
-				</v-btn>
+				</v-list-item-title>
 			</v-list-item>
 		</v-list>
 	</v-menu>
@@ -105,7 +105,7 @@ export default {
 			});
 		},
 		pswdChange() {
-			this.$parent.$parent.$parent.$parent.$refs['changePswdPop'].dialog = true;
+			this.$parent.$parent.$parent.$refs['changePswdPop'].dialog = true;
 		},
 	},
 	mounted() {},

components/common/modal/ChangePswdPop.vue

@@ -104,7 +104,6 @@ export default {
 	},
 	watch: {
 		async chkDialog(val) {
-			//console.log("watch : ", val)
 			if (val) {
 				this.openDialog();
 

components/common/modal/EvtObjPop.vue

@@ -53,7 +53,7 @@
 					</v-col>
 				</v-row>
 				<!-- <div :style="'height: calc(65vh)'"> -->
-				<div :style="'height: 600px'" class="px-5">
+				<div :style="'height: 620px'" class="px-5">
 					<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
 					<div ref="modalGridParent" class="h100 py-3">
 						<!-- :is="loadGrid && dialog ? 'Grid' : null" -->

components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue

@@ -33,6 +33,7 @@ import Form from '~/components/common/form/Form';
 import mixinGlobal from '@/mixin/global.js';
 import { NewCustomRenderer } from '~/plugins/gridUtility';
 import { NewCustomEditor } from '~/plugins/gridUtility';
+import { CustomEditorCheckbox } from '~/plugins/gridUtility';
 export default {
 	mixins: [mixinGlobal],
 	components: {
@@ -122,7 +123,6 @@ export default {
 				gridKey: this.gridName,
 				value: myOptions,
 			});
-
 			const _this = this;
 			let useFgSelectList = [];
 			this.pageData.useFgList.forEach(item => {
@@ -310,7 +310,7 @@ export default {
 						type: NewCustomRenderer,
 					},
 					editor: {
-						type: NewCustomEditor,
+						type: CustomEditorCheckbox,
 					},
 					formatter(data) {
 						return data.row.addInfoDataKind;

pages/ems/effc/DataSetMngPage.vue

@@ -783,5 +783,8 @@ const dataPathDataExample = getPathDataExample({
   .v-window {
     overflow: visible;
   }
+  .ant-checkbox-inner {
+    padding: 8px;
+  }
 }
 </style>

plugins/gridUtility.js

@@ -401,4 +401,159 @@ export class NewCustomEditor {
 		// }
 		this.el.select();
 	}
-}
+}
+
+export class CustomEditorCheckbox {
+
+	constructor(props) {
+
+	const { grid, rowKey, columnInfo } = props;
+
+	this.grid = grid;
+	this.rowKey = rowKey;
+	this.columnInfo = columnInfo;
+
+	const origin = grid?.dataManager?.getOriginData?.() || grid?.dataManager?.originData || [];
+
+	this.gridOriginData = origin;
+
+	const wrap = document.createElement('div');
+	wrap.className = 'tui-grid-cell-content';
+	wrap.style.height = '100%';
+	wrap.style.display = 'flex';
+	wrap.style.justifyContent = 'center'; 
+
+	const input = document.createElement('input');
+	const rowRaw = props.grid.store.data.rawData[props.rowKey] || {};
+	const isFG = rowRaw.addInfoDataKind == 'FG';
+	const isNUM = props.formattedValue === 'NUM';
+
+	if (isFG) {
+
+		input.type = 'checkbox';
+		input.checked = String(props.value) === '1';
+		input.value = input.checked ? '1' : '0';
+		
+		wrap.style.position = 'relative';
+		wrap.style.top = rowKey === 0 ? '1px' : '3px';
+		
+		input.addEventListener('change', (ev) => {
+			const checked = ev.target.checked;
+			ev.target.value = checked ? '1' : '0';
+
+			if (!checked) {
+				const rowOrigin = this.gridOriginData[this.rowKey];
+				const originValRaw = rowOrigin ? rowOrigin[this.columnInfo.name] : null;
+				const originVal = normalizeVal(originValRaw);
+				if (originVal !== '1') {
+				ev.target.value = originVal ?? '0';
+				}
+			}
+			this._updateRowChangeState(ev.target.value);
+
+		});
+
+	} else {
+		// Text input
+		input.type = 'text';
+		input.autocomplete = 'off';
+		input.spellcheck = false;
+
+		if (isNUM) {
+		const filterToDigits = (el) => {
+			const before = el.value;
+			const after = before.replace(/[^0-9]/g, '');
+			if (before !== after) el.value = after;
+		};
+
+		input.addEventListener('input', () => filterToDigits(input));
+		input.addEventListener('blur', () => filterToDigits(input));
+
+		input.addEventListener('drop', (e) => {
+			e.preventDefault();
+			const text = (e.dataTransfer.getData('text') || '').replace(/[^0-9]/g, '');
+			const { selectionStart, selectionEnd } = input;
+			const val = input.value;
+			input.value = val.slice(0, selectionStart) + text + val.slice(selectionEnd);
+			this._updateRowChangeState(input.value);
+		});
+
+		input.addEventListener('paste', (e) => {
+			e.preventDefault();
+			const text = (e.clipboardData.getData('text') || '').replace(/[^0-9]/g, '');
+			const { selectionStart, selectionEnd } = input;
+			const val = input.value;
+			input.value = val.slice(0, selectionStart) + text + val.slice(selectionEnd);
+			this._updateRowChangeState(input.value);
+		});
+		}
+		wrap.style.justifyContent = 'flex-start';
+		input.style.width = '100%';
+		input.style.boxSizing = 'border-box';
+
+	}
+
+	wrap.appendChild(input);
+	this.divEl = wrap;
+	this.el = input;
+	this.render(props);
+
+	function normalizeVal(v) {
+		if (v === true) return '1';
+		if (v === false) return '0';
+		if (v == null) return null;
+
+		const s = String(v).trim();
+		if (s === '1' || s === '0') return s;
+		return s;
+	}
+
+	this._normalizeVal = normalizeVal;
+
+	}
+  
+	getElement() {
+	  return this.divEl;
+	}
+  
+	getValue() {
+	  if (this.el.type === 'checkbox') {
+		return this.el.checked ? '1' : '0';
+	  }
+	  return this.el.value;
+	}
+  
+	render(props) {
+	  if (this.el.type === 'checkbox') {
+		const isOne = String(props.value) === '1';
+		this.el.checked = isOne;
+		this.el.value = isOne ? '1' : '0';
+	  } else {
+		this.el.value = props.value != null ? String(props.value) : '';
+	  }
+	}
+  
+	mounted() {
+	  if (this.el.type !== 'checkbox') {
+		try { this.el.select(); } catch {}
+	  }
+	}
+  
+	_updateRowChangeState(changedRaw) {
+  
+	  const changed = this._normalizeVal(changedRaw);
+	  const rowOrigin = this.gridOriginData[this.rowKey];
+	  const originRaw = rowOrigin ? rowOrigin[this.columnInfo.name] : null;
+	  const origin = this._normalizeVal(originRaw);
+  
+	  if (origin === changed || (origin == null && (changed === '' || changed == null))) {
+		this.grid.removeRowClassName(this.rowKey, 'row-insert');
+		this.grid.setValue(this.rowKey, 'rowStat', null);
+	  } else {
+		this.grid.setValue(this.rowKey, 'rowStat', 'U');
+		this.grid.addRowClassName(this.rowKey, 'row-insert');
+	  }
+  
+	}
+  
+  }