yos_web/src/SManagement/project_target/components/table.vue

<template>
  <div>
    <select-panel
        :placeholder="placeholder"
        :yearData="yearData"
        @searchActive="searchActive"
        @clearData="clearData"
        @targetChange="targetChange"
        @clearTarget="clearTarget"
        @yearChange="yearChange"
        style="margin-bottom:16px"/>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="calc(100vh - 182px)"
      size="small"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="depfullname"
        label="部门"
        width="120"
        fixed>
        <template slot-scope="scope">
          <p>{{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"
        fixed>
        <template slot-scope="scope">
          <p>{{scope.row.projectnum?scope.row.projectnum:'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="projectname"
        label="项目名称"
        width="100"
        fixed>
        <template slot-scope="scope">
          <p>{{scope.row.projectname?scope.row.projectname:'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="目标/实际"
        width="100">
        <template>
          <p class="center d-text">目标</p>
          <p class="border"></p>
          <p class="center d-text">实际</p>
        </template>
      </el-table-column>
      <el-table-column label="年度(万元)">
        <el-table-column
          prop="y1l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.y1l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.y1a}}</p>
            <p class="center" :class="scope.row.y1pl < 0?'green':'red'">({{scope.row.y1pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="y1h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.y1h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.y1a}}</p>
            <p class="center" :class="scope.row.y1ph < 0?'green':'red'">({{scope.row.y1ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="第一季度(万元)">
        <el-table-column
          prop="s1l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.s1l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.s1a}}</p>
            <p class="center" :class="scope.row.s1pl < 0?'green':'red'">({{scope.row.s1pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s1h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.s1h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.s1a}}</p>
            <p class="center" :class="scope.row.s1ph < 0?'green':'red'">({{scope.row.s1ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="一月(万元)">
        <el-table-column
          prop="m1l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m1l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m1a}}</p>
            <p class="center" :class="scope.row.m1pl < 0?'green':'red'">({{scope.row.m1pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m1h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m1h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m1a}}</p>
            <p class="center" :class="scope.row.m1ph < 0?'green':'red'">({{scope.row.m1ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="二月(万元)">
        <el-table-column
          prop="m2l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m2l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m2a}}</p>
            <p class="center" :class="scope.row.m2pl < 0?'green':'red'">({{scope.row.m2pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m2h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m2h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m2a}}</p>
            <p class="center" :class="scope.row.m2ph < 0?'green':'red'">({{scope.row.m2ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="三月(万元)">
        <el-table-column
          prop="m3l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m3l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m3a}}</p>
            <p class="center" :class="scope.row.m3pl < 0?'green':'red'">({{scope.row.m3pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m3h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m3h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m3a}}</p>
            <p class="center" :class="scope.row.m3ph < 0?'green':'red'">({{scope.row.m3ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="第二季度(万元)">
        <el-table-column
          prop="s2l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.s2l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.s2a}}</p>
            <p class="center" :class="scope.row.s2pl < 0?'green':'red'">({{scope.row.s2pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s2h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.s2h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.s2a}}</p>
            <p class="center" :class="scope.row.s2ph < 0?'green':'red'">({{scope.row.s2ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="四月(万元)">
        <el-table-column
          prop="m4l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m4l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m4a}}</p>
            <p class="center" :class="scope.row.m4pl < 0?'green':'red'">({{scope.row.m4pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m4h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m4h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m4a}}</p>
            <p class="center" :class="scope.row.m4ph < 0?'green':'red'">({{scope.row.m4ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="五月(万元)">
        <el-table-column
          prop="m5l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m5l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m5a}}</p>
            <p class="center" :class="scope.row.m5pl < 0?'green':'red'">({{scope.row.m5pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m5h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m5h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m5a}}</p>
            <p class="center" :class="scope.row.m5ph < 0?'green':'red'">({{scope.row.m5ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="六月(万元)">
        <el-table-column
          prop="m6l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m6l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m6a}}</p>
            <p class="center" :class="scope.row.m6pl < 0?'green':'red'">({{scope.row.m6pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m6h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m6h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m6a}}</p>
            <p class="center" :class="scope.row.m6ph < 0?'green':'red'">({{scope.row.m6ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="第三季度(万元)">
        <el-table-column
          prop="s3l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.s3l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.s3a}}</p>
            <p class="center" :class="scope.row.s3pl < 0?'green':'red'">({{scope.row.s3pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s3h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.s3h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.s3a}}</p>
            <p class="center" :class="scope.row.s3ph < 0?'green':'red'">({{scope.row.s3ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="七月(万元)">
        <el-table-column
          prop="m7l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m7l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m7a}}</p>
            <p class="center" :class="scope.row.m7pl < 0?'green':'red'">({{scope.row.m7pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m7h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m7h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m7a}}</p>
            <p class="center" :class="scope.row.m7ph < 0?'green':'red'">({{scope.row.m7ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="八月(万元)">
        <el-table-column
          prop="m8l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m8l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m8a}}</p>
            <p class="center" :class="scope.row.m8pl < 0?'green':'red'">({{scope.row.m8pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m8h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m8h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m8a}}</p>
            <p class="center" :class="scope.row.m8ph < 0?'green':'red'">({{scope.row.m8ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="九月(万元)">
        <el-table-column
          prop="m9l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m9l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m9a}}</p>
            <p class="center" :class="scope.row.m9pl < 0?'green':'red'">({{scope.row.m9pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m9h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m9h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m9a}}</p>
            <p class="center" :class="scope.row.m9ph < 0?'green':'red'">({{scope.row.m9ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="第四季度(万元)">
        <el-table-column
          prop="s4l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.s4l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.s4a}}</p>
            <p class="center" :class="scope.row.s4pl < 0?'green':'red'">({{scope.row.s4pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s4h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.s4h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.s4a}}</p>
            <p class="center" :class="scope.row.s4ph < 0?'green':'red'">({{scope.row.s4ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="十月(万元)">
        <el-table-column
          prop="m10l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m10l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m10a}}</p>
            <p class="center" :class="scope.row.m10pl < 0?'green':'red'">({{scope.row.m10pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m10h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m10h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m10a}}</p>
            <p class="center" :class="scope.row.m10ph < 0?'green':'red'">({{scope.row.m10ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="十一月(万元)">
        <el-table-column
          prop="m11l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m11l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m11a}}</p>
            <p class="center" :class="scope.row.m11pl < 0?'green':'red'">({{scope.row.m11pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m11h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m11h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m11a}}</p>
            <p class="center" :class="scope.row.m11ph < 0?'green':'red'">({{scope.row.m11ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="十二月(万元)">
        <el-table-column
          prop="m12l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m12l}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m12a}}</p>
            <p class="center" :class="scope.row.m12pl < 0?'green':'red'">({{scope.row.m12pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m12h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m12h}}</p>
            <p class="border"></p>
            <p class="center">{{scope.row.m12a}}</p>
            <p class="center" :class="scope.row.m12ph < 0?'green':'red'">({{scope.row.m12ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column 
        prop="operation"
        label="操作"
        width="120"
        :fixed="Object.keys(tableData).length != 0 ? 'right' : ''">
        <template slot-scope="scope" v-if="scope.row.hrid">
            <slot :data="{data:scope.row,year:year}"  name="edit"/>
            <slot :data="{data:scope.row,year:year}" name="detail"/>
        </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>
import selectPanel from '../components/selectPanel'
export default {
  props:["data"],
  data () {
    return {
      yearData:[],
      tableData:[],
      currentPage:0,
      total:0,
      rowIndex:'',
      year:String((new Date()).getFullYear()),
      placeholder:'请输入部门/姓名/项目名称',
      params: {
        "id": 20220909154602,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
            "year": '',
            "type":1,
            "where":{
                "condition":''//支持部门名称查询
            }
        },
      }
    }
  },
  components:{selectPanel},
  watch: {
    year: {
      handler(val) {
        this.queryData()
      }
    }
  },
  methods:{
    async queryData () {
      this.params.content.year = this.year
      let res = await this.$api.requested(this.params)
      this.tableData = res.data
    /*  console.log("输出数据信息——————————————————————————————————————————")
      console.log(this.tableData);*/
      this.total = res.total
      /*console.log(this.data,"hrid的数据输出")*/

      this.currentPage = res.pageNumber

    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.queryData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.queryData()
    },
    /* 清空指标 */
    clearTarget() {
      this.params.content.type = ''
      this.queryData()
    },
    targetChange(data) {
      this.params.content.type = data
      this.queryData()
    },
    /* 年度更改 */
    yearChange(data) {
      this.year = data
    },
    async yearList(siteid){
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "targetyearofproject",
          "parameter": {
            "siteid": siteid
          }
        }
      })
      this.yearData = res.data
      console.log(this.yearData,'人员目标年度')
    },
    searchActive(data) {
      this.params.content.where.condition = data
      this.queryData()
    },
    clearData() {
      this.params.content.where.condition = ''
      this.queryData()
    },

    tableRowClassName({row, rowIndex}) {
      console.log(this.data,"行号")
      if (row.hrid == this.data) {
        return 'warning-row';
      }
      return '';
    }
  },
  mounted () {
    /*this.queryData()*/

    const siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
    this.yearList(siteid)
  },
  created() {
    this.queryData()
  },
}

</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<style scoped>
.d-text{
  height: 46px;
  line-height: 46px;
}
.warning-row{
  background:orange
}
.border{
  border:1px solid #c1bfbf;
  transform: scale(2,.2);
}
.center{
  text-align: center;
}
.red{
  color:red
}
.green{
  color:green
}
</style>