ap-dev 1.2.25 → 1.2.26

package/abap/ConfigPanel/AbapTable.vue

@@ -1,379 +1,379 @@
-<template>
-    <ap-container>
-        <ap-aside margin="1111" width="350px">
-            <ap-aside-tree :options.sync="treeOptions">
-                <el-form slot="form" ref="tAbapTable" :inline="true" label-width="80px"
-                         :model="tAbapTableForm" :rules="tAbapTableRules">
-                    <el-form-item label="父类别">
-                        <el-select v-model="tAbapTableForm.fdParentId" filterable placeholder="请选择父节点">
-                            <el-option label="无" value=""/>
-                            <el-option
-                                v-for="item in typeList"
-                                :key="item.fdId"
-                                :label="item.fdName"
-                                :value="item.fdId"
-                            />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label='类型' prop='fdType'>
-                        <el-select v-model="tAbapTableForm.fdType" filterable placeholder="请选择类型">
-                            <el-option key="1" label="分组" :value=1></el-option>
-                            <el-option key="2" label="表" :value=2></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label='名称' prop='fdName'>
-                        <el-input v-model='tAbapTableForm.fdName'></el-input>
-                    </el-form-item>
-                    <el-form-item label='表描述' prop='fdDesc' v-show="tAbapTableForm.fdType == 2">
-                        <el-input v-model='tAbapTableForm.fdDesc'></el-input>
-                    </el-form-item>
-                    <el-form-item label='表作用' prop='fdFunction' v-show="tAbapTableForm.fdType == 2">
-                        <el-input v-model='tAbapTableForm.fdFunction' type="textarea"></el-input>
-                    </el-form-item>
-                    <el-form-item label='排序' prop='fdSort'>
-                        <el-input-number v-model="tAbapTableForm.fdSort" controls-position="right"/>
-                    </el-form-item>
-                </el-form>
-                <span slot="tree" slot-scope="scope" style="width: 100%">
-                    <div class="abap-tree-node-left ap-ellipse">
-                        <span v-if="scope.data.fdType == 1" style="color: #1890ff;">{{ scope.data.fdName }}</span>
-                        <span v-else>{{ scope.data.fdName }}</span>
-                    </div>
-                    <div style="font-size: 12px;">{{ scope.data.fdDesc }}</div>
-                </span>
-            </ap-aside-tree>
-        </ap-aside>
-        <ap-split-panel></ap-split-panel>
-        <ap-container>
-            <ap-header margin="1110">
-                <div class="flex-col" style="color:#909399;font-size: 14px;">
-                    <span>简短描述：{{ tableSapText }}</span>
-                    <el-input v-model="tableFunction" :disabled="true" type="textarea"></el-input>
-                </div>
-            </ap-header>
-            <ap-main margin="0110">
-                <ap-table ref="tAbapTableFieldTableRef" :options.sync="tAbapTableFieldTable"></ap-table>
-            </ap-main>
-        </ap-container>
-
-        <el-drawer title="" :visible.sync="showSqlDataTable" :with-header="false" size="800px" class="sap-abap-drawer">
-            <div class="flex-col" style="padding: 10px;width: 100%;height: 100%;" v-loading="sqlDataTableLoadingFlag">
-                <div>
-                    预览行数：<el-input v-model="dataLimit" placeholder="" style="width: 100px"></el-input>
-                </div>
-                <div class="flex-1" style="height: 100%;overflow: auto;">
-                    <el-table :data="sqlData" border style="width: 100%" height="100%" fixed>
-                        <el-table-column fixed type="index">
-                        </el-table-column>
-                        <template v-for="item in sqlDataHeader">
-                            <el-table-column :prop="item" :label="item" :show-overflow-tooltip="true"></el-table-column>
-                        </template>
-                    </el-table>
-                </div>
-            </div>
-        </el-drawer>
-    </ap-container>
-</template>
-
-<script>
-export default {
-    name: 'AbapTable',
-    data() {
-        let tAbapTableFieldCols = [
-            {
-                prop: 'fieldName',
-                label: '字段名',
-                type: 'input',
-                add: false,
-                edit: false,
-                minWidth: 80,
-                sortable: 'local'
-            }, {
-                prop: 'title',
-                label: '标题',
-                type: 'input',
-                add: false,
-                edit: false,
-                minWidth: 80
-            }, {
-                prop: 'text',
-                label: '简短描述',
-                type: 'input',
-                add: false,
-                edit: false,
-                minWidth: 120
-            }, {
-                prop: 'fdDesc',
-                label: '自定义-描述',
-                type: 'input',
-                minWidth: 120,
-                sortable: 'local',
-            }, {
-                prop: 'fdFunction',
-                label: '自定义-作用',
-                type: 'input',
-                minWidth: 120
-            }, {
-                prop: 'fdType',
-                label: '自定义-标识',
-                type: 'select',
-                width: 100,
-                align:"center",
-                sortable: 'local',
-                selectOptions:[{label:" ", value: 0},{label:"查询常用", value:1},{label:"条件常用", value:2},],
-                html: function (value, row) {
-                    switch (value) {
-                        case 1:
-                            return "<div class='ap-tag-success'>查询常用</div>";
-                        case 2:
-                            return "<div class='ap-tag-warning'>条件常用</div>";
-
-                    }
-                    return '';
-                }
-            }, {
-                prop: 'dataType',
-                label: '数据类型',
-                type: 'input',
-                add: false,
-                edit: false,
-                width: 80
-            }, {
-                prop: 'fieldLength',
-                label: '长度',
-                type: 'input',
-                add: false,
-                edit: false,
-                width: 60,
-                align:"right",
-            }, {
-                prop: 'fieldDecimal',
-                label: '小数位',
-                type: 'input',
-                add: false,
-                edit: false,
-                width: 60,
-                align:"right",
-            }, {
-                prop: 'keyFlag',
-                label: '主键',
-                type: 'input',
-                add: false,
-                edit: false,
-                width: 50,
-                align:"center",
-            }, {
-                prop: 'notNull',
-                label: '非空',
-                type: 'input',
-                add: false,
-                edit: false,
-                width: 50,
-                align:"center",
-            },
-        ];
-        let tAbapTableFieldTable = {
-            title: "字段列表",
-            columns: tAbapTableFieldCols,
-            dataUrl: "/apd/abap/AbapTable/getTableFieldList",
-            saveUrl: "/apd/abap/AbapTable/saveTAbapTableFieldGridData",
-            editPk: "fdId,fieldName,fdType,fdDesc", //默认fdId
-            rowKey: "fieldName",
-            toolbarBtn: [{btnType: "primary", text: "预览", icon: "el-icon-magic-stick", onClick: this.previewTable},
-                "separator", "edit", "refresh", "save"],
-            pagination: {pageSizes: [1000],pageSize: 1000},
-            params: () => {
-                return {
-                    tableName: this.selectedTable
-                }
-            }
-        };
-        return {
-            // ----- 左侧树 -----
-            defaultExpandedKeys: [],
-            treeOptions: this.getTreeOption(),
-            typeList: [],
-            tAbapTableForm: {},
-            tAbapTableRules: {},
-            selectedTable: "",
-            selectedTableId: "",
-            tableFunction: "",
-            tableSapText: "",
-            // ----- 右侧 -----
-            tAbapTableFieldTable: tAbapTableFieldTable,
-            // 预览
-            showSqlDataTable: false,
-            sqlDataTableLoadingFlag: false,
-            dataLimit: 100,
-            sqlDataHeader: [],
-            sqlData: [],
-        }
-    },
-    methods: {
-        // 左侧树：配置
-        getTreeOption() {
-            let treeOptions = {
-                title: "SAP常用表",
-                toolbarBtn: ["add", "edit", "del", "sort"],
-                dialogTitle: "SAP常用表",
-                showCheckbox: false,
-                defaultExpandAll: false,
-                defaultExpandedKeys: [],
-                renderAfterExpand: true,
-                sortByTree: true,
-                sortByDrag: true,
-                indent: 0,
-                onClick: (data, node, comp) => {
-                    if (data.fdType != 2) {
-                        this.defaultExpandedKeys = [data.fdId];
-                        return
-                    }
-                    this.resetTableInfo();
-                    this.tAbapTableFieldTable.title = data.fdName + " (" + data.fdDesc + ")";
-                    this.tableFunction = data.fdFunction;
-                    this.selectedTable = data.fdName;
-                    this.selectedTableId = data.fdId;
-                    this.$refs.tAbapTableFieldTableRef.refresh();
-                    this.getSapTableText();
-                },
-                loadOptions: {
-                    url: "/apd/abap/AbapTable/getTAbapTableList",
-                    treeKey: {
-                        idKey: "fdId",
-                        parentKey: "fdParentId",
-                        childrenKey: "children",
-                        label: "fdName"
-                    },
-                    success: (response) => {
-                        this.treeOptions.defaultExpandedKeys = this.defaultExpandedKeys;
-                        this.$forceUpdate();
-                        this.getTreeGroup();
-                    },
-                },
-                editOptions: {
-                    url: "/apd/abap/AbapTable/getTAbapTableByFdId",
-                    data: (node) => {
-                        return {
-                            fdId: node.fdId
-                        }
-                    },
-                    success: (response) => {
-                        this.tAbapTableForm = response.data;
-                    },
-                    error() {
-                    },
-                },
-                insertUrl: "/apd/abap/AbapTable/insertTAbapTable",
-                insertData: () => {
-                    return this.tAbapTableForm
-                },
-                updateUrl: "/apd/abap/AbapTable/updateTAbapTable",
-                updateData: () => {
-                    return this.tAbapTableForm
-                },
-                deleteUrl: "/apd/abap/AbapTable/deleteTAbapTableByFdId",
-                deleteData: (node) => {
-                    return {
-                        fdId: node.fdId
-                    }
-                },
-                updateSortUrl: '/apd/abap/AbapTable/updateTAbapTableSort',
-                updateSortListUrl: '/apd/abap/AbapTable/updateTAbapTableSortList',
-                resetForm: () => {
-                    this.tAbapTableForm = {
-                        fdParentId: '',
-                        fdType: '',
-                        fdName: '',
-                        fdDesc: '',
-                        fdFunction: '',
-                        fdSort: '',
-                    };
-                },
-                afterOpenAddDialog: (node) => {
-                    this.tAbapTableForm.fdParentId = node.fdId; // 自动赋值表单的父类型
-                },
-                filterNodeMethod: (value, data) => {
-                    if (!value) return true;
-                    if(data["fdName"] != null && data["fdName"].indexOf(value) !== -1) {
-                        return true;
-                    }
-                    if(data["fdDesc"] != null && data["fdDesc"].indexOf(value) !== -1) {
-                        return true;
-                    }
-                    return false;
-                }
-            };
-
-            return treeOptions;
-        },
-        getTreeGroup() {
-            this.$request({
-                url: '/apd/abap/AbapTable/getTableGroupList',
-                method: 'post',
-                data: {}
-            }).then(response => {
-                this.typeList = response.data
-            })
-        },
-        getSapTableText() {
-            this.$request({
-                url: '/apd/abap/AbapTable/getSapTableText',
-                method: 'post',
-                data: {
-                    tableName: this.selectedTable
-                }
-            }).then(response => {
-                this.tableSapText = response.data
-            })
-        },
-        resetTableInfo() {
-            this.tableSapText = "";
-            this.tableFunction = "";
-            this.selectedTable = "";
-            this.selectedTableId = "";
-            this.tAbapTableFieldTable.title = "字段列表";
-        },
-        previewTable(){
-            if (this.selectedTable == null || this.selectedTable == '') {
-                this.$message.error("请选择表");
-                return;
-            }
-
-            this.showSqlDataTable = true;
-            this.sqlDataTableLoadingFlag = true;
-            this.sqlData=[];
-            this.sqlDataHeader=[];
-            let selectStr = "";
-            let selectionKeys = this.$refs.tAbapTableFieldTableRef.getSelectionKeys();
-            if (selectionKeys == null || selectionKeys.length < 1) {
-                selectStr = "*";
-            } else {
-                selectStr = selectionKeys.join(",");
-            }
-            console.log(selectionKeys);
-            this.$request({
-                url: '/apd/abap/TAbapSql/getDataBySql',
-                method: 'post',
-                data: {
-                    sqlStr: `SELECT ${selectStr} FROM saphanadb.${this.selectedTable}`,
-                    dataLimit: this.dataLimit
-                }
-            }).then(response => {
-                this.sqlData = response.data.data;
-                this.sqlDataHeader = response.data.header;
-            }).finally(() => {
-                this.sqlDataTableLoadingFlag = false;
-            })
-        }
-
-    }
-}
-</script>
-
-<style scoped>
-.abap-tree-node-left {
-    font-size: 13px;
-    width: 50%;
-    float: left;
-}
-</style>
+<template>
+    <ap-container>
+        <ap-aside margin="1111" width="350px">
+            <ap-aside-tree :options.sync="treeOptions">
+                <el-form slot="form" ref="tAbapTable" :inline="true" label-width="80px"
+                         :model="tAbapTableForm" :rules="tAbapTableRules">
+                    <el-form-item label="父类别">
+                        <el-select v-model="tAbapTableForm.fdParentId" filterable placeholder="请选择父节点">
+                            <el-option label="无" value=""/>
+                            <el-option
+                                v-for="item in typeList"
+                                :key="item.fdId"
+                                :label="item.fdName"
+                                :value="item.fdId"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label='类型' prop='fdType'>
+                        <el-select v-model="tAbapTableForm.fdType" filterable placeholder="请选择类型">
+                            <el-option key="1" label="分组" :value=1></el-option>
+                            <el-option key="2" label="表" :value=2></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label='名称' prop='fdName'>
+                        <el-input v-model='tAbapTableForm.fdName'></el-input>
+                    </el-form-item>
+                    <el-form-item label='表描述' prop='fdDesc' v-show="tAbapTableForm.fdType == 2">
+                        <el-input v-model='tAbapTableForm.fdDesc'></el-input>
+                    </el-form-item>
+                    <el-form-item label='表作用' prop='fdFunction' v-show="tAbapTableForm.fdType == 2">
+                        <el-input v-model='tAbapTableForm.fdFunction' type="textarea"></el-input>
+                    </el-form-item>
+                    <el-form-item label='排序' prop='fdSort'>
+                        <el-input-number v-model="tAbapTableForm.fdSort" controls-position="right"/>
+                    </el-form-item>
+                </el-form>
+                <span slot="tree" slot-scope="scope" style="width: 100%">
+                    <div class="abap-tree-node-left ap-ellipse">
+                        <span v-if="scope.data.fdType == 1" style="color: #1890ff;">{{ scope.data.fdName }}</span>
+                        <span v-else>{{ scope.data.fdName }}</span>
+                    </div>
+                    <div style="font-size: 12px;">{{ scope.data.fdDesc }}</div>
+                </span>
+            </ap-aside-tree>
+        </ap-aside>
+        <ap-split-panel></ap-split-panel>
+        <ap-container>
+            <ap-header margin="1110">
+                <div class="flex-col" style="color:#909399;font-size: 14px;">
+                    <span>简短描述：{{ tableSapText }}</span>
+                    <el-input v-model="tableFunction" :disabled="true" type="textarea"></el-input>
+                </div>
+            </ap-header>
+            <ap-main margin="0110">
+                <ap-table ref="tAbapTableFieldTableRef" :options.sync="tAbapTableFieldTable"></ap-table>
+            </ap-main>
+        </ap-container>
+
+        <el-drawer title="" :visible.sync="showSqlDataTable" :with-header="false" size="800px" class="sap-abap-drawer">
+            <div class="flex-col" style="padding: 10px;width: 100%;height: 100%;" v-loading="sqlDataTableLoadingFlag">
+                <div>
+                    预览行数：<el-input v-model="dataLimit" placeholder="" style="width: 100px"></el-input>
+                </div>
+                <div class="flex-1" style="height: 100%;overflow: auto;">
+                    <el-table :data="sqlData" border style="width: 100%" height="100%" fixed>
+                        <el-table-column fixed type="index">
+                        </el-table-column>
+                        <template v-for="item in sqlDataHeader">
+                            <el-table-column :prop="item" :label="item" :show-overflow-tooltip="true"></el-table-column>
+                        </template>
+                    </el-table>
+                </div>
+            </div>
+        </el-drawer>
+    </ap-container>
+</template>
+
+<script>
+export default {
+    name: 'AbapTable',
+    data() {
+        let tAbapTableFieldCols = [
+            {
+                prop: 'fieldName',
+                label: '字段名',
+                type: 'input',
+                add: false,
+                edit: false,
+                minWidth: 80,
+                sortable: 'local'
+            }, {
+                prop: 'title',
+                label: '标题',
+                type: 'input',
+                add: false,
+                edit: false,
+                minWidth: 80
+            }, {
+                prop: 'text',
+                label: '简短描述',
+                type: 'input',
+                add: false,
+                edit: false,
+                minWidth: 120
+            }, {
+                prop: 'fdDesc',
+                label: '自定义-描述',
+                type: 'input',
+                minWidth: 120,
+                sortable: 'local',
+            }, {
+                prop: 'fdFunction',
+                label: '自定义-作用',
+                type: 'input',
+                minWidth: 120
+            }, {
+                prop: 'fdType',
+                label: '自定义-标识',
+                type: 'select',
+                width: 100,
+                align:"center",
+                sortable: 'local',
+                selectOptions:[{label:" ", value: 0},{label:"查询常用", value:1},{label:"条件常用", value:2},],
+                html: function (value, row) {
+                    switch (value) {
+                        case 1:
+                            return "<div class='ap-tag-success'>查询常用</div>";
+                        case 2:
+                            return "<div class='ap-tag-warning'>条件常用</div>";
+
+                    }
+                    return '';
+                }
+            }, {
+                prop: 'dataType',
+                label: '数据类型',
+                type: 'input',
+                add: false,
+                edit: false,
+                width: 80
+            }, {
+                prop: 'fieldLength',
+                label: '长度',
+                type: 'input',
+                add: false,
+                edit: false,
+                width: 60,
+                align:"right",
+            }, {
+                prop: 'fieldDecimal',
+                label: '小数位',
+                type: 'input',
+                add: false,
+                edit: false,
+                width: 60,
+                align:"right",
+            }, {
+                prop: 'keyFlag',
+                label: '主键',
+                type: 'input',
+                add: false,
+                edit: false,
+                width: 50,
+                align:"center",
+            }, {
+                prop: 'notNull',
+                label: '非空',
+                type: 'input',
+                add: false,
+                edit: false,
+                width: 50,
+                align:"center",
+            },
+        ];
+        let tAbapTableFieldTable = {
+            title: "字段列表",
+            columns: tAbapTableFieldCols,
+            dataUrl: "/apd/abap/AbapTable/getTableFieldList",
+            saveUrl: "/apd/abap/AbapTable/saveTAbapTableFieldGridData",
+            editPk: "fdId,fieldName,fdType,fdDesc", //默认fdId
+            rowKey: "fieldName",
+            toolbarBtn: [{btnType: "primary", text: "预览", icon: "el-icon-magic-stick", onClick: this.previewTable},
+                "separator", "edit", "refresh", "save"],
+            pagination: {pageSizes: [1000],pageSize: 1000},
+            params: () => {
+                return {
+                    tableName: this.selectedTable
+                }
+            }
+        };
+        return {
+            // ----- 左侧树 -----
+            defaultExpandedKeys: [],
+            treeOptions: this.getTreeOption(),
+            typeList: [],
+            tAbapTableForm: {},
+            tAbapTableRules: {},
+            selectedTable: "",
+            selectedTableId: "",
+            tableFunction: "",
+            tableSapText: "",
+            // ----- 右侧 -----
+            tAbapTableFieldTable: tAbapTableFieldTable,
+            // 预览
+            showSqlDataTable: false,
+            sqlDataTableLoadingFlag: false,
+            dataLimit: 100,
+            sqlDataHeader: [],
+            sqlData: [],
+        }
+    },
+    methods: {
+        // 左侧树：配置
+        getTreeOption() {
+            let treeOptions = {
+                title: "SAP常用表",
+                toolbarBtn: ["add", "edit", "del", "sort"],
+                dialogTitle: "SAP常用表",
+                showCheckbox: false,
+                defaultExpandAll: false,
+                defaultExpandedKeys: [],
+                renderAfterExpand: true,
+                sortByTree: true,
+                sortByDrag: true,
+                indent: 0,
+                onClick: (data, node, comp) => {
+                    if (data.fdType != 2) {
+                        this.defaultExpandedKeys = [data.fdId];
+                        return
+                    }
+                    this.resetTableInfo();
+                    this.tAbapTableFieldTable.title = data.fdName + " (" + data.fdDesc + ")";
+                    this.tableFunction = data.fdFunction;
+                    this.selectedTable = data.fdName;
+                    this.selectedTableId = data.fdId;
+                    this.$refs.tAbapTableFieldTableRef.refresh();
+                    this.getSapTableText();
+                },
+                loadOptions: {
+                    url: "/apd/abap/AbapTable/getTAbapTableList",
+                    treeKey: {
+                        idKey: "fdId",
+                        parentKey: "fdParentId",
+                        childrenKey: "children",
+                        label: "fdName"
+                    },
+                    success: (response) => {
+                        this.treeOptions.defaultExpandedKeys = this.defaultExpandedKeys;
+                        this.$forceUpdate();
+                        this.getTreeGroup();
+                    },
+                },
+                editOptions: {
+                    url: "/apd/abap/AbapTable/getTAbapTableByFdId",
+                    data: (node) => {
+                        return {
+                            fdId: node.fdId
+                        }
+                    },
+                    success: (response) => {
+                        this.tAbapTableForm = response.data;
+                    },
+                    error() {
+                    },
+                },
+                insertUrl: "/apd/abap/AbapTable/insertTAbapTable",
+                insertData: () => {
+                    return this.tAbapTableForm
+                },
+                updateUrl: "/apd/abap/AbapTable/updateTAbapTable",
+                updateData: () => {
+                    return this.tAbapTableForm
+                },
+                deleteUrl: "/apd/abap/AbapTable/deleteTAbapTableByFdId",
+                deleteData: (node) => {
+                    return {
+                        fdId: node.fdId
+                    }
+                },
+                updateSortUrl: '/apd/abap/AbapTable/updateTAbapTableSort',
+                updateSortListUrl: '/apd/abap/AbapTable/updateTAbapTableSortList',
+                resetForm: () => {
+                    this.tAbapTableForm = {
+                        fdParentId: '',
+                        fdType: '',
+                        fdName: '',
+                        fdDesc: '',
+                        fdFunction: '',
+                        fdSort: '',
+                    };
+                },
+                afterOpenAddDialog: (node) => {
+                    this.tAbapTableForm.fdParentId = node.fdId; // 自动赋值表单的父类型
+                },
+                filterNodeMethod: (value, data) => {
+                    if (!value) return true;
+                    if(data["fdName"] != null && data["fdName"].indexOf(value) !== -1) {
+                        return true;
+                    }
+                    if(data["fdDesc"] != null && data["fdDesc"].indexOf(value) !== -1) {
+                        return true;
+                    }
+                    return false;
+                }
+            };
+
+            return treeOptions;
+        },
+        getTreeGroup() {
+            this.$request({
+                url: '/apd/abap/AbapTable/getTableGroupList',
+                method: 'post',
+                data: {}
+            }).then(response => {
+                this.typeList = response.data
+            })
+        },
+        getSapTableText() {
+            this.$request({
+                url: '/apd/abap/AbapTable/getSapTableText',
+                method: 'post',
+                data: {
+                    tableName: this.selectedTable
+                }
+            }).then(response => {
+                this.tableSapText = response.data
+            })
+        },
+        resetTableInfo() {
+            this.tableSapText = "";
+            this.tableFunction = "";
+            this.selectedTable = "";
+            this.selectedTableId = "";
+            this.tAbapTableFieldTable.title = "字段列表";
+        },
+        previewTable(){
+            if (this.selectedTable == null || this.selectedTable == '') {
+                this.$message.error("请选择表");
+                return;
+            }
+
+            this.showSqlDataTable = true;
+            this.sqlDataTableLoadingFlag = true;
+            this.sqlData=[];
+            this.sqlDataHeader=[];
+            let selectStr = "";
+            let selectionKeys = this.$refs.tAbapTableFieldTableRef.getSelectionKeys();
+            if (selectionKeys == null || selectionKeys.length < 1) {
+                selectStr = "*";
+            } else {
+                selectStr = selectionKeys.join(",");
+            }
+            console.log(selectionKeys);
+            this.$request({
+                url: '/apd/abap/TAbapSql/getDataBySql',
+                method: 'post',
+                data: {
+                    sqlStr: `SELECT ${selectStr} FROM saphanadb.${this.selectedTable}`,
+                    dataLimit: this.dataLimit
+                }
+            }).then(response => {
+                this.sqlData = response.data.data;
+                this.sqlDataHeader = response.data.header;
+            }).finally(() => {
+                this.sqlDataTableLoadingFlag = false;
+            })
+        }
+
+    }
+}
+</script>
+
+<style scoped>
+.abap-tree-node-left {
+    font-size: 13px;
+    width: 50%;
+    float: left;
+}
+</style>