perf: DEFECT-1173 任务中心新增详情页面

+import { DescItem } from '/@/components/Description';
+import {
+  ExecuteTimeTypeEnum,
+  ExecuteTimeTypeNameEnum,
+  FormFieldsEnum,
+  PeriodTypeNameEnum,
+} from '../DetailModal/config';
+import { TaskStatusEnum, TaskTargetEnum, TaskTargetNameEnum } from '../../config';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { TaskStatusNameEnum } from '../../config';
+import { TaskRecordType } from '/@/api/task/model';
+import { TaskTypeNameEnum } from '../../config';
+import { TimeUnitNameEnum } from '/@/enums/toolEnum';
+import { PeriodTypeEnum } from '../DetailModal/config';
+
+enum WeekEnum {
+  MON = 'MON',
+  TUES = 'TUES',
+  WED = 'WED',
+  THUR = 'THUR',
+  FRI = 'FRI',
+  SAT = 'SAT',
+  SUN = 'SUN',
+}
+
+enum WeekNameEnum {
+  MON = '星期一',
+  TUES = '星期二',
+  WED = '星期三',
+  THUR = '星期四',
+  FRI = '星期五',
+  SAT = '星期六',
+  SUN = '星期天',
+}
+
+const isWeek = (string: string) => {
+  return Object.keys(WeekEnum).some((item) => string.includes(item));
+};
+
+const extractCronExpression = (expression: string) => {
+  const flag = isWeek(expression);
+  const list = expression.split(' ');
+  const unit = flag ? list[list.length - 1] : list[3];
+  return flag ? WeekNameEnum[unit] : unit;
+};
+
+export const schemas: DescItem[] = [
+  {
+    field: FormFieldsEnum.NAME,
+    label: '任务名',
+  },
+  {
+    field: FormFieldsEnum.TARGET_TYPE,
+    label: '目标类型',
+    render(val: TaskTargetEnum) {
+      return h(
+        Tag,
+        { color: val === TaskTargetEnum.DEVICES ? 'blue' : 'cyan' },
+        () => TaskTargetNameEnum[val]
+      );
+    },
+  },
+  {
+    field: 'state',
+    label: '任务状态',
+    render(val: TaskStatusEnum) {
+      return h(
+        Tag,
+        { color: val === TaskStatusEnum.NORMAL ? 'success' : 'error' },
+        () => TaskStatusNameEnum[TaskStatusEnum[val]]
+      );
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_CONTENT_TYPE,
+    label: '任务类型',
+    render(_val: any, data: TaskRecordType) {
+      return TaskTypeNameEnum[data.executeContent.type];
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_TYPE,
+    label: '定时方式',
+    render(_val: any, data: TaskRecordType) {
+      return ExecuteTimeTypeNameEnum[data.executeTime.type];
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_INTERVAL,
+    label: '间隔时间',
+    render(_val: any, data: TaskRecordType) {
+      const { executeTime } = data;
+      const { time, type, periodType, pollUnit, period } = executeTime;
+      console.log({ time, type, periodType, pollUnit });
+      return type === ExecuteTimeTypeEnum.POLL
+        ? `${time}${TimeUnitNameEnum[pollUnit]}`
+        : `${PeriodTypeNameEnum[periodType]} ${
+            periodType === PeriodTypeEnum.DAY
+              ? ''
+              : `/ ${extractCronExpression(period)}${isWeek(period) ? '' : '号'}`
+          } / ${time}`;
+    },
+  },
+  {
+    field: 'createTime',
+    label: '创建时间',
+  },
+  {
+    field: 'updateTime',
+    label: '修改时间',
+  },
+];

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

+<script lang="ts" setup>
+  import { useDescription, Description } from '/@/components/Description';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { schemas } from './config';
+  import { ModalParamsType } from '/#/utils';
+  import { TaskRecordType } from '/@/api/task/model';
+  defineEmits(['register']);
+
+  const [registerDrawer] = useDrawerInner((data: ModalParamsType<TaskRecordType>) => {
+    const { record } = data;
+    setDescProps({ data: record });
+  });
+
+  const [registerDescription, { setDescProps }] = useDescription({
+    schema: schemas,
+    labelStyle: { width: '120px' },
+    column: 1,
+  });
+</script>
+
+<template>
+  <BasicDrawer title="任务详情" @register="registerDrawer" width="30%">
+    <Description @register="registerDescription" />
+  </BasicDrawer>
+</template>

@@ -21,6 +21,7 @@
   enum DropMenuEvent {
   enum DropMenuEvent {
     DELETE = 'DELETE',
     DELETE = 'DELETE',
     EDIT = 'EDIT',
     EDIT = 'EDIT',
+    DETAIL = 'DETAIL',
   }
   }
 
 
   const props = withDefaults(
   const props = withDefaults(
@@ -35,7 +36,7 @@
     }
     }
   );
   );
 
 
-  const emit = defineEmits(['edit', 'runTask']);
+  const emit = defineEmits(['edit', 'runTask', 'detail']);
 
 
   const loading = ref(false);
   const loading = ref(false);
 
 
@@ -131,6 +132,12 @@
         :trigger="['hover']"
         :trigger="['hover']"
         :drop-menu-list="[
         :drop-menu-list="[
           {
           {
+            text: '详情',
+            event: DropMenuEvent.DETAIL,
+            icon: 'ant-design:eye-outlined',
+            onClick: emit.bind(null, 'detail', getRecord),
+          },
+          {
             text: '编辑',
             text: '编辑',
             event: DropMenuEvent.DELETE,
             event: DropMenuEvent.DELETE,
             disabled: !!getRecord.state,
             disabled: !!getRecord.state,

@@ -18,13 +18,11 @@ export enum FormFieldsEnum {
 export enum TaskTargetEnum {
 export enum TaskTargetEnum {
   DEVICES = 'DEVICES',
   DEVICES = 'DEVICES',
   PRODUCTS = 'PRODUCTS',
   PRODUCTS = 'PRODUCTS',
-  ALL = 'all',
 }
 }
 
 
 export enum TaskTargetNameEnum {
 export enum TaskTargetNameEnum {
   DEVICES = '设备',
   DEVICES = '设备',
   PRODUCTS = '产品',
   PRODUCTS = '产品',
-  ALL = '不限任务目标类型',
 }
 }
 
 
 export enum TaskTypeEnum {
 export enum TaskTypeEnum {

@@ -17,8 +17,11 @@
   import { Authority } from '/@/components/Authority';
   import { Authority } from '/@/components/Authority';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import { RunTaskModal } from './components/RunTaskModal';
   import { RunTaskModal } from './components/RunTaskModal';
+  import { DetailDrawer } from './components/DetailDrawer';
+  import { useDrawer } from '/@/components/Drawer';
 
 
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
+  const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerRunTaskModal, { openModal: openRunTaskModal }] = useModal();
   const [registerRunTaskModal, { openModal: openRunTaskModal }] = useModal();
 
 
   const [registerForm, { getFieldsValue }] = useForm({
   const [registerForm, { getFieldsValue }] = useForm({
@@ -66,6 +69,10 @@
     openRunTaskModal(true, record);
     openRunTaskModal(true, record);
   };
   };
 
 
+  const handleDetail = (record: TaskRecordType) => {
+    openDrawer(true, { mode: DataActionModeEnum.READ, record } as ModalParamsType);
+  };
+
   const reload = () => getDataSource();
   const reload = () => getDataSource();
 
 
   const listElRef = ref<Nullable<ComponentElRef>>(null);
   const listElRef = ref<Nullable<ComponentElRef>>(null);
@@ -136,11 +143,18 @@
         </template>
         </template>
         <template #renderItem="{ item }">
         <template #renderItem="{ item }">
           <List.Item :key="item.id">
           <List.Item :key="item.id">
-            <TaskCard :record="item" :reload="reload" @runTask="handleRunTask" @edit="handleEdit" />
+            <TaskCard
+              :record="item"
+              :reload="reload"
+              @runTask="handleRunTask"
+              @detail="handleDetail"
+              @edit="handleEdit"
+            />
           </List.Item>
           </List.Item>
         </template>
         </template>
       </List>
       </List>
     </section>
     </section>
+    <DetailDrawer @register="registerDrawer" />
     <DetailModal @register="registerModal" :reload="reload" />
     <DetailModal @register="registerModal" :reload="reload" />
     <RunTaskModal :reload="reload" @register="registerRunTaskModal" />
     <RunTaskModal :reload="reload" @register="registerRunTaskModal" />
   </PageWrapper>
   </PageWrapper>