优化

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

src/components/Search/index.vue

@@ -65,8 +65,8 @@ export default {
     handleQuery() {
       this.$refs.queryForm.validate(valid => {
         if (valid) {
-          // 处理查询逻辑
-          console.log('查询参数:', this.queryParams);
+          // 表单验证通过，将查询参数传递给父组件
+          this.$emit('query', this.queryParams);
         } else {
           console.log('验证失败');
         }
@@ -74,6 +74,8 @@ export default {
     },
     resetQuery() {
       this.$refs.queryForm.resetFields();
+      // 重置查询参数
+      this.$emit('reset', this.queryParams);
     }
   }
 };

src/components/TabComponent/index.vue

@@ -4,10 +4,10 @@
       <el-col :span="3">
         <el-card style="height: calc(100vh - 125px)">
           <div slot="header">
-            <span><el-button type="text" size="small" @click="showDialog('add')">新建标签页</el-button></span>
+            <span><el-button type="text" size="small">新建标签页</el-button></span>
           </div>
           <el-menu
-            :default-active="active"
+            :default-active="localIndex"
             @select="onSelect"
             mode="horizontal"
           >
@@ -21,10 +21,10 @@
         </el-card>
       </el-col>
 
-      <!--      -->
       <el-col :span="20">
         <el-card style="height: calc(100vh - 125px)">
-          <el-tabs v-model="active"
+
+          <el-tabs v-model="localIndex"
                    type="card"
                    closable
                    @tab-remove="removeTab"
@@ -36,360 +36,148 @@
                          :name="index.toString()"
                          :label="tab.title"
             >
-
-              <!--  form表单 -->
-              <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="form.length > 0">
-                <el-form-item v-for="(field, index) in form"
-                              :key="index"
-                              :label="field.label"
-                              :prop="field.prop"
-                              v-if="field.type !== 'button'">
-                  <component
-                    :is="getComponentType(field.type)"
-                    v-bind="field"
-                    v-model="queryParams[field.prop]"
-                    :placeholder="field.placeholder"
-                  >
-                    <!-- 下拉框选项 -->
-                    <el-option
-                      v-if="field.type === 'select'"
-                      v-for="option in field.options"
-                      :key="option.value"
-                      :label="option.label"
-                      :value="option.value"
-                    ></el-option>
-                  </component>
-                </el-form-item>
-
-                <el-form-item>
-                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-                </el-form-item>
-              </el-form>
-
-
+              <!-- 查询条件 -->
+              <Search
+                :search-fields="searchFields"
+                :query-params="queryParams"
+                @query="handleQuery"
+                @reset="handleReset"
+              />
               <!-- 表格 -->
-              <el-table
-                :data="tableData"
-                highlight-current-row
-                style="width: 100%"
-                v-loading="loading"
-              >
-
-                <el-table-column label="序号" type="index" width="80" align="center">
-                  <template slot-scope="scope">
-                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
-                  </template>
-                </el-table-column>
-
-                <el-table-column
-                  v-for="(column, index) in columns"
-                  :prop="column.key"
-                  :label="column.title"
-                  :width="column.width"
-                  :align="column.align"
-                  :show-overflow-tooltip="column.tooltip"
+              <div class="table-container">
+                <Table
+                  :columns="columnsFields"
+                  :rows="rows"
+                  :pagination="true"
+                  :total="total"
+                  :currentPage="currentPage"
+                  :pageSize="pageSize"
+                  :loading="loading"
+                  @sort-change="handleSortChange"
+                  @page-change="handlePageChange"
                 />
-
-
-                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-                  <template slot-scope="scope">
-                    <el-button
-                      size="mini"
-                      type="text"
-                      icon="el-icon-edit"
-                      @click="handleUpdate(scope.row)"
-                      v-hasPermi="['system:dept:edit']"
-                    >修改
-                    </el-button>
-
-                    <el-button
-                      size="mini"
-                      type="text"
-                      icon="el-icon-edit"
-                      @click="handleUpdate(scope.row)"
-                      v-hasPermi="['system:dept:edit']"
-                    >同步
-                    </el-button>
-
-                  </template>
-                </el-table-column>
-
-              </el-table>
+              </div>
             </el-tab-pane>
           </el-tabs>
-
-
-          <pagination
-            v-show="true"
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            :page-sizes="[2,5,10]"
-            @pagination="getList"
-          />
-
         </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',
-    initMenuItem: {
+    index: {
+      type: String,
+      default: '1'
+    },
+    tabs: {
       type: Array,
       default: () => [{
         title: '数据库',
       }]
     },
-    callBackSelect: {
-      type: Function,
-      default: () => ({})
-    },
-    initForm: {
+    searchFields: {
       type: Array,
-      default: () => [{
-        type: 'input',
-        label: '表名',
-        prop: 'tableName',
-        placeholder: '请输入表名',
-      }]
+      default: () => []
+    },
+    queryParams: {
+      type: Object,
+      default: () => ({})
     },
-    initColumns: {
+    columnsFields: {
       type: Array,
-      default: () => [{
-        type: 'id',
-        width: 55,
-        align: 'center'
-      }]
+      default: () => []
     },
-    initTableData: {
+    rows: {
       type: Array,
       default: () => []
     },
-    initActive: {
-      type: String,
-      default: '0'
-    }
-  }
-  ,
-  data() {
-    return {
-      active: this.initActive,
-      tabs: this.initMenuItem,
-      form: this.initForm,
-      columns: this.initColumns,
-      tableData: this.initTableData,
-      loading: false,
-
-      dialogVisible: false,
-      dialogTitle: '',
-      currentTabData: {
-        title: '',
-        name: '',
-        dbType: '',
-        url: '',
-        username: '',
-        password: '',
-        driverClassName: ''
+    currentPage: {
+      type: Number,
+      default: 1
     },
-      currentTabIndex: null,
-      total: 0,
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        activeTab: {},
+    pageSize: {
+      type: Number,
+      default: 20
     },
-    }
-  }
-  ,
-  mounted() {
-    //  console.log(JSON.stringify(this.initMenuItem))
-    //  console.log(JSON.stringify(this.columns))
-    this.setDefaultValue()
-    this.onSelect(this.active)
-  }
-  ,
-  methods: {
-    getComponentType(type) {
-      switch (type) {
-        case 'input':
-          return 'el-input';
-        case 'textarea':
-          return 'el-input';
-        case 'select':
-          return 'el-select';
-        case 'checkbox':
-          return 'el-checkbox';
-        case 'radio':
-          return 'el-radio';
-        case 'date':
-          return 'el-date-picker';
-        case 'button':
-          return 'el-button';
-        default:
-          return 'el-input';
+    total: {
+      type: Number,
+      default: 0
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
-    /* 设置默认值*/
-    setDefaultValue() {
-      this.form.forEach(field => {
-        if (field.type === 'select' && field.options) {
-          const defaultOption = field.options.find(option => option.default);
-          if (defaultOption) {
-            this.queryParams[field.prop] = defaultOption.value;
+  data() {
+    return {
+      localIndex: this.index,
     }
+  },
+  watch: {
+    index(newVal) {
+      this.localIndex = newVal;
+    },
+    localIndex(newVal) {
+      this.$emit('update:index', newVal);
     }
-      });
   },
-    /* 选中菜单 */
+  methods: {
     onSelect(index) {
-      this.queryParams.activeTab = this.tabs[index]
-      this.callBackSelect(this.queryParams)
+      this.localIndex = index;
+      this.queryParams.name = this.tabs[index].name;
+      this.handleQuery();
     },
-
-    /* tabs 单击事件 */
     onClick(tab) {
-      this.queryParams.activeTab = this.tabs[tab.name]
-      this.callBackSelect(this.queryParams)
+      this.localIndex = tab.name;
+      this.queryParams.name = this.tabs[tab.name].name;
+      this.handleQuery();
     },
-
-    /* 加载表格数据*/
-    loadTableData(tableData, total) {
-      this.tableData = tableData;
-      this.total = total;
+    handleQuery(queryParams) {
+      if (queryParams) {
+        this.queryParams = queryParams;
+      }
+      this.$emit('query', this.queryParams);
     },
-
-    getList() {
-      this.callBackSelect(this.queryParams)
+    handleReset() {
+      this.$emit('reset', this.queryParams);
     },
-
-
-    handleQuery() {
-      this.getList();
+    handleUpdate(row) {
+      alert(row.id);
     },
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+    handleSortChange() {
     },
+    handlePageChange() {
+    },
+    removeTab(targetName) {
+      const tabs = this.tabs;
+      let activeName = this.localIndex;
 
-
-    showDialog(mode, index = null) {
-      this.dialogTitle = mode === 'add' ? '新建标签页' : '修改标签页';
-      this.currentTabIndex = index;
-      if (mode === 'edit') {
-        this.currentTabData = {...this.tabs[index]};
-      } else {
-        this.currentTabData = {
-          title: '',
-          name: '',
-          dbType: '',
-          url: '',
-          username: '',
-          password: '',
-          driverClassName: ''
-        };
-      }
-      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();
+      if (activeName === targetName) {
+        tabs.forEach((tab, index) => {
+          if (tab.name === targetName) {
+            const nextTab = tabs[index + 1] || tabs[index - 1];
+            if (nextTab) {
+              activeName = nextTab.name;
             }
           }
-
-    ,
-
-
-    handleClose(done, event) {
-      if (typeof done === 'function') {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            this.dialogVisible = false;
-            done();
-          })
-          .catch(_ => {
         });
-      } else {
-        this.dialogVisible = false;
-      }
-    }
-    ,
-    handleUpdate(row) {
-      alert(row.id)
       }
 
-
+      this.localIndex = activeName;
+      this.$emit('update:index', activeName);
+      this.$emit('remove', targetName);
+    },
   }
 }
 </script>
+
+<style scoped>
+.table-container {
+  height: calc(100vh - 250px); /* 调整高度以适应页面布局 */
+  overflow-y: auto; /* 添加垂直滚动条 */
+}
+</style>

src/components/Table/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <el-table
+      :data="rows"
+      border
+      stripe
+      style="width: 100%"
+      v-loading="loading"
+      @sort-change="handleSortChange"
+    >
+      <el-table-column
+        v-for="column in columns"
+        :key="column.prop"
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.width"
+        :sortable="column.sortable"
+        :show-overflow-tooltip="true"
+      >
+        <template slot-scope="scope">
+          <span v-if="column.formatter">{{ column.formatter(scope.row[column.prop]) }}</span>
+          <span v-else>{{ scope.row[column.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-if="pagination"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      style="margin-top: 20px"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    columns: {
+      type: Array,
+      required: true
+    },
+    rows: {
+      type: Array,
+      required: true
+    },
+    pagination: {
+      type: Boolean,
+      default: true
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleSortChange({prop, order}) {
+      this.$emit('sort-change', {prop, order});
+    },
+    handleSizeChange(newSize) {
+      this.$emit('update:page-size', newSize);
+      this.$emit('page-change', {page: this.currentPage, size: newSize});
+    },
+    handleCurrentChange(newPage) {
+      this.$emit('update:current-page', newPage);
+      this.$emit('page-change', {page: newPage, size: this.pageSize});
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 添加一些样式 */
+</style>

src/main.js

@@ -42,6 +42,7 @@ import webSite from "@/config/website";
 import TabComponent from '@/components/TabComponent'
 import Forms from '@/components/Forms'
 import Search from '@/components/Search'
+import Table from '@/components/Table'
 
 // 全局方法挂载
 Vue.prototype.website = webSite;
@@ -66,6 +67,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.component('TabComponent', TabComponent)
 Vue.component('Forms', Forms)
 Vue.component('Search', Search)
+Vue.component('Table', Table)
 
 Vue.use(directive)
 Vue.use(plugins)

src/views/gather/pool/index.vue

@@ -1,17 +1,22 @@
 <template>
   <div id="app">
-
-
     <TabComponent
       v-if="tabs.length > 0"
       ref="tabComponent"
-      :init-menu-item.sync="tabs"
-      :init-form="table.form"
-      :init-columns="table.column"
-      :call-back-select="backSelect"
-      :init-active="'1'"
-    >
-    </TabComponent>
+      :active="active.index.toString()"
+      :tabs="tabs"
+      :search-fields="searchFields"
+      :query-params="queryParams"
+      :columns-fields="columnFields"
+      :rows="rows"
+      :current-page="queryParams.pageNum"
+      :page-size="queryParams.pageSize"
+      :total="queryParams.total"
+      :loading="loading"
+      @query="handleQuery"
+      @reset="handleReset"
+      @toggle="getRows"
+    />
   </div>
 </template>
 
@@ -22,101 +27,65 @@ export default {
   name: 'App',
   data() {
     return {
+      active: {
+        index: 0, // 默认值为 0，确保在 tabs 为空时不会出错
+      },
+      rows: [],
       addTabDialogVisible: false,
-      table: {
-        form: [
+      searchFields: [
         {
           type: 'input',
-            label: '表名',
+          label: '表名称',
           prop: 'tableName',
-            placeholder: '请输入表名',
+          placeholder: '请输入表名称',
+          gutter: 2,
         },
         {
           type: 'input',
           label: '表描述',
           prop: 'tableDescription',
           placeholder: '请输入表描述',
-            span: 6
+          gutter: 2,
         },
         {
           type: 'input',
           label: '表注',
           prop: 'tableNote',
           placeholder: '请输入表注',
+          gutter: 2,
         },
         {
           type: 'select',
-            label: '是否启用',
+          label: '启用',
           prop: 'enable',
-            placeholder: '请选择是否启用',
+          placeholder: '请选择',
+          gutter: 2,
           options: [
-              {
-                label: '是',
-                value: '1',
-                default: true
-              },
-              {
-                label: '否',
-                value: '0'
-              }
-            ]
-          },
+            {label: '是', value: '1'},
+            {label: '否', value: '0'},
           ],
-        column: [
-          {
-            type: 'id',
-            width: 55,
-            align: 'center'
-          },
-          {
-            title: '表名称',
-            key: 'tableName',
-            align: 'center'
         },
-          {
-            title: '描述',
-            key: 'tableDescription',
-            align: 'center'
-          },
-          {
-            title: '表注',
-            key: 'tableNote',
-            align: 'center'
-          },
-          {
-            title: '启用',
-            key: 'enable',
-            align: 'center',
-          },
-          {
-            title: 'cron （定时）',
-            key: 'cron',
-            align: 'center'
-          }
       ],
-        rows: [],
-      },
-      initActiveTab: "0",
-
-      tabs: [],
-      activeTab: {
-        title: undefined,
-        name: undefined,
-        dbType: undefined,
-        url: undefined,
-        username: undefined,
-        driverClassName: undefined,
-      },
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        total: 0,
         name: undefined,
         tableName: undefined,
         enable: undefined,
         tableDescription: undefined,
         tableNote: undefined,
         cron: undefined,
-      }
+      },
+      columnFields: [
+        {label: 'ID', prop: 'id', width: '100', sortable: true},
+        {label: '表名称', prop: 'tableName', sortable: true},
+        {label: '表注', prop: 'tableDescription', sortable: true},
+        {label: '启用', prop: 'enable', formatter: (value) => (value ? '启用' : '禁用'), sortable: true},
+        {label: '定时', prop: 'cron'},
+      ],
+      tabs: [],
+      loading: false, // 添加 loading 属性
     };
   },
 
@@ -126,7 +95,8 @@ export default {
 
   methods: {
     getNav() {
-      getNav().then(response => {
+      getNav()
+        .then(response => {
           this.tabs = response.data.map(item => ({
             title: item.alias,
             name: item.name,
@@ -136,35 +106,49 @@ export default {
             driverClassName: item.driverClassName
           }));
           if (this.tabs.length > 0) {
-          this.activeTab = this.tabs[0];
-          this.queryParams.name = this.activeTab.name
-          this.getDataList();
+            this.active.index = 0; // 设置默认选中第一个标签页
+            this.queryParams.name = this.tabs[this.active.index].name;
+            this.getRows();
           }
-      }).catch(error => {
+        })
+        .catch(error => {
           console.error('Failed to fetch navigation data:', error);
         });
     },
-
-    backSelect(callBackActiveTab) {
-      console.log(JSON.stringify(callBackActiveTab));
-      this.activeTab = callBackActiveTab.activeTab
-      this.queryParams.pageNum = callBackActiveTab.pageNum
-      this.queryParams.pageSize = callBackActiveTab.pageSize
-      this.queryParams.enable = callBackActiveTab.enable
-      this.queryParams.name = this.activeTab.name
-      this.getDataList();
+    // 查询
+    handleQuery() {
+      this.getRows();
     },
-
-    getDataList() {
-      console.log('getDataList', JSON.stringify(this.queryParams));
+    // 重置
+    handleReset() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        name: undefined,
+        tableName: undefined,
+        enable: undefined,
+        tableDescription: undefined,
+        tableNote: undefined,
+        cron: undefined,
+      };
+      this.getRows();
+    },
+    // 切换
+    getRows() {
+      this.loading = true; // 开始加载时设置 loading 为 true
       getTasks(this.queryParams)
         .then(response => {
-          this.$refs.tabComponent.loadTableData(response.rows, response.total);
+          this.rows = response.rows;
+          this.queryParams.total = response.total; // 更新总记录数
         })
         .catch(error => {
           console.error('Failed to fetch data list:', error);
+        })
+        .finally(() => {
+          this.loading = false; // 加载完成后设置 loading 为 false
         });
-    }
+    },
   }
 };
 </script>