하석형 하석형 05-14
250514 하석형 부서관리/메뉴관리 기능 동작 시 작성내역 감지 처리
@34b2550fa782efa35716fd87a2aa8c6d76e96522
client/views/pages/adm/departmentManagement/DepartmentManagement.vue
--- client/views/pages/adm/departmentManagement/DepartmentManagement.vue
+++ client/views/pages/adm/departmentManagement/DepartmentManagement.vue
@@ -185,6 +185,7 @@
 </template>
 
 <script>
+import _ from "lodash";
 import draggable from "vuedraggable";
 import Hierachy from "../../../component/hierachy/HierachyDraggable.vue";
 import ListTable from "../../../component/table/ListTable.vue";
@@ -232,9 +233,9 @@
       selectedDeptId: null, // 선택된 부서
       selectedAuthrt: "", // 부서 권한
       newDept: {}, // 신규 부서 등록
-      viewDept: {}, // 사용자에게 보여질 부서정보
+      viewDept: { authrtList:[ { authrtCd: "" } ] }, // 사용자에게 보여질 부서정보
+      originDept: { authrtList:[ { authrtCd: "" } ] }, // 변경전 부서 정보
       searchText: "", // 사용자 정보 검색
-      originDept: null, // 변경전 부서 정보
 
       submitStts: true,
       topBoxHeight: 0, 
@@ -276,6 +277,7 @@
           this.fnReset(); // 초기화
           this.mblTelnoSplit(res.data.data.deptMbr);
           this.viewDept = res.data.data.dept; // 부서 정보
+          this.originDept = _.cloneDeep(this.viewDept); // 변경전 부서
           this.deptMbr = res.data.data.deptMbr; // 부서에 등록된 사용자 목록
           this.selectedDeptId = this.viewDept.deptId;
           if (this.viewDept.authrtList.length > 0) {
@@ -295,11 +297,20 @@
     },
     // 부서 선택
     fnViewDetail(deptId) {
+      // 내용이 변경된 경우
+      if(this.isChanged()) {
+        return;
+      }
       this.selectedDeptId = deptId;
       this.findByDept();
     },
     // 저장
     async fnSave() {
+      // 변경전 코드와 비교
+      if(_.isEqual(this.viewDept, this.originDept)) {
+        alert("변경할 내용이 없습니다.");
+        return false;
+      }
       // 유효성 검사
       if (this.validation() == false) {
         return false;
@@ -356,6 +367,7 @@
         alert(res.data.message);
         if (res.status == 200) {
           this.fnReset(); // 초기화
+          this.originDept = _.cloneDeep(this.newDept); // 변경전 부서
           this.viewDept = {};
           this.findAll(); // 목록 재조회
         }
@@ -370,12 +382,17 @@
     },
     // 최상위 신규 객체 생성
     topAdd() {
-      if (this.selectedDeptId != null) {
-        if (!confirm("작성 중인 부서정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
-          return;
-        }
+      // 내용이 변경된 경우
+      if(this.isChanged()) {
+        return;
       }
+      // if (this.selectedDeptId != null) {
+      //   if (!confirm("작성 중인 부서정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
+      //     return;
+      //   }
+      // }
       this.fnReset(); // 초기화
+      this.originDept = _.cloneDeep(this.newDept); // 변경전 부서
       this.submitStts = true;
     },
     // 하위 신규 객체 생성
@@ -387,25 +404,29 @@
         alert("상위 부서를 지정하세요.");
         return;
       } else {
-        if (!confirm("작성 중인 부서정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
+        // 내용이 변경된 경우
+        if(this.isChanged()) {
           return;
         }
+        // if (!confirm("작성 중인 부서정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
+        //   return;
+        // }
       }
-      const upDeptId = this.viewDept.deptId; // 상위 부서 아이디
-      const upDeptNm = this.viewDept.deptNm; // 상위 부서명
+      const upDeptId = this.originDept.deptId; // 상위 부서 아이디
+      const upDeptNm = this.originDept.deptNm; // 상위 부서명
       this.fnReset(); // 초기화
       this.viewDept.upDeptId = upDeptId;
       this.viewDept.upDeptNm = upDeptNm;
+      this.originDept = _.cloneDeep(this.viewDept); // 변경전 부서
       this.submitStts = true;
     },
     // 초기화
     fnReset() {
-      this.viewDept = JSON.parse(JSON.stringify(this.newDept)); // 신규 객체 생성
+      this.viewDept = _.cloneDeep(this.newDept);
       this.selectedDeptId = null; // 선택된 부서 객체 아이디 초기화
       this.selectedAuthrt = "";
       this.mbrList = []; // 부서에 등록되지 않은 사용자 정보 초기화
       this.deptMbr = []; // 부서에 등록된 사용자 정보 초기화
-      this.originDept = this.viewDept.deptId; // null
       this.makeTbody();
       this.makeMbrTobdy();
     },
@@ -538,9 +559,15 @@
     // axios: 목록 수정
     async fnListUpdate() {
       try {
-        if (!confirm("부서 목록을 저장하시겠습니까?\n 작성 중인 부서정보는 저장되지 않습니다.")) {
-          return;
+        // 내용이 변경된 경우
+        if(!_.isEqual(this.viewDept, this.originDept)) {
+          if (!confirm("부서 목록을 저장하시겠습니까?\n 작성 중인 부서정보는 저장되지 않습니다.")) {
+            return;
+          }
         }
+        // if (!confirm("부서 목록을 저장하시겠습니까?\n 작성 중인 부서정보는 저장되지 않습니다.")) {
+        //   return;
+        // }
         const res = await updateListProc(this.deptList);
         alert(res.data.message);
         if (res.status == 200) {
@@ -572,6 +599,16 @@
         item["mblTelno"] = start + "-" + middle + "-" + end;
       }
     },
+
+    // 변경 감지
+    isChanged() {
+      if(!_.isEqual(this.viewDept, this.originDept) || this.selectedAuthrt != this.viewDept.authrtList[0]?.authrtCd) {
+        if (!confirm("작성 중인 부서정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
+          return true;
+        }
+      }
+      return false;
+    }
   },
   watch: {
     topBoxHeight() {
client/views/pages/adm/menuManagement/menuManagement/MenuManagement.vue
--- client/views/pages/adm/menuManagement/menuManagement/MenuManagement.vue
+++ client/views/pages/adm/menuManagement/menuManagement/MenuManagement.vue
@@ -175,6 +175,7 @@
 </template>
 
 <script>
+import _ from "lodash";
 import draggable from "vuedraggable";
 import Hierachy from "../../../../component/hierachy/HierachyDraggable.vue";
 // Api
@@ -209,6 +210,10 @@
         menuType: "",
         menuTypeCtgry: "",
       }, // 사용자에게 보여질 메뉴 목록
+      originMenu: {
+        menuType: "",
+        menuTypeCtgry: "",
+      }, // 변경 전 메뉴 목록
 
       selectedMenuId: null, // 선택된 메뉴
       codeList: [], // 메뉴 타입 목록
@@ -256,6 +261,10 @@
     },
     // 조회(상세)
     fnViewDetail(menuId) {
+      // 내용이 변경된 경우
+      if(this.isChanged()) {
+        return;
+      }
       this.selectedMenuId = menuId;
       const data = {
         menuId: menuId,
@@ -284,13 +293,18 @@
     },
     // 최상위 신규 객체 생성
     fnTopAdd() {
-      if (this.selectedMenuId != null) {
-        if (!confirm("작성 중인 메뉴정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
-          return;
-        }
+      // 내용이 변경된 경우
+      if(this.isChanged()) {
+        return;
       }
+      // if (this.selectedMenuId != null) {
+      //   if (!confirm("작성 중인 메뉴정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
+      //     return;
+      //   }
+      // }
       this.editMode = true;
-      this.viewMenu = JSON.parse(JSON.stringify(this.newMenu));
+      this.viewMenu = _.cloneDeep(this.newMenu);
+      this.originMenu = _.cloneDeep(this.viewMenu);
       this.selectedMenuId = this.viewMenu.deptId;
     },
     // 하위 신규 객체 생성
@@ -299,21 +313,25 @@
         alert("상위 메뉴를 지정해주세요.");
         return;
       } else {
-        if (!confirm("작성 중인 메뉴정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
+        // 내용이 변경된 경우
+        if(this.isChanged()) {
           return;
         }
+        // if (!confirm("작성 중인 메뉴정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
+        //   return;
+        // }
       }
-      const upMenuId = this.viewMenu.menuId;
-      const upMenuNm = this.viewMenu.menuNm;
-      this.viewMenu = JSON.parse(JSON.stringify(this.newMenu));
+      const upMenuId = this.originMenu.menuId;
+      const upMenuNm = this.originMenu.menuNm;
+      this.viewMenu = _.cloneDeep(this.newMenu);
       this.viewMenu.upMenuId = upMenuId;
       this.viewMenu.upMenuNm = upMenuNm;
+      this.originMenu = _.cloneDeep(this.viewMenu);
       this.selectedMenuId = null;
     },
 
     // 메뉴관리 유효성 검사
     valiadtion() {
-      console.log("this.viewMenu: ", this.viewMenu);
       // 메뉴명 입력 여부
       if (!this.viewMenu["menuNm"] || this.viewMenu["menuNm"].trim() === "") {
         alert("메뉴명을 입력하세요.");
@@ -424,6 +442,7 @@
           } else if (this.viewMenu.menuType == "conts") {
             this.ctgryList = this.contsTypeList;
           }
+          this.originMenu = _.cloneDeep(this.viewMenu); // 변경 전 메뉴 정보
         }
       } catch (error) {
         const errorData = error.response.data;
@@ -522,8 +541,11 @@
     // axios: 목록 수정
     async fnListUpdate() {
       try {
-        if (!confirm("메뉴 목록을 저장하시겠습니까?\n 작성 중인 메뉴정보는 저장되지 않습니다.")) {
-          return;
+        // 내용이 변경된 경우
+        if(!_.isEqual(this.viewMenu, this.originMenu)) {
+          if (!confirm("메뉴 목록을 저장하시겠습니까?\n 작성 중인 메뉴정보는 저장되지 않습니다.")) {
+            return;
+          }
         }
         const res = await updateListProc(this.menuList);
         alert(res.data.message);
@@ -557,6 +579,16 @@
         }
       });
     },
+
+    // 변경 감지
+    isChanged() {
+      if(!_.isEqual(this.viewMenu, this.originMenu)) {
+        if (!confirm("작성 중인 메뉴정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
+          return true;
+        }
+      }
+      return false;
+    }
   },
   watch: {
     "viewMenu.menuType"() {
client/views/pages/adm/preferences/commonCodeManagement/CommonCodeManagement.vue
--- client/views/pages/adm/preferences/commonCodeManagement/CommonCodeManagement.vue
+++ client/views/pages/adm/preferences/commonCodeManagement/CommonCodeManagement.vue
@@ -280,8 +280,8 @@
         //   return;
         // }
       }
-      const upCd = this.viewCode.cd;
-      const upCdNm = this.viewCode.cdNm;
+      const upCd = this.originCode.cd;
+      const upCdNm = this.originCode.cdNm;
       this.viewCode = _.cloneDeep(this.newCode);
       this.viewCode.upCd = upCd;
       this.viewCode.upCdNm = upCdNm;
@@ -310,8 +310,10 @@
     async fnListUpdate() {
       try {
         // 내용이 변경된 경우
-        if(this.isChanged()) {
-          return;
+        if(!_.isEqual(this.viewCode, this.originCode)) {
+          if (!confirm("공통코드 목록을 저장하시겠습니까?\n 작성 중인 공통코드정보는 저장되지 않습니다.")) {
+            return;
+          }
         }
         const res = await updateListProc(this.codeList);
         alert(res.data.message);
Add a comment
List