访客和承包商培训

danger-manage-web/src/views/educationPlanExam/visitorProgram/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>
\ No newline at end of file

danger-manage-web/src/views/educationPlanExam/visitorProgram/visitorAdd.vue

+<template>
+    <div ref="myBody" class="add-question flex">
+      <div class="text flex">
+        <div class="left">
+          目前录入题目是第<span>{{ questionNextNum }}</span
+          >道题
+        </div>
+      </div>
+        <el-form class="form flex" ref="form" :model="form" label-width="auto">
+          <!-- <div class="top flex"> -->
+          <div>
+            <el-form-item
+              label="题目"
+              prop="topicTitle"
+              :rules="{
+                required: true,
+                message: '必须输入题目内容',
+                trigger: 'blur',
+              }"
+            >
+              <el-input
+                type="textarea"
+                placeholder="多行输入"
+                resize="none"
+                rows="4"
+                v-model="form.topicTitle"
+              >
+              </el-input>
+            </el-form-item>
+          </div>
+    
+          <div class="bottom">
+            <!-- <el-form-item label="选项1" prop="title">
+              <el-input v-model="form.title" placeholder="请输入"></el-input>
+            </el-form-item> -->
+            <el-form-item
+              v-for="(question, index) in form.questions"
+              :label="'选项' + (index + 1)"
+              :key="question.key"
+              :prop="'questions.' + index + '.value'"
+              :rules="
+                index === 0
+                  ? {
+                      required: true,
+                      message: '第一项不能为空不能为空',
+                      trigger: 'blur',
+                    }
+                  : {}
+              "
+            >
+              <div class="add-select flex">
+                <el-input
+                  type="textarea"
+                  placeholder="多行输入"
+                  style="flex: 1; margin-right: 10px"
+                  rows="2"
+                  v-model="question.value"
+                ></el-input>
+                <div class="flex algin-items">
+                  <el-button
+                    @click="rightAnswerClick(index)"
+                    class="right"
+                    :class="{ active: answerNum === index }"
+                    icon="el-icon-check"
+                  >
+                    设为答案
+                  </el-button>
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    v-if="index > 0"
+                    @click.prevent="removeDomain(question)"
+                    plain
+                    icon="el-icon-delete"
+                    >删除</el-button
+                  >
+                </div>
+              </div>
+            </el-form-item>
+    
+            <el-form-item
+              class="noAttr"
+              :label="`选项${form.questions.length + 1}`"
+              prop=""
+            >
+              <div class="add-select flex">
+                <el-input
+                  type="textarea"
+                  placeholder="多行输入"
+                  resize="none"
+                  rows="2"
+                  v-model="addValue"
+                  style="flex: 1; margin-right: 10px"
+                >
+                </el-input>
+                <div class="flex algin-items">
+                  <el-button
+                    @click="rightAnswerClick(form.questions.length)"
+                    class="right"
+                    :class="{ active: answerNum === form.questions.length }"
+                    icon="el-icon-check"
+                  >
+                    设为答案
+                  </el-button>
+    
+                  <el-button
+                    size="mini"
+                    class="right1"
+                    @click.prevent="add(addValue)" 
+                    icon="el-icon-plus"
+                    >新增</el-button
+                  >
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+      
+    </div>
+  </template>
+  
+  <script>
+  import {
+    addQuestion,
+    checkQuestion,
+    changeQuestion,
+    getQuestion,
+    getLessonById,
+  } from "@/api/educationPlanExam/lessonsProgram.js";
+  
+  export default {
+    name: "AnswerLesson",
+    props: {
+      // visible: {
+      //   type: Boolean,
+      //   default: false,
+      // },
+      courseId: {
+        type: Number,
+      },
+      topicId: {
+        type: Number,
+      },
+    },
+    components: {},
+    data() {
+      return {
+        form: {
+          topicTitle: "",
+          questions: [{ value: "" }, { value: "" }, { value: "" }],
+        },
+        answerNum: null,
+        addValue: "",
+        // 录入的是第几道题
+        questionNextNum: 1,
+        courseName: "",
+      };
+    },
+  
+    created() {
+      // 如果存在就是修改
+      // if (this.topicId) {
+      //   checkQuestion(this.topicId).then((res) => {
+      //     console.log(res.data);
+      //     const data = res.data;
+      //     this.form = {
+      //       topicTitle: data.topicTitle,
+      //       questions: JSON.parse(data.topicOption),
+      //     };
+      //     this.answerNum = data.answer;
+      //   });
+      // }
+  
+      // 查询是第几道题
+      // this.getQuestion();
+      // 获取课程标题
+      // this.getLessonById(this.courseId);
+    },
+    methods: {
+      getQuestion() {
+        getQuestion({ courseId: this.courseId }).then((res) => {
+          this.questionNextNum = res.total + 1;
+        });
+      },
+      getLessonById(courseId) {
+        getLessonById(courseId).then((res) => {
+          console.log(res);
+          this.courseName = res.data.courseName;
+        });
+      },
+      addQuestion(data) {
+        // 如果是修改，就用修改的方法，如果是新增，就用新增的方法
+        if (this.topicId) {
+          return changeQuestion({ topicId: this.topicId, ...data });
+        } else {
+          return addQuestion({ courseId: this.courseId, ...data });
+        }
+      },
+      rightAnswerClick(index) {
+        this.answerNum = index;
+        console.log(index);
+      },
+      // 删除选项
+      removeDomain(question) {
+        const index = this.form.questions.indexOf(question);
+        // 如果是正确答案,就让正确答案清空
+        if (this.answerNum === index) {
+          this.answerNum = null;
+        }
+        if (index >= 0) {
+          this.form.questions.splice(index, 1);
+        }
+      },
+      // 新增选项
+      add(addValue) {
+        this.form.questions.push({ value: addValue });
+        console.log();
+      },
+      save(num = 2) {
+        return new Promise((resove) => {
+          if (!this.answerNum && this.answerNum !== 0) {
+            this.$message({
+              message: "警告，请设置一个正确答案",
+              type: "warning",
+            });
+            return resove(false);
+          }
+          this.$refs.form.validate((valid) => {
+            if (valid) {
+              const data = {};
+              data.topicTitle = this.form.topicTitle;
+              data.topicOption = JSON.stringify(this.form.questions);
+              data.answer = this.answerNum;
+              this.addQuestion(data).then((res) => {
+                if (res.code == 200) {
+                  // 把修改的这个归位，变成正常添加
+                  this.$emit("update:topicId", null);
+                  this.$message({
+                    message: "添加题目成功",
+                    type: "success",
+                  });
+                  this.$parent.$parent.componentsNumChange(num);
+                  this.$parent.$parent.$parent.getList();
+                  resove(true);
+                }
+              });
+            }
+          });
+        });
+      },
+  
+      saveAndNext() {
+        this.save(3).then((res) => {
+          if (res) {
+            this.reset();
+            this.questionNextNum++;
+          }
+        });
+      },
+      reset() {
+        this.form = {
+          topicTitle: "",
+          questions: [{ value: "" }, { value: "" }, { value: "" }],
+        };
+        this.answerNum = null;
+        this.addValue = "";
+      },
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  .add-question {
+    width: 100%;
+    height: 250px;
+    // overflow: hidden;
+    flex-direction: column;
+    padding-bottom: 7px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #bbbbbb;
+    justify-content: space-between;
+    .form {
+      flex: 1;
+      flex-direction: column;
+      height: 100%;
+      .bottom {
+        overflow-y: auto;
+        height: 330px;
+        box-sizing: border-box;
+  
+        .algin-items {
+          align-items: center;
+          width: 200px;
+        }
+        .right {
+          display: inline-block;
+          width: 133px;
+          margin-right: 10px;
+          line-height: initial;
+          padding: 4px 0;
+          border: 1px solid #0bab0c;
+          color: #0bab0c;
+          font-size: 12px;
+          text-align: center;
+          border-radius: 4px;
+          box-sizing: border-box;
+          cursor: pointer;
+          &.active {
+            background-color: #0bab0c;
+            color: #ffffff;
+          }
+          &:hover {
+            background-color: rgba(11, 171, 12, 0.5);
+            color: #ffffff;
+          }
+        }
+        .right1 {
+          display: inline-block;
+          margin-right: 10px;
+          line-height: initial;
+          width: 90px;
+          border: 1px solid #0bab0c;
+          color: #0bab0c;
+          font-size: 12px;
+          padding: 4px 0;
+          text-align: center;
+          border-radius: 4px;
+          box-sizing: border-box;
+          cursor: pointer;
+          &.active {
+            background-color: #0bab0c;
+            color: #ffffff;
+          }
+          &:hover {
+            background-color: rgba(11, 171, 12, 0.5);
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .text {
+      margin-top: 13px;
+      margin-bottom: 34px;
+      justify-content: space-between;
+      height: 28px;
+      .left {
+        line-height: 28px;
+        color: #101010;
+        font-size: 14px;
+      }
+      .right {
+        width: 411px;
+        line-height: 28px;
+        background: #1d84ff;
+        padding-right: 5px;
+        color: #fff;
+        text-align: right;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file

danger-manage-web/src/views/educationPlanExam/visitorProgram/visitorQuestion.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2022-09-22 17:56:05
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2022-09-28 17:54:16
+ * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/QuestionList.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+    <div ref="myBody" class="add-question flex">
+      <div style="color: #1890ff;">题目管理</div>
+      <div class="text flex">
+        <div class="left">
+          <el-button type="primary"  plain @click="dialogVisible = true">{{
+            saveNextText
+          }}</el-button>
+          目前有<span></span>道题
+          <span class="warn">温馨提示：发布课程前需要进行考试设置</span>
+        </div>
+        <!-- <div class="right">{{courseName}}</div> -->
+      </div>
+      <div class="table flex">
+        <div class="th flex">
+          <div class="left">序号</div>
+          <div class="middle">题目名称</div>
+          <div class="right">操作</div>
+        </div>
+      </div>
+      <div class="d3">
+        <div class="rightNum flex">
+          <div class="left">考试设置</div>
+          <div class="middle flex">
+            <div class="left-text">答对题目大于</div>
+            <div>
+              <el-input
+                v-model="rightNum"
+                style="width: 60px"
+                size="mini"
+              ></el-input>
+            </div>
+            <div>为合格</div>
+          </div>
+          <div class="right">
+            <el-button
+              @click="saveRightNum"
+              icon="el-icon-check"
+              size="mini"
+              type="success"
+              >保存</el-button
+            >
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button
+            type="primary"
+            >{{ "确认" }}</el-button
+          >
+          <el-button>取消</el-button>
+        </div>
+      </div>
+      
+      <el-dialog
+        title="录入题目"
+        :visible.sync="dialogVisible"
+        >
+        <visitorAdd></visitorAdd>
+        <span slot="footer" class="dialog-footer">
+          <!-- <el-button>保存</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
+          <div slot="footer" class="dialog-footer">
+            <el-button
+              type="primary"
+              @click="save"
+              >保存</el-button
+            >
+      
+            <el-button type="primary" @click="saveAndNext">{{
+              saveNextText
+            }}</el-button>
+            <el-button
+              v-if="this.componentsNum == 2"
+              type="primary"
+              >{{ "确认" }}</el-button
+            >
+            <el-button  @click="dialogVisible = false">取消</el-button>
+          </div>
+        </span>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+    import visitorAdd from "@/views/educationPlanExam/visitorProgram/visitorAdd";
+  export default {
+    name: "AnswerLesson",
+    props: {
+      courseId: {
+        type: Number,
+      },
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+      componentsNum: {
+        type: Number,
+        default: 1,
+      },
+    },
+    components: {
+      visitorAdd,
+    },
+    data() {
+      return {
+        dialogVisible: false
+      };
+    },
+    
+    computed: {
+      saveNextText() {
+        let text;
+        if (this.componentsNum == 1) {
+          text = "保存并录入题目";
+        } else if (this.componentsNum == 2) {
+          text = "录入考题";
+        } else {
+          text = "保存并录入下一题";
+        }
+        return text;
+      },
+    },
+    created() {
+      console.log("this.courseId", this.courseId);
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      save() {
+        // this.answerClear();
+        this.$refs.current.save();
+      },
+      saveAndNext() {
+        this.$refs.current.saveAndNext();
+      },
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  .add-question {
+    width: 100%;
+    height: 550px;
+    // overflow: hidden;
+    flex-direction: column;
+    padding-bottom: 7px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #bbbbbb00;
+  
+    .text {
+      margin-top: 13px;
+      margin-bottom: 32px;
+      justify-content: space-between;
+      height: 28px;
+      .left {
+        line-height: 28px;
+        color: #101010;
+        font-size: 14px;
+        .warn {
+          display: inline-flex;
+          font-size: 12px;
+          color: red;
+          margin-left: 10px;
+        }
+      }
+  
+      .right {
+        width: 411px;
+        line-height: 28px;
+        background: #1d84ff;
+        padding-right: 5px;
+        color: #fff;
+        text-align: right;
+      }
+    }
+    .table {
+      flex: 1;
+      height: 0;
+  
+      flex-direction: column;
+      .th {
+        width: 100%;
+        height: 70px;
+        line-height: 70px;
+        background: #f5f5f5;
+        color: #606266;
+  
+        > div {
+          height: 100%;
+        }
+        .left {
+          width: 15%;
+          text-align: center;
+        }
+        .middle {
+          width: 60%;
+          padding-left: 100px;
+        }
+        .right {
+          width: 25%;
+          text-align: center;
+        }
+      }
+      .td-wrapper {
+        flex: 1;
+        overflow-y: auto;
+        // 这样子元素才能有滚动条
+        .td {
+          height: 68px;
+          line-height: 68px;
+          box-sizing: border-box;
+          border-bottom: 1px solid #bbbbbb;
+          &:last-child {
+            border-bottom: none;
+          }
+          > div {
+            height: 100%;
+          }
+          .left {
+            width: 15%;
+            text-align: center;
+          }
+          .middle {
+            width: 60%;
+            padding-left: 10px;
+          }
+          .right {
+            width: 25%;
+            text-align: center;
+          }
+        }
+      }
+    }
+    .d3{
+      display: flex;
+      justify-content: right;
+    }
+    .dialog-footer{
+      margin-top: 15px;
+    }
+    .rightNum {
+      margin-top: 5px;
+      width: 50%;
+      height: 55px;
+      box-sizing: border-box;
+      border: 1px solid #bbbbbb;
+      line-height: 55px; 
+      margin-right: 20px;
+      > .left {
+        width: 140px;
+        background: #0bab0c;
+        font-size: 14px;
+        color: #fff;
+        text-align: center;
+      }
+      > .middle {
+        > div {
+          margin-right: 5px;
+        }
+        .left-text {
+          margin-left: 10px;
+        }
+        .middle {
+          margin-right: 20px;
+        }
+      }
+      .right {
+        margin-left: 20px;
+      }
+      // background: black;
+    }
+  }
+  </style>
+  
\ No newline at end of file