打卡改造-考勤明细修改上下班时间

src/views/business/attendance/attendanceDetails.vue

@@ -57,7 +57,6 @@
         </el-table-column>
         <!-- 基本信息分组 -->
         <el-table-column label="基本信息">
-          <!--<el-table-column prop="yong_hu_id_" title="姓名" key="yong_hu_id_" width="80" />-->
           <el-table-column
             key="deptName"
             prop="deptName"
@@ -79,12 +78,6 @@
         </el-table-column>
         <!-- 班次信息分组 -->
         <el-table-column label="班次信息">
-          <el-table-column
-            key="paiBanMingChen"
-            prop="paiBanMingChen"
-            label="排班名称"
-            min-width="140"
-          />
           <el-table-column
             key="banCiMing"
             prop="banCiMing"
@@ -201,18 +194,61 @@
             </span>
           </template>
         </el-table-column>
+
+        <!-- 操作列：编辑上下班时间 -->
+        <el-table-column label="操作" width="90" fixed="right">
+          <template #default="{ row }">
+            <el-button type="text" size="small" @click="openEditDialog(row)">
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
       </template>
     </ibps-crud>
+
+    <!-- 编辑上下班时间的弹窗 -->
+    <el-dialog
+      title="修改上下班时间"
+      :visible.sync="editDialogVisible"
+      width="500px"
+      @close="closeEditDialog"
+    >
+      <el-form :model="editForm" label-width="120px" size="small">
+        <el-form-item label="上班打卡时间">
+          <el-date-picker
+            v-model="editForm.daKaShiJian1"
+            type="datetime"
+            placeholder="选择上班打卡时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="下班打卡时间">
+          <el-date-picker
+            v-model="editForm.daKaShiJian2"
+            type="datetime"
+            placeholder="选择下班打卡时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saveLoading" @click="saveEditTime">
+          确认
+        </el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { queryAttendanceDetail } from '@/api/business/attendance'
+import { queryAttendanceDetail, gdUpdateAttendce } from '@/api/business/attendance'
 import ibpsUserSelector from '@/business/platform/org/selector'
 import FixHeight from '@/mixins/height'
 import IbpsExport from '@/plugins/export'
 import ActionUtils from '@/utils/action'
-import { del } from 'vue'
 
 export default {
   components: {
@@ -293,7 +329,6 @@ export default {
                 { value: '异常', label: '异常' }
               ]
             },
-            // { prop: 'Q^yong_hu_id_^S', label: '姓名', fieldType: 'select', options: userOption },
             {
               prop: '',
               label: '姓名',
@@ -307,7 +342,6 @@ export default {
               fieldType: 'select',
               options: deptOption
             },
-            { prop: 'Q^pai_ban_ming_chen^SL', label: '排班名称' },
             { prop: 'Q^ban_ci_ming_^SL', label: '班次名称' },
             { prop: 'Q^ban_ci_bie_ming_^SL', label: '班次别名' },
             {
@@ -319,17 +353,24 @@ export default {
           ]
         },
         columns: []
-      }
+      },
+      // 编辑弹窗相关
+      editDialogVisible: false,
+      currentEditRow: null,      // 当前正在编辑的行数据
+      editForm: {
+        id: '',
+        daKaShiJian1: '',
+        daKaShiJian2: ''
+      },
+      saveLoading: false
     }
   },
   computed: { 
     computedDateRange: {
       get() {
-        // 直接返回数据值
         return this.daterRange;
       },
       set(newValue) {
-        // 当清空时设置回空数组
         this.daterRange = newValue || [];
       }
     }
@@ -345,11 +386,9 @@ export default {
         .then((res) => {
           this.listData = res.data.dataResult
           if (this.listData.length > 0) {
-            // 做部门和姓名处理
             this.listData.forEach((item) => {
               item.userName = this.getUserLabel(item.yongHuId)
               item.deptName = this.getDeptLabel(item.buMen)
-              // 考勤状态-缺勤
               if (item.kaoQinZhuangTa === '') {
                 if(item.banCiMing == '休息'){
                   item.kaoQinZhuangTa = '无需打卡'
@@ -360,7 +399,6 @@ export default {
             })
             this.pagination.totalCount = res.data.pageResult.totalCount
           }
-
         })
         .finally(() => {
           this.loading = false
@@ -418,76 +456,19 @@ export default {
     // 导出数据
     exportData() {
       const exportColumns = [
-        {
-          field_name: 'userName',
-          label: '姓名',
-          name: 'userName'
-        },
-        {
-          field_name: 'deptName',
-          label: '部门',
-          name: 'deptName'
-        },
-        {
-          field_name: 'gongHao',
-          label: '工号',
-          name: 'gongHao'
-        },
-        {
-          field_name: 'paiBanMingChen',
-          label: '排班名称',
-          name: 'paiBanMingChen'
-        },
-        {
-          field_name: 'banCiMing',
-          label: '班次名称',
-          name: 'banCiMing'
-        },
-        {
-          field_name: 'banCiBieMing',
-          label: '班次别名',
-          name: 'banCiBieMing'
-        },
-        {
-          field_name: 'riQi',
-          label: '日期',
-          name: 'riQi'
-        },
-        {
-          field_name: 'daKaShiJian1',
-          label: '上班打卡时间',
-          name: 'daKaShiJian1'
-        },
-        {
-          field_name: 'zhuangTai1',
-          label: '上班打卡状态',
-          name: 'zhuangTai1'
-        },
-        {
-          field_name: 'daKaShiJian2',
-          label: '下班打卡时间',
-          name: 'daKaShiJian2'
-        },
-        {
-          field_name: 'zhuangTai2',
-          label: '下班打卡状态',
-          name: 'zhuangTai2'
-        },
-        {
-          field_name: 'chiDaoShiChang',
-          label: '迟到时长(分钟)',
-          name: 'chiDaoShiChang'
-        },
-        {
-          field_name: 'daKaCiShu',
-          label: '打卡次数',
-          name: 'daKaCiShu'
-        },
-        {
-          field_name: 'kaoQinZhuangTa',
-          label: '考勤状态',
-          name: 'kaoQinZhuangTa'
-        }
+        { field_name: 'userName', label: '姓名', name: 'userName' },
+        { field_name: 'deptName', label: '部门', name: 'deptName' },
+        { field_name: 'gongHao', label: '工号', name: 'gongHao' },
+        { field_name: 'banCiMing', label: '班次名称', name: 'banCiMing' },
+        { field_name: 'banCiBieMing', label: '班次别名', name: 'banCiBieMing' },
+        { field_name: 'riQi', label: '日期', name: 'riQi' },
+        { field_name: 'daKaShiJian1', label: '上班打卡时间', name: 'daKaShiJian1' },
+        { field_name: 'zhuangTai1', label: '上班打卡状态', name: 'zhuangTai1' },
+        { field_name: 'daKaShiJian2', label: '下班打卡时间', name: 'daKaShiJian2' },
+        { field_name: 'zhuangTai2', label: '下班打卡状态', name: 'zhuangTai2' },
+        { field_name: 'chiDaoShiChang', label: '迟到时长(分钟)', name: 'chiDaoShiChang' },
+        { field_name: 'daKaCiShu', label: '打卡次数', name: 'daKaCiShu' },
+        { field_name: 'kaoQinZhuangTa', label: '考勤状态', name: 'kaoQinZhuangTa' }
       ]
       this.handleExport(exportColumns, this.listData, `考勤明细统计数据`)
     },
@@ -498,15 +479,14 @@ export default {
     },
     getPrevDateString(riqi) {
       const previousDay = new Date(riqi)
-      previousDay.setDate(previousDay.getDate() - 1); // 减去1天
+      previousDay.setDate(previousDay.getDate() - 1);
       return [previousDay.getFullYear(),
-                String(previousDay.getMonth() + 1).padStart(2, '0'), // 月份从0开始需+1
+                String(previousDay.getMonth() + 1).padStart(2, '0'),
                 String(previousDay.getDate()).padStart(2, '0')
             ].join('-')
     },
     formatDateTime(row, column, cellValue) {
       if (!cellValue) return '';
-      // 方法1：使用字符串截取（推荐）
       return cellValue.substring(0, 16);
     },
     handleExport(columns, data, title, message, nameKey = 'name') {
@@ -519,6 +499,48 @@ export default {
         const msg = message || '导出成功'
         ActionUtils.success(msg)
       })
+    },
+
+    // ========= 编辑上下班时间相关方法 =========
+    openEditDialog(row) {
+      this.currentEditRow = row
+      this.editForm = {
+        id: row.id,
+        daKaShiJian1: row.daKaShiJian1 || '',
+        daKaShiJian2: row.daKaShiJian2 || ''
+      }
+      this.editDialogVisible = true
+    },
+    closeEditDialog() {
+      this.editDialogVisible = false
+      this.currentEditRow = null
+      this.editForm = { id:'',daKaShiJian1: '', daKaShiJian2: '' }
+    },
+    saveEditTime() {
+      if (!this.currentEditRow) return
+      this.saveLoading = true
+      // 调用 gdUpdateAttendce 接口，传递需要更新的字段
+      const postData = {
+        id: this.editForm.id,        // 主键字段名 id_
+        daKaShiJian1: this.editForm.daKaShiJian1,
+        daKaShiJian2: this.editForm.daKaShiJian2
+      }
+      gdUpdateAttendce(postData)
+        .then(() => {
+          this.$message.success('修改成功')
+          this.editDialogVisible = false
+          // 刷新列表以显示最新数据
+          this.loadData()
+        })
+        .catch((err) => {
+          console.error(err)
+          if(!err.cause){
+            this.$message.error('修改异常')
+          }
+        })
+        .finally(() => {
+          this.saveLoading = false
+        })
     }
   }
 }
@@ -543,4 +565,4 @@ export default {
     margin: 2px;
   }
 }
-</style>
+</style>