train-student/src/views/user/chuanzuoye.vue

<template>
  <div id="homework">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <el-col :span="24" class="leaveBtn"> </el-col>
          <el-col :span="24" class="leaveList">
            <!-- <upload-homework :form="form" @onConfirm="onsave"></upload-homework> -->
            <el-form ref="form" label-width="80px">
              <el-form-item label="文件上传" prop="zynumberfile">
                <!-- <upload :limit="1" :data="pic" type="picurl" :url="`/files/task/upload`" @upload="uploadSuccess" @delete="toDelete"></upload> -->
                <van-uploader v-model="pic" :after-read="afterRead" preview-size="160px" />
              </el-form-item>

              <div style="margin: 16px;">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit()">上传</el-button>
                </el-form-item>
              </div>
            </el-form>
          </el-col>
          <el-col :span="24" class="foot">
            <footInfo></footInfo>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
import upload from '@frame/components/upload.vue';
import NavBar from '@/layout/common/topInfo.vue';
import footInfo from '@/layout/common/footInfo.vue';
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
const { mapActions: mapUploadtask } = createNamespacedHelpers('uploadtask');
const { mapActions: util } = createNamespacedHelpers('util');
export default {
  name: 'homework',
  props: {},
  components: {
    NavBar, //头部导航
    footInfo,
    // upload,
  },
  data: () => ({
    pic: [],
    show: false,
    navShow: true,
    taskAnswer: null,
    title: '',
    isleftarrow: '',
  }),
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow = to.meta.isleftarrow;
    },
  },
  created() {
    this.search();
  },
  methods: {
    ...util({ modelFetch: 'fetch', taskUpload: 'taskupload' }),
    ...mapUploadtask({ list: 'query', add: 'create', fet: 'fetch', update: 'update' }),
    // 查找作业
    async search() {
      let taskAnswer = await this.modelFetch({ model: 'uploadtask', studentid: this.user.userid, lessonid: this.lessonid });
      // 说明已经上传
      if (taskAnswer.data) {
        const { data } = taskAnswer;
        this.$set(this, `taskAnswer`, data);
        const { picurl } = data;
        if (picurl) {
          if (_.isArray(picurl))
            this.$set(
              this,
              'pic',
              picurl.map(i => ({ url: i }))
            );
        } else {
          this.$set(this, `pic`, [{ url: picurl }]);
        }
      }
    },

    //提交上传
    async onSubmit() {
      // 判断是否有上传作业
      let obj = {};
      if (!this.taskAnswer) {
        obj.termid = this.user.termid;
        obj.batchid = this.user.batchid;
        obj.classid = this.user.classid;
        obj.studentid = this.user.userid;
        obj.lessonid = this.lessonid;
        obj.lessonname = this.name;
      } else obj = _.cloneDeep(this.taskAnswer);
      let h = _.head(this.pic);
      obj.picurl = _.cloneDeep(this.pic.map(i => i.url));
      if (obj.picurl.length <= 0) {
        this.$message({
          showClose: true,
          message: '请上传图片',
          type: 'error',
        });
        return;
      }
      if (!obj.id) {
        let res = await this.add(obj);
        if (this.$checkRes(res)) {
          this.$notify({
            message: '提交成功',
            type: 'success',
          });
        } else {
          this.$notify({
            message: res.errmsg,
            type: 'danger',
          });
        }
      } else {
        let res = await this.update(obj);
        if (this.$checkRes(res)) {
          this.$notify({
            message: '提交成功',
            type: 'success',
          });
        } else {
          this.$notify({
            message: res.errmsg,
            type: 'danger',
          });
        }
      }
    },
    //手机上传至文件上传项目
    async afterRead(data) {
      // 此时可以自行将文件上传至服务器
      this.pic.splice(this.pic.length - 1, 1, { status: 'uploading', message: '上传中...' });
      const { file } = data;
      const res = await this.taskUpload(file);
      const { uri } = res.data;
      if (uri) this.pic.splice(this.pic.length - 1, 1, { url: uri });
    },
    uploadSuccess({ type, data }) {
      this.$set(this.pic, 0, { uri: data.uri });
    },
    toDelete(index) {
      this.pic.splice(index, 1);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    lessonid() {
      return this.$route.query.lessonid;
    },

    name() {
      return this.$route.query.name;
    },
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  min-height: 570px;
}
.main .leaveBtn {
  text-align: center;
  padding: 15px 0;
}
</style>