learning-system-portal/src/views/lecturer/FirstDraft.vue

<script>
import {mapActions, mapGetters} from "vuex";
import {getCertificationProcess, getTeacherInfo, setOfflineTutoring, treeList} from "@/api/modules/lecturer"
export default {
  name: "",
  computed: {
    ...mapGetters(['userInfo'])
  },

  data(){
    return{
      disabled:false,
      //状态信息
      statusInfo:{},
      sysType: [],
      sysProps: {
        value: "name",
        label: "name"
      },
      sysTypeListMap:[],
      //教师id
      teacherId:'',
      labelPosition:'right',
      form: {
        teacherName: '董兆星',
        teacherNo: '10010908',
        orgName: '后台(业务支援体系)/BOEU/企划中心/数据资产部数据资产部',
        positionName: '产品企划岗',
        bandCode: 'Band7',
        courseName:'',
        courseContent:'',
        courseIntroduction:'',
        coursewareUrl:'',
        courseContent_1:''
      },
      rules: {
        courseName: [
          {required: true, message: '请输入认证课程名称', trigger: 'change'},
          { min: 1, max: 50, message: '最多五十字', trigger: 'blur' }
        ],
        courseContent_1: [
          {required: true, message: '请选择课程分类', trigger: 'change'}
        ],
        courseIntroduction: [
          {required: true, message: '请输入课程简介', trigger: 'change'},
          { min: 1, max: 500, message: '最多五百字', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    ...mapActions({
      getResOwnerTree:'resOwner/getResOwnerTree',
      loadResOwners:'resOwner/loadResOwners',
      getSysTypeTree:'sysType/getSysTypeTree',
      loadSysTypes:'sysType/loadSysTypes'
    }),
    //获取教师认证状态
    getStatus(){
      getCertificationProcess({teacherId:this.teacherId}).then(res=>{
        this.statusInfo=res.data
        if (this.statusInfo.draftStatus==0){
          this.disabled=true
        }
      })
    },
    baseInfo(){
      getTeacherInfo({teacherId:this.teacherId}).then(res=>{
        this.form.teacherName=res.data[0].teacherName
        this.form.teacherNo=res.data[0].teacherNo
        this.form.orgName=res.data[0].orgName
        this.form.positionName=res.data[0].positionName
        this.form.bandCode=res.data[0].bandCode
      })
    },
    onSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.form.coursewareUrl==''){
              this.$message({
                message: '未上传文件',
                type: 'error'
              });
              return
            }else {
              this.form.courseContent = this.form.courseContent_1.join('/');
              setOfflineTutoring(
                {teacherId:this.teacherId,
                  courseName:this.form.courseName,
                  courseContent:this.form.courseContent,
                  courseIntroduction:this.form.courseIntroduction,
                  coursewareUrl:this.form.coursewareUrl,
                  coursewareName:this.form.coursewareName,
                  version:0
                }).then(res=>{
                if (res.code==200){
                  this.$message({
                    message: '设置成功',
                    type: 'success'
                  });
                  this.$router.push({
                    path:'/need/onlinelearning',
                    query:{teacherId:this.teacherId}
                  })
                }
              })
            }
          } else {
            return false;
          }
        });
    },
    handRemove(file){
      this.form.coursewareUrl=''
      this.form.coursewareName=''
    },
    handlSuccess(response, file, fileList){
      if (response.code==200){
        this.form.coursewareUrl=response.data.coursewareUrl
        this.form.coursewareName=response.data.coursewareName
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      }
    },
    handlError(response, file, fileList){
      this.$message({
        message: '上传失败',
        type: 'error'
      });
    }
  },
  mounted() {
    //获取基本信息
    this.teacherId=this.$route.query.teacherId
    this.baseInfo()
    this.getStatus()
    this.getSysTypeTree().then(rs=>{
      this.sysTypeListMap=rs;
    })
  }
}
</script>

<template>
  <div>
    <div class="title">上传初稿</div>
    <el-container>
      <div class="form-table">
        <el-form ref="form"  :model="form" :rules="rules" :label-position="labelPosition" label-width="140px">
          <div>
            <el-col :span="10">
              <el-form-item label="姓名：">
                <el-input type="text" :disabled="true" v-model="form.teacherName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="4">
              <el-form-item label="工号：">
                <el-input type="text" :disabled="true" v-model="form.teacherNo"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="组织：">
            <el-input v-model="form.orgName" :disabled="true"></el-input>
          </el-form-item>
          <div>
            <el-col :span="10">
              <el-form-item label="岗位：">
                <el-input type="text" :disabled="true" v-model="form.positionName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="4">
              <el-form-item label="职级：">
                <el-input type="text" :disabled="true" v-model="form.bandCode"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="认证课程名称："  prop="courseName">
            <el-input v-model="form.courseName" placeholder="请输入认证课程名称"></el-input>
          </el-form-item>
          <el-form-item label="课程内容分类：" prop="courseContent_1">
            <el-cascader placeholder="选择内容分类" style="width: 90%;" clearable v-model="form.courseContent_1" :props="sysProps" :options="sysTypeListMap"></el-cascader>
          </el-form-item>
          <el-form-item label="课程简介：" prop="courseIntroduction">
            <el-input type="textarea" v-model="form.courseIntroduction"></el-input>
          </el-form-item>
          <div style="margin-left: 140px;margin-bottom: 20px">
            <el-upload
              class="upload-demo"
              drag
              action="/activityApi/certification/uploadCourseware"
              accept=".ppt,.pptx,.pdf"
              :on-success="handlSuccess"
              :on-error="handlError"
              :limit="1"
              :on-remove="handRemove"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">请上传解密后的文件，仅支持上传ppt，pptx，pdf格式文件</div>
            </el-upload>
          </div>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')" disabled="disabled">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-container>
    <div style="height: 600px;position: absolute;right: 60px;top: 40px">
      <div style="display: flex;justify-content: center;align-items: center;flex-direction: column">
        <div class="iconImg">
          <img src="../../assets/images/firstDraft.png" alt="" v-if="statusInfo.draftStatus==1">
          <img src="../../assets/images/firstDraft1.png" alt="" v-if="statusInfo.draftStatus==0">
          <div class="iconName">{{ statusInfo.draftStatus==0?'初稿已上传':'初稿未上传' }}</div>
        </div>
        <div class="line"></div>
        <div class="iconImg">
          <img src="../../assets/images/learn.png" alt="" v-if="statusInfo.onlineLearning==1">
          <img src="../../assets/images/learn1.png" alt="" v-if="statusInfo.onlineLearning==0">
          <div class="iconName">线上学习未开始</div>
        </div>
        <div class="line"></div>
        <div class="iconImg">
          <img src="../../assets/images/coaching.png" alt="" v-if="statusInfo.offlineTutoring==1">
          <img src="../../assets/images/coaching1.png" alt="" v-if="statusInfo.offlineTutoring==0">
          <div class="iconName">线下辅导未完成</div>
        </div>
        <div class="line"></div>
        <div class="iconImg">
          <img src="../../assets/images/draft.png" alt="" v-if="statusInfo.endStatus==1">
          <img src="../../assets/images/draft1.png" alt="" v-if="statusInfo.endStatus==0">
          <div class="iconName">终稿未上传</div>
        </div>
        <div class="line"></div>
        <div class="iconImg">
          <img src="../../assets/images/authentication.png" alt="" v-if="statusInfo.reviewResult!=0">
          <img src="../../assets/images/authentication1.png" alt="" v-if="statusInfo.reviewResult==0">
          <div class="iconName">认证</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .title{
    font-size: 16px;
    font-weight: 800;
    width: 850px;
    border-bottom: 1px solid rgba(215, 215, 215, 0.66);
    padding: 2px 2px 20px 2px;
  }
  .form-table{
    width: 850px;
    margin-top: 20px;
  }
  .iconImg{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #333333;
    font-size: 14px;
  }
  .iconImg>img{
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
  }
  .line{
    width: 2px;
    height: 100px;
    background-color: #d7d7d7;
    margin-top: 3px;
    margin-bottom: 3px;
  }


</style>