部门考勤修改考勤状态

client/src/views/OaSystem/attendanceCenter/components/depsUpdataDetail.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-dialog
+    v-if="dialogVisible"
+    v-model="dialogVisible"
+    title="修改"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <div class="content">
+      <div class="fromBox">
+        <p class="m-b10px">部门：</p>
+        <el-input v-model="bmName" disabled />
+      </div>
+      <div class="fromBox">
+        <p class="m-b10px">姓名：</p>
+        <el-input v-model="userName" disabled />
+      </div>
+      <div class="fromBox">
+        <p class="m-b10px m-t20px">考勤状态：</p>
+        <el-select v-model="kqState" placeholder="请选择考勤状态">
+          <el-option
+            v-for="(item, index) in getDictOptions(DICT_TYPE.ADM_ATTENDANCE_STATUS)"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="commitClick"> 确认 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'AttendanceDep' })
+import * as MineApi from '@/api/oa/attendanceCenter'
+import { ElMessage } from 'element-plus'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import moment from 'moment'
+const dialogVisible = ref(false)
+const kqState = ref('')
+const userName = ref('')
+const bmName = ref('')
+const userParams = ref({
+  id: '',
+  userId: '',
+  deptId: ''
+})
+const toMonth = ref([])
+const handleClose = (done: () => void) => {
+  done()
+}
+
+const initShow = (row, item, index, month) => {
+  dialogVisible.value = true
+  userParams.value.id = row.id
+  userParams.value.userId = row.userId
+  userParams.value.deptId = row.deptId
+  bmName.value = row.deptName
+  userName.value = row.nickName
+
+  let today = item.date
+  let toMoseMonths: any = []
+  toMoseMonths[0] = moment(today).startOf('months').format('YYYY-MM-DD') + ' 00:00:00'
+  toMoseMonths[1] = moment(today).endOf('months').format('YYYY-MM-DD') + ' 23:59:59'
+  toMonth.value = toMoseMonths
+  row.attendArray.forEach((item) => {
+    if (item.date == today) {
+      if (index == 1) {
+        kqState.value = item.swAttendanceStatus + ''
+      } else {
+        kqState.value = item.xwAttendanceStatus + ''
+      }
+    }
+  })
+}
+const emit = defineEmits(['updataInit'])
+const commitClick = () => {
+  let params = {
+    id: userParams.value.id, //	考勤状态,示例值(2)
+    userId: userParams.value.userId, //	考勤状态,示例值(2)
+    deptId: userParams.value.deptId, //	考勤状态,示例值(2)
+    attendanceStatus: Number(kqState.value) //	考勤状态,示例值(2)
+  }
+  if (kqState.value == '') {
+    ElMessage({
+      message: '请选择考勤状态！',
+      type: 'warning'
+    })
+  } else {
+    MineApi.updateWorkdayList(params).then((res) => {
+      if (res.data) {
+        dialogVisible.value = false
+        emit('updataInit', toMonth.value)
+      }
+    })
+  }
+}
+defineExpose({
+  initShow
+})
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .fromBox {
+    width: calc(50% - 10px);
+  }
+}
+</style>

client/src/views/OaSystem/attendanceCenter/dep.vue

@@ -60,6 +60,7 @@
     </div>
     <div class="depTable">
       <el-table
+        v-loading="tableLoading"
         :data="
           tableData.slice(
             (pagesList.pageNo - 1) * pagesList.pageSize,
@@ -87,7 +88,7 @@
           >
             <template #default="scope">
               <div class="iconsFlex" v-if="item.isworkday == 1">
-                <div class="sw">
+                <div class="sw" @click="swStateClick(scope.row, item, 1)">
                   <img
                     v-if="sco(scope.row, item, 1) == '1'"
                     src="@/assets/imgs/OA/kq/gouzi.png"
@@ -158,11 +159,14 @@
         @current-change="handleCurrentChange"
       />
     </div>
+
+    <DepsUpdataDetail ref="depsDetailRef" @updataInit="updataInit" />
   </div>
 </template>
 <script setup lang="ts">
 defineOptions({ name: 'AttendanceDep' })
 import * as DeptApi from '@/api/system/dept'
+import DepsUpdataDetail from './components/depsUpdataDetail.vue'
 import { defaultProps, handleTree } from '@/utils/tree'
 import * as MineApi from '@/api/oa/attendanceCenter'
 import { isArrayDelOrNickname, allDeptsArr, dayOfWeekCall } from './attendAuth'
@@ -194,13 +198,20 @@ const handleCurrentChange = async (page) => {
 }
 const querysClick = async () => {
   // initInsMouth()
+  pagesList.value.pageNo = 1
   let month = fromParams.value.month
   let toMoseMonths: any = []
   toMoseMonths[0] = moment(month).startOf('months').format('YYYY-MM-DD') + ' 00:00:00'
   toMoseMonths[1] = moment(month).endOf('months').format('YYYY-MM-DD') + ' 23:59:59'
   initInsMouth(toMoseMonths)
 }
+
+const tableLoading = ref(true)
+const updataInit = (date) => {
+  initInsMouth(date)
+}
 const initInsMouth = async (date: any) => {
+  tableLoading.value = true
   let params = {
     attendanceDate: date, //	考勤时间
     attendanceStatus: '', //	考勤状态,示例值(2)
@@ -223,6 +234,7 @@ const initInsMouth = async (date: any) => {
       let arr = allDeptsArr(restall, resArr, namesArr)
       tableData.value = arr
       pagesList.value.total = arr.length
+      tableLoading.value = false
     })
   })
 }
@@ -270,6 +282,12 @@ const initWorkDay = async (date: any) => {
 
   return await arr
 }
+const depsDetailRef = ref()
+const swStateClick = (row, item, index) => {
+  //更改上午考勤
+  console.log(row, item)
+  depsDetailRef.value.initShow(row, item, index, fromParams.value.month)
+}
 onMounted(() => {
   let toMonth = moment().format('YYYY-MM')
   fromParams.value.month = toMonth
@@ -408,6 +426,17 @@ onMounted(() => {
         justify-content: center;
         user-select: none;
       }
+
+      .sw:hover {
+        .spans {
+          color: pink;
+        }
+      }
+      .xw:hover {
+        .spans {
+          color: pink;
+        }
+      }
       .xw {
         width: 100%;
         height: 50%;