|
|
@@ -1,54 +1,85 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="collection" v-if="fileCode">
|
|
|
- <img class="bg" :src="require('@/assets/images/collect_bg.png')">
|
|
|
- <img class="close" @click="$bus.$emit('toggleUploadFile',false)" :src="require('@/assets/images/icon/close.png')">
|
|
|
+ <img class="bg" :src="require('@/assets/images/collect_bg.png')" />
|
|
|
+ <img
|
|
|
+ class="close"
|
|
|
+ @click="$bus.$emit('toggleUploadFile', false)"
|
|
|
+ :src="require('@/assets/images/icon/close.png')"
|
|
|
+ />
|
|
|
<div class="con">
|
|
|
<div class="title">史料收件箱</div>
|
|
|
<div class="con-body">
|
|
|
- <p>欢迎使用史料收件箱，您可在此分享史料信息，传递知识！感谢您对信息工程大学的支持！</p>
|
|
|
+ <p>
|
|
|
+ 欢迎使用史料收件箱，您可在此分享史料信息，传递知识！感谢您对信息工程大学的支持！
|
|
|
+ </p>
|
|
|
<div class="line"></div>
|
|
|
<div class="item">
|
|
|
<span>*史料说明</span>
|
|
|
- <textarea maxlength="200" v-model="desc" placeholder="不超过200个字" cols="30" rows="5"></textarea>
|
|
|
+ <textarea
|
|
|
+ maxlength="200"
|
|
|
+ v-model="desc"
|
|
|
+ placeholder="不超过200个字"
|
|
|
+ cols="30"
|
|
|
+ rows="5"
|
|
|
+ ></textarea>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="item">
|
|
|
<span>上传史料</span>
|
|
|
- <span class="desc">支持上传图片 /视频 /压缩包，上传文件数量不超过5个</span>
|
|
|
+ <span class="desc"
|
|
|
+ >支持上传图片 /视频 /压缩包，上传文件数量不超过5个</span
|
|
|
+ >
|
|
|
</div>
|
|
|
<div class="item uploaditem">
|
|
|
<span>上传内容</span>
|
|
|
<ul>
|
|
|
<li class="plus" @click="$refs.uploadFile.click()">
|
|
|
- <img :src="require('@/assets/images/uploadplus.png')" alt="">
|
|
|
+ <img :src="require('@/assets/images/uploadplus.png')" alt="" />
|
|
|
<upload
|
|
|
ref="uploadFile"
|
|
|
:limit="11200"
|
|
|
- :mediaType="['application','image','video']"
|
|
|
+ :mediaType="['application', 'image', 'video']"
|
|
|
@file-change="onFileChange"
|
|
|
></upload>
|
|
|
</li>
|
|
|
|
|
|
- <li v-for="(item,i) in fileList" :key="i">
|
|
|
- <img v-if="item.type=='application'" :src="require('@/assets/images/uploadfile/zip.png')" alt="">
|
|
|
- <img v-else-if="item.type=='video'" :src="require('@/assets/images/uploadfile/video.png')" alt="">
|
|
|
+ <li v-for="(item, i) in fileList" :key="i">
|
|
|
+ <img
|
|
|
+ v-if="item.type == 'application'"
|
|
|
+ :src="require('@/assets/images/uploadfile/zip.png')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.type == 'video'"
|
|
|
+ :src="require('@/assets/images/uploadfile/video.png')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
|
|
|
<div v-else class="img">
|
|
|
- <img :src="item.img" alt="">
|
|
|
+ <img :src="item.img" alt="" />
|
|
|
</div>
|
|
|
|
|
|
- <div class="close" @click="del(item,i)">
|
|
|
- <img :src="require('@/assets/images/uploadfile/close.png')" alt="">
|
|
|
+ <div class="close" @click="del(item, i)">
|
|
|
+ <img
|
|
|
+ :src="require('@/assets/images/uploadfile/close.png')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
- <span :title="item.name">{{item.name}}</span>
|
|
|
+ <span :title="item.name">{{ item.name }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="item">
|
|
|
<span>联系方式</span>
|
|
|
- <textarea v-model="contact" maxlength="50" placeholder="不超过50个字" cols="30" rows="2"></textarea>
|
|
|
+ <textarea
|
|
|
+ v-model="contact"
|
|
|
+ maxlength="50"
|
|
|
+ placeholder="不超过50个字"
|
|
|
+ cols="30"
|
|
|
+ rows="2"
|
|
|
+ ></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="submit">
|
|
|
@@ -57,10 +88,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="showloading" v-if="progress&&progress!='100%'">
|
|
|
+ <div class="showloading" v-if="progress && progress != '100%'">
|
|
|
<div class="loadingcon">
|
|
|
<div class="line">
|
|
|
- <div class="progress" :style="{width:progress}"></div>
|
|
|
+ <div class="progress" :style="{ width: progress }"></div>
|
|
|
</div>
|
|
|
<span>文件上传中</span>
|
|
|
</div>
|
|
|
@@ -70,133 +101,136 @@
|
|
|
|
|
|
<script>
|
|
|
import Upload from "@/components/uploader";
|
|
|
-import { http } from '@/utils/request'
|
|
|
+import { http } from "@/utils/request";
|
|
|
|
|
|
-let TYPE = {
|
|
|
-
|
|
|
-}
|
|
|
+let TYPE = {};
|
|
|
|
|
|
export default {
|
|
|
- data(){
|
|
|
+ data() {
|
|
|
return {
|
|
|
- hasLoad:false,
|
|
|
- fileList:[],
|
|
|
- progress:0,
|
|
|
- desc:'',
|
|
|
- contact:''
|
|
|
- }
|
|
|
+ hasLoad: false,
|
|
|
+ fileList: [],
|
|
|
+ progress: 0,
|
|
|
+ desc: "",
|
|
|
+ contact: "",
|
|
|
+ };
|
|
|
},
|
|
|
- props:{
|
|
|
- fileCode:String
|
|
|
+ props: {
|
|
|
+ fileCode: String,
|
|
|
},
|
|
|
- components:{
|
|
|
- Upload
|
|
|
+ components: {
|
|
|
+ Upload,
|
|
|
},
|
|
|
- computed:{
|
|
|
-
|
|
|
- },
|
|
|
- watch:{
|
|
|
-
|
|
|
- },
|
|
|
- methods:{
|
|
|
- async save(){
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ async save() {
|
|
|
if (!String(this.desc).trim()) {
|
|
|
return this.$showAlert({
|
|
|
- tips:'请填写史料说明'
|
|
|
- })
|
|
|
+ tips: "请填写史料说明",
|
|
|
+ });
|
|
|
}
|
|
|
let params = {
|
|
|
- "code": this.fileList.length>0?this.fileCode:'',
|
|
|
- "description": String(this.desc).trim(),
|
|
|
- "phone": this.contact.trim()
|
|
|
- }
|
|
|
+ code: this.fileList.length > 0 ? this.fileCode : "",
|
|
|
+ description: String(this.desc).trim(),
|
|
|
+ phone: this.contact.trim(),
|
|
|
+ };
|
|
|
|
|
|
- let result = await this.$http({
|
|
|
- method: 'post',
|
|
|
- data: params,
|
|
|
- url: '/api/web/material/save'
|
|
|
- })
|
|
|
-
|
|
|
- if (result.code === 0) {
|
|
|
- this.$showAlert({
|
|
|
- tips:'提交成功'
|
|
|
- })
|
|
|
- this.$bus.$emit('toggleUploadFile',false)
|
|
|
- }
|
|
|
+ $.ajax({
|
|
|
+ url: "/api/web/material/save",
|
|
|
+ type: "post",
|
|
|
+ data: JSON.stringify(params),
|
|
|
+ dataType: "json",
|
|
|
+ contentType: "application/json",
|
|
|
+ success: (result) => {
|
|
|
+ if (result.code === 0) {
|
|
|
+ this.$showAlert({
|
|
|
+ tips: "提交成功",
|
|
|
+ });
|
|
|
+ this.$bus.$emit("toggleUploadFile", false);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
- async del(item,i){
|
|
|
- let result = await this.$http({
|
|
|
- method: 'post',
|
|
|
- data: {path:item.path},
|
|
|
- url: '/api/web/material/delete'
|
|
|
- })
|
|
|
- if (!result.code === 0) {
|
|
|
- this.$showAlert({
|
|
|
- tips:'删除失败，请稍后再试'
|
|
|
- })
|
|
|
- this.$bus.$emit('toggleUploadFile',false)
|
|
|
- }
|
|
|
- this.fileList.splice(i,1);
|
|
|
-
|
|
|
+ async del(item, i) {
|
|
|
+ $.ajax({
|
|
|
+ url: "/api/web/material/delete",
|
|
|
+ type: "post",
|
|
|
+ data: JSON.stringify({ path: item.path }),
|
|
|
+ dataType: "json",
|
|
|
+ contentType: "application/json",
|
|
|
+ success: (result) => {
|
|
|
+ if (!result.code === 0) {
|
|
|
+ this.$showAlert({
|
|
|
+ tips: "删除失败，请稍后再试",
|
|
|
+ });
|
|
|
+ this.$bus.$emit("toggleUploadFile", false);
|
|
|
+ }
|
|
|
+ this.fileList.splice(i, 1);
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
onFileChange(data) {
|
|
|
- if (this.fileList.length>4) {
|
|
|
+ if (this.fileList.length > 4) {
|
|
|
return this.$showAlert({
|
|
|
- tips:'上传文件数量不超过5个'
|
|
|
- })
|
|
|
+ tips: "上传文件数量不超过5个",
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
console.log(data.files);
|
|
|
- let type = ''
|
|
|
- if (data.files[0].name.indexOf('.rar')>-1) {
|
|
|
- type = 'application'
|
|
|
+ let type = "";
|
|
|
+ if (data.files[0].name.indexOf(".rar") > -1) {
|
|
|
+ type = "application";
|
|
|
}
|
|
|
let tmp = {
|
|
|
- id:'_' + this.$randomWord(false,8,8),
|
|
|
- file:data.files[0],
|
|
|
- type:type || data.files[0].type.split('/')[0],
|
|
|
- name:data.files[0].name,
|
|
|
- img:window.URL.createObjectURL(data.files[0])
|
|
|
- }
|
|
|
+ id: "_" + this.$randomWord(false, 8, 8),
|
|
|
+ file: data.files[0],
|
|
|
+ type: type || data.files[0].type.split("/")[0],
|
|
|
+ name: data.files[0].name,
|
|
|
+ img: window.URL.createObjectURL(data.files[0]),
|
|
|
+ };
|
|
|
+
|
|
|
+ let flag = this.fileList.findIndex((item) => {
|
|
|
+ return data.files[0].name == item.name;
|
|
|
+ });
|
|
|
|
|
|
- let flag = this.fileList.findIndex(item=>{
|
|
|
- return data.files[0].name == item.name
|
|
|
- })
|
|
|
-
|
|
|
- if (flag>-1) {
|
|
|
+ if (flag > -1) {
|
|
|
return this.$showAlert({
|
|
|
- tips:'无法上传同名文件，请重新选择'
|
|
|
- })
|
|
|
+ tips: "无法上传同名文件，请重新选择",
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- http.uploadFile(`${this.$serverName}/api/web/material/upload/${this.fileCode}`, tmp, (res)=>{
|
|
|
- tmp.path = res.data.path
|
|
|
- this.fileList.push(tmp)
|
|
|
- }, err=>{
|
|
|
- console.log(err);
|
|
|
- },progress=>{
|
|
|
- this.progress = progress
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
+ http.uploadFile(
|
|
|
+ `${this.$serverName}/api/web/material/upload/${this.fileCode}`,
|
|
|
+ tmp,
|
|
|
+ (res) => {
|
|
|
+ tmp.path = res.data.path;
|
|
|
+ this.fileList.push(tmp);
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.log(err);
|
|
|
+ },
|
|
|
+ (progress) => {
|
|
|
+ this.progress = progress;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
},
|
|
|
- mounted(){
|
|
|
- }
|
|
|
-}
|
|
|
+ mounted() {},
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.collection{
|
|
|
+.collection {
|
|
|
margin: 0 auto;
|
|
|
width: 80%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
min-height: 87vh;
|
|
|
padding: 0;
|
|
|
position: fixed;
|
|
|
- .bg{
|
|
|
+ .bg {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
@@ -204,7 +238,7 @@ export default {
|
|
|
left: 0;
|
|
|
z-index: -1;
|
|
|
}
|
|
|
- .close{
|
|
|
+ .close {
|
|
|
position: absolute;
|
|
|
bottom: 50px;
|
|
|
right: 50px;
|
|
|
@@ -212,44 +246,44 @@ export default {
|
|
|
cursor: pointer;
|
|
|
z-index: 9999;
|
|
|
}
|
|
|
-
|
|
|
- .con{
|
|
|
+
|
|
|
+ .con {
|
|
|
width: 100%;
|
|
|
margin-top: 45px;
|
|
|
overflow-y: auto;
|
|
|
- .title{
|
|
|
+ .title {
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.59);
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
margin: 0 auto;
|
|
|
- color: #FCD67B;
|
|
|
+ color: #fcd67b;
|
|
|
letter-spacing: 2px;
|
|
|
}
|
|
|
- .con-body{
|
|
|
+ .con-body {
|
|
|
font-size: 16px;
|
|
|
letter-spacing: 1px;
|
|
|
width: 80%;
|
|
|
max-width: 900px;
|
|
|
margin: 44px auto 0;
|
|
|
|
|
|
- .line{
|
|
|
+ .line {
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
opacity: 0.3;
|
|
|
margin: 16px 0;
|
|
|
}
|
|
|
|
|
|
- .item{
|
|
|
+ .item {
|
|
|
display: flex;
|
|
|
- >span{
|
|
|
+ > span {
|
|
|
min-width: 100px;
|
|
|
display: inline-block;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
- >textarea{
|
|
|
+ > textarea {
|
|
|
width: 100%;
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
color: #000000;
|
|
|
@@ -258,36 +292,36 @@ export default {
|
|
|
border-radius: 4px;
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
- .desc{
|
|
|
+ .desc {
|
|
|
font-size: 14px;
|
|
|
color: rgba(255, 255, 255, 0.59);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .uploaditem{
|
|
|
+ .uploaditem {
|
|
|
align-items: center;
|
|
|
margin-top: 60px;
|
|
|
margin-bottom: 40px;
|
|
|
- >span{
|
|
|
+ > span {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
- >ul{
|
|
|
+ > ul {
|
|
|
display: flex;
|
|
|
- >li{
|
|
|
+ > li {
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
width: 86px;
|
|
|
height: 80px;
|
|
|
position: relative;
|
|
|
border-radius: 4px;
|
|
|
margin-right: 15px;
|
|
|
- >img{
|
|
|
+ > img {
|
|
|
width: 30px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
- >span{
|
|
|
+ > span {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
bottom: -25px;
|
|
|
@@ -295,23 +329,23 @@ export default {
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
font-size: 14px;
|
|
|
- white-space: nowrap;
|
|
|
+ white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
- .img{
|
|
|
+ .img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- img{
|
|
|
+ img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .close{
|
|
|
+ .close {
|
|
|
display: none;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
@@ -320,24 +354,24 @@ export default {
|
|
|
height: 100%;
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
cursor: auto;
|
|
|
- >img{
|
|
|
+ > img {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
cursor: pointer;
|
|
|
width: 40px;
|
|
|
}
|
|
|
}
|
|
|
- &:hover{
|
|
|
- .close{
|
|
|
+ &:hover {
|
|
|
+ .close {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .plus{
|
|
|
+ .plus {
|
|
|
cursor: pointer;
|
|
|
- >img{
|
|
|
+ > img {
|
|
|
width: 20px;
|
|
|
position: absolute;
|
|
|
}
|
|
|
@@ -345,16 +379,16 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .submit{
|
|
|
+ .submit {
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
line-height: 20px;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
margin-top: 40px;
|
|
|
- >span{
|
|
|
- background: #A01C26;
|
|
|
+ > span {
|
|
|
+ background: #a01c26;
|
|
|
margin: 0 auto;
|
|
|
display: inline-block;
|
|
|
line-height: 47px;
|
|
|
@@ -365,40 +399,39 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-.showloading{
|
|
|
+.showloading {
|
|
|
position: fixed;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- .loadingcon{
|
|
|
+ .loadingcon {
|
|
|
width: 47%;
|
|
|
height: 182px;
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
border: 1px solid #707070;
|
|
|
border-radius: 4px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
left: 50%;
|
|
|
- .line{
|
|
|
+ .line {
|
|
|
width: 80%;
|
|
|
height: 25px;
|
|
|
- background: #DCDCDC;
|
|
|
+ background: #dcdcdc;
|
|
|
margin: 60px auto 0;
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
- .progress{
|
|
|
+ .progress {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background: #A01C26;
|
|
|
+ background: #a01c26;
|
|
|
}
|
|
|
}
|
|
|
- >span{
|
|
|
+ > span {
|
|
|
color: #000;
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
@@ -407,5 +440,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-</style>
|
|
|
+</style>
|
chenzhiguang
