Double_X_Attendance_Web/src/pages/Admin/ClockIn/components/Supplement.vue

<template>
    <div class="card">
        <el-form ref="formRef" :model="form" :rules="formRule" label-width="auto" :label-position="'right'" class="form"
            :size="formsize">
            <el-form-item label="项目编号" prop="id">
                <el-input v-model="form.id" disabled />
            </el-form-item>
            <el-form-item label="补卡人" prop="user">
                <el-input v-model="form.user" placeholder="请输入补卡人姓名" />
            </el-form-item>
        </el-form>

        <el-button class="button" round @click="onSubmit(formRef)">提交</el-button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ServerAPI } from '../../../../app/lib/ServerAPI';
import { App } from '../../../../app/app';

let formsize = ref("large");
let router = useRouter();
let props = defineProps({
    id: {
        type: Number
    }
});

if (window.innerWidth <= 768) {
    formsize.value = ''
}

let formRef = ref();

let form = reactive({
    id: props.id,
    user: '',
});

let formRule = reactive({
    user: [
        { required: true, message: '此项为必填项' }
    ],
})

let onSubmit = async function (formEl) {
    if (!App.hasUser()) {
        ElMessage({
            message: "请登录",
            type: 'warning',
        });
        router.replace({
            name: "Login",
        });
        return;
    }

    if (!formEl) return;

    await formEl.validate((valid, fields) => {

        if (!valid) {
            ElMessage({
                message: "请检查填写的内容",
                type: "warning"
            });
            return;
        }

        const loading = ElLoading.service({
            lock: true,
            text: '正在加载中，请稍候'
        })

        ServerAPI.SupplementRecord(App.user.uuid, App.user.session, form.user, props.id, (r) => {
            if (r == undefined) {
                loading.close();
                ElMessage.error('服务器未响应');
                return;
            }

            if (r.code != 0) {
                loading.close();
                ElMessage({
                    message: `错误:${r.msg}`,
                    type: "error"
                });
                return;
            }

            loading.close();
            ElMessage.success('补卡成功！');
            form.user = '';
        })

    })

}

</script>

<style scoped>
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form {
    width: 60%;
    margin: 0 auto;
    color: black;
}

.button {
    background-color: #337ecc;
    color: white;
    width: 200px;
    border: none;
    margin-top: 20px;
}

@media only screen and (max-width: 768px) {
    .card {
        background-color: rgba(255, 255, 255, 0.6);
        width: 80%;
        border-radius: 10px;
        padding: 20px;
    }

    .form {
        width: 100%;
    }

}
</style>