ssti-CollegeManage/src/views/projectManage/components/studentProjectWordShow.vue

<template>
  <div id="studentProjectWord" ref="downPDF">
    <table border="1" cellspacing="0" class="table">
      <div id="title">
        <div class="school">深圳技师学院</div>
        <div class="wordTitle">2024年校级学生创新创业训练计划项目申报书模版</div>
        <div class="date">申请日期：{{ downWordData.applyProjectTime }}</div>
      </div>

      <tr id="projectName">
        <td colspan="2" ref="projectName">项目名称</td>
        <td colspan="5" v-text="downWordData.projectName"></td>
      </tr>
			<tr id="radio">
        <td rowspan="3" colspan="2" ref="radio"><span class="jc">大创项目</span></td>
				<td v-text="downWordData.radio=='4a4e2cfe-e1a1-11ee-81d4-00ff5c7a43f5'?'☑ 创新训练项目':'□ 创新训练项目'"></td>
        <td colspan="4">学生个人或团队，在导师指导下，自主完成创新性研究项目设计、研究条件准备和项目实施、研究报告撰写、成果（学术）交流等工作。</td>
      </tr> 
      <tr>
        <td v-text="downWordData.radio=='56f0ad8d-e1a1-11ee-81d4-00ff5c7a43f5'?'☑ 创业训练项目':'□ 创业训练项目'"></td>
        <td colspan="4">学生团队在导师指导下，团队中每个学生在项目实施过程中扮演一个或多个具体角色，完成商业计划书编制、可行性研究、企业模拟运行、撰写创业报告等工作。</td>
      </tr>
			<tr>
        <td v-text="downWordData.radio=='ed917c55-f51d-11ed-a3f6-509a4c5b67cf'?'☑ 创业实践项目':'□ 创业实践项目'"></td>
        <td colspan="4">学生团队在学校导师和企业导师共同指导下，采用创新训练项目或创新性实验等成果，提出具有市场前景的创新性产品或服务，以此为基础开展创业实践活动。</td>
      </tr> 
      <!-- <tr id="checkList" class="checkArea" v-if="downWordData['checkList'].length > 0">
        <td colspan="2" ref="checkList">优先支持项目（可多选）</td>
        <td colspan="5">
          <span
            ><span
              >{{
                downWordData["checkList"].indexOf("1") != -1 ? "√ " : "□"
              }}大赛选拔项目</span
            ></span
          >
          <span
            ><span
              >{{
                downWordData["checkList"].indexOf("2") != -1 ? "√ " : "□"
              }}落地注册项目</span
            ></span
          >
          <span
            ><span
              >{{
                downWordData["checkList"].indexOf("3") != -1 ? "√ " : "□"
              }}社会征集项目</span
            ></span
          >
          <span
            ><span
              >{{
                downWordData["checkList"].indexOf("4") != -1 ? "√ " : "□"
              }}产业命题项目</span
            ></span
          >
        </td>
      </tr> -->
      <tr id="schoolRadio" class="checkArea" v-if="downWordData['schoolRadio'].length > 0">
        <td colspan="2" ref="schoolRadio">美丽校园改造项目（特色项目）</td>
        <td colspan="5">
					<span class="checkAreaBlc"><span v-text="downWordData['schoolRadio'].indexOf('1')!=-1?'☑ ':'□ '"></span><span>校园安全项目</span></span>
          <span class="checkAreaBlc"><span v-text="downWordData['schoolRadio'].indexOf('2')!=-1?'☑ ':'□ '"></span><span>环境治理项目</span></span>
          <span class="checkAreaBlc"><span v-text="downWordData['schoolRadio'].indexOf('3')!=-1?'☑ ':'□ '"></span><span>校园服务项目</span></span>
          <span class="checkAreaBlc"><span v-text="downWordData['schoolRadio'].indexOf('4')!=-1?'☑ ':'□ '"></span><span>文创装置项目</span></span>
        </td>
      </tr>
			<tr id="schoolRadio">
        <td colspan="2" ref="schoolRadio">
					<span class="jc">优先支持项目</span><br><span>(可多选)</span>
				</td> <td colspan="5" style="padding: 20px 0;">
					<div style="display: flex;flex-direction: column;align-items: flex-start;padding-left: 20px;">
						<span class="checkAreaBlc"><span v-text="downWordData['checkList'].indexOf('1')!=-1?'☑ ':'□ '"></span><span>团队合作项目、跨学科合作项目。</span></span>
          	<span class="checkAreaBlc"><span v-text="downWordData['checkList'].indexOf('2')!=-1?'☑ ':'□ '"></span><span>科技创新、低空经济、银发经济、乡村振兴、助残助学、非遗文创等新技术、新产业、新业态、新模式方面的项目。</span></span>
          	<span class="checkAreaBlc"><span v-text="downWordData['checkList'].indexOf('3')!=-1?'☑ ':'□ '"></span><span>企业真实生产经营项目或外包服务项目。</span></span>
          	<span class="checkAreaBlc"><span v-text="downWordData['checkList'].indexOf('4')!=-1?'☑ ':'□ '"></span><span>社会征集项目、产业命题项目。</span></span>
						<span class="checkAreaBlc"><span v-text="downWordData['checkList'].indexOf('5')!=-1?'☑ ':'□ '"></span><span>近两年内参与校级以上创新创业大赛并获奖的项目。</span></span>
          	<span class="checkAreaBlc"><span v-text="downWordData['checkList'].indexOf('6')!=-1?'☑ ':'□ '"></span><span>美丽校园改造计划中的校园智能产品及文创产品的研发项目。</span></span>
          	<span class="checkAreaBlc"><span v-text="downWordData['checkList'].indexOf('7')!=-1?'☑ ':'□ '"></span><span>企申报人为港澳籍、学校扶贫班及在校贫困生申报的项目</span></span>
					</div>
        </td>
      </tr>
      <tr id="applyParsonName">
        <td colspan="2" ref="applyParsonName">申 请 人 姓 名</td>
        <td colspan="1" v-text="downWordData.applyParsonName"></td>
        <td ref="college">参与学院/公司</td>
        <td v-text="downWordData.dp"></td>
        <td ref="tel">联系电话</td>
        <td v-text="downWordData.tel"></td>
      </tr>
      <tr id="beginTime">
        <td colspan="2" ref="beginTime">项 目 起 始 时 间</td>
        <td colspan="2" v-text="downWordData.beginTime.split(' ')[0]"></td>
        <td ref="endTime">计划完成时间</td>
        <td colspan="2" v-text="downWordData.endTime.split(' ')[0]"></td>
      </tr>
      <tr>
        <td colspan="2">项 目 组 人 数</td>
        <td
          v-text="downWordData.studentS.filter(i=>i.name!='').length + downWordData.teacherS.filter(i=>i.name!='').length"
        ></td>
        <td>参与学生人数</td>
        <td v-text="downWordData.studentS.filter(i=>i.name!='').length"></td>
        <td>参与教师人数</td>
        <td v-text="downWordData.teacherS.filter(i=>i.name!='').length"></td>
      </tr>
      <tr id="studentS">
        <td :rowspan="downWordData.studentS.length + 1" ref="studentS">
          项目组学生成员（至少2个学院以上学生构成，团队5人以上）
        </td>
        <td>姓名</td>
        <td colspan="2">所在学院/部门/专业</td>
        <td colspan="3">项目组角色分工</td>
      </tr>
      <tr
        style="position: relative"
        v-for="(item, index) in downWordData.studentS"
        :key="index + 'a'"
      >
        <td v-text="item.name"></td>
        <td colspan="2" v-text="item.collage"></td>
        <td colspan="3" v-text="item.work"></td>
      </tr>
      <tr id="teacherS">
        <td :rowspan="downWordData.teacherS.length + 1" ref="teacherS">
          项目组指导教师（2个学院以上，团队2-3人）
        </td>
        <td>姓名</td>
        <td colspan="2">所在学院/部门/专业</td>
        <td colspan="3">项目组角色分工</td>
      </tr>
      <tr
        style="position: relative !important"
        v-for="(item, index) in downWordData.teacherS"
        :key="index + 'b'"
      >
        <td v-text="item.name"></td>
        <td colspan="2" v-text="item.collage"></td>
        <td colspan="3" v-text="item.work"></td>
      </tr>
      <tr id="brief">
        <td rowspan="5" ref="brief">研发内容</td>
        <td colspan="6" class="textLeft">
          <p>项目简介（200-300字）</p>
          <span>
            {{ downWordData.brief }}
          </span>
        </td>
      </tr>
      <tr>
        <td style="text-align: left" colspan="6" class="textLeft">
          <p>项目研发背景</p>
          <span v-html="downWordData.introduce.back"></span>
        </td>
      </tr>
      <tr>
        <td style="text-align: left" colspan="6" class="textLeft">
          <p>项目创新点</p>
          <span v-html="downWordData.introduce.innovate"></span>
        </td>
      </tr>
      <tr>
        <td style="text-align: left" colspan="6" class="textLeft">
          <p>技术研发路线</p>
          <span v-html="downWordData.introduce.path"></span>
        </td>
      </tr>
      <tr>
        <td style="text-align: left" colspan="6" class="textLeft">
          <p>项目应用场景</p>
          <span v-html="downWordData.introduce.scene"></span>
        </td>
      </tr>
      <tr>
        <td>商业模式及社会价值</td>
        <td style="text-align: left" colspan="6" class="textLeft">
          <p>项目商业模式/社会价值</p>
          <span v-html="downWordData.introduce.worth"></span>
        </td>
      </tr>
      <tr>
        <td>团队优势</td>
        <td style="text-align: left" colspan="6" class="textLeft">
          <p>团队构成及优势</p>
          <span v-html="downWordData.introduce.team"></span>
        </td>
      </tr>
      <tr>
        <td>研发成本</td>
        <td style="text-align: left" colspan="6" class="textLeft">
          <p>研发成本来源及构成</p>
          <span v-html="downWordData.introduce.cost"></span>
        </td>
      </tr>
      <tr>
        <td rowspan="3">预期成果</td>
        <td style="text-align: left" colspan="6" class="textLeft">
          <p>
            项目预期成果、数量及形式（产品原型/发明专利/双创竞赛/成果转化/社会效益）
          </p>
          <span v-html="downWordData.introduce.expectResults"></span>
        </td>
      </tr>
      <tr class="textLeft">
        <td style="text-align: left" colspan="6">
          <p>学生创客人才培养预期成果、数量（教师填写）</p>
          <span v-html="downWordData.introduce.expectResultsTeacher"></span>
        </td>
      </tr>
      <tr class="textLeft">
        <td style="text-align: left" colspan="6">
          <p>项目预期孵化、转化创业项目情况</p>
          <span v-html="downWordData.introduce.expectConversion"></span>
        </td>
      </tr>
      <tr>
        <td>实施计划</td>
        <td style="text-align: left" colspan="6" class="textLeft">
          <span v-html="downWordData.introduce.plan"></span>
        </td>
      </tr>
      <tr id="fund">
        <td rowspan="12" ref="fund">预算经费</td>
        <td>总经费</td>
        <td
          colspan="5"
          v-text="reversedMessage == 0 ? '' : reversedMessage"
        ></td>
      </tr>
      <tr>
        <td>支出类别</td>
        <td colspan="2">支出项目</td>
        <td>金额（元）</td>
        <td colspan="4">备 注</td>
      </tr>
      <tr>
        <td rowspan="5">直接费用</td>
      </tr>
      <tr>
        <!-- device:"",
                Material:"",
                processing:"",
                Collaboration:"",
                APPRAISAL:"",
                entery:"",
                activities:"",
                Transaction:"", -->
        <td colspan="2">小型仪器设备费</td>
        <td v-text="downWordData.fund.device"></td>
        <td colspan="2">
          项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。
        </td>
      </tr>
      <tr>
        <td colspan="2">材料费</td>
        <td v-text="downWordData.fund.Material"></td>
        <td colspan="2">
          项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。
        </td>
      </tr>
      <tr>
        <td colspan="2">测试化验加工费</td>
        <td v-text="downWordData.fund.processing"></td>
        <td colspan="2">
          项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。
        </td>
      </tr>
      <tr>
        <td colspan="2">项目协作费</td>
        <td v-text="downWordData.fund.Collaboration"></td>
        <td colspan="2">按合同规定支付给协作单位的费用</td>
      </tr>

      <tr>
        <td rowspan="5">间接费用</td>
      </tr>
      <tr>
        <td colspan="2">项目成果鉴定费</td>
        <td v-text="downWordData.fund.APPRAISAL"></td>
        <td colspan="2">学术会务费、评审费、鉴定费、成果集制作费等费用。</td>
      </tr>
      <tr>
        <td colspan="2">参展参赛费</td>
        <td v-text="downWordData.fund.entery"></td>
        <td colspan="2">
          参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。
        </td>
      </tr>
      <tr>
        <td colspan="2">创客交流活动费</td>
        <td v-text="downWordData.fund.activities"></td>
        <td colspan="2">
          创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。
        </td>
      </tr>
      <tr>
        <td colspan="2">知识产权事务费</td>
        <td v-text="downWordData.fund.Transaction"></td>
        <td colspan="2">论文版面费、专利及其他知识产权事务等费用。</td>
      </tr>
      <!-- <tr>
            <td>所在学院/部门意见</td><td colspan="6" class="textLeft" style="height:200px">
              <div style="height:200px"></div>
                <div style="text-align: right;font-size: 18px;width: 80%;margin-bottom: 20px;">负责人签章：</div>
                <div style="text-align: right;font-size: 18px;width: 90%;">年&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;日</div>
            </td>
          </tr>
          <tr>
            <td>财务部门意见</td><td colspan="6" class="textLeft" style="height:200px">
              <div style="height:200px"></div>
                <div style="text-align: right;font-size: 18px;width: 80%;margin-bottom: 20px;">负责人签章：</div>
                <div style="text-align: right;font-size: 18px;width: 90%;">年&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;日</div>
            </td>
          </tr>
          <tr>
            <td>创新创业学院审核意见</td><td colspan="6" class="textLeft" style="height:200px">
                <div style="height:200px"></div>
                <div style="text-align: right;font-size: 18px;width: 80%;margin-bottom: 20px;">负责人签章：</div>
                <div style="text-align: right;font-size: 18px;width: 90%;">年&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;日</div>
            </td>
          </tr> -->
      <div class="notes">
        <span>备注：</span>
        <span>1.表格可顺延或另附页。</span>
        <span>2.优先支持项目需提供与研发项目相关的实证材料并查看原件。</span>
        <span
          >3.初创组已结题项目申请需提供结题验收证明、初创企业申请需提供入驻学校孵化基地协议书及公司营业执照。</span
        >
      </div>
    </table>

    <!-- <el-button style="margin-top:20px" type="primary" @click="work">下载表格</el-button> -->
  </div>
</template>
      
    <script>
import { getWord } from "@/components/tool/getWord";
export default {
  data() {
    return {
      downWordData: {},
    };
  },
  methods: {
    work() {
      this.$message.info("正在下载表格");
      getWord(this.downWordData);
    },
    getData() {
      let param = {
        uid: this.$store.state.userInfo.userid,
        pid: this.$route.query["pid"],
      };
      this.ajax.get(this.$store.state.api + "/studentProjectData", param).then(
        (res) => {
          let data = res.data[0][0];
          console.log(data);
          let wordData = {};
          wordData.projectName = data.title;
          wordData.applyProjectTime = data.applyProjectTime;
          wordData.radio = data.typeName;
          wordData.checkList = JSON.parse(data.multiSelectProject);
          wordData.schoolRadio = JSON.parse(data.schoolRemould);
          wordData.applyParsonRadio = JSON.parse(data.projectApplyperson);
          wordData.applyParsonName = data.pro_leader;
          wordData.college = data.classid;
          wordData.tel = data.phone;
          wordData.beginTime = data.bTime;
          wordData.endTime = data.eTime;
          wordData.studentS = JSON.parse(data.course_student);
          wordData.teacherS = JSON.parse(data.course_teacher);
          wordData.brief = data.brief;
          wordData.introduce = JSON.parse(data.chapters);
          wordData.fund = JSON.parse(data.money);
          wordData.dp = data.className;

          this.downWordData = wordData;

          console.log(this.downWordData);
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  computed: {
    //经费总合
    reversedMessage: function () {
      let num = 0;
      for (let i in this.downWordData.fund)
        num += Number(this.downWordData.fund[i]);
      return num;
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
      
    <style lang="less" scoped>
#studentProjectWord {
  width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffff;
  margin: auto;
  padding: 40px 40px;
  box-sizing: border-box;
  #title {
    width: 100%;
    position: absolute;
    top: -170px;
    .school {
      text-align: center;
      width: 100%;
      font-size: 2.5em;
      font-weight: bold;
      letter-spacing: 20px;
    }
    .wordTitle {
      text-align: center;
      width: 100%;
      font-size: 2em;
      letter-spacing: 0.15em;
      margin-bottom: 40px;
    }
    .date {
      width: 90%;
      text-align: right;
      font-size: 1em;
      font-weight: bold;
    }
  }
  .table {
    border: none;
    width: 1200px;
    border-top: solid 1px black;
    border-right: solid 1px black;
    border-left: solid 1px black;
    position: relative;
    margin-top: 180px;
    margin-bottom: 100px;
    .textLeft {
      text-align: left;
      vertical-align: top;
      position: relative;
      max-width: 100%;
      height: 200px;
      // white-space: nowrap;
      span {
        // white-space: nowrap;
        word-wrap: break-word;
        word-break: break-all;
      }
      :deep(.el-textarea__inner) {
        border: none;
        border-radius: 0px;
        text-align: left !important;
        font-size: 16px;
      }
    }
    tr {
      position: relative;
      td {
        border: none;
        border-bottom: solid 1px black;
        border-right: solid 1px black;
        height: 50px;
        text-align: center;
        line-height: 30px;
        width: 70px;
        box-sizing: border-box;
        padding: 5px;
        p {
          font-weight: 600;
        }
        :deep(.el-select .el-input .el-select__caret) {
          display: none;
        }
        :deep(.el-textarea__inner) {
          // padding: 0;
          border: none;
          border-radius: 0px;
          text-align: center;
          font-size: 16px;
        }
        :deep(.el-input__inner) {
          border: none;
          border-radius: 0px;
          text-align: center;
          font-size: 16px;
        }
        :deep(input)::-webkit-outer-spin-button,
        :deep(input)::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }
        :deep(input)[type="number"] {
          -moz-appearance: textfield;
        }
      }
    }
  }
  .notes {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}
.checkArea {
  td {
    span {
      margin-left: 50px;
      span {
        margin: 0;
      }
    }
  }
}
</style>