[유치현황관리 / 유치채널현황] 고객사명 엔티티코드 변환

frontend/src/modules/attractMgt/views/ChannelList.vue

@@ -10,26 +10,26 @@
           <div class="input_box cal">
             <label for="right" class="label">조회기간</label>
             <div class="term">
-                <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                      :language="ko"
-                      :format="customFormatter"
-                      :disabled-dates="disabledSDate"
-                      v-model="startDate"
-                      @selected="selectedStartDate(0)"
-                      @closed="closeDate('start')"
-                  ></vuejs-datepicker>
-                </span>~
               <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                      :language="ko"
-                      :format="customFormatter"
-                      :disabled-dates="disabledEDate"
-                      v-model="endDate"
-                      @selected="selectedEndDate(0)"
-                      @closed="closeDate('end')"
-                  ></vuejs-datepicker>
-                </span>
+                <vuejs-datepicker
+                  :language="ko"
+                  :format="customFormatter"
+                  :disabled-dates="disabledSDate"
+                  v-model="startDate"
+                  @selected="selectedStartDate(0)"
+                  @closed="closeDate('start')"
+                ></vuejs-datepicker> </span
+              >~
+              <span class="custom_input icon_date">
+                <vuejs-datepicker
+                  :language="ko"
+                  :format="customFormatter"
+                  :disabled-dates="disabledEDate"
+                  v-model="endDate"
+                  @selected="selectedEndDate(0)"
+                  @closed="closeDate('end')"
+                ></vuejs-datepicker>
+              </span>
             </div>
           </div>
           <div class="select_box id">
@@ -52,11 +52,25 @@
           </div>
           <div class="input_box">
             <label for="right" class="label">유치자 마당ID</label>
-            <input class="search-box" type="text" id="" placeholder="검색어 입력" v-model.trim="grid.params.loginId" maxlength="50"/>
+            <input
+              class="search-box"
+              type="text"
+              id=""
+              placeholder="검색어 입력"
+              v-model.trim="grid.params.loginId"
+              maxlength="50"
+            />
           </div>
           <div class="input_box">
             <label for="right" class="label">유치업체</label>
-            <input class="search-box" type="text" id="" placeholder="검색어 입력" v-model.trim="grid.params.norgNm" maxlength="50"/>
+            <input
+              class="search-box"
+              type="text"
+              id=""
+              placeholder="검색어 입력"
+              v-model.trim="grid.params.norgNm"
+              maxlength="50"
+            />
           </div>
         </div>
         <div class="group">
@@ -69,59 +83,62 @@
             </select>
           </div>
           <div class="input_box">
-            <input class="search-box" type="text" id="search" placeholder="검색어 입력"
-                   v-model.trim="grid.params.searchText" maxlength="100"/>
+            <input
+              class="search-box"
+              type="text"
+              id="search"
+              placeholder="검색어 입력"
+              v-model.trim="grid.params.searchText"
+              maxlength="100"
+            />
           </div>
           <button type="button" class="button grey" @click="search">조회</button>
         </div>
       </div>
       <div class="info">
-        <div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
+        <div class="count">
+          총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span
+          >건
           <div class="select_box NumberSe">
             <select name="" id="" v-model="perPageCnt" @change="changePerPage()">
-              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{
-                  option.text
-                }}
+              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">
+                {{ option.text }}
               </option>
             </select>
           </div>
         </div>
         <div class="button_group">
-          <button type="button" class="button blue download" @click="excelDown();">엑셀 다운로드</button>
+          <button type="button" class="button blue download" @click="excelDown()">엑셀 다운로드</button>
         </div>
-
       </div>
 
       <div class="table">
         <custom-grid
-            ref="table"
-            :totalItems="'totalItems'"
-            :url="grid.url"
-            :pagePerRows="grid.pagePerRows"
-            :initialRequest="grid.initialRequest"
-            :pagination="grid.pagination"
-            :isCheckbox="grid.isCheckbox"
-            :columns="grid.columns"
-            :noDataStr="grid.noDataStr"
-            :addCls="grid.addCls"
-            :header="grid.headder"
+          ref="table"
+          :totalItems="'totalItems'"
+          :url="grid.url"
+          :pagePerRows="grid.pagePerRows"
+          :initialRequest="grid.initialRequest"
+          :pagination="grid.pagination"
+          :isCheckbox="grid.isCheckbox"
+          :columns="grid.columns"
+          :noDataStr="grid.noDataStr"
+          :addCls="grid.addCls"
+          :header="grid.headder"
         ></custom-grid>
       </div>
 
       <common-modal ref="commonModal"></common-modal>
-
     </div>
-
-
   </div>
 </template>
 
 <script>
-import commonModal from "@/components/modal/commonModal";
+import commonModal from '@/components/modal/commonModal';
 import customGrid from '@/components/CustomGrid';
 import moment from 'moment';
 import api from '@/service/api.js';
-import channelMgtApi from "../service/channelMgtApi.js";
+import channelMgtApi from '../service/channelMgtApi.js';
 import xlsx from '@/common/excel';
 
 class CustomATagRenderer {
@@ -130,7 +147,7 @@ class CustomATagRenderer {
     const el = document.createElement('a');
     el.href = 'javascript:void(0);';
     el.className = 'btn_text';
-    el.innerText = String(props.colValue)
+    el.innerText = String(props.colValue);
     this.el = el;
   }
 
@@ -139,8 +156,8 @@ class CustomATagRenderer {
   }
 
   addEvent(selEl) {
-    selEl.addEventListener("click", () => {
-      const {callback} = this.props["cgrido" + this.props.colName].options;
+    selEl.addEventListener('click', () => {
+      const { callback } = this.props['cgrido' + this.props.colName].options;
       callback(this.props);
     });
   }
@@ -149,8 +166,8 @@ class CustomATagRenderer {
 export default {
   name: 'channelList',
   data() {
+    const vm = this;
     return {
-
       ko: vdp_translation_ko.js,
       periodDay: 7,
       sDateDiv: 'day',
@@ -165,9 +182,9 @@ export default {
       // 테이블 리스트 데이터
       perPageCnt: 50,
       options: [
-        {text: '20', value: 20},
-        {text: '50', value: 50},
-        {text: '100', value: 100}
+        { text: '20', value: 20 },
+        { text: '50', value: 50 },
+        { text: '100', value: 100 },
       ],
       searchType: '01',
       totalItems: 0,
@@ -175,37 +192,50 @@ export default {
         url: '/api/v1/bo/attractMgt/channelList',
         pagePerRows: 20,
         pagination: true,
-        isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
+        isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
         initialRequest: false,
         addCls: 'box_OFvis',
 
         columns: [
-          {name: 'no', header: 'No', align: 'center', width: '6%'},
-          {name: 'subsDt', header: '가입일', align: 'center', width: '11%'},
-          {name: 'norgNm', header: '유치업체', align: 'center', width: '10%'},
-          {name: 'userSeq', header: '사용자일련번호', align: 'center', width: '10%', hidden: true},
-          {name: 'loginId', header: '마당ID(이름)', align: 'center', width: '10%'},
-          {name: 'custNm', header: '고객사명', align: 'center', width: '10%', renderer: {
-              type: CustomATagRenderer
-              , options: {
-                callback: this.channelDetail,
-              }
-            }
-          },
-          {name: 'bizrno', header: '사업자번호', align: 'center', width: '12%'},
-          {name: 'userNm', header: '이름', align: 'center', width: '10%'},
-          {name: 'subsSttusCd', header: '상태', align: 'center', width: '10%', hidden: true},
-          {name: 'subsSttusNm', header: '상태', align: 'center', width: '10%'},
-          {name: 'custTyCd', header: '구분', align: 'center', width: '10%', hidden: true},
-          {name: 'custTyNm', header: '구분', align: 'center', width: '10%'},
+          { name: 'no', header: 'No', align: 'center', width: '6%' },
+          { name: 'subsDt', header: '가입일', align: 'center', width: '11%' },
+          { name: 'norgNm', header: '유치업체', align: 'center', width: '10%' },
+          { name: 'userSeq', header: '사용자일련번호', align: 'center', width: '10%', hidden: true },
+          { name: 'loginId', header: '마당ID(이름)', align: 'center', width: '10%' },
           {
-            name: 'sndCnt', header: '전체발송건수', align: 'center', width: '11%',
-            formatter: props => {
+            name: 'custNm',
+            header: '고객사명',
+            align: 'center',
+            width: '10%',
+            renderer: {
+              type: CustomATagRenderer,
+              options: {
+                callback: this.channelDetail,
+              },
+            },
+            formatter: (props) => {
+              let result = vm.fromHtmlEntities(props.custNm);
+              //.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            },
+          },
+          { name: 'bizrno', header: '사업자번호', align: 'center', width: '12%' },
+          { name: 'userNm', header: '이름', align: 'center', width: '10%' },
+          { name: 'subsSttusCd', header: '상태', align: 'center', width: '10%', hidden: true },
+          { name: 'subsSttusNm', header: '상태', align: 'center', width: '10%' },
+          { name: 'custTyCd', header: '구분', align: 'center', width: '10%', hidden: true },
+          { name: 'custTyNm', header: '구분', align: 'center', width: '10%' },
+          {
+            name: 'sndCnt',
+            header: '전체발송건수',
+            align: 'center',
+            width: '11%',
+            formatter: (props) => {
               let result = props.sndCnt;
               //.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
               return result;
-            }
-          }
+            },
+          },
         ],
         noDataStr: '검색 결과가 없습니다.',
         params: {
@@ -222,8 +252,8 @@ export default {
           custTyCd: '',
           custTyNm: '',
         },
-        excelHeader: []
-      }
+        excelHeader: [],
+      },
     };
   },
   components: {
@@ -242,7 +272,6 @@ export default {
   },
   destroyed() {
     this.grid.params.subsSttusCd = '';
-
   },
   mounted() {
     let page = 1;
@@ -251,7 +280,7 @@ export default {
 
     // store에 저장된 페이지 정보 및 검색 조건을 불러오기
     let isKeep = false;
-    if (getCondition) {      
+    if (getCondition) {
       this.grid.pagePerRows = getCondition.perPage;
       this.grid.params = getCondition.params;
       page = getCondition.page;
@@ -263,11 +292,12 @@ export default {
     search: function (isKeep) {
       this.grid.params.subsStDt = this.startDate;
       this.grid.params.subsEdDt = this.endDate;
-      this.grid.params.searchType = this.searchType
+      this.grid.params.searchType = this.searchType;
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
-    changePerPage: function () { 	// 페이지당 조회할 개수
+    changePerPage: function () {
+      // 페이지당 조회할 개수
       this.grid.pagePerRows = this.perPageCnt;
       this.search(true);
     },
@@ -276,7 +306,7 @@ export default {
       this.$store.commit('searchcondition/updateSearchCondition', {
         page: getP._currentPage,
         perPage: this.perPageCnt,
-        params: this.grid.params
+        params: this.grid.params,
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
@@ -291,13 +321,13 @@ export default {
           searchType2: this.grid.params.searchType1,
           searchText1: this.grid.params.searchText,
           loginId: this.grid.params.loginId,
-          norgNm: this.grid.params.norgNm
+          norgNm: this.grid.params.norgNm,
         };
 
         response = await channelMgtApi.channelListExcel(params);
 
         const result = response.data;
-        if (result != null && result.retCode == "0000") {
+        if (result != null && result.retCode == '0000') {
           return result.data;
         } else {
           return false;
@@ -307,7 +337,6 @@ export default {
       }
     }, // end of getExcelDataDown
     async excelDown() {
-
       if (this.$refs.table.getData().length <= 0) {
         this.row.title = '유치채널현황';
         this.row.msg1 = '조회된 데이터가 없습니다.';
@@ -321,31 +350,30 @@ export default {
       const data = await this.getExcelDataDown();
       let options = {
         header: this.excelHeader,
-        dataOrder: 'header'
+        dataOrder: 'header',
       };
-      xlsx.export(data.list, saveFileName, options).then(() => {
-      });
+      xlsx.export(data.list, saveFileName, options).then(() => {});
     },
     getExcelHeader() {
       // 헤더를 mockup으로 관리한다.
-      channelMgtApi.getExcelHeader(this.pageType).then(res => {
+      channelMgtApi.getExcelHeader(this.pageType).then((res) => {
         this.excelHeader = res;
       });
     },
     channelDetail(props) {
       this.row.userId = props.loginId;
       this.row.userSeq = props.userSeq;
-      this.$router.push({name: 'channelDetail', params: this.row});
+      this.$router.push({ name: 'channelDetail', params: this.row });
     },
     setCodeData() {
       // 상태 옵션 셋팅.
-      api.commCode({'grpCd': 'SUBS_STTUS_CD'}).then(response => {
+      api.commCode({ grpCd: 'SUBS_STTUS_CD' }).then((response) => {
         // grid.params.subsSttusCd
         this.subsSttusCdList = response.data.data.list;
         this.grid.params.subsSttusCd = '';
       });
 
-      api.commCode({'grpCd': 'CUST_KD_CD'}).then(response => {
+      api.commCode({ grpCd: 'CUST_KD_CD' }).then((response) => {
         this.custTyCdList = response.data.data.list;
         this.grid.params.custTyCd = '';
       });
@@ -377,11 +405,11 @@ export default {
     closeDate(type) {
       if (type != undefined && type != null) {
         if (type == 'start') {
-          this.disabledSDate = {from: this.endDate};
-          this.disabledEDate = {to: this.startDate, from: this.endDate};
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: this.endDate };
         } else if (type == 'end') {
-          this.disabledSDate = {from: this.endDate};
-          this.disabledEDate = {to: this.startDate, from: new Date()};
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: new Date() };
         }
       }
     },
@@ -399,14 +427,18 @@ export default {
       let initStartDate = new Date(setYear, 0, 1);
       this.startDate = initStartDate;
     },
+    fromHtmlEntities(str) {
+      return (str + '').replace(/&#\d+;/gm, function (s) {
+        return String.fromCharCode(s.match(/\d+/gm)[0]);
+      });
+    },
   },
   beforeRouteLeave(to, from, next) {
-
     const getP = this.$refs.table.getPagination();
     this.$store.commit('searchcondition/updateSearchCondition', {
       page: getP._currentPage,
       perPage: this.perPageCnt,
-      params: this.grid.params
+      params: this.grid.params,
     });
     // 라우트 하기전 실행
     next();