sk_fems_ui commit
This commit is contained in:
unknown
711
components/common/Grid.vue
Normal file
711
components/common/Grid.vue
Normal file
@ -0,0 +1,711 @@
|
||||
<template>
|
||||
<tui-grid
|
||||
:ref="['tuigrid' + gridName]"
|
||||
:data="chkGridData"
|
||||
:columns="chkGridColumns"
|
||||
:options="chkGridOptions"
|
||||
@focusChange="focusChangeEvt"
|
||||
@click="startEditing"
|
||||
@editingFinish="editingFinish"
|
||||
@dblclick="dblClick"
|
||||
@mouseover="mouseoverEvent"
|
||||
@mouseout="mouseoutEvent"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
gridName: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
dataPath: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
editorGrid: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
require: false,
|
||||
},
|
||||
innerTabGridInfo: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
selectedRowDataWatchFlag: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
preventFocusChangeEventFlag: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
// gridInstance Array
|
||||
preventFocusChangeEventTargetGridList: {
|
||||
type: Array,
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
columnClickEventFlag: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
mouseoverEvent: {
|
||||
type: Function,
|
||||
default() {
|
||||
return 'Default Function';
|
||||
},
|
||||
},
|
||||
mouseoutEvent: {
|
||||
type: Function,
|
||||
default() {
|
||||
return 'Default Function';
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gridInstance: null,
|
||||
gridHeight: null,
|
||||
selecrRowKey: null,
|
||||
originData: [],
|
||||
editorStartKey: null,
|
||||
editorEndKey: null,
|
||||
scrollBody: null,
|
||||
gridScrollTop: 0,
|
||||
gridScrollLeft: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData: state => state.pageData,
|
||||
gridData(state) {
|
||||
return this.dataPath
|
||||
? this.dataPath[this.gridName]
|
||||
: state.pageData[this.parentPrgmId][this.gridName];
|
||||
},
|
||||
drawer: state => state.drawer,
|
||||
activePrgmId(state) {
|
||||
return state.activeMenuInfo.prgmId;
|
||||
},
|
||||
}),
|
||||
chkGridData() {
|
||||
// return this.pageData[this.parentPrgmId][this.gridName].data;
|
||||
return this.gridData.data;
|
||||
},
|
||||
chkGridColumns() {
|
||||
return this.gridData.column;
|
||||
},
|
||||
chkGridOptions() {
|
||||
const options = {
|
||||
...this.gridData.option,
|
||||
};
|
||||
options.treeColumnOptions = {
|
||||
useIcon: false,
|
||||
...options.treeColumnOptions,
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
defaultRow() {
|
||||
return this.gridData.defaultRow;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chkGridData(val) {
|
||||
this.$refs['tuigrid' + this.gridName].invoke('resetData', val);
|
||||
},
|
||||
innerTabGridInfo(val) {
|
||||
const _this = this;
|
||||
setTimeout(() => {
|
||||
_this.refreshLayout();
|
||||
}, 500);
|
||||
},
|
||||
activePrgmId(val) {
|
||||
const _this = this;
|
||||
setTimeout(() => {
|
||||
_this.refreshLayout();
|
||||
}, 700);
|
||||
if (val == this.parentPrgmId) {
|
||||
setTimeout(() => {
|
||||
if (!_this.innerTabGridInfo) {
|
||||
//_this.refreshLayout();
|
||||
_this.scrollBody.scrollTop = _this.gridScrollTop;
|
||||
_this.scrollBody.scrollLeft = _this.gridScrollLeft;
|
||||
} else {
|
||||
if (_this.innerTabGridInfo.tab == _this.innerTabGridInfo.idx) {
|
||||
//_this.refreshLayout();
|
||||
_this.scrollBody.scrollTop = _this.gridScrollTop;
|
||||
_this.scrollBody.scrollLeft = _this.gridScrollLeft;
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
drawer() {
|
||||
const _this = this;
|
||||
setTimeout(() => {
|
||||
_this.refreshLayout();
|
||||
}, 500);
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
async mounted() {
|
||||
// console.log(this.dataPath);
|
||||
if (this.gridName) {
|
||||
this.gridInstance = this.$refs['tuigrid' + this.gridName];
|
||||
|
||||
this.scrollBody = document
|
||||
.getElementsByClassName('tui-grid-rside-area')
|
||||
[
|
||||
document.getElementsByClassName('tui-grid-rside-area').length - 1
|
||||
].getElementsByClassName('tui-grid-body-area')[0];
|
||||
|
||||
this.scrollBody.addEventListener('scroll', e => {
|
||||
this.gridScrollTop = e.target.scrollTop;
|
||||
this.gridScrollLeft = e.target.scrollLeft;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setGridData: 'setGridData',
|
||||
}),
|
||||
// true : 현재 행 혹은 연결된 그리드가 수정중인 상태
|
||||
checkGridState() {
|
||||
var rowStatList = ['I', 'U', 'D'];
|
||||
var row = this.gridInstance.invoke('getFocusedCell');
|
||||
|
||||
if (row) {
|
||||
var rowData = this.gridInstance.invoke('getRow', row.rowKey);
|
||||
if (rowData) {
|
||||
var rowStat = rowData['rowStat'];
|
||||
if (rowStatList.includes(rowStat)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.preventFocusChangeEventTargetGridList) {
|
||||
for (var gridInstance of this.preventFocusChangeEventTargetGridList) {
|
||||
var dataArr = gridInstance.save();
|
||||
|
||||
if (dataArr.length > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
preventFocusChangeEvent(e) {
|
||||
var result = false;
|
||||
|
||||
if (this.preventFocusChangeEventFlag) {
|
||||
if (this.checkGridState()) {
|
||||
e.stop();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
columnClickEvent(e) {
|
||||
var result = false;
|
||||
|
||||
if (this.columnClickEventFlag) {
|
||||
return true;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
getCheckedRowsEvt() {
|
||||
const checkedRowDataList = this.gridInstance.invoke('getCheckedRows');
|
||||
return checkedRowDataList;
|
||||
},
|
||||
dblClick(nativeEvent) {
|
||||
if (this.preventFocusChangeEvent(nativeEvent)) {
|
||||
return;
|
||||
}
|
||||
this.$emit(
|
||||
'dblClick',
|
||||
this.gridInstance.invoke('dblclick'),
|
||||
nativeEvent,
|
||||
this.gridName,
|
||||
);
|
||||
},
|
||||
uncheckEvt(rowData, instance) {
|
||||
this.gridInstance.invoke('uncheck', rowData.rowKey, instance);
|
||||
},
|
||||
checkEvt(rowData, instance) {
|
||||
this.gridInstance.invoke('check', rowData.rowKey, instance);
|
||||
},
|
||||
setSelectionRange(rowKey) {
|
||||
const rowDatas = this.gridInstance.invoke('getData');
|
||||
rowDatas.forEach(item => {
|
||||
if (item.rowKey == rowKey) {
|
||||
this.gridInstance.invoke(
|
||||
'addRowClassName',
|
||||
item.rowKey,
|
||||
'row-selected',
|
||||
);
|
||||
} else {
|
||||
this.gridInstance.invoke(
|
||||
'removeRowClassName',
|
||||
item.rowKey,
|
||||
'row-selected',
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
focusChangeEvt(e) {
|
||||
// console.log('focusChangeEvt1...')
|
||||
if (this.preventFocusChangeEvent(e)) {
|
||||
// console.log('prevent focusChangeEvt')
|
||||
return;
|
||||
}
|
||||
// console.log('focusChangeEvt2...')
|
||||
// cell 선택시 row 선택 method
|
||||
if (e.rowKey >= 0) {
|
||||
this.$emit(
|
||||
'getRowsData',
|
||||
this.gridInstance.invoke('getRow', e.rowKey),
|
||||
this.gridName,
|
||||
e.columnName,
|
||||
);
|
||||
this.selecrRowKey = e.rowKey;
|
||||
this.setSelectionRange(e.rowKey);
|
||||
}
|
||||
this.sendSelectedRowData(e.rowKey);
|
||||
},
|
||||
startEditing(e) {
|
||||
// console.log('startEditing1...')
|
||||
if (this.preventFocusChangeEvent(e)) {
|
||||
// console.log('prevent startEditing')
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.columnClickEvent(e)) {
|
||||
this.$emit('columnClick', e, this.gridName);
|
||||
return;
|
||||
}
|
||||
|
||||
// console.log('startEditing2...')
|
||||
if (this.editorGrid && e.rowKey >= 0) {
|
||||
this.editorStartKey = e.rowKey;
|
||||
// console.log("E::", this.gridInstance.invoke("getRow", e.rowKey));
|
||||
this.gridInstance.invoke('startEditing', e.rowKey, e.columnName);
|
||||
this.$emit(
|
||||
'getRowsData',
|
||||
this.gridInstance.invoke('getRow', e.rowKey),
|
||||
this.gridName,
|
||||
e.columnName,
|
||||
);
|
||||
this.setSelectionRange(e.rowKey);
|
||||
}
|
||||
},
|
||||
async editingFinish(e) {
|
||||
// console.log("Editing END E::", e);
|
||||
// editor 간 이동시 수정되는 문제 수정
|
||||
// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
|
||||
if (this.editorGrid) {
|
||||
this.editorEndKey = Number.isInteger(e.rowKey) ? e.rowKey : null;
|
||||
if (e.rowEditingFg == undefined && this.editorStartKey >= 0) {
|
||||
if (this.editorStartKey != this.editorEndKey) {
|
||||
this.editorStartKey = null;
|
||||
this.editorEndKey = null;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
const rowIdxKey = this.editorGrid ? this.editorEndKey : this.gridInstance.invoke('getFocusedCell').rowKey
|
||||
// editor 간 이동시 수정되는 문제 수정 끝
|
||||
|
||||
const columnName = e.columnName;
|
||||
const value = e.value;
|
||||
const editingData = {
|
||||
...e,
|
||||
rowKey: rowIdxKey,
|
||||
};
|
||||
const isBaseRow = this.isBaseDataRow(rowIdxKey);
|
||||
// console.log("END E::", rowIdxKey, e);
|
||||
const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
|
||||
if (rowStat == 'D') {
|
||||
this.gridInstance.invoke(
|
||||
'removeRowClassName',
|
||||
rowIdxKey,
|
||||
'row-removed',
|
||||
);
|
||||
}
|
||||
|
||||
await this.gridInstance.invoke(
|
||||
e.rowEditingFg != undefined ? 'setValue' : this.editorGrid ? 'finishEditing' : 'setValue',
|
||||
rowIdxKey,
|
||||
columnName,
|
||||
value,
|
||||
);
|
||||
|
||||
|
||||
if (isBaseRow) {
|
||||
const isSameData = await this.compareData(editingData);
|
||||
if (isSameData) {
|
||||
this.gridInstance.invoke(
|
||||
'removeRowClassName',
|
||||
rowIdxKey,
|
||||
'row-modify',
|
||||
);
|
||||
this.updateData('clear', rowIdxKey);
|
||||
} else {
|
||||
this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-modify');
|
||||
this.updateData('modify', rowIdxKey);
|
||||
}
|
||||
}
|
||||
if (
|
||||
e.ignoreUpdateDataInfoFlag === undefined ||
|
||||
e.ignoreUpdateDataInfoFlag === false
|
||||
) {
|
||||
this.$emit('updateDataInfo', {
|
||||
rowIdxKey: rowIdxKey,
|
||||
rowStat: rowStat,
|
||||
columnName: columnName,
|
||||
value: value,
|
||||
rowData: this.gridInstance.invoke('getRow', rowIdxKey),
|
||||
});
|
||||
}
|
||||
this.sendSelectedRowData();
|
||||
},
|
||||
async addRow(setData, argRowKey) {
|
||||
// 그리드가 수정중인 상태면 addRow를 하지 않음
|
||||
if (this.preventFocusChangeEventFlag) {
|
||||
if (this.checkGridState()) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
const addData = !setData
|
||||
? this.defaultRow
|
||||
: Object.assign(this.defaultRow, setData);
|
||||
// 열 앞에 데이터 추가
|
||||
// if (argRowKey != undefined && argRowKey != null) {
|
||||
this.gridInstance.invoke('appendRow', addData, {
|
||||
focus: true,
|
||||
});
|
||||
// } else {
|
||||
// this.gridInstance.invoke('prependRow', addData, {
|
||||
// focus: true,
|
||||
// });
|
||||
// }
|
||||
// this.gridInstance.invoke('prependRow', addData, {
|
||||
// focus: true,
|
||||
// });
|
||||
this.$nextTick(() => {
|
||||
var addRowKey = this.gridInstance.invoke('getFocusedCell').rowKey;
|
||||
if (argRowKey) {
|
||||
addRowKey = argRowKey;
|
||||
}
|
||||
this.gridInstance.invoke(
|
||||
'removeRowClassName',
|
||||
addRowKey,
|
||||
'row-removed',
|
||||
);
|
||||
this.gridInstance.invoke('addRowClassName', addRowKey, 'row-insert');
|
||||
this.updateData('insert', addRowKey);
|
||||
});
|
||||
},
|
||||
async appendRow() {
|
||||
this.gridInstance.invoke('appendRow', {
|
||||
focus: true,
|
||||
});
|
||||
},
|
||||
async addTreeRow(setData) {
|
||||
// tree append의 경우 무한루프가 발행하는 버그현상으로 appendRows로 추가
|
||||
const addData = !setData
|
||||
? this.defaultRow
|
||||
: Object.assign(this.defaultRow, setData);
|
||||
|
||||
this.gridInstance.invoke('appendRows', [addData]);
|
||||
this.$nextTick(() => {
|
||||
const rowDatas = this.gridInstance.invoke('getData');
|
||||
const addRowKey = rowDatas[rowDatas.length - 1].rowKey;
|
||||
this.gridInstance.invoke(
|
||||
'removeRowClassName',
|
||||
addRowKey,
|
||||
'row-removed',
|
||||
);
|
||||
this.gridInstance.invoke('addRowClassName', addRowKey, 'row-insert');
|
||||
this.updateData('insert', addRowKey);
|
||||
this.gridInstance.invoke('focus', addRowKey);
|
||||
});
|
||||
},
|
||||
async removeRow(delType, argRowKey) {
|
||||
var rowIdxKey = this.gridInstance.invoke('getFocusedCell').rowKey;
|
||||
if (typeof argRowKey == 'number') {
|
||||
rowIdxKey = argRowKey;
|
||||
}
|
||||
const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
|
||||
if (rowStat === 'D') {
|
||||
this.gridInstance.invoke(
|
||||
'removeRowClassName',
|
||||
rowIdxKey,
|
||||
'row-removed',
|
||||
);
|
||||
this.updateData('clear', rowIdxKey);
|
||||
} else {
|
||||
if (!this.isBaseDataRow(rowIdxKey)) {
|
||||
this.gridInstance.invoke('removeRow', rowIdxKey);
|
||||
let nextFocus = Number(rowIdxKey) - 1;
|
||||
if (!this.isBaseDataRow(nextFocus)) nextFocus = 0;
|
||||
this.gridInstance.invoke('focus', nextFocus);
|
||||
} else {
|
||||
this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-removed');
|
||||
this.updateData('delete', rowIdxKey);
|
||||
|
||||
if (delType == 'immediately')
|
||||
this.gridInstance.invoke('removeRow', rowIdxKey);
|
||||
}
|
||||
}
|
||||
},
|
||||
async removeTreeRow(delType) {
|
||||
const rowIdxKey = this.gridInstance.invoke('getFocusedCell').rowKey;
|
||||
const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
|
||||
if (rowStat === 'D') {
|
||||
this.gridInstance.invoke(
|
||||
'removeRowClassName',
|
||||
rowIdxKey,
|
||||
'row-removed',
|
||||
);
|
||||
this.updateData('clear', rowIdxKey);
|
||||
} else {
|
||||
if (!this.isBaseDataRow(rowIdxKey)) {
|
||||
this.updateData('clear', rowIdxKey);
|
||||
this.gridInstance.invoke('removeRow', rowIdxKey);
|
||||
let nextFocus = Number(rowIdxKey) - 1;
|
||||
if (!this.isBaseDataRow(nextFocus)) nextFocus = 0;
|
||||
this.gridInstance.invoke('focus', nextFocus);
|
||||
} else {
|
||||
this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-removed');
|
||||
this.updateData('delete', rowIdxKey);
|
||||
|
||||
if (delType == 'immediately')
|
||||
this.gridInstance.invoke('removeRow', rowIdxKey);
|
||||
}
|
||||
}
|
||||
},
|
||||
isBaseDataRow(rowKey) {
|
||||
// 기존데이터 여부 확인 (추가된 데이터 X)
|
||||
const findRow = this.gridInstance.invoke('findRows', { rowKey: rowKey });
|
||||
return findRow && findRow[0] && findRow[0].rowStat != 'I' ? true : false;
|
||||
},
|
||||
compareData(data) {
|
||||
// rowStat key값 제거
|
||||
const dataKeyArr = Object.keys(this.defaultRow);
|
||||
const rowStatIdx = dataKeyArr.indexOf('rowStat');
|
||||
dataKeyArr.splice(rowStatIdx, 1);
|
||||
// rowStat key값 제거 끝
|
||||
|
||||
const selectedRowData = this.gridInstance.invoke('getRow', data.rowKey);
|
||||
this.getOriginData();
|
||||
|
||||
const rowData = this.originData.find(item => {
|
||||
return item.rowKey == data.rowKey;
|
||||
});
|
||||
let count = 0;
|
||||
// console.log("dataKeyArr", dataKeyArr);
|
||||
// console.log("selectedRowData", selectedRowData);
|
||||
for (let i = 0; i < dataKeyArr.length; i++) {
|
||||
// console.log(dataKeyArr[i], selectedRowData[dataKeyArr[i]], rowData[dataKeyArr[i]]);
|
||||
if (selectedRowData[dataKeyArr[i]] == rowData[dataKeyArr[i]]) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return dataKeyArr.length == count ? true : false;
|
||||
},
|
||||
getOriginData() {
|
||||
this.chkGridData.forEach(item => {
|
||||
this.originData.push(item);
|
||||
if (item._children) {
|
||||
this.getChildrenData(item._children);
|
||||
}
|
||||
});
|
||||
},
|
||||
getChildrenData(children) {
|
||||
children.forEach(item => {
|
||||
this.originData.push(item);
|
||||
if (item._children) {
|
||||
this.getChildrenData(item._children);
|
||||
}
|
||||
});
|
||||
},
|
||||
updateData(updateType, rowIdxKey) {
|
||||
let type = '';
|
||||
switch (updateType) {
|
||||
case 'insert':
|
||||
type = 'I';
|
||||
break;
|
||||
case 'modify':
|
||||
type = 'U';
|
||||
break;
|
||||
case 'delete':
|
||||
type = 'D';
|
||||
break;
|
||||
case 'clear':
|
||||
type = null;
|
||||
break;
|
||||
}
|
||||
this.gridInstance.invoke('setValue', rowIdxKey, 'rowStat', type);
|
||||
},
|
||||
// 지정 로우 선택상태
|
||||
focus(rowInfo) {
|
||||
this.gridInstance.invoke(
|
||||
'focus',
|
||||
rowInfo.rowKey,
|
||||
rowInfo.columnName,
|
||||
rowInfo.setScroll,
|
||||
);
|
||||
},
|
||||
// 트리 전체 접기
|
||||
expandAll() {
|
||||
this.gridInstance.invoke('expandAll');
|
||||
},
|
||||
// 트리 전체 펼치기
|
||||
collapseAll() {
|
||||
this.gridInstance.invoke('collapseAll');
|
||||
},
|
||||
save() {
|
||||
const saveTargetRows = this.gridInstance.invoke('getModifiedRows');
|
||||
// createdRows | deletedRows | updatedRows
|
||||
const createdRows = saveTargetRows.createdRows;
|
||||
const deletedRows = saveTargetRows.deletedRows;
|
||||
const updatedRows = saveTargetRows.updatedRows;
|
||||
const dataArr = [...createdRows, ...deletedRows, ...updatedRows]
|
||||
.filter(item => item.rowStat)
|
||||
.map(item => {
|
||||
delete item.rowKey;
|
||||
return item;
|
||||
});
|
||||
// console.log("dataArr::", dataArr, saveTargetRows);
|
||||
return dataArr;
|
||||
},
|
||||
getData() {
|
||||
return this.gridInstance.invoke('getData');
|
||||
},
|
||||
getCheckedRows() {
|
||||
return this.gridInstance.invoke('getCheckedRows');
|
||||
},
|
||||
getCheckedRowKeys() {
|
||||
return this.gridInstance.invoke('getCheckedRowKeys');
|
||||
},
|
||||
setCheck(list) {
|
||||
// console.log("setCheck:: ", list);
|
||||
list.map(item => this.gridInstance.invoke('check', item));
|
||||
},
|
||||
refreshLayout() {
|
||||
this.gridInstance.invoke('refreshLayout');
|
||||
},
|
||||
refreshGrid(){
|
||||
// console.log("refreshLayout",this.$refs['tuigrid' + this.gridName])
|
||||
var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
|
||||
var containerEl = this.$refs['tuigrid' + this.gridName].$el;
|
||||
// var containerEl = document.querySelector('.tui-grid-container')
|
||||
var parentEl = containerEl.parentElement;
|
||||
|
||||
|
||||
|
||||
// console.log("containerEl : ",containerEl);
|
||||
// console.log('parentEl : ', parentEl)
|
||||
// function refreshLayout(store, containerEl, parentEl) {
|
||||
var dimension = store.dimension;
|
||||
var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
|
||||
var clientHeight = containerEl.clientHeight, clientWidth = containerEl.clientWidth, scrollTop = containerEl.scrollTop, scrollLeft = containerEl.scrollLeft;
|
||||
var _a = containerEl.getBoundingClientRect(), top = _a.top, left = _a.left;
|
||||
this.setOffsetTop(store, top + scrollTop);
|
||||
// store.dimension.setOffsetTop = top + scrollTop;
|
||||
this.setOffsetLeft(store, left + scrollLeft);
|
||||
// store.dimension.headerHeight = left + scrollLeft;
|
||||
this.setWidth(store, clientWidth, autoWidth);
|
||||
// store.dimension.autoWidth = autoWidth;
|
||||
// store.dimension.width = clientWidth;
|
||||
// console.log("###",getComputedStyle(parentEl));
|
||||
// console.log("fitToParentHeight : ",fitToParentHeight);
|
||||
// console.log("parentEl : ",parentEl)
|
||||
// console.log("parentEl.clientHeight" , parentEl.clientHeight)
|
||||
// console.log("clientHeight : ",clientHeight);
|
||||
if (parentEl && parentEl.clientHeight !== clientHeight) {
|
||||
var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
|
||||
this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
|
||||
}
|
||||
// }
|
||||
},
|
||||
setOffsetTop(store, offsetTop) {
|
||||
// console.log("setOffsetTop");
|
||||
store.dimension.offsetTop = offsetTop;
|
||||
},
|
||||
setWidth(_a, width, autoWidth) {
|
||||
// console.log("setWidth");
|
||||
var dimension = _a.dimension;
|
||||
dimension.autoWidth = autoWidth;
|
||||
dimension.width = width;
|
||||
},
|
||||
setHeaderHeight(store, height) {
|
||||
// console.log("setHeaderHeight")
|
||||
store.dimension.headerHeight = height;
|
||||
},
|
||||
setOffsetLeft(store, offsetLeft) {
|
||||
// console.log("setOffsetLeft")
|
||||
store.dimension.offsetLeft = offsetLeft;
|
||||
},
|
||||
setHeight(_a,height){
|
||||
// console.log("setHeight");
|
||||
var dimension = _a.dimension;
|
||||
var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
|
||||
dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
|
||||
},
|
||||
sendSelectedRowData(eventRowKey) {
|
||||
if (this.selectedRowDataWatchFlag) {
|
||||
var rowKey =
|
||||
eventRowKey === undefined
|
||||
? this.gridInstance.invoke('getFocusedCell').rowKey
|
||||
: eventRowKey;
|
||||
var rowData = this.gridInstance.invoke('getRow', rowKey);
|
||||
this.$emit('sendSelectedRowStatInfo', rowData);
|
||||
}
|
||||
},
|
||||
disableRow(rowKey, withCheckBox = false) {
|
||||
this.gridInstance.invoke('disableRow', rowKey, withCheckBox);
|
||||
},
|
||||
async disabledRow(addRowKey) {
|
||||
this.$nextTick(() => {
|
||||
this.gridInstance.invoke(
|
||||
'removeRowClassName',
|
||||
addRowKey,
|
||||
'row-removed',
|
||||
);
|
||||
this.gridInstance.invoke('addRowClassName', addRowKey, 'row-disabled');
|
||||
});
|
||||
},
|
||||
// resetData() {
|
||||
// // console.log("resetData = ", this.tuigridProps.data);
|
||||
// this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .tui-grid-container {
|
||||
.tui-grid-content-area {
|
||||
.tui-grid-cell-content {
|
||||
input[type='number'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user