ssti-CollegeManage/src/views/projectSettlement/components/MakerSpaceWordShow.vue

<template>
    <div id="MakerSpaceWord" 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-text="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-text="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-text="wordData['development']"></p>
                  </div>
                  <div class="chaptersValue" id="eleven">
                    <span>学生创客工作室建设情况（工作室数量及活动开展情况）</span><br/>
                    <p v-text="wordData['studio']"></p>
                  </div>
                  <div class="chaptersValue" id="twelve">
                    <span>学生创客团队（人才）培养预期成果、数量</span><br/>
                    <p v-text="wordData['studentTeam']"></p>
                  </div>
                  <div class="chaptersValue" id="thirteen">
                    <span>学生创客活动组织实施情况</span><br/>
                    <p v-text="wordData['studentActivities']"></p>
                  </div>
                  <div class="chaptersValue" id="fourteen">
                    <span>学生创客团队孵化、转化创业项目情况</span><br/>
                    <p v-text="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-text="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 type="primary" @click="getWord">下载表格</el-button>
    </div>
    </template>
      
    <script>
    import {getMakerSpaceWord} from '@/components/tool/getWord'
      export default {
        data() {
          return {
            loading:false,
            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.$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: .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;
          .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;
              span{
                font-weight: bold;
              }
            }
          }
        }
        .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;
      }
      // .InputDiv{
      //   width: 100%;
      //   height: 100%;
      //   word-break: break-all;
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      //   box-sizing: border-box;
      //   padding: 10px;
      //   outline: none;
      //   &:focus{
      //     border:solid 1px #409eff ;
      //   }
      // }
      .fontBold{
        font-weight:bold;
      }
    }
    </style>