feat：考勤打卡

src/api/attendance/clock.js

+import request from '@/utils/request'
+
+// 查询考勤打卡列表
+export function listClock(query) {
+    return request({
+        url: '/psa/clock/list',
+        method: 'get',
+        params: query
+    })
+}
+// 查询草稿箱列表
+export function listDraftClock(query) {
+    return request({
+        url: '/psa/clock/draft',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询考勤打卡详细
+export function getClock(id) {
+    return request({
+        url: '/psa/clock/' + id,
+        method: 'get'
+    })
+}
+
+// 新增考勤打卡
+export function addClock(data) {
+    return request({
+        url: '/psa/clock',
+        method: 'post',
+        data: data
+    })
+}
+// 新增草稿箱
+export function addClockDraft(data) {
+    return request({
+        url: '/psa/clock/draft',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改考勤打卡
+export function updateClock(data) {
+    return request({
+        url: '/psa/clock',
+        method: 'put',
+        data: data
+    })
+}
+
+// 删除考勤打卡
+export function delClock(id) {
+    return request({
+        url: '/psa/clock/' + id,
+        method: 'delete'
+    })
+}
+//导入方法
+export function importData(file) {
+    return request({
+        data: file,
+        url: '/psa/clock/import' ,
+        method: 'post',
+        headers: {
+            'Content-Type': 'multipart/form-data'
+        }
+    })
+}

src/views/attendance/clock/add.vue

+<template>
+  <div class="app-container">
+    <h1 class="title">{{ title }}</h1>
+    <div class="blue"></div>
+    <el-form class="form-add"  ref="clockRef" :model="form" :rules="rules" label-width="100px">
+      <el-form-item class="font" label="姓名"           prop="employeeName">
+        <el-input style="width: 400px ;height: 40px"  class="frame" v-model="form.employeeName" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item class="font" label="部门"          prop="departmentName">
+        <el-select style="width: 400px; height: 40px;" v-model="form.departmentName" placeholder="请选择部门">
+          <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item class="font" label="打卡日期"       prop="candidateDate">
+        <el-date-picker
+                        style="width: 400px ; height: 40px"
+                        clearable
+                        v-model="form.candidateDate"
+                        type="date"
+                        value-format="YYYY-MM-DD"
+                        placeholder="请选择打卡日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item class="font" label="打卡时段"        prop="isClock"   >
+        <el-select v-model="form.isClock" placeholder="请选择打卡时段"  style="height: 50px;width: 400px" size="large">
+          <el-option
+
+                      v-for="dict in time_difference"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item class="font" label="打卡时间"   label-class="label-class"      prop="clockTime">
+        <el-time-picker
+            v-model="form.clockTime"
+            placeholder="请选择时间"
+            format="HH:mm"
+            value-format="HH:mm"
+            style="width: 400px ;height: 40px"
+        >
+
+        </el-time-picker>
+      </el-form-item>
+    </el-form>
+    <!-- 提交和保存草稿按钮 -->
+    <div class="buttons">
+      <el-button class="button-1" @click="resets">取消</el-button>
+      <el-button class="button-2" type="primary" @click="saveDraft">保存</el-button>
+      <el-button class="button-3" type="primary" @click="submitForm" >确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+import { addClock, updateClock,getClock,addClockDraft } from "@/api/attendance/clock";
+import ImportTable from "../../tool/gen/importTable.vue";
+const { proxy } = getCurrentInstance();
+const { clock_status, time_difference } = proxy.useDict('clock_status', 'time_difference');
+
+
+const open = ref(false);
+const loading = ref(true);
+
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    employeeId: null,
+    employeeName: null,
+    departmentName: null,
+    candidateDate: null,
+    isClock: null,
+    checkInStatus: null,
+  },
+});
+const options = [
+  {
+    value: '行政管理服务部',
+    label: '行政管理服务部'
+  },
+  {
+    value: '人才服务事业部',
+    label: '人才服务事业部'
+  },
+  {
+    value: '教育培训事业部',
+    label: '教育培训事业部'
+  },
+  {
+    value: '软件服务事业部',
+    label: '软件服务事业部'
+  },
+  {
+    value: '综合管理事业部',
+    label: '综合管理事业部'
+  },
+  {
+    value: '日本事业服务部',
+    label: '日本事业服务部'
+  },
+  {
+    value: '公司',
+    label: '公司'
+  },
+]
+const rules = ref({
+  employeeName: [
+    { required: true, message: '姓名不能为空', trigger: 'blur' }
+  ],
+  departmentName: [
+    { required: true, message: '部门不能为空', trigger: 'blur' }
+  ],
+  candidateDate: [
+    { required: true, message: '打卡日期不能为空', trigger: 'blur' }
+  ],
+  isClock: [
+    { required: true, message: '打卡时段不能为空', trigger: 'blur' }
+  ],
+  clockTime: [
+    { required: true, message: '打卡时间不能为空', trigger: 'blur' }
+  ],
+})
+const { queryParams, form } = toRefs(data);
+const route = useRoute();
+//保存
+function submitForm() {
+  proxy.$refs["clockRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateClock(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          proxy.$router.push({ path: '/attendance/clock' })
+        });
+      } else {
+        addClock(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          proxy.$router.push({ path: '/attendance/clock' })
+        });
+      }
+    }
+  });
+}
+// 保存草稿
+const saveDraft = () => {
+  proxy.$refs["clockRef"].validate(valid => {
+    if (valid) {
+        addClockDraft(form.value).then(response => {
+          proxy.$modal.msgSuccess("已存入草稿箱");
+          proxy.$router.push({ path: '/attendance/clock' })
+        });
+    }
+  });
+}
+
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    employeeId: null,
+    userId: null,
+    deptId: null,
+    projectId: null,
+    employeeName: null,
+    departmentName: null,
+    candidateDate: null,
+    isClock: null,
+    clockTime: null,
+    checkInStatus: null,
+    creatBy: null,
+    creatTime: null,
+    updateTime: null,
+    draft: null,
+    delFlag: null
+  };
+  proxy.resetForm("clockRef");
+}
+// 返回页面
+const resets = () => {
+  // 返回考勤
+  // resetForm()
+  proxy.$router.push({ path: '/attendance/clock' })
+
+}
+// 在组件挂载时执行
+onMounted(() => {
+   const _id = route.query.id
+  console.log(_id)
+  if (_id){
+    getClock(_id).then(response => {
+      title.value="修改考勤"
+      form.value = response.data;
+      console.log(response.data)
+      console.log(form.value)
+    });
+  }else{
+    title.value="新增考勤"
+  }
+})
+</script>
+<style scoped>
+.app-container{
+  height: 400px;
+  width: 1622px;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 16px 28px 29px 20px;
+  background: #FFFFFF;
+  box-shadow: 0 2px 2px 0 #b3b3b380;
+  border-radius: 2px;
+}
+.title{
+  margin:7px 0 8px 32px;
+  width: 72px;
+  height: 15px;
+  font-weight: 500;
+  font-size: 18px;
+  color: #0D162A;
+  letter-spacing: 0;
+  line-height: 15px;
+}
+.blue{
+  margin-left: 32px;
+  width: 72px;
+  height: 4px;
+  background: #0062FF;
+}
+.form-add{
+  margin-top: 31px;
+  margin-left: 90px;
+  width: 800px;
+  height: 500px;
+}
+::v-deep(.el-form-item__label) {
+  width: 64px;
+  height: 13px;
+  font-weight: 400;
+  font-size: 16px;
+  color: #282D35;
+  //letter-spacing: 0;
+  //text-align: right;
+  line-height: 47px;
+}
+::v-deep(.custom-size) {
+  width: 400px !important;
+  height: 40px !important;
+}
+
+::v-deep(.custom-size .el-input__wrapper) {
+  height: 40px !important;
+}
+.frame{
+  width: 400px;
+  height: 40px;
+  border-radius: 2px;
+}
+.font{
+  height: 50px;
+  width: 800px;
+  margin: 24px 0 0 0 ;
+}
+.buttons{
+  margin: 150px 0px 70px 1174px;
+}
+.button-1 {
+  width: 116px;
+  height: 40px;
+  //border: 1px solid ;
+}
+.button-2 {
+  width: 116px;
+  height: 40px;
+  background: #0147EB;
+}
+.button-3 {
+  width: 116px;
+  height: 40px;
+  background: #0147EB;
+}
+</style>