156 lines
4.6 KiB
Vue
156 lines
4.6 KiB
Vue
<template>
|
|
<div class="mt-4">
|
|
<div v-if="projectList.length === 0" class="text-center">
|
|
<p class="text-muted mt-4">게시물이 없습니다.</p>
|
|
</div>
|
|
|
|
<div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openModal(post)" class="cursor-pointer">
|
|
<ProjectCard
|
|
:title="post.PROJCTNAM"
|
|
:description="post.PROJCTDES"
|
|
:strdate="post.PROJCTSTR"
|
|
:enddate="post.PROJCTEND"
|
|
:address="post.PROJCTARR + ' ' + post.PROJCTDTL"
|
|
:projctSeq="post.PROJCTSEQ"
|
|
:projctCol="post.projctcolor"
|
|
/>
|
|
</div>
|
|
|
|
<CenterModal :display="isModalOpen" @close="closeModal">
|
|
<template #title> 프로젝트 수정 </template>
|
|
<template #body>
|
|
<FormInput
|
|
title="이름"
|
|
name="name"
|
|
:is-essential="true"
|
|
:is-alert="nameAlert"
|
|
v-model="selectedProject.PROJCTNAM"
|
|
/>
|
|
|
|
<FormSelect
|
|
title="컬러"
|
|
name="color"
|
|
:is-essential="true"
|
|
:is-label="true"
|
|
:is-common="true"
|
|
:data="allColors"
|
|
v-model="selectedProject.projctcolor"
|
|
/>
|
|
|
|
<FormInput
|
|
title="시작일"
|
|
type="date"
|
|
name="startDay"
|
|
v-model="selectedProject.PROJCTSTR"
|
|
:is-essential="true"
|
|
/>
|
|
|
|
<FormInput
|
|
title="종료일"
|
|
type="date"
|
|
name="endDay"
|
|
v-model="selectedProject.PROJCTEND"
|
|
/>
|
|
|
|
<FormInput
|
|
title="설명"
|
|
name="description"
|
|
v-model="selectedProject.PROJCTDES"
|
|
/>
|
|
|
|
<ArrInput
|
|
title="주소"
|
|
name="address"
|
|
:is-essential="true"
|
|
:is-row="true"
|
|
v-model="selectedProject"
|
|
@update:data="updateAddress"
|
|
/>
|
|
|
|
</template>
|
|
<template #footer>
|
|
<button class="btn btn-secondary" @click="closeModal">Close</button>
|
|
<button class="btn btn-primary" @click="handleSubmit">Save</button>
|
|
</template>
|
|
</CenterModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import ProjectCard from './ProjectCard.vue';
|
|
import { onMounted } from 'vue';
|
|
import $api from '@api';
|
|
import CenterModal from '@c/modal/CenterModal.vue';
|
|
import FormInput from '@c/input/FormInput.vue';
|
|
import FormSelect from '@c/input/FormSelect.vue';
|
|
import commonApi from '@/common/commonApi';
|
|
import ArrInput from '../input/ArrInput.vue';
|
|
|
|
const projectList = ref([]);
|
|
const isModalOpen = ref(false);
|
|
|
|
const nameAlert = ref(false);
|
|
const selectedProject = ref({
|
|
PROJCTNAM: '',
|
|
projctcolor: '',
|
|
PROJCTSTR: '',
|
|
PROJCTEND: '',
|
|
PROJCTZIP: '',
|
|
PROJCTARR: '',
|
|
PROJCTDTL: '',
|
|
PROJCTDES: '',
|
|
PROJCTCOL: '',
|
|
});
|
|
|
|
const { colorList } = commonApi({
|
|
loadColor: true,
|
|
colorType: 'YNP',
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
getProjectList();
|
|
});
|
|
|
|
// 프로젝트 목록 불러오기
|
|
const getProjectList = () => {
|
|
$api.get('project/select').then(res => {
|
|
projectList.value = res.data.data.projectList;
|
|
});
|
|
};
|
|
|
|
const openModal = (post) => {
|
|
isModalOpen.value = true;
|
|
selectedProject.value = { ...post };
|
|
};
|
|
|
|
const closeModal = () => {
|
|
isModalOpen.value = false;
|
|
};
|
|
|
|
// 현재 프로젝트 색상 + 사용하지 않은 색상
|
|
const allColors = computed(() => {
|
|
// 기존 색상 추가
|
|
const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
|
|
|
|
// colorList에 기존 색상을 추가
|
|
return [existingColor, ...colorList.value];
|
|
});
|
|
|
|
const updateAddress = (addressData) => {
|
|
selectedProject.value = {
|
|
...selectedProject.value,
|
|
PROJCTZIP: addressData.postcode,
|
|
PROJCTARR: addressData.address,
|
|
PROJCTDTL: addressData.detailAddress
|
|
};
|
|
};
|
|
|
|
|
|
const handleSubmit = () => {
|
|
|
|
console.log(selectedProject.value);
|
|
};
|
|
</script>
|