人员排班显示班次名字改为显示颜色。

(cherry picked from commit 9334cd26d8688316a958f9e40017138d370657b9)

src/views/business/​scheduleManage/edit.vue

@@ -188,6 +188,22 @@
             </el-table>
         </el-form>
         <div v-if="activeStep === 2" ref="scheduleContainer" class="schedule-container">
+            <div class="shift-legend">
+                <div class="legend-title">班次说明：</div>
+                <div class="legend-items">
+                    <div
+                        v-for="(shift, index) in formData.scheduleShift" 
+                        :key="index"
+                        class="legend-item"
+                    >
+                        <div
+                            class="color-block" 
+                            :style="{ backgroundColor: shift.color }"
+                        ></div>
+                        <span class="shift-name">{{ shift.name }}</span>
+                    </div>
+                </div>
+            </div>
             <div ref="schedule" class="schedule-box">
                 <div ref="scrollTarget" class="abscissa" :style="{ left: leftOffset + 'px' }">
                     <div v-for="(month, mIndex) in Object.keys(dateObj)" :key="mIndex" class="abs-type">
@@ -309,8 +325,8 @@
                                     class="shift"
                                     :style="{ color: viewType === 'users' ? `${shift.color}` : `${ordinateList[rIndex].color}`}"
                                 >
-                                    {{ viewType === 'users'? shift.alias : shift.userName }}
-                                    <!-- <div :style="{ color: `${shift.color}` }">{{ shift.alias }}</div> -->
+                                    <div v-if="viewType !== 'users'">{{ viewType === 'users'? shift.alias : shift.userName }}</div>
+                                    <div v-if="viewType === 'users'" :style="{ width: '20px', height: '20px', backgroundColor: `${shift.color}`, margin: '0 auto', borderRadius: '2px' }"></div>
                                 </div>
                                 <div v-if="hoveredIndex === `${row.value}-${cIndex}` && !readonly" class="overlay">
                                     <i class="el-icon-edit" />
@@ -1587,6 +1603,41 @@ export default {
                 box-shadow: 0 2px 20px rgba(228, 231, 237, 1);
             }
         }
+        .shift-legend {
+            display: flex;
+            align-items: center;
+            margin: 0px 0 10px 110px;
+            border-radius: 4px;
+            .legend-title {
+                font-weight: bold;
+                margin-right: 15px;
+                color: #606266;
+            }
+
+            .legend-items {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 15px; // 色块间距
+            }
+
+            .legend-item {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+            }
+
+            .color-block {
+                width: 20px;
+                height: 20px;
+                border-radius: 2px;
+                flex-shrink: 0;
+            }
+
+            .shift-name {
+                font-size: 12px;
+                color: #909399;
+            }
+        }
     }
 }
 </style>