refactor: optimized code

crawlab-team · Jun 24, 2024 · 4e42948 · 4e42948
1 parent a8de38e
commit 4e42948
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 167 deletions.
diff --git a/src/components/filter/FilterCondition.vue b/src/components/filter/FilterCondition.vue
@@ -17,7 +17,7 @@ import {
 } from '@/constants/filter';
 import { plainClone } from '@/utils/object';
 
-export interface FilterConditionData {
+interface FilterConditionData {
   key?: string;
   op?: string;
   value?: any;

diff --git a/src/components/project/CreateEditProjectDialog.vue b/src/components/project/CreateEditProjectDialog.vue
@@ -1,4 +1,5 @@
-<script lang="ts" setup>
+<script setup lang="ts">
+defineOptions({ name: 'ClCreateEditProjectDialog' });
 import { useStore } from 'vuex';
 import useProject from '@/components/project/project';
 

diff --git a/src/layouts/content/simple/SimpleLayout.vue b/src/layouts/content/simple/SimpleLayout.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+defineOptions({ name: 'ClSimpleLayout' });
 withDefaults(
   defineProps<{
     background?: string;

diff --git a/src/views/data/list/ResultList.vue b/src/views/data/list/ResultList.vue
@@ -1,175 +1,140 @@
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  h,
-  onBeforeUnmount,
-  PropType,
-  watch,
-} from 'vue';
+<script setup lang="ts">
+defineOptions({ name: 'ClResultList' });
+import { computed, h, onBeforeUnmount, watch } from 'vue';
 import { useStore } from 'vuex';
 import { TABLE_ACTION_CUSTOMIZE_COLUMNS } from '@/constants';
-import { emptyArrayFunc } from '@/utils';
 import ResultCell from '@/components/result/ResultCell.vue';
 import { getDataFieldIconByType } from '@/utils/dataFields';
-import { FilterConditionData } from '@/components/filter/FilterCondition.vue';
-
-export default defineComponent({
-  name: 'ResultList',
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    dataSourceId: {
-      type: String,
-      required: false,
-    },
-    noActions: {
-      type: Boolean,
-      default: false,
-    },
-    embedded: {
-      type: Boolean,
-      default: false,
-    },
-    visibleButtons: {
-      type: Array as PropType<BuiltInTableActionButtonName[]>,
-      default: () => {
-        return [TABLE_ACTION_CUSTOMIZE_COLUMNS];
-      },
-    },
-    filter: {
-      type: [Array, Function] as PropType<
-        FilterConditionData[] | (() => FilterConditionData[])
-      >,
-      default: emptyArrayFunc,
-    },
-    displayAllFields: {
-      type: Boolean,
-    },
-  },
-  setup(props: ResultListProps) {
-    // store
-    const ns = 'dataCollection';
-    const store = useStore();
-    const { dataCollection: state } = store.state as RootStoreState;
-
-    // data
-    const tableData = computed<TableData<Result>>(() => state.resultTableData);
-
-    // total
-    const tableTotal = computed<number>(() => state.resultTableTotal);
-
-    // pagination
-    const tablePagination = computed<TablePagination>(
-      () => state.resultTablePagination
-    );
-
-    // default fields
-    const defaultFields = ['_id', '_tid', '_h'];
-
-    // data fields
-    const dataFields = computed<DataField[]>(() => state.form?.fields || []);
-
-    // data fields map
-    const dataFieldsMap = computed<Map<string, DataFieldType>>(() => {
-      const map = new Map<string, DataFieldType>();
-      dataFields.value.forEach((field: DataField) => {
-        map.set(field.key as string, field.type);
-      });
-      return map;
-    });
 
-    const getTableColumnIcon = (field: DataField): Icon => {
-      const type = dataFieldsMap.value.get(field.key as string);
-      return getDataFieldIconByType(type);
-    };
-
-    // columns
-    const tableColumns = computed<TableColumns<Result>>(() => {
-      const fields = store.getters[`${ns}/resultFields`] as DataField[];
-      return fields
-        .filter(f =>
-          props.displayAllFields
-            ? true
-            : !defaultFields.includes(f.key as string)
-        )
-        .map(f => {
-          const { key } = f;
-          return {
-            key,
-            label: key,
-            minWidth: '240',
-            icon: getTableColumnIcon(f),
-            value: (row: Result) => {
-              const value = row[key as string];
-              const type = dataFieldsMap.value.get(key as string);
-              return h(ResultCell, {
-                fieldKey: key,
-                type,
-                value,
-              });
-            },
-          };
-        }) as TableColumns<Result>;
-    });
+interface FilterConditionData {
+  key?: string;
+  op?: string;
+  value?: any;
+}
 
-    // filter conditions
-    const filterConditions = computed<FilterConditionData[]>(() => {
-      if (typeof props.filter === 'function') {
-        return props.filter() as FilterConditionData[];
-      }
-      return props.filter || ([] as FilterConditionData[]);
-    });
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    dataSourceId?: string;
+    noActions?: boolean;
+    embedded?: boolean;
+    visibleButtons?: BuiltInTableActionButtonName[];
+    filter?: FilterConditionData[] | (() => FilterConditionData[]);
+    displayAllFields?: boolean;
+  }>(),
+  {
+    visibleButtons: () => [TABLE_ACTION_CUSTOMIZE_COLUMNS],
+  }
+);
 
-    // action functions
-    const actionFunctions = {
-      setPagination: pagination =>
-        store.commit(`${ns}/setResultTablePagination`, pagination),
-      getList: async () => {
-        const { id } = props;
-        if (!id) return;
-        return store.dispatch(`${ns}/getResultData`, {
-          id,
-          params: {
-            data_source_id: props.dataSourceId,
-            conditions: filterConditions.value,
-            ...tablePagination.value,
-          },
-        });
-      },
-      getAll: async () => {
-        console.warn('getAll is not implemented');
-      },
-      deleteList: (ids: string[]) => {
-        console.warn('deleteList is not implemented');
-      },
-      deleteByIdConfirm: (row: BaseModel) => {
-        console.warn('deleteByIdConfirm is not implemented');
-      },
-    } as ListLayoutActionFunctions;
+// store
+const ns = 'dataCollection';
+const store = useStore();
+const { dataCollection: state } = store.state as RootStoreState;
 
-    const { getList } = actionFunctions;
+// data
+const tableData = computed<TableData<Result>>(() => state.resultTableData);
 
-    watch(() => props.id, getList);
+// total
+const tableTotal = computed<number>(() => state.resultTableTotal);
 
-    watch(() => tablePagination.value, getList);
+// pagination
+const tablePagination = computed<TablePagination>(
+  () => state.resultTablePagination
+);
 
-    onBeforeUnmount(() => {
-      store.commit(`${ns}/resetResultTableData`);
-      store.commit(`${ns}/resetResultTablePagination`);
-      store.commit(`${ns}/resetResultTableFilter`);
-    });
+// default fields
+const defaultFields = ['_id', '_tid', '_h'];
+
+// data fields
+const dataFields = computed<DataField[]>(() => state.form?.fields || []);
+
+// data fields map
+const dataFieldsMap = computed<Map<string, DataFieldType>>(() => {
+  const map = new Map<string, DataFieldType>();
+  dataFields.value.forEach((field: DataField) => {
+    map.set(field.key as string, field.type);
+  });
+  return map;
+});
 
-    return {
-      actionFunctions,
-      tableData,
-      tableTotal,
-      tablePagination,
-      tableColumns,
-    };
+const getTableColumnIcon = (field: DataField): Icon => {
+  const type = dataFieldsMap.value.get(field.key as string);
+  return getDataFieldIconByType(type);
+};
+
+// columns
+const tableColumns = computed<TableColumns<Result>>(() => {
+  const fields = store.getters[`${ns}/resultFields`] as DataField[];
+  return fields
+    .filter(f =>
+      props.displayAllFields ? true : !defaultFields.includes(f.key as string)
+    )
+    .map(f => {
+      const { key } = f;
+      return {
+        key,
+        label: key,
+        minWidth: '240',
+        icon: getTableColumnIcon(f),
+        value: (row: Result) => {
+          const value = row[key as string];
+          const type = dataFieldsMap.value.get(key as string);
+          return h(ResultCell, {
+            fieldKey: key,
+            type,
+            value,
+          });
+        },
+      };
+    }) as TableColumns<Result>;
+});
+
+// filter conditions
+const filterConditions = computed<FilterConditionData[]>(() => {
+  if (typeof props.filter === 'function') {
+    return props.filter() as FilterConditionData[];
+  }
+  return props.filter || ([] as FilterConditionData[]);
+});
+
+// action functions
+const actionFunctions = {
+  setPagination: pagination =>
+    store.commit(`${ns}/setResultTablePagination`, pagination),
+  getList: async () => {
+    const { id } = props;
+    if (!id) return;
+    return store.dispatch(`${ns}/getResultData`, {
+      id,
+      params: {
+        data_source_id: props.dataSourceId,
+        conditions: filterConditions.value,
+        ...tablePagination.value,
+      },
+    });
   },
+  getAll: async () => {
+    console.warn('getAll is not implemented');
+  },
+  deleteList: (ids: string[]) => {
+    console.warn('deleteList is not implemented');
+  },
+  deleteByIdConfirm: (row: BaseModel) => {
+    console.warn('deleteByIdConfirm is not implemented');
+  },
+} as ListLayoutActionFunctions;
+
+const { getList } = actionFunctions;
+
+watch(() => props.id, getList);
+
+watch(() => tablePagination.value, getList);
+
+onBeforeUnmount(() => {
+  store.commit(`${ns}/resetResultTableData`);
+  store.commit(`${ns}/resetResultTablePagination`);
+  store.commit(`${ns}/resetResultTableFilter`);
 });
 </script>
 

diff --git a/src/views/spider/detail/actions/SpiderDetailActionsData.vue b/src/views/spider/detail/actions/SpiderDetailActionsData.vue
@@ -1,4 +1,5 @@
-<script lang="ts" setup>
+<script setup lang="ts">
+defineOptions({ name: 'ClSpiderDetailActionsData' });
 import { ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';

diff --git a/src/views/spider/detail/tabs/SpiderDetailTabData.vue b/src/views/spider/detail/tabs/SpiderDetailTabData.vue
@@ -1,4 +1,5 @@
-<script lang="ts" setup>
+<script setup lang="ts">
+defineOptions({ name: 'ClSpiderDetailTabData' });
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import useSpider from '@/components/spider/spider';
@@ -28,4 +29,4 @@ const { form } = useSpider(store);
 .spider-detail-tab-data:deep(.el-table) {
   border: none;
 }
-</style>
+</style>
diff --git a/src/views/system/detail/SystemDetail.vue b/src/views/system/detail/SystemDetail.vue
@@ -1,4 +1,5 @@
-<script lang="ts" setup>
+<script setup lang="ts">
+defineOptions({ name: 'ClSystemDetail' });
 import { onBeforeMount, ref } from 'vue';
 import { translate } from '@/utils';
 import { useStore } from 'vuex';
@@ -27,7 +28,7 @@ onBeforeMount(async () => {
 
 const onSave = async () => {
   await store.dispatch(`${ns}/saveSiteTitle`);
-  await ElMessage.success(t('common.message.success.save'));
+  ElMessage.success(t('common.message.success.save'));
 };
 </script>
 
@@ -68,4 +69,4 @@ const onSave = async () => {
     padding: 20px;
   }
 }
-</style>
+</style>