EvenManage-YT/src/components/pages/race/addRace.vue

<template>
  <div style="height: 100%; width: 100%; overflow: hidden">
    <div class="race_nav">
      <div class="first" @click="checkSteps(1)" :class="{ active: steps == 1 }">
        <div class="navImg">
          <img src="../../../assets/icon/anliDetail/first.png" alt="" />
        </div>
        <div>课程基础信息</div>
      </div>
      <div class="first" @click="checkSteps(2)" :class="{ active: steps == 2 }">
        <div class="navImg">
          <img src="../../../assets/icon/anliDetail/second.png" alt="" />
        </div>
        <div>项目概况</div>
      </div>
      <div class="first" @click="checkSteps(3)" :class="{ active: steps == 3 }">
        <div class="navImg">
          <img src="../../../assets/icon/anliDetail/third.png" alt="" />
        </div>
        <div>项目安排</div>
      </div>
      <!-- <div class="first" @click="checkSteps(4)" :class="{ active: steps == 4 }">
        <div class="navImg">
          <img src="../../../assets/icon/anliDetail/fouth.png" alt="" />
        </div>
        <div>项目过程记录</div>
      </div>
      <div class="first" @click="checkSteps(5)" :class="{ active: steps == 5 }">
        <div class="navImg">
          <img src="../../../assets/icon/anliDetail/five.png" alt="" />
        </div>
        <div>项目成效</div>
      </div>
      <div class="first" @click="checkSteps(6)" :class="{ active: steps == 6 }">
        <div class="navImg">
          <img src="../../../assets/icon/anliDetail/six.png" alt="" />
        </div>
        <div>项目反思</div>
      </div> -->
    </div>
    <div class="race_body">
      <RaceDetail
        v-if="steps == 1"
        :raceInfo="raceInfo"
        @updateTitle="updateRaceInfoTitle"
      ></RaceDetail>
      <RaceOverview
        v-if="steps == 2"
        :raceOverView="raceOverView"
        @upRaceOver="updateRaceOver"
      ></RaceOverview>
      <ProjectProcess
        @upRacePro="updateRacePro"
        :raceProcess="raceProcess"
        v-if="steps == 3"
      ></ProjectProcess>
      <ProjectActpro
        @upRaceAct="updateRaceAct"
        :raceProcess="raceProcess"
        v-if="steps == 4"
      ></ProjectActpro>
      <ProjectExceva
        @upExc="updateProExc"
        :raceExceva="raceExceva"
        v-if="steps == 5"
      ></ProjectExceva>
      <ProjectEffect
        @upproEff="updateProEff"
        :raceEffect="raceEffect"
        v-if="steps == 6"
      ></ProjectEffect>
    </div>
    <div class="race_btn">
      <el-button type="primary" @click="isGoto">活动信息</el-button>
      <div
        style="
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
        "
      >
        <el-button type="primary" @click="setTime" v-if="steps == 2"
          >跳过</el-button
        >
        <el-button type="primary" @click="saveRace(1)">保存</el-button>
        <el-button type="primary" @click="lastSteps" v-if="steps != 1"
          >上一步</el-button
        >
        <el-button type="primary" @click="nextSteps" v-if="steps != 6"
          >下一步</el-button
        >
        <el-button type="primary" @click="isAddOrUpRace(0)" v-if="steps == 6"
          >确认上传</el-button
        >
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="650px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="createBox">
        <div class="success">
          <img src="../../../assets/icon/success.png" alt="" />
        </div>
        <div class="cresteMessage">
          案例征集必填内容已完成，请在
          <span>"活动管理 > 我的案例"中查看。</span> 你可以点击
          <span>"平台实施填报入口"</span> ，提交选填内容。<span
            style="color: #9a9a9a"
            >（填报后可以运用平台进行教学，调用平台工具，收集过程性数据并生成数据报告。）</span
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="goTo('/eventCenter?steps=' + '2')">取 消</el-button>
        <el-button type="primary" @click="goTo('/eventCenter?steps=' + '2')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="650px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="createBox">
        <div class="success">
          <img src="../../../assets/icon/success.png" alt="" />
        </div>
        <div class="cresteMessage">
          您确定要跳过网页端填写吗？<span style="color: #ccc"
            >( {{ lastTime + 1 }}秒自动关闭 )</span
          >
          <div style="color: #9a9a9a; line-height: 25px">
            本次案例征集必填内容已提交，为实现更佳的展示效果，建议您根据平台指引完成网页端资料填写。
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAddOrUpRace(1)">跳过并保存</el-button>
        <el-button type="primary" @click="goNow">继续填写</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="650px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="createBox" style="align-items: center">
        <div class="success">
          <img src="../../../assets/icon/success.png" alt="" />
        </div>
        <div class="cresteMessage">
          您当前所编辑的内容尚未保存，确定离开当前页吗？
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >继续填写</el-button
        >
        <el-button @click="isAddOrUpRace(1)">保存并离开</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import RaceDetail from "./addRace/raceDetail.vue";
import RaceOverview from "./addRace/raceOverview.vue";
import ProjectProcess from "./addRace/projectProcess.vue";
import ProjectActpro from "./addRace/projectActpro.vue";
import ProjectExceva from "./addRace/projectExceva.vue";
import ProjectEffect from "./addRace/projectEffect.vue";
export default {
  components: {
    RaceDetail,
    RaceOverview,
    ProjectProcess,
    ProjectActpro,
    ProjectExceva,
    ProjectEffect,
  },
  data() {
    return {
      steps: 1,
      userid: this.$store.state.userInfo.userid,
      oid: this.$store.state.userInfo.oid,
      aid: this.$route.query.aid ? this.$route.query.aid : "",
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      isNoDia: 0,
      isJump: 0,
      raceInfo: {
        title: "",
        type: [],
        typeOtherName: "",
        cover: [],
        autor: [],
        tableData: [],
        courseText: "",
        data: [],
      },
      raceOverView: {
        driQuestion: { brief: "", data: [] },
        tarDesign: { brief: "", data: [] },
        actiDesign: { brief: "", data: [] },
      },
      raceProcess: {
        stageBox: [
          {
            staTitle: "",
            allTime: "",
            brief: "",
            data: [],
            actBox: [
              {
                actName: "",
                actTime: "",
                driQuestion: { brief: "", data: [] },
                tarDesign: { brief: "", data: [] },
                actiDesign: { brief: "", data: [] },
                evaDesign: { brief: "", data: [] },
              },
            ],
          },
        ],
      },
      raceExceva: {
        brief: "",
        data: [],
      },
      raceEffect: {
        brief: "",
        data: [],
      },
      lastTime: 10,
      timer: null,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    goTo(path) {
      this.$router.push(path);
    },
    setTime() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = null;
      this.lastTime = 10;
      this.dialogVisible1 = true;
      this.timeLoading();
      this.timer = setInterval(() => {
        if (this.lastTime == 0) {
          this.dialogVisible1 = false;
          this.timer && this.clearTime();
        } else {
          this.timeLoading();
        }
      }, 1000);
    },
    clearTime() {
      clearInterval(this.timer);
      this.timer = null;
      this.lastTime = 10;
      this.steps++;
    },
    timeLoading() {
      this.lastTime -= 1;
      // this.timeText = this.lastTime + "秒倒计时自动关闭";
    },
    goNow() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = null;
      this.lastTime = 5;
      this.dialogVisible1 = false;
      this.steps++;
    },
    checkSteps(steps) {
      if (steps > 1) {
        if (this.raceInfo.title == "") {
          this.$message.error("标题不能为空");
          return;
        } else if (this.raceInfo.type.length == 0) {
          // this.$message.error("课程分类不能为空");
          this.$message.error("案例组别不能为空");
          return;
        } else if (this.raceInfo.autor.length == 0) {
          this.$message.error("请添加联系人");
          return;
        } else if (this.raceInfo.courseText == "") {
          this.$message.error("请填写项目简介");
          return;
        } else if (this.raceInfo.data.length == 0) {
          this.$message.error("上传文件不能为空");
          return;
        } else if (this.raceInfo.type.length > 0) {
          var t = 1;
          var a = [
            "24d162b0-d030-11ec-8c78-005056b86db5",
            "264bd103-d030-11ec-8c78-005056b86db5",
            "28d2c456-d030-11ec-8c78-005056b86db5",
            "2ad17d24-d030-11ec-8c78-005056b86db5",
          ];
          for (var i = 0; i < this.raceInfo.type.length; i++) {
            if (t == 1) {
              if (this.raceInfo.type[i] != "") {
                if (a.indexOf(this.raceInfo.type[i]) == -1) {
                  console.log(this.raceInfo.type[i]);
                } else {
                  t = 2;
                }
              }
            }
          }
          if (t == 1) {
            this.$message.error("案例组别不能为空");
            return;
          } else if (t == 2) {
            this.steps = steps;
          }
          // this.$message.error("课程分类不能为空");
        }
        //  else {
        //   this.steps = steps;
        // }

        // else if (this.raceInfo.tableData.length == 0) {
        //   this.$message.error("请添加协作者");
        //   return;
        // }
      } else {
        this.steps = steps;
      }
    },
    nextSteps() {
      if (this.steps == 1) {
        if (this.raceInfo.title == "") {
          this.$message.error("标题不能为空");
          return;
        } else if (this.raceInfo.type.length == 0) {
          // this.$message.error("课程分类不能为空");
          this.$message.error("案例组别不能为空");
          return;
        } else if (this.raceInfo.autor.length == 0) {
          this.$message.error("请添加联系人");
          return;
        } else if (this.raceInfo.courseText == "") {
          this.$message.error("请填写项目简介");
          return;
        } else if (this.raceInfo.data.length == 0) {
          this.$message.error("上传文件不能为空");
          return;
        } else if (this.raceInfo.type.length > 0) {
          var t = 1;
          var a = [
            "24d162b0-d030-11ec-8c78-005056b86db5",
            "264bd103-d030-11ec-8c78-005056b86db5",
            "28d2c456-d030-11ec-8c78-005056b86db5",
            "2ad17d24-d030-11ec-8c78-005056b86db5",
          ];
          for (var i = 0; i < this.raceInfo.type.length; i++) {
            if (t == 1) {
              if (this.raceInfo.type[i] != "") {
                if (a.indexOf(this.raceInfo.type[i]) == -1) {
                } else {
                  t = 2;
                }
              }
            }
          }
          if (t == 1) {
            this.$message.error("案例组别不能为空");
            return;
          } else if (t == 2) {
            if (this.timer) {
              clearInterval(this.timer);
            }
            this.timer = null;
            this.lastTime = 5;
            this.dialogVisible1 = true;
            this.setTime();
            // setTimeout(() => {
            //   this.dialogVisible1 = false;
            //   this.steps++;
            // }, 5000);
            // this.steps++;
          }
          // this.$message.error("课程分类不能为空");
        }
      } else {
        this.steps++;
      }
      //  else if(2 <= this.steps < 6) {
      //   this.dialogVisible1 = true;
      //   this.steps++;
      // }
      // this.isAddOrUpRace1(3);
    },
    lastSteps() {
      this.steps--;
    },
    goTo(path) {
      this.$router.push(path);
    },
    updateRaceInfoTitle(raceInfo) {
      this.raceInfo = raceInfo;
    },
    updateRaceOver(raceOver) {
      this.raceOverView = raceOver;
    },
    updateRacePro(racePro) {
      this.raceProcess = racePro;
    },
    updateRaceAct(raceAct) {
      this.raceProcess = raceAct;
    },
    updateProEff(raceEff) {
      this.raceEffect = raceEff;
    },
    updateProExc(raceExc) {
      this.raceExceva = raceExc;
    },
    isAddOrUpRace(q) {
      if (this.raceInfo.title == "") {
        this.$message.error("标题不能为空");
        return;
      } else if (this.raceInfo.type.length == 0) {
        // this.$message.error("课程分类不能为空");
        this.$message.error("案例组别不能为空");
        return;
      } else if (this.raceInfo.autor.length == 0) {
        this.$message.error("请添加联系人");
        return;
      } else if (this.raceInfo.courseText == "") {
        this.$message.error("请填写项目简介");
        return;
      } else if (this.raceInfo.data.length == 0) {
        this.$message.error("上传文件不能为空");
        return;
      } else if (this.raceInfo.type.length > 0) {
        var t = 1;
        var a = [
          "24d162b0-d030-11ec-8c78-005056b86db5",
          "264bd103-d030-11ec-8c78-005056b86db5",
          "28d2c456-d030-11ec-8c78-005056b86db5",
          "2ad17d24-d030-11ec-8c78-005056b86db5",
        ];
        for (var i = 0; i < this.raceInfo.type.length; i++) {
          if (t == 1) {
            if (this.raceInfo.type[i] != "") {
              if (a.indexOf(this.raceInfo.type[i]) == -1) {
              } else {
                t = 2;
              }
            }
          }
        }
        if (t == 1) {
          this.$message.error("案例组别不能为空");
          return;
        } else if (t == 2) {
          this.isJump = q;
          if (this.aid == "" || this.aid == undefined) {
            this.addRace();
          } else {
            this.updateRace();
          }
        }
        // this.$message.error("课程分类不能为空");
      }
    },
    saveRace(noDia) {
      this.isNoDia = noDia;
      if (this.aid == "" || this.aid == undefined) {
        this.isAddOrUpRace(0);
        // this.addRace();
      } else {
        this.updateRace();
      }
    },
    isAddOrUpRace1(t) {
      this.isJump = t;
      if (this.aid == "" || this.aid == undefined) {
        this.addRace();
      } else {
        this.updateRace();
      }
    },
    addRace() {
      let params = [
        {
          uid: this.userid,
          info: JSON.stringify(this.raceInfo).replace(/%/g, "%25"),
          over: JSON.stringify(this.raceOverView).replace(/%/g, "%25"),
          pro: JSON.stringify(this.raceProcess).replace(/%/g, "%25"),
          act: JSON.stringify(this.raceProcess).replace(/%/g, "%25"),
          exc: JSON.stringify(this.raceExceva).replace(/%/g, "%25"),
          courseType: JSON.stringify(this.raceInfo.type).replace(/%/g, "%25"),
          res: JSON.stringify(this.raceEffect).replace(/%/g, "%25"),
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addRace", params)
        .then((res) => {
          this.aid = res.data.courseId;
          if (this.isJump == 0) {
            if (this.isNoDia == 0) {
              this.dialogVisible = true;
              this.$message({
                message: "新增成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.isNoDia = 0;
            }
          } else if (this.isJump == 1) {
            if (this.isNoDia == 0) {
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.goTo("/eventCenter?steps=" + "2");
              this.dialogVisible1 = false;
            } else {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.isNoDia = 0;
            }
          } else {
            console.log("下一步");
          }
        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
        });
    },
    updateRace() {
      let params = [
        {
          id: this.aid,
          info: JSON.stringify(this.raceInfo).replace(/%/g, "%25"),
          over: JSON.stringify(this.raceOverView).replace(/%/g, "%25"),
          pro: JSON.stringify(this.raceProcess).replace(/%/g, "%25"),
          act: JSON.stringify(this.raceProcess).replace(/%/g, "%25"),
          exc: JSON.stringify(this.raceExceva).replace(/%/g, "%25"),
          res: JSON.stringify(this.raceEffect).replace(/%/g, "%25"),
          courseType: JSON.stringify(this.raceInfo.type).replace(/%/g, "%25"),
          uid: this.userid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updateRace", params)
        .then((res) => {
          if (this.isJump == 0) {
            if (this.isNoDia == 0) {
              this.dialogVisible = true;
              this.$message({
                message: "修改成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.isNoDia = 0;
            }
          } else if (this.isJump == 1) {
            if (this.isNoDia == 0) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.goTo("/eventCenter?steps=" + "2");
              this.dialogVisible1 = false;
            } else {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.isNoDia = 0;
            }
          } else {
            console.log("下一步");
          }
        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
        });
    },
    selectAnLi() {
      if (this.aid != "") {
        let params = {
          id: this.aid,
        };
        this.ajax
          .get(this.$store.state.api + "selectRaceDetail", params)
          .then((res) => {
            if (res.data.length > 0) {
              this.raceInfo = JSON.parse(res.data[0][0].info);
              this.raceOverView = JSON.parse(res.data[0][0].overview);
              this.raceProcess = JSON.parse(res.data[0][0].process);
              this.raceExceva = JSON.parse(res.data[0][0].proexc);
              this.raceEffect = JSON.parse(res.data[0][0].results);
            }
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
    isGoto() {
      this.steps = 1;
      if (
        this.raceInfo.title != "" ||
        this.raceInfo.type.length > 0 ||
        this.raceInfo.autor.length > 0 ||
        this.raceInfo.courseText != "" ||
        this.raceInfo.data.length > 0
      ) {
        this.dialogVisible2 = true;
      } else {
        this.goTo("/eventCenter?steps=" + "1");
      }
    },
  },
  created() {
    this.selectAnLi();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .first > div:nth-child(2) {
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.dialog_diy >>> .el-dialog__header {
  background: #3c3c3c !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.race_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin: 10px auto;
  background: #fff;
  border-radius: 10px;
  padding: 10px 0;
}

.race_nav span {
  border: 1px solid #929292;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  color: #4988bf;
}

.race_nav span + span {
  margin-left: 10px;
}

.race_nav .active {
  background: #3d5ea1;
}

.race_body {
  display: flex;
  width: 90%;
  justify-content: center;
  margin: 0 auto;
  height: calc(100% - 145px);
}

.race_btn {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-top: 10px;
}
.race_btn > button {
  z-index: 9;
}
.createSuccessCss {
  position: fixed;
  right: 30%;
  top: 50%;
  width: 717px;
  height: 346px;
  z-index: 999;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  transform: translateY(-50%);
  box-shadow: 0px 0 8px 0px #c5c5c5;
}

.createBox {
  padding: 0 10px 0 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.success {
  width: 68px;
  height: 68px;
}

.success > img {
  width: 100%;
  height: 100%;
}

.cresteMessage {
  width: 500px;
  margin-left: 22px;
  line-height: 50px;
  font-size: 16px;
}

.cresteMessage > span {
  color: #0f40f5;
}

.createButton {
  width: 163px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background: #0f40f5 100%;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  position: absolute;
  right: 74px;
  bottom: 19px;
}
.first {
  background: #6e9cd8;
  width: 200px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: #fff;
  height: 53px;
  justify-content: center;
  border-radius: 10px;
  margin: 0 15px;
  cursor: pointer;
}
.navImg {
  width: 30px;
  height: 30px;
}
.navImg > img {
  width: 100%;
  height: 100%;
}
</style>