feat: 新增运行任务调用模态框

@@ -67,7 +67,7 @@
     // margin-top 24 height 24
     const paginationHeight = 24 + 24 + 8;
     // list pading top 8 maring-top 8 extra slot 56
-    const listContainerMarginBottom = 8 + 8 + 56;
+    const listContainerMarginBottom = 8 + 8 + 72;
     const listContainerHeight =
       clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
     const listContainerEl = (unref(listElRef)!.$el as HTMLElement).querySelector(
@@ -86,7 +86,7 @@
 </script>
 
 <template>
-  <PageWrapper class="bg-gray-100">
+  <PageWrapper class="bg-gray-100 device-task-list-container">
     <section
       class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
     >
@@ -101,7 +101,10 @@
         :loading="loading"
       >
         <template #header>
-          <section class="flex justify-end gap-4">
+          <section class="flex justify-between gap-4 min-h-12 items-center">
+            <div class="text-lg font-semibold">
+              <span>任务列表</span>
+            </div>
             <Tooltip title="刷新">
               <Button type="primary" @click="getDataSource">
                 <ReloadOutlined :spin="loading" />
@@ -123,3 +126,15 @@
     </section>
   </PageWrapper>
 </template>
+
+<style lang="less" scoped>
+  .device-task-list-container {
+    :deep(.ant-list-header) {
+      border: none;
+    }
+
+    :deep(.ant-card-body) {
+      padding: 16px 24px;
+    }
+  }
+</style>

+import { TaskTargetEnum } from '../../config';
+import { FormSchema } from '/@/components/Form';
+
+export enum FormFieldsEnum {
+  RUN_TARGET_TYPE = 'runTargetType',
+  TASK_TYPE = 'taskType',
+  ASSIGN_TARGET = 'assignTarget',
+  TASK_TARGET_TYPE = 'taskTargetType',
+  TASK_TARGET_VALUE = 'taskTargetValue',
+}
+
+export enum TargetType {
+  ALL = 'ALL',
+  ASSIGN = 'ASSIGN',
+}
+
+export enum TargetNameType {
+  ALL = '所有目标设备',
+  ASSIGN = '指定目标设备',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: 'taskName',
+    component: 'Input',
+    label: '任务名称',
+    slot: 'taskName',
+  },
+  {
+    field: FormFieldsEnum.TASK_TYPE,
+    component: 'Input',
+    label: '任务类型',
+    slot: 'taskType',
+  },
+  {
+    field: FormFieldsEnum.TASK_TARGET_TYPE,
+    component: 'Input',
+    label: '目标类型',
+    show: false,
+  },
+  {
+    field: FormFieldsEnum.TASK_TARGET_VALUE,
+    component: 'Input',
+    label: '目标值',
+    show: false,
+  },
+  {
+    field: FormFieldsEnum.TASK_TYPE,
+    component: 'Input',
+    label: '任务类型',
+    renderComponentContent: 'taskType',
+    show: false,
+  },
+  {
+    field: FormFieldsEnum.RUN_TARGET_TYPE,
+    component: 'RadioGroup',
+    label: '选择目标类型',
+    helpMessage: [
+      '您可以对该任务关联的所有设备批量执行任务，也可以指定其中的一个或多个关联的设备来执行任务。',
+    ],
+    defaultValue: TargetType.ALL,
+    componentProps: {
+      options: [
+        { label: TargetNameType.ALL, value: TargetType.ALL },
+        { label: TargetNameType.ASSIGN, value: TargetType.ASSIGN },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.ASSIGN_TARGET,
+    component: 'ApiSelect',
+    label: '制定目标设备',
+    ifShow: ({ model }) => model[FormFieldsEnum.RUN_TARGET_TYPE] === TargetType.ASSIGN,
+    componentProps: ({ formModel }) => {
+      const taskTargetType = formModel[FormFieldsEnum.TASK_TARGET_TYPE];
+      const isDevices = taskTargetType === TaskTargetEnum.DEVICES;
+      return {
+        api: async () => {
+          try {
+            if (isDevices) {
+            } else {
+            }
+          } catch (error) {
+            return [];
+          }
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+];

+export { default as RunTaskModal } from './index.vue';

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { TaskRecordType } from '/@/api/task/model';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { TaskTypeNameEnum } from '../../config';
+  import { formSchemas } from './config';
+
+  defineEmits(['register']);
+
+  const dataSource = ref<TaskRecordType>();
+
+  const [registerModal] = useModalInner((record: TaskRecordType) => {
+    dataSource.value = record;
+    if (record) {
+      setFieldsValue(record);
+    }
+  });
+
+  const [registerForm, { setFieldsValue }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+  });
+</script>
+
+<template>
+  <BasicModal @register="registerModal" title="运行任务">
+    <BasicForm @register="registerForm">
+      <template #taskName>
+        <div class="font-semibold">
+          {{ dataSource?.name }}
+        </div>
+      </template>
+      <template #taskType>
+        <div class="font-semibold">
+          {{
+            dataSource ? TaskTypeNameEnum[dataSource.executeContent.type] : TaskTypeNameEnum.CUSTOM
+          }}
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>

@@ -35,7 +35,7 @@
     }
   );
 
-  const emit = defineEmits(['edit']);
+  const emit = defineEmits(['edit', 'runTask']);
 
   const loading = ref(false);
 
@@ -117,6 +117,10 @@
     if (!unref(getRecord).lastExecuteTime) return;
     return getTwoDateDiff(unref(getRecord).lastExecuteTime!);
   });
+
+  const handleRunTask = () => {
+    emit('runTask', unref(getRecord));
+  };
 </script>
 
 <template>
@@ -186,7 +190,7 @@
       </div>
     </div>
     <div class="mt-4 flex justify-between items-center gap-3">
-      <Button size="small">
+      <Button size="small" @click="handleRunTask">
         <div class="text-xs px-1">
           <PlayCircleOutlined class="mr-1" />
           <span>运行任务</span>

@@ -16,8 +16,10 @@
   import { ModalParamsType } from '/#/utils';
   import { Authority } from '/@/components/Authority';
   import { getBoundingClientRect } from '/@/utils/domUtils';
+  import { RunTaskModal } from './components/RunTaskModal';
 
   const [registerModal, { openModal }] = useModal();
+  const [registerRunTaskModal, { openModal: openRunTaskModal }] = useModal();
 
   const [registerForm, { getFieldsValue }] = useForm({
     schemas: formSchemas,
@@ -61,6 +63,10 @@
     } as ModalParamsType);
   };
 
+  const handleRunTask = (record: TaskRecordType) => {
+    openRunTaskModal(true, record);
+  };
+
   const reload = () => getDataSource();
 
   const listElRef = ref<Nullable<ComponentElRef>>(null);
@@ -71,7 +77,7 @@
     // margin-top 24 height 24
     const paginationHeight = 24 + 24 + 8;
     // list pading top 8 maring-top 8 extra slot 56
-    const listContainerMarginBottom = 8 + 8 + 56;
+    const listContainerMarginBottom = 8 + 8 + 72;
     const listContainerHeight =
       clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
     const listContainerEl = (unref(listElRef)!.$el as HTMLElement).querySelector(
@@ -90,7 +96,7 @@
 </script>
 
 <template>
-  <PageWrapper class="container">
+  <PageWrapper class="task-center-container">
     <section
       class="bg-light-50 flex p-4 justify-between items-center x dark:text-gray-300 dark:bg-dark-900"
     >
@@ -109,7 +115,7 @@
     >
       <BasicForm @register="registerForm" />
     </section>
-    <section class="bg-light-50 mt-4 p-4 x dark:text-gray-300 dark:bg-dark-900">
+    <section class="bg-light-50 mt-4 p-4 dark:text-gray-300 dark:bg-dark-900">
       <List
         ref="listElRef"
         :dataSource="dataSource"
@@ -118,8 +124,11 @@
         :loading="loading"
       >
         <template #header>
-          <section class="flex justify-end gap-4">
-            <Tooltip title="刷新">
+          <section class="flex justify-between gap-4 min-h-12 items-center">
+            <div>
+              <span class="text-lg font-medium">任务列表</span>
+            </div>
+            <Tooltip v-if="dataSource.length" title="刷新">
               <Button type="primary" @click="getDataSource">
                 <ReloadOutlined :spin="loading" />
               </Button>
@@ -128,13 +137,24 @@
         </template>
         <template #renderItem="{ item }">
           <List.Item :key="item.id">
-            <TaskCard :record="item" :reload="reload" @edit="handleEdit" />
+            <TaskCard :record="item" :reload="reload" @runTask="handleRunTask" @edit="handleEdit" />
           </List.Item>
         </template>
       </List>
     </section>
     <DetailModal @register="registerModal" :reload="reload" />
+    <RunTaskModal @register="registerRunTaskModal" />
   </PageWrapper>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .task-center-container {
+    :deep(.ant-list-header) {
+      border: none;
+    }
+
+    :deep(.ant-card-body) {
+      padding: 16px 24px;
+    }
+  }
+</style>