fix bug grid not load when change menu tab #55

Merged
dev merged 2 commits from dev-manhph1-figbug into dev 2025-08-11 16:55:43 +09:00
3 changed files with 41 additions and 39 deletions

View File

@ -158,7 +158,7 @@ export default {
}, 500); }, 500);
}, },
}, },
created() {}, created() { },
async mounted() { async mounted() {
// console.log(this.dataPath); // console.log(this.dataPath);
if (this.gridName) { if (this.gridName) {
@ -166,9 +166,9 @@ export default {
this.scrollBody = document this.scrollBody = document
.getElementsByClassName('tui-grid-rside-area') .getElementsByClassName('tui-grid-rside-area')
[ [
document.getElementsByClassName('tui-grid-rside-area').length - 1 document.getElementsByClassName('tui-grid-rside-area').length - 1
].getElementsByClassName('tui-grid-body-area')[0]; ].getElementsByClassName('tui-grid-body-area')[0];
this.scrollBody.addEventListener('scroll', e => { this.scrollBody.addEventListener('scroll', e => {
this.gridScrollTop = e.target.scrollTop; this.gridScrollTop = e.target.scrollTop;
@ -606,18 +606,20 @@ export default {
list.map(item => this.gridInstance.invoke('check', item)); list.map(item => this.gridInstance.invoke('check', item));
}, },
refreshLayout() { refreshLayout() {
// console.log("---------DEBUG---refreshLayout: "); setTimeout(() => {
this.gridInstance.invoke('refreshLayout'); this.gridInstance.invoke('refreshLayout');
}, 150);
// this.gridInstance.invoke('refreshLayout');
}, },
refreshGrid(){ refreshGrid() {
// console.log("refreshLayout",this.$refs['tuigrid' + this.gridName]) // console.log("refreshLayout",this.$refs['tuigrid' + this.gridName])
var store = this.$refs['tuigrid' + this.gridName].gridInstance.store; var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
var containerEl = this.$refs['tuigrid' + this.gridName].$el; var containerEl = this.$refs['tuigrid' + this.gridName].$el;
// var containerEl = document.querySelector('.tui-grid-container') // var containerEl = document.querySelector('.tui-grid-container')
var parentEl = containerEl.parentElement; var parentEl = containerEl.parentElement;
// console.log("---------DEBUG---containerEl: ",containerEl); // console.log("---------DEBUG---containerEl: ",containerEl);
// console.log('---------DEBUG---parentEl: ', parentEl) // console.log('---------DEBUG---parentEl: ', parentEl)
// function refreshLayout(store, containerEl, parentEl) { // function refreshLayout(store, containerEl, parentEl) {
var dimension = store.dimension; var dimension = store.dimension;
var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight; var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
@ -636,35 +638,35 @@ export default {
// console.log("parentEl.clientHeight" , parentEl.clientHeight) // console.log("parentEl.clientHeight" , parentEl.clientHeight)
// console.log("clientHeight : ",clientHeight); // console.log("clientHeight : ",clientHeight);
if (parentEl && parentEl.clientHeight !== clientHeight) { if (parentEl && parentEl.clientHeight !== clientHeight) {
var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom; var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom))); this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
} }
// } // }
}, },
setOffsetTop(store, offsetTop) { setOffsetTop(store, offsetTop) {
// console.log("---------DEBUG---setOffsetTop: "); // console.log("---------DEBUG---setOffsetTop: ");
store.dimension.offsetTop = offsetTop; store.dimension.offsetTop = offsetTop;
}, },
setWidth(_a, width, autoWidth) { setWidth(_a, width, autoWidth) {
// console.log("---------DEBUG---setWidth: "); // console.log("---------DEBUG---setWidth: ");
var dimension = _a.dimension; var dimension = _a.dimension;
dimension.autoWidth = autoWidth; dimension.autoWidth = autoWidth;
dimension.width = width; dimension.width = width;
}, },
setHeaderHeight(store, height) { setHeaderHeight(store, height) {
// console.log("---------DEBUG---setHeaderHeight: "); // console.log("---------DEBUG---setHeaderHeight: ");
store.dimension.headerHeight = height; store.dimension.headerHeight = height;
}, },
setOffsetLeft(store, offsetLeft) { setOffsetLeft(store, offsetLeft) {
// console.log("---------DEBUG---setOffsetLeft: "); // console.log("---------DEBUG---setOffsetLeft: ");
store.dimension.offsetLeft = offsetLeft; store.dimension.offsetLeft = offsetLeft;
}, },
setHeight(_a,height){ setHeight(_a, height) {
// console.log("---------DEBUG---setHeight: "); // console.log("---------DEBUG---setHeight: ");
var dimension = _a.dimension; var dimension = _a.dimension;
var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth; var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth; dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
}, },
sendSelectedRowData(eventRowKey) { sendSelectedRowData(eventRowKey) {
if (this.selectedRowDataWatchFlag) { if (this.selectedRowDataWatchFlag) {
var rowKey = var rowKey =

View File

@ -2,9 +2,9 @@
<div class="d-flex justify-center align-center" <div class="d-flex justify-center align-center"
:class="directionBtn === 'vertically'?'flex-row':'flex-column'" :class="directionBtn === 'vertically'?'flex-row':'flex-column'"
style="gap: 12px"> style="gap: 12px">
<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" class="custom-action-btn"> <a-button @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') : btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.remove :icons.add " class="custom-action-btn">
</a-button> </a-button>
<a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add" class="custom-action-btn"> <a-button @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') :btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.add :icons.remove" class="custom-action-btn">
</a-button> </a-button>
</div> </div>
</template> </template>

View File

@ -49,7 +49,7 @@
<v-col :cols="12" class="mt-5 pb-4"> <v-col :cols="12" class="mt-5 pb-4">
<v-card-title class="custom-title-6 pa-0">{{ viewActionData.title }}</v-card-title> <v-card-title class="custom-title-6 pa-0">{{ viewActionData.title }}</v-card-title>
</v-col> </v-col>
<v-col :cols="12" style="min-height: 30vh;" class="pa-0 custom-view"> <v-col :cols="12" style="min-height: 50vh;" class="pa-0 custom-view">
<v-card class="pa-3" style="overflow-y:auto;"> <v-card class="pa-3" style="overflow-y:auto;">
<viewer v-if="viewActionData.viewerFlag" ref="tuiViewer" height="inherit" <viewer v-if="viewActionData.viewerFlag" ref="tuiViewer" height="inherit"
:initialValue="viewActionData.content" theme="white" :initialValue="viewActionData.content" theme="white"