Merge branch 'ft' into 'main_dev'

refactor: 重构数据流转

See merge request yunteng/thingskit-front!641

-<template>
-  <div>
-    <BasicModal
-      :showOkBtn="false"
-      :showCancelBtn="false"
-      v-bind="$attrs"
-      @register="registerDrawer"
-      :title="getTitle"
-      width="1000px"
-      @cancel="handleCancel"
-      destroy-on-close
-    >
-      <div class="step-form-form">
-        <a-steps :current="current">
-          <a-step title="选择流转方式" />
-          <a-step title="完善配置参数" />
-        </a-steps>
-      </div>
-      <div>
-        <div v-show="current === 0">
-          <TransferConfigMode
-            :save-content="handleSubmit"
-            ref="refTransferConfigMode"
-            @next="handleNext"
-          />
-        </div>
-        <div v-show="current === 1">
-          <TransferConfigParams
-            ref="refTransferConfigParams"
-            :getModeSelect="getModeSelectVal"
-            @prevSon="handlePrev"
-          />
-        </div>
-      </div>
-      <div style="float: right" v-if="isViewStatus">
-        <Button type="primary" @click="handleSubmit" v-show="current === 1" class="mr-2"
-          >确认</Button
-        >
-        <Button type="default" @click="handleCancel" class="mr-2">取消</Button>
-      </div>
-    </BasicModal>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, reactive, ref, unref, getCurrentInstance } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { Steps } from 'ant-design-vue';
-  import TransferConfigMode from './cpns/transferConfigMode.vue';
-  import TransferConfigParams from './cpns/transferConfigParams.vue';
-  import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { Button } from '/@/components/Button';
-  import { add } from '/@/components/Form/src/componentMap';
-  import TransferModal from '/@/components/Form/src/components/TransferModal.vue';
-  import TransferTableModal from '/@/components/Form/src/components/TransferTableModal.vue';
-
-  add('TransferModal', TransferModal);
-  add('TransferTableModal', TransferTableModal);
-
-  export default defineComponent({
-    name: 'ConfigDrawer',
-    components: {
-      BasicModal,
-      [Steps.name]: Steps,
-      [Steps.Step.name]: Steps.Step,
-      TransferConfigMode,
-      TransferConfigParams,
-      Button,
-    },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const isViewStatus = ref(false);
-      const { createMessage } = useMessage();
-      const { proxy } = getCurrentInstance() as any;
-      let allPostForm: any = reactive({});
-      const getNameObj = reactive({
-        name: '',
-      });
-      const getTypeObj = reactive({
-        type: '',
-        remark: '',
-      });
-      const additionalInfoV = {
-        additionalInfo: {
-          description: '',
-        },
-      };
-      const getSonFormValue: any = ref({});
-      const getModeSonFormValue: any = ref({});
-      const refTransferConfigParams = ref(null);
-      const refTransferConfigMode = ref(null);
-      const getModeSelectVal = ref({});
-      const isUpdate: any = ref(true);
-      const getTitle = ref('');
-      const current = ref(0);
-      const editPostId = ref('');
-      let isEdit = ref(true);
-      let noEditObj: any = reactive({});
-      const editType = reactive({
-        type: '',
-        configuration: {},
-        name: '',
-        additionalInfo: {},
-      });
-      const editNextType = reactive({
-        type: '',
-        configuration: {},
-        name: '',
-        remark: '',
-        datasourceType: '',
-        datasourceContent: {},
-      });
-      const editTypeFunc = (d) => {
-        editType.type = d.type;
-        editType.configuration = d.configuration;
-        editType.name = d.name;
-        editType.additionalInfo = d.additionalInfo;
-      };
-
-      const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
-        isUpdate.value = data?.isUpdate;
-        current.value = 0;
-        setModalProps({ confirmLoading: false });
-        function commonViewOrEditFunc() {
-          editPostId.value = data.record.id;
-          editNextType.type = data.record.type;
-          editNextType.configuration = data.record;
-          editNextType.name = data.record.name;
-          editNextType.remark = data.record.remark;
-          editNextType.datasourceType = data.record.datasourceType;
-          editNextType.datasourceContent = data.record.datasourceContent;
-          editNextType.convertConfigId = data.record.id;
-
-          proxy.$refs.refTransferConfigMode.setStepOneFieldsValueFunc(editNextType);
-        }
-        if (!unref(isUpdate)) {
-          isEdit.value = false;
-        } else {
-          isEdit.value = true;
-        }
-        if (isEdit.value) {
-          noEditObj = {
-            name: data.record?.name,
-            remark: data.record?.remark,
-            type: data.record?.type,
-            id: data.record.id,
-            configuration: data.record?.configuration,
-          };
-        }
-        switch (unref(isUpdate)) {
-          case 'view':
-            commonViewOrEditFunc();
-            isViewStatus.value = false;
-            getTitle.value = '查看流转配置';
-            break;
-          case true:
-            commonViewOrEditFunc();
-            isViewStatus.value = true;
-            getTitle.value = '编辑流转配置';
-            break;
-          case false:
-            proxy.$refs.refTransferConfigMode?.customResetStepOneFunc();
-            isViewStatus.value = true;
-            getTitle.value = '新增流转配置';
-            break;
-        }
-      });
-      const handleCancel = () => {
-        defineClearFunc();
-        closeModal();
-      };
-      const defineClearFunc = () => {
-        proxy.$refs.refTransferConfigMode?.customResetStepOneFunc();
-        proxy.$refs.refTransferConfigParams?.clearSonValueDataFunc();
-      };
-      const handleNext = (args) => {
-        current.value++;
-        getModeSelectVal.value = args;
-        if (unref(isUpdate)) {
-          isEdit.value = false;
-          try {
-            if (editNextType.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
-              editTypeFunc(editNextType.configuration);
-            } else if (editNextType.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {
-              editTypeFunc(editNextType.configuration);
-            } else if (editNextType.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {
-              editTypeFunc(editNextType.configuration);
-            } else if (editNextType.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {
-              editTypeFunc(editNextType.configuration);
-            }
-            proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
-          } catch (e) {
-            return e;
-          }
-        } else {
-          proxy.$refs.refTransferConfigParams.editSonValueDataFunc({});
-        }
-      };
-      const handlePrev = () => {
-        current.value--;
-        if (unref(isUpdate)) {
-          isEdit.value = true;
-          noEditObj = {
-            name: editNextType?.name,
-            remark: editNextType?.remark,
-            type: editNextType?.type,
-            id: editPostId?.value,
-            configuration: editNextType?.configuration?.configuration,
-          };
-        }
-      };
-
-      const commonFunc = () => {
-        try {
-          additionalInfoV.additionalInfo.description =
-            getSonFormValue.value.configuration.description;
-          delete getSonFormValue.value.configuration.description;
-          delete getSonFormValue.value.configuration.type;
-          delete getSonFormValue.value?.configuration?.name;
-        } catch (e) {
-          return e;
-        }
-      };
-      const addOrEditFunc = async () => {
-        if (!unref(isUpdate)) {
-          proxy.$refs.refTransferConfigParams.clearSonValueValidateFunc();
-        }
-        getModeSonFormValue.value = await proxy.$refs.refTransferConfigMode.getSonValueFunc();
-        getSonFormValue.value = await proxy.$refs.refTransferConfigParams.getSonValueDataFunc();
-
-        if (getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
-          getTypeObj.type = 'org.thingsboard.rule.engine.kafka.TbKafkaNode';
-        } else if (
-          getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode'
-        ) {
-          getTypeObj.type = 'org.thingsboard.rule.engine.mqtt.TbMqttNode';
-        } else if (
-          getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'
-        ) {
-          getTypeObj.type = 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode';
-        } else if (
-          getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode'
-        ) {
-          getTypeObj.type = 'org.thingsboard.rule.engine.rest.TbRestApiCallNode';
-        }
-        getTypeObj.remark = getModeSonFormValue.value.remark;
-        getNameObj.name = getSonFormValue.value?.configuration?.name;
-        commonFunc();
-        const id: any = {
-          id: unref(isUpdate) ? editPostId.value : '',
-        };
-        Object.assign(
-          allPostForm,
-          getTypeObj,
-          getSonFormValue.value,
-          getNameObj,
-          id,
-          additionalInfoV.additionalInfo.description ? additionalInfoV : {},
-          {
-            datasourceType: getModeSonFormValue.value.datasourceType,
-            datasourceContent: getModeSonFormValue.value.datasourceContent,
-          }
-        );
-        if (!unref(isUpdate)) {
-          delete allPostForm.id;
-        }
-      };
-      const setConfiguration = (record: Recordable) => {
-        const type = Reflect.get(record, 'type');
-        const configuration = Reflect.get(record, 'configuration');
-        const clientProperties = Reflect.get(configuration, 'clientProperties');
-        !clientProperties && (record.configuration.clientProperties = {});
-
-        if (
-          type === 'org.thingsboard.rule.engine.mqtt.TbMqttNode' ||
-          type === 'org.thingsboard.rule.engine.kafka.TbKafkaNode' ||
-          type === 'org.thingsboard.rule.engine.rest.TbRestApiCallNode'
-        ) {
-          Reflect.deleteProperty(configuration, 'clientProperties');
-        }
-
-        if (type === 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
-          const otherProperties = Reflect.get(configuration, 'otherProperties');
-          configuration.kafkaHeadersCharset = 'UTF-8';
-          !otherProperties && (record.configuration.otherProperties = {});
-        }
-
-        if (type === 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {
-          configuration.exchangeNamePattern = configuration.exchangeNamePattern || '';
-          configuration.routingKeyPattern = configuration.routingKeyPattern || '';
-        }
-      };
-
-      const handleSubmit = async (closeModalAfterSuccess = true) => {
-        try {
-          closeModalAfterSuccess && setModalProps({ confirmLoading: true });
-          if (!unref(isUpdate)) {
-            await addOrEditFunc();
-            if (allPostForm.name == undefined) {
-              return createMessage.error('请填写配置参数名称');
-            }
-            //验证属性新增了必填
-            const isApiHeaders =
-              allPostForm?.configuration?.headers ||
-              allPostForm?.configuration?.otherProperties ||
-              allPostForm?.configuration?.clientProperties;
-            if (isApiHeaders && Object.keys(isApiHeaders).includes('')) {
-              return createMessage.error('请填写属性');
-            }
-            if (isApiHeaders && Object.values(isApiHeaders).includes('')) {
-              return createMessage.error('请填写属性');
-            }
-            setConfiguration(allPostForm);
-            const res = await postAddConvertApi(allPostForm);
-            if (res) {
-              closeModalAfterSuccess && closeModal();
-              closeModalAfterSuccess && createMessage.success('数据流转新增成功');
-              setTimeout(() => {
-                emit('success');
-              }, 500);
-              closeModalAfterSuccess && defineClearFunc();
-            }
-          } else {
-            await addOrEditFunc();
-            if (!isEdit.value) {
-              //验证属性新增了必填
-              const isApiHeaders =
-                allPostForm?.configuration?.headers ||
-                allPostForm?.configuration?.otherProperties ||
-                allPostForm?.configuration?.clientProperties;
-              if (isApiHeaders && Object.keys(isApiHeaders).includes('')) {
-                return createMessage.error('请填写属性');
-              }
-              if (isApiHeaders && Object.values(isApiHeaders).includes('')) {
-                return createMessage.error('请填写属性');
-              }
-            }
-            Object.assign(noEditObj, getTypeObj, {
-              datasourceType: allPostForm.datasourceType,
-              datasourceContent: allPostForm.datasourceContent,
-            });
-            setConfiguration(allPostForm);
-            setConfiguration(noEditObj);
-            const res = await postAddConvertApi(isEdit.value ? noEditObj : allPostForm);
-            if (res) {
-              closeModalAfterSuccess && closeModal();
-              closeModalAfterSuccess && createMessage.success('数据流转编辑成功');
-              setTimeout(() => {
-                emit('success');
-              }, 500);
-              closeModalAfterSuccess && defineClearFunc();
-            }
-          }
-        } catch {
-        } finally {
-          setModalProps({ confirmLoading: false });
-        }
-      };
-      return {
-        handleCancel,
-        registerDrawer,
-        handleSubmit,
-        getTitle,
-        current,
-        handleNext,
-        handlePrev,
-        getModeSelectVal,
-        refTransferConfigParams,
-        refTransferConfigMode,
-        isViewStatus,
-      };
-    },
-  });
-</script>

+<template>
+  <div>
+    <BasicForm @register="register">
+      <template #uploadFilesSlot="{ model }">
+        <UploadFile
+          :url="credentialsFile.caCertFileName"
+          @fileUrlEmit="handleFileUrlEmitH"
+          v-show="model['type'] === CredentialsEnum.IS_PEM"
+        />
+        <div class="h-4"></div>
+        <UploadFile
+          :url="credentialsFile.certFileName"
+          @fileUrlEmit="handleFileUrlEmitC"
+          v-show="model['type'] === CredentialsEnum.IS_PEM"
+        />
+        <div class="h-4"></div>
+        <UploadFile
+          :url="credentialsFile.privateKeyFileName"
+          @fileUrlEmit="handleFileUrlEmitB"
+          v-show="model['type'] === CredentialsEnum.IS_PEM"
+        /> </template
+    ></BasicForm>
+  </div>
+</template>
+<script lang="ts" setup name="DataFlowMethodIsApi">
+  import { reactive } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { modeApiForm } from './config';
+  import { modelFormPublicConfig } from '../../../dataflowmodal/config';
+  import { UploadFile } from '../../../uploadfile';
+  import { CredentialsEnum } from '../mqtt/enum';
+
+  const credentialsFile = reactive({
+    caCertFileName: '',
+    certFileName: '',
+    privateKeyFileName: '',
+  });
+
+  const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
+    schemas: modeApiForm,
+    ...modelFormPublicConfig,
+  });
+
+  const handleFileUrlEmitH = (fileUrl) => (credentialsFile.caCertFileName = fileUrl);
+
+  const handleFileUrlEmitC = (fileUrl) => (credentialsFile.certFileName = fileUrl);
+
+  const handleFileUrlEmitB = (fileUrl) => (credentialsFile.privateKeyFileName = fileUrl);
+
+  const getValue = async () => {
+    const values = await validateFields();
+    if (!values) return;
+    const credentials = {
+      type: values['type'],
+      ...credentialsFile,
+    };
+    const mergeValues = {
+      ...values,
+      ...{ credentials },
+    };
+    return mergeValues;
+  };
+
+  const setValue = (value) => {
+    const { credentials } = value;
+    if (credentials) {
+      for (let i in credentials) Reflect.set(credentialsFile, i, credentials[i]);
+    }
+    setFieldsValue(value);
+  };
+
+  const resetValue = () => resetFields();
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</script>
+
+<style lang="less" scoped></style>

+import { FormSchema } from '/@/components/Form';
+import { isBasic, isPem } from '../../mqtt/enum';
+
+/**
+ * RestApi表单相关默认值配置
+ */
+class ApiFormPartialConfig {
+  static restEndpointUrlPattern = 'http://localhost/api'; //端点URL模式
+  static requestMethod = 'POST'; //请求方式
+  static proxyHost = true; //代理主机
+  static proxyPort = 0; //代理端口
+  static maxParallelRequestsCount = 0; //最大并行请求数
+  static readTimeoutMs = 0; //读取超时（毫秒）
+  static maxQueueSize = 0; //Redis队列最大数
+  static type = 'anonymous'; //凭据类型
+
+  //requestMethod Select options配置
+  static getRequestMethod() {
+    return [
+      { label: 'GET', value: 'GET' },
+      { label: 'POST', value: 'POST' },
+      { label: 'PUT', value: 'PUT' },
+      { label: 'DELETE', value: 'DELETE' },
+    ];
+  }
+
+  //凭据类型Select options配置
+  static getType() {
+    return [
+      { label: 'Anonymous', value: 'anonymous' },
+      { label: 'Basic', value: 'basic' },
+      { label: 'PEM', value: 'pem' },
+    ];
+  }
+}
+
+export const modeApiForm: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入名称',
+    },
+  },
+  {
+    field: 'restEndpointUrlPattern',
+    label: '端点URL模式',
+    colProps: { span: 12 },
+    required: true,
+    defaultValue: ApiFormPartialConfig.restEndpointUrlPattern,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Endpoint URL pattern',
+    },
+  },
+  {
+    field: 'requestMethod',
+    component: 'Select',
+    label: '请求方式',
+    colProps: { span: 12 },
+    defaultValue: ApiFormPartialConfig.requestMethod,
+    componentProps: {
+      placeholder: '请选择Request method',
+      options: ApiFormPartialConfig.getRequestMethod(),
+    },
+  },
+  {
+    field: 'enableProxy',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '启用代理',
+  },
+
+  {
+    field: 'proxyHost',
+    label: '代理主机',
+    colProps: { span: 12 },
+    required: ApiFormPartialConfig.proxyHost,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'http或者https开头',
+    },
+    ifShow: ({ values }) => {
+      return !!values.enableProxy;
+    },
+  },
+  {
+    field: 'proxyPort',
+    label: '代理端口',
+    colProps: { span: 12 },
+    required: true,
+    component: 'InputNumber',
+    defaultValue: ApiFormPartialConfig.proxyPort,
+    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: ApiFormPartialConfig.maxParallelRequestsCount,
+    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: ApiFormPartialConfig.readTimeoutMs,
+    componentProps: {
+      maxLength: 255,
+    },
+    ifShow: ({ values }) => {
+      return !values.useSystemProxyProperties;
+    },
+  },
+  {
+    field: 'maxParallelRequestsCount',
+    label: '最大并行请求数',
+    colProps: { span: 12 },
+    required: true,
+    component: 'InputNumber',
+    defaultValue: ApiFormPartialConfig.maxParallelRequestsCount,
+    componentProps: {
+      maxLength: 255,
+    },
+    ifShow: ({ values }) => {
+      return !values.useSystemProxyProperties;
+    },
+  },
+  {
+    field: 'headers',
+    label: 'Headers',
+    colProps: { span: 24 },
+    defaultValue: { 'Content-Type': 'application/json' },
+    component: 'JAddInput',
+  },
+
+  {
+    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: ApiFormPartialConfig.maxQueueSize,
+    componentProps: {
+      maxLength: 255,
+    },
+    ifShow: ({ values }) => {
+      return !!values.useRedisQueueForMsgPersistence;
+    },
+  },
+  {
+    field: 'type',
+    component: 'Select',
+    label: '凭据类型',
+    colProps: { span: 12 },
+    defaultValue: ApiFormPartialConfig.type,
+    componentProps: {
+      placeholder: '请选择凭据类型',
+      options: ApiFormPartialConfig.getType(),
+    },
+  },
+  {
+    field: 'uploadFiles',
+    component: 'Input',
+    label: '',
+    slot: 'uploadFilesSlot',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    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: '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: '请输入说明',
+    },
+  },
+];

+import DataFlowMethodIsApi from './DataFlowMethodIsApi.vue';
+
+export { DataFlowMethodIsApi };

+<template>
+  <div>
+    <BasicForm @register="register" />
+  </div>
+</template>
+<script lang="ts" setup name="DataFlowMethodIsKafka">
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { modelKafkaForm } from './config';
+  import { modelFormPublicConfig } from '../../../dataflowmodal/config';
+
+  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+    schemas: modelKafkaForm,
+    ...modelFormPublicConfig,
+  });
+
+  const getValue = async () => {
+    const values = await validate();
+    if (!values) return;
+    return values;
+  };
+
+  const setValue = (value) => setFieldsValue(value);
+
+  const resetValue = () => resetFields();
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</script>
+
+<style lang="less" scoped></style>

+import { FormSchema } from '/@/components/Form';
+
+/**
+ * Kafka表单相关默认值配置
+ */
+class KafkaFormPartialConfig {
+  static topicPattern = 'my-topic'; //消息主题默认值
+  static bootstrapServers = 'localhost:9092'; //服务器
+  static retries = 0; //重连次数
+  static batchSize = 16384; //生产者并发
+  static linger = 0; //缓存时间
+  static bufferMemory = 33554432; //最大缓存
+  static acks = '-1'; //响应码
+  static keySerializer = 'org.apache.kafka.common.serialization.StringSerializer'; //键序列化
+  static valueSerializer = 'org.apache.kafka.common.serialization.StringSerializer'; //值序列化
+  static kafkaHeadersCharset = 'UTF-8'; //字符集
+
+  //acks Select options配置
+  static getAcks() {
+    return [
+      { label: 'all', value: 'all' },
+      { label: '-1', value: '-1' },
+      { label: '0', value: '0' },
+      { label: '1', value: '1' },
+    ];
+  }
+  //kafkaHeadersCharset Select options配置
+  static getkafkaHeadersCharset() {
+    return [
+      { 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' },
+    ];
+  }
+}
+
+export const modelKafkaForm: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入名称',
+    },
+  },
+  {
+    field: 'topicPattern',
+    label: '消息主题',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    defaultValue: KafkaFormPartialConfig.topicPattern,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入消息主题',
+    },
+  },
+  {
+    field: 'bootstrapServers',
+    label: '服务器',
+    colProps: { span: 12 },
+    component: 'Input',
+    defaultValue: KafkaFormPartialConfig.bootstrapServers,
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'localhost:9092',
+    },
+  },
+  {
+    field: 'retries',
+    label: '重连次数',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: KafkaFormPartialConfig.retries,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'batchSize',
+    label: '生产者并发',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: KafkaFormPartialConfig.batchSize,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'linger',
+    label: '缓存时间',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: KafkaFormPartialConfig.linger,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'bufferMemory',
+    label: '最大缓存',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: KafkaFormPartialConfig.bufferMemory,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'acks',
+    component: 'Select',
+    label: '响应码',
+    colProps: { span: 12 },
+    defaultValue: KafkaFormPartialConfig.acks,
+    componentProps: {
+      placeholder: '请选择响应码',
+      options: KafkaFormPartialConfig.getAcks(),
+    },
+  },
+  {
+    field: 'keySerializer',
+    label: '键序列化',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    defaultValue: KafkaFormPartialConfig.keySerializer,
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'org.apache.kafka.common.serialization.StringSerializer',
+    },
+  },
+  {
+    field: 'valueSerializer',
+    label: '值序列化',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    defaultValue: KafkaFormPartialConfig.valueSerializer,
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'org.apache.kafka.common.serialization.StringSerializer',
+    },
+  },
+  {
+    field: 'otherProperties',
+    label: '其他属性',
+    colProps: { span: 24 },
+    component: 'JAddInput',
+  },
+  {
+    field: 'addMetadataKeyValuesAsKafkaHeaders',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '将消息的元数据以键值对的方式添加到Kafka消息头中',
+  },
+  {
+    field: 'kafkaHeadersCharset',
+    component: 'Select',
+    label: '字符集',
+    required: true,
+    colProps: { span: 12 },
+    defaultValue: KafkaFormPartialConfig.kafkaHeadersCharset,
+    componentProps: {
+      placeholder: '请选择字符集编码',
+      options: KafkaFormPartialConfig.getkafkaHeadersCharset(),
+    },
+    ifShow: ({ values }) => {
+      return !!values.addMetadataKeyValuesAsKafkaHeaders;
+    },
+  },
+  {
+    field: 'description',
+    label: '说明',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      rows: 4,
+      placeholder: '请输入说明',
+    },
+  },
+];

+import DataFlowMethodIsKafka from './DataFlowMethodIsKafka.vue';
+
+export { DataFlowMethodIsKafka };

+<template>
+  <div>
+    <BasicForm @register="register">
+      <template #uploadFilesSlot="{ model }">
+        <UploadFile
+          :url="credentialsFile.caCertFileName"
+          @fileUrlEmit="handleFileUrlEmitH"
+          v-show="model['type'] === CredentialsEnum.IS_PEM"
+        />
+        <div class="h-4"></div>
+        <UploadFile
+          :url="credentialsFile.certFileName"
+          @fileUrlEmit="handleFileUrlEmitC"
+          v-show="model['type'] === CredentialsEnum.IS_PEM"
+        />
+        <div class="h-4"></div>
+        <UploadFile
+          :url="credentialsFile.privateKeyFileName"
+          @fileUrlEmit="handleFileUrlEmitB"
+          v-show="model['type'] === CredentialsEnum.IS_PEM"
+        />
+      </template>
+    </BasicForm>
+  </div>
+</template>
+<script lang="ts" setup name="DataFlowMethodIsMqtt">
+  import { reactive } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { modeMqttForm } from './config';
+  import { UploadFile } from '../../../uploadfile';
+  import { CredentialsEnum } from './enum';
+  import { modelFormPublicConfig } from '../../../dataflowmodal/config';
+
+  const credentialsFile = reactive({
+    caCertFileName: '',
+    certFileName: '',
+    privateKeyFileName: '',
+  });
+
+  const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
+    schemas: modeMqttForm,
+    ...modelFormPublicConfig,
+  });
+
+  const handleFileUrlEmitH = (fileUrl) => (credentialsFile.caCertFileName = fileUrl);
+
+  const handleFileUrlEmitC = (fileUrl) => (credentialsFile.certFileName = fileUrl);
+
+  const handleFileUrlEmitB = (fileUrl) => (credentialsFile.privateKeyFileName = fileUrl);
+
+  const getValue = async () => {
+    const values = await validateFields();
+    if (!values) return;
+    const credentials = {
+      type: values['type'],
+      ...credentialsFile,
+    };
+    const mergeValues = {
+      ...values,
+      ...{ credentials },
+    };
+    return mergeValues;
+  };
+
+  const setValue = (value) => {
+    const { credentials } = value;
+    if (credentials) {
+      for (let i in credentials) Reflect.set(credentialsFile, i, credentials[i]);
+    }
+    setFieldsValue(value);
+  };
+
+  const resetValue = () => resetFields();
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</script>
+
+<style lang="less" scoped></style>

+import { FormSchema } from '/@/components/Form';
+import { isBasic, isPem } from '../enum';
+
+/**
+ * Mqtt表单相关默认值配置
+ */
+class MqttFormPartialConfig {
+  static topicPattern = 'my-topic'; //消息主题默认值
+  static port = 1883; //端口
+  static connectTimeoutSec = 10; //连接超时（秒）
+  static appendClientIdSuffix = false; //appendClientIdSuffix
+  static cleanSession = true; //cleanSession
+  static ssl = false; //ssl
+  static type = 'anonymous'; //凭据类型
+
+  //anonymous Select options配置
+  static getType() {
+    return [
+      { label: 'Anonymous', value: 'anonymous' },
+      { label: 'Basic', value: 'basic' },
+      { label: 'PEM', value: 'pem' },
+    ];
+  }
+}
+
+export const modeMqttForm: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    colProps: { span: 12 },
+    component: 'Input',
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入名称',
+    },
+  },
+  {
+    field: 'topicPattern',
+    label: '主题模式',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    defaultValue: MqttFormPartialConfig.topicPattern,
+    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: MqttFormPartialConfig.port,
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Port',
+    },
+  },
+  {
+    field: 'connectTimeoutSec',
+    label: '连接超时（秒）',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: MqttFormPartialConfig.connectTimeoutSec,
+    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) {
+          const updateSchemaShowAppendClientIdSuffix = (show) => {
+            updateSchema({
+              field: 'appendClientIdSuffix',
+              show,
+            });
+          };
+          if (!e.data) updateSchemaShowAppendClientIdSuffix(false);
+          else {
+            updateSchemaShowAppendClientIdSuffix(true);
+          }
+        },
+        maxLength: 255,
+        placeholder: '请输入Client ID',
+      };
+    },
+  },
+  {
+    field: 'appendClientIdSuffix',
+    label: '',
+    colProps: { span: 12 },
+    defaultValue: MqttFormPartialConfig.appendClientIdSuffix,
+    component: 'Checkbox',
+    renderComponentContent: '将服务ID作为后缀添加到客户端ID',
+    show: false,
+  },
+  {
+    field: 'cleanSession',
+    label: '是否启用',
+    colProps: { span: 12 },
+    defaultValue: MqttFormPartialConfig.cleanSession,
+    component: 'Checkbox',
+    renderComponentContent: '清除会话',
+  },
+  {
+    field: 'ssl',
+    label: '是否启用',
+    colProps: { span: 12 },
+    defaultValue: MqttFormPartialConfig.ssl,
+    component: 'Checkbox',
+    renderComponentContent: '启用SSL',
+  },
+  {
+    field: 'type',
+    component: 'Select',
+    label: '凭据类型',
+    colProps: { span: 12 },
+    defaultValue: MqttFormPartialConfig.type,
+    componentProps: {
+      placeholder: '请选择Credentials',
+      options: MqttFormPartialConfig.getType(),
+    },
+  },
+  {
+    field: 'uploadFiles',
+    component: 'Input',
+    label: '',
+    slot: 'uploadFilesSlot',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
+  },
+  {
+    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: '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: '请输入说明',
+    },
+  },
+];

+/**
+ * Mqtt相关枚举配置项
+ */
+
+//凭据类型枚举配置项
+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;
+};

+import DataFlowMethodIsMqtt from './DataFlowMethodIsMqtt.vue';
+
+export { DataFlowMethodIsMqtt };

+<template>
+  <div>
+    <BasicForm @register="register" />
+  </div>
+</template>
+<script lang="ts" setup name="DataFlowMethodIsRabbitMq">
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { modeRabbitMqForm } from './config';
+  import { modelFormPublicConfig } from '../../../dataflowmodal/config';
+
+  const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
+    schemas: modeRabbitMqForm,
+    ...modelFormPublicConfig,
+  });
+
+  const getValue = async () => {
+    const values = await validateFields();
+    if (!values) return;
+    return values;
+  };
+
+  const setValue = (value) => setFieldsValue(value);
+
+  const resetValue = () => resetFields();
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</script>
+<style lang="less" scoped></style>

+import { FormSchema } from '/@/components/Form';
+
+/**
+ * RabbitMq表单相关默认值配置
+ */
+class RabbitMqFormPartialConfig {
+  static topicPattern = 'my-topic'; //消息主题默认值
+  static host = true; //主机
+  static port = 5672; //端口
+  static virtualHost = '/'; //虚拟端口（以/开头）
+  static username = 'guest'; //用户名
+  static password = 'guest'; //密码
+  static connectionTimeout = 60000; //连接超时（毫秒）
+  static handshakeTimeout = 10000; //握手超时（毫秒）
+
+  //anonymous Select options配置
+  static getMessageProperties() {
+    return [
+      { 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' },
+    ];
+  }
+}
+
+export const modeRabbitMqForm: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    colProps: { span: 12 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入名称',
+    },
+  },
+  {
+    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: RabbitMqFormPartialConfig.getMessageProperties(),
+    },
+  },
+  {
+    field: 'host',
+    label: '主机',
+    colProps: { span: 12 },
+    component: 'Input',
+    required: RabbitMqFormPartialConfig.host,
+    defaultValue: 'localhost',
+    componentProps: {
+      maxLength: 255,
+      placeholder: 'localhost',
+    },
+  },
+  {
+    field: 'port',
+    label: '端口',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: RabbitMqFormPartialConfig.port,
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Port',
+    },
+  },
+  {
+    field: 'virtualHost',
+    label: '虚拟端口',
+    colProps: { span: 12 },
+    component: 'Input',
+    defaultValue: RabbitMqFormPartialConfig.virtualHost,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '/',
+    },
+  },
+  {
+    field: 'username',
+    label: '用户名',
+    colProps: { span: 12 },
+    component: 'Input',
+    defaultValue: RabbitMqFormPartialConfig.username,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入用户名',
+    },
+  },
+  {
+    field: 'password',
+    label: '密码',
+    colProps: { span: 12 },
+    component: 'InputPassword',
+    defaultValue: RabbitMqFormPartialConfig.password,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入密码',
+    },
+  },
+  {
+    field: 'automaticRecoveryEnabled',
+    label: '是否启用',
+    colProps: { span: 12 },
+    component: 'Checkbox',
+    renderComponentContent: '自动恢复',
+  },
+  {
+    field: 'connectionTimeout',
+    label: '连接超时（毫秒）',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: RabbitMqFormPartialConfig.connectionTimeout,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Connection timeout (ms)',
+    },
+  },
+  {
+    field: 'handshakeTimeout',
+    label: '握手超时（毫秒）',
+    colProps: { span: 12 },
+    component: 'InputNumber',
+    defaultValue: RabbitMqFormPartialConfig.handshakeTimeout,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入Handshake timeout (ms)',
+    },
+  },
+  {
+    field: 'clientProperties',
+    label: '客户端属性',
+    colProps: { span: 24 },
+    component: 'JAddInput',
+  },
+  {
+    field: 'description',
+    label: '说明',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      rows: 4,
+      placeholder: '请输入说明',
+    },
+  },
+];

+import DataFlowMethodIsRabbitMq from './DataFlowMethodIsRabbitMq.vue';
+
+export { DataFlowMethodIsRabbitMq };

+<template>
+  <div class="data-flow-method">
+    <BasicForm @register="register" />
+    <Button
+      type="primary"
+      class="data-flow-method-button"
+      @click="currentDataFlowMethodHanleNextStep"
+      >下一步</Button
+    >
+  </div>
+</template>
+
+<script lang="ts" setup name="DataFlowMethod">
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { modeForm, modelFormPublicConfig } from './config';
+  import { BasicInfoFormField } from './enum';
+  import { BasicInfoRecord } from './types';
+  import { Button } from 'ant-design-vue';
+
+  const props = defineProps({
+    saveContent: {
+      type: Function,
+    },
+  });
+
+  const emit = defineEmits(['currentDataFlowMethodEmitNext']);
+
+  const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
+    schemas: modeForm(props.saveContent),
+    ...modelFormPublicConfig,
+  });
+
+  const getValue = async () => {
+    const record = (await validateFields()) || {};
+    const { type, remark } = record;
+    const datasourceType = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_TYPE);
+    const convertDevices = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_DEVICE);
+    const convertProducts = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_PRODUCT);
+    return {
+      type,
+      remark,
+      datasourceType,
+      datasourceContent: {
+        convertProducts,
+        convertDevices,
+      } as unknown as BasicInfoRecord,
+    };
+  };
+
+  const setValue = (record: Recordable) => {
+    const value = {
+      ...record,
+      [BasicInfoFormField.DATA_SOURCE_PRODUCT]: record?.datasourceContent?.convertProducts || [],
+      [BasicInfoFormField.DATA_SOURCE_DEVICE]: record?.datasourceContent?.convertDevices,
+      [BasicInfoFormField.CONVERT_CONFIG_ID]: record?.id,
+    };
+    setFieldsValue(value);
+  };
+
+  const currentDataFlowMethodHanleNextStep = () => {
+    emit('currentDataFlowMethodEmitNext', getValue());
+  };
+
+  const resetValue = () => resetFields();
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</script>
+<style lang="less" scoped>
+  .data-flow-method {
+    margin: 0 auto;
+    width: 600px;
+
+    .data-flow-method-button {
+      position: absolute;
+      bottom: 10%;
+      right: 50%;
+      transform: translateX(50%);
+    }
+  }
+</style>

+<template>
+  <div>
+    <BasicModal
+      width="1000px"
+      v-bind="$attrs"
+      @register="registerDrawer"
+      @ok="handleSubmit"
+      destroy-on-close
+      @cancel="resetValue"
+    >
+      <div>
+        <a-steps :current="currentStep">
+          <a-step v-for="(item, index) in stepConfig" :title="item" :key="index" />
+        </a-steps>
+      </div>
+      <div>
+        <!-- 选择流转方式 -->
+        <DataFlowMethod
+          ref="dataFlowMethodRef"
+          v-show="currentStep === 0"
+          :save-content="handleSubmit"
+          @currentDataFlowMethodEmitNext="handleNextDataFlowParams"
+        />
+        <!-- 完善配置参数 -->
+        <DataFlowParams
+          ref="dataFlowParamsRef"
+          v-show="currentStep === 1"
+          :dataFlowType="dataFlowType"
+          @currentDataFlowParamsEmitPrevStep="handlePrevDataFlowMethod"
+        />
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts" setup name="DataFlowModal">
+  import { ref, nextTick, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { add } from '/@/components/Form/src/componentMap';
+  import TransferModal from '/@/components/Form/src/components/TransferModal.vue';
+  import TransferTableModal from '/@/components/Form/src/components/TransferTableModal.vue';
+  import { DataFlowMethod, DataFlowParams } from './index';
+  import { stepConfig, removeFieldByModeForm } from './config';
+  import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUtil } from '../../hooks/index.hook';
+  import { BusinessDataFlowTextEnum } from '../../enum';
+
+  add('TransferModal', TransferModal);
+
+  add('TransferTableModal', TransferTableModal);
+
+  const emit = defineEmits(['success', 'register']);
+
+  const { hasEditOrView, modalProps, getValue, validateOtherProperity } = useUtil();
+
+  const { createMessage } = useMessage();
+
+  const currentStep = ref(0);
+
+  const dataFlowType = ref('');
+
+  const dataFlowMethodRef = ref<InstanceType<typeof DataFlowMethod>>();
+
+  const dataFlowParamsRef = ref<InstanceType<typeof DataFlowParams>>();
+
+  const businessText = ref('');
+
+  const restData = reactive({
+    data: {},
+  });
+
+  const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await nextTick();
+    resetValue();
+    const { text, record } = data;
+    businessText.value = text;
+    restData.data = record;
+    setModalProps(modalProps(businessText.value));
+    if (!record) return;
+    dataFlowType.value = record?.type;
+    dataFlowMethodRef.value?.setValue(record);
+    setValue(record);
+  });
+
+  const handleSubmit = async (closeModalAfterSuccess = true) => {
+    try {
+      closeModalAfterSuccess && setModalProps({ confirmLoading: true });
+      const getDataFlowMethod = await dataFlowMethodRef.value?.getValue();
+      const { name, description, ...getDataFlowParams } = await dataFlowParamsRef.value?.getValue();
+      removeFieldByModeForm.forEach((item) => {
+        Reflect.deleteProperty(getDataFlowParams, item);
+      });
+      validateOtherProperity(
+        getDataFlowParams?.headers,
+        getDataFlowParams?.otherProperties,
+        getDataFlowParams?.clientProperties
+      );
+      const data = getValue(description, name, getDataFlowMethod, getDataFlowParams);
+      const rest = await postAddConvertApi({ ...restData.data, ...data });
+      if (rest) {
+        closeModalAfterSuccess && createMessage.success(`${businessText.value}成功`);
+        closeModalAfterSuccess && closeModal();
+        closeModalAfterSuccess && resetValue();
+        //fix 弹窗关闭时闪动问题
+        setTimeout(() => {
+          emit('success');
+        }, 100);
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  };
+
+  //设置配置参数
+  const setValue = (record) => {
+    dataFlowParamsRef.value?.setValue({
+      ...record,
+      ...record?.configuration,
+      name: record?.name,
+      description: record?.additionalInfo?.description,
+    });
+  };
+
+  //下一步
+  const handleNextDataFlowParams = async (value) => {
+    value
+      .then(async (res) => {
+        currentStep.value = 1;
+        const { type } = res;
+        dataFlowType.value = type;
+        await nextTick();
+        if (hasEditOrView(businessText.value)) {
+          setValue(restData.data);
+        }
+        if (businessText.value === BusinessDataFlowTextEnum.BUSINESS_MODAL_VIEW_TEXT) {
+          setModalProps({ showOkBtn: false });
+        } else {
+          setModalProps({ showOkBtn: true });
+        }
+      })
+      .catch(() => {
+        return;
+      });
+  };
+
+  //上一步
+  const handlePrevDataFlowMethod = (value) => {
+    currentStep.value = value;
+    setModalProps({ showOkBtn: false });
+    if (hasEditOrView(businessText.value)) {
+      setValue(restData.data);
+    }
+  };
+
+  const resetValue = () => {
+    currentStep.value = 0;
+    dataFlowMethodRef.value?.resetValue();
+    dataFlowParamsRef.value?.resetValue();
+  };
+</script>

+<template>
+  <div class="data-flow-params">
+    <div>
+      <DataFlowMethodIsKafka
+        ref="dataFlowMethodIsKafkaRef"
+        v-show="dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_KAFKA"
+      />
+      <DataFlowMethodIsMqtt
+        ref="dataFlowMethodIsMqttRef"
+        v-show="dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_MQTT"
+      />
+      <DataFlowMethodIsRabbitMq
+        ref="dataFlowMethodIsRabbitMqRef"
+        v-show="dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_RABBITMQ"
+      />
+      <DataFlowMethodIsApi
+        ref="dataFlowMethodIsApiRef"
+        v-show="dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_REST_API"
+      />
+    </div>
+    <Button
+      type="primary"
+      class="data-flow-params-button"
+      @click="currentDataFlowParamsHanlePrevStep"
+      >上一步</Button
+    >
+  </div>
+</template>
+<script lang="ts" setup="DataFlowParams">
+  import { ref, nextTick } from 'vue';
+  import { DataFlowMethodIsApi } from '../dataflowmethod/components/api';
+  import { DataFlowMethodIsKafka } from '../dataflowmethod/components/kafka';
+  import { DataFlowMethodIsMqtt } from '../dataflowmethod/components/mqtt';
+  import { DataFlowMethodIsRabbitMq } from '../dataflowmethod/components/rabbitmq';
+  import { BusinessDataFlowMethodEnum } from '../../enum';
+  import { Button } from 'ant-design-vue';
+
+  const props = defineProps({
+    dataFlowType: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const emit = defineEmits(['currentDataFlowParamsEmitPrevStep']);
+
+  const dataFlowMethodIsApiRef = ref<InstanceType<typeof DataFlowMethodIsApi>>();
+
+  const dataFlowMethodIsKafkaRef = ref<InstanceType<typeof DataFlowMethodIsKafka>>();
+
+  const dataFlowMethodIsMqttRef = ref<InstanceType<typeof DataFlowMethodIsMqtt>>();
+
+  const dataFlowMethodIsRabbitMqRef = ref<InstanceType<typeof DataFlowMethodIsRabbitMq>>();
+
+  const currentDataFlowParamsHanlePrevStep = () => {
+    emit('currentDataFlowParamsEmitPrevStep', 0);
+  };
+
+  //表单配置项（kafka、mqtt、rabbitmq、restapi）
+  const dataFlowTypeGetForm = [
+    [
+      (dataFlowType) => dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_KAFKA,
+      () => dataFlowMethodIsKafkaRef.value?.getValue(),
+      (value) => dataFlowMethodIsKafkaRef.value?.setValue(value),
+      () => dataFlowMethodIsKafkaRef.value?.resetValue(),
+    ],
+    [
+      (dataFlowType) => dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_MQTT,
+      () => dataFlowMethodIsMqttRef.value?.getValue(),
+      (value) => dataFlowMethodIsMqttRef.value?.setValue(value),
+      () => dataFlowMethodIsMqttRef.value?.resetValue(),
+    ],
+    [
+      (dataFlowType) => dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_RABBITMQ,
+      () => dataFlowMethodIsRabbitMqRef.value?.getValue(),
+      (value) => dataFlowMethodIsRabbitMqRef.value?.setValue(value),
+      () => dataFlowMethodIsRabbitMqRef.value?.resetValue(),
+    ],
+    [
+      (dataFlowType) => dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_REST_API,
+      () => dataFlowMethodIsApiRef.value?.getValue(),
+      (value) => dataFlowMethodIsApiRef.value?.setValue(value),
+      () => dataFlowMethodIsApiRef.value?.resetValue(),
+    ],
+  ];
+
+  const getValue = () => {
+    const findDateFlow = dataFlowTypeGetForm.find((item) => item[0](props.dataFlowType));
+    if (!findDateFlow) return;
+    const getForm = findDateFlow[1](0);
+    return getForm;
+  };
+
+  const setValue = async (value) => {
+    await nextTick();
+    const findDateFlow = dataFlowTypeGetForm.find((item) => item[0](props.dataFlowType));
+    if (!findDateFlow) return;
+    findDateFlow[2](value);
+  };
+
+  const resetValue = () => {
+    const findDateFlow = dataFlowTypeGetForm.find((item) => item[0](props.dataFlowType));
+    if (!findDateFlow) return;
+    findDateFlow[3](0);
+  };
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</script>
+<style lang="less" scoped>
+  .data-flow-params {
+    margin: 0 auto;
+    width: 600px;
+
+    .data-flow-params-button {
+      position: absolute;
+      bottom: 5%;
+      right: 50%;
+      transform: translateX(50%);
+    }
+  }
+</style>

+import { FormSchema } from '/@/components/Form';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { h, unref } from 'vue';
+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 { DeviceRecord } from '/@/api/device/model/deviceModel';
+import { FETCH_SETTING } from '/@/components/Table/src/const';
+import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+import { useMessage } from '/@/hooks/web/useMessage';
+import {
+  BasicInfoFormField,
+  DataSourceType,
+  DeviceStatusEnum,
+  DeviceStatusNameEnum,
+  DeviceTypeNameEnum,
+} from '../enum';
+
+export const stepConfig = ['选择流转方式', '完善配置参数'];
+
+export const removeFieldByModeForm = ['name', 'description'];
+
+//表单通用配置
+export const modelFormPublicConfig = {
+  labelWidth: 120,
+  actionColOptions: {
+    span: 14,
+  },
+  showResetButton: false,
+  showSubmitButton: false,
+};
+
+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;
+};
+
+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 { clipboardRef, isSuccessRef } = useCopyToClipboard();
+
+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: () => {
+              clipboardRef.value = record.name;
+              if (unref(isSuccessRef)) 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 },
+  },
+  size: 'small',
+  maxHeight: 240,
+  useSearchForm: true,
+  columns: deviceTableColumn,
+  showIndexColumn: false,
+  fetchSetting: FETCH_SETTING,
+} as BasicTableProps;
+
+export const modeForm = (submitFn?: Function): 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;
+        const values = getFieldsValue();
+        const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
+        const devices = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_DEVICE);
+
+        return {
+          labelField: 'name',
+          valueField: 'tbDeviceId',
+          primaryKey: 'tbDeviceId',
+          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 }) => {
+            const values = getFieldsValue();
+            const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
+            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 [];
+          },
+          onSelectedAfter: async () => {
+            submitFn && (await submitFn(false));
+          },
+          onRemoveAfter: async ({ reloadSelected }) => {
+            submitFn && (await submitFn(false));
+            reloadSelected();
+          },
+          transformValue: (_selectedRowKeys: string[], selectedRows: DeviceRecord[]) => {
+            return handleGroupDevice(selectedRows);
+          },
+        };
+      },
+    },
+    {
+      field: 'type',
+      label: '转换方式',
+      component: 'ApiSelect',
+      required: true,
+      colProps: {
+        span: 24,
+      },
+      componentProps({}) {
+        return {
+          api: findDictItemByCode,
+          params: {
+            dictCode: 'convert_data_to',
+          },
+          labelField: 'itemText',
+          valueField: 'itemValue',
+        };
+      },
+    },
+    {
+      field: 'remark',
+      label: '描述',
+      colProps: { span: 24 },
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入描述',
+      },
+    },
+  ];
+};

+/**
+ * 数据流转相关枚举配置
+ */
+
+//业务 数据源配置枚举
+export enum BasicInfoFormField {
+  DATA_SOURCE_TYPE = 'datasourceType',
+  DATA_SOURCE_PRODUCT = 'datasourceProduct',
+  DATA_SOURCE_DEVICE = 'datasourceDevice',
+  CONVERT_CONFIG_ID = 'convertConfigId',
+}
+
+export enum DataSourceType {
+  ALL = 'ALL',
+  PRODUCT = 'PRODUCTS',
+  DEVICE = 'DEVICES',
+}
+
+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 = '网关设备',
+}

+import DataFlowModal from './DataFlowModal.vue';
+import DataFlowMethod from './DataFlowMethod.vue';
+import DataFlowParams from './DataFlowParams.vue';
+
+export { DataFlowModal, DataFlowMethod, DataFlowParams };

+/**
+ * 选择流转方式相关类型定义
+ */
+export interface ConvertDevice {
+  product: string;
+  devices: string[];
+}
+
+export interface DatasourceContent {
+  convertProducts: string[];
+  convertDevices: ConvertDevice[];
+}
+
+export interface BasicInfoRecord {
+  name?: string;
+  type: string;
+  remark: string;
+  datasourceType: string;
+  datasourceContent: DatasourceContent;
+}

+import UploadFile from './index.vue';
+
+export { UploadFile };

+<template>
+  <div>
+    <a-upload-dragger
+      v-model:fileList="fileList.list"
+      name="file"
+      :multiple="false"
+      @change="handleChange($event)"
+      :before-upload="() => false"
+    >
+      <p class="ant-upload-drag-icon">
+        <InboxOutlined />
+      </p>
+      <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
+      <p class="ant-upload-hint">
+        支持扩展名：{{ supportFileType.join(' ') }}
+        <br />
+        文件大小：最大支持{{ fileLimitSize }}M
+      </p>
+    </a-upload-dragger>
+    <Image
+      class="mt-2"
+      style="width: 6.25rem; height: 6.25rem"
+      v-if="url ? url : imgUrl"
+      :src="url ? url : imgUrl"
+    />
+  </div>
+</template>
+<script lang="ts" setup name="uploadfile">
+  import { ref, reactive } from 'vue';
+  import { InboxOutlined } from '@ant-design/icons-vue';
+  import { Image } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { uploadApi } from '/@/api/personal/index';
+
+  defineProps({
+    url: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const emit = defineEmits(['fileUrlEmit']);
+
+  const { createMessage } = useMessage();
+
+  const imgUrl = ref('');
+
+  const fileList = reactive<any>({
+    list: [],
+  });
+
+  const supportFileType = ['image/png', 'image/png', 'image/jpeg', 'image/gif'];
+
+  const fileLimitSize = 5;
+
+  //验证图片类型和大小
+  const beforeUploadVerify = (type, size) => {
+    let status = false;
+    const limitImgSize = (size as number) / 1024 / 1024 < fileLimitSize;
+    if (!supportFileType.includes(type)) {
+      status = false;
+      const errorType = `只能上传其中${supportFileType.join(' ')}中的类型!`;
+      createMessage.error(errorType);
+      throw Error(errorType);
+    }
+    status = true;
+    if (!limitImgSize) {
+      status = false;
+      const errorType = `图片大小不能超过${fileLimitSize}MB!`;
+      createMessage.error(errorType);
+      throw Error(errorType);
+    }
+    status = true;
+    return status;
+  };
+
+  const handleChange = async ({ file }) => {
+    const fileStatus = file.status;
+    const fileSize = file.size;
+    const fileType = file.type;
+    if (fileStatus === 'removed') {
+      fileList.list = [];
+      imgUrl.value = '';
+    } else {
+      if (!beforeUploadVerify(fileType, fileSize)) return;
+      fileList.list = [file];
+      const formData = new FormData();
+      formData.append('file', file);
+      const { fileStaticUri } = await uploadApi(formData);
+      if (!fileStaticUri) return;
+      imgUrl.value = fileStaticUri;
+      emit('fileUrlEmit', fileStaticUri);
+    }
+  };
+</script>
+
+<style lang="less" scoped></style>

-import { BasicColumn, FormSchema } from '/@/components/Table';
-import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
-
-export const columns: BasicColumn[] = [
-  {
-    title: '数据流转名称',
-    dataIndex: 'name',
-    width: 200,
-  },
-  {
-    title: '途径',
-    dataIndex: 'type',
-    width: 200,
-    customRender: ({ record }) => {
-      const status = record.type;
-      const enable =
-        status === 'org.thingsboard.rule.engine.kafka.TbKafkaNode'
-          ? 'KafKa'
-          : record.type === 'org.thingsboard.rule.engine.mqtt.TbMqttNode'
-          ? 'MQTT'
-          : record.type === 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'
-          ? 'RabbitMQ'
-          : 'REST_API';
-      const color =
-        enable == 'KafKa'
-          ? '#0099FF'
-          : enable == 'MQTT'
-          ? '#7C7CC9'
-          : enable == 'RabbitMQ'
-          ? '#E8A15E'
-          : '#81B1AB';
-      const text =
-        enable == 'KafKa'
-          ? 'KafKa'
-          : enable == 'MQTT'
-          ? 'MQTT'
-          : enable == 'RabbitMQ'
-          ? 'RabbitMQ'
-          : 'REST_API';
-      return h(Tag, { color: color }, () => text);
-    },
-
-    format: (_text: string, record: Recordable) => {
-      return record.type === 'org.thingsboard.rule.engine.kafka.TbKafkaNode'
-        ? 'KafKa'
-        : record.type === 'org.thingsboard.rule.engine.mqtt.TbMqttNode'
-        ? 'MQTT'
-        : record.type === 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'
-        ? 'RabbitMQ'
-        : 'REST_API';
-    },
-  },
-  {
-    title: '状态',
-    dataIndex: 'status',
-    width: 120,
-    slots: { customRender: 'status' },
-  },
-  {
-    title: '描述',
-    dataIndex: 'remark',
-    width: 200,
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 180,
-  },
-];
-
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '名称',
-    component: 'Input',
-    colProps: { span: 6 },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入名称',
-    },
-  },
-  {
-    field: 'status',
-    label: '状态',
-    component: 'Select',
-    componentProps: {
-      placeholder: '请选择状态',
-      options: [
-        { label: '启用', value: '1' },
-        { label: '禁用', value: '0' },
-      ],
-    },
-    colProps: { span: 6 },
-  },
-];
+import { BasicColumn, FormSchema, BasicTableProps } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { useUtil } from '../hooks/index.hook';
+
+const { dataFlowMapTextColor } = useUtil();
+
+export const columns: BasicColumn[] = [
+  {
+    title: '数据流转名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '途径',
+    dataIndex: 'type',
+    width: 200,
+    customRender: ({ record: { type } }) => {
+      const findMethod = dataFlowMapTextColor(type);
+      return h(Tag, { color: findMethod?.textColor }, () => findMethod?.label);
+    },
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 120,
+    slots: { customRender: 'status' },
+  },
+  {
+    title: '描述',
+    dataIndex: 'remark',
+    width: 200,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入名称',
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择状态',
+      options: [
+        { label: '启用', value: '1' },
+        { label: '禁用', value: '0' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+];
+
+export const defaultTableAttribute: BasicTableProps = {
+  title: '数据流转列表',
+  clickToRowSelect: false,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+  },
+  rowKey: 'id',
+  useSearchForm: true,
+  showTableSetting: true,
+  bordered: true,
+  showIndexColumn: false,
+  actionColumn: {
+    width: 180,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: 'right',
+  },
+};

-import { FormSchema } from '/@/components/Form';
-import { findDictItemByCode } from '/@/api/system/dict';
-import { h, ref, unref } from 'vue';
-import { isExistDataManagerNameApi } from '/@/api/datamanager/dataManagerApi';
-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 { DeviceRecord } from '/@/api/device/model/deviceModel';
-import { FETCH_SETTING } from '/@/components/Table/src/const';
-import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
-import { useMessage } from '/@/hooks/web/useMessage';
-
-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;
-};
-
-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 { clipboardRef, isSuccessRef } = useCopyToClipboard();
-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: () => {
-              clipboardRef.value = record.name;
-              if (unref(isSuccessRef)) 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 },
-  },
-  size: 'small',
-  maxHeight: 240,
-  useSearchForm: true,
-  columns: deviceTableColumn,
-  showIndexColumn: false,
-  fetchSetting: FETCH_SETTING,
-} as BasicTableProps;
-
-export const modeForm = (submitFn?: Function): 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;
-        const values = getFieldsValue();
-        const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-        const devices = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_DEVICE);
-
-        return {
-          labelField: 'name',
-          valueField: 'tbDeviceId',
-          primaryKey: 'tbDeviceId',
-          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 }) => {
-            const values = getFieldsValue();
-            const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-            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 [];
-          },
-          onSelectedAfter: async () => {
-            submitFn && (await submitFn(false));
-          },
-          onRemoveAfter: async ({ reloadSelected }) => {
-            submitFn && (await submitFn(false));
-            reloadSelected();
-          },
-          transformValue: (_selectedRowKeys: string[], selectedRows: DeviceRecord[]) => {
-            return handleGroupDevice(selectedRows);
-          },
-        };
-      },
-    },
-    {
-      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: '请输入说明',
-    },
-  },
-];

-<template>
-  <div class="transfer-config-mode">
-    <BasicForm :showSubmitButton="false" @register="register">
-      <template #uploadAdd1="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <a-upload-dragger
-          v-model:fileList="fileList1"
-          name="file"
-          :multiple="false"
-          @change="handleChange('T', $event)"
-          :before-upload="() => false"
-        >
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-          <p class="ant-upload-hint">
-            支持扩展名：.jpeg .png .jpg ...
-            <br />
-            文件大小：最大支持5M
-          </p>
-        </a-upload-dragger>
-      </template>
-      <template #showImg1="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <img
-          v-if="showImg1"
-          :src="showImg1Pic"
-          alt="avatar"
-          style="width: 6.25rem; height: 6.25rem"
-        />
-      </template>
-      <template #uploadAdd2="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <a-upload-dragger
-          v-model:fileList="fileList2"
-          name="file"
-          :multiple="false"
-          @change="handleChange('F', $event)"
-          :before-upload="() => false"
-        >
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-          <p class="ant-upload-hint">
-            支持扩展名：.jpeg .png .jpg ...
-            <br />
-            文件大小：最大支持5M
-          </p>
-        </a-upload-dragger>
-      </template>
-      <template #showImg2="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <img
-          v-if="showImg2"
-          :src="showImg2Pic"
-          alt="avatar"
-          style="width: 6.25rem; height: 6.25rem"
-        />
-      </template>
-      <template #uploadAdd3="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <a-upload-dragger
-          v-model:fileList="fileList3"
-          name="file"
-          :multiple="false"
-          @change="handleChange('C', $event)"
-          :before-upload="() => false"
-        >
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-          <p class="ant-upload-hint">
-            支持扩展名：.jpeg .png .jpg ...
-            <br />
-            文件大小：最大支持5M
-          </p>
-        </a-upload-dragger>
-      </template>
-      <template #showImg3="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <img
-          v-if="showImg3"
-          :src="showImg3Pic"
-          alt="avatar"
-          style="width: 6.25rem; height: 6.25rem"
-        />
-      </template>
-    </BasicForm>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, reactive, nextTick } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { modeApiForm, CredentialsEnum } from '../config';
-  import { InboxOutlined } from '@ant-design/icons-vue';
-  import { Upload } from 'ant-design-vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { uploadApi } from '/@/api/personal/index';
-
-  export default defineComponent({
-    components: {
-      BasicForm,
-      InboxOutlined,
-      [Upload.Dragger.name]: Upload.Dragger,
-    },
-    emits: ['next', 'prev', 'register'],
-    setup(_, { emit }) {
-      const showImg1 = ref(false);
-      const showImg1Pic = ref('');
-      const showImg2 = ref(false);
-      const showImg2Pic = ref('');
-      const showImg3 = ref(false);
-      const showImg3Pic = ref('');
-      const { createMessage } = useMessage();
-      let caCertFileName = ref('');
-      let privateKeyFileName = ref('');
-      let certFileName = ref('');
-      let fileList1: any = ref<[]>([]);
-      let fileList2: any = ref<[]>([]);
-      let fileList3: any = ref<[]>([]);
-      const credentialsV: any = reactive({
-        credentials: {
-          type: '',
-        },
-      });
-      const sonValues: any = reactive({
-        configuration: {},
-      });
-      const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
-        labelWidth: 120,
-        schemas: modeApiForm,
-        actionColOptions: {
-          span: 14,
-        },
-        resetButtonOptions: {
-          text: '上一步',
-        },
-        resetFunc: customResetFunc,
-        submitFunc: customSubmitFunc,
-      });
-
-      const setStepTwoFieldsValueFunc = (v, v1, v2) => {
-        setFieldsValue(v);
-        setFieldsValue({
-          name: v1,
-          description: v2,
-        });
-        setFieldsValue({
-          password: v.credentials?.password,
-          username: v.credentials?.username,
-          type: v.credentials?.type,
-        });
-        fileList1.value = [{ name: v.credentials?.caCertFileName.slice(39), uid: '4' }];
-        fileList2.value = [{ name: v.credentials?.certFileName.slice(39), uid: '5' }];
-        fileList3.value = [{ name: v.credentials?.privateKeyFileName.slice(39), uid: '6' }];
-        caCertFileName.value = v.credentials?.caCertFileName;
-        certFileName.value = v.credentials?.certFileName;
-        privateKeyFileName.value = v.credentials?.privateKeyFileName;
-        const iscaCertFileNamePic = v.credentials?.caCertFileName.split('.').pop();
-        const iscertFileNamePic = v.credentials?.certFileName.split('.').pop();
-        const isprivateKeyFileNamePic = v.credentials?.privateKeyFileName.split('.').pop();
-        if (
-          iscaCertFileNamePic == 'jpg' ||
-          iscaCertFileNamePic == 'png' ||
-          iscaCertFileNamePic == 'jpeg' ||
-          iscaCertFileNamePic == 'gif'
-        ) {
-          showImg1.value = true;
-          showImg1Pic.value = v.credentials?.caCertFileName;
-        } else {
-          showImg1.value = false;
-        }
-        if (
-          iscertFileNamePic == 'jpg' ||
-          iscertFileNamePic == 'png' ||
-          iscertFileNamePic == 'jpeg' ||
-          iscertFileNamePic == 'gif'
-        ) {
-          showImg2.value = true;
-          showImg2Pic.value = v.credentials?.certFileName;
-        } else {
-          showImg2.value = false;
-        }
-        if (
-          isprivateKeyFileNamePic == 'jpg' ||
-          isprivateKeyFileNamePic == 'png' ||
-          isprivateKeyFileNamePic == 'jpeg' ||
-          isprivateKeyFileNamePic == 'gif'
-        ) {
-          showImg3.value = true;
-          showImg3Pic.value = v.credentials?.privateKeyFileName;
-        } else {
-          showImg3.value = false;
-        }
-      };
-      const customClearStepTwoValueFunc = async () => {
-        nextTick(() => {
-          defineClearFunc();
-          fileList1.value = [];
-          fileList2.value = [];
-          fileList3.value = [];
-          caCertFileName.value = '';
-          privateKeyFileName.value = '';
-          certFileName.value = '';
-          showImg1.value = false;
-          showImg1Pic.value = '';
-          showImg2.value = false;
-          showImg2Pic.value = '';
-          showImg3.value = false;
-          showImg3Pic.value = '';
-        });
-      };
-      async function customResetFunc() {
-        emit('prev');
-      }
-      async function customSubmitFunc() {
-        try {
-          const values = await validate();
-          emit('next', values);
-        } catch (error) {
-        } finally {
-        }
-      }
-      /**
-       * 上传图片
-       */
-      const handleChange = async (e, { file }) => {
-        if (file.status === 'removed') {
-          if (e == 'T') {
-            fileList1.value = [];
-            showImg1.value = false;
-            showImg1Pic.value = '';
-            caCertFileName.value = '';
-          } else if (e == 'F') {
-            fileList2.value = [];
-            showImg2.value = false;
-            showImg2Pic.value = '';
-            certFileName.value = '';
-          } else {
-            fileList3.value = [];
-            showImg3.value = false;
-            showImg3Pic.value = '';
-            privateKeyFileName.value = '';
-          }
-        } else {
-          const isLt5M = file.size / 1024 / 1024 < 5;
-          if (!isLt5M) {
-            createMessage.error('图片大小不能超过5MB!');
-          } else {
-            e == 'T'
-              ? (fileList1.value = [file])
-              : e == 'F'
-              ? (fileList2.value = [file])
-              : (fileList3.value = [file]);
-            const formData = new FormData();
-            formData.append('file', file);
-            const response = await uploadApi(formData);
-            if (response.fileStaticUri) {
-              if (e == 'T') {
-                caCertFileName.value = response.fileStaticUri;
-                const iscaCertFileNamePic = caCertFileName.value.split('.').pop();
-                if (
-                  iscaCertFileNamePic == 'jpg' ||
-                  iscaCertFileNamePic == 'png' ||
-                  iscaCertFileNamePic == 'jpeg' ||
-                  iscaCertFileNamePic == 'gif'
-                ) {
-                  showImg1.value = true;
-                  showImg1Pic.value = response.fileStaticUri;
-                } else {
-                  showImg1.value = false;
-                }
-              } else if (e == 'F') {
-                certFileName.value = response.fileStaticUri;
-                const iscertFileNamePic = certFileName.value.split('.').pop();
-                if (
-                  iscertFileNamePic == 'jpg' ||
-                  iscertFileNamePic == 'png' ||
-                  iscertFileNamePic == 'jpeg' ||
-                  iscertFileNamePic == 'gif'
-                ) {
-                  showImg2.value = true;
-                  showImg2Pic.value = response.fileStaticUri;
-                } else {
-                  showImg2.value = false;
-                }
-              } else {
-                privateKeyFileName.value = response.fileStaticUri;
-                const isprivateKeyFileNamePic = privateKeyFileName.value.split('.').pop();
-                if (
-                  isprivateKeyFileNamePic == 'jpg' ||
-                  isprivateKeyFileNamePic == 'png' ||
-                  isprivateKeyFileNamePic == 'jpeg' ||
-                  isprivateKeyFileNamePic == 'gif'
-                ) {
-                  showImg3.value = true;
-                  showImg3Pic.value = response.fileStaticUri;
-                } else {
-                  showImg3.value = false;
-                }
-              }
-            }
-          }
-        }
-      };
-
-      const getSonValueFunc = async () => {
-        sonValues.configuration = await validate();
-        credentialsV.credentials.type = sonValues.configuration.type;
-        if (credentialsV.credentials.type == CredentialsEnum.IS_BASIC) {
-          credentialsV.credentials.username = sonValues.configuration.username;
-          credentialsV.credentials.password = sonValues.configuration.password;
-          sonValues.configuration.username = undefined;
-          sonValues.configuration.password = undefined;
-        } else if (credentialsV.credentials.type == CredentialsEnum.IS_PEM) {
-          credentialsV.credentials.caCertFileName = caCertFileName.value;
-          credentialsV.credentials.certFileName = certFileName.value;
-          credentialsV.credentials.privateKeyFileName = privateKeyFileName.value;
-          credentialsV.credentials.password = sonValues.configuration.password;
-        }
-        Object.assign(sonValues.configuration, credentialsV);
-        return sonValues;
-      };
-      return {
-        register,
-        setStepTwoFieldsValueFunc,
-        customClearStepTwoValueFunc,
-        getSonValueFunc,
-        handleChange,
-        fileList1,
-        fileList2,
-        fileList3,
-        caCertFileName,
-        privateKeyFileName,
-        certFileName,
-        showImg1,
-        showImg1Pic,
-        showImg2,
-        showImg2Pic,
-        showImg3,
-        showImg3Pic,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  :deep(.ant-col-24) {
-    margin-bottom: 20px !important;
-  }
-  :deep(.ant-btn-default) {
-    color: white;
-    background: #377dff;
-  }
-</style>

-<template>
-  <div class="transfer-config-mode">
-    <BasicForm :showSubmitButton="false" @register="register" />
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, reactive, nextTick } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { modeKafkaForm } from '../config';
-  import { Alert, Divider, Descriptions } from 'ant-design-vue';
-
-  export default defineComponent({
-    components: {
-      BasicForm,
-      [Alert.name]: Alert,
-      [Divider.name]: Divider,
-      [Descriptions.name]: Descriptions,
-      [Descriptions.Item.name]: Descriptions.Item,
-    },
-    emits: ['next', 'prev', 'register'],
-    setup(_, { emit }) {
-      const keyAndValueArr: any = ref<[]>([]);
-      const vType = ref('');
-      const sonValues = reactive({
-        configuration: {},
-      });
-      const clearName = ref('');
-      const [register, { validate, setFieldsValue, resetFields: defineClearFunc, clearValidate }] =
-        useForm({
-          labelWidth: 130,
-          schemas: modeKafkaForm,
-          actionColOptions: {
-            span: 14,
-          },
-          resetButtonOptions: {
-            text: '上一步',
-          },
-          resetFunc: customResetFunc,
-        });
-
-      const clearValidateFunc = async () => {
-        await clearValidate(['name']);
-      };
-
-      const setStepTwoFieldsValueFunc = async (v, v1, v2) => {
-        clearName.value = v1;
-        setFieldsValue(v);
-        vType.value = v1;
-        setFieldsValue({
-          name: v1,
-          description: v2,
-        });
-      };
-
-      const customClearStepTwoValueFunc = async () => {
-        nextTick(() => {
-          defineClearFunc();
-        });
-      };
-      async function customResetFunc() {
-        emit('prev');
-      }
-      const getSonValueFunc = async () => {
-        try {
-          sonValues.configuration = await validate();
-          Object.assign(sonValues.configuration);
-          return sonValues;
-        } catch (e) {
-          return e;
-        }
-      };
-      return {
-        clearValidateFunc,
-        getSonValueFunc,
-        keyAndValueArr,
-        register,
-        setStepTwoFieldsValueFunc,
-        customClearStepTwoValueFunc,
-        customResetFunc,
-      };
-    },
-  });
-</script>
-
-<style lang="less" scoped>
-  :deep(.ant-btn-default) {
-    color: white;
-    background: #377dff;
-  }
-</style>

-<template>
-  <div class="transfer-config-mode">
-    <BasicForm :showSubmitButton="false" @register="register">
-      <template #uploadAdd1="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <a-upload-dragger
-          v-model:fileList="fileList1"
-          name="file"
-          :key="1"
-          :multiple="false"
-          @change="handleChange('T', $event)"
-          :before-upload="() => false"
-        >
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-          <p class="ant-upload-hint">
-            支持扩展名：.jpeg .png .jpg ...
-            <br />
-            文件大小：最大支持5M
-          </p>
-        </a-upload-dragger>
-      </template>
-      <template #showImg1="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <img
-          v-if="showImg1"
-          :src="showImg1Pic"
-          alt="avatar"
-          style="width: 6.25rem; height: 6.25rem"
-        />
-      </template>
-      <div style="margin-top: 50px"></div>
-      <template #uploadAdd2="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <a-upload-dragger
-          v-model:fileList="fileList2"
-          name="file"
-          :key="2"
-          :multiple="false"
-          @change="handleChange('F', $event)"
-          :before-upload="() => false"
-        >
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-          <p class="ant-upload-hint">
-            支持扩展名：.jpeg .png .jpg ...
-            <br />
-            文件大小：最大支持5M
-          </p>
-        </a-upload-dragger>
-      </template>
-      <template #showImg2="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <img
-          v-if="showImg2"
-          :src="showImg2Pic"
-          alt="avatar"
-          style="width: 6.25rem; height: 6.25rem"
-        />
-      </template>
-      <div style="margin-top: 50px"></div>
-      <template #uploadAdd3="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <a-upload-dragger
-          v-model:fileList="fileList3"
-          name="file"
-          :key="3"
-          :multiple="false"
-          @change="handleChange('C', $event)"
-          :before-upload="() => false"
-        >
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-          <p class="ant-upload-hint">
-            支持扩展名：.jpeg .png .jpg ...
-            <br />
-            文件大小：最大支持5M
-          </p>
-        </a-upload-dragger>
-      </template>
-      <template #showImg3="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <img
-          v-if="showImg3"
-          :src="showImg3Pic"
-          alt="avatar"
-          style="width: 6.25rem; height: 6.25rem"
-        />
-      </template>
-    </BasicForm>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, reactive, nextTick } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { CredentialsEnum, modeMqttForm } from '../config';
-  import { InboxOutlined } from '@ant-design/icons-vue';
-  import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue';
-  import { uploadApi } from '/@/api/personal/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  export default defineComponent({
-    components: {
-      BasicForm,
-      [Alert.name]: Alert,
-      [Divider.name]: Divider,
-      [Descriptions.name]: Descriptions,
-      [Descriptions.Item.name]: Descriptions.Item,
-      InboxOutlined,
-      [Upload.Dragger.name]: Upload.Dragger,
-    },
-    emits: ['next', 'prev', 'register'],
-    setup(_, { emit }) {
-      const showImg1 = ref(false);
-      const showImg1Pic = ref('');
-      const showImg2 = ref(false);
-      const showImg2Pic = ref('');
-      const showImg3 = ref(false);
-      const showImg3Pic = ref('');
-      const { createMessage } = useMessage();
-      let caCertFileName = ref('');
-      let privateKeyFileName = ref('');
-      let certFileName = ref('');
-      let fileList1: any = ref<[]>([]);
-      let fileList2: any = ref<[]>([]);
-      let fileList3: any = ref<[]>([]);
-      const credentialsV: any = reactive({
-        credentials: {
-          type: '',
-        },
-      });
-      const sonValues: any = reactive({
-        configuration: {},
-      });
-      const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
-        labelWidth: 120,
-        schemas: modeMqttForm,
-        actionColOptions: {
-          span: 14,
-        },
-        resetButtonOptions: {
-          text: '上一步',
-        },
-        resetFunc: customResetFunc,
-        submitFunc: customSubmitFunc,
-      });
-
-      /**
-       * 上传图片
-       */
-      const handleChange = async (e, { file }) => {
-        if (file.status === 'removed') {
-          if (e == 'T') {
-            fileList1.value = [];
-            showImg1.value = false;
-            showImg1Pic.value = '';
-            caCertFileName.value = '';
-          } else if (e == 'F') {
-            fileList2.value = [];
-            showImg2.value = false;
-            showImg2Pic.value = '';
-            certFileName.value = '';
-          } else {
-            fileList3.value = [];
-            showImg3.value = false;
-            showImg3Pic.value = '';
-            privateKeyFileName.value = '';
-          }
-        } else {
-          const isLt5M = file.size / 1024 / 1024 < 5;
-          if (!isLt5M) {
-            createMessage.error('图片大小不能超过5MB!');
-          } else {
-            e == 'T'
-              ? (fileList1.value = [file])
-              : e == 'F'
-              ? (fileList2.value = [file])
-              : (fileList3.value = [file]);
-            const formData = new FormData();
-            formData.append('file', file);
-            const response = await uploadApi(formData);
-            if (response.fileStaticUri) {
-              if (e == 'T') {
-                caCertFileName.value = response.fileStaticUri;
-                const iscaCertFileNamePic = caCertFileName.value.split('.').pop();
-                if (
-                  iscaCertFileNamePic == 'jpg' ||
-                  iscaCertFileNamePic == 'png' ||
-                  iscaCertFileNamePic == 'jpeg' ||
-                  iscaCertFileNamePic == 'gif'
-                ) {
-                  showImg1.value = true;
-                  showImg1Pic.value = response.fileStaticUri;
-                } else {
-                  showImg1.value = false;
-                }
-              } else if (e == 'F') {
-                certFileName.value = response.fileStaticUri;
-                const iscertFileNamePic = certFileName.value.split('.').pop();
-                if (
-                  iscertFileNamePic == 'jpg' ||
-                  iscertFileNamePic == 'png' ||
-                  iscertFileNamePic == 'jpeg' ||
-                  iscertFileNamePic == 'gif'
-                ) {
-                  showImg2.value = true;
-                  showImg2Pic.value = response.fileStaticUri;
-                } else {
-                  showImg2.value = false;
-                }
-              } else {
-                privateKeyFileName.value = response.fileStaticUri;
-                const isprivateKeyFileNamePic = privateKeyFileName.value.split('.').pop();
-                if (
-                  isprivateKeyFileNamePic == 'jpg' ||
-                  isprivateKeyFileNamePic == 'png' ||
-                  isprivateKeyFileNamePic == 'jpeg' ||
-                  isprivateKeyFileNamePic == 'gif'
-                ) {
-                  showImg3.value = true;
-                  showImg3Pic.value = response.fileStaticUri;
-                } else {
-                  showImg3.value = false;
-                }
-              }
-            }
-          }
-        }
-      };
-      const setStepTwoFieldsValueFunc = (v, v1, v2) => {
-        setFieldsValue(v);
-        setFieldsValue({
-          name: v1,
-          description: v2,
-        });
-        setFieldsValue({
-          password: v.credentials?.password,
-          username: v.credentials?.username,
-          type: v.credentials?.type,
-        });
-        fileList1.value = [
-          {
-            name: v.credentials?.caCertFileName.slice(39),
-            uid: '1',
-          },
-        ];
-        fileList2.value = [
-          {
-            name: v.credentials?.certFileName.slice(39),
-            uid: '2',
-          },
-        ];
-        fileList3.value = [
-          {
-            name: v.credentials?.privateKeyFileName.slice(39),
-            uid: '3',
-          },
-        ];
-        caCertFileName.value = v.credentials?.caCertFileName;
-        certFileName.value = v.credentials?.certFileName;
-        privateKeyFileName.value = v.credentials?.privateKeyFileName;
-        const iscaCertFileNamePic = v.credentials?.caCertFileName.split('.').pop();
-        const iscertFileNamePic = v.credentials?.certFileName.split('.').pop();
-        const isprivateKeyFileNamePic = v.credentials?.privateKeyFileName.split('.').pop();
-        if (
-          iscaCertFileNamePic == 'jpg' ||
-          iscaCertFileNamePic == 'png' ||
-          iscaCertFileNamePic == 'jpeg' ||
-          iscaCertFileNamePic == 'gif'
-        ) {
-          showImg1.value = true;
-          showImg1Pic.value = v.credentials?.caCertFileName;
-        } else {
-          showImg1.value = false;
-        }
-        if (
-          iscertFileNamePic == 'jpg' ||
-          iscertFileNamePic == 'png' ||
-          iscertFileNamePic == 'jpeg' ||
-          iscertFileNamePic == 'gif'
-        ) {
-          showImg2.value = true;
-          showImg2Pic.value = v.credentials?.certFileName;
-        } else {
-          showImg2.value = false;
-        }
-        if (
-          isprivateKeyFileNamePic == 'jpg' ||
-          isprivateKeyFileNamePic == 'png' ||
-          isprivateKeyFileNamePic == 'jpeg' ||
-          isprivateKeyFileNamePic == 'gif'
-        ) {
-          showImg3.value = true;
-          showImg3Pic.value = v.credentials?.privateKeyFileName;
-        } else {
-          showImg3.value = false;
-        }
-      };
-      const customClearStepTwoValueFunc = async () => {
-        nextTick(() => {
-          defineClearFunc();
-          fileList1.value = [];
-          fileList2.value = [];
-          fileList3.value = [];
-          caCertFileName.value = '';
-          privateKeyFileName.value = '';
-          certFileName.value = '';
-          showImg1.value = false;
-          showImg1Pic.value = '';
-          showImg2.value = false;
-          showImg2Pic.value = '';
-          showImg3.value = false;
-          showImg3Pic.value = '';
-        });
-      };
-      async function customResetFunc() {
-        emit('prev');
-      }
-      async function customSubmitFunc() {
-        try {
-          const values = await validate();
-          emit('next', values);
-        } catch (error) {
-        } finally {
-        }
-      }
-      const getSonValueFunc = async () => {
-        sonValues.configuration = await validate();
-        credentialsV.credentials.type = sonValues.configuration.type;
-        if (credentialsV.credentials.type == CredentialsEnum.IS_BASIC) {
-          credentialsV.credentials.username = sonValues.configuration.username;
-          credentialsV.credentials.password = sonValues.configuration.password;
-          sonValues.configuration.username = undefined;
-          sonValues.configuration.password = undefined;
-        } else if (credentialsV.credentials.type == CredentialsEnum.IS_PEM) {
-          credentialsV.credentials.caCertFileName = caCertFileName.value;
-          credentialsV.credentials.certFileName = certFileName.value;
-          credentialsV.credentials.privateKeyFileName = privateKeyFileName.value;
-        }
-        if (!sonValues.configuration.clientId) {
-          sonValues.configuration.clientId = null;
-        }
-        Object.assign(sonValues.configuration, credentialsV);
-        return sonValues;
-      };
-      return {
-        getSonValueFunc,
-        register,
-        setStepTwoFieldsValueFunc,
-        customClearStepTwoValueFunc,
-        fileList1,
-        fileList2,
-        fileList3,
-        handleChange,
-        caCertFileName,
-        privateKeyFileName,
-        certFileName,
-        showImg1,
-        showImg1Pic,
-        showImg2,
-        showImg2Pic,
-        showImg3,
-        showImg3Pic,
-      };
-    },
-  });
-</script>
-
-<style lang="less" scoped>
-  :deep(.ant-col-24) {
-    margin-bottom: 20px !important;
-  }
-
-  :deep(.ant-btn-default) {
-    color: white;
-    background: #377dff;
-  }
-</style>

-<template>
-  <div class="transfer-config-mode">
-    <BasicForm :showSubmitButton="false" @register="register" />
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { modeRabbitMqForm } from '../config';
-
-  export default defineComponent({
-    components: {
-      BasicForm,
-    },
-    emits: ['next', 'prev', 'register'],
-    setup(_, { emit }) {
-      const sonValues = reactive({
-        configuration: {},
-      });
-
-      const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
-        labelWidth: 140,
-        schemas: modeRabbitMqForm,
-        actionColOptions: {
-          span: 14,
-        },
-        resetButtonOptions: {
-          text: '上一步',
-        },
-
-        resetFunc: customResetFunc,
-        submitFunc: customSubmitFunc,
-      });
-
-      const setStepTwoFieldsValueFunc = (v, v1, v2) => {
-        setFieldsValue(v);
-        setFieldsValue({
-          name: v1,
-          description: v2,
-        });
-      };
-      const customClearStepTwoValueFunc = async () => {
-        nextTick(() => {
-          defineClearFunc();
-        });
-      };
-      async function customResetFunc() {
-        emit('prev');
-      }
-      async function customSubmitFunc() {
-        try {
-          const values = await validate();
-          emit('next', values);
-        } catch (error) {
-        } finally {
-        }
-      }
-
-      const getSonValueFunc = async () => {
-        sonValues.configuration = await validate();
-        Object.assign(sonValues.configuration);
-        return sonValues;
-      };
-
-      return {
-        getSonValueFunc,
-        register,
-        setStepTwoFieldsValueFunc,
-        customClearStepTwoValueFunc,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  :deep(.ant-btn-default) {
-    color: white;
-    background: #377dff;
-  }
-</style>

-<template>
-  <div class="transfer-config-mode">
-    <BasicForm @register="register" />
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, ref, nextTick } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { BasicInfoFormField, modeForm } from './config';
-  import { Select, Input, Divider } from 'ant-design-vue';
-
-  export interface ConvertDevice {
-    product: string;
-    devices: string[];
-  }
-
-  export interface DatasourceContent {
-    convertProducts: string[];
-    convertDevices: ConvertDevice[];
-  }
-
-  export interface BasicInfoRecord {
-    name?: string;
-    type: string;
-    remark: string;
-    datasourceType: string;
-    datasourceContent: DatasourceContent;
-  }
-
-  export default defineComponent({
-    components: {
-      BasicForm,
-      [Select.name]: Select,
-      [Input.name]: Input,
-      [Input.Group.name]: Input.Group,
-      [Divider.name]: Divider,
-    },
-    props: {
-      saveContent: {
-        type: Function,
-      },
-    },
-    emits: ['next', 'resetFunc', 'register'],
-    setup(props, { emit }) {
-      const sonValues = ref<BasicInfoRecord>({} as unknown as BasicInfoRecord);
-      const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
-        labelWidth: 100,
-        schemas: modeForm(props.saveContent),
-        actionColOptions: {
-          span: 14,
-        },
-        showResetButton: false,
-        submitButtonOptions: {
-          text: '下一步',
-        },
-        submitFunc: customSubmitFunc,
-      });
-      //提交数据
-      async function customSubmitFunc() {
-        try {
-          const values = await validateFields();
-          emit('next', values);
-        } catch (error) {}
-      }
-      //回显数据
-      const setStepOneFieldsValueFunc = (record: Recordable) => {
-        const value = {
-          ...record,
-          [BasicInfoFormField.DATA_SOURCE_PRODUCT]:
-            record?.datasourceContent?.convertProducts || [],
-          [BasicInfoFormField.DATA_SOURCE_DEVICE]: record?.datasourceContent?.convertDevices,
-          // [BasicInfoFormField.DATA_SOURCE_DEVICE]:
-          //   (record?.datasourceContent?.convertDevices || []).reduce((prev, next) => {
-          //     return [...prev, ...(next?.devices || [])];
-          //   }, []) || [],
-        };
-        setFieldsValue(value);
-      };
-
-      //清空数据
-      const customResetStepOneFunc = () => {
-        nextTick(() => {
-          resetFields();
-        });
-      };
-      const getSonValueFunc = async () => {
-        const record = (await validateFields()) || {};
-        const { type, remark } = record;
-        const datasourceType = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_TYPE);
-        const convertDevices = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_DEVICE);
-        const convertProducts = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-
-        sonValues.value = {
-          type,
-          remark,
-          datasourceType,
-          datasourceContent: {
-            convertProducts,
-            convertDevices,
-          },
-        };
-        return sonValues.value;
-      };
-      return {
-        getSonValueFunc,
-        register,
-        setStepOneFieldsValueFunc,
-        customResetStepOneFunc,
-      };
-    },
-  });
-</script>
-<style lang="less">
-  .transfer-config-mode {
-    margin: 0 auto;
-    width: 600px;
-  }
-</style>