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>공급가: {{ Number(form.formValue2).toLocaleString() }}원</p>
          <p>판매가: {{ Number(form.formValue3).toLocaleString() }}원</p>
        </div>
      </div>
      <div class="btn--actions--wrap">
        <div class="left--sections">
        </div>
        <div class="right--sections">
          <div class="caption--wrap">
            <i class="ico">!</i>
            <div class="caption--box">
              - 주문일은 YYYY.MM.DD 혹은 YYYY-MM-DD 형태로 입력해 주세요.<br>
              - 구매자 정보 입력 후 저장 버튼을 꼭 클릭해 주세요.
            </div>
          </div>
          <v-btn class="custom-btn btn-white mini" @click="addEmptyRow"
            ><i class="ico"></i>항목 추가</v-btn
          >
          <v-btn class="custom-btn btn-white mini" @click="deleteSelectedRows"
            ><i class="ico"></i>항목 삭제</v-btn
          >
          <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" @click="downloadExcel"
            ><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"
            rowSelection="multiple"
            :rowData="tblItems"
            :paginationPageSize="pageObj.pageSize"
            :suppressPaginationPanel="true"
            @grid-ready="onGridReady"
          >
          </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 class="custom-btn btn-blue2" @click="fnRegEvt"
            ><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 useAtStore = useAuthStore();
  /************************************************************************
|    전역
 ************************************************************************/
  const memberType = useAtStore.auth.memberType;
  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: 50 },
      {
        headerName: "No",
        valueGetter: (params) => params.api.getDisplayedRowCount() - params.node.rowIndex,
        sortable: false,
        width: 70,
      },
      {
        headerName: "인플루언서",
        field: "INF_NAME",
        width: 150,
        //hide: true,
      },
      {
        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,
        cellRenderer: (params) => {
          return Number(params.value).toLocaleString();
        },
      },
      {
        headerName: "총구매금액",
        field: "TOTAL",
        editable: true,
        width: 120,
        cellRenderer: (params) => {
          return Number(params.value).toLocaleString();
        },
      },
      {
        headerName: "배송업체",
        field: "DELI_COMP",
        width: 100,
        editable: true,
      },
      {
        headerName: "송장번호",
        field: "DELI_NUMB",
        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 페이징 컨트롤 숨김
    rowMultiSelectWithClick: true,
    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 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',
    '배송업체': 'DELI_COMP',
    '송장번호': 'DELI_NUMB',
    '주문일': 'ORDER_DATE'
  };

  const addEmptyRow = () => {
    const newRow = {
      BUYER_NAME: "",
      ADDRESS: "",
      PHONE: "",
      EMAIL: "",
      QTY: "",
      TOTAL: "",
      DELI_COMP: "",
      DELI_NUMB: "",
      ORDER_DATE: ""
    };
    
    // 맨 앞에 추가 (unshift 사용)
    tblItems.value.unshift(newRow);
    pageObj.value.totalCnt = tblItems.value.length;
    
    // ag-grid 데이터 갱신
    if (gridApi.value) {
      gridApi.value.setGridOption('rowData', tblItems.value);
    }
    
    $toast.success('새 항목이 추가되었습니다.');
  };

  const deleteSelectedRows = () => {
    if (!gridApi.value) return;
    
    const selectedRows = gridApi.value.getSelectedRows();
    if (selectedRows.length === 0) {
      $toast.warning('삭제할 항목을 선택해주세요.');
      return;
    }
    
    let param = {
      id: pageId,
      title: pageId,
      content: `선택된 ${selectedRows.length}개 항목을 삭제하시겠습니까?`,
      yes: {
        text: "삭제",
        isProc: true,
        event: "FN_DELETE_SELECTED",
        param: selectedRows,
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
  };

  const fnDeleteSelected = (selectedRows) => {
    // 선택된 행들을 tblItems에서 제거
    selectedRows.forEach(selectedRow => {
      const index = tblItems.value.findIndex(item => 
        item.BUYER_NAME === selectedRow.BUYER_NAME &&
        item.ADDRESS === selectedRow.ADDRESS &&
        item.PHONE === selectedRow.PHONE &&
        item.EMAIL === selectedRow.EMAIL
      );
      if (index > -1) {
        tblItems.value.splice(index, 1);
      }
    });
    
    pageObj.value.totalCnt = tblItems.value.length;
    
    // ag-grid 데이터 갱신
    if (gridApi.value) {
      gridApi.value.setGridOption('rowData', tblItems.value);
    }
    
    $toast.success(`${selectedRows.length}개 항목이 삭제되었습니다.`);
  };

  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 = [...mappedData];
        pageObj.value.totalCnt = tblItems.value.length;
        
        // ag-grid 데이터 갱신
        if (gridApi.value) {
          gridApi.value.setGridOption('rowData', tblItems.value);
        }
        
        $toast.success(`${mappedData.length}건의 데이터가 추가되었습니다.`);
        
      } catch (error) {
        console.error('엑셀 파일 처리 중 오류:', error);
        $toast.error('엑셀 파일을 읽는 중 오류가 발생했습니다.');
      }
    };
    reader.readAsArrayBuffer(file);
    
    // 파일 input 초기화
    event.target.value = '';
  };

  const downloadExcel = () => {
    if (!tblItems.value || tblItems.value.length === 0) {
      $toast.warning('다운로드할 데이터가 없습니다.');
      return;
    }

    // 한글 헤더명 배열
    const headers = [
      '구매자명', '주소', '연락처', '이메일', '구매수량', 
      '총구매금액', '배송업체', '송장번호', '주문일'
    ];

    // 데이터를 엑셀 형식으로 변환
    const excelData = tblItems.value.map(item => [
      item.BUYER_NAME || '',
      item.ADDRESS || '',
      item.PHONE || '',
      item.EMAIL || '',
      item.QTY || '',
      item.TOTAL || '',
      item.DELI_COMP || '',
      item.DELI_NUMB || '',
      item.ORDER_DATE || ''
    ]);

    // 헤더를 첫 번째 행에 추가
    const worksheetData = [headers, ...excelData];

    // 워크시트 생성
    const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
    
    // 워크북 생성
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, '배송관리');

    // 파일명 생성 (현재 날짜 포함)
    const today = new Date();
    const dateString = today.getFullYear() + 
      String(today.getMonth() + 1).padStart(2, '0') + 
      String(today.getDate()).padStart(2, '0');
    const fileName = `배송관리_${dateString}.xlsx`;

    // 엑셀 파일 다운로드
    XLSX.writeFile(workbook, fileName);
    
    $toast.success('엑셀 파일이 다운로드되었습니다.');
  };

  const fnDetail = () => {
    let req = {
      seq: useDtStore.boardInfo.seq,
    };
    let req2 = {
      item_seq: useDtStore.boardInfo.seq,
      //인플루언서일 경우 본인의 inf_seq값 보내줘야함
      //inf_seq: 8,
    }
    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) => {
        $toast.error('제품 정보를 불러오는 중 오류가 발생했습니다.');
      })
      .finally(() => {
      });
    // 기 저장된 구매자명 리스트
    // 제품 seq, 인플루언서 seq가 일치하는 리스트만
    useAxios()
    .post(`/deli/list`, req2)
    .then((res) => {
      tblItems.value = res.data;
      pageObj.value.totalCnt = tblItems.value.length;
      })
      .catch((error) => {
        $toast.error('제품 정보를 불러오는 중 오류가 발생했습니다.');
      })
      .finally(() => {
      });
  };

  const fnInsert = () => {
    const deliveryData = {
      item_seq: useDtStore.boardInfo.seq,
      // 임시 인플루언서 시퀀스
      inf_seq: 8,
      deliveryList: tblItems.value.map(item => ({
        buyerName: item.BUYER_NAME,
        address: item.ADDRESS,
        phone: item.PHONE,
        email: item.EMAIL,
        qty: item.QTY,
        total: item.TOTAL,
        deliComp: item.DELI_COMP,
        deliNumb: item.DELI_NUMB,
        orderDate: item.ORDER_DATE.replaceAll(".", "-")
      }))
    };

    useAxios()
      .post('/deli/reg', deliveryData)
      .then((res) => {
        $toast.success('배송 데이터가 성공적으로 저장되었습니다.');
        location.reload();
      })
      .catch((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();
});

$eventBus.off("FN_DELETE_SELECTED");
$eventBus.on("FN_DELETE_SELECTED", (selectedRows) => {
  fnDeleteSelected(selectedRows);
});
  /************************************************************************
|    WATCH
************************************************************************/

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

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