Tab组件1.0版

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

@ -0,0 +1,197 @@
<template>
<div class="container">
<el-row :gutter="10">
<el-col :span="3">
<el-card class="full-height">
<el-button type="primary" size="small" @click="showDialog('add')"></el-button>
<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()">
<span>{{ tab.title }}</span>
</el-menu-item>
</el-menu>
</el-card>
</el-col>
<el-col :span="20">
<el-card class="full-height">
<el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab" size="small">
<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-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
<el-dialog
:visible.sync="dialogVisible"
:title="dialogTitle"
:before-close="handleClose"
>
<el-form ref="form" :model="currentTabData" label-width="100px">
<el-form-item label="标题" prop="title" :rules="{ required: true, message: '标题不能为空', trigger: 'blur' }">
<el-input v-model="currentTabData.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="名称" prop="name" :rules="{ required: true, message: '名称不能为空', trigger: 'blur' }">
<el-input v-model="currentTabData.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="数据库类型" prop="dbType"
:rules="{ required: true, message: '数据库类型不能为空', trigger: 'blur' }">
<el-input v-model="currentTabData.dbType" placeholder="请输入数据库类型"></el-input>
</el-form-item>
<el-form-item label="URL" prop="url" :rules="{ required: true, message: 'URL不能为空', trigger: 'blur' }">
<el-input v-model="currentTabData.url" placeholder="请输入URL"></el-input>
</el-form-item>
<el-form-item label="用户名" prop="username"
:rules="{ required: true, message: '用户名不能为空', trigger: 'blur' }">
<el-input v-model="currentTabData.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password"
:rules="{ required: true, message: '密码不能为空', trigger: 'blur' }">
<el-input v-model="currentTabData.password" placeholder="请输入密码" type="password"></el-input>
</el-form-item>
<el-form-item label="驱动类名" prop="driverClassName"
:rules="{ required: true, message: '驱动类名不能为空', trigger: 'blur' }">
<el-input v-model="currentTabData.driverClassName" placeholder="请输入驱动类名"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
<el-button type="primary" @click="submit"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
name: 'TabComponent',
initialTabs: {
type: Array,
default: () => []
},
reqFun: {
type: Function,
default: () => ({})
}
},
data() {
return {
activeTab: '0',
tabs: this.initialTabs.map(tab => ({
title: tab.title || '',
name: tab.name || '',
dbType: tab.dbType || '',
url: tab.url || '',
username: tab.username || '',
password: tab.password || '',
driverClassName: tab.driverClassName || ''
})),
requestFun: this.reqFun,
dialogVisible: false,
dialogTitle: '',
currentTabData: {
title: '',
name: '',
dbType: '',
url: '',
username: '',
password: '',
driverClassName: ''
},
currentTabIndex: null
};
},
methods: {
showDialog(mode, index = null) {
this.dialogTitle = mode === 'add' ? '新建标签页' : '修改标签页';
this.currentTabIndex = index;
if (mode === 'edit') {
this.currentTabData = {...this.tabs[index]};
} else {
this.currentTabData = {
title: '1',
name: '1',
dbType: '1',
url: '1',
username: '1',
password: '1',
driverClassName: '1'
};
}
this.dialogVisible = true;
},
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.currentTabIndex !== null) {
this.tabs[this.currentTabIndex] = {...this.currentTabData};
this.activeTab = this.currentTabIndex.toString();
} else {
this.tabs.push({...this.currentTabData});
this.activeTab = (this.tabs.length - 1).toString();
this.requestFun(this.currentTabData);
}
this.dialogVisible = false;
} else {
const errors = this.$refs.form.fields.filter(field => field.validateState === 'error').map(field => field.validateMessage);
this.$message.error(errors.join(''));
return false;
}
});
},
cancel() {
this.dialogVisible = false;
this.$refs.form.resetFields();
},
removeTab(index) {
this.tabs.splice(index, 1);
if (this.activeTab === index.toString()) {
this.activeTab = Math.max(0, index - 1).toString();
}
},
handleSelect(index) {
this.activeTab = index;
},
disconnectTab(index) {
console.log(`断开标签页 ${index}`);
},
handleClose(done, event) {
if (typeof done === 'function') {
this.$confirm('确认关闭?')
.then(_ => {
this.dialogVisible = false;
done();
})
.catch(_ => {
});
} else {
this.dialogVisible = false;
}
}
}
};
</script>
<style scoped>
.container {
padding: 20px;
}
.full-height {
height: calc(100vh - 125px);
display: flex;
flex-direction: column;
}
</style>

@ -37,6 +37,8 @@ import DictTag from '@/components/DictTag'
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
// tab组件
import TabComponent from '@/components/TabComponent'
// 全局方法挂载
Vue.prototype.getDicts = getDicts
@ -57,6 +59,7 @@ Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.component('TabComponent', TabComponent)
Vue.use(directive)
Vue.use(plugins)

@ -0,0 +1,78 @@
<template>
<div id="app">
<TabComponent
ref="tabComponent"
:initial-tabs="tabs"
:req-fun="openDB"
/>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
tabs: [
{
"title": "开发KIS",
"name": "kisMssql",
"dbType": "mssql",
"url": "jdbc:sqlserver://192.168.3.28:1433;DatabaseName=KIS;encrypt=true;trustServerCertificate=true;",
"username": "sa",
"password": "mssql_whdZeB",
"driverClassName": "com.microsoft.sqlserver.jdbc.SQLServerDriver"
},
{
"title": "本地KIS",
"name": "localKis",
"dbType": "mssql",
"url": "jdbc:sqlserver://192.168.3.252:1433;DatabaseName=KIS_Sample;trustServerCertificate=true;sslProtocol=TLSv1.2;",
"username": "sa",
"password": "abc123456.",
"driverClassName": "com.microsoft.sqlserver.jdbc.SQLServerDriver"
},
],
addTabDialogVisible: false,
activeTab: null
};
},
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) {
this.$refs.tabComponent.handleClose();
} else {
console.error('TabComponent ref is not defined');
}
}
},
mounted() {
// console.log('App mounted', this.$refs.tabComponent);
}
};
</script>
Loading…
Cancel
Save