Merge branch 'fix/data-flow-transfer-table' into 'main_dev'

fix: 重构数据流转设备穿梭表格

See merge request yunteng/thingskit-front!924

@@ -18,7 +18,7 @@
   import { Button } from 'ant-design-vue';
   import { Button } from 'ant-design-vue';
   import { ref, unref } from 'vue';
   import { ref, unref } from 'vue';
 
 
-  const props = defineProps({
+  defineProps({
     saveContent: {
     saveContent: {
       type: Function,
       type: Function,
     },
     },
@@ -28,7 +28,7 @@
 
 
   const disabled = ref<boolean>(false);
   const disabled = ref<boolean>(false);
   const [register, { validateFields, setFieldsValue, resetFields, setProps }] = useForm({
   const [register, { validateFields, setFieldsValue, resetFields, setProps }] = useForm({
-    schemas: modeForm(props.saveContent, unref(disabled)),
+    schemas: modeForm(unref(disabled)),
     ...modelFormPublicConfig,
     ...modelFormPublicConfig,
   });
   });
 
 

@@ -37,7 +37,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { add } from '/@/components/Form/src/componentMap';
   import { add } from '/@/components/Form/src/componentMap';
   import TransferModal from '/@/components/Form/src/components/TransferModal.vue';
   import TransferModal from '/@/components/Form/src/components/TransferModal.vue';
-  import TransferTableModal from '/@/components/Form/src/components/TransferTableModal.vue';
+  import TransferTableModal from './TransferTableModal.vue';
   import { DataFlowMethod, DataFlowParams } from './index';
   import { DataFlowMethod, DataFlowParams } from './index';
   import { stepConfig, removeFieldByModeForm } from './config';
   import { stepConfig, removeFieldByModeForm } from './config';
   import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';
   import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';

+import { h, unref } from 'vue';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { FETCH_SETTING } from '/@/components/Table/src/const';
+import { DeviceStatusEnum, DeviceStatusNameEnum, DeviceTypeNameEnum } from './enum';
+import { Tag } from 'ant-design-vue';
+import { BasicColumn, BasicTableProps, FormSchema } from '/@/components/Table';
+import { useClipboard } from '@vueuse/core';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+export const deviceTableFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 9 },
+    componentProps: {
+      placeholder: '请输入设备名称',
+    },
+  },
+  {
+    field: 'deviceType',
+    label: '设备类型',
+    component: 'ApiSelect',
+    colProps: { span: 9 },
+    componentProps: {
+      placeholder: '请选择设备类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'device_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+];
+
+const { copied, copy } = useClipboard({ legacy: true });
+
+const { createMessage } = useMessage();
+
+export const deviceTableColumn: BasicColumn[] = [
+  {
+    title: '状态',
+    dataIndex: 'deviceState',
+    customRender: ({ text }) => {
+      return h(
+        Tag,
+        {
+          color:
+            text === DeviceStatusEnum.INACTIVE
+              ? 'warning'
+              : text === DeviceStatusEnum.OFFLINE
+              ? 'error'
+              : 'success',
+        },
+        () => DeviceStatusNameEnum[text]
+      );
+    },
+  },
+  {
+    title: '别名/设备名称',
+    dataIndex: 'name',
+    customRender: ({ record }) => {
+      return h('div', [
+        h(
+          'div',
+          {
+            class: 'cursor-pointer',
+            onClick: async () => {
+              await copy(record.name);
+              if (unref(copied)) createMessage.success('复制成功~');
+            },
+          },
+          [
+            record.alias && h('div', { class: 'truncate' }, record.alias),
+            h('div', { class: 'text-blue-400 truncate' }, record.name),
+          ]
+        ),
+      ]);
+    },
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    customRender: ({ text }) => {
+      return h(Tag, { color: 'success' }, () => DeviceTypeNameEnum[text]);
+    },
+  },
+  {
+    title: '所属产品',
+    dataIndex: 'deviceProfile.name',
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationDTO.name',
+  },
+];
+
+export const TransferTableProps: BasicTableProps = {
+  formConfig: {
+    layout: 'inline',
+    labelWidth: 80,
+    schemas: deviceTableFormSchema,
+    actionColOptions: { span: 6 },
+  },
+  size: 'small',
+  maxHeight: 240,
+  useSearchForm: true,
+  columns: deviceTableColumn,
+  showIndexColumn: false,
+  fetchSetting: FETCH_SETTING,
+} as BasicTableProps;

+<script lang="ts" setup>
+  import { Button, Tabs, Tag } from 'ant-design-vue';
+  import { remove, uniqBy, cloneDeep } from 'lodash';
+  import { computed, nextTick, onMounted, ref, unref, toRaw } from 'vue';
+  import {
+    deviceTableColumn,
+    deviceTableFormSchema,
+    TransferTableProps,
+  } from './TransferTableModal.config';
+  import { devicePage } from '/@/api/device/deviceManager';
+  import { DeviceModel as RawDeviceModal } from '/@/api/device/model/deviceModel';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { FETCH_SETTING } from '/@/components/Table/src/const';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { isFunction } from '/@/utils/is';
+
+  interface DeviceModel extends RawDeviceModal {
+    disabled?: boolean;
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      getPendingTableParams: (params: Recordable) => any;
+      getSelectedTableParams: (params: Recordable) => any;
+      value?: (Recordable & DeviceModel)[];
+      maxTagLength?: number;
+      openModalValidate?: () => boolean;
+      primaryKey?: string;
+      transformValue?: (list: Recordable[]) => any;
+      disabled?: boolean;
+    }>(),
+    {
+      value: () => [],
+      maxTagLength: 2,
+      primaryKey: 'tbDeviceId',
+    }
+  );
+
+  const emit = defineEmits(['update:value']);
+
+  enum Active {
+    PENDING = 'pending',
+    SELECTED = 'selected',
+  }
+
+  const activeKey = ref(Active.PENDING);
+
+  const { prefixCls } = useDesign('transfer-table-modal');
+
+  const pendingTotalList = ref<DeviceModel[]>([]);
+
+  const pendingConfirmQueue = ref<DeviceModel[]>([]);
+
+  const selectedTotalList = ref<DeviceModel[]>([]);
+
+  const selectedConfirmQueue = ref<DeviceModel[]>([]);
+
+  const getShowTagOptions = computed(() => {
+    const { maxTagLength } = props;
+    return unref(selectedTotalList).slice(0, maxTagLength);
+  });
+
+  const getSurplusOptionsLength = computed(() => {
+    const { maxTagLength } = props;
+    const surplusValue = unref(selectedTotalList).length - maxTagLength;
+    return surplusValue < 0 ? 0 : surplusValue;
+  });
+
+  // const pendingListCount = computed(() => {
+  //   const { value } = props;
+  //   const selectedList = unref(pendingTotalList).filter((item) => value.includes(item.id));
+  //   return unref(pendingTotalList).length - selectedList.length;
+  // });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const [regsterPendingTable, pendingTableActionType] = useTable({
+    ...TransferTableProps,
+    rowKey: props.primaryKey,
+    api: devicePage,
+    immediate: false,
+    clickToRowSelect: false,
+    beforeFetch: (params) => {
+      const { getPendingTableParams } = props;
+      const data = getPendingTableParams?.(params) || {};
+      Object.assign(params, { ...data, selected: false });
+      return params;
+    },
+    afterFetch: (list: DeviceModel[]) => {
+      pendingTotalList.value = list;
+      return unref(pendingTotalList);
+    },
+    rowSelection: {
+      type: 'checkbox',
+      getCheckboxProps: (record: DeviceModel) => {
+        const { primaryKey } = props;
+        const checked = unref(selectedTotalList).map((item) => item[primaryKey]);
+        return {
+          disabled: checked.includes(record[props.primaryKey]!),
+        };
+      },
+      onSelect: (_record: Recordable, _selected: boolean, selectedRows: DeviceModel[]) => {
+        const { primaryKey } = props;
+        const checked = unref(selectedTotalList).map((item) => item[primaryKey]);
+        pendingConfirmQueue.value = selectedRows.filter(
+          (item) => !checked.includes(item[primaryKey]!)
+        );
+      },
+      onSelectAll: (_selected: boolean, selectedRows: DeviceModel[]) => {
+        const { primaryKey } = props;
+        const checked = unref(selectedTotalList).map((item) => item[primaryKey]);
+        pendingConfirmQueue.value = selectedRows.filter(
+          (item) => !checked.includes(item[primaryKey]!)
+        );
+      },
+    },
+  });
+
+  const [registerSelectedTable, selectedTableActionType] = useTable({
+    formConfig: {
+      layout: 'inline',
+      labelWidth: 80,
+      schemas: deviceTableFormSchema,
+      actionColOptions: { span: 6 },
+    },
+    size: 'small',
+    maxHeight: 240,
+    useSearchForm: true,
+    columns: deviceTableColumn,
+    api: async (params) => {
+      const { name = '', deviceType = '' } = params || {};
+      const items = unref(selectedTotalList).filter((item) => {
+        return (
+          item.name.toUpperCase().includes(name.toUpperCase()) &&
+          item.deviceType.toUpperCase().includes(deviceType.toUpperCase())
+        );
+      });
+      return {
+        items,
+        total: items.length,
+      };
+    },
+    showIndexColumn: false,
+    pagination: { hideOnSinglePage: false },
+    fetchSetting: FETCH_SETTING,
+    rowKey: props.primaryKey,
+    dataSource: selectedTotalList,
+    clickToRowSelect: false,
+    beforeFetch: (params) => {
+      const { getSelectedTableParams } = props;
+      const data = getSelectedTableParams?.(params) || {};
+      Object.assign(params, { ...data, selected: false });
+      return params;
+    },
+    rowSelection: {
+      type: 'checkbox',
+      onSelect: (_record: Recordable, _selected: boolean, selectedRows: DeviceModel[]) => {
+        selectedConfirmQueue.value = selectedRows;
+      },
+      onSelectAll: (_selected: boolean, selectedRows: DeviceModel[]) => {
+        selectedConfirmQueue.value = selectedRows;
+      },
+    },
+  });
+
+  const handleTriggerUpdateValue = () => {
+    let list: Recordable[] = cloneDeep(toRaw(unref(selectedTotalList)));
+    const { transformValue } = props;
+    if (transformValue && isFunction(transformValue)) list = transformValue(list);
+
+    emit('update:value', list);
+  };
+
+  const handleSelected = () => {
+    const { primaryKey } = props;
+    const _list = [...unref(selectedTotalList), ...unref(pendingConfirmQueue)];
+    selectedTotalList.value = uniqBy(_list, primaryKey);
+    pendingConfirmQueue.value = [];
+
+    handleTriggerUpdateValue();
+    pendingTableActionType.setTableData([]);
+    nextTick(() => pendingTableActionType.setTableData(unref(pendingTotalList)));
+  };
+
+  const handleRemoveSelected = () => {
+    const { primaryKey } = props;
+    const selectedIds = unref(selectedConfirmQueue).map((selected) => selected[primaryKey]);
+    remove(unref(selectedTotalList), (item) => selectedIds.includes(item[primaryKey]));
+
+    handleTriggerUpdateValue();
+
+    selectedTableActionType.clearSelectedRowKeys();
+    selectedConfirmQueue.value = [];
+    selectedTableActionType.reload();
+  };
+
+  const handleCheckoutPanel = async () => {
+    await nextTick();
+    selectedTableActionType.reload();
+  };
+
+  const handleOpenModal = async () => {
+    const { openModalValidate } = props;
+
+    if (openModalValidate && isFunction(openModalValidate) && !openModalValidate()) return;
+
+    openModal(true);
+    await nextTick();
+    pendingTableActionType.reload();
+  };
+
+  onMounted(async () => {
+    const { getSelectedTableParams } = props;
+    const data = getSelectedTableParams?.({}) || {};
+    if (!data?.convertConfigId || !data?.deviceProfileIds) {
+      return;
+    }
+    const { items } = await devicePage({ page: 1, pageSize: 10, ...data, selected: true });
+    selectedTotalList.value = items;
+  });
+</script>
+
+<template>
+  <section>
+    <BasicModal
+      @register="registerModal"
+      title="穿梭表格"
+      width="60%"
+      :wrapClassName="prefixCls"
+      :showOkBtn="false"
+      cancelText="关闭"
+    >
+      <section class="bg-gray-100">
+        <Tabs v-model:active-key="activeKey" type="card" @change="handleCheckoutPanel">
+          <Tabs.TabPane :key="Active.PENDING">
+            <template #tab>
+              <div class="flex items-center justify-center">
+                <span>待选设备</span>
+                <!-- <Badge show-zero :count="pendingListCount" /> -->
+              </div>
+            </template>
+            <BasicTable @register="regsterPendingTable">
+              <template #toolbar>
+                <section class="flex w-full justify-end items-center">
+                  <!-- <Button type="primary">全选</Button> -->
+                  <div class="text-blue-400">
+                    <span class="mr-2">选择设备:</span>
+                    <span>{{ pendingConfirmQueue.length }}</span>
+                  </div>
+                </section>
+              </template>
+            </BasicTable>
+            <section class="flex justify-end px-4 pb-4">
+              <Button
+                type="primary"
+                @click="handleSelected"
+                :disabled="!pendingConfirmQueue.length"
+              >
+                <span>确定已选</span>
+              </Button>
+            </section>
+          </Tabs.TabPane>
+          <Tabs.TabPane :key="Active.SELECTED">
+            <template #tab>
+              <div class="flex items-center justify-center">
+                <span>已选设备</span>
+                <!-- <Badge show-zero :count="selectedTotalList.length" /> -->
+              </div>
+            </template>
+            <BasicTable @register="registerSelectedTable">
+              <template #toolbar>
+                <section class="flex w-full justify-end items-center">
+                  <div class="text-blue-400">
+                    <span class="mr-2">选择设备:</span>
+                    <span>{{ selectedConfirmQueue.length }}</span>
+                  </div>
+                </section>
+              </template>
+            </BasicTable>
+            <section class="flex justify-end px-4 pb-4">
+              <Button
+                type="primary"
+                :disabled="!selectedConfirmQueue.length"
+                @click="handleRemoveSelected"
+              >
+                <span>移除已选</span>
+              </Button>
+            </section>
+          </Tabs.TabPane>
+        </Tabs>
+      </section>
+    </BasicModal>
+    <Button @click="handleOpenModal" type="link" :disabled="disabled">
+      <span v-if="!selectedTotalList.length">选择设备</span>
+      <div v-if="selectedTotalList.length">
+        <Tag
+          class="!px-2 !py-1 !bg-gray-50 !border-gray-100"
+          v-for="item in getShowTagOptions"
+          :key="item[primaryKey]"
+        >
+          <span>
+            {{ item.alias || item.name }}
+          </span>
+        </Tag>
+        <Tag class="!px-2 !py-1 !bg-gray-50 !border-gray-100" v-if="getSurplusOptionsLength">
+          <span> +{{ getSurplusOptionsLength }}... </span>
+        </Tag>
+      </div>
+    </Button>
+  </section>
+</template>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-transfer-table-modal';
+
+  .@{prefix-cls} {
+    .vben-basic-table {
+      padding-top: 0;
+    }
+
+    .vben-basic-form > .ant-row {
+      width: 100%;
+    }
+
+    .ant-tabs-top-bar {
+      background-color: #fff;
+    }
+
+    .transfer-table-disabled-row {
+      :deep(.ant-checkbox) {
+        cursor: not-allowed;
+
+        .ant-checkbox-inner {
+          background-color: #f5f5f5;
+          border-color: #d9d9d9 !important;
+        }
+      }
+    }
+  }
+</style>

 import { FormSchema } from '/@/components/Form';
 import { FormSchema } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
-import { h, unref } from 'vue';
 import { getDeviceProfile } from '/@/api/alarm/position';
 import { getDeviceProfile } from '/@/api/alarm/position';
-import { BasicColumn, BasicTableProps } from '/@/components/Table';
-import { devicePage } from '/@/api/device/deviceManager';
-import { Tag } from 'ant-design-vue';
+import { BasicInfoFormField, DataSourceType } from '../enum';
 import { DeviceRecord } from '/@/api/device/model/deviceModel';
 import { DeviceRecord } from '/@/api/device/model/deviceModel';
-import { FETCH_SETTING } from '/@/components/Table/src/const';
-import { useMessage } from '/@/hooks/web/useMessage';
-import {
-  BasicInfoFormField,
-  DataSourceType,
-  DeviceStatusEnum,
-  DeviceStatusNameEnum,
-  DeviceTypeNameEnum,
-} from '../enum';
-import { useClipboard } from '@vueuse/core';
 
 
 export const stepConfig = ['选择流转方式', '完善配置参数'];
 export const stepConfig = ['选择流转方式', '完善配置参数'];
 
 
 export const removeFieldByModeForm = ['name', 'description'];
 export const removeFieldByModeForm = ['name', 'description'];
 
 
-//表单通用配置
-export const modelFormPublicConfig = {
-  labelWidth: 120,
-  actionColOptions: {
-    span: 14,
-  },
-  showResetButton: false,
-  showSubmitButton: false,
-};
-
 const handleGroupDevice = (options: DeviceRecord[]) => {
 const handleGroupDevice = (options: DeviceRecord[]) => {
   const map = new Map<string, string[]>();
   const map = new Map<string, string[]>();
   options.forEach((item) => {
   options.forEach((item) => {
@@ -46,114 +23,17 @@ const handleGroupDevice = (options: DeviceRecord[]) => {
   return value;
   return value;
 };
 };
 
 
-const deviceTableFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '设备名称',
-    component: 'Input',
-    colProps: { span: 9 },
-    componentProps: {
-      placeholder: '请输入设备名称',
-    },
-  },
-  {
-    field: 'deviceType',
-    label: '设备类型',
-    component: 'ApiSelect',
-    colProps: { span: 9 },
-    componentProps: {
-      placeholder: '请选择设备类型',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'device_type',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-  },
-];
-
-const { copied, copy } = useClipboard({ legacy: true });
-
-const { createMessage } = useMessage();
-
-const deviceTableColumn: BasicColumn[] = [
-  {
-    title: '状态',
-    dataIndex: 'deviceState',
-    customRender: ({ text }) => {
-      return h(
-        Tag,
-        {
-          color:
-            text === DeviceStatusEnum.INACTIVE
-              ? 'warning'
-              : text === DeviceStatusEnum.OFFLINE
-              ? 'error'
-              : 'success',
-        },
-        () => DeviceStatusNameEnum[text]
-      );
-    },
-  },
-  {
-    title: '别名/设备名称',
-    dataIndex: 'name',
-    customRender: ({ record }) => {
-      return h('div', [
-        h(
-          'div',
-          {
-            class: 'cursor-pointer',
-            onClick: async () => {
-              await copy(record.name);
-              if (unref(copied)) createMessage.success('复制成功~');
-            },
-          },
-          [
-            record.alias && h('div', { class: 'truncate' }, record.alias),
-            h('div', { class: 'text-blue-400 truncate' }, record.name),
-          ]
-        ),
-      ]);
-    },
-  },
-  {
-    title: '设备类型',
-    dataIndex: 'deviceType',
-    customRender: ({ text }) => {
-      return h(Tag, { color: 'success' }, () => DeviceTypeNameEnum[text]);
-    },
-  },
-  {
-    title: '所属产品',
-    dataIndex: 'deviceProfile.name',
-  },
-  {
-    title: '所属组织',
-    dataIndex: 'organizationDTO.name',
-  },
-];
-
-const TransferTableProps: BasicTableProps = {
-  formConfig: {
-    layout: 'inline',
-    labelWidth: 80,
-    schemas: deviceTableFormSchema,
-    actionColOptions: { span: 6 },
+//表单通用配置
+export const modelFormPublicConfig = {
+  labelWidth: 120,
+  actionColOptions: {
+    span: 14,
   },
   },
-  size: 'small',
-  maxHeight: 240,
-  useSearchForm: true,
-  columns: deviceTableColumn,
-  showIndexColumn: false,
-  fetchSetting: FETCH_SETTING,
-} as BasicTableProps;
+  showResetButton: false,
+  showSubmitButton: false,
+};
 
 
-export const modeForm = (
-  submitFn: Function | undefined,
-  disabled?: boolean | any
-): FormSchema[] => {
+export const modeForm = (disabled: boolean): FormSchema[] => {
   return [
   return [
     {
     {
       field: BasicInfoFormField.CONVERT_CONFIG_ID,
       field: BasicInfoFormField.CONVERT_CONFIG_ID,
@@ -218,70 +98,21 @@ export const modeForm = (
       rules: [{ required: true, message: '数据源设备为必选项', type: 'array' }],
       rules: [{ required: true, message: '数据源设备为必选项', type: 'array' }],
       componentProps: ({ formActionType }) => {
       componentProps: ({ formActionType }) => {
         const { getFieldsValue } = formActionType;
         const { getFieldsValue } = formActionType;
-        const values = getFieldsValue();
-        const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-        const devices = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_DEVICE);
-
         return {
         return {
-          labelField: 'name',
-          valueField: 'tbDeviceId',
-          primaryKey: 'tbDeviceId',
           disabled,
           disabled,
-          pendingTableProps: {
-            ...TransferTableProps,
-            api: devicePage,
-            beforeFetch: (params) => {
-              const values = getFieldsValue();
-              const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-              const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-              if (convertConfigId) {
-                Object.assign(params, { convertConfigId, selected: false });
-              }
-              return { ...params, deviceProfileIds };
-            },
-          } as BasicTableProps,
-          selectedTableProps: {
-            ...TransferTableProps,
-            // api
-            api: !!(convertConfigId && devices) ? devicePage : undefined,
-            beforeFetch: (params) => {
-              const values = getFieldsValue();
-              const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-              const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-              if (convertConfigId) {
-                Object.assign(params, { convertConfigId, selected: true });
-              }
-              return { ...params, deviceProfileIds };
-            },
-          } as BasicTableProps,
-          initSelectedOptions: async ({ setSelectedTotal }) => {
+          getPendingTableParams: () => {
             const values = getFieldsValue();
             const values = getFieldsValue();
             const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
             const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
             const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
             const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-            const devices = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_DEVICE);
-            if (convertConfigId && devices) {
-              const { items, total } = await devicePage({
-                page: 1,
-                pageSize: 10,
-                convertConfigId: values[BasicInfoFormField.CONVERT_CONFIG_ID],
-                deviceProfileIds,
-                selected: true,
-              });
-              setSelectedTotal(total);
-              return items;
-            }
-            return [];
+            return { convertConfigId, deviceProfileIds };
           },
           },
-          onSelectedAfter: async () => {
-            submitFn && (await submitFn(false));
-          },
-          onRemoveAfter: async ({ reloadSelected }) => {
-            submitFn && (await submitFn(false));
-            reloadSelected();
-          },
-          transformValue: (_selectedRowKeys: string[], selectedRows: DeviceRecord[]) => {
-            return handleGroupDevice(selectedRows);
+          getSelectedTableParams: () => {
+            const values = getFieldsValue();
+            const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
+            const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
+            return { convertConfigId, deviceProfileIds };
           },
           },
+          transformValue: handleGroupDevice,
         };
         };
       },
       },
     },
     },

+import { FormSchema } from '/@/components/Form';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { ref } from 'vue';
+import { isExistDataManagerNameApi } from '/@/api/datamanager/dataManagerApi';
+import { getDeviceProfile } from '/@/api/alarm/position';
+import { DeviceRecord } from '/@/api/device/model/deviceModel';
+
+const typeValue = ref('');
+export enum CredentialsEnum {
+  IS_ANONYMOUS = 'anonymous',
+  IS_BASIC = 'basic',
+  IS_PEM = 'pem',
+}
+export const isBasic = (type: string) => {
+  return type === CredentialsEnum.IS_BASIC;
+};
+export const isPem = (type: string) => {
+  return type === CredentialsEnum.IS_PEM;
+};
+
+export enum DataSourceType {
+  ALL = 'ALL',
+  PRODUCT = 'PRODUCTS',
+  DEVICE = 'DEVICES',
+}
+
+export enum BasicInfoFormField {
+  DATA_SOURCE_TYPE = 'datasourceType',
+  DATA_SOURCE_PRODUCT = 'datasourceProduct',
+  DATA_SOURCE_DEVICE = 'datasourceDevice',
+  CONVERT_CONFIG_ID = 'convertConfigId',
+}
+
+export enum DeviceStatusEnum {
+  OFFLINE = 'OFFLINE',
+  ONLINE = 'ONLINE',
+  INACTIVE = 'INACTIVE',
+}
+
+export enum DeviceStatusNameEnum {
+  OFFLINE = '离线',
+  ONLINE = '在线',
+  INACTIVE = '待激活',
+}
+
+export enum DeviceTypeEnum {
+  SENSOR = 'SENSOR',
+  DIRECT_CONNECTION = 'DIRECT_CONNECTION',
+  GATEWAY = 'GATEWAY',
+}
+
+export enum DeviceTypeNameEnum {
+  SENSOR = '网关子设备',
+  DIRECT_CONNECTION = '直连设备',
+  GATEWAY = '网关设备',
+}
+
+const handleGroupDevice = (options: DeviceRecord[]) => {
+  const map = new Map<string, string[]>();
+  options.forEach((item) => {
+    if (map.has(item.profileId)) {
+      const deviceList = map.get(item.profileId)!;
+      deviceList.push(item.tbDeviceId);
+    } else {
+      map.set(item.profileId, [item.tbDeviceId]);
+    }
+  });
+  const value = Array.from(map.entries()).map(([product, devices]) => ({ product, devices }));
+
+  return value;
+};
+
+export const modeForm = (): FormSchema[] => {
+  return [
+    {
+      field: BasicInfoFormField.CONVERT_CONFIG_ID,
+      label: '',
+      component: 'Input',
+      show: false,
+    },
+    {
+      field: BasicInfoFormField.DATA_SOURCE_TYPE,
+      label: '数据源',
+      component: 'RadioGroup',
+      defaultValue: DataSourceType.ALL,
+      componentProps: {
+        options: [
+          { label: '全部', value: DataSourceType.ALL },
+          { label: '产品', value: DataSourceType.PRODUCT },
+          { label: '设备', value: DataSourceType.DEVICE },
+        ],
+      },
+    },
+    {
+      field: BasicInfoFormField.DATA_SOURCE_PRODUCT,
+      label: '数据源产品',
+      component: 'TransferModal',
+      ifShow: ({ model }) => {
+        return model[BasicInfoFormField.DATA_SOURCE_TYPE] !== DataSourceType.ALL;
+      },
+      valueField: 'value',
+      changeEvent: 'update:value',
+      componentProps: ({ formActionType }) => {
+        const { setFieldsValue } = formActionType;
+        return {
+          api: getDeviceProfile,
+          labelField: 'name',
+          valueField: 'tbProfileId',
+          transferProps: {
+            listStyle: { height: '400px' },
+            showSearch: true,
+            filterOption: (inputValue: string, option: Recordable) => {
+              const upperCaseInputValue = inputValue.toUpperCase();
+              const upperCaseOptionValue = option.name.toUpperCase();
+              return upperCaseOptionValue.includes(upperCaseInputValue);
+            },
+          },
+          onChange: () => {
+            setFieldsValue({ [BasicInfoFormField.DATA_SOURCE_DEVICE]: [] });
+          },
+        };
+      },
+    },
+    {
+      field: BasicInfoFormField.DATA_SOURCE_DEVICE,
+      label: '数据源设备',
+      component: 'TransferTableModal',
+      ifShow: ({ model }) => {
+        return model[BasicInfoFormField.DATA_SOURCE_TYPE] === DataSourceType.DEVICE;
+      },
+      valueField: 'value',
+      changeEvent: 'update:value',
+      componentProps: ({ formActionType }) => {
+        const { getFieldsValue } = formActionType;
+        return {
+          getPendingTableParams: () => {
+            const values = getFieldsValue();
+            const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
+            const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
+            return { convertConfigId, deviceProfileIds };
+          },
+          getSelectedTableParams: () => {
+            const values = getFieldsValue();
+            const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
+            const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
+            return { convertConfigId, deviceProfileIds };
+          },
+          transformValue: handleGroupDevice,
+        };
+      },
+    },
+    {
+      field: 'type',
+      label: '转换方式',
+      component: 'ApiSelect',
+      required: true,
+      colProps: {
+        span: 24,
+      },
+      componentProps({}) {
+        return {
+          api: findDictItemByCode,
+          params: {
+            dictCode: 'convert_data_to',
+          },
+          labelField: 'itemText',
+          valueField: 'itemValue',
+          onChange(value) {
+            typeValue.value = value;
+          },
+        };
+      },
+    },
+    {
+      field: 'remark',
+      label: '描述',
+      colProps: { span: 24 },
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入描述',
+      },
+    },
+  ];
+};
+
+export const modeKafkaForm: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入名称',
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: true,
+          validator(_, value) {
+            return new Promise((resolve, reject) => {
+              if (value == '') {
+                reject('请输入名称');
+              } else {
+                resolve();
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'topicPattern',
+    label: '消息主题',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    defaultValue: 'my-topic',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入消息主题',
+    },
+  },
+  {
+    field: 'bootstrapServers',
+    label: '服务器',
+    colProps: { span: 12 },
+    component: 'Input',
+    defaultValue: 'localhost:9092',
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'localhost:9092',
+    },
+  },
+  {
+    field: 'retries',
+    label: '重连次数',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: 0,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'batchSize',
+    label: '生产者并发',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: 16384,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'linger',
+    label: '缓存时间',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: 0,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'bufferMemory',
+    label: '最大缓存',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: 33554432,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'acks',
+    component: 'Select',
+    label: '响应码',
+    colProps: { span: 12 },
+    defaultValue: '-1',
+    componentProps: {
+      placeholder: '请选择响应码',
+      options: [
+        { label: 'all', value: 'all' },
+        { label: '-1', value: '-1' },
+        { label: '0', value: '0' },
+        { label: '1', value: '1' },
+      ],
+    },
+  },
+  {
+    field: 'keySerializer',
+    label: '键序列化',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    defaultValue: 'org.apache.kafka.common.serialization.StringSerializer',
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'org.apache.kafka.common.serialization.StringSerializer',
+    },
+  },
+  {
+    field: 'valueSerializer',
+    label: '值序列化',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    defaultValue: 'org.apache.kafka.common.serialization.StringSerializer',
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'org.apache.kafka.common.serialization.StringSerializer',
+    },
+  },
+  {
+    field: 'otherProperties',
+    label: '其他属性',
+    colProps: { span: 24 },
+    component: 'JAddInput',
+    subLabel: '不可重复',
+  },
+  {
+    field: 'addMetadataKeyValuesAsKafkaHeaders',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '将消息的元数据以键值对的方式添加到Kafka消息头中',
+  },
+  {
+    field: 'kafkaHeadersCharset',
+    component: 'Select',
+    label: '字符集',
+    required: true,
+    colProps: { span: 12 },
+    defaultValue: 'UTF-8',
+    componentProps: {
+      placeholder: '请选择字符集编码',
+      options: [
+        { label: 'US-ASCII', value: 'US' },
+        { label: 'ISO-8859-1', value: 'ISO-8859-1' },
+        { label: 'UTF-8', value: 'UTF-8' },
+        { label: 'UTF-16BE', value: 'UTF-16BE' },
+        { label: 'UTF-16LE', value: 'UTF-16LE' },
+        { label: 'UTF-16', value: 'UTF-16' },
+      ],
+    },
+    ifShow: ({ values }) => {
+      return !!values.addMetadataKeyValuesAsKafkaHeaders;
+    },
+  },
+  {
+    field: 'description',
+    label: '说明',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      rows: 4,
+      placeholder: '请输入说明',
+    },
+  },
+];
+
+export const modeMqttForm: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    colProps: { span: 12 },
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入名称',
+    },
+  },
+  {
+    field: 'topicPattern',
+    label: '主题模式',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    defaultValue: 'my-topic',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Topic pattern',
+    },
+  },
+  {
+    field: 'host',
+    label: '主机',
+    colProps: { span: 12 },
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Host',
+    },
+  },
+  {
+    field: 'port',
+    label: '端口',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: 1883,
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Port',
+    },
+  },
+  {
+    field: 'connectTimeoutSec',
+    label: '连接超时（秒）',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: 10,
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Connection timeout (sec)',
+    },
+  },
+  {
+    field: 'clientId',
+    label: '客户端ID',
+    colProps: { span: 12 },
+    component: 'Input',
+    componentProps: ({ formActionType }) => {
+      const { updateSchema } = formActionType;
+      return {
+        onChange(e) {
+          if (!e.data) {
+            updateSchema({
+              field: 'appendClientIdSuffix',
+              show: false,
+            });
+          } else {
+            updateSchema({
+              field: 'appendClientIdSuffix',
+              show: true,
+            });
+          }
+        },
+        maxLength: 255,
+        placeholder: '请输入Client ID',
+      };
+    },
+  },
+  {
+    field: 'appendClientIdSuffix',
+    label: '',
+    colProps: { span: 12 },
+    defaultValue: false,
+    component: 'Checkbox',
+    renderComponentContent: '将服务ID作为后缀添加到客户端ID',
+    show: false,
+  },
+  {
+    field: 'cleanSession',
+    label: '是否启用',
+    colProps: { span: 12 },
+    defaultValue: true,
+    component: 'Checkbox',
+    renderComponentContent: '清除会话',
+  },
+  {
+    field: 'ssl',
+    label: '是否启用',
+    colProps: { span: 12 },
+    defaultValue: false,
+    component: 'Checkbox',
+    renderComponentContent: '启用SSL',
+  },
+  {
+    field: 'type',
+    component: 'Select',
+    label: '凭据类型',
+    colProps: { span: 12 },
+    defaultValue: 'anonymous',
+    componentProps: {
+      placeholder: '请选择Credentials',
+      options: [
+        { label: 'Anonymous', value: 'anonymous' },
+        { label: 'Basic', value: 'basic' },
+        { label: 'PEM', value: 'pem' },
+      ],
+    },
+  },
+  {
+    field: 'username',
+    label: '用户名',
+    colProps: { span: 12 },
+    component: 'Input',
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入用户名',
+    },
+    ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
+  },
+  {
+    field: 'password',
+    label: '密码',
+    colProps: { span: 12 },
+    component: 'InputPassword',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入密码',
+    },
+    ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
+  },
+  {
+    field: '4',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'uploadAdd1',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '11',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'showImg1',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '5',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'uploadAdd2',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '1111',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'showImg2',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '6',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'uploadAdd3',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '111111',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'showImg3',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: 'password',
+    label: '密码',
+    colProps: { span: 12 },
+    component: 'InputPassword',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入密码',
+    },
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: 'description',
+    label: '说明',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      rows: 4,
+      placeholder: '请输入说明',
+    },
+  },
+];
+
+export const modeRabbitMqForm: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入名称',
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: true,
+          validator(_, value) {
+            return new Promise((resolve, reject) => {
+              if (value == '') {
+                reject('请输入名称');
+              } else {
+                resolve();
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'exchangeNamePattern',
+    label: '交换名称模式',
+    colProps: { span: 12 },
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入模式',
+    },
+  },
+  {
+    field: 'routingKeyPattern',
+    label: '路由密钥模式',
+    colProps: { span: 12 },
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入模式',
+    },
+  },
+  {
+    field: 'messageProperties',
+    component: 'Select',
+    label: '消息属性',
+    colProps: { span: 12 },
+    componentProps: {
+      placeholder: '请选择消息属性',
+      options: [
+        { label: 'BASIC', value: 'BASIC' },
+        { label: 'TEXT_PLAIN', value: 'TEXT_PLAIN' },
+        { label: 'MINIMAL_BASIC', value: 'MINIMAL_BASIC' },
+        { label: 'MINIMAL_PERSISTENT_BASIC', value: 'MINIMAL_PERSISTENT_BASIC' },
+        { label: 'PERSISTENT_BASIC', value: 'PERSISTENT_BASIC' },
+        { label: 'PERSISTENT_TEXT_PLAIN', value: 'PERSISTENT_TEXT_PLAIN' },
+      ],
+    },
+  },
+  {
+    field: 'host',
+    label: '主机',
+    colProps: { span: 12 },
+    component: 'Input',
+    required: true,
+    defaultValue: 'localhost',
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'localhost',
+    },
+  },
+  {
+    field: 'port',
+    label: '端口',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: 5672,
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Port',
+    },
+  },
+  {
+    field: 'virtualHost',
+    label: '虚拟端口（以/开头）',
+    colProps: { span: 12 },
+    component: 'Input',
+    defaultValue: '/',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '/',
+    },
+  },
+  {
+    field: 'username',
+    label: '用户名',
+    colProps: { span: 12 },
+    component: 'Input',
+    defaultValue: 'guest',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入用户名',
+    },
+  },
+  {
+    field: 'password',
+    label: '密码',
+    colProps: { span: 12 },
+    component: 'InputPassword',
+    defaultValue: 'guest',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入密码',
+    },
+  },
+  {
+    field: 'automaticRecoveryEnabled',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '自动恢复',
+  },
+  {
+    field: 'connectionTimeout',
+    label: '连接超时（毫秒）',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: 60000,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Connection timeout (ms)',
+    },
+  },
+  {
+    field: 'handshakeTimeout',
+    label: '握手超时（毫秒）',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: 10000,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Handshake timeout (ms)',
+    },
+  },
+  {
+    field: 'clientProperties',
+    label: '客户端属性',
+    colProps: { span: 24 },
+    component: 'JAddInput',
+    subLabel: '不可重复',
+  },
+  {
+    field: 'description',
+    label: '说明',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      rows: 4,
+      placeholder: '请输入说明',
+    },
+  },
+];
+
+export const modeApiForm: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入名称',
+    },
+    dynamicRules: ({ values }) => {
+      return [
+        {
+          required: true,
+          validator(_, value) {
+            return new Promise((resolve, reject) => {
+              if (value == '') {
+                reject('请输入名称');
+              } else {
+                if (values.name) {
+                  isExistDataManagerNameApi({
+                    name: value,
+                    type:
+                      typeValue.value == ''
+                        ? 'org.thingsboard.rule.engine.rest.TbRestApiCallNode'
+                        : typeValue.value,
+                  }).then((data) => {
+                    if (data == true) {
+                      // createMessage.error('名称已存在');
+                      resolve();
+                    } else {
+                      resolve();
+                    }
+                  });
+                } else {
+                  resolve();
+                }
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'restEndpointUrlPattern',
+    label: '端点URL模式',
+    colProps: { span: 12 },
+    required: true,
+    defaultValue: 'http://localhost/api',
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Endpoint URL pattern',
+    },
+  },
+  {
+    field: 'requestMethod',
+    component: 'Select',
+    label: '请求方式',
+    colProps: { span: 12 },
+    defaultValue: 'POST',
+    componentProps: {
+      placeholder: '请选择Request method',
+      options: [
+        { label: 'GET', value: 'GET' },
+        { label: 'POST', value: 'POST' },
+        { label: 'PUT', value: 'PUT' },
+        { label: 'DELETE', value: 'DELETE' },
+      ],
+    },
+  },
+  {
+    field: 'enableProxy',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '启用代理',
+  },
+
+  {
+    field: 'proxyHost',
+    label: '代理主机',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'http或者https开头',
+    },
+    ifShow: ({ values }) => {
+      return !!values.enableProxy;
+    },
+  },
+  {
+    field: 'proxyPort',
+    label: '代理端口',
+    colProps: { span: 12 },
+    required: true,
+    component: 'InputNumber',
+    defaultValue: 0,
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'http或者https开头',
+    },
+    ifShow: ({ values }) => {
+      return !!values.enableProxy;
+    },
+  },
+  {
+    field: 'proxyUser',
+    label: '代理用户',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入代理用户',
+    },
+    ifShow: ({ values }) => {
+      return !!values.enableProxy;
+    },
+  },
+  {
+    field: 'proxyPassword',
+    label: '代理密码',
+    colProps: { span: 12 },
+    required: true,
+    component: 'InputPassword',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入代理密码',
+    },
+    ifShow: ({ values }) => {
+      return !!values.enableProxy;
+    },
+  },
+
+  {
+    field: 'useSystemProxyProperties',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '使用系统代理属性',
+  },
+  {
+    field: 'maxParallelRequestsCount',
+    label: '最大并行请求数',
+    colProps: { span: 12 },
+    required: true,
+    component: 'InputNumber',
+    defaultValue: 0,
+    componentProps: {
+      maxLength: 255,
+    },
+    ifShow: ({ values }) => {
+      return !!values.useSystemProxyProperties;
+    },
+  },
+  {
+    field: 'ignoreRequestBody',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '无请求正文',
+  },
+  {
+    field: 'readTimeoutMs',
+    label: '读取超时（毫秒）',
+    colProps: { span: 12 },
+    required: true,
+    component: 'InputNumber',
+    defaultValue: 0,
+    componentProps: {
+      maxLength: 255,
+    },
+    ifShow: ({ values }) => {
+      return !values.useSystemProxyProperties;
+    },
+  },
+  {
+    field: 'maxParallelRequestsCount',
+    label: '最大并行请求数',
+    colProps: { span: 12 },
+    required: true,
+    component: 'InputNumber',
+    defaultValue: 0,
+    componentProps: {
+      maxLength: 255,
+    },
+    ifShow: ({ values }) => {
+      return !values.useSystemProxyProperties;
+    },
+  },
+  {
+    field: 'headers',
+    label: 'Headers',
+    colProps: { span: 24 },
+    defaultValue: { 'Content-Type': 'application/json' },
+    component: 'JAddInput',
+    subLabel: '不可重复',
+  },
+
+  {
+    field: 'useRedisQueueForMsgPersistence',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '使用redis队列进行消息持久性',
+  },
+  {
+    field: 'trimQueue',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '修剪redis队列',
+    ifShow: ({ values }) => {
+      return !!values.useRedisQueueForMsgPersistence;
+    },
+  },
+  {
+    field: 'maxQueueSize',
+    label: 'Redis队列最大数',
+    colProps: { span: 12 },
+    required: true,
+    component: 'InputNumber',
+    defaultValue: 0,
+    componentProps: {
+      maxLength: 255,
+    },
+    ifShow: ({ values }) => {
+      return !!values.useRedisQueueForMsgPersistence;
+    },
+  },
+
+  {
+    field: 'type',
+    component: 'Select',
+    label: '凭据类型',
+    colProps: { span: 12 },
+    defaultValue: 'anonymous',
+    componentProps: {
+      placeholder: '请选择凭据类型',
+      options: [
+        { label: 'Anonymous', value: 'anonymous' },
+        { label: 'Basic', value: 'basic' },
+        { label: 'PEM', value: 'pem' },
+      ],
+    },
+  },
+  {
+    field: 'username',
+    label: '用户名',
+    colProps: { span: 12 },
+    component: 'Input',
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入用户名',
+    },
+    ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
+  },
+  {
+    field: 'password',
+    label: '密码',
+    colProps: { span: 12 },
+    component: 'InputPassword',
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入密码',
+    },
+    ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
+  },
+  {
+    field: '1',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'uploadAdd1',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '11',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'showImg1',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '1',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'uploadAdd2',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '1111',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'showImg2',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '1',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'uploadAdd3',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: '111111',
+    label: '',
+    colProps: { span: 24 },
+    component: 'Input',
+    slot: 'showImg3',
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    field: 'password',
+    label: '密码',
+    colProps: { span: 12 },
+    component: 'InputPassword',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入密码',
+    },
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+
+  {
+    field: 'description',
+    label: '说明',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      rows: 4,
+      placeholder: '请输入说明',
+    },
+  },
+];