yos_web/src/HManagement/projectTarget/target/modules/edit/components/table.vue

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="500"
      size="small">
      <el-table-column
        prop="depfullname"
        label="部门"
        width="120"
        fixed>
        <template slot-scope="scope">
          <p :style="{textIndent:scope.row.level === 0?'10px':''}">{{scope.row.level === 0?'--':scope.row.depfullname}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="人员"
        width="80"
        fixed>
        <template slot-scope="scope">
          <p>{{scope.row.name?scope.row.name:'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="position"
        label="职位"
        width="100"
        fixed>
        <template slot-scope="scope">
          <p>{{scope.row.position?scope.row.position:'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="projectnum"
        label="项目数量"
        width="100">
      </el-table-column>
      <el-table-column
        prop="projectname"
        label="项目名称"
        width="150">
        <template slot-scope="scope">
          <p>{{scope.row.projectname?scope.row.projectname:'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column label="年度(万元)">
        <el-table-column
          prop="y1l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="y1h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="第一季度(万元)">
        <el-table-column
          prop="s1l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="s1h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="一月(万元)">
        <el-table-column
          prop="m1l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m1h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="二月(万元)">
        <el-table-column
          prop="m2l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m2h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="三月(万元)">
        <el-table-column
          prop="m3l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m3h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="第二季度(万元)">
        <el-table-column
          prop="s2l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="s2h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="四月(万元)">
        <el-table-column
          prop="m4l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m4h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="五月(万元)">
        <el-table-column
          prop="m5l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m5h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="六月(万元)">
        <el-table-column
          prop="m6l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m6h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="第三季度(万元)">
        <el-table-column
          prop="s3l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="s3h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="七月(万元)">
        <el-table-column
          prop="m7l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m7h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="八月(万元)">
        <el-table-column
          prop="m8l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m8h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="九月(万元)">
        <el-table-column
          prop="m9l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m9h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="第四季度(万元)">
        <el-table-column
          prop="s4l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="s4h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="十月(万元)">
        <el-table-column
          prop="m10l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m10h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="十一月(万元)">
        <el-table-column
          prop="m11l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m11h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="十二月(万元)">
        <el-table-column
          prop="m12l"
          label="基本"
          width="120">
        </el-table-column>
        <el-table-column
          prop="m12h"
          label="挑战"
          width="120">
        </el-table-column>
      </el-table-column>
<!--      <div  class="container normal-panel" style="text-align:right">
        <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>-->
<!--       <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <slot name="editTarget" v-if="scope.row.hrid" :data="scope.row"></slot>
          <slot name="del" v-if="scope.row.hrid" :data="scope.row"></slot>
        </template>
      </el-table-column>-->
    </el-table>
    <div  class="container normal-panel" style="text-align:right">
      <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 50, 100, 200]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props:['year'],
  data () {
    return {
      tableData:[],
      total:0,
      currentPage:0,
      param:{
        "id": 20220909152802,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "sa_salestargetbillid": this.$route.query.id,
          "where":{
            "condition":""
          }
        }
      }
    }
  },
  methods:{
    async queryData (year) {
      console.log(year)
      const res = await this.$api.requested(this.param)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
  },
  mounted () {
  }
}

</script>
<style scoped>
/deep/.el-table__body-wrapper {
  z-index: 2;
}
</style>