Commit @4f7bc2a0877db5ae0d587baa2c0f01d25aa038e9

박민혁 2024-01-25

240125 박민혁 모달창 수정

@4f7bc2a0877db5ae0d587baa2c0f01d25aa038e9

2c1d87f

4f7bc2a

client/views/common/commonPlugin.js

--- client/views/common/commonPlugin.js

+++ client/views/common/commonPlugin.js


  * 
  * 공통 처리 플러그인
  */
+import Vue from "vue";
+
 export default{    
     install(Vue){ 
 

4f7bc2a

client/views/component/AlertModal.vue (added)

+++ client/views/component/AlertModal.vue

...	...	@@ -0,0 +1,110 @@
	1	+<template>
	2	+ <div v-show="isModalOpen" class="modal-wrapper">
	3	+ <div class="modal-container small-modal">
	4	+ <div class="modal-title text-ct">
	5	+ <h2>{{title}}</h2>
	6	+ </div>
	7	+ <div class="modal-content-monthly">
	8	+ <p class="alert-write text-ct" v-html="message">
	9	+ </p>
	10	+ </div>
	11	+ <div class="modal-end flex justify-center">
	12	+ <button class="gray-btn large-btn flex50" id="confirmCancle" @click="closeModal" v-show="confirmAt">취소</button>
	13	+ <button class="blue-btn large-btn flex50" id="confirmOk" @click="closeModal" @keyup.enter="closeModal">확인</button>
	14	+ </div>
	15	+ </div>
	16	+ </div>
	17	+</template>
	18	+
	19	+<script>
	20	+
	21	+export default {
	22	+ props: {
	23	+ title : {
	24	+ type : String,
	25	+ default : '모달 제목'
	26	+ },
	27	+ message : {
	28	+ type : String,
	29	+ default : '경고 메세지를 입력해주세요. <br /> 삭제,수정,추가 등등'
	30	+ },
	31	+ },
	32	+ data() {
	33	+ return {
	34	+ isModalOpen: false,
	35	+ activeTab: 'tab1',
	36	+ modalType: 'tab-modal',
	37	+ title : this.title,
	38	+ message : this.message,
	39	+ confirmAt : false
	40	+ }
	41	+ },
	42	+ methods: {
	43	+ // 탭 변경
	44	+ showTab: function (tabName) {
	45	+ this.activeTab = tabName;
	46	+ },
	47	+
	48	+ // 닫기
	49	+ closeModal: function(){
	50	+ this.isModalOpen = false;
	51	+ },
	52	+
	53	+ // 모달 호출
	54	+ showModal : function(){
	55	+
	56	+ this.confirmAt = false;
	57	+ this.isModalOpen = true;
	58	+ document.getElementById("confirmOk").focus()
	59	+ },
	60	+
	61	+ // confirm 호출
	62	+ showConfirm : async function(){
	63	+ this.confirmAt = true;
	64	+ this.isModalOpen = true;
	65	+ document.getElementById("confirmOk").focus()
	66	+ const promise = new Promise((resolve, reject) => {
	67	+ document.getElementById("confirmCancle").addEventListener("click", async () => {
	68	+ resolve('cancle')
	69	+ });
	70	+
	71	+ document.getElementById("confirmOk").addEventListener("click", async () => {
	72	+ resolve('ok')
	73	+ });
	74	+ });
	75	+
	76	+ return promise.then(
	77	+ (id) => {
	78	+ if(id == 'cancle'){
	79	+ return false;
	80	+ }else if(id =='ok'){
	81	+ return true;
	82	+ }
	83	+
	84	+ }
	85	+ );
	86	+ },
	87	+
	88	+ setTitle : function(Title){
	89	+ this.title = Title;
	90	+ },
	91	+
	92	+ setMessage : function(message){
	93	+ this.message = message;
	94	+ },
	95	+
	96	+ },
	97	+ watch: {
	98	+
	99	+ },
	100	+ computed: {
	101	+
	102	+ },
	103	+ components: {
	104	+
	105	+ },
	106	+ mounted() {
	107	+ console.log('main mounted');
	108	+ }
	109	+}
	110	+</script>(No newline at end of file)

2c1d87f

4f7bc2a

client/views/index.js

--- client/views/index.js

+++ client/views/index.js


 import AppRouter from "./pages/AppRouter.js";
 import App from "./pages/App.vue";
 import cmmnPlugin from './common/commonPlugin.js';
-import { quillEditor } from 'vue3-quill';
 
 
 
 const app = createApp(App);
-app.use(cmmnPlugin)
-app.use(quillEditor)
-app.use(AppRouter)
+app.use(cmmnPlugin);
+app.use(AppRouter);
 app.mount("#root");
 

2c1d87f

4f7bc2a

client/views/layout/TopMenu.vue

--- client/views/layout/TopMenu.vue

+++ client/views/layout/TopMenu.vue


                 // subMenu가 존재하는 경우에만 길이를 반환
                 return menu.subMenu ? menu.subMenu.length : 0;
             }));
-            return maxSubItems * 48; // 48px는 각 메뉴 항목의 높이로 가정
+            return maxSubItems * 50; // 48px는 각 메뉴 항목의 높이로 가정
         }
     },
     components: {

2c1d87f

4f7bc2a

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


 <template>
    <div v-cloak :class="layoutType === 'side' ? 'dashboard-wrap' : 'layout-wrap'">
-      <Header v-show="isLogin" :className="layoutType"  @updateIsLogin="isLogin = $event"/>
+      <Header v-show="isLogin" :className="layoutType" @updateIsLogin="isLogin = $event" />
       <SideMenu v-show="isLogin" v-if="layoutType === 'side'" />
       <TopMenu v-show="isLogin" v-else />
       <div class="main">

          <router-view @updateIsLogin="isLogin = $event" />
       </div>
    </div>
+   <AlertModal id="cmmnAlert" ref="Alert"></AlertModal>
 </template>
 
 <script>

 import SideMenu from '../layout/SideMenu.vue';
 import TopMenu from '../layout/TopMenu.vue';
 import PageNavigation from '../component/PageNavigation.vue';
+import AlertModal from '../component/AlertModal.vue';
 const App = {
    data: () => {
       return {
          // side혹은 top 둘중 한개 타입
          layoutType: "top",
-         isLogin:false,
+         isLogin: true,
       }
    },
    methods: {

       },
    },
    watch: {
-
    },
    computed: {
-
    },
    components: {
       'Header': Header,
       'SideMenu': SideMenu,
       'TopMenu': TopMenu,
       'PageNavigation': PageNavigation,
+      'AlertModal' : AlertModal,
    },
-   mounted: () => {
+   mounted: function() {
       console.log('Vue mounted');
+      this.$setAlertRef(this.$refs.Alert);
    }
 }
 

2c1d87f

4f7bc2a

client/views/pages/dbManagement/DbSchema.vue

--- client/views/pages/dbManagement/DbSchema.vue

+++ client/views/pages/dbManagement/DbSchema.vue


 <template>
-    <!-- 경고 모달창 -->
-    <div v-show="isAlertModalOpen" class="modal-wrapper">
-        <div class="modal-container alert-modal">
-            <div class="modal-title text-ct">
-                <h2>{{ alertTitle }}</h2>
-            </div>
-            <div class="modal-content-monthly">
-                <p class="alert-write text-ct"> {{ alertMessage }} </p>
-            </div>
-            <div class="modal-end flex justify-center">
-                <button class="blue-btn large-btn flex50" @click="closeAlertModal">확인</button>
-            </div>
-        </div>
-    </div>
     <div class="container">
         <div class="page-titleZone flex justify-between">
             <p class="main-title">진단대상관리 > 진단대상DB관리</p>

             schemaPerPage: 10,
             schemaTotalCount: 0,
             schemaIndex: 0,
-            // 경고 모달용
-            alertMessage: '',
-            alertTitle: '',
-            isAlertModalOpen: false,
         };
     },
     methods: {

         handleSchemaClick(index) {
             this.selectedSchema = index;
         },
-        // 경고 - alert 
-        openAlertModal:function(title, message){
-            this.alertTitle = title;
-            this.alertMessage = message;
-            this.isAlertModalOpen=true;
-        },
-        closeAlertModal:function(){
-            this.isAlertModalOpen=false;
-        },
-
         insertDbData: function () {
             const vm = this;
             const inputData = vm.dbInput;
 
             // 유효성 검사
             if (
-                !this.dbInput.dbms_name ||
-                !this.dbInput.dbms_type ||
-                !this.dbInput.dbms_url_port ||
-                !this.dbInput.dbms_drive_nm ||
-                !this.dbInput.dbms_connect_id ||
-                !this.dbInput.dbms_connect_pw ||
-                !this.dbInput.dbms_ag_nm ||
-                !this.dbInput.dbms_system_nm
+                !vm.dbInput.dbms_name ||
+                !vm.dbInput.dbms_type ||
+                !vm.dbInput.dbms_url_port ||
+                !vm.dbInput.dbms_drive_nm ||
+                !vm.dbInput.dbms_connect_id ||
+                !vm.dbInput.dbms_connect_pw ||
+                !vm.dbInput.dbms_ag_nm ||
+                !vm.dbInput.dbms_system_nm
             ) {
-                if (!this.dbInput.dbms_name) {
-                    this.openAlertModal('error', 'DBMS명은 반드시 입력해야 합니다.');
-                    this.$refs.dbms_name.focus();
-                } else if (!this.dbInput.dbms_type) {
-                    this.openAlertModal('error', 'DBMS유형은 반드시 선택해야 합니다.');
-                    this.$refs.dbms_type.focus();
-                } else if (!this.dbInput.dbms_url_port) {
-                    this.openAlertModal('error', '연결 URL은 반드시 입력해야 합니다.');
-                    this.$refs.dbms_url_port.focus();
-                } else if (!this.dbInput.dbms_drive_nm) {
-                    this.openAlertModal('error', '드라이버명은 반드시 입력해야 합니다.');
-                    this.$refs.dbms_drive_nm.focus();
+                if (!vm.dbInput.dbms_name) {
+                    vm.$showAlert('error', 'DBMS명은 반드시 입력해야 합니다.');
+                    vm.$refs.dbms_name.focus();
+                } else if (!vm.dbInput.dbms_type) {
+                    vm.$showAlert('error', 'DBMS유형은 반드시 선택해야 합니다.');
+                    vm.$refs.dbms_type.focus();
+                } else if (!vm.dbInput.dbms_url_port) {
+                    vm.$showAlert('error', '연결 URL은 반드시 입력해야 합니다.');
+                    vm.$refs.dbms_url_port.focus();
+                } else if (!vm.dbInput.dbms_drive_nm) {
+                    vm.$showAlert('error', '드라이버명은 반드시 입력해야 합니다.');
+                    vm.$refs.dbms_drive_nm.focus();
                 } else if (!this.dbInput.dbms_connect_id) {
-                    this.openAlertModal('error', 'DB접속계정ID는 반드시 입력해야 합니다.');
-                    this.$refs.dbms_connect_id.focus();
-                } else if (!this.dbInput.dbms_connect_pw) {
-                    this.openAlertModal('error', 'DB접속계정암호는 반드시 입력해야 합니다.');
-                    this.$refs.dbms_connect_pw.focus();
-                } else if (!this.dbInput.dbms_ag_nm) {
-                    this.openAlertModal('error', '기관명은 반드시 입력해야 합니다.');
-                    this.$refs.dbms_ag_nm.focus();
-                } else if (!this.dbInput.dbms_system_nm) {
-                    this.openAlertModal('error', '정보시스템명은 반드시 입력해야 합니다.');
-                    this.$refs.dbms_system_nm.focus();
+                    vm.$showAlert('error', 'DB접속계정ID는 반드시 입력해야 합니다.');
+                    vm.$refs.dbms_connect_id.focus();
+                } else if (!vm.dbInput.dbms_connect_pw) {
+                    vm.$showAlert('error', 'DB접속계정암호는 반드시 입력해야 합니다.');
+                    vm.$refs.dbms_connect_pw.focus();
+                } else if (!vm.dbInput.dbms_ag_nm) {
+                    vm.$showAlert('error', '기관명은 반드시 입력해야 합니다.');
+                    vm.$refs.dbms_ag_nm.focus();
+                } else if (!vm.dbInput.dbms_system_nm) {
+                    vm.$showAlert('error', '정보시스템명은 반드시 입력해야 합니다.');
+                    vm.$refs.dbms_system_nm.focus();
                 }
 
                 return;

                 })
                 .catch(function (error) {
                     console.log('insertDbData - error : ', error);
-                    this.openAlertModal('error', 'insertDbData 오류');
+                    vm.$showAlert('error', 'insertDbData 오류');
                 });
         },
         selectDbList: function () {

                     vm.dbIdx = vm.dbListCount - (vm.dbListSearch.currentPage - 1) * vm.dbListSearch.perPage;
                 })
                 .catch(function (error) {
-                    vm.openAlertModal('error', 'selectDbList - error');
-                    vm.openAlertModal('error', 'selectDbList 오류');
+                    console.log('error', 'selectDbList - error');
+                    vm.$showAlert('error', 'selectDbList 오류');
                 });
         },
 

             const vm = this;
 
             if (vm.selectedDb == null) {
-                vm.openAlertModal('error', '접속 테스트할 DB를 선택해주세요!');
+                vm.$showAlert('error', '접속 테스트할 DB를 선택해주세요!');
                 return;
             }
 

                 .then(function (response) {
                     console.log(response.data);
                     if (response.data == 1) {
-                        vm.openAlertModal('response', 'DB 접속이 성공되었습니다!');
+                        vm.$showAlert('response', 'DB 접속이 성공되었습니다!');
                         vm.selectDbList();
                     } else {
-                        vm.openAlertModal('error', '접속이 실패했습니다! DB 정보를 다시 확인해주세요!');
+                        vm.$showAlert('error', '접속이 실패했습니다! DB 정보를 다시 확인해주세요!');
                     }
                 })
                 .catch(function (error) {
                     console.log('selectDbList - error : ', error);
-                    vm.openAlertModal('error', '접속이 실패했습니다! DB 정보를 다시 확인해주세요');
+                    vm.$showAlert('error', '접속이 실패했습니다! DB 정보를 다시 확인해주세요');
                     vm.selectDbList();
                 });
         },

             const vm = this;
 
             if (vm.selectedDb == null) {
-                vm.openAlertModal('error', '스키마를 수집할 DB를 선택해주세요!');
+                vm.$showAlert('error', '스키마를 수집할 DB를 선택해주세요!');
                 return;
             }
             if (vm.dbList[vm.selectedDb].dbms_connect != 1) {
-                vm.openAlertModal('error', '접속 테스트가 완료된 DB를 선택해주세요!');
+                vm.$showAlert('error', '접속 테스트가 완료된 DB를 선택해주세요!');
                 return;
             }
 

                 .then(function (response) {
                     console.log(response.data);
                     if (response.data == 1) {
-                        vm.openAlertModal('response', '스키마 수집이 성공되었습니다!');
+                        vm.$showAlert('response', '스키마 수집이 성공되었습니다!');
                         vm.selectDbList();
                     }
                 })
                 .catch(function (error) {
                     console.log('selectDbList - error : ', error);
-                    vm.openAlertModal('error', '스키마 수집이 실패했습니다! DB 정보를 다시 확인해주세요');
+                    vm.$showAlert('error', '스키마 수집이 실패했습니다! DB 정보를 다시 확인해주세요');
                 });
         },
 

             const vm = this;
 
             if (vm.selectedDb == null) {
-                vm.openAlertModal('error', '삭제할 DB를 선택해주세요!');
+                vm.$showAlert('error', '삭제할 DB를 선택해주세요!');
                 return;
             }
 

                 data: vm.dbList[vm.selectedDb],
             })
                 .then(function (response) {
-                    vm.openAlertModal('response', 'DB가 삭제되었습니다!');
+                    vm.$showAlert('response', 'DB가 삭제되었습니다!');
                     vm.selectDbList();
                 })
                 .catch(function (error) {

             const vm = this;
 
             if (vm.selectedDb == null) {
-                vm.openAlertModal('error', '수정할 DB를 선택해주세요!');
+                vm.$showAlert('error', '수정할 DB를 선택해주세요!');
                 return;
             }
 

                 data: vm.dbList[vm.selectedDb],
             })
                 .then(function (response) {
-                    vm.openAlertModal('response', 'DB가 수정되었습니다!');
+                    vm.$showAlert('response', 'DB가 수정되었습니다!');
                     vm.selectDbList();
                 })
                 .catch(function (error) {

                 })
                 .catch((err) => {
                     console.log('스키마 정보 수집 에러 : ', err);
-                    vm.openAlertModal('error', '스키마 수집 에러');
+                    vm.$showAlert('error', '스키마 수집 에러');
                 });
         },
 

             console.log(UpdateSchemaList);
 
             if (UpdateSchemaList.length < 1) {
-                vm.openAlertModal('error', '변경 사항이 없습니다.');
+                vm.$showAlert('error', '변경 사항이 없습니다.');
                 return;
             }
 

             );
 
             if (targetItem) {
-                vm.openAlertModal('error', '설명을 입력하세요');
+                vm.$showAlert('error', '설명을 입력하세요');
                 // 입력 안 한 칸으로 이동
                 const firstInput = document.querySelector(`.explain_input_${targetItem.schema_id}`);
 

                 .then((res) => {
                     console.log('스키마 정보 수정 응답 : ', res.data);
                     if (res.data > 0) {
-                        vm.openAlertModal('response', '변경 내용 저장 완료');
+                        vm.$showAlert('response', '변경 내용 저장 완료');
 
                         // 변경 후 초기화
                         vm.updateSchemaList = [];

                 })
                 .catch((err) => {
                     console.log('스키마 정보 수정 에러 : ', err);
-                    vm.openAlertModal('error', '스키마 수정 에러');
+                    vm.$showAlert('error', '스키마 수정 에러');
                 });
         },
         // 페이지네이션 클릭 이벤트

2c1d87f

4f7bc2a

client/views/pages/login/Login.vue

--- client/views/pages/login/Login.vue

+++ client/views/pages/login/Login.vue


                             <div class="inputUnderline"></div>
                         </div>
                         <div class="inputContainer">
-                            <input required="" class="customInput" type="text" v-model="userLogin.user_password" @keyup.enter="handleEnterKey">
+                            <input required="" class="customInput" type="password" v-model="userLogin.user_password" @keyup.enter="handleEnterKey">
                             <label class="inputLabel">PASSWORD</label>
                             <div class="inputUnderline"></div>
                         </div>

                 .then(function (response) {
                     console.log("login - response", response.data);
                     if (response.data > 0) {
-                        alert("로그인 성공하였습니다.");
                         vm.$emit("updateIsLogin", true);
                         vm.$router.go();
                         vm.$router.push({ path: '/main.page', query: {} });

2c1d87f

4f7bc2a

client/views/pages/rule/DomainRuleList.vue

--- client/views/pages/rule/DomainRuleList.vue

+++ client/views/pages/rule/DomainRuleList.vue


 <template>
-    <!-- 경고 모달창 -->
-    <div v-show="isAlertModalOpen" class="modal-wrapper">
-        <div class="modal-container alert-modal">
-            <div class="modal-title text-ct">
-                <h2>{{ alertTitle }}</h2>
-            </div>
-            <div class="modal-content-monthly">
-                <p class="alert-write text-ct"> {{ alertMessage }} </p>
-            </div>
-            <div class="modal-end flex justify-center">
-                <button class="blue-btn large-btn flex50" @click="closeAlertModal">확인</button>
-            </div>
-        </div>
-    </div>
     <!-- 검색 모달창 -->
     <div v-show="isModalOpen" class="modal-wrapper">
-        <div class="modal-container">
+        <div class="modal-container" style="height:60%">
             <div class="modal-title">
                 <div class="flex justify-between align-center">
                     <h2>진단 규칙 검색</h2>

             schemaNameList: [],
             selectSchema: '',
 
-            // 경고 모달용
-            alertMessage: '',
-            alertTitle: '',
-            isAlertModalOpen: false,
         };
     },
     methods: {

                         val_rule_id: this.domainList[i].val_rule_id,
                         column_id: this.domainList[i].column_id
                     }
-                    this.updateDomainRule()
+                    this.updateDomainRule();
+
                 }
             }
-            this.openAlertModal("확인", "선택한 컬럼에 맞춰 규칙이 저장되었습니다");
+            this.$showAlert("확인", "선택한 컬럼에 맞춰 규칙이 저장되었습니다");
             this.checkedDomain = [];
         },
         // 진단 규칙 update

                 })
                 .catch(function (error) {
                     console.log('updateDomainRule - error : ', error);
-                    this.openAlertModal("error", "updateDomainRule 오류");
+                    this.$showAlert("error", "updateDomainRule 오류");
                 });
         },
         // 도메인 진단 규칙 select

                 })
                 .catch(function (error) {
                     console.log('selectDomainRule - error : ', error);
-                    this.openAlertModal("error", "selectDomainRule 오류");
+                    this.$showAlert("error", "selectDomainRule 오류");
                 });
         },
         // 진단 규칙 select

                 })
                 .catch(function (error) {
                     console.log("selectValRule - error : ", error);
-                    this.openAlertModal("error", "selectValRule 오류");
+                    this.$showAlert("error", "selectValRule 오류");
                 });
         },
         // 검증 유형 select

                 })
                 .catch(function (error) {
                     console.log("selectDqiType - error : ", error);
-                    this.openAlertModal("error", "selectDqiType 오류");
+                    this.$showAlert("error", "selectDqiType 오류");
                 });
         },
         // 코드 select

                 })
                 .catch(function (error) {
                     console.log('getOptionValue - error', error);
-                    this.openAlertModal("error", "selectCodeList 오류");
+                    this.$showAlert("error", "selectCodeList 오류");
                 });
         },
 

                     vm.dbNameList = res.data;
                 })
                 .catch((err) => {
-                    this.openAlertModal("error", "selectDbName 오류");
+                    this.$showAlert("error", "selectDbName 오류");
                 });
         },
 

                     vm.schemaNameList = res.data;
                 })
                 .catch((err) => {
-                    this.openAlertModal("error", "selectSchemaName 오류");
+                    this.$showAlert("error", "selectSchemaName 오류");
                 });
         },
 
-        // 경고 - alert 
-        openAlertModal:function(title, message){
-            this.alertTitle = title;
-            this.alertMessage = message;
-            this.isAlertModalOpen=true;
-        },
-        closeAlertModal:function(){
-            this.isAlertModalOpen=false;
-        }
     },
 
     watch: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -125,7 +125,7 @@
125	125	// subMenu가 존재하는 경우에만 길이를 반환
126	126	return menu.subMenu ? menu.subMenu.length : 0;
127	127	}));
128		- return maxSubItems * 48; // 48px는 각 메뉴 항목의 높이로 가정
	128	+ return maxSubItems * 50; // 48px는 각 메뉴 항목의 높이로 가정
129	129	}
130	130	},
131	131	components: {

...	...	@@ -1,21 +1,7 @@
1	1	<template>
2		- <!-- 경고 모달창 -->
3		- <div v-show="isAlertModalOpen" class="modal-wrapper">
4		- <div class="modal-container alert-modal">
5		- <div class="modal-title text-ct">
6		- <h2>{{ alertTitle }}</h2>
7		- </div>
8		- <div class="modal-content-monthly">
9		- <p class="alert-write text-ct"> {{ alertMessage }} </p>
10		- </div>
11		- <div class="modal-end flex justify-center">
12		- <button class="blue-btn large-btn flex50" @click="closeAlertModal">확인</button>
13		- </div>
14		- </div>
15		- </div>
16	2	<!-- 검색 모달창 -->
17	3	<div v-show="isModalOpen" class="modal-wrapper">
18		- <div class="modal-container">
	4	+ <div class="modal-container" style="height:60%">
19	5	<div class="modal-title">
20	6	<div class="flex justify-between align-center">
21	7	<h2>진단 규칙 검색</h2>
...	...	@@ -368,10 +354,6 @@
368	354	schemaNameList: [],
369	355	selectSchema: '',
370	356
371		- // 경고 모달용
372		- alertMessage: '',
373		- alertTitle: '',
374		- isAlertModalOpen: false,
375	357	};
376	358	},
377	359	methods: {
...	...	@@ -463,10 +445,11 @@
463	445	val_rule_id: this.domainList[i].val_rule_id,
464	446	column_id: this.domainList[i].column_id
465	447	}
466		- this.updateDomainRule()
	448	+ this.updateDomainRule();
	449	+
467	450	}
468	451	}
469		- this.openAlertModal("확인", "선택한 컬럼에 맞춰 규칙이 저장되었습니다");
	452	+ this.$showAlert("확인", "선택한 컬럼에 맞춰 규칙이 저장되었습니다");
470	453	this.checkedDomain = [];
471	454	},
472	455	// 진단 규칙 update
...	...	@@ -485,7 +468,7 @@
485	468	})
486	469	.catch(function (error) {
487	470	console.log('updateDomainRule - error : ', error);
488		- this.openAlertModal("error", "updateDomainRule 오류");
	471	+ this.$showAlert("error", "updateDomainRule 오류");
489	472	});
490	473	},
491	474	// 도메인 진단 규칙 select
...	...	@@ -508,7 +491,7 @@
508	491	})
509	492	.catch(function (error) {
510	493	console.log('selectDomainRule - error : ', error);
511		- this.openAlertModal("error", "selectDomainRule 오류");
	494	+ this.$showAlert("error", "selectDomainRule 오류");
512	495	});
513	496	},
514	497	// 진단 규칙 select
...	...	@@ -528,7 +511,7 @@
528	511	})
529	512	.catch(function (error) {
530	513	console.log("selectValRule - error : ", error);
531		- this.openAlertModal("error", "selectValRule 오류");
	514	+ this.$showAlert("error", "selectValRule 오류");
532	515	});
533	516	},
534	517	// 검증 유형 select
...	...	@@ -547,7 +530,7 @@
547	530	})
548	531	.catch(function (error) {
549	532	console.log("selectDqiType - error : ", error);
550		- this.openAlertModal("error", "selectDqiType 오류");
	533	+ this.$showAlert("error", "selectDqiType 오류");
551	534	});
552	535	},
553	536	// 코드 select
...	...	@@ -565,7 +548,7 @@
565	548	})
566	549	.catch(function (error) {
567	550	console.log('getOptionValue - error', error);
568		- this.openAlertModal("error", "selectCodeList 오류");
	551	+ this.$showAlert("error", "selectCodeList 오류");
569	552	});
570	553	},
571	554
...	...	@@ -584,7 +567,7 @@
584	567	vm.dbNameList = res.data;
585	568	})
586	569	.catch((err) => {
587		- this.openAlertModal("error", "selectDbName 오류");
	570	+ this.$showAlert("error", "selectDbName 오류");
588	571	});
589	572	},
590	573
...	...	@@ -604,19 +587,10 @@
604	587	vm.schemaNameList = res.data;
605	588	})
606	589	.catch((err) => {
607		- this.openAlertModal("error", "selectSchemaName 오류");
	590	+ this.$showAlert("error", "selectSchemaName 오류");
608	591	});
609	592	},
610	593
611		- // 경고 - alert
612		- openAlertModal:function(title, message){
613		- this.alertTitle = title;
614		- this.alertMessage = message;
615		- this.isAlertModalOpen=true;
616		- },
617		- closeAlertModal:function(){
618		- this.isAlertModalOpen=false;
619		- }
620	594	},
621	595
622	596	watch: {

...	...	@@ -2,6 +2,8 @@
2	2	*
3	3	* 공통 처리 플러그인
4	4	*/
	5	+import Vue from "vue";
	6	+
5	7	export default{
6	8	install(Vue){
7	9

...	...	@@ -8,13 +8,11 @@
8	8	import AppRouter from "./pages/AppRouter.js";
9	9	import App from "./pages/App.vue";
10	10	import cmmnPlugin from './common/commonPlugin.js';
11		-import { quillEditor } from 'vue3-quill';
12	11
13	12
14	13
15	14	const app = createApp(App);
16		-app.use(cmmnPlugin)
17		-app.use(quillEditor)
18		-app.use(AppRouter)
	15	+app.use(cmmnPlugin);
	16	+app.use(AppRouter);
19	17	app.mount("#root");
20	18

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div v-cloak :class="layoutType === 'side' ? 'dashboard-wrap' : 'layout-wrap'">
3		- <Header v-show="isLogin" :className="layoutType" @updateIsLogin="isLogin = $event"/>
	3	+ <Header v-show="isLogin" :className="layoutType" @updateIsLogin="isLogin = $event" />
4	4	<SideMenu v-show="isLogin" v-if="layoutType === 'side'" />
5	5	<TopMenu v-show="isLogin" v-else />
6	6	<div class="main">
...	...	@@ -8,6 +8,7 @@
8	8	<router-view @updateIsLogin="isLogin = $event" />
9	9	</div>
10	10	</div>
	11	+ <AlertModal id="cmmnAlert" ref="Alert"></AlertModal>
11	12	</template>
12	13
13	14	<script>
...	...	@@ -15,12 +16,13 @@
15	16	import SideMenu from '../layout/SideMenu.vue';
16	17	import TopMenu from '../layout/TopMenu.vue';
17	18	import PageNavigation from '../component/PageNavigation.vue';
	19	+import AlertModal from '../component/AlertModal.vue';
18	20	const App = {
19	21	data: () => {
20	22	return {
21	23	// side혹은 top 둘중 한개 타입
22	24	layoutType: "top",
23		- isLogin:false,
	25	+ isLogin: true,
24	26	}
25	27	},
26	28	methods: {
...	...	@@ -31,19 +33,19 @@
31	33	},
32	34	},
33	35	watch: {
34		-
35	36	},
36	37	computed: {
37		-
38	38	},
39	39	components: {
40	40	'Header': Header,
41	41	'SideMenu': SideMenu,
42	42	'TopMenu': TopMenu,
43	43	'PageNavigation': PageNavigation,
	44	+ 'AlertModal' : AlertModal,
44	45	},
45		- mounted: () => {
	46	+ mounted: function() {
46	47	console.log('Vue mounted');
	48	+ this.$setAlertRef(this.$refs.Alert);
47	49	}
48	50	}
49	51

...	...	@@ -1,18 +1,4 @@
1	1	<template>
2		- <!-- 경고 모달창 -->
3		- <div v-show="isAlertModalOpen" class="modal-wrapper">
4		- <div class="modal-container alert-modal">
5		- <div class="modal-title text-ct">
6		- <h2>{{ alertTitle }}</h2>
7		- </div>
8		- <div class="modal-content-monthly">
9		- <p class="alert-write text-ct"> {{ alertMessage }} </p>
10		- </div>
11		- <div class="modal-end flex justify-center">
12		- <button class="blue-btn large-btn flex50" @click="closeAlertModal">확인</button>
13		- </div>
14		- </div>
15		- </div>
16	2	<div class="container">
17	3	<div class="page-titleZone flex justify-between">
18	4	<p class="main-title">진단대상관리 > 진단대상DB관리</p>
...	...	@@ -251,10 +237,6 @@
251	237	schemaPerPage: 10,
252	238	schemaTotalCount: 0,
253	239	schemaIndex: 0,
254		- // 경고 모달용
255		- alertMessage: '',
256		- alertTitle: '',
257		- isAlertModalOpen: false,
258	240	};
259	241	},
260	242	methods: {
...	...	@@ -295,55 +277,45 @@
295	277	handleSchemaClick(index) {
296	278	this.selectedSchema = index;
297	279	},
298		- // 경고 - alert
299		- openAlertModal:function(title, message){
300		- this.alertTitle = title;
301		- this.alertMessage = message;
302		- this.isAlertModalOpen=true;
303		- },
304		- closeAlertModal:function(){
305		- this.isAlertModalOpen=false;
306		- },
307		-
308	280	insertDbData: function () {
309	281	const vm = this;
310	282	const inputData = vm.dbInput;
311	283
312	284	// 유효성 검사
313	285	if (
314		- !this.dbInput.dbms_name \|\|
315		- !this.dbInput.dbms_type \|\|
316		- !this.dbInput.dbms_url_port \|\|
317		- !this.dbInput.dbms_drive_nm \|\|
318		- !this.dbInput.dbms_connect_id \|\|
319		- !this.dbInput.dbms_connect_pw \|\|
320		- !this.dbInput.dbms_ag_nm \|\|
321		- !this.dbInput.dbms_system_nm
	286	+ !vm.dbInput.dbms_name \|\|
	287	+ !vm.dbInput.dbms_type \|\|
	288	+ !vm.dbInput.dbms_url_port \|\|
	289	+ !vm.dbInput.dbms_drive_nm \|\|
	290	+ !vm.dbInput.dbms_connect_id \|\|
	291	+ !vm.dbInput.dbms_connect_pw \|\|
	292	+ !vm.dbInput.dbms_ag_nm \|\|
	293	+ !vm.dbInput.dbms_system_nm
322	294	) {
323		- if (!this.dbInput.dbms_name) {
324		- this.openAlertModal('error', 'DBMS명은 반드시 입력해야 합니다.');
325		- this.$refs.dbms_name.focus();
326		- } else if (!this.dbInput.dbms_type) {
327		- this.openAlertModal('error', 'DBMS유형은 반드시 선택해야 합니다.');
328		- this.$refs.dbms_type.focus();
329		- } else if (!this.dbInput.dbms_url_port) {
330		- this.openAlertModal('error', '연결 URL은 반드시 입력해야 합니다.');
331		- this.$refs.dbms_url_port.focus();
332		- } else if (!this.dbInput.dbms_drive_nm) {
333		- this.openAlertModal('error', '드라이버명은 반드시 입력해야 합니다.');
334		- this.$refs.dbms_drive_nm.focus();
	295	+ if (!vm.dbInput.dbms_name) {
	296	+ vm.$showAlert('error', 'DBMS명은 반드시 입력해야 합니다.');
	297	+ vm.$refs.dbms_name.focus();
	298	+ } else if (!vm.dbInput.dbms_type) {
	299	+ vm.$showAlert('error', 'DBMS유형은 반드시 선택해야 합니다.');
	300	+ vm.$refs.dbms_type.focus();
	301	+ } else if (!vm.dbInput.dbms_url_port) {
	302	+ vm.$showAlert('error', '연결 URL은 반드시 입력해야 합니다.');
	303	+ vm.$refs.dbms_url_port.focus();
	304	+ } else if (!vm.dbInput.dbms_drive_nm) {
	305	+ vm.$showAlert('error', '드라이버명은 반드시 입력해야 합니다.');
	306	+ vm.$refs.dbms_drive_nm.focus();
335	307	} else if (!this.dbInput.dbms_connect_id) {
336		- this.openAlertModal('error', 'DB접속계정ID는 반드시 입력해야 합니다.');
337		- this.$refs.dbms_connect_id.focus();
338		- } else if (!this.dbInput.dbms_connect_pw) {
339		- this.openAlertModal('error', 'DB접속계정암호는 반드시 입력해야 합니다.');
340		- this.$refs.dbms_connect_pw.focus();
341		- } else if (!this.dbInput.dbms_ag_nm) {
342		- this.openAlertModal('error', '기관명은 반드시 입력해야 합니다.');
343		- this.$refs.dbms_ag_nm.focus();
344		- } else if (!this.dbInput.dbms_system_nm) {
345		- this.openAlertModal('error', '정보시스템명은 반드시 입력해야 합니다.');
346		- this.$refs.dbms_system_nm.focus();
	308	+ vm.$showAlert('error', 'DB접속계정ID는 반드시 입력해야 합니다.');
	309	+ vm.$refs.dbms_connect_id.focus();
	310	+ } else if (!vm.dbInput.dbms_connect_pw) {
	311	+ vm.$showAlert('error', 'DB접속계정암호는 반드시 입력해야 합니다.');
	312	+ vm.$refs.dbms_connect_pw.focus();
	313	+ } else if (!vm.dbInput.dbms_ag_nm) {
	314	+ vm.$showAlert('error', '기관명은 반드시 입력해야 합니다.');
	315	+ vm.$refs.dbms_ag_nm.focus();
	316	+ } else if (!vm.dbInput.dbms_system_nm) {
	317	+ vm.$showAlert('error', '정보시스템명은 반드시 입력해야 합니다.');
	318	+ vm.$refs.dbms_system_nm.focus();
347	319	}
348	320
349	321	return;
...	...	@@ -361,7 +333,7 @@
361	333	})
362	334	.catch(function (error) {
363	335	console.log('insertDbData - error : ', error);
364		- this.openAlertModal('error', 'insertDbData 오류');
	336	+ vm.$showAlert('error', 'insertDbData 오류');
365	337	});
366	338	},
367	339	selectDbList: function () {
...	...	@@ -381,8 +353,8 @@
381	353	vm.dbIdx = vm.dbListCount - (vm.dbListSearch.currentPage - 1) * vm.dbListSearch.perPage;
382	354	})
383	355	.catch(function (error) {
384		- vm.openAlertModal('error', 'selectDbList - error');
385		- vm.openAlertModal('error', 'selectDbList 오류');
	356	+ console.log('error', 'selectDbList - error');
	357	+ vm.$showAlert('error', 'selectDbList 오류');
386	358	});
387	359	},
388	360
...	...	@@ -390,7 +362,7 @@
390	362	const vm = this;
391	363
392	364	if (vm.selectedDb == null) {
393		- vm.openAlertModal('error', '접속 테스트할 DB를 선택해주세요!');
	365	+ vm.$showAlert('error', '접속 테스트할 DB를 선택해주세요!');
394	366	return;
395	367	}
396	368
...	...	@@ -405,15 +377,15 @@
405	377	.then(function (response) {
406	378	console.log(response.data);
407	379	if (response.data == 1) {
408		- vm.openAlertModal('response', 'DB 접속이 성공되었습니다!');
	380	+ vm.$showAlert('response', 'DB 접속이 성공되었습니다!');
409	381	vm.selectDbList();
410	382	} else {
411		- vm.openAlertModal('error', '접속이 실패했습니다! DB 정보를 다시 확인해주세요!');
	383	+ vm.$showAlert('error', '접속이 실패했습니다! DB 정보를 다시 확인해주세요!');
412	384	}
413	385	})
414	386	.catch(function (error) {
415	387	console.log('selectDbList - error : ', error);
416		- vm.openAlertModal('error', '접속이 실패했습니다! DB 정보를 다시 확인해주세요');
	388	+ vm.$showAlert('error', '접속이 실패했습니다! DB 정보를 다시 확인해주세요');
417	389	vm.selectDbList();
418	390	});
419	391	},
...	...	@@ -422,11 +394,11 @@
422	394	const vm = this;
423	395
424	396	if (vm.selectedDb == null) {
425		- vm.openAlertModal('error', '스키마를 수집할 DB를 선택해주세요!');
	397	+ vm.$showAlert('error', '스키마를 수집할 DB를 선택해주세요!');
426	398	return;
427	399	}
428	400	if (vm.dbList[vm.selectedDb].dbms_connect != 1) {
429		- vm.openAlertModal('error', '접속 테스트가 완료된 DB를 선택해주세요!');
	401	+ vm.$showAlert('error', '접속 테스트가 완료된 DB를 선택해주세요!');
430	402	return;
431	403	}
432	404
...	...	@@ -441,13 +413,13 @@
441	413	.then(function (response) {
442	414	console.log(response.data);
443	415	if (response.data == 1) {
444		- vm.openAlertModal('response', '스키마 수집이 성공되었습니다!');
	416	+ vm.$showAlert('response', '스키마 수집이 성공되었습니다!');
445	417	vm.selectDbList();
446	418	}
447	419	})
448	420	.catch(function (error) {
449	421	console.log('selectDbList - error : ', error);
450		- vm.openAlertModal('error', '스키마 수집이 실패했습니다! DB 정보를 다시 확인해주세요');
	422	+ vm.$showAlert('error', '스키마 수집이 실패했습니다! DB 정보를 다시 확인해주세요');
451	423	});
452	424	},
453	425
...	...	@@ -455,7 +427,7 @@
455	427	const vm = this;
456	428
457	429	if (vm.selectedDb == null) {
458		- vm.openAlertModal('error', '삭제할 DB를 선택해주세요!');
	430	+ vm.$showAlert('error', '삭제할 DB를 선택해주세요!');
459	431	return;
460	432	}
461	433
...	...	@@ -468,7 +440,7 @@
468	440	data: vm.dbList[vm.selectedDb],
469	441	})
470	442	.then(function (response) {
471		- vm.openAlertModal('response', 'DB가 삭제되었습니다!');
	443	+ vm.$showAlert('response', 'DB가 삭제되었습니다!');
472	444	vm.selectDbList();
473	445	})
474	446	.catch(function (error) {
...	...	@@ -482,7 +454,7 @@
482	454	const vm = this;
483	455
484	456	if (vm.selectedDb == null) {
485		- vm.openAlertModal('error', '수정할 DB를 선택해주세요!');
	457	+ vm.$showAlert('error', '수정할 DB를 선택해주세요!');
486	458	return;
487	459	}
488	460
...	...	@@ -495,7 +467,7 @@
495	467	data: vm.dbList[vm.selectedDb],
496	468	})
497	469	.then(function (response) {
498		- vm.openAlertModal('response', 'DB가 수정되었습니다!');
	470	+ vm.$showAlert('response', 'DB가 수정되었습니다!');
499	471	vm.selectDbList();
500	472	})
501	473	.catch(function (error) {
...	...	@@ -530,7 +502,7 @@
530	502	})
531	503	.catch((err) => {
532	504	console.log('스키마 정보 수집 에러 : ', err);
533		- vm.openAlertModal('error', '스키마 수집 에러');
	505	+ vm.$showAlert('error', '스키마 수집 에러');
534	506	});
535	507	},
536	508
...	...	@@ -624,7 +596,7 @@
624	596	console.log(UpdateSchemaList);
625	597
626	598	if (UpdateSchemaList.length < 1) {
627		- vm.openAlertModal('error', '변경 사항이 없습니다.');
	599	+ vm.$showAlert('error', '변경 사항이 없습니다.');
628	600	return;
629	601	}
630	602
...	...	@@ -633,7 +605,7 @@
633	605	);
634	606
635	607	if (targetItem) {
636		- vm.openAlertModal('error', '설명을 입력하세요');
	608	+ vm.$showAlert('error', '설명을 입력하세요');
637	609	// 입력 안 한 칸으로 이동
638	610	const firstInput = document.querySelector(`.explain_input_${targetItem.schema_id}`);
639	611
...	...	@@ -655,7 +627,7 @@
655	627	.then((res) => {
656	628	console.log('스키마 정보 수정 응답 : ', res.data);
657	629	if (res.data > 0) {
658		- vm.openAlertModal('response', '변경 내용 저장 완료');
	630	+ vm.$showAlert('response', '변경 내용 저장 완료');
659	631
660	632	// 변경 후 초기화
661	633	vm.updateSchemaList = [];
...	...	@@ -670,7 +642,7 @@
670	642	})
671	643	.catch((err) => {
672	644	console.log('스키마 정보 수정 에러 : ', err);
673		- vm.openAlertModal('error', '스키마 수정 에러');
	645	+ vm.$showAlert('error', '스키마 수정 에러');
674	646	});
675	647	},
676	648	// 페이지네이션 클릭 이벤트

...	...	@@ -14,7 +14,7 @@
14	14	<div class="inputUnderline"></div>
15	15	</div>
16	16	<div class="inputContainer">
17		- <input required="" class="customInput" type="text" v-model="userLogin.user_password" @keyup.enter="handleEnterKey">
	17	+ <input required="" class="customInput" type="password" v-model="userLogin.user_password" @keyup.enter="handleEnterKey">
18	18	<label class="inputLabel">PASSWORD</label>
19	19	<div class="inputUnderline"></div>
20	20	</div>
...	...	@@ -75,7 +75,6 @@
75	75	.then(function (response) {
76	76	console.log("login - response", response.data);
77	77	if (response.data > 0) {
78		- alert("로그인 성공하였습니다.");
79	78	vm.$emit("updateIsLogin", true);
80	79	vm.$router.go();
81	80	vm.$router.push({ path: '/main.page', query: {} });

Delete comment