ssti-CollegeManage/src/views/activityManage/makerActvity.vue

<template>
  <!--创客活动 -->
  <div class="makerActvity">
    <div class="pAHeader">
      <div class="pAHeader1">创客活动</div>
      <el-button @click="makerActvityApply">创客活动申请</el-button>
    </div>
    <hr>

<!-- 搜索框开始 -->
    <div class="selects">
      <div class="selectsBlock">
        <div class="selectLabel">项目筛选</div>
        <el-select v-model="pavalues.value" placeholder="我的项目">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">部门</div>
        <el-select v-model="pavalues.value1" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">分类</div>
        <el-select v-model="pavalues.value2" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">负责人</div>
        <el-select v-model="pavalues.value3" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

    </div>
<!-- 搜索框结束 -->

<!-- 表格开始 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
        
        <el-table-column
          prop="projectName"
          label="活动名称"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="projectPerson"
          label="负责人"
          align="center"
          min-width="7%">
        </el-table-column>
        <el-table-column
          prop="relevancy"
          align="center"
          label="关联项目"
          min-width="9%">
        </el-table-column>
        <el-table-column
          prop="budget"
          align="center"
          label="预算经费"
          min-width="8%">
        </el-table-column>
        <el-table-column
          prop="useBudget"
          align="center"
          label="实际使用(元)"
          min-width="8%">
        </el-table-column>
        <el-table-column
          prop="dept"
          align="center"
          label="所在部门"
          min-width="8%">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center"
          min-width="7%">
          <template #default="scope">
                <!-- {{scope.row.name + (scope.row.status==0?"":"(已屏蔽)")}} -->
                {{status?"未报销":"已报销"}}
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          align="center"
          label="活动时间"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="operation"
          width="350"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                  <!-- <el-button type="primary" > -->
                        <el-button type="primary"  @click="MADetails" size="mini">查看详情</el-button>
                        <el-button type="primary"  @click="audi" size="mini">审核</el-button>
                        <el-button type="primary"  size="mini" @click="edit(scope)">申请表</el-button>
                        <el-button type="primary"  size="mini" @click="end" >完结</el-button>
                  <!-- </el-button> -->
              </div>
          </template>
        </el-table-column>
      </el-table>
<!-- 表格结束 -->





      <!-- 活动审核对话框开始 -->
      <el-dialog
          title="活动审核"
          :visible.sync="auditDialog"
          class="dialogWidth"
          :before-close="init">
        
          <div class="diaTit">
              <div class="spans">项目名称</div>
              <div class="spanCon">:人工智能分链机器</div>
              <div class="spans" style="margin-left: 30px;">项目负责人</div>
              <div class="spanCon">:徐晓霞</div>
          </div>

            <div class="diaTit1">
              <div class="spans1">所在部门</div>
              <div>
                <el-input v-model="input" placeholder="信通学院"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">预算总经费</div>
              <div>
                <el-input v-model="input" placeholder="6000"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">联系电话</div>
              <div>
                <el-input v-model="input" placeholder="13854449525"></el-input>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="commit" class="diaBtn">确认提交</el-button>
              <el-button @click="init" class="diaBtn">取消</el-button>
            </div>
      </el-dialog>
      <!-- 活动审核对话框结束 -->

      <!-- 驳回提交对话框开始 -->
      <el-dialog
          title="驳回提交"
          :visible.sync="rejectDialog"
          class="dialogWidth"
          width="700px"
          :before-close="init">
        
          <div class="diaTit">
              <div class="spans">项目名称</div>
              <div class="spanCon">:人工智能分链机器</div>
              <div class="spans" style="margin-left: 30px;">项目负责人</div>
              <div class="spanCon">:徐晓霞</div>
          </div>

            <div class="diaTit1">
              <div class="spans1">所在部门</div>
              <div>
                <el-input v-model="input" placeholder="信通学院"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">预算总经费</div>
              <div>
                <el-input v-model="input" placeholder="6000"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">联系电话</div>
              <div>
                <el-input v-model="input" placeholder="13854449525"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1" style="position: relative;top:-23px">撤回意见</div>
              <div>
                <el-input
                  type="textarea"
                  :rows="4"
                  style="width:200px"
                  resize="none"
                  placeholder="请输入内容"
                  v-model="textarea">
                </el-input>
              </div>
            </div>


            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="commit2" class="diaBtn">确认提交</el-button>
              <el-button @click="init" class="diaBtn">取消</el-button>
            </div>
      </el-dialog>
      <!-- 驳回提交对话框结束 -->

    <!-- 完结对话框开始 -->
    <el-dialog
      title="提示"
      :visible.sync="endDialog"
      width="600px"
      class="endDialog"
      :before-close="init">
      <div class="addDialogLogo">LOGO</div>
      <div class="deleteContent">"智能分链机器公开赛"项目活动，是否确定完结？</div>
      <div class="deleteContent1">上次活动完结报告</div>
      <div class="download">
        <div>智能分链机器公开赛.pdf 点击下载</div>
      </div>
      <div class="addMoneyBtn" style="margin-left: 0;">
          <div class="jia">+</div>添加
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ending" class="diaBtn" style="background: #0e72e6;color: #fff;" size="mini">确认提交</el-button>
        <el-button @click="init" class="diaBtn" style="background:#cccccc" size="mini">取消</el-button>
      </div>
    </el-dialog>
    <!-- 完结对话框结束 -->


  </div>
</template>

<script>
    export default {
      data() {
        return {
          status:1,
          textarea:'',
          input:'',
          endDialog:false,  //完结对话框
          auditDialog:false,   //审核对话框
          rejectDialog:false,   //驳回对话框

          options:[],
          options1:[],
          options2:[],
          options3:[],
          options4:[],
          // 表格数据
          tableData:[{
            projectName:'陆地游泳辅助器',
            projectPerson:'王多鱼',
            relevancy:'西虹市',
            budget:'200',
            useBudget:'10000',
            date:'2022年-11月-12日',
            tel:'16625153432',
            state:'已报销',
            dept:'中德制造'
          },
          ],
          // 四个下拉框数据
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
          }
        }
      },
      methods:{


        init(){//重置
          this.auditDialog=false;
          this.endDialog=false;
          this.rejectDialog=false;
        },
        
        commit(){  // 活动审核对话框确定
          this.auditDialog=false;
          this.status--
          console.log(this.status);
        },

        // 驳回对话框确定
        commit2(){
          this.rejectDialog=false;
          this.status++
          console.log(this.status);
        },

        end(){//完结按钮
          this.endDialog=true;
        },
        ending(){   //完结提交
          this.endDialog=false;
        },
        
        edit(){ // 申请表按钮

        },
             
        audi(){  // 审核按钮
          if(this.status){
            this.auditDialog=true;
            return
          }else{
            this.rejectDialog=true;
          }
        },
        
        makerActvityApply(){  // 创客活动申请按钮
          this.$router.push('/makerActvityApplyMain')
        },
   
        MADetails(){   // 查看详情
          this.$router.push('/makerActvityDetails')
        },
 
      }

    }
</script>

<style lang="less">
.makerActvity{



  .dialogWidth{
      .el-input__inner{
        width: 300px;
      }
      .el-textarea__inner{
        width: 380px;
      }
      .el-dialog{
          width: 600px;
          border-radius: 5px;
          overflow: hidden;
        }
        .el-dialog__body{
          padding:30px 0px 30px 90px ;
        }
        
        .el-dialog__header{
          background: #32455b;
        }
        .el-dialog__title{
          color: #fff;
          position: relative;
          top: -5px;
          font-size: 18px;
        }

        .diaTit{     //dialog项目名称、负责人
            width: 100%;
            display: flex;
            .spans{
              width: 84px;
              font-size: 16px;
              margin-right: 10px;
              display: inline-block;
              text-align: justify;
              color: #000;
              font-size: 16px;
              text-justify:distribute-all-lines;
              text-align-last: justify;
              transform: translate(0,22%);
              margin-bottom: 10px;
            }
            
        }
        .spanCon{
              font-size: 16px;
              margin-top: 5px;
              color: #a0a0a0;
            }
        .spans1{      //label
              min-width: 84px;
              font-size: 16px;
              color: #000;
              margin-right: 10px;
              display: inline-block;
              text-align: justify;
              text-justify:distribute-all-lines;
              text-align-last: justify;
              transform: translate(0,22%);
            }
          
          .diaTit1{   //label和input框
            display: flex;
            width: 80%;
            margin-top: 20px;
            
          }
          
        
  }

        .dialog-footer{
            width: 100%;
            display: flex;
            justify-content: center;
            .diaBtn{
              font-size: 16px;
            }
        }

  .endDialog{  //完结对话框的
    .el-dialog__header{
    background: #32455b;
    }
    .el-dialog__title{
      color:rgb(246, 247, 246);
    }
    .el-dialog{
          width: 600px;
          border-radius: 5px;
          overflow: hidden;
        }
    .deleteContent{
      width: 100%;
      font-size: 22px;
      color: #000;
      box-sizing: border-box;
      padding: 0 20px;
    }
    .deleteContent1{
      width: 100%;
      text-align: left;
      font-size: 18px;
      font-weight: bold;
      color: #000;
      margin-top: 30px;
    }
    .download{
      margin: 50px 0 20px;
      width: 100%;
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      color: #5391fd;
    }

    .addDialogLogo{
      width: 60px;
      height: 30px;
      line-height: 30px;
      background: #f2f2f2;
      position: absolute;
      left: 10px;
      top: 10px;
      text-align: center;
    }
  }
}
</style>