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

<template>
  <!-- 测试上传组件 -->
  <div v-loading="loading">
    <div class="pAHeader">
      <div class="pAHeader1">创客项目申请</div>
    </div>
    <hr />

    <!-- 学生项目立项 -->
    <studentProjectWord
      ref="pdf"
      :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="submitWord" class="AllDialogBtn"
          >确认提交</el-button
        >
        <el-button @click="submitHint = false" class="AllDialogBtn"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import MakerSpaceWord from '../components/MakerSpaceWord.vue'
import getProjectNo from "@/components/tool/getProjectNo";
import { getNowDate } from "@/components/tool/Date.js";
import studentProjectWord from "./components/studentProjectWord.vue";
// import markerFundWord from '@/components/markerFundWord.vue';
// import markeractivityWord from '@/components/markeractivityWord.vue';
export default {
  components: {
    studentProjectWord,
    // markerFundWord,
    // markeractivityWord
  },
  data() {
    return {
      accept: "*",
      loading: false,
      submitHint: false,
      wordData: {
        applicationDate: getNowDate(1), //申请日期
        projectName: "",
        radio: "",
        checkList: [],
        schoolRadio: [],
        applyParsonRadio: [],
        applyParsonName: "",
        college: "",
        tel: "",
        beginTime: "",
        endTime: "",
        studentS: [
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" }
				],
        teacherS: [
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" },
					{ name: "", collage: "", work: "" }
				],
        brief: "",
        introduce: {
          back: "",
          innovate: "",
          path: "",
          scene: "",
          worth: "",
          team: "",
          cost: "",
          expectResults: "",
          expectResultsTeacher: "",
          expectConversion: "",
          plan: "",
        },
        total: "",
        fund: {
          device: "",
          Material: "",
          processing: "",
          Collaboration: "",
          APPRAISAL: "",
          entery: "",
          activities: "",
          Transaction: "",
        },
				opinion:[],
      },
    };
  },
  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
      );
    },
  },
  methods: {
    test() {
      //验证
      const cEmpty = /^\s*$/g;
      for (let i in this.wordData) {
        // console.log(this.wordData[i],i);
        switch (i) {
          case "projectName":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请输入项目名称");
              // this.$refs.projectName.style.background='rgb(236, 141, 141)'
              // setTimeout(() => {
              //   this.$refs.projectName.style.background='#ffffff'
              // }, 2000);
              document
                .querySelector("#projectName")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "radio":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请选择项目分组");
              document
                .querySelector("#radio")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          // case "checkList":
          //   if (this.wordData[i].length == 0) {
          //     this.$message.error("优先支持项目");
          //     document
          //       .querySelector("#checkList")
          //       .scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          // case "schoolRadio":
          //   if (this.wordData[i].length == 0) {
          //     this.$message.error("请选择美丽校园改造项目");
          //     document
          //       .querySelector("#schoolRadio")
          //       .scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          // case "applyParsonRadio":
          //   if (this.wordData[i].length == 0) {
          //     this.$message.error("请选择项目申请人");
          //     document
          //       .querySelector("#applyParsonRadio")
          //       .scrollIntoView({ behavior: "smooth" });
          //     return false;
          //   }
          //   break;
          case "applyParsonName":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请填写申请人姓名");
              document
                .querySelector("#applyParsonName")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "college":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请选择所在学院");
              document
                .querySelector("#applyParsonName")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "tel":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请填写联系方式");
              document
                .querySelector("#applyParsonName")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "beginTime":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请选择项目起始时间");
              document
                .querySelector("#beginTime")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          case "endTime":
            if (cEmpty.test(this.wordData[i])) {
              this.$message.error("请选择计划完成时间");
              document
                .querySelector("#beginTime")
                .scrollIntoView({ behavior: "smooth" });
              return false;
            }
            break;
          // case "studentS":
          //   let snum = 0;
          //   this.wordData[i].forEach((item) => {
          //     if (cEmpty.test(item["name"])) snum++;
          // for(let j in item){
          //   if(cEmpty.test(item[j])){
          //     snum++;
          //   }
          // }
          // });
          // if (snum > 0) {
          //   this.$message.error("学生姓名请不要留空");
          //   document
          //     .querySelector("#studentS")
          //     .scrollIntoView({ behavior: "smooth" });
          //   return false;
          // }
          // }
          //   break;
          // case "teacherS":
          //   let num = 0;
          //   this.wordData[i].forEach((item) => {
          //     if (cEmpty.test(item["name"])) num++;
          // for(let j in item){
          //   if(cEmpty.test(item[j])){
          //     num++;
          //   }
          // }
          // });
          // if (num > 0) {
          //   this.$message.error("老师姓名请不要留空");
          //   document
          //     .querySelector("#teacherS")
          //     .scrollIntoView({ behavior: "smooth" });
          //   return false;
          // }
          // 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;
          case "fund":
            // device:"",
            //     Material:"",
            //     processing:"",
            //     Collaboration:"",
            //     APPRAISAL:"",
            //     entery:"",
            //     activities:"",
            //     Transaction:"",
            // let mon=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.match*1+this.wordData.fund.activity*1+this.wordData.fund.affair*1
            let mon = 0;
            for (let k in this.wordData.fund) {
              mon += this.wordData.fund[k] * 1;
            }
            // console.log(mon);
            if (mon == 0) {
              document
                .querySelector("#fund")
                .scrollIntoView({ behavior: "smooth" });
              return this.$message.error("请输入经费");
            }
            break;
        }
      }
      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;

      this.submitHint = true;
    },

    submitWord() {
      //提交
      // return console.log(this.wordData['total']);
      getProjectNo("XM").then((result) => {
        let pram = {
          uid: this.$store.state.userInfo.userid, //用户ID
          pNo: result, //项目编号
          tid: "5e21b204-c206-11ed-a4cd-509a4c5b67cf", //特色创客空间建设项目分类ID
          tit: encodeURIComponent(this.wordData["projectName"]), //项目名称
          radio: this.wordData["radio"], //项目分组
          checkList: encodeURIComponent(JSON.stringify(this.wordData["checkList"])), //优先支持项目
          schoolRadio: encodeURIComponent(JSON.stringify(this.wordData["schoolRadio"])), //美丽校园改造项目
          applyParsonRadio: encodeURIComponent(JSON.stringify(this.wordData["applyParsonRadio"])), //项 目 申 请 人
          applyParsonName: this.wordData["applyParsonName"], //申请人姓名
          cid: this.wordData["college"], //学院ID,
          tel: this.wordData["tel"], //联系电话
          beh: this.wordData["beginTime"], //项目开始时间,
          planEnd: this.wordData["endTime"], //计划完成时间,
          cs: encodeURIComponent(JSON.stringify(this.wordData["studentS"])), //学生组,
          ct: encodeURIComponent(JSON.stringify(this.wordData["teacherS"])), //教师组,
          bf: encodeURIComponent(this.wordData["brief"]), //项目简介
          introduce: encodeURIComponent(JSON.stringify(this.wordData["introduce"])), //项目详细
          mon: encodeURIComponent(JSON.stringify(this.wordData["fund"])), //预算经费
          f: this.wordData["total"], //总经费
          apply: this.wordData["applicationDate"], //申请日期
          mem:
            this.wordData["studentS"].length + this.wordData["teacherS"].length, //项目组人数
        };
        // return
        this.ajax
          .post(this.$store.state.api + "/studentProjectWordApply", pram)
          .then(
            async (result) => {
              console.log(result);
              if (result["data"] == 1) {
                this.$message.success("项目提交成功");
                //提交项目成功，查看sessionStore是否有数据，有则删
								localStorage.removeItem(`StudentProjectApplyData${this.$store.state.userInfo.userid}`);
                await this.ajax.post(this.$store.state.api+"/delDraft",{userid:this.$store.state.userInfo.userid,type:0})
                this.$router.push("/projectApplication");
              } else {
                this.$message.error("项目提交失败");
              }
            },
            (err) => {
              console.log(err);
            }
          )
          .catch((err) => {
            console.log(err);
          });
      });
    },
    saveData() {
      localStorage.setItem(
        `StudentProjectApplyData${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:0,
				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:0,
			}
			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(`StudentProjectApplyData${this.$store.state.userInfo.userid}`)){
						this.wordData = JSON.parse(
      			  localStorage.getItem(`StudentProjectApplyData${this.$store.state.userInfo.userid}`)
      			);
					}
				}
				this.loading = false;
			})
		}
  },
  mounted() {
		this.getDraft();
    window.addEventListener("beforeunload", () => this.saveData());
  },

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

<style lang="less" scoped></style>