Kaynağa Gözat

排版优化:日期加上星期展示

(cherry picked from commit af28ea5e70476f72c14cbaebc3c1f7cab5e82cdb)
zhonghuizhen 1 yıl önce
ebeveyn
işleme
76bcfb3df6
1 değiştirilmiş dosya ile 42 ekleme ve 14 silme
  1. 42 14
      src/views/business/​scheduleManage/edit.vue

+ 42 - 14
src/views/business/​scheduleManage/edit.vue

@@ -236,9 +236,12 @@
                                 v-for="(date, dIndex) in dateObj[month]"
                                 :ref="`day${dIndex}`"
                                 :key="dIndex"
-                                class="date"
+                                class="dateweek"
                                 @click="!readonly && showShiftSetting($event, date)"
-                            >{{ date.split('-')[2] }}</div>
+                            >
+                                <div class="date">{{ date.split('-')[2] }}</div>
+                                <div  class="week" :class="{ 'weekend-bg': getDayOfWeek(date).isWeekend }">{{ getDayOfWeek(date).text }}</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -686,6 +689,14 @@ export default {
                 this.loading = false
             })
         },
+        getDayOfWeek (date) {
+            const days = ['日', '一', '二', '三', '四', '五', '六']
+            const dayIndex = new Date(date).getDay()
+            return {
+                text: `${days[dayIndex]}`, // 返回星期几的文字
+                isWeekend: dayIndex === 0 || dayIndex === 6 // 判断是否是周末
+            }
+        },
         transformConfigData (data) {
             return data.reduce((acc, item) => {
                 const { scheduleType } = item
@@ -1554,17 +1565,34 @@ export default {
                         display: flex;
                         align-items: center;
                         justify-content: center;
-                        .date {
-                            width: 59px;
-                            height: 28px;
-                            line-height: 30px;
-                            text-align: center;
-                            border: 1px solid #ccc;
-                            border-right: none;
+                        .dateweek{
+                            .date {
+                                width: 59px;
+                                height: 28px;
+                                line-height: 30px;
+                                text-align: center;
+                                border: 1px solid #ccc;
+                                border-right: none;
+                                cursor: pointer;
+                                color: #409eff;
+                            }
+                            .week {
+                                width: 59px;
+                                height: 28px;
+                                line-height: 30px;
+                                text-align: center;
+                                border: 1px solid #ccc;
+                                border-right: none;
+                                border-top: none;
+                                color: rgb(96, 98, 102);
+
+                            }
                             cursor: pointer;
-                            color: #409eff;
                             &:hover {
-                                background: #ecf5ff;
+                                    background: #ecf5ff;
+                            }
+                            .weekend-bg {
+                                background-color: rgb(223 223 223 / 90%); // 周末的背景色
                             }
                         }
                     }
@@ -1708,9 +1736,9 @@ export default {
             margin: 0px 0 10px 110px;
             border-radius: 4px;
             .legend-title {
-                font-weight: bold;
+                //font-weight: bold;
                 margin-right: 15px;
-                color: #606266;
+                color: rgb(96, 98, 102);
             }
 
             .legend-items {
@@ -1734,7 +1762,7 @@ export default {
 
             .shift-name {
                 font-size: 12px;
-                color: #909399;
+                color: rgb(96, 98, 102);
             }
         }
     }