hubez-admin/frontend/src/modules/sysMgt/views/AuthList.vue

<template>
  <div class="contents">
    <div class="contents_wrap">
      <div class="top_wrap">
        <h3 class="title">권한 관리</h3>
        <p class="breadcrumb">시스템관리 &gt; 권한 관리</p>
      </div>
      <div class="info">
        <div class="count">총 <span>{{ totalCnt }}</span>건</div>
        <div class="button_group">
          <button type="button" class="button blue add" @click="insertAuth()">권한 추가</button>
        </div>
      </div>
      <div class="table">
        <table>
          <colgroup>
            <col width="10%"/>
            <col width="20%"/>
            <col width="20%"/>
            <col width="15%"/>
            <col width="20%"/>
            <col width="15%"/>
          </colgroup>
          <thead>
          <tr>
            <th>NO</th>
            <th>코드</th>
            <th>권한명</th>
            <th>상태</th>
            <th>등록일</th>
            <th></th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(option, i) in list" v-bind:key="i">
            <td>{{ option.no }}</td>
            <td>{{ option.authCd }}</td>
            <td>{{ option.authNm }}</td>
            <td>{{ option.authStat }}</td>
            <td>{{ option.regDt }}</td>
            <td v-if="option.authCd === '1001' || option.authCd === '1002'" class="two_btn_group">
            </td>
            <td v-else class="two_btn_group">
              <button type="button" class="button grey" @click="updateAuth(option.authCd)">수정</button>
              <button type="button" class="button white delete" @click="authDelete(option.authCd)">삭제</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <common-modal ref="commmonModal"></common-modal>
    </div>
  </div>
</template>

<script>
import sysMgtApi from "../service/sysMgtApi.js";
import commonModal from "@/components/modal/commonModal";

export default {
  name: 'authList',
  data() {
    return {
      row: {},
      list: [],
      totalCnt: '',
    };
  },
  components: {
    commonModal,
  },
  created() {
    this.getAuthList();
  },
  destroyed() {

  },
  mounted() {

  },
  methods: {
    async getAuthList() {
      console.log('getAuthList Start');
      //this.row.serviceId = serviceId;
      try {
        const response = await sysMgtApi.authList(this.row);
        const result = response.data;
        console.log(result);
        if (result != null && result.retCode == "0000") {
          this.list = result.data.list;
          this.totalCnt = result.data.list.length;
        } else {
          this.row.title = '권한 관리';
          this.row.msg1 = '조회정보가 없습니다.'
          this.$refs.commmonModal.alertModalOpen(this.row);
        }
      } catch (err) {
        this.row.title = '권한 관리';
        this.row.msg1 = '실패 하였습니다.'
        this.$refs.commmonModal.alertModalOpen(this.row);
      }
    },
    insertAuth() {
      //console.log("권한추가 페이지 이동");
      this.$router.push({name: 'authAdd'});
    },
    updateAuth(target) {
      //console.log("수정페이지로 이동:"+target);
      this.$router.push({name: 'authModify', params: {targetAuthCd: target}});
    },
    authDelete(target) {
      this.row.authCd = target;
      this.row.title = '권한 관리';
      this.row.msg1 = '삭제 하시겠습니까?'
      this.$refs.commmonModal.confirmModalOpen2(this.row);
    },
    async deleteAuth() {
      //console.log("삭제처리:"+target);
      //this.row.authCd = target;
      try {
        let response = await sysMgtApi.deleteAuth(this.row);
        const result = response.data;
        if (result != null && result.retCode == "0000") {
          this.getAuthList();
          return;
        } else {
          this.row = {}
          this.row.title = '권한 관리';
          this.row.msg1 = '실패 하였습니다.';
          this.$refs.commmonModal.alertModalOpen(this.row);
        }
      } catch (err) {
        this.row = {}
        this.row.title = '권한 관리';
        this.row.msg1 = '실패 하였습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
      }
    },
    confirmCalbackFnc(props) {
      console.log(props)
      if (props.result) {
        this.deleteAuth();
      }
    },
  }
};
</script>