diff --git a/src/components/Search/index.vue b/src/components/Search/index.vue index ec79f16..280e211 100644 --- a/src/components/Search/index.vue +++ b/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); } } }; diff --git a/src/components/TabComponent/index.vue b/src/components/TabComponent/index.vue index b44b734..390bb76 100644 --- a/src/components/TabComponent/index.vue +++ b/src/components/TabComponent/index.vue @@ -4,10 +4,10 @@
- 新建标签页 + 新建标签页
@@ -21,10 +21,10 @@ - - - - - - - - - - - - - - 搜索 - 重置 - - - - - - - - - - - - + + +
+ - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- 取 消 - 确 定 -
- + + diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue new file mode 100644 index 0000000..2bb1506 --- /dev/null +++ b/src/components/Table/index.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/src/main.js b/src/main.js index 501b6a8..c516d92 100644 --- a/src/main.js +++ b/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) diff --git a/src/views/gather/pool/index.vue b/src/views/gather/pool/index.vue index 675f9ee..b312701 100644 --- a/src/views/gather/pool/index.vue +++ b/src/views/gather/pool/index.vue @@ -1,17 +1,22 @@ @@ -22,101 +27,65 @@ export default { name: 'App', data() { return { - addTabDialogVisible: false, - table: { - form: [ - { - type: 'input', - label: '表名', - prop: 'tableName', - placeholder: '请输入表名', - }, - { - type: 'input', - label: '表描述', - prop: 'tableDescription', - placeholder: '请输入表描述', - span: 6 - }, - { - type: 'input', - label: '表注', - prop: 'tableNote', - placeholder: '请输入表注', - }, - { - type: 'select', - label: '是否启用', - prop: 'enable', - placeholder: '请选择是否启用', - options: [ - { - label: '是', - value: '1', - default: true - }, - { - 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, + active: { + index: 0, // 默认值为 0，确保在 tabs 为空时不会出错 }, + rows: [], + addTabDialogVisible: false, + searchFields: [ + { + type: 'input', + label: '表名称', + prop: 'tableName', + placeholder: '请输入表名称', + gutter: 2, + }, + { + type: 'input', + label: '表描述', + prop: 'tableDescription', + placeholder: '请输入表描述', + gutter: 2, + }, + { + type: 'input', + label: '表注', + prop: 'tableNote', + placeholder: '请输入表注', + gutter: 2, + }, + { + type: 'select', + label: '启用', + prop: 'enable', + placeholder: '请选择', + gutter: 2, + options: [ + {label: '是', value: '1'}, + {label: '否', value: '0'}, + ], + }, + ], 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,45 +95,60 @@ export default { methods: { getNav() { - getNav().then(response => { - this.tabs = response.data.map(item => ({ - title: item.alias, - name: item.name, - dbType: item.dbType, - url: item.url, - username: item.username, - driverClassName: item.driverClassName - })); - if (this.tabs.length > 0) { - this.activeTab = this.tabs[0]; - this.queryParams.name = this.activeTab.name - this.getDataList(); - } - }).catch(error => { - console.error('Failed to fetch navigation data:', error); - }); + getNav() + .then(response => { + this.tabs = response.data.map(item => ({ + title: item.alias, + name: item.name, + dbType: item.dbType, + url: item.url, + username: item.username, + driverClassName: item.driverClassName + })); + if (this.tabs.length > 0) { + this.active.index = 0; // 设置默认选中第一个标签页 + this.queryParams.name = this.tabs[this.active.index].name; + this.getRows(); + } + }) + .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 }); - } + }, } };