cloudnote_web/pages/index/upload.vue

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