mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 19:06:45 +08:00
481 lines
13 KiB
Vue
481 lines
13 KiB
Vue
<template>
|
||
<div @click="openDrawer">
|
||
<slot></slot>
|
||
</div>
|
||
<a-drawer
|
||
:visible="visible"
|
||
class="drawerStyle impotergroupleader"
|
||
placement="right"
|
||
width="800px"
|
||
>
|
||
<div class="drawerMain">
|
||
<div class="header">
|
||
<div class="headerTitle">{{ title }}</div>
|
||
<img
|
||
style="width: 29px; height: 29px; cursor: pointer"
|
||
src="../../../assets/images/basicinfo/close.png"
|
||
@click="closeDrawer"
|
||
/>
|
||
</div>
|
||
<div class="main">
|
||
<div class="up1" v-if="templateUrl">
|
||
请下载
|
||
<a :href="templateUrl" target="_blank">模版</a>
|
||
，按要求填写并导入
|
||
</div>
|
||
<div class="upload">
|
||
<div class="text">上传：</div>
|
||
<div class="right">
|
||
<div style="height: 176px; margin-bottom: 20px">
|
||
<a-upload-dragger
|
||
:data="data"
|
||
:multiple="true"
|
||
:accept="accept"
|
||
:headers="headers"
|
||
:action="uploadUrl"
|
||
@change="handleChange"
|
||
v-model:file-list="fileList"
|
||
>
|
||
<p class="ant-upload-drag-icon">
|
||
<inbox-outlined></inbox-outlined>
|
||
</p>
|
||
<p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
|
||
<p class="ant-upload-hint">支持扩展名：.xls/.xlsx</p>
|
||
<template #itemRender="{ file }">
|
||
<div class="loadstate">
|
||
<div class="loadborder">
|
||
<div class="content">
|
||
<div class="img"></div>
|
||
<div class="timebox">
|
||
<div class="timetop">
|
||
<div class="tit">{{ file.name }}</div>
|
||
<div class="stateloading">{{
|
||
{
|
||
done: '上传成功',
|
||
uploading: '正在上传',
|
||
error: '上传失败',
|
||
removed: '正在上传',
|
||
}[file.status]
|
||
}}
|
||
</div>
|
||
</div>
|
||
<a-progress :percent="file.percent"/>
|
||
</div>
|
||
<div class="curloading">
|
||
<div style="color: #387df7; margin-left: 20px; cursor: pointer"
|
||
v-if="file.uploadState?.status === 'FAILED'" @click="downloadErrorData(file.uploadState?.url)">
|
||
下载失败数据
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a-spin :spinning="true" v-if="file.uploadState?.status === 'START'"/>
|
||
<div :class="file.uploadState?.status === 'SUCCESS'?'succebox':'defeatbox'" v-if="file.uploadState?.status === 'FAILED'">
|
||
<img style="width: 14px; height: 14px; margin-left: 16px"
|
||
:src="file.uploadState?.status === 'SUCCESS' ? success:err"/>
|
||
<div class="tacl">{{file.uploadState?.successNum || 0}}条数据导入成功，{{file.uploadState?.failedNum || 0}}条数据导入失败</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</a-upload-dragger>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btnn">
|
||
<button class="btn2" @click="closeDrawer">取消</button>
|
||
<button class="btn2" @click="closeDrawer">确定</button>
|
||
</div>
|
||
</div>
|
||
</a-drawer>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {defineEmits, defineProps, ref} from "vue";
|
||
import {getImportStatus} from "@/api/index1";
|
||
import {useTimeout} from "@/utils/useCommon";
|
||
import err from "@/assets/images/err.png";
|
||
import success from "@/assets/images/success.png";
|
||
import {getCookieForName} from "@/api/method";
|
||
|
||
const props = defineProps({
|
||
url: String,
|
||
title: String,
|
||
accept: String,
|
||
fileType: Object,
|
||
data: Object,
|
||
templateUrl: String,
|
||
})
|
||
const emit = defineEmits({})
|
||
|
||
const visible = ref(false)
|
||
const fileList = ref([])
|
||
const uploadUrl = ref(process.env.VUE_APP_BASE_API + props.url);
|
||
const headers = { token: getCookieForName("token") };
|
||
const {start} = useTimeout(async ({uuid,file}) => {
|
||
const {data: {data: upData}} = await getImportStatus(uuid)
|
||
file.uploadState = upData;
|
||
fileList.value=[...fileList.value]
|
||
if (upData && upData.status !== "START" && upData.status !== "NULL") {
|
||
emit('change','end')
|
||
throw Error("查询任务结束")
|
||
}
|
||
}, 1000)
|
||
|
||
const closeDrawer = () => {
|
||
visible.value = false;
|
||
fileList.value = [];
|
||
};
|
||
|
||
function openDrawer() {
|
||
visible.value = true
|
||
}
|
||
|
||
function downloadErrorData(url) {
|
||
window.open(process.env.VUE_APP_FILE_PATH + url)
|
||
}
|
||
|
||
function handleChange({file}) {
|
||
emit('change','start');
|
||
file && file.response && start({uuid:file.response.data,file})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.impotergroupleader {
|
||
.drawerMain {
|
||
min-width: 600px;
|
||
margin: 0px 32px 0px 32px;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.header {
|
||
height: 73px;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
// background-color: red;
|
||
margin-bottom: 20px;
|
||
flex-shrink: 0;
|
||
|
||
.headerTitle {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
line-height: 25px;
|
||
// margin-left: 24px;
|
||
}
|
||
}
|
||
|
||
.main {
|
||
|
||
.minatitl {
|
||
display: flex;
|
||
|
||
.up1 {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.up2 {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #4ea6ff;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
.upload {
|
||
margin-top: 32px;
|
||
display: flex;
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.right {
|
||
margin-left: 6px;
|
||
width: 500px;
|
||
|
||
.load {
|
||
width: 500px;
|
||
height: 176px;
|
||
background: #f5f9fd;
|
||
border-radius: 4px;
|
||
// opacity: 0.3;
|
||
border: 1px dashed #caddfd;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
|
||
.cloud {
|
||
margin-top: 52px;
|
||
width: 28px;
|
||
height: 28px;
|
||
background-image: url(../../../assets/images/basicinfo/cloud.png);
|
||
}
|
||
|
||
.tip {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #4ea6ff;
|
||
margin-top: 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tipz {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.loadstate {
|
||
width: 500px;
|
||
margin-bottom: 50px;
|
||
|
||
.loadborder {
|
||
width: 500px;
|
||
height: 173px;
|
||
border-radius: 4px;
|
||
border: 1px dashed #eaeaea;
|
||
margin-bottom: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
|
||
.content {
|
||
display: flex;
|
||
margin-left: 20px;
|
||
position: relative;
|
||
|
||
.defeat {
|
||
width: 262px;
|
||
padding: 10px 20px;
|
||
position: absolute;
|
||
left: 46px;
|
||
top: 42px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
height: 32px;
|
||
border-radius: 2px;
|
||
border: 1px solid #387df7;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.detext {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #387df7;
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 30px;
|
||
height: 34px;
|
||
background-image: url(../../../assets/images/basicinfo/exl.png);
|
||
}
|
||
|
||
.timebox {
|
||
margin-left: 15px;
|
||
margin-top: -5px;
|
||
|
||
.timetop {
|
||
display: flex;
|
||
width: 262px;
|
||
justify-content: space-between;
|
||
// margin-bottom: 8px;
|
||
.tit {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.stateloading {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #4ea6ff;
|
||
}
|
||
|
||
.statedefeat {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ff7474;
|
||
}
|
||
|
||
.statesucce {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #35ae69;
|
||
}
|
||
}
|
||
|
||
.prog {
|
||
width: 262px;
|
||
height: 5px;
|
||
background: #eaf1fe;
|
||
border-radius: 4px;
|
||
|
||
.inprogloading {
|
||
width: 55%;
|
||
height: 5px;
|
||
border-radius: 4px;
|
||
|
||
background: #4ea6ff;
|
||
}
|
||
|
||
//下载失败条
|
||
.inprogdefeat {
|
||
width: 55%;
|
||
height: 5px;
|
||
border-radius: 4px;
|
||
|
||
background: #ff7474;
|
||
}
|
||
|
||
//下载成功条
|
||
.inprogsucce {
|
||
width: 100%;
|
||
height: 5px;
|
||
border-radius: 4px;
|
||
|
||
background: #57c887;
|
||
}
|
||
}
|
||
}
|
||
|
||
.curloading {
|
||
margin-left: 15px;
|
||
margin-top: 15px;
|
||
display: flex;
|
||
|
||
.cur {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.cancel {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #387df7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.downloadErr {
|
||
width: 120px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 2px;
|
||
border: 1px solid #387df7;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #387df7;
|
||
line-height: 20px;
|
||
cursor: pointer;
|
||
margin-left: 66px;
|
||
margin-top: 16px;
|
||
position: absolute;
|
||
bottom: 28;
|
||
}
|
||
}
|
||
|
||
.defeatbox {
|
||
width: 500px;
|
||
height: 40px;
|
||
margin-top: 20px;
|
||
background: rgba(255, 116, 116, 0.1);
|
||
border: 1px solid #ff7474;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.lefimg {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 8px;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.tacl {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
margin-left: 17px;
|
||
color: #ff7474;
|
||
}
|
||
}
|
||
.succebox {
|
||
width: 500px;
|
||
height: 40px;
|
||
background: rgba(53, 174, 105, 0.1);
|
||
border: 1px solid #35ae69;
|
||
display: flex;
|
||
align-items: center;
|
||
.lefimg {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-left: 17px;
|
||
margin-right: 8px;
|
||
background-size: 100%;
|
||
}
|
||
.tacl {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
|
||
color: rgba(0, 0, 0, 0.65);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btnn {
|
||
height: 72px;
|
||
width: 100%;
|
||
position: absolute;
|
||
background-color: #fff;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
||
|
||
.btn1 {
|
||
width: 100px;
|
||
height: 40px;
|
||
border: 1px solid #4ea6ff;
|
||
border-radius: 8px;
|
||
color: #4ea6ff;
|
||
background-color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn2 {
|
||
cursor: pointer;
|
||
width: 100px;
|
||
height: 40px;
|
||
background: #4ea6ff;
|
||
border-radius: 8px;
|
||
border: 0;
|
||
margin-left: 15px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|