ssti-CollegeManage/src/views/activityManage/components/NomMarkerWord.vue

<template>
    <div id="MarkeractivityWord">
        <div id="title">
            <div class="school">深圳技师学院</div>
            <div class="wordTitle">创客专项资金及项目申请表（个人创客）</div>
            <div class="date">申请日期：{{wordData.applicationDate}}</div>
        </div>
        <table border="1" cellspacing="0" class="table">
            <tr id="two">
                <td colspan="4" class="bold"><span style="color:red">*</span>活动名称</td>
                <td colspan="5">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入活动名称"
                        v-model="wordData['activityName']">
                    </el-input>
                </td>
                <td colspan="3" class="bold">预算经费</td>
                <td @click="goto('#fund')" colspan="4" v-text="total">
                </td>
            </tr>
            <tr id="three">
                <td colspan="4" class="bold"><span style="color:red">*</span>项目负责人</td><td colspan="3">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入负责人"
                        v-model="wordData['pro_leader']">
                    </el-input>
                </td><td colspan="2" class="bold"><span style="color:red">*</span>所在部门</td><td colspan="3">
                    <el-select v-model="wordData['college']" style="width: 100%;" placeholder="请选择所在学院">
                      <el-option
                        v-for="item in DepartmentData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </td><td colspan="2" class="bold"><span style="color:red">*</span>联系电话</td><td colspan="3">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入联系电话"
                        v-model="wordData['tel']">
                    </el-input>
                </td>
            </tr>
            <tr id="four">
                <td colspan="4" class="bold"><span style="color:red">*</span>活动时间</td>
                <td colspan="5">
                  <el-date-picker
                    v-model="wordData['activityTime']"
                    type="daterange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    prefix-icon="none"
                    start-placeholder="项目起始时间"
                    end-placeholder="项目完成时间">
                  </el-date-picker>
                </td>
                <td colspan="3" class="bold">参与学生人数</td><td colspan="5">
                    <el-input
                        type="number"
                        autosize
                        :min="0"
                        style="width: 100%;"
                        resize="none"
                        placeholder="请输入参与学生人数"
                        v-model.number="wordData['student']">
                      </el-input>
                </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;">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入姓名"
                        v-model="item['name']">
                    </el-input>
                </td><td colspan="3">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入工作单位/部门"
                        v-model="item['collage']">
                    </el-input>
                </td><td colspan="10">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入项目分工"
                        v-model="item['work']">
                    </el-input>
                </td>
                <div class="operate">
                  <el-button @click="addPerson" v-if="wordData['member'].length-1==index" type="primary" size="mini">添加</el-button>
                  <el-button @click="DelPerson(index)" v-if="wordData['member'].length>1" type="primary" size="mini">删除</el-button>
                </div>
            </tr>
            <tr class="textLeft" id="six">
                <td colspan="2"><p>活动</p><br> <p>计划</p></td><td style="text-align: left;" colspan="15">
                    <el-input
                      type="textarea"
                      :rows="12"
                      style="width: 100%;"
                      resize="none"
                      v-model="wordData['activityPlan']">
                    </el-input>
                </td>
            </tr>
            <tr class="textLeft" id="seven">
                <td colspan="2"><p>预期</p><br><p>目标</p> </td><td colspan="15" style="text-align: left;">
                    <el-input
                      type="textarea"
                      :rows="10"
                      style="width: 100%;"
                      resize="none"
                      v-model="wordData['expectations']">
                    </el-input>
                </td>
            </tr>
            <tr class="textLeft" id="nine">
                <td colspan="2"><p>活动受</p><br> <p>众面</p></td><td style="text-align: left;" colspan="15">
                    <p>参与学生范围：</p>
                    <el-input
                      type="textarea"
                      :rows="12"
                      style="width: 100%;"
                      resize="none"
                      v-model="wordData['eventAudience']">
                    </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;">
                    <el-input
                      type="textarea"
                      :rows="10"
                      style="width: 100%;"
                      resize="none"
                      v-model="wordData['fundingPlan']">
                    </el-input>
                </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;">
                  <el-input
                    type="number"
                    autosize
                    min="0"
                    style="width: 100%;"
                    resize="none"
                    v-model.number="wordData['expenditureMothPlan'][index]"
                    @input="checkExpenditureMothPlan(index)">
                  </el-input>
                </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">
                <el-input
                      type="number"
                      autosize
                      resize="none"
                      placeholder="小型仪器设备费"
                      v-model.number="wordData['fund']['device']"
                      ></el-input>
              </td>
              <td colspan="5">
                项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。
              </td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">材料费</td>
              <td colspan="2">
                <el-input
                      type="number"
                      autosize
                      resize="none"
                      placeholder="材料费"
                      v-model.number="wordData['fund']['Material']"></el-input>
              </td>
              <td colspan="5">项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">测试化验加工费</td>
              <td colspan="2">
                <el-input
                      type="number"
                      autosize
                      resize="none"
                      placeholder="测试化验加工费"
                      v-model.number="wordData['fund']['processing']"></el-input>
              </td>
              <td colspan="5">项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">项目协作费</td>
              <td colspan="2">
                <el-input
                      type="number"
                      autosize
                      resize="none"
                      placeholder="项目协作费"
                      v-model.number="wordData['fund']['Collaboration']"></el-input>
              </td>
              <td colspan="5">按合同规定支付给协作单位的费用</td>
            </tr>
            <tr>
              <td rowspan="4" colspan="4" style="border-left: none;">间接经费</td>
              <td colspan="4">项目成果鉴定费</td>
              <td colspan="2">
                <el-input
                      type="number"
                      autosize
                      resize="none"
                      placeholder="项目成果鉴定费"
                      v-model.number="wordData['fund']['APPRAISAL']"></el-input>
              </td>
              <td colspan="5">学术会务费、评审费、鉴定费、成果集制作费等费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">参展参赛费</td>
              <td colspan="2">
                <el-input
                      type="number"
                      autosize
                      resize="none"
                      placeholder="参展参赛费"
                      v-model.number="wordData['fund']['entery']"></el-input>
              </td>
              <td colspan="5">参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">创客交流活动费</td>
              <td colspan="2">
                <el-input
                      type="number"
                      autosize
                      resize="none"
                      placeholder="创客交流活动费"
                      v-model.number="wordData['fund']['activities']"></el-input>
              </td>
              <td colspan="5">创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。</td>
            </tr>
            <tr>
              <td colspan="4" style="border-left: none;">知识产权事务费</td>
              <td colspan="2">
                <el-input
                      type="number"
                      autosize
                      resize="none"
                      placeholder="知识产权事务费"
                      v-model.number="wordData['fund']['Transaction']">
                    </el-input>
              </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>
    </div>
    </template>
      
    <script>
    
      export default {
        props:['wordData','total'],
        data() {
          return {
            allFund:0,
            DepartmentData:[],
            }
        },
        methods: {
          getText(value) {     //电话验证
              let verify = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/; //获取正则表达式 存放到verify变量中
              let result = verify.test(value.trim()); //判断输入框内容是否符合 正则表达式
              if(!result) return this.$message.error('请输入正确联系号码格式')
          },
          addPerson(){   //添加老师
            this.wordData['member'].push({name:"",collage:"",work:""});
          },
          DelPerson(index){   //删除老师
            this.wordData['member'].splice(index,1)
          },
          getProjectDepartmentData(){  //获取项目立项申请基础信息页面所在部门数据
            this.ajax.get(this.$store.state.api+'/SelectAllDepartment',{
              uid:this.$store.state.userInfo.userid
            }).then(res=>{
              this.DepartmentData = res.data[0]
            },err=>{
              console.log(err);
            })
          },
          checkExpenditureMothPlan(index){
            let count = 0;
            this.wordData['expenditureMothPlan'].forEach(item=>count+=Number(item))
            if(count>this.total){
              this.$message.error("总经费月支出计划不能大于总经费");
              this.wordData['expenditureMothPlan'][index]=0;
            }
          },
          goto(str){
            document.querySelector(str).scrollIntoView({ behavior: "smooth" });
          },
        },
        
        computed:{   //经费总合

        },
        mounted(){
          this.getProjectDepartmentData();
        }
      };
    </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;
              .bold{
                font-weight: 600;
              }
              td{
                border: none;
                border-bottom: solid 1px black;
                border-right: solid 1px black;
                height: 50px;
                text-align: center;
                line-height: 30px;
                width: 80px;
                &:nth-child(1){
                  border-left:  solid 1px black;
                }
              
                p{
                  font-weight: 600;
                }
                :deep(.el-select .el-input .el-select__caret){
                  display: none;
                  font-family:Arial,"Microsoft Yahe","微软雅黑";
                }
                :deep(.el-textarea__inner){
                  // padding: 0;
                  border: none ;
                  border-radius: 0px;
                  text-align: center;
                  font-size: 16px;
                  font-family:Arial,"Microsoft Yahe","微软雅黑";
                }
                :deep(.el-input__inner){
                  border: none ;
                  font-family:Arial,"Microsoft Yahe","微软雅黑";
                  &::-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;
        }
    }
    </style>