127 lines
3.9 KiB
Vue
127 lines
3.9 KiB
Vue
<template>
|
|
<div class="card mb-3 shadow-sm border">
|
|
<div class="row g-0">
|
|
<div class="card-body">
|
|
<!-- 제목 -->
|
|
<h5 class="card-title">
|
|
{{ title }}
|
|
</h5>
|
|
<!-- 날짜 -->
|
|
<div class="d-flex flex-column flex-sm-row align-items-center pb-2">
|
|
<i class="bx bx-calendar"></i>
|
|
<div class="ms-2">날짜</div>
|
|
<div class="ms-12">{{ strdate }} ~ {{ enddate }}</div>
|
|
</div>
|
|
<!-- 참여자 -->
|
|
<div class="d-flex flex-column flex-sm-row align-items-center pb-2">
|
|
<i class="bx bxs-user"></i>
|
|
<div class="ms-2">참여자</div>
|
|
<UserList :projctSeq="projctSeq" class="ms-8 mb-0" />
|
|
</div>
|
|
<!-- 설명 -->
|
|
<div class="d-flex flex-column flex-sm-row align-items-center pb-2">
|
|
<i class="bx bx-detail"></i>
|
|
<div class="ms-2">설명</div>
|
|
<div class="ms-12">{{ description }}</div>
|
|
</div>
|
|
<!-- 주소 -->
|
|
<div class="d-flex flex-column flex-sm-row align-items-center pb-2">
|
|
<i class="bx bxs-map"></i>
|
|
<div class="ms-2">주소</div>
|
|
<div class="ms-12">{{ address }}</div>
|
|
<button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctCol} !important;`" @click.stop="openModal">log</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CenterModal :display="isModalOpen" @close="closeModal">
|
|
<template #title> Log </template>
|
|
<template #body>
|
|
<div class="ms-4 mt-2" v-if="logData">
|
|
<p class="mb-1">{{ logData.createDate }}</p>
|
|
<strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
|
|
</div>
|
|
|
|
<div class="log-item" v-if="logData?.updateDate">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bx bx-edit me-2"></i>
|
|
<strong>수정 정보</strong>
|
|
</div>
|
|
<div class="ms-4 mt-2">
|
|
<p class="mb-1">{{ logData.updateDate }}</p>
|
|
<p class="mb-0 text-muted">[{{ logData.updater }}] 프로젝트 수정</p>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<template #footer>
|
|
<button type="button" class="btn btn-secondary" @click="closeModal">닫기</button>
|
|
</template>
|
|
</CenterModal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, ref } from 'vue';
|
|
import UserList from '@c/user/UserList.vue';
|
|
import CenterModal from '@c/modal/CenterModal.vue';
|
|
import $api from '@api';
|
|
|
|
// Props 정의
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
strdate: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
enddate: {
|
|
type: String,
|
|
required: true,
|
|
default: "",
|
|
},
|
|
description: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
address: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
projctSeq: {
|
|
type: Number,
|
|
required: false
|
|
},
|
|
projctCol: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
});
|
|
|
|
defineEmits(['click']);
|
|
|
|
const isModalOpen = ref(false);
|
|
const logData = ref(null);
|
|
|
|
const fetchLogData = async () => {
|
|
try {
|
|
const response = await $api.get(`project/log/${props.projctSeq}`);
|
|
logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
|
|
} catch (error) {
|
|
console.error('로그 정보 조회 실패:', error);
|
|
}
|
|
};
|
|
|
|
const openModal = async () => {
|
|
await fetchLogData();
|
|
isModalOpen.value = true;
|
|
};
|
|
|
|
const closeModal = () => {
|
|
isModalOpen.value = false;
|
|
};
|
|
|
|
</script>
|
|
|