初始版本提交

src/views/workflow/design/ImportFlow.vue

@@ -0,0 +1,108 @@
+<template>
+  <span @click.stop="open"
+    ><slot></slot>
+    <a-modal
+      v-model:visible="data.visible"
+      :title="t('导入流程')"
+      :maskClosable="false"
+      @ok="close"
+      @cancel="close"
+      @click.stop=""
+    >
+      <div class="upload-box">
+        <a-upload
+          class="upload-box"
+          name="file"
+          accept=".json,.txt"
+          :headers="data.headers"
+          :max-count="1"
+          :showUploadList="false"
+          :action="data.action"
+          @change="handleChange"
+        >
+          <img :src="BgImg" />
+          <div class="a-upload__text"
+            >{{ t('将文件拖到此处，或') }}<em>{{ t('点击上传') }}</em></div
+          >
+        </a-upload>
+      </div>
+    </a-modal>
+  </span>
+</template>
+
+<script setup lang="ts">
+  import { reactive } from 'vue';
+  import BgImg from '/@/assets/workflow/process_import.png';
+  import { getAppEnvConfig } from '/@/utils/env';
+  import { getToken } from '/@/utils/auth';
+  import type { UploadChangeParam } from 'ant-design-vue';
+  import { message } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const { t } = useI18n();
+  let emits = defineEmits(['close']);
+  const data: {
+    visible: boolean;
+    action: string;
+    headers: { Authorization: string };
+  } = reactive({
+    visible: false,
+    action: '',
+    headers: { Authorization: '' },
+  });
+
+  async function open() {
+    data.visible = true;
+    data.action = getAppEnvConfig().VITE_GLOB_API_URL + '/workflow/schema/import';
+    data.headers.Authorization = `Bearer ${getToken()}`;
+  }
+  function close() {
+    data.visible = false;
+    emits('close');
+  }
+  function handleChange(info: UploadChangeParam) {
+    if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (info.file.status === 'done') {
+      if (info.file && info.file.response && info.file.response.code == 0) {
+        message.success(t(`{name}导入成功！`, { name: info.file.name }));
+        close();
+      } else {
+        message.error(t('导入流程失败！'));
+      }
+    } else if (info.file.status === 'error') {
+      message.error(t(`{name}上传失败.`, { name: info.file.name }));
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .upload-box {
+    display: inline-block;
+  }
+
+  .upload-demo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .a-upload-dragger {
+    width: 615px;
+    height: 370px;
+    border: none;
+  }
+
+  .a-upload__text {
+    position: absolute;
+    bottom: 100px;
+    right: 100px;
+    font-weight: bold;
+    color: #1d2027;
+  }
+
+  em {
+    font-style: normal;
+    color: #4f83fd;
+  }
+</style>