Tab组件1.1版

Signed-off-by: 1iyc <5212514+liycone@user.noreply.gitee.com>

src/components/TabComponent/index.vue

@@ -3,13 +3,15 @@
     <el-row :gutter="10">
       <el-col :span="3">
         <el-card class="full-height">
-          <el-button type="primary" size="small" @click="showDialog('add')">新建标签页</el-button>
+
+          <div slot="header">
+            <span> <el-button type="text" size="small" @click="showDialog('add')">新建标签页</el-button></span>
+          </div>
 
           <el-menu
             :default-active="activeTab"
             @select="handleSelect"
             default-active="2"
-
             style="overflow:auto"
           >
             <el-menu-item v-for="(tab, index) in tabs" :key="index" :index="index.toString()">
@@ -24,7 +26,50 @@
             <el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.title" :name="index.toString()">
               <el-button type="text" @click.stop="showDialog('edit', index)">修改</el-button>
               <el-button type="text" @click.stop="disconnectTab(index)">断开</el-button>
-              <div>这是标签页 {{ tab.title }} 的内容</div>
+              <el-button type="text" @click.stop="disconnectTab(index)">打开</el-button>
+
+              <el-table v-loading="false"
+                        :data="tableList"
+                        highlight-current-row
+                        style="width: 100%"
+              >
+                <el-table-column type="selection" align="center" width="55"></el-table-column>
+                <el-table-column label="序号" type="index" width="50" align="center">
+                  <template slot-scope="scope">
+                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="表名称"
+                  align="center"
+                  prop="ffullName"
+                  :show-overflow-tooltip="true"
+                  width="120"
+                />
+                <el-table-column
+                  label="表名称"
+                  align="center"
+                  prop="fname"
+                  :show-overflow-tooltip="true"
+                  width="120"
+                />
+                <el-table-column
+                  label="表描述"
+                  align="center"
+                  prop="fhelpCode"
+                  :show-overflow-tooltip="true"
+                  width="120"
+                />
+              </el-table>
+
+              <pagination
+                v-show="true"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="getList"
+              />
+
             </el-tab-pane>
           </el-tabs>
         </el-card>
@@ -72,6 +117,9 @@
 </template>
 
 <script>
+
+import request from "@/utils/request";
+
 export default {
   props: {
     name: 'TabComponent',
@@ -99,6 +147,7 @@ export default {
       requestFun: this.reqFun,
       dialogVisible: false,
       dialogTitle: '',
+      activeTabData: {},
       currentTabData: {
         title: '',
         name: '',
@@ -108,8 +157,14 @@ export default {
         password: '',
         driverClassName: ''
       },
-      currentTabIndex: null
-    };
+      currentTabIndex: null,
+      tableList: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+    }
   },
   methods: {
     showDialog(mode, index = null) {
@@ -177,7 +232,27 @@ export default {
       } else {
         this.dialogVisible = false;
       }
+    },
+    getActiveTab() {
+      const currentTabIndex = parseInt(this.activeTab);
+      this.activeTabData = this.tabs[currentTabIndex];
+    },
+    getList() {
+      request({
+        url: '/kis/supplier/list/' + this.activeTabData.name,
+        method: 'GET',
+        params: this.queryParams,
+      }).then(response => {
+        this.tableList = response.rows;
+        this.total = response.total;
+      })
     }
+  },
+  created() {
+    this.getActiveTab();
+  },
+  mounted() {
+    this.getList();
   }
 };
 </script>

src/views/gather/pool/index.vue

@@ -41,27 +41,6 @@ export default {
   methods: {
     async openDB(data) {
       await this.closeDialog();
-      /*try {
-        const response = await request({
-          method: 'put',
-          url: "", // 确保 URL 是正确的
-          data: data
-        });
-
-        if (response.data.success) {
-          const newTab = response.data.tab;
-          this.tabs.push(newTab);
-          this.activeTab = (this.tabs.length - 1).toString();
-          this.addTabDialogVisible = false;
-          this.$message.success('标签页添加成功');
-        } else {
-          this.$message.error('标签页添加失败');
-        }
-      } catch (error) {
-        await this.closeDialog();
-        this.$message.error('请求失败，请稍后再试');
-        console.error(error);
-      }*/
     },
     async closeDialog() {
       if (this.$refs.tabComponent) {