mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-14 21:36:44 +08:00
fix -- 导入组长和路径图
This commit is contained in:
@@ -1,10 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div @click="openDrawer">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
<a-drawer
|
<a-drawer
|
||||||
:visible="ImpoterGroupLeaderV"
|
:visible="visible"
|
||||||
class="drawerStyle impotergroupleader"
|
class="drawerStyle impotergroupleader"
|
||||||
placement="right"
|
placement="right"
|
||||||
width="800px"
|
width="800px"
|
||||||
@after-visible-change="afterVisibleChange"
|
|
||||||
>
|
>
|
||||||
<div class="drawerMain">
|
<div class="drawerMain">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
@@ -28,146 +30,58 @@
|
|||||||
<div class="right">
|
<div class="right">
|
||||||
<div style="height: 176px; margin-bottom: 20px">
|
<div style="height: 176px; margin-bottom: 20px">
|
||||||
<a-upload-dragger
|
<a-upload-dragger
|
||||||
v-model:fileList="fileList"
|
:data="data"
|
||||||
:action="importLeader"
|
|
||||||
name="uploadFile"
|
|
||||||
:multiple="true"
|
:multiple="true"
|
||||||
|
:accept="accept"
|
||||||
|
:action="uploadUrl"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
:showUploadList="false"
|
v-model:file-list="fileList"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
>
|
>
|
||||||
<p class="ant-upload-drag-icon">
|
<p class="ant-upload-drag-icon">
|
||||||
<inbox-outlined></inbox-outlined>
|
<inbox-outlined></inbox-outlined>
|
||||||
</p>
|
</p>
|
||||||
<p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
|
<p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
|
||||||
<p class="ant-upload-hint">支持扩展名:.xls/.xlsx</p>
|
<p class="ant-upload-hint">支持扩展名:.xls/.xlsx</p>
|
||||||
</a-upload-dragger>
|
<template #itemRender="{ file }">
|
||||||
</div>
|
|
||||||
<!-- <div class="load">
|
|
||||||
<div class="cloud"></div>
|
|
||||||
<div class="tip">点击或将文件拖拽到此处上传</div>
|
|
||||||
<div class="tipz">支持扩展名:.xls/.xlsx</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="loadstate">
|
<div class="loadstate">
|
||||||
<div
|
<div class="loadborder">
|
||||||
class="loadborder"
|
|
||||||
v-if="uploadpercent < 100 && uploadpercent !== -1"
|
|
||||||
>
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="img"></div>
|
<div class="img"></div>
|
||||||
<div class="timebox">
|
<div class="timebox">
|
||||||
<div class="timetop">
|
<div class="timetop">
|
||||||
<div class="tit">{{ fileName }}</div>
|
<div class="tit">{{ file.name }}</div>
|
||||||
<div class="stateloading">正在上传</div>
|
<div class="stateloading">{{
|
||||||
|
{
|
||||||
|
done: '上传成功',
|
||||||
|
uploading: '正在上传',
|
||||||
|
error: '上传失败',
|
||||||
|
removed: '正在上传',
|
||||||
|
}[file.status]
|
||||||
|
}}
|
||||||
</div>
|
</div>
|
||||||
<a-progress :percent="uploadpercent" />
|
</div>
|
||||||
<!-- <div class="prog">
|
<a-progress :percent="file.percent"/>
|
||||||
<div class="inprogloading"></div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="curloading">
|
<div class="curloading">
|
||||||
<!-- <div class="cur">55%</div> -->
|
<div class="cur">{{ file.percent }}%</div>
|
||||||
<!-- <div class="cancel" style="margin-left: 20px">暂停</div>
|
<div style="color: #387df7; margin-left: 20px; cursor: pointer"
|
||||||
<div class="cancel" style="margin-left: 15px">取消</div> -->
|
v-if="file.uploadState?.status === 'FAILED'" @click="downloadErrorData(file.uploadState?.url)">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="loadborder" v-if="uploadErr">
|
|
||||||
<div class="content">
|
|
||||||
<div class="img"></div>
|
|
||||||
<div class="timebox">
|
|
||||||
<div class="timetop">
|
|
||||||
<div class="tit">{{ fileName }}</div>
|
|
||||||
<div class="statedefeat">上传失败</div>
|
|
||||||
</div>
|
|
||||||
<a-progress :percent="uploadpercent" />
|
|
||||||
<!-- <div class="prog">
|
|
||||||
<div class="inprogdefeat"></div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="curloading">
|
|
||||||
<!-- <div class="cur">55%</div> -->
|
|
||||||
<div
|
|
||||||
style="color: #387df7; margin-left: 20px; cursor: pointer"
|
|
||||||
>
|
|
||||||
下载失败数据
|
|
||||||
</div>
|
|
||||||
<!-- <div class="cancel" style="margin-left: 20px">暂停</div>
|
|
||||||
<div class="cancel" style="margin-left: 15px">取消</div> -->
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="defeat"
|
|
||||||
style="display: flex; align-items: center"
|
|
||||||
>
|
|
||||||
<div style="color: #ff7474">
|
|
||||||
{{ succNum }}条数据导入成功,{{ errNum }}条数据导入失败
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- v-if="uploadpercent === 100" -->
|
|
||||||
<div class="loadborder" v-if="uploadpercent === 100">
|
|
||||||
<div class="content">
|
|
||||||
<div class="img"></div>
|
|
||||||
<div class="timebox">
|
|
||||||
<div class="timetop">
|
|
||||||
<div class="tit">{{ fileName }}</div>
|
|
||||||
<div class="statesucce">上传成功</div>
|
|
||||||
</div>
|
|
||||||
<a-progress :percent="uploadpercent" />
|
|
||||||
<!-- <div class="prog">
|
|
||||||
<div class="inprogsucce"></div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<div class="curloading">
|
|
||||||
<!-- <div class="cur">100%</div> -->
|
|
||||||
<div
|
|
||||||
class="cancel"
|
|
||||||
style="margin-left: 20px; cursor: pointer"
|
|
||||||
@click="removeUpload"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="errNum">
|
|
||||||
<div class="downloadErr" @click="downloadEeeorData">
|
|
||||||
下载失败数据
|
下载失败数据
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<a-spin :spinning="true" v-if="file.uploadState?.status === 'START'"/>
|
||||||
v-if="uploadpercent === 100"
|
<div :class="file.uploadState?.status === 'SUCCESS'?'succebox':'defeatbox'" v-if="file.uploadState?.status === 'FAILED'">
|
||||||
class="defeat"
|
<img style="width: 14px; height: 14px; margin-left: 16px"
|
||||||
style="
|
:src="file.uploadState?.status === 'SUCCESS' ? success:err"/>
|
||||||
display: flex;
|
<div class="tacl">{{file.uploadState?.successNum || 0}}条数据导入成功,{{file.uploadState?.failedNum || 0}}条数据导入失败</div>
|
||||||
align-items: center;
|
|
||||||
width: 500px;
|
|
||||||
height: 40px;
|
|
||||||
"
|
|
||||||
:style="{
|
|
||||||
background: errNum
|
|
||||||
? 'rgba(255, 116, 116, 0.1)'
|
|
||||||
: 'rgba(53, 174, 105, 0.1)',
|
|
||||||
border: errNum ? '1px solid #ff7474' : '1px solid #35AE69',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
style="width: 14px; height: 14px; margin-left: 16px"
|
|
||||||
:src="
|
|
||||||
errNum
|
|
||||||
? require('../../../assets/images/err.png')
|
|
||||||
: require('../../../assets/images/success.png')
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="margin-left: 8px"
|
|
||||||
:style="{ color: errNum ? '#ff7474' : 'rgba(0,0,0,0.65)' }"
|
|
||||||
>
|
|
||||||
{{ succNum }}条数据导入成功,{{ errNum }}条数据导入失败
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-upload-dragger>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -176,235 +90,62 @@
|
|||||||
<button class="btn2" @click="closeDrawer">确定</button>
|
<button class="btn2" @click="closeDrawer">确定</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 加载动画 -->
|
|
||||||
<div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
|
|
||||||
<a-spin :spinning="addLoading" tip="" />
|
|
||||||
</div>
|
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import { reactive, toRefs } from "vue";
|
import {defineEmits, defineProps, ref} from "vue";
|
||||||
import { message } from "ant-design-vue";
|
import {getImportStatus} from "@/api/index1";
|
||||||
import * as api from "../../../api/index1";
|
import {useTimeout} from "@/utils/useCommon";
|
||||||
import { BATCH_IMPORT_SCORE } from "@/api/config";
|
import err from "@/assets/images/err.png";
|
||||||
export default {
|
import success from "@/assets/images/success.png";
|
||||||
name: "EScore",
|
|
||||||
props: {
|
|
||||||
ImpoterGroupLeaderV: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
projectId: {
|
|
||||||
type: Number,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
|
|
||||||
//type=1 路径图 type=2 项目
|
const props = defineProps({
|
||||||
type: {
|
url: String,
|
||||||
type: String,
|
accept: String,
|
||||||
default: null,
|
fileType: Object,
|
||||||
},
|
data: Object,
|
||||||
id: {
|
templateUrl: String,
|
||||||
type: Number,
|
})
|
||||||
default: null,
|
const emit = defineEmits({})
|
||||||
},
|
|
||||||
targetId: {
|
|
||||||
type: Number,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
taskId: {
|
|
||||||
type: Number,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
chapterId: {
|
|
||||||
type: Number,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
pid: {
|
|
||||||
type: Number,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
searchTaskList: {
|
|
||||||
type: Function,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props, ctx) {
|
|
||||||
const state = reactive({
|
|
||||||
fileType: ["xls", "xlsx"],
|
|
||||||
importLeader:
|
|
||||||
process.env.VUE_APP_BASE_API +
|
|
||||||
`/admin/studentGroup/importGroup/${props.projectId}`,
|
|
||||||
uploadpercent: -1,
|
|
||||||
uploadErr: false, //上传失败
|
|
||||||
addLoading: false,
|
|
||||||
fileList: [],
|
|
||||||
succNum: 0, //成功数据数
|
|
||||||
errNum: 0, //失败数据数
|
|
||||||
downloadErrUrl: null, //下载失败数据
|
|
||||||
fileName: "",
|
|
||||||
locationHref:
|
|
||||||
location.href.indexOf("http://") !== -1
|
|
||||||
? "http://43.143.139.204:12016/"
|
|
||||||
: location.href.slice(0, location.href.indexOf("/m")) + "/upload/",
|
|
||||||
template: process.env.VUE_APP_UP_LOAD_STUDENT_SCORE_TEMPLATE,
|
|
||||||
});
|
|
||||||
const closeDrawer = () => {
|
|
||||||
ctx.emit("closeDraw", true);
|
|
||||||
ctx.emit("update:ImpoterGroupLeaderV", false);
|
|
||||||
state.fileList = [];
|
|
||||||
state.uploadpercent = -1;
|
|
||||||
state.uploadErr = false; //上传失败
|
|
||||||
};
|
|
||||||
|
|
||||||
const afterVisibleChange = (bool) => {
|
const visible = ref(false)
|
||||||
console.log("state", bool);
|
const fileList = ref([])
|
||||||
if (bool) {
|
const uploadUrl = ref(process.env.VUE_APP_BASE_API + props.url);
|
||||||
console.log("当前是 1 项目 2 路径图", props.type);
|
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 = () => {
|
||||||
const handleChange = (info) => {
|
visible.value = false;
|
||||||
if (info) {
|
fileList.value = [];
|
||||||
var FileExt = info.file.name.replace(/.+\./, "");
|
|
||||||
if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
|
|
||||||
state.fileList = [];
|
|
||||||
state.uploadpercent = -1;
|
|
||||||
message.destroy();
|
|
||||||
message.error("请上传正确的文件格式");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
state.addLoading = true;
|
|
||||||
state.uploadpercent = parseInt(info.file.percent);
|
|
||||||
console.log("我是文件上传的进度---------->", info.file.percent);
|
|
||||||
const status = info.file.status;
|
|
||||||
if (status !== "uploading") {
|
|
||||||
// console.log(info.file, info.fileList);
|
|
||||||
}
|
|
||||||
if (status === "done") {
|
|
||||||
state.fileName = info.file.name;
|
|
||||||
let i = 0;
|
|
||||||
let timeouts = setTimeout(() => {
|
|
||||||
clearInterval(timer);
|
|
||||||
state.addLoading = false;
|
|
||||||
message.destroy();
|
|
||||||
message.error(`文件导入超时`);
|
|
||||||
}, 30000);
|
|
||||||
|
|
||||||
let timer = setInterval(() => {
|
|
||||||
let uid = info.file.response.data;
|
|
||||||
api
|
|
||||||
.getImportStatus(uid)
|
|
||||||
.then((res) => {
|
|
||||||
console.log("查询导入状态", res);
|
|
||||||
if (res.data.code === 200) {
|
|
||||||
if (res.data.data.status !== "START") {
|
|
||||||
i++;
|
|
||||||
if (i === 1) {
|
|
||||||
message.destroy();
|
|
||||||
message.success(`${info.file.name}上传成功`);
|
|
||||||
state.addLoading = false;
|
|
||||||
props.searchTaskList && props.searchTaskList();
|
|
||||||
}
|
|
||||||
state.succNum = res.data.data.successNum;
|
|
||||||
state.errNum = res.data.data.failedNum;
|
|
||||||
state.downloadErrUrl = res.data.data.url;
|
|
||||||
console.log("props.getStudent", props.getStudent);
|
|
||||||
clearInterval(timer);
|
|
||||||
clearTimeout(timeouts);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
state.addLoading = false;
|
|
||||||
clearInterval(timer);
|
|
||||||
clearTimeout(timeouts);
|
|
||||||
console.log("查询导入状态失败", err);
|
|
||||||
});
|
|
||||||
}, 500);
|
|
||||||
} else if (status === "error") {
|
|
||||||
state.uploadErr = true;
|
|
||||||
message.error(`${info.file.name}上传失败`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const beforeUpload = (file) => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
// const isJpgOrPng =
|
|
||||||
// file.name.indexOf(".xlsx") !== "-1" ||
|
|
||||||
// file.name.indexOf(".xls") !== "-1";
|
|
||||||
|
|
||||||
// if (!isJpgOrPng) {
|
|
||||||
// message.destroy();
|
|
||||||
// message.error("仅支持xls、xlsx格式!");
|
|
||||||
// return reject(false);
|
|
||||||
// }
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("uploadFile", file);
|
|
||||||
// let progress = { percent: 1 };
|
|
||||||
|
|
||||||
// const intervalId = setInterval(() => {
|
|
||||||
// if (progress.percent < 100) {
|
|
||||||
// progress.percent++;
|
|
||||||
// file.onProgress(progress);
|
|
||||||
// } else {
|
|
||||||
// clearInterval(intervalId);
|
|
||||||
// }
|
|
||||||
// }, 100);
|
|
||||||
api.batchImportScore(formData).then((res) => {
|
|
||||||
if (res.data.code === 200) {
|
|
||||||
console.log("上传成功", res);
|
|
||||||
return reject(true);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return reject(false);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const handleUpload = (e) => {
|
|
||||||
console.log("handleUpload", e);
|
|
||||||
};
|
|
||||||
|
|
||||||
//删除
|
|
||||||
const removeUpload = () => {
|
|
||||||
state.fileList = [];
|
|
||||||
state.uploadpercent = -1;
|
|
||||||
state.uploadErr = false; //上传失败
|
|
||||||
state.succNum = 0;
|
|
||||||
state.errNum = 0;
|
|
||||||
state.downloadErrUrl = null;
|
|
||||||
state.addLoading = false;
|
|
||||||
};
|
|
||||||
// 下载失败数据
|
|
||||||
const downloadEeeorData = () => {
|
|
||||||
if (state.downloadErrUrl !== "") {
|
|
||||||
window.open(process.env.VUE_APP_FILE_PATH + state.downloadErrUrl);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
function downTemplate() {
|
|
||||||
// console.log(state.locationHref + state.template);
|
|
||||||
// window.open(state.locationHref + state.template);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...toRefs(state),
|
|
||||||
afterVisibleChange,
|
|
||||||
closeDrawer,
|
|
||||||
handleChange,
|
|
||||||
downTemplate,
|
|
||||||
BATCH_IMPORT_SCORE,
|
|
||||||
beforeUpload,
|
|
||||||
handleUpload,
|
|
||||||
removeUpload,
|
|
||||||
downloadEeeorData,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function openDrawer() {
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function downTemplate() {
|
||||||
|
window.open(process.env.VUE_APP_BASE_API + props.templateUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
function downloadErrorData(url) {
|
||||||
|
window.open(process.env.VUE_APP_BASE_API + url)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleChange({file}) {
|
||||||
|
emit('change','start');
|
||||||
|
file && file.response && start({uuid:file.response.data,file})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss" >
|
<style scoped lang="scss">
|
||||||
.impotergroupleader {
|
.impotergroupleader {
|
||||||
.drawerMain {
|
.drawerMain {
|
||||||
min-width: 600px;
|
min-width: 600px;
|
||||||
@@ -412,6 +153,7 @@ export default {
|
|||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
height: 73px;
|
height: 73px;
|
||||||
border-bottom: 1px solid #e8e8e8;
|
border-bottom: 1px solid #e8e8e8;
|
||||||
@@ -421,6 +163,7 @@ export default {
|
|||||||
// background-color: red;
|
// background-color: red;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
.headerTitle {
|
.headerTitle {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -429,15 +172,18 @@ export default {
|
|||||||
// margin-left: 24px;
|
// margin-left: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
overflow-y: auto;
|
|
||||||
.minatitl {
|
.minatitl {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.up1 {
|
.up1 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.up2 {
|
.up2 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -445,16 +191,21 @@ export default {
|
|||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload {
|
.upload {
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
|
width: 500px;
|
||||||
|
|
||||||
.load {
|
.load {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 176px;
|
height: 176px;
|
||||||
@@ -466,12 +217,14 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
.cloud {
|
.cloud {
|
||||||
margin-top: 52px;
|
margin-top: 52px;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
background-image: url(../../../assets/images/basicinfo/cloud.png);
|
background-image: url(../../../assets/images/basicinfo/cloud.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip {
|
.tip {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -479,6 +232,7 @@ export default {
|
|||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tipz {
|
.tipz {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -486,9 +240,10 @@ export default {
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadstate {
|
.loadstate {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 50px;
|
||||||
|
|
||||||
.loadborder {
|
.loadborder {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
@@ -500,27 +255,45 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.defeat {
|
.defeat {
|
||||||
width: 400px;
|
width: 262px;
|
||||||
|
padding: 10px 20px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 46px;
|
left: 46px;
|
||||||
top: 38px;
|
top: 42px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
justify-content: space-between;
|
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 {
|
.img {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
background-image: url(../../../assets/images/basicinfo/exl.png);
|
background-image: url(../../../assets/images/basicinfo/exl.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timebox {
|
.timebox {
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
|
|
||||||
.timetop {
|
.timetop {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 262px;
|
width: 262px;
|
||||||
@@ -531,27 +304,32 @@ export default {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stateloading {
|
.stateloading {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #4ea6ff;
|
color: #4ea6ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.statedefeat {
|
.statedefeat {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #ff7474;
|
color: #ff7474;
|
||||||
}
|
}
|
||||||
|
|
||||||
.statesucce {
|
.statesucce {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #35ae69;
|
color: #35ae69;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.prog {
|
.prog {
|
||||||
width: 262px;
|
width: 262px;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
background: #eaf1fe;
|
background: #eaf1fe;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
.inprogloading {
|
.inprogloading {
|
||||||
width: 55%;
|
width: 55%;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
@@ -559,6 +337,7 @@ export default {
|
|||||||
|
|
||||||
background: #4ea6ff;
|
background: #4ea6ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
//下载失败条
|
//下载失败条
|
||||||
.inprogdefeat {
|
.inprogdefeat {
|
||||||
width: 55%;
|
width: 55%;
|
||||||
@@ -567,6 +346,7 @@ export default {
|
|||||||
|
|
||||||
background: #ff7474;
|
background: #ff7474;
|
||||||
}
|
}
|
||||||
|
|
||||||
//下载成功条
|
//下载成功条
|
||||||
.inprogsucce {
|
.inprogsucce {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -577,15 +357,18 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.curloading {
|
.curloading {
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.cur {
|
.cur {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel {
|
.cancel {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -593,6 +376,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.downloadErr {
|
.downloadErr {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
@@ -612,10 +396,56 @@ export default {
|
|||||||
bottom: 28;
|
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 {
|
.btnn {
|
||||||
height: 72px;
|
height: 72px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -627,6 +457,7 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
||||||
|
|
||||||
.btn1 {
|
.btn1 {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@@ -636,6 +467,7 @@ export default {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn2 {
|
.btn2 {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|||||||
45
src/utils/useCommon.js
Normal file
45
src/utils/useCommon.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import {ref} from "vue";
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
|
||||||
|
export function useInterval(fun, time) {
|
||||||
|
const timer = ref();
|
||||||
|
|
||||||
|
function start(d) {
|
||||||
|
clearInterval(timer.value)
|
||||||
|
timer.value = setInterval(async () => {
|
||||||
|
if (await fun(d)) {
|
||||||
|
clearInterval(timer.value)
|
||||||
|
}
|
||||||
|
}, time);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {start}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTimeout(asyncFun, time) {
|
||||||
|
const timer = ref();
|
||||||
|
const maxCount = ref(0);
|
||||||
|
|
||||||
|
function start(d) {
|
||||||
|
clearTimeout(timer.value)
|
||||||
|
maxCount.value = 0
|
||||||
|
execute(d)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function execute(d) {
|
||||||
|
if (maxCount.value > 300) {
|
||||||
|
message.error("等待超时,请联系管理员!")
|
||||||
|
throw Error("等待超时 查询任务结束")
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await asyncFun(d)
|
||||||
|
maxCount.value = maxCount.value + 1
|
||||||
|
timer.value = setTimeout(() => execute(d), time);
|
||||||
|
} catch (e) {
|
||||||
|
clearTimeout(timer.value)
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {start}
|
||||||
|
}
|
||||||
@@ -232,7 +232,7 @@
|
|||||||
pathBgId === item.code
|
pathBgId === item.code
|
||||||
? '2px solid rgba(78, 166, 255, 1)'
|
? '2px solid rgba(78, 166, 255, 1)'
|
||||||
: '1px solid #C7CBD2',
|
: '1px solid #C7CBD2',
|
||||||
'background-image': 'url(' + item.value + ')',
|
'background-image': 'url(' + item.value[0] + ')',
|
||||||
display: index >= 5 ? 'none' : 'flex',
|
display: index >= 5 ? 'none' : 'flex',
|
||||||
}"
|
}"
|
||||||
style="background-size: 100% 100%"
|
style="background-size: 100% 100%"
|
||||||
@@ -1185,6 +1185,10 @@ export default {
|
|||||||
message.destroy();
|
message.destroy();
|
||||||
return message.warning("请选择背景图");
|
return message.warning("请选择背景图");
|
||||||
}
|
}
|
||||||
|
if (!state.mobilePicUrl) {
|
||||||
|
message.destroy();
|
||||||
|
return message.warning("未配置H5背景图,请联系管理员!");
|
||||||
|
}
|
||||||
if (!state.validate) {
|
if (!state.validate) {
|
||||||
message.destroy();
|
message.destroy();
|
||||||
message.warning("路径图名称重复");
|
message.warning("路径图名称重复");
|
||||||
@@ -1208,7 +1212,8 @@ export default {
|
|||||||
status: 0,
|
status: 0,
|
||||||
organizationId: state.organizationSelectId,
|
organizationId: state.organizationSelectId,
|
||||||
organizationName: state.organizationSelectName,
|
organizationName: state.organizationSelectName,
|
||||||
picUrl: state.pathBg,
|
picUrl: state.pathBg.split(',')[0],
|
||||||
|
mobilePicUrl: state.pathBg.split(',')[1],
|
||||||
}).then(id => {
|
}).then(id => {
|
||||||
message.destroy();
|
message.destroy();
|
||||||
message.success("创建成功");
|
message.success("创建成功");
|
||||||
@@ -1298,6 +1303,10 @@ export default {
|
|||||||
message.destroy();
|
message.destroy();
|
||||||
return message.warning("请选择背景图");
|
return message.warning("请选择背景图");
|
||||||
}
|
}
|
||||||
|
if (!state.mobilePicUrl) {
|
||||||
|
message.destroy();
|
||||||
|
return message.warning("未配置H5背景图,请联系管理员!");
|
||||||
|
}
|
||||||
if (!state.validate) {
|
if (!state.validate) {
|
||||||
message.destroy();
|
message.destroy();
|
||||||
return message.warning("路径图名称重复");
|
return message.warning("路径图名称重复");
|
||||||
@@ -1324,7 +1333,8 @@ export default {
|
|||||||
let obj = {
|
let obj = {
|
||||||
routerId: state.editPathId,
|
routerId: state.editPathId,
|
||||||
name: state.pathName,
|
name: state.pathName,
|
||||||
picUrl: state.pathBg,
|
picUrl: state.pathBg.split(',')[0],
|
||||||
|
mobilePicUrl: state.pathBg.split(',')[1],
|
||||||
remark: state.pathIntro,
|
remark: state.pathIntro,
|
||||||
organizationName: state.organizationSelectName,
|
organizationName: state.organizationSelectName,
|
||||||
organizationId: state.organizationSelectId,
|
organizationId: state.organizationSelectId,
|
||||||
|
|||||||
@@ -758,9 +758,12 @@
|
|||||||
<div class="btn2" @click="exportGroup">
|
<div class="btn2" @click="exportGroup">
|
||||||
<span class="btn2text">导出小组</span>
|
<span class="btn2text">导出小组</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn2" @click="importGroupLeader">
|
<ImpoterGroupLeader :url="`/admin/studentGroup/importGroup`" :template-url="`/admin/studentGroup/exportGroup/${projectId}`">
|
||||||
|
<div class="btn2">
|
||||||
<span class="btn2text">导入小组长</span>
|
<span class="btn2text">导入小组长</span>
|
||||||
</div>
|
</div>
|
||||||
|
</ImpoterGroupLeader>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 小组列表 -->
|
<!-- 小组列表 -->
|
||||||
<div class="groupmain">
|
<div class="groupmain">
|
||||||
@@ -2106,12 +2109,6 @@
|
|||||||
:checkgroupStuId="checkgroupStuId"
|
:checkgroupStuId="checkgroupStuId"
|
||||||
/>
|
/>
|
||||||
<!-- 换组弹窗 -->
|
<!-- 换组弹窗 -->
|
||||||
<!-- 导入小组长 -->
|
|
||||||
<ImpoterGroupLeader
|
|
||||||
v-model:ImpoterGroupLeaderV="ImpoterGroupLeaderV"
|
|
||||||
:projectId="projectId"
|
|
||||||
/>
|
|
||||||
<!-- 导入小组长 -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user