From b0d4df5f39525ae7fe252e8ee65d85fd71dca721 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期四, 07 五月 2026 14:53:32 +0800
Subject: [PATCH] 手动下单:检验中订单撤销报错问题修复

---
 src/views/performance/class/index.vue |  948 ++++++++++++++++++++++++++++++++++++-----------------------
 1 files changed, 576 insertions(+), 372 deletions(-)

diff --git a/src/views/performance/class/index.vue b/src/views/performance/class/index.vue
index c398c77..f0c3c07 100644
--- a/src/views/performance/class/index.vue
+++ b/src/views/performance/class/index.vue
@@ -4,158 +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">
+          <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="
+              <p
+                style="
                   font-size: 14px;
                   color: #3a7bfa;
                   line-height: 24px;
                   margin: 0;
-                ">
-                {{ item.name }}
+                "
+              >
+                {{ item.userName }}
               </p>
-              <p style="
+              <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>
+                "
+                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">{{
-                    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-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"
-              v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex = null">
-              <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">
+          <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="
+              <p
+                style="
                   font-size: 14px;
                   color: #3a7bfa;
                   line-height: 24px;
                   margin: 0;
-                ">
-                {{ item.name }}
+                "
+              >
+                {{ item.userName }}
               </p>
-              <p style="
+              <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>
+                "
+                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.work_time }}澶�</span>
+                  "
+                  >鍚堣鍑哄嫟: </span
+                ><span style="font-size: 16px; color: #ff4902"
+                  >{{ item.sidebarAnnualAttendance.totalCount }}澶�</span
+                >
               </p>
             </div>
           </div>
@@ -163,27 +316,47 @@
         <div class="scroll-right">
           <div class="content">
             <div>
-              <div class="content-title content-title-right" style="border-bottom: 0; height: 52px" :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"
-                v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex = null" :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"
-                  :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.totalMonthAttendance
+                      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,30 +365,44 @@
         </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>
+    <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>
@@ -230,84 +417,155 @@
                 }}
               </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.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-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"
+              >
+                {{ 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>
-      </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,
@@ -319,19 +577,21 @@
   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',
+  name: "Class",
   data() {
     return {
       query: {
         userName: "",
         laboratory: "",
         year: new Date(),
-        month: new Date().getMonth() + 1,
-        // month:''
+        month: getWorkMonth().month() + 1,
       },
       monthOptions: [
         {
@@ -391,9 +651,22 @@
       personList: [],
       loading: false,
       schedulingQuery: {
-        week: "",
-        userId: null,
+        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, // 褰撳墠椤�
@@ -414,11 +687,17 @@
       selectedTarget: null,
     };
   },
-  watch: {
-
+  computed: {
+    isAllSelected() {
+      return (
+        this.schedulingQuery.userIdList.length === this.personList.length &&
+        this.personList.length > 0
+      );
+    },
   },
+  watch: {},
   mounted() {
-    document.addEventListener('click', this.handleClickOutside)
+    document.addEventListener("click", this.handleClickOutside);
     this.selectEnumByCategory();
     this.obtainItemParameterList();
     this.getUsers();
@@ -434,55 +713,89 @@
     this.monthList.reverse();
   },
   destroyed() {
-    document.removeEventListener('click', this.handleClickOutside)
+    document.removeEventListener("click", this.handleClickOutside);
   },
   methods: {
-    handleContextMenu(target,e) {
+    resetForm() {
+      this.$refs.schedulingQueryRef.resetFields();
+      this.$nextTick(() => {
+        this.schedulingVisible = false;
+      });
+    },
+    handleSelectAll() {
+      if (this.isAllSelected) {
+        this.schedulingQuery.userIdList = [];
+      } else {
+        // 鍙�変腑鍙敤閫夐」鐨剉alue
+        this.schedulingQuery.userIdList = this.personList.map(
+          (item) => item.id
+        );
+      }
+    },
+    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;
     },
-    editAnnotation() {
+    //缂栬緫鎵规敞
+    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;
       }
-      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("鎻愪氦鎴愬姛")
+      if (operation && operation === "edit") {
+        this.$prompt("", "缂栬緫鎵规敞", {
+          confirmButtonText: "纭畾",
+          cancelButtonText: "鍙栨秷",
+          inputType: "textarea",
+          inputPlaceholder: "濉啓鎵规敞鍐呭",
+          inputPattern: /^.{0,100}$/,
+          inputErrorMessage: "鏈�澶ц緭鍏�100涓瓧绗�",
         })
-      }).catch(() => { });
+          .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
+      this.showMenu = false;
     },
     getDictTypeByShift(e) {
       let obj = this.classType.find((m) => m.dictValue == e);
@@ -525,40 +838,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,120 +846,66 @@
         : 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)
-        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;
       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) {
-        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.userId ||
-        this.schedulingQuery.userId.length == 0
-      ) {
-        this.$message.error("璇烽�夋嫨浜哄憳");
-        return;
-      }
-      if (!this.schedulingQuery.shift) {
-        this.$message.error("璇烽�夋嫨鐝");
-        return;
-      }
-      this.loading = true;
-      add({
-        startWeek,
-        endWeek,
-        userId: this.schedulingQuery.userId.join(","),
-        shift: this.schedulingQuery.shift,
-      })
-        .then((res) => {
-          this.loading = false;
-          this.$message.success("鎿嶄綔鎴愬姛");
-          this.schedulingVisible = false;
-          this.schedulingQuery = {
-            week: "",
-            userId: null,
-            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) => {
@@ -785,21 +1010,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 +1033,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 +1056,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);
@@ -913,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;
 }
 
@@ -940,15 +1142,15 @@
 .scroll-right {
   width: calc(100% - 220px);
   /* 鍑忓幓宸﹁竟鍖哄煙瀹藉害 */
-  min-height: calc(100% - 10px);
+  /*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 +1204,10 @@
   align-items: center;
 }
 
+.content-body:nth-child(2) {
+  padding-top: 58px;
+}
+
 .content-body-item {
   height: 70px;
   width: 50px;
@@ -1030,7 +1236,9 @@
   display: flex;
   align-items: center;
 }
-
+.content-user:nth-child(2) {
+  margin-top: 58px;
+}
 .user-pic {
   width: 50px;
   height: 50px;
@@ -1046,10 +1254,6 @@
 .user-info {
   flex: 1;
   margin-left: 10px;
-}
-
-.hoverType {
-  background: rgba(58, 123, 250, 0.03);
 }
 
 .year-table {
@@ -1096,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;

--
Gitblit v1.9.3