hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-16 14:26:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

导入学员

Browse Source
This commit is contained in:
weixiaobo@boe.com.cn
2023-07-31 18:51:55 +08:00
parent 83518f04a0
commit 805f2233e0
1 changed files with 378 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

383
src/views/audience/audienceManage.vue
View File

@@ -327,7 +327,7 @@
<div class="search"></div>
<div class="btnText">添加</div>
</div>
<div style="margin-right:10px" class="btn btn3" @click="handleExportAudienceMemberClick">
<div style="margin-right:10px" class="btn btn3" @click="handleImportAudienceMemberClick">
<!-- <div class="search"></div> -->
<div class="btnText">导入</div>
</div>
@@ -495,6 +495,95 @@
</div>
</a-drawer>
<!-- </a-modal> -->
<!-- <import-stu v-model:Importvisible="visibleImportAudience" /> -->
<a-drawer
:visible="visibleImportAudience"
class="drawerStyle impotergroupleader"
placement="right"
width="800px"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">{{ "导入学员" }}</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeImportDrawer"
/>
</div>
<div class="main">
<div class="minatitl" v-if="templateUrl">
<div class="up1">请下载</div>
<a class="up2" :href="templateUrl" target="_blank" style="cursor: pointer">模板</a>
<div class="up1">，按要求填写数据并导入</div>
</div>
<div class="upload">
<div class="text">上传：</div>
<div class="right">
<div style="height: 176px; margin-bottom: 20px">
<a-upload-dragger
:data="{ audienceId:audienceId }"
:multiple="true"
name="memberExcel"
:accept="accept"
: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'">
<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="closeImportDrawer">取消</button>
<button class="btn2" @click="closeImportDrawer">确定</button>
</div>
</div>
</a-drawer>
</div>
</template>
<script setup>
@@ -793,6 +882,10 @@ const visibleAddAudience = ref(false);
const addAudienceTitle = ref("添加受众");
const visibleAudienceInfo = ref(false);
const visibleAudienceMember = ref(false);
const visibleImportAudience = ref(false);
const templateUrl = ref(process.env.VUE_APP_BOE_API_URL+"/pc/template/usergroup_template.xlsx");
const fileList = ref([]);
const uploadUrl = ref(process.env.VUE_APP_BOE_API_URL + "/importMember");
const ruleForm = ref({
audienceName: "",
description: "",
@@ -1440,9 +1533,13 @@ const onResetUser = () => {
searchDataUser.value.pageNo = 1;
getAudienceUserListFun();
}
const handleExportAudienceMemberClick = () => {
// visibleAddAudience.value = true;
const handleImportAudienceMemberClick = () => {
visibleImportAudience.value = true;
}
// 关闭导入学员抽屉
const closeImportDrawer = () => {
fileList.value = [];
visibleImportAudience.value = false;
}
const handleAddAudienceMember = async () => {
let res = await addAudienceMember({
@@ -2385,12 +2482,13 @@ const closeDrawer = () => {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
// margin-left: 24px;
}
}
.contentMain {
@@ -2479,4 +2577,279 @@ const closeDrawer = () => {
}
}
}
.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: 28px;
}
}
.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);
}
}
}
}
}
}
</style>