Tab组件1.1版

Signed-off-by: 1iyc <5212514+liycone@user.noreply.gitee.com>
main
1iyc 7 days ago
parent 48aba02087
commit 8092217e8a

@ -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>

@ -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) {

Loading…
Cancel
Save