Merge remote-tracking branch 'origin/master'

src/api/home/kqdata/index.ts

@@ -0,0 +1,48 @@
+import request from '@/config/axios'
+
+// 考勤数据 VO
+export interface KqdataVO {
+  id: number|null // id
+  userName: string // 员工
+  userId: number // 员工id
+  deptName: string // 部门
+  deptId: number // 部门id
+  dayStatus: string | number[] // 工作状态
+  tokey: number // 标识
+  workDay: number // 工作天数
+  overDay: number // 加班天数
+  yoverDay: number // 年班天数
+}
+
+// 考勤数据 API
+export const KqdataApi = {
+  // 查询考勤数据分页
+  getKqdataPage: async (params: any) => {
+    return await request.get({ url: `/home/kqdata/page`, params })
+  },
+
+  // 查询考勤数据详情
+  getKqdata: async (id: number) => {
+    return await request.get({ url: `/home/kqdata/get?id=` + id })
+  },
+
+  // 新增考勤数据
+  createKqdata: async (data: KqdataVO) => {
+    return await request.post({ url: `/home/kqdata/create`, data })
+  },
+
+  // 修改考勤数据
+  updateKqdata: async (data: KqdataVO) => {
+    return await request.put({ url: `/home/kqdata/update`, data })
+  },
+
+  // 删除考勤数据
+  deleteKqdata: async (id: number) => {
+    return await request.delete({ url: `/home/kqdata/delete?id=` + id })
+  },
+
+  // 导出考勤数据 Excel
+  exportKqdata: async (params) => {
+    return await request.download({ url: `/home/kqdata/export-excel`, params })
+  },
+}

src/api/home/kqgl/index.ts

@@ -0,0 +1,45 @@
+import request from '@/config/axios'
+
+// 考勤管理 VO
+export interface KqglVO {
+  id: number // id
+  userId: number // 用户id
+  userName: string // 用户名字
+  deptId: number // 部门id
+  deptName: string // 部门名字
+  status: number // 申请状态
+  date: Date|number// 考勤日期
+}
+
+// 考勤管理 API
+export const KqglApi = {
+  // 查询考勤管理分页
+  getKqglPage: async (params: any) => {
+    return await request.get({ url: `/home/kqgl/page`, params })
+  },
+
+  // 查询考勤管理详情
+  getKqgl: async (id: number) => {
+    return await request.get({ url: `/home/kqgl/get?id=` + id })
+  },
+
+  // 新增考勤管理
+  createKqgl: async (data: KqglVO) => {
+    return await request.post({ url: `/home/kqgl/create`, data })
+  },
+
+  // 修改考勤管理
+  updateKqgl: async (data: KqglVO) => {
+    return await request.put({ url: `/home/kqgl/update`, data })
+  },
+
+  // 删除考勤管理
+  deleteKqgl: async (id: number) => {
+    return await request.delete({ url: `/home/kqgl/delete?id=` + id })
+  },
+
+  // 导出考勤管理 Excel
+  exportKqgl: async (params) => {
+    return await request.download({ url: `/home/kqgl/export-excel`, params })
+  },
+}

src/api/system/user/index.ts

@@ -21,6 +21,10 @@ export interface UserVO {
 export const getUserPage = (params: PageParam) => {
   return request.get({ url: '/system/user/page', params })
 }
+// 查询用户管理列表
+export const getUserPageKQ = (params: PageParam) => {
+  return request.get({ url: '/system/user/pageKQ', params })
+}
 
 // 查询所有用户列表
 export const getAllUser = () => {

src/router/modules/remaining.ts

@@ -760,6 +760,30 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/Home/hygl/Hyglflow'
         }
       },
+      {
+        path: 'kqnr/kqgl/KqglCreate',
+        component: () => import('@/views/Home/kqnr/kqgl/KqglCreate.vue'),
+        name: 'KqglCreate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '发起考勤管理流程',
+          activeMenu: '/Home/kqnr/kqgl/Kqglflow'
+        }
+      },
+      {
+        path: 'kqnr/kqgl/KqglDetail',
+        component: () => import('@/views/Home/kqnr/kqgl/KqglDetail.vue'),
+        name: 'KqglDetail',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '查看考勤管理流程',
+          activeMenu: '/Home/kqnr/kqgl/Kqglflow'
+        }
+      },
     ]
   },
 ]

src/views/Home/kqnr/kqdata/KqdataForm.vue

@@ -0,0 +1,131 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="员工" prop="userName">
+        <el-input v-model="formData.userName" placeholder="请输入员工" />
+      </el-form-item>
+      <el-form-item label="员工id" prop="userId">
+        <el-input v-model="formData.userId" placeholder="请输入员工id" />
+      </el-form-item>
+      <el-form-item label="部门" prop="deptName">
+        <el-input v-model="formData.deptName" placeholder="请输入部门" />
+      </el-form-item>
+      <el-form-item label="部门id" prop="deptId">
+        <el-input v-model="formData.deptId" placeholder="请输入部门id" />
+      </el-form-item>
+      <el-form-item label="工作状态" prop="dayStatus">
+        <el-input v-model="formData.dayStatus" placeholder="请输入工作状态" />
+      </el-form-item>
+      <el-form-item label="标识" prop="tokey">
+        <el-input v-model="formData.tokey" placeholder="请输入标识" />
+      </el-form-item>
+      <el-form-item label="工作天数" prop="workDay">
+        <el-input v-model="formData.workDay" placeholder="请输入工作天数" />
+      </el-form-item>
+      <el-form-item label="加班天数" prop="overDay">
+        <el-input v-model="formData.overDay" placeholder="请输入加班天数" />
+      </el-form-item>
+      <el-form-item label="年班天数" prop="yoverDay">
+        <el-input v-model="formData.yoverDay" placeholder="请输入年班天数" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { KqdataApi, KqdataVO } from '@/api/home/kqdata'
+
+/** 考勤数据 表单 */
+defineOptions({ name: 'KqdataForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  userName: undefined,
+  userId: undefined,
+  deptName: undefined,
+  deptId: undefined,
+  dayStatus: undefined,
+  tokey: undefined,
+  workDay: undefined,
+  overDay: undefined,
+  yoverDay: undefined,
+})
+const formRules = reactive({
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await KqdataApi.getKqdata(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as KqdataVO
+    if (formType.value === 'create') {
+      await KqdataApi.createKqdata(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await KqdataApi.updateKqdata(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    userName: undefined,
+    userId: undefined,
+    deptName: undefined,
+    deptId: undefined,
+    dayStatus: undefined,
+    key: undefined,
+    workDay: undefined,
+    overDay: undefined,
+    yoverDay: undefined,
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/Home/kqnr/kqdata/index.vue

@@ -0,0 +1,337 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+<!--      <el-form-item label="id" prop="id">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.id"-->
+<!--          placeholder="请输入id"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="员工" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入员工"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+<!--      <el-form-item label="员工id" prop="userId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.userId"-->
+<!--          placeholder="请输入员工id"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="部门" prop="deptName">
+        <el-input
+          v-model="queryParams.deptName"
+          placeholder="请输入部门"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+<!--      <el-form-item label="部门id" prop="deptId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.deptId"-->
+<!--          placeholder="请输入部门id"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="工作状态" prop="dayStatus">-->
+<!--        <el-select-->
+<!--          v-model="queryParams.dayStatus"-->
+<!--          placeholder="请选择工作状态"-->
+<!--          clearable-->
+<!--          class="!w-240px"-->
+<!--        >-->
+<!--          <el-option label="请选择字典生成" value="" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="标识" prop="key">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.tokey"-->
+<!--          placeholder="请输入标识"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="工作天数" prop="workDay">
+        <el-input
+          v-model="queryParams.workDay"
+          placeholder="请输入工作天数"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="加班天数" prop="overDay">
+        <el-input
+          v-model="queryParams.overDay"
+          placeholder="请输入加班天数"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+<!--      <el-form-item label="年班天数" prop="yoverDay">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.yoverDay"-->
+<!--          placeholder="请输入年班天数"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="创建时间" prop="createTime">-->
+<!--        <el-date-picker-->
+<!--          v-model="queryParams.createTime"-->
+<!--          value-format="YYYY-MM-DD HH:mm:ss"-->
+<!--          type="daterange"-->
+<!--          start-placeholder="开始日期"-->
+<!--          end-placeholder="结束日期"-->
+<!--          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+<!--        <el-button-->
+<!--          type="primary"-->
+<!--          plain-->
+<!--          @click="openForm('create')"-->
+<!--          v-hasPermi="['home:kqdata:create']"-->
+<!--        >-->
+<!--          <Icon icon="ep:plus" class="mr-5px" /> 新增-->
+<!--        </el-button>-->
+<!--        <el-button-->
+<!--          type="primary"-->
+<!--          plain-->
+<!--          @click="createUser"-->
+<!--          v-hasPermi="['home:kqdata:create']"-->
+<!--        >-->
+<!--          <Icon icon="ep:plus" class="mr-5px" /> 创建部门数据-->
+<!--        </el-button>-->
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['home:kqdata:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="序号" align="center" type="index" width="70" />
+      <el-table-column label="员工" align="center" prop="userName" />
+<!--      <el-table-column label="员工id" align="center" prop="userId" />-->
+      <el-table-column label="部门" align="center" prop="deptName" />
+<!--      <el-table-column label="部门id" align="center" prop="deptId" />-->
+<!--      <el-table-column label="工作状态" align="center" prop="dayStatus" />-->
+      <el-table-column label="标识" align="center" prop="tokey" />
+      <el-table-column label="工作天数" align="center" prop="workDay" />
+      <el-table-column label="加班天数" align="center" prop="overDay" />
+      <el-table-column label="年班天数" align="center" prop="yoverDay" />
+<!--      <el-table-column-->
+<!--        label="创建时间"-->
+<!--        align="center"-->
+<!--        prop="createTime"-->
+<!--        :formatter="dateFormatter"-->
+<!--        width="180px"-->
+<!--      />-->
+<!--      <el-table-column label="操作" align="center">-->
+<!--        <template #default="scope">-->
+<!--          <el-button-->
+<!--            link-->
+<!--            type="primary"-->
+<!--            @click="openForm('update', scope.row.id)"-->
+<!--            v-hasPermi="['home:kqdata:update']"-->
+<!--          >-->
+<!--            编辑-->
+<!--          </el-button>-->
+<!--          <el-button-->
+<!--            link-->
+<!--            type="danger"-->
+<!--            @click="handleDelete(scope.row.id)"-->
+<!--            v-hasPermi="['home:kqdata:delete']"-->
+<!--          >-->
+<!--            删除-->
+<!--          </el-button>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <KqdataForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+// import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { KqdataApi, KqdataVO } from '@/api/home/kqdata'
+import KqdataForm from './KqdataForm.vue'
+import {getUserPage} from "@/api/system/user";
+
+/** 考勤数据 列表 */
+defineOptions({ name: 'Kqdata' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<KqdataVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  id: undefined,
+  userName: undefined,
+  userId: undefined,
+  deptName: undefined,
+  deptId: undefined,
+  dayStatus: undefined,
+  tokey: undefined,
+  workDay: undefined,
+  overDay: undefined,
+  yoverDay: undefined,
+  createTime: [],
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+const queryParamsUser = reactive({
+  pageNo: 1,
+  pageSize: 100,
+  username: undefined,
+  mobile: undefined,
+  status: undefined,
+  deptId: undefined,
+  createTime: []
+})
+const daySaatus = [
+    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
+  ]
+const nowDate = Date.now();
+const createUser = async ()=>{
+  const user = await getUserPage(queryParamsUser)
+  const dataUser = user.list
+  for (let item of dataUser){
+    const data : KqdataVO = {
+      userId:item.id,
+      userName:item.username,
+      deptId:item.deptId,
+      deptName:item.nickname,
+      dayStatus:daySaatus.join(','),
+      tokey:nowDate,
+    }
+    // await KqdataApi.createKqdata(data)
+  }
+  await getList()
+  await changeStatus()
+}
+const changeStatus = async ()=>{
+  for (let item of list.value){
+    if (typeof item.dayStatus === 'string'){
+      item.dayStatus = item.dayStatus.split(',').map(Number);
+    }
+  }
+  console.log(list.value)
+}
+// console.log(data.dayStatus.split(',').map(Number));
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await KqdataApi.getKqdataPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await KqdataApi.deleteKqdata(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await KqdataApi.exportKqdata(queryParams)
+    download.excel(data, '考勤数据.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

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

@@ -0,0 +1,383 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <span style="font-size: 16px">创建考勤管理流程</span>
+    </template>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <eL-row>
+        <el-col :span="12">
+          <el-form-item label="用户名字" prop="userName">
+            <div class="pull-left" v-show="true" v-if="userInfo">{{ userInfo}} </div>
+            <div class="pull-left" v-show="true" v-if="!userInfo">获取失败 </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="部门名字" prop="deptName">
+            <div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo}} </div>
+            <div class="pull-left" v-show="true" v-if="!deptInfo">获取失败 </div>
+          </el-form-item>
+        </el-col>
+      </eL-row>
+      <el-form-item label="考勤日期" prop="date">
+        <el-date-picker
+          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 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,3)" color="yellow">休息</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>
+    </template>
+  </el-card>
+</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";
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as UserApi from '@/api/system/user'
+import {useTagsViewStore} from "@/store/modules/tagsView";
+
+/** 考勤管理 表单 */
+defineOptions({ name: 'KqglCreate' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+// const dialogVisible = ref(false) // 弹窗的是否展示
+// const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+// const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  userId: undefined,
+  userName: undefined,
+  deptId: undefined,
+  deptName: 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,1,1,1
+]
+//颜色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 { delView } = useTagsViewStore()//视图操作
+const { push, currentRoute } = useRouter()
+const processDefineKey = 'kqgl-001' // 流程定义 Key
+const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
+const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
+const userList = ref<any[]>([]) // 用户列表
+
+
+// 获取用户部门
+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 () => {
+  pop.value=false//每次打开渲染span
+  const neDate = Date.now() //获取时间表示
+  dateKey.value = (neDate / 1000 | 0) * 1000; //后端处理会默认吧后三位归零所以标识我后三位也归零
+  resetForm()
+  formLoading.value = true
+  try {
+    await getUserInfo() //获取当前用户,部门数据
+    //创建的我就新建数据,还有新建标识,把标识传递过去
+    await createUser()
+    await getList(dateKey.value)
+    await changeStatus()//把字符串工作状态更改为数组
+    await getWorkDay()//获取工作日信息
+  } finally {
+    formLoading.value = false
+  }
+  pop.value=true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 校验指定审批人++
+  if(startUserSelectTasks.value?.length > 0){
+    await startUserSelectAssigneesFormRef.value.validate()
+  }
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as KqglVO
+
+    if(startUserSelectTasks.value?.length > 0){
+      data.startUserSelectAssignees = startUserSelectAssignees.value
+    }
+
+    data.date = dateKey.value //创建后提交的时候才会更新标识
+    await KqglApi.createKqgl(data)
+    await updateUser() //提交的时候更新考勤数据
+    message.success(t('common.createSuccess'))
+
+    delView(unref(currentRoute))
+    await push({name: 'Kqgl'})
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await open()
+  const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
+    undefined,
+    processDefineKey
+  )
+  if (!processDefinitionDetail) {
+    message.error('车辆管理流程模型未配置，请检查！')
+    return
+  }
+  startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+  // 设置指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    // 设置校验规则
+    for (const userTask of startUserSelectTasks.value) {
+      startUserSelectAssignees.value[userTask.id] = []
+      startUserSelectAssigneesFormRules.value[userTask.id] = [
+        { required: true, message: '请选择审批人', trigger: 'blur' }
+      ]
+    }
+
+    // 加载用户列表
+    userList.value = await UserApi.getSimpleUserList()
+  }
+})
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    userId: undefined,
+    userName: undefined,
+    deptId: undefined,
+    deptName: undefined,
+    date: 0,
+  }
+  formRef.value?.resetFields()
+}
+</script>

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

@@ -0,0 +1,356 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <span style="font-size: 16px">考勤管理流程</span>
+    </template>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <eL-row>
+        <el-col :span="12">
+          <el-form-item label="用户名字" prop="userName">
+            <div class="pull-left" v-show="true" v-if="userInfo">{{ userInfo}} </div>
+            <div class="pull-left" v-show="true" v-if="!userInfo">获取失败 </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="部门名字" prop="deptName">
+            <div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo}} </div>
+            <div class="pull-left" v-show="true" v-if="!deptInfo">获取失败 </div>
+          </el-form-item>
+        </el-col>
+      </eL-row>
+      <el-form-item label="考勤日期" prop="date">
+        <el-date-picker
+          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}">-->
+            <template #default="{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>
+  </el-card>
+</template>
+<script setup lang="ts">
+// import { KqglApi, KqglVO } from '@/api/home/kqgl'
+import { KqglApi } from '@/api/home/kqgl'
+import {getUserProfile} from "@/api/system/user/profile";
+import {KqdataApi, KqdataVO} from "@/api/home/kqdata";
+// import {getUserPageKQ} from "@/api/system/user";
+import {propTypes} from "@/utils/propTypes";
+
+/** 考勤管理 表单 */
+defineOptions({ name: 'KqglDetail' })
+
+// const { t } = useI18n() // 国际化
+// const message = useMessage() // 消息弹窗
+
+// const dialogVisible = ref(false) // 弹窗的是否展示
+// const dialogTitle = ref('') // 弹窗的标题
+// const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  userId: undefined,
+  userName: undefined,
+  deptId: undefined,
+  deptName: 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: [],
+})
+//颜色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 { query } = useRoute() // 查询参数
+const props = defineProps({
+  id: propTypes.number.def(undefined)
+})
+
+//计算属性更新传递时间
+const computedDate = computed(() => {
+  return formData.value.date? formData.value.date : dateKey.value;
+})
+
+const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
+/** 打开弹窗 设置时间戳为固定信息 */
+const open = async () => {
+  pop.value=false//每次打开渲染span
+  resetForm()
+  formLoading.value = true
+  try {
+    await getUserInfo() //获取当前用户,部门数据
+    formData.value = await KqglApi.getKqgl(props.id || queryId)
+    await getList() //如果是修改那么我获取列表标识使用有的标识
+    await changeStatus()//把字符串工作状态更改为数组
+    await getWorkDay()//获取工作日信息
+  } finally {
+    formLoading.value = false
+  }
+}
+onMounted(async ()=>{
+  await open()
+})
+// 获取用户部门
+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 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 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 resetForm = () => {
+  formData.value = {
+    id: undefined,
+    userId: undefined,
+    userName: undefined,
+    deptId: undefined,
+    deptName: undefined,
+    date: 0,
+  }
+  formRef.value?.resetFields()
+}
+//获取所有员工的搜索条件参数
+// 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
+// ]
+//改变状态后更改对应缩影为对应值
+// 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 getInfo = async () => {
+//   pop.value=false//每次打开渲染span
+//   await getUserInfo()
+//   formLoading.value = true
+//   try {
+//     formData.value = await KqglApi.getKqgl(props.id || queryId)
+//     await getList() //如果是修改那么我获取列表标识使用有的标识
+//     await changeStatus()//把字符串工作状态更改为数组
+//     await getWorkDay()//获取工作日信息
+//   } finally {
+//     formLoading.value = false
+//   }
+// }
+// defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+// const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+// const submitForm = async () => {
+//   // 校验表单
+//   await formRef.value.validate()
+//   // 提交请求
+//   formLoading.value = true
+//   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')
+//   } finally {
+//     formLoading.value = false
+//   }
+// }
+</script>

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

@@ -0,0 +1,360 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 90%;">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <eL-row>
+        <el-col :span="12">
+          <el-form-item label="用户名字" prop="userName">
+            <div class="pull-left" v-show="true" v-if="userInfo">{{ userInfo}} </div>
+            <div class="pull-left" v-show="true" v-if="!userInfo">获取失败 </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="部门名字" prop="deptName">
+            <div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo}} </div>
+            <div class="pull-left" v-show="true" v-if="!deptInfo">获取失败 </div>
+          </el-form-item>
+        </el-col>
+      </eL-row>
+      <el-form-item label="考勤日期" prop="date">
+        <el-date-picker
+          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标签 通过 pop参数来控制渲染内容默认false渲染span上级后在渲染el-popover -->
+                <span @click="pop=true" v-if="!pop">
+                  {{workType[row.dayStatus[day - 1]]}}
+                </span>
+<!--                不同状态展示不同文字,在加载展示这个span标签 通过 pop参数来控制渲染内容默认false渲染span上级后在渲染el-popover -->
+                <el-popover disabled v-if="pop" placement="bottom" width="Min" trigger="click">
+                  <template #reference>
+                  {{workType[row.dayStatus[day - 1]]}}
+                  </template>
+                  <el-button-group>
+<!--                    传递不同的参数来对应的值, index当前渲染的数据索引,day当前渲染的工作状态索引,1对应的值-->
+                    <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>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</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' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  userId: undefined,
+  userName: undefined,
+  deptId: undefined,
+  deptName: 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 //设置过滤条件deptId为当前用户deptId
+  const user = await getUserPageKQ(queryParamsUser)//获取符合条件的所用用户
+  const dataUser = user.list
+  //循环每个用户并给他对应的数据去新建考勤数据,可以看到用户的名字部门,对应id,还有默认工作状态,时间标识,工作天数等参数来创建
+  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) => {
+  //判断是否传递事件戳 如果传递说明新建, formDate是没有时间戳信息的使用传递的,
+  // 如果没有说明是修改,使用formData的时间戳数据就好了
+  dateKey!==undefined?queryParamsData.tokey = dateKey:queryParamsData.tokey = formData.value.date
+  queryParamsData.deptId = formData.value.deptId  //设置deptId为当前流程部门id就只拿当前部门的流程就好了
+  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()//记得先清理后拿值
+  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 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  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')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    userId: undefined,
+    userName: undefined,
+    deptId: undefined,
+    deptName: undefined,
+    date: 0,
+  }
+  formRef.value?.resetFields()
+}
+</script>

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

@@ -0,0 +1,315 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+<!--      <el-form-item label="id" prop="id">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.id"-->
+<!--          placeholder="请输入id"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="用户id" prop="userId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.userId"-->
+<!--          placeholder="请输入用户id"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="用户名字" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+<!--      <el-form-item label="部门id" prop="deptId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.deptId"-->
+<!--          placeholder="请输入部门id"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="部门名字" prop="deptName">
+        <el-input
+          v-model="queryParams.deptName"
+          placeholder="请输入部门名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+<!--      <el-form-item label="考勤日期" prop="date">-->
+<!--        <el-date-picker-->
+<!--          v-model="queryParams.date"-->
+<!--          value-format="YYYY-MM-DD HH:mm:ss"-->
+<!--          type="daterange"-->
+<!--          start-placeholder="开始日期"-->
+<!--          end-placeholder="结束日期"-->
+<!--          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="创建时间" prop="createTime">-->
+<!--        <el-date-picker-->
+<!--          v-model="queryParams.createTime"-->
+<!--          value-format="YYYY-MM-DD HH:mm:ss"-->
+<!--          type="daterange"-->
+<!--          start-placeholder="开始日期"-->
+<!--          end-placeholder="结束日期"-->
+<!--          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+<!--        <el-button-->
+<!--          type="primary"-->
+<!--          plain-->
+<!--          @click="openForm('create')"-->
+<!--          v-hasPermi="['home:kqgl:create']"-->
+<!--        >-->
+<!--          <Icon icon="ep:plus" class="mr-5px" /> 新增-->
+<!--        </el-button>-->
+        <el-button
+          type="primary"
+          plain
+          @click="handleCreate()"
+          v-hasPermi="['home:kqgl:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['home:kqgl:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="序号" align="center" type="index" width="70" />
+<!--      <el-table-column label="用户id" align="center" prop="userId" />-->
+      <el-table-column label="用户名字" align="center" prop="userName" />
+<!--      <el-table-column label="部门id" align="center" prop="deptId" />-->
+      <el-table-column label="部门名字" align="center" prop="deptName" />
+      <el-table-column
+        label="考勤日期"
+        align="center"
+        prop="date"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="审批进度" align="center" prop="status" >
+        <template #default="scope">
+          <dict-tag
+            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+            :value="scope.row.status"
+          />
+        </template>
+      </el-table-column>
+<!--      <el-table-column-->
+<!--        label="创建时间"-->
+<!--        align="center"-->
+<!--        prop="createTime"-->
+<!--        :formatter="dateFormatter"-->
+<!--        width="180px"-->
+<!--      />-->
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+<!--          <el-button-->
+<!--            link-->
+<!--            type="primary"-->
+<!--            @click="openForm('update', scope.row.id)"-->
+<!--            v-hasPermi="['home:kqgl:update']"-->
+<!--          >-->
+<!--            编辑-->
+<!--          </el-button>-->
+<!--          <el-button-->
+<!--            link-->
+<!--            type="danger"-->
+<!--            @click="handleDelete(scope.row.id)"-->
+<!--            v-hasPermi="['home:kqgl:delete']"-->
+<!--          >-->
+<!--            删除-->
+<!--          </el-button>-->
+          <el-button
+            v-hasPermi="['home:clgl:update']"
+            link
+            type="primary"
+            @click="handleDetail(scope.row)"
+          >
+            详情
+          </el-button>
+          <el-button
+            v-hasPermi="['home:clgl:update']"
+            link
+            type="danger"
+            @click="handleProcessDetail(scope.row)"
+          >
+            进度
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <KqglForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { KqglApi, KqglVO } from '@/api/home/kqgl'
+import KqglForm from './KqglForm.vue'
+import * as LeaveApi from '@/api/bpm/leave'
+import router from "@/router";
+import {DICT_TYPE} from "@/utils/dict";
+
+/** 考勤管理 列表 */
+defineOptions({ name: 'Kqgl' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<KqglVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  id: undefined,
+  userId: undefined,
+  userName: undefined,
+  deptId: undefined,
+  deptName: undefined,
+  status: undefined,
+  date: [],
+  createTime: [],
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/**发起操作 */
+const handleCreate = () => {
+  router.push({ name: 'KqglCreate' })
+}
+/** 详情操作 */
+const handleDetail = (row: LeaveApi.LeaveVO) => {
+  router.push({
+    name: 'KqglDetail',
+    query: {
+      id: row.id
+    }
+  })
+}
+/** 审批进度 */
+const handleProcessDetail = (row) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
+}
+// fix: 列表不刷新的问题。
+watch(
+  () => router.currentRoute.value,
+  () => {
+    getList()
+  }
+)
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await KqglApi.getKqglPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await KqglApi.deleteKqgl(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await KqglApi.exportKqgl(queryParams)
+    download.excel(data, '考勤管理.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/Home/kqnr/kqglForm-bk.vue

@@ -0,0 +1,160 @@
+<template>
+  <ContentWrap>
+    <el-card shadow="never">
+      <template #header>
+        <span style="font-size: 16px">创建考勤管理流程</span>
+      </template>
+      <el-form label-width="70">
+        <el-form-item label="申请人" prop="userName">
+          <el-input
+            v-model="queryParams.userName"
+            placeholder="请输入申请人名字"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="申请部门" prop="deptName">
+          <el-input
+            v-model="queryParams.deptName"
+            placeholder="请输入申请部门"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="申请时间" prop="date">
+          <el-date-picker
+            v-model="queryParams.date"
+            placeholder="申请时间"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="考勤表单">
+          <el-table :data="queryParams.attendanceData" border style="width: 100%">
+            <!-- 固定姓名和部门列 -->
+            <el-table-column fixed prop="employeeName" label="姓名" width="100" />
+            <!-- 动态生成 1-31 天的列 -->
+            <el-table-column
+              v-for="day in 31"
+              :key="day"
+              :label="day.toString()+'号'"
+              width="80"
+            >
+              <template #default="{$index, row}">
+                <span :style="{
+                  color
+                  : row.dailyStatus[day - 1] === 1 ? 'green'
+                  : row.dailyStatus[day - 1] === 2 ? 'orange'
+                  : row.dailyStatus[day - 1] === 3 ? 'yellow'
+                  : row.dailyStatus[day - 1] === 4 ? 'red'
+                  : row.dailyStatus[day - 1] === 5 ? 'lime'
+                  : row.dailyStatus[day - 1] === 6 ? 'violet'
+                  : 'gray'
+                }"
+                >
+                  <el-popover placement="bottom" width="Min" trigger="click">
+                    <template #reference>
+                      {{workType[row.dailyStatus[day - 1]]}}
+                    </template>
+                    <el-row style="padding-bottom: 5px;" :gutter="5" >
+                      <el-col :span="12">
+                        <el-button @click="changeDay($index,day,1)" color="green">上班</el-button>
+                      </el-col>
+                      <el-col :span="12">
+                        <el-button @click="changeDay($index,day,2)" color="orange">缺勤</el-button>
+                      </el-col>
+                    </el-row>
+                    <el-row style="padding-bottom: 5px;" :gutter="5" >
+                      <el-col :span="12">
+                        <el-button @click="changeDay($index,day,4)" color="lime" >加班</el-button>
+                      </el-col>
+                      <el-col :span="12">
+                        <el-button @click="changeDay($index,day,5)" color="violet" >年班</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-popover>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="工作日" prop="workDay"/>
+            <el-table-column label="加班" prop="Overtime"/>
+            <el-table-column label="年班" prop="yOvertime"/>
+          </el-table>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <!--        @click="submitForm"-->
+        <el-button  type="primary">确 定</el-button>
+      </template>
+    </el-card>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts" >
+const workType = ref(
+  {
+    undefined:'选择',
+    1:'正常',
+    2:'缺勤',
+    3:'休息',
+    4:'加班',
+    5:'年班',
+  }
+)
+//改变状态后更改对应缩影为对应值
+const changeDay = async (index:number,day:number,val:number)=>{
+  queryParams.value.attendanceData[index].dailyStatus[day - 1] = val
+  await getWorkDay(index)
+}
+//根据现有索引来更新相应的加班年班
+const getWorkDay = async (index?:number)=>{
+  if (index != undefined){
+    const date = queryParams.value.attendanceData[index]
+    date.workDay = date.dailyStatus.filter(_ => _ === 1).length
+    date.Overtime = date.dailyStatus.filter(_ => _ === 4).length
+    date.yOvertime = date.dailyStatus.filter(_ => _ === 5).length
+    //date为引用类型所以不需要再赋值回去了
+  }else {
+    for (let item of queryParams.value.attendanceData){
+      item.workDay = item.dailyStatus.filter(_ => _ === 1).length
+      item.Overtime = item.dailyStatus.filter(_ => _ === 4).length
+      item.yOvertime = item.dailyStatus.filter(_ => _ === 5).length
+    }
+  }
+}
+const queryParams = ref({
+  userName: undefined,
+  userId: undefined,
+  deptName: undefined,
+  deptId: undefined,
+  date: new Date(),
+  attendanceData: [
+    {
+      employeeName: "张三",
+      dailyStatus: [
+        1, 1, 4, 2, 2, 3, 1,
+        1, 1, 1, 4, 1, 1, 1,
+        1, 1, 1, 1, 3, 1, 2,
+        1, 1, 1, 1, 3, 1, 1,
+        2,2,2,
+      ],
+      workDay: 0,
+      Overtime: 0,
+      yOvertime:0,
+    },
+    {
+      employeeName: "李四",
+      dailyStatus: [
+        1, 1, 4, 2, 1, 3, 1,
+        1, 1, 1, 4, 1, 1, 1,
+        2, 2, 1, 1, 1, 1, 2,
+        1, 1, 1, 1, 3, 1, 1,
+        2,2,2,
+      ],
+      workDay:0,
+      Overtime: 0,
+      yOvertime:0,
+    },
+  ],
+})
+onMounted(async ()=>{
+  await getWorkDay()
+})
+</script>