fix : 파일 업로드, 파일 다운로드 기능 추가 => 가격조사 등록, 가격조사 수정

src/pages/app/PriceInsert.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { savePrice } from '/src/service/priceApi'
-import { Person } from '/@src/utils/types'
+import {deletePrcsFile, getPrcsFileDown, savePrice} from '/src/service/priceApi'
+import {type iPbAtt, Person} from '/@src/utils/types'
 import {formatBizNum,formatDate} from "/@src/utils/common/comfunc.ts";
 
 const notyf = useNotyf()
@@ -131,7 +131,7 @@ const savePriceOne = async () => {
   }
 }
 
-
+const pbAtts = ref<iPbAtt[]>(params.prcsAtts)
 
 const addNewEstimateRow = () => {
   const newRow = {}
@@ -173,8 +173,6 @@ const onDetailDelete = (index: number) => {
 }
 
 const onPayDelete = (index: number) => {
-  console.log("params.felxColumn.length",params.felxColumn.length)
-  console.log("params.felxColumn.length",apprLine.value.length)
   if(apprLine.value.length-1 !== params.felxColumn.length
       || (params.felxColumn.length == 6 && apprLine.value.length-1 == params.felxColumn.length))
   {
@@ -183,19 +181,32 @@ const onPayDelete = (index: number) => {
 }
 
 
-const fileInput = ref<HTMLInputElement | null>(null)
-const fileName = ref('')
-
-function openFileDialog() {
-  fileInput.value?.click()
+const onFileClick = () => {
+  const input = <any> document.querySelector('.file-input')
+  input.click()
 }
 
-function onFileChange(event: Event) {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files.length > 0) {
-    fileName.value = target.files[0].name
-    // 여기서 파일 업로드 로직을 추가할 수 있습니다.
-    // 예: emit('file-selected', target.files[0])
+const onFileChange = (e: any) => {
+  Array.from(e.target.files).forEach((file: any) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = <string>reader.result
+      const pbAtt = <iPbAtt>{
+        logiFnm: file.name,
+        size: file.size,
+        data: result.split(',')[1],
+      }
+      pbAtts.value.push(pbAtt)
+    }
+
+    reader.readAsDataURL(file)
+  })
+}
+
+const onFilDelete = async ( index: number, fileOrd: number) => {
+  notyf.dismissAll()
+  if (index) {
+    pbAtts.value.splice(index, 1)
   }
 }
 
@@ -431,20 +442,42 @@ function onInput(row, column){
             </td>
           </tr>
           <tr>
-            <td>첨부파일</td>
-            <td colspan="10">
-              <VField class="file has-name is-left">
-                <VButton @click="openFileDialog">
-                  파일 첨부
-                </VButton>
-                <input
-                    ref="fileInput"
-                    type="file"
-                    style="display: none"
-                    @change="onFileChange"
-                />
-                <span v-if="fileName" class="file-name">{{ fileName }}</span>
-              </VField>
+              <td>첨부파일</td>
+              <td colspan="3">
+                <VField>
+                  <div class="column is-6">
+                    <div class="file has-name is-fullwidth">
+                    <input
+                        class="file-input hide"
+                        type="file"
+                        multiple
+                        @change="(e) => onFileChange(e)"
+                    >
+                    <VLabel>
+                      <VButton icon="fas fa-plus" color="info" class="file-trigger" @click="onFileClick" >
+                        <span>파일업로드</span>
+                      </VButton>
+                    </VLabel>
+                    <VControl>
+                      <div
+                          v-for="(f, i) in pbAtts"
+                          :key="f.logiFnm"
+                          class="content estimate-file-wrapper"
+                      >
+                        <div class="estimate-file-name">
+                          {{ f.logiFnm }}
+                        </div>
+                        <div class="estimate-file-size">
+                          {{ Math.ceil(f.size / 1024) }}kb
+                        </div>
+                        <div>
+                          <i class="fa fa-trash estimate-file-delete" @click="onFilDelete( i, f.fileOrd)" />
+                        </div>
+                      </div>
+                    </VControl>
+                    </div>
+                  </div>
+                </VField>
             </td>
           </tr>
           </tbody>