index.vue

<template>
    <div class="form-wrapper">
        <div style="width: 100%;height:100%;">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="培训名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="培训内容" prop="region">
                    <el-input type="textarea" v-model="ruleForm.region" rows="5"></el-input>
                  </el-form-item>
            </el-form>
        </div>
        <el-form>  
          <div class="flex">
            <el-form-item label="视频上传" v-if="!readOnly" prop="video">
              <FileUpload
                listType="picture"
                @resFun="getFileInfoVideo"
                @remove="listRemoveVideo"
                :fileArr="fileListVideo"
                :fileSize="500"
                :fileType="['mp4']"
              />
              <el-input v-show="false" disabled v-model="form.video"></el-input>
            </el-form-item>
            <el-form-item label="附件上传" v-if="!readOnly" prop="enclosure">
              <FileUpload
                listType="picture"
                @resFun="getFileInfoFile"
                @remove="listRemoveFile"
                :fileArr="fileListFile"
              />
              <el-input v-show="false" disabled v-model="form.enclosure"></el-input>
            </el-form-item>
          </div> 
        </el-form>  
        <visitorQuestion></visitorQuestion>
    </div>
</template>
<script>
  
import FileUpload from "@/components/FileUpload";
import uploadfile from "@/assets/uploadfile.png";
import visitorQuestion from "@/views/educationPlanExam/visitorProgram/visitorQuestion";
// import visitorDia from "@/views/educationPlanExam/visitorProgram/visitorDia";
    export default {
      data() {
        return {
          ruleForm: {
            name: '',
            region: '',
          },
          form: {
            video: "",
            enclosure: "",
          },
          fileListVideo: [],
          fileListFile: [],
          readOnly: false,
          rules: {
            name: [
              { required: true, message: '请输入培训名称', trigger: 'blur' }
            ],
            region: [
              { required: true, message: '请输入培训内容', trigger: 'change' }
            ],
            video: [
              { required: true, trigger: "blue", message: "视频不能为空" }
            ],
            enclosure: [
              { required: true, trigger: "blur", message: "附件不能为空" },
            ],
          }
        };
      },
      components: {
        FileUpload,
        visitorQuestion,
      },
      created() {
        if (this.courseId) {
          this.getLessonById();
        }
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
       
        getFileInfoVideo(res) {
          this.form.video = res.url;
          // this.form.videoName = res.fileName;
          this.fileListVideo = [
            {
              name: res.fileName,
              url: uploadfile,
            },
          ];
        },
        listRemoveVideo(e) {
          this.fileListVideo = [];
          this.form.video = "";
          // this.form.videoName = null;
        },
        getFileInfoFile(res) {
          this.form.enclosure = res.url;
          // this.form.enclosureName = res.fileName;
          this.fileListFile = [
            {
              name: res.fileName,
              url: uploadfile,
            },
          ];
        },
        listRemoveFile(e) {
          this.fileListFild = [];
          this.form.enclosure = "";
          // this.form.fileName = null;
        },
      }
    }
  </script>
<style lang="scss" scoped>
.form-wrapper {
  padding-top: 30px;
  width: 80%;
  height: 100%;
  margin-bottom: 20px;
}
.flex{
  width: 100%;
  justify-content: space-around;
  padding: 20px 30px;
}
</style>