测试上传

src/api/schoolTimetable.js

@@ -31,3 +31,11 @@ export function setScheduleWare(data) {
     data
   })
 }
+// 导入表格
+export function upLoad(data) {
+  return request({
+    url: '/cms/schedule/import',
+    method: 'post',
+    data
+  })
+}

src/views/uploadTab/index.vue

@@ -1,45 +1,67 @@
 <template>
   <div class="upload-tab">
-    <el-upload
-      class="image-uploader"
-      :multiple="false"
-      :before-upload="beforeUpload"
-      :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 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"
+        :before-upload="beforeUpload"
+        :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 { mapGetters } from 'vuex'
-
+import  { upLoad } from '@/api/schoolTimetable'
 export default {
   data() {
     return {
-      dialogFormVisible: false,
-      form: {
-        id: '',
+      ruleForm: {
         title: '',
         code: '',
-        weekSeq: ''
+        weekSeq: '',
+        file: ''
       },
-      formLabelWidth: '120px'
+      rules: {
+        title: [
+          { required: true, message: '请输入标题', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请选择学龄', trigger: 'change' }
+        ],
+        weekSeq: [
+          { required: true, message: '请输入周', trigger: 'blur' }
+        ]
+      }
     }
   },
-  created() {
-    this.$store.dispatch('schoolTimetable/getScheduleList', {})
-  },
-  // eslint-disable-next-line vue/order-in-components
-  computed: {
-    ...mapGetters([
-      'getScheduleData'
-    ])
-  },
   methods: {
     codeGrade(code) {
       console.log(code)
@@ -69,27 +91,6 @@ export default {
       }
       return grade
     },
-    handleEdit(index, row) {
-      console.log(index, row)
-      this.dialogFormVisible = true
-      this.form.id = row.id
-    },
-    handleDetail(index, row) {
-      console.log(index, row)
-      this.$router.push({
-        path: '/schoolDetail/schoolDetail',
-        query: {
-          id: row.id
-        }
-      })
-    },
-    handOk() {
-      if (this.form.title !== '' || this.form.code !== '' || this.form.weekSeq !== '') {
-        this.$store.dispatch('schoolTimetable/setScheduleList', this.form).then(() => {
-          this.dialogFormVisible = false
-        })
-      }
-    },
     // 上传文件之前的钩子
     beforeUpload(file) {
       console.log('beforeUpload')
@@ -112,7 +113,39 @@ export default {
       form.append('file', fileObj)
       // form.append('comId', this.comId)
       console.log('-----', form)
+      this.ruleForm.file = form
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log(this.ruleForm)
+          // alert('submit!')
+        //   upLoad().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>