공지사항 신규 개발

2025-12-07 01:04:20 +09:00 · 2022-11-01 13:23:58 +09:00
parent c916d16a46
commit d1d62c76c8
57 changed files with 3721 additions and 319 deletions
--- a/frontend/src/modules/homeMgt/components/NoticeUpdatePop.vue
+++ b/frontend/src/modules/homeMgt/components/NoticeUpdatePop.vue
@@ -0,0 +1,574 @@
+<template>
+  <!-- <div class="wrap bg-wrap"> -->
+  <div>
+    <div class="dimmed modal52" @click="ModalClose()"></div>
+    <div class="popup-wrap modal52">
+      <!-- 공지사항 수정 -->
+      <div class="popup modal52 popup_form" style="width: 70vw">
+        <div class="pop-head">
+          <h3 class="pop-tit">공지사항 수정</h3>
+        </div>
+        <form autocomplete="off">
+          <table>
+            <colgroup>
+              <col width="10%" />
+              <col width="40%" />
+              <col width="10%" />
+              <col width="10%" />
+              <col width="10%" />
+              <col width="10%" />
+            </colgroup>
+            <tbody>
+              <tr>
+                <th style="width: 10%">분류코드</th>
+                <td>
+                  <div class="select_box">
+                    <select name="" id="right" v-model="ctgCd" style="min-width: 500px" ref="_ctgCd">
+                      <option v-for="(option, i) in ctgCdOption" :value="option.code" v-bind:key="i">
+                        {{ option.codeNm }}
+                      </option>
+                    </select>
+                  </div>
+                </td>
+                <th style="width: 10%">긴급여부</th>
+                <td>
+                  <div class="select_box">
+                    <select name="" id="right" v-model="emgYn" style="min-width: 150px">
+                      <option value="Y">Y</option>
+                      <option value="N">N</option>
+                    </select>
+                  </div>
+                </td>
+                <th style="width: 10%">사용여부</th>
+                <td>
+                  <div class="select_box">
+                    <select name="" id="right" v-model="useYn" style="min-width: 150px">
+                      <option value="Y">Y</option>
+                      <option value="N">N</option>
+                    </select>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th style="width: 10%">제목</th>
+                <td colspan="5">
+                  <input type="text" placeholder="제목을 입력하세요" v-model="title" ref="_title" />
+                </td>
+              </tr>
+              <tr>
+                <th style="width: 10%">내용</th>
+                <td class="sender" colspan="5">
+                  <vue-editor
+                    id="editor"
+                    useCustomImageHandler
+                    @imageAdded="handleImageAdded"
+                    v-model="ntSbst"
+                    ref="_ntSbst"
+                  >
+                  </vue-editor>
+                </td>
+              </tr>
+              <tr>
+                <th style="width: 10%">첨부파일</th>
+                <td class="sender" colspan="5">
+                  <p class="file" style="width: 100%; margin-bottom: 15px">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
+                  <div class="btn plus">
+                    파일 추가
+                    <input
+                      type="file"
+                      accept=".jpg,.png,.pdf,.tiff"
+                      multiple="multiple"
+                      ref="imageUploader"
+                      @change="onFileChange"
+                      class="form-control-file"
+                      id="my-file"
+                    />
+                  </div>
+                  <div class="img_list_wrap" v-if="updateFileList.length > 0" style="margin-top: 15px">
+                    <div
+                      class="img_list"
+                      v-for="(item, index) in updateFileList"
+                      :key="index"
+                      style="margin-bottom: 5px"
+                    >
+                      <a
+                        href="javascript:void(0);"
+                        v-if="item.filePath"
+                        @click="download(item.filePath, item.fileName, item.name)"
+                        >{{ item.name }} (다운로드가능)</a
+                      >
+                      <p class="file_name" v-else>
+                        {{ index + 1 }}. {{ item.name }} {{ item.fileNo ? `(${item.fileNo})` : '' }}
+                      </p>
+
+                      <button type="button" class="btn_del" @click="popupHandleRemove(index, item.fileNo)">X</button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </form>
+        <div class="popup-btn2">
+          <button class="btn-pcolor" @click="updateConfirm()">수정</button>
+          <button class="btn-default" @click="ModalClose()">취소</button>
+        </div>
+      </div>
+      <!-- <common-modal ref="commonModal"></common-modal> -->
+      <validation-confirm-popup ref="ValidationConfirmPopup"></validation-confirm-popup>
+    </div>
+  </div>
+</template>
+<script>
+import api from '@/service/api';
+import homeMgtApi from '../service/homeMgtApi';
+import ValidationConfirmPopup from './ValidationConfirmPopup.vue';
+import { VueEditor } from 'vue2-editor';
+import { utils_mixin, chkPattern2 } from '../service/mixins';
+
+export default {
+  name: 'NoticeUpdatePop',
+  mixins: [utils_mixin, chkPattern2],
+  data() {
+    return {
+      props: {},
+      row: {},
+      rsnType: [],
+      tpType: [],
+
+      // 공지사항
+      ntNo: '',
+      title: '',
+      ntSbst: '',
+      emgYn: 'N',
+      useYn: 'Y',
+      ctgCd: 'null',
+      fileNm: '',
+      filePath: '',
+      fileTitle: '',
+      fileNo: '',
+      updateFileList: [], // 업로드한 이미지 파일
+      delFileList: [],
+      ctgCdOption: [
+        { code: 'null', codeNm: '분류코드를 선택하세요' },
+        { code: '01', codeNm: '서비스' },
+        { code: '02', codeNm: '개발/작업' },
+        { code: '03', codeNm: '정책/약관' },
+        { code: '04', codeNm: '오류/장애' },
+        { code: '05', codeNm: '이벤트' },
+      ],
+      // 공지사항
+      LINE_FEED: 10, // '\n',
+      maxByte: 2000,
+
+      // params: {
+      //     'blckSndrno' : ''
+      //     ,'ctgCd' : '01'
+      //     ,'blckRsnCd' : '02'
+      //     ,'meno' : ''
+      // }
+    };
+  },
+  create() {
+    //this.setCodeDate();
+    this.formReset();
+  },
+  mounted() {
+    //this.ctgCd = '01'
+  },
+  components: {
+    VueEditor,
+    ValidationConfirmPopup,
+  },
+  methods: {
+    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
+      var fd = new FormData();
+      fd.append('files', file);
+
+      homeMgtApi
+        .getImageUrl(fd)
+        .then((response) => {
+          const url = '..' + response.data.data.replaceAll('\\', '/'); // Get url from response
+          console.log(url);
+          Editor.insertEmbed(cursorLocation, 'image', url);
+          resetUploader();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    //모달 띄우기
+    ModalOpen(props) {
+      var dimmed = document.getElementsByClassName('modal52');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
+      this.setCodeDate();
+      if (props) {
+        this.ntNo = props.ntNo;
+        this.title = props.title;
+        this.ntSbst = props.ntSbst;
+        this.emgYn = props.emgYn;
+        this.useYn = props.useYn;
+        this.ctgCd = props.ctgCd;
+        this.fileNm = props.fileNm.split(',');
+        this.filePath = props.filePath.split(',');
+        this.fileTitle = props.fileTitle.split(',');
+        this.fileNo = props.fileNo.split(',');
+        this.fileCount = props.fileCount;
+      }
+
+      for (let i = 0; i < this.fileCount; i++) {
+        this.updateFileList.push({
+          src: '' + encodeURIComponent(this.filePath[i].replaceAll('\\', '/')) + '/' + this.fileNm[i],
+          filePath: this.filePath[i],
+          fileNo: this.fileNo[i],
+          fileName: this.fileNm[i],
+          name: this.fileTitle[i],
+        });
+      }
+    },
+    // 모달 끄기
+    ModalClose() {
+      this.formReset();
+
+      var dimmed = document.getElementsByClassName('modal52');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+    },
+    // 저장 후 부모창 호출
+    toComplete() {
+      this.$parent.$refs.table.reloadData();
+      this.ModalClose();
+    },
+
+    setCodeDate() {
+      // 발송타입
+      api.commCode({ grpCd: 'SNDBLCK_TP_CD' }).then((response) => {
+        this.tpType = response.data.data.list;
+      });
+      api.commCode({ grpCd: 'SNDBLCK_RSN_CD' }).then((response) => {
+        this.rsnType = response.data.data.list;
+      });
+    },
+
+    doValidate() {
+      if (this.isNull(this.ctgCd) || this.ctgCd === 'null') {
+        this.row.title = '공지사항 등록';
+        this.row.msg1 = '분류코드를 선택해 주세요.';
+        this.row.focusTaget = '_ctgCd';
+        this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
+        return false;
+      }
+
+      if (this.isNull(this.title)) {
+        this.row.title = '공지사항 등록';
+        this.row.msg1 = '제목을 입력해 주세요.';
+        this.row.focusTaget = '_title';
+        this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
+        return false;
+      }
+      if (this.isNull(this.ntSbst)) {
+        this.row.title = '공지사항 등록';
+        this.row.msg1 = '내용을 입력해 주세요.';
+        this.row.focusTaget = '_ntSbst';
+        this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
+        return false;
+      }
+      /*       const hp = this.blckSndrno;
+      if (!this.isNull(hp) && !this.isSendnum(hp)) {
+        this.row.title = '공지사항';
+        this.row.msg1 = '발신번호 형식이 잘못되었습니다. 확인 해주세요.';
+        this.$parent.alertInsert(this.row);
+        this.$refs._blckSndrno.focus();
+        return false;
+      } */
+      this.row.ctgCd = this.ctgCd;
+      return true;
+    },
+    formReset() {
+      Object.assign(this.$data, this.$options.data());
+    },
+    updateConfirm() {
+      if (this.doValidate()) {
+        this.$refs.ValidationConfirmPopup.confirmUpdateOpen();
+      }
+    },
+    // 바이트길이 구하기
+    getByteLength: function (decimal) {
+      return decimal >> 7 || this.LINE_FEED === decimal ? 2 : 1;
+    },
+
+    getByte: function (str) {
+      return str
+        .split('')
+        .map((s) => s.charCodeAt(0))
+        .reduce((prev, unicodeDecimalValue) => prev + this.getByteLength(unicodeDecimalValue), 0);
+    },
+    getLimitedByteText: function (inputText, maxByte) {
+      const characters = inputText.split('');
+      let validText = '';
+      let totalByte = 0;
+
+      for (let i = 0; i < characters.length; i += 1) {
+        const character = characters[i];
+        const decimal = character.charCodeAt(0);
+        const byte = this.getByteLength(decimal); // 글자 한 개가 몇 바이트 길이인지 구해주기
+        // 현재까지의 바이트 길이와 더해 최대 바이트 길이를 넘지 않으면
+        if (totalByte + byte <= maxByte) {
+          totalByte += byte; // 바이트 길이 값을 더해 현재까지의 총 바이트 길이 값을 구함
+          validText += character; // 글자를 더해 현재까지의 총 문자열 값을 구함
+        } else {
+          // 최대 바이트 길이를 넘으면
+          break; // for 루프 종료
+        }
+      }
+      return validText;
+    },
+
+    memoLimitByte() {
+      this.meno = this.getLimitedByteText(this.meno, this.maxByte);
+    }, //END 바이트길이 구하기
+
+    updateNotice() {
+      const fd = new FormData();
+      let legacyFiles = [];
+      for (let i = 0; i < this.updateFileList.length; i++) {
+        if (this.updateFileList[i].fileName) {
+          legacyFiles.push(this.updateFileList[i].fileName);
+        } else {
+          fd.append('files', this.updateFileList[i]);
+        }
+      }
+
+      const params = {
+        ntNo: this.ntNo,
+        title: this.title,
+        ntSbst: this.ntSbst,
+        emgYn: this.emgYn,
+        useYn: this.useYn,
+        ctgCd: this.ctgCd,
+        chgId: this.$store.getters['login/userId'],
+        legacyFiles: legacyFiles.join(),
+        delFileNo: this.delFileList.join(),
+      };
+
+      console.log(params);
+      console.log(params.delFileNo);
+      console.log(typeof params.delFileNo);
+
+      fd.append('key', new Blob([JSON.stringify(params)], { type: 'application/json' }));
+
+      for (var pair of fd.entries()) {
+        console.log(pair[0] + ' : ' + pair[1]);
+      }
+
+      homeMgtApi.updateNotice(fd).then((response) => {
+        if (response.data.retCode == '0000') {
+          this.row.title = '공지사항 수정';
+          this.row.msg1 = '수정이 완료되었습니다.';
+          this.row.type = 'update';
+          //this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
+          this.toComplete();
+        } else {
+          this.row.title = '공지사항 수정 실패';
+          this.row.msg1 = response.retMsg;
+          this.row.type = '';
+          this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
+        }
+      });
+    },
+
+    checkFocus() {
+      if (this.row.focusTaget === '_title') {
+        this.$refs._title.focus();
+      } else if (this.row.focusTaget === '_ntSbst') {
+        //this.$refs._ntSbst.focus();
+      } else if (this.row.focusTaget === '_ctgCd') {
+        this.$refs._ctgCd.focus();
+      }
+    },
+    /////////////////////////////////// 파일 첨부 ////////////////////////////////////////
+    onFileChange(event) {
+      const files = event.target.files || event.dataTransfer.files;
+      if (!files.length) return;
+      /* if (files.length > 3) {
+        confirm.fnAlert(
+          // "이미지 첨부 기준 안내",
+          '',
+          '<li>최대 3장 첨부할 수 있습니다.</li>',
+          'info'
+        );
+        this.imageAddTitle = '이미지는 최대 3장까지 첨부할 수 있습니다.';
+        //confirm.fnAlert("알림", "첨부파일은 최대 3개까지 가능합니다.", "alert");
+        return;
+      } else if (this.updateFileList.length + files.length > 3) {
+        confirm.fnAlert(
+          // "이미지 첨부 기준 안내",
+          '',
+          '<li>최대 3장 첨부할 수 있습니다.</li>',
+          'info'
+        );
+        this.imageAddTitle = '이미지는 최대 3장까지 첨부할 수 있습니다.';
+        // confirm.fnAlert("알림", "첨부파일은 최대 3개까지 가능합니다.", "alert");
+        return;
+      } */
+      this.addFiles(files);
+    },
+    async addFiles(files) {
+      for (let i = 0; i < files.length; i++) {
+        const src = await this.readFiles(files[i]);
+        files[i].src = src;
+        this.updateFileList.push(files[i]);
+
+        /* if (!(files[i].name.indexOf('jpg') > -1 || files[i].name.indexOf('jpeg') > -1)) {
+          confirm.fnAlert('', '<li>jpg파일 형식만 첨부할 수 있습니다.</li>', 'info');
+          this.imageAddTitle = 'jpg파일 형식만 첨부할 수 있습니다.';
+          continue;
+        } else if (files[i].size > 300000) {
+          confirm.fnAlert(
+            // "이미지 첨부 기준 안내",
+            '',
+            '<li>전체 크기 합계가 300KB 이하여야 합니다.</li>',
+            'info'
+          );
+          this.imageAddTitle = '전체 크기 합계가 300KB 이하여야 합니다.';
+          //confirm.fnAlert("이미지 사이즈 초과", "300KB이하 이미지만 등록 가능합니다.", "alert");
+          continue;
+        } else if (files[i].size + this.totalFileSize > 300000) {
+          confirm.fnAlert(
+            // "이미지 첨부 기준 안내",
+            '',
+            '<li>전체 크기 합계가 300KB 이하여야 합니다.</li>',
+            'info'
+          );
+          this.imageAddTitle = '전체 크기 합계가 300KB 이하여야 합니다.';
+          //confirm.fnAlert("이미지 사이즈 초과", "전체 합계 300KB이하 이미지만 등록 가능합니다.", "alert");
+          continue;
+        } else if (this.getImageSize(src) === false) {
+          confirm.fnAlert(
+            // "이미지 첨부 기준 안내",
+            '',
+            '<li>1,500(가로)x1,440(세로)px 이하 크기만 첨부할 수 있습니다.</li>',
+            'info'
+          );
+          this.imageAddTitle = '1,500(가로)x1,440(세로)px 이하 크기만 첨부할 수 있습니다.';
+          //confirm.fnAlert("이미지 크기 초과", "1500 * 1440 이하 이미지만 등록 가능합니다.", "alert");
+          continue;
+        } else {
+          files[i].status = 'update';
+          files[i].index = this.updateFileList.length;
+          this.updateFileList.push(files[i]);
+          confirm.fnAlert('', '이미지가 정상적으로 추가 되었습니다.', 'alert');
+          this.imageAddTitle = '';
+        } */
+      }
+      console.log(this.updateFileList);
+      this.$refs.imageUploader.value = ''; // 이미지 중복 가능하도록 input 초기화
+    },
+    // FileReader를 통해 파일을 읽어 thumbnail 영역의 src 값으로 셋팅
+    async readFiles(files) {
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+          resolve(e.target.result);
+        };
+        reader.readAsDataURL(files);
+      });
+    },
+    getImageSize(src) {
+      const img = new Image();
+      let _width = 0;
+      let _height = 0;
+      img.src = src;
+
+      img.onload = function () {
+        _width = img.width;
+        _height = img.height;
+        if (_width >= 1500 || _height >= 1440) {
+          return false;
+        } else {
+          return true;
+        }
+      };
+    },
+    popupHandleRemove(index, fileNo) {
+      this.delFileList.push(fileNo);
+      this.updateFileList.splice(index, 1);
+    },
+    download(filePath, fileName, fileTitle) {
+      this.row = {};
+      this.row.fileTitle = fileTitle;
+      this.row.filePath = filePath;
+      this.row.fileNm = fileName;
+      console.log(this.row);
+      homeMgtApi.fileDownload(this.row);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.popup-btn-wrap {
+  width: 500px;
+  margin: auto;
+  padding: 100px 0;
+}
+
+.popup-btn-wrap button {
+  width: 100%;
+  margin-bottom: 10px;
+  height: 50px;
+  border-radius: 5px;
+  box-shadow: none;
+  border: 1px solid #000;
+}
+
+.popup-btn-wrap button:hover {
+  background: #000;
+  color: #fff;
+}
+
+.btn.plus {
+  font-family: SpoqaHanSansNeo;
+  font-weight: 400;
+  font-size: 16px;
+  color: #fff;
+  background-color: #35354f;
+  border-radius: 4px;
+  text-align: center;
+  min-width: 89px;
+  height: 36px;
+  padding: 10px 20px;
+  letter-spacing: -0.025em;
+  border: none;
+  position: relative;
+  line-height: 1;
+  display: inline-block;
+  box-sizing: border-box;
+  transition: 0.3s;
+}
+.btn input {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.file_name {
+  display: inline-flex;
+}
+.btn_del {
+  background: #e4e4e4;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: none;
+  font-size: 10px;
+  margin: 0 0 0 5px;
+}
+</style>