[WebOrder] IBSheet 포함 페이지에 IBSheet 참조할 때 loader.config 타이밍 문제 해결. (Qna.vue)

 

IBSheet 는 한 번 create 해야 한다.

 

- Qna 전체코드

 

최상위 부모 Qna 페이지에서 CustList.vue 컴포넌트를 참조하는데

이때 이 참조 컴포넌트에서 IBSheet가 있는 경우 시트 로드 타이밍 때문에

에러가 나는 경우가 있다. (시트가 제대로 출력이 안되거나 하는 등)

 

loader.config({
    registry: [{
        name: "ibsheet",
        baseUrl: '../../sheet',
        theme: "darkgray",
        locales: ["en", "ko"],
        plugins: ["dialog", "common", "excel"]
    }]
});

loader.load();

이 코드를 어느 컴포넌트에 써주느냐가 문제다.

 

아래 코드처럼  <CustList> 를 참조하고 , 동시에 QnaSheet 를 출력하는 경우에 

일단 template을 먼저 출력하고 스크립트를 실행하기 때문에

CustList 에서 loader.config 를 해주어야하는데

문제는 사용자 화면에서는 CustList 를 참조하지 않기 때문에

(v-if="uisAdmin===1))

(** 관리자 (isAdmin ===1) 인 경우 CustList 출력, 사용자인 경우 미출력)

그럼 아무데서도 loader.config 를 하지 못한다.

 

그래서 조건을 걸어주면 된다.

 

QnaSheet 

...
<div class="d-flex flex-grow-1" style="gap: 20px; overflow: hidden;">
    <div v-if="isAdmin === 1" class="d-flex flex-column" style="width: 20%; height: 100%; overflow: hidden;">
        <span class="mb-1">{{ _t('page.balanceManagement.custList') }}</span>
        <CustList @rowClick="doSearchQna" @getList="getQnaList" ref="custListRef" :kwdCustName="kwdCustName" />
    </div>
    <div class="d-flex flex-column" style="width: 100%; overflow: hidden;">
        <v-text-field
            v-if="isAdmin === 1"
            class="mb-3 mt-7"
            v-model="selectedCustName"
            :label="_t('page.balanceManagement.custName')"
            @click:clear="onClearSelectedCust"
            density="compact"
            variant="outlined"
            hide-details
            readonly
            clearable
            style="width: 200px;"/>
        ...
        <!-- QnA Sheet -->
        <div id="qnaSheet" style="flex: 1 1 auto; height: 100%;"></div>
    </div>
</div>
...

 

 

 

 

조건 추가.

 

onMounted(() => {
    if(isAdmin!==1) {
        loader.config({
            registry: [{
                name: "ibsheet",
                baseUrl: '../../sheet',
                theme: "darkgray",
                locales: ["en", "ko"],
                plugins: ["dialog", "common", "excel"]
            }]
        });

        loader.load();
    }
    // Qna 시트 : qnaSheet
    const initOptions = {
        Cfg: {

 

 

 

 

 

따라서

 

관리자일 때 (isAdmin===1) 

CustList.vue 에서 loader.config 해주고 Qna;vue 에서는 하지 않고. 시트  출력.

 

사용자일 떄 (isAdmin!==1)

CustList.vue 참조하지 않기 때문에 Qna.vue에서 loader.config 하여 시트 출력

 

 

 

 

---

 

Qna.vue 전체코드

<template>
    <v-app>
        <left-and-header ref="left" :menu-name="'qna'"></left-and-header>
        <v-main>
            <v-container fluid class=" d-flex flex-column h-100">
                <table v-if="isAdmin === 1" style="width: 70%; border-collapse: collapse;" class="mb-3">
                    <tbody>
                    <tr>
                        <td class="pr-2" style="width:5%;">
                            <v-text-field
                                v-model="kwdCustName"
                                @keydown.enter="doSearchCusts"
                                :label="_t('page.balanceManagement.custName')"
                                density="compact"
                                variant="outlined"
                                hide-details
                                clearable/>
                        </td>
                        <td class="pr-2" style="width:25%;">
                            <v-btn
                                color="secondary"
                                @click="doSearchCusts">
                                <v-icon left>mdi-magnify</v-icon>
                                {{ _t("common.btnText.search") }}
                            </v-btn>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div class="d-flex flex-grow-1" style="gap: 20px; overflow: hidden;">
                    <div v-if="isAdmin === 1" class="d-flex flex-column" style="width: 20%; height: 100%; overflow: hidden;">
                        <span class="mb-1">{{ _t('page.balanceManagement.custList') }}</span>
                        <CustList @rowClick="doSearchQna" @getList="getQnaList" ref="custListRef" :kwdCustName="kwdCustName" />
                    </div>
                    <div class="d-flex flex-column" style="width: 100%; overflow: hidden;">
                        <v-text-field
                            v-if="isAdmin === 1"
                            class="mb-3 mt-7"
                            v-model="selectedCustName"
                            :label="_t('page.balanceManagement.custName')"
                            @click:clear="onClearSelectedCust"
                            density="compact"
                            variant="outlined"
                            hide-details
                            readonly
                            clearable
                            style="width: 200px;"/>
                        <div class="d-flex align-center">
                            <span class="mb-3">QnA</span>
                            <v-btn
                                class="ml-2 mb-3"
                                v-if="isAdmin !== 1"
                                color="add"
                                density="compact"
                                icon="mdi-plus"
                                @click="qnaDialogOpen(null)"/>
                        </div>
                        <!-- QnA Sheet -->
                        <div id="qnaSheet" style="flex: 1 1 auto; height: 100%;"></div>
                    </div>
                </div>
            </v-container>
        </v-main>
        <QnaDialog ref="qnaDialogRef" @save="saveQna" @saveReply="saveQnaReply" @close="onClose"/>
        <Footer />
        <alert-dialog ref="alert"/>
    </v-app>
</template>