ConverScriptModal.vue 2.12 KB
<template>
  <div>
    <BasicModal
      destroyOnClose
      v-bind="$attrs"
      width="60rem"
      @register="register"
      :title="getTitle"
      :minHeight="500"
      @cancel="handleCancel"
      @ok="handleSubmit"
    >
      <ConverScript :ifAdd="isTest ? false : true" ref="converScriptRef" />
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import ConverScript from './ConverScript.vue';

  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
  const isUpdate = ref(false);
  const isViewDetail = ref('');
  const isTest = ref(false);
  const isText = ref('');
  const isTitle = ref('');
  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ loading: true });
    handleCancel(false);
    isUpdate.value = data.isUpdate;
    isViewDetail.value = data.isView;
    isTest.value = data.isTest;
    isText.value = data.isText;
    isTitle.value = data.isTitle;
    converScriptRef.value?.initEditor(data.record?.configuration?.jsScript);
    setModalProps({ loading: false });
    if (!unref(isViewDetail)) {
      const title =
        unref(isTitle) == 'edit'
          ? '编辑转换脚本'
          : unref(isTitle) == 'add'
          ? '新增转换脚本'
          : '测试转换脚本';
      const okText = isText.value == 'test' ? '测试' : '确定';
      setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
      if (!unref(isUpdate)) {
      }
    } else {
      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
    }
  });
  const handleSubmit = async () => {
    const val = await converScriptRef.value?.getFormData();
    console.log(val);
    handleCancel(true);
  };
  const handleCancel = (flag) => {
    if (flag) {
      closeModal();
    }
    converScriptRef.value?.resetFormData();
  };
</script>
<style lang="less" scoped>
  @import url('./ConverScriptModal.less');
</style>