11-21lhj

src/components/system/Payroll.vue

@@ -409,7 +409,7 @@
                                 <span class="sx" slot="reference">{{salaryinif.absenteeism.toFixed(2)}}</span>
                             </el-popover>
                         </el-form-item>
-                        <el-form-item label="补卡" :label-width="formLabelWidth">
+                        <el-form-item class="biaoji" label="补卡" :label-width="formLabelWidth">
                             <el-popover
                             placement="top"
                             width="512"
@@ -422,7 +422,10 @@
                                     <el-table-column width="80" property="Deduction" :formatter="rounding" label="扣款金额"></el-table-column>
                                     <el-table-column width="230" property="Reason" label="原因"></el-table-column>
                                 </el-table>
-                                <span slot="reference">{{salaryinif.notPunch.toFixed(2)}}</span>
+                                <el-input-number slot="reference" :precision="2" size="medium" :controls="false" v-model="salaryinif.notPunch">
+                                    <span slot="reference"></span>
+                                </el-input-number>
+                                <!-- <span slot="reference">{{salaryinif.notPunch.toFixed(2)}}</span> -->
                             </el-popover>
                         </el-form-item>
                     </div>
@@ -1586,6 +1589,10 @@ export default {
 .payroll-all::-webkit-scrollbar-thumb:hover {
     background-color: #a8a8a8;
 }
-  
-
+.biaoji .el-input-number--medium{
+    width: 90px;
+}
+.biaoji .el-input--medium .el-input__inner{
+    text-align: left;
+}
 </style>

src/components/system/SetWorking.vue

@@ -1,13 +1,84 @@
 <template>
     <div>
         <div class="SetWorking-all">
-            设置时间
+            <div class="calendar-box">
+                <el-calendar ref="calendar" class="aaa" v-model="value">
+                    <template #dateCell="{ data }">
+                      <div class="calendar-btn-box" @click="allcalendar(data)">
+                        <div class="calendar-day">
+                            {{ data.day.split("-").slice(2).join("-") }} 
+                        </div>
+                        <div :class="datayz.includes(data.day)?'schedule-box':'schedule-boxs'">
+                            {{datayz.includes(data.day)?'工作日':'休息'}}
+                        </div>
+                      </div>
+                    </template>
+                </el-calendar>
+            </div>
         </div>
     </div>
 </template>
 <script>
 export default {
-    
+    data() {
+        return {
+            datayz:[
+                '2023-11-01',
+                '2023-11-02',
+                '2023-11-03',
+                '2023-11-06',
+                '2023-11-07',
+                '2023-11-08',
+                '2023-11-09',
+                '2023-11-10',
+                '2023-11-13',
+                '2023-11-14',
+                '2023-11-15',
+                '2023-11-16',
+                '2023-11-17',
+                '2023-11-20',
+                '2023-11-21',
+                '2023-11-22',
+                '2023-11-23',
+                '2023-11-24',
+                '2023-11-27',
+                '2023-11-28',
+                '2023-11-29',
+                '2023-11-30',
+            ],
+            value:''
+        }
+    },
+    methods:{
+        allcalendar(data) {
+            console.log(data);
+            // const loading = this.$loading({
+            //     lock: true,  //加上这个 页面点击日历的时候会莫名其妙抖动一下 因为我界面上有滚动条，所以我注释了
+            //     text: "Loading",
+            //     spinner: "el-icon-loading",
+            //     background: "rgba(0, 0, 0, 0.7)",
+            // });
+            // setTimeout(() => {
+            //     console.log(data); //取到你需要的日期data.day
+            //     //需要用到这日期做啥事，比如做为调接口的参数
+            //     loading.close();
+            // }, 500);
+        },
+        formattedDate(val){
+            const date = new Date(val);
+            const year = date.getFullYear();  
+            const month = (date.getMonth() + 1).toString().padStart(2, '0');  
+            const day = date.getDate().toString().padStart(2, '0');  
+            const formattedDate = `${year}-${month}-${day}`;  
+        }
+    },
+    watch:{
+        value:{//监听月份变化
+            handler(newValue,oldValue){
+                console.log(newValue,oldValue)
+            }
+        }
+    }
 }
 </script>
 <style>
@@ -19,4 +90,30 @@ export default {
     height: 100%;
     min-height: 830px;
 }
+.is-selected {
+    color: #1989FA;
+}
+.calendar-btn-box{
+    text-align: center;
+    height: 100%;
+}
+.calendar-box .el-calendar-day{
+    padding: 0;
+}
+.calendar-day{
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 50px;
+}
+.schedule-box{
+    font-size: 17px;
+    font-weight: 600;
+    color: #409EFF;
+}
+.schedule-boxs{
+    font-size: 17px;
+    font-weight: 600;
+    color: #a8a4a4;
+}
+
 </style>