From 98a08f6493db8da48119d5f3062c47ee6bafc13f Mon Sep 17 00:00:00 2001 From: Feynman Date: Fri, 10 Jan 2025 12:41:34 +0800 Subject: [PATCH 1/2] refactor: update tab naming and improve form handling - Renamed tabs in Database and Table nodes from `tab2` to `advancedTab` and `tab3` to `alarmTab` for better clarity. - Enhanced form handling in SchemaPanel by ensuring `nextTick` is used when loading data based on active tab. - Adjusted the form schema to include new tab indices for better organization and accessibility. - Updated the FormPanel component to comment out the active tab reset logic, preventing unintended behavior. --- packages/dag/src/components/FormPanel.vue | 2 +- .../src/components/form/field-inference/List.vue | 4 ++-- .../dag/src/components/form/schema-panel/index.js | 13 +++++++++---- packages/dag/src/nodes/Database.js | 2 +- packages/dag/src/nodes/Table.js | 4 ++-- packages/dag/src/nodes/extends/NodeType.js | 10 ++++++++++ 6 files changed, 25 insertions(+), 10 deletions(-) diff --git a/packages/dag/src/components/FormPanel.vue b/packages/dag/src/components/FormPanel.vue index 7370243af4..8cdee55759 100644 --- a/packages/dag/src/components/FormPanel.vue +++ b/packages/dag/src/components/FormPanel.vue @@ -91,7 +91,7 @@ export default { const formSchema = this.$store.getters['dataflow/formSchema'] || {} // 重置TAB - this.scope?.formTab?.setActiveKey('tab1') + // this.scope?.formTab?.setActiveKey('tab1') if (!this.ins) { // 节点不存在，比如删掉了，清除表单 diff --git a/packages/dag/src/components/form/field-inference/List.vue b/packages/dag/src/components/form/field-inference/List.vue index af86a22dc0..ebd94183fa 100644 --- a/packages/dag/src/components/form/field-inference/List.vue +++ b/packages/dag/src/components/form/field-inference/List.vue @@ -21,13 +21,13 @@ :open-delay="200" transition="none" > - + fingerprint circle-dashed-letter-pcircle-dashed-letter-p file-hash {{ diff --git a/packages/dag/src/components/form/schema-panel/index.js b/packages/dag/src/components/form/schema-panel/index.js index ff56142408..470d595668 100644 --- a/packages/dag/src/components/form/schema-panel/index.js +++ b/packages/dag/src/components/form/schema-panel/index.js @@ -1,4 +1,4 @@ -import { defineComponent, onBeforeUnmount, watch } from '@vue/composition-api' +import { defineComponent, onBeforeUnmount, watch, nextTick } from '@vue/composition-api' import { useForm } from '@tap/form' import MigrateMetaPane from '../../migration/MigrateMetaPane' import { observe } from '@formily/reactive' @@ -11,14 +11,19 @@ export const SchemaPanel = defineComponent({ loadData() }) const loadData = () => { - if (props.formTab.activeKey === 'tab2') { - refs.pane.loadData() + if (props.formTab?.activeKey === 'tab2') { + nextTick(() => { + refs.pane?.loadData() + }) } } const unWatch = watch( - () => props.formTab.activeKey, + () => props.formTab?.activeKey, () => { loadData() + }, + { + immediate: true } ) diff --git a/packages/dag/src/nodes/Database.js b/packages/dag/src/nodes/Database.js index 27fb541713..ccc0fb0c6e 100644 --- a/packages/dag/src/nodes/Database.js +++ b/packages/dag/src/nodes/Database.js @@ -1166,7 +1166,7 @@ export class Database extends NodeType { } } }, - tab3: { + alarmTab: { type: 'void', 'x-component': 'FormTab.TabPane', 'x-component-props': { diff --git a/packages/dag/src/nodes/Table.js b/packages/dag/src/nodes/Table.js index c58ff3df5e..bdd5d98f72 100644 --- a/packages/dag/src/nodes/Table.js +++ b/packages/dag/src/nodes/Table.js @@ -601,7 +601,7 @@ export class Table extends NodeType { } } }, - tab2: { + advancedTab: { type: 'void', 'x-component': 'FormTab.TabPane', 'x-component-props': { @@ -1761,7 +1761,7 @@ export class Table extends NodeType { } } }, - tab3: { + alarmTab: { type: 'void', 'x-component': 'FormTab.TabPane', 'x-component-props': { diff --git a/packages/dag/src/nodes/extends/NodeType.js b/packages/dag/src/nodes/extends/NodeType.js index 8ba3078111..12b5b55e8c 100644 --- a/packages/dag/src/nodes/extends/NodeType.js +++ b/packages/dag/src/nodes/extends/NodeType.js @@ -43,9 +43,18 @@ export class NodeType { } if (this.group === 'processor') { + if (formSchema.properties.tabs.properties.tab1) { + formSchema.properties.tabs.properties.tab1['x-index'] = 1 + } + + if (formSchema.properties.tabs.properties.tab2) { + formSchema.properties.tabs.properties.tab2['x-index'] = 3 + } + if (!formSchema.properties.tabs.properties.advancedTab) { formSchema.properties.tabs.properties.advancedTab = { type: 'void', + 'x-index': 2, 'x-component': 'FormTab.TabPane', 'x-component-props': { label: i18n.t('public_advanced_settings') @@ -99,6 +108,7 @@ export class NodeType { if (!formSchema.properties.tabs.properties.alarmTab) { formSchema.properties.tabs.properties.alarmTab = { type: 'void', + 'x-index': 4, 'x-component': 'FormTab.TabPane', 'x-component-props': { label: i18n.t('packages_dag_migration_configpanel_gaojingshezhi'), From 76852dc266753288ffd578c6fed248ba65a3aca1 Mon Sep 17 00:00:00 2001 From: Feynman Date: Fri, 10 Jan 2025 15:01:45 +0800 Subject: [PATCH 2/2] feat: implement table settings management for pagination - Introduced a new `tableSettings` object to manage pagination settings, allowing users to save and load their preferred page size from local storage. - Updated the pagination component to use `handleSizeChange` for size changes, enhancing user experience by persisting settings across sessions. - Refactored the page size initialization to retrieve the size based on the current route, improving flexibility and usability. --- .../business/src/components/TablePage.vue | 52 +++++++++++++++++-- 1 file changed, 49 insertions(+), 3 deletions(-) diff --git a/packages/business/src/components/TablePage.vue b/packages/business/src/components/TablePage.vue index 4bff1193a9..4d496a2f55 100644 --- a/packages/business/src/components/TablePage.vue +++ b/packages/business/src/components/TablePage.vue @@ -94,7 +94,7 @@ :page-sizes="[10, 20, 50, 100]" :page-size.sync="page.size" :total="page.total" - @size-change="fetch(1)" + @size-change="handleSizeChange" @current-change="handleCurrent" > @@ -118,6 +118,44 @@ import { makeDragNodeImage } from '../shared' import SelectClassify from './SelectClassify' +const tableSettings = { + settings: {}, + + init() { + this.load() + }, + + getPageSize(routeName, defaultSize = 20) { + return this.settings[routeName]?.pageSize || defaultSize + }, + + setPageSize(routeName, pageSize) { + const setting = this.settings[routeName] + + if (setting) { + setting.pageSize = pageSize + } else { + this.settings[routeName] = { pageSize } + } + + this.save() + }, + + save() { + localStorage.setItem('TAPDATA_TABLE_SETTINGS', JSON.stringify(this.settings)) + }, + + load() { + const settings = localStorage.getItem('TAPDATA_TABLE_SETTINGS') + if (settings) { + this.settings = JSON.parse(settings) + } + } +} + +// Initialize settings on creation +tableSettings.init() + export default { components: { Classification, @@ -148,11 +186,16 @@ export default { draggable: Boolean }, data() { + const isDaas = process.env.VUE_APP_PLATFORM === 'DAAS' + + console.log('settings', localStorage.getItem('TAPDATA_TABLE_SETTINGS'), this.settings,) + return { + isDaas, loading: false, page: { current: 1, - size: this.defaultPageSize, + size: tableSettings.getPageSize(this.$route.name, this.defaultPageSize), total: 0 }, list: [], @@ -306,11 +349,14 @@ export default { } catch (e) { console.error(e) } + }, + handleSizeChange(val) { + tableSettings.setPageSize(this.$route.name, val) + this.fetch(1) } } } -