|
| 1 | +<template> |
| 2 | + <div class="w-full flex flex-col gap-y-6"> |
| 3 | + <CategoryDropDown |
| 4 | + v-model="category1" |
| 5 | + :options="mainCategoryArr" |
| 6 | + :label-name="'1차 카테고리'" |
| 7 | + :placeholderText="'1차 카테고리를 선택해주세요'" |
| 8 | + :isDisabled="false" /> |
| 9 | + <CategoryDropDown |
| 10 | + v-model="category2" |
| 11 | + :options="afterSubCategoryArr" |
| 12 | + :label-name="'2차 카테고리'" |
| 13 | + :placeholderText="'2차 카테고리를 선택해주세요'" |
| 14 | + :isDisabled="!category1" /> |
| 15 | + <RequestTaskInput |
| 16 | + v-model="title" |
| 17 | + :placeholderText="'제목을 입력해주세요'" |
| 18 | + :label-name="'제목'" |
| 19 | + :is-invalidate="isInvalidate" /> |
| 20 | + <RequestTaskTextArea |
| 21 | + v-model="description" |
| 22 | + :placeholderText="'부가 정보를 입력해주세요'" /> |
| 23 | + <RequestTaskFileInput v-model="file" /> |
| 24 | + <FormButtonContainer |
| 25 | + :handleCancel="handleCancel" |
| 26 | + :handleSubmit="handleSubmit" |
| 27 | + cancelText="취소" |
| 28 | + submitText="요청" /> |
| 29 | + <ModalView |
| 30 | + :isOpen="isModalVisible" |
| 31 | + :type="'successType'" |
| 32 | + @close="handleCancel"> |
| 33 | + <template #header>작업이 요청되었습니다</template> |
| 34 | + </ModalView> |
| 35 | + </div> |
| 36 | +</template> |
| 37 | + |
| 38 | +<script lang="ts" setup> |
| 39 | +import { getMainCategory, getSubCategory } from '@/api/common' |
| 40 | +import { getTaskDetailUser, patchTaskRequest, postTaskRequest } from '@/api/user' |
| 41 | +import type { Category, SubCategory } from '@/types/common' |
| 42 | +import type { AttachmentResponse } from '@/types/user' |
| 43 | +import { onMounted, ref, watch } from 'vue' |
| 44 | +import { useRouter } from 'vue-router' |
| 45 | +import FormButtonContainer from '../common/FormButtonContainer.vue' |
| 46 | +import ModalView from '../ModalView.vue' |
| 47 | +import CategoryDropDown from './CategoryDropDown.vue' |
| 48 | +import RequestTaskFileInput from './RequestTaskFileInput.vue' |
| 49 | +import RequestTaskInput from './RequestTaskInput.vue' |
| 50 | +import RequestTaskTextArea from './RequestTaskTextArea.vue' |
| 51 | +
|
| 52 | +const category1 = ref<Category | null>(null) |
| 53 | +const category2 = ref<Category | null>(null) |
| 54 | +
|
| 55 | +const title = ref('') |
| 56 | +const description = ref('') |
| 57 | +const file = ref(null as File[] | null) |
| 58 | +const isInvalidate = ref('') |
| 59 | +const isModalVisible = ref(false) |
| 60 | +
|
| 61 | +const mainCategoryArr = ref<Category[]>([]) |
| 62 | +const subCategoryArr = ref<SubCategory[]>([]) |
| 63 | +const afterSubCategoryArr = ref<SubCategory[]>([]) |
| 64 | +const initFileArr = ref<AttachmentResponse[]>([]) |
| 65 | +const isFirst = ref(true) |
| 66 | +
|
| 67 | +const { id, reqType } = defineProps<{ id: string; reqType: string }>() |
| 68 | +console.log(reqType, id, '가져온 값') |
| 69 | +
|
| 70 | +const router = useRouter() |
| 71 | +
|
| 72 | +const handleCancel = () => { |
| 73 | + router.back() |
| 74 | +} |
| 75 | +
|
| 76 | +onMounted(async () => { |
| 77 | + mainCategoryArr.value = await getMainCategory() |
| 78 | + subCategoryArr.value = await getSubCategory() |
| 79 | + afterSubCategoryArr.value = await getSubCategory() |
| 80 | + const data = await getTaskDetailUser(Number(id)) |
| 81 | + console.log(data, '데이터') |
| 82 | + const selected = mainCategoryArr.value.find(ct => ct.name === data.mainCategoryName) || null |
| 83 | + category1.value = selected |
| 84 | + category2.value = subCategoryArr.value.find(ct => ct.name === data.categoryName) || null |
| 85 | + afterSubCategoryArr.value = subCategoryArr.value.filter( |
| 86 | + subCategory => subCategory.mainCategoryId === selected?.id |
| 87 | + ) |
| 88 | + title.value = data.title |
| 89 | + description.value = data.description |
| 90 | + file.value = data.attachmentResponses.map((attachment: AttachmentResponse) => { |
| 91 | + return new File([attachment.fileUrl], attachment.fileName, { type: 'application/pdf' }) |
| 92 | + }) |
| 93 | + initFileArr.value = data.attachmentResponses |
| 94 | +}) |
| 95 | +
|
| 96 | +watch(category1, async newValue => { |
| 97 | + if (isFirst.value) { |
| 98 | + isFirst.value = false |
| 99 | + } else { |
| 100 | + category2.value = null |
| 101 | + } |
| 102 | + afterSubCategoryArr.value = subCategoryArr.value.filter( |
| 103 | + subCategory => subCategory.mainCategoryId === newValue?.id |
| 104 | + ) |
| 105 | +}) |
| 106 | +
|
| 107 | +const handleSubmit = async () => { |
| 108 | + if (!category2.value) { |
| 109 | + isInvalidate.value = 'category' |
| 110 | + return |
| 111 | + } else if (!title.value) { |
| 112 | + isInvalidate.value = 'input' |
| 113 | + return |
| 114 | + } |
| 115 | + const formData = new FormData() |
| 116 | +
|
| 117 | + const attachmentsToDelete = initFileArr.value |
| 118 | + .filter(initFile => !file.value?.some(f => f.name === initFile.fileName)) |
| 119 | + .map(initFile => initFile.fileId) |
| 120 | +
|
| 121 | + const taskInfo = { |
| 122 | + categoryId: category2.value.id, |
| 123 | + title: title.value, |
| 124 | + description: description.value |
| 125 | + } |
| 126 | +
|
| 127 | + const taskInfoEdit = { |
| 128 | + ...taskInfo, |
| 129 | + attachmentsToDelete: attachmentsToDelete |
| 130 | + } |
| 131 | +
|
| 132 | + console.log(taskInfoEdit, '뭘 삭제할건지') |
| 133 | +
|
| 134 | + const jsonTaskInfo = JSON.stringify(taskInfoEdit) |
| 135 | + const newBlob = new Blob([jsonTaskInfo], { type: 'application/json' }) |
| 136 | + formData.append('taskInfo', newBlob) |
| 137 | +
|
| 138 | + if (file.value && file.value.length > 0 && reqType === 'edit') { |
| 139 | + const newFiles = file.value.filter( |
| 140 | + f => !initFileArr.value.some(initFile => initFile.fileName === f.name) |
| 141 | + ) |
| 142 | + newFiles.forEach(f => { |
| 143 | + console.log('첨부 파일:', f) |
| 144 | + formData.append('attachment', f) |
| 145 | + }) |
| 146 | + } else { |
| 147 | + file.value?.forEach(f => { |
| 148 | + console.log('첨부 파일:', f) |
| 149 | + formData.append('attachment', f) |
| 150 | + }) |
| 151 | + } |
| 152 | +
|
| 153 | + try { |
| 154 | + if (reqType === 're') { |
| 155 | + await postTaskRequest(formData) |
| 156 | + } else { |
| 157 | + await patchTaskRequest(id, formData) |
| 158 | + } |
| 159 | + isModalVisible.value = true |
| 160 | + } catch (error) { |
| 161 | + console.error('요청 실패:', error) |
| 162 | + } |
| 163 | +} |
| 164 | +</script> |
0 commit comments