gdy_qywx_pc/src/views/attendance/attendance_rating.vue

<template>
  <div>
    <div class="integral_statistics_box" v-loading="attendload">
      <el-row :gutter="10" style="margin-right:8px;">
        <el-form :inline="true">
          <el-form-item label="考勤组">
            <el-select
              v-model="formData.group_id"
              @change="selectgroupId"
              filterable
              :clearable="false"
              placeholder="请选择考勤组"
            >
              <el-option
                v-for="item in checkingInGroup"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="排名类型">
            <el-select
                
              v-model="formData.type"
              @change="selectgroupId"
              style="width:80px"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in type"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间">
            
            <el-date-picker
              v-model="Month_range"
              class="date-picker-width"
              type="month"
              :clearable='false'
              value-format="yyyy-MM"
              placeholder="选择月份排名"
              @change="onFilterChanged"
            ></el-date-picker>

            <!-- <el-date-picker
              style="width:290px"
              class="first-element-btn"
              :clearable="false"
              v-model="time_range"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="instantPickerOptions"
              @change="onFilterChanged"
            ></el-date-picker> -->


          </el-form-item>

          <el-form-item>
            <el-button type="primary" plain @click="exportRanking"
              >导出排名</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>

      <el-table
        :data="all_integral_list"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column label="名次" width="100" align="center">
          <template slot-scope="scope">
            <img
              v-if="scope.row.rank === 1"
              src="static/images/statistics_NO1.png"
              alt
            />
            <img
              v-if="scope.row.rank === 2"
              src="static/images/statistics_NO2.png"
              alt
            />
            <img
              v-if="scope.row.rank === 3"
              src="static/images/statistics_NO3.png"
              alt
            />
            <span v-if="scope.row.rank > 3">{{ scope.row.rank }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="left">
          <template slot-scope="scope">
            <userImage
              class="fl"
              :id="scope.row.id"
              :user_name="scope.row.name"
              :img_url="scope.row.img_url"
              width="50px"
              height="50px"
            ></userImage>
            <span style="line-height: 50px; padding-left: 10px;">{{
              scope.row.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="point" label="B分" align="left">
          <template slot-scope="scope">
            <b style="font-size:15px;color:#909399">{{ scope.row.point }}</b>
          </template>
        </el-table-column>
        <template slot="empty">
          <div class="nopoint_box">
            <div class="noimg noperson"></div>
            <span class="title">没有对应的数据</span>
          </div>
        </template>
      </el-table>

      <center style="padding: 20px 0;">
        <el-pagination
          background
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange"
          :current-page="formData.page"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :page-size="pageLimit1"
          :total="total"
        >
        </el-pagination>
      </center>
    </div>

    <!-- 导出弹窗 -->
    <el-dialog title="导出排名" :visible.sync="dialogVisible" width="730px">
      <div style="font-size:15px;margin:20px 0 20px 0;">
        系统将按以下已选条件导出对应的排名报表
      </div>
      <div v-loading="exportLoad">
        <el-form :inline="true">
          <el-form-item label="考勤组">
            <el-select
              v-model="exportData.group_id"
              @change="selectgroupId"
              filterable
              :clearable="false"
              placeholder="请选择考勤组"
            >
              <el-option
                v-for="item in checkingInGroup"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="排名类型">
            <el-select
              v-model="exportData.type"
              @change="selectgroupId"
              style="width:150px"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in type"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间">
            
            <el-date-picker
              v-model="exportMonth_range"
              class="date-picker-width"
              type="month"
              :clearable='false'
              value-format="yyyy-MM"
              placeholder="选择月份排名"
            ></el-date-picker>

            <!-- <el-date-picker
              class="first-element-btn"
              :clearable="false"
              v-model="exportTime_range"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="instantPickerOptions"
            ></el-date-picker> -->
          </el-form-item>

        </el-form>
        <span class="dialog-footer" style="display:flex;justify-content: flex-end;">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="exportExcel">导 出</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      exportLoad:false,
      dialogVisible: false,
      checkingInGroup: [],
      type: [
        { id: 1, name: "总分" },
        { id: 2, name: "早到" },
        { id: 3, name: "迟到" },
        { id: 4, name: "加班" },
        { id: 5, name: "请假" }
      ],
      attendload: false,
      loading: false,
      all_integral_list: null,
      Month_range:this.$moment().format("YYYY-MM"),
      time_range: [
        this.$moment()
          .startOf("month")
          .format("YYYY-MM-DD"),
        this.$moment()
          .endOf("month")
          .format("YYYY-MM-DD")
      ],
      formData: {
        group_id: "",
        date_type: 3,
        page: 1,
        page_size: 10,
        type: 1
      },
      exportMonth_range:this.$moment().format("YYYY-MM"),
      exportTime_range: [
        this.$moment()
          .startOf("month")
          .format("YYYY-MM-DD"),
        this.$moment()
          .endOf("month")
          .format("YYYY-MM-DD")
      ],
      exportData: {
        group_id: "",
        type: 1
      },
      total: 0,
      dept_tree: [],
      dept_name: [],
      pageLimit1: 10,
      instantPickerOptions: {
        shortcuts: [
          {
            text: "本周",
            onClick(picker) {
              const now = new Date();
              const start = new Date();
              start.setTime(
                now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000
              );
              now.setTime(start.getTime() + 6 * 24 * 60 * 60 * 1000 - 1000);
              picker.$emit("pick", [start, now]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.getTime() - (start.getDay() + 6) * 3600 * 1000 * 24
              );
              end.setTime(start.getTime() + 6 * 24 * 60 * 60 * 1000 - 1000);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const now = new Date();
              const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
              const endDate = new Date(
                now.getFullYear(),
                now.getMonth() + 1,
                0
              );
              picker.$emit("pick", [startDate, endDate]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              const now = new Date();
              const startDate = new Date(
                now.getFullYear() - (now.getMonth() > 0 ? 0 : 1),
                (now.getMonth() + 11) % 12,
                1
              );
              const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
              picker.$emit("pick", [startDate, endDate]);
            }
          }
        ]
      }
    };
  },
  components: {},
  watch: {},
  mounted() {
    this.checkingIn_group(); //考勤组
  },
  methods: {
    exportRanking(){
        if(this.checkingInGroup.length>0){
            this.exportData.group_id = this.checkingInGroup[0].id
        }
        this.dialogVisible = true
    },
    exportExcel() {
      this.exportLoad = true
      let params = this.exportData;
      params.date_type = 3,
      params.month_date = this.exportMonth_range
      // params.date_type = 2,
      // params.start_date = this.exportTime_range[0];
      // params.end_date = this.exportTime_range[1];
      params.page = 0,
      params.page_size = 2000,
      this.$jtoken.get(this.serveAd + "/ad/statistics/get_group_rank_code", {params: params}).then((res)=>{
        if(res.data.code == 1){
          window.open(this.serveAd+'/ad/statistics/group_rank_export?code='+res.data.data.code,'_blank')
          this.dialogVisible = false
        }else{
          this.$message.error(res.data.msg);
        }
      }).finally(()=>{
          this.exportLoad = false
      })
    },
    selectgroupId() {
      this.get_all_integral();
    },
    onFilterChanged() {
      this.get_all_integral();
    },
    //分页
    handleSizeChange1(val) {
      this.pageLimit1 = val;
      this.formData.page_size = this.pageLimit1;
      this.get_all_integral();
    },
    handleCurrentChange(val) {
      this.formData.page = val;
      this.get_all_integral();
    },
    //请求数据
    checkingIn_group() {
      this.attendload = true;
      let self = this;
      let params = {
        page: 1,
        page_size: 2000
      };
      this.$jtoken
        .get(this.serveAd + "/ad/group", {
          params: params
        })
        .then(res => {
          if (res.data.code == 1) {
            this.checkingInGroup = res.data.data.list;
            this.formData.group_id = res.data.data.list[0].id;
          }
        })
        .finally(() => {
          this.get_all_integral();
          this.attendload = false;
        });
    },
    //请求数据
    get_all_integral() {
      let self = this;
      self.loading = true;
      // let data = self.formData;
      let data = {
        group_id:this.formData.group_id,
        date_type:this.formData.date_type,
        page:this.formData.page-1,
        page_size:this.formData.page_size,
        type:this.formData.type,
        month_date:this.Month_range,
      }
      // data.month_date = this.Month_range
      // data.start_date = this.time_range[0];
      // data.end_date = this.time_range[1];
      // data.page = data.page-1
      this.$jtoken({
        url: this.serveAd + "/ad/statistics/group/rank",
        data: data,
        method: "post"
      })
        .then(res => {
          if (res.data.code == 1) {
            self.all_integral_list = res.data.data.list;
            this.total =  res.data.data.total
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          self.loading = false;
        });
    }
  }
};
</script>

<style scoped>
.el-date-editor.el-input {
  width: auto;
}
.date-picker-width {
  width: 145px !important;
}
.search /deep/ .el-input-group__append:active {
  background: #26a2ff;
}
.search /deep/ .el-input-group__append:active .el-icon-search {
  color: #fff;
}
</style>
<style lang="scss" scoped>
.integral_statistics_box {
  background-color: #ffffff;
  padding: 20px;
  min-height: calc(100vh - 160px);
}

/deep/ .el-dialog__body {
  padding: 0px 20px 30px;
}
</style>