1、考勤组详情

2025-07-22 19:11:52 +08:00
parent 34d50c58af
commit b94c6c9268
8 changed files with 444 additions and 89 deletions
--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue
@@ -20,7 +20,7 @@ import {
  noClockingColumns,
  weekdayColumns
 } from './data';
-import {Tag, Button, Table, Checkbox} from 'ant-design-vue'
+import {Tag, Button, Table, Checkbox, Select, SelectOption,message} from 'ant-design-vue'
 import {getDictOptions} from "#/utils/dict";
 import holidayCalendar from './holiday-calendar.vue'
 import changeShiftSchedule from './change-shift-schedule.vue'
@@ -86,7 +86,9 @@ const [BasicModal, modalApi] = useVbenModal({
        weekdayData.value.push({
          dayOfWeek: item.value,
          label: item.label,
-          shift: item.value == '6' || item.value == '7' ? '休息' : '常规班次：08:00:00~12:00:00    14:00:00~17:00:00'
+          shiftValue: '休息',
+          isRest: true,
+          shiftId: null,
        })
      })
    }
@@ -118,6 +120,9 @@ async function handleConfirm() {
 async function handleClosed() {
  await formApi.resetForm();
  resetInitialized();
+  cycleData.value = []
+  unCheckInData.value = []
+  checkInData.value = []
 }

 const [HolidayCalendar, holidayApi] = useVbenModal({
@@ -142,59 +147,122 @@ async function showHoliday() {
 * 更改班次
 * @param type 1.设置班次 2.选择班次
 */
-async function shiftScheduleHandle(type) {
-  await shiftApi.open()
-  await shiftApi.setData({type})
-}
-
-async function changeShiftHandle(type, index) {
-  await shiftApi.open()
-  await shiftApi.setData({type})//3.更改班次
-}
-
-async function selectDateHandle(type) {
-  checkInDateApi.open()
-  checkInDateApi.setData({type})
+async function shiftScheduleHandle(type: number) {
+  shiftApi.setData({type})
+  shiftApi.open()
 }

 const shiftInfo = ref<ShiftVO>()
 const shiftList = ref<ShiftVO[]>([])
-const handleShiftInfo = (info) => {
-  shiftInfo.value = info;
+const handleShiftInfo = (info: ShiftVO) => {
+  if (info) {
+    shiftInfo.value = info;
+    weekdayData.value.forEach(item => {
+      item.shiftId = info.id
+      let str = ''
+      if (info.isRest) {
+        str = `${info.name}：${info.startTime}~${info.restStartTime} ${info.restEndTime}~${info.endTime}`;
+      } else {
+        str = `${info.name}：${info.startTime}~${info.endTime}`;
+      }
+      item.shiftValue = str
+      item.isRest = false
+    })
+  }
 };

-const handleShiftList = (list) => {
+const handleShiftList = (list: any[]) => {
  shiftList.value = list;
 };

-const handleAfterValue = (val) => {
-  console.log(val, '===val')
-};

 const cycleData = ref<any[]>([])
 const unCheckInData = ref<any[]>([])
 const checkInData = ref<any[]>([])

 async function addCycleHandle() {
-  cycleData.value.push({
-    shiftId: '',
-  })
+  if(cycleData.value.length<31){
+    cycleData.value.push({
+      shiftId: '',
+    })
+  }else {
+    message.warning('周期天数最多31天。');
+  }
 }

-async function deleteCycleHandle(index) {
-  cycleData.value.splice(index, 1)
+async function deleteCycleHandle(index: number) {
+  if(cycleData.value.length>2){
+    cycleData.value.splice(index, 1)
+  }else {
+    message.warning('周期天数最少2天。');
+  }
 }

-async function deleteUnCheckInHandle(index) {
+async function deleteUnCheckInHandle(index: number) {
  unCheckInData.value.splice(index, 1)
 }

-async function deleteCheckInHandle(index) {
+async function deleteCheckInHandle(index: number) {
  checkInData.value.splice(index, 1)
 }

-async function restHandle(index){
+const tableIndex = ref(-1)

+async function changeShiftHandle(type: number, index: number) {
+  tableIndex.value = index
+  shiftApi.setData({type})//3.更改班次
+  shiftApi.open()
+
+}
+
+async function restHandle(index: number) {
+  weekdayData.value[index].isRest = true
+  weekdayData.value[index].shiftValue = '休息'
+}
+
+const handleAfterValue = (val: ShiftVO) => {
+  if (tableIndex.value > -1 && val) {
+    weekdayData.value[tableIndex.value].shiftId = val.id
+    let str = ''
+    if (val.isRest) {
+      str = `${val.name}：${val.startTime}~${val.restStartTime} ${val.restEndTime}~${val.endTime}`;
+    } else {
+      str = `${val.name}：${val.startTime}~${val.endTime}`;
+    }
+    weekdayData.value[tableIndex.value].shiftValue = str
+    weekdayData.value[tableIndex.value].isRest = false
+  }
+};
+
+const closeHandle = (i: number) => {
+  shiftList.value.splice(i, 1)
+};
+
+const checkInIndex = ref(-1)
+
+async function addCheckInHandle(index: number) {
+  checkInIndex.value = index
+  checkInDateApi.setData({check: true})
+  checkInDateApi.open()
+}
+
+const getCheckInData = (val: any) => {
+  if (val) {
+    checkInData.value.push(val)
+  }
+}
+const unCheckInIndex = ref(-1)
+
+async function addUnCheckInHandle(index: number) {
+  unCheckInIndex.value = index
+  checkInDateApi.setData({check: false})
+  checkInDateApi.open()
+}
+
+const getUnCheckInData = (val: any) => {
+  if (val) {
+    unCheckInData.value.push(val)
+  }
 }

 </script>
@@ -224,8 +292,11 @@ async function restHandle(index){
                 size="small" :pagination="false">
            <template #bodyCell="{ column, record,index }">
              <template v-if="column.dataIndex==='action'">
-                <Button type="link" size="small" @click="changeShiftHandle(3)">更改班次</Button>
-                <Button type="link" size="small" @click="restHandle(index)">休息</Button>
+                <Button type="link" size="small" @click="changeShiftHandle(3,index)">更改班次
+                </Button>
+                <Button type="link" size="small" @click="restHandle(index)" v-if="!record.isRest">
+                  休息
+                </Button>
              </template>
            </template>
          </Table>
@@ -241,17 +312,21 @@ async function restHandle(index){
            <template #headerCell="{ column }">
              <template v-if="column.dataIndex === 'action'">
                <Button size="small" type="primary" shape="circle"
-                        @click="selectDateHandle"
+                        @click="addUnCheckInHandle"
                        :icon="h(PlusOutlined)">
                </Button>
              </template>
            </template>
-            <template #bodyCell="{ column, record,index }">
+            <template #bodyCell="{ column,record,index }">
              <template v-if="column.dataIndex==='action'">
                <Button size="small" type="primary" shape="circle"
                        danger :icon="h(MinusOutlined)" @click="deleteUnCheckInHandle(index)">
                </Button>
              </template>
+              <template v-if="column.dataIndex==='dateTime'">
+                <span v-if="record.dateType==0">{{ record.startDate }}</span>
+                <span v-else>{{ record.startDate + '~' + record.endDate }}</span>
+              </template>
            </template>
          </Table>
          <p class="item-padding">必须打卡日期：</p>
@@ -260,12 +335,16 @@ async function restHandle(index){
            <template #headerCell="{ column }">
              <template v-if="column.dataIndex === 'action'">
                <Button size="small" type="primary" shape="circle"
-                        @click="selectDateHandle"
+                        @click="addCheckInHandle"
                        :icon="h(PlusOutlined)">
                </Button>
              </template>
            </template>
-            <template #bodyCell="{ column, record,index }">
+            <template #bodyCell="{ column,record,index }">
+              <template v-if="column.dataIndex==='dateTime'">
+                <span v-if="record.dateType==0">{{ record.startDate }}</span>
+                <span v-else>{{ record.startDate + '~' + record.endDate }}</span>
+              </template>
              <template v-if="column.dataIndex==='action'">
                <Button size="small" type="primary" shape="circle"
                        danger :icon="h(MinusOutlined)" @click="deleteCheckInHandle(index)">
@@ -280,15 +359,17 @@ async function restHandle(index){
      </template>
      <template #shiftData>
        <div v-if="shiftList">
-          <Tag closable color="processing" v-for="(item,index) in shiftList">
+          <Tag closable color="processing" v-for="(item,i) in shiftList" @close="closeHandle(i)">
            {{ item.name }}
          </Tag>
        </div>
      </template>
      <template #schedulingCycle>
        <span class="item-font">周期天数
-          <span style="font-weight: 500;color: red">{{ cycleData.length }}</span>
-          天</span>
+          <span class="item-font-weight item-font-color">{{ cycleData.length }}</span>
+          天
+          <span style="color:#b2b0b0;">（周期最少2天，最多31天）</span>
+        </span>
      </template>
      <template #cycleData>
        <Table style="width: 80%" bordered :columns="cycleColumns" :data-source="cycleData"
@@ -300,12 +381,30 @@ async function restHandle(index){
              </Button>
            </template>
          </template>
-          <template #bodyCell="{ column, record,index }">
+          <template #bodyCell="{ column,record,index }">
            <template v-if="column.dataIndex==='action'">
              <Button size="small" type="primary" shape="circle"
                      danger :icon="h(MinusOutlined)" @click="deleteCycleHandle(index)">
              </Button>
            </template>
+            <template v-if="column.dataIndex==='day'">
+              <span>{{ '第' + (index + 1) + '天' }}</span>
+            </template>
+            <template v-if="column.dataIndex==='shiftId'">
+              <Select
+                ref="select"
+                style="width: 100%"
+                v-model:value="record.shiftId"
+                placeholder="请选择班次"
+              >
+                <SelectOption v-for="item in shiftList" :value="item.id">
+                  {{ item.name + '\xa0' }}
+                  <span
+                    v-if="item.isRest">{{ item.startTime + '~' + item.restStartTime + '\xa0' + item.restEndTime + '~' + item.endTime }}</span>
+                  <span v-else>{{ item.startTime + '~' + item.endTime }}</span>
+                </SelectOption>
+              </Select>
+            </template>
          </template>
        </Table>
      </template>
@@ -315,7 +414,9 @@ async function restHandle(index){
                         @shiftList="handleShiftList"
                         @afterValue="handleAfterValue"
    ></ChangeShiftSchedule>
-    <CheckInDate></CheckInDate>
+    <CheckInDate @checkIn="getCheckInData"
+                 @unCheckIn="getUnCheckInData"
+    ></CheckInDate>
  </BasicModal>
 </template>
 <style lang="scss" scoped>
@@ -327,6 +428,10 @@ async function restHandle(index){
  font-weight: 500;
 }

+.item-font-color {
+  color: red;
+}
+
 .item-padding-top {
  padding-top: 1.1rem;
 }