index.vue 8.58 KB

Raw Blame History Permalink

<template>
  <div>
    <div>
      <Tabs @change="handleChange" v-model:activeKey="activeKey">
        <TabPane class="tab-pane" forceRender key="Params" tab="Params">
          <ParamsTable ref="paramsCellTableRef" />
          <ParamsTest
            @testParamsInterface="handleTestParamsInterface"
            @closeTest="onCloseTest"
            ref="testParamsRequestRef"
            :data="dataMap.mapParamsObj"
            :interfaceType="interfaceType"
          />
        </TabPane>
        <TabPane
          v-if="
            method !== RequestMethodTypeEnum.WEBSOCKET &&
            requestTypeAndUrl?.requestHttpType !== RequestHttpTypeEnum.GET
          "
          class="tab-pane"
          forceRender
          key="Body"
          tab="Body"
        >
          <Body ref="bodyRef" @resetValue="handleResetValue" />
          <BodyTest
            v-if="bodyType !== RequestBodyTypeEnum.NONE"
            @testBodyInterface="handleTestBodyInterface"
            @closeTest="onCloseTest"
            ref="testBodyRequestRef"
            :interfaceType="interfaceType"
            :data="dataMap.mapBodyObj"
          />
        </TabPane>
        <TabPane
          v-if="method !== RequestMethodTypeEnum.WEBSOCKET"
          class="tab-pane"
          forceRender
          key="Header"
          tab="Header"
        >
          <HeaderTable ref="editHeaderCellTableRef" />
          <HeaderTest
            @testHeaderInterface="handleTestHeaderInterface"
            @closeTest="onCloseTest"
            ref="testHeaderRequestRef"
            :interfaceType="interfaceType"
            :data="dataMap.mapHeaderObj"
          />
        </TabPane>
      </Tabs>
    </div>
    <div>
      <ExcuteTest
        ref="excuteTestRef"
        @emitExcute="handleEmitExcute"
        :data="excuteData"
        :method="method"
        :httpType="requestTypeAndUrl?.requestHttpType"
      />
    </div>
  </div>
</template>
<script lang="ts" setup name="simpleRequest">
  import { ref, nextTick, reactive } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import Body from './components/body.vue';
  import { ParamsTest, HeaderTest, BodyTest } from '../TestInterface/index';
  import HeaderTable from './components/headerTable.vue';
  import ParamsTable from './components/paramsTable.vue';
  import { isEmpty } from '/@/utils/is';
  import { useUtils } from '../../hooks/useUtils';
  import ExcuteTest from '../TestInterface/components/excuteTest.vue';
  import {
    RequestMethodTypeEnum,
    RequestHttpTypeEnum,
    RequestBodyTypeEnum,
    RequestOriginTypeEnum,
  } from '../../config/enum';

  const props = defineProps({
    method: {
      type: String,
    },
    requestTypeAndUrl: {
      type: Object,
    },
    requestOriginUrl: {
      type: String,
    },
    originUrlType: {
      type: String,
    },
    interfaceType: {
      type: String,
    },
    filterValue: {
      type: String,
    },
  });

  const emits = defineEmits(['activeKey']);

  const { pushObj } = useUtils();

  const activeKey = ref('Params');

  const excuteData = ref({});

  const bodyType = ref('');

  const paramsCellTableRef = ref<InstanceType<typeof ParamsTable>>();

  const editHeaderCellTableRef = ref<InstanceType<typeof ParamsTable>>();

  const excuteTestRef = ref<InstanceType<typeof ExcuteTest>>();

  const bodyRef = ref<InstanceType<typeof Body>>();

  const testParamsRequestRef = ref<InstanceType<typeof ParamsTest>>();

  const testBodyRequestRef = ref<InstanceType<typeof ParamsTest>>();

  const testHeaderRequestRef = ref<InstanceType<typeof HeaderTest>>();

  const dataMap: any = reactive({
    mapParamsObj: {},
    mapBodyObj: {},
    mapHeaderObj: {},
  });

  const handleChange = () => excuteTestRef.value?.resetValue(false);

  const handleResetValue = (v) => {
    bodyType.value = v;
    handleClickReset();
  };

  const handleClickReset = () => {
    testParamsRequestRef.value?.setValue();
    testHeaderRequestRef.value?.setValue();
    testBodyRequestRef.value?.setValue();
    excuteTestRef.value?.resetValue(true);
  };

  const onCloseTest = () => excuteTestRef.value?.resetValue(true);

  const dataForTypeMap = [
    [(type) => type === 'Params', (data) => paramsCellTableRef.value?.setValue(data)],
    [(type) => type === 'Body', (data) => bodyRef.value?.setValue(data)],
    [(type) => type === 'Header', (data) => editHeaderCellTableRef.value?.setValue(data)],
  ];

  const handleEmitExcute = () => {
    let apiGetUrl = '';
    if (props?.method === RequestMethodTypeEnum.WEBSOCKET) {
      if (props?.originUrlType === RequestOriginTypeEnum.SERVER_URL) {
        const pathUrl = window.location.host;
        const protocol = window.location.protocol;
        apiGetUrl = `${
          protocol === 'http:' ? 'ws:' : protocol === 'https:' ? 'wss:' : 'ws:'
        }//${pathUrl}${props?.requestTypeAndUrl?.requestUrl}`;
      } else {
        apiGetUrl = `${props?.requestOriginUrl}${props?.requestTypeAndUrl?.requestUrl}`;
      }
    } else {
      if (props?.originUrlType === RequestOriginTypeEnum.SERVER_URL) {
        const pathUrl = window.location.host;
        const protocol = window.location.protocol;
        apiGetUrl = `${protocol}//${pathUrl}${props?.requestTypeAndUrl?.requestUrl}`;
      } else {
        apiGetUrl = `${props?.requestOriginUrl}${props?.requestTypeAndUrl?.requestUrl}`;
      }
    }
    excuteData.value = {
      apiGetUrl,
      method: props?.method,
      apiType: props?.requestTypeAndUrl?.requestHttpType,
      Type: activeKey.value,
      Params: testParamsRequestRef.value?.getTestValue(),
      Header: testHeaderRequestRef.value?.getTestValue(),
      Body: testBodyRequestRef.value?.getTestValue(),
    };
  };

  const getCompose = () => {
    return {
      requestOriginUrl: props.requestOriginUrl,
      requestTypeAndUrl: props.requestTypeAndUrl,
      method: props.method,
      activeKey: activeKey.value,
      originUrlType: props.originUrlType,
    };
  };

  const commonExcuteRef = () => {
    excuteTestRef.value?.showTest();
    excuteTestRef.value?.resetValue(false);
    excuteTestRef.value?.editSetFilterValue(props.filterValue);
  };

  const handleTestParamsInterface = () => {
    commonExcuteRef();
    let value = getValue(false) as any;
    dataMap.mapParamsObj = {
      list: value?.Params,
      ...getCompose(),
    };
  };

  const handleTestBodyInterface = () => {
    let value = getValue(false) as any;
    const type = value?.Body?.requestParamsBodyType;
    commonExcuteRef();
    let values = [];
    for (let i in value?.Body) if (i === type) values = value?.Body[i];
    dataMap.mapBodyObj = {
      list: values,
      type,
      ...getCompose(),
    };
  };

  const handleTestHeaderInterface = () => {
    commonExcuteRef();
    let value = getValue(false) as any;
    dataMap.mapHeaderObj = {
      list: value?.Header,
      ...getCompose(),
    };
  };

  //获取数据
  const getValue = (status) => {
    const type = activeKey.value;
    status ? emits('activeKey', type) : null;
    const Body = bodyRef.value?.getValue();
    const Params = paramsCellTableRef.value?.getValue();
    const Header = editHeaderCellTableRef.value?.getValue();
    return {
      Params,
      Header,
      Body,
    };
  };

  //获取编写过滤器里的数
  const getFilterValue = () => {
    return excuteTestRef?.value?.getFilterValue();
  };

  //设置数据
  const setValue = (data, flag, defaultValue) => {
    if (!flag) {
      nextTick(() => {
        const Objects = JSON.parse(data?.requestParams);
        if (!Objects) return;
        dataForTypeMap[0][1](isEmpty(Objects?.Params) ? [pushObj] : Objects?.Params);
        dataForTypeMap[1][1](isEmpty(Objects?.Body) ? {} : Objects?.Body);
        dataForTypeMap[2][1](isEmpty(Objects?.Header) ? [pushObj] : Objects?.Header);
      });
    } else {
      nextTick(() => {
        dataForTypeMap[0][1](defaultValue);
      });
    }
  };

  //重置数据
  const resetValue = () => {
    activeKey.value = 'Params';
    nextTick(() => {
      paramsCellTableRef.value?.resetValue();
      editHeaderCellTableRef.value?.resetValue();
      bodyRef.value?.resetValue();
      handleClickReset();
    });
  };

  defineExpose({
    getValue,
    setValue,
    resetValue,
    getFilterValue,
  });
</script>

<style lang="less" scoped>
  .tab-pane {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }
</style>