vue + jpa project (21) - 공통코드 그룹관리(2)

지난번 장에서는 백엔드 쪽을 작성해보았다.

 

이번엔 프론트엔드 소스를 작성해보겠다.

이것 역시 기존 게시판에서 했던 것과 유사하지만 리마인드 하면서 진행하겠다.

 

폴더는 src/views/code 로 생성하고 그 하위에 파일을 추가한다.

 

1. 공통코드 그룹 리스트

  CodeGroupList.vue 파일

 

<template>
  <div class="board-list">
    <div class="common-buttons">
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnWrite">등록</button>
    </div>
    <table class="w3-table-all">
      <thead>
      <tr>
        <th>No</th>
        <th>그룹코드</th>
        <th>그룹코드명</th>
        <th>사용여부</th>
        <th>등록일시</th>
        <th>상세코드</th>
      </tr>
      </thead>
      <tbody>

        <tr v-if="!list || (Array.isArray(list) && list.length ===0)">
          <td colspan="6">
            등록된 게시물이 없습니다.
          </td>
        </tr>

        <tr v-else v-for="(row, no) in list" :key="no">
          <td>{{ (this.page - 1)*size + (no+1) }}</td>
          <td>{{ row.group_code }}</td>
          <td><a v-on:click="fnView(`${row.group_code}`)">{{ row.group_name }}</a></td>
          <td>{{ row.use_yn }}</td>
          <td>{{ row.reg_date }}</td>
          <td><input type="button" name="codeDetail" value="상세코드"></td>
        </tr>
      </tbody>
    </table>
    <div class="pagination w3-bar w3-padding-16 w3-small" v-if="paging.total_list_cnt > 0">
      <span class="pg">
      <a href="javascript:;" @click="fnPage(1)" class="first w3-button w3-border">&lt;&lt;</a>
      <a href="javascript:;" v-if="paging.start_page > 10" @click="fnPage(`${paging.start_page-1}`)"
         class="prev w3-button w3-border">&lt;</a>
      <template v-for=" (n,index) in paginavigation()">
          <template v-if="paging.page==n">
              <strong class="w3-button w3-border w3-green" :key="index">{{ n }}</strong>
          </template>
          <template v-else>
              <a class="w3-button w3-border" href="javascript:;" @click="fnPage(`${n}`)" :key="index">{{ n }}</a>
          </template>
      </template>
      <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>
</template>

<script>
export default {
  data() { //변수생성
    return {
      requestBody: {}, //리스트 페이지 데이터전송
      list: {}, //리스트 데이터
      groupCode : null,
      paging: {
        block: 0,
        end_page: 0,
        next_block: 0,
        page: 0,
        page_size: 0,
        prev_block: 0,
        start_index: 0,
        start_page: 0,
        total_block_cnt: 0,
        total_list_cnt: 0,
        total_page_cnt: 0,
      }, //페이징 데이터
      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문 커스텀
        let pageNumber = [] //;
        let start_page = this.paging.start_page;
        let end_page = this.paging.end_page;
        for (let i = start_page; i <= end_page; i++) pageNumber.push(i);
        return pageNumber;
      }
    }
  },
  mounted() {
    this.fnGetList()
  },
  methods: {
    fnGetList() {
      this.requestBody = { // 데이터 전송
        useYn : 'Y',
        page: this.page,
        size: this.size
      }

      this.$axios.get(this.$serverUrl + "/codegroups/list_paging", {
        params: this.requestBody,
        headers: {}
      }).then((res) => {

        this.list = res.data.data
        this.paging = res.data.pagination

      }).catch((err) => {
        if (err.message.indexOf('Network Error') > -1) {
          alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
        }
      })
    },
    fnView(groupCode) {
      this.requestBody.groupCode = groupCode
      this.$router.push({
        path : './detail',
        query: this.requestBody
      })
    },
    fnWrite() {
      this.$router.push({
        path : './write'
      })
    },
    fnPage(n) {
      if(this.page !== n) {
        this.page = n
      }
      this.fnGetList()
    }
  }
}
</script>

 

조회되는 항목만 다르고 사용여부가 'Y' 인 것만 조회되도록 강제한 것 이외에는 다른 부분의 많이 없다.

 

2. 공통코드 그룹 등록

  CodeGroupWrite.vue 파일

<template>
  <div class="board-detail">
    <div class="common-buttons">
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnSave">저장</button>&nbsp;
      <button type="button" class="w3-button w3-round w3-gray" v-on:click="fnList">목록</button>
    </div>
    <div class="board-content">
      <input v-if="regDate === undefined || regDate === ''" maxlength="3" type="text" v-model="groupCode" class="w3-input w3-border" placeholder="그룹코드를 입력해주세요." style="ime-mode:disabled; text-transform:uppercase; ">
      <span v-if="regDate !== undefined && regDate !== ''">{{ groupCode }}</span>
      <input type="text" v-model="groupName" class="w3-input w3-border" placeholder="그룹코드명을 입력해주세요.">
    </div>
    <div class="board-content">
      <select v-model="useYn">
        <option value="Y">Y</option>
        <option value="N">N</option>
      </select>
    </div>

    <div class="common-buttons">
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnSave">저장</button>&nbsp;
      <button type="button" class="w3-button w3-round w3-gray" v-on:click="fnList">목록</button>
    </div>
  </div>
</template>


<script>
export default {

  data() {
    return {
      requestBody : this.$route.query,
      groupCode : this.$route.query.groupCode,

      groupName : '',
      useYn : 'Y',
      regDate : '',
    }
  }, 
  mounted() {
    this.fnGetView()
  },
  methods: {
    fnGetView() {

      if (this.groupCode !== undefined) {

        this.$axios.get(this.$serverUrl + '/codegroups/' + this.groupCode, {
          params : this.requestBody,
        }).then((res) => {
          this.groupName = res.data.group_name
          this.useYn = res.data.use_yn
          this.regDate = res.data.reg_date
        })
        .catch((err) => {
          if (err.message.indexOf('Network Error') > -1) {
            alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
          }
        })
      }
    },

    fnList() {

      delete this.requestBody.groupCode
      this.$router.push({
          path: './list',
          query: this.requestBody
        }
      )
    },

    fnView(groupCode) {
      this.requestBody.groupCode = groupCode
      this.$router.push({
          path: './detail',
          query: this.requestBody
        }
      )
    },

    async fnSave() {

      if(this.groupCode === '' || this.groupCode === undefined) {
        alert("그룹코드를 입력해주세요.")
        return;
      }

      if(this.groupName === '' || this.groupName === undefined) {
        alert("그룹코드명을 입력해주세요.")
        return;
      }

      if(this.useYn === '' || this.useYn === undefined) {
        alert("사용여부를 입력해주세요.")
        return;
      }

      let dupCheck = false;

      let apiUrl = this.$serverUrl + '/codegroups'
      this.form = {
        "group_code": this.groupCode.toUpperCase(),
        "group_name": this.groupName,
        "use_yn": this.useYn,
      }

      if (this.regDate === undefined || this.regDate === '') {

        await this.$axios.get(apiUrl + "/check/" + this.groupCode.toUpperCase() , this.form)
          .then((res) => {
            dupCheck = res.data
          })
          .catch((err) => {
            if (err.message.indexOf('Network Error') > -1) {
              alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
            }
          })
      }
      
      if(dupCheck) {
        alert("이미 존재하는 그룹코드 입니다.\n다른 그룹코드를 입력하세요.")
        return
      }
      
      if(!confirm('저장하시겠습니까?')) return

      if (this.regDate === undefined || this.regDate === '') {
        //INSERT
        this.$axios.post(apiUrl, this.form)
          .then((res) => {
            alert('정상적으로 저장되었습니다.')
            this.fnView(res.data.group_code);
          })
          .catch((err) => {
            if (err.message.indexOf('Network Error') > -1) {
              alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
            }
          })

      } else {
        //UPDATE
        this.$axios.patch(apiUrl + "/" + this.groupCode.toUpperCase(), this.form)
          .then((res) => {
            alert('정상적으로 저장되었습니다.')
            this.fnView(res.data.group_code);
          })
          .catch((err) => {
            if (err.message.indexOf('Network Error') > -1) {
              alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
            }
          })
      }
    },
  }
}
</script>

기존 게시판과 유사하게 등록과 수정을 동시에 처리할 수 있도록 하였다.

 

3. 공통코드 그룹 상세

  CodeGroupDetail.vue 파일

<template>
  <div class="board-detail">
    <div class="common-buttons">
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnUpdate">수정</button>&nbsp;
      <button type="button" class="w3-button w3-round w3-red" v-on:click="fnDelete">삭제</button>&nbsp;
      <button type="button" class="w3-button w3-round w3-gray" v-on:click="fnList">목록</button>
    </div>
    <div class="board-content">
      <h3>그룹코드 : {{ groupCode }}</h3>
      <div>
        그룹코드명 : <strong class="w3-large">{{ groupName }}</strong>
      </div>
      <div>
        사용여부 : {{ useYn }}
      </div>
    </div>
    <div class="board-content">
      등록일시 : <span>{{ regDate }}</span>
    </div>
    <div class="common-buttons">
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnUpdate">수정</button>&nbsp;
      <button type="button" class="w3-button w3-round w3-red" v-on:click="fnDelete">삭제</button>&nbsp;
      <button type="button" class="w3-button w3-round w3-gray" v-on:click="fnList">목록</button>
    </div>
  </div>
</template>


<script>
export default {

  data() {
    return {
      requestBody : this.$route.query,
      groupCode : this.$route.query.groupCode,

      groupName : '',
      useYn : '',
      regDate : '',
    }
  }, 
  mounted() {
    this.fnGetView()
  },
  computed() {

  },

  methods: {
    fnGetView() {
      this.$axios.get(this.$serverUrl + '/codegroups/' + this.groupCode, {
        params : this.requestBody,
      }).then((res) => {
        console.log(res.data)
        this.groupName = res.data.group_name
        this.useYn = res.data.use_yn
        this.regDate = res.data.reg_date
      })
      .catch((err) => {
        if (err.message.indexOf('Network Error') > -1) {
          alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
        }
      })
    },

    fnList() {

      delete this.requestBody.groupCode
      this.$router.push({
          path: './list',
          query: this.requestBody
        }
      )
    },

    fnUpdate() {

      this.$router.push({
          path: './write',
          query: this.requestBody
        }
      )
    },

    fnDelete() {
      if(!confirm('삭제하시겠습니까?')) return

      this.$axios.delete(this.$serverUrl + '/codegroups/' + this.groupCode, {})
        .then(() => {
          alert('정상적으로 삭제되었습니다.')
          
          this.fnList();
        })
        .catch((err) => {
            console.log(err)
        })
    },
  }
}
</script>

이전 장에서 설명했지만 여기서 삭제는 실제 데이터 삭제가 아니고 사용여부만 Y로 변경된다.

이렇게 페이지를 생성한 뒤에 라우터에 추가를 하고 메뉴도 추가하자.

 

4. code.js 라우터

   src/router/code.js 파일을 추가하고 아래와 같이 작성한다. 

   여기서 부터는 beforeEnter를 바로 적용하였다. 

import CodeGroupList from '@/views/code/CodeGroupList.vue'
import CodeGroupDetail from '@/views/code/CodeGroupDetail.vue'
import CodeGroupWrite  from '@/views/code/CodeGroupWrite.vue'

import axios from "@/util/axios"

export const CodeRouters = [
  {
    path: '/codegroup/list',
    name: 'CodeGroupList',
    component: CodeGroupList,
    beforeEnter: axios.requireAuth()
  },
  {
    path: '/codegroup/detail',
    name: 'CodeGroupDetail',
    component: CodeGroupDetail,
    beforeEnter: axios.requireAuth()
  },
  {
    path: '/codegroup/write',
    name: 'CodeGroupWrite',
    component: CodeGroupWrite,
    beforeEnter: axios.requireAuth()
  },
]

 

 

5. routers.js 에 추가 

   src/router/routers.js 파일에 아래와 같이 추가한다.

import { HomeRouters } from './home.js'
import { BoardRouters } from './board.js'
import { CodeRouters } from './code.js'	// 추가됨

const routes = [
  ...HomeRouters,
  ...BoardRouters,
  ...CodeRouters,	// 추가됨
]

export default routes

 

6. 메뉴바에 추가

  components/common/MenuBar.vue 파일에 아래와 같이 추가한다.

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/board/list">게시판</router-link> |
    <router-link to="/codegroup/list">코드그룹</router-link> //  추가됨
  </div>
</template>

<script>
export default {
  name: 'MenuBar'
}
</script>

 

 

작성이 완료되었다면 로그인하고 메뉴로 접근해보자. 

beforeEnter 가 처리되어 있어서 로그인 이후에 접근이 가능하다.

 

테스트를 위해서 임시로 데이터를 생성 시킨 뒤에 화면 접속을 해보면 좋을 거 같다.

 

이번 장까지는 일단 그룹코드만 단독으로 처리하였다.

다음 장에서는 상세코드에 대한 상세와 그룹코드와의 연계까지 진행하겠다.