109 lines
2.6 KiB
Vue
109 lines
2.6 KiB
Vue
|
<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>
|