influence/pages/view/common/deli/detail.vue

<template>
  <div>
    <div class="inner--headers">
      <h2>{{ pageId }}</h2>
      <div class="bread--crumbs--wrap">
        <span>홈</span>
        <span>{{ pageId }}</span>
      </div>
    </div>
    <div class="data--list--wrap">
      <div class="btn--actions--wrap">
        <div class="left--sections">
          <v-btn class="custom-btn btn-pink bdrs--10"
            ><i class="ico"></i>개별 배송</v-btn
          >
          <v-btn class="custom-btn bdrs--10 btn-white" @click="deliLocated()"
            ><i class="ico"></i>공동구매 배송</v-btn
          >
        </div>
        <div class="right--sections">
        </div>
      </div>
      <div class="item--section">
        <div v-if="imgTemp" class="item--thumb">
          <img :src="imgTemp" alt="">
        </div>
        <div v-else class="item--thumb min--240">
          NO IMAGE
        </div>
        <div class="item--info">
          <h2>{{ form.formValue1 }}</h2>
          <p>공급가: {{ form.formValue2 }}원</p>
          <p>판매가: {{ form.formValue3 }}원</p>
        </div>
      </div>
      <div class="btn--actions--wrap">
        <div class="left--sections">
        </div>
        <div class="right--sections">
          <input 
            ref="excelFileInput" 
            type="file" 
            accept=".xlsx,.xls" 
            @change="handleExcelUpload"
            style="display: none"
          />
          <v-btn class="custom-btn btn-excel" @click="$refs.excelFileInput.click()"
            ><i class="ico"></i>엑셀 업로드</v-btn
          >
          <v-btn class="custom-btn btn-excel"
            ><i class="ico"></i>엑셀 다운로드</v-btn
          >
        </div>
      </div>
      <div class="tbl-wrapper">
        <div class="tbl-wrap">
          <!-- ag grid -->
          <ag-grid-vue
            style="width: 100%; height: calc(10 * 2.94rem)"
            class="ag-theme-quartz"
            :gridOptions="gridOptions"
            :rowData="tblItems"
            rowSelection="multiple"
            :paginationPageSize="pageObj.pageSize"
            :suppressPaginationPanel="true"
            @grid-ready="onGridReady"
            @rowClicked="detailLocated"
          >
          </ag-grid-vue>

          <!-- 페이징 -->
          <div class="ag-grid-custom-pagenations">
            <pagination @chg_page="chgPage" :pageObj="pageObj"></pagination>
          </div>
        </div>
      </div>
      <div class="view-btm-btn">
        <div class="btn-l">
          <v-btn class="custom-btn btn-list" @click="listLocated"
            ><i class="ico"></i>목록</v-btn
          >
        </div>
        <div class="btn-r">
          <v-btn v-if="pageType !== 'D'" class="custom-btn btn-blue2" @click="fnBtnEvt"
            ><i class="ico"></i>저장</v-btn
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import "@vuepic/vue-datepicker/dist/main.css";
import { AgGridVue } from "ag-grid-vue3";
import * as XLSX from 'xlsx';
import pagination from "../components/common/pagination.vue";
  /************************************************************************
|    레이아웃
************************************************************************/
  definePageMeta({
    layout: "default",
  });
  /************************************************************************
|   PROPS
 ************************************************************************/
  const props = defineProps({
    propsData: {
      type: Object,
      default: () => {},
    },
  });
  /************************************************************************
|    스토어
 ************************************************************************/
  const useDtStore = useDetailStore();
  /************************************************************************
|    전역
 ************************************************************************/
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
  const router = useRouter();
  const pageId = ref("배송 관리");
  let pageObj = ref({
    page: 1, // 현재 페이지
    pageMaxNumSize: 10, // 페이지 숫자 최대 표현 개수
    pageSize: 10, // 테이블 조회 데이터 개수
    totalCnt: 0, // 전체 페이지
  });
  const imgTemp = ref("");
  const tblItems = ref([]); // stat 데이터
  const form = ref({
    formValue1: "",
    formValue2: "",
    formValue3: "",
    formValue4: "",
    formValue5: null,
    formValue6: "",
    formValue7: "",
    formValue8: "0",
    formValue8Arr: [
      { title: "판매중", value: "0" },
      { title: "품절", value: "1" },
    ],
    formValue9: "Y",
    formValue9Arr: [
      { title: "노출", value: "Y" },
      { title: "비노출", value: "N" },
    ],
    formValue10: "",
  });

  /* eslint-disable */
  /* prettier-ignore */

  pageObj.value.totalCnt = tblItems.value.length;

  const remToPx = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
  const rowHeightRem = 2.65; // 원하는 rem 값
  const rowHeightPx = rowHeightRem * remToPx();
  const gridApi = shallowRef();

  // gridOption
  const gridOptions = {
    columnDefs: [
      //{ checkboxSelection: true, headerCheckboxSelection: true, width: 0 },
      {
        headerName: "No",
        valueGetter: (params) => params.api.getDisplayedRowCount() - params.node.rowIndex,
        sortable: false,
        width: 70,
      },
      {
        headerName: "구매자명",
        field: "BUYER_NAME",
        width: 120,
        editable: true,
      },
      {
        headerName: "주소",
        field: "ADDRESS",
        editable: true,
      },
      {
        headerName: "연락처",
        field: "PHONE",
        width: 140,
        editable: true,
      },
      {
        headerName: "이메일",
        field: "EMAIL",
        editable: true,
      },
      {
        headerName: "구매수량",
        field: "QTY",
        width: 120,
        editable: true,
      },
      {
        headerName: "총구매금액",
        field: "TOTAL",
        editable: true,
      },
      {
        headerName: "배송업체",
        field: "DELIVERY_COMPANY",
        width: 100,
        editable: true,
      },
      {
        headerName: "송장번호",
        field: "TRACKING_NUMBER",
        editable: true,
      },
      {
        headerName: "주문일",
        field: "ORDER_DATE",
        editable: true,
      },
    ],
    rowData: tblItems.value, // 테이블 데이터
    autoSizeStrategy: {
      type: "fitGridWidth", // width맞춤
    },
    suppressMovableColumns: true,
    headerHeight: rowHeightPx,
    rowHeight: rowHeightPx,
    pagination: true,
    suppressPaginationPanel: true, // 하단 default 페이징 컨트롤 숨김
    //rowSelection: {
    // checkboxes: true,
    // headerCheckbox: true,
    // enableClickSelection: false,
    // mode: "multiRow",
    //},
  };

  /************************************************************************
|    함수(METHODS)
************************************************************************/
  const listLocated = () => {
    router.push({
      path: "/view/common/deli/",
    });
  };
  const onGridReady = (__PARAMS) => {
    gridApi.value = __PARAMS.api;
  };

  const chgPage = (__PAGE) => {
    pageObj.value.page = __PAGE;
    gridApi.value.paginationGoToPage(__PAGE - 1);
  };

  
const fnBtnEvt = () => {
  if (!tblItems.value || tblItems.value.length === 0) {
    let param = {
      id: pageId,
      title: pageId,
      content: "저장할 배송 데이터가 없습니다.",
      yes: {
        text: "확인",
        isProc: false,
      }
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
    return;
  }
  
  fnRegEvt();
};

  const fnRegEvt = () => {
    let param = {
      id: pageId,
      title: pageId,
      content: "등록하시겠습니까?",
      yes: {
        text: "등록",
        isProc: true,
        event: "FN_INSERT",
        param: "",
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
  };
  // 엑셀 컬럼명 매핑 테이블
  const excelColumnMapping = {
    '구매자명': 'BUYER_NAME',
    '주소': 'ADDRESS',
    '연락처': 'PHONE',
    '이메일': 'EMAIL',
    '구매수량': 'QTY',
    '총구매금액': 'TOTAL',
    '배송업체': 'DELIVERY_COMPANY',
    '송장번호': 'TRACKING_NUMBER',
    '주문일': 'ORDER_DATE'
  };

  const handleExcelUpload = (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        if (jsonData.length < 2) {
          $toast.error('엑셀 파일에 데이터가 없습니다.');
          return;
        }

        const headers = jsonData[0];
        const rows = jsonData.slice(1);
        
        // 컬럼명 매핑 및 데이터 변환
        const mappedData = rows.map(row => {
          const mappedRow = {};
          headers.forEach((header, index) => {
            const fieldName = excelColumnMapping[header];
            if (fieldName && row[index] !== undefined) {
              mappedRow[fieldName] = row[index];
            }
          });
          return mappedRow;
        }).filter(row => Object.keys(row).length > 0);

        if (mappedData.length === 0) {
          $toast.error('매핑 가능한 컬럼이 없습니다. 엑셀 헤더명을 확인해주세요.');
          return;
        }

        // ag-grid에 데이터 추가
        // 기존 데이터는 지우고 추가
        tblItems.value = [];
        tblItems.value = [...tblItems.value, ...mappedData];
        pageObj.value.totalCnt = tblItems.value.length;
        
        $toast.success(`${mappedData.length}건의 데이터가 추가되었습니다.`);
        
      } catch (error) {
        console.error('엑셀 파일 처리 중 오류:', error);
        $toast.error('엑셀 파일을 읽는 중 오류가 발생했습니다.');
      }
    };
    reader.readAsArrayBuffer(file);
    
    // 파일 input 초기화
    event.target.value = '';
  };

  const fnDetail = () => {
    let req = {
      seq: useDtStore.boardInfo.seq,
    };
    useAxios()
    .get(`/item/detail/${req.seq}`)
    .then((res) => {
        form.value.formValue1 = res.data.NAME;
        form.value.formValue2 = res.data.PRICE1;
        form.value.formValue3 = res.data.PRICE2;
        form.value.formValue4 = res.data.DELI_FEE;
        form.value.formValue5 = res.data.THUMB_FILE;
        form.value.formValue6 = res.data.SUB_TITLE;
        form.value.formValue8 = res.data.STATUS;
        form.value.formValue9 = res.data.SHOW_YN;
        form.value.formValue10 = res.data.ADD_INFO;
        //썸네일 파일이 있으면 넣어줌
        if(form.value.formValue5){
          imgTemp.value = `https://shopdeli.mycafe24.com/writable/uploads/item/thumb/${form.value.formValue5}`;
        }
      })
      .catch((error) => {
        console.error('제품 상세 조회 오류:', error);
        $toast.error('제품 정보를 불러오는 중 오류가 발생했습니다.');
      })
      .finally(() => {
      });
  };

  const fnInsert = () => {
    if (!tblItems.value || tblItems.value.length === 0) {
      $toast.error('저장할 배송 데이터가 없습니다.');
      return;
    }

    const deliveryData = {
      itemSeq: useDtStore.boardInfo.seq,
      deliveryList: tblItems.value.map(item => ({
        buyerName: item.BUYER_NAME,
        address: item.ADDRESS,
        phone: item.PHONE,
        email: item.EMAIL,
        qty: item.QTY,
        total: item.TOTAL,
        deliveryCompany: item.DELIVERY_COMPANY,
        trackingNumber: item.TRACKING_NUMBER,
        orderDate: item.ORDER_DATE
      }))
    };

    useAxios()
      .post('/delivery/save', deliveryData)
      .then((res) => {
        $toast.success('배송 데이터가 성공적으로 저장되었습니다.');
        // 저장 후 목록으로 이동하거나 데이터 새로고침
        listLocated();
      })
      .catch((error) => {
        console.error('배송 데이터 저장 오류:', error);
        let errorMessage = '배송 데이터 저장 중 오류가 발생했습니다.';
        
        if (error.response && error.response.data && error.response.data.message) {
          errorMessage = error.response.data.message;
        }
        
        $toast.error(errorMessage);
      })
      .finally(() => {
      });
  };
  /************************************************************************
|    팝업 이벤트버스 정의
************************************************************************/
$eventBus.off("FN_INSERT");
$eventBus.on("FN_INSERT", () => {
  fnInsert();
});
  /************************************************************************
|    WATCH
************************************************************************/

  watch(
    () => props,
    () => {
      searchObj.value = props.propsData;
      fnGetStat();
    },
    { deep: true }
  );

  onMounted(() => {
    fnDetail();
  });
</script>