银川 1.考勤管理页面开发、联调

gaoluyang

2026-07-08 4ffc61bbe8dd6ec89965a8e2448725f514075b53

 src/views/hrm/attendance/exception/index.vue

@@ -2,12 +2,18 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { HrmAttendanceExceptionApi } from '#/api/hrm/attendance/exception';

import { ref } from 'vue';

import { Page, useVbenModal } from '#/packages/effects/common-ui/src';

import { message } from 'ant-design-vue';
import { message, Modal, Select } from 'ant-design-vue';

import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getAttendanceExceptionPage, submitAttendanceException } from '#/api/hrm/attendance/exception';
import {
  getAttendanceExceptionApproveProcessList,
  getAttendanceExceptionPage,
  submitAttendanceException,
} from '#/api/hrm/attendance/exception';
import { $t } from '#/locales';

import { useGridColumns, useGridFormSchema } from './data';
@@ -33,11 +39,37 @@
  formModalApi.setData({ id: row.id, formType: 'detail' }).open();
}

/** 提交审批弹窗 */
const submitModalVisible = ref(false);
const currentRow = ref<HrmAttendanceExceptionApi.AttendanceException>();
const processList = ref<HrmAttendanceExceptionApi.ApproveProcess[]>([]);
const selectedProcessKey = ref<string>();
const submitLoading = ref(false);

/** 提交考勤异常申请 */
async function handleSubmit(row: HrmAttendanceExceptionApi.AttendanceException) {
  await submitAttendanceException(row.id!);
  message.success('提交成功');
  handleRefresh();
  const res = await getAttendanceExceptionApproveProcessList();
  processList.value = res;
  currentRow.value = row;
  selectedProcessKey.value = undefined;
  submitModalVisible.value = true;
}

/** 确认提交 */
async function confirmSubmit() {
  if (!selectedProcessKey.value) {
    message.warning('请选择审批流程');
    return;
  }
  submitLoading.value = true;
  try {
    await submitAttendanceException(currentRow.value!.id!, selectedProcessKey.value);
    message.success('提交审批成功');
    submitModalVisible.value = false;
    handleRefresh();
  } finally {
    submitLoading.value = false;
  }
}

const [Grid, gridApi] = useVbenVxeGrid({
@@ -106,5 +138,28 @@
        />
      </template>
    </Grid>

    <!-- 提交审批弹窗 -->
    <Modal
      v-model:open="submitModalVisible"
      title="选择审批流程"
      width="400px"
      @ok="confirmSubmit"
      :confirmLoading="submitLoading"
    >
      <Select
        v-model:value="selectedProcessKey"
        placeholder="请选择审批流程"
        class="w-full"
      >
        <Select.Option
          v-for="item in processList"
          :key="item.key"
          :value="item.key"
        >
          {{ item.name }}
        </Select.Option>
      </Select>
    </Modal>
  </Page>
</template>