jonhon-mes-web/src/views/personnelEfficiencyManagement/performanceManagement/performanceDisclosure.vue

<template>
  <basic-container>
    <!-- 绩效公示 -->
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model="form"
      v-model:page="page"
      ref="crud"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @cell-click="cellClick"
    >
    </avue-crud>
    <!-- 绩效详情弹窗 -->
    <el-dialog title="公示详情" v-model="showExcel" append-to-body width="85%">
      <div>
        月份：
        <el-date-picker
          v-model="monthValue"
          type="month"
          placeholder="选择月份"
          :disabled-date="pickerOptions"
        >
        </el-date-picker>
        <el-button type="primary" style="margin-left: 10px" @click="queryPerformance">
          查询
        </el-button>
      </div>
      <el-table :data="detailList" style="margin-top: 10px" border>
        <el-table-column align="center" label="KPI得分" prop="KPI" width="75" />
        <el-table-column align="center" label="量化得分" prop="lh" width="80" />
        <el-table-column align="center" label="订单准时完成率" prop="orderTime" width="130" />
        <el-table-column align="center" label="重点零件完成率" prop="keyPoint" width="130" />
        <el-table-column align="center" label="后工序审理单分数" prop="after" width="140" />
        <el-table-column align="center" label="出厂不合格率DPP" prop="unqualified" width="140" />
        <el-table-column align="center" label="成本费用率" prop="costMoney" width="95" />
        <el-table-column align="center" label="通报" prop="notice" />
        <el-table-column align="center" label="请假扣分" prop="leave" width="80" />
        <el-table-column align="center" label="考勤扣分" prop="check" width="80" />
        <el-table-column align="center" label="投稿加分项" prop="add" width="100" />
        <el-table-column align="center" label="群策群力" prop="all" width="80" />
        <el-table-column align="center" label="优秀员工加分" prop="excellence" width="120" />
        <el-table-column align="center" label="成本" prop="cost" width="55" />
        <el-table-column align="center" label="总分" prop="total" width="55" />
      </el-table>
    </el-dialog>
  </basic-container>
</template>

<script>
import { pageBsEfficiencyTaskReport } from '@/api/performanceManagement/performanceDisclosure';
export default {
  name: 'PerformanceDisclosure',
  data() {
    return {
      // 弹窗
      showExcel: false,
      monthValue: '',
      // 详情数据
      detailList: [],
      // 表格
      loading: false,
      data: [],
      form: {},
      query: {},
      // 分页
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      // 配置
      pickerOptions: time => {
        const year = new Date().getFullYear();
        return time.getFullYear() !== year;
      },
      // 表格列配置
      option: {
        height: 'auto',
        align: 'center',
        calcHeight: 32,
        rowKey: 'id',
        rowParentKey: 'parentId',
        tip: false,
        simplePage: true,
        searchShow: true,
        searchMenuSpan: 12,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: false,
        selection: false,
        viewBtn: false,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        editBtnText: '修改',
        addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
        viewBtnText: '详情',
        // labelWidth: 120,
        searchLabelWidth: 40,
        menu: false,
        menuWidth: 120,
        dialogWidth: 1200,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: false,
        filterBtn: true,
        searchShowBtn: false,
        columnSort: true,
        excelBtn: true,
        columnSort: true,
        showOverflowTooltip: true,
        searchLabelPosition: 'left',
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: 'left',
        gridBtn: false,
        searchMenuPosition: 'right',
        column: [
          {
            label: '工号',
            prop: 'employeeCode',
            search: true,
            sortable: true,
            overHidden: true,
          },
          {
            label: '姓名',
            prop: 'employeeName',
            search: true,
            sortable: true,
            overHidden: true,
            width: 120,
          },
          {
            label: '一月',
            prop: 'm01Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '二月',
            prop: 'm02Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '三月',
            prop: 'm03Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '四月',
            prop: 'm04Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '五月',
            prop: 'm05Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '六月',
            prop: 'm06Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '七月',
            prop: 'm07Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '八月',
            prop: 'm08Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '九月',
            prop: 'm09Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '十月',
            prop: 'm10Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '十一月',
            prop: 'm11Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
          {
            label: '十二月',
            prop: 'm12Score',
            search: false,
            sortable: true,
            overHidden: true,
            click: true,
          },
        ],
      },
    };
  },
  mounted() {
    // this.onLoad();
  },
  methods: {
    // 点击月份分数 - 打开详情
    cellClick(row, column) {
      const monthMap = {
        m01Score: '01',
        m02Score: '02',
        m03Score: '03',
        m04Score: '04',
        m05Score: '05',
        m06Score: '06',
        m07Score: '07',
        m08Score: '08',
        m09Score: '09',
        m10Score: '10',
        m11Score: '11',
        m12Score: '12',
      };
      const month = monthMap[column.prop];
      if (!month) return;

      // 赋值当前年月
      this.monthValue = `${row.year}-${month}`;
      this.showExcel = true;
      // 自动查询
      this.queryPerformance();
    },
    // 查询绩效明细
    async queryPerformance() {
      if (!this.monthValue) {
        this.$message.warning('请选择月份');
        return;
      }
      this.loading = true;
      try {
        // 这里替换为你的详情接口
        // const res = await getPerformanceDetail({ month: this.monthValue });
        // this.detailList = res.data || [];

        // 模拟空数据/正常数据
        this.detailList = [];
      } finally {
        this.loading = false;
      }
    },
    // 分页/搜索/刷新
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad();
    },
    refreshChange() {
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
      done();
    },
    // 列表加载
    async onLoad() {
      this.loading = true;
      try {
        const params = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          ...this.query,
        };
        const res = await pageBsEfficiencyTaskReport(params);
        if (res.code === 200) {
          this.data = res.data.records || [];
          this.page.total = res.data.total || 0;
        }
      } catch (error) {
        this.$message.error('加载失败');
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>