报告编制：印章生成调整

zouyu

2026-04-22 3ee153c34cd734bdb5845b60e6a207884d3b0838

 src/views/performance/class/index.vue

@@ -4,131 +4,311 @@
      <div class="search_thing">
        <div class="search_label">选择时间：</div>
        <div class="search_input">
          <el-date-picker v-model="query.year" type="year" size="small" format="yyyy" placeholder="选择年"
            @change="refreshTable()" style="width: 140px" :clearable="false">
          <el-date-picker
            v-model="query.year"
            type="year"
            size="small"
            format="yyyy"
            placeholder="选择年"
            @change="refreshTable()"
            style="width: 140px"
            :clearable="false"
          >
          </el-date-picker>
          <el-select v-model="query.month" clearable placeholder="选择月" style="width: 140px; margin-left: 16px"
            size="small" @change="refreshTable()">
            <el-option v-for="item in monthOptions" :key="item.value" :label="item.label" :value="item.value">
          <el-select
            v-model="query.month"
            clearable
            placeholder="选择月"
            style="width: 140px; margin-left: 16px"
            size="small"
            @change="refreshTable()"
          >
            <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input v-model="query.userName" placeholder="请输入人员名称" size="small" style="width: 140px; margin: 0 16px"
            clearable @keyup.enter.native="refreshTable()"></el-input>
          <el-select v-model="query.laboratory" placeholder="请选择实验室" style="width: 140px" size="small" clearable
            @change="refreshTable()">
            <el-option v-for="item in laboratory" :key="item.value" :label="item.label" :value="item.value">
          <el-input
            v-model="query.userName"
            placeholder="请输入人员名称"
            size="small"
            style="width: 140px; margin: 0 16px"
            clearable
            @keyup.enter.native="refreshTable()"
          ></el-input>
          <el-select
            v-model="query.laboratory"
            placeholder="请选择实验室"
            style="width: 140px"
            size="small"
            clearable
            @change="refreshTable()"
          >
            <el-option
              v-for="item in laboratory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="search_thing" style="padding-left: 30px">
        <el-button size="mini" type="primary" @click="refreshTable()">查 询</el-button>
        <el-button size="mini" type="primary" @click="refreshTable()"
          >查 询</el-button
        >
        <el-button size="mini" @click="refresh()">重置</el-button>
      </div>
      <div class="search_thing btns" style="padding-left: 30px">
        <el-button size="small" type="primary" v-if="checkPermi(['performance:class:time'])"
          @click="configTime">时间配置</el-button>
        <el-button size="small" type="primary" v-if="checkPermi(['performance:class:down'])" @click="handleDown"
          :loading="downLoading">导 出</el-button>
        <el-button size="small" type="primary" @click="schedulingVisible = true"
          v-if="checkPermi(['performance:class:add'])">排 班</el-button>
        <el-button
          size="small"
          type="primary"
          v-if="checkPermi(['performance:class:time'])"
          @click="configTime"
          >时间配置</el-button
        >
        <el-button
          size="small"
          type="primary"
          v-if="checkPermi(['performance:class:down'])"
          @click="handleDown"
          :loading="downLoading"
          >导 出</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="schedulingVisible = true"
          v-if="checkPermi(['performance:class:add'])"
          >排 班</el-button
        >
      </div>
    </div>
    <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;position: fixed;z-index: 1;background-color: #fff;width:220px">
          <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>
            <span style="color: #ff4949">(人员数量:{{ list.length }})</span>
          </div>
          <div class="content-user" v-for="(item, index) in list">
            <div class="user-pic">
              {{ item.userName ? item.userName.charAt(0) : "" }}
            </div>
            <div class="user-info">
              <p style="
              <p
                style="
                  font-size: 14px;
                  color: #3a7bfa;
                  line-height: 24px;
                  margin: 0;
                ">
                "
              >
                {{ item.userName }}
              </p>
              <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="
                  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="
                <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.monthlyAttendance.totalCount}}天</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;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>
            <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
                >
                <p style="height: 26px; position: absolute; bottom: 12px">
                  <span class="day">{{ item.day }}</span>
                  <span class="week">{{ item.week.charAt(1) }}</span>
                </p>
              </div>
            </div>
            <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)"
            <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"
              >
                <el-dropdown
                  v-if="m"
                  trigger="click"
                  placement="bottom"
                  @command="(e) => handleCommand(e, m)"
                  :disabled="!checkPermi(['performance:class:edit'])"
                  style="width: 100%; height: 100%; cursor: pointer">
                  <el-tooltip :disabled="!m.annotationText" :content="m.annotationText">
                    <el-tag @contextmenu.prevent.native="handleContextMenu(m,$event)" class="work-box" :type="getDictTypeByShift(m.shift)">{{ getShiftByDic(m.shift) }}</el-tag>
                  style="width: 100%; height: 100%; cursor: pointer"
                >
                  <el-tooltip
                    :disabled="m && !m.annotationText"
                    :content="m.annotationText"
                  >
                    <el-tag
                      @contextmenu.prevent.native="handleContextMenu(m, $event)"
                      class="work-box"
                      :type="getDictTypeByShift(m.shift)"
                      >{{ getShiftByDic(m.shift) }}</el-tag
                    >
                  </el-tooltip>
                  <i v-if="m.checkinResult==='success'" class="el-icon-success" style="position: relative;top:-20px;color:#67c23a;"></i>
                  <i v-else-if="m.checkinResult==='fail'" class="el-icon-warning" style="position: relative;top:-20px;color:#f56c6c;"></i>
                  <svg v-if="m.annotationText" style="position: relative;top:-62px;left:31px;" t="1772437700487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6193" width="12" height="12"><path d="M751.228537 117.332567c-1.023063 7.672974-1.470653 15.601715-1.278829 23.466514l1.278829 41.434062-32.418317 25.768406L473.466862 402.639333l-34.656268 27.494825-42.137418-13.747412a332.495559 332.495559 0 0 0-270.280524 28.965478l193.742604 194.637785 49.107037 49.362802 14.51471 14.642593 193.99837 194.829609a331.21673 331.21673 0 0 0 29.732776-271.559353l-13.747413-42.137418 27.494825-34.656268 194.509902-245.535182 25.768406-32.354375 41.434062 1.278829 4.220136 0.127883c6.522028 0 13.044057-0.44759 19.438202-1.406712l-155.377732-155.24985zM734.539817 0c9.719101 0 19.566085 3.644663 27.111177 11.189754l251.034146 250.650499a38.236989 38.236989 0 0 1-5.946555 59.081903 219.255244 219.255244 0 0 1-119.570518 35.359623c-2.301892 0-4.539843 0-6.841736-0.127882L685.752488 601.689078a413.253615 413.253615 0 0 1-71.742311 388.764038 39.451877 39.451877 0 0 1-58.378547 2.941307l-235.752139-236.775202L64.497325 1012.193211a37.277867 37.277867 0 1 1-52.623816-52.7517l255.510048-255.57399L31.631418 467.092319a39.451877 39.451877 0 0 1 3.197072-58.378548 411.399313 411.399313 0 0 1 258.771063-91.244454c43.480188 0 86.832494 6.905677 128.586263 20.461265l245.407299-194.573843A218.871596 218.871596 0 0 1 702.56909 17.264192a37.981223 37.981223 0 0 1 31.970727-17.264192z" fill="#f56c6c" p-id="6194"></path></svg>
                  <i
                    v-if="m.checkinResult === 'success'"
                    class="el-icon-success"
                    style="position: relative; top: -20px; color: #67c23a"
                  ></i>
                  <i
                    v-else-if="m.checkinResult === 'fail'"
                    class="el-icon-warning"
                    style="position: relative; top: -20px; color: #f56c6c"
                  ></i>
                  <svg
                    v-if="m.annotationText"
                    style="position: relative; top: -62px; left: 31px"
                    t="1772437700487"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6193"
                    width="12"
                    height="12"
                  >
                    <path
                      d="M751.228537 117.332567c-1.023063 7.672974-1.470653 15.601715-1.278829 23.466514l1.278829 41.434062-32.418317 25.768406L473.466862 402.639333l-34.656268 27.494825-42.137418-13.747412a332.495559 332.495559 0 0 0-270.280524 28.965478l193.742604 194.637785 49.107037 49.362802 14.51471 14.642593 193.99837 194.829609a331.21673 331.21673 0 0 0 29.732776-271.559353l-13.747413-42.137418 27.494825-34.656268 194.509902-245.535182 25.768406-32.354375 41.434062 1.278829 4.220136 0.127883c6.522028 0 13.044057-0.44759 19.438202-1.406712l-155.377732-155.24985zM734.539817 0c9.719101 0 19.566085 3.644663 27.111177 11.189754l251.034146 250.650499a38.236989 38.236989 0 0 1-5.946555 59.081903 219.255244 219.255244 0 0 1-119.570518 35.359623c-2.301892 0-4.539843 0-6.841736-0.127882L685.752488 601.689078a413.253615 413.253615 0 0 1-71.742311 388.764038 39.451877 39.451877 0 0 1-58.378547 2.941307l-235.752139-236.775202L64.497325 1012.193211a37.277867 37.277867 0 1 1-52.623816-52.7517l255.510048-255.57399L31.631418 467.092319a39.451877 39.451877 0 0 1 3.197072-58.378548 411.399313 411.399313 0 0 1 258.771063-91.244454c43.480188 0 86.832494 6.905677 128.586263 20.461265l245.407299-194.573843A218.871596 218.871596 0 0 1 702.56909 17.264192a37.981223 37.981223 0 0 1 31.970727-17.264192z"
                      fill="#f56c6c"
                      p-id="6194"
                    ></path>
                  </svg>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(n, j) in classType" :key="'h' + j" :command="n.dictValue">{{ n.dictLabel
                      }}</el-dropdown-item>
                    <el-dropdown-item
                      v-for="(n, j) in classType"
                      :key="'h' + j"
                      :command="n.dictValue"
                      >{{ n.dictLabel }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clearfix year-table" style="width: 100%" v-show="!query.month">
      <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;position: fixed;z-index: 1;background-color: #fff;width:220px">
          <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>
            <span style="color: #ff4949">(人员数量:{{ yearList.length }})</span>
          </div>
          <div class="content-user" v-for="(item, index) in yearList"
            :key="'e' + index">
          <div
            class="content-user"
            v-for="(item, index) in yearList"
            :key="'e' + index"
          >
            <div class="user-pic">
              {{ item.userName ? item.userName.charAt(0) : "" }}
            </div>
            <div class="user-info">
              <p style="
              <p
                style="
                  font-size: 14px;
                  color: #3a7bfa;
                  line-height: 24px;
                  margin: 0;
                ">
                "
              >
                {{ item.userName }}
              </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="
                  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="
                <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.sidebarAnnualAttendance.totalCount}}天</span>
                  "
                  >合计出勤: </span
                ><span style="font-size: 16px; color: #ff4902"
                  >{{ item.sidebarAnnualAttendance.totalCount }}天</span
                >
              </p>
            </div>
          </div>
@@ -136,22 +316,47 @@
        <div class="scroll-right">
          <div class="content">
            <div>
              <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;">
              <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"
                >
                  <span class="month">{{ item }}月</span>
                </div>
              </div>
              <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.monthlyAttendances" :key="'d' + i"
                  :class="{ hoverType: currentUserIndex == index }">
              <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.monthlyAttendances"
                  :key="'d' + i"
                >
                  <p style="color: rgb(153, 153, 153); font-size: 12px">
                    合计出勤：<span style="font-size: 14px; color: #000">{{m.monthlyAttendance.totalCount}}</span>
                    合计出勤：<span style="font-size: 14px; color: #000">{{
                      m.monthlyAttendance.totalCount
                    }}</span>
                  </p>
                  <p style="color: rgb(153, 153, 153); font-size: 12px">
                    <span>{{m.monthlyAttendanceStr}}</span>
                    <span>{{ m.monthlyAttendanceStr }}</span>
                  </p>
                </div>
              </div>
@@ -161,25 +366,43 @@
      </div>
    </div>

    <ul v-show="showMenu"
        class="contextmenu"
        :style="{left:menuX+'px',top:menuY+'px'}"
        @click.stop>
      <li @click="updateAnnotation('edit')"><i class="el-icon-edit-outline"></i> 编辑批注</li>
      <li @click="updateAnnotation('delete')"><i class="el-icon-delete"></i> 删除批注</li>
    <ul
      v-show="showMenu"
      class="contextmenu"
      :style="{ left: menuX + 'px', top: menuY + 'px' }"
      @click.stop
    >
      <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">
        <div v-for="(item, index) in timeQuery">
          <div class="form" style="display: flex; justify-content: space-between">
          <div
            class="form"
            style="display: flex; justify-content: space-between"
          >
            <div style="margin-bottom: 12px; width: 200px">
              <span class="form_label">班次：</span>
              <span v-if="!item.isEdit"> {{ item.type }} </span>
              <span class="form_input" v-if="item.isEdit">
                <el-select v-model="item.shift" placeholder="请选择" style="width: 70%; margin-right: 8px" clearable
                  size="small">
                  <el-option v-for="obj in timeTypeList" :key="obj.dictValue" :label="obj.dictLabel"
                    :value="obj.dictValue">
                <el-select
                  v-model="item.shift"
                  placeholder="请选择"
                  style="width: 70%; margin-right: 8px"
                  clearable
                  size="small"
                >
                  <el-option
                    v-for="obj in timeTypeList"
                    :key="obj.dictValue"
                    :label="obj.dictLabel"
                    :value="obj.dictValue"
                  >
                  </el-option>
                </el-select>
              </span>
@@ -194,67 +417,114 @@
                }}
              </span>
              <span class="form_input" v-if="item.isEdit">
                <el-time-select placeholder="起始时间" v-model="item.startTime" size="small" :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '24:00',
                }" style="width: 120px">
                </el-time-select>
                <el-time-select style="width: 120px" placeholder="结束时间" v-model="item.endTime" size="small"
                <el-time-select
                  placeholder="起始时间"
                  v-model="item.startTime"
                  size="small"
                  :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '24:00',
                  }">
                  }"
                  style="width: 120px"
                >
                </el-time-select>
                <el-time-select
                  style="width: 120px"
                  placeholder="结束时间"
                  v-model="item.endTime"
                  size="small"
                  :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '24:00',
                  }"
                >
                </el-time-select>
              </span>
            </div>
            <span>
              <i class="el-icon-circle-check" v-if="item.isEdit"
                style="margin-left: 10px; color: #4b79f2; cursor: pointer" @click="saveEdit(item, index)"></i>
              <i class="el-icon-edit" v-if="!item.isEdit" style="margin-left: 10px; color: #4b79f2; cursor: pointer"
                @click="item.isEdit = true"></i>
              <i class="el-icon-delete" v-if="timeQuery.length > 1"
                style="margin-left: 10px; color: #ff4902; cursor: pointer" @click="deleteTime(item, index)"></i>
              <i
                class="el-icon-circle-check"
                v-if="item.isEdit"
                style="margin-left: 10px; color: #4b79f2; cursor: pointer"
                @click="saveEdit(item, index)"
              ></i>
              <i
                class="el-icon-edit"
                v-if="!item.isEdit"
                style="margin-left: 10px; color: #4b79f2; cursor: pointer"
                @click="item.isEdit = true"
              ></i>
              <i
                class="el-icon-delete"
                v-if="timeQuery.length > 1"
                style="margin-left: 10px; color: #ff4902; cursor: pointer"
                @click="deleteTime(item, index)"
              ></i>
            </span>
          </div>
          <el-divider></el-divider>
          <div @click="addTimeForm" style="color: #4b79f2; cursor: pointer" v-if="index === timeQuery.length - 1">
          <div
            @click="addTimeForm"
            style="color: #4b79f2; cursor: pointer"
            v-if="index === timeQuery.length - 1"
          >
            添加时间配置
          </div>
        </div>
        <div @click="addTimeForm" style="color: #4b79f2" v-if="timeQuery.length === 0">
        <div
          @click="addTimeForm"
          style="color: #4b79f2"
          v-if="timeQuery.length === 0"
        >
          添加时间配置
        </div>
      </div>
    </el-dialog>
    <el-dialog title="排班" :visible.sync="schedulingVisible" width="400px">
      <div class="search_thing">
        <div class="search_label" style="width: 90px">
          <span style="color: red; margin-right: 4px">*</span>周次：
        </div>
        <div class="search_input" style="width: calc(100% - 90px)">
          <el-date-picker v-model="schedulingQuery.week" type="week" format="yyyy 第 WW 周" placeholder="选择周次"
            style="width: 100%">
    <el-dialog
      title="排班"
      :visible.sync="schedulingVisible"
      width="20%"
      @close="resetForm"
    >
      <el-form
        ref="schedulingQueryRef"
        :model="schedulingQuery"
        :rules="schedulingQueryRules"
      >
        <el-form-item label="排班时间:" prop="dateRange">
          <el-date-picker
            v-model="schedulingQuery.dateRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="search_thing">
        <div class="search_label" style="width: 90px">
          <span style="color: red; margin-right: 4px">*</span>人员名称：
        </div>
        <div class="search_input" style="width: calc(100% - 90px)">
          <el-select v-model="schedulingQuery.userIdList" popper-class="select-with-all" placeholder="请选择" style="width: 100%" multiple collapse-tags clearable>
        </el-form-item>
        <el-form-item label="人员名称:" prop="userIdList">
          <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;"
                style="margin: 4px 0"
              >
                {{ isAllSelected ? '取消全选' : '全选' }}
                {{ isAllSelected ? "取消全选" : "全选" }}
              </el-button>
              <el-divider style="margin: 5px 0;" />
              <el-divider style="margin: 5px 0" />
            </template>
            <el-option
              v-for="item in personList"
@@ -263,32 +533,39 @@
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.account
              }}</span>
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="search_thing">
        <div class="search_label" style="width: 90px">
          <span style="color: red; margin-right: 4px">*</span>班次：
        </div>
        <div class="search_input" style="width: calc(100% - 90px)">
          <el-select v-model="schedulingQuery.shift" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in classType" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
        </el-form-item>
        <el-form-item label="班次:" prop="shift">
          <el-select
            v-model="schedulingQuery.shift"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in classType"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </div>
      </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="schedulingVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmScheduling" :loading="loading">确 定</el-button>
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="confirmScheduling" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getYearAndMonthAndDays } from "@/utils/date";
import {
  page,
  pageYear,
@@ -301,20 +578,20 @@
  obtainItemParameterList,
  update,
  editAnnotationText,
  delAnnotationText
  delAnnotationText,
} from "@/api/performance/class";
import {selectUserListByPerformance} from '@/api/system/user'
import {getWorkMonth} from "@/utils/date";
import {transformExcel} from '@/utils/file'
import { selectUserListByPerformance } from "@/api/system/user";
import { getWorkMonth } from "@/utils/date";
import { transformExcel } from "@/utils/file";
export default {
  name: 'Class',
  name: "Class",
  data() {
    return {
      query: {
        userName: "",
        laboratory: "",
        year: new Date(),
        month: getWorkMonth().month()+1,
        month: getWorkMonth().month() + 1,
      },
      monthOptions: [
        {
@@ -374,9 +651,22 @@
      personList: [],
      loading: false,
      schedulingQuery: {
        week: "",
        dateRange: [],
        userIdList: [],
        shift: "",
      },
      schedulingQueryRules: {
        dateRange: {
          required: true,
          message: "请选择排班日期",
          trigger: "change",
        },
        userIdList: {
          required: true,
          message: "请选择人员名称",
          trigger: "change",
        },
        shift: { required: true, message: "请选择班次", trigger: "change" },
      },
      list: [],
      currentPage: 1, // 当前页
@@ -397,16 +687,17 @@
      selectedTarget: null,
    };
  },
  computed:{
  computed: {
    isAllSelected() {
      return this.schedulingQuery.userIdList.length === this.personList.length && this.personList.length > 0;
      return (
        this.schedulingQuery.userIdList.length === this.personList.length &&
        this.personList.length > 0
      );
    },
  },
  watch: {

  },
  watch: {},
  mounted() {
    document.addEventListener('click', this.handleClickOutside)
    document.addEventListener("click", this.handleClickOutside);
    this.selectEnumByCategory();
    this.obtainItemParameterList();
    this.getUsers();
@@ -422,78 +713,89 @@
    this.monthList.reverse();
  },
  destroyed() {
    document.removeEventListener('click', this.handleClickOutside)
    document.removeEventListener("click", this.handleClickOutside);
  },
  methods: {
    resetForm() {
      this.$refs.schedulingQueryRef.resetFields();
      this.$nextTick(() => {
        this.schedulingVisible = false;
      });
    },
    handleSelectAll() {
      if (this.isAllSelected) {
        this.schedulingQuery.userIdList = [];
      } else {
        // 只选中可用选项的value
        this.schedulingQuery.userIdList = this.personList.map(item => item.id);
        this.schedulingQuery.userIdList = this.personList.map(
          (item) => item.id
        );
      }
    },
    handleContextMenu(target,e) {
    handleContextMenu(target, e) {
      // 阻止浏览器默认右键菜单
      e.preventDefault()
      e.preventDefault();

      const menuMinWidth = 105
      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
      const offsetWidth = this.$el.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - offsetLeft + 15 // 15: margin right
      const menuMinWidth = 105;
      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
      const offsetWidth = this.$el.offsetWidth; // container width
      const maxLeft = offsetWidth - menuMinWidth; // left boundary
      const left = e.clientX - offsetLeft + 15; // 15: margin right

      if (left > maxLeft) {
        this.menuX = maxLeft
        this.menuX = maxLeft;
      } else {
        this.menuX = left
        this.menuX = left;
      }
      this.menuY = e.clientY - 60
      this.menuY = e.clientY - 60;
      // 显示菜单
      this.selectedTarget = target
      this.showMenu = true
      this.selectedTarget = target;
      this.showMenu = true;
    },
    //编辑批注
    updateAnnotation(operation) {
      // 点击菜单后关闭菜单
      this.showMenu = false
      if(this.selectedTarget && !this.selectedTarget.shift){
        this.$message.warning('请先选择班次')
        return
      this.showMenu = false;
      if (this.selectedTarget && !this.selectedTarget.shift) {
        this.$message.warning("请先选择班次");
        return;
      }
      if(operation && operation==='edit'){
        this.$prompt('', '编辑批注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType:'textarea',
          inputPlaceholder:'填写批注内容',
      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()
          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(() => {});
      } else if (operation && operation === "delete") {
        this.$confirm("是否删除批注内容?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delAnnotationText(this.selectedTarget.id).then((res) => {
              this.$message.success("删除成功");
              this.refreshTable();
            });
          })
        }).catch(() => {});
          .catch(() => {});
      }

    },
    handleClickOutside() {
      this.showMenu = false
      this.showMenu = false;
    },
    getDictTypeByShift(e) {
      let obj = this.classType.find((m) => m.dictValue == e);
@@ -547,22 +849,24 @@
        time: year + "-" + month + "-01 00:00:00",
        userName: this.query.userName,
        laboratory: this.query.laboratory,
      }).then((res) => {
        this.pageLoading = false;
        this.list = res.data.page
        let headerList = res.data.headerList;
        this.weeks = [];
        headerList.forEach((item) => {
          let obj = {
            weekNum: item.weekly,
            week: item.headerTime.split(" ")[1],
            day: item.headerTime.split(" ")[0],
          };
          this.weeks.push(obj);
        });
      }).catch(() => {
        this.pageLoading = false;
      })
        .then((res) => {
          this.pageLoading = false;
          this.list = res.data.page;
          let headerList = res.data.headerList;
          this.weeks = [];
          headerList.forEach((item) => {
            let obj = {
              weekNum: item.weekly,
              week: item.headerTime.split(" ")[1],
              day: item.headerTime.split(" ")[0],
            };
            this.weeks.push(obj);
          });
        })
        .catch(() => {
          this.pageLoading = false;
        });
    },
    initYear() {
      this.pageLoading = true;
@@ -573,53 +877,35 @@
        laboratory: this.query.laboratory,
      }).then((res) => {
        this.pageLoading = false;
        this.yearList = res.data
        this.yearList = res.data;
      });
    },
    confirmScheduling() {
      if (!this.schedulingQuery.week) {
        this.$message.error("请选择周次");
        return;
      }
      let time = this.schedulingQuery.week.getTime();
      let startWeek =
        getYearAndMonthAndDays(new Date(time - 24 * 60 * 60 * 1000)) +
        " 00:00:00";
      let endWeek =
        getYearAndMonthAndDays(new Date(time + 24 * 60 * 60 * 1000 * 5)) +
        " 00:00:00";
      if (
        !this.schedulingQuery.userIdList ||
        this.schedulingQuery.userIdList.length == 0
      ) {
        this.$message.error("请选择人员");
        return;
      }
      if (!this.schedulingQuery.shift) {
        this.$message.error("请选择班次");
        return;
      }
      this.loading = true;
      add({
        startWeek,
        endWeek,
        userIdList: this.schedulingQuery.userIdList,
        shift: this.schedulingQuery.shift,
      })
        .then((res) => {
          this.loading = false;
          this.$message.success("操作成功");
          this.schedulingVisible = false;
          this.schedulingQuery = {
            week: "",
            userIdList: [],
            shift: "",
          };
          this.refresh();
        })
        .catch((err) => {
          this.loading = false;
        });
      this.$refs.schedulingQueryRef.validate((valid) => {
        if (valid) {
          this.loading = true;
          add({
            startTime: this.schedulingQuery.dateRange[0],
            endTime: this.schedulingQuery.dateRange[1],
            userIdList: this.schedulingQuery.userIdList,
            shift: this.schedulingQuery.shift,
          })
            .then((res) => {
              this.loading = false;
              this.$message.success("操作成功");
              this.schedulingVisible = false;
              this.schedulingQuery = {
                week: "",
                userIdList: [],
                shift: "",
              };
              this.refresh();
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    configTime() {
      this.getDicts("sys_class_type").then((response) => {
@@ -829,12 +1115,12 @@
  display: flex;
}

>>>.scroll-pagination {
>>> .scroll-pagination {
  overflow-y: scroll;
  scrollbar-width: none;
}

>>>.scroll-pagination::-webkit-scrollbar {
>>> .scroll-pagination::-webkit-scrollbar {
  display: none;
}

@@ -918,8 +1204,8 @@
  align-items: center;
}

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

.content-body-item {
@@ -950,8 +1236,8 @@
  display: flex;
  align-items: center;
}
.content-user:nth-child(2){
  margin-top:58px;
.content-user:nth-child(2) {
  margin-top: 58px;
}
.user-pic {
  width: 50px;
@@ -968,10 +1254,6 @@
.user-info {
  flex: 1;
  margin-left: 10px;
}

.hoverType {
  background: rgba(58, 123, 250, 0.03);
}

.year-table {
@@ -1018,7 +1300,7 @@
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 0;
    padding: 7px 16px;