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

新增教师节

Browse Source
This commit is contained in:
joshen@zcwytd.com
2023-09-06 17:21:30 +08:00
parent 10b9e2cfa5
commit f543d1ee5b
27 changed files with 5798 additions and 1360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/components/Grateful/UploadDragger.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<a-upload-dragger :data="{ ...params }" :multiple="false" :accept="accept" :action="uploadUrl" :maxCount="maxCount"
@change="handleUploadChange" v-model:file-list="fileList" style="width:50%;">
<p class="ant-upload-drag-icon">
<UploadOutlined />
</p>
<p class="ant-upload-text">将文件拖到此处，或点击上传</p>
<template #itemRender="{ file }">
<div class="loadstate">
<div class="loadborder">
<div class="content">
<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 class="cur">100%</div>
<div class="cancel" style="margin-left: 20px; cursor: pointer" @click="removeUpload">
删除
</div>
</div> -->
</div>
</div>
</div>
</template>
</a-upload-dragger>
</template>
<script setup>
import { UploadOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, defineExpose } from "vue";
import { message } from "ant-design-vue";
const props = defineProps({
uploadUrl: {
type: String,
default: ''
},
params: {
type: Object,
default: {}
},
maxCount: {
type: Number,
default: 1
},
accept: {
type: String,
default: ''
}
})
const emit = defineEmits(['update:value', 'change'])
const fileList = ref([]);
const handleUploadChange = ({ file, fileList }) => {
console.log(file, fileList, 'file');
var FileExt = file.name.replace(/.+\./, "");
if (props.accept && props.accept.split(',').indexOf('.' + FileExt.toLowerCase()) === -1) {
fileList.value = [];
return message.error("请上传正确的文件格式");
}
emit('update:value', fileList)
emit('change', fileList)
}
const removeUpload = () => {
fileList.value = [];
}
defineExpose({
fileList,
removeUpload
})
</script>
<style scoped lang="scss">
.loadstate {
width: 500px;
margin-bottom: 80px;
.loadborder {
width: 500px;
height: 70px;
border-radius: 4px;
border: 1px dashed #eaeaea;
margin-top: 10px;
margin-bottom: 10px;
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;
.tit {
font-size: 14px;
font-weight: 400;
color: #333333;
width: 200px;
height: 21px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.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;
}
}
}
}
}
</style>