TC 기능 수정 / 디자인 수정 변경

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

@@ -5,12 +5,11 @@
         <h3 class="title">유치채널현황</h3>
         <p class="breadcrumb">유치현황관리 &gt; 유치채널현황</p>
       </div>
-      <form autocomplete="off" class="search_form">
-        <div class="search_wrap">
-          <div class="group">
-            <div class="input_box cal">
-              <label for="right" class="label">조회기간</label>
-              <div class="term">
+      <div class="search_wrap">
+        <div class="group">
+          <div class="input_box cal">
+            <label for="right" class="label">조회기간</label>
+            <div class="term">
                 <span class="custom_input icon_date">
                   <vuejs-datepicker
                       :language="ko"
@@ -21,7 +20,7 @@
                       @closed="closeDate('start')"
                   ></vuejs-datepicker>
                 </span>~
-                <span class="custom_input icon_date">
+              <span class="custom_input icon_date">
                   <vuejs-datepicker
                       :language="ko"
                       :format="customFormatter"
@@ -31,56 +30,59 @@
                       @closed="closeDate('end')"
                   ></vuejs-datepicker>
                 </span>
-              </div>
-            </div>
-            <div class="select_box id">
-              <label for="subsSttusCd" class="label">상태</label>
-              <select name="subsSttusCd" id="subsSttusCd" v-model="grid.params.subsSttusCd" @keyup.enter="search">
-                <option value="" selected>전체</option>
-                <option v-for="(option, i) in subsSttusCdList" v-bind:value="option.code" v-bind:key="i">
-                  {{ option.codeNm }}
-                </option>
-              </select>
-            </div>
-            <div class="select_box">
-              <label for="custTyCd" class="label">구분</label>
-              <select name="custTyCd" id="custTyCd" v-model="grid.params.custTyCd" @keyup.enter="search">
-                <option value="" selected>전체</option>
-                <option v-for="(option, i) in custTyCdList" v-bind:value="option.code" v-bind:key="i">
-                  {{ option.codeNm }}
-                </option>
-              </select>
-            </div>
-            <div class="input_box">
-              <label for="right" class="label">유치자 마당ID</label>
-              <input class="" type="text" id="" placeholder="검색어 입력" v-model="grid.params.loginId"/>
-            </div>
-            <div class="input_box">
-              <label for="right" class="label">유치업체</label>
-              <input class="" type="text" id="" placeholder="검색어 입력" v-model="grid.params.norgNm"/>
             </div>
           </div>
-          <div class="group">
-            <div class="select_box">
-              <label for="right" class="label">상세검색</label>
-              <select name="searchType" id="searchType" v-model="searchType" @keyup.enter="search">
-                <option value="01">고객사명</option>
-                <option value="02">이름</option>
-                <option value="03">사업자등록번호(생년월일)</option>
-              </select>
-            </div>
-            <div class="input_box">
-              <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText"/>
-            </div>
-            <button type="button" class="button grey" @click="search">조회</button>
+          <div class="select_box id">
+            <label for="subsSttusCd" class="label">상태</label>
+            <select name="subsSttusCd" id="subsSttusCd" v-model="grid.params.subsSttusCd" @keyup.enter="search">
+              <option value="" selected>전체</option>
+              <option v-for="(option, i) in subsSttusCdList" v-bind:value="option.code" v-bind:key="i">
+                {{ option.codeNm }}
+              </option>
+            </select>
+          </div>
+          <div class="select_box">
+            <label for="custTyCd" class="label">구분</label>
+            <select name="custTyCd" id="custTyCd" v-model="grid.params.custTyCd" @keyup.enter="search">
+              <option value="" selected>전체</option>
+              <option v-for="(option, i) in custTyCdList" v-bind:value="option.code" v-bind:key="i">
+                {{ option.codeNm }}
+              </option>
+            </select>
+          </div>
+          <div class="input_box">
+            <label for="right" class="label">유치자 마당ID</label>
+            <input class="" 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="" type="text" id="" placeholder="검색어 입력" v-model.trim="grid.params.norgNm" maxlength="50"/>
           </div>
         </div>
-      </form>
+        <div class="group">
+          <div class="select_box">
+            <label for="right" class="label">상세검색</label>
+            <select name="searchType" id="searchType" v-model="searchType" @keyup.enter="search">
+              <option value="01">고객사명</option>
+              <option value="02">이름</option>
+              <option value="03">사업자등록번호</option>
+            </select>
+          </div>
+          <div class="input_box">
+            <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="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>
+              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{
+                  option.text
+                }}
+              </option>
             </select>
           </div>
         </div>
@@ -111,8 +113,6 @@
     </div>
 
 
-
-
   </div>
 </template>
 
@@ -130,7 +130,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;
   }
 
@@ -140,7 +140,7 @@ class CustomATagRenderer {
 
   addEvent(selEl) {
     selEl.addEventListener("click", () => {
-      const { callback } = this.props["cgrido" + this.props.colName].options;
+      const {callback} = this.props["cgrido" + this.props.colName].options;
       callback(this.props);
     });
   }
@@ -157,19 +157,19 @@ export default {
       startDate: new Date(),
       endDate: new Date(),
 
-      row:{},
-      pageType:'CHANNEL',
-      subsSttusCdList:[],
-      custTyCdList:[],
+      row: {},
+      pageType: 'CHANNEL',
+      subsSttusCdList: [],
+      custTyCdList: [],
       openPicker: false,
       // 테이블 리스트 데이터
       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',
+      searchType: '01',
       totalItems: 0,
       grid: {
         url: '/api/v1/bo/attractMgt/channelList',
@@ -180,29 +180,28 @@ export default {
         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%', renderer: {
+          {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%', renderer: {
               type: CustomATagRenderer
               , options: {
                 callback: this.channelDetail,
               }
             }
           },
-          { name: 'custNm', header: '고객사명', align: 'center', width: '10%'},
-          { name: 'bizrno', header: '사업자번호', align: 'center', width: '12%'
-            ,formatter: props => {
-              let result = props.bizrno.substring(0,3)+'-'+ props.bizrno.substring(3,5)+'-'+ props.bizrno.substring(5,10)
-              return result;
-            }
-          },
-          { name: 'userNm', header: '이름', align: 'center', width: '10%'},
-          { name: 'subsSttusCd', header: '상태', align: 'center', width: '10%'},
-          { name: 'custTyCd', header: '구분', align: 'center', width: '10%'},
-          { name: 'sndCnt', header: '전체발송건수', align: 'center', width: '11%',
-            formatter: props =>{
+          {name: 'custNm', header: '고객사명', align: 'center', width: '10%'},
+          {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;
@@ -213,14 +212,16 @@ export default {
         params: {
           searchType: '01',
           searchType1: '',
-          searchText: '', 
+          searchText: '',
           subsStDt: '',
           subsEdDt: '',
           subsSttusCd: '',
+          subsSttusNm: '',
           loginId: '',
           norgNm: '',
           sndCnt: '',
           custTyCd: '',
+          custTyNm: '',
         },
         excelHeader: []
       }
@@ -231,11 +232,11 @@ export default {
     commonModal,
     vuejsDatepicker,
   },
-  created(){
+  created() {
     this.setCodeData();
     this.getExcelHeader();
     this.setPeriodDay(0);
-    
+
     // this.grid.params.subsSttusCd = '';
     // this.grid.params.searchType = '01';
     // this.$refs.searchType_.
@@ -248,7 +249,7 @@ export default {
     let page = 1;
     // 페이지 정보 및 검색 조건
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
-    console.log('getCondition : '+getCondition);
+    console.log('getCondition : ' + getCondition);
 
     // store에 저장된 페이지 정보 및 검색 조건을 불러오기
     let isKeep = false;
@@ -261,19 +262,19 @@ export default {
     this.search(isKeep);
   },
   methods: {
-    search: function(isKeep) {
+    search: function (isKeep) {
 
-      console.log('this.perPageCnt'+this.perPageCnt);
+      console.log('this.perPageCnt' + this.perPageCnt);
       console.log(this.grid.params);
       this.grid.params.searchType1 = this.searchType
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
-    changePerPage: function(){ 	// 페이지당 조회할 개수
+    changePerPage: function () { 	// 페이지당 조회할 개수
       this.grid.pagePerRows = this.perPageCnt;
       this.search(true);
     },
-    sendStoreData: function() {
+    sendStoreData: function () {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP._currentPage);
       this.$store.commit('searchcondition/updateSearchCondition', {
@@ -283,7 +284,7 @@ export default {
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
-      console.log("getCondition : "+ getCondition.perPage);
+      console.log("getCondition : " + getCondition.perPage);
     },
     async getExcelDataDown() {
       try {
@@ -303,7 +304,7 @@ export default {
         const result = response.data;
         if (result != null && result.retCode == "0000") {
           return result.data;
-        }else{
+        } else {
           return false;
         }
       } catch (err) {
@@ -323,14 +324,15 @@ export default {
       const saveFileName = `유치채널현황_${today}.xlsx`;
 
       const data = await this.getExcelDataDown();
-        console.log('-------------------------');
+      console.log('-------------------------');
       console.log(data);
       let options = {
         header: this.excelHeader,
         dataOrder: 'header'
       };
       // console.log(data);
-      xlsx.export(data.list, saveFileName, options).then(() => {});
+      xlsx.export(data.list, saveFileName, options).then(() => {
+      });
     },
     getExcelHeader() {
       // 헤더를 mockup으로 관리한다.
@@ -338,21 +340,21 @@ export default {
         this.excelHeader = res;
       });
     },
-    channelDetail(props){
+    channelDetail(props) {
       console.log(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_TY_CD'}).then(response => {
+      api.commCode({'grpCd': 'CUST_TY_CD'}).then(response => {
         this.custTyCdList = response.data.data.list;
         this.grid.params.custTyCd = '';
       });
@@ -386,15 +388,15 @@ 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()};
         }
       }
     },
-    customFormatter: function(date) {
+    customFormatter: function (date) {
       if (this.sDateDiv == 'month') {
         return moment(date).format('YYYY-MM');
       } else if (this.sDateDiv == 'year') {