feat: 任务中心基本功能开发

@@ -84,6 +84,7 @@
     "@types/inquirer": "^7.3.3",
     "@types/intro.js": "^3.0.2",
     "@types/jest": "^27.0.1",
+    "@types/jsoneditor": "^9.9.0",
     "@types/lodash-es": "^4.17.4",
     "@types/mockjs": "^1.0.4",
     "@types/node": "^16.6.1",

+import { CreateTaskRecordType, GetTaskListParamsType, TaskRecordType } from './model';
+import { PaginationResult } from '/#/axios';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  TASK_LIST = '/task_center',
+  ADD_TASK = '/task_center/add',
+  UPDATE_STATE = '/task_center',
+  DELETE_TASK = '/task_center',
+  UPDATE_TASK = '/task_center/update',
+  CANCEL_TASK = '/task_center',
+}
+
+export const getTaskCenterList = (params: GetTaskListParamsType) => {
+  return defHttp.get<PaginationResult<TaskRecordType>>({
+    url: Api.TASK_LIST,
+    params,
+  });
+};
+
+export const createTask = (data: CreateTaskRecordType) => {
+  return defHttp.post({
+    url: Api.ADD_TASK,
+    data,
+  });
+};
+
+export const updateState = (id: string, state: number) => {
+  return defHttp.put({
+    url: `${Api.UPDATE_STATE}/${id}/update/${state}`,
+  });
+};
+
+export const deleteTask = (ids: string[]) => {
+  return defHttp.delete({
+    url: Api.DELETE_TASK,
+    data: { ids },
+  });
+};
+
+export const updateTask = (data: CreateTaskRecordType & Record<'id', string>) => {
+  return defHttp.put({
+    url: Api.UPDATE_TASK,
+    data,
+  });
+};
+
+export const cancelTask = (data: Record<'id' | 'tbDeviceId', string>) => {
+  return defHttp.put({
+    url: `${Api.CANCEL_TASK}/${data.id}/cancel/${data.tbDeviceId}`,
+  });
+};

+import { TaskTargetEnum } from '/@/views/task/center/config';
+import {
+  ExecuteTimeTypeEnum,
+  PeriodTypeEnum,
+  PushWayEnum,
+} from '/@/views/task/center/components/CreateModal/config';
+import { TaskTypeEnum } from '/@/views/task/center/config';
+
+export interface GetTaskListParamsType {
+  page: number;
+  pageSize: number;
+  state?: string;
+}
+
+export interface CreateTaskRecordType {
+  name: string;
+  targetType: TaskTargetEnum;
+  executeTarget: {
+    organizationId?: string;
+    deviceProfileId?: string;
+    deviceType?: string;
+    cancelExecuteDevices?: string[];
+    data?: string[];
+  };
+  executeContent: {
+    pushContent: {
+      rpcCommand: string | Recordable;
+    };
+    pushWay: PushWayEnum;
+    type: TaskTypeEnum;
+  };
+  executeTime: {
+    cron: string;
+    type: ExecuteTimeTypeEnum;
+    periodType: PeriodTypeEnum;
+    period: string;
+    time: string;
+    pollUnit: string;
+  };
+}
+
+export interface TaskRecordType extends CreateTaskRecordType {
+  id: string;
+  createTime: string;
+  creator: string;
+  enabled: boolean;
+  state: number;
+}

@@ -2,6 +2,7 @@ import { withInstall } from '/@/utils';
 // @ts-ignore
 import codeEditor from './src/CodeEditor.vue';
 import jsonPreview from './src/json-preview/JsonPreview.vue';
+export { JSONEditor } from './src/JSONEditor';
 
 export const CodeEditor = withInstall(codeEditor);
 export const JsonPreview = withInstall(jsonPreview);

+import { Rule } from '/@/components/Form';
+
+export { default as JSONEditor } from './index.vue';
+
+export const parseStringToJSON = <T = Recordable>(value: string) => {
+  try {
+    const json = JSON.parse(value) as T;
+    return { json, valid: true };
+  } catch (error) {
+    return { json: null, valid: false };
+  }
+};
+
+export const JSONEditorValidator = (message = 'json格式校验失败'): Rule[] => {
+  return [
+    {
+      validateTrigger: 'blur',
+      validator(_rule: Rule, value: any, _callback: Fn) {
+        const { valid } = parseStringToJSON(value);
+        if (valid) {
+          return Promise.resolve();
+        }
+        return Promise.reject(message);
+      },
+    },
+  ];
+};

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import JSONEditor, { JSONEditorOptions } from 'jsoneditor';
+  import 'jsoneditor/dist/jsoneditor.min.css';
+  import { unref } from 'vue';
+  import { onMounted } from 'vue';
+  import { computed } from '@vue/reactivity';
+  import { onUnmounted } from 'vue';
+  import { watch } from 'vue';
+
+  enum EventEnum {
+    UPDATE_VALUE = 'update:value',
+    CHANGE = 'change',
+    BLUR = 'blur',
+    FOCUS = 'focus',
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      options?: JSONEditorOptions;
+    }>(),
+    {
+      options: () =>
+        ({
+          mode: 'code',
+          mainMenuBar: false,
+          statusBar: false,
+        } as JSONEditorOptions),
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: EventEnum.UPDATE_VALUE, value: any, instance?: JSONEditor): void;
+    (e: EventEnum.CHANGE, value: any, instance?: JSONEditor): void;
+    (e: EventEnum.BLUR, event: Event, instance?: JSONEditor): void;
+    (e: EventEnum.FOCUS, event: Event, instance?: JSONEditor): void;
+  }>();
+
+  const jsonEditorElRef = ref<Nullable<any>>();
+
+  const editoreRef = ref<JSONEditor>();
+
+  const handleChange = (value: any) => {
+    emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef));
+    emit(EventEnum.CHANGE, value, unref(editoreRef));
+  };
+
+  const handleEmit = (event: Event, key: EventEnum) => {
+    emit(key as EventEnum[keyof EventEnum], event, unref(editoreRef));
+  };
+
+  const getOptions = computed(() => {
+    const { options } = props;
+    return {
+      ...options,
+      onChangeText: handleChange,
+      onBlur: (event: Event) => handleEmit(event, EventEnum.BLUR),
+      onFocus: (event: Event) => handleEmit(event, EventEnum.FOCUS),
+    } as JSONEditorOptions;
+  });
+
+  const initialize = () => {
+    editoreRef.value = new JSONEditor(unref(jsonEditorElRef), unref(getOptions));
+  };
+
+  watch(
+    () => props.value,
+    (target) => {
+      unref(editoreRef)?.setText(target || '');
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  const get = (): string => {
+    return unref(editoreRef)?.getText() || '';
+  };
+
+  const set = (data: any) => {
+    return unref(editoreRef)?.set(data);
+  };
+
+  onMounted(() => {
+    initialize();
+  });
+
+  onUnmounted(() => {
+    unref(editoreRef)?.destroy();
+  });
+
+  defineExpose({
+    get,
+    set,
+  });
+</script>
+
+<template>
+  <div class="p-2 bg-gray-200">
+    <div ref="jsonEditorElRef" class="jsoneditor"></div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .jsoneditor {
+    border: none !important;
+
+    :deep(.jsoneditor) {
+      border: none !important;
+    }
+  }
+</style>

@@ -122,4 +122,8 @@ export type ComponentType =
   | 'ApiSelectScrollLoad'
   | 'TransferModal'
   | 'TransferTableModal'
-  | 'ObjectModelValidateForm';
+  | 'ObjectModelValidateForm'
+  | 'DevicePicker'
+  | 'CustomInput'
+  | 'RegisterAddressInput'
+  | 'ControlGroup';

+export enum DictEnum {
+  // 从机地址
+  SLAVE_ADDRESS = 'slave_address',
+  // 功能码
+  FUNCTION_CODE = 'function_code',
+  // 数据校验
+  DATA_VALIDATE = 'data_validate',
+  // 设备类型
+  DEVICE_TYPE = 'device_type',
+}

+export enum DataActionModeEnum {
+  CREATE = 'CREATE',
+  READ = 'READ',
+  UPDATE = 'UPDATE',
+  DELETE = 'DELETE',
+}
+
+export enum TimeUnitEnum {
+  SECOND = 'SECOND',
+  MINUTE = 'MINUTE',
+  HOUR = 'HOUR',
+}
+
+export enum TimeUnitNameEnum {
+  SECOND = '秒',
+  MINUTE = '分',
+  HOUR = '时',
+}

+export const createPickerSearch = (searchValue = false) => {
+  return {
+    showSearch: true,
+    filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
+      let { label, value } = option;
+      label = label.toLowerCase();
+      value = value.toLowerCase();
+      inputValue = inputValue.toLowerCase();
+      return label.includes(inputValue) || (searchValue && value.includes(inputValue));
+    },
+  };
+};

@@ -51,6 +51,9 @@
       <TabPane key="eventManage" tab="事件管理">
         <EventManage :tbDeviceId="deviceDetail.tbDeviceId" />
       </TabPane>
+      <TabPane key="task" tab="任务">
+        <Task :tbDeviceId="deviceDetail.tbDeviceId" />
+      </TabPane>
     </Tabs>
   </BasicDrawer>
 </template>
@@ -71,6 +74,7 @@
   import ModelOfMatter from '../tabs/ModelOfMatter.vue';
   import EventManage from '../tabs/EventManage/index.vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import Task from '../tabs/Task.vue';
 
   export default defineComponent({
     name: 'DeviceModal',
@@ -88,6 +92,7 @@
       ModelOfMatter,
       CommandRecord,
       EventManage,
+      Task,
     },
     emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
     setup(_props, { emit }) {

+<script lang="ts" setup>
+  import { ReloadOutlined } from '@ant-design/icons-vue';
+  import { Button, List, Tooltip } from 'ant-design-vue';
+  import { TaskCard } from '/@/views/task/center/components/TaskCard';
+  import { reactive, ref, unref } from 'vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchemas } from '/@/views/task/center/config';
+  import { getTaskCenterList } from '/@/api/task';
+  import { onMounted } from 'vue';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import { TaskRecordType } from '/@/api/task/model';
+
+  defineProps<{
+    tbDeviceId: string;
+  }>();
+
+  const listElRef = ref<Nullable<ComponentElRef>>(null);
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: formSchemas,
+    baseColProps: { span: 8 },
+    compact: true,
+    showAdvancedButton: true,
+    labelWidth: 100,
+    submitFunc: async () => {
+      pagination.params = getFieldsValue();
+      getDataSource();
+    },
+  });
+
+  const pagination = reactive({
+    total: 10,
+    current: 1,
+    pageSize: 10,
+    showQuickJumper: true,
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    params: {} as Recordable,
+  });
+
+  const dataSource = ref<TaskRecordType[]>([]);
+  const loading = ref(false);
+
+  const getDataSource = async () => {
+    try {
+      loading.value = true;
+      const { items } = await getTaskCenterList({
+        page: pagination.current,
+        pageSize: pagination.pageSize,
+        ...pagination.params,
+      });
+      dataSource.value = items;
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const reload = () => getDataSource();
+
+  const setListHeight = () => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listElRef)!.$el!) as DOMRect;
+    // 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 listContainerHeight =
+      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
+    const listContainerEl = (unref(listElRef)!.$el as HTMLElement).querySelector(
+      '.ant-spin-container'
+    ) as HTMLElement;
+    listContainerEl &&
+      (listContainerEl.style.height = listContainerHeight + 'px') &&
+      (listContainerEl.style.overflowY = 'auto') &&
+      (listContainerEl.style.overflowX = 'hidden');
+  };
+
+  onMounted(() => {
+    setListHeight();
+    getDataSource();
+  });
+</script>
+
+<template>
+  <PageWrapper class="bg-gray-100">
+    <section
+      class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
+    >
+      <BasicForm @register="registerForm" />
+    </section>
+    <section class="bg-light-50 my-4 p-4 x dark:text-gray-300 dark:bg-dark-900">
+      <List
+        ref="listElRef"
+        :dataSource="dataSource"
+        :pagination="pagination"
+        :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3, column: 3 }"
+        :loading="loading"
+      >
+        <template #header>
+          <section class="flex justify-end gap-4">
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getDataSource">
+                <ReloadOutlined :spin="loading" />
+              </Button>
+            </Tooltip>
+          </section>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item :key="item.id">
+            <TaskCard
+              :record="item"
+              :reload="reload"
+              :tbDeviceId="tbDeviceId"
+              :deviceTaskCardMode="true"
+            />
+          </List.Item>
+        </template>
+      </List>
+    </section>
+  </PageWrapper>
+</template>

+import { Component } from 'vue';
+import { ComponentType } from './type';
+
+const componentMap = new Map<ComponentType, Component>();
+
+export function add(compName: ComponentType, component: Component) {
+  componentMap.set(compName, component);
+}
+
+export function del(compName: ComponentType) {
+  componentMap.delete(compName);
+}
+
+export { componentMap };

+import type { ComponentType } from './type';
+import { tryOnUnmounted } from '@vueuse/core';
+import { add, del } from './componentMap';
+import type { Component } from 'vue';
+
+export function useComponentRegister(compName: ComponentType, comp: Component) {
+  add(compName, comp);
+  tryOnUnmounted(() => {
+    del(compName);
+  });
+}

+export { default as ControlGroup } from './index.vue';
+export { add, del } from './componentMap';
+export { useComponentRegister } from './help';

+<script lang="ts" setup>
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
+  import { ComponentType, ColEx } from '/@/components/Form/src/types/index';
+
+  withDefaults(
+    defineProps<{
+      component?: ComponentType;
+      itemColProps?: Partial<ColEx>;
+    }>(),
+    {
+      component: 'Switch',
+      itemColProps: () => ({ span: 12 } as Partial<ColEx>),
+    }
+  );
+
+  const [registerForm, {}] = useForm({
+    showActionButtonGroup: false,
+    schemas: Array.from({ length: 3 }).map((_item, index) => {
+      return {
+        field: index.toString(),
+        label: index.toString(),
+        component: 'Switch',
+      } as FormSchema;
+    }),
+    // baseColProps,
+  });
+</script>
+
+<template>
+  <BasicForm @register="registerForm" />
+</template>

+export type ComponentType = '';

+<script lang="ts" setup>
+  import { Button } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { formSchemas } from './config';
+  import { ref } from 'vue';
+  import { unref } from 'vue';
+
+  const emit = defineEmits(['update:value']);
+
+  const [registerModal] = useModal();
+
+  const [registerForm, {}] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+    rowProps: { gutter: 10 },
+    baseColProps: { span: 12 },
+  });
+
+  const commandValue = ref('');
+
+  const handleGetValue = async () => {};
+
+  const handleOk = () => {
+    emit('update:value', unref(commandValue));
+  };
+</script>
+
+<template>
+  <BasicModal @register="registerModal" title="配置操作" @ok="handleOk">
+    <BasicForm @register="registerForm" class="create-tcp-command-form" />
+    <section>
+      <Button @click="handleGetValue" type="link" class="!px-0">生成预览</Button>
+      <div v-if="commandValue">
+        <div class="text-gray-400">Modbus 指令预览</div>
+        <code class="bg-dark-50 text-light-50 p-1 w-full block mt-1">{{ commandValue }}</code>
+      </div>
+    </section>
+  </BasicModal>
+</template>
+
+<style lang="less" scoped>
+  .create-tcp-command-form {
+    :deep(.ant-input-number) {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+</style>

+<script lang="ts" setup>
+  import { InputGroup, InputNumber, Select, Input } from 'ant-design-vue';
+  import { watch } from 'vue';
+  import { unref } from 'vue';
+  import { computed } from 'vue';
+  import { ref } from 'vue';
+
+  enum AddressTypeEnum {
+    DEC = 'DEC',
+    HEX = 'HEX',
+  }
+
+  const emit = defineEmits(['update:value']);
+
+  const DEC_MAX_VALUE = parseInt('0xffff', 16);
+
+  const props = defineProps<{
+    value?: string;
+  }>();
+
+  const addressTypeOptions = [
+    { label: AddressTypeEnum.DEC, value: AddressTypeEnum.DEC },
+    { label: AddressTypeEnum.HEX, value: AddressTypeEnum.HEX },
+  ];
+
+  const type = ref(AddressTypeEnum.DEC);
+
+  const inputValue = ref<number | string>(0);
+
+  const getHexValue = computed(() => {
+    return parseInt(unref(inputValue) || 0, 16);
+  });
+
+  const getDecValue = computed(() => {
+    let formatValue = Number(unref(inputValue) || 0).toString(16);
+    formatValue = `0x${formatValue.padStart(4, '0')}`;
+    return (inputValue.value as number) > DEC_MAX_VALUE ? '0x0000' : formatValue;
+  });
+
+  const handleEmit = () => {
+    const syncValue = unref(type) === AddressTypeEnum.DEC ? unref(getDecValue) : unref(getHexValue);
+    emit('update:value', syncValue);
+  };
+
+  const handleChange = (value: AddressTypeEnum) => {
+    const syncValue = value === AddressTypeEnum.DEC ? unref(getHexValue) : unref(getDecValue);
+    inputValue.value = syncValue;
+    emit('update:value', syncValue);
+  };
+
+  watch(
+    () => props.value,
+    (targetValue) => {
+      inputValue.value = targetValue || 0;
+      console.log(`inputValue: ${unref(inputValue)}`);
+    }
+  );
+</script>
+
+<template>
+  <InputGroup compact class="!flex">
+    <Select
+      v-model:value="type"
+      :options="addressTypeOptions"
+      @change="handleChange"
+      class="bg-gray-200"
+    />
+    <InputNumber
+      v-if="type === AddressTypeEnum.DEC"
+      v-model:value="inputValue"
+      :step="1"
+      class="flex-1"
+      @change="handleEmit"
+    />
+    <Input v-if="type === AddressTypeEnum.HEX" v-model:value="inputValue" />
+    <div class="text-center h-8 leading-8 px-2 bg-gray-200 cursor-pointer rounded-1 w-20">
+      <div v-if="type === AddressTypeEnum.DEC">{{ getDecValue }}</div>
+      <div v-if="type === AddressTypeEnum.HEX">{{ getHexValue }}</div>
+    </div>
+  </InputGroup>
+</template>

+import { findDictItemByCode } from '/@/api/system/dict';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
+import { DictEnum } from '/@/enums/dictEnum';
+import RegisterAddressInput from './RegisterAddressInput.vue';
+import { createPickerSearch } from '/@/utils/pickerSearch';
+import { ControlGroup } from '../ControlGroup';
+
+export enum FormFieldsEnum {
+  ADDRESS = 'address',
+  FUNCTION_CODE = 'functionCode',
+  START_REGISTER_ADDRESS = 'startRegisterAddress',
+  REGISTER_NUMBER = 'registerNumber',
+  DATA_VALID = 'dataValid',
+}
+
+useComponentRegister('RegisterAddressInput', RegisterAddressInput);
+useComponentRegister('ControlGroup', ControlGroup);
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.ADDRESS,
+    component: 'ApiSelect',
+    label: '从机地址',
+    componentProps: () => {
+      return {
+        api: async (params: Recordable) => {
+          try {
+            const result = await findDictItemByCode(params);
+            return result.map((item, index) => ({
+              ...item,
+              itemText: `${index + 1} - ${item.itemText}`,
+            }));
+          } catch (error) {
+            return [];
+          }
+        },
+        params: {
+          dictCode: DictEnum.SLAVE_ADDRESS,
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        ...createPickerSearch(),
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.FUNCTION_CODE,
+    component: 'ApiSelect',
+    label: '功能码',
+    componentProps: () => {
+      return {
+        api: findDictItemByCode,
+        params: {
+          dictCode: DictEnum.FUNCTION_CODE,
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.START_REGISTER_ADDRESS,
+    label: '起始寄存器地址',
+    component: 'RegisterAddressInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
+  },
+  {
+    field: FormFieldsEnum.REGISTER_NUMBER,
+    label: '寄存器个数',
+    component: 'InputNumber',
+    componentProps: {
+      min: 1,
+      max: 64,
+      step: 1,
+    },
+  },
+  {
+    field: FormFieldsEnum.DATA_VALID,
+    label: '数据校验',
+    component: 'ApiSelect',
+    colProps: { span: 24 },
+    componentProps: () => {
+      return {
+        api: findDictItemByCode,
+        params: {
+          dictCode: DictEnum.DATA_VALIDATE,
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  // {
+  //   field: 'test',
+  //   label: '住',
+  //   component: 'ControlGroup',
+  // },
+];

+export { default as CustomInput } from './index.vue';
+export enum ModeEnum {
+  JSON = 'application/json',
+  NORMAL = 'normal',
+}

+<script lang="ts" setup>
+  import { Input } from 'ant-design-vue';
+  import { JSONEditor } from '/@/components/CodeEditor';
+  import { SettingOutlined } from '@ant-design/icons-vue';
+  import { ModeEnum } from './index';
+  import { computed } from '@vue/reactivity';
+  import CreateTCPCommandModal from './CreateTCPCommandModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { ref } from 'vue';
+  import { unref } from 'vue';
+  import JSONEditorType from 'jsoneditor';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: any;
+      mode?: string;
+      inputProps?: Recordable;
+      showSettingAddonAfter?: boolean;
+      openSettingOnInputFocus?: boolean;
+    }>(),
+    {
+      mode: 'application/json',
+      showSettingAddonAfter: true,
+      openSettingOnInputFocus: false,
+    }
+  );
+
+  const emit = defineEmits(['update:value']);
+
+  const inputElRef = ref<Nullable<HTMLInputElement>>(null);
+
+  const [registerCreateTCPCommandModal, { openModal }] = useModal();
+
+  const getJSONValue = computed(() => {
+    return props.value;
+  });
+
+  const handleEmit = (value: any) => {
+    emit('update:value', value);
+    openModal(false);
+    if (props.openSettingOnInputFocus) {
+      unref(inputElRef)?.blur();
+    }
+  };
+
+  const handleClick = () => {
+    openModal(true);
+  };
+
+  const handleFocus = () => {
+    if (props.openSettingOnInputFocus) {
+      openModal(true);
+      unref(inputElRef)?.blur();
+    }
+  };
+
+  const handleEditorBlur = (_event: Event, instance: JSONEditorType) => {
+    const value = instance.getText();
+    handleEmit(value);
+  };
+</script>
+
+<template>
+  <section>
+    <Input
+      v-if="mode === ModeEnum.NORMAL"
+      ref="inputElRef"
+      :value="getJSONValue"
+      @change="handleEmit"
+      v-bind="inputProps"
+      @focus="handleFocus"
+    >
+      <template v-if="showSettingAddonAfter" #addonAfter>
+        <SettingOutlined class="cursor-pointer" @click="handleClick" />
+      </template>
+    </Input>
+    <JSONEditor v-if="mode === ModeEnum.JSON" :value="getJSONValue" @blur="handleEditorBlur" />
+    <CreateTCPCommandModal @register="registerCreateTCPCommandModal" @update:value="handleEmit" />
+  </section>
+</template>

+import { TaskTargetEnum, TaskTargetNameEnum, TaskTypeEnum, TaskTypeNameEnum } from '../../config';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
+import {
+  DevicePicker,
+  validateDevicePicker,
+  FormFieldsEnum as DeviceCascadePickerFieldsEnum,
+} from '../DevicePicker';
+import { CustomInput, ModeEnum } from '../CustomInput';
+import { DeviceProfileModel } from '/@/api/device/model/deviceModel';
+import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
+import { getDeviceProfile } from '/@/api/alarm/position';
+import { JSONEditorValidator } from '/@/components/CodeEditor/src/JSONEditor';
+import { TimeUnitEnum, TimeUnitNameEnum } from '/@/enums/toolEnum';
+import { createPickerSearch } from '/@/utils/pickerSearch';
+
+useComponentRegister('DevicePicker', DevicePicker);
+useComponentRegister('CustomInput', CustomInput);
+
+export enum FormFieldsEnum {
+  // 任务名称
+  NAME = 'name',
+  // 目标类型
+  TARGET_TYPE = 'targetType',
+  // 设备类型选择
+  DEVICE_PROFILE = 'deviceProfile',
+  // 执行目标源
+  EXECUTE_TARGET_DATA = 'executeTargetData',
+  // 执行任务类型
+  EXECUTE_CONTENT_TYPE = 'executeContentType',
+  // 下发命令
+  RPC_COMMAND = 'rpcCommand',
+  // 推送方式
+  PUSH_WAY = 'pushWay',
+  // 执行周期类型
+  EXECUTE_TIME_TYPE = 'executeTimeType',
+  // 执行间隔时间
+  EXECUTE_TIME_INTERVAL = 'interval',
+  // 执行周期类型
+  EXECUTE_TIME_PERIOD_TYPE = 'periodType',
+  // 周期 每月 每周
+  EXECUTE_TIME_PERIOD = 'period',
+  // time时间
+  TIME = 'time',
+  // 设备传输协议
+  TRANSPORT_TYPE = 'transportType',
+  // 间隔时间单位
+  POLL_UNIT = 'pollUnit',
+}
+
+export enum PushWayEnum {
+  MQTT = 'MQTT',
+  TCP = 'TCP',
+}
+
+export enum ExecuteTimeTypeEnum {
+  CUSTOM = 'CUSTOM',
+  POLL = 'POLL',
+}
+
+export enum ExecuteTimeTypeNameEnum {
+  CUSTOM = '自定义',
+  POLL = '间隔时间重复',
+}
+
+export enum PeriodTypeEnum {
+  MONTH,
+  WEEK,
+  DAY,
+}
+
+export enum PeriodTypeNameEnum {
+  MONTH = '每月',
+  WEEK = '每周',
+  DAY = '每日',
+}
+
+const isShowCustomIntervalTimeSetting = (model: Recordable, flag: PeriodTypeEnum) => {
+  return (
+    model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.CUSTOM &&
+    model[FormFieldsEnum.EXECUTE_TIME_PERIOD_TYPE] === flag
+  );
+};
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.NAME,
+    component: 'Input',
+    label: '任务名称',
+    rules: [{ required: true, message: '请填写任务名称' }],
+    componentProps: {
+      placeholder: '请输入任务名称',
+    },
+  },
+  {
+    field: FormFieldsEnum.TARGET_TYPE,
+    component: 'RadioGroup',
+    label: '目标类型',
+    defaultValue: TaskTargetEnum.DEVICES,
+    helpMessage: ['执行任务的目标设备，可以是多个指定的设备，也可以是一个设备类型下的所有设备.'],
+    componentProps: {
+      options: [
+        { label: TaskTargetNameEnum.DEVICES, value: TaskTargetEnum.DEVICES },
+        { label: TaskTargetNameEnum.PRODUCTS, value: TaskTargetEnum.PRODUCTS },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.DEVICE_PROFILE,
+    component: 'ApiSelect',
+    label: '产品',
+    ifShow: ({ model }) => model[FormFieldsEnum.TARGET_TYPE] === TaskTargetEnum.PRODUCTS,
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        api: getDeviceProfile,
+        placeholder: '请选择产品',
+        labelField: 'name',
+        valueField: 'id',
+        onChange(value: string, option: DeviceProfileModel) {
+          if (value) {
+            const isTCP = option.transportType === TransportTypeEnum.TCP;
+            setFieldsValue({
+              [FormFieldsEnum.TRANSPORT_TYPE]: isTCP ? PushWayEnum.TCP : PushWayEnum.MQTT,
+              [FormFieldsEnum.PUSH_WAY]: isTCP ? PushWayEnum.TCP : PushWayEnum.MQTT,
+              ...(isTCP ? {} : { [FormFieldsEnum.EXECUTE_CONTENT_TYPE]: TaskTypeEnum.CUSTOM }),
+            });
+          }
+        },
+        ...createPickerSearch(),
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TARGET_DATA,
+    component: 'DevicePicker',
+    label: '设备',
+    helpMessage: ['任务可以对目标设备按预设的时间策略执行任务。'],
+    ifShow: ({ model }) => model[FormFieldsEnum.TARGET_TYPE] === TaskTargetEnum.DEVICES,
+    rules: [validateDevicePicker()],
+    valueField: 'value',
+    changeEvent: 'update:value',
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        multiple: true,
+        onChange(key: string, _value: string | string[], option: DeviceProfileModel) {
+          if (key === DeviceCascadePickerFieldsEnum.DEVICE_PROFILE) {
+            const isTCP = (option || {}).transportType === TransportTypeEnum.TCP;
+            setFieldsValue({
+              [FormFieldsEnum.TRANSPORT_TYPE]: _value ? option.transportType : null,
+              [FormFieldsEnum.PUSH_WAY]: isTCP ? PushWayEnum.TCP : PushWayEnum.MQTT,
+              ...(isTCP ? {} : { [FormFieldsEnum.EXECUTE_CONTENT_TYPE]: TaskTypeEnum.CUSTOM }),
+            });
+          }
+        },
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.TRANSPORT_TYPE,
+    component: 'Input',
+    label: '',
+    show: false,
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_CONTENT_TYPE,
+    component: 'RadioGroup',
+    label: '任务类型',
+    defaultValue: TaskTypeEnum.CUSTOM,
+    componentProps: ({ formActionType, formModel }) => {
+      const { setFieldsValue } = formActionType;
+      const transportType = Reflect.get(formModel, FormFieldsEnum.TRANSPORT_TYPE);
+      return {
+        options: [
+          {
+            label: TaskTypeNameEnum.CUSTOM,
+            value: TaskTypeEnum.CUSTOM,
+          },
+          {
+            label: TaskTypeNameEnum.MODBUS_RTU,
+            value: TaskTypeEnum.MODBUS_RTU,
+            disabled: transportType && transportType !== PushWayEnum.TCP,
+          },
+        ],
+        onChange(value: TaskTypeEnum) {
+          value &&
+            setFieldsValue({
+              [FormFieldsEnum.RPC_COMMAND]: '',
+            });
+        },
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.PUSH_WAY,
+    component: 'RadioGroup',
+    label: '推送方式',
+    defaultValue: PushWayEnum.MQTT,
+    show: false,
+    componentProps: {
+      options: [
+        { label: PushWayEnum.MQTT, value: PushWayEnum.MQTT },
+        { label: PushWayEnum.TCP, value: PushWayEnum.TCP },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.RPC_COMMAND,
+    component: 'CustomInput',
+    label: '自定义数据流',
+    rules: [{ required: true, message: '请输入自定义数据流' }],
+    dynamicRules: ({ model }) =>
+      model[FormFieldsEnum.PUSH_WAY] === PushWayEnum.MQTT ? JSONEditorValidator() : [],
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_CONTENT_TYPE] === TaskTypeEnum.CUSTOM,
+    valueField: 'value',
+    changeEvent: 'update:value',
+    componentProps: ({ formModel }) => {
+      const pushMode = Reflect.get(formModel, FormFieldsEnum.PUSH_WAY);
+      return {
+        inputProps: {
+          placeholder: '请输入自定义数据流',
+        },
+        mode: pushMode === PushWayEnum.MQTT ? ModeEnum.JSON : ModeEnum.NORMAL,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.RPC_COMMAND,
+    component: 'CustomInput',
+    label: 'ModbusRTU轮询',
+    rules: [{ required: true, message: '请输入Modbus RTU 轮询指令' }],
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_CONTENT_TYPE] === TaskTypeEnum.MODBUS_RTU,
+    valueField: 'value',
+    changeEvent: 'update:value',
+    componentProps: () => {
+      return {
+        inputProps: {
+          placeholder: '请输入Modbus RTU 轮询指令',
+        },
+        showSettingAddonAfter: false,
+        openSettingOnInputFocus: true,
+        mode: ModeEnum.NORMAL,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_TYPE,
+    label: '任务定时设置',
+    component: 'RadioGroup',
+    defaultValue: ExecuteTimeTypeEnum.POLL,
+    componentProps: {
+      options: [
+        { label: ExecuteTimeTypeNameEnum.POLL, value: ExecuteTimeTypeEnum.POLL },
+        { label: ExecuteTimeTypeNameEnum.CUSTOM, value: ExecuteTimeTypeEnum.CUSTOM },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_PERIOD_TYPE,
+    component: 'Select',
+    label: '周期',
+    required: true,
+    defaultValue: PeriodTypeEnum.MONTH,
+    componentProps: {
+      placeholder: '请选择周期',
+      options: [
+        { label: PeriodTypeNameEnum.DAY, value: PeriodTypeEnum.DAY },
+        { label: PeriodTypeNameEnum.WEEK, value: PeriodTypeEnum.WEEK },
+        { label: PeriodTypeNameEnum.MONTH, value: PeriodTypeEnum.MONTH },
+      ],
+      getPopupContainer: () => document.body,
+    },
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.CUSTOM,
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_PERIOD,
+    component: 'ApiSelect',
+    label: '每月',
+    required: true,
+    componentProps: {
+      placeholder: '请选择月份',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'every_month',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      getPopupContainer: () => document.body,
+    },
+    ifShow: ({ model }) => isShowCustomIntervalTimeSetting(model, PeriodTypeEnum.MONTH),
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_PERIOD,
+    component: 'ApiSelect',
+    label: '每周',
+    required: true,
+    componentProps: {
+      placeholder: '请选择周期',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'every_week',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      getPopupContainer: () => document.body,
+    },
+    ifShow: ({ model }) => isShowCustomIntervalTimeSetting(model, PeriodTypeEnum.WEEK),
+  },
+  {
+    field: FormFieldsEnum.TIME,
+    component: 'TimePicker',
+    label: '时间',
+    required: true,
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.CUSTOM,
+    componentProps: {
+      getPopupContainer: () => document.body,
+      valueFormat: 'HH:mm:ss',
+    },
+  },
+  {
+    field: FormFieldsEnum.POLL_UNIT,
+    component: 'RadioGroup',
+    label: '时间单位',
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.POLL,
+    defaultValue: TimeUnitEnum.SECOND,
+    componentProps: {
+      options: [
+        { label: TimeUnitNameEnum.SECOND, value: TimeUnitEnum.SECOND },
+        { label: TimeUnitNameEnum.MINUTE, value: TimeUnitEnum.MINUTE },
+        { label: TimeUnitNameEnum.HOUR, value: TimeUnitEnum.HOUR },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_INTERVAL,
+    label: '间隔时间',
+    component: 'InputNumber',
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.POLL,
+    componentProps: ({ formModel }) => {
+      const unit = formModel[FormFieldsEnum.POLL_UNIT];
+      return {
+        min: 0,
+        max: unit === TimeUnitEnum.HOUR ? 23 : 59,
+        step: 1,
+        placeholder: '请输入间隔时间',
+      };
+    },
+  },
+];

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

+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { formSchemas } from './config';
+  import { ref } from 'vue';
+  import { composeData, parseData } from './util';
+  import { createTask, updateTask } from '/@/api/task';
+  import { ModalParamsType } from '/#/utils';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { TaskRecordType } from '/@/api/task/model';
+  import { FormValueType } from './util';
+  import { unref } from 'vue';
+
+  const props = defineProps<{
+    reload: Fn;
+  }>();
+  defineEmits(['register']);
+
+  const formMode = ref(DataActionModeEnum.CREATE);
+
+  const dataSource = ref<TaskRecordType>();
+  const [registerModal, { closeModal }] = useModalInner(
+    (
+      { record, mode }: ModalParamsType<TaskRecordType> = {
+        record: {} as unknown as TaskRecordType,
+        mode: DataActionModeEnum.CREATE,
+      }
+    ) => {
+      dataSource.value = record;
+      formMode.value = mode;
+      resetFields();
+      if (record && mode === DataActionModeEnum.UPDATE) {
+        const res = parseData(record);
+        console.log({ record, res });
+        setFieldsValue({ ...res });
+      }
+    }
+  );
+
+  const [registerForm, { getFieldsValue, validate, setFieldsValue, resetFields }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+    layout: 'inline',
+    baseColProps: { span: 24 },
+    labelWidth: 140,
+  });
+
+  const loading = ref(false);
+  const handleOk = async () => {
+    try {
+      loading.value = true;
+      await validate();
+      const res = getFieldsValue();
+      const _res = composeData(res as Required<FormValueType>);
+      formMode.value === DataActionModeEnum.CREATE
+        ? await createTask(_res)
+        : await updateTask({ ..._res, id: unref(dataSource)?.id as string });
+      closeModal();
+      props.reload?.();
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>
+
+<template>
+  <BasicModal
+    @register="registerModal"
+    title="创建任务"
+    width="700px"
+    :okButtonProps="{ loading }"
+    @ok="handleOk"
+  >
+    <BasicForm @register="registerForm" class="form-container" />
+  </BasicModal>
+</template>
+
+<style lang="less" scoped>
+  .form-container {
+    :deep(.ant-input-number) {
+      width: 100%;
+    }
+  }
+</style>

+import CronParser, { CronFields, HourRange, SixtyRange } from 'cron-parser';
+import { dateUtil } from '/@/utils/dateUtil';
+import { ExecuteTimeTypeEnum, FormFieldsEnum, PushWayEnum } from './config';
+import { CreateTaskRecordType, TaskRecordType } from '/@/api/task/model';
+import { DeviceCascadePickerValueType } from '../DevicePicker';
+import { TaskTargetEnum } from '../../config';
+import { TimeUnitEnum } from '/@/enums/toolEnum';
+
+export interface FormValueType
+  extends Partial<Record<Exclude<FormFieldsEnum, FormFieldsEnum.TRANSPORT_TYPE>, any>> {
+  [FormFieldsEnum.EXECUTE_TARGET_DATA]: DeviceCascadePickerValueType;
+}
+
+type CanWrite<T> = {
+  -readonly [K in keyof T]: T[K];
+};
+
+interface GenCronExpressionResultType {
+  effective: boolean;
+  expression?: string;
+}
+
+export const usePluginGenCronExpression = (
+  time: string,
+  expression = '* * * * * * *',
+  includesYear = true
+): GenCronExpressionResultType => {
+  try {
+    const separator = ' ';
+    const removeYear = expression.split(separator).slice(0, 6).join(separator);
+
+    const date = dateUtil(time, 'HH:mm:ss');
+
+    const second = date.get('second') as SixtyRange;
+    const minute = date.get('minute') as SixtyRange;
+    const hour = date.get('hour') as HourRange;
+
+    const result = CronParser.parseExpression(removeYear, { utc: true, nthDayOfWeek: 4 });
+    const fields = JSON.parse(JSON.stringify(result.fields)) as CanWrite<CronFields>;
+    fields.second = [second];
+    fields.minute = [minute];
+    fields.hour = [hour];
+
+    // console.log(CronParser.fieldsToExpression(CronParser.parseExpression('').fields).stringify());
+
+    let newExpression = CronParser.fieldsToExpression(fields).stringify(true);
+    newExpression = includesYear ? `${newExpression} *` : newExpression;
+    return { effective: true, expression: newExpression };
+  } catch (error) {
+    // throw error;
+    return { effective: false };
+  }
+};
+
+export const genCronExpression = (
+  time: string,
+  expression = '* * * * * * *'
+): GenCronExpressionResultType => {
+  try {
+    const separator = ' ';
+    const list: (string | number)[] = expression.split(separator);
+
+    const date = dateUtil(time, 'HH:mm:ss');
+
+    const second = date.get('second') as SixtyRange;
+    const minute = date.get('minute') as SixtyRange;
+    const hour = date.get('hour') as HourRange;
+
+    list[0] = second;
+    list[1] = minute;
+    list[2] = hour;
+
+    return { effective: true, expression: list.join(separator) };
+  } catch (error) {
+    // throw error;
+    return { effective: false };
+  }
+};
+
+export const composeData = (result: Required<FormValueType>): CreateTaskRecordType => {
+  const {
+    name,
+    targetType,
+    rpcCommand,
+    pushWay,
+    executeContentType,
+    executeTargetData,
+    deviceProfile,
+    executeTimeType,
+    period,
+    periodType,
+    time,
+    interval,
+    pollUnit,
+  } = result;
+
+  const { organizationId, deviceType, deviceId, deviceProfileId } = executeTargetData || {};
+
+  const { expression } = genCronExpression(time, period);
+
+  const cron =
+    executeTimeType === ExecuteTimeTypeEnum.POLL ? `0/${interval} * * * * ? *` : expression!;
+
+  return {
+    name,
+    targetType,
+    executeContent: {
+      pushContent: {
+        rpcCommand: pushWay === PushWayEnum.MQTT ? JSON.parse(rpcCommand) : pushWay,
+      },
+      pushWay,
+      type: executeContentType,
+    },
+    executeTarget: {
+      data: targetType === TaskTargetEnum.PRODUCTS ? [deviceProfile] : (deviceId as string[]),
+      deviceType,
+      organizationId,
+      deviceProfileId: targetType === TaskTargetEnum.PRODUCTS ? deviceProfile : deviceProfileId,
+    },
+    executeTime: {
+      type: executeTimeType,
+      periodType,
+      period,
+      time: executeTimeType === ExecuteTimeTypeEnum.POLL ? interval : time,
+      cron,
+      pollUnit,
+    },
+  };
+};
+
+export const parseData = (result: TaskRecordType): Required<FormValueType> => {
+  const { name, targetType, executeContent, executeTarget, executeTime } = result;
+  const { pushContent: { rpcCommand } = {}, pushWay, type: executeContentType } = executeContent;
+  const { data, deviceProfileId, deviceType, organizationId } = executeTarget as Required<
+    TaskRecordType['executeTarget']
+  >;
+  const { type: executeTimeType, period, periodType, time, pollUnit } = executeTime;
+  return {
+    name,
+    targetType,
+    rpcCommand: pushWay === PushWayEnum.MQTT ? JSON.stringify(rpcCommand) : rpcCommand,
+    pushWay,
+    executeContentType,
+    executeTargetData: {
+      deviceId: targetType === TaskTargetEnum.DEVICES ? data : [],
+      deviceProfileId,
+      deviceType,
+      organizationId,
+    },
+    deviceProfile: targetType === TaskTargetEnum.PRODUCTS ? data : null,
+    executeTimeType,
+    period,
+    periodType: executeTimeType === ExecuteTimeTypeEnum.CUSTOM ? periodType : null,
+    time: executeTimeType === ExecuteTimeTypeEnum.CUSTOM ? time : null,
+    interval: executeTimeType === ExecuteTimeTypeEnum.POLL ? time : null,
+    pollUnit: executeTimeType === ExecuteTimeTypeEnum.POLL ? pollUnit : TimeUnitEnum.SECOND,
+  };
+};

+export { default as DevicePicker } from './index.vue';
+export { validateDevicePicker } from './utils';
+
+export enum FormFieldsEnum {
+  DEVICE_TYPE = 'deviceType',
+  DEVICE_PROFILE = 'deviceProfileId',
+  ORGANIZATION = 'organizationId',
+  DEVICE = 'deviceId',
+}
+
+export interface DeviceCascadePickerValueType
+  extends Record<Exclude<FormFieldsEnum, FormFieldsEnum.DEVICE>, string> {
+  [FormFieldsEnum.DEVICE]: string | string[];
+}

+<script lang="ts" setup>
+  import { h } from 'vue';
+  import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
+  import { getOrganizationList } from '/@/api/system/system';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { copyTransFun } from '/@/utils/fnUtils';
+  import { Tooltip } from 'ant-design-vue';
+  import { watch } from 'vue';
+  import { nextTick } from 'vue';
+  import { getDeviceProfile } from '/@/api/alarm/position';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { DictEnum } from '/@/enums/dictEnum';
+  import { FormFieldsEnum } from '.';
+  import { isObject } from '/@/utils/is';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: Recordable;
+      multiple?: boolean;
+      max?: 3;
+    }>(),
+    {
+      value: () => ({}),
+      multiple: false,
+    }
+  );
+
+  const emit = defineEmits(['update:value', 'change']);
+
+  const handleChange = (key: string, value: string | string[], option: Recordable) => {
+    emit('change', key, value, option);
+  };
+
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const createMaxTagPlaceholder = (omittedValues: Record<'label' | 'value', string>[]) => {
+    return h(
+      Tooltip,
+      {},
+      {
+        default: () => h('span', `+${omittedValues.length}...`),
+        title: () => h('span', 'other'),
+      }
+    );
+  };
+
+  const handleEmit = async (key: string, value: string | string[], option: Recordable) => {
+    await nextTick();
+    let _value = getFieldsValue();
+    _value = {
+      ..._value,
+
+      ...(key === FormFieldsEnum.DEVICE_TYPE
+        ? {
+            [FormFieldsEnum.DEVICE_PROFILE]: null,
+            [FormFieldsEnum.ORGANIZATION]: null,
+            [FormFieldsEnum.DEVICE]: props.multiple ? [] : null,
+          }
+        : {}),
+
+      ...(key === FormFieldsEnum.DEVICE_PROFILE
+        ? {
+            [FormFieldsEnum.ORGANIZATION]: null,
+            [FormFieldsEnum.DEVICE]: props.multiple ? [] : null,
+          }
+        : {}),
+
+      ...(key === FormFieldsEnum.ORGANIZATION
+        ? {
+            [FormFieldsEnum.DEVICE]: props.multiple ? [] : null,
+          }
+        : {}),
+    };
+    handleChange(key, value, option);
+    emit('update:value', { ..._value });
+  };
+  const [register, { setFieldsValue, getFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: FormFieldsEnum.DEVICE_TYPE,
+        component: 'ApiSelect',
+        label: '',
+        componentProps: () => {
+          return {
+            api: findDictItemByCode,
+            params: {
+              dictCode: DictEnum.DEVICE_TYPE,
+            },
+            labelField: 'itemText',
+            valueField: 'itemValue',
+            placeholder: '请选择设备类型',
+            onChange(value: string, option: Recordable) {
+              handleEmit(FormFieldsEnum.DEVICE_TYPE, value, option);
+            },
+            getPopupContainer: () => document.body,
+            ...createPickerSearch(),
+          };
+        },
+      },
+      {
+        field: FormFieldsEnum.DEVICE_PROFILE,
+        component: 'ApiSelect',
+        label: '',
+        componentProps: ({ formModel }) => {
+          const deviceType = Reflect.get(formModel, FormFieldsEnum.DEVICE_TYPE);
+          return {
+            api: async () => {
+              try {
+                return await getDeviceProfile(deviceType);
+              } catch (error) {
+                return [];
+              }
+            },
+            placeholder: '请选择产品',
+            labelField: 'name',
+            valueField: 'id',
+            onChange(value: string, options: Recordable) {
+              handleEmit(FormFieldsEnum.DEVICE_PROFILE, value, options);
+            },
+            getPopupContainer: () => document.body,
+            ...createPickerSearch(),
+          };
+        },
+      },
+      {
+        field: FormFieldsEnum.ORGANIZATION,
+        component: 'ApiTreeSelect',
+        label: '',
+        componentProps: () => {
+          return {
+            api: async () => {
+              try {
+                const data = await getOrganizationList();
+                copyTransFun(data as any);
+                return data;
+              } catch (error) {
+                console.log(error);
+                return [];
+              }
+            },
+            placeholder: '请选择组织',
+            labelField: 'name',
+            valueField: 'id',
+            childField: 'children',
+            onChange(value: string, option: Recordable) {
+              handleEmit(FormFieldsEnum.ORGANIZATION, value, option);
+            },
+            getPopupContainer: () => document.body,
+          };
+        },
+      },
+      {
+        field: FormFieldsEnum.DEVICE,
+        label: '',
+        component: 'ApiSelect',
+        componentProps: ({ formModel }) => {
+          const deviceType = Reflect.get(formModel, FormFieldsEnum.DEVICE_TYPE);
+          const deviceProfileId = Reflect.get(formModel, FormFieldsEnum.DEVICE_PROFILE);
+          const organizationId = Reflect.get(formModel, FormFieldsEnum.ORGANIZATION);
+          return {
+            api: async () => {
+              try {
+                if (!organizationId) return [];
+                return await getMeetTheConditionsDevice({
+                  deviceProfileId,
+                  deviceType,
+                  organizationId,
+                });
+              } catch (error) {
+                return [];
+              }
+            },
+            mode: props.multiple ? 'multiple' : 'combobox',
+            labelField: 'name',
+            valueField: 'tbDeviceId',
+            placeholder: '请选择设备',
+            maxTagCount: 3,
+            maxTagTextLength: 4,
+            onChange(value: string, option: Recordable) {
+              handleEmit(FormFieldsEnum.DEVICE, value, option);
+            },
+            getPopupContainer: () => document.body,
+            ...createPickerSearch(),
+          };
+        },
+      },
+    ],
+    showActionButtonGroup: false,
+    layout: 'inline',
+    baseColProps: { span: 6 },
+  });
+
+  const setValue = async () => {
+    await nextTick();
+    if (!props.value || (isObject(props.value) && !Object.values(props.value).length)) {
+      resetFields();
+      return;
+    }
+    setFieldsValue(props.value);
+  };
+
+  watch(
+    () => props.value,
+    () => {
+      setValue();
+    },
+    {
+      immediate: true,
+    }
+  );
+</script>
+
+<template>
+  <BasicForm @register="register" class="device-picker" />
+</template>
+
+<style lang="less" scoped>
+  .device-picker {
+    :deep(.ant-row) {
+      width: 100%;
+    }
+
+    :deep(.ant-form-item-control-input-content) {
+      div > div {
+        width: 100%;
+      }
+    }
+  }
+</style>

+import { FormFieldsEnum } from '.';
+import { Rule } from '/@/components/Form';
+
+export const validateDevicePicker = () => {
+  return {
+    required: true,
+    validateTrigger: 'blur',
+    validator(_rule: Recordable, value: Recordable, _callback: Fn) {
+      const device = Reflect.get(value || {}, FormFieldsEnum.DEVICE);
+      if (!device) return Promise.reject('请选择设备');
+      return Promise.resolve();
+    },
+  } as Rule;
+};

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

+<script lang="ts" setup>
+  import { Button, Card, Switch, Tooltip } from 'ant-design-vue';
+  import {
+    CloudSyncOutlined,
+    PlayCircleOutlined,
+    QuestionCircleOutlined,
+  } from '@ant-design/icons-vue';
+  import { TaskRecordType } from '/@/api/task/model';
+  import { StateEnum, TaskTargetNameEnum, TaskTypeEnum } from '../../config';
+  import { TaskTypeNameEnum } from '../../config';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { cancelTask, deleteTask, updateState } from '/@/api/task';
+  import { computed } from '@vue/reactivity';
+  import { unref } from 'vue';
+  import { ref } from 'vue';
+
+  enum DropMenuEvent {
+    DELETE = 'DELETE',
+    EDIT = 'EDIT',
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      record: TaskRecordType;
+      reload: Fn;
+      deviceTaskCardMode?: boolean;
+      tbDeviceId?: string;
+    }>(),
+    {
+      deviceTaskCardMode: false,
+    }
+  );
+
+  const emit = defineEmits(['edit']);
+
+  const loading = ref(false);
+
+  const { createMessage } = useMessage();
+
+  const getRecord = computed(() => {
+    return props.record;
+  });
+
+  const getCancelState = computed(() => {
+    const { executeTarget } = unref(getRecord);
+    const { cancelExecuteDevices } = executeTarget;
+    return !!(cancelExecuteDevices && cancelExecuteDevices.length);
+  });
+
+  const handleDelete = async () => {
+    try {
+      await deleteTask([unref(getRecord).id]);
+      createMessage.success('删除成功');
+      props.reload?.();
+    } catch (error) {}
+  };
+
+  const handleSwitchState = async () => {
+    try {
+      loading.value = true;
+      await updateState(
+        unref(getRecord).id,
+        !unref(getRecord).state ? StateEnum.ENABLE : StateEnum.CLOSE
+      );
+      createMessage.success('更新状态成功');
+      props.reload?.();
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handleCancelTask = async () => {
+    try {
+      if (!props.tbDeviceId) return;
+      loading.value = true;
+      await cancelTask({ id: unref(getRecord).id, tbDeviceId: props.tbDeviceId });
+      createMessage.success('设置成功');
+      props.reload?.();
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>
+
+<template>
+  <Card hoverable class="card-container !rounded">
+    <div v-if="!deviceTaskCardMode" class="flex justify-end mb-4">
+      <AuthDropDown
+        @click.stop
+        :trigger="['hover']"
+        :drop-menu-list="[
+          {
+            text: '编辑',
+            event: DropMenuEvent.DELETE,
+            icon: 'ant-design:edit-outlined',
+            onClick: emit.bind(null, 'edit', getRecord),
+          },
+          {
+            text: '删除',
+            event: DropMenuEvent.DELETE,
+            icon: 'ant-design:delete-outlined',
+            popconfirm: {
+              title: '是否确认删除操作?',
+              onConfirm: handleDelete.bind(null),
+            },
+          },
+        ]"
+      />
+    </div>
+    <div class="flex text-base font-medium justify-between mb-2">
+      <Tooltip :title="getRecord.name" placement="topLeft">
+        <div class="truncate max-w-48">{{ getRecord.name }}</div>
+      </Tooltip>
+      <span
+        v-if="deviceTaskCardMode"
+        class="text-xs w-12 leading-6 text-right"
+        :class="getRecord.state === StateEnum.ENABLE ? 'text-green-500' : 'text-red-500'"
+      >
+        {{ getRecord.state === StateEnum.ENABLE ? '已启用' : '未启用' }}
+      </span>
+      <Switch
+        v-if="!deviceTaskCardMode"
+        :checked="getRecord.state === StateEnum.ENABLE"
+        :loading="loading"
+        size="small"
+        @click="handleSwitchState"
+      />
+    </div>
+    <div class="flex gap-2 items-center">
+      <div
+        class="rounded flex justify-center items-center w-6 h-6"
+        :class="
+          getRecord.executeContent.type === TaskTypeEnum.MODBUS_RTU
+            ? ' bg-blue-400'
+            : 'bg-green-400'
+        "
+      >
+        <CloudSyncOutlined class="svg:fill-light-50" />
+      </div>
+      <div class="text-gray-400 truncate">
+        <span>{{ TaskTypeNameEnum[getRecord.executeContent.type] }}</span>
+        <span class="mx-1">-</span>
+        <span>{{ TaskTargetNameEnum[getRecord.targetType] }}</span>
+      </div>
+    </div>
+    <div class="mt-4 flex justify-between items-center gap-3">
+      <Button size="small">
+        <div class="text-xs px-1">
+          <PlayCircleOutlined class="mr-1" />
+          <span>运行任务</span>
+        </div>
+      </Button>
+      <Tooltip title="最后运行时间:">
+        <div class="text-gray-400 text-xs truncate">
+          <span class="mr-2">间隔时间重复</span>
+          <span>三分钟前</span>
+        </div>
+      </Tooltip>
+    </div>
+
+    <section
+      v-if="deviceTaskCardMode"
+      class="border-t mt-4 pt-2 text-sm border-gray-100 flex justify-between text-gray-400"
+    >
+      <div>
+        <span>允许该设备</span>
+        <Tooltip title="设置是否允许当前设备定时执行任务。该选项不影响手动执行任务。">
+          <QuestionCircleOutlined class="ml-1" />
+        </Tooltip>
+      </div>
+      <div>
+        <Switch
+          size="small"
+          :loading="loading"
+          :checked="getCancelState"
+          @click="handleCancelTask"
+        />
+      </div>
+    </section>
+  </Card>
+</template>

+import { FormSchema } from '/@/components/Form';
+
+export enum FormFieldsEnum {
+  DEVICE_TYPE = 'targetType',
+  TASK_TYPE = 'taskType',
+  TASK_STATUS = 'state',
+}
+
+export enum TaskTargetEnum {
+  DEVICES = 'DEVICES',
+  PRODUCTS = 'PRODUCTS',
+  ALL = 'all',
+}
+
+export enum TaskTargetNameEnum {
+  DEVICES = '设备',
+  PRODUCTS = '产品',
+  ALL = '不限任务目标类型',
+}
+
+export enum TaskTypeEnum {
+  CUSTOM = 'CUSTOM',
+  MODBUS_RTU = 'MODBUS_RTU',
+}
+
+export enum TaskTypeNameEnum {
+  MODBUS_RTU = 'MODBUS_RTU轮询',
+  CUSTOM = '自定义数据下发',
+}
+
+export enum TaskStatusEnum {
+  DEACTIVATE,
+  NORMAL,
+}
+
+export enum TaskStatusNameEnum {
+  DEACTIVATE = '已停用',
+  NORMAL = '正常',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    label: '目标类型',
+    component: 'Select',
+    field: FormFieldsEnum.DEVICE_TYPE,
+    componentProps: {
+      options: [
+        { label: TaskTargetNameEnum.DEVICES, value: TaskTargetEnum.DEVICES },
+        { label: TaskTargetNameEnum.PRODUCTS, value: TaskTargetEnum.PRODUCTS },
+      ],
+      placeholder: '请选择目标类型',
+      getPopupContainer: () => document.body,
+    },
+  },
+  // {
+  //   label: '',
+  //   component: 'Select',
+  //   field: FormFieldsEnum.TASK_TYPE,
+  //   defaultValue: TaskTypeEnum.ALL,
+  //   componentProps: {
+  //     options: [
+  //       { label: TaskTypeNameEnum.CUSTOM, value: TaskTypeEnum.CUSTOM },
+  //       { label: TaskTypeNameEnum.MODBUS_RTU, value: TaskTypeEnum.MODBUS_RTU },
+  //     ],
+  //     getPopupContainer: () => document.body,
+  //   },
+  // },
+  {
+    label: '状态',
+    component: 'Select',
+    field: FormFieldsEnum.TASK_STATUS,
+    componentProps: {
+      options: [
+        { label: TaskStatusNameEnum.NORMAL, value: TaskStatusEnum.NORMAL },
+        { label: TaskStatusNameEnum.DEACTIVATE, value: TaskStatusEnum.DEACTIVATE },
+      ],
+      placeholder: '请选择状态',
+      getPopupContainer: () => document.body,
+    },
+  },
+];
+
+export enum PermissionEnum {
+  DELETE = 'delete',
+}
+
+export enum StateEnum {
+  CLOSE,
+  ENABLE,
+}

+<script setup lang="ts">
+  import { Button, List, Tooltip } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchemas } from './config';
+  import { TaskCard } from './components/TaskCard';
+  import { getTaskCenterList } from '/@/api/task';
+  import { ref } from 'vue';
+  import { onMounted } from 'vue';
+  import { DetailModal } from './components/DetailModal';
+  import { useModal } from '/@/components/Modal';
+  import { TaskRecordType } from '/@/api/task/model';
+  import { reactive } from 'vue';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { ModalParamsType } from '/#/utils';
+
+  const [registerModal, { openModal }] = useModal();
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: formSchemas,
+    baseColProps: { span: 8 },
+    compact: true,
+    showAdvancedButton: true,
+    labelWidth: 100,
+    submitFunc: async () => {
+      pagination.params = getFieldsValue();
+      getDataSource();
+    },
+  });
+
+  const pagination = reactive({
+    total: 10,
+    current: 1,
+    showQuickJumper: true,
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    params: {} as Recordable,
+  });
+
+  const dataSource = ref<TaskRecordType[]>([]);
+  const loading = ref(false);
+  const getDataSource = async () => {
+    try {
+      loading.value = true;
+      const { items } = await getTaskCenterList({ page: 1, pageSize: 10, ...pagination.params });
+      dataSource.value = items;
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handleEdit = (record: TaskRecordType) => {
+    openModal(true, {
+      record,
+      mode: DataActionModeEnum.UPDATE,
+    } as ModalParamsType);
+  };
+
+  const reload = () => getDataSource();
+
+  onMounted(() => {
+    getDataSource();
+  });
+</script>
+
+<template>
+  <PageWrapper class="container">
+    <section
+      class="bg-light-50 flex p-4 justify-between items-center x dark:text-gray-300 dark:bg-dark-900"
+    >
+      <div class="text-2xl">任务</div>
+      <Button
+        type="primary"
+        @click="openModal(true, { mode: DataActionModeEnum.CREATE } as ModalParamsType)"
+        >创建任务</Button
+      >
+    </section>
+    <section
+      class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
+    >
+      <BasicForm @register="registerForm" />
+    </section>
+    <section class="bg-light-50 mt-4 p-4 x dark:text-gray-300 dark:bg-dark-900">
+      <List
+        :dataSource="dataSource"
+        :pagination="pagination"
+        :grid="{ gutter: 16, xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 4, column: 4 }"
+        :loading="loading"
+      >
+        <template #header>
+          <section class="flex justify-end gap-4">
+            <!-- <CardLayoutButton /> -->
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getDataSource">
+                <ReloadOutlined :spin="loading" />
+              </Button>
+            </Tooltip>
+          </section>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item :key="item.id">
+            <TaskCard :record="item" :reload="reload" @edit="handleEdit" />
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <DetailModal @register="registerModal" :reload="reload" />
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped></style>

 import type { ComputedRef, Ref } from 'vue';
+import { DataActionModeEnum } from '/@/enums/toolEnum';
 
 export type DynamicProps<T> = {
   [P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>;
 };
+
+export interface ModalParamsType<T = Recordable> {
+  mode: DataActionModeEnum;
+  record: T;
+}