奖惩记录功能调整并迁移到绩效模块

zouyu

2026-04-21 7b936dc5e04df96d319e6895fe883cad8ff57dd4

 src/views/performance/class/index.vue

@@ -37,13 +37,13 @@
    <div class="center" v-loading="pageLoading">
      <div class="clearfix" style="width: 100%" v-show="query.month">
        <div class="fixed-left">
          <div class="content-title" style="padding-left: 16px; box-sizing: border-box">
          <div class="content-title" style="padding-left: 16px; box-sizing: border-box;position: fixed;z-index: 1;background-color: #fff;width:220px">
            人员名称
            <span style="color:#ff4949">(人员数量:{{list.length}})</span>
          </div>
          <div class="content-user" :class="{ hoverType: currentUserIndex == index }" v-for="(item, index) in list"
            :key="'e' + index" v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex = null">
          <div class="content-user" v-for="(item, index) in list">
            <div class="user-pic">
              {{ item.name ? item.name.charAt(0) : "" }}
              {{ item.userName ? item.userName.charAt(0) : "" }}
            </div>
            <div class="user-info">
              <p style="
@@ -52,20 +52,9 @@
                  line-height: 24px;
                  margin: 0;
                ">
                {{ item.name }}
                {{ item.userName }}
              </p>
              <p style="
                  color: #999999;
                  font-size: 12px;
                  transform: scale(0.8) translateX(-20px);
                  white-space: nowrap;
                  width: 150px;
                  overflow-x: show;
                  margin: 0;
                ">
                早:{{ item.day0 }},中:{{ item.day1 }},夜:{{ item.day2 }},休:{{
                  item.day3
                }},假:{{ item.day4 }},差:{{ item.day6 }}
              <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;margin: 0;" v-text="item.monthlyAttendanceStr">
              </p>
              <p style="margin-top: 4px; margin: 0">
                <span style="
@@ -73,18 +62,14 @@
                    font-size: 12px;
                    display: inline-block;
                    transform: scale(0.8) translateX(-10px);
                  ">合计出勤: </span><span style="font-size: 16px; color: #ff4902">{{
                    query.month
                      ? item.monthlyAttendance.totalAttendance
                      : item.sidebarAnnualAttendance.totalAttendance
                  }}天</span>
                  ">合计出勤: </span><span style="font-size: 16px; color: #ff4902">{{item.monthlyAttendance.totalCount}}天</span>
              </p>
            </div>
          </div>
        </div>
        <div class="scroll-right">
          <div class="content">
            <div class="content-title content-title-right" style="border-bottom: 0">
            <div class="content-title content-title-right" style="border-bottom: 0;position: fixed;z-index: 1;background-color: #fff;">
              <div class="content-title-item" v-for="(item, index) in weeks" :key="'b' + index">
                <span class="month" style="position: absolute; top: 0px" v-if="item.week == '周日'">{{ item.weekNum
                  }}周</span>
@@ -94,8 +79,7 @@
                </p>
              </div>
            </div>
            <div class="content-body" v-for="(item, index) in list" :key="'c' + index"
              v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex = null">
            <div class="content-body" v-for="(item, index) in list" :key="'c' + index">
              <div class="content-body-item" v-for="(m, i) in item.list" :key="'d' + i"
                :class="{ hoverType: currentUserIndex == index }">
                <el-dropdown trigger="click" placement="bottom" @command="(e) => handleCommand(e, m)"
@@ -119,13 +103,14 @@
      </div>
      <div class="clearfix year-table" style="width: 100%" v-show="!query.month">
        <div class="fixed-left">
          <div class="content-title" style="padding-left: 16px; box-sizing: border-box">
          <div class="content-title" style="padding-left: 16px; box-sizing: border-box;position: fixed;z-index: 1;background-color: #fff;width:220px">
            人员名称
            <span style="color:#ff4949">(人员数量:{{yearList.length}})</span>
          </div>
          <div class="content-user" :class="{ hoverType: currentUserIndex == index }" v-for="(item, index) in yearList"
            :key="'e' + index" v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex = null">
          <div class="content-user" v-for="(item, index) in yearList"
            :key="'e' + index">
            <div class="user-pic">
              {{ item.name ? item.name.charAt(0) : "" }}
              {{ item.userName ? item.userName.charAt(0) : "" }}
            </div>
            <div class="user-info">
              <p style="
@@ -134,28 +119,16 @@
                  line-height: 24px;
                  margin: 0;
                ">
                {{ item.name }}
                {{ item.userName }}
              </p>
              <p style="
                  color: #999999;
                  font-size: 12px;
                  transform: scale(0.8) translateX(-20px);
                  white-space: nowrap;
                  width: 150px;
                  overflow-x: show;
                  margin: 0;
                ">
                早:{{ item.day0 }},中:{{ item.day1 }},夜:{{ item.day2 }},休:{{
                  item.day3
                }},假:{{ item.day4 }},差:{{ item.day6 }}
              </p>
              <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;margin: 0;" v-text="item.sidebarAnnualAttendanceStr"></p>
              <p style="margin-top: 4px; margin: 0">
                <span style="
                    color: #999999;
                    font-size: 12px;
                    display: inline-block;
                    transform: scale(0.8) translateX(-10px);
                  ">合计出勤: </span><span style="font-size: 16px; color: #ff4902">{{ item.work_time }}天</span>
                  ">合计出勤: </span><span style="font-size: 16px; color: #ff4902">{{item.sidebarAnnualAttendance.totalCount}}天</span>
              </p>
            </div>
          </div>
@@ -163,27 +136,22 @@
        <div class="scroll-right">
          <div class="content">
            <div>
              <div class="content-title content-title-right" style="border-bottom: 0; height: 52px" :style="`display: grid;
              <div class="content-title content-title-right" style="border-bottom: 0; height: 63px;position: fixed;z-index: 1;background-color: #fff;width: calc( 100% - 448px );" :style="`display: grid;
                grid-template-columns: repeat(${monthList.length}, 1fr);`">
                <div class="content-title-item" v-for="(item, index) in monthList" :key="'b' + index"
                  style="height: 52px">
                  style="height: 52px;">
                  <span class="month">{{ item }}月</span>
                </div>
              </div>
              <div class="content-body" v-for="(item, index) in yearList" :key="'c' + index"
                v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex = null" :style="`display: grid;
              <div class="content-body" v-for="(item, index) in yearList" :key="'c' + index" :style="`display: grid;
              grid-template-columns: repeat(${monthList.length}, 1fr);`">
                <div class="content-body-item" v-for="(m, i) in item.monthList" :key="'d' + i"
                <div class="content-body-item" v-for="(m, i) in item.monthlyAttendances" :key="'d' + i"
                  :class="{ hoverType: currentUserIndex == index }">
                  <p style="color: rgb(153, 153, 153); font-size: 12px">
                    合计出勤：<span style="font-size: 14px; color: #000">{{
                      m.totalMonthAttendance
                    }}</span>
                    合计出勤：<span style="font-size: 14px; color: #000">{{m.monthlyAttendance.totalCount}}</span>
                  </p>
                  <p style="color: rgb(153, 153, 153); font-size: 12px">
                    早:{{ m.day0 }},中:{{ m.day1 }},夜:{{ m.day2 }},休:{{
                      m.day3
                    }},假:{{ m.day4 }},差:{{ m.day6 }}
                    <span>{{m.monthlyAttendanceStr}}</span>
                  </p>
                </div>
              </div>
@@ -192,17 +160,13 @@
        </div>
      </div>
    </div>
    <el-pagination background @current-change="currentChange" :page-size="pageSize" :current-page="currentPage"
      layout="total, prev, pager, next, jumper" :total="total"
      style="margin-top: 10px; text-align: right; margin-right: 30px">
    </el-pagination>

    <ul v-show="showMenu"
        class="contextmenu"
        :style="{left:menuX+'px',top:menuY+'px'}"
        @click.stop>
      <li @click="editAnnotation()">编辑批注</li>
      <li class="divider"></li>
      <li @click="updateAnnotation('edit')"><i class="el-icon-edit-outline"></i> 编辑批注</li>
      <li @click="updateAnnotation('delete')"><i class="el-icon-delete"></i> 删除批注</li>
    </ul>
    <el-dialog title="时间配置" :visible.sync="configTimeVisible" width="620px">
      <div v-loading="configTimeVisibleLoading" style="min-height: 200px">
@@ -280,9 +244,26 @@
          <span style="color: red; margin-right: 4px">*</span>人员名称：
        </div>
        <div class="search_input" style="width: calc(100% - 90px)">
          <el-select v-model="schedulingQuery.userId" placeholder="请选择" style="width: 100%" multiple clearable
            collapse-tags>
            <el-option v-for="item in personList" :key="item.id" :label="item.name" :value="item.id">
          <el-select v-model="schedulingQuery.userIdList" popper-class="select-with-all" placeholder="请选择" style="width: 100%" multiple collapse-tags clearable>
            <template slot="prefix">
              <el-button
                type="text"
                size="mini"
                @click="handleSelectAll"
                style="margin: 4px 0;"
              >
                {{ isAllSelected ? '取消全选' : '全选' }}
              </el-button>
              <el-divider style="margin: 5px 0;" />
            </template>
            <el-option
              v-for="item in personList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account }}</span>
            </el-option>
          </el-select>
        </div>
@@ -319,9 +300,12 @@
  exportFile,
  obtainItemParameterList,
  update,
  selectUserCondition,
  editAnnotationText
  editAnnotationText,
  delAnnotationText
} from "@/api/performance/class";
import {selectUserListByPerformance} from '@/api/system/user'
import {getWorkMonth} from "@/utils/date";
import {transformExcel} from '@/utils/file'
export default {
  name: 'Class',
  data() {
@@ -330,8 +314,7 @@
        userName: "",
        laboratory: "",
        year: new Date(),
        month: new Date().getMonth() + 1,
        // month:''
        month: getWorkMonth().month()+1,
      },
      monthOptions: [
        {
@@ -392,7 +375,7 @@
      loading: false,
      schedulingQuery: {
        week: "",
        userId: null,
        userIdList: [],
        shift: "",
      },
      list: [],
@@ -413,6 +396,11 @@
      menuY: 0,
      selectedTarget: null,
    };
  },
  computed:{
    isAllSelected() {
      return this.schedulingQuery.userIdList.length === this.personList.length && this.personList.length > 0;
    },
  },
  watch: {

@@ -437,6 +425,14 @@
    document.removeEventListener('click', this.handleClickOutside)
  },
  methods: {
    handleSelectAll() {
      if (this.isAllSelected) {
        this.schedulingQuery.userIdList = [];
      } else {
        // 只选中可用选项的value
        this.schedulingQuery.userIdList = this.personList.map(item => item.id);
      }
    },
    handleContextMenu(target,e) {
      // 阻止浏览器默认右键菜单
      e.preventDefault()
@@ -457,29 +453,44 @@
      this.selectedTarget = target
      this.showMenu = true
    },
    editAnnotation() {
    //编辑批注
    updateAnnotation(operation) {
      // 点击菜单后关闭菜单
      this.showMenu = false
      if(this.selectedTarget && !this.selectedTarget.shift){
        this.$message.warning('请先选择班次')
        return
      }
      this.$prompt('', '编辑批注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType:'textarea',
        inputPlaceholder:'填写批注内容',
        inputPattern: /^.{0,100}$/,
        inputErrorMessage: '最大输入100个字符'
      }).then(({ value }) => {
        editAnnotationText({
          id:this.selectedTarget.id,
          annotationText:value
        }).then(res=>{
          this.refreshTable()
          this.$message.success("提交成功")
        })
      }).catch(() => { });
      if(operation && operation==='edit'){
        this.$prompt('', '编辑批注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType:'textarea',
          inputPlaceholder:'填写批注内容',
          inputPattern: /^.{0,100}$/,
          inputErrorMessage: '最大输入100个字符'
        }).then(({ value }) => {
          editAnnotationText({
            id:this.selectedTarget.id,
            annotationText:value
          }).then(res=>{
            this.$message.success("提交成功")
            this.refreshTable()
          })
        }).catch(() => { });
      }else if(operation && operation==='delete'){
        this.$confirm('是否删除批注内容?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delAnnotationText(this.selectedTarget.id).then(res=>{
            this.$message.success("删除成功")
            this.refreshTable()
          })
        }).catch(() => {});
      }

    },
    handleClickOutside() {
      this.showMenu = false
@@ -525,40 +536,6 @@
        this.initYear();
      }
    },
    transFromNumber(num) {
      let changeNum = [
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
      ]; //changeNum[0] = "零"
      let unit = ["", "十", "百", "千", "万"];
      num = parseInt(num);
      let getWan = (temp) => {
        let strArr = temp.toString().split("").reverse();
        let newNum = "";
        for (var i = 0; i < strArr.length; i++) {
          newNum =
            (i == 0 && strArr[i] == 0
              ? ""
              : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0
                ? ""
                : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) +
            newNum;
        }
        return newNum;
      };
      let overWan = Math.floor(num / 10000);
      let noWan = num % 10000;
      if (noWan.toString().length < 4) noWan = "0" + noWan;
      return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
    },
    init() {
      this.pageLoading = true;
      let year = this.query.year.getFullYear();
@@ -567,24 +544,12 @@
        : new Date().getMonth() + 1;
      let month = month0 > 9 ? month0 : "0" + month0;
      page({
        size: this.pageSize,
        current: this.currentPage,
        time: year + "-" + month + "-01 00:00:00",
        userName: this.query.userName,
        laboratory: this.query.laboratory,
      }).then((res) => {
        this.pageLoading = false;
        this.total = res.data.page.total;
        this.list = res.data.page.records.map((item) => {
          for (let key in item.monthlyAttendance) {
            let type = this.getDayByDic(key);
            if (type != undefined || type != null) {
              item[`day${type}`] = item.monthlyAttendance[key];
            }
          }
          return item;
        });
        console.log(this.list)
        this.list = res.data.page
        let headerList = res.data.headerList;
        this.weeks = [];
        headerList.forEach((item) => {
@@ -603,39 +568,13 @@
      this.pageLoading = true;
      let year = this.query.year.getFullYear();
      pageYear({
        size: this.pageSize,
        current: this.currentPage,
        time: year + "-01-01 00:00:00",
        userName: this.query.userName,
        laboratory: this.query.laboratory,
      }).then((res) => {
        this.pageLoading = false;
        this.total = res.data.total;
        this.yearList = res.data.records.map((item) => {
          for (let key in item.year) {
            let type = this.getDayByDic(key);
            if (type != undefined || type != null) {
              item[`day${type}`] = item.year[key];
            }
          }
          item.monthList = [];
          for (let m in item.month) {
            let obj = {};
            for (let key in item.month[m]) {
              let type = this.getDayByDic(key);
              if (type != undefined || type != null) {
                obj[`day${type}`] = item.month[m][key];
              }
            }
            obj.totalMonthAttendance = item.month[m].totalMonthAttendance;
            item.monthList.push(obj);
          }
          return item;
        });
        this.yearList = res.data
      });
    },
    onMouseEnter(index) {
      this.currentUserIndex = index;
    },
    confirmScheduling() {
      if (!this.schedulingQuery.week) {
@@ -650,8 +589,8 @@
        getYearAndMonthAndDays(new Date(time + 24 * 60 * 60 * 1000 * 5)) +
        " 00:00:00";
      if (
        !this.schedulingQuery.userId ||
        this.schedulingQuery.userId.length == 0
        !this.schedulingQuery.userIdList ||
        this.schedulingQuery.userIdList.length == 0
      ) {
        this.$message.error("请选择人员");
        return;
@@ -664,7 +603,7 @@
      add({
        startWeek,
        endWeek,
        userId: this.schedulingQuery.userId.join(","),
        userIdList: this.schedulingQuery.userIdList,
        shift: this.schedulingQuery.shift,
      })
        .then((res) => {
@@ -673,7 +612,7 @@
          this.schedulingVisible = false;
          this.schedulingQuery = {
            week: "",
            userId: null,
            userIdList: [],
            shift: "",
          };
          this.refresh();
@@ -785,21 +724,18 @@
        time,
        userName: this.query.userName,
        laboratory: this.query.laboratory,
        isMonth: this.query.month ? true : false,
        isMonth: !!this.query.month,
      })
        .then((res) => {
          this.$message.success("下载成功");
          this.downLoading = false;
          const blob = new Blob([res], {
            type: "application/force-download",
          });
          let fileName = "";
          let fileName = "中天耐丝质量部";
          if (this.query.month) {
            fileName = year + "-" + this.query.month + " 班次信息";
            fileName += this.query.month + "月班次信息";
          } else {
            fileName = year + " 班次汇总";
            fileName += year + "年班次汇总";
          }
          this.$download.saveAs(blob, fileName + ".xlsx");
          transformExcel(res, fileName + ".xlsx");
          this.$message.success("导出成功");
        })
        .catch((err) => {
          this.downLoading = false;
@@ -811,29 +747,16 @@
      });
    },
    obtainItemParameterList() {
      if (this.PROJECT == "检测中心") {
        this.laboratory = [
          {
            label: "通信产品实验室",
            value: "通信产品实验室",
          },
          {
            label: "电力产品实验室",
            value: "电力产品实验室",
          },
        ];
      } else {
        obtainItemParameterList().then((res) => {
          let data = [];
          res.data.forEach((a) => {
            data.push({
              label: a.laboratoryName,
              value: a.id,
            });
      obtainItemParameterList().then((res) => {
        let data = [];
        res.data.forEach((a) => {
          data.push({
            label: a.laboratoryName,
            value: a.id,
          });
          this.laboratory = data;
        });
      }
        this.laboratory = data;
      });
    },
    handleCommand(e, m) {
      if (e != m.shift) {
@@ -847,16 +770,9 @@
      }
    },
    getUsers() {
      selectUserCondition({ type: 1 }).then((res) => {
        let arr = res.data;
        this.personList = arr;
      selectUserListByPerformance().then((res) => {
        this.personList = res.data;
      });
    },
    getDayByDic(e) {
      let obj = this.classType.find((m) => m.dictLabel == e);
      if (obj) {
        return obj.dictValue;
      }
    },
    getShiftByDic(e) {
      let obj = this.classType.find((m) => m.dictValue == e);
@@ -943,12 +859,12 @@
  min-height: calc(100% - 10px);
  /* 视口高度 */
  margin-left: 220px;
  overflow-x: scroll;
  overflow-x: auto;
}

.content {
  min-height: calc(100% - 10px);
  /* 视口高度 */
  min-height: calc(100% - 10px);
}

.content-title {
@@ -1002,6 +918,10 @@
  align-items: center;
}

.content-body:nth-child(2){
  padding-top:58px;
}

.content-body-item {
  height: 70px;
  width: 50px;
@@ -1030,7 +950,9 @@
  display: flex;
  align-items: center;
}

.content-user:nth-child(2){
  margin-top:58px;
}
.user-pic {
  width: 50px;
  height: 50px;