hubez-admin/frontend/src/modules/custMgt/components/MemoTotalPop.vue

<template>
	<!-- <div class="wrap bg-wrap"> -->
	<div>
		<div class="dimmed memoTotal" @click="memoTotalModalClose();"></div>
		<div class="popup-wrap memoTotal">
			<!-- 수정 확인 -->
			<div class="popup memoTotal popup_form b-popup">
				<div class="pop-head">
					<h3 class="pop-tit">전체 메모보기</h3>
          <!-- 총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건 -->
				</div>
          <div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건</div>
					<table class="table-c">
            <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"
            ></custom-grid>

					</table>
        <div class="popup-btn2">
          <button class="btn-default" @click="memoTotalModalClose();">닫기</button>
        </div>

			</div>

        <common-modal ref="commmonMemoModal"></common-modal>
        </div>
    </div>
</template>

<script>
import customGrid from "@/components/CustomGrid";
import api from '@/service/api';
import custMgtApi from "../service/custMgtApi.js";
import commonModal from "../components/commonModal";

class CustomATagRenderer {
    constructor(props) {
        this.props = props;
        // const el = document.createElement('a');
        const el = document.createElement('button');
        el.href = 'javascript:void(0);';
        //el.className = 'btn_text';
        el.className = 'button white btn-a';
        //el.innerText= String(props.colValue)
        el.innerText= String('삭제')
        this.el = el;
    }

    getElement() {
        return this.el;
    }

    addEvent(selEl) {
        selEl.addEventListener("click", () => {
            const { callback } = this.props["cgrido" + this.props.colName].options;
            callback(this.props);
        });
    }
}

export default {
    name: "memoTatalListPop",
    model: {
		//prop: 'sendData',
		//event: 'event-data'
	},
	//props: ['sendData'],
    // props: [],
	data(){
    return{
        memorow: {},
        totalItems: 0,
        // 테이블 리스트 데이터
        perPageCnt: 5,
        userId: '',
        seqNo:'',

        grid: {
				url: '/api/v1/bo/custMgt/allMemoList',
				pagePerRows: 5,
				pagination: true,           
				isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
				initialRequest: false,
				addCls: 'box_OFvis',

				columns: [                       
					{ name: 'memo', header: '내용', align: 'center', cls:'memo'},
					{ name: 'register', header: '작성자', align: 'center'},
					{ name: 'regDt', header: '작성일', align: 'center'},
					{ name: 'delete', header: '삭제', align: 'center', renderer: {
              type: CustomATagRenderer
                  ,options: {
                      callback: this.deleteMemo,
                  }
              }
          },
          { name: 'seqNo', header: '내용일련번호', align: 'center', hidden: true},
				],
				noDataStr: '검색 결과가 없습니다.',
				params: {
                    userId: '',
                }    
			},
		    
        }
    },
    components:{
        customGrid: customGrid,
      commonModal,
    },
    created(){

    },  
  mounted() {
    // 달력 세팅

    let page = 1;
    // 페이지 정보 및 검색 조건
    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];

    // store에 저장된 페이지 정보 및 검색 조건을 불러오기
    let isKeep = false;
    if (getCondition) {
      this.grid.pagePerRows = getCondition.perPage;
      this.grid.params = getCondition.params;
      page = getCondition.page;
      isKeep = true;
    }
    this.search(isKeep);
  },
  methods :{
        search: function(isKeep) {
            this.$refs.table.search(this.grid.params, isKeep);
            this.sendStoreData();
        },
        sendStoreData: function() {
            const getP_memo = this.$refs.table.getPagination();
            this.$store.commit('searchcondition/updateSearchCondition', {
                page: getP_memo._currentPage,        
		            perPage: this.perPageCnt,
                params: this.grid.params
            });

            const getCondition_memo = this.$store.getters['searchcondition/getSearchCondition'];
        },
        //메모전체 모달 Open
        async memoTotalModalOpen(props){			
            this.grid.params.userId = props.adminId;
            this.userId = props.adminId;


            // 메모 모달팝업 오픈
            var dimmed = document.getElementsByClassName('memoTotal');
			      for(var i = 0; i < dimmed.length; i++){
			        dimmed[i].style.display = 'block';
            }

          let page = 1;
          // 페이지 정보 및 검색 조건
          const getCondition = this.$store.getters['searchcondition/getSearchCondition'];

          // store에 저장된 페이지 정보 및 검색 조건을 불러오기
          let isKeep = false;
          if (getCondition) {
            this.grid.pagePerRows = getCondition.perPage;
            this.grid.params = getCondition.params;
            page = getCondition.page;
            isKeep = true;
          }
          this.search(isKeep);
			
		},
        //메모전체 모달 Close
    memoTotalModalClose(){
      var dimmed = document.getElementsByClassName('memoTotal');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}
      this.$parent.memberDetail(this.userId);
            //this.formReset();
    },
    toComplete(){
        this.row.serviceId = this.adminId;
        this.memoTotalModalClose();
        this.$parent.memberDetail(this.adminId);
    },
    deleteMemo: function(props) {
      this.seqNo=props.seqNo;
      this.memorow = {}
      this.memorow.title = '메모';
      this.memorow.msg1 = '삭제 하시겠습니까?';
      this.$refs.commmonMemoModal.confirmModalOpenMemo(this.memorow);
    },
    async deleteMemoConfirm(target){
      try {
          const response = await custMgtApi.deleteMemo(target);
          const result = response.data;
          if (result != null && result.retCode == "0000") {
            // 그리드 reload
                    // 리스트 그리드 오픈
            let page = 1;
            // 페이지 정보 및 검색 조건
            const getCondition = this.$store.getters['searchcondition/getSearchCondition'];

          // store에 저장된 페이지 정보 및 검색 조건을 불러오기
            let isKeep = false;
            if (getCondition) {
                this.grid.pagePerRows = getCondition.perPage;
                this.grid.params = getCondition.params;
                page = getCondition.page;
                isKeep = true;
            }
            this.search(isKeep);
          } else {
            this.memorow.title = '메모 삭제';
            this.memorow.msg1 = '실패 하였습니다.';
            this.$refs.commmonMemoModal.alertModalOpen(this.memorow);
          }
        } catch (error) {
          this.memorow.title = '메모 삭제';
          this.memorow.msg1 = '실패 하였습니다.';
          this.$refs.commmonMemoModal.alertModalOpen(this.memorow);
        }
    },
    confirmCalbackFnc(props){
      if(props.result){
        this.memorow = {}
        this.memorow.seqNo = this.seqNo;
        this.memorow.userId = this.userId;
        this.deleteMemoConfirm(this.memorow);
      }        
    },
        
	}
}
</script>