<script lang="ts" setup>
|
import { ref } from 'vue';
|
|
import { useVbenModal } from '#/packages/effects/common-ui/src';
|
|
import { message } from 'ant-design-vue';
|
|
import { clockIn, clockOut } from '#/api/hrm/attendance/record';
|
|
const emit = defineEmits(['success']);
|
|
const location = ref('公司前台');
|
const loading = ref(false);
|
|
/** 上班打卡 */
|
async function handleClockIn() {
|
loading.value = true;
|
try {
|
await clockIn({ location: location.value });
|
message.success('上班打卡成功');
|
emit('success');
|
} catch (e: any) {
|
message.error(e.message || '打卡失败');
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
/** 下班打卡 */
|
async function handleClockOut() {
|
loading.value = true;
|
try {
|
await clockOut({ location: location.value });
|
message.success('下班打卡成功');
|
emit('success');
|
} catch (e: any) {
|
message.error(e.message || '打卡失败');
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
const [Modal, modalApi] = useVbenModal({
|
onOpenChange(isOpen: boolean) {
|
if (!isOpen) {
|
location.value = '公司前台';
|
}
|
},
|
});
|
</script>
|
|
<template>
|
<Modal title="打卡" class="w-[400px]">
|
<div class="p-4">
|
<div class="mb-4">
|
<label class="mr-2">打卡地点：</label>
|
<a-input
|
v-model:value="location"
|
placeholder="请输入打卡地点"
|
style="width: 200px"
|
/>
|
</div>
|
<div class="flex gap-4">
|
<a-button
|
type="primary"
|
size="large"
|
:loading="loading"
|
@click="handleClockIn"
|
>
|
上班打卡
|
</a-button>
|
<a-button
|
size="large"
|
:loading="loading"
|
@click="handleClockOut"
|
>
|
下班打卡
|
</a-button>
|
</div>
|
</div>
|
</Modal>
|
</template>
|
