ssti-CollegeManage/src/views/projectSettlement.vue

<template>
  <div class="projectSettlement">
    <div class="pAHeader">
      <div class="pAHeader1">项目结项</div>
    </div>
    <hr>
    <!-- 搜索栏开始 -->
    <div class="selects">
      <div class="selectsBlock">
        <span class="selectLabel">项目筛选</span>
        <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">
        <span class="selectLabel">部门</span>
        <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">
        <span class="selectLabel">分类</span>
        <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">
        <span class="selectLabel">负责人</span>
        <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">
        <span class="selectLabel">状态</span>
        <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"
        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="项目名称"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="projectPerson"
          align="center"
          label="项目负责人"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="dept"
          label="所在部门"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="budget"
          label="预算总经费(万)"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="date"
          label="时间"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="联系电话"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center"
          min-width="8%">
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          min-width="30%"
          align="center"
          >
          <template #default="scope">
              <div class="operations">
                        <el-button type="primary" class="bt1" size="mini" @click="details">详情</el-button>
                        <el-button type="primary" class="bt1" size="mini">审核</el-button>
                        <el-button type="primary" class="bt1" size="mini" @click="edit(scope.row.id,scope.row.status)"  style="background: #477edd">成果查看</el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
  </div>
</template>

<script>
    export default {
      data() {
        return {
          options:[],
          options1:[],
          options2:[],
          options3:[],
          options4:[],
          tableData:[{
            projectName:'陆地游泳辅助器',
            projectPerson:'王多鱼',
            dept:'西虹市',
            budget:'200万',
            date:'2022年-11月-12日',
            tel:'16625153432',
            state:'已审核',
          },
          {
            projectName:'北极运冰',
            projectPerson:'王多鱼',
            dept:'西虹市',
            budget:'500万',
            date:'2022年-11月-12日',
            tel:'16625153432',
            state:'未审核',
          }
          ],
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
            value4:'',

          }
        }
      },
      methods:{
        edit(){

        },
        details(){
          this.$router.push('/projectSettlement1')
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        }
      }
    }
</script>

<style lang="less">
.projectSettlement{


  .selects{
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;

    .selectsBlock{
      display: flex; 
      margin-right: 30px;
      margin-bottom: 20px;
    }
    .selectLabel{
      width: 64px;
      font-size: 16px;
      margin-right: 10px;
      display: inline-block;
      font-weight:bolder;
      text-align: justify;
      text-justify:distribute-all-lines;
      text-align-last: justify;
      transform: translate(0,22%);
    }
  }

  label{
    color: #000;
  }
}
</style>