ssti-CollegeManage/src/views/commission/components/projectLookSpace.vue

<template>
  <div id="MakerSpaceWord" ref="downPDF" v-loading="loading">
    <div id="title">
      <div class="school">深圳技师学院</div>
      <div class="wordTitle">二级学院特色创客空间建设项目立项申报书</div>
      <div class="date">申请日期： {{ wordData["applicationDate"] }}</div>
    </div>
    <div id="table">
      <div class="han" id="one">
        <div class="label">项目名称</div>
        <div class="value" v-text="wordData['projectName']"></div>
        <div class="label">所在学院</div>
        <div class="value" v-text="wordData['collegeName']"></div>
      </div>
      <div class="status" id="two">
        <div class="statusLabel">项目状态</div>
        <div class="ValueDescribe">
          <div class="statusHan">
            <div class="DescribeLabel">
              <span v-if="wordData['stateName'] == '已建设'">√</span
              ><span v-else>□</span>已建设
            </div>
            <div class="DescribeValue">
              指二级学院已获得政府或学校资助（例：设计学院、信通学院、珠宝学院），已有双创空间（创客实践室）场地、设备设施并已投入运营，需对空间环境优化、规章制度建设、小型设施设备添置、创客项目物料增补，需拓展创客项目培训、辅导，创客讲座、沙龙、论坛，创客路演、竞赛、集市及成果参评、参展等方面的工作而提出的资助申请。
            </div>
          </div>
          <div class="statusHan">
            <div class="DescribeLabel">
              <span v-if="wordData['stateName'] == '待建设'">√</span
              ><span v-else>□</span>待建设
            </div>
            <div class="DescribeValue">
              指二级学院拟立项开展学院特色创客空间建设项目，需进行项目前期调研论证、场馆规划、空间图纸设计、设备选型等方面的工作而进行的资助申请。
            </div>
          </div>
        </div>
      </div>
      <div class="han" id="three">
        <div class="label">项目起始时间</div>
        <div class="value" v-text="wordData['begin_at']"></div>
        <div class="label">计划完成时间</div>
        <div class="value" v-text="wordData['plannedEnd_at']"></div>
      </div>
      <div class="han" id="four">
        <div class="label">项目负责人</div>
        <div class="value" v-text="wordData['pro_leader']"></div>
        <div class="label">学院牵头领导</div>
        <div class="value" v-text="wordData['lead_leader']"></div>
      </div>
      <div class="han">
        <div class="label">项目组人数</div>
        <div class="value">
          {{ wordData["teacher"].length + wordData["student"].length }}
        </div>
        <div class="label">参与教师人数</div>
        <div class="value">{{ wordData["teacher"].length }}</div>
        <div class="label">参与学生人数</div>
        <div class="value">{{ wordData["student"].length }}</div>
      </div>
      <div class="member" id="five">
        <div class="memberLabel">
          <span class="fontBold">项目组</span>
          <span class="fontBold">教师团队</span>
          <span>（团队3人以上，</span>
          <span>至少应包含1名教</span>
          <span>研室主任）</span>
        </div>
        <div
          class="memberTable"
          :style="
            wordData['teacher'].length < 4
              ? 'border-bottom:solid 1px black'
              : ''
          "
        >
          <div class="memberHan">
            <div class="memberValue">姓名</div>
            <div class="memberValue">专业</div>
            <div class="memberValue">职称</div>
            <div class="memberValue">学历</div>
            <div class="memberValue">所在教研室</div>
            <div class="memberValue">项目组角色分工</div>
          </div>
          <div
            class="memberHan"
            v-for="(item, index) in wordData['teacher']"
            :key="index"
          >
            <div class="memberValue" v-text="item['name']"></div>
            <div class="memberValue" v-text="item['speciality']"></div>
            <div class="memberValue" v-text="item['title']"></div>
            <div class="memberValue" v-text="item['education']"></div>
            <div class="memberValue" v-text="item['section']"></div>
            <div class="memberValue" v-text="item['work']"></div>
          </div>
        </div>
      </div>
      <div class="member" id="six">
        <div class="memberLabel">
          <span class="fontBold">项目组</span>
          <span class="fontBold">学生团队</span>
          <span>（团队5人以上，</span>
          <span>学生团队年级结构</span>
          <span>安排合理）</span>
        </div>
        <div
          class="memberTable"
          :style="
            wordData['student'].length < 4
              ? 'border-bottom:solid 1px black'
              : ''
          "
        >
          <div class="memberHan">
            <div class="memberValue">姓名</div>
            <div class="memberValue">班级</div>
            <div class="memberValue">年龄</div>
            <div class="memberValue">项目组角色分工</div>
          </div>
          <div
            class="memberHan"
            v-for="(item, index) in wordData['student']"
            :key="index"
          >
            <div class="memberValue" v-text="item['name']"></div>
            <div class="memberValue" v-text="item['class']"></div>
            <div class="memberValue" v-text="item['age']"></div>
            <div class="memberValue" v-text="item['work']"></div>
          </div>
        </div>
      </div>
      <div class="chapters">
        <div class="chaptersLabel">
          <span class="fontBold">项目</span>
          <span class="fontBold">建设</span>
          <span class="fontBold">内容</span>
          <span class="fontBold">及</span>
          <span class="fontBold">目标</span>
          <span>（说明项目建设内</span><span>容、拟解决的关键</span
          ><span>问题、创新之处、</span><span>主要建设指标）</span>
        </div>
        <div class="chaptersTable">
          <div class="chaptersValue" id="seven">
            <span>项目简介(200-300字)</span><br />
            <p v-text="wordData['brief']"></p>
          </div>
          <div class="chaptersValue" id="eight">
            <span
              >建设内容（空间优化/场馆规划方面拟解决的关键问题及主要建设指标）</span
            ><br />
            <p v-html="wordData['Construction']"></p>
          </div>
        </div>
      </div>
      <div class="chapters">
        <div class="chaptersLabel fontBold">
          <span>项目</span>
          <span>建设</span>
          <span>论证</span>
          <span>报告</span>
        </div>
        <div class="chaptersTable">
          <div class="chaptersValue" id="nine">
            <span
              >立项依据(说明本项目的目的、意义以及国内外高校现状、市场预测和发展趋势，预期达到的目标，研究的预期效果分析，成果受益面)</span
            ><br />
            <p v-html="wordData['ProjectBasis']"></p>
          </div>
        </div>
      </div>
      <div class="chapters">
        <div class="chaptersLabel">
          <span class="fontBold">预期</span>
          <span class="fontBold">成果</span>
          <span>(项目预期成果、</span><span>数量及形式，结题</span
          ><span>时：须附项目研究</span><span>报告)</span>
        </div>
        <div class="chaptersTable">
          <div class="chaptersValue" id="ten">
            <span
              >创客空间物理环境、制度建设及软件设施建设情况（环境优化/制度完善/设施改造）</span
            ><br />
            <p v-html="wordData['development']"></p>
          </div>
          <div class="chaptersValue" id="eleven">
            <span>学生创客工作室建设情况（工作室数量及活动开展情况）</span
            ><br />
            <p v-html="wordData['studio']"></p>
          </div>
          <div class="chaptersValue" id="twelve">
            <span>学生创客团队（人才）培养预期成果、数量</span><br />
            <p v-html="wordData['studentTeam']"></p>
          </div>
          <div class="chaptersValue" id="thirteen">
            <span>学生创客活动组织实施情况</span><br />
            <p v-html="wordData['studentActivities']"></p>
          </div>
          <div class="chaptersValue" id="fourteen">
            <span>学生创客团队孵化、转化创业项目情况</span><br />
            <p v-html="wordData['Transforming']"></p>
          </div>
        </div>
      </div>
      <div class="chapters">
        <div class="chaptersLabel">
          <span class="fontBold">立项</span>
          <span class="fontBold">基础</span>
          <span class="fontBold">及</span>
          <span class="fontBold">条件</span>
          <span>(说明已开展的相</span>
          <span>关研究及基础准备</span>
          <span>工作，已具备的设</span>
          <span>备场地条件和技术</span>
          <span>力量，尚缺少的条</span>
          <span>件和拟解决的途</span>
          <span>径)</span>
        </div>
        <div class="chaptersTable">
          <div class="chaptersValue" id="fifteen">
            <span
              >基础条件（物理环境/设备设施/项目实施/活动开展/技术力量/社会资源）</span
            ><br />
            <p v-html="wordData['condition']"></p>
          </div>
        </div>
      </div>

      <div class="fund">
        <div class="fundTitle">预算<br />经费</div>
        <div class="fundTable">
          <div class="fundTotal">
            <div class="fundLabel">总经费</div>
            <div class="fundValue">{{ wordData["fund"]["total"] }}元</div>
          </div>
          <div class="fundHeader">
            <div class="HeaderLabel">支出类别</div>
            <div class="HeaderLabel">支出项目</div>
            <div class="HeaderLabel">金额（元）</div>
            <div class="HeaderLabel">备注</div>
          </div>
          <div class="fundData">
            <div class="fundDataLabel">直接费用</div>
            <div class="fundDataHan">
              <div class="fundDataLie">
                <div class="fundDataValue">小型仪器设备费</div>
                <div
                  class="fundDataValue"
                  v-text="wordData['fund']['device']"
                ></div>
                <div class="fundDataValue">
                  <span
                    >项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。</span
                  >
                </div>
              </div>

              <div class="fundDataLie">
                <div class="fundDataValue">材料费</div>
                <div
                  class="fundDataValue"
                  v-text="wordData['fund']['Material']"
                ></div>
                <div class="fundDataValue">
                  <span
                    >项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。</span
                  >
                </div>
              </div>

              <div class="fundDataLie">
                <div class="fundDataValue">测试化验加工费</div>
                <div
                  class="fundDataValue"
                  v-text="wordData['fund']['processing']"
                ></div>
                <div class="fundDataValue">
                  <span
                    >项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。</span
                  >
                </div>
              </div>

              <div class="fundDataLie">
                <div class="fundDataValue">项目协作费</div>
                <div
                  class="fundDataValue"
                  v-text="wordData['fund']['Collaboration']"
                ></div>
                <div class="fundDataValue">
                  <span>按合同规定支付给协作单位的费用</span>
                </div>
              </div>
            </div>
          </div>

          <div class="fundData">
            <div class="fundDataLabel">间接费用</div>
            <div class="fundDataHan">
              <div class="fundDataLie">
                <div class="fundDataValue">项目成果鉴定费</div>
                <div
                  class="fundDataValue"
                  v-text="wordData['fund']['APPRAISAL']"
                ></div>
                <div class="fundDataValue">
                  <span>学术会务费、评审费、鉴定费、成果集制作费等费用。</span>
                </div>
              </div>

              <div class="fundDataLie">
                <div class="fundDataValue">参展参赛费</div>
                <div
                  class="fundDataValue"
                  v-text="wordData['fund']['entery']"
                ></div>
                <div class="fundDataValue">
                  <span
                    >参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。</span
                  >
                </div>
              </div>

              <div class="fundDataLie">
                <div class="fundDataValue">创客交流活动费</div>
                <div
                  class="fundDataValue"
                  v-text="wordData['fund']['activities']"
                ></div>
                <div class="fundDataValue">
                  <span
                    >创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。</span
                  >
                </div>
              </div>

              <div class="fundDataLie">
                <div class="fundDataValue">知识产权事务费</div>
                <div
                  class="fundDataValue"
                  v-text="wordData['fund']['Transaction']"
                ></div>
                <div class="fundDataValue">
                  <span>论文版面费、专利及其他知识产权事务等费用。</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="opinion">
            <div class="opinionLabel">所在学院/部门<br/> 意 见</div>
            <div class="opinionValue">
              <div class="opinionImport">
                <div class="opinionChapter">负责人签章：</div>
                <div class="opinionDate">年 月 日</div>
              </div>
            </div>
          </div>
  
          <div class="opinion">
            <div class="opinionLabel">财务部门<br/>意 见</div>
            <div class="opinionValue">
              <div class="opinionImport">
                <div class="opinionChapter">负责人签章：</div>
                <div class="opinionDate">年 月 日</div>
              </div>
            </div>
          </div>
  
          <div class="opinion">
            <div class="opinionLabel">创新创业学院<br/>审 核 意 见</div>
            <div class="opinionValue">
              <div class="opinionImport">
                <div class="opinionChapter">负责人签章：</div>
                <div class="opinionDate">年 月 日</div>
              </div>
            </div>
          </div> -->
    </div>
    <div class="notes">
      <span>备注：</span>
      <span>1.表格可顺延或另附页。</span>
      <span>2.项目申报需附相关佐证材料。</span>
    </div>
    <!-- <el-button v-if="downFile" type="primary" @click="getWord">下载表格</el-button> -->
  </div>
</template>
    
  <script>
// import {getMakerSpaceWord} from '@/components/tool/getWord'

export default {
  data() {
    return {
      loading: false,
      downFile: true,
      wordData: {
        applicationDate: "", //申请日期
        projectName: "", //项目名称
        college: "", //所在学院
        collegeName: "",
        begin_at: "", //项目开始时间
        state: "", //项目状态
        stateName: "", //项目状态名称
        plannedEnd_at: "", //计划完成时间
        pro_leader: "", //项目负责人
        lead_leader: "", //学院牵头领导
        teacher: [
          {
            name: "",
            speciality: "",
            title: "",
            education: "",
            section: "",
            work: "",
          },
          {
            name: "",
            speciality: "",
            title: "",
            education: "",
            section: "",
            work: "",
          },
          {
            name: "",
            speciality: "",
            title: "",
            education: "",
            section: "",
            work: "",
          },
        ], //教师组//name：姓名  speciality：专业  title：职称 education：学历    section：所在教研室    work：项目组角色分工
        student: [
          { name: "", class: "", age: "", work: "" },
          { name: "", class: "", age: "", work: "" },
          { name: "", class: "", age: "", work: "" },
          { name: "", class: "", age: "", work: "" },
          { name: "", class: "", age: "", work: "" },
        ], //学生组//name：姓名    class：班级 age：年龄   work：项目组任务分工
        brief: "", //项目简介
        Construction: "", //建设内容
        ProjectBasis: "", //立项依据
        development: "", //创客空间物理环境、制度建设及软件设施建设情况
        studio: "", //学生创客工作室建设情况
        studentTeam: "", //学生创客团队（人才）培养预期成果、数量
        studentActivities: "", //学生创客活动组织实施情况
        Transforming: "", //学生创客团队孵化、转化创业项目情况
        condition: "", //立 项基 础及条 件
        fund: {
          total: "",
          device: "",
          Material: "",
          processing: "",
          Collaboration: "",
          APPRAISAL: "",
          entery: "",
          activities: "",
          Transaction: "",
        },
      },
    };
  },
  methods: {
    getWord() {
      this.downFile = false;
      // console.log(this.$refs.downPDF)
      downloadPDF(this.$refs.downPDF);
      this.downFile = true;
      // this.$message.info("正在下载表格")
      // getMakerSpaceWord(this.wordData);
    },
    getData() {
      this.loading = true;
      this.ajax
        .get(this.$store.state.api + "/getMakerSpaceWordData", {
          uid: this.$store.state.userInfo.userid,
          pid: this.$route.query["pid"],
        })
        .then((result) => {
          let data = result["data"][0][0];
          this.wordData["projectName"] = data["title"];
          this.wordData["applicationDate"] = data["applyProjectTime"];
          this.wordData["college"] = data["classid"];
          this.wordData["collegeName"] = data["cName"];
          this.wordData["begin_at"] = data["begintime"];
          this.wordData["state"] = data["typeName"];
          this.wordData["stateName"] = data["tName"];
          this.wordData["plannedEnd_at"] = data["planTime"];
          this.wordData["pro_leader"] = data["pro_leader"];
          this.wordData["lead_leader"] = data["lead_leader"];
          this.wordData["teacher"] = JSON.parse(data["course_teacher"]);
          this.wordData["student"] = JSON.parse(data["course_student"]);
          this.wordData["brief"] = data["brief"];
          this.wordData["fund"] = JSON.parse(data["money"]);
          this.state = data["isupload"];
          this.wordData = { ...this.wordData, ...JSON.parse(data["chapters"]) };
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
    
  <style lang="less" scoped>
#MakerSpaceWord {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 40px 100px;
  box-sizing: border-box;
  #title {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    // margin-top: 40px;
    .school {
      font-size: 2.5em;
      font-weight: bold;
      letter-spacing: 20px;
    }
    .wordTitle {
      font-size: 2em;
      letter-spacing: 0.15em;
      margin-bottom: 40px;
    }
    .date {
      font-size: 1em;
      position: absolute;
      bottom: 0;
      right: 100px;
      font-weight: bold;
      margin-bottom: 5px;
    }
  }
  #table {
    box-sizing: border-box;
    border: solid 1px black;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    .han {
      display: flex;
      height: auto;
      box-sizing: border-box;
      border-bottom: solid 1px black;
      .label {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        min-height: 50px;
        border-right: solid 1px black;
        font-weight: bold;
      }
      .value {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        min-height: 50px;
        &:not(:nth-last-child(1)) {
          border-right: solid 1px black;
        }
      }
      &:nth-child(5) {
        .label {
          flex: 1;
        }
        .value {
          flex: 1;
        }
      }
    }
    .status {
      display: flex;
      height: auto;
      box-sizing: border-box;
      .statusLabel {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
        font-weight: bold;
      }
      .ValueDescribe {
        flex: 5;
        display: flex;
        flex-direction: column;
        .statusHan {
          display: flex;
          box-sizing: border-box;
          border-bottom: solid 1px black;

          .DescribeLabel {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            // min-height: 200px;
            padding: 40px 10px;
            border-right: solid 1px black;
          }
          &:nth-child(2) {
            .DescribeLabel {
              min-height: 100px;
            }
          }
          .DescribeValue {
            flex: 5;
            box-sizing: border-box;
            padding: 15px;
          }
        }
      }
    }
    .member {
      display: flex;
      .memberLabel {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
        min-height: 200px;
      }
      .memberTable {
        flex: 5;
        display: flex;
        flex-direction: column;
        .memberHan {
          display: flex;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          position: relative;
          .memberValue {
            box-sizing: border-box;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: solid 1px black;
            min-height: 45px;
            &:nth-last-child(1) {
              border-right: none;
              flex: 3;
            }
          }
        }
      }
    }
    .chapters {
      display: flex;
      max-width: 1500px;
      .chaptersLabel {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 20px 0;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .chaptersTable {
        flex: 5;
        display: flex;
        flex-direction: column;
        .chaptersValue {
          flex: 1;
          min-height: 200px;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          padding: 5px;
          max-width: 1200px;
          span {
            font-weight: bold;
          }
          p {
            width: 100%;
            display: block;
            word-wrap: break-word;
          }
        }
      }
    }
    .fund {
      display: flex;
      .fundTitle {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
        font-weight: bold;
      }
      .fundTable {
        flex: 5;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .fundTotal {
          height: 60px;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          display: flex;
          div {
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
          }
          .fundLabel {
            flex: 1;
            box-sizing: border-box;
            border-right: solid 1px black;
          }
          .fundValue {
            flex: 4;
          }
        }
        .fundHeader {
          min-height: 40px;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          display: flex;
          font-weight: bold;
          .HeaderLabel {
            flex: 1;
            display: flex;
            box-sizing: border-box;
            justify-content: center;
            align-items: center;
            border-right: solid 1px black;
            &:nth-last-child(1) {
              flex: 2;
              border: none;
            }
          }
        }
        .fundData {
          display: flex;
          .fundDataLabel {
            flex: 1;
            box-sizing: border-box;
            border-right: solid 1px black;
            border-bottom: solid 1px black;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
          }
          .fundDataHan {
            flex: 4;
            display: flex;
            flex-direction: column;
            .fundDataLie {
              display: flex;
              min-height: 40px;
              flex: 4;
              box-sizing: border-box;
              border-bottom: solid 1px black;
              .fundDataValue {
                flex: 1;
                min-height: 40px;
                display: flex;
                box-sizing: border-box;
                justify-content: center;
                align-items: center;
                border-right: solid 1px black;
                &:nth-last-child(1) {
                  flex: 2;
                  border: none;
                  justify-content: flex-start;
                  span {
                    padding: 10px 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
    // .fundTable{
    //   tr{
    //     td{
    //       height: 50px;
    //     }
    //     &:nth-child(1){
    //       flex: 1;
    //     }
    //   }
    // }
    .opinion {
      display: flex;
      .opinionLabel {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        // padding: 3.5px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
        font-weight: bold;
      }
      .opinionValue {
        flex: 5;
        min-height: 200px;
        position: relative;
        box-sizing: border-box;
        border-bottom: solid 1px black;
        .opinionImport {
          display: flex;
          width: 30%;
          height: 40%;
          flex-direction: column;
          position: absolute;
          bottom: 0px;
          right: 20px;
          justify-content: space-between;
          .opinionDate {
            display: flex;
            justify-content: flex-end;
            font-size: 18px;
          }
        }
      }
    }
  }
  .notes {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  :deep(.el-input__inner) {
    height: 100%;
    border-radius: 0;
    width: 100%;
    background: none;
    color: black;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: none;
    outline: none;
  }
  :deep(.el-textarea__inner) {
    height: 100%;
    border-radius: 0;
    width: 100%;
    background: none;
    color: black;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: none;
    overflow: hidden;
  }
  .noCenter {
    :deep(.el-textarea__inner) {
      text-align: left;
    }
  }
  :deep(.el-date-editor) {
    width: 100%;
    height: 100%;
  }
  :deep(.el-input__suffix) {
    display: none;
  }

  .fontBold {
    font-weight: bold;
  }
}
</style>