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

<template>
  <div style="margin-top:16px">
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="height"
      size="small">
      <el-table-column
        prop="depfullname"
        :label="$t('部门')"
        width="120"
        fixed>
        <template slot-scope="scope">
          <p>{{scope.row.depfullname.substring(scope.row.depfullname.lastIndexOf("/",scope.row.depfullname.lastIndexOf('/')-1) + 1)}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        :label="$t('人员')"
        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="$t('职位')"
        width="100"
        fixed>
        <template slot-scope="scope">
          <p>{{scope.row.position?scope.row.position:'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('目标')+'/'+$t('实际')"
        width="100">
        <template>
          <p class="center d-text">{{$t('目标')}}</p>
          <p class="border"></p>
          <p class="center d-text">{{$t('实际')}}</p>
        </template>
      </el-table-column>
      <el-table-column :label="$t('年度(万元)')">
        <el-table-column
          prop="y1l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.y1l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.y1a,2)}}</p>
            <p class="center" :class="scope.row.y1pl < 100?'green':'red'">({{scope.row.y1pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="y1h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.y1h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.y1a,2)}}</p>
            <p class="center" :class="scope.row.y1ph < 100?'green':'red'">({{scope.row.y1ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('第一季度(万元)')">
        <el-table-column
          prop="s1l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.s1l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.s1a,2)}}</p>
            <p class="center" :class="scope.row.s1pl < 100?'green':'red'">({{scope.row.s1pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s1h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.s1h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.s1a,2)}}</p>
            <p class="center" :class="scope.row.s1ph < 100?'green':'red'">({{scope.row.s1ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('一月(万元)')">
        <el-table-column
          prop="m1l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m1l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m1a,2)}}</p>
            <p class="center" :class="scope.row.m1pl < 100?'green':'red'">({{scope.row.m1pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m1h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m1h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m1a,2)}}</p>
            <p class="center" :class="scope.row.m1ph < 100?'green':'red'">({{scope.row.m1ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('二月(万元)')">
        <el-table-column
          prop="m2l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m2l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m2a,2)}}</p>
            <p class="center" :class="scope.row.m2pl < 100?'green':'red'">({{scope.row.m2pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m2h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m2h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m2a,2)}}</p>
            <p class="center" :class="scope.row.m2ph < 100?'green':'red'">({{scope.row.m2ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('三月(万元)')">
        <el-table-column
          prop="m3l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m3l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m3a,2)}}</p>
            <p class="center" :class="scope.row.m3pl < 100?'green':'red'">({{scope.row.m3pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m3h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m3h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m3a,2)}}</p>
            <p class="center" :class="scope.row.m3ph < 100?'green':'red'">({{scope.row.m3ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('第二季度(万元)')">
        <el-table-column
          prop="s2l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.s2l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.s2a,2)}}</p>
            <p class="center" :class="scope.row.s2pl < 100?'green':'red'">({{scope.row.s2pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s2h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.s2h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.s2a,2)}}</p>
            <p class="center" :class="scope.row.s2ph < 100?'green':'red'">({{scope.row.s2ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('四月(万元)')">
        <el-table-column
          prop="m4l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m4l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m4a,2)}}</p>
            <p class="center" :class="scope.row.m4pl < 100?'green':'red'">({{scope.row.m4pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m4h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m4h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m4a,2)}}</p>
            <p class="center" :class="scope.row.m4ph < 100?'green':'red'">({{scope.row.m4ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('五月(万元)')">
        <el-table-column
          prop="m5l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m5l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m5a,2)}}</p>
            <p class="center" :class="scope.row.m5pl < 100?'green':'red'">({{scope.row.m5pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m5h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m5h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m5a,2)}}</p>
            <p class="center" :class="scope.row.m5ph < 100?'green':'red'">({{scope.row.m5ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('六月(万元)')">
        <el-table-column
          prop="m6l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m6l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m6a,2)}}</p>
            <p class="center" :class="scope.row.m6pl < 100?'green':'red'">({{scope.row.m6pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m6h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m6h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m6a,2)}}</p>
            <p class="center" :class="scope.row.m6ph < 100?'green':'red'">({{scope.row.m6ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('第三季度(万元)')">
        <el-table-column
          prop="s3l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.s3l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.s3a,2)}}</p>
            <p class="center" :class="scope.row.s3pl < 100?'green':'red'">({{scope.row.s3pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s3h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.s3h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.s3a,2)}}</p>
            <p class="center" :class="scope.row.s3ph < 100?'green':'red'">({{scope.row.s3ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('七月(万元)')">
        <el-table-column
          prop="m7l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m7l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m7a,2)}}</p>
            <p class="center" :class="scope.row.m7pl < 100?'green':'red'">({{scope.row.m7pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m7h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m7h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m7a,2)}}</p>
            <p class="center" :class="scope.row.m7ph < 100?'green':'red'">({{scope.row.m7ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('八月(万元)')">
        <el-table-column
          prop="m8l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m8l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m8a,2)}}</p>
            <p class="center" :class="scope.row.m8pl < 100?'green':'red'">({{scope.row.m8pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m8h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m8h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m8a,2)}}</p>
            <p class="center" :class="scope.row.m8ph < 100?'green':'red'">({{scope.row.m8ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('九月(万元)')">
        <el-table-column
          prop="m9l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m9l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m9a,2)}}</p>
            <p class="center" :class="scope.row.m9pl < 100?'green':'red'">({{scope.row.m9pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m9h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m9h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m9a,2)}}</p>
            <p class="center" :class="scope.row.m9ph < 100?'green':'red'">({{scope.row.m9ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('第四季度(万元)')">
        <el-table-column
          prop="s4l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.s4l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.s4a,2)}}</p>
            <p class="center" :class="scope.row.s4pl < 100?'green':'red'">({{scope.row.s4pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s4h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.s4h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.s4a,2)}}</p>
            <p class="center" :class="scope.row.s4ph < 100?'green':'red'">({{scope.row.s4ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('十月(万元)')">
        <el-table-column
          prop="m10l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m10l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m10a,2)}}</p>
            <p class="center" :class="scope.row.m10pl < 100?'green':'red'">({{scope.row.m10pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m10h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m10h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m10a,2)}}</p>
            <p class="center" :class="scope.row.m10ph < 100?'green':'red'">({{scope.row.m10ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('十一月(万元)')">
        <el-table-column
          prop="m11l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m11l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m11a,2)}}</p>
            <p class="center" :class="scope.row.m11pl < 100?'green':'red'">({{scope.row.m11pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m11h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m11h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m11a,2)}}</p>
            <p class="center" :class="scope.row.m11ph < 100?'green':'red'">({{scope.row.m11ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('十二月(万元)')">
        <el-table-column
          prop="m12l"
          :label="$t('基本')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m12l,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m12a,2)}}</p>
            <p class="center" :class="scope.row.m12pl < 100?'green':'red'">({{scope.row.m12pl}}%)</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m12h"
          :label="$t('挑战')"
          width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{tool.formatAmount(scope.row.m12h,2)}}</p>
            <p class="border"></p>
            <p class="center">{{tool.formatAmount(scope.row.m12a,2)}}</p>
            <p class="center" :class="scope.row.m12ph < 100?'green':'red'">({{scope.row.m12ph}}%)</p>
          </template>
        </el-table-column>
      </el-table-column>
<!--      <el-table-column
        prop="operation"
        :label="$t('操作')"
        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>
export default {
  props:['height'],
  data () {
    return {
      tableData:[],
      currentPage:0,
      total:0,
      year:'',
      params: {
      "id": 20220904165302,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "year": '',
          "type":1,
          "where":{
              "condition":""//支持部门名称查询
          }
        },
      }
    }
  },
  watch: {
    year: {
      handler(val) {
        this.queryData()
      }
    }
  },
  methods:{
    async queryData () {
      console.log("页面执行")
      this.params.content.year = this.year
      const res = await this.$api.requested(this.params)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.queryData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.queryData()
    },

  },
  mounted () {
    this.queryData()
  }
}

</script>
<style>
</style>
<style scoped>
.d-text{
  height: 46px;
  line-height: 46px;
}
.border{
  border:1px solid #c1bfbf;
  transform: scale(2,.2);
}
.center{
  text-align: center;
}
.red{
  color:red
}
.green{
  color:green
}
</style>