rms/app/src/components/AssetGroup.vue

<template>
    <div>
            <v-dialog
                    v-model="progress"
                    persistent
                    width="300"
            >
                <v-card
                        color="primary"
                        dark
                >
                    <v-card-text>
                        查詢中...
                        <v-progress-linear
                                indeterminate
                                color="white"
                                class="mb-0"
                        ></v-progress-linear>
                    </v-card-text>
                </v-card>
            </v-dialog>
            <v-tabs
                    v-model='currentTab'
                    centered
                    fixed-tabs
                    background-color='grey lighten-4'
                    show-arrows
            >
                <div class="d-flex align-center">
                    <!--新增資產群駔對話-->
                    <v-dialog
                            v-model='dialogNewAssertGroup'
                            @click:outside='close'
                            :retain-focus="false"
                            overlay-opacity="0"
                    >
                        <template v-slot:activator='{ on, attrs }'>
                            <v-btn
                                    v-bind='attrs'
                                    v-on='on'
                                    icon
                            >
                                <v-icon>mdi-plus</v-icon>
                            </v-btn>
                        </template>
                        <v-card>
                            <v-card-title>
                                <span class='headline font-weight-bold'>新增資產群組</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col
                                                cols='12'
                                                sm='6'
                                                md='4'
                                                class='d-flex'
                                        >
                                            <v-text-field
                                                    v-model="insertAssertGroupDescript"
                                                    label='群組名稱'
                                                    hint='必填'
                                            />
                                        </v-col>
                                        <v-col
                                                cols='12'
                                                sm='6'
                                                md='4'
                                                class='d-flex'
                                        >
                                            <v-text-field
                                                    v-model="insertAssertGroupTablename"
                                                    label='資料庫表格名稱'
                                                    hint='必填'
                                            />
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn
                                        color='blue darken-1'
                                        text
                                        @click='close'
                                >
                                    取消
                                </v-btn>
                                <v-btn
                                        color='blue darken-1'
                                        text
                                        @click='insertAssertGroup'
                                >
                                    新增
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                </div>
                <v-tab
                        v-for='(item, index) in assertGroup'
                        :key='index'
                        class=' font-weight-bold'
                        @mouseover="showTabOptionIcon(index)"
                        @mouseleave="optionIconShow = -1"
                >
                    <v-icon small>{{ item.text }}</v-icon>
                    <v-spacer></v-spacer>
                    <!--修改資產群駔對話-->
                    <v-dialog
                            :id="index"
                            v-model='dialogModifyAssertGroupName'
                            :retain-focus="false"
                            overlay-opacity="0"
                            @click:outside='close'
                    >
                        <template v-slot:activator='{ on, attrs }'>
                            <v-btn
                                    v-bind='attrs'
                                    v-on='on'
                                    icon
                            >
                                <v-icon v-show="optionIconShow === index" small
                                        @click="modifyAssertGroup = JSON.parse(JSON.stringify(item))">mdi-pencil
                                </v-icon>
                            </v-btn>
                        </template>
                        <v-card>
                            <v-card-title>
                                <span class='headline font-weight-bold'>修改資產群組名稱</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col
                                                cols='12'
                                                sm='6'
                                                md='4'
                                                class='d-flex'
                                        >
                                            <v-text-field
                                                    v-model="modifyAssertGroup.text"
                                                    label='群組名稱'
                                                    hint='必填'
                                            />
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn
                                        color='blue darken-1'
                                        text
                                        @click='close'
                                >
                                    取消
                                </v-btn>
                                <v-btn
                                        color='blue darken-1'
                                        text
                                        @click='modifyAssertGroupName'
                                >
                                    修改
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                    <v-btn icon>
                        <v-icon v-show="optionIconShow === index" small @click="deleteAssertGroup(item)">
                            mdi-delete
                        </v-icon>
                    </v-btn>
                </v-tab>
                <div class="d-flex align-center">
                </div>
                <v-tabs-items v-model='currentTab'>
                    <v-tab-item
                            v-for='(item, index) in assertGroup'
                            :key='index'
                    >
                        <v-data-table
                                :items='allCols[item.value]'
                                :headers='headers'
                                :height="fullHeight*7/9"
                                fixed-header
                                :footer-props="{'items-per-page-options': [30, 40, 50, 60]}"
                                :items-per-page="30"
                        >
                            <template v-slot:item.isselect='{ item }'>
                                {{item.isselect === 'true' ? '選項':'文字'}}
                            </template>
                            <template v-slot:item.isrequire='{ item }'>
                                {{item.isselect === 'true' ? '是':'否'}}
                            </template>
                            <template v-slot:item.isexport='{ item }'>
                                {{item.isselect === 'true' ? '是':'否'}}
                            </template>
                            <template v-slot:item.issearch='{ item }'>
                                {{item.isselect === 'true' ? '是':'否'}}
                            </template>
                            <template v-slot:item.actions='{ item }'>
                                <v-btn
                                        icon
                                        @click='openDialogModifyCol(item)'
                                >
                                    <v-icon>mdi-pencil</v-icon>
                                </v-btn>
                                <v-icon
                                        small
                                        @click='deleteCol(item)'
                                >
                                    mdi-delete
                                </v-icon>
                            </template>
                            <template v-slot:footer>
                                <div class='d-flex ma-2'>
                                    <v-spacer/>
                                    <!--新增資產群駔欄位對話-->
                                    <v-dialog
                                            v-model='dialogInsert'
                                            @click:outside='close'
                                            :retain-focus="false"
                                            overlay-opacity="0"
                                    >
                                        <template v-slot:activator='{ on, attrs }'>
                                            <v-btn
                                                    v-bind='attrs'
                                                    v-on='on'
                                                    color='primary'
                                            >
                                                新增欄位
                                            </v-btn>
                                        </template>
                                        <v-card>
                                            <v-card-title>
                                                <span class='headline font-weight-bold'>新增欄位</span>
                                            </v-card-title>
                                            <v-card-text>
                                                <v-container>
                                                    <v-row>
                                                        <v-col
                                                                v-for='(header, index) in headers'
                                                                :key='index'
                                                                cols='12'
                                                                sm='6'
                                                                md='4'
                                                                class='d-flex'
                                                        >
                                                            <!--文字型欄位-->
                                                            <v-text-field
                                                                    v-if="header.text !== '' && header.value !== 'isselect' && isBooleanCol.indexOf(header.value) < 0 && header.value !== 'descript2'"
                                                                    :label='header.text'
                                                                    :value="insertColItem[header.value]"
                                                                    hint='必填'
                                                                    v-on:input='oninput(insertColItem, header.value, $event)'
                                                            />
                                                            <!--選項型欄位-->
                                                            <v-select
                                                                    v-if="header.value === 'isselect' && isBooleanCol.indexOf(header.value) < 0"
                                                                    :label='header.text' hint='必填'
                                                                    v-on:input='oninput(insertColItem, header.value, $event)'
                                                                    :items="selectColItem.isselect"
                                                                    :item-text="selectColItem.isselect.text"
                                                                    :item-value="selectColItem.isselect.value"
                                                            />
                                                            <!--資產類別細項欄位-->
                                                            <v-select
                                                                    v-if="header.value && isBooleanCol.indexOf(header.value) >= 0"
                                                                    :label='header.text' hint='必填'
                                                                    v-on:input='oninput(insertColItem, header.value, $event)'
                                                                    :items="selectColItem.boolean"
                                                                    :item-text="selectColItem.boolean.text"
                                                                    :item-value="selectColItem.boolean.value"
                                                            />
                                                            <v-btn
                                                                    v-if="header.value === 'isselect' && insertColItem.isselect === 'true'"
                                                                    @click='dialogInsertSelectItem = true'
                                                            >
                                                                編輯選項
                                                            </v-btn>
                                                            <!--欄位說明欄位-->
                                                            <v-textarea v-if="header.text === '欄位說明'"
                                                                        :label='header.text' hint='必填'
                                                                        v-on:input='oninput(insertColItem, header.value, $event)'
                                                                        auto-grow
                                                                        rows="1" />
                                                        </v-col>
                                                    </v-row>
                                                </v-container>
                                            </v-card-text>
                                            <v-card-actions>
                                                <v-spacer></v-spacer>
                                                <v-btn
                                                        color='blue darken-1'
                                                        text
                                                        @click='close'
                                                >
                                                    取消
                                                </v-btn>
                                                <v-btn
                                                        color='blue darken-1'
                                                        text
                                                        @click='insertCol(item)'
                                                >
                                                    新增
                                                </v-btn>
                                            </v-card-actions>
                                        </v-card>
                                    </v-dialog>
                                    <!--新增資產群組欄位選項對話-->
                                    <v-dialog
                                            width="40%"
                                            v-model='dialogInsertSelectItem'
                                            @click:outside='closeDialogInsertSelectItem'
                                            :retain-focus="false"
                                            overlay-opacity="0"
                                    >
                                        <v-card>
                                            <v-card-title>
                                                <span class='headline font-weight-bold'>編輯選項</span>
                                            </v-card-title>
                                            <v-card-text>
                                                <v-container>
                                                    <v-row>
                                                        <v-col cols="11" class="d-flex align-center">
                                                            <v-text-field outlined rounded hide-details
                                                                          v-model="insertSelectItem"/>
                                                            <v-btn class="ml-2" @click='pushInsertSelectItem'>新增</v-btn>
                                                        </v-col>
                                                    </v-row>
                                                    <v-card class="mt-2  col-10"
                                                            style="border: 1px solid grey;min-height: 500px;border-radius: 10px">
                                                        <v-chip
                                                                v-for="(insertSelectItem, index) in insertSelectItems"
                                                                :key="index"
                                                                class="col-12 my-1"
                                                                color="secondary"
                                                        >
                                                            {{insertSelectItem}}
                                                            <v-icon small class="ml-4" @click="deleteInsertSelectItem(index)">mdi-close
                                                            </v-icon>
                                                        </v-chip>
                                                    </v-card>
                                                </v-container>
                                            </v-card-text>
                                            <v-card-actions>
                                                <v-spacer></v-spacer>
                                                <v-btn
                                                        color='blue darken-1'
                                                        text
                                                        @click='closeDialogInsertSelectItem'
                                                >
                                                    關閉
                                                </v-btn>
                                            </v-card-actions>
                                        </v-card>
                                    </v-dialog>
                                </div>
                            </template>
                        </v-data-table>
                    </v-tab-item>
                </v-tabs-items>
                <!--修改資產群駔欄位對話-->
                <v-dialog
                        v-model='dialogModify'
                        @click:outside='close'
                        :retain-focus="false"
                        overlay-opacity="0"
                >
                    <v-card>
                        <v-card-title>
                            <span class='headline font-weight-bold'>修改欄位</span>
                        </v-card-title>
                        <v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col
                                            v-for='(header, index) in headers'
                                            :key='index'
                                            cols='12'
                                            sm='6'
                                            md='4'
                                            class='d-flex'
                                    >
                                        <!--文字型欄位-->
                                        <v-text-field
                                                v-if="header.text !== '' && header.value !== 'isselect' && isBooleanCol.indexOf(header.value) < 0 && header.value !== 'descript2'"
                                                :label='header.text'
                                                :value="modifyColItem[header.value]"
                                                hint='必填'
                                                v-on:input='oninput(modifyColItem, header.value, $event)'
                                        />
                                        <!--選項型欄位-->
                                        <v-select
                                                v-if="header.value === 'isselect' && isBooleanCol.indexOf(header.value) < 0"
                                                :label='header.text' hint='必填'
                                                :value="modifyColItem[header.value]"
                                                v-on:input='oninput(modifyColItem, header.value, $event)'
                                                :items="selectColItem.isselect"
                                                :item-text="selectColItem.isselect.text"
                                                :item-value="selectColItem.isselect.value"
                                        />
                                        <!--資產類別細項欄位-->
                                        <v-select
                                                v-if="header.value && isBooleanCol.indexOf(header.value) >= 0"
                                                :label='header.text' hint='必填'
                                                :value="modifyColItem[header.value]"
                                                v-on:input='oninput(modifyColItem, header.value, $event)'
                                                :items="selectColItem.boolean"
                                                :item-text="selectColItem.boolean.text"
                                                :item-value="selectColItem.boolean.value"
                                        />
<!--                                        <v-btn-->
<!--                                                v-if="header.value === 'isselect' && modifyColItem.isselect === 'true'"-->
<!--                                                @click='dialogModifySelectItem = true'-->
<!--                                        >-->
<!--                                            編輯選項-->
<!--                                        </v-btn>-->
                                        <!--欄位說明欄位-->
                                        <v-textarea v-if="header.text === '欄位說明'"
                                                    :label='header.text' hint='必填'
                                                    :value="modifyColItem[header.value]"
                                                    v-on:input='oninput(modifyColItem, header.value, $event)'
                                                    auto-grow
                                                    rows="1" />
                                    </v-col>
                                </v-row>
                            </v-container>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                    color='blue darken-1'
                                    text
                                    @click='close'
                            >
                                取消
                            </v-btn>
                            <v-btn
                                    color='blue darken-1'
                                    text
                                    @click='modifyCol'
                            >
                                修改
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <!--修改資產群組欄位選項對話-->
                <v-dialog
                        v-model='dialogModifySelectItem'
                        @click:outside='closeDialogModifySelectItem'
                        :retain-focus="false"
                        overlay-opacity="0"
                >
                    <v-card>
                        <v-card-title>
                            <span class='headline font-weight-bold'>編輯選項</span>
                        </v-card-title>
                        <v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col cols="10" class="d-flex align-center">
                                        <v-text-field v-if="modifyColItem.colname === 'type'"
                                                      outlined rounded
                                                      label="代號"
                                                      hint="Ex:H7"
                                                      v-model="modifyTypeSelectItem" />
                                        <v-text-field class="col-12" outlined rounded
                                                      label="名稱"
                                                      hint="Ex:個人電腦"
                                                      v-model="modifySelectItem"/>
                                        <v-btn class="ml-2 mb-8" @click='pushModifySelectItem'>新增</v-btn>
                                    </v-col>
                                </v-row>
                                <p class="font-italic mb-0 mt-1">拖曳選項以排序</p>
                                <v-card
                                        class="mt-2 col-10"
                                        min-height="300px"
                                        style="border: 1px solid grey; border-radius: 10px"
                                >
                                    <draggable v-model="modifySelectItems">
                                        <v-chip v-for="(modifySelectItem, index) in modifySelectItems" :key="index"
                                                color="secondary" class="col-12 my-1" draggable>
                                            {{ modifySelectItem }}
                                            <v-icon small class="ml-4" @click="deleteModifySelectItem(index)">
                                                mdi-close
                                            </v-icon>
                                        </v-chip>
                                    </draggable>
                                </v-card>
                            </v-container>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                    color='blue darken-1'
                                    text
                                    @click='closeDialogModifySelectItem'
                            >
                                關閉
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-tabs>
    </div>
</template>
<script>
    import draggable from 'vuedraggable';

    export default {
        name: '',
        components: {
            draggable,
        },
        data() {
            return {
                fullHeight: 0,
                dialogInsert: false,
                dialogModify: false,
                dialogNewAssertGroup: false,
                progress: false,
                // dialogSearch: false,
                title: '資訊資產群組',
                headers: [
                    {'text': '', 'value': 'actions', fixed: true, sortable: false},
                    {'text': '中文名稱', 'value': 'descript'},
                    {'text': '資料庫欄位名稱', 'value': 'colname'},
                    // {'text': '型態', 'value': 'type'},
                    {'text': '文字框或選項', 'value': 'isselect'},
                    {'text': '順序', 'value': 'index'},
                    {'text': '必填', 'value': 'isrequire'},
                    {'text': '欄位說明', 'value': 'descript2'},
                    // {'text': '可匯出', 'value': 'isexport'},
                    // {'text': '可搜尋', 'value': 'issearch'},
                ],
                allCols: [],
                insertColItem: {
                    'tablename': '',
                    'descript': '',
                    'colname': '',
                    'level': null,
                    // 'type': '',
                    'index': '',
                    'isselect': '',
                    'issearch': '',
                    'isexport': '',
                    'isrequire': ''
                },
                isBooleanCol: ['isexport', 'isrequire', 'issearch'],
                selectColItem: {
                    'isselect': [{'text': '文字', 'value': 'false'},
                        {'text': '選項', 'value': 'true'}]
                    , 'boolean': [{'text': '是', 'value': 'true'},
                        {'text': '否', 'value': 'false'}]
                },
                modifyColItem: {},
                assertGroup: [],
                currentTab: 0,
                types: [],
                // selectItem: {},
                // searchItem: {},
                insertAssertGroupDescript: '',
                insertAssertGroupTablename: '',
                optionIconShow: -1,
                dialogModifyAssertGroupName: false,
                modifyAssertGroup: {
                    text: '',
                    valsue: '',
                },
                dialogInsertSelectItem: false,
                insertSelectItems: [],
                insertSelectItem: '',
                modifySelectItems: [],
                modifySelectItem: '',
                dialogModifySelectItem: false,
                oldIndex: '',
                modifyTypeSelectItem: '',
            }
        },
        async mounted() {
            // this.getSelectItem();
            this.progress = true;
            this.getTabs();
            this.getTypes();
            this.inventoryItems = [];
            this.getCols();
            this.fullHeight = window.innerHeight;
            console.log(this.fullHeight);
            window.onresize = () => {
                // this.fullWidth = window.innerWidth;
                this.fullHeight = window.innerHeight;
            };
        },
        computed: {},
        watch: {
            currentTab() {
                this.progress = true;
                this.getTypes();
                this.getCols();
            },
            dialogModifySelectItem() {

            },
            modifySelectItems() {
                console.log(this.modifySelectItems[0]);
            },
            dialogInsert() {
                this.insertColItem.index = (parseInt(this.allCols[this.assertGroup[this.currentTab].value][this.allCols[this.assertGroup[this.currentTab].value].length - 1].index) + 1).toString();
            },
            dialogModify() {
                if (this.modifyColItem.isselect === 'true') {
                    this.getModifySelectItems();
                }
                this.oldIndex = this.modifyColItem.index;
            }
        },
        methods: {
            // eslint-disable-next-line no-unused-vars
            log() {
                // console.log(col);
                console.log(this.modifySelectItems);
            },
            openDialogModifyCol(item) {
                this.modifyColItem = JSON.parse(JSON.stringify(item));
                this.dialogModify = true;
            },
            closeDialogInsertSelectItem() {
                this.dialogInsertSelectItem = false;
            },
            getModifySelectItems() {
                this.modifySelectItems = [];
                this.$axios.get(`/assert/selectItems?tablename=${this.modifyColItem.tablename}&&colname=${this.modifyColItem.colname}`).then((resp) => {
                    console.log(resp.data.data);
                    this.modifySelectItems = resp.data.data;
                });
            },
            closeDialogModifySelectItem() {
                this.dialogModifySelectItem = false;
                // this.modifySelectItems = [];
            },
            pushInsertSelectItem() {
                if (this.insertSelectItems.indexOf(this.insertSelectItem) >= 0 || this.insertSelectItem === '') {
                    alert('選項不得重複或為空');
                } else {
                    this.insertSelectItems.push(this.insertSelectItem);
                    this.insertSelectItem = '';
                }
            },
            pushModifySelectItem() {
                if (this.modifySelectItems.indexOf(this.modifySelectItem) >= 0 || this.modifySelectItem === '' || this.modifyTypeSelectItem === '') {
                    alert('選項不得重複或為空');
                } else {
                    if (this.modifyColItem.colname === 'type') {
                        this.modifySelectItems.push(`${this.modifyTypeSelectItem} ${this.modifySelectItem}`);
                        this.modifyTypeSelectItem = '';
                        this.modifySelectItem = '';
                    } else {
                        this.modifySelectItems.push(this.modifySelectItem);
                        this.modifySelectItem = '';
                    }
                }
            },
            deleteInsertSelectItem(index) {
                this.insertSelectItems.splice(index, 1);
            },
            deleteModifySelectItem(index) {
                this.modifySelectItems.splice(index, 1);
            },
            oninput(item, key, val) {
                this.$set(item, key, val);
            },
            async getTabs() {
                await this.$axios.get(`/assert/assertGroups`).then((resp) => {
                    this.assertGroup = [];
                    resp.data.data.forEach((item) => {
                        let header = {'text': null, 'value': null};
                        header.text = item.descript;
                        header.value = item.tablename;
                        this.assertGroup.push(header);
                    });
                    // this.assertGroup.push({'text': 'mdi-plus', 'value': ''});
                });
            },
            getTypes() {
                const tablename = this.assertGroup[this.currentTab] ? this.assertGroup[this.currentTab].value : 'hardware';
                this.$axios.get(`/assert/Types?tablename=${tablename}`).then((resp) => {
                    this.types = resp.data.data;
                });
            },
            getCols() {
                const tablename = this.assertGroup[this.currentTab] ? this.assertGroup[this.currentTab].value : 'hardware';
                this.$axios.get(`/assert/allCols?tablename=${tablename}`).then((resp) => {
                    this.allCols = resp.data.data;
                    this.progress = false;
                });
            },
            insertCol() {
                this.insertColItem.issearch = 'true';
                this.insertColItem.isexport = 'true';
                let stop;
                for (const key in this.insertColItem) {
                    if (this.insertColItem[key] === '' && key !== 'tablename') {
                        alert('所有資料不可為空');
                        stop = true;
                        return;
                    }
                }
                this.allCols[this.assertGroup[this.currentTab].value].forEach((col) => {
                    if (this.insertColItem.colname === col.colname) {
                        alert('資料庫欄位名不可重複');
                        stop = true;
                        return;
                    }
                });
                if (stop === true) return;
                this.insertColItem.tablename = this.assertGroup[this.currentTab].value;
                this.insertColItem.insertSelectItems = this.insertSelectItems;
                this.$axios.post(`/assert/col`, this.insertColItem).then(() => {
                        this.getCols();
                        this.close();
                        this.insertSelectItems = [];
                        delete this.insertColItem.tablename;
                        delete this.insertColItem.insertselectItems;
                    Object.keys(this.insertColItem).forEach((key) => {
                        this.insertColItem[key] = '';
                    });
                    }
                );

            },
            close() {
                this.dialogInsert = false;
                this.dialogModify = false;
                this.dialogNewAssertGroup = false;
                this.dialogModifyAssertGroupName = false;
            },
            isDisabled(key) {
                const disabledKey = ['id'];
                return disabledKey.indexOf(key) >= 0;
            },
            isTextField(key) {
                return this.select.indexOf(key) < 0;
            },
            isSelect(key) {
                return this.select.indexOf(key) >= 0;
            },
            isRequire(key) {
                return this.required.indexOf(key) >= 0;
            },
            getSelectItem() {
                this.$axios.get(`/selectItem?tablename=${this.tablename}`).then((resp) => {
                    this.selectItem = resp.data.data;
                });
            },
            modifyCol() {
                let stop;
                for (const key in this.modifyColItem) {
                    if (this.modifyColItem[key] === '') {
                        alert('所有資料不可為空');
                        stop = true;
                        return;
                    }
                }
                if (stop === true) return;
                this.modifyColItem.tablename = this.assertGroup[this.currentTab].value;
                this.modifyColItem.modifySelectItems = this.modifySelectItems;
                this.modifyColItem.oldIndex = this.oldIndex;
                this.$axios.put(`/assert/col`, this.modifyColItem).then(() => {
                        this.getCols();
                        this.close();
                        this.modifySelectItems = [];
                        delete this.modifyColItem.tablename;
                        delete this.modifyColItem.modifySelectItems;
                        delete this.modifyColItem.oldIndex;
                    Object.keys(this.modifyColItem).forEach((key) => {
                        this.modifyColItem[key] = '';
                    });
                    }
                );

            },
            deleteCol(item) {
                let yes = confirm('確定刪除');
                if (yes) {
                    this.$axios.delete(`/assert/deleteCol?tablename=${item.tablename}&&colname=${item.colname}&&index=${item.index}`).then(() => {
                        this.getCols();
                        alert('已刪除');
                    });
                }
            },
            async insertAssertGroup() {
                await this.$axios.post(`/assert/assertGroups`, {
                    assertGroupDescript: this.insertAssertGroupDescript,
                    assertGroupTablename: this.insertAssertGroupTablename
                });
                await this.getTabs();
                this.close();
            },
            showTabOptionIcon(index) {
                this.optionIconShow = index;
            },
            async deleteAssertGroup(item) {
                let yes = confirm('確認刪除此群組?');
                if (yes) {
                    await this.$axios.delete(`/assert/assertGroups?tablename=${item.value}`).then(() => {
                        this.getTabs();
                        alert('已刪除');
                    });
                }
            },
            async modifyAssertGroupName() {
                await this.$axios.put(`/assert/assertGroups?tablename=${this.modifyAssertGroup.value}&&newDescript=${this.modifyAssertGroup.text}`).then(() => {
                    this.getTabs();
                    alert('已修改');
                    this.close();
                });
            },


        }
    }
</script>