From e0dd4957e0d20b0e25bdf17122cfa61ae864f1dd Mon Sep 17 00:00:00 2001 From: Feynman Date: Thu, 22 May 2025 15:52:07 +0800 Subject: [PATCH 1/3] refactor: streamline task inspection lifecycle methods - Replaced the watch function with onMounted to initiate data fetching and looping when the component is mounted. - Removed unnecessary logic for stopping the loop based on tab changes, simplifying the component's lifecycle management. --- .../monitor/components/TaskInspect.vue | 24 ++++--------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/packages/dag/src/components/monitor/components/TaskInspect.vue b/packages/dag/src/components/monitor/components/TaskInspect.vue index 1e4904d61d..6b28c7bbaa 100644 --- a/packages/dag/src/components/monitor/components/TaskInspect.vue +++ b/packages/dag/src/components/monitor/components/TaskInspect.vue @@ -3,7 +3,7 @@ import { taskInspectApi } from '@tap/api' import { VEmpty } from '@tap/component' import i18n from '@tap/i18n' import dayjs from 'dayjs' -import { onBeforeUnmount, ref, watch } from 'vue' +import { onBeforeUnmount, onMounted, ref, watch } from 'vue' import InspectDetailDialog from './InspectDetailDialog.vue' interface Props { @@ -165,25 +165,9 @@ const stopLoop = () => { } } -watch( - () => props.currentTab, - (val) => { - if (val === 'inspect') { - fetch() - startLoop() - } else { - stopLoop() - } - }, -) - -fetch().then(async () => { - if (!inspectList.value.length) { - const enabled = await checkEnabled() - if (!enabled) { - showEnabled.value = true - } - } +onMounted(() => { + fetch() + startLoop() }) onBeforeUnmount(() => { From 84b4215f4c6b2f68d0259e12e01cdd6b9d793e30 Mon Sep 17 00:00:00 2001 From: Feynman Date: Thu, 22 May 2025 16:25:28 +0800 Subject: [PATCH 2/3] feat: add key property to schema in SettingPanel.vue for task inspection - Introduced a new key property with default value 'TASK_INSPECT_DIFFERENCE' to the schema in SettingPanel.vue, enhancing the configuration options for task inspection. --- packages/dag/src/components/migration/SettingPanel.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/dag/src/components/migration/SettingPanel.vue b/packages/dag/src/components/migration/SettingPanel.vue index f4eb461fbe..cbad45d736 100644 --- a/packages/dag/src/components/migration/SettingPanel.vue +++ b/packages/dag/src/components/migration/SettingPanel.vue @@ -1647,6 +1647,12 @@ const schema = { class: 'flex align-center', }, properties: { + key: { + type: 'string', + default: 'TASK_INSPECT_DIFFERENCE', + 'x-editable': true, + 'x-display': 'hidden', + }, open: { title: i18n.t('packages_dag_task_inspect_difference_alarm'), type: 'boolean', From 33829ebfa7eab6e5b99bf441955783052ab4e248 Mon Sep 17 00:00:00 2001 From: Feynman Date: Thu, 22 May 2025 17:57:55 +0800 Subject: [PATCH 3/3] chore: update package.json and pnpm-lock.yaml to remove @formily/vue patch - Removed the patch for @formily/vue@2.3.3 from package.json and pnpm-lock.yaml to streamline dependency management. - Updated pnpm-lock.yaml to reflect the removal and ensure consistency across the project. - Adjusted component imports and styles in TableSelect and InfiniteSelect for improved functionality and user experience. --- apps/daas/src/components.d.ts | 4 +- package.json | 3 +- .../components/form/schema-preview/index.jsx | 4 +- .../components/form/table-select/index.jsx | 74 +++++++++++-------- .../components/form/table-select/style.scss | 11 +-- .../infinite-select/InfiniteSelect.vue | 50 ++++++++----- pnpm-lock.yaml | 22 +++--- 7 files changed, 99 insertions(+), 69 deletions(-) diff --git a/apps/daas/src/components.d.ts b/apps/daas/src/components.d.ts index bbeefec609..393a53239b 100644 --- a/apps/daas/src/components.d.ts +++ b/apps/daas/src/components.d.ts @@ -2,6 +2,7 @@ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 +// biome-ignore lint: disable export {} /* prettier-ignore */ @@ -34,11 +35,11 @@ declare module 'vue' { ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] + ElEmpty: typeof import('element-plus/es')['ElEmpty'] ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElHeader: typeof import('element-plus/es')['ElHeader'] ElIcon: typeof import('element-plus/es')['ElIcon'] - ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight'] ElIconCircleCloseFilled: typeof import('@element-plus/icons-vue')['CircleCloseFilled'] ElIconCirclePlus: typeof import('@element-plus/icons-vue')['CirclePlus'] ElIconLoading: typeof import('@element-plus/icons-vue')['Loading'] @@ -64,7 +65,6 @@ declare module 'vue' { ElRow: typeof import('element-plus/es')['ElRow'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSelect: typeof import('element-plus/es')['ElSelect'] - ElSelectLoading: typeof import('element-plus/es')['ElSelectLoading'] ElSelectV2: typeof import('element-plus/es')['ElSelectV2'] ElSkeleton: typeof import('element-plus/es')['ElSkeleton'] ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem'] diff --git a/package.json b/package.json index cb51e724b0..568d445108 100644 --- a/package.json +++ b/package.json @@ -66,8 +66,7 @@ "vue-virtual-scroller": "2.0.0-beta.8" }, "patchedDependencies": { - "@formily/element-plus@1.1.0": "patches/@formily__element-plus@1.1.0.patch", - "@formily/vue@2.3.3": "patches/@formily__vue@2.3.3.patch" + "@formily/element-plus@1.1.0": "patches/@formily__element-plus@1.1.0.patch" } }, "prettier": "@sxzz/prettier-config" diff --git a/packages/dag/src/components/form/schema-preview/index.jsx b/packages/dag/src/components/form/schema-preview/index.jsx index d0a0790057..cc56730ed7 100644 --- a/packages/dag/src/components/form/schema-preview/index.jsx +++ b/packages/dag/src/components/form/schema-preview/index.jsx @@ -89,7 +89,9 @@ export const SchemaPreview = defineComponent({ tableName.value = schema.name || form.values.tableName || form.values.name - emit('update-table-name', tableName.value) + + // 仅仅为了动态日期后缀更新，增加这个事件有风险，会循环更新表名 + // emit('update-table-name', tableName.value) const { isMultiIndex: _isMultiIndex, diff --git a/packages/dag/src/components/form/table-select/index.jsx b/packages/dag/src/components/form/table-select/index.jsx index c3d78f71e5..7f85e1b213 100644 --- a/packages/dag/src/components/form/table-select/index.jsx +++ b/packages/dag/src/components/form/table-select/index.jsx @@ -3,7 +3,7 @@ import { connect, mapProps } from '@formily/vue' import { metadataInstancesApi, taskApi } from '@tap/api' import { VEmpty } from '@tap/component' -import { AsyncSelect } from '@tap/form' +import { InfiniteSelect } from '@tap/form' import i18n from '@tap/i18n' import { @@ -17,8 +17,8 @@ import { import { useStore } from 'vuex' import './style.scss' -const useTableExist = (attrs, selectRef, connectionId) => { - if (!attrs.allowCreate) { +const useTableExist = (props, selectRef, connectionId) => { + if (!props.allowCreate) { return { showNotExistsTip: ref(false), leftPosition: ref(''), @@ -56,9 +56,20 @@ const useTableExist = (attrs, selectRef, connectionId) => { showNotExistsTip.value = true }, 10) } - const handleChange = () => { - showNotExistsTip.value = false + + const handleChange = (value, option, created) => { + clearTimeout(timer) + if (created) { + setTagPosition(value) + + timer = setTimeout(() => { + showNotExistsTip.value = true + }, 10) + } else { + showNotExistsTip.value = false + } } + const setTagPosition = (tableName) => { if (!$input || !tableName) return @@ -76,10 +87,8 @@ const useTableExist = (attrs, selectRef, connectionId) => { let baseLeftPosition let leftPosition = ref('') - watch(() => attrs.value, handleChange) - onMounted(() => { - /*$input = selectRef.value.$el.querySelector('input') + $input = selectRef.value.$el.querySelector('input') const { fontSize, fontFamily, fontWeight } = getComputedStyle($input) inputStyle = { @@ -89,11 +98,11 @@ const useTableExist = (attrs, selectRef, connectionId) => { visibility: 'hidden', } - // 8: .el-input__prefix-inner > :last-child {margin-right: 8px;} + // 12: el-select__wrapper 左内边距 // 4: 间距 - baseLeftPosition = parseInt($input.offsetLeft) + 4*/ + baseLeftPosition = Number.parseInt($input.offsetLeft) + 12 + 4 - checkTableExist(attrs.value) + checkTableExist(props.modelValue) }) return { @@ -108,7 +117,7 @@ export const TableSelect = connect( observer( defineComponent({ name: 'TableSelect', - props: ['reloadTime', 'connectionId', 'modelValue'], + props: ['reloadTime', 'connectionId', 'modelValue', 'allowCreate'], setup(props, { attrs }) { const select = ref(null) const store = useStore() @@ -123,16 +132,13 @@ export const TableSelect = connect( } }) - const { showNotExistsTip, leftPosition, handleCreated } = useTableExist( - attrs, - select, - props.connectionId, - ) + const { showNotExistsTip, leftPosition, handleCreated, handleChange } = + useTableExist(props, select, props.connectionId) const loading = ref(false) const loadSelectData = () => { - select.value.getInnerRef()?.refresh?.() + select.value.refresh?.() } const loadSchema = async (keys) => { @@ -162,16 +168,21 @@ export const TableSelect = connect( unWatch() }) - return () => { - const scopedSlots = { - 'created-option': ({ value }) => ( - - {value} - + const renderCreatedOption = (scope) => { + return scope.value ? ( + + + {scope.value} + {i18n.t('packages_dag_table_not_exist')} - ), + + ) : null + } + + return () => { + const scopedSlots = { empty: ({ query }) => query ? (
@@ -203,6 +214,10 @@ export const TableSelect = connect( ), } + if (props.allowCreate) { + scopedSlots['created-option'] = renderCreatedOption + } + if (showNotExistsTip.value) { scopedSlots.prefix = () => ( {scopedSlots} - + ) } }, diff --git a/packages/dag/src/components/form/table-select/style.scss b/packages/dag/src/components/form/table-select/style.scss index e124b17101..6c7d7c6d9b 100644 --- a/packages/dag/src/components/form/table-select/style.scss +++ b/packages/dag/src/components/form/table-select/style.scss @@ -1,13 +1,14 @@ -.async-select { +.table-select { //.el-input--prefix .el-input__inner { // // prefix 用来做Tag显示, 不需要padding // padding-left: 15px; //} - .el-input__prefix-inner > :last-child { - margin-right: 0; + .el-select__prefix:has(.prefix-tag) { + margin-left: -6px; } - &.is-drop-menu-visible { - .el-input__prefix { + // aria-describedby 表明下拉菜单显示 + .is-focused[aria-describedby] { + .el-select__prefix { display: none; } } diff --git a/packages/form/src/components/infinite-select/InfiniteSelect.vue b/packages/form/src/components/infinite-select/InfiniteSelect.vue index de8ab1e342..813bfe1e09 100644 --- a/packages/form/src/components/infinite-select/InfiniteSelect.vue +++ b/packages/form/src/components/infinite-select/InfiniteSelect.vue @@ -1,7 +1,7 @@