gdy_qywx_pc/src/views/dashboard/components/DepartmentPointAll.vue

<template>
  <div
    style=" background-color: #fff; padding:15px; padding-top:0; height: 370px; overflow: hidden"
    v-loading="loading"
  >
    <el-scrollbar
      wrap-class="column-wrapper scrollable-items-container"
      :native="false"
      style="height: 350px;"
    >
      <el-table
        v-show="tableData.length!=0"
        ref="multipleTable"
        :data="tableData.now"
        :border="false"
        tooltip-effect="dark"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @filter-change="filterHandler"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="employee_name" label="姓名" width="80px"></el-table-column>

        <el-table-column prop="dept_name" label="部门" width="80px">
          <template slot-scope="scope">
            <div style="width:80px;">
              <span v-if="scope.row.dept_name != ''">{{scope.row.dept_name}}</span>
              <span v-if="scope.row.dept_name ===null">暂无分配</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="add_point.point_sum" label="奖分" width="80px"></el-table-column>

        <el-table-column width="100px" sortable prop="add_point.event_count" label="奖分次数"></el-table-column>

        <el-table-column sortable prop="sub_point.point_sum" label="扣分" width="80px"></el-table-column>

        <el-table-column width="100px" sortable prop="sub_point.event_count" label="扣分次数"></el-table-column>
      </el-table>
    </el-scrollbar>

    <div
      v-if="tableData.length == 0"
      style="
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -115px;
"
    >
      <img
        v-if="tableData.length == 0"
        src="static/images/nodata.png"
        style="display: block; margin:0 auto;"
      >
      <p style="color:#ccc; text-align: center">暂无数据</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      profile: this.$store.getters.user_info,
      totalCount: 0,
      tableData: [],
      department_list: [],
      pageLimit: 10,
      category_list: [],
      currentPage: 1,
      multipleSelection: [],
      filter: {
        keywords: "",
        target_id_set: [],
        category_id: [],
        point_type: 0,
        time_range: ""
      },
      categoryTree: [],
      employeeOptions: [],
      pointTypes: [],
      instantPickerOptions: {
        shortcuts: [
          {
            text: "本周",
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString());
              let start =
                now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000;
              let end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString());
              let start =
                now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000;
              let end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const now = new Date();
              let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
              let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
              picker.$emit("pick", [startDate.getTime(), endDate.getTime()]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              const now = new Date();
              let startDate = new Date(
                now.getFullYear() - (now.getMonth() > 0 ? 0 : 1),
                (now.getMonth() + 11) % 12,
                1
              );
              let endDate = new Date(now.getFullYear(), now.getMonth(), 0);
              picker.$emit("pick", [startDate.getTime(), endDate.getTime()]);
            }
          }
        ]
      }
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.target_id == this.$store.getters.user_info.id) {
        return "rank-mine";
      }
      return "";
    },
    handleSizeChange(val) {
      this.pageLimit = val;
      this.onFilterChanged();
    },

    filterHandler: function(value) {
      console.log(value);
      this.filter.category_id = value["el-table_1_column_5"];
      this.onFilterChanged();
    },

    onFilterChanged: function() {
      this.currentPage = 1;
      this.loadEventList();
    },
    modeTypeFormatter: function(value) {
      switch (value) {
        case 1:
          return "积分录入";
        case 2:
          return "积分申请";
        default:
          return "";
      }
    },
    reviewStatusFormatter: function(row, column, cellValue) {
      return cellValue == 1 ? "待审核" : "已生效";
    },
    dateFormatter: function(row, column, cellValue) {
      return this.$moment(cellValue * 1000).format("MM月DD日");
    },
    toggleSelection: function(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange: function(val) {
      this.multipleSelection = val;
    },
    //获取积分事件列表
    loadEventList: function() {
      const now = new Date();
      let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
      let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
      let params = {
        time_range:
          startDate.getTime() / 1000 +
          "," +
          (endDate.getTime() / 1000 + 3600 * 24 - 1)
      };

      var self = this;
      self.loading = true;
      this.$http('get',"/integral.php/point_data/get_department_point",params)
        .then(function(response) {
          if (response.status == 200) {
            self.loading = false;
            var jsonData = response.data;
            try {
              self.tableData = jsonData.data;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    changePage: function(current) {
      if (isNaN(current) || current < 1) {
        return false;
      }
      this.loadEventList();
    }
  },
  created() {
    this.loadEventList();
  }
};
</script>
<style>
.el-pagination {
  text-align: center;
  margin-top: 15px;
}
</style>