ConverScriptModal.vue
3.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<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);
        if (data.text !== BusinessConvertScriptTextEnum.BUSINESS_EDIT_TEXT) {
          //编辑是不能禁用脚本类型的
          converScriptFormRef.value?.setDisableRadio(data.record.scriptType);
        }
      } else {
        //从新增页面里点击的测试,禁用脚本类型
        converScriptFormRef.value?.setFormData(data.record);
        converScriptFormRef.value?.setDisableTestRadio(data.record.scriptType);
      }
      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>