ssti-CollegeManage/src/views/projectApply/MakerSpaceApply.vue

<template>
  <!-- 项目立项申请 -->
  <div id="MakerSpaceApply" v-loading="loading">
    <div class="pAHeader">
      <div class="pAHeader1">创客空间申请</div>
    </div>
    <hr />
    <MakerSpaceWord :wordData="wordData" :reversedMessage="reversedMessage" />

    <div style="position: fixed; bottom: 5%; right: 2%">
			<el-button @click="saveDraft" type="primary">保存草稿</el-button>
      <el-button @click="test" type="primary">提交项目</el-button>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="submitHint"
      width="600px"
      class="pageSubmitData"
    >
      <div class="deleteContent">
        确定提交“{{ wordData["projectName"] }}”项目吗？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="applyProject" class="AllDialogBtn"
          >确认提交</el-button
        >
        <el-button @click="submitHint = false" class="AllDialogBtn"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getNowDate } from "@/components/tool/Date.js";
import getProjectNo from "@/components/tool/getProjectNo";
import MakerSpaceWord from "./components/MakerSpaceWord.vue";
export default {
  components: { MakerSpaceWord },
  data() {
    return {
      wordData: {
        applicationDate: getNowDate(1), //申请日期
        projectName: "", //项目名称
        college: "", //所在学院
        begin_at: "", //项目开始时间
        state: "", //项目状态
        plannedEnd_at: "", //计划完成时间
        pro_leader: "", //项目负责人
        lead_leader: "", //学院牵头领导
        teacher: [
          {
            name: "",
            speciality: "",
            title: "",
            education: "",
            section: "",
            work: "",
          },
        ], //教师组//name：姓名  speciality：专业  title：职称 education：学历    section：所在教研室    work：项目组角色分工
        student: [{ name: "", class: "", age: "", work: "" }], //学生组//name：姓名    class：班级 age：年龄   work：项目组任务分工
        brief: "", //项目简介
        Construction: "", //建设内容
        ProjectBasis: "", //立项依据
        development: "", //创客空间物理环境、制度建设及软件设施建设情况
        studio: "", //学生创客工作室建设情况
        studentTeam: "", //学生创客团队（人才）培养预期成果、数量
        studentActivities: "", //学生创客活动组织实施情况
        Transforming: "", //学生创客团队孵化、转化创业项目情况
        condition: "", //立 项基 础及条 件
        total: "",
        fund: {
          device: "",
          Material: "",
          processing: "",
          Collaboration: "",
          APPRAISAL: "",
          entery: "",
          activities: "",
          Transaction: "",
        }, //预算经费
        //total：总经费
        //小型仪器设备费：device        deviceRemarks
        //材料费：Material             MaterialRemarks
        //测试化验加工费：processing    processingRemarks
        //项目协作费：Collaboration     CollaborationRemarks
        //项目成果鉴定费：APPRAISAL     APPRAISALRemarks
        //参展参赛费：entery            enteryRemarks
        //创客交流活动费：activities    activitiesRemarks
        //知识产权事务费：Transaction   TransactionRemarks
      },
      loading: false,
      submitHint: false,
    };
  },
  methods: {
    test() {
      //项目提交
      //检查各个字段
      const cEmpty = /^\s*$/g;
      for (let i in this.wordData) {
        switch (i) {
          case "projectName":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请输入项目名称");
              document
                .querySelector("#one")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "college":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请选择所在学院");
              document
                .querySelector("#one")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "state":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请选择项目状态");
              document
                .querySelector("#two")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "begin_at":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请选择项目开始时间");
              document
                .querySelector("#three")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "plannedEnd_at":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请选择计划完成时间");
              document
                .querySelector("#three")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "pro_leader":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请输入项目负责人");
              document
                .querySelector("#four")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "lead_leader":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请输入学院牵头领导");
              document
                .querySelector("#four")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          // case "teacher":
          // if (this.wordData[i].length < 3) {
          //   this.$message.error("教师团队应3人以上");
          //   document
          //     .querySelector("#five")
          //     .scrollIntoView({ behavior: "smooth" });
          //   return false;
          // } else {
          // let num = 0;
          // this.wordData[i].forEach((item) => {
          //   if (cEmpty.test(item["name"])) num++;
          // });
          // if (num > 0) {
          //   this.$message.error("教师姓名请不要留空");
          //   document
          //     .querySelector("#five")
          //     .scrollIntoView({ behavior: "smooth" });
          //   return false;
          // }
          // // }
          // break;
          // case "student":
          // if (this.wordData[i].length < 5) {
          //   this.$message.error("学生团队应5人以上");
          //   document
          //     .querySelector("#six")
          //     .scrollIntoView({ behavior: "smooth" });
          //   return false;
          // } else {
          // let num1 = 0;
          // this.wordData[i].forEach((item) => {
          //   if (cEmpty.test(item["name"])) num1++;
          // });
          // if (num1 > 0) {
          //   this.$message.error("学生姓名请不要留空");
          //   document
          //     .querySelector("#six")
          //     .scrollIntoView({ behavior: "smooth" });
          //   return false;
          // }
          // // }
          // break;
          case "fund":
            let sum = 0;
            for (let i in this.wordData["fund"]) {
              sum += this.wordData["fund"][i] * 1;
            }
            if (sum <= 0) {
              document
                .querySelector("#fund")
                .scrollIntoView({ behavior: "smooth" });
              return this.$message.error("请输入预算经费");
            }
            break;
          case "brief":
            if (this.wordData[i].length > 300 || this.wordData[i].length == 0) {
              this.$message.error("请填写项目简介，字数在300字以内");
              document
                .querySelector("#brief")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          //#region
          // case "brief":
          //   if(cEmpty.test(this.wordData[i])){
          //     this.$message.error("请填写项目简介");
          //     document.querySelector('#seven').scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }else{
          //     if(this.wordData[i].length<200||this.wordData>300){
          //       this.$message.error("项目简介需要200-300字")
          //       document.querySelector('#seven').scrollIntoView({ behavior: "smooth" });
          //       return false;
          //     }
          //   }
          //   break;
          // case "Construction":
          //   if(cEmpty.test(this.wordData[i])){
          //     this.$message.error("请填写建设内容");
          //     document.querySelector('#eight').scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          // case "ProjectBasis":
          //   if(cEmpty.test(this.wordData[i])){
          //     this.$message.error("请填写立项依据");
          //     document.querySelector('#nine').scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          // case "development":
          //   if(cEmpty.test(this.wordData[i])){
          //     this.$message.error("请填写创客空间物理环境、制度建设及软件设施建设情况");
          //     document.querySelector('#ten').scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          // case "studio":
          //   if(cEmpty.test(this.wordData[i])){
          //     this.$message.error("请填写学生创客工作室建设情况");
          //     document.querySelector('#eleven').scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          // case "studentTeam":
          //   if(cEmpty.test(this.wordData[i])){
          //     this.$message.error("请填写学生创客团队（人才）培养预期成果、数量");
          //     document.querySelector('#twelve').scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          // case "studentActivities":
          //   if(cEmpty.test(this.wordData[i])){
          //     this.$message.error("请填写学生创客活动组织实施情况");
          //     document.querySelector('#thirteen').scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          // case "Transforming":
          //   if(cEmpty.test(this.wordData[i])){
          //     this.$message.error("请填写学生创客团队孵化、转化创业项目情况");
          //     document.querySelector('#fourteen').scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          // case "condition":
          //   if(cEmpty.test(this.wordData[i])){
          //     this.$message.error("请填写基础条件");
          //     document.querySelector('#fifteen').scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break
          //#endregion
        }
      }
      this.wordData["total"] =
        this.wordData.fund.device * 1 +
        this.wordData.fund.Material * 1 +
        this.wordData.fund.processing * 1 +
        this.wordData.fund.Collaboration * 1 +
        this.wordData.fund.APPRAISAL * 1 +
        this.wordData.fund.entery * 1 +
        this.wordData.fund.activities * 1 +
        this.wordData.fund.Transaction * 1;
      console.log(this.wordData["total"]);

      this.submitHint = true;
    },
    applyProject() {
      //先获取编号
      getProjectNo("XM").then((result) => {
        let pram = {
          uid: this.$store.state.userInfo.userid, //用户ID
          pNo: result, //项目编号
          tit: this.wordData["projectName"], //项目名称
          bf: this.wordData["brief"], //项目简介
          pLeader: this.wordData["pro_leader"], //项目负责人
          lLeader: this.wordData["lead_leader"], //学院牵头领导,
          cid: this.wordData["college"], //学院ID,
          ct: JSON.stringify(this.wordData["teacher"]), //教师组,
          cs: JSON.stringify(this.wordData["student"]), //学生组,
          f: this.wordData["total"], //总经费
          chp: JSON.stringify({
            Construction: this.wordData["Construction"], //建设内容
            ProjectBasis: this.wordData["ProjectBasis"], //立项依据
            development: this.wordData["development"], //创客空间物理环境、制度建设及软件设施建设情况
            studio: this.wordData["studio"], //学生创客工作室建设情况
            studentTeam: this.wordData["studentTeam"], //学生创客团队（人才）培养预期成果、数量
            studentActivities: this.wordData["studentActivities"], //学生创客活动组织实施情况
            Transforming: this.wordData["Transforming"], //学生创客团队孵化、转化创业项目情况
            condition: this.wordData["condition"], //立 项基 础及条 件
          }).replaceAll(/%/g, "%25"), //项目详细
          tid: "5f7a66d5-c206-11ed-a4cd-509a4c5b67cf", //特色创客空间建设项目分类ID
          tName: this.wordData["state"], //项目状态
          mon: JSON.stringify(this.wordData["fund"]), //预算经费
          planEnd: this.wordData["plannedEnd_at"], //计划完成时间,
          beh: this.wordData["begin_at"], //项目开始时间,
          apply: this.wordData["applicationDate"], //申请日期
          members:
            this.wordData["student"].length + this.wordData["teacher"].length,
        };
        // return console.log(pram);
        this.ajax
          .post(this.$store.state.api + "/MakerSpaceWordApply", pram)
          .then(async (result) => {
            console.log(result);
            if (result["data"] == 1) {
              this.$message.success("项目提交成功");
              //提交项目成功，查看sessionStore是否有数据，有则删
              if (localStorage.getItem(`MakerSpaceApplyData${this.$store.state.userInfo.userid}`))localStorage.removeItem(`MakerSpaceApplyData${this.$store.state.userInfo.userid}`);
							await this.ajax.post(this.$store.state.api+"/delDraft",{userid:this.$store.state.userInfo.userid,type:1})
              this.$router.push("/projectApplication");
            } else {
              this.$message.error("项目提交失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    saveData() {
      localStorage.setItem(
        `MakerSpaceApplyData${this.$store.state.userInfo.userid}`,
        JSON.stringify(this.wordData)
      );
    },
		// 保存草稿
		saveDraft(){
			if(this.loading)return this.$message.info('请稍等...');
			this.loading = true;
			let params = {
				userid:this.$store.state.userInfo.userid,
				type:1,
				jsonData:encodeURIComponent(JSON.stringify(this.wordData))
			}
			this.ajax.post(this.$store.state.api + "/saveDraft",params).then(res=>{
				if(res.data==1){
					this.$message.success("保存成功")
				}else{
					this.$message.error("保存失败")
				}
				this.loading = false;
			})
		},
		//获取草稿
		getDraft(){
			if(this.loading)return this.$message.info('请稍等...');
			this.loading = true;
			let params = {
				userid:this.$store.state.userInfo.userid,
				type:1,
			}
			this.ajax.get(this.$store.state.api + "/getDraft",params).then(res=>{
				if(res.data[0].length){
					this.wordData = JSON.parse(res.data[0][0].json)
				}else{
					if (localStorage.getItem(`MakerSpaceApplyData${this.$store.state.userInfo.userid}`))
      		this.wordData = JSON.parse(
      		  localStorage.getItem(`MakerSpaceApplyData${this.$store.state.userInfo.userid}`)
      		);
				}
				this.loading = false;
			})
		}
  },
  computed: {
    reversedMessage: function () {
      return (
        this.wordData.fund.device * 1 +
        this.wordData.fund.Material * 1 +
        this.wordData.fund.processing * 1 +
        this.wordData.fund.Collaboration * 1 +
        this.wordData.fund.APPRAISAL * 1 +
        this.wordData.fund.entery * 1 +
        this.wordData.fund.activities * 1 +
        this.wordData.fund.Transaction * 1
      );
    },
  },
  mounted() {
    //跳转到此页面立刻获取数据
    //   this.getData();     //获取表格数据
    // this.applyProject();
    //判断，如果sessionStore里有MakerSpaceApplyData这个字段，则存到this.wordData里
    // if (localStorage.getItem("MakerSpaceApplyData")) {
    //   this.wordData = JSON.parse(localStorage.getItem("MakerSpaceApplyData"));
    // }
		this.getDraft();
    window.addEventListener("beforeunload", () => this.saveData());

  },
 
  beforeRouteLeave(to, from, next) {
    //判断，如果还没提交然后切换页面了，则把数据存到sessionStore里;
    if (!this.submitHint)this.saveData()
    next();
  },
};
</script>

<style lang="less">
#MakerSpaceApply {
  display: flex;
  flex-direction: column;
  // align-items: flex-end;
  // justify-content: flex-end;
  position: relative;
}
</style>