hubez-admin/frontend/src/modules/riskMgt/components/InsertMsgPop.vue

<template>
  <!-- <div class="wrap bg-wrap"> -->
  <div>
    <div class="dimmed modal57" @click="ModalClose();"></div>
    <div class="popup-wrap modal57">
      <!-- 메시지 차단 신규 등록 -->
      <div class="popup popup_form modal57">
        <div class="pop-head">
          <h3 class="pop-tit">메시지 차단 신규 등록</h3>
        </div>
        <form autocomplete="off">
          <table>
            <tbody>
            <tr>
              <th>차단문구</th>
              <td class="input_add">
                <input v-model="word" ref="_word" maxlength="10" @input="msgLimitByte()">
                <button type="button" class="button white add" @click="doAdd" ></button>
              </td>
            </tr>
            <tr>
              <td colspan="2" class="registration" value="">
                <ul>
                  <li v-for="(item, i) in msgBlckwordList" v-bind:key="item.word">
                    <span> {{ item.word }}<a href="#" @click="doDel(item, i)"><img src="@/assets/images/icon-del.png"/></a> </span>
                    <!-- <button type="button" @click="doDel(item, i)">x</button> -->
                  </li>
                </ul>
              </td>
            </tr>
            <tr>
              <th>조건</th>
              <td>
                <input type="radio" name="state" value="01" id="popup_radio3" v-model="blckContCd">
                <label for="popup_radio3">AND</label>
                <input type="radio" name="state" value="02" id="popup_radio4" v-model="blckContCd">
                <label for="popup_radio4">OR</label>
              </td>
            </tr>
            <tr>
              <th>차단사유</th>
              <td>
                <div>
                  <select name="" id="" v-model.trim="blckRsnCd" ref="blckRsnCd">
                    <option v-for="(option, i) in rsnType"
                            :value="option.code"
                            v-bind:key="i">
                      {{ option.codeNm }}
                    </option>
                  </select>
                </div>
              </td>
            </tr>
            <tr>
              <th>메모</th>
              <td class="sender"><textarea class="memo_text" v-model.trim="memo" ref="memo" maxlength="2000"
                                           @input="memoLimitByte()"></textarea></td>
            </tr>

            </tbody>
          </table>
        </form>
        <div class="popup-btn2">
          <button class="btn-pcolor" @click="regisConfirm()">저장</button>
          <button class="btn-default" @click="ModalClose();">취소</button>
        </div>
      </div>
      <validation-confirm-popup ref="ValidationConfirmPopup"></validation-confirm-popup>
    </div>
  </div>
</template>

<script>
import api from '@/service/api';
import riskMgtApi from '../service/riskMgtApi';
import lodash from "lodash";
import {utils_mixin, chkPattern2} from '../service/mixins';
import ValidationConfirmPopup from './ValidationConfirmPopup.vue';

export default {
  mixins: [utils_mixin, chkPattern2],
  data() {
    return {

      row: {},
      msgBlckwordList: [],
      rsnType: [],
      tpType: [],
      word: '', // 차단문구
      blckSndrno: '',
      sndblckTpCd: '',
      blckRsnCd: '01', // 차단사유
      blckYn: '',
      blckContCd: '01', //차단 조건
      chgDt: '',
      regId: '',
      regDt: '',
      memo: '', // 메모
      maxByte: 2000,

    }
  },
  created() {
    this.formReset();
  },
  components: {
    ValidationConfirmPopup
  },

  methods: {
    ModalOpen() {
      var dimmed = document.getElementsByClassName('modal57');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
      this.setCodeDate();
    },
    // 모달 끄기
    ModalClose() {
      this.formReset();
      var dimmed = document.getElementsByClassName('modal57');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },

    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;
      });
    },

    async doInsert() {
      this.row.blckRsnCd = this.blckRsnCd;
      this.row.blckContCd = this.blckContCd;
      this.row.memo = this.memo;
      this.row.blckYn = this.blckYn;
      this.row.list = this.msgBlckwordList
      console.log(this.row)
      // return false;
      try {
        const response = await riskMgtApi.msgInsertIntrcp(this.row);
        const result = response.data;
        if (result != null && result.retCode == "0000") {
          this.row.title = '메세지 차단';
          this.row.msg1 = '저장하였습니다.';
          this.$parent.msgAlertModalOpen(this.row);
        }
        this.toComplete();
      } catch (err) {
        this.row.title = '메세지 차단';
        this.row.msg1 = '실패하였습니다.';
        this.$parent.msgAlertModalOpen(this.row);
      }
      // }
    },

    doValidate() {
      if (this.isNull(this.msgBlckwordList)) {
        this.row.title = '메세지 차단';
        this.row.msg1 = '문구를 입력해주세요.';
        this.$parent.msgAlertModalOpen(this.row);
        this.$refs._word.focus();
        return false;
      }
      return true;
    },

    toComplete() {
      this.$parent.$refs.table.reloadData();
      this.ModalClose();
    },
    //신규등록 팝업에서 문구 추가 버튼
    doAdd: function () {
      if (this.isNull(this.word)) {
        this.row.title = '메세지 차단';
        this.row.msg1 = '문구를 입력해주세요.';
        this.$parent.msgAlertModalOpen(this.row);
        this.$refs._word.focus();
        return false;
      }
      if (this.msgBlckwordList.length < 10) {
        this.msgBlckwordList.push({
          //seqNo: '',
          word: this.word
        });
        this.word = '';
      }
    },
    //신규등록 팝업에서 문구 삭제 버튼
    doDel(item, i) {
      localStorage.removeItem(item);
      this.msgBlckwordList.splice(i, 1);
    },
    formReset() {
      var type = this.insertType;
      Object.assign(this.$data, this.$options.data());
      this.insertType = type;
    },
    regisConfirm() {
      if (this.doValidate()) {
        this.$refs.ValidationConfirmPopup.msgConfirmInsertOpen();
      }
    },
    // 바이트길이 구하기
    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) // 글자 한 개가 몇 바이트 길이인지 구해주기
        // console.log(byte)
        // 현재까지의 바이트 길이와 더해 최대 바이트 길이를 넘지 않으면
        if (totalByte + byte <= maxByte) {
          totalByte += byte      // 바이트 길이 값을 더해 현재까지의 총 바이트 길이 값을 구함
          validText += character // 글자를 더해 현재까지의 총 문자열 값을 구함
        } else {                 // 최대 바이트 길이를 넘으면
          break                  // for 루프 종료
        }
      }
      return validText
    },

    memoLimitByte() {
      this.memo = this.getLimitedByteText(this.memo, this.maxByte);

    },	//END 바이트길이 구하기
    msgLimitByte(){
      this.word = this.getLimitedByteText(this.word, 10);
    }
  }


}
</script>