geg-gas-web/src/views/workflow/task/components/LookProcess.vue

<template>
  <span @click.stop="look"
    ><slot></slot>
    <LoadingBox v-if="showLoading" />
    <ProcessLayout class="wrap" v-if="visible" @click.stop="">
      <template #title> {{ t('查看流程') }} </template>
      <template #close>
        <a-button type="primary" class="clean-icon" @click.stop="close">{{ t('关闭') }}</a-button>
      </template>
      <template #full>
        <LookTask v-if="visible" :taskId="props.taskId" :processId="props.processId" :schemaId="props.schemaId"/>
      </template>
    </ProcessLayout>
  </span>
</template>

<script setup lang="ts">
  import ProcessLayout from './flow/Layout.vue';
  import LookTask from './flow/LookTask.vue';
  import { LoadingBox } from '/@/components/ModalPanel/index';
  import { notification } from 'ant-design-vue';
  import { onActivated, onMounted, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const props = withDefaults(
  defineProps<{
    processId: string;
    taskId: string;
    schemaId: string;
    visible?: boolean;
  }>(),
  {
    processId: '',
    taskId: '',
    schemaId: '',
    visible: false,
  },
);
  let emits = defineEmits(['close']);
  let visible = ref(false);
  let showLoading = ref(false);
  onMounted(() => {
    if (props.visible) {
      look();
    }
  });
  function look() {
    if (props.processId) {
      showLoading.value = false;
      visible.value = true;
    } else {
      showLoading.value = false;
      notification.open({
        type: 'error',
        message: t('查看'),
        description: t('请选择一个流程进行查看'),
      });
    }
  }
  function close() {
    visible.value = false;
    emits('close');
  }
  defineExpose({
    look,
  });
</script>