transferConfigParams.vue 5.25 KB
<template>
  <div class="step2">
    <div>
      <div v-show="isWhereComp == 'KafKA'">
        <TransferConfigKafka ref="refTransferConfigKafka" @prev="getSonPrev" />
      </div>
      <div v-show="isWhereComp == 'MQTT'">
        <TransferConfigMqtt ref="refTransferConfigMqtt" @prev="getSonPrev" />
      </div>
      <div v-show="isWhereComp == 'RabbitMq'">
        <TransferConfigRabbitMq ref="refTransferConfigRabbitMq" @prev="getSonPrev" />
      </div>
      <div v-show="isWhereComp == 'Api'">
        <TransferConfigApi ref="refTransferConfigApi" @prev="getSonPrev" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, watch, ref, getCurrentInstance, reactive } from 'vue';
  import TransferConfigKafka from '../cpns/cpns/transferConfigKafka.vue';
  import TransferConfigMqtt from '../cpns/cpns/transferConfigMqtt.vue';
  import TransferConfigRabbitMq from '../cpns/cpns/transferConfigRabbitMq.vue';
  import TransferConfigApi from '../cpns/cpns/transferConfigApi.vue';
  import { Alert, Divider, Descriptions } from 'ant-design-vue';

  export default defineComponent({
    components: {
      [Alert.name]: Alert,
      [Divider.name]: Divider,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      TransferConfigKafka,
      TransferConfigMqtt,
      TransferConfigRabbitMq,
      TransferConfigApi,
    },
    // eslint-disable-next-line vue/require-prop-types
    props: ['getModeSelect'],
    emits: ['prevSon'],
    setup(props, { emit }) {
      const { proxy } = getCurrentInstance();
      const getTransferConfigKafkaValue = ref({});
      const refTransferConfigKafka = ref(null);
      const refTransferConfigMqtt = ref(null);
      const refTransferConfigRabbitMq = ref(null);
      const refTransferConfigApi = ref(null);
      const isWhereComp = ref('');

      const editSonData = reactive({
        type: '',
        configuration: {},
        name: '',
      });
      const getSonPrev = () => {
        emit('prevSon');
      };
      watch(
        () => props.getModeSelect,
        (val) => {
          isWhereComp.value = val.type;
        }
      );
      const clearSonValueDataFunc = () => {
        proxy.$refs.refTransferConfigKafka.customClearStepTwoValueFunc();

        // try {
        //   if (isWhereComp.value == 'KafKA') {
        //     onMounted(() => {
        //       proxy.$refs.refTransferConfigKafka.customClearStepTwoValueFunc();
        //     });
        //   } else if (isWhereComp.value == 'MQTT') {
        //     proxy.$refs.refTransferConfigMqtt.customClearStepTwoValueFunc();
        //   } else if (isWhereComp.value == 'RabbitMq') {
        //     proxy.$refs.refTransferConfigRabbitMq.customClearStepTwoValueFunc();
        //   } else if (isWhereComp.value == 'Api') {
        //     proxy.$refs.refTransferConfigApi.customClearStepTwoValueFunc();
        //   }
        // } catch (e) {
        //   return e;
        // }
      };
      const getSonValueDataFunc = () => {
        if (isWhereComp.value == 'KafKA') {
          getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigKafka.getSonValueFunc();
        } else if (isWhereComp.value == 'MQTT') {
          getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigMqtt.getSonValueFunc();
        } else if (isWhereComp.value == 'RabbitMq') {
          getTransferConfigKafkaValue.value =
            proxy.$refs.refTransferConfigRabbitMq.getSonValueFunc();
        } else if (isWhereComp.value == 'Api') {
          getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigApi.getSonValueFunc();
        }
        return getTransferConfigKafkaValue.value;
      };
      const editSonValueDataFunc = (v) => {
        editSonData.type = v.type;
        editSonData.configuration = v.configuration;
        editSonData.name = v.name;
        if (editSonData.type == 'KafKA') {
          isWhereComp.value = editSonData.type;
          try {
            setTimeout(() => {
              proxy.$refs.refTransferConfigKafka.setStepTwoFieldsValueFunc(
                editSonData.configuration,
                editSonData.name
              );
            }, 10);
          } catch (e) {
            return e;
          }
        } else if (editSonData.type == 'MQTT') {
          isWhereComp.value = editSonData.type;
          proxy.$refs.refTransferConfigMqtt.setStepTwoFieldsValueFunc(
            editSonData.configuration,
            editSonData.name
          );
        } else if (editSonData.type == 'RabbitMq') {
          isWhereComp.value = editSonData.type;
          proxy.$refs.refTransferConfigRabbitMq.setStepTwoFieldsValueFunc(
            editSonData.configuration,
            editSonData.name
          );
        } else if (editSonData.type == 'Api') {
          isWhereComp.value = editSonData.type;
          proxy.$refs.refTransferConfigApi.setStepTwoFieldsValueFunc(
            editSonData.configuration,
            editSonData.name
          );
        }
      };
      return {
        clearSonValueDataFunc,
        editSonValueDataFunc,
        refTransferConfigKafka,
        getSonValueDataFunc,
        getSonPrev,
        isWhereComp,
        refTransferConfigMqtt,
        refTransferConfigRabbitMq,
        refTransferConfigApi,
      };
    },
  });
</script>
<style lang="less" scoped></style>