feat: updated spider data related modules

src/components/core/spider/SpiderResultDataWithDatabase.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { ElMessage } from 'element-plus';
+import { debounce } from 'lodash';
+import { TAB_NAME_DATA } from '@/constants';
+import { EMPTY_OBJECT_ID, translate } from '@/utils';
+import useRequest from '@/services/request';
+import { ClDatabaseTableDetailData } from '@/components';
+import { useSpider } from '@/components';
+
+const t = translate;
+
+const { get, post } = useRequest();
+
+const dataRef = ref<typeof ClDatabaseTableDetailData | null>(null);
+
+// store
+const ns: ListStoreNamespace = 'spider';
+const store = useStore();
+const { spider: state } = store.state;
+
+const displayAllFields = computed<boolean>(() => state.dataDisplayAllFields);
+
+const { form } = useSpider(store);
+
+const databaseMetadata = computed(() => state.databaseMetadata);
+const getDatabaseMetadata = debounce(async () => {
+  if (!form.value?.data_source_id) return;
+  await store.dispatch(`${ns}/getDatabaseMetadata`, form.value.data_source_id);
+});
+watch(() => form.value?.data_source_id, getDatabaseMetadata);
+
+const activeTable = ref<DatabaseTable>();
+const getActiveTable = debounce(async () => {
+  const { data_source_id, col_name } = form.value;
+  if (!data_source_id || !col_name) return;
+  const res = await post<any, Promise<ResponseWithData>>(
+    `/databases/${data_source_id}/tables/metadata/get`,
+    {
+      table: col_name,
+      filter: dataFilter.value,
+    }
+  );
+  activeTable.value = res.data;
+});
+
+onBeforeMount(getActiveTable);
+watch(() => form.value?.col_name, getActiveTable);
+watch(databaseMetadata, getActiveTable);
+
+const activeTabName = ref<string>(TAB_NAME_DATA);
+const tabsItems = computed<NavItem[]>(() => [
+  {
+    id: TAB_NAME_DATA,
+    title: t('common.tabs.data'),
+  },
+]);
+
+const hasChanges = computed<boolean>(() => dataRef.value?.hasChanges);
+
+const commitLoading = ref(false);
+const onCommit = async () => {
+  commitLoading.value = true;
+  try {
+    switch (activeTabName.value) {
+      case TAB_NAME_DATA:
+        await dataRef.value?.commit?.();
+        break;
+    }
+    ElMessage.success(t('common.message.success.action'));
+  } catch (error: any) {
+    ElMessage.error(error.message);
+    throw error;
+  } finally {
+    commitLoading.value = false;
+  }
+};
+
+const onRollback = () => {
+  dataRef.value?.rollback?.();
+};
+
+const dataFilter = computed<{ [key: string]: any } | undefined>(() => {
+  if (!form.value?._id) return;
+  return {
+    _sid: form.value._id,
+  };
+});
+
+defineOptions({ name: 'ClSpiderResultDataWithDatabase' });
+</script>
+
+<template>
+  <div class="spider-result-data-with-database">
+    <cl-database-nav-tabs
+      v-model="activeTabName"
+      :tabs-items="tabsItems"
+      :can-save="hasChanges"
+      :commit-loading="commitLoading"
+      @commit="onCommit"
+      @rollback="onRollback"
+    />
+    <template v-if="activeTabName === TAB_NAME_DATA">
+      <cl-database-table-detail-data
+        v-if="activeTable"
+        ref="dataRef"
+        :active-table="activeTable"
+        :active-id="form?.data_source_id || EMPTY_OBJECT_ID"
+        :filter="dataFilter"
+      />
+    </template>
+  </div>
+</template>

src/components/index.ts

@@ -61,6 +61,7 @@ import useSchedule from './core/schedule/useSchedule';
 import CreateEditSpiderDialog from './core/spider/CreateEditSpiderDialog.vue';
 import RunSpiderDialog from './core/spider/RunSpiderDialog.vue';
 import SpiderForm from './core/spider/SpiderForm.vue';
+import SpiderResultDataWithDatabase from './core/spider/SpiderResultDataWithDatabase.vue';
 import SpiderStat from './core/spider/SpiderStat.vue';
 import SpiderTag from './core/spider/SpiderTag.vue';
 import UploadSpiderFilesDialog from './core/spider/UploadSpiderFilesDialog.vue';
@@ -274,6 +275,7 @@ export {
   CreateEditSpiderDialog as ClCreateEditSpiderDialog,
   RunSpiderDialog as ClRunSpiderDialog,
   SpiderForm as ClSpiderForm,
+  SpiderResultDataWithDatabase as ClSpiderResultDataWithDatabase,
   SpiderStat as ClSpiderStat,
   SpiderTag as ClSpiderTag,
   UploadSpiderFilesDialog as ClUploadSpiderFilesDialog,

src/interfaces/models/spider.d.ts

@@ -8,6 +8,7 @@ export declare global {
     priority?: number;
     col_id?: string;
     col_name?: string;
+    db_name?: string;
     data_source_id?: string;
     mode?: TaskMode;
     node_ids?: string[];

src/interfaces/store/modules/spider.d.ts

@@ -7,14 +7,18 @@ type SpiderStoreModule = BaseModule<
 
 interface SpiderStoreState extends BaseStoreState<Spider>, BaseFileStoreState {
   dataDisplayAllFields: boolean;
+  databaseMetadata?: DatabaseMetadata;
 }
 
-type SpiderStoreGetters = BaseStoreGetters<SpiderStoreState>;
+interface SpiderStoreGetters extends BaseStoreGetters<SpiderStoreState> {
+  databaseTableSelectOptions: StoreGetter<SpiderStoreState, SelectOption[]>;
+}
 
 interface SpiderStoreMutations
   extends BaseStoreMutations<Spider>,
     BaseFileStoreMutations<SpiderStoreState> {
   setDataDisplayAllFields: StoreMutation<SpiderStoreState, boolean>;
+  setDatabaseMetadata: StoreMutation<SpiderStoreState, DatabaseMetadata>;
 }
 
 interface SpiderStoreActions
@@ -24,4 +28,5 @@ interface SpiderStoreActions
     SpiderStoreState,
     { id: string; options: SpiderRunOptions }
   >;
+  getDatabaseMetadata: StoreAction<SpiderStoreState, string>;
 }

src/store/modules/spider.ts

@@ -26,7 +26,7 @@ const t = translate;
 
 const endpoint = '/spiders';
 
-const { post, getList } = useRequest();
+const { get, post, getList } = useRequest();
 
 const state = {
   ...getDefaultStoreState<Spider>('spider'),
@@ -47,10 +47,40 @@ const state = {
     // {id: TAB_NAME_SETTINGS, title: t('common.tabs.settings')},
   ],
   dataDisplayAllFields: false,
+  databaseMetadata: undefined,
 } as SpiderStoreState;
 
 const getters = {
   ...getDefaultStoreGetters<Spider>(),
+  databaseTableSelectOptions: (state: SpiderStoreState) => {
+    const { databaseMetadata } = state;
+    if (!databaseMetadata) return [];
+    const { databases } = databaseMetadata;
+    if (!databases?.length) return [];
+    if (databases.length === 1) {
+      return (
+        databases[0].tables?.map(table => ({
+          label: table.name,
+          value: table.name,
+        })) || []
+      );
+    } else {
+      const options: SelectOption[] = [];
+      databases.forEach(database => {
+        const { tables } = database;
+        if (!tables?.length) return;
+        options.push({
+          label: database.name,
+          value: database.name,
+          children: tables.map(table => ({
+            label: table.name,
+            value: `${database.name}|${table.name}`,
+          })),
+        });
+      });
+      return options;
+    }
+  },
 } as SpiderStoreGetters;
 
 const mutations = {
@@ -59,6 +89,9 @@ const mutations = {
   setDataDisplayAllFields: (state: SpiderStoreState, display: boolean) => {
     state.dataDisplayAllFields = display;
   },
+  setDatabaseMetadata: (state: SpiderStoreState, metadata: any) => {
+    state.databaseMetadata = metadata;
+  },
 } as SpiderStoreMutations;
 
 const actions = {
@@ -82,6 +115,14 @@ const actions = {
     const res = await post(`/spiders/${id}/run`, options);
     return res;
   },
+  getDatabaseMetadata: async (
+    { commit }: StoreActionContext<SpiderStoreState>,
+    id: string
+  ) => {
+    const res = await get(`/databases/${id}/metadata`);
+    commit('setDatabaseMetadata', res.data);
+    return res.data;
+  },
 } as SpiderStoreActions;
 
 export default {

src/views/data/list/ResultList.vue

@@ -2,8 +2,8 @@
 import { computed, h, onBeforeUnmount, watch } from 'vue';
 import { useStore } from 'vuex';
 import { TABLE_ACTION_CUSTOMIZE_COLUMNS } from '@/constants';
-import ResultCell from '@/components/core/result/ResultCell.vue';
 import { getDataFieldIconByType } from '@/utils/dataFields';
+import { ClResultCell } from '@/components';
 
 interface FilterConditionData {
   key?: string;
@@ -79,7 +79,7 @@ const tableColumns = computed<TableColumns<Result>>(() => {
         value: (row: Result) => {
           const value = row[key as string];
           const type = dataFieldsMap.value.get(key as string);
-          return h(ResultCell, {
+          return h(ClResultCell, {
             fieldKey: key,
             type,
             value,
@@ -107,7 +107,6 @@ const actionFunctions = {
     return store.dispatch(`${ns}/getResultData`, {
       id,
       params: {
-        data_source_id: props.dataSourceId,
         conditions: filterConditions.value,
         ...tablePagination.value,
       },
@@ -154,7 +153,7 @@ defineOptions({ name: 'ClResultList' });
   <cl-result-cell-dialog />
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .result-list {
   .nav-actions {
     border-bottom: none;