diff --git a/components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue b/components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue index 3f2f8a3..dbb4f65 100644 --- a/components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue +++ b/components/pages/ems/ReadObjInfo/ReadObjAddInfoTab.vue @@ -33,7 +33,6 @@ 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: { @@ -103,7 +102,7 @@ export default { this.gridInit(); }, gridInit() { - const gridHeight = this.$refs.gridParent.offsetHeight - 31; + const gridHeight = this.$refs.gridParent.offsetHeight; const myOptions = { columnOptions: { @@ -310,7 +309,7 @@ export default { type: NewCustomRenderer, }, editor: { - type: CustomEditorCheckbox, + type: NewCustomEditor, }, formatter(data) { return data.row.addInfoDataKind; diff --git a/plugins/gridUtility.js b/plugins/gridUtility.js index c63c65f..72c1f56 100644 --- a/plugins/gridUtility.js +++ b/plugins/gridUtility.js @@ -327,6 +327,10 @@ export class NewCustomEditor { } else { el.checked = false; } + + divEl.style.position = 'relative'; + divEl.style.top = rowKey === 0 ? '1px' : '3px'; + el.addEventListener('change', (ev) => { // console.log('props: %o', ev); if (ev.target.checked) { @@ -402,158 +406,3 @@ 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'); - } - - } - - } \ No newline at end of file