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.
148 lines
4.7 KiB
148 lines
4.7 KiB
<template>
|
|
<el-form ref="form" :model="form" label-width="80px">
|
|
<el-form-item :label="$t('upload.form.type')">
|
|
<el-select v-model="form.type" :placeholder="$t('upload.form.input_type',{type:$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')">
|
|
<el-col :span="4">
|
|
<el-input v-model="form.author"
|
|
:placeholder="$t('upload.form.input_author',{author:$t('upload.form.author')})"></el-input>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.profession')">
|
|
<el-col :span="4">
|
|
<el-input v-model="form.profession"
|
|
:placeholder="$t('upload.form.input_profession',{profession:$t('upload.form.profession')})"></el-input>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.school')">
|
|
<el-col :span="4">
|
|
<el-input v-model="form.school"
|
|
:placeholder="$t('upload.form.input_school',{school:$t('upload.form.school')})"></el-input>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.year')">
|
|
<el-select v-model="form.year" :placeholder="$t('upload.form.input_year',{year:$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')">
|
|
<el-col :span="4">
|
|
<el-input v-model="form.summary" type="textarea"
|
|
:placeholder="$t('upload.form.input_summary',{summary:$t('upload.form.summary')})"></el-input>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('upload.form.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')">
|
|
<el-upload
|
|
class="upload-demo"
|
|
action="https://jsonplaceholder.typicode.com/posts/"
|
|
:on-preview="handlePreview"
|
|
:on-remove="handleRemove"
|
|
:before-remove="beforeRemove"
|
|
:file-list="form.fileList"
|
|
accept=".txt">
|
|
<el-button size="small" type="primary">{{$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('submit')}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'upload',
|
|
data() {
|
|
return {
|
|
form: {
|
|
type: '',
|
|
author: '',
|
|
profession: '',
|
|
school: '',
|
|
year: '',
|
|
summary: '',
|
|
tag: {
|
|
dynamicTags: [],
|
|
inputVisible: false,
|
|
inputValue: ''
|
|
},
|
|
fileList: []
|
|
},
|
|
options: [{
|
|
value: '硕士论文',
|
|
label: '硕士论文'
|
|
}, {
|
|
value: '博士论文',
|
|
label: '博士论文'
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
//删除标签
|
|
handleClose(tag) {
|
|
this.form.tag.dynamicTags.splice(this.form.tag.dynamicTags.indexOf(tag), 1)
|
|
},
|
|
//显示添加标签输入框
|
|
showInput() {
|
|
this.form.tag.inputVisible = true
|
|
this.$nextTick(_ => {
|
|
this.$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, fileList) {
|
|
console.log(file, fileList)
|
|
},
|
|
//预览论文
|
|
handlePreview(file) {
|
|
console.log(file)
|
|
},
|
|
//确认移除论文
|
|
beforeRemove(file, fileList) {
|
|
return this.$confirm($t('upload.form.remove',{file:file.name}))
|
|
},
|
|
//提交论文
|
|
onSubmit(){
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|