ssti-CollegeManage/src/views/activityManage/components/markeractivityWord.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="one">
              <td colspan="4">关联项目</td>
              <td colspan="12">
                <el-select v-model="wordData['associatedProjects']" @change="getProjectFund()" style="width: 100%;" placeholder="请选择关联项目">
                  <el-option
                    v-for="item in ProjectData"
                    :key="item.courseId"
                    :label="item.title"
                    :value="item.courseId">
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr id="two">
                <td colspan="4">活动名称</td>
                <td colspan="5">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入活动名称"
                        v-model="wordData['activityName']">
                    </el-input>
                </td>
                <td colspan="3">预算经费</td>
                <td @click="goto('#fund')" colspan="4" v-text="total">
                    <!-- <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入预算经费"
                        v-model="total">
                    </el-input> -->
                </td>
            </tr>
            <tr id="three">
                <td colspan="4">项目负责人</td><td colspan="3">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入负责人"
                        v-model="wordData['pro_leader']">
                    </el-input>
                </td><td colspan="2">所在部门</td><td colspan="3">
                    <!-- <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入所在部门"
                        v-model="wordData['college']">
                    </el-input> -->
                    <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">联系电话</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">活动时间</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">参与学生人数</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)" 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">
                <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;">
                    <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;">经费月支出计划 (元)<span style="font-weight: bold;margin-left: 40px;">剩余经费：{{ allFund }}元</span></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']"
                      @change="checkProjectFund('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']"
                      @change="checkProjectFund('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="测试化验加工费"
                      @change="checkProjectFund('processing')"
                      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="项目协作费"
                      @change="checkProjectFund('Collaboration')"
                      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="项目成果鉴定费"
                      @change="checkProjectFund('APPRAISAL')"
                      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="参展参赛费"
                      @change="checkProjectFund('entery')"
                      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="创客交流活动费"
                      @change="checkProjectFund('activities')"
                      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="知识产权事务费"
                      @change="checkProjectFund('Transaction')"
                      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 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 {
            allFund:0,
            myselfFund:0,
            DepartmentData:[],
            ProjectData:[],
            }
        },
        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);
            })
          },
          getProjectData(){//获取未完结的项目
            this.ajax.get(this.$store.state.api+"/GetAllProjectName",{
                uid:this.$store.state.userInfo.userid,
            }).then(res=>{
                this.ProjectData = res.data[0].filter(item=>item.isupload!=3 && item.isupload!=4 );
            }).catch(err=>{
                this.$message.error(err.message)
            })
          },
          checkProjectFund(index){
            if(this.wordData['associatedProjects']==''){
              for(let i in this.wordData['fund'])this.wordData['fund'][i]='';
              return this.$message.error("请先选择关联项目");
            }
            // if(this.myselfFund>this.total){
            //   this.allFund+=this.myselfFund - this.total;
            // }
            if(this.total>this.allFund){
              this.wordData['fund'][index]=0;
              return this.$message.error("活动总经费不能超过项目剩余总预算")
            }
          },
          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;
            }
          },
          // checkProjectMoney(){
          //   // if(!this.wordData['acId']){
          //   //   this.wordData['expenditureMothPlan'] = ['','','','','','','','','','','',''];
          //   //   this.wordData['fund'] = {
          //   //     total:0,
          //   //     device:"",
          //   //     Material:"",
          //   //     processing:"",
          //   //     Collaboration:"",
          //   //     APPRAISAL:"",
          //   //     entery:"",
          //   //     activities:"",
          //   //     Transaction:"",
          //   //   }
          //   // };
          //   this.getProjectFund();

          // },
          getProjectFund(){
            if(this.wordData['associatedProjects']=='')return;
            this.ajax.get(this.$store.state.api+"/getProjectFund",{
              uid:this.$store.state.userInfo.userid,
              pid:this.wordData['associatedProjects'],
            }).then(result=>{
              console.log(result)
              let total = Number(result['data'][0][0]['fund']);
              let isUse = 0;
              let myFund = 0;
              result['data'][1].forEach(item=>isUse+=Number(item['money']))
              this.allFund = total - isUse;
              if(this.wordData['acId']){
                result['data'][1].forEach(item=>item['acId']==this.wordData['acId']?myFund+=Number(item['money']):"");
                this.myselfFund = myFund;

              }
              if(this.total>this.allFund+this.myselfFund){
                this.wordData['expenditureMothPlan'] = ['','','','','','','','','','','',''];
                  this.wordData['fund'] = {
                    total:0,
                    device:"",
                    Material:"",
                    processing:"",
                    Collaboration:"",
                    APPRAISAL:"",
                    entery:"",
                    activities:"",
                    Transaction:"",
                  }
                  this.$message.error("活动总经费不能超过项目剩余总预算")
              }
            }).catch(err=>{
              console.log(err)
            })
          },
          goto(str){
            document.querySelector(str).scrollIntoView({ behavior: "smooth" });
          },
        },
        
        computed:{   //经费总合

        },
        mounted(){
          this.getProjectDepartmentData();
          this.getProjectData();
          this.getProjectFund();
        }
      };
    </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;
              &: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;
        }
    }
    </style>