ssti-CollegeManage/src/views/projectApplication.vue

<template>
  <div class="projectApplication">
    <div class="pAHeader">
      <div class="pAHeader1">项目立项申请</div>
      <el-button  style="font-size: 16px;" @click="apply">项目立项申请</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>z
        </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 class="selectsBlock">
        <div class="selectLabel">状态</div>
        <el-select v-model="pavalues.value4" placeholder="请选择">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
<!-- 搜索框结束 -->
<!-- 表格开始 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        @selection-change="handleSelectionChange">

        <el-table-column
          type="selection"
          >
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          min-width="8%">
        </el-table-column>
        <el-table-column
          prop="projectPerson"
          label="项目负责人"
          min-width="9%">
        </el-table-column>
        <el-table-column
          prop="dept"
          label="所在部门"
          min-width="6%">
        </el-table-column>
        <el-table-column
          prop="budget"
          label="预算"
          min-width="6%">
        </el-table-column>
        <el-table-column
          prop="date"
          label="开始时间"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="联系电话"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          min-width="6%">
          <!-- <template #default="scope"> -->
                <div>
                    <!-- {{scope.row.name + (scope.row.status==0?"":"(已屏蔽)")}} -->
                    {{ status==-1?"未审核" :status ? "已审核" : "撤回中"  }}
                </div>
            <!-- </template> -->
        </el-table-column>
        <el-table-column
          prop="operation"
          width="350"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                  <!-- <el-button type="primary" > -->
                    <!-- <el-link class="btt" type="primary" :underline="false"> -->
                        <el-button type="primary"  size="mini" @click="paApply">查看详情</el-button>
                        <el-button type="primary"  size="mini" @click="audit">{{(status==-1?"审核": status?"撤回":"审核")}}</el-button>
                        <el-button type="primary"  size="mini" @click="edit(scope)" >申请表</el-button>
                        <el-button type="primary"  size="mini">删除</el-button>
                      <!-- </el-link> -->
                  <!-- </el-button> -->
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- 表格结束 -->

<!-- 立项撤回对话框开始 -->
      <el-dialog
        title="立项撤回提交"
        :visible.sync="dialogVisible1"
        :modal="false"
        width="700px"
        :close-on-click-modal="true"
        class="dialogWidth"
        :before-close="init">
        <div class="diaTit">
              <div class="spans">项目名称:</div>
              <div class="spanCon">人工智能分链机器</div>
              <div class="spans" style="margin-left: 50px;">项目负责人:</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">撤回意见</div>
            <div>
              <el-input
                type="textarea"
                :rows="4"
                resize="none"
                placeholder="请输入内容"
                v-model="textarea">
              </el-input>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="commit2" class="diaBtn" style="background: #0e72e6;color: #fff;" size="small">确认提交</el-button>
            <el-button @click="cancel2" class="diaBtn" style="background: #cccccc;color: #000;" size="small">取消</el-button>
          </div>
      </el-dialog>
<!-- 立项撤回对话框开始 -->

<!-- 立项审核对话框开始 -->
      <el-dialog
          title="立项审核"
          :visible.sync="dialogVisible"
          :modal="false"
          class="dialogWidth"
          :close-on-click-modal="true"
          :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 @click="commit" class="diaBtn" style="background: #0e72e6;color: #fff;" size="small">确认提交</el-button>
              <el-button @click="cancel" class="diaBtn" style="background: #cccccc;color: #000;" size="small">取消</el-button>
            </div>
      </el-dialog>
<!-- 立项审核对话框结束 -->

  </div>
</template>

<script>
    export default {
      data() {
        return {
          textarea:'',
          input:'',
          status:-1,
          dialogVisible:false,//立项审核
          dialogVisible1:false,//立项撤回提交
          options:[],//项目筛选
          options1:[],//部门
          options2:[],//分类
          options3:[],//负责人
          options4:[],//状态
          tableData:[{
            projectName:'陆地游泳辅助器',
            projectPerson:'王多鱼',
            dept:'西虹市',
            budget:'200万',
            date:'2022年11月12日',
            tel:'16625153432',
            state:'已审核',
          },
          ],
          // 头部搜索框的内容
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
            value4:'',
          }
        }
      },
      methods:{
        getAccountListByPage(){
                // this.loading=true;
                // let value = this.value;
                // this.ajax
                //     .get('/page')
                //     .then(res=>{
                //       this.loading=false
                //         let data=res.data;
                //         this.getAccountListByPage();
                //         this.tableData = data;
                //         })
                //         .catch(err => {
                //             console.log(err);
                //         });
                },          
        init(){
          this.dialogVisible=false;
          this.dialogVisible1=false;
        },
        audit(){
          if(this.status==-1){
            this.dialogVisible=true;
            return
          }else if(this.status){
            this.dialogVisible1=true;
            return
          }else{
            this.dialogVisible=true;
          }
        },
        edit(){
          
        },
        commit(){
          this.dialogVisible=false;
          this.status=1
          console.log(this.status);
        },
        cancel(){
          this.dialogVisible=false;
        },
        commit2(){
          this.dialogVisible1=false;
          this.status--
          console.log(this.status);
        },
        cancel2(){
          this.dialogVisible1=false;
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        paApply(){
          this.$router.push('/projectApplicationDetails')
        },
        apply(){
          this.$router.push('/projectApplicationApplyMain')
        },
        // 获取下拉框数据
        getDate(){
        //   this.ajax    
        //     .get('/getCreationSelect')
        //       .then(res=>{
        //         const p=res.data
        //         console.log(p);
        //         this.options=p[0]
        //         this.options1=p[0]
        //         this.options2=p[0]
        //         this.options3=p[0]
        //         this.options4=p[0]
        //       },err=>{
        //         console.log(err);
        //       })  
        },

      },
      watch:{
          value:{
            handler(){
              immediate:true
              deep:true
              this.getAccountListByPage()
            }
          }
      },
      mounted(){
        this.getDate()
      }

    }
</script>

<style lang="less">
.projectApplication{

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

        .diaTit{     //项目名称、负责人
            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{
              width: 180px;
              height: 35px;
              line-height: 5px;
              font-size: 16px;
            }
        }
  }
  
}

</style>