考勤明细新增记录功能

src/views/business/attendance/attendanceDetails.vue

@@ -5,7 +5,7 @@
       :display-field="title"
       :height="height"
       :data="listData"
-      :toolbars="listConfig.toolbars"
+      :toolbars="finalToolbars"
       :search-form="listConfig.searchForm"
       :pk-key="pkKey"
       :columns="listConfig.columns"
@@ -265,11 +265,91 @@
         </el-button>
       </span>
     </el-dialog>
+
+    <!-- 新增补卡/打卡弹窗 -->
+    <el-dialog
+      title="新增考勤记录"
+      :visible.sync="addDialogVisible"
+      width="600px"
+      @close="closeAddDialog"
+    >
+      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="120px" size="small">
+        <el-form-item label="用户" prop="yongHuId">
+          <ibps-user-selector
+            v-model="addForm.yongHuId"
+            type="user"
+            readonly-text="text"
+            :multiple="false"
+            :filter="filter"
+            filtrate
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="部门" prop="buMen">
+          <el-select v-model="addForm.buMen" placeholder="请选择部门" clearable style="width: 100%">
+            <el-option
+              v-for="item in deptOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="配置名称" prop="paiBanMingChen">
+          <el-input v-model="addForm.paiBanMingChen" placeholder="请输入排班配置名称" />
+        </el-form-item>
+        <el-form-item label="排班类型" prop="banCiMing">
+          <el-input v-model="addForm.banCiMing" placeholder="请输入班次名称" />
+        </el-form-item>
+        <el-form-item label="补卡类型" prop="clockType">
+          <el-select v-model="addForm.clockType" placeholder="请选择补卡类型" clearable style="width: 100%">
+            <el-option label="上班卡" value="1" />
+            <el-option label="下班卡" value="2" />
+            <el-option label="补卡" value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日期" prop="riQi">
+          <el-date-picker
+            v-model="addForm.riQi"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+            style="width: 100%"
+            :picker-options="pickerOptions"
+          />
+        </el-form-item>
+        <!-- 动态显示打卡时间字段 -->
+        <el-form-item v-if="addForm.clockType === '1' || addForm.clockType === '3'" label="上班打卡时间" prop="daKaShiJian1">
+          <el-date-picker
+            v-model="addForm.daKaShiJian1"
+            type="datetime"
+            placeholder="选择上班打卡时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item v-if="addForm.clockType === '2' || addForm.clockType === '3'" label="下班打卡时间" prop="daKaShiJian2">
+          <el-date-picker
+            v-model="addForm.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="addDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="addLoading" @click="saveAddRecord">
+          确认
+        </el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { queryAttendanceDetail, gdUpdateAttendce,removeAttendanceDetail } from '@/api/business/attendance'
+import { queryAttendanceDetail, gdUpdateAttendce, removeAttendanceDetail, gdClockIn } from '@/api/business/attendance'
 import ibpsUserSelector from '@/business/platform/org/selector'
 import FixHeight from '@/mixins/height'
 import IbpsExport from '@/plugins/export'
@@ -403,7 +483,52 @@ export default {
         daKaShiJian2: '',
         beiZhu: ''
       },
-      saveLoading: false
+      saveLoading: false,
+      // 新增弹窗相关
+      addDialogVisible: false,
+      addLoading: false,
+      addForm: {
+        yongHuId: '',
+        paiBanMingChen: '',
+        banCiMing: '',
+        buMen: '',
+        clockType: '',
+        daKaShiJian1: '',
+        daKaShiJian2: '',
+        riQi: ''
+      },
+      addFormRules: {
+        yongHuId: [{ required: true, message: '请选择用户', trigger: 'change' }],
+        paiBanMingChen: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
+        banCiMing: [{ required: true, message: '请输入排班类型', trigger: 'blur' }],
+        buMen: [{ required: true, message: '请选择部门', trigger: 'change' }],
+        clockType: [{ required: true, message: '请选择补卡类型', trigger: 'change' }],
+        riQi: [{ required: true, message: '请选择日期', trigger: 'change' }],
+        daKaShiJian1: [
+          {
+            validator: (rule, value, callback) => {
+              if ((this.addForm.clockType === '1' || this.addForm.clockType === '3') && !value) {
+                callback(new Error('上班打卡时间不能为空'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'blur'
+          }
+        ],
+        daKaShiJian2: [
+          {
+            validator: (rule, value, callback) => {
+              if ((this.addForm.clockType === '2' || this.addForm.clockType === '3') && !value) {
+                callback(new Error('下班打卡时间不能为空'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'blur'
+          }
+        ]
+      }
     }
   },
   computed: {
@@ -419,6 +544,22 @@ export default {
     isQualityManager() {      
       const userInfo = this.$store.getters.userInfo
       return userInfo.role.some(role => role.alias === 'zlfzr') || userInfo.role.some(role => role.alias === 'xtgljs')
+    },
+    // 动态工具栏（根据权限添加新增按钮）
+    finalToolbars() {
+      const toolbars = [...this.listConfig.toolbars]
+      if (this.isQualityManager) {
+        // 在查询按钮之后，导出之前插入新增按钮（可根据需求调整顺序）
+        const addBtn = {
+          key: 'add',
+          icon: 'ibps-icon-add',
+          label: '新增',
+          type: 'success'
+        }
+        // 插入到第二个位置（查询之后，导出之前）
+        toolbars.splice(1, 0, addBtn)
+      }
+      return toolbars
     }
   },
   created() {
@@ -500,6 +641,9 @@ export default {
         case 'remove':
           this.handleRemove(selection)
           break
+        case 'add':
+          this.openAddDialog()
+          break
       }
     },
      // 删除记录
@@ -637,6 +781,78 @@ export default {
             this.saveLoading = false
           })
       })
+    },
+
+    // ========= 新增考勤记录相关方法 =========
+    openAddDialog() {
+      this.addForm = {
+        yongHuId: '',
+        paiBanMingChen: '',
+        banCiMing: '',
+        buMen: '',
+        clockType: '',
+        daKaShiJian1: '',
+        daKaShiJian2: '',
+        riQi: ''
+      }
+      this.addDialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.addFormRef) {
+          this.$refs.addFormRef.clearValidate()
+        }
+      })
+    },
+    closeAddDialog() {
+      this.addDialogVisible = false
+      this.addForm = {
+        yongHuId: '',
+        paiBanMingChen: '',
+        banCiMing: '',
+        buMen: '',
+        clockType: '',
+        daKaShiJian1: '',
+        daKaShiJian2: '',
+        riQi: ''
+      }
+    },
+    saveAddRecord() {
+      this.$refs.addFormRef.validate((valid) => {
+        if (!valid) return
+        this.addLoading = true
+
+        // 构建请求参数，只根据 clockType 传递必要字段
+        const postData = {
+          yongHuId: this.addForm.yongHuId,
+          paiBanMingChen: this.addForm.paiBanMingChen,
+          banCiMing: this.addForm.banCiMing,
+          buMen: this.addForm.buMen,
+          clockType: this.addForm.clockType,
+          riQi: this.addForm.riQi
+        }
+
+        // 根据补卡类型添加对应时间字段
+        if (this.addForm.clockType === '1' || this.addForm.clockType === '3') {
+          postData.daKaShiJian1 = this.addForm.daKaShiJian1
+        }
+        if (this.addForm.clockType === '2' || this.addForm.clockType === '3') {
+          postData.daKaShiJian2 = this.addForm.daKaShiJian2
+        }
+
+        gdClockIn(postData)
+          .then(() => {
+            this.$message.success('新增考勤记录成功')
+            this.addDialogVisible = false
+            // 刷新列表
+            this.loadData()
+          })
+          .catch((err) => {
+            console.error(err)
+            this.$message.error(err.message || '新增失败，请稍后重试')
+          })
+          .finally(() => {
+            this.addLoading = false
+          })
+      })
     }
   }
 }