网点作息页面调整

src/views/system/workTimeBankingOffice/dialog.template.vue

@@ -2,8 +2,7 @@
   <div class="question-infos">
     <DialogCom :title="title" @close="handleClose" :visible.sync="isShow" :close-on-click-modal="false"
       custom-class="gxDialog" width="1200px" append-to-body>
-        <el-form
-            :disabled="title === '查看作息模版'"
+        <el-form            
             label-width="100px"
             label-suffix=""
             label-position="left">
@@ -25,7 +24,7 @@
               placeholder="请选择日期">
             </el-date-picker>
           </el-form-item>
-          <el-form-item v-if="id==0" ><el-button type="primary" @click="handleInitTemp">初始化作息模板</el-button></el-form-item>
+          <!-- <el-form-item v-if="id==0" ><el-button type="primary" @click="handleInitTemp">初始化作息模板</el-button></el-form-item> -->
           
           <el-form-item>
             <span slot="label"> <span style="color: red"> * </span>作息设置 </span>
@@ -146,6 +145,7 @@ import { getTemplateByOrgId } from "./api";
 import {json} from './json'
 import {getDept} from "@/api/system/dept"
 import orgSelect from "@/components/orgSelect/index.vue";  //导入默认数据
+import dayjs from "dayjs";
 export default {
   components:{orgSelect, BtnTip,OrgTreeSelect},
   data() {
@@ -161,7 +161,7 @@ export default {
       formData: {
         orgIds:[],
         dayOfWeeks: null,
-        effectiveDate:null,
+        effectiveDate:new Date(dayjs().add(1, 'day')),
       },
       disabled: false,
       startDatepickerOptions: {
@@ -220,7 +220,7 @@ export default {
         this.$message.error("请选择机构后再进行模板配置");
         return;
       }
-      this.title = '网点作息模版';            
+      this.title = '按周配置';            
       getTemplateByOrgId(orgId).then(res=>{
         if(res.data)
         {
@@ -237,6 +237,7 @@ export default {
           getDept(orgId).then(res=>{
             this.orgName=res.data.shortName;
           });
+          this.handleInitTemp();
         }
         this.isShow = true;
       })

src/views/system/workTimeBankingOffice/index.vue

@@ -39,7 +39,7 @@
                 </template> -->
                 <template slot="dateCell" slot-scope="{ data }">
                   <div class="card-group" @click="selectedDate(data)">
-                    <div
+                    <!-- <div
                       :class="
                         data.isSelected
                           ? 'is-selected card-calendar-text'
@@ -51,8 +51,8 @@
                         class="el-icon-check"
                         v-if="data.isSelected"
                       ></el-icon>
-                    </div>
-                    <div v-if="isSetedWorkTime(data)" style="height: 100%">
+                    </div> -->
+                    <div v-if="isSetedWorkTime(data)" :class="getSelectedTdClass(data)">
                       <span
                         v-for="(item, index) in tableList"
                         :key="index"
@@ -66,7 +66,7 @@
                               v-if="data.isSelected"
                             ></el-icon>
                           </div>
-                          <div :class="'card' + getColorIndexByWorkTime(item)">
+                          <div :class="'card' + getColorIndexByWorkTime(data,item)">
                             <div class="visits-val">
                               {{ item.isDuty === "1" ? "值班" : "" }}
                             </div>
@@ -74,7 +74,7 @@
                         </div>
                       </span>
                     </div>
-                    <div v-else style="height: 100%">
+                    <div v-else :class="getSelectedTdClass(data)">
                       <span class="card">
                         <div class="card-flag">
                           <div :class="getDayClass(data, null)">
@@ -84,7 +84,7 @@
                               v-if="data.isSelected"
                             ></el-icon>
                           </div>
-                          <div :class="'card' + getColorIndexByWorkTime(null)">
+                          <div :class="'card' + getColorIndexByWorkTime(data,null)">
                             <div class="visits-val">{{ "" }}</div>
                           </div>
                         </div>
@@ -110,6 +110,7 @@
                 label-position="right"
                 label-width="120px"
                 label-prefix=":"
+                :disabled="!canSave()"
               >
                 <el-row :gutter="20">
                   <!-- <el-col :span="24">
@@ -242,7 +243,7 @@ export default {
   data() {
     return {
       nowTime: null,
-      isLoadedCalendarDate: false,
+      isNeedLoadedCalendarDate: true,
       // 遮罩层
       loading: false,
       calendarDate: new Date(),
@@ -272,23 +273,37 @@ export default {
     };
   },
   mounted() {
+    let dayBtn = document.querySelector(
+      ".el-calendar__button-group .el-button-group>button:nth-child(2)"
+    );
+    dayBtn.disabled=true;
+    let dayBtnText = document.querySelector(
+      ".el-calendar__button-group .el-button-group>button:nth-child(2)>span"
+    );
+    dayBtnText.textContent=dayjs(this.calendarDate).format("YYYY-MM");
+    
     let prevBtn = document.querySelector(
       ".el-calendar__button-group .el-button-group>button:nth-child(1)"
     );
+
     prevBtn.addEventListener("click", () => {
       this.judgeDate(this.calendarDate);
+      // dayBtn.innerHTML(dayjs(this.calendarDate).format("YYYY-MM"))
+      dayBtnText.textContent=dayjs(this.calendarDate).format("YYYY-MM");
     });
-    let dayBtn = document.querySelector(
-      ".el-calendar__button-group .el-button-group>button:nth-child(2)"
-    );
-    dayBtn.addEventListener("click", () => {
-      this.judgeDate(this.calendarDate);
-    });
+    
+   
+    // console.log("dayBtnText",dayBtnText,dayBtnText.textContent)
+    // dayBtnText.innerHTML("xxxx")
+    // dayBtn.addEventListener("click", () => {
+    //   this.judgeDate(this.calendarDate);
+    // });
     let nextBtn = document.querySelector(
       ".el-calendar__button-group .el-button-group>button:nth-child(3)"
     );
     nextBtn.addEventListener("click", () => {
       this.judgeDate(this.calendarDate);
+      dayBtnText.textContent=dayjs(this.calendarDate).format("YYYY-MM");
     });
 
     let parent = document.querySelector(
@@ -299,7 +314,7 @@ export default {
     let btnDuty = this.createButton("营业", "btnDuty", "10px");
     let btnUnDuty = this.createButton("歇业", "btnUnDuty", "10px");
     let btnUnSetWorkTime = this.createButton("未配置", "btnUnSetWorkTime", "100px");
-    let btnTemplate = this.createButton("模板配置", "btnTemplate", "10px");
+    let btnTemplate = this.createButton("按周配置", "btnTemplate", "10px");
     btnTemplate.onclick = function () {
       // 触发事件
       showWorkTimeTemp();
@@ -373,7 +388,8 @@ export default {
         dayjs(calendarDate).subtract(1, "month").startOf("month")
       );
       let eDate = new Date(dayjs(calendarDate).add(1, "month").endOf("month"));
-      this.queryParams.range = [sDate, eDate];
+      this.queryParams.range = [sDate, eDate];     
+      this.isNeedLoadedCalendarDate=true; 
       this.getList();
     },
     selectedDate(data) {
@@ -401,10 +417,11 @@ export default {
       // this.$refs.form.clearValidate();
       console.log("selectedDate--->suffix", selectedData);
     },
-    firstLoadFormData() {
-      if (!this.isLoadedCalendarDate) {
-        this.loadFormData(dayjs().format("YYYY-MM-DD"));
-        this.isLoadedCalendarDate = true;
+    calendarDateChanged() {
+      if (this.isNeedLoadedCalendarDate) {
+        // this.loadFormData(dayjs().format("YYYY-MM-DD"));
+        this.loadFormData(dayjs(this.calendarDate).format("YYYY-MM-DD"));
+        this.isNeedLoadedCalendarDate = false;
       }
     },
     reset(day) {
@@ -430,17 +447,29 @@ export default {
       return false;
     },
     getDayClass(data, item) {
-      let tempColorIndex = this.getColorIndexByWorkTime(item);
+      let tempColorIndex = this.getColorIndexByWorkTime(data,item);
       return data.isSelected
         ? "is-selected" + " " + "card-text" + tempColorIndex
         : "card-text" + tempColorIndex;
     },
-    getColorIndexByWorkTime(item) {
+    getSelectedTdClass(data)
+    {
+      if(data.isSelected)
+      {
+        return 'tdClass tdSelected';
+      }
+      else{
+        return 'tdClass';
+      }
+      
+    },
+    getColorIndexByWorkTime(data,item) {
+      // if( data.isSelected) return "4";
       if (item) return item.isEnable == "1" ? "2" : "3";
       else return "1";
     },
     getDate(day) {
-      return dayjs(day).format("DD");
+      return dayjs(day).format("MM-DD");
     },
     getNowTime() {
       const dateObj = new Date(); // 获取当前时间对象
@@ -467,7 +496,7 @@ export default {
           this.tableList = response.rows;
           this.total = response.total;
           this.loading = false;
-          this.firstLoadFormData();
+          this.calendarDateChanged();
         })
         .catch((err) => {
           this.loading = false;
@@ -573,8 +602,30 @@ export default {
 };
 </script>
 <style lang="scss">
+$border: 25px;
+
 // 更改elementplus组件的样式
 .calendar-dialog {
+  
+// // 日历边框背景颜色
+// :deep(.el-calendar-table td, .el-calendar-table tr:first-child td, .el-calendar-table tr td:first-child) {
+//   border-color: $border !important;
+// }
+// // 日历取消的背景
+// :deep(.el-calendar-table td.is-selected) {
+//   background-color: $hoverOrSelectBG;
+// }
+// /* 日历单元格鼠标滑过背景色 */
+// :deep(.el-calendar-table .el-calendar-day:hover) {
+//   background-color: $hoverOrSelectBG !important;
+// }
+
+
+
+// .is-selected, .is-today {
+//   color: #37e2ce;
+//   background-color: $hoverOrSelectBG !important;
+// }
   .el-calendar-table .el-calendar-day {
     padding: 0;
   }
@@ -600,11 +651,12 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-$titleHeight: 20px;
+$titleHeight: 25px;
 $dutyColor: rgb(47, 133, 90);
 $unSetWorkTime: #bdbdbd;
 $unDutyColor: rgb(183, 121, 31);
 $btnTemplate: #008CD6;
+$hoverOrSelectedBG:#7a8185;
 
 @mixin btn-o($btnBgColor) {  
   background-color: $btnBgColor;
@@ -616,7 +668,7 @@ $btnTemplate: #008CD6;
   width: 100%;
   height: 100%;
   font-size: 15px;
-  color: #fff;
+  color: #FFF;
   background-color: $bgColor;
 }
 
@@ -626,12 +678,14 @@ $btnTemplate: #008CD6;
   height: $titleHeight;
   max-height: $titleHeight;
   min-height: $titleHeight;
+  padding-left:10px;
+  padding-top:5px;
   font-size: 20px;
-  color: #fff;
+  color: #FFF;
   background-color: $bgColor;
 }
 
-    
+
 
 .calendar-dialog {
   ::v-deep .el-calendar{
@@ -654,6 +708,17 @@ $btnTemplate: #008CD6;
         }
       }
   }
+  .tdSelected{
+      // background-color: $hoverOrSelectedBG;
+      border: 5px solid #f14704;
+      ::v-deep .card{
+        .card-flag{
+          .card1 .card-text1 .card2 .card-text2 .card3 .card-text3{
+            // background-color: $hoverOrSelectedBG !important;
+          }
+        }
+      }
+    }
   .card-group {
     width: 100%;
     height: 100%;
@@ -666,7 +731,7 @@ $btnTemplate: #008CD6;
 
     .card {
       position: relative;
-      top: -$titleHeight;
+      // top: -$titleHeight;
     }
 
     .card-flag {
@@ -696,14 +761,46 @@ $btnTemplate: #008CD6;
     .card-text3 {
       @include card-text-o($unDutyColor);
     }
+    .card4 {
+      @include card-o($hoverOrSelectedBG);
+    }
 
-   
-    // .card1:focus, .card1:hover {
-    //   background-color:#33a3de
-    // }
-    // .card-text1:focus, .card-text1:hover {
-    //   background-color:#33a3de
-    // }
+    .card-text4 {
+      @include card-text-o($hoverOrSelectedBG);
+    }
+
+    .tdClass{
+      height: 100%;
+    }
+
+  
+
+    .tdClass :hover .card1{
+      cursor: pointer;
+      background-color: $hoverOrSelectedBG;
+    }
+    .tdClass :hover .card-text1{
+      cursor: pointer;
+      background-color: $hoverOrSelectedBG;
+    }
+
+    .tdClass :hover .card2{
+      cursor: pointer;
+      background-color: $hoverOrSelectedBG;
+    }
+    .tdClass :hover .card-text2{
+      cursor: pointer;
+      background-color: $hoverOrSelectedBG;
+    }
+
+    .tdClass :hover .card3{
+      cursor: pointer;
+      background-color: $hoverOrSelectedBG;
+    }
+    .tdClass :hover .card-text3{
+      cursor: pointer;
+      background-color: $hoverOrSelectedBG;
+    }   
 
     .visits-val {
       position: absolute;

src/views/system/workTimeBankingOffice/json.js

@@ -6,12 +6,12 @@ export let json = [
     "isWorkday": '1',
     "dayOfWeek": 2,
     "dayOfWeekText": "星期一",
-    "workTime": "07:00",
-    "openTime": "09:00",
-    "noonbreakStart": "12:00",
-    "noonbreakEnd": "14:00",
-    "closeTime": "17:00",
-    "workOffTime": "20:00"
+    "workTime": "",
+    "openTime": "",
+    "noonbreakStart": "",
+    "noonbreakEnd": "",
+    "closeTime": "",
+    "workOffTime": ""
   },
   {
     "id": null,
@@ -20,12 +20,12 @@ export let json = [
     "isWorkday": '1',
     "dayOfWeek": 3,
     "dayOfWeekText": "星期二",
-    "workTime": "07:00",
-    "openTime": "09:00",
-    "noonbreakStart": "12:00",
-    "noonbreakEnd": "14:00",
-    "closeTime": "17:00",
-    "workOffTime": "20:00"
+    "workTime": "",
+    "openTime": "",
+    "noonbreakStart": "",
+    "noonbreakEnd": "",
+    "closeTime": "",
+    "workOffTime": ""
   },
   {
     "id": null,
@@ -34,12 +34,12 @@ export let json = [
     "isWorkday": '1',
     "dayOfWeek": 4,
     "dayOfWeekText": "星期三",
-    "workTime": "07:00",
-    "openTime": "09:00",
-    "noonbreakStart": "12:00",
-    "noonbreakEnd": "14:00",
-    "closeTime": "17:00",
-    "workOffTime": "20:00"
+    "workTime": "",
+    "openTime": "",
+    "noonbreakStart": "",
+    "noonbreakEnd": "",
+    "closeTime": "",
+    "workOffTime": ""
   },
   {
     "id": null,
@@ -48,12 +48,12 @@ export let json = [
     "isWorkday": '1',
     "dayOfWeek": 5,
     "dayOfWeekText": "星期四",
-    "workTime": "07:00",
-    "openTime": "09:00",
-    "noonbreakStart": "12:00",
-    "noonbreakEnd": "14:00",
-    "closeTime": "17:00",
-    "workOffTime": "20:00"
+    "workTime": "",
+    "openTime": "",
+    "noonbreakStart": "",
+    "noonbreakEnd": "",
+    "closeTime": "",
+    "workOffTime": ""
   },
   {
     "id": null,
@@ -62,12 +62,12 @@ export let json = [
     "isWorkday": '1',
     "dayOfWeek": 6,
     "dayOfWeekText": "星期五",
-    "workTime": "07:00",
-    "openTime": "09:00",
-    "noonbreakStart": "12:00",
-    "noonbreakEnd": "14:00",
-    "closeTime": "17:00",
-    "workOffTime": "20:00"
+    "workTime": "",
+    "openTime": "",
+    "noonbreakStart": "",
+    "noonbreakEnd": "",
+    "closeTime": "",
+    "workOffTime": ""
   },
   {
     "id": null,