vue + jpa project (27) - 공통코드 연관(join)조회 프론트 재수정

 

이번 장에서는 Join 공통코드 리스트에 대한 프론트를 좀 더 개선시켜보겠다.

지금 화면을 조회를 하다보면 버그가 있는데 상단의 상세기준리스트와 그룹기준리스트 버튼을 클릭하다 보면

이전의 페이지를 조회하는 버그가 있다. 이 부분과 검색 조건을 넣어서 개선 시키도록 하겠다.

 

 

1. 프론트 버그 수정

   버그를 해결하기 위하여 버튼에서 호출하는 메소드와 실제 백엔드를 수행하는 메소드를 분리하겠다.

... 중략
    // 버튼의 메소드명 변경
    <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnClickDetailJoin()">상세기준리스트</button>&nbsp;
    <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnClickGroupJoin()">그룹기준리스트</button>&nbsp;
... 중략

// mounted에 호출되는 함수도 같이 수정
  mounted() {
    this.fnClickDetailJoin()
  },
// 버튼에서 호출이 되면 초기화 하고 백엔드 메소드를 다시 호출함
  methods: {
    fnClickDetailJoin() {
      this.pageFlag = 'A';
      this.list = {};
      this.page = 1;
      this.fnDetailJoinList()
    },
    fnDetailJoinList() {
      // 기존 초기화 되는 부분 이동시킴

      this.requestBody = { // 데이터 전송
        page: this.page,
        size: this.size
      }
... 중략

// 버튼에서 호출이 되면 초기화 하고 백엔드 메소드를 다시 호출함
    fnClickGroupJoin() {
      this.pageFlag = 'B';
      this.list = {};
      this.page = 1;
      this.fnGroupJoinList()
    },
    fnGroupJoinList() {
      // 기존 초기화 되는 부분 이동시킴

      this.requestBody = { // 데이터 전송
        page: this.page,
        size: this.size
      }
... 중략

이렇게 되면 위에서 말했던 버그가 해결된다.

 

 

2.  조회조건 추가

  리스트 하단에 조회조건을 아래와 같이 추가하고, 기본 변수에 검색조건을 추가한다.

... 중략
      <a href="javascript:;" v-if="paging.total_page_cnt > paging.end_page"
         @click="fnPage(`${paging.end_page+1}`)" class="next w3-button w3-border">&gt;</a>
      <a href="javascript:;" @click="fnPage(`${paging.total_page_cnt}`)" class="last w3-button w3-border">&gt;&gt;</a>
      </span>
    </div>
    <div> <-- 여기서부터 추가됨
      * 검색 단어에 콤마(,)가 들어가면 여러 건을 조회합니다.
      <br/>
      <select v-model="search_key">
        <option value="">- 선택 -</option>
        <option value="group_code">그룹코드</option>
        <option value="group_name">그룹코드명</option>
        <option value="code_value">상세코드</option>
        <option value="code_name">상세코드명</option>
      </select>
      &nbsp;
      <input type="text" v-model="search_value" @keyup.enter="fnPage(1)">
      &nbsp;
      <button @click="fnPage(1)">검색</button>
    </div>
... 중략

      }, //페이징 데이터
      page: this.$route.query.page ? this.$route.query.page : 1,  // 기본페이지는 1페이지
      size: this.$route.query.size ? this.$route.query.size : 10, // 보여지는 리스트 사이즈 10개
      search_key: this.$route.query.search_key ? this.$route.query.search_key : '', <-- 혹시 없다면 추가
      search_value: this.$route.query.search_value ? this.$route.query.search_value : '', <-- 혹시 없다면 추가
      paginavigation: function () { //페이징 처리 for문 커스텀
 ... 중략

 

 

3. 백엔드 호출 부분 수정

    백엔드에 호출하는 부분에서 검색조건을 넘기는 부분을 추가한다.

... 중략
    fnDetailJoinList() {

      this.requestBody = { // 데이터 전송
        searchKey: this.search_key,
        searchValue: this.search_value,
        //regDate : '20231122',	<-- 테스트로 개별 값 입력시
        //useYn : 'Y',	<-- 테스트로 개별 값 입력시
        page: this.page,
        size: this.size
      }
... 중략

    fnGroupJoinList() {

      this.requestBody = { // 데이터 전송
        searchKey: this.search_key,
        searchValue: this.search_value,
        //useYn : 'Y',	<-- 테스트로 개별 값 입력시
        page: this.page,
        size: this.size
      }
... 중략

 

수정이 완료되었다면 프론트 실행화면만 한번 보자. 백엔드 조건은 일단 무시를 하자.

이번엔 아래와 같이 조회가 된다. 

다음 장에서는 백엔드를 개선시켜 보겠다.