Tab组件1.0版

Signed-off-by: 1iyc <5212514+liycone@user.noreply.gitee.com>
4 weeks ago · 48aba02087
parent d327a1e278
commit 48aba02087
3 changed files with 278 additions and 0 deletions
--- a/src/components/TabComponent/index.vue
+++ b/src/components/TabComponent/index.vue
@ -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>
--- a/src/main.js
+++ b/src/main.js
@ -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)
--- a/src/views/gather/pool/index.vue
+++ b/src/views/gather/pool/index.vue
@ -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>