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.
 
 
 
cloudnote_web/pages/index/upload.vue

151 lines
4.8 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 lang="ts">
import Vue from 'vue'
export default Vue.extend({
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: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) {
console.log(file, fileList)
},
//预览论文
handlePreview(file: any) {
console.log(file)
},
//确认移除论文
beforeRemove(file: { name: string }, fileList: any) {
return this.$confirm(this.$t('upload.form.remove',{file:file.name}))
},
//提交论文
onSubmit(){
}
}
})
</script>