考勤提交页面bug修复

src/views/work-hours/work-hours-manage/work-attendance/detail-dialog.vue

@@ -1,14 +1,14 @@
 <template>
   <my-drawer
-      class="sop-dialog"
-      :visible="visible"
-      header="打卡明细"
-      size="80%"
-      attach="body"
-      :closeOnOverlayClick="false"
-      :close-btn="true"
-      :footer="false"
-      @close="emit('update:visible', false)"
+    class="sop-dialog"
+    :visible="visible"
+    header="打卡明细"
+    size="80%"
+    attach="body"
+    :closeOnOverlayClick="false"
+    :close-btn="true"
+    :footer="false"
+    @close="emit('update:visible', false)"
   >
     <div class="">
       <t-collapse class="sop-step-mid" defaultExpandAll>
@@ -22,43 +22,36 @@
                 <t-form-item label="姓名">{{ row.archivesInfo }}</t-form-item>
               </t-col>
               <t-col :span="3">
-                <t-form-item label="项目角色">{{
-                    roleTypeFilter(row.roleType)
-                  }}
+                <t-form-item label="项目角色"
+                  >{{ roleTypeFilter(row.roleType) }}
                 </t-form-item>
               </t-col>
               <t-col :span="3">
-                <t-form-item label="所属供应商" label-width="100px">{{ row.supplierName }}
+                <t-form-item label="所属供应商" label-width="100px"
+                  >{{ row.supplierName }}
                 </t-form-item>
               </t-col>
               <t-col :span="3">
-                <t-form-item label="sop流水号">{{
-                    row.sopNo
-                  }}
-                </t-form-item>
+                <t-form-item label="sop流水号">{{ row.sopNo }} </t-form-item>
               </t-col>
               <t-col :span="3">
-                <t-form-item label="客户名称">{{
-                    row.customName
-                  }}
+                <t-form-item label="客户名称"
+                  >{{ row.customName }}
                 </t-form-item>
               </t-col>
               <t-col :span="3">
-                <t-form-item label="有效出勤">{{
-                    row.actualDays
-                  }}
+                <t-form-item label="有效出勤"
+                  >{{ row.actualDays }}
                 </t-form-item>
               </t-col>
               <t-col :span="3">
-                <t-form-item label="考试开始时间" label-width="100px">{{
-                    timestampFilter(row.approachTime)
-                  }}
+                <t-form-item label="考试开始时间" label-width="100px"
+                  >{{ timestampFilter(row.approachTime) }}
                 </t-form-item>
               </t-col>
               <t-col :span="3">
-                <t-form-item label="考试结束时间" label-width="100px">{{
-                    timestampFilter(row.departureTime)
-                  }}
+                <t-form-item label="考试结束时间" label-width="100px"
+                  >{{ timestampFilter(row.departureTime) }}
                 </t-form-item>
               </t-col>
               <!--              <t-col :span="3">-->
@@ -68,9 +61,8 @@
               <!--                </t-form-item>-->
               <!--              </t-col>-->
               <t-col :span="3">
-                <t-form-item label="服务单元">{{
-                    row.serviceUnitName
-                  }}
+                <t-form-item label="服务单元"
+                  >{{ row.serviceUnitName }}
                 </t-form-item>
               </t-col>
             </t-row>
@@ -80,67 +72,82 @@
       <div style="margin-bottom: 20px">
         <t-button variant="outline">
           <template #icon>
-            <svg-icon name="effective-attendance" color="#00B42A"/>
-          </template
-          >
-          有效出勤&nbsp;&nbsp;&nbsp;&nbsp;{{ row.actualDays }}天
-        </t-button>&nbsp;&nbsp;
+            <svg-icon name="effective-attendance" color="#00B42A" />
+          </template>
+          有效出勤&nbsp;&nbsp;&nbsp;&nbsp;{{ row.actualDays }}天 </t-button
+        >&nbsp;&nbsp;
         <t-button variant="outline">
           <template #icon>
-            <svg-icon name="working-hours" color="#262626"/>
-          </template
-          >
-          共计工时&nbsp;&nbsp;&nbsp;&nbsp;{{ row.workHours }}天
-        </t-button>&nbsp;&nbsp;
+            <svg-icon name="working-hours" color="#262626" />
+          </template>
+          共计工时&nbsp;&nbsp;&nbsp;&nbsp;{{ row.workHours }}小时 </t-button
+        >&nbsp;&nbsp;
         <t-button variant="outline">
           <template #icon>
-            <svg-icon name="anomalies" color="#F53F3F"/>
-          </template
-          >
+            <svg-icon name="anomalies" color="#F53F3F" />
+          </template>
           异常共计&nbsp;&nbsp;&nbsp;&nbsp;{{ row.exceptionCount }}天
         </t-button>
       </div>
       <t-table
-          size="small"
-          row-key="id"
-          :columns="columns"
-          :data="tableData"
-          bordered
-          :pagination="{
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
           defaultCurrent: 1,
-          defaultPageSize: 20,
-
+          defaultPageSize: 10,
+          onChange,
           total: pagination.total,
           current: pagination.pageNumber,
+          showPageSize: false,
         }"
       >
         <template #signIn="{ col, row }">
-          {{ row.signInTime ? timestampFilter(row[col.colKey], 'tt') + (row.signInAddress?row.signInAddress:'') : '异常' }}
+          {{
+            row.signInTime
+              ? timestampFilter(row[col.colKey], 'tt') +
+                (row.signInAddress ? row.signInAddress : '')
+              : '异常'
+          }}
         </template>
         <template #signOut="{ col, row }">
-          {{ row.signOutTime ? timestampFilter(row[col.colKey], 'tt') + (row.signOutAddress?row.signOutAddress:'') : '异常' }}
+          {{
+            row.signOutTime
+              ? timestampFilter(row[col.colKey], 'tt') +
+                (row.signOutAddress ? row.signOutAddress : '')
+              : '异常'
+          }}
         </template>
         <template #workHours="{ col, row }">
-          {{ row.signOutTime && row.signInTime ? ((row.signOutTime - row.signInTime) / 1000 / 60 / 60).toFixed(2) : '' }}
+          {{
+            row.signOutTime && row.signInTime
+              ? ((row.signOutTime - row.signInTime) / 1000 / 60 / 60).toFixed(2)
+              : ''
+          }}
         </template>
       </t-table>
       <t-space class="sop-step-footer" style="flex-direction: row">
         <t-button theme="primary" @click="emit('update:visible', false)"
-        >返回
-        </t-button
-        >
+          >返回
+        </t-button>
       </t-space>
     </div>
-
   </my-drawer>
 </template>
 
 <script setup name="DetailDialog">
-import {timestampFilter, roleTypeFilter, customerTypeFilter, attendanceSubmitStatusFilter} from '@/utils/filter';
-import {computed, reactive, watch} from 'vue';
-import useFetchTable from "@/hooks/useFetchTable";
-import {detail} from "@/api/work-hours";
-import {randomCode} from "@/utils/tool";
+import {
+  timestampFilter,
+  roleTypeFilter,
+  customerTypeFilter,
+  attendanceSubmitStatusFilter,
+} from '@/utils/filter';
+import { computed, reactive, watch } from 'vue';
+import useFetchTable from '@/hooks/useFetchTable';
+import { detail } from '@/api/work-hours';
+import { randomCode } from '@/utils/tool';
 
 const emit = defineEmits(['update:visible', 'confirm']);
 const props = defineProps({
@@ -153,10 +160,10 @@ const props = defineProps({
   },
 });
 const columns = [
-  {colKey: 'signDate', title: '日期', width: 100},
-  {colKey: 'signInTime', title: '签到', cell: 'signIn',width: 160},
-  {colKey: 'signOutTime', title: '签退', width: 160, cell: 'signOut'},
-  {colKey: 'workHours', title: '工时(小时)', width: 100, cell: 'workHours'},
+  { colKey: 'signDate', title: '日期', width: 100 },
+  { colKey: 'signInTime', title: '签到', cell: 'signIn', width: 160 },
+  { colKey: 'signOutTime', title: '签退', width: 160, cell: 'signOut' },
+  { colKey: 'workHours', title: '工时(小时)', width: 100, cell: 'workHours' },
 ];
 
 const params = computed(() => {
@@ -166,21 +173,18 @@ const params = computed(() => {
   };
 });
 
-const {pagination, tableData, fetchData} = useFetchTable(
-    detail,
-    {
-      params,
-    }, false
+const { pagination, tableData, fetchData, onChange } = useFetchTable(
+  detail,
+  {
+    params,
+  },
+  false
 );
 
-
 watch(
-    () => props.visible,
-    (val) => {
-      if (val)
-
-        fetchData()
-
-    }
+  () => props.visible,
+  (val) => {
+    if (val) fetchData();
+  }
 );
 </script>