ott8.0-web-admin/src/views/uploadTab/index.vue

<template>
  <div class="upload-tab">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="学龄" prop="code">
        <el-select v-model="ruleForm.code" placeholder="请选择活动学龄">
          <el-option label="小学一年级" value="PRIMARY_FIRST_GRADE" />
          <el-option label="小学二年级" value="PRIMARY_SECOND_GRADE" />
          <el-option label="小学三年级" value="PRIMARY_THREE_GRADE" />
          <el-option label="小学四年级" value="PRIMARY_SENIOR_GRADE" />
          <el-option label="中学英语特殊句式" value="MIDDLE_ENGLISH" />
          <el-option label="爱上幼儿园" value="KINDERGARTEN" />
          <el-option label="学前领先班" value="PRESCHOOL" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="周" prop="weekSeq">
        <el-input v-model="ruleForm.weekSeq" />
      </el-form-item>
      <el-upload
        class="image-uploader"
        :multiple="false"
        :drag="true"
        action=""
        :limit="1"
        :on-exceed="handleExceed"
        :http-request="uploadFile"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { upLoad } from '@/api/schoolTimetable'
export default {
  data() {
    return {
      ruleForm: {
        title: '',
        code: '',
        weekSeq: '',
        file: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请选择学龄', trigger: 'change' }
        ],
        weekSeq: [
          { required: true, message: '请输入周', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    codeGrade(code) {
      console.log(code)
      let grade = ''
      switch (code) {
        case 'PRIMARY_FIRST_GRADE':
          grade = '小学一年级'
          break
        case 'PRIMARY_SECOND_GRADE':
          grade = '小学二年级'
          break
        case 'PRIMARY_THREE_GRADE':
          grade = '小学三年级'
          break
        case 'PRIMARY_SENIOR_GRADE':
          grade = '小学四年级'
          break
        case 'MIDDLE_ENGLISH':
          grade = '中学英语特殊句式'
          break
        case 'KINDERGARTEN':
          grade = '爱上幼儿园'
          break
        case 'PRESCHOOL':
          grade = '学前领先班'
          break
      }
      return grade
    },
    // 上传文件之前的钩子
    beforeUpload(file) {
      console.log('beforeUpload')
      console.log(file.type)
      const isText = file.type === 'application/vnd.ms-excel'
      const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      return (isText | isTextComputer)
    },
    // 上传文件个数超过定义的数量
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
    },
    // 上传文件
    uploadFile(item) {
      console.log('=====', item)
      const fileObj = item.file
      // FormData 对象
      const form = new FormData()
      // 文件对象
      form.append('file', fileObj)
      for (var value of form.values()) {
        console.log(value)
        this.ruleForm.file = value
      }
      // form.append('comId', this.comId)
      // console.log((JSON.stringify(fileObj))
      // console.log(JSON.stringify(form.get('file')))
      // this.ruleForm.file = value
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          // alert('submit!')
          upLoad(this.ruleForm).then(res => {
            console.log(res)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
    .upload-tab {
        margin-top: 30px;
    }
    .el-input {
    width: 300px;
    }
    .el-select>.el-input {
    width: 300px;
    }
    .image-uploader {
        margin-left: 30px;
    }
</style>