You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
254 lines
8.5 KiB
254 lines
8.5 KiB
<template>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
<el-form-item :label="$t('upload.form.title')" prop="title">
|
|
<el-col :span="4">
|
|
<el-input v-model="form.title"
|
|
:placeholder="$t('input_please',{keyword:$t('upload.form.title')})"></el-input>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.type')" prop="type">
|
|
<el-select v-model="form.type" :placeholder="$t('select_please',{keyword:$t('upload.form.type')})">
|
|
<el-option v-for="item in options" :key="item.value" :value="item.value">{{item.label}}</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.author')" prop="author">
|
|
<el-col :span="4">
|
|
<el-input v-model="form.author"
|
|
:placeholder="$t('input_please',{keyword:$t('upload.form.author')})"></el-input>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.profession')" prop="profession">
|
|
<el-col :span="4">
|
|
<el-input v-model="form.profession"
|
|
:placeholder="$t('input_please',{keyword:$t('upload.form.profession')})"></el-input>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.school')" prop="school">
|
|
<el-col :span="4">
|
|
<el-input v-model="form.school"
|
|
:placeholder="$t('input_please',{keyword:$t('upload.form.school')})"></el-input>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.year')" prop="year">
|
|
<el-select v-model="form.year" :placeholder="$t('select_please',{keyword:$t('upload.form.year')})">
|
|
<el-option v-for="n in 10" :key="n" :value="2019-n">{{2019-n}}</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.summary')" prop="summary">
|
|
<el-col :span="4">
|
|
<el-input autosize v-model="form.summary" type="textarea" class="input-limit-count"
|
|
:maxlength="512"
|
|
show-word-limit
|
|
:placeholder="$t('input_please',{keyword:$t('upload.form.summary')})"></el-input>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.tag')" prop="tag">
|
|
<el-tag
|
|
:key="tag"
|
|
v-for="tag in form.tag.dynamicTags"
|
|
closable
|
|
:disable-transitions="false"
|
|
@close="handleClose(tag)">
|
|
{{tag}}
|
|
</el-tag>
|
|
<el-col :span="4" v-if="form.tag.inputVisible">
|
|
<el-input
|
|
class="input-new-tag"
|
|
v-model="form.tag.inputValue"
|
|
ref="saveTagInput"
|
|
size="small"
|
|
@keyup.enter.native="handleInputConfirm"
|
|
@blur="handleInputConfirm"
|
|
>
|
|
</el-input>
|
|
</el-col>
|
|
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ {{$t('upload.form.tag')}}</el-button>
|
|
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.content')" prop="content">
|
|
<el-upload
|
|
class="upload-demo"
|
|
:action="GLOBAL.server_address+'/v1/api/file/upload'"
|
|
:on-preview="handlePreview"
|
|
:on-remove="handleRemove"
|
|
:before-remove="beforeRemove"
|
|
:on-success="uploadOK"
|
|
:file-list="form.fileList"
|
|
:limit="1"
|
|
accept="application/pdf,text/plain"
|
|
v-model="form.fileList"
|
|
ref="file">
|
|
<el-button size="small" type="primary" v-if="form.fileList.length===0">{{$t('upload.form.upload')}}</el-button>
|
|
<div slot="tip" class="el-upload__tip">{{$t('upload.form.upload_tip')}}</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">{{$t('button.submit')}}</el-button>
|
|
<el-button @click="$refs.form.resetFields();$refs.file.clearFiles();form.fileList=[]">{{$t('reset')}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue'
|
|
|
|
export default Vue.extend({
|
|
name: 'upload',
|
|
data() {
|
|
let that=this
|
|
return {
|
|
form: {
|
|
title:'',
|
|
type: '',
|
|
author: '',
|
|
profession: '',
|
|
school: '',
|
|
year: '',
|
|
summary: '',
|
|
tag: {
|
|
dynamicTags: [],
|
|
inputVisible: false,
|
|
inputValue: ''
|
|
},
|
|
fileList: []
|
|
},
|
|
rules: {
|
|
title:[{
|
|
required: true,
|
|
message: this.$t('input_please',{keyword:this.$t('upload.form.title')})
|
|
}],
|
|
type:[{
|
|
required: true,
|
|
message: this.$t('select_please',{keyword:this.$t('upload.form.type')})
|
|
}],
|
|
author:[{
|
|
required: true,
|
|
message: this.$t('input_please',{keyword:this.$t('upload.form.author')})
|
|
}],
|
|
profession:[{
|
|
required: true,
|
|
message: this.$t('input_please',{keyword:this.$t('upload.form.profession')})
|
|
}],
|
|
school:[{
|
|
required: true,
|
|
message: this.$t('input_please',{keyword:this.$t('upload.form.school')})
|
|
}],
|
|
year:[{
|
|
required: true,
|
|
message: this.$t('select_please',{keyword:this.$t('upload.form.year')})
|
|
}],
|
|
summary:[{
|
|
required: true,
|
|
message: this.$t('input_please',{keyword:this.$t('upload.form.summary')})
|
|
}],
|
|
content:[{
|
|
validator:(rule, value, callback) => {
|
|
if(that.form.fileList.length===0){
|
|
callback(rule.msg)
|
|
}else{
|
|
callback()
|
|
}
|
|
},
|
|
msg: this.$t('upload_please',{keyword:this.$t('upload.form.content')})
|
|
}]
|
|
},
|
|
options: [{
|
|
value: '硕士论文',
|
|
label: '硕士论文'
|
|
}, {
|
|
value: '博士论文',
|
|
label: '博士论文'
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
//上传成功
|
|
uploadOK(response, file, fileList){
|
|
this.form.fileList=fileList
|
|
file.id=response.data
|
|
},
|
|
//删除标签
|
|
handleClose(tag:string) {
|
|
this.form.tag.dynamicTags.splice(this.form.tag.dynamicTags.indexOf(tag), 1)
|
|
},
|
|
//显示添加标签输入框
|
|
showInput() {
|
|
this.form.tag.inputVisible = true
|
|
let that=this
|
|
this.$nextTick(() => {
|
|
that.$refs.saveTagInput.$refs.input.focus()
|
|
})
|
|
},
|
|
//确认添加标签
|
|
handleInputConfirm() {
|
|
let inputValue = this.form.tag.inputValue
|
|
if (inputValue) {
|
|
this.form.tag.dynamicTags.push(inputValue)
|
|
}
|
|
console.info(this.form.tag.dynamicTags)
|
|
this.form.tag.inputVisible = false
|
|
this.form.tag.inputValue = ''
|
|
},
|
|
//删除论文
|
|
handleRemove(file: any, fileList: any) {
|
|
let that=this
|
|
this.GLOBAL.fetchJSON(`/v1/api/file/remove/${this.form.fileList[0].id}`,'DELETE',{},function(res) {
|
|
if(res.code==='200'){
|
|
that.form.fileList=[]
|
|
}else{
|
|
that.$message.error(that.$t('error_500').toString())
|
|
}
|
|
})
|
|
},
|
|
//预览论文
|
|
handlePreview(file: any) {
|
|
console.log(file)
|
|
},
|
|
//确认移除论文
|
|
beforeRemove(file: { name: string }, fileList: any) {
|
|
return this.$confirm(this.$t('upload.form.remove',{file:file.name}).toString(),{
|
|
confirmButtonText:this.$t('button.ok').toString(),
|
|
cancelButtonText:this.$t('button.cancel').toString()
|
|
})
|
|
},
|
|
//提交论文
|
|
onSubmit(){
|
|
this.$refs.form.validate((valid: boolean) => {
|
|
if(valid){
|
|
let that=this
|
|
this.GLOBAL.fetchJSON('/v1/api/paper/upload','POST',{
|
|
title:this.form.title,
|
|
type: this.form.type,
|
|
author: this.form.author,
|
|
profession: this.form.profession,
|
|
school: this.form.school,
|
|
year: this.form.year,
|
|
summary: this.form.summary,
|
|
tag:this.form.tag.dynamicTags.join(','),
|
|
fileId:this.form.fileList[0].id
|
|
},function(res) {
|
|
if(res.code==='200'){
|
|
that.$message.info(that.$t('upload.tip.ok').toString())
|
|
}else{
|
|
that.$message.error(that.$t('error_500').toString())
|
|
}
|
|
})
|
|
}else{
|
|
this.$message.error({
|
|
message: this.$t('form_err').toString(),
|
|
duration: 2000
|
|
})
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style>
|
|
.input-limit-count>span{
|
|
line-height: 25px;
|
|
bottom: 10px;
|
|
}
|
|
</style>
|
|
|