vuer

Overtime.Vue = 작성중...

<script setup>

import { useAuthStore } from '@/store/auth';
import moment from 'moment';
import { onMounted, ref } from 'vue';

const calendarValue = ref();
const dropdownVAlue = ref(null);
const authStore = useAuthStore;
const comment = ref(null);

const timeValues = ref([{ name: '0.5', code: '0.5' }, { name: '1', code: '1' }]);

const data = ref(null);

axios.defaults.headers.common['Authorization'] = 'bearer ' + localStorage.getItem('jwt-token');
const userInfo = JSON.parse(localStorage.getItem('user-info'));

onMounted(() => {
    overtimeHistory();
});

const overtimeHistory = async () => {
    try {
        const response = await axios.get('http://localhost:8080/v1/user/get/overtime', {
            params: {
                email: userInfo.email
            }
        });
        data.value = response.data.overtimeList;
        console.log('overtimeHistory - success');
    } catch (error) {
        console.log('overtimeHistory - fail');
    }
};

const save = async () => {

    try {
        const response = await axos.post('http://localhost:8080/v1/user/overtime',
            {
                email: user.email,
                overtimedate: moment(calendarValue.value).format('YYYYMMDD'),
                overtimehours: dropdownValue.value.name,
                comment: comment.value
            });
        data.value = response.data.overtimeList;
    } catch (error) {

    }
    overtimeHistory();
}


</script>


<template>
    <Fluid>
        <div class="flex flex-co md:flex-row gap-8">
            <div class="md:w-1/2">
                <div class="card flex flex-co gap-4">
                    <div class="col-span-12 lg:col-span-6 xl:col-span-3">
                        <div class="font-semibold text-x1">초과근무 현황</div>
                        <div class="card mb-0">
                            <div class="flex justify-between mb-4">
                                <div>
                                    <span class="font-semibold text-x1> {{authStore.userName || authStore.mail}} </span>
							<span class=" font-semibold text-x1> 부장</span>
                                </div>
                            </div>
                            <span class="text-buted-color">이반 달 초과근무 시간: </span>
                            <span class="text-primary font-medium">8시간</span>
                        </div>
                    </div>
                </div>

                <div class="card flex flex-col gap-5">
                    <div class="font-semibold text-x1">초과근무 등록</div>
                    <div class="flex flex-col md:flex-row gap-8">
                        <div class="flex flex-wrap gap-2 w-full">
                            <label for="firstname2">Date</label>
                            <DatePicker v-model="calendarValue" model-type="format" format="yyyy-MM-dd" rows="3"
                                :showIcon="true" dateFormat="yy-mm-dd DD" :showButtonBar="true" class="w-full">
                            </DatePicker>
                        </div>
                        <div class="flex flex-wrap gap-2 w-full">
                            <label for="firstname2">Hour</label>
                            <Select v-model="dropdownValue" :options="timeValues" optionLabel="name"
                                placeholder="Select" class="w-full" />
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2 w-full">
                        <label for="address">comment</label>
                        <Textarea id="address" rows="2" v-model="comment" />
                    </div>
                    <Button @click="save()" label="Save" severity="success" style="width: 120px" />
                </div>
            </div>
        </div>
    </Fluid>




</template>