feat(sj_1.1.0-beta1): 优化工作流查询体验

.env

@@ -2,7 +2,7 @@ VITE_APP_TITLE=Snail Job
 
 VITE_APP_DESC=A flexible, reliable, and fast platform for distributed task retry and distributed task scheduling.
 
-VITE_APP_VERSION=1.0.0
+VITE_APP_VERSION=1.1.0-beta1
 
 VITE_APP_DEFAULT_TOKEN=SJ_Wyz3dmsdbDOkDujOTSSoBjGQP1BMsVnj
 

src/service/api/workflow.ts

@@ -18,7 +18,7 @@ export function fetchTriggerWorkflow(id: string) {
 }
 
 /** get namespace list */
-export function fetchGetWorkflowNameList(params?: Api.WorkflowBatch.WorkflowBatchSearchParams) {
+export function fetchGetWorkflowNameList(params?: Api.Workflow.WorkflowNameSearchParams) {
   return request<Api.Workflow.Workflow[]>({
     url: '/workflow/workflow-name/list',
     method: 'get',

src/typings/api.d.ts

@@ -898,6 +898,18 @@ declare namespace Api {
       Pick<Api.Workflow.Workflow, 'workflowName' | 'groupName' | 'workflowStatus'> & CommonSearchParams
     >;
 
+    /** workflow name search params */
+    type WorkflowNameSearchParams = CommonType.RecordNullable<
+      Pick<
+        Common.CommonRecord<{
+          keywords: string;
+          workflowId: number;
+          groupName: string;
+        }>,
+        'keywords' | 'workflowId' | 'groupName'
+      >
+    >;
+
     type ExportWorkflow = Common.CommonRecord<{
       workflowIds: String[];
     }> &

src/views/workflow/batch/modules/workflow-batch-search.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { $t } from '@/locales';
 import SelectGroup from '@/components/common/select-group.vue';
 import TaskBatchStatus from '@/components/common/task-batch-status.vue';
@@ -14,6 +14,8 @@ interface Emits {
   (e: 'reset'): void;
   (e: 'search'): void;
 }
+const keywords = ref<string>('');
+const noSearchFlag = ref(false);
 
 const emit = defineEmits<Emits>();
 /** 组列表 */
@@ -34,7 +36,34 @@ async function groupNameUpdate(groupName: string) {
   workflowList.value = res.data as Api.Workflow.Workflow[];
 }
 
+async function keywordsUpdate() {
+  const res = await fetchGetWorkflowNameList({ keywords: keywords.value });
+  workflowList.value = res.data as Api.Workflow.Workflow[];
+}
+
+function handleSelect(value: number) {
+  model.value.workflowId = value;
+}
+
+watch(
+  () => keywords.value,
+  (value: string) => {
+    if (value.length !== 0) {
+      keywordsUpdate();
+    } else {
+      noSearchFlag.value = false;
+    }
+  }
+);
+
 groupNameUpdate('');
+
+function translateOptions(options: Api.Workflow.Workflow[]) {
+  return options.map(option => ({
+    value: option.id,
+    label: option.workflowName
+  }));
+}
 </script>
 
 <template>
@@ -49,14 +78,16 @@ groupNameUpdate('');
       path="workflowName"
       class="pr-24px"
     >
-      <NSelect
+      <NAutoComplete
-        v-model:value="model.workflowId"
+        v-model:value="keywords"
         :placeholder="$t('page.workflowBatch.form.workflowName')"
         value-field="id"
         label-field="workflowName"
-        :options="workflowList"
+        :options="translateOptions(workflowList)"
+        :empty-visible="noSearchFlag"
         clearable
         filterable
+        @select="handleSelect"
       />
     </NFormItemGi>
     <NFormItemGi