site-web/src/components/business/CheckIn/index.vue

<template>
  <div>
    <a-modal
      v-model:visible="visible"
      :title="$t('navbar.check.info')"
      @cancel="() => handleCancel()"
      @before-ok="handleBeforeOk"
    >
      <a-form :model="form">
        <a-form-item field="name" label="ID">
          <a-input v-model="form.id" placeholder="ID" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts" name="CheckInPage">
import { reactive, ref, shallowRef, watch, getCurrentInstance } from 'vue';
import { fetchCheckIn } from '@/api/record';
import dayjs from 'dayjs';
const this_ = getCurrentInstance()?.appContext.config.globalProperties;
interface CheckIn {
  id: string;
  time: string;
}
interface CheckInPageProps {
  modelValue: boolean;
}
interface CheckInPageEmits {
  (e: 'update:modelValue', value: boolean): void;
}
const props = withDefaults(defineProps<CheckInPageProps>(), {
  modelValue: false,
});
const emit = defineEmits<CheckInPageEmits>();
const visible = shallowRef<boolean>(false);

watch(
  () => props.modelValue,
  value => {
    visible.value = value;
  }
);
const form = ref<CheckIn>({
  id: '',
  time: '',
});

const handleBeforeOk = (done: (closed: boolean) => void) => {
  form.value.time = dayjs().format('YYYY-MM-DD HH:mm:ss');
  fetchCheckIn(form.value)
    .then(res => {
      this_?.$message.success('签到成功');
      done(true); // 关闭模态框
      handleCancel();
    })
    .catch(() => {
      done(false); // 不关闭模态框（例如提交失败时）
    });
};
const handleCancel = () => {
  form.value = {
    id: '',
    time: '',
  };
  visible.value = false;
  emit('update:modelValue', false);
};
</script>