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

<template>
    <div id="MarkeractivityWord">
        <div id="title">
            <div class="school">深圳技师学院</div>
            <div class="wordTitle">创客专项资金及项目申请表（{{wordData['type']==0?'创客活动':"个人创客"}}）</div>
            <div class="date">申请日期：{{wordData.applicationDate}}</div>
        </div>
        <table border="1" cellspacing="0" class="table">
            <tr id="one" v-if="wordData['type']==0">
              <td colspan="4"><span class="jc">关联项目</span></td>
              <td colspan="12" v-text="wordData['ProjectName']"></td>
            </tr>
            <tr id="two">
                <td colspan="4"><span class="活动名称"><span class="jc">活动名称</span></span></td>
                <td colspan="5" v-text="wordData['activityName']"></td>
                <td colspan="3"><span class="jc">预算经费</span></td>
                <td @click="goto('#fund')" colspan="4" v-text="total"></td>
            </tr>
            <tr id="three">
                <td colspan="4"><span class="jc">项目负责人</span></td><td colspan="3" v-text="wordData['pro_leader']"></td>
                <td colspan="2"><span class="jc">所在部门</span></td><td colspan="3" v-text="wordData['collegeName']"></td>
                <td colspan="2"><span class="jc">联系电话</span></td><td colspan="3" v-text="wordData['tel']"></td>
            </tr>
            <tr id="four">
                <td colspan="4"><span class="jc">活动时间</span></td>
                <td colspan="5" v-text="wordData['activityTime'][0].split(' ')[0]+' 至 '+wordData['activityTime'][1].split(' ')[0]"></td>
                <td colspan="3"><span class="jc">参与学生人数</span></td><td colspan="5" v-text="wordData['student']"></td>
            </tr>

            <tr id="five">
                <td colspan="2" :rowspan="wordData['member'].length+1"><p>活</p> <p>动</p> <p>指</p> <p>导</p> <p>老</p> <p>师</p></td><td colspan="2">姓名</td><td colspan="3">工作单位/部门</td><td colspan="9">项目分工</td>
            </tr>
            <tr v-for="(item,index) in wordData['member']" :key="index+'b'">
                <td colspan="2" style="border-left: none;" v-text="item['name']"></td>
                <td colspan="3" v-text="item['collage']"></td>
                <td colspan="10" v-text="item['work']"></td>
            </tr>
            <tr class="textLeft" id="six">
                <td colspan="2"><p>活动</p><br> <p>计划</p></td><td style="text-align: left;vertical-align: top;height: 200px;" colspan="15" v-text="wordData['activityPlan']"></td>
            </tr>
            <tr class="textLeft" id="seven">
                <td colspan="2"><p>预期</p><br><p>目标</p> </td><td colspan="15" style="text-align: left;vertical-align: top;height: 200px;" v-text="wordData['expectations']"></td>
            </tr>
            <tr class="textLeft" id="nine">
                <td colspan="2"><p>活动受</p><br> <p>众面</p></td><td style="text-align: left;vertical-align: top;height: 200px;" colspan="15" >
                    <p>参与学生范围：</p>
                    <span v-text="wordData['eventAudience']"></span>
                </td>
            </tr>
            <!-- <tr class="textLeft">
                <td colspan="15" style="text-align: left;border-left: none;">
                  <p>二、创新点</p>
                    <el-input
                      type="textarea"
                      :rows="6"
                      style="width: 100%;"
                      resize="none"
                      v-model="input">
                    </el-input>
                </td>
            </tr> -->


            <tr class="textLeft" id="ten">
                <td colspan="2"><p>经费</p><br><p>支出</p> <br><p>计划</p></td><td colspan="15" style="text-align: left;vertical-align: top;height: 200px;" v-text="wordData['fundingPlan']"></td>
            </tr>
            <tr id="fund">
                <td rowspan="14"><p>预</p> <p>算</p> <p>经</p> <p>费</p></td>
            </tr>
            <tr>
                <td rowspan="4" style="border-left: none;">总经费</td><td rowspan="4" colspan="2" >{{total}}元</td>
            </tr>
            <tr>
                <td colspan="12" style="border-left: none;">经费月支出计划 (元)</td>
            </tr>
            <tr>
              <td style="border-left: none;">第1个月</td><td>第2个月</td><td>第3个月</td><td>第4个月</td><td>第5个月</td><td>第6个月</td><td>第7个月</td><td>第8个月</td><td>第9个月</td><td>第10个月</td><td>第11个月</td><td>第12个月</td>
            </tr>
            <tr>
                <td v-for="(item,index) in wordData['expenditureMothPlan']" :key="index" style="border-left: none;" v-text="wordData['expenditureMothPlan'][index]"></td>
            </tr>
            <tr>
                <td colspan="4" style="border-left: none;">支出类别</td><td colspan="4">支出项目</td><td colspan="2">金额（元）</td><td colspan="5">备注</td>
            </tr>
            <tr>
              <td rowspan="4" colspan="4" style="border-left: none;">直接经费</td>
              <td colspan="4">小型仪器设备费</td>
              <td colspan="2" v-text="wordData['fund']['device']"></td>
              <td colspan="5">
                项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。
              </td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">材料费</td>
              <td colspan="2" v-text="wordData['fund']['Material']"></td>
              <td colspan="5">项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">测试化验加工费</td>
              <td colspan="2" v-text="wordData['fund']['processing']"></td>
              <td colspan="5">项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">项目协作费</td>
              <td colspan="2" v-text="wordData['fund']['Collaboration']"></td>
              <td colspan="5">按合同规定支付给协作单位的费用</td>
            </tr>
            <tr>
              <td rowspan="4" colspan="4" style="border-left: none;">间接经费</td>
              <td colspan="4">项目成果鉴定费</td>
              <td colspan="2" v-text="wordData['fund']['APPRAISAL']"></td>
              <td colspan="5">学术会务费、评审费、鉴定费、成果集制作费等费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">参展参赛费</td>
              <td colspan="2" v-text="wordData['fund']['entery']"></td>
              <td colspan="5">参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">创客交流活动费</td>
              <td colspan="2" v-text="wordData['fund']['activities']"></td>
              <td colspan="5">创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">论文版面费</td>
              <td colspan="2" v-text="wordData['fund']['Transaction']"></td>
              <td colspan="5">论文版面费、专利及其他知识产权事务等费用。</td>
            </tr>

            <tr class="textLeft">
                <td><p>所在部</p> <p>门意见</p></td><td colspan="15" style="height: 200px;">

                    <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 v-for="(item,index) in 16" :key="index+'c'" style="border: none;"></td>
            </tr>
        </table>
          <div class="notes">
            <span>备注：</span>
            <span>如表格不够可顺延或另附页。</span>
            <!-- <div style="width: 300px;margin: 20px auto;display: flex;justify-content: space-between;">
                <el-button @click="applyButton" style="width: 120px;margin: 20px auto;"  type="primary">提交活动</el-button>
                <el-button style="width: 120px;margin: 20px auto;" type="primary">下载表单</el-button>
            </div> -->
          </div>
    </div>
    </template>

    <script>

      export default {
        props:['wordData','total'],
        data() {
          return {

            }
        },
        methods: {
          goto(str){
            document.querySelector(str).scrollIntoView({ behavior: "smooth" });
          },
        },

        computed:{   //经费总合

        },
        mounted(){
        }
      };
    </script>

    <style lang="less" scoped>


    #MarkeractivityWord{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffff;
        margin: 0;
        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: 500;
                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;
            }
        }
        .table{
            border: none;
            border-top: solid 1px black;

            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: 80px;
              box-sizing: border-box;
              padding: 5px;
              &:nth-child(1){
                border-left:  solid 1px black;
              }
              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 ;
                &::-webkit-outer-spin-button,&::-webkit-inner-spin-button{
                  -webkit-appearance: none !important;
                }
                &[type='number'] {
                  -moz-appearance: textfield;
                }

                border-radius: 0px;
                text-align: center;
                font-size: 16px;
              }

            }
          }
            .textLeft{
              :deep(.el-textarea__inner){
                // padding: 0;
                border: none ;
                border-radius: 0px;
                text-align: left !important;
                font-size: 16px;
              }
            }
          }
        .notes{
          width: 100%;
          display: flex;
          flex-direction:column;
        }
    }
    .operate{
        right:-85px;
        width:85px;
        height: 50px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        position:absolute;
        .el-button{
          max-width:10px;
          display:flex;
          justify-content:center;
          align-items:center;
          margin-left:10px;
        }
    }
    .jc{
      font-weight: 600;
    }
    </style>