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"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <!-- <template #menu="scope">
        <el-button type="text" @click="viewRow(scope.row)">详情</el-button>
      </template> -->
    </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">查询</el-button>
      </div>
      <el-table :data="tableData" style="margin-top: 10px">
        <el-table-column
          align="center"
          label="KPI得分"
          prop="KPI"
          width="75"
        ></el-table-column>
        <el-table-column
          align="center"
          label="量化得分"
          prop="lh"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          label="订单准时完成率"
          prop="orderTime"
        ></el-table-column>
        <el-table-column
          align="center"
          label="重点零件完成率"
          prop="keyPoint"
        ></el-table-column>
        <el-table-column
          align="center"
          label="后工序审理单分数"
          prop="after"
        ></el-table-column>
        <el-table-column
          align="center"
          label="出厂不合格率DPP"
          prop="unqualified"
        ></el-table-column>
        <el-table-column
          align="center"
          label="成本费用率"
          prop="costMoney"
          width="95"
        ></el-table-column>
        <el-table-column align="center" label="通报" prop="notice"></el-table-column>
        <el-table-column
          align="center"
          label="请假扣分"
          prop="leave"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          label="考勤扣分"
          prop="check"
          width="80"
        ></el-table-column>
        <el-table-column align="center" label="投稿加分项" prop="add"></el-table-column>
        <el-table-column
          align="center"
          label="群策群力"
          prop="all"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          label="优秀员工加分"
          prop="excellence"
        ></el-table-column>
        <el-table-column
          align="center"
          label="成本"
          prop="cost"
          width="55"
        ></el-table-column>
        <el-table-column
          align="center"
          label="总分"
          prop="total"
          width="55"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </basic-container>
</template>

<script>
export default {
  data() {
    return {
      showExcel: false,
      monthValue: "2025-09",
      pickerOptions: (time) => {
        const year = new Date().getFullYear(); // 获取当前年份
        return time.getFullYear() !== year; // 如果年份不等于当前年份，则禁用该日期
      },
      tableData: [
        {
          KPI: 70,
          lh: 26,
          orderTime: 0,
          keyPoint: "",
          after: "",
          unqualified: "",
          costMoney: "",
          notice: 0,
          all: 0,
          leave: 0,
          check: 0,
          add: 0,
          excellence: 2,
          cost: 0,
          total: 98,
        },
      ],
      monthArr: [
        { label: "一月", value: 1 },
        { label: "一月", value: 1 },
        { label: "一月", value: 1 },
        { label: "一月", value: 1 },
      ],
      loading: false,
      data: [],
      form: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        height: "auto",
        align: "center",
        calcHeight: 32,
        rowKey: "id",
        rowParentKey: "parentId",
        tip: false,
        size: "medium",
        simplePage: true,
        searchShow: true,
        searchMenuSpan: 6,
        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: 120,
        menu: true,
        menuWidth: 120,
        dialogWidth: 1200,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: false,
        filterBtn: true,
        searchShowBtn: false,
        columnSort: true,
        excelBtn: true,
        columnSort: true,
        showOverflowTooltip: true,
        searchLabelPosition: "left",
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "left",
        gridBtn: false,
        searchMenuPosition: "right",
        column: [
          {
            label: "工号",
            prop: "userCode",
            search: true,
            sortable: true,
            overHidden: true,
          },
          {
            label: "姓名",
            prop: "userName",
            search: true,
            sortable: true,
            overHidden: true,
          },
          {
            label: "一月",
            prop: "january",
            search: false,
            sortable: true,
            overHidden: true,
            
          },
          {
            label: "二月",
            prop: "february",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "三月",
            prop: "march",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "四月",
            prop: "april",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "五月",
            prop: "may",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "六月",
            prop: "june",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "七月",
            prop: "july",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "八月",
            prop: "august",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "九月",
            prop: "september",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "十月",
            prop: "october",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "十一月",
            prop: "november",
            search: false,
            sortable: true,
            overHidden: true,
          },
          {
            label: "十二月",
            prop: "december",
            search: false,
            sortable: true,
            overHidden: true,
          },
        ],
      },
    };
  },
  mounted() {
    this.viewOpen();
  },
  methods: {
    viewRow(row) {
      this.showExcel = true;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    searchReset() {
      this.query = {};
      this.treeDeptId = "";
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    onLoad() {
      this.data = [
        {
          id: 1,
          userCode: "001",
          userName: "张三",
          january: 98,
          february: 97.5,
          march: 96,
          april: 98,
          may: 96,
          june: 95.5,
          july: 97,
          august: 98.5,
          september: 95,
        },
        {
          id: 2,
          userCode: "002",
          userName: "李四",
          january: 98,
          february: 96.5,
          march: 97,
          april: 96,
          may: 98,
          june: 97.5,
          july: 95,
          august: 96.5,
          september: 98,
        },
        {
          id: 3,
          userCode: "003",
          userName: "王五",
          january: 96,
          february: 98.5,
          march: 97,
          april: 95,
          may: 97,
          june: 98.5,
          july: 96,
          august: 96.5,
          september: 97,
        },
      ];
      this.page.total = this.data.length;
    },
  },
};
</script>

<style></style>