feat(sj_1.1.0-beta1): 完成定时任务批次查询优化

src/typings/api.d.ts

@@ -1090,7 +1090,7 @@ declare namespace Api {
 
     /** JobBatch search params */
     type JobBatchSearchParams = CommonType.RecordNullable<
-      Pick<Api.JobBatch.JobBatch, 'groupName' | 'jobName' | 'taskBatchStatus'> &
+      Pick<Api.JobBatch.JobBatch, 'groupName' | 'jobName' | 'taskBatchStatus' | 'jobId'> &
         CommonSearchParams & { datetimeRange?: [string, string] }
     >;
 

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

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
 import SelectGroup from '@/components/common/select-group.vue';
 import TaskBatchStatus from '@/components/common/task-batch-status.vue';
 import DatetimeRange from '@/components/common/datetime-range.vue';
 import { $t } from '@/locales';
+import { fetchGetJobNameList } from '@/service/api';
 
 defineOptions({
   name: 'JobBatchSearch'
@@ -13,17 +15,52 @@ interface Emits {
   (e: 'search'): void;
 }
 
+const keywords = ref<string>('');
+
+const noSearchFlag = ref(false);
+
 const emit = defineEmits<Emits>();
 
+/** 定时任务列表 */
+const jobList = ref<Api.Job.Job[]>([]);
+
 const model = defineModel<Api.JobBatch.JobBatchSearchParams>('model', { required: true });
 
 function reset() {
+  keywords.value = '';
   emit('reset');
 }
 
 function search() {
   emit('search');
 }
+
+async function keywordsUpdate() {
+  const res = await fetchGetJobNameList({ keywords: keywords.value, groupName: model.value.groupName });
+  jobList.value = res.data as Api.Job.Job[];
+}
+
+function handleSelect(value: string) {
+  model.value.jobId = value;
+}
+
+watch(
+  () => keywords.value,
+  (value: string) => {
+    if (value.length !== 0) {
+      keywordsUpdate();
+    } else {
+      noSearchFlag.value = false;
+    }
+  }
+);
+
+function translateOptions(options: Api.Job.Job[]) {
+  return options.map(option => ({
+    value: option.id,
+    label: `${option.jobName}(${option.id})`
+  }));
+}
 </script>
 
 <template>
@@ -32,7 +69,17 @@ function search() {
       <SelectGroup v-model:value="model.groupName" clearable />
     </NFormItemGi>
     <NFormItemGi span="24 s:12 m:6" :label="$t('page.jobBatch.jobName')" path="jobName" class="pr-24px">
-      <NInput v-model:value="model.jobName" :placeholder="$t('page.jobBatch.form.jobName')" clearable />
+      <NAutoComplete
+        v-model:value="keywords"
+        :placeholder="$t('page.jobBatch.form.jobName')"
+        value-field="id"
+        label-field="workflowName"
+        :options="translateOptions(jobList)"
+        :empty-visible="noSearchFlag"
+        clearable
+        filterable
+        @select="handleSelect"
+      />
     </NFormItemGi>
     <NFormItemGi span="24 s:12 m:6" :label="$t('page.jobBatch.taskBatchStatus')" path="taskBatchStatus" class="pr-24px">
       <TaskBatchStatus v-model:value="model.taskBatchStatus" clearable />

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

@@ -19,12 +19,13 @@ const keywords = ref<string>('');
 const noSearchFlag = ref(false);
 
 const emit = defineEmits<Emits>();
-/** 组列表 */
+/** 工作流列表 */
 const workflowList = ref<Api.Workflow.Workflow[]>([]);
 
 const model = defineModel<Api.WorkflowBatch.WorkflowBatchSearchParams>('model', { required: true });
 
 function reset() {
+  keywords.value = '';
   emit('reset');
 }
 
@@ -52,12 +53,10 @@ watch(
   }
 );
 
-// groupNameUpdate('');
-
 function translateOptions(options: Api.Workflow.Workflow[]) {
   return options.map(option => ({
     value: option.id,
-    label: option.workflowName
+    label: `${option.workflowName}(${option.id})`
   }));
 }
 </script>
@@ -77,8 +76,6 @@ function translateOptions(options: Api.Workflow.Workflow[]) {
       <NAutoComplete
         v-model:value="keywords"
         :placeholder="$t('page.workflowBatch.form.workflowName')"
-        value-field="id"
-        label-field="workflowName"
         :options="translateOptions(workflowList)"
         :empty-visible="noSearchFlag"
         clearable