ssti-CollegeManage/src/components/markerFundWord.vue

<template>
    <div id="MakerSpaceWord">
        <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>
                <td colspan="4">项目名称</td><td colspan="13">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入项目名称"
                        v-model="wordData['projectName']">
                    </el-input>
                </td>
            </tr>
            <tr>
                <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-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>
                    <!-- <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入所在部门"
                        v-model="input">
                    </el-input> -->
                </td><td colspan="2">联系电话</td><td colspan="3">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入联系电话"
                        v-model="input">
                    </el-input>
                </td>
            </tr>
            <tr>
                <td colspan="4">项目起始时间</td>
                <td colspan="5">
                  <el-date-picker
                    v-model="wordData.endTime"
                    type="date"
                    placeholder="请选择项目计划完成时间"
                    prefix-icon="none"
                    value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </td>
                <td colspan="3">计划完成时间</td><td colspan="5">
                  <el-date-picker
                    v-model="wordData.endTime"
                    type="date"
                    placeholder="请选择活动时间"
                    prefix-icon="none"
                    value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </td>
            </tr>
            <tr>
                <td colspan="4">项目组人数</td><td colspan="2" v-text="wordData['member'].length"></td>
                <td colspan="3">参与学生人数</td><td colspan="2">
                  <el-input
                    type="number"
                    placeholder="请输入学生人数"
                    v-model="wordData['student']">
                  </el-input>
                </td>
                <td colspan="3">预算总经费</td><td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="2" :rowspan="wordData['member'].length+1"><p>项</p> <p>目</p> <p>组</p> <p>成</p> <p>员</p></td><td colspan="2">姓名</td><td colspan="3">工作单位/部门</td><td colspan="10">项目分工</td>
            </tr>
            <tr v-for="(item,index) in wordData.member" :key="index">
                <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 v-if="wordData['member'].length-1==index" @click="addPerson" type="primary" size="mini">+</el-button>
                  <el-button @click="DelPerson(index)" type="primary" size="mini">-</el-button>
                </div>
            </tr>
            <tr class="textLeft">
                <td colspan="2" rowspan="2"><p>项目</p><br> <p>内容</p></td><td style="text-align: left;" colspan="15">
                    <p>一、项目简介</p>
                    <el-input
                      type="textarea"
                      :rows="6"
                      style="width: 100%;"
                      resize="none"
                      v-model="wordData['brief']">
                    </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="wordData['innovate']">
                    </el-input>
                </td>
            </tr>
            <tr class="textLeft">
                <td colspan="2" rowspan="3"><p>预期</p><br><p>取得</p> <br><p>成果</p></td><td colspan="15" style="text-align: left;">
                  <p>一、项目预期成果、数量及形式</p>
                    <el-input
                      type="textarea"
                      :rows="6"
                      style="width: 100%;"
                      resize="none"
                      v-model="wordData['expected']">
                    </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="wordData['culture']">
                    </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="wordData['incubate']">
                    </el-input>
                  </td>
            </tr>
            <tr class="textLeft">
                <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['ImplementationPlan']">
                    </el-input>
                </td>
            </tr>
            <tr>
                <td rowspan="11"><p>预</p> <p>算</p> <p>经</p> <p>费</p></td>
            </tr>
            <tr>
                <td rowspan="4" style="border-left: none;">总经费</td><td rowspan="4" colspan="2" >元</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 12" :key="index+'a'" style="border-left: none;">
                  <el-input
                    type="number"
                    autosize
                    style="width: 100%;"
                    resize="none"
                    v-model="input">
                  </el-input>
                </td>
            </tr>
            <tr>
                <td colspan="4" style="border-left: none;">支出类别</td><td colspan="5">支出项目</td><td colspan="4">金额（元）</td><td colspan="2">备注</td>
            </tr>
            <tr v-for="(item,index) in wordData.member" :key="index">
                <td colspan="4" style="border-left: none;">
                  <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入支出类别"
                        v-model="input">
                    </el-input>
                  </td><td colspan="5">
                    <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="请输入支出项目"
                        v-model="input">
                    </el-input>
                    </td><td colspan="4">
                      <el-input
                        type="number"
                        autosize
                        style="width: 100%;"
                        resize="none"
                        placeholder="请输入金额"
                        v-model="input">
                      </el-input>
                    </td><td colspan="2">
                      <el-input
                        type="textarea"
                        autosize
                        resize="none"
                        placeholder="备注"
                        v-model="input">
                    </el-input>
                    </td>
            </tr>


            <tr>
                <td><p>所在部</p> <p>门意见</p></td><td colspan="15">
                  <el-input
                      type="textarea"
                      :rows="10"
                      style="width: 100%;"
                      resize="none"
                      v-model="input">
                    </el-input>
                    <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><p>主管部</p> <p>门审核</p><p>意见</p></td><td colspan="15">
                  <el-input
                      type="textarea"
                      :rows="10"
                      style="width: 100%;"
                      resize="none"
                      v-model="input">
                    </el-input>
                    <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>1、支出类别分为直接费用（小型仪器设备费、材料费、测试化验加工费、项目协作费）和间
接费用（项目成果鉴定费、参展参赛费、创客交流活动费、知识产权事务费）。</span>
            <span>2、如表格不够可顺延或另附页。</span>
            <div style="width: 300px;margin: 20px auto;display: flex;justify-content: space-between;">
                <el-button 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>
    import {getNowDate} from '@/components/tool/Date.js'
    
      export default {
        // props:['data'],
        data() {
          return {
            // teacher:[],
            // student:[],
            allFund:'',
            input:"",
            DepartmentData:[],
    
            wordData:{
              applicationDate:getNowDate(1),//申请日期
              projectName:'',//项目名称
              pro_leader:"",//项目负责人
              college: '',//所在学院
              tel:'',//联系电话
              beginTime:'',//项目起始时间
              endTime:'',//计划完成时间
              student:"",//学生人数
              member:[
                {name:"",collage:"",work:""},
                {name:"",collage:"",work:""},
                {name:"",collage:"",work:""},
                {name:"",collage:"",work:""},
                {name:"",collage:"",work:""},
              ],
              brief:"",//项目简介
              innovate:"",//创新点
              expected:"",//项目预期成果、数量及形式
              culture:"",//创客人才培养预期成果、数量
              incubate:"",//项目预期孵化、转化创业项目情况
              ImplementationPlan:"",//项目实施计划
              fund:{
                device:"",
                Material:"",
                processing:"",
                Collaboration:"",
                APPRAISAL:"",
                entery:"",
                activities:"",
                Transaction:"",
              },//预算经费
            }
            //total：总经费     
            //小型仪器设备费：device        deviceRemarks
            //材料费：Material             MaterialRemarks
            //测试化验加工费：processing    processingRemarks
            //项目协作费：Collaboration     CollaborationRemarks
            //项目成果鉴定费：APPRAISAL     APPRAISALRemarks
            //参展参赛费：entery            enteryRemarks
            //创客交流活动费：activities    activitiesRemarks
            //知识产权事务费：Transaction   TransactionRemarks
            }
        },
        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);
            })
          },
          submitWord(){
            const cEmpty = /^\s*$/g;
            for (let i in this.wordData){
              // console.log(this.wordData[i],i);
              switch(i){
                case 'projectName':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请输入项目名称')
                      // this.$refs.projectName.style.background='rgb(236, 141, 141)'
                      // setTimeout(() => {
                      //   this.$refs.projectName.style.background='#ffffff'
                      // }, 2000);
                      document.querySelector('#projectName').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                  break;
                case 'radio':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请选择项目分组')
                      document.querySelector('#radio').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                  break;
                case 'checkList':
                    if (this.wordData[i].length==0) {
                      this.$message.error('优先支持项目')
                      document.querySelector('#checkList').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                break;
                case 'schoolRadio':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请选择美丽校园改造项目')
                      document.querySelector('#schoolRadio').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                break;
                case 'applyParsonRadio':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请选择项目申请人')
                      document.querySelector('#applyParsonRadio').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                break;
                case 'applyParsonName':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请填写申请人姓名')
                      document.querySelector('#applyParsonName').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                break;
                case 'college':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请选择所在学院')
                      document.querySelector('#applyParsonName').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                break;
                case 'tel':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请填写联系方式')
                      document.querySelector('#applyParsonName').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                break;
                case 'beginTime':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请选择项目起始时间')
                      document.querySelector('#beginTime').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                break;
                case 'endTime':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请选择计划完成时间')
                      document.querySelector('#beginTime').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                break;
                case 'studentS':
                    // if(this.wordData[i].length<5){
                    //   this.$message.error('学生团队应5人以上')
                    //   document.querySelector('#studentS').scrollIntoView({ behavior: "smooth" });
                    //   return false;
                    // }else{
                      let snum = 0;
                      this.wordData[i].forEach(item=>{
                        for(let j in item){
                          if(cEmpty.test(item[j])){
                            snum++;
                          }
                        }
                      })
                      if(snum>0){
                        this.$message.error("请填完学生信息");
                        document.querySelector('#studentS').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                    // }
                break;
                case 'teacherS':
                      let num = 0;
                      this.wordData[i].forEach(item=>{
                        for(let j in item){
                          if(cEmpty.test(item[j])){
                            num++;
                          }
                        }
                      })
                      if(num>0){
                        this.$message.error("请填完老师信息");
                        document.querySelector('#teacherS').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                break;
                case 'brief':
                    if (cEmpty.test(this.wordData[i])) {
                      this.$message.error('请填写项目简介')
                      // this.$refs.brief.style.background='rgb(236, 141, 141)'
                      // setTimeout(() => {
                      //   this.$refs.brief.style.background='#ffffff'
                      // }, 2000);
                      document.querySelector('#brief').scrollIntoView({ behavior: "smooth" });
                      return false
                    }
                break;
                case 'fund':
                    let mon=this.wordData.fund.facility*1 + this.wordData.fund.materials*1+this.wordData.fund.process*1+ this.input*1+this.wordData.fund.authenticate*1+ this.wordData.fund.match*1+this.wordData.fund.activity*1+this.wordData.fund.affair*1
                    if(mon==0){
                      document.querySelector('#fund').scrollIntoView({ behavior: "smooth" });
                      return this.$message.error('请输入经费')
                    }
                break;
              }
            }
          //   let param={
          //     projectName
          //   }
          //   this.ajax
          //     .post(this.$store.state.api+'/SelectAllType',param)
          //     .then(err,res)
          },
          
        },
        computed:{   //经费总合
          reversedMessage: function () {
            return (this.wordData.fund.facility*1 + this.wordData.fund.materials*1+this.wordData.fund.process*1+ this.input*1+this.wordData.fund.authenticate*1+ this.wordData.fund.match*1+this.wordData.fund.activity*1+this.wordData.fund.affair*1)/10000
          }
        },
        mounted(){
          this.getProjectDepartmentData()
        }
      };
    </script>
      
    <style lang="less" scope>
            .textLeft{
              .el-textarea__inner{
                // padding: 0;
                border: none ;
                border-radius: 0px;
                text-align: left !important;
                font-size: 16px;
              }
            }
          .table{
            border: none;
            border-top: solid 1px black;
            // border-right:  solid 1px black;
            // border-left:  solid 1px black;

          tr{
            position: relative;
            td{
              border: none;
              border-bottom: solid 1px black;
              // border-left: 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;
              }
              .el-select .el-input .el-select__caret{
                display: none;
              }
              .el-textarea__inner{
                // padding: 0;
                border: none ;
                border-radius: 0px;
                text-align: center;
                font-size: 16px;
              }
              .el-input__inner{
                border: none ;
                border-radius: 0px;
                text-align: center;
                font-size: 16px;
              }
            }
          }
          }
            
          .twoCol{
            column-span: 2;
          }
          .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里面添加此段代码即可
     
              input::-webkit-outer-spin-button,
                  input::-webkit-inner-spin-button {
                  -webkit-appearance: none;
              }
              input[type="number"]{
                  -moz-appearance: textfield;
              }
    
    #MakerSpaceWord{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffff;
        margin: 0;
        padding: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;
            }
        }
      .notes{
        width: 100%;
        display: flex;
        flex-direction:column;
      }
    
    </style>