<template>
  <div class="page">
    <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        @click="doExport"
        :disabled="isExport"
        >导出</el-button
      >
    </LayoutTable>

    <dialog-show ref="dialogform" @ok="getData" />
    <div class="mask" v-if="progress">
      <el-progress :stroke-width="26" :percentage="percent"></el-progress>
    </div>
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table";
export default {
  name: "StaffPerformSummaryList",
  components: {
    dialogShow,
  },
  mixins: [table],
  created() {},

  methods: {
    /** 导出Excel */
    doExport() {
      this.progress = true;
      this.percent = 75;
      this.isExport = true;
      this.$download(
        "/staff/perform/summary/exportExcel",
        {
          page: 1,
          size: -1,
        },
        { type: "excel" }
      )
        .then(() => {
          this.percent = 100;
          this.progress = false;
          this.isExport = false;
        })
        .catch((error) => {
          this.isExport = false;
          this.progress = false;
          this.$message.error(error.message);
        });
    },
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.dialogform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.dialogform.view(row);
    },
  },
  data() {
    return {
      isExport: false,
      progress: false,
      percent: 0,
      config: {
        isshowTabPane: true,
        search: [
          {
            name: "yearmonth",
            type: "month",
            label: "请选择月份",
            fuzzy: false,
          },

          {
            name: "deptId",
            type: "select",
            label: "所属部门",
            fuzzy: false,
          },

          {
            name: "staffName",
            type: "text",
            label: "员工姓名",
            fuzzy: false,
          },
        ],
        columns: [
          { type: "selection", width: 60 },
          { type: "index", label: "序号", width: 50 },

          { label: "姓名", prop: "staffName", formatter: this.formatter },

          { label: "工号", prop: "workNum", formatter: this.formatter },

          { label: "手机号", prop: "phoneNumber", formatter: this.formatter },

          { label: "所属部门", prop: "deptName", formatter: this.formatter },
          {
            label: "所属中心",
            formatter: (row) => {
              return "宜宾市民中心";
            },
          },

          {
            label: "考勤绩效指标分数",
            prop: "attendScore",
          },

          {
            label: "评价绩效指标分数",
            prop: "reviewScore",
          },
          {
            label: "投诉绩效指标分数",
            prop: "complainScore",
          },

          {
            label: "办件绩效分数",
            prop: "goworkScore",
          },

          {
            label: "效能绩效分数",
            prop: "effectScore",
          },

          {
            label: "其它绩效分数",
            prop: "otherScore",
          },

          {
            label: "累计异常分数",
            prop: "errorScore",
          },

          {
            label: "本月得分数",
            prop: "totalScore",
          },
          { label: "年", prop: "year", formatter: this.formatter },
          { label: "月", prop: "month", formatter: this.formatter },
          {
            label: "操作",
            width: 240,
            formatter: (row) => {
              return (
                <table-buttons
                  noAdd
                  noEdit
                  noDel
                  row={row}
                  onEdit={this.toEdit}
                  onView={this.toView}
                  onDel={this.toDel}
                />
              );
            },
          },
        ],
      },
    };
  },
};
</script>
<style lang="less" scoped>
.mask {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 0 30%;
  padding-top: 20%;
  background: rgba(0, 0, 0, 0.6);
}
::v-deep .el-progress__text {
  color: #409eff;
  font-weight: 600;
}
</style>
