feat: optimized spider detail actions for data tab

crawlab-team · Oct 10, 2024 · 6300e26 · 6300e26
1 parent 1fd0426
commit 6300e26
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 18 deletions.
diff --git a/src/i18n/lang/en/components/spider.ts b/src/i18n/lang/en/components/spider.ts
@@ -39,6 +39,9 @@ const spider: LComponentsSpider = {
           fields: 'Configure Deduplication Fields',
         },
       },
+      placeholder: {
+        table: 'Please select table',
+      },
     },
   },
   stat: {
@@ -58,6 +61,15 @@ const spider: LComponentsSpider = {
       scheduleTask: 'Scheduled task successfully',
     },
   },
+  messageBox: {
+    confirm: {
+      changeDatabase: {
+        title: 'Change Database',
+        message:
+          'Are you sure you want to change the database? The change may result in issues when viewing or saving data with the spider.',
+      },
+    },
+  },
 };
 
 export default spider;
diff --git a/src/i18n/lang/zh/components/spider.ts b/src/i18n/lang/zh/components/spider.ts
@@ -39,6 +39,9 @@ const spider: LComponentsSpider = {
           fields: '设置去重字段',
         },
       },
+      placeholder: {
+        table: '请选择表',
+      },
     },
   },
   stat: {
@@ -58,6 +61,15 @@ const spider: LComponentsSpider = {
       scheduleTask: '派发任务成功',
     },
   },
+  messageBox: {
+    confirm: {
+      changeDatabase: {
+        title: '更改数据库',
+        message:
+          '确定要更改数据库吗？此更改可能导致查看或保存爬虫数据时出现问题。',
+      },
+    },
+  },
 };
 
 export default spider;
diff --git a/src/interfaces/i18n/components/spider.d.ts b/src/interfaces/i18n/components/spider.d.ts
@@ -39,6 +39,9 @@ interface LComponentsSpider {
           fields: string;
         };
       };
+      placeholder: {
+        table: string;
+      };
     };
   };
   stat: {
@@ -58,4 +61,12 @@ interface LComponentsSpider {
       scheduleTask: string;
     };
   };
+  messageBox: {
+    confirm: {
+      changeDatabase: {
+        title: string;
+        message: string;
+      };
+    };
+  };
 }
diff --git a/src/views/spider/detail/actions/SpiderDetailActionsData.vue b/src/views/spider/detail/actions/SpiderDetailActionsData.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import { EMPTY_OBJECT_ID, translate } from '@/utils';
 import { useDatabase } from '@/components';
 import useRequest from '@/services/request';
+import { useSpiderDetail } from '@/views';
 
 const t = translate;
 
@@ -22,6 +24,8 @@ const onDisplayAllFieldsChange = (val: boolean) => {
 
 const form = computed(() => state.form);
 
+const { activeId } = useSpiderDetail();
+
 const {
   allListSelectOptions: allDatabaseSelectOptions,
   allDict: allDatabaseDict,
@@ -45,9 +49,36 @@ const tableSelectOptions = computed<SelectOption[]>(() =>
 onBeforeMount(getTableNames);
 watch(() => form.value?.data_source_id, getTableNames);
 
+const dataSourceId = ref<string>(form.value?.data_source_id || EMPTY_OBJECT_ID);
 const onDatabaseChange = async (value: string) => {
-  // TODO: implement
+  dataSourceId.value = form.value?.data_source_id || EMPTY_OBJECT_ID;
+  await ElMessageBox.confirm(
+    t('components.spider.messageBox.confirm.changeDatabase.message'),
+    t('components.spider.messageBox.confirm.changeDatabase.title'),
+    {
+      type: 'warning',
+    }
+  );
+  store.commit(`${ns}/setForm`, {
+    ...form.value,
+    data_source_id: value,
+  });
+  try {
+    await store.dispatch(`${ns}/updateById`, {
+      id: activeId.value,
+      form: form.value,
+    });
+    ElMessage.success(t('common.message.success.save'));
+  } catch (e: any) {
+    ElMessage.error(e.message);
+  }
 };
+watch(
+  () => form.value?.data_source_id,
+  value => {
+    dataSourceId.value = value || EMPTY_OBJECT_ID;
+  }
+);
 
 const getDataSourceByDatabaseId = (id: string): DatabaseDataSource => {
   const db = allDatabaseDict.value.get(id) as Database | undefined;
@@ -66,25 +97,23 @@ defineOptions({ name: 'ClSpiderDetailActionsData' });
     <cl-nav-action-item>
       <el-select
         class="database"
-        v-model="form.data_source_id"
-        @select="onDatabaseChange"
+        v-model="dataSourceId"
+        @change="onDatabaseChange"
       >
         <template #label="{ label }">
           <div>
-            <div>
-              <cl-database-data-source
-                :data-source="
-                  getDataSourceByDatabaseId(form.data_source_id as string)
-                "
-                icon-only
-              />
-              <span style="margin: 5px">{{ label }}</span>
-              <cl-icon
-                v-if="form.data_source_id === EMPTY_OBJECT_ID"
-                color="var(--cl-warning-color)"
-                :icon="['fa', 'star']"
-              />
-            </div>
+            <cl-database-data-source
+              :data-source="
+                getDataSourceByDatabaseId(form.data_source_id as string)
+              "
+              icon-only
+            />
+            <span style="margin: 5px">{{ label }}</span>
+            <cl-icon
+              v-if="form.data_source_id === EMPTY_OBJECT_ID"
+              color="var(--cl-warning-color)"
+              :icon="['fa', 'star']"
+            />
           </div>
         </template>
         <el-option
@@ -109,7 +138,12 @@ defineOptions({ name: 'ClSpiderDetailActionsData' });
       </el-select>
     </cl-nav-action-item>
     <cl-nav-action-item>
-      <el-select class="table" v-model="form.col_name" filterable>
+      <el-select
+        class="table"
+        v-model="form.col_name"
+        filterable
+        :placeholder="t('components.spider.actions.data.placeholder.table')"
+      >
         <template #label="{ label }">
           <div>
             <cl-icon :icon="['fa', 'table']" />