mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 05:46:45 +08:00
431 lines
11 KiB
Vue
431 lines
11 KiB
Vue
<!--
|
||
* @Author: lixg lixg@dongwu-inc.com
|
||
* @Date: 2023-01-06 11:30:15
|
||
* @LastEditors: lixg lixg@dongwu-inc.com
|
||
* @LastEditTime: 2023-01-06 11:55:38
|
||
* @FilePath: /fe-manage/src/views/DownLoad.vue
|
||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||
-->
|
||
<template>
|
||
<div class="DownLoad">
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
"
|
||
>
|
||
<div class="tab1">
|
||
<div class="nameinp">
|
||
<div class="namee">作业名称：</div>
|
||
<a-input
|
||
v-model:value="name"
|
||
style="width: 330px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入作业名称"
|
||
/>
|
||
</div>
|
||
<div class="btns">
|
||
<div class="btn1" @click="searchDownloadList">
|
||
<div class="img1">
|
||
<img src="../assets/images/courseManage/search0.png" />
|
||
</div>
|
||
<div class="wz">搜索</div>
|
||
</div>
|
||
<div class="btn2" @click="reseatDownloadList">
|
||
<div class="img2">
|
||
<img src="../assets/images/courseManage/reset1.png" />
|
||
</div>
|
||
<div class="wz">重置</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 200px">
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: rgba(153, 153, 153, 0.85);
|
||
line-height: 22px;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
<div>当前容量:</div>
|
||
<div>{{formatCapacity(capacity)}} / 2GB</div>
|
||
</div>
|
||
<a-progress :percent="countCMB" :width="200" :show-info="false" :stroke-color="{
|
||
'0%': countCMB>2?'#FF0000 ':'#45B058',
|
||
'100%': countCMB>2?'#FF0000 ':'#45B058',
|
||
}" />
|
||
<div v-if="formatCapacityGB(capacity)>2" style="color:rgba(255, 116, 116, 1);font-size:12px;">容量已满，请删除文件</div>
|
||
</div>
|
||
</div>
|
||
<!-- 文件容器 -->
|
||
<div style="display:flex;flex-wrap:wrap;">
|
||
<div v-if="homeWorkList.length==0" style="width:100%;height:500px;display:flex;justify-content:center;align-items:center;border:1px solid #d9d9d9;border-radius: 8px;margin-top: 60px;">
|
||
<img src="../assets/images/courseManage/downloadnodata.png" />
|
||
</div>
|
||
<div v-else v-for="(values, index) in homeWorkList" class="zipcontainer" :key="index">
|
||
<!-- 单个文件 -->
|
||
<div v-if="values" class="item">
|
||
<div class="itemup">
|
||
<div class="lefttop"></div>
|
||
<div class="cent">
|
||
<div class="zip"></div>
|
||
<div class="ziprit">
|
||
<div class="textop">{{values.name}}</div>
|
||
<div class="texdown">
|
||
<div class="timemanag" style="margin-top: 12px">
|
||
{{values.createTime?values.createTime:'-'}} {{values.createName?values.createName:'-'}}
|
||
</div>
|
||
<div class="timemanag">来源：{{{1:'项目',2:'路径图',3:'开课'}[values.type]+'-'+values.name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="itemdown">
|
||
<div class="download" @click="downLoadFile(values)">下载</div>
|
||
<div class="delete" @click="removeFile(values)">删除</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:100%;margin-top: 90px;display: flex;justify-content: center;align-items: center;">
|
||
<!-- 分页 -->
|
||
<a-pagination
|
||
v-if="total>10"
|
||
:showSizeChanger="false"
|
||
showQuickJumper="true"
|
||
hideOnSinglePage="true"
|
||
:pageSize="pageSize"
|
||
:current="currentPage"
|
||
:total="total"
|
||
class="pagination"
|
||
@change="changePaginationStu"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { toRefs, reactive } from "vue";
|
||
import { message } from "ant-design-vue";
|
||
import * as api from "@/api/indexTaskManage";
|
||
export default {
|
||
name: "DownLoad",
|
||
setup() {
|
||
const state = reactive({
|
||
name: "",
|
||
homeWorkList: [],
|
||
currentPage: 1,
|
||
pageSize: 12,
|
||
total: 0,
|
||
capacity: 0,
|
||
countCMB: 0,
|
||
});
|
||
|
||
function getData() {
|
||
api.DownLoadList({
|
||
current:state.currentPage,
|
||
name: state.name,
|
||
size: state.pageSize
|
||
}).then(res=>{
|
||
console.log(res)
|
||
if(res.data.code==200){
|
||
state.homeWorkList = res.data.data.records;
|
||
state.total = res.data.data.total;
|
||
}
|
||
}).catch(err=>{
|
||
console.log(err)
|
||
})
|
||
}
|
||
|
||
// 获取可下载数据
|
||
getData()
|
||
|
||
function getDownLoadTotalSize() {
|
||
api.DownLoadTotalSize().then(res=>{
|
||
console.log(res)
|
||
if(res.data.code==200){
|
||
state.capacity = res.data.data;
|
||
}else{
|
||
state.capacity = 0;
|
||
}
|
||
}).catch(err=>{
|
||
console.log(err)
|
||
})
|
||
}
|
||
|
||
// 获取当前用户容量
|
||
getDownLoadTotalSize()
|
||
|
||
// 格式化容量显示
|
||
function formatCapacity(data) {
|
||
let num = Number(data);
|
||
let CMB = (num / 1048576).toFixed(2);
|
||
let countCMB = (num / 1048576*1024).toFixed(2);
|
||
state.countCMB = countCMB;
|
||
if(CMB%1024>1){
|
||
CMB = (CMB/1024).toFixed(2) + 'GB';
|
||
}else{
|
||
CMB = CMB + 'MB';
|
||
}
|
||
console.log(CMB)
|
||
return CMB
|
||
}
|
||
|
||
function formatCapacityGB(data) {
|
||
let num = Number(data);
|
||
let CMB = (num / (1048576*1024)).toFixed(2);
|
||
return CMB
|
||
}
|
||
|
||
// 下载文件
|
||
function downLoadFile(data) {
|
||
console.log(data)
|
||
window.open(process.env.VUE_APP_FILE_PATH + data.url)
|
||
}
|
||
// 删除文件
|
||
function removeFile(data) {
|
||
console.log(data)
|
||
api.RemoveDownLoadHomeWork({
|
||
id:data.id
|
||
}).then(res=>{
|
||
console.log(res)
|
||
if(res.data.code==200){
|
||
message.destroy()
|
||
message.success("删除成功")
|
||
getData()
|
||
}
|
||
}).catch(err=>{
|
||
console.log(err)
|
||
message.destroy()
|
||
message.error("删除失败")
|
||
})
|
||
}
|
||
|
||
// 搜索
|
||
function searchDownloadList() {
|
||
getData()
|
||
}
|
||
|
||
// 重置
|
||
function reseatDownloadList() {
|
||
state.name = "";
|
||
state.currentPage = 1;
|
||
getData()
|
||
}
|
||
|
||
// 分页
|
||
//分页
|
||
const changePaginationStu = (page) => {
|
||
state.currentPage = page;
|
||
getData();
|
||
};
|
||
|
||
return {
|
||
...toRefs(state),
|
||
downLoadFile,
|
||
removeFile,
|
||
changePaginationStu,
|
||
searchDownloadList,
|
||
reseatDownloadList,
|
||
formatCapacity,
|
||
formatCapacityGB
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.DownLoad {
|
||
width: 100%;
|
||
margin: 42px 64px 0 32px;
|
||
.tab1 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.t1 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
.nameinp {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
margin-right: 10px;
|
||
.namee {
|
||
color: rgba(0, 0, 0, 0.85);
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
margin-top: 10px;
|
||
|
||
.btn1 {
|
||
width: 100px;
|
||
height: 40px;
|
||
margin-right: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
background: #4ea6ff;
|
||
border-radius: 8px;
|
||
border: 1px solid #4ea6ff;
|
||
cursor: pointer;
|
||
.wz {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.btn1:hover {
|
||
background: rgba(64, 158, 255, 0.76);
|
||
|
||
.search {
|
||
background-image: url("../assets/images/courseManage/search0.png");
|
||
}
|
||
|
||
.btnText {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.btn1:active {
|
||
background: #0982ff;
|
||
}
|
||
|
||
.btn2:hover {
|
||
background: rgba(64, 158, 255, 0.1);
|
||
}
|
||
.btn2:active {
|
||
background: rgba(64, 158, 255, 0.2);
|
||
}
|
||
.btn2 {
|
||
width: 100px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #4ea6ff;
|
||
font-size: 14px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
border: 1px solid #4ea6ff;
|
||
.wz {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.zipcontainer {
|
||
display: flex;
|
||
width: 352px;
|
||
height: 160px;
|
||
flex-wrap: wrap;
|
||
margin-right: 56px;
|
||
margin-top: 90px;
|
||
.item {
|
||
margin-right: 50px;
|
||
margin-bottom: 50px;
|
||
.itemup {
|
||
width: 352px;
|
||
height: 160px;
|
||
background: #ffffff;
|
||
border-radius: 2px 2px 0px 0px;
|
||
border: 1px solid #4ea6ff;
|
||
position: relative;
|
||
.lefttop {
|
||
width: 8px;
|
||
height: 21px;
|
||
background: #4ea6ff;
|
||
border-radius: 0px 4px 4px 0px;
|
||
top: 18px;
|
||
position: absolute;
|
||
}
|
||
.cent {
|
||
display: flex;
|
||
margin-top: 40px;
|
||
margin-left: 40px;
|
||
.zip {
|
||
width: 62px;
|
||
height: 72px;
|
||
background-image: url(../assets/images/leveladd/zip.png);
|
||
background-size: 100%;
|
||
}
|
||
.ziprit {
|
||
margin-left: 20px;
|
||
margin-top: -5px;
|
||
.textop {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #4ea6ff;
|
||
}
|
||
.texdown {
|
||
.timemanag {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #878b92;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.itemdown {
|
||
width: 352px;
|
||
height: 48px;
|
||
border-radius: 0px 0px 2px 2px;
|
||
border: 1px solid #4ea6ff;
|
||
border-top: 0;
|
||
display: flex;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 22px;
|
||
.download {
|
||
width: 176px;
|
||
height: 48px;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
background: #409eff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.download:hover {
|
||
background-color: rgba(64, 158, 255, 0.76);
|
||
}
|
||
.download:active {
|
||
background-color: #0982FF;
|
||
}
|
||
.delete {
|
||
width: 176px;
|
||
height: 48px;
|
||
color: #4ea6ff;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.delete:hover{
|
||
background-color: rgba(64, 158, 255, 0.10);
|
||
}
|
||
.delete:active{
|
||
background-color: rgba(64, 158, 255, 0.20);
|
||
}
|
||
.outime {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #878b92;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|