考勤管理

src/views/Home/kqnr/kqgl/KqglForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 90%;">
     <el-form
       ref="formRef"
       :model="formData"
@@ -7,26 +7,65 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="用户id" prop="userId">
+      <eL-row>
-        <el-input v-model="formData.userId" placeholder="请输入用户id" />
+        <el-col :span="12">
-      </el-form-item>
+          <el-form-item label="用户名字" prop="userName">
-      <el-form-item label="用户名字" prop="userName">
+            <div class="pull-left" v-show="true" v-if="userInfo">{{ userInfo}} </div>
-        <el-input v-model="formData.userName" placeholder="请输入用户名字" />
+            <div class="pull-left" v-show="true" v-if="!userInfo">获取失败 </div>
-      </el-form-item>
+          </el-form-item>
-      <el-form-item label="部门id" prop="deptId">
+        </el-col>
-        <el-input v-model="formData.deptId" placeholder="请输入部门id" />
+        <el-col :span="12">
-      </el-form-item>
+          <el-form-item label="部门名字" prop="deptName">
-      <el-form-item label="部门名字" prop="deptName">
+            <div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo}} </div>
-        <el-input v-model="formData.deptName" placeholder="请输入部门名字" />
+            <div class="pull-left" v-show="true" v-if="!deptInfo">获取失败 </div>
-      </el-form-item>
+          </el-form-item>
+        </el-col>
+      </eL-row>
       <el-form-item label="考勤日期" prop="date">
         <el-date-picker
-          v-model="formData.date"
+          v-model="computedDate"
           type="date"
           value-format="x"
           placeholder="选择考勤日期"
+          disabled
         />
       </el-form-item>
+      <el-form-item label="考勤表单">
+        <el-table :data="listData" border style="width: 100%">
+          <el-table-column fixed prop="userName" label="姓名" width="80" />
+          <!-- 动态生成 1-31 天的列 -->
+          <el-table-column
+            v-for="day in 31"
+            :key="day"
+            :label="day.toString()+'号'"
+            width="60"
+          >
+            <template #default="{$index, row}">
+              <span
+                :style="{color : colorMap[row.dayStatus[day - 1]] || 'gray' }"
+              >
+                <span @click="pop=true" v-if="!pop">
+                  {{workType[row.dayStatus[day - 1]]}}
+                </span>
+                <el-popover disabled v-if="pop" placement="bottom" width="Min" trigger="click">
+                  <template #reference>
+                  {{workType[row.dayStatus[day - 1]]}}
+                  </template>
+                  <el-button-group>
+                    <el-button @click="changeDay($index,day,1)" color="green">上班</el-button>
+                    <el-button @click="changeDay($index,day,2)" color="orange">缺勤</el-button>
+                    <el-button @click="changeDay($index,day,4)" color="red" >加班</el-button>
+                    <el-button @click="changeDay($index,day,5)" color="violet" >年班</el-button>
+                  </el-button-group>
+                </el-popover>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="工作日" prop="workDay"/>
+          <el-table-column label="加班" prop="overDay"/>
+          <el-table-column label="年班" prop="yoverDay"/>
+        </el-table>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -36,6 +75,9 @@
 </template>
 <script setup lang="ts">
 import { KqglApi, KqglVO } from '@/api/home/kqgl'
+import {getUserProfile} from "@/api/system/user/profile";
+import {KqdataApi, KqdataVO} from "@/api/home/kqdata";
+import {getUserPageKQ} from "@/api/system/user";
 
 /** 考勤管理 表单 */
 defineOptions({ name: 'KqglForm' })
@@ -53,30 +95,217 @@ const formData = ref({
   userName: undefined,
   deptId: undefined,
   deptName: undefined,
-  date: undefined,
+  date: 0,
 })
 const formRules = reactive({
   userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
   deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
   date: [{ required: true, message: '考勤日期不能为空', trigger: 'blur' }],
 })
+const pop = ref(false)//第一次打开弹窗加载span标签而不是pop组件快一点
+const dateKey = ref(0);
+const listData = ref<KqdataVO[]>([]) // 列表的数据
+//获取考勤数据的列表的参数
+const queryParamsData = reactive({
+  pageNo: 1,
+  pageSize: undefined,
+  id: undefined,
+  userName: undefined,
+  userId: undefined,
+  deptName: undefined,
+  deptId: undefined,
+  dayStatus: undefined,
+  tokey: 0,
+  workDay: undefined,
+  overDay: undefined,
+  yoverDay: undefined,
+  createTime: [],
+})
+//获取所有员工的搜索条件参数
+const queryParamsUser = reactive({
+  pageNo: 1,
+  pageSize: undefined,
+  username: undefined,
+  mobile: undefined,
+  status: undefined,
+  deptId: undefined,
+  createTime: []
+})
+//默认的工作状态
+const dayStatus = [
+  1,1,1,1,1,3,3,1,1,1,1,1,3,3,
+  1,1,1,1,1,3,3,1,1,1,1,1,3,3,3,3,3
+]
+//颜色map用来渲染表格格子的颜色,传递的值来展示对应的
+const colorMap: Record<number, string> = {
+  1: 'green',
+  2: 'orange',
+  3: 'yellow',
+  4: 'red',
+  5: 'violet',
+};
+//按key展示对应表格格子文字
+const workType = ref({
+  undefined:'空白',
+  1:'上班',
+  2:'缺勤',
+  3:'休息',
+  4:'加班',
+  5:'年班',
+});
 const formRef = ref() // 表单 Ref
+const deptInfo = ref('') // 部门信息
+const userInfo = ref('') // 用户名字
 
-/** 打开弹窗 */
+//计算属性更新传递时间
+const computedDate = computed(() => {
+  return formData.value.date? formData.value.date : dateKey.value;
+})
+
+// 获取用户部门
+const getUserInfo = async () => {
+  const user = await getUserProfile();
+  formData.value.deptId = formData.value.deptId || user.dept.id;
+  formData.value.deptName = formData.value.deptName || user.dept.name;
+  formData.value.userId = formData.value.userId || user.id;
+  formData.value.userName = formData.value.userName || user.nickname;
+  deptInfo.value = formData.value.deptName ?? '';
+  userInfo.value = formData.value.userName ?? '';
+};
+
+//根据现有索引来更新相应的加班年班
+const getWorkDay = async (index?:number)=>{
+  if (index != undefined){
+    const date = listData.value[index]
+    if (Array.isArray(date.dayStatus)){
+      date.workDay = date.dayStatus.filter(_ => _ === 1).length
+      date.overDay = date.dayStatus.filter(_ => _ === 4).length
+      date.yoverDay = date.dayStatus.filter(_ => _ === 5).length
+    }
+    //date为引用类型所以不需要再赋值回去了
+  }else {
+    for (let item of listData.value){
+      if (Array.isArray(item.dayStatus)){
+        item.workDay = item.dayStatus.filter(_ => _ === 1).length
+        item.overDay = item.dayStatus.filter(_ => _ === 4).length
+        item.yoverDay = item.dayStatus.filter(_ => _ === 5).length
+      }
+    }
+  }
+}
+
+//改变状态后更改对应缩影为对应值
+const changeDay = async (index:number,day:number,val:number)=>{
+  let dayStatus = listData.value[index].dayStatus
+  if (Array.isArray(dayStatus)){
+    dayStatus[day - 1] = val
+  }else{
+    dayStatus = [];
+    dayStatus[day - 1] = val; // 初始化值
+  }
+  await getWorkDay(index)
+}
+
+//创建用户考勤数据
+const createUser = async ()=>{
+  queryParamsUser.deptId = formData.value.deptId
+  const user = await getUserPageKQ(queryParamsUser)
+  const dataUser = user.list
+  for (let item of dataUser){
+    const data : KqdataVO = {
+      id:null,
+      userId:item.id,
+      userName:item.nickname,
+      deptId:item.deptId,
+      deptName:item.deptName,
+      dayStatus:dayStatus.join(','),
+      tokey:dateKey.value,
+      workDay: 0,
+      overDay: 0,
+      yoverDay: 0,
+    }
+    // console.log(data)
+    await KqdataApi.createKqdata(data)
+  }
+}
+
+//更新信息
+const updateUser = async ()=>{
+  for (let item of listData.value){
+    const data : KqdataVO = {
+      id:item.id,
+      userId:item.userId,
+      userName:item.userName,
+      deptId:item.deptId,
+      deptName:item.deptName,
+      dayStatus: Array.isArray(item.dayStatus)
+        ? item.dayStatus.join(',')
+        : String(item.dayStatus), // 处理非数组情况
+      tokey:item.tokey,
+      workDay: item.workDay,
+      overDay: item.overDay,
+      yoverDay: item.yoverDay,
+    }
+    console.log(data)
+    await KqdataApi.updateKqdata(data);
+  }
+}
+
+/** 查询列表 */
+const getList = async (dateKey?:number) => {
+    dateKey!==undefined?queryParamsData.tokey = dateKey:queryParamsData.tokey = formData.value.date
+    queryParamsData.deptId = formData.value.deptId
+    const data = await KqdataApi.getKqdataPage(queryParamsData)
+    listData.value = data.list
+}
+
+//回显数据的时候分离字符串状态
+const changeStatus = async ()=>{
+  formLoading.value = true
+  try {
+    for (let item of listData.value){
+      if (typeof item.dayStatus === 'string'){
+        item.dayStatus = item.dayStatus.split(',').map(Number);
+      }
+    }
+    console.log(listData.value)
+  } finally {
+    formLoading.value = false
+  }
+};
+
+/** 打开弹窗 设置时间戳为固定信息 */
 const open = async (type: string, id?: number) => {
+  pop.value=false//每次打开渲染span
+  const neDate = Date.now() //获取时间表示
+  dateKey.value = (neDate / 1000 | 0) * 1000; //后端处理会默认吧后三位归零所以标识我后三位也归零
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
-  resetForm()
+  resetForm()//记得先清理后拿值
+  await getUserInfo() //获取当前用户,部门数据
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
       formData.value = await KqglApi.getKqgl(id)
+      await getList() //如果是修改那么我获取列表标识使用有的标识
+      // console.log("formData",formData.value)
+    } finally {
+      formLoading.value = false
+    }
+  }else {
+    formLoading.value = true
+    try {
+      //判断一下是不是修改,是创建的我就新建数据,还有新建标识,把标识传递过去
+      await createUser()
+      await getList(dateKey.value)
     } finally {
       formLoading.value = false
     }
   }
+  await changeStatus()//把字符串工作状态更改为数组
+  await getWorkDay()//获取工作日信息
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -90,12 +319,14 @@ const submitForm = async () => {
   try {
     const data = formData.value as unknown as KqglVO
     if (formType.value === 'create') {
+      data.date = dateKey.value //创建后提交的时候才会更新标识
       await KqglApi.createKqgl(data)
       message.success(t('common.createSuccess'))
     } else {
       await KqglApi.updateKqgl(data)
       message.success(t('common.updateSuccess'))
     }
+    await updateUser() //提交的时候更新考勤数据
     dialogVisible.value = false
     // 发送操作成功的事件
     emit('success')
@@ -112,7 +343,7 @@ const resetForm = () => {
     userName: undefined,
     deptId: undefined,
     deptName: undefined,
-    date: undefined,
+    date: 0,
   }
   formRef.value?.resetFields()
 }