|
@@ -1,61 +1,70 @@
|
|
|
<template>
|
|
|
<div class="elegant-container">
|
|
|
<Spin fix v-if="isLoading"></Spin>
|
|
|
- <div class="header">
|
|
|
- <span class="title">学生风采</span>
|
|
|
- <div>
|
|
|
- <Button type="success" size="small" @click="onDownloadExcel" icon="md-download" style="margin-right: 10px">导出数据</Button>
|
|
|
- <Button type="success" size="small" @click="onAddElegant">+ 添加素材</Button>
|
|
|
+ <div class="elegant-details-box">
|
|
|
+ <div class="container-title">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <span>{{isShowDash ? '数据总览' : '数据详情'}}</span>
|
|
|
+ <span class="btn-details" @click="isShowDash = !isShowDash">{{!isShowDash ? '数据总览' : '数据详情'}} ></span>
|
|
|
+ </div>
|
|
|
+ <div class="tools">
|
|
|
+ <Button shape="circle" @click="onAddElegant" icon="md-add">添加素材</Button>
|
|
|
+ <Button shape="circle" @click="onDownloadExcel" icon="md-download" style="margin-left: 10px">导出数据</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ElegantDash v-if="isShowDash" @goDetails="isShowDash = false"></ElegantDash>
|
|
|
+ <div class="details-wrap" v-if="!isShowDash">
|
|
|
+ <div class="filter-wrap">
|
|
|
+ <!-- 类型筛选 -->
|
|
|
+ <Select v-model="filterTypeIndex" style="width: 200px" @on-change="onFilterTypeChange">
|
|
|
+ <Option v-for="(item, index) in typeList" :value="index" :key="index">
|
|
|
+ {{ item }}
|
|
|
+ </Option>
|
|
|
+ </Select>
|
|
|
+ </div>
|
|
|
+ <div class="elegant-list">
|
|
|
+ <EmptyData :top="300" v-if="!elegantList.length"></EmptyData>
|
|
|
+ <Timeline v-else>
|
|
|
+ <TimelineItem v-for="(item, index) in elegantList" :key="index">
|
|
|
+ <p class="elegant-title">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <span style="margin: 0 10px">
|
|
|
+ <Tag color="geekblue" v-if="item.bizType">{{ item.bizType.join("-") }}</Tag>
|
|
|
+ <Tag color="green" v-if="item.classes && item.classes.length">{{ getClassNameById(item.classes[0]) }}</Tag>
|
|
|
+ <Tag color="primary">{{ $tools.formatTime(item.createTime) }}</Tag>
|
|
|
+ </span>
|
|
|
+ <!-- <Icon type="md-create" color="#2d8cf0" @click="onEditElegant(item,index)"></Icon> -->
|
|
|
+ <Icon type="md-trash" color="#2d8cf0" @click="onDelElegant(item, index)"></Icon>
|
|
|
+ </p>
|
|
|
+ <p class="elegant-content">{{ item.content }}</p>
|
|
|
+ <div class="img-list" v-if="item.fileType === 'image'">
|
|
|
+ <div class="img-item" v-for="(img, imgIndex) in item.attachments" :key="imgIndex" @click="onImgClick(item.attachments, imgIndex)">
|
|
|
+ <img :src="getFullPath(img.url)" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="img-list" v-if="item.fileType === 'video'">
|
|
|
+ <div class="img-item" v-for="(img, imgIndex) in item.attachments" :key="imgIndex">
|
|
|
+ <video :src="getFullPath(img.url)" style="width: 300px" controls="controls"></video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="file-list" v-if="item.fileType === 'doc'">
|
|
|
+ <div class="file-item" v-for="(item, imgIndex) in item.attachments" :key="imgIndex" @click="onPreview(item)">
|
|
|
+ <img src="../../assets/source/word.png" v-if="item.type === 'doc' && docType.includes(getSuffix(item.blob))" />
|
|
|
+ <img src="../../assets/source/excel.png" v-else-if="item.type === 'doc' && excelType.includes(getSuffix(item.name))" />
|
|
|
+ <img src="../../assets/source/ppt.png" v-else-if="item.type === 'doc' && pptType.includes(getSuffix(item.name))" />
|
|
|
+ <img src="../../assets/source/pdf.png" v-else-if="item.type === 'doc' && getSuffix(item.name) === 'pdf'" />
|
|
|
+ <img src="../../assets/source/zip.png" v-else-if="getSuffix(item.name) === 'zip' || getSuffix(item.name) === 'rar'" />
|
|
|
+ <img src="../../assets/source/audio.png" v-else-if="item.type === 'audio'" />
|
|
|
+ <img src="../../assets/source/unknow.png" v-else />
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </TimelineItem>
|
|
|
+ </Timeline>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="filter-wrap">
|
|
|
- <!-- 类型筛选 -->
|
|
|
- <Select v-model="filterTypeIndex" style="width:200px;" @on-change="onFilterTypeChange">
|
|
|
- <Option v-for="(item,index) in typeList" :value="index" :key="index">
|
|
|
- {{ item }}
|
|
|
- </Option>
|
|
|
- </Select>
|
|
|
- </div>
|
|
|
- <div class="elegant-list">
|
|
|
- <EmptyData :top="300" v-if="!elegantList.length"></EmptyData>
|
|
|
- <Timeline v-else>
|
|
|
- <TimelineItem v-for="(item, index) in elegantList" :key="index">
|
|
|
- <p class="elegant-title">
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- <span style="margin: 0 10px">
|
|
|
- <Tag color="geekblue" v-if="item.bizType">{{ item.bizType.join("-") }}</Tag>
|
|
|
- <Tag color="green" v-if="item.classes && item.classes.length">{{ getClassNameById(item.classes[0]) }}</Tag>
|
|
|
- <Tag color="primary">{{ $tools.formatTime(item.createTime) }}</Tag>
|
|
|
- </span>
|
|
|
- <!-- <Icon type="md-create" color="#2d8cf0" @click="onEditElegant(item,index)"></Icon> -->
|
|
|
- <Icon type="md-trash" color="#2d8cf0" @click="onDelElegant(item, index)"></Icon>
|
|
|
- </p>
|
|
|
- <p class="elegant-content">{{ item.content }}</p>
|
|
|
- <div class="img-list" v-if="item.fileType === 'image'">
|
|
|
- <div class="img-item" v-for="(img, imgIndex) in item.attachments" :key="imgIndex" @click="onImgClick(item.attachments, imgIndex)">
|
|
|
- <img :src="getFullPath(img.url)" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="img-list" v-if="item.fileType === 'video'">
|
|
|
- <div class="img-item" v-for="(img, imgIndex) in item.attachments" :key="imgIndex">
|
|
|
- <video :src="getFullPath(img.url)" style="width: 300px" controls="controls"></video>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="file-list" v-if="item.fileType === 'doc'">
|
|
|
- <div class="file-item" v-for="(item, imgIndex) in item.attachments" :key="imgIndex" @click="onPreview(item)">
|
|
|
- <img src="../../assets/source/word.png" v-if="item.type === 'doc' && docType.includes(getSuffix(item.blob))" />
|
|
|
- <img src="../../assets/source/excel.png" v-else-if="item.type === 'doc' && excelType.includes(getSuffix(item.name))" />
|
|
|
- <img src="../../assets/source/ppt.png" v-else-if="item.type === 'doc' && pptType.includes(getSuffix(item.name))" />
|
|
|
- <img src="../../assets/source/pdf.png" v-else-if="item.type === 'doc' && getSuffix(item.name) === 'pdf'" />
|
|
|
- <img src="../../assets/source/zip.png" v-else-if="getSuffix(item.name) === 'zip' || getSuffix(item.name) === 'rar'" />
|
|
|
- <img src="../../assets/source/audio.png" v-else-if="item.type === 'audio'" />
|
|
|
- <img src="../../assets/source/unknow.png" v-else />
|
|
|
- <p>{{ item.name }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </TimelineItem>
|
|
|
- </Timeline>
|
|
|
- </div>
|
|
|
+
|
|
|
<Drawer :title="isEdit ? '编辑素材' : '添加素材'" :closable="false" v-model="editModal" width="520" :transfer="false" @on-visible-change="onDrawerChange">
|
|
|
<Form :model="curElegantItem" label-position="top" v-if="curElegantItem">
|
|
|
<FormItem :label="`活动名称`">
|
|
@@ -154,13 +163,18 @@
|
|
|
<script>
|
|
|
import BlobTool from "@/utils/blobTool.js";
|
|
|
import excel from "@/utils/excel.js";
|
|
|
+ import ElegantDash from "./BaseElegantDash.vue";
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ ElegantDash
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- isLoading:false,
|
|
|
- allList:[],
|
|
|
- typeList:['全部风采','德育风采','艺术特色'],
|
|
|
- filterTypeIndex:0,
|
|
|
+ isShowDash: true,
|
|
|
+ isLoading: false,
|
|
|
+ allList: [],
|
|
|
+ typeList: ["全部风采", "德育风采", "艺术特色"],
|
|
|
+ filterTypeIndex: 0,
|
|
|
props: {
|
|
|
multiple: false,
|
|
|
value: "id",
|
|
@@ -177,7 +191,7 @@
|
|
|
btnLoading: false,
|
|
|
fileArr: [],
|
|
|
priviewSrc: "",
|
|
|
- originList:[],
|
|
|
+ originList: [],
|
|
|
imgFilePreviewList: [],
|
|
|
videoFilePreviewList: [],
|
|
|
docFilePreviewList: [],
|
|
@@ -254,27 +268,27 @@
|
|
|
etime: null //可选
|
|
|
})
|
|
|
.then((res) => {
|
|
|
- this.originList = res.elegants.reverse()
|
|
|
+ this.originList = res.elegants.reverse();
|
|
|
this.onFilterTypeChange();
|
|
|
this.getTargetList();
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
- onDownloadExcel(){
|
|
|
- this.isLoading = true
|
|
|
+ onDownloadExcel() {
|
|
|
+ this.isLoading = true;
|
|
|
let schoolName = this.$store.state.user.schoolProfile.school_base.name;
|
|
|
let periodName = this.curPeriod.name;
|
|
|
- let list = this.originList.map(i => {
|
|
|
+ let list = this.originList.map((i) => {
|
|
|
return {
|
|
|
schoolName: schoolName,
|
|
|
className: this.getClassNameById(i.classes[0]),
|
|
|
classId: i.classes[0],
|
|
|
- bizType: i.bizType ? i.bizType.join('-') : '-',
|
|
|
- title:i.title,
|
|
|
- content:i.content,
|
|
|
+ bizType: i.bizType ? i.bizType.join("-") : "-",
|
|
|
+ title: i.title,
|
|
|
+ content: i.content,
|
|
|
time: this.$tools.formatTime(i.createTime)
|
|
|
- }
|
|
|
- })
|
|
|
+ };
|
|
|
+ });
|
|
|
const params = {
|
|
|
title: ["学校名称", "班级名称", "班级ID", "素材类别", "活动名称", "活动描述", "活动时间"],
|
|
|
key: ["schoolName", "className", "classId", "bizType", "title", "content", "time"],
|
|
@@ -285,9 +299,9 @@
|
|
|
excel.export_array_to_excel(params);
|
|
|
this.isLoading = false;
|
|
|
},
|
|
|
- onFilterTypeChange(){
|
|
|
- console.log(this.allList)
|
|
|
- this.elegantList = this.filterTypeIndex === 0 ? this._.cloneDeep(this.originList) : this.originList.filter(i => i.bizType && i.bizType.includes(this.typeList[this.filterTypeIndex]))
|
|
|
+ onFilterTypeChange() {
|
|
|
+ console.log(this.allList);
|
|
|
+ this.elegantList = this.filterTypeIndex === 0 ? this._.cloneDeep(this.originList) : this.originList.filter((i) => i.bizType && i.bizType.includes(this.typeList[this.filterTypeIndex]));
|
|
|
},
|
|
|
onPreview(file) {
|
|
|
let fullLink = this.getFullPath(file.url);
|
|
@@ -317,7 +331,7 @@
|
|
|
},
|
|
|
getTargetList() {
|
|
|
if (!this.curPeriod?.id) return;
|
|
|
- this.isLoading = true
|
|
|
+ this.isLoading = true;
|
|
|
let params = {
|
|
|
tmdid: this.$store.state.userInfo.TEAMModelId,
|
|
|
schoolId: this.$store.state.userInfo.schoolCode,
|
|
@@ -327,11 +341,11 @@
|
|
|
this.$api.common.getActivityTarget(params).then(
|
|
|
(res) => {
|
|
|
this.allList = res.groupLists;
|
|
|
- this.isLoading = false
|
|
|
+ this.isLoading = false;
|
|
|
},
|
|
|
(err) => {
|
|
|
this.$Messag.error(this.$t("ae.ae15"));
|
|
|
- this.isLoading = false
|
|
|
+ this.isLoading = false;
|
|
|
}
|
|
|
);
|
|
|
},
|
|
@@ -535,10 +549,10 @@
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- getClassNameById(){
|
|
|
- return id => {
|
|
|
- return this.allList.length ? this.allList.find(i => i.id === id)?.name : ''
|
|
|
- }
|
|
|
+ getClassNameById() {
|
|
|
+ return (id) => {
|
|
|
+ return this.allList.length ? this.allList.find((i) => i.id === id)?.name : "";
|
|
|
+ };
|
|
|
},
|
|
|
getSuffix() {
|
|
|
return (name) => {
|
|
@@ -615,27 +629,50 @@
|
|
|
"$store.state.user.curSemester": {
|
|
|
deep: true,
|
|
|
handler(n, old) {
|
|
|
- this.getTargetList()
|
|
|
+ this.getTargetList();
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.elegant-container {
|
|
|
height: 100%;
|
|
|
- .header {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 10px 15px;
|
|
|
- border-bottom: 1px solid rgba(204, 204, 204, 0.377);
|
|
|
- font-size: 16px;
|
|
|
+ background: #eeeef0;
|
|
|
|
|
|
- .title {
|
|
|
- font-weight: bold;
|
|
|
+ .elegant-details-box {
|
|
|
+ padding: 30px 50px;
|
|
|
+ background: #eeeef0;
|
|
|
+
|
|
|
+ .filter-wrap {
|
|
|
+ padding: 0 0 40px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-title {
|
|
|
+ font-size: 26px;
|
|
|
+ margin-left: 3px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .btn-details {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 12px;
|
|
|
+ border: 1px solid #2787e0;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 50px;
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #0d78be;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .details-wrap {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -649,8 +686,8 @@
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- padding: 15px;
|
|
|
overflow: auto;
|
|
|
+ background: #fff;
|
|
|
|
|
|
.ivu-timeline {
|
|
|
height: 100%;
|
|
@@ -680,7 +717,7 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .ivu-timeline-item{
|
|
|
+ .ivu-timeline-item {
|
|
|
padding-bottom: 40px !important;
|
|
|
}
|
|
|
.file-list {
|