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

<template>
    <div class="card">
        <el-form ref="formRef" :model="form" :rules="formRule" label-width="auto" :label-position="'right'" class="form"
            :size="formsize" v-if="show">
            <el-form-item label="项目名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入项目名称" />
            </el-form-item>

            <el-form-item label="参与人" prop="user">
                <el-input v-model="form.user" placeholder="请输入参与人姓名,用 | 分隔" />
            </el-form-item>

            <el-form-item label="管理员" prop="admin" v-if="createUser === App.user.uuid">
                <el-input v-model="form.admin" placeholder="请输入管理员姓名,用 | 分隔" />
            </el-form-item>

            <el-form-item label="打卡星期" prop="day_of_week">
                <el-select v-model="form.day_of_week" placeholder="请选择星期">
                    <el-option label="星期一" value="1" />
                    <el-option label="星期二" value="2" />
                    <el-option label="星期三" value="3" />
                    <el-option label="星期四" value="4" />
                    <el-option label="星期五" value="5" />
                    <el-option label="星期六" value="6" />
                    <el-option label="星期日" value="0" />
                </el-select>
            </el-form-item>

            <el-form-item label="每周循环" prop="loopy">
                <el-radio-group v-model="form.loopy">
                    <el-radio label="是" />
                    <el-radio label="否" />
                </el-radio-group>
            </el-form-item>

            <el-form-item label="打卡时间" prop="time">
                <el-config-provider :locale="zhCn">
                    <el-time-picker v-model="form.time" is-range range-separator="~" :start-placeholder="form.time[0]"
                        :end-placeholder="form.time[1]" value-format="HH:mm:ss" />
                </el-config-provider>
            </el-form-item>

            <el-form-item label="打卡半径" prop="radius">
                <el-input v-model="form.radius" type="number" placeholder="输入打卡范围半径 单位米" />
            </el-form-item>

            <el-form-item label="打卡地点" prop="address">
                <el-input v-model="form.address" placeholder="请在地图中选择地点" disabled />
            </el-form-item>

            <el-form-item label="经纬度" prop="endtime">
                <el-input v-model="form.position" placeholder="请在地图中选择地点" disabled />
            </el-form-item>

        </el-form>

        <MapContainer :position="form.position" :radius="form.radius" @update="update" />

        <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';
import MapContainer from './MapContainer.vue';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

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

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

if (!App.hasUser()) {
    ElMessage({
        message: "请登录",
        type: 'warning',
    });
    //前往登录
    router.replace({
        name: "Login"
    });
}

let formRef = ref();
let show = ref(false);
let createUser = ref('');

let form = reactive({
    name: '',
    user: '',
    admin: '',
    day_of_week: '',
    loopy: false,
    time: '',
    loopy: '否',
    address: '',
    position: [106.5799475868821, 29.504864472181577],
    radius: 50
});

onMounted(() => {
    ServerAPI.GetAttendanceItemDetail(App.user.uuid, App.user.session, props.id, (r) => {
        if(r && r.code === 0) {
            Object.assign(form, r.data);
            form.time = [r.data.begintime, r.data.endtime];
            r.data.loopy === 1 ? form.loopy = '是' : form.loopy = '否';
            form.user = r.data.user.map(uuid => r.userInfo[uuid].username).join('|');
            if(form.admin) {
                form.admin = r.data.admin.map(uuid => r.userInfo[uuid].username).join('|');       
            }
            createUser.value = r.data.createUser;
            show.value = true
        } else {
            ElMessage.error('获取项目详情失败！');
        }
    })
})

let formRule = reactive({
    name: [
        { required: true, message: '此项为必填项' },
        { min: 2, max: 18, message: '长度应为2-18位' }
    ],
    user: [
        { required: true, message: '此项为必填项' }
    ],
    day_of_week: [
        { required: true, message: '此项为必填项' }
    ],
    loopy: [
        { required: true, message: '此项为必填项' }
    ],
    time: [
        { required: true, message: '此项为必填项' }
    ],
    radius: [
        { required: true, message: '此项为必填项' }
    ],
})

let update = (data, address) => {
    form.position = data;
    form.address = address;
}

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;
        }

        let data = {
            uuid: App.user.uuid,
            session: App.user.session,
            id: props.id,
            name: form.name,
            admin: form.admin,
            user: form.user,
            day_of_week: form.day_of_week,
            loopy: form.loopy == "是" ? 1 : 0,
            begintime: form.time[0],
            endtime: form.time[1],
            address: form.address,
            position: form.position,
            radius: form.radius
        };

        ServerAPI.EditAttendanceItems(data, (r) => {
            if (r == undefined) {
                ElMessage.error('服务器未响应');
                return;
            }

            if (r.code != 0) {
                ElMessage({
                    message: `修改失败！${r.msg}`,
                    type: "error"
                });
                return;
            }

            ElMessage.success('已成功修改！');
            router.go(0);
        })

    })

}

</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>