Commit @9905dfc1047e39bf9ea9d35af65868e8fef561e3

하관우 02-11

2025-02-11 하관우 moment 추가 파일관리 컴퍼넌트

@9905dfc1047e39bf9ea9d35af65868e8fef561e3

26c605b

9905dfc

client/views/pages/data/FileManagement.vue

--- client/views/pages/data/FileManagement.vue

+++ client/views/pages/data/FileManagement.vue


       <PageNavigation />
     </div>
     <div class="content-wrap">
-      <div class="content-box flex justify-between">
-        <div class="flex20 content-box">
-          <div class="left-content flex100 content-box">
-            <div class="content-box">
-              <div class="flex align-end  justify-between no-gutter">
-                <div class="mb10 flex70">
-                  <div class="content">
-                    <p class="box-title">호스트 선택</p>
-                  </div>
-                  <div>
-                    <select class="only full-select" v-model="selectedHostCodeData">
-                      <option :value="null" disabled>선택</option>
-                      <option v-for="(host, idx) in hostList" :key="idx" :value="idx">
-                        {{ host.host_nm + " - (" + host.host_ip + ")" }}
-                      </option>
-                    </select>
-                  </div>
-                </div>
-                <div class="mb10 flex70" v-if="userauth !== 'ROLE_ADMIN'">
-                  <div class="content">
-                    <p class="box-title">디렉토리 선택</p>
-                  </div>
-                  <div>
-                    <select class="only full-select" v-model="selectedDirectory">
-                      <option :value="null" disabled>선택</option>
-                      <option v-for="(host, idx) in hostList" :key="idx" :value="idx">
-                        {{ host.dept_drctry_nm }}
-                      </option>
-                    </select>
-                  </div>
-                </div>
-                <div class="mb10 flex25">
-                  <button class="blue-btn large-btn" @click="uniquePaths()">
-                    연결
-                  </button>
-                </div>
-              </div>
-              <div class="file-tree-zone" :style="{ height: userauth !== 'ROLE_ADMIN' ? 'calc(100% - 156px)' : 'calc(100% - 79px)' }">
-                <div class="content-titleZone flex justify-between align-center">
-                  <p class="box-title">폴더 리스트</p>
-                  <button class="blue-border-btn small-btn" @click="openMkdirModal()">
-                    폴더추가
-                  </button>
-                </div>
-                <div class="file-zone overflow-y">
-                  <ul class="tree-wrap">
-                    <TreeItem ref="treeItem" :connection="connection" :selectedNode="selectedNode"
-                      v-for="(item, idx) in nodes" :item="item" :idx="item.id" :selectItem="selectItem" :key="idx"
-                      @selectFolder="selectFolder" @isLoading="handleIsLoading" @selectItem="handleSelectItem" />
-
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="flex80 content-box">
-          <div class="right-content flex100">
-            <div class="flex-column justify-between">
-              <div class="flex justify-between align-center no-gutter">
-                <div class="flex40">
-                  <button class="blue-border-btn small-btn" @click="openTreeModal('copy')">
-                    선택복사
-                  </button>
-                  <button class="blue-border-btn small-btn" @click="openTreeModal('move')">
-                    선택이동
-                  </button>
-                  <button class="red-border-btn small-btn" @click="remove()">
-                    선택삭제
-                  </button>
-                </div>
-                <div class="flex justify-end flex60">
-                  <div class="search-bar">
-                    <div class="flex justify-end align-center">
-                      <select name="" id="" class="square-select" v-model="searchType">
-                        <option value="all">전체</option>
-                        <option value="folder">현재폴더</option>
-                      </select>
-                      <div class="search-square">
-                        <div class="flex justify-end align-center no-gutter">
-                          <input type="text" class="square-input flex90" placeholder="Search File" v-model="searchText"
-                            @keyup.enter="searchFiles()" />
-                          <button class="square-button blue-btn flex10">
-                            <svg-icon type="mdi" :path="searchPath" class="square-icon"
-                              @click="searchFiles()"></svg-icon>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="content-zone" style="overflow-y: auto">
-                <div class="table-zone file-table">
-                  <div class="list-info flex justify-between align-center">
-                    <div class="count-zone">
-                      <p>
-                        총
-                        <span v-if="search.totalRows != 0">{{
-                          search.totalRows
-                        }}</span>
-                        <span v-else>0</span>건 중
-                        <span>{{ selectedFiles.length }}</span>건 선택
-                      </p>
-                      <p>
-                        현재경로 : <span>{{ connection.path }}</span>
-                      </p>
-                    </div>
-                  </div>
-                  <table class="list-table">
-                    <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
-                    <colgroup>
-                      <col style="width: 5%" />
-                      <col style="width: 45%" />
-                      <col style="width: 10%" />
-                      <col style="width: 15%" />
-                      <col style="width: 10%" />
-                      <col style="width: 15%" />
-                    </colgroup>
-                    <thead>
-                      <tr>
-                        <th>
-                          <input type="checkbox" @click="filesCheckAll" v-model="checkAll" />
-                        </th>
-                        <th>이름</th>
-                        <th>타입</th>
-                        <th>마지막 수정</th>
-                        <th>크기</th>
-                        <th>관리</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="(file, index) in fileList" :key="index" @click="selectFileList(file)">
-                        <td v-if="file.text != '상위폴더로 이동'" @click.stop="">
-                          <input type="checkbox" @click.stop="" v-model="selectedFiles" :value="{
-                            folder: file.folder,
-                            path: file.path,
-                            fileName: file.text,
-                            extension: file.extension,
-                          }" name="files" />
-                        </td>
-                        <td v-else @click.stop=""></td>
-                        <td>
-                          <div class="text-lf">
-                            <span v-if="file.extension === 'txt'"><img src="../../../resources/img/icon/txt.png" ref=""
-                                alt="" /></span>
-                            <span v-else-if="file.extension === 'pdf'"><img src="../../../resources/img/icon/pdf.png"
-                                alt="" /></span>
-                            <span v-else-if="
-                              file.extension === 'pptx' ||
-                              file.extension === 'ppt'
-                            "><img src="../../../resources/img/icon/ppt.png" alt="" /></span>
-                            <span v-else-if="file.extension === 'hwp'"><img src="../../../resources/img/icon/hwp.png"
-                                alt="" /></span>
-                            <span v-else-if="
-                              file.extension === 'xls' ||
-                              file.extension === 'xlsx' ||
-                              file.extension === 'csv'
-                            "><img src="../../../resources/img/icon/xls.png" alt="" /></span>
-                            <span v-else-if="file.extension === 'jpg'"><img src="../../../resources/img/icon/img.png"
-                                alt="" /></span>
-                            <span v-else-if="file.extension === 'png'"><img src="../../../resources/img/icon/img.png"
-                                ref="" alt="" /></span>
-                            <span>{{ " " + file.text }}</span>
-                          </div>
-                        </td>
-                        <td>{{ file.extension }}</td>
-                        <td>{{ file.lastUpdate }}</td>
-                        <td v-if="file.size != 0">
-                          {{ $filters.bytesToSize(file.size) }}
-                        </td>
-                        <td v-else></td>
-                        <td>
-                          <div v-if="!file.folder">
-                            <button class="icon-btn orange-btn" title="미리보기" @click.stop="preview(file)">
-                              <svg-icon type="mdi" :width="18" :height="18" :path="fileFindPath"></svg-icon>
-                            </button>
-                            <button class="icon-btn green-btn ml5" title="파일명 변경" @click.stop="openReNameModal(file)">
-                              <svg-icon type="mdi" :width="18" :height="18" :path="fileNamePath"></svg-icon>
-                            </button>
-                            <button class="icon-btn blue-btn ml5" title="다운로드" @click.stop="download(file)">
-                              <svg-icon type="mdi" :width="18" :height="18" :path="filedownPath"></svg-icon>
-                            </button>
-                          </div>
-                          <div v-else-if="
-                            file.folder && file.text != '상위폴더로 이동'
-                          ">
-                            <button class="icon-btn green-btn ml5" title="폴더명 변경" @click.stop="openReNameModal(file)">
-                              <svg-icon type="mdi" :width="18" :height="18" :path="fileNamePath"></svg-icon>
-                            </button>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div class="flex justify-end">
-                <button class="blue-btn small-btn" @click="setModal('typeSelected', 'small')">
-                  업로드
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- 폴더 목록 모달 -->
-  <TreeModal :modalOpen="treeModalOpen" :modalConnection="modalConnection" :modalNodes="modalNodes"
-    :selectType="selectModalType" @modalSelectFolder="modalSelectFolder" @closeTreeModal="closeTreeModal"
-    @modalSubmit="fileConfirm" />
-  <!-- 데이터셋 미리보기 모달 -->
-  <div v-show="previewModalOpen" class="modal-wrapper" :style="isLoading ? { cursor: 'wait' } : {}">
-    <div v-if="isLoading" class="loading-overlay">
-      <div class="loading-div">
-        <span>LOADING&nbsp;</span>
-        <span class="anima">.</span>
-        <span class="anima">.</span>
-        <span class="anima">.</span>
-      </div>
-    </div>
-    <div class="modal-container list-modal">
-      <div class="modal-title">
-        <div class="flex justify-between align-center">
-          <h2>데이터 미리보기</h2>
-          <button class="close-btn" @click="previewModalClose()">X</button>
-        </div>
-      </div>
-      <div class="modal-content-monthly">
-        <FileDataRead v-if="previewModalOpen" v-model:isLoading="isLoading" :dataTable="dataTable" :preview="true">
-        </FileDataRead>
-      </div>
-      <div class="modal-end flex justify-end">
-        <button class="blue-btn small-btn" @click="previewModalClose()">
-          확인
-        </button>
-      </div>
-    </div>
-  </div>
-  <!-- 폴더, 파일 이름변경 모달 -->
-  <div v-show="reNameModalOpen" class="modal-wrapper">
-    <div class="modal-container small-modal">
-      <div class="modal-title text-ct">
-        <h2>폴더(파일)명 변경</h2>
-      </div>
-      <div class="modal-content-monthly">
-        <div class="table-zone">
-          <table class="form-table2">
-            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
-            <colgroup>
-              <col style="width: 25%" />
-              <col style="width: 75%" />
-            </colgroup>
-            <tbody>
-              <tr>
-                <th>현재 이름</th>
-                <td>{{ reNameObject.currentName }}</td>
-              </tr>
-              <tr>
-                <th>변경 이름</th>
-                <td>
-                  <input type="text" class="full-input" v-model="reNameObject.changeName" @keyup.enter="rename()" />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div class="modal-end flex justify-between" style="flex-wrap: nowrap">
-        <button class="gray-btn large-btn" @click="closeReNameModal()">
-          취소
-        </button>
-        <button class="blue-btn large-btn" @click="rename()">확인</button>
-      </div>
-    </div>
-  </div>
-  <!-- 폴더추가 모달 -->
-  <div v-show="mkdirModalOpen" class="modal-wrapper">
-    <div class="modal-container small-modal">
-      <div class="modal-title text-ct">
-        <h2>폴더 추가</h2>
-      </div>
-      <div class="modal-content-monthly">
-        <div class="table-zone">
-          <table class="form-table2">
-            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
-            <colgroup>
-              <col style="width: 25%" />
-              <col style="width: 75%" />
-            </colgroup>
-            <tbody>
-              <tr>
-                <th>현재경로</th>
-                <td>{{ connection.path }}</td>
-              </tr>
-              <tr>
-                <th>폴더명</th>
-                <td>
-                  <input type="text" class="full-input" v-model="folderName" @keyup.enter="mkdir()" />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div class="modal-end flex justify-between" style="flex-wrap: nowrap">
-        <button class="blue-btn large-btn" @click="mkdir()">확인</button>
-        <button class="gray-btn large-btn" @click="closeMkdirModal()">
-          취소
-        </button>
-      </div>
-    </div>
-  </div>
-  <!-- 엑셀 타입 지정 -->
-  <div v-if="isOpenExcel" class="modal-wrapper">
-    <div class="modal-container small-modal">
-      <div class="modal-title text-ct">
-        <div class="flex justify-between align-center">
-          <h2>ExcelEncoding</h2>
-          <button class="close-btn" @click="closeExcel">
-            <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
-          </button>
-        </div>
-      </div>
-      <!-- ExcelEncoding 선택-->
-      <div class="modal-content-monthly">
-        <div class="flex justify-center align-center mb10">
-          <div class="flex50 pl0">
-            <button class="blue-border-btn large-btn" @click="selectEncoding('utf-8')">
-              UTF-8
-            </button>
-          </div>
-          <div class="flex50 pr0">
-            <button class="blue-border-btn large-btn" @click="selectEncoding('euc-kr')">
-              EUC-KR
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- 모달 -->
-  <div v-show="isModalOpen" class="modal-wrapper">
-    <div :class="{
-      'modal-container': true,
-      'small-modal': modalSize === 'small',
-      'large-modal': modalSize === 'large',
-    }">
-      <div class="modal-title text-ct" v-show="modalType === 'typeSelected'">
-        <div class="flex justify-between align-center">
-          <h2>업로드</h2>
-          <button class="close-btn" @click="closeModal">
-            <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
-          </button>
-        </div>
-      </div>
-      <!-- 업로드 타입 선택 -->
-      <div class="modal-content-monthly" v-show="modalType === 'typeSelected'">
-        <div class="flex justify-center align-center mb10">
-          <div class="flex50 pl0">
-            <button class="blue-border-btn large-btn" @click="setModal('file-modal', 'small')">
-              파일
-            </button>
-          </div>
-          <div class="flex50 pr0">
-            <button class="blue-border-btn large-btn" @click="setModal('db-modal', 'middle')">
-              DB
-            </button>
-          </div>
-        </div>
-        <div class="flex justify-center align-center">
-          <div class="flex50 pl0">
-            <button class="blue-border-btn large-btn" @click="setModal('api-modal', 'middle')">
-              API
-            </button>
-          </div>
-          <div class="flex50 pr0">
-            <button class="blue-border-btn large-btn" @click="setModal('ehojo-modal', 'middle')">
-              차세대 API
-            </button>
-          </div>
-        </div>
-      </div>
-      <!-- 파일 (file-modal) -->
-      <template v-if="modalType == 'file-modal'">
-        <div class="modal-title">
-          <div class="flex justify-between align-center">
-            <h2>파일 등록</h2>
-            <button class="close-btn" @click="closeModal">X</button>
-          </div>
-        </div>
-        <div class="modal-content-monthly">
-          <div class="table-zone">
-            <table class="form-table">
-              <colgroup>
-                <col style="width: 15%" />
-                <col style="width: 85%" />
-              </colgroup>
-              <tbody>
-                <tr>
-                  <th>현재경로</th>
-                  <td>{{ connection.path }}</td>
-                </tr>
-                <tr>
-                  <th>파일명</th>
-                  <td>
-                    <input type="file" name="file" id="file" ref="fileInput" @change="fileInput()" />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div class="modal-end flex justify-between" style="flex-wrap: nowrap">
-              <button class="blue-btn large-btn" @click="upload()">확인</button>
-              <button class="gray-btn large-btn" @click="closeModal()">
-                취소
-              </button>
-            </div>
-          </div>
-        </div>
-      </template>
-      <!-- DB (db-modal) -->
-      <DatabaseConnection v-if="modalType == 'db-modal'" openPopup="true" :jobItem="selectNode" @closePopup="closeModal"
-        @saveNodeData="fnUpdateSetup" />
-      <!-- API (api-modal) -->
-      <apiConnection v-if="modalType == 'api-modal'" openPopup="true" :jobItem="selectNode" @fnCloseModal="closeModal"
-        @fnSaveSetup="fnUpdateSetup" />
-      <!-- 차세대 API (ehojo-modal) -->
-      <EhojoConnection v-if="modalType == 'ehojo-modal'" openPopup="true" :jobItem="selectNode"
-        @fnCloseModal="closeModal" @fnSaveSetup="fnUpdateSetup" />
-      <div class="modal-end flex justify-end" v-show="modalType == 'test-modal'" style="flex-wrap: nowrap">
-        <button class="gray-border-btn small-btn" @click="closeModal">
-          이전
-        </button>
-        <button class="blue-border-btn small-btn" @click="closeModal">
-          확인
-        </button>
-        <button class="darkg-border-btn small-btn" @click="closeModal">
-          닫기
-        </button>
-      </div>
+      <FileManagementMain />
     </div>
   </div>
 </template>
 <script>
-import axios from "axios";
 import PageNavigation from "../../component/PageNavigation.vue";
-import PaginationButton from "../../component/PaginationButton.vue";
-import TreeItem from "../../component/FileTree.vue";
-import TreeModal from "../../component/FileTreeModal.vue";
-import SvgIcon from "@jamescoyle/vue-icon";
-import DatabaseConnection from "../../component/connection/itm/databaseConnection.vue";
-import apiConnection from "../../component/connection/itm/apiConnection.vue";
-import EhojoConnection from "../../component/connection/EhojoConnection.vue";
-import {
-  mdiMagnify,
-  mdiClose,
-  mdiFileCog,
-  mdiDownload,
-  mdiFileFind,
-  mdiClockPlusOutline,
-} from "@mdi/js";
-import store from "../AppStore";
-import FileDataRead from "../../component/connection/itm/fileDataRead.vue";
-import * as XLSX from "xlsx";
+import FileManagementMain from "../../pages/data/filemanger/FileManagementMain.vue";
 
 export default {
   data() {
     return {
-      //엑셀 등록시 타입지정
-      isOpenExcel: false,
-      encodingType: null,
-      // 검색 객체
-      search: this.$getDefaultSerchVO(),
-      search_data: this.$getDefaultSerchItem(null, "String"),
-
-      userauth: null,
-      searchPath: mdiMagnify,
-      closePath: mdiClose,
-      fileNamePath: mdiFileCog,
-      filedownPath: mdiDownload,
-      fileFindPath: mdiFileFind,
-      isModalOpen: false,
-      activeTab: "tab1",
-      modalType: "",
-      modalSize: "small",
-      mkdirModalOpen: false,
-      reNameModalOpen: false,
-      treeModalOpen: false,
-
-      selectedHost: {},
-      selectedHostCode: null,
-      // 호스트 목록
-      hostList: [],
-      // 부서-호스트 목록
-      //01.17 deptHostList: [],
-      connection: {
-        host_code: null,
-        path: null,
-        depth: null,
-        type: null,
-      },
-
-      selectedTab: '', // 현재 선택된 탭
-
-      uploadObject: {
-        host_code: null,
-        path: null,
-        uploadFile: null,
-        confirm: false,
-      },
-      nodes: [],
-      fileList: [],
-      selectedNode: null,
-      folderName: null,
-      uploadFile: null,
-
-      reNameObject: {
-        currentPath: null,
-        parentPath: null,
-        currentName: null,
-        extension: null,
-        changeName: null,
-      },
-      checkAll: false,
-      selectedFiles: [],
-      modalNodes: [],
-      modalConnection: {
-        host_code: null,
-        path: null,
-        depth: null,
-        type: null,
-      },
-      modalSeletedNode: null,
-      selectModalType: 0,
-
-      searchType: "all",
-      searchText: null,
-
-      selectItem: {
-        id: null,
-      },
-
-      // 데이터 미리보기
-      isLoading: false,
-      previewModalOpen: false,
-      dataTable: {},
-
-      selectNode: {}, // 선택된 노드
-
-      selectedHostCodeData: null,
-      selectedDirectory: null,
-      selectedHostData: null,
-      isUpdating: false  // 무한 루프 방지를 위한 플래그
     };
   },
   methods: {
-    // 검색 객체 초기화
-    searchInit: function () {
-      this.search.searchObjectList.push(this.search_data);
-    },
-
-    searchFiles() {
-      const vm = this;
-
-      if (vm.searchText === null || vm.searchText === "") {
-        vm.$showAlert("파일 검색", "검색어를 입력해 주세요.");
-        return;
-      }
-
-      let path = vm.connection.path;
-
-      if (vm.searchType === "all") {
-        path = "#";
-      } else {
-        if (!path) {
-          vm.$showAlert("파일 검색", "폴더를 선택해 주세요.");
-          return;
-        }
-      }
-
-      vm.isLoading = true; // 로딩 시작
-
-      axios({
-        url: "/files/search/" + vm.connection.host_code,
-        method: "post",
-        headers: {},
-        data: {
-          searchType: vm.searchType,
-          searchText: vm.searchText,
-          path: path,
-        },
-      })
-        .then(function (response) {
-          vm.isLoading = false; // 로딩 해제
-          vm.fileList = response.data.resultData.fileList;
-          if (vm.fileList.length == 0) {
-            vm.$showAlert("파일 검색", "검색 결과가 없습니다.");
-          }
-        })
-        .catch(function (error) {
-          vm.isLoading = false; // 로딩 해제
-          vm.$showAlert(
-            "파일 검색",
-            "파일 검색 오류, 관리자에게 문의바랍니다."
-          );
-        });
-    },
-
-    // 로딩 상태 변경
-    handleIsLoading(isLoadingValue) {
-      this.isLoading = isLoadingValue; // 부모 컴포넌트의 데이터 업데이트
-    },
-
-    // 탭 변경
-    showTab: function (tabName) {
-      this.activeTab = tabName;
-    },
-    openModal: function () {
-      this.isModalOpen = true;
-    },
-    closeModal: function () {
-      // this.selectNode = {}; // 초기화
-      this.modalType = null;
-      this.isModalOpen = false;
-    },
-    setModal: function (type, size) {
-      if (type == "typeSelected") {
-        if (
-          this.connection.path == null ||
-          this.connection.path == "" ||
-          this.connection.path === undefined
-        ) {
-          this.$showAlert("폴더 추가", "폴더를 선택해 주세요.");
-          return;
-        }
-      } else if (type == "db-modal") {
-        this.fnCreateNode("DB_READ");
-      } else if (type == "api-modal") {
-        this.fnCreateNode("API_READ");
-      } else if (type == "ehojo-modal") {
-        this.fnCreateNode("EHOJO_READ");
-      }
-      this.modalType = type;
-      this.modalSize = size;
-    },
-
-    openMkdirModal() {
-      if (
-        this.connection.path == null ||
-        this.connection.path == "" ||
-        this.connection.path === undefined
-      ) {
-        this.$showAlert("폴더 추가", "폴더를 선택해 주세요.");
-        return;
-      }
-      this.mkdirModalOpen = true;
-    },
-
-    closeMkdirModal() {
-      this.mkdirModalOpen = false;
-    },
-
-    openTreeModal(type) {
-      if (this.selectedFiles.length === 0) {
-        if (type === "move") {
-          this.$showAlert("파일 이동", "선택한 파일이 없습니다.");
-        } else if (type === "copy") {
-          this.$showAlert("파일 복사", "선택한 파일이 없습니다.");
-        }
-        return;
-      }
-
-      this.treeModalOpen = true;
-      this.selectModalType = type;
-    },
-
-    closeTreeModal() {
-      // this.modalNodes = [];
-      this.treeModalOpen = false;
-      this.modalSeletedNode = null;
-    },
-
-    openReNameModal(file) {
-      this.reNameObject.currentPath = file.path;
-      this.reNameObject.parentPath = file.parent;
-      this.reNameObject.currentName = file.text;
-      this.reNameObject.extension = file.extension;
-      this.reNameModalOpen = true;
-    },
-
-    closeReNameModal() {
-      this.reNameObject.changeName = null;
-      this.reNameModalOpen = false;
-    },
-
-    filesCheckAll() {
-      this.checkAll = !this.checkAll;
-
-      if (this.checkAll) {
-        this.fileList.forEach((file) => {
-          if (file.text != "상위폴더로 이동") {
-            this.selectedFiles.push({
-              folder: file.folder,
-              path: file.path,
-              fileName: file.text,
-              extension: file.extension,
-            });
-          }
-        });
-      } else {
-        this.selectedFiles = [];
-      }
-    },
-
-    // 선택한 호스트 연결
-    async connectionConfirm() {
-      const vm = this;
-      if (vm.selectedHostCode === null || vm.selectedHostCode === undefined) {
-        vm.$showAlert("파일시스템 연결", "호스트를 선택해 주세요.");
-        return;
-      }
-
-      // 이전에 선택한 호스트 코드가 있으면 저장
-      let tempHostCode = null;
-      let tempModalHostCode = null;
-      if (vm.connection.host_code) {
-        tempHostCode = _.cloneDeep(vm.connection.host_code);
-        tempModalHostCode = _.cloneDeep(vm.modalConnection.host_code);
-      }
-
-      vm.connection.host_code = vm.selectedHost.host_code;
-      vm.modalConnection.host_code = vm.selectedHost.host_code;
-
-      vm.isLoading = true; // 로딩 시작
-
-      try {
-        const response = await axios.get("/files/connection", {
-          params: { host_code: vm.connection.host_code },
-        });
-
-        vm.isLoading = false; // 로딩 해제
-        if (response.data.status === 200) {
-          await this.fileTreeList();
-        } else {
-          // 이전에 선택한 호스트 코드로 변경
-          if (tempHostCode) {
-            vm.connection.host_code = tempHostCode;
-            vm.selectedHost.host_code = tempHostCode;
-            vm.selectedHostCode = tempHostCode;
-          }
-        }
-        this.selectedFiles = [];
-        this.checkAll = false;
-        vm.$showAlert("파일시스템 연결", response.data.message);
-      } catch (error) {
-        vm.isLoading = false; // 로딩 해제
-        vm.$showAlert(
-          "파일시스템 연결",
-          "파일시스템 연결 오류, 관리자에게 문의하세요."
-        );
-        this.selectedFiles = [];
-        this.checkAll = false;
-        // 이전에 선택한 호스트 코드로 변경
-        if (tempHostCode) {
-          vm.connection.host_code = tempHostCode;
-          vm.selectedHost.host_code = tempHostCode;
-          vm.selectedHostCode = tempHostCode;
-        }
-      }
-    },
-    uniquePaths() {
-      // this.selectedHost = null;
-      this.selectedHost = this.selectedHostData;
-      this.selectedHostCode = this.selectedHostData.host_code;
-      this.connectionConfirm();
-    },
-    // 호스트 목록 조회
-    selectHosts() {
-      const vm = this;
-      vm.isLoading = true; // 로딩 시작
-      axios({
-        url: "/files/hosts",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
-        },
-        data: {
-          userId: store.state.loginUser.user_id,
-          //01.17 authList: store.state.loginUser.user_auth,
-          author: store.state.loginUser.user_auth[0],
-          dept_code: store.state.loginUser.dept_code,
-        },
-      })
-        .then((response) => {
-          vm.hostList = response.data.resultData.hostList;
-          console.log("@@", vm.hostList);
-          //01.17 vm.deptHostList = response.data.resultData.deptHostList;
-          // this.connection.host_code = this.hostList[this.hostList.length - 1].host_code
-          if (this.hostList.length > 0) {
-            vm.selectedHost = vm.hostList[0];
-            vm.selectedHostCode = vm.hostList[0].host_code;
-            vm.selectedHostCodeData = 0;
-            vm.selectedDirectory = 0;
-            vm.selectedHostData = vm.hostList[0];
-            // 01.17for (let i = 0; i < vm.hostList.length; i++) {
-            //   for (let j = 0; j < vm.deptHostList.length; j++) {
-            //     if (vm.hostList[i].host_code === vm.deptHostList[j].host_code) {
-            //       vm.hostList[i].main_folder_path =
-            //         vm.deptHostList[j].main_folder_path;
-            //     }
-            //   }
-            // }
-            vm.connectionConfirm();
-          } else {
-            vm.isLoading = false; // 로딩 해제
-            vm.selectedHost = {};
-          }
-        })
-        .catch((error) => {
-          vm.isLoading = false; // 로딩 해제
-          vm.$showAlert(
-            "호스트 조회",
-            "호스트 조회 오류, 관리자에게 문의하세요."
-          );
-        });
-    },
-
-    // 폴더 리스트 조회
-    async fileTreeList() {
-      const vm = this;
-      vm.nodes = [];
-      vm.connection.path = vm.selectedHost.dept_drctry_path;
-      vm.connection.depth = 0;
-      vm.connection.type = "folder";
-      vm.modalNodes = [];
-      vm.modalConnection.path = vm.selectedHost.dept_drctry_path;
-      vm.modalConnection.depth = 0;
-      vm.modalConnection.type = "folder";
-      vm.modalConnection.host_code = vm.connection.host_code;
-
-      vm.isLoading = true; // 로딩 시작
-
-      try {
-        const response = await axios.get("/files/tree", {
-          params: vm.connection,
-        });
-
-        vm.nodes = response.data.resultData.fileTree;
-        vm.modalNodes = response.data.resultData.fileTree;
-        vm.connection.path = null;
-        vm.fileList = [];
-        this.checkAll = false;
-        vm.isLoading = false; // 로딩 해제
-      } catch (error) {
-        vm.connection.path = null;
-        vm.fileList = [];
-        this.checkAll = false;
-        vm.isLoading = false; // 로딩 해제
-        vm.$showAlert(
-          "파일리스트 조회",
-          "파일리스트 조회 오류, 관리자에게 문의하세요."
-        );
-      }
-    },
-
-    modalFileTreeList() {
-      const vm = this;
-
-      vm.modalNodes = [];
-
-      vm.modalConnection.host_code = vm.connection.host_code;
-      vm.modalConnection.path = "#";
-      vm.modalConnection.depth = 0;
-      vm.modalConnection.type = "folder";
-
-      axios
-        .get("/files/tree", { params: vm.modalConnection })
-        .then((response) => {
-          vm.modalNodes = response.data.resultData.fileTree;
-        })
-        .catch((error) => {
-          vm.$showAlert(
-            "파일리스트 조회",
-            "파일리스트 조회 오류, 관리자에게 문의하세요."
-          );
-        });
-    },
-
-    selectFolder(path) {
-      if (path === null || path === undefined) {
-        this.isLoading = false;
-      }
-      this.connection.path = path;
-      this.fileSelectList();
-    },
-
-    handleSelectItem(item) {
-      this.selectItem = item;
-    },
-
-    modalSelectFolder(path) {
-      this.modalSeletedNode = path;
-    },
-
-    selectFileList(item) {
-      // 폴더가 선택된 경우, 선택된 노드와 경로를 업데이트하고 파일 리스트 조회
-      if (item.extension === "폴더" || item.extension === "") {
-        this.selectedNode = item.id;
-        this.connection.path = item.id;
-        this.fileSelectList();
-      } else {
-      }
-    },
-
-    // 파일 리스트 조회
-    async fileSelectList() {
-      const vm = this;
-
-      if (vm.connection.path === null || vm.connection.path === "") {
-        vm.fileList = null;
-        return;
-      }
-
-      vm.connection.type = "all";
-      vm.connection.depth = 1;
-
-      vm.isLoading = true; // 로딩 시작
-      try {
-        const response = await axios.get("/files/list", {
-          params: vm.connection,
-        });
-        vm.fileList = response.data.resultData.fileList;
-        vm.search.totalRows = response.data.resultData.totalRow;
-        vm.selectedFiles = [];
-        vm.checkAll = false;
-        vm.isLoading = false; // 로딩 해제
-      } catch (error) {
-        vm.isLoading = false; // 로딩 해제
-        vm.$showAlert(
-          "파일리스트 조회",
-          "파일리스트 조회 오류, 관리자에게 문의하세요."
-        );
-        vm.selectedFiles = [];
-        vm.checkAll = false;
-      }
-    },
-
-    // 폴더 추가
-    async mkdir() {
-      const vm = this;
-      if (vm.connection.path === null || vm.connection.path === "") {
-        vm.$showAlert(
-          "폴더 추가",
-          "선택된 경로가 없습니다.\n 경로 선택 후 다시 시도해주세요."
-        );
-        vm.closeMkdirModal();
-        vm.folderName = null;
-        return;
-      }
-
-      const mkdirVO = {};
-      mkdirVO.host_code = vm.connection.host_code;
-      mkdirVO.path = vm.connection.path;
-      mkdirVO.folderName = vm.folderName;
-
-      vm.isLoading = true; // 로딩 시작
-
-      try {
-        const response = await axios.post("/files/mkdir", mkdirVO);
-
-        vm.isLoading = false; // 로딩 해제
-        vm.getChildren(vm.selectItem.id, vm.selectItem.children); // 자식 폴더 리스트 업데이트
-        await vm.fileSelectList();
-        vm.$showAlert("폴더 추가", response.data.message);
-        vm.closeMkdirModal();
-        vm.folderName = null;
-      } catch (error) {
-        vm.isLoading = false; // 로딩 해제
-        vm.$showAlert("폴더 추가", "폴더 추가 오류, 관리자에게 문의하세요.");
-        vm.folderName = null;
-      }
-    },
-
-    // 자식 파일 정보 조회
-    getChildren(path, children) {
-      const vm = this;
-      vm.connection.path = path;
-      vm.connection.type = "folder";
-      vm.connection.depth = 1;
-
-      axios
-        .get("/files/list", { params: vm.connection })
-        .then((response) => {
-          let childrenList = response.data.resultData.fileList;
-
-          // 기존 배열 초기화
-          children.length = 0;
-
-          // 새로운 배열의 요소들을 기존 배열에 추가
-          Array.prototype.push.apply(children, childrenList);
-        })
-        .catch((error) => { });
-    },
-
-    //파일업로드
-    fileInput() {
-      this.uploadFile = this.$refs.fileInput.files[0];
-    },
-
-    async upload() {
-      const vm = this;
-      vm.uploadObject.path = vm.connection.path;
-      vm.uploadObject.host_code = vm.connection.host_code;
-      vm.uploadObject.uploadFile = vm.uploadFile;
-      vm.isLoading = true;
-
-      // 파일 타입 및 인코딩 확인
-      if (vm.uploadFile) {
-        const fileName = vm.uploadFile.name.toLowerCase();
-        const isExcel = fileName.endsWith(".xlsx") || fileName.endsWith(".xls");
-        const isCsv = fileName.endsWith(".csv");
-
-        if (isExcel || isCsv) {
-          try {
-            const fileReader = new FileReader();
-
-            fileReader.onload = function (e) {
-              const content = new Uint8Array(e.target.result);
-              let encoding = "Unknown";
-
-              // BOM 확인으로 UTF-8 검사
-              if (
-                content.length >= 3 &&
-                content[0] === 0xef &&
-                content[1] === 0xbb &&
-                content[2] === 0xbf
-              ) {
-                encoding = "UTF-8 with BOM";
-              } else if (
-                content.length >= 2 &&
-                content[0] === 0xff &&
-                content[1] === 0xfe
-              ) {
-                encoding = "UTF-16 LE";
-              } else {
-                // 텍스트 분석으로 인코딩 추정
-                try {
-                  const text = new TextDecoder("UTF-8").decode(content);
-                  const hasInvalidChars = text.includes("�");
-                  encoding = hasInvalidChars ? "Possibly EUC-KR" : "UTF-8";
-                } catch (err) {
-                  encoding = "Possibly EUC-KR";
-                }
-              }
-
-              console.log(`파일 타입: ${isExcel ? "Excel" : "CSV"}`);
-              console.log(`인코딩 타입: ${encoding}`);
-            };
-
-            // 파일의 처음 1KB만 읽어서 분석
-            fileReader.readAsArrayBuffer(vm.uploadFile.slice(0, 1024));
-          } catch (error) {
-            console.error("인코딩 확인 중 오류:", error);
-          }
-        }
-      }
-
-      try {
-        const response = await axios.post("/files/upload", vm.uploadObject, {
-          headers: {
-            "Content-Type": "multipart/form-data",
-          },
-        });
-
-        vm.isLoading = false;
-
-        if (response.data.status === 200) {
-          document.getElementById("file").value = "";
-          await vm.fileSelectList();
-          vm.$showAlert("파일 업로드", response.data.message);
-        } else if (response.data.status === 100) {
-          if (!(await vm.$showConfirm("파일 업로드", response.data.message))) {
-            document.getElementById("file").value = "";
-            return;
-          } else {
-            vm.uploadObject.confirm = true;
-            await vm.reUpload();
-          }
-        }
-
-        vm.closeModal();
-      } catch (error) {
-        vm.isLoading = false;
-        vm.$showAlert(
-          "파일 업로드",
-          "파일 업로드 오류, 관리자에게 문의하세요."
-        );
-        vm.uploadObject.confirm = false;
-        document.getElementById("file").value = "";
-      }
-    },
-
-    async reUpload() {
-      const vm = this;
-      vm.isLoading = true; // 로딩 시작
-
-      try {
-        const response = await axios.post("/files/upload", vm.uploadObject, {
-          headers: {
-            "Content-Type": "multipart/form-data",
-          },
-        });
-
-        vm.isLoading = false; // 로딩 종료
-        await vm.fileSelectList();
-        vm.$showAlert("파일 업로드", response.data.message);
-        vm.uploadObject.confirm = false;
-        document.getElementById("file").value = "";
-      } catch (error) {
-        vm.isLoading = false; // 로딩 종료
-        vm.$showAlert(
-          "파일 업로드",
-          "파일 업로드 오류, 관리자에게 문의하세요."
-        );
-        vm.uploadObject.confirm = false;
-        document.getElementById("file").value = "";
-      }
-    },
-
-    download(file) {
-      const vm = this;
-
-      vm.isLoading = true; // 로딩 시작
-
-      axios
-        .post("/files/download", {
-          host_code: vm.connection.host_code,
-          path: file.parent,
-          fileName: file.text,
-        })
-        .then((response) => {
-          vm.isLoading = false; // 로딩 해제
-          vm.$showAlert("파일 다운로드", response.data.message);
-        })
-        .catch((error) => {
-          vm.isLoading = false; // 로딩 해제
-          vm.$showAlert(
-            "파일 다운로드",
-            "파일 다운로드 오류, 관리자에게 문의하세요."
-          );
-        });
-    },
-
-    async rename() {
-      const vm = this;
-
-      if (vm.reNameObject.changeName === null) {
-        vm.$showAlert("이름 바꾸기", "변경할 이름을 입력해주세요.");
-        return;
-      }
-
-      let fullName =
-        vm.reNameObject.changeName + "." + vm.reNameObject.extension;
-
-      if (vm.reNameObject.extension === "폴더") {
-        fullName = vm.reNameObject.changeName;
-      }
-
-      vm.isLoading = true; // 로딩 시작
-
-      try {
-        const response = await axios.put("/files/rename", {
-          host_code: vm.connection.host_code,
-          currentPath: vm.reNameObject.currentPath,
-          changePath: vm.reNameObject.parentPath + "/" + fullName,
-        });
-
-        vm.isLoading = false; // 로딩 해제
-        vm.reNameObject.changeName = null;
-        await vm.fileSelectList();
-        vm.$showAlert("이름 바꾸기", response.data.message);
-        vm.closeReNameModal();
-      } catch (error) {
-        vm.isLoading = false; // 로딩 해제
-        vm.$showAlert(
-          "이름 바꾸기",
-          "이름 바꾸기 오류, 관리자에게 문의하세요."
-        );
-        vm.closeReNameModal();
-        vm.reNameObject.changeName = null;
-      }
-    },
-
-    async remove() {
-      const vm = this;
-
-      if (vm.selectedFiles.length === 0) {
-        vm.$showAlert("파일 삭제", "선택한 파일이 없습니다.");
-        return;
-      }
-
-      if (
-        !(await vm.$showConfirm("파일 삭제", "선택한 파일을 삭제하시겠습니까?"))
-      ) {
-        return;
-      }
-
-      vm.selectedFiles.forEach((file) => {
-        delete file.fileName;
-        delete file.extension;
-      });
-      vm.isLoading = true; // 로딩 시작
-      try {
-        const response = await axios.delete(
-          `/files/${vm.connection.host_code}`,
-          { data: vm.selectedFiles }
-        );
-
-        vm.isLoading = false;
-        vm.getChildren(vm.selectItem.id, vm.selectItem.children); // 자식 폴더 리스트 업데이트
-        await vm.fileSelectList();
-        vm.$showAlert("파일 삭제", response.data.message);
-        vm.checkAll = false;
-        vm.selectedFiles = [];
-      } catch (error) {
-        vm.isLoading = false;
-        vm.$showAlert("파일 삭제", "파일 삭제 오류, 관리자에게 문의하세요.");
-        vm.checkAll = false;
-        vm.selectedFiles = [];
-      }
-    },
-
-    async fileConfirm(type) {
-      const vm = this;
-
-      if (
-        !(await vm.$showConfirm(
-          "파일 " + type,
-          "선택한 파일을 " + type + " 하시겠습니까?"
-        ))
-      ) {
-        return;
-      }
-
-      let file = vm.selectedFiles[0];
-      let index = file.path.lastIndexOf("/");
-
-      if (file.path.substring(0, index) === file.movePath) {
-        vm.$showAlert(
-          "파일 " + type,
-          "현재 파일 경로와 동일합니다. 다른 경로를 선택해주세요."
-        );
-        return;
-      }
-
-      if (type === "복사") {
-        vm.copy(vm.selectedFiles, "confirm", false);
-      } else {
-        vm.move(vm.selectedFiles, [], "confirm", false);
-      }
-    },
-    async move(fileList, removeFolderList, type, check) {
-      const vm = this;
-
-      fileList.forEach((file) => {
-        if (!file.movePath) {
-          file.movePath = vm.modalSeletedNode;
-        }
-      });
-
-      vm.isLoading = true; // 로딩 시작
-      try {
-        const response = await axios.put(
-          "/files/move/" + vm.connection.host_code,
-          {
-            fileList: fileList,
-            removeFolder: removeFolderList,
-            type: type,
-            check: check,
-          }
-        );
-
-        vm.isLoading = false; // 로딩 해제
-        if (response.data.checkMessage.status === 100) {
-          let returnFileList = response.data.resultData.fileList;
-          let folderList = response.data.resultData.removeFolderList;
-          const moveOrCopy = await vm.$showRadioConfirm(
-            "파일 이동",
-            response.data.checkMessage.message
-          );
-          vm.move(
-            returnFileList,
-            folderList,
-            moveOrCopy.type,
-            moveOrCopy.checkBox
-          );
-        } else {
-          let folderList = response.data.resultData.removeFolderList;
-          vm.checkAll = false;
-          vm.selectedFiles = [];
-
-          if (folderList.length != 0) {
-            vm.removeFolder(folderList);
-          } else {
-            await vm.fileSelectList();
-          }
-          vm.$showAlert("파일 이동", response.data.checkMessage.message);
-          vm.closeTreeModal();
-        }
-      } catch (error) {
-        vm.isLoading = false; // 로딩 해제
-        vm.$showAlert("파일 이동", "파일 이동 오류, 관리자에게 문의하세요.");
-        vm.checkAll = false;
-        vm.selectedFiles = [];
-        vm.closeTreeModal();
-      }
-    },
-
-    async copy(fileList, type, check) {
-      const vm = this;
-
-      fileList.forEach((file) => {
-        if (!file.movePath) {
-          file.movePath = vm.modalSeletedNode;
-        }
-      });
-
-      vm.isLoading = true; // 로딩 시작
-      try {
-        const response = await axios.put(
-          "/files/copy/" + vm.connection.host_code,
-          { fileList: fileList, type: type, check: check }
-        );
-
-        vm.isLoading = false; // 로딩 해제
-        if (response.data.checkMessage.status === 100) {
-          let returnFileList = response.data.resultData.fileList;
-          const moveOrCopy = await vm.$showRadioConfirm(
-            "파일 복사",
-            response.data.checkMessage.message
-          );
-          vm.copy(returnFileList, moveOrCopy.type, moveOrCopy.checkBox);
-        } else {
-          vm.$showAlert("파일 복사", response.data.checkMessage.message);
-          vm.checkAll = false;
-          vm.selectedFiles = [];
-          vm.closeTreeModal();
-        }
-      } catch (error) {
-        vm.isLoading = false; // 로딩 해제
-        vm.$showAlert("파일 복사", "파일 이동 오류, 관리자에게 문의하세요.");
-        vm.checkAll = false;
-        vm.selectedFiles = [];
-        vm.closeTreeModal();
-      }
-    },
-
-    async removeFolder(folderList) {
-      const vm = this;
-
-      vm.isLoading = false; // 로딩 해제
-
-      try {
-        const response = await axios.delete(
-          "/files/folder/" + vm.connection.host_code,
-          { data: folderList }
-        );
-
-        vm.isLoading = false; // 로딩 해제
-        vm.getChildren(vm.selectItem.id, vm.selectItem.children); // 자식 폴더 리스트 업데이트
-        await vm.fileSelectList();
-        if (response.data.status === 500) {
-          vm.$showAlert("파일 이동", response.data.message);
-        }
-      } catch (error) {
-        vm.isLoading = false; // 로딩 해제
-        vm.$showAlert(
-          "파일 이동",
-          "원본 폴더 삭제 오류, 관리자에게 문의하세요."
-        );
-      }
-    },
-
-    // 미리보기 모달 닫기
-    previewModalClose() {
-      this.previewModalOpen = false;
-      this.dataTable = {};
-    },
-
-    // 파일 미리보기
-    preview(file) {
-      // 허용된 파일 확장자 검사
-      const allowedExtensions = ["xlsx", "xls", "csv", "json"];
-
-      if (!allowedExtensions.includes(file.extension.toLowerCase())) {
-        this.$showAlert(
-          "파일 미리보기",
-          "엑셀, CSV, JSON 파일만 읽을 수 있습니다."
-        );
-        return;
-      }
-
-      this.previewModalOpen = true;
-      this.fileRead(file);
-    },
-
-    // 파일 미리보기 - 읽기
-    async fileRead(file) {
-      const vm = this;
-      vm.isLoading = true;
-      axios
-        .post("/files/read/" + vm.connection.host_code, {
-          path: file.path,
-          fileName: file.text,
-          extension: file.extension,
-          type: "file",
-          datasetId: "",
-          viewMode: true,
-        })
-        .then((response) => {
-          vm.dataTable = response.data.resultData.dataTableMap;
-        })
-        .catch(() => {
-          vm.isLoading = false;
-        });
-    },
-    selectEncoding(encoding) {
-      // 선택한 인코딩에 대한 처리
-      this.encodingType = encoding;
-      console.log(`${encoding} 인코딩이 선택되었습니다.`);
-      this.closeExcel(); // 선택 후 모달 닫기
-    },
-    closeExcel() {
-      this.isOpenExcel = false; // 모달 상태를 false로 설정+
-      this.exportToCSV();
-    },
-    // 노드 설정 저장 후 닫기
-    fnUpdateSetup(jobItem) {
-      console.log("값을 보자 ", jobItem);
-      if (
-        !jobItem.dataTable.rowData ||
-        jobItem.dataTable.rowData.length === 0
-      ) {
-        // rowData가 null이거나 빈 리스트일 때 실행할 코드
-        this.$showAlert("엑셀 생성 실패", "저장된 데이터가 없습니다.");
-      } else {
-        this.closeModal(); // 괄호 추가
-        this.isOpenExcel = true;
-        this.selectNode = jobItem;
-      }
-    },
-    async exportToCSV() {
-      const vm = this;
-
-      try {
-        // 컬럼 헤더 생성
-        console.log()
-        const header = this.selectNode.dataTable.columnDatas.map(
-          (col) => col.displyColumnNm
-        );
-
-        // 데이터 준비 (rowData를 객체로 변환)
-        const data = this.selectNode.dataTable.rowData.map((row) => {
-          const rowObject = {};
-          this.selectNode.dataTable.columnDatas.forEach((col, index) => {
-            rowObject[col.displyColumnNm] = row[index];
-          });
-          return rowObject;
-        });
-
-        // CSV 데이터 생성
-        const csvContent = [
-          header.join(","),
-          ...data.map((row) =>
-            header
-              .map((col) => {
-                // null, undefined 처리 및 쉼표가 포함된 데이터 처리
-                const cellData = row[col] ?? "";
-                return typeof cellData === "string" && cellData.includes(",")
-                  ? `"${cellData}"`
-                  : cellData;
-              })
-              .join(",")
-          ),
-        ].join("\n");
-
-        let blob;
-        // encodingType이 설정되지 않은 경우 기본값으로 utf-8 사용
-        const encoding = this.encodingType || "utf-8";
-        console.log("@@@", encoding);
-        if (encoding === "utf-8") {
-          // UTF-8 BOM 추가
-          blob = new Blob([new Uint8Array([0xef, 0xbb, 0xbf]), csvContent], {
-            type: "text/csv;charset=utf-8",
-          });
-        } else if (encoding === "euc-kr") {
-          // EUC-KR 인코딩
-          const encoder = new TextEncoder();
-          const encodedData = encoder.encode(csvContent);
-          blob = new Blob([encodedData], {
-            type: "text/csv;charset=euc-kr",
-          });
-        } else {
-          console.log("지원되지 않는 인코딩 타입입니다: " + encoding);
-        }
-
-        if (!blob) {
-          console.log("Blob 생성 실패");
-        }
-
-        // 파일 이름 설정
-        const fileName = `${vm.selectNode.node_type}_${vm.$getFullFileTime(
-          new Date()
-        )}.csv`;
-
-        // 서버에 업로드
-        const formData = new FormData();
-        formData.append("uploadFile", blob, fileName);
-        formData.append("path", this.connection.path);
-        formData.append("host_code", this.connection.host_code);
-
-        const response = await axios.post("/files/formDataUpload", formData, {
-          headers: {
-            "Content-Type": "multipart/form-data",
-          },
-        });
-
-        vm.$showAlert("업로드", response.data.message);
-        vm.fileSelectList();
-      } catch (error) {
-        console.error("CSV 내보내기 중 오류 발생:", error);
-        vm.$showAlert("업로드", "업로드 오류, 관리자에게 문의하세요.");
-      }
-    },
-    // 노드 생성
-    fnCreateNode(type) {
-      let node = Object.assign({}, this.$getDefaultJobGroup().node);
-      node.id = Math.floor(Math.random() * 1000) + 1;
-      node.node_id = node.id;
-      node.label = type;
-      node.node_name = type;
-      node.node_type = type;
-      node.position = {
-        x: Math.floor(Math.random() * 500) + 1,
-        y: Math.floor(Math.random() * 500) + 1,
-      };
-      let tempData = JSON.parse(JSON.stringify(node));
-      tempData.data = null;
-      node.data = tempData;
-      switch (type) {
-        case "DB_READ":
-          node.itm = Object.assign({}, this.$getDefaultJobGroup().connectionDb);
-          node.itm.type = "dbConnection";
-          break;
-        case "API_READ":
-          node.itm = Object.assign(
-            {},
-            this.$getDefaultJobGroup().connectionApi
-          );
-          break;
-        case "EHOJO_READ":
-          node.itm = Object.assign(
-            {},
-            this.$getDefaultJobGroup().connectionEhojo
-          );
-          break;
-      }
-      this.selectNode = node;
-    },
-  },
-
-  watch: {
-    // 모달타입에 맞는 모달창 화면 보여주기
-    modalType: function (newValue, oldValue) {
-      if (this.modalType != null) {
-        this.openModal(newValue);
-      }
-    },
-    selectedHostCodeData(newVal) {
-      if (newVal !== null && !this.isUpdating) {
-        this.isUpdating = true;  // 업데이트 시작
-
-        // newVal이 이제 인덱스입니다
-        this.selectedDirectory = newVal;
-        this.selectedHostData = this.hostList[newVal];
-
-        this.$nextTick(() => {
-          this.isUpdating = false;  // 업데이트 완료
-        });
-      }
-    },
-
-    selectedDirectory(newVal) {
-      if (newVal !== null && !this.isUpdating) {
-        this.isUpdating = true;  // 업데이트 시작
-
-        // newVal이 이제 인덱스입니다
-        this.selectedHostCodeData = newVal;
-        this.selectedHostData = this.hostList[newVal];
-
-        this.$nextTick(() => {
-          this.isUpdating = false;  // 업데이트 완료
-        });
-      }
-    }
   },
   components: {
-    PageNavigation: PageNavigation,
-    SvgIcon: SvgIcon,
-    PaginationButton: PaginationButton,
-    TreeItem: TreeItem,
-    TreeModal: TreeModal,
-    FileDataRead: FileDataRead,
-    DatabaseConnection: DatabaseConnection,
-    apiConnection: apiConnection,
-    XLSX: XLSX,
-    EhojoConnection: EhojoConnection,
-  },
-  mounted() {
-    this.userauth = this.$authorChk();
-    this.selectHosts();
-    this.searchInit();
+    FileManagementMain: FileManagementMain,
+    PageNavigation: PageNavigation
   },
 };
-</script>
-<style>
-.tabs-container {
-  margin-top: 1rem;
-}
-
-.tab-btn {
-  padding: 0.5rem 1rem;
-  margin-right: 0.5rem;
-  border: 1px solid #ddd;
-  border-bottom: none;
-  border-radius: 4px 4px 0 0;
-  cursor: pointer;
-  background: #f5f5f5;
-}
-
-.tab-btn.active {
-  background: #fff;
-  border-bottom: 2px solid #007bff;
-  color: #007bff;
-}
-</style>
+</script>

26c605b

9905dfc

client/views/pages/data/datapost/DataPostManagerMain.vue

--- client/views/pages/data/datapost/DataPostManagerMain.vue

+++ client/views/pages/data/datapost/DataPostManagerMain.vue


 <template>
-    <div class="content-box flex justify-between">
-        <div class="flex20 content-box">
-            <div class="left-content flex100 content-box">
-                <div class="content-box">
-                    <div class="content-titleZone">
-                        <p class="box-title">카테고리 리스트</p>
-                    </div>
-                    <div class="content-zone">
-                        <CodeList :groupCode="'DATA_CTGRY'" @selectCode="selectCode" />
-                    </div>
-                </div>
-            </div>
+  <div class="content-box flex justify-between">
+    <div class="flex20 content-box">
+      <div class="left-content flex100 content-box">
+        <div class="content-box">
+          <div class="content-titleZone">
+            <p class="box-title">카테고리 리스트</p>
+          </div>
+          <div class="content-zone">
+            <CodeList :groupCode="'DATA_CTGRY'" @selectCode="selectCode" />
+          </div>
         </div>
-        <div class="flex80 content-box">
-            <div class="right-content flex100">
-                <div class="flex-column justify-between">
-                    <div class="flex justify-end">
-                        <div class="search-bar">
-                            <div class="flex justify-end align-center" style="gap: 5px">
-                                <input type="date" name="start-date" id="start-date" class="square-date"
-                                    :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택"
-                                    v-model="search_date.value" />
-                                <span>~</span>
-                                <input type="date" name="end-date" id="end-date" class="square-date"
-                                    :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택"
-                                    v-model="search_date.value2" />
-                                <select class="square-select" v-model="search_data1.value">
-                                    <option :value="null">공개여부</option>
-                                    <option :value="true">공개</option>
-                                    <option :value="false">비공개</option>
-                                </select>
-                                <select class="square-select" v-model="search_data2.value">
-                                    <option :value="null">카테고리</option>
-                                    <option v-for="(item, indx) in categoryList" :key="indx" :value="item.cmmnCode">{{
-                                        item.codeNm }}</option>
-                                </select>
-                                <select name="" id="searchItm1" class="square-select" v-model="search_data3.key">
-                                    <option :value="null">검색조건</option>
-                                    <option value="post_sj">제목</option>
-                                    <option value="post_dc">내용</option>
-                                </select>
-                                <div class="flex justify-end align-center no-gutter">
-                                    <input type="text" class="square-input flex90" placeholder="Search"
-                                        v-model="search_data3.value" v-on:keyup.enter="searchData()" />
-                                    <button class="square-button blue-btn flex10" @click="searchData()">
-                                        <svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="content-zone" style="overflow: auto;">
-                        <div class="table-zone">
-                            <div class="list-info flex justify-between align-center">
-                                <div class="count-zone">
-                                    <p>총<span>{{ search.totalRows }}</span>건</p>
-                                </div>
-                                <div class="cunt-selectZone">
-                                    <select name="" id="">
-                                        <option value="">10개 보기</option>
-                                        <option value="">20개 보기</option>
-                                    </select>
-                                </div>
-                            </div>
-                            <table class="list-table">
-                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
-                                <colgroup>
-                                    <col style="width: 10%" />
-                                    <col style="width: 40%" />
-                                    <col style="width: 10%" />
-                                    <col style="width: 10%" />
-                                    <col style="width: 10%" />
-                                    <col style="width: 30%" />
-                                </colgroup>
-                                <thead>
-                                    <tr>
-                                        <th>No</th>
-                                        <th>제목</th>
-                                        <th>생성자</th>
-                                        <th>부서</th>
-                                        <th>카테고리</th>
-                                        <th>등록일시</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <template v-if="dataPostList.length > 0">
-                                        <tr v-for="(item, indx) in dataPostList" :key="indx" @click="selectPost(item)">
-                                            <td>{{ search.totalRows - indx - (search.currentPage - 1) * search.perPage
-                                                }}</td>
-                                            <td>{{ item.post_sj }}</td>
-                                            <td>{{ item.user_nm }}</td>
-                                            <td>{{ item.dept_nm }}</td>
-                                            <td>{{ item.ctgry_id }}</td>
-                                            <td>{{ $getFullTime(item.creat_dt) }}</td>
-                                        </tr>
-                                    </template>
-                                    <tr v-else>
-                                        <td colspan="6">등록된 데이터가 없습니다.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                            <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage"
-                                :totalCount="search.totalRows" :maxRange="5" :click="searchData" />
-                        </div>
-                    </div>
-                    <div class="flex justify-end">
-                        <button class="blue-btn small-btn" @click="createDataPost">데이터 등록</button>
-                    </div>
-                </div>
-            </div>
-        </div>
+      </div>
     </div>
+    <div class="flex80 content-box">
+      <div class="right-content flex100">
+        <div class="flex-column justify-between">
+          <div class="flex justify-end">
+            <div class="search-bar">
+              <div class="flex justify-end align-center" style="gap: 5px">
+                <input type="date" name="start-date" id="start-date" class="square-date"
+                  :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value" />
+                <span>~</span>
+                <input type="date" name="end-date" id="end-date" class="square-date"
+                  :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value2" />
+                <select class="square-select" v-model="search_data1.value">
+                  <option :value="null">공개여부</option>
+                  <option :value="true">공개</option>
+                  <option :value="false">비공개</option>
+                </select>
+                <select class="square-select" v-model="search_data2.value">
+                  <option :value="null">카테고리</option>
+                  <option v-for="(item, indx) in categoryList" :key="indx" :value="item.cmmnCode">{{
+                    item.codeNm }}</option>
+                </select>
+                <select name="" id="searchItm1" class="square-select" v-model="search_data3.key">
+                  <option :value="null">검색조건</option>
+                  <option value="post_sj">제목</option>
+                  <option value="post_dc">내용</option>
+                </select>
+                <div class="flex justify-end align-center no-gutter">
+                  <input type="text" class="square-input flex90" placeholder="Search" v-model="search_data3.value"
+                    v-on:keyup.enter="searchData()" />
+                  <button class="square-button blue-btn flex10" @click="searchData()">
+                    <svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="content-zone" style="overflow: auto;">
+            <div class="table-zone">
+              <div class="list-info flex justify-between align-center">
+                <div class="count-zone">
+                  <p>총<span>{{ search.totalRows }}</span>건</p>
+                </div>
+                <div class="cunt-selectZone">
+                  <select name="" id="">
+                    <option value="">10개 보기</option>
+                    <option value="">20개 보기</option>
+                  </select>
+                </div>
+              </div>
+              <table class="list-table">
+                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
+                <colgroup>
+                  <col style="width: 10%" />
+                  <col style="width: 40%" />
+                  <col style="width: 10%" />
+                  <col style="width: 10%" />
+                  <col style="width: 10%" />
+                  <col style="width: 30%" />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th>No</th>
+                    <th>제목</th>
+                    <th>생성자</th>
+                    <th>부서</th>
+                    <th>카테고리</th>
+                    <th>등록일시</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <template v-if="dataPostList.length > 0">
+                    <tr v-for="(item, indx) in dataPostList" :key="indx" @click="selectPost(item)">
+                      <td>{{ search.totalRows - indx - (search.currentPage - 1) * search.perPage
+                        }}</td>
+                      <td>{{ item.post_sj }}</td>
+                      <td>{{ item.user_nm }}</td>
+                      <td>{{ item.dept_nm }}</td>
+                      <td>{{ item.ctgry_id }}</td>
+                      <td>{{ $getFullTime(item.creat_dt) }}</td>
+                    </tr>
+                  </template>
+                  <tr v-else>
+                    <td colspan="6">등록된 데이터가 없습니다.</td>
+                  </tr>
+                </tbody>
+              </table>
+              <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage"
+                :totalCount="search.totalRows" :maxRange="5" :click="searchData" />
+            </div>
+          </div>
+          <div class="flex justify-end">
+            <button class="blue-btn small-btn" @click="createDataPost">데이터 등록</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 import CodeList from "../../../component/common/Component_CodeList.vue";

 import PageNavigation from "../../../component/PageNavigation.vue";
 import SvgIcon from "@jamescoyle/vue-icon";
 import PaginationButton from "../../../component/PaginationButton.vue";
+import moment from 'moment';
 
 export default {
   data() {

       // 선택
       search_data3: this.$getDefaultSerchItem("post_sj", "string"),
       // 날짜
-      search_date: this.$getDefaultSerchItem("creat_dt", "dates"),
+      search_date: {
+        key: "creat_dt",
+        value: null,
+        key2: "creat_dt",
+        value2: null,
+        type: "dates",
+      },
+      // search_date: this.$getDefaultSerchItem("creat_dt", "dates"),
       categoryList: [],
     };
   },

       });
     },
     searchData: function () {
-      console.log("@@검색값",this.search);
+      console.log("@@검색값", this.search);
       const vm = this;
 
       let check = false;

       })
         .then(function (response) {
           if (response.data.checkMessage.success) {
+            vm.setDateRange(response.data.resultData.dataPostList);
             vm.dataPostList = response.data.resultData.dataPostList;
             vm.search.totalRows = response.data.resultData.totalRow;
           }
         })
         .catch(function (error) {
-          this.$showAlert(
+          vm.$showAlert(
             "에러 발생",
             "에러가 발생했습니다. 관리자에게 문의해 주세요."
           );
         });
     },
+    setDateRange(dataList) {
+      const dates = dataList.map(item => item.creat_dt).sort();
+      
+      if (dates.length > 0) {
+        this.search_date.value = moment(dates[0]).format('YYYY-MM-DD');
+        this.search_date.value2 = moment(dates[dates.length - 1]).format('YYYY-MM-DD');
+      }
+    },
     // 초기화
     init: async function () {
       this.search.searchObjectList.push(this.search_date);

9905dfc

client/views/pages/data/filemanger/FileManagementMain.vue (added)

+++ client/views/pages/data/filemanger/FileManagementMain.vue

...	...	@@ -0,0 +1,1646 @@
	1	+<template>
	2	+ <div class="content-box flex justify-between">
	3	+ <div class="flex20 content-box">
	4	+ <div class="left-content flex100 content-box">
	5	+ <div class="content-box">
	6	+ <div class="flex align-end justify-between no-gutter">
	7	+ <div class="mb10 flex70">
	8	+ <div class="content">
	9	+ <p class="box-title">호스트 선택</p>
	10	+ </div>
	11	+ <div>
	12	+ <select class="only full-select" v-model="selectedHostCodeData">
	13	+ <option :value="null" disabled>선택</option>
	14	+ <option v-for="(host, idx) in hostList" :key="idx" :value="idx">
	15	+ {{ host.host_nm + " - (" + host.host_ip + ")" }}
	16	+ </option>
	17	+ </select>
	18	+ </div>
	19	+ </div>
	20	+ <div class="mb10 flex70" v-if="userauth !== 'ROLE_ADMIN'">
	21	+ <div class="content">
	22	+ <p class="box-title">디렉토리 선택</p>
	23	+ </div>
	24	+ <div>
	25	+ <select class="only full-select" v-model="selectedDirectory">
	26	+ <option :value="null" disabled>선택</option>
	27	+ <option v-for="(host, idx) in hostList" :key="idx" :value="idx">
	28	+ {{ host.dept_drctry_nm }}
	29	+ </option>
	30	+ </select>
	31	+ </div>
	32	+ </div>
	33	+ <div class="mb10 flex25">
	34	+ <button class="blue-btn large-btn" @click="uniquePaths()">
	35	+ 연결
	36	+ </button>
	37	+ </div>
	38	+ </div>
	39	+ <div class="file-tree-zone"
	40	+ :style="{ height: userauth !== 'ROLE_ADMIN' ? 'calc(100% - 156px)' : 'calc(100% - 79px)' }">
	41	+ <div class="content-titleZone flex justify-between align-center">
	42	+ <p class="box-title">폴더 리스트</p>
	43	+ <button class="blue-border-btn small-btn" @click="openMkdirModal()">
	44	+ 폴더추가
	45	+ </button>
	46	+ </div>
	47	+ <div class="file-zone overflow-y">
	48	+ <ul class="tree-wrap">
	49	+ <TreeItem ref="treeItem" :connection="connection" :selectedNode="selectedNode"
	50	+ v-for="(item, idx) in nodes" :item="item" :idx="item.id" :selectItem="selectItem"
	51	+ :key="idx" @selectFolder="selectFolder" @isLoading="handleIsLoading"
	52	+ @selectItem="handleSelectItem" />
	53	+
	54	+ </ul>
	55	+ </div>
	56	+ </div>
	57	+ </div>
	58	+ </div>
	59	+ </div>
	60	+ <div class="flex80 content-box">
	61	+ <div class="right-content flex100">
	62	+ <div class="flex-column justify-between">
	63	+ <div class="flex justify-between align-center no-gutter">
	64	+ <div class="flex40">
	65	+ <button class="blue-border-btn small-btn" @click="openTreeModal('copy')">
	66	+ 선택복사
	67	+ </button>
	68	+ <button class="blue-border-btn small-btn" @click="openTreeModal('move')">
	69	+ 선택이동
	70	+ </button>
	71	+ <button class="red-border-btn small-btn" @click="remove()">
	72	+ 선택삭제
	73	+ </button>
	74	+ </div>
	75	+ <div class="flex justify-end flex60">
	76	+ <div class="search-bar">
	77	+ <div class="flex justify-end align-center">
	78	+ <select name="" id="" class="square-select" v-model="searchType">
	79	+ <option value="all">전체</option>
	80	+ <option value="folder">현재폴더</option>
	81	+ </select>
	82	+ <div class="search-square">
	83	+ <div class="flex justify-end align-center no-gutter">
	84	+ <input type="text" class="square-input flex90" placeholder="Search File"
	85	+ v-model="searchText" @keyup.enter="searchFiles()" />
	86	+ <button class="square-button blue-btn flex10">
	87	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"
	88	+ @click="searchFiles()"></svg-icon>
	89	+ </button>
	90	+ </div>
	91	+ </div>
	92	+ </div>
	93	+ </div>
	94	+ </div>
	95	+ </div>
	96	+ <div class="content-zone" style="overflow-y: auto">
	97	+ <div class="table-zone file-table">
	98	+ <div class="list-info flex justify-between align-center">
	99	+ <div class="count-zone">
	100	+ <p>
	101	+ 총
	102	+ <span v-if="search.totalRows != 0">{{
	103	+ search.totalRows
	104	+ }}</span>
	105	+ <span v-else>0</span>건 중
	106	+ <span>{{ selectedFiles.length }}</span>건 선택
	107	+ </p>
	108	+ <p>
	109	+ 현재경로 : <span>{{ connection.path }}</span>
	110	+ </p>
	111	+ </div>
	112	+ </div>
	113	+ <table class="list-table">
	114	+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
	115	+ <colgroup>
	116	+ <col style="width: 5%" />
	117	+ <col style="width: 45%" />
	118	+ <col style="width: 10%" />
	119	+ <col style="width: 15%" />
	120	+ <col style="width: 10%" />
	121	+ <col style="width: 15%" />
	122	+ </colgroup>
	123	+ <thead>
	124	+ <tr>
	125	+ <th>
	126	+ <input type="checkbox" @click="filesCheckAll" v-model="checkAll" />
	127	+ </th>
	128	+ <th>이름</th>
	129	+ <th>타입</th>
	130	+ <th>마지막 수정</th>
	131	+ <th>크기</th>
	132	+ <th>관리</th>
	133	+ </tr>
	134	+ </thead>
	135	+ <tbody>
	136	+ <tr v-for="(file, index) in fileList" :key="index" @click="selectFileList(file)">
	137	+ <td v-if="file.text != '상위폴더로 이동'" @click.stop="">
	138	+ <input type="checkbox" @click.stop="" v-model="selectedFiles" :value="{
	139	+ folder: file.folder,
	140	+ path: file.path,
	141	+ fileName: file.text,
	142	+ extension: file.extension,
	143	+ }" name="files" />
	144	+ </td>
	145	+ <td v-else @click.stop=""></td>
	146	+ <td>
	147	+ <div class="text-lf">
	148	+ <span v-if="file.extension === 'txt'"><img
	149	+ src="../../../../resources/img/icon/txt.png" ref=""
	150	+ alt="" /></span>
	151	+ <span v-else-if="file.extension === 'pdf'"><img
	152	+ src="../../../../resources/img/icon/pdf.png" alt="" /></span>
	153	+ <span v-else-if="
	154	+ file.extension === 'pptx' \|\|
	155	+ file.extension === 'ppt'
	156	+ "><img src="../../../../resources/img/icon/ppt.png" alt="" /></span>
	157	+ <span v-else-if="file.extension === 'hwp'"><img
	158	+ src="../../../../resources/img/icon/hwp.png" alt="" /></span>
	159	+ <span v-else-if="
	160	+ file.extension === 'xls' \|\|
	161	+ file.extension === 'xlsx' \|\|
	162	+ file.extension === 'csv'
	163	+ "><img src="../../../../resources/img/icon/xls.png" alt="" /></span>
	164	+ <span v-else-if="file.extension === 'jpg'"><img
	165	+ src="../../../../resources/img/icon/img.png" alt="" /></span>
	166	+ <span v-else-if="file.extension === 'png'"><img
	167	+ src="../../../../resources/img/icon/img.png" ref=""
	168	+ alt="" /></span>
	169	+ <span>{{ " " + file.text }}</span>
	170	+ </div>
	171	+ </td>
	172	+ <td>{{ file.extension }}</td>
	173	+ <td>{{ file.lastUpdate }}</td>
	174	+ <td v-if="file.size != 0">
	175	+ {{ $filters.bytesToSize(file.size) }}
	176	+ </td>
	177	+ <td v-else></td>
	178	+ <td>
	179	+ <div v-if="!file.folder">
	180	+ <button class="icon-btn orange-btn" title="미리보기"
	181	+ @click.stop="preview(file)">
	182	+ <svg-icon type="mdi" :width="18" :height="18"
	183	+ :path="fileFindPath"></svg-icon>
	184	+ </button>
	185	+ <button class="icon-btn green-btn ml5" title="파일명 변경"
	186	+ @click.stop="openReNameModal(file)">
	187	+ <svg-icon type="mdi" :width="18" :height="18"
	188	+ :path="fileNamePath"></svg-icon>
	189	+ </button>
	190	+ <button class="icon-btn blue-btn ml5" title="다운로드"
	191	+ @click.stop="download(file)">
	192	+ <svg-icon type="mdi" :width="18" :height="18"
	193	+ :path="filedownPath"></svg-icon>
	194	+ </button>
	195	+ </div>
	196	+ <div v-else-if="
	197	+ file.folder && file.text != '상위폴더로 이동'
	198	+ ">
	199	+ <button class="icon-btn green-btn ml5" title="폴더명 변경"
	200	+ @click.stop="openReNameModal(file)">
	201	+ <svg-icon type="mdi" :width="18" :height="18"
	202	+ :path="fileNamePath"></svg-icon>
	203	+ </button>
	204	+ </div>
	205	+ </td>
	206	+ </tr>
	207	+ </tbody>
	208	+ </table>
	209	+ </div>
	210	+ </div>
	211	+ <div class="flex justify-end">
	212	+ <button class="blue-btn small-btn" @click="setModal('typeSelected', 'small')">
	213	+ 업로드
	214	+ </button>
	215	+ </div>
	216	+ </div>
	217	+ </div>
	218	+ </div>
	219	+ </div>
	220	+ <!-- 폴더 목록 모달 -->
	221	+ <TreeModal :modalOpen="treeModalOpen" :modalConnection="modalConnection" :modalNodes="modalNodes"
	222	+ :selectType="selectModalType" @modalSelectFolder="modalSelectFolder" @closeTreeModal="closeTreeModal"
	223	+ @modalSubmit="fileConfirm" />
	224	+ <!-- 데이터셋 미리보기 모달 -->
	225	+ <div v-show="previewModalOpen" class="modal-wrapper" :style="isLoading ? { cursor: 'wait' } : {}">
	226	+ <div v-if="isLoading" class="loading-overlay">
	227	+ <div class="loading-div">
	228	+ <span>LOADING </span>
	229	+ <span class="anima">.</span>
	230	+ <span class="anima">.</span>
	231	+ <span class="anima">.</span>
	232	+ </div>
	233	+ </div>
	234	+ <div class="modal-container list-modal">
	235	+ <div class="modal-title">
	236	+ <div class="flex justify-between align-center">
	237	+ <h2>데이터 미리보기</h2>
	238	+ <button class="close-btn" @click="previewModalClose()">X</button>
	239	+ </div>
	240	+ </div>
	241	+ <div class="modal-content-monthly">
	242	+ <FileDataRead v-if="previewModalOpen" v-model:isLoading="isLoading" :dataTable="dataTable"
	243	+ :preview="true">
	244	+ </FileDataRead>
	245	+ </div>
	246	+ <div class="modal-end flex justify-end">
	247	+ <button class="blue-btn small-btn" @click="previewModalClose()">
	248	+ 확인
	249	+ </button>
	250	+ </div>
	251	+ </div>
	252	+ </div>
	253	+ <!-- 폴더, 파일 이름변경 모달 -->
	254	+ <div v-show="reNameModalOpen" class="modal-wrapper">
	255	+ <div class="modal-container small-modal">
	256	+ <div class="modal-title text-ct">
	257	+ <h2>폴더(파일)명 변경</h2>
	258	+ </div>
	259	+ <div class="modal-content-monthly">
	260	+ <div class="table-zone">
	261	+ <table class="form-table2">
	262	+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
	263	+ <colgroup>
	264	+ <col style="width: 25%" />
	265	+ <col style="width: 75%" />
	266	+ </colgroup>
	267	+ <tbody>
	268	+ <tr>
	269	+ <th>현재 이름</th>
	270	+ <td>{{ reNameObject.currentName }}</td>
	271	+ </tr>
	272	+ <tr>
	273	+ <th>변경 이름</th>
	274	+ <td>
	275	+ <input type="text" class="full-input" v-model="reNameObject.changeName"
	276	+ @keyup.enter="rename()" />
	277	+ </td>
	278	+ </tr>
	279	+ </tbody>
	280	+ </table>
	281	+ </div>
	282	+ </div>
	283	+ <div class="modal-end flex justify-between" style="flex-wrap: nowrap">
	284	+ <button class="gray-btn large-btn" @click="closeReNameModal()">
	285	+ 취소
	286	+ </button>
	287	+ <button class="blue-btn large-btn" @click="rename()">확인</button>
	288	+ </div>
	289	+ </div>
	290	+ </div>
	291	+ <!-- 폴더추가 모달 -->
	292	+ <div v-show="mkdirModalOpen" class="modal-wrapper">
	293	+ <div class="modal-container small-modal">
	294	+ <div class="modal-title text-ct">
	295	+ <h2>폴더 추가</h2>
	296	+ </div>
	297	+ <div class="modal-content-monthly">
	298	+ <div class="table-zone">
	299	+ <table class="form-table2">
	300	+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
	301	+ <colgroup>
	302	+ <col style="width: 25%" />
	303	+ <col style="width: 75%" />
	304	+ </colgroup>
	305	+ <tbody>
	306	+ <tr>
	307	+ <th>현재경로</th>
	308	+ <td>{{ connection.path }}</td>
	309	+ </tr>
	310	+ <tr>
	311	+ <th>폴더명</th>
	312	+ <td>
	313	+ <input type="text" class="full-input" v-model="folderName" @keyup.enter="mkdir()" />
	314	+ </td>
	315	+ </tr>
	316	+ </tbody>
	317	+ </table>
	318	+ </div>
	319	+ </div>
	320	+ <div class="modal-end flex justify-between" style="flex-wrap: nowrap">
	321	+ <button class="blue-btn large-btn" @click="mkdir()">확인</button>
	322	+ <button class="gray-btn large-btn" @click="closeMkdirModal()">
	323	+ 취소
	324	+ </button>
	325	+ </div>
	326	+ </div>
	327	+ </div>
	328	+ <!-- 엑셀 타입 지정 -->
	329	+ <div v-if="isOpenExcel" class="modal-wrapper">
	330	+ <div class="modal-container small-modal">
	331	+ <div class="modal-title text-ct">
	332	+ <div class="flex justify-between align-center">
	333	+ <h2>ExcelEncoding</h2>
	334	+ <button class="close-btn" @click="closeExcel">
	335	+ <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
	336	+ </button>
	337	+ </div>
	338	+ </div>
	339	+ <!-- ExcelEncoding 선택-->
	340	+ <div class="modal-content-monthly">
	341	+ <div class="flex justify-center align-center mb10">
	342	+ <div class="flex50 pl0">
	343	+ <button class="blue-border-btn large-btn" @click="selectEncoding('utf-8')">
	344	+ UTF-8
	345	+ </button>
	346	+ </div>
	347	+ <div class="flex50 pr0">
	348	+ <button class="blue-border-btn large-btn" @click="selectEncoding('euc-kr')">
	349	+ EUC-KR
	350	+ </button>
	351	+ </div>
	352	+ </div>
	353	+ </div>
	354	+ </div>
	355	+ </div>
	356	+ <!-- 모달 -->
	357	+ <div v-show="isModalOpen" class="modal-wrapper">
	358	+ <div :class="{
	359	+ 'modal-container': true,
	360	+ 'small-modal': modalSize === 'small',
	361	+ 'large-modal': modalSize === 'large',
	362	+ }">
	363	+ <div class="modal-title text-ct" v-show="modalType === 'typeSelected'">
	364	+ <div class="flex justify-between align-center">
	365	+ <h2>업로드</h2>
	366	+ <button class="close-btn" @click="closeModal">
	367	+ <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
	368	+ </button>
	369	+ </div>
	370	+ </div>
	371	+ <!-- 업로드 타입 선택 -->
	372	+ <div class="modal-content-monthly" v-show="modalType === 'typeSelected'">
	373	+ <div class="flex justify-center align-center mb10">
	374	+ <div class="flex50 pl0">
	375	+ <button class="blue-border-btn large-btn" @click="setModal('file-modal', 'small')">
	376	+ 파일
	377	+ </button>
	378	+ </div>
	379	+ <div class="flex50 pr0">
	380	+ <button class="blue-border-btn large-btn" @click="setModal('db-modal', 'middle')">
	381	+ DB
	382	+ </button>
	383	+ </div>
	384	+ </div>
	385	+ <div class="flex justify-center align-center">
	386	+ <div class="flex50 pl0">
	387	+ <button class="blue-border-btn large-btn" @click="setModal('api-modal', 'middle')">
	388	+ API
	389	+ </button>
	390	+ </div>
	391	+ <div class="flex50 pr0">
	392	+ <button class="blue-border-btn large-btn" @click="setModal('ehojo-modal', 'middle')">
	393	+ 차세대 API
	394	+ </button>
	395	+ </div>
	396	+ </div>
	397	+ </div>
	398	+ <!-- 파일 (file-modal) -->
	399	+ <template v-if="modalType == 'file-modal'">
	400	+ <div class="modal-title">
	401	+ <div class="flex justify-between align-center">
	402	+ <h2>파일 등록</h2>
	403	+ <button class="close-btn" @click="closeModal">X</button>
	404	+ </div>
	405	+ </div>
	406	+ <div class="modal-content-monthly">
	407	+ <div class="table-zone">
	408	+ <table class="form-table">
	409	+ <colgroup>
	410	+ <col style="width: 15%" />
	411	+ <col style="width: 85%" />
	412	+ </colgroup>
	413	+ <tbody>
	414	+ <tr>
	415	+ <th>현재경로</th>
	416	+ <td>{{ connection.path }}</td>
	417	+ </tr>
	418	+ <tr>
	419	+ <th>파일명</th>
	420	+ <td>
	421	+ <input type="file" name="file" id="file" ref="fileInput"
	422	+ @change="fileInput()" />
	423	+ </td>
	424	+ </tr>
	425	+ </tbody>
	426	+ </table>
	427	+ <div class="modal-end flex justify-between" style="flex-wrap: nowrap">
	428	+ <button class="blue-btn large-btn" @click="upload()">확인</button>
	429	+ <button class="gray-btn large-btn" @click="closeModal()">
	430	+ 취소
	431	+ </button>
	432	+ </div>
	433	+ </div>
	434	+ </div>
	435	+ </template>
	436	+ <!-- DB (db-modal) -->
	437	+ <DatabaseConnection v-if="modalType == 'db-modal'" openPopup="true" :jobItem="selectNode"
	438	+ @closePopup="closeModal" @saveNodeData="fnUpdateSetup" />
	439	+ <!-- API (api-modal) -->
	440	+ <apiConnection v-if="modalType == 'api-modal'" openPopup="true" :jobItem="selectNode"
	441	+ @fnCloseModal="closeModal" @fnSaveSetup="fnUpdateSetup" />
	442	+ <!-- 차세대 API (ehojo-modal) -->
	443	+ <EhojoConnection v-if="modalType == 'ehojo-modal'" openPopup="true" :jobItem="selectNode"
	444	+ @fnCloseModal="closeModal" @fnSaveSetup="fnUpdateSetup" />
	445	+ <div class="modal-end flex justify-end" v-show="modalType == 'test-modal'" style="flex-wrap: nowrap">
	446	+ <button class="gray-border-btn small-btn" @click="closeModal">
	447	+ 이전
	448	+ </button>
	449	+ <button class="blue-border-btn small-btn" @click="closeModal">
	450	+ 확인
	451	+ </button>
	452	+ <button class="darkg-border-btn small-btn" @click="closeModal">
	453	+ 닫기
	454	+ </button>
	455	+ </div>
	456	+ </div>
	457	+ </div>
	458	+</template>
	459	+<script>
	460	+import axios from "axios";
	461	+import TreeItem from "../../../component/FileTree.vue";
	462	+import TreeModal from "../../../component/FileTreeModal.vue";
	463	+import SvgIcon from "@jamescoyle/vue-icon";
	464	+import DatabaseConnection from "../../../component/connection/itm/databaseConnection.vue";
	465	+import apiConnection from "../../../component/connection/itm/apiConnection.vue";
	466	+import EhojoConnection from "../../../component/connection/EhojoConnection.vue";
	467	+import {
	468	+ mdiMagnify,
	469	+ mdiClose,
	470	+ mdiFileCog,
	471	+ mdiDownload,
	472	+ mdiFileFind,
	473	+ mdiClockPlusOutline,
	474	+} from "@mdi/js";
	475	+import store from "../../AppStore";
	476	+import FileDataRead from "../../../component/connection/itm/fileDataRead.vue";
	477	+import * as XLSX from "xlsx";
	478	+
	479	+export default {
	480	+ data() {
	481	+ return {
	482	+ //엑셀 등록시 타입지정
	483	+ isOpenExcel: false,
	484	+ encodingType: null,
	485	+ // 검색 객체
	486	+ search: this.$getDefaultSerchVO(),
	487	+ search_data: this.$getDefaultSerchItem(null, "String"),
	488	+
	489	+ userauth: null,
	490	+ searchPath: mdiMagnify,
	491	+ closePath: mdiClose,
	492	+ fileNamePath: mdiFileCog,
	493	+ filedownPath: mdiDownload,
	494	+ fileFindPath: mdiFileFind,
	495	+ isModalOpen: false,
	496	+ activeTab: "tab1",
	497	+ modalType: "",
	498	+ modalSize: "small",
	499	+ mkdirModalOpen: false,
	500	+ reNameModalOpen: false,
	501	+ treeModalOpen: false,
	502	+
	503	+ selectedHost: {},
	504	+ selectedHostCode: null,
	505	+ // 호스트 목록
	506	+ hostList: [],
	507	+ // 부서-호스트 목록
	508	+ //01.17 deptHostList: [],
	509	+ connection: {
	510	+ host_code: null,
	511	+ path: null,
	512	+ depth: null,
	513	+ type: null,
	514	+ },
	515	+
	516	+ selectedTab: '', // 현재 선택된 탭
	517	+
	518	+ uploadObject: {
	519	+ host_code: null,
	520	+ path: null,
	521	+ uploadFile: null,
	522	+ confirm: false,
	523	+ },
	524	+ nodes: [],
	525	+ fileList: [],
	526	+ selectedNode: null,
	527	+ folderName: null,
	528	+ uploadFile: null,
	529	+
	530	+ reNameObject: {
	531	+ currentPath: null,
	532	+ parentPath: null,
	533	+ currentName: null,
	534	+ extension: null,
	535	+ changeName: null,
	536	+ },
	537	+ checkAll: false,
	538	+ selectedFiles: [],
	539	+ modalNodes: [],
	540	+ modalConnection: {
	541	+ host_code: null,
	542	+ path: null,
	543	+ depth: null,
	544	+ type: null,
	545	+ },
	546	+ modalSeletedNode: null,
	547	+ selectModalType: 0,
	548	+
	549	+ searchType: "all",
	550	+ searchText: null,
	551	+
	552	+ selectItem: {
	553	+ id: null,
	554	+ },
	555	+
	556	+ // 데이터 미리보기
	557	+ isLoading: false,
	558	+ previewModalOpen: false,
	559	+ dataTable: {},
	560	+
	561	+ selectNode: {}, // 선택된 노드
	562	+
	563	+ selectedHostCodeData: null,
	564	+ selectedDirectory: null,
	565	+ selectedHostData: null,
	566	+ isUpdating: false // 무한 루프 방지를 위한 플래그
	567	+ };
	568	+ },
	569	+ methods: {
	570	+ // 검색 객체 초기화
	571	+ searchInit: function () {
	572	+ this.search.searchObjectList.push(this.search_data);
	573	+ },
	574	+
	575	+ searchFiles() {
	576	+ const vm = this;
	577	+
	578	+ if (vm.searchText === null \|\| vm.searchText === "") {
	579	+ vm.$showAlert("파일 검색", "검색어를 입력해 주세요.");
	580	+ return;
	581	+ }
	582	+
	583	+ let path = vm.connection.path;
	584	+
	585	+ if (vm.searchType === "all") {
	586	+ path = "#";
	587	+ } else {
	588	+ if (!path) {
	589	+ vm.$showAlert("파일 검색", "폴더를 선택해 주세요.");
	590	+ return;
	591	+ }
	592	+ }
	593	+
	594	+ vm.isLoading = true; // 로딩 시작
	595	+
	596	+ axios({
	597	+ url: "/files/search/" + vm.connection.host_code,
	598	+ method: "post",
	599	+ headers: {},
	600	+ data: {
	601	+ searchType: vm.searchType,
	602	+ searchText: vm.searchText,
	603	+ path: path,
	604	+ },
	605	+ })
	606	+ .then(function (response) {
	607	+ vm.isLoading = false; // 로딩 해제
	608	+ vm.fileList = response.data.resultData.fileList;
	609	+ if (vm.fileList.length == 0) {
	610	+ vm.$showAlert("파일 검색", "검색 결과가 없습니다.");
	611	+ }
	612	+ })
	613	+ .catch(function (error) {
	614	+ vm.isLoading = false; // 로딩 해제
	615	+ vm.$showAlert(
	616	+ "파일 검색",
	617	+ "파일 검색 오류, 관리자에게 문의바랍니다."
	618	+ );
	619	+ });
	620	+ },
	621	+
	622	+ // 로딩 상태 변경
	623	+ handleIsLoading(isLoadingValue) {
	624	+ this.isLoading = isLoadingValue; // 부모 컴포넌트의 데이터 업데이트
	625	+ },
	626	+
	627	+ // 탭 변경
	628	+ showTab: function (tabName) {
	629	+ this.activeTab = tabName;
	630	+ },
	631	+ openModal: function () {
	632	+ this.isModalOpen = true;
	633	+ },
	634	+ closeModal: function () {
	635	+ // this.selectNode = {}; // 초기화
	636	+ this.modalType = null;
	637	+ this.isModalOpen = false;
	638	+ },
	639	+ setModal: function (type, size) {
	640	+ if (type == "typeSelected") {
	641	+ if (
	642	+ this.connection.path == null \|\|
	643	+ this.connection.path == "" \|\|
	644	+ this.connection.path === undefined
	645	+ ) {
	646	+ this.$showAlert("폴더 추가", "폴더를 선택해 주세요.");
	647	+ return;
	648	+ }
	649	+ } else if (type == "db-modal") {
	650	+ this.fnCreateNode("DB_READ");
	651	+ } else if (type == "api-modal") {
	652	+ this.fnCreateNode("API_READ");
	653	+ } else if (type == "ehojo-modal") {
	654	+ this.fnCreateNode("EHOJO_READ");
	655	+ }
	656	+ this.modalType = type;
	657	+ this.modalSize = size;
	658	+ },
	659	+
	660	+ openMkdirModal() {
	661	+ if (
	662	+ this.connection.path == null \|\|
	663	+ this.connection.path == "" \|\|
	664	+ this.connection.path === undefined
	665	+ ) {
	666	+ this.$showAlert("폴더 추가", "폴더를 선택해 주세요.");
	667	+ return;
	668	+ }
	669	+ this.mkdirModalOpen = true;
	670	+ },
	671	+
	672	+ closeMkdirModal() {
	673	+ this.mkdirModalOpen = false;
	674	+ },
	675	+
	676	+ openTreeModal(type) {
	677	+ if (this.selectedFiles.length === 0) {
	678	+ if (type === "move") {
	679	+ this.$showAlert("파일 이동", "선택한 파일이 없습니다.");
	680	+ } else if (type === "copy") {
	681	+ this.$showAlert("파일 복사", "선택한 파일이 없습니다.");
	682	+ }
	683	+ return;
	684	+ }
	685	+
	686	+ this.treeModalOpen = true;
	687	+ this.selectModalType = type;
	688	+ },
	689	+
	690	+ closeTreeModal() {
	691	+ // this.modalNodes = [];
	692	+ this.treeModalOpen = false;
	693	+ this.modalSeletedNode = null;
	694	+ },
	695	+
	696	+ openReNameModal(file) {
	697	+ this.reNameObject.currentPath = file.path;
	698	+ this.reNameObject.parentPath = file.parent;
	699	+ this.reNameObject.currentName = file.text;
	700	+ this.reNameObject.extension = file.extension;
	701	+ this.reNameModalOpen = true;
	702	+ },
	703	+
	704	+ closeReNameModal() {
	705	+ this.reNameObject.changeName = null;
	706	+ this.reNameModalOpen = false;
	707	+ },
	708	+
	709	+ filesCheckAll() {
	710	+ this.checkAll = !this.checkAll;
	711	+
	712	+ if (this.checkAll) {
	713	+ this.fileList.forEach((file) => {
	714	+ if (file.text != "상위폴더로 이동") {
	715	+ this.selectedFiles.push({
	716	+ folder: file.folder,
	717	+ path: file.path,
	718	+ fileName: file.text,
	719	+ extension: file.extension,
	720	+ });
	721	+ }
	722	+ });
	723	+ } else {
	724	+ this.selectedFiles = [];
	725	+ }
	726	+ },
	727	+
	728	+ // 선택한 호스트 연결
	729	+ async connectionConfirm() {
	730	+ const vm = this;
	731	+ if (vm.selectedHostCode === null \|\| vm.selectedHostCode === undefined) {
	732	+ vm.$showAlert("파일시스템 연결", "호스트를 선택해 주세요.");
	733	+ return;
	734	+ }
	735	+
	736	+ // 이전에 선택한 호스트 코드가 있으면 저장
	737	+ let tempHostCode = null;
	738	+ let tempModalHostCode = null;
	739	+ if (vm.connection.host_code) {
	740	+ tempHostCode = _.cloneDeep(vm.connection.host_code);
	741	+ tempModalHostCode = _.cloneDeep(vm.modalConnection.host_code);
	742	+ }
	743	+
	744	+ vm.connection.host_code = vm.selectedHost.host_code;
	745	+ vm.modalConnection.host_code = vm.selectedHost.host_code;
	746	+
	747	+ vm.isLoading = true; // 로딩 시작
	748	+
	749	+ try {
	750	+ const response = await axios.get("/files/connection", {
	751	+ params: { host_code: vm.connection.host_code },
	752	+ });
	753	+
	754	+ vm.isLoading = false; // 로딩 해제
	755	+ if (response.data.status === 200) {
	756	+ await this.fileTreeList();
	757	+ } else {
	758	+ // 이전에 선택한 호스트 코드로 변경
	759	+ if (tempHostCode) {
	760	+ vm.connection.host_code = tempHostCode;
	761	+ vm.selectedHost.host_code = tempHostCode;
	762	+ vm.selectedHostCode = tempHostCode;
	763	+ }
	764	+ }
	765	+ this.selectedFiles = [];
	766	+ this.checkAll = false;
	767	+ vm.$showAlert("파일시스템 연결", response.data.message);
	768	+ } catch (error) {
	769	+ vm.isLoading = false; // 로딩 해제
	770	+ vm.$showAlert(
	771	+ "파일시스템 연결",
	772	+ "파일시스템 연결 오류, 관리자에게 문의하세요."
	773	+ );
	774	+ this.selectedFiles = [];
	775	+ this.checkAll = false;
	776	+ // 이전에 선택한 호스트 코드로 변경
	777	+ if (tempHostCode) {
	778	+ vm.connection.host_code = tempHostCode;
	779	+ vm.selectedHost.host_code = tempHostCode;
	780	+ vm.selectedHostCode = tempHostCode;
	781	+ }
	782	+ }
	783	+ },
	784	+ uniquePaths() {
	785	+ // this.selectedHost = null;
	786	+ this.selectedHost = this.selectedHostData;
	787	+ this.selectedHostCode = this.selectedHostData.host_code;
	788	+ this.connectionConfirm();
	789	+ },
	790	+ // 호스트 목록 조회
	791	+ selectHosts() {
	792	+ const vm = this;
	793	+ vm.isLoading = true; // 로딩 시작
	794	+ axios({
	795	+ url: "/files/hosts",
	796	+ method: "post",
	797	+ headers: {
	798	+ "Content-Type": "application/json; charset=UTF-8",
	799	+ },
	800	+ data: {
	801	+ userId: store.state.loginUser.user_id,
	802	+ author: store.state.loginUser.user_auth[0],
	803	+ dept_code: store.state.loginUser.dept_code,
	804	+ },
	805	+ })
	806	+ .then((response) => {
	807	+ vm.hostList = response.data.resultData.hostList;
	808	+ console.log("@@", vm.hostList);
	809	+ if (this.hostList.length > 0) {
	810	+ vm.selectedHost = vm.hostList[0];
	811	+ vm.selectedHostCode = vm.hostList[0].host_code;
	812	+ vm.selectedHostCodeData = 0;
	813	+ vm.selectedDirectory = 0;
	814	+ vm.selectedHostData = vm.hostList[0];
	815	+ vm.connectionConfirm();
	816	+ } else {
	817	+ vm.isLoading = false; // 로딩 해제
	818	+ vm.selectedHost = {};
	819	+ }
	820	+ })
	821	+ .catch((error) => {
	822	+ vm.isLoading = false; // 로딩 해제
	823	+ vm.$showAlert(
	824	+ "호스트 조회",
	825	+ "호스트 조회 오류, 관리자에게 문의하세요."
	826	+ );
	827	+ });
	828	+ },
	829	+
	830	+ // 폴더 리스트 조회
	831	+ async fileTreeList() {
	832	+ const vm = this;
	833	+ vm.nodes = [];
	834	+ vm.connection.path = vm.selectedHost.dept_drctry_path;
	835	+ vm.connection.depth = 0;
	836	+ vm.connection.type = "folder";
	837	+ vm.modalNodes = [];
	838	+ vm.modalConnection.path = vm.selectedHost.dept_drctry_path;
	839	+ vm.modalConnection.depth = 0;
	840	+ vm.modalConnection.type = "folder";
	841	+ vm.modalConnection.host_code = vm.connection.host_code;
	842	+
	843	+ vm.isLoading = true; // 로딩 시작
	844	+
	845	+ try {
	846	+ const response = await axios.get("/files/tree", {
	847	+ params: vm.connection,
	848	+ });
	849	+
	850	+ vm.nodes = response.data.resultData.fileTree;
	851	+ vm.modalNodes = response.data.resultData.fileTree;
	852	+ vm.connection.path = null;
	853	+ vm.fileList = [];
	854	+ this.checkAll = false;
	855	+ vm.isLoading = false; // 로딩 해제
	856	+ } catch (error) {
	857	+ vm.connection.path = null;
	858	+ vm.fileList = [];
	859	+ this.checkAll = false;
	860	+ vm.isLoading = false; // 로딩 해제
	861	+ vm.$showAlert(
	862	+ "파일리스트 조회",
	863	+ "파일리스트 조회 오류, 관리자에게 문의하세요."
	864	+ );
	865	+ }
	866	+ },
	867	+
	868	+ modalFileTreeList() {
	869	+ const vm = this;
	870	+
	871	+ vm.modalNodes = [];
	872	+
	873	+ vm.modalConnection.host_code = vm.connection.host_code;
	874	+ vm.modalConnection.path = "#";
	875	+ vm.modalConnection.depth = 0;
	876	+ vm.modalConnection.type = "folder";
	877	+
	878	+ axios
	879	+ .get("/files/tree", { params: vm.modalConnection })
	880	+ .then((response) => {
	881	+ vm.modalNodes = response.data.resultData.fileTree;
	882	+ })
	883	+ .catch((error) => {
	884	+ vm.$showAlert(
	885	+ "파일리스트 조회",
	886	+ "파일리스트 조회 오류, 관리자에게 문의하세요."
	887	+ );
	888	+ });
	889	+ },
	890	+
	891	+ selectFolder(path) {
	892	+ if (path === null \|\| path === undefined) {
	893	+ this.isLoading = false;
	894	+ }
	895	+ this.connection.path = path;
	896	+ this.fileSelectList();
	897	+ },
	898	+
	899	+ handleSelectItem(item) {
	900	+ this.selectItem = item;
	901	+ },
	902	+
	903	+ modalSelectFolder(path) {
	904	+ this.modalSeletedNode = path;
	905	+ },
	906	+
	907	+ selectFileList(item) {
	908	+ // 폴더가 선택된 경우, 선택된 노드와 경로를 업데이트하고 파일 리스트 조회
	909	+ if (item.extension === "폴더" \|\| item.extension === "") {
	910	+ this.selectedNode = item.id;
	911	+ this.connection.path = item.id;
	912	+ this.fileSelectList();
	913	+ } else {
	914	+ }
	915	+ },
	916	+
	917	+ // 파일 리스트 조회
	918	+ async fileSelectList() {
	919	+ const vm = this;
	920	+
	921	+ if (vm.connection.path === null \|\| vm.connection.path === "") {
	922	+ vm.fileList = null;
	923	+ return;
	924	+ }
	925	+
	926	+ vm.connection.type = "all";
	927	+ vm.connection.depth = 1;
	928	+
	929	+ vm.isLoading = true; // 로딩 시작
	930	+ try {
	931	+ const response = await axios.get("/files/list", {
	932	+ params: vm.connection,
	933	+ });
	934	+ vm.fileList = response.data.resultData.fileList;
	935	+ vm.search.totalRows = response.data.resultData.totalRow;
	936	+ vm.selectedFiles = [];
	937	+ vm.checkAll = false;
	938	+ vm.isLoading = false; // 로딩 해제
	939	+ } catch (error) {
	940	+ vm.isLoading = false; // 로딩 해제
	941	+ vm.$showAlert(
	942	+ "파일리스트 조회",
	943	+ "파일리스트 조회 오류, 관리자에게 문의하세요."
	944	+ );
	945	+ vm.selectedFiles = [];
	946	+ vm.checkAll = false;
	947	+ }
	948	+ },
	949	+
	950	+ // 폴더 추가
	951	+ async mkdir() {
	952	+ const vm = this;
	953	+ if (vm.connection.path === null \|\| vm.connection.path === "") {
	954	+ vm.$showAlert(
	955	+ "폴더 추가",
	956	+ "선택된 경로가 없습니다.\n 경로 선택 후 다시 시도해주세요."
	957	+ );
	958	+ vm.closeMkdirModal();
	959	+ vm.folderName = null;
	960	+ return;
	961	+ }
	962	+
	963	+ const mkdirVO = {};
	964	+ mkdirVO.host_code = vm.connection.host_code;
	965	+ mkdirVO.path = vm.connection.path;
	966	+ mkdirVO.folderName = vm.folderName;
	967	+
	968	+ vm.isLoading = true; // 로딩 시작
	969	+
	970	+ try {
	971	+ const response = await axios.post("/files/mkdir", mkdirVO);
	972	+
	973	+ vm.isLoading = false; // 로딩 해제
	974	+ vm.getChildren(vm.selectItem.id, vm.selectItem.children); // 자식 폴더 리스트 업데이트
	975	+ await vm.fileSelectList();
	976	+ vm.$showAlert("폴더 추가", response.data.message);
	977	+ vm.closeMkdirModal();
	978	+ vm.folderName = null;
	979	+ } catch (error) {
	980	+ vm.isLoading = false; // 로딩 해제
	981	+ vm.$showAlert("폴더 추가", "폴더 추가 오류, 관리자에게 문의하세요.");
	982	+ vm.folderName = null;
	983	+ }
	984	+ },
	985	+
	986	+ // 자식 파일 정보 조회
	987	+ getChildren(path, children) {
	988	+ const vm = this;
	989	+ vm.connection.path = path;
	990	+ vm.connection.type = "folder";
	991	+ vm.connection.depth = 1;
	992	+
	993	+ axios
	994	+ .get("/files/list", { params: vm.connection })
	995	+ .then((response) => {
	996	+ let childrenList = response.data.resultData.fileList;
	997	+
	998	+ // 기존 배열 초기화
	999	+ children.length = 0;
	1000	+
	1001	+ // 새로운 배열의 요소들을 기존 배열에 추가
	1002	+ Array.prototype.push.apply(children, childrenList);
	1003	+ })
	1004	+ .catch((error) => { });
	1005	+ },
	1006	+
	1007	+ //파일업로드
	1008	+ fileInput() {
	1009	+ this.uploadFile = this.$refs.fileInput.files[0];
	1010	+ },
	1011	+
	1012	+ async upload() {
	1013	+ const vm = this;
	1014	+ vm.uploadObject.path = vm.connection.path;
	1015	+ vm.uploadObject.host_code = vm.connection.host_code;
	1016	+ vm.uploadObject.uploadFile = vm.uploadFile;
	1017	+ vm.isLoading = true;
	1018	+
	1019	+ // 파일 타입 및 인코딩 확인
	1020	+ if (vm.uploadFile) {
	1021	+ const fileName = vm.uploadFile.name.toLowerCase();
	1022	+ const isExcel = fileName.endsWith(".xlsx") \|\| fileName.endsWith(".xls");
	1023	+ const isCsv = fileName.endsWith(".csv");
	1024	+
	1025	+ if (isExcel \|\| isCsv) {
	1026	+ try {
	1027	+ const fileReader = new FileReader();
	1028	+
	1029	+ fileReader.onload = function (e) {
	1030	+ const content = new Uint8Array(e.target.result);
	1031	+ let encoding = "Unknown";
	1032	+
	1033	+ // BOM 확인으로 UTF-8 검사
	1034	+ if (
	1035	+ content.length >= 3 &&
	1036	+ content[0] === 0xef &&
	1037	+ content[1] === 0xbb &&
	1038	+ content[2] === 0xbf
	1039	+ ) {
	1040	+ encoding = "UTF-8 with BOM";
	1041	+ } else if (
	1042	+ content.length >= 2 &&
	1043	+ content[0] === 0xff &&
	1044	+ content[1] === 0xfe
	1045	+ ) {
	1046	+ encoding = "UTF-16 LE";
	1047	+ } else {
	1048	+ // 텍스트 분석으로 인코딩 추정
	1049	+ try {
	1050	+ const text = new TextDecoder("UTF-8").decode(content);
	1051	+ const hasInvalidChars = text.includes("�");
	1052	+ encoding = hasInvalidChars ? "Possibly EUC-KR" : "UTF-8";
	1053	+ } catch (err) {
	1054	+ encoding = "Possibly EUC-KR";
	1055	+ }
	1056	+ }
	1057	+
	1058	+ console.log(`파일 타입: ${isExcel ? "Excel" : "CSV"}`);
	1059	+ console.log(`인코딩 타입: ${encoding}`);
	1060	+ };
	1061	+
	1062	+ // 파일의 처음 1KB만 읽어서 분석
	1063	+ fileReader.readAsArrayBuffer(vm.uploadFile.slice(0, 1024));
	1064	+ } catch (error) {
	1065	+ console.error("인코딩 확인 중 오류:", error);
	1066	+ }
	1067	+ }
	1068	+ }
	1069	+
	1070	+ try {
	1071	+ const response = await axios.post("/files/upload", vm.uploadObject, {
	1072	+ headers: {
	1073	+ "Content-Type": "multipart/form-data",
	1074	+ },
	1075	+ });
	1076	+
	1077	+ vm.isLoading = false;
	1078	+
	1079	+ if (response.data.status === 200) {
	1080	+ document.getElementById("file").value = "";
	1081	+ await vm.fileSelectList();
	1082	+ vm.$showAlert("파일 업로드", response.data.message);
	1083	+ } else if (response.data.status === 100) {
	1084	+ if (!(await vm.$showConfirm("파일 업로드", response.data.message))) {
	1085	+ document.getElementById("file").value = "";
	1086	+ return;
	1087	+ } else {
	1088	+ vm.uploadObject.confirm = true;
	1089	+ await vm.reUpload();
	1090	+ }
	1091	+ }
	1092	+
	1093	+ vm.closeModal();
	1094	+ } catch (error) {
	1095	+ vm.isLoading = false;
	1096	+ vm.$showAlert(
	1097	+ "파일 업로드",
	1098	+ "파일 업로드 오류, 관리자에게 문의하세요."
	1099	+ );
	1100	+ vm.uploadObject.confirm = false;
	1101	+ document.getElementById("file").value = "";
	1102	+ }
	1103	+ },
	1104	+
	1105	+ async reUpload() {
	1106	+ const vm = this;
	1107	+ vm.isLoading = true; // 로딩 시작
	1108	+
	1109	+ try {
	1110	+ const response = await axios.post("/files/upload", vm.uploadObject, {
	1111	+ headers: {
	1112	+ "Content-Type": "multipart/form-data",
	1113	+ },
	1114	+ });
	1115	+
	1116	+ vm.isLoading = false; // 로딩 종료
	1117	+ await vm.fileSelectList();
	1118	+ vm.$showAlert("파일 업로드", response.data.message);
	1119	+ vm.uploadObject.confirm = false;
	1120	+ document.getElementById("file").value = "";
	1121	+ } catch (error) {
	1122	+ vm.isLoading = false; // 로딩 종료
	1123	+ vm.$showAlert(
	1124	+ "파일 업로드",
	1125	+ "파일 업로드 오류, 관리자에게 문의하세요."
	1126	+ );
	1127	+ vm.uploadObject.confirm = false;
	1128	+ document.getElementById("file").value = "";
	1129	+ }
	1130	+ },
	1131	+
	1132	+ download(file) {
	1133	+ const vm = this;
	1134	+
	1135	+ vm.isLoading = true; // 로딩 시작
	1136	+
	1137	+ axios
	1138	+ .post("/files/download", {
	1139	+ host_code: vm.connection.host_code,
	1140	+ path: file.parent,
	1141	+ fileName: file.text,
	1142	+ })
	1143	+ .then((response) => {
	1144	+ vm.isLoading = false; // 로딩 해제
	1145	+ vm.$showAlert("파일 다운로드", response.data.message);
	1146	+ })
	1147	+ .catch((error) => {
	1148	+ vm.isLoading = false; // 로딩 해제
	1149	+ vm.$showAlert(
	1150	+ "파일 다운로드",
	1151	+ "파일 다운로드 오류, 관리자에게 문의하세요."
	1152	+ );
	1153	+ });
	1154	+ },
	1155	+
	1156	+ async rename() {
	1157	+ const vm = this;
	1158	+
	1159	+ if (vm.reNameObject.changeName === null) {
	1160	+ vm.$showAlert("이름 바꾸기", "변경할 이름을 입력해주세요.");
	1161	+ return;
	1162	+ }
	1163	+
	1164	+ let fullName =
	1165	+ vm.reNameObject.changeName + "." + vm.reNameObject.extension;
	1166	+
	1167	+ if (vm.reNameObject.extension === "폴더") {
	1168	+ fullName = vm.reNameObject.changeName;
	1169	+ }
	1170	+
	1171	+ vm.isLoading = true; // 로딩 시작
	1172	+
	1173	+ try {
	1174	+ const response = await axios.put("/files/rename", {
	1175	+ host_code: vm.connection.host_code,
	1176	+ currentPath: vm.reNameObject.currentPath,
	1177	+ changePath: vm.reNameObject.parentPath + "/" + fullName,
	1178	+ });
	1179	+
	1180	+ vm.isLoading = false; // 로딩 해제
	1181	+ vm.reNameObject.changeName = null;
	1182	+ await vm.fileSelectList();
	1183	+ vm.$showAlert("이름 바꾸기", response.data.message);
	1184	+ vm.closeReNameModal();
	1185	+ } catch (error) {
	1186	+ vm.isLoading = false; // 로딩 해제
	1187	+ vm.$showAlert(
	1188	+ "이름 바꾸기",
	1189	+ "이름 바꾸기 오류, 관리자에게 문의하세요."
	1190	+ );
	1191	+ vm.closeReNameModal();
	1192	+ vm.reNameObject.changeName = null;
	1193	+ }
	1194	+ },
	1195	+
	1196	+ async remove() {
	1197	+ const vm = this;
	1198	+
	1199	+ if (vm.selectedFiles.length === 0) {
	1200	+ vm.$showAlert("파일 삭제", "선택한 파일이 없습니다.");
	1201	+ return;
	1202	+ }
	1203	+
	1204	+ if (
	1205	+ !(await vm.$showConfirm("파일 삭제", "선택한 파일을 삭제하시겠습니까?"))
	1206	+ ) {
	1207	+ return;
	1208	+ }
	1209	+
	1210	+ vm.selectedFiles.forEach((file) => {
	1211	+ delete file.fileName;
	1212	+ delete file.extension;
	1213	+ });
	1214	+ vm.isLoading = true; // 로딩 시작
	1215	+ try {
	1216	+ const response = await axios.delete(
	1217	+ `/files/${vm.connection.host_code}`,
	1218	+ { data: vm.selectedFiles }
	1219	+ );
	1220	+
	1221	+ vm.isLoading = false;
	1222	+ vm.getChildren(vm.selectItem.id, vm.selectItem.children); // 자식 폴더 리스트 업데이트
	1223	+ await vm.fileSelectList();
	1224	+ vm.$showAlert("파일 삭제", response.data.message);
	1225	+ vm.checkAll = false;
	1226	+ vm.selectedFiles = [];
	1227	+ } catch (error) {
	1228	+ vm.isLoading = false;
	1229	+ vm.$showAlert("파일 삭제", "파일 삭제 오류, 관리자에게 문의하세요.");
	1230	+ vm.checkAll = false;
	1231	+ vm.selectedFiles = [];
	1232	+ }
	1233	+ },
	1234	+
	1235	+ async fileConfirm(type) {
	1236	+ const vm = this;
	1237	+
	1238	+ if (
	1239	+ !(await vm.$showConfirm(
	1240	+ "파일 " + type,
	1241	+ "선택한 파일을 " + type + " 하시겠습니까?"
	1242	+ ))
	1243	+ ) {
	1244	+ return;
	1245	+ }
	1246	+
	1247	+ let file = vm.selectedFiles[0];
	1248	+ let index = file.path.lastIndexOf("/");
	1249	+
	1250	+ if (file.path.substring(0, index) === file.movePath) {
	1251	+ vm.$showAlert(
	1252	+ "파일 " + type,
	1253	+ "현재 파일 경로와 동일합니다. 다른 경로를 선택해주세요."
	1254	+ );
	1255	+ return;
	1256	+ }
	1257	+
	1258	+ if (type === "복사") {
	1259	+ vm.copy(vm.selectedFiles, "confirm", false);
	1260	+ } else {
	1261	+ vm.move(vm.selectedFiles, [], "confirm", false);
	1262	+ }
	1263	+ },
	1264	+ async move(fileList, removeFolderList, type, check) {
	1265	+ const vm = this;
	1266	+
	1267	+ fileList.forEach((file) => {
	1268	+ if (!file.movePath) {
	1269	+ file.movePath = vm.modalSeletedNode;
	1270	+ }
	1271	+ });
	1272	+
	1273	+ vm.isLoading = true; // 로딩 시작
	1274	+ try {
	1275	+ const response = await axios.put(
	1276	+ "/files/move/" + vm.connection.host_code,
	1277	+ {
	1278	+ fileList: fileList,
	1279	+ removeFolder: removeFolderList,
	1280	+ type: type,
	1281	+ check: check,
	1282	+ }
	1283	+ );
	1284	+
	1285	+ vm.isLoading = false; // 로딩 해제
	1286	+ if (response.data.checkMessage.status === 100) {
	1287	+ let returnFileList = response.data.resultData.fileList;
	1288	+ let folderList = response.data.resultData.removeFolderList;
	1289	+ const moveOrCopy = await vm.$showRadioConfirm(
	1290	+ "파일 이동",
	1291	+ response.data.checkMessage.message
	1292	+ );
	1293	+ vm.move(
	1294	+ returnFileList,
	1295	+ folderList,
	1296	+ moveOrCopy.type,
	1297	+ moveOrCopy.checkBox
	1298	+ );
	1299	+ } else {
	1300	+ let folderList = response.data.resultData.removeFolderList;
	1301	+ vm.checkAll = false;
	1302	+ vm.selectedFiles = [];
	1303	+
	1304	+ if (folderList.length != 0) {
	1305	+ vm.removeFolder(folderList);
	1306	+ } else {
	1307	+ await vm.fileSelectList();
	1308	+ }
	1309	+ vm.$showAlert("파일 이동", response.data.checkMessage.message);
	1310	+ vm.closeTreeModal();
	1311	+ }
	1312	+ } catch (error) {
	1313	+ vm.isLoading = false; // 로딩 해제
	1314	+ vm.$showAlert("파일 이동", "파일 이동 오류, 관리자에게 문의하세요.");
	1315	+ vm.checkAll = false;
	1316	+ vm.selectedFiles = [];
	1317	+ vm.closeTreeModal();
	1318	+ }
	1319	+ },
	1320	+
	1321	+ async copy(fileList, type, check) {
	1322	+ const vm = this;
	1323	+
	1324	+ fileList.forEach((file) => {
	1325	+ if (!file.movePath) {
	1326	+ file.movePath = vm.modalSeletedNode;
	1327	+ }
	1328	+ });
	1329	+
	1330	+ vm.isLoading = true; // 로딩 시작
	1331	+ try {
	1332	+ const response = await axios.put(
	1333	+ "/files/copy/" + vm.connection.host_code,
	1334	+ { fileList: fileList, type: type, check: check }
	1335	+ );
	1336	+
	1337	+ vm.isLoading = false; // 로딩 해제
	1338	+ if (response.data.checkMessage.status === 100) {
	1339	+ let returnFileList = response.data.resultData.fileList;
	1340	+ const moveOrCopy = await vm.$showRadioConfirm(
	1341	+ "파일 복사",
	1342	+ response.data.checkMessage.message
	1343	+ );
	1344	+ vm.copy(returnFileList, moveOrCopy.type, moveOrCopy.checkBox);
	1345	+ } else {
	1346	+ vm.$showAlert("파일 복사", response.data.checkMessage.message);
	1347	+ vm.checkAll = false;
	1348	+ vm.selectedFiles = [];
	1349	+ vm.closeTreeModal();
	1350	+ }
	1351	+ } catch (error) {
	1352	+ vm.isLoading = false; // 로딩 해제
	1353	+ vm.$showAlert("파일 복사", "파일 이동 오류, 관리자에게 문의하세요.");
	1354	+ vm.checkAll = false;
	1355	+ vm.selectedFiles = [];
	1356	+ vm.closeTreeModal();
	1357	+ }
	1358	+ },
	1359	+
	1360	+ async removeFolder(folderList) {
	1361	+ const vm = this;
	1362	+
	1363	+ vm.isLoading = false; // 로딩 해제
	1364	+
	1365	+ try {
	1366	+ const response = await axios.delete(
	1367	+ "/files/folder/" + vm.connection.host_code,
	1368	+ { data: folderList }
	1369	+ );
	1370	+
	1371	+ vm.isLoading = false; // 로딩 해제
	1372	+ vm.getChildren(vm.selectItem.id, vm.selectItem.children); // 자식 폴더 리스트 업데이트
	1373	+ await vm.fileSelectList();
	1374	+ if (response.data.status === 500) {
	1375	+ vm.$showAlert("파일 이동", response.data.message);
	1376	+ }
	1377	+ } catch (error) {
	1378	+ vm.isLoading = false; // 로딩 해제
	1379	+ vm.$showAlert(
	1380	+ "파일 이동",
	1381	+ "원본 폴더 삭제 오류, 관리자에게 문의하세요."
	1382	+ );
	1383	+ }
	1384	+ },
	1385	+
	1386	+ // 미리보기 모달 닫기
	1387	+ previewModalClose() {
	1388	+ this.previewModalOpen = false;
	1389	+ this.dataTable = {};
	1390	+ },
	1391	+
	1392	+ // 파일 미리보기
	1393	+ preview(file) {
	1394	+ // 허용된 파일 확장자 검사
	1395	+ const allowedExtensions = ["xlsx", "xls", "csv", "json"];
	1396	+
	1397	+ if (!allowedExtensions.includes(file.extension.toLowerCase())) {
	1398	+ this.$showAlert(
	1399	+ "파일 미리보기",
	1400	+ "엑셀, CSV, JSON 파일만 읽을 수 있습니다."
	1401	+ );
	1402	+ return;
	1403	+ }
	1404	+
	1405	+ this.previewModalOpen = true;
	1406	+ this.fileRead(file);
	1407	+ },
	1408	+
	1409	+ // 파일 미리보기 - 읽기
	1410	+ async fileRead(file) {
	1411	+ const vm = this;
	1412	+ vm.isLoading = true;
	1413	+ axios
	1414	+ .post("/files/read/" + vm.connection.host_code, {
	1415	+ path: file.path,
	1416	+ fileName: file.text,
	1417	+ extension: file.extension,
	1418	+ type: "file",
	1419	+ datasetId: "",
	1420	+ viewMode: true,
	1421	+ })
	1422	+ .then((response) => {
	1423	+ vm.dataTable = response.data.resultData.dataTableMap;
	1424	+ })
	1425	+ .catch(() => {
	1426	+ vm.isLoading = false;
	1427	+ });
	1428	+ },
	1429	+ selectEncoding(encoding) {
	1430	+ // 선택한 인코딩에 대한 처리
	1431	+ this.encodingType = encoding;
	1432	+ console.log(`${encoding} 인코딩이 선택되었습니다.`);
	1433	+ this.closeExcel(); // 선택 후 모달 닫기
	1434	+ },
	1435	+ closeExcel() {
	1436	+ this.isOpenExcel = false; // 모달 상태를 false로 설정+
	1437	+ this.exportToCSV();
	1438	+ },
	1439	+ // 노드 설정 저장 후 닫기
	1440	+ fnUpdateSetup(jobItem) {
	1441	+ console.log("값을 보자 ", jobItem);
	1442	+ if (
	1443	+ !jobItem.dataTable.rowData \|\|
	1444	+ jobItem.dataTable.rowData.length === 0
	1445	+ ) {
	1446	+ // rowData가 null이거나 빈 리스트일 때 실행할 코드
	1447	+ this.$showAlert("엑셀 생성 실패", "저장된 데이터가 없습니다.");
	1448	+ } else {
	1449	+ this.closeModal(); // 괄호 추가
	1450	+ this.isOpenExcel = true;
	1451	+ this.selectNode = jobItem;
	1452	+ }
	1453	+ },
	1454	+ async exportToCSV() {
	1455	+ const vm = this;
	1456	+
	1457	+ try {
	1458	+ // 컬럼 헤더 생성
	1459	+ console.log()
	1460	+ const header = this.selectNode.dataTable.columnDatas.map(
	1461	+ (col) => col.displyColumnNm
	1462	+ );
	1463	+
	1464	+ // 데이터 준비 (rowData를 객체로 변환)
	1465	+ const data = this.selectNode.dataTable.rowData.map((row) => {
	1466	+ const rowObject = {};
	1467	+ this.selectNode.dataTable.columnDatas.forEach((col, index) => {
	1468	+ rowObject[col.displyColumnNm] = row[index];
	1469	+ });
	1470	+ return rowObject;
	1471	+ });
	1472	+
	1473	+ // CSV 데이터 생성
	1474	+ const csvContent = [
	1475	+ header.join(","),
	1476	+ ...data.map((row) =>
	1477	+ header
	1478	+ .map((col) => {
	1479	+ // null, undefined 처리 및 쉼표가 포함된 데이터 처리
	1480	+ const cellData = row[col] ?? "";
	1481	+ return typeof cellData === "string" && cellData.includes(",")
	1482	+ ? `"${cellData}"`
	1483	+ : cellData;
	1484	+ })
	1485	+ .join(",")
	1486	+ ),
	1487	+ ].join("\n");
	1488	+
	1489	+ let blob;
	1490	+ // encodingType이 설정되지 않은 경우 기본값으로 utf-8 사용
	1491	+ const encoding = this.encodingType \|\| "utf-8";
	1492	+ console.log("@@@", encoding);
	1493	+ if (encoding === "utf-8") {
	1494	+ // UTF-8 BOM 추가
	1495	+ blob = new Blob([new Uint8Array([0xef, 0xbb, 0xbf]), csvContent], {
	1496	+ type: "text/csv;charset=utf-8",
	1497	+ });
	1498	+ } else if (encoding === "euc-kr") {
	1499	+ // EUC-KR 인코딩
	1500	+ const encoder = new TextEncoder();
	1501	+ const encodedData = encoder.encode(csvContent);
	1502	+ blob = new Blob([encodedData], {
	1503	+ type: "text/csv;charset=euc-kr",
	1504	+ });
	1505	+ } else {
	1506	+ console.log("지원되지 않는 인코딩 타입입니다: " + encoding);
	1507	+ }
	1508	+
	1509	+ if (!blob) {
	1510	+ console.log("Blob 생성 실패");
	1511	+ }
	1512	+
	1513	+ // 파일 이름 설정
	1514	+ const fileName = `${vm.selectNode.node_type}_${vm.$getFullFileTime(
	1515	+ new Date()
	1516	+ )}.csv`;
	1517	+
	1518	+ // 서버에 업로드
	1519	+ const formData = new FormData();
	1520	+ formData.append("uploadFile", blob, fileName);
	1521	+ formData.append("path", this.connection.path);
	1522	+ formData.append("host_code", this.connection.host_code);
	1523	+
	1524	+ const response = await axios.post("/files/formDataUpload", formData, {
	1525	+ headers: {
	1526	+ "Content-Type": "multipart/form-data",
	1527	+ },
	1528	+ });
	1529	+
	1530	+ vm.$showAlert("업로드", response.data.message);
	1531	+ vm.fileSelectList();
	1532	+ } catch (error) {
	1533	+ console.error("CSV 내보내기 중 오류 발생:", error);
	1534	+ vm.$showAlert("업로드", "업로드 오류, 관리자에게 문의하세요.");
	1535	+ }
	1536	+ },
	1537	+ // 노드 생성
	1538	+ fnCreateNode(type) {
	1539	+ let node = Object.assign({}, this.$getDefaultJobGroup().node);
	1540	+ node.id = Math.floor(Math.random() * 1000) + 1;
	1541	+ node.node_id = node.id;
	1542	+ node.label = type;
	1543	+ node.node_name = type;
	1544	+ node.node_type = type;
	1545	+ node.position = {
	1546	+ x: Math.floor(Math.random() * 500) + 1,
	1547	+ y: Math.floor(Math.random() * 500) + 1,
	1548	+ };
	1549	+ let tempData = JSON.parse(JSON.stringify(node));
	1550	+ tempData.data = null;
	1551	+ node.data = tempData;
	1552	+ switch (type) {
	1553	+ case "DB_READ":
	1554	+ node.itm = Object.assign({}, this.$getDefaultJobGroup().connectionDb);
	1555	+ node.itm.type = "dbConnection";
	1556	+ break;
	1557	+ case "API_READ":
	1558	+ node.itm = Object.assign(
	1559	+ {},
	1560	+ this.$getDefaultJobGroup().connectionApi
	1561	+ );
	1562	+ break;
	1563	+ case "EHOJO_READ":
	1564	+ node.itm = Object.assign(
	1565	+ {},
	1566	+ this.$getDefaultJobGroup().connectionEhojo
	1567	+ );
	1568	+ break;
	1569	+ }
	1570	+ this.selectNode = node;
	1571	+ },
	1572	+ },
	1573	+
	1574	+ watch: {
	1575	+ // 모달타입에 맞는 모달창 화면 보여주기
	1576	+ modalType: function (newValue, oldValue) {
	1577	+ if (this.modalType != null) {
	1578	+ this.openModal(newValue);
	1579	+ }
	1580	+ },
	1581	+ selectedHostCodeData(newVal) {
	1582	+ if (newVal !== null && !this.isUpdating) {
	1583	+ this.isUpdating = true; // 업데이트 시작
	1584	+
	1585	+ // newVal이 이제 인덱스입니다
	1586	+ this.selectedDirectory = newVal;
	1587	+ this.selectedHostData = this.hostList[newVal];
	1588	+
	1589	+ this.$nextTick(() => {
	1590	+ this.isUpdating = false; // 업데이트 완료
	1591	+ });
	1592	+ }
	1593	+ },
	1594	+
	1595	+ selectedDirectory(newVal) {
	1596	+ if (newVal !== null && !this.isUpdating) {
	1597	+ this.isUpdating = true; // 업데이트 시작
	1598	+
	1599	+ // newVal이 이제 인덱스입니다
	1600	+ this.selectedHostCodeData = newVal;
	1601	+ this.selectedHostData = this.hostList[newVal];
	1602	+
	1603	+ this.$nextTick(() => {
	1604	+ this.isUpdating = false; // 업데이트 완료
	1605	+ });
	1606	+ }
	1607	+ }
	1608	+ },
	1609	+ components: {
	1610	+ SvgIcon: SvgIcon,
	1611	+ TreeItem: TreeItem,
	1612	+ TreeModal: TreeModal,
	1613	+ FileDataRead: FileDataRead,
	1614	+ DatabaseConnection: DatabaseConnection,
	1615	+ apiConnection: apiConnection,
	1616	+ XLSX: XLSX,
	1617	+ EhojoConnection: EhojoConnection,
	1618	+ },
	1619	+ mounted() {
	1620	+ this.userauth = this.$authorChk();
	1621	+ this.selectHosts();
	1622	+ this.searchInit();
	1623	+ },
	1624	+};
	1625	+</script>
	1626	+<style>
	1627	+.tabs-container {
	1628	+ margin-top: 1rem;
	1629	+}
	1630	+
	1631	+.tab-btn {
	1632	+ padding: 0.5rem 1rem;
	1633	+ margin-right: 0.5rem;
	1634	+ border: 1px solid #ddd;
	1635	+ border-bottom: none;
	1636	+ border-radius: 4px 4px 0 0;
	1637	+ cursor: pointer;
	1638	+ background: #f5f5f5;
	1639	+}
	1640	+
	1641	+.tab-btn.active {
	1642	+ background: #fff;
	1643	+ border-bottom: 2px solid #007bff;
	1644	+ color: #007bff;
	1645	+}
	1646	+</style>(파일 끝에 줄바꿈 문자 없음)

26c605b

9905dfc

package-lock.json

--- package-lock.json

+++ package-lock.json


         "html2canvas": "^1.4.1",
         "https": "^1.0.0",
         "lodash": "^4.17.21",
+        "moment": "^2.30.1",
         "new-line": "^1.1.1",
         "pg": "8.8.0",
         "primeicons": "^6.0.1",

       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
       "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
       "engines": {
         "node": "*"
       }

26c605b

9905dfc

package.json

--- package.json

+++ package.json

...	...	@@ -21,6 +21,7 @@
21	21	"html2canvas": "^1.4.1",
22	22	"https": "^1.0.0",
23	23	"lodash": "^4.17.21",
	24	+ "moment": "^2.30.1",
24	25	"new-line": "^1.1.1",
25	26	"pg": "8.8.0",
26	27	"primeicons": "^6.0.1",

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,116 +1,114 @@
1	1	<template>
2		- <div class="content-box flex justify-between">
3		- <div class="flex20 content-box">
4		- <div class="left-content flex100 content-box">
5		- <div class="content-box">
6		- <div class="content-titleZone">
7		- <p class="box-title">카테고리 리스트</p>
8		- </div>
9		- <div class="content-zone">
10		- <CodeList :groupCode="'DATA_CTGRY'" @selectCode="selectCode" />
11		- </div>
12		- </div>
13		- </div>
	2	+ <div class="content-box flex justify-between">
	3	+ <div class="flex20 content-box">
	4	+ <div class="left-content flex100 content-box">
	5	+ <div class="content-box">
	6	+ <div class="content-titleZone">
	7	+ <p class="box-title">카테고리 리스트</p>
	8	+ </div>
	9	+ <div class="content-zone">
	10	+ <CodeList :groupCode="'DATA_CTGRY'" @selectCode="selectCode" />
	11	+ </div>
14	12	</div>
15		- <div class="flex80 content-box">
16		- <div class="right-content flex100">
17		- <div class="flex-column justify-between">
18		- <div class="flex justify-end">
19		- <div class="search-bar">
20		- <div class="flex justify-end align-center" style="gap: 5px">
21		- <input type="date" name="start-date" id="start-date" class="square-date"
22		- :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택"
23		- v-model="search_date.value" />
24		- <span>~</span>
25		- <input type="date" name="end-date" id="end-date" class="square-date"
26		- :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택"
27		- v-model="search_date.value2" />
28		- <select class="square-select" v-model="search_data1.value">
29		- <option :value="null">공개여부</option>
30		- <option :value="true">공개</option>
31		- <option :value="false">비공개</option>
32		- </select>
33		- <select class="square-select" v-model="search_data2.value">
34		- <option :value="null">카테고리</option>
35		- <option v-for="(item, indx) in categoryList" :key="indx" :value="item.cmmnCode">{{
36		- item.codeNm }}</option>
37		- </select>
38		- <select name="" id="searchItm1" class="square-select" v-model="search_data3.key">
39		- <option :value="null">검색조건</option>
40		- <option value="post_sj">제목</option>
41		- <option value="post_dc">내용</option>
42		- </select>
43		- <div class="flex justify-end align-center no-gutter">
44		- <input type="text" class="square-input flex90" placeholder="Search"
45		- v-model="search_data3.value" v-on:keyup.enter="searchData()" />
46		- <button class="square-button blue-btn flex10" @click="searchData()">
47		- <svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
48		- </button>
49		- </div>
50		- </div>
51		- </div>
52		- </div>
53		- <div class="content-zone" style="overflow: auto;">
54		- <div class="table-zone">
55		- <div class="list-info flex justify-between align-center">
56		- <div class="count-zone">
57		- <p>총<span>{{ search.totalRows }}</span>건</p>
58		- </div>
59		- <div class="cunt-selectZone">
60		- <select name="" id="">
61		- <option value="">10개 보기</option>
62		- <option value="">20개 보기</option>
63		- </select>
64		- </div>
65		- </div>
66		- <table class="list-table">
67		- <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
68		- <colgroup>
69		- <col style="width: 10%" />
70		- <col style="width: 40%" />
71		- <col style="width: 10%" />
72		- <col style="width: 10%" />
73		- <col style="width: 10%" />
74		- <col style="width: 30%" />
75		- </colgroup>
76		- <thead>
77		- <tr>
78		- <th>No</th>
79		- <th>제목</th>
80		- <th>생성자</th>
81		- <th>부서</th>
82		- <th>카테고리</th>
83		- <th>등록일시</th>
84		- </tr>
85		- </thead>
86		- <tbody>
87		- <template v-if="dataPostList.length > 0">
88		- <tr v-for="(item, indx) in dataPostList" :key="indx" @click="selectPost(item)">
89		- <td>{{ search.totalRows - indx - (search.currentPage - 1) * search.perPage
90		- }}</td>
91		- <td>{{ item.post_sj }}</td>
92		- <td>{{ item.user_nm }}</td>
93		- <td>{{ item.dept_nm }}</td>
94		- <td>{{ item.ctgry_id }}</td>
95		- <td>{{ $getFullTime(item.creat_dt) }}</td>
96		- </tr>
97		- </template>
98		- <tr v-else>
99		- <td colspan="6">등록된 데이터가 없습니다.</td>
100		- </tr>
101		- </tbody>
102		- </table>
103		- <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage"
104		- :totalCount="search.totalRows" :maxRange="5" :click="searchData" />
105		- </div>
106		- </div>
107		- <div class="flex justify-end">
108		- <button class="blue-btn small-btn" @click="createDataPost">데이터 등록</button>
109		- </div>
110		- </div>
111		- </div>
112		- </div>
	13	+ </div>
113	14	</div>
	15	+ <div class="flex80 content-box">
	16	+ <div class="right-content flex100">
	17	+ <div class="flex-column justify-between">
	18	+ <div class="flex justify-end">
	19	+ <div class="search-bar">
	20	+ <div class="flex justify-end align-center" style="gap: 5px">
	21	+ <input type="date" name="start-date" id="start-date" class="square-date"
	22	+ :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value" />
	23	+ <span>~</span>
	24	+ <input type="date" name="end-date" id="end-date" class="square-date"
	25	+ :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value2" />
	26	+ <select class="square-select" v-model="search_data1.value">
	27	+ <option :value="null">공개여부</option>
	28	+ <option :value="true">공개</option>
	29	+ <option :value="false">비공개</option>
	30	+ </select>
	31	+ <select class="square-select" v-model="search_data2.value">
	32	+ <option :value="null">카테고리</option>
	33	+ <option v-for="(item, indx) in categoryList" :key="indx" :value="item.cmmnCode">{{
	34	+ item.codeNm }}</option>
	35	+ </select>
	36	+ <select name="" id="searchItm1" class="square-select" v-model="search_data3.key">
	37	+ <option :value="null">검색조건</option>
	38	+ <option value="post_sj">제목</option>
	39	+ <option value="post_dc">내용</option>
	40	+ </select>
	41	+ <div class="flex justify-end align-center no-gutter">
	42	+ <input type="text" class="square-input flex90" placeholder="Search" v-model="search_data3.value"
	43	+ v-on:keyup.enter="searchData()" />
	44	+ <button class="square-button blue-btn flex10" @click="searchData()">
	45	+ <svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
	46	+ </button>
	47	+ </div>
	48	+ </div>
	49	+ </div>
	50	+ </div>
	51	+ <div class="content-zone" style="overflow: auto;">
	52	+ <div class="table-zone">
	53	+ <div class="list-info flex justify-between align-center">
	54	+ <div class="count-zone">
	55	+ <p>총<span>{{ search.totalRows }}</span>건</p>
	56	+ </div>
	57	+ <div class="cunt-selectZone">
	58	+ <select name="" id="">
	59	+ <option value="">10개 보기</option>
	60	+ <option value="">20개 보기</option>
	61	+ </select>
	62	+ </div>
	63	+ </div>
	64	+ <table class="list-table">
	65	+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
	66	+ <colgroup>
	67	+ <col style="width: 10%" />
	68	+ <col style="width: 40%" />
	69	+ <col style="width: 10%" />
	70	+ <col style="width: 10%" />
	71	+ <col style="width: 10%" />
	72	+ <col style="width: 30%" />
	73	+ </colgroup>
	74	+ <thead>
	75	+ <tr>
	76	+ <th>No</th>
	77	+ <th>제목</th>
	78	+ <th>생성자</th>
	79	+ <th>부서</th>
	80	+ <th>카테고리</th>
	81	+ <th>등록일시</th>
	82	+ </tr>
	83	+ </thead>
	84	+ <tbody>
	85	+ <template v-if="dataPostList.length > 0">
	86	+ <tr v-for="(item, indx) in dataPostList" :key="indx" @click="selectPost(item)">
	87	+ <td>{{ search.totalRows - indx - (search.currentPage - 1) * search.perPage
	88	+ }}</td>
	89	+ <td>{{ item.post_sj }}</td>
	90	+ <td>{{ item.user_nm }}</td>
	91	+ <td>{{ item.dept_nm }}</td>
	92	+ <td>{{ item.ctgry_id }}</td>
	93	+ <td>{{ $getFullTime(item.creat_dt) }}</td>
	94	+ </tr>
	95	+ </template>
	96	+ <tr v-else>
	97	+ <td colspan="6">등록된 데이터가 없습니다.</td>
	98	+ </tr>
	99	+ </tbody>
	100	+ </table>
	101	+ <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage"
	102	+ :totalCount="search.totalRows" :maxRange="5" :click="searchData" />
	103	+ </div>
	104	+ </div>
	105	+ <div class="flex justify-end">
	106	+ <button class="blue-btn small-btn" @click="createDataPost">데이터 등록</button>
	107	+ </div>
	108	+ </div>
	109	+ </div>
	110	+ </div>
	111	+ </div>
114	112	</template>
115	113	<script>
116	114	import CodeList from "../../../component/common/Component_CodeList.vue";
...	...	@@ -118,6 +116,7 @@
118	116	import PageNavigation from "../../../component/PageNavigation.vue";
119	117	import SvgIcon from "@jamescoyle/vue-icon";
120	118	import PaginationButton from "../../../component/PaginationButton.vue";
	119	+import moment from 'moment';
121	120
122	121	export default {
123	122	data() {
...	...	@@ -131,7 +130,14 @@
131	130	// 선택
132	131	search_data3: this.$getDefaultSerchItem("post_sj", "string"),
133	132	// 날짜
134		- search_date: this.$getDefaultSerchItem("creat_dt", "dates"),
	133	+ search_date: {
	134	+ key: "creat_dt",
	135	+ value: null,
	136	+ key2: "creat_dt",
	137	+ value2: null,
	138	+ type: "dates",
	139	+ },
	140	+ // search_date: this.$getDefaultSerchItem("creat_dt", "dates"),
135	141	categoryList: [],
136	142	};
137	143	},
...	...	@@ -152,7 +158,7 @@
152	158	});
153	159	},
154	160	searchData: function () {
155		- console.log("@@검색값",this.search);
	161	+ console.log("@@검색값", this.search);
156	162	const vm = this;
157	163
158	164	let check = false;
...	...	@@ -183,17 +189,26 @@
183	189	})
184	190	.then(function (response) {
185	191	if (response.data.checkMessage.success) {
	192	+ vm.setDateRange(response.data.resultData.dataPostList);
186	193	vm.dataPostList = response.data.resultData.dataPostList;
187	194	vm.search.totalRows = response.data.resultData.totalRow;
188	195	}
189	196	})
190	197	.catch(function (error) {
191		- this.$showAlert(
	198	+ vm.$showAlert(
192	199	"에러 발생",
193	200	"에러가 발생했습니다. 관리자에게 문의해 주세요."
194	201	);
195	202	});
196	203	},
	204	+ setDateRange(dataList) {
	205	+ const dates = dataList.map(item => item.creat_dt).sort();
	206	+
	207	+ if (dates.length > 0) {
	208	+ this.search_date.value = moment(dates[0]).format('YYYY-MM-DD');
	209	+ this.search_date.value2 = moment(dates[dates.length - 1]).format('YYYY-MM-DD');
	210	+ }
	211	+ },
197	212	// 초기화
198	213	init: async function () {
199	214	this.search.searchObjectList.push(this.search_date);

...	...	@@ -26,6 +26,7 @@
26	26	"html2canvas": "^1.4.1",
27	27	"https": "^1.0.0",
28	28	"lodash": "^4.17.21",
	29	+ "moment": "^2.30.1",
29	30	"new-line": "^1.1.1",
30	31	"pg": "8.8.0",
31	32	"primeicons": "^6.0.1",
...	...	@@ -7388,6 +7389,7 @@
7388	7389	"version": "2.30.1",
7389	7390	"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
7390	7391	"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
	7392	+ "license": "MIT",
7391	7393	"engines": {
7392	7394	"node": "*"
7393	7395	}

Delete comment