EvenManage/src/components/pages/race/addRace/raceDetail.vue

<template>
  <!-- 项目基础信息 -->
  <div class="pb_content">
    <div class="race_content_body">
      <div class="raceBox">
        <div class="stepBg">
          <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav" @click="jump('first')">
              <div>案例活动信息</div>
              <div>说明</div>
            </div>
          </div>
          <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav" @click="jump('second')">
              <div>封面</div>
              <div>说明</div>
            </div>
          </div>
          <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav" @click="jump('third')">
              <div>成员信息</div>
              <div>协同人员</div>
            </div>
          </div>
          <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav" @click="jump('fouth')">
              <div>项目说明</div>
              <div>项目简介</div>
            </div>
          </div>
          <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav" @click="jump('fouth')">
              <div>文件上传</div>
              <div>项目资料</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="whiteBg">
            <div class="right_title" id="first">项目基本信息</div>
            <div class="basic_box">
              <div class="big_box">
                <div class="left_first">
                  <div>
                    <div>
                      <div class="bInfo_title" style="margin-bottom: 15px">
                        案例名称
                      </div>
                      <div style="display: flex; margin-right: 20px">
                        <img
                          src="../../../../assets/icon/projectName.png"
                          alt
                          style="margin-right: 8px"
                        />
                        <input
                          type="text"
                          placeholder="请输入项目名称"
                          class="binfo_input"
                          v-model="raceDetail.title"
                          @input="updateTitle"
                        />
                      </div>
                    </div>
                    <div class="both">
                      <div class="choose">
                        <div
                          class="all_choose"
                          v-for="(item, index) in CourseType[0]"
                          :key="index"
                        >
                          <span>{{ item.name }}</span>
                          <el-checkbox-group
                            v-model="raceDetail.type"
                            @change="updateTitle"
                          >
                            <el-checkbox
                              v-for="item1 in CourseTypeJson[item.id]"
                              :key="item1.id"
                              :label="item1.id"
                              >{{ item1.name }}</el-checkbox
                            >
                          </el-checkbox-group>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="whiteBg" style="border-radius: 0">
            <div class="right_first">
              <div class="right_title" id="second">案例封面设置</div>
              <div class="fmBox">
                <div>
                  <div class="bInfo_title" style="margin-top: 0 !important">
                    案例封面
                  </div>
                  <div class="picBox">
                    <div>
                      <div
                        class="uploadFm"
                        v-if="raceDetail.cover.length === 0"
                        @click="choosePicVisible = true"
                      >
                        <!-- @click="addImg($event)" -->
                        <img
                          src="../../../../assets/icon/addPoster.png"
                          alt=""
                        />
                        <!-- <input
                          type="file"
                          accept="image/*"
                          style="display: none"
                          @change="beforeUpload1"
                        /> -->
                      </div>
                      <el-upload
                        :class="{ disUoloadSty: noneBtnImg }"
                        class="upCss"
                        action="#"
                        list-type="picture"
                        v-loading="uploadLoading1"
                        :http-request="beforeUpload1"
                        ref="upload1"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handle_remove1"
                        :show-file-list="true"
                        :file-list="raceDetail.cover"
                        accept="image/*"
                        :limit="1"
                        :on-exceed="onExceed"
                        v-else
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="whiteBg" style="border-radius: 0">
            <div class="right_first">
              <div class="right_title" id="third">作者</div>
              <div
                class="addPeople"
                @click="dialogVisibleMember = true"
                v-if="raceDetail.tableData.length < 6"
              >
                添加作者
              </div>
              <div class="raTable">
                <el-table
                  class="tableColor"
                  ref="table"
                  :data="raceDetail.tableData"
                  :height="tableHeight"
                  :fit="true"
                  style="width: 100%"
                  :header-cell-style="{
                    background: '#f1f1f1',
                    fontSize: '17px',
                  }"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column label="姓名" min-width="20" align="center">
                    <template slot-scope="scope">
                      <div class="userImg">
                        <div class="tx">
                          <img :src="tx" alt />
                        </div>
                        <div
                          style="
                            width: 50px;
                            text-align: left;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          "
                        >
                          {{ scope.row.sn }}
                        </div>
                        <div v-if="scope.$index == 0" class="lxr">联系人</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="学科" min-width="15" align="center">
                    <template slot-scope="scope">
                      <div>{{ scope.row.su ? scope.row.su : "" }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="学校" min-width="15" align="center">
                    <template slot-scope="scope">
                      <div>{{ scope.row.sc ? scope.row.sc : "" }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="邮箱" min-width="15" align="center">
                    <template slot-scope="scope">
                      <div>{{ scope.row.em ? scope.row.em : "" }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="电话" min-width="15" align="center">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.ph ? scope.row.ph : "" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="20">
                    <template slot-scope="scope">
                      <div class="pb_buttonBox">
                        <!-- <el-button
                          size="mini"
                          type="primary"
                          style="cursor: pointer"
                          @click="updateStudent(scope.row, scope.$index)"
                          >修改</el-button
                        > -->
                        <div
                          class="delete"
                          style="margin-left: 0"
                          @click="updateStudent(scope.row, scope.$index)"
                        >
                          <img src="../../../../assets/autorUp.png" alt />
                        </div>
                        <div
                          class="delete"
                          @click="deleteStudent(scope.$index)"
                        >
                          <img src="../../../../assets/remove.png" alt />
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div
                style="
                  color: #cd0808;
                  width: 97%;
                  margin: 10px auto;
                  font-size: 14px;
                "
              >
                *作者不超过6人；默认第一位为主要负责人，联系电话必填，其余人员可以选填
              </div>
            </div>
          </div>
          <div class="whiteBg" style="border-radius: 0">
            <div class="right_first">
              <div class="right_title" id="fouth">项目简介</div>
              <div class="secondTop">
                <textarea
                  rows="8"
                  class="binfo_input tAreaCss"
                  cols
                  v-model="raceDetail.courseText"
                  @input="updateTitle"
                  maxlength="200"
                  placeholder="200字以内，介绍项目背景，描述生活中的现象，引出要解决的核心问题，概述解决问题的思路及预期成果等。"
                  style="font-size: 14px"
                ></textarea>
              </div>
            </div>
          </div>
          <div class="whiteBg" style="border-radius: 0">
            <div class="right_first">
              <div class="right_title" id="fouth">文件上传</div>
              <div class="secondTop">
                <div>
                  <div class="basic_box1" style="width: 100%">
                    <div>
                      <div
                        class="add_chapters_box"
                        v-if="raceDetail.data && raceDetail.data.length == 0"
                      ></div>
                      <div
                        v-else
                        class="add_chapters_box"
                        style="display: flex; flex-direction: column"
                      >
                        <div
                          class="chapter_upload"
                          v-for="(item, index) in raceDetail.data"
                          :key="item.id"
                        >
                          <div class="chapter_upload_t"></div>
                          <div class="chapter_upload_o">
                            <div class="chapter_upload_l">
                              <div
                                v-if="item.type == 2"
                                class="chapter_upload_l_i1"
                              ></div>
                              <div
                                v-if="item.type == 1 || item.type == 3"
                                class="chapter_upload_l_i5"
                              ></div>
                            </div>
                            <div class="chapter_upload_ic">
                              <div class="chapter_upload_ic_l"></div>
                              <div
                                class="chapter_upload_ic_r"
                                @click.stop="
                                  deleteChapterData($event, index, 0)
                                "
                              >
                                <div></div>
                              </div>
                            </div>
                            <div class="chapter_upload_n">
                              <input
                                class="first"
                                v-if="item.type == 1 || item.type == 3"
                                :placeholder="item.name"
                              />
                              <input
                                class="first"
                                v-if="item.type == 2"
                                :placeholder="item.name"
                              />
                              <div class="chapter_upload_ud">
                                <div class="chapter_upload_up"></div>
                                <div class="chapter_upload_down"></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="add_info_box">
                      <div class="upTips">
                        <button
                          class="info_btn"
                          @click="addImg($event)"
                          style="min-width: 108px"
                        >
                          上传附件
                          <input
                            type="file"
                            accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document,video/mp4, video/quicktime, video/x-msvideo,image/*"
                            style="display: none"
                            @change="beforeUpload($event, null, 0)"
                          />
                        </button>
                        <div>
                          此处需要提交《项目式学习方案设计》、《项目式学习活动案例》，上传大小限制为10M，Excel、Word、PPT上传大小限制为5M。
                        </div>
                      </div>
                    </div>
                    <div v-if="raceDetail.data.proVisible" class="mask">
                      <div class="progressBox">
                        <div class="lbox">
                          <img
                            src="../../../../assets/loading.gif"
                          />上传中，请稍后
                        </div>
                        <el-progress
                          :text-inside="true"
                          :stroke-width="20"
                          :percentage="
                            raceDetail.data.progress
                              ? raceDetail.data.progress
                              : 0
                          "
                          style="width: 80%"
                        ></el-progress>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="buttonCss">
          <div class="info_btn noBg">预览</div>
          <div class="info_btn noBg">保存</div>
          <div class="info_btn" style="margin-right: 25px">下一步</div>
        </div> -->
      </div>
    </div>
    <el-dialog
      :title="isAddOrUp == true ? '修改项目成员' : '添加项目成员'"
      :visible.sync="dialogVisibleMember"
      :append-to-body="true"
      width="700px"
      height="80%"
      :before-close="handleClose"
      class="add_student"
    >
      <el-form>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入姓名"
              clearable
              v-model="sName"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item label="学科" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入学科"
              clearable
              v-model="sSubject"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item label="学校" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入学校"
              clearable
              v-model="sSchool"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入邮箱"
              clearable
              v-model="sEmail"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入电话"
              clearable
              v-model="sPhone"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMember = false">取 消</el-button>
        <el-button type="primary" @click="isAddPPTeacher">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="上传图片"
      :visible.sync="choosePicVisible"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="fileCss" style="padding-top: 20px">
          <div>
            <button class="info_btn" @click="addImg($event)">
              选择本地文件
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="beforeUpload1"
              />
            </button>
          </div>
          <div>
            <el-button
              @click="getAllBanner"
              v-if="isSysPic == false && raceDetail.cover.length == 0"
              >选择系统文件</el-button
            >
            <div
              class="isSysPic"
              v-if="isSysPic == true && raceDetail.cover.length > 0"
            >
              <img :src="raceDetail.cover[0].url" alt="" />
              <div class="deletePic" @click="deleteSysPic">
                <img src="../../../../assets/icon/delete.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="fileCss">
          <div>选择本地文件</div>
          <div>选择系统文件</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="choosePicVisible = false">取 消</el-button>
        <el-button type="primary" @click="choosePicVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="选择系统文件"
      :visible.sync="sysPicVisible"
      :append-to-body="true"
      width="700px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="cru_selectBox" style="margin: 0">
        <div
          @click="getChoosePic(1)"
          class="cru_select"
          :class="chooseType == 1 ? 'cru_selected' : ''"
        >
          绘画
        </div>
        <div
          @click="getChoosePic(2)"
          class="cru_select"
          :class="chooseType == 2 ? 'cru_selected' : ''"
        >
          科技
        </div>
        <div
          @click="getChoosePic(3)"
          class="cru_select"
          :class="chooseType == 3 ? 'cru_selected' : ''"
        >
          人文
        </div>
        <div
          @click="getChoosePic(4)"
          class="cru_select"
          :class="chooseType == 4 ? 'cru_selected' : ''"
        >
          艺术
        </div>
      </div>
      <div class="sysPicBox">
        <div v-for="(sys, sysIndex) in sysPic" :key="sysIndex" class="sysPic">
          <img :src="sys.poster" alt="" @click="chooseSysPic(sys.poster)" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sysPicVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["raceInfo"],
  data() {
    return {
      tableHeight: "500px",
      formLabelWidth: "100px",
      chooseType: 1,
      CourseType: [],
      CourseTypeJson: [],
      noneBtnImg: false,
      uploadLoading1: false,
      dialogVisibleMember: false,
      isAddOrUp: false,
      choosePicVisible: false,
      sysPicVisible: false,
      isSysPic: false,
      sysPic: [],
      upIndex: -1,
      sName: "",
      sSubject: "",
      sSchool: "",
      sEmail: "",
      sPhone: "",
      raceDetail: {
        title: "",
        type: [],
        cover: [],
        tableData: [],
        courseText: "",
        data: [],
      },
      tx: require("../../../../assets/avatar.png"),
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
    });
  },
  beforeRouteLeave(to, from, next) {
    window.onresize = null;
    next();
  },
  watch: {
    raceInfo: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.getValue();
      },
    },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // if ((rowIndex + 1) % 2 === 0) {
      //   return "even_row";
      // } else {
      //   return "";
      // }
      if (rowIndex === 0) {
        return "tr-blue";
      } else {
        return "";
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },
    onExceed() {
      this.$message.error("项目封面仅支持上传一张，请删除后再进行上传");
    },
    handleClose(done) {
      done();
    },
    jump(t) {
      var a = document.getElementById(t);
      var b = document.getElementsByClassName("right")[0];
      b.scrollTop = a.offsetTop;
    },
    handle_remove1(file, fileList, type) {
      var _tmp = this.raceDetail.cover;
      for (var i = 0, len = _tmp.length; i < len; i++) {
        if (_tmp[i].uid == file.uid) {
          _tmp.splice(i, 1);
          break;
        }
        this.raceDetail.cover = _tmp;
      }
      this.noneBtnImg = _tmp.length >= 1;
      this.isSysPic = false;
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    imgChange1(file, fileList, type, itemTaskIndex) {
      if (type == 1) {
        var _tmp = this.raceDetail.cover;
      }
      this.noneBtnImg = _tmp.length >= 1;
    },
    imgChange(file, fileList, type, jT) {
      var _tmp = this.raceDetail.data;
      this.noneBtnImg = _tmp.length >= 1;
    },
    deleteChapterData(e, i, t) {
      e.stopPropagation();
      this.raceDetail.data.splice(i, 1);
    },
    chooseSysPic(p) {
      this.raceDetail.cover.push({
        name: "系统图片.png",
        url: p,
      });
      this.imgChange1(null, null, 1, null);
      this.isSysPic = true;
      this.sysPicVisible = false;
    },
    deleteSysPic() {
      this.raceDetail.cover = [];
      this.isSysPic = false;
    },
    getChoosePic(t) {
      this.chooseType = t;
      this.getAllBanner();
    },
    beforeUpload1(event, type) {
      const loading = this.openLoading();
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function (err, data) {
            loading.close();
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              _this.raceDetail.cover.push({
                name: file.name,
                url: data.Location,
              });
              _this.imgChange1(null, null, 1, null);
              _this.choosePicVisible = false;
              console.log(data.Location);
            }
          });
      }
    },
    beforeUpload(event, type, jsonType) {
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域
      var type1 = type;
      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;
      var b = [
        "DOC",
        "DOCX",
        "DOCM",
        "DOTM",
        "DOTX",
        "PPTX",
        "PPSX",
        "PPT",
        "PPS",
        "PPTM",
        "POTM",
        "PPAM",
        "POTX",
        "PPSM",
      ];
      var c = ["PDF", "DOT", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
      var d = [
        "BMP",
        "PJP",
        "APNG",
        "PNG",
        "JPG",
        "GIF",
        "SVG",
        "JPEG",
        "JPG",
        "ICO",
        "PGPEG",
        "AVIF",
      ];
      if (
        b.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        if (file.size / 1024 / 1024 > 10) {
          this.$message.error("上传文件大于10M，请重新选择文件！");
          return;
        }
      } else if (
        c.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        if (file.size / 1024 / 1024 > 5) {
          this.$message.error("添加的上传文件大于5M，请重新选择文件！");
          return;
        }
      }

      if (
        c.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        type1 = 1;
      } else if (
        d.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        type1 = 3;
      } else {
        type1 = 2;
      }
      _this.raceDetail.data.progress = 0;
      _this.raceDetail.data.proVisible = true;
      _this.$forceUpdate();
      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            _this.raceDetail.data.progress = parseInt(
              (evt.loaded * 80) / evt.total
            );
          })
          .send(function (err, data) {
            // loading.close();
            _this.raceDetail.data.progress = 100;
            setTimeout(() => {
              _this.raceDetail.data.proVisible = false;
              _this.$forceUpdate();
            }, 1000);
            if (err) {
              _this.$message.error("上传失败");
            } else {
              _this.raceDetail.data.push({
                name: file.name,
                url: data.Location,
                type: type1,
              });
              _this.imgChange(null, null, type1, jsonType);
              console.log(data.Location);
            }
          });
      }
    },
    updateTitle() {
      this.$emit("updateTitle", this.raceDetail);
    },
    isAddPPTeacher() {
      if (this.raceDetail.tableData.length == 0) {
        if (this.sName === "") {
          this.$message.error("姓名不能为空");
          return;
        } else if (this.sSubject === "") {
          this.$message.error("学科不能为空");
          return;
        } else if (this.sSchool === "") {
          this.$message.error("学校不能为空");
          return;
        } else if (this.sPhone == "") {
          this.$message.error("手机号不能为空");
          return;
        } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.sPhone)) {
          this.$message.error("手机号格式不正确");
          return;
        } else if (this.sEmail == "") {
          this.$message.error("邮箱不能为空");
          return;
        } else if (this.sEmail != "") {
          if (
            !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
              this.sEmail
            )
          ) {
            this.$message.error("邮箱格式不正确");
            return;
          }
        }
      } else if (this.raceDetail.tableData.length > 0) {
        if (this.upIndex == 0) {
          if (this.sName === "") {
            this.$message.error("姓名不能为空");
            return;
          } else if (this.sSubject === "") {
            this.$message.error("学科不能为空");
            return;
          } else if (this.sSchool === "") {
            this.$message.error("学校不能为空");
            return;
          } else if (this.sPhone == "") {
            this.$message.error("手机号不能为空");
            return;
          } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.sPhone)) {
            this.$message.error("手机号格式不正确");
            return;
          } else if (this.sEmail == "") {
            this.$message.error("邮箱不能为空");
            return;
          } else if (this.sEmail != "") {
            if (
              !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
                this.sEmail
              )
            ) {
              this.$message.error("邮箱格式不正确");
              return;
            }
          }
        } else {
          if (this.sName === "") {
            this.$message.error("姓名不能为空");
            return;
          } else if (this.sPhone != "") {
            if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.sPhone)) {
              this.$message.error("手机号格式不正确");
              return;
            }
          } else if (this.sEmail != "") {
            if (
              !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
                this.sEmail
              )
            ) {
              this.$message.error("邮箱格式不正确");
              return;
            }
          }
        }
      }
      if (this.isAddOrUp == true) {
        this.raceDetail.tableData[this.upIndex].sn = this.sName;
        this.raceDetail.tableData[this.upIndex].su = this.sSubject;
        this.raceDetail.tableData[this.upIndex].sc = this.sSchool;
        this.raceDetail.tableData[this.upIndex].em = this.sEmail;
        this.raceDetail.tableData[this.upIndex].ph = this.sPhone;
      } else {
        this.raceDetail.tableData.push({
          sn: this.sName,
          su: this.sSubject,
          sc: this.sSchool,
          em: this.sEmail,
          ph: this.sPhone,
        });
      }
      this.sName = "";
      this.sSubject = "";
      this.sSchool = "";
      this.sEmail = "";
      this.sPhone = "";
      this.isAddOrUp = false;
      this.upIndex = -1;
      this.dialogVisibleMember = false;
      this.$emit("updateTitle", this.raceDetail);
    },
    updateStudent(r, i) {
      this.sName = r.sn;
      this.sSubject = r.su;
      this.sSchool = r.sc;
      this.sEmail = r.em;
      this.sPhone = r.ph;
      this.isAddOrUp = true;
      this.upIndex = i;
      this.dialogVisibleMember = true;
    },
    deleteStudent(i) {
      this.$confirm("确定删除此作者吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.raceDetail.tableData.splice(i, 1);
          this.$emit("updateTitle", this.raceDetail);
        })
        .catch(() => {});
    },
    selectType() {
      this.ajax
        .get(this.$store.state.api + "selectMatType")
        .then((res) => {
          this.CourseType = res.data;
          for (var i = 0; i < res.data[0].length; i++) {
            if (!this.cid) {
              this.raceDetail.type[res.data[0][i].id] = "";
            }
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
              }
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getAllBanner() {
      this.sysPicVisible = true;
      let params = {
        t: this.chooseType,
      };
      this.ajax
        .get(this.$store.state.api + "selectAllBanner", params)
        .then((res) => {
          this.sysPic = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getValue() {
      this.raceDetail.title = this.raceInfo.title;
      this.raceDetail.type = this.raceInfo.type;
      this.raceDetail.cover = this.raceInfo.cover;
      this.raceDetail.tableData = this.raceInfo.tableData;
      this.raceDetail.courseText = this.raceInfo.courseText;
      this.raceDetail.data = this.raceInfo.data;
      this.imgChange1(null, null, 1, null);
      this.$forceUpdate();
    },
  },
  created() {
    this.getValue();
    this.selectType();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .upTips {
    align-items: flex-start !important;
  }
}
.dialog_diy >>> .el-dialog__header {
  background: #3c3c3c !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}
.pb_content {
  width: 100%;
  height: 100%;
}
.race_content_body {
  width: 100%;
  position: relative;
  margin: 0;
  height: 100%;
}

.raceBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.stepBg {
  padding: 80px 0 0 0;
  margin: 0 25px 0 0;
  width: 20%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  background: #fff;
  /* min-height: 800px; */
  height: calc(100% - 80px);
  border-radius: 15px;
  overflow: auto;
  min-width: 260px;
  flex-direction: column;
  font-size: 14px;
}
.steps {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  width: 145px;
  height: 130px;
}
.steps > div:nth-child(1) > img {
  z-index: 9;
  position: relative;
}
.stepLeft,
.isSteps {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  border: 2px solid #eee;
  color: #c0c0c0;
}
.isSteps {
  background: #1990ff;
  color: #fff;
  border: none;
}
.stepRightNav {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 10px;
  height: 40px;
  cursor: pointer;
}
.stepRightNav:hover {
  color: #999;
}
.line,
.isLine {
  position: absolute;
  width: 5px;
  height: 50px;
  border-left: 1px solid #dadada;
  top: 38px;
  left: 15px;
}
.isLine {
  border-left: 1px solid #1d92ff !important;
}
.right {
  width: calc(100% - 20%);
  background: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: auto;
  height: 100%;
  border-radius: 15px;
  /* max-height: 800px; */
}
.allBox {
  padding: 25px;
}
.allBox > div:nth-child(1) {
  color: #0f40f5;
  font-size: 18px;
  font-weight: bold;
}
.raceTop > div:nth-child(2) {
  width: 80%;
  margin-top: 10px;
}
.choose {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-evenly;
  align-items: flex-start;
}

.both {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  margin: 30px 0;
}
.all_choose {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
}
.choose > .all_choose:nth-child(2) > span,
.choose > .all_choose:nth-child(3) > span {
  letter-spacing: 31px;
}
.all_choose > span {
  width: 120px;
  /* display: block;
  letter-spacing: 33px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

.all_choose >>> .el-checkbox-group {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  margin-top: 3px;
}

.all_choose > .el-checkbox-group >>> .el-checkbox {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label {
  width: 85px;
  min-width: 85px;
  /* min-width: 80px;
  overflow: hidden; */
  /* width: 80px; */
  /* text-overflow: ellipsis;
  white-space: nowrap; */
}

.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label:hover {
  width: auto;
}
.disUoloadSty >>> .el-icon-plus {
  display: none !important;
  /* 上传按钮隐藏 */
}
.upCss {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.upCss >>> .el-icon-plus {
  position: none !important;
  width: 200px;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  min-width: 78px;
  min-height: 100px;
  z-index: 999;
}

.upCss >>> .el-upload-list__item-name {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploadFm {
  border: 1px dashed #ccc;
  width: 202px;
  height: 102px;
  position: relative;
  cursor: pointer;
}

.uploadFm > img {
  position: absolute;
  top: 25px;
  left: 35%;
  width: 50px;
}
.picBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-top: 10px;
}
.picNav {
  margin-left: 10px;
  color: #aaabaa;
}
.addPeople {
  color: #75a1f4;
  padding: 10px 20px 10px 0;
  float: right;
  cursor: pointer;
}
.binfo_input {
  font: inherit;
  color: currentColor;
  width: 100%;
  margin: 0;
  /* padding: 15px 14px; */
  padding: 8px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: content-box;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
  font-size: 18px;
}

.binfo_input:focus-visible {
  border: 1px solid rgba(61, 103, 188);
}
.secondTop {
  width: 97%;
  margin: 10px auto;
}

.tAreaCss {
  resize: none;
  font-size: 14px;
}
.addNewPP >>> .el-dialog__body {
  padding: 5px 20px;
}
.customWidth >>> .el-dialog {
  min-width: 500px !important;
}

.whiteBg {
  background: #fff;
  border-radius: 10px;
}
.right_title {
  height: 30px;
  padding: 15px 0 15px 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 1.5em;
  font-weight: bold;
  color: #0f7eff;
  margin: 0 auto;
}
.basic_box {
  margin: 0 auto;
  position: relative;
  padding: 0 20px 0 20px;
}
.basic_box1 {
  position: relative;
  margin: 0;
  min-height: 0;
  width: 90%;
}
.left_first {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.bInfo_title {
  text-align: left;
  margin: 10px 0;
}
.fmBox {
  padding: 10px 0 0 20px;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  margin: 0 auto;
}
.logoImg {
  width: 30px;
}
.logoImg > img {
  width: 100%;
  height: 100%;
}
.title_add_student {
  margin: 0 auto;
  color: #fff;
}
.add_input {
  width: 365px;
}
.userImg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.tx {
  width: 40px;
  margin-right: 10px;
}
.pb_buttonBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.delete {
  width: 25px;
  cursor: pointer;
  margin-left: 10px;
}

.tx > img,
.delete > img {
  width: 100%;
  height: 100%;
}
.add_student >>> .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
  background: #32455b;
}
.add_student >>> .el-dialog__title {
  font-size: 14px !important;
  color: #fff !important;
}
.add_student >>> .el-dialog__headerbtn {
  font-size: 20px !important;
}
.add_student >>> .el-form-item__label {
  margin-left: 65px;
}
.add_student >>> .el-form-item {
  display: flex;
}
.add_student >>> .el-form-item__content {
  margin: 0 !important;
}
.add_student >>> .el-dialog__footer {
  text-align: center !important;
}
.header-title {
  display: flex;
}
.stepBg .steps:nth-child(1) ::after,
.stepBg .steps:nth-child(2) ::after,
.stepBg .steps:nth-child(3) ::after,
.stepBg .steps:nth-child(4) ::after {
  content: "";
  height: 100%;
  background: #eee;
  width: 4px;
  position: absolute;
  left: 15px;
  top: calc(50% + (35px / 2));
  transform: translateY(-50%);
  z-index: 1;
}
.fileCss {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  padding-top: 15px;
}

.sysPicBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 435px;
  overflow: auto;
}

.sysPic {
  width: 200px;
  height: 115px;
  margin: 0 10px 20px 0;
  cursor: pointer;
}

.sysPic > img,
.isSysPic > img,
.deletePic > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.isSysPic {
  width: 200px;
  height: 115px;
  position: relative;
}

.deletePic {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.cru_selectBox {
  display: flex;
  margin: 24px 0 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: auto;
  position: relative;
  height: 47px;
}

.cru_selectBox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.cru_selectBox::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #eee;
}

/*定义滑块 内阴影+圆角*/
.cru_selectBox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}
.cru_select {
  font-size: 21px;
  margin-right: 37px;
  margin-left: 5px;
  cursor: pointer;
  color: #a6a6a6;
}

.cru_selected {
  color: #0b7fc2 !important;
}
.info_btn {
  color: #fff;
  background-color: #0f7eff;
  padding: 8px 24px;
  font-size: 0.9375rem;
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
    0px 3px 1px -2px rgb(0 0 0 / 12%);
  min-width: 64px;
  font-weight: 500;
  border-radius: 4px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
}
.raTable {
  width: 97%;
  margin: 0 auto;
  height: auto;
}
.raTable >>> .el-table,
.raTable >>> .el-table__body-wrapper {
  height: auto !important;
  font-size: 16px !important;
}
.add_chapters_box {
  text-align: left;
  background-color: rgb(232 234 237);
  width: 100%;
  padding: 0px 15px;
  border-radius: 15px;
  font-size: 16px;
  box-sizing: border-box;
  position: relative;
  padding: 0 10px 5px 10px;
  height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
}

.chapter_upload {
  height: 50px;
  margin-top: 12px;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
}

.chapter_upload_t {
  background-color: #fff;
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  border-radius: 40px;
  box-sizing: border-box;
  box-shadow: 0 0 3px 3px #dfdfdf;
  width: 100%;
}

.chapter_upload_o {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.chapter_upload_ic {
  height: 30px;
  float: right;
  cursor: pointer;
  position: absolute;
  width: 45px;
  right: 0;
  top: 0;
}

.chapter_upload_ic_l {
  width: 50px;
  height: 50px;
  float: left;
}

.chapter_upload_ic_l div {
  width: 30px;
  height: 35px;
  background: url("../../../../assets/icon/icon.png");
}

.chapter_upload_ic_r {
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 0px;
  display: flex;
  align-items: center;
  position: absolute;
}

.chapter_upload_ic_r div {
  width: 25px;
  height: 25px;
  background-image: url("../../../../assets/delete.png");
  background-size: 100% 100%;
}

.chapter_upload_n {
  display: flex;
  text-indent: 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 55%;
  margin-left: 10px;
  cursor: pointer;
  margin-top: 2px;
}

.chapter_upload_l_i1 {
  background-image: url("../../../../assets/icon/video.png");
  width: 28px;
  height: 28px;
  background-size: 100% 100%;
}

.chapter_upload_l_i5 {
  background-image: url("../../../../assets/icon/word.png");
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
  margin-left: 1px;
}

.chapter_upload_l_i8 {
  background-image: url("../../../../assets/icon/line.png");
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
  margin-left: 1px;
}

.chapter_upload_ud {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  justify-content: center;
  z-index: 99;
}

.chapter_upload_up {
  background-image: url("../../../../assets/icon/up.png");
  width: 17px;
  height: 15px;
  background-size: 100% 100%;
  cursor: pointer;
}

.chapter_upload_down {
  background-image: url("../../../../assets/icon/down.png");
  width: 17px;
  height: 15px;
  margin: 2px auto 0 auto;
  background-size: 100% 100%;
  cursor: pointer;
}

.chapter_upload_l {
  padding: 1px 0 0 10px;
}

.first {
  border: none;
  outline: none;
  width: 80%;
  min-width: 215px;
  z-index: 99;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add_info_box {
  margin: 20px 0;
}

.add_info_box button {
  margin: 0 10px 10px 0;
}
.mask {
  background-color: rgb(0 0 0 / 30%);
  /* position: fixed; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progressBox {
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.progressBox .lbox {
  height: 100px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}

.progressBox >>> .el-progress-bar__outer {
  background-color: #d1dfff !important;
}

.progressBox .lbox {
  height: 100px;
  font-size: 19px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}
.upTips {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}
.upTips > div {
  margin-left: 10px;
  color: #999;
  font-size: 14px;
}
.tableColor >>> .tr-blue {
  color: #628ff3 !important;
}
.lxr {
  color: #fff;
  background: center center #4a54ff;
  background-image: linear-gradient(315deg, #6772ff 0, #00f9e5 100%);
  background-size: 104% 104%;
  min-width: 50px;
  margin-left: 3px;
  border-radius: 3px;
}
</style>