Merge pull request #616 from tapdata/feat/TAP-12431-shared-list-search

Feat/tap 12431 shared list search

Author: feynmx

packages/business/src/locale/lang/en.js

@@ -924,9 +924,9 @@ export default {
     'Choose a data source connector from below and configure the connection & credentials.',
   // 共享挖掘
   packages_business_shared_cdc_placeholder_task_name:
-    'Please enter the mining task name to search',
+    'Task name',
   packages_business_shared_cdc_placeholder_connection_name:
-    'Please enter the connection name to search',
+    'Connection name',
   packages_business_shared_cdc_name: 'Please enter the task name ',
   packages_business_shared_cdc_setting_select_mode: 'Storage mode',
   packages_business_shared_cdc_setting_select_mongodb_tip:
@@ -1211,9 +1211,9 @@ export default {
   packages_business_shared_cache_create: 'Create Cache',
   packages_business_shared_cache_edit: 'Edit Cache',
   packages_business_shared_cache_placeholder_task_name:
-    'Please enter the cache task name to search',
+    'Task name',
   packages_business_shared_cache_placeholder_connection_name:
-    'Please enter the connection name to search',
+    'Connection name',
   packages_business_shared_cache_button_create: 'New Cache',
   packages_business_shared_cache_name: 'Name',
   packages_business_shared_cache_status: 'Cache Status',

packages/business/src/locale/lang/zh-CN.js

@@ -849,9 +849,8 @@ export default {
   packages_business_create_connection_dialog_neirongCho:
     '从下面选择一个数据源连接器并配置连接和凭据。',
   // 共享挖掘
-  packages_business_shared_cdc_placeholder_task_name: '请输入挖掘任务名搜索',
-  packages_business_shared_cdc_placeholder_connection_name:
-    '请输入连接名称搜索',
+  packages_business_shared_cdc_placeholder_task_name: '任务名称',
+  packages_business_shared_cdc_placeholder_connection_name: '连接名称',
   packages_business_shared_cdc_name: '请输入挖掘名称',
   packages_business_shared_cdc_setting_select_mode: '存储模式',
   packages_business_shared_cdc_setting_select_mongodb_tip: '请输入mongodb连接',
@@ -1101,9 +1100,8 @@ export default {
   // 共享缓存
   packages_business_shared_cache_create: '创建缓存',
   packages_business_shared_cache_edit: '编辑缓存',
-  packages_business_shared_cache_placeholder_task_name: '请输入缓存任务名搜索',
-  packages_business_shared_cache_placeholder_connection_name:
-    '请输入连接名称搜索',
+  packages_business_shared_cache_placeholder_task_name: '任务名称',
+  packages_business_shared_cache_placeholder_connection_name: '连接名称',
   packages_business_shared_cache_button_create: '新建缓存',
   packages_business_shared_cache_name: '缓存名称',
   packages_business_shared_cache_status: '缓存状态',

packages/business/src/locale/lang/zh-TW.js

@@ -843,9 +843,8 @@ export default {
   packages_business_create_connection_dialog_neirongCho:
     '從下面選擇一個數據源連接器並配置連接和憑據。',
   // 共享挖掘
-  packages_business_shared_cdc_placeholder_task_name: '請輸入挖掘任務名搜索',
-  packages_business_shared_cdc_placeholder_connection_name:
-    '請輸入連接名稱搜索',
+  packages_business_shared_cdc_placeholder_task_name: '任務名稱',
+  packages_business_shared_cdc_placeholder_connection_name: '連接名稱',
   packages_business_shared_cdc_name: '請輸入挖掘名稱',
   packages_business_shared_cdc_setting_select_mode: '存储模式',
   packages_business_shared_cdc_setting_select_mongodb_tip: '請輸入mongodb連接',
@@ -1094,9 +1093,8 @@ export default {
   // 共享緩存
   packages_business_shared_cache_create: '創建緩存',
   packages_business_shared_cache_edit: '編輯緩存',
-  packages_business_shared_cache_placeholder_task_name: '請輸入緩存任務名搜索',
-  packages_business_shared_cache_placeholder_connection_name:
-    '請輸入連接名稱搜索',
+  packages_business_shared_cache_placeholder_task_name: '任務名稱',
+  packages_business_shared_cache_placeholder_connection_name: '連接名稱',
   packages_business_shared_cache_button_create: '新建緩存',
   packages_business_shared_cache_name: '緩存名稱',
   packages_business_shared_cache_status: '緩存狀態',

packages/business/src/views/heartbeat-table/List.vue

@@ -14,7 +14,15 @@ import { useI18n } from '@tap/i18n'
 import dayjs from 'dayjs'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { escapeRegExp, uniqBy } from 'lodash-es'
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import {
+  computed,
+  inject,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PageContainer from '../../components/PageContainer.vue'
 import TablePage from '../../components/TablePage.vue'
@@ -50,7 +58,7 @@ const colWidth = computed(() =>
     : { taskType: 80, status: 110, operation: 280 },
 )
 
-const filterItems = computed(() => [
+const filterItems = ref([
   {
     label: t('public_status'),
     key: 'status',
@@ -239,16 +247,18 @@ const del = async (ids: string[], item: any = {}) => {
 watch(
   () => route.query,
   () => {
-    searchParams.value = route.query
     table.value?.fetch(1)
   },
 )
 
+onBeforeMount(() => {
+  Object.assign(searchParams.value, route.query)
+})
+
 onMounted(() => {
   timer = setInterval(() => {
     table.value?.fetch(null, 0, true)
   }, 8000)
-  Object.assign(searchParams.value, route.query)
 })
 
 onUnmounted(() => {

packages/business/src/views/shared-cache/List.vue

@@ -19,7 +19,7 @@ import { useI18n } from '@tap/i18n'
 import dayjs from 'dayjs'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { escapeRegExp, uniqBy } from 'lodash-es'
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import { inject, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PageContainer from '../../components/PageContainer.vue'
 import TablePage from '../../components/TablePage.vue'
@@ -57,7 +57,7 @@ const multipleSelection = ref<any[]>([])
 
 // ── Computed ──────────────────────────────────────────────────────────────────
 
-const filterItems = computed(() => [
+const filterItems = ref([
   {
     label: t('public_status'),
     key: 'status',
@@ -96,12 +96,14 @@ const filterItems = computed(() => [
     },
   },
   {
-    placeholder: t('public_task_name'),
+    placeholder: t('packages_business_shared_cache_placeholder_task_name'),
     key: 'name',
     type: 'input',
   },
   {
-    placeholder: t('public_connectionName'),
+    placeholder: t(
+      'packages_business_shared_cache_placeholder_connection_name',
+    ),
     key: 'connectionName',
     type: 'input',
   },
@@ -285,24 +287,21 @@ const handleImport = () => {
   upload.value?.show()
 }
 
-// ── Lifecycle & Watchers ──────────────────────────────────────────────────────
-
 watch(
   () => route.query,
   () => {
-    searchParams.value = {
-      ...searchParams.value,
-      name: (route.query?.keyword as string) || '',
-    }
     table.value?.fetch(1)
   },
 )
 
+onBeforeMount(() => {
+  Object.assign(searchParams.value, route.query)
+})
+
 onMounted(() => {
   timer = setInterval(() => {
     withPassive(() => table.value?.fetch(null, 0, true))
   }, 8000)
-  Object.assign(searchParams.value, { name: route.query?.keyword || '' })
 })
 
 onUnmounted(() => {

packages/business/src/views/shared-mining/List.vue

@@ -23,7 +23,7 @@ import { calcTimeUnit, openUrl } from '@tap/shared'
 import dayjs from 'dayjs'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { escapeRegExp, uniqBy } from 'lodash-es'
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import { inject, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PageContainer from '../../components/PageContainer.vue'
 import TablePage from '../../components/TablePage.vue'
@@ -90,9 +90,7 @@ const taskColumns = [
   { label: t('public_task_name'), prop: 'name', slotName: 'name' },
 ]
 
-// ── Computed ──────────────────────────────────────────────────────────────────
-
-const filterItems = computed(() => [
+const filterItems = ref<any[]>([
   {
     label: t('public_status'),
     key: 'status',
@@ -370,24 +368,21 @@ const handleName = ({
   openUrl(routeUrl.href)
 }
 
-// ── Lifecycle & Watchers ──────────────────────────────────────────────────────
-
 watch(
   () => route.query,
   () => {
-    searchParams.value = {
-      ...searchParams.value,
-      taskName: (route.query?.keyword as string) || '',
-    }
     table.value?.fetch(1)
   },
 )
 
+onBeforeMount(() => {
+  Object.assign(searchParams.value, route.query)
+})
+
 onMounted(() => {
   timer = setInterval(() => {
     withPassive(() => table.value?.fetch(null, 0, true))
   }, 8000)
-  Object.assign(searchParams.value, { taskName: route.query?.keyword || '' })
 })
 
 onUnmounted(() => {