cloudnote_web/pages/index/upload.vue

<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>