ConverScriptModal.vue 3.21 KB
<template>
  <div>
    <BasicModal
      destroyOnClose
      v-bind="$attrs"
      width="60rem"
      @register="register"
      :minHeight="500"
      @cancel="handleCancel"
      @ok="handleSubmit"
    >
      <ConverScriptForm
        ref="converScriptFormRef"
        :isNotTest="businessText !== BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT"
        :isView="businessText === BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT"
      />
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, nextTick, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ConverScriptForm } from './index';
  import {
    createOrEditScriptManage,
    getScriptManageDetail,
    testScriptManage,
  } from '/@/api/scriptmanage/scriptManager';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BusinessConvertScriptTextEnum } from '../config';
  import { useHooks } from '../hooks/index.hooks';
  import { useThrottleFn } from '@vueuse/shared';

  const emits = defineEmits(['success', 'register']);

  const { createMessage } = useMessage();

  const { setPropsForModal, businessTextIsTest } = useHooks();

  const converScriptFormRef = ref<InstanceType<typeof ConverScriptForm>>();

  const businessText = ref('');

  const restData = reactive({
    data: {},
  });

  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    try {
      await nextTick();
      businessText.value = data.text;
      restData.data = data.record;
      setModalProps(setPropsForModal(data.text));
      handleCancel(false);
      if (!data.record) return;
      if (!data.innerTest) {
        const rest = await getScriptManageDetail(data.record?.id);
        converScriptFormRef.value?.setFormData(rest);
      } else converScriptFormRef.value?.setFormData(data.record);
      if (data.scriptType) {
        converScriptFormRef.value?.setDisableRadio(data.scriptType);
      }
    } finally {
      setModalProps({
        loading: false,
      });
    }
  });

  const handleSubmit = () => useThrottle();

  const useThrottle = useThrottleFn(() => {
    getValue();
  }, 2000);

  const getValue = async () => {
    try {
      setModalProps({ confirmLoading: true });
      const formData = await converScriptFormRef.value?.getFormData();
      const rest = businessTextIsTest(businessText.value)
        ? ((await testScriptManage(formData)) as any)
        : ((await createOrEditScriptManage({ ...restData.data, ...formData })) as any);
      if (businessTextIsTest(businessText.value)) {
        createMessage.success(`${businessText.value}成功`);
        converScriptFormRef.value?.setScriptOutputData(rest?.output || rest?.error);
      } else {
        createMessage.success(`${businessText.value}成功`);
        closeModal();
        emits('success', {
          rest,
          text: businessText.value,
        });
      }
    } finally {
      setModalProps({ confirmLoading: false });
    }
  };

  const handleCancel = (flag) => {
    if (flag) {
      closeModal();
    }
    converScriptFormRef.value?.resetFormData();
  };
</script>
<style lang="less" scoped></style>