로그인 / 고객관리 / 시스템관리 ... 디자인 및 기능 수정 적용

frontend/src/modules/sysMgt/components/AdminDetailPop.vue

@@ -4,73 +4,75 @@
 		<div class="dimmed modal21" @click="adminDetailModalClose();"></div>
 		<div class="popup-wrap modal21">
 			<!-- 관리자/유치채널 상세정보 -->
-			<div class="popup modal21 popup_form">
-				<div class="pop-head">
-					<h3 class="pop-tit" v-if="code === null || code === ''">관리자 상세정보</h3>
-					<h3 class="pop-tit" v-else>유치채널 상세정보</h3>
-				</div>
-					<table>
-						<tbody>
-							<tr>
-								<th>ID</th>
-								<td><input type="text" disabled v-model.trim="madangId" ref="_madangId2"></td>
-							</tr>
-							<tr>
-								<th>비밀번호</th>
-								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd1" v-model.trim="userPwd1"></td>
-							</tr>
-							<tr>
-								<th>비밀번호 확인</th>
-								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd2" v-model.trim="userPwd2"></td>
-							</tr>
-							<tr>
-								<th>이름</th>
-								<td><input type="text" disabled v-model.trim="userNm" ref="_userNm"></td>
-							</tr>
-							<tr>
-								<th>휴대폰번호</th>
-								<td><input type="number" disabled v-model.trim="mdn" ref="_phone"></td>
-							</tr>
-							<tr>
-								<th>이메일</th>
-								<td><input type="email" disabled v-model.trim="email" ref="_email"></td>
-							</tr>
-							<tr>
-								<th>권한</th>
-								<td v-if="code === null || code === ''">
-									<div v:class="select_box">
-										<select name="" id="right" v-model="auth" ref="_auth">
-											<option value="">선택</option>
-											<option
-												v-for="(option, i) in authType"
-												v-bind:value="option.autCd"
-												v-bind:key="i"
-												:selected="auth === option.autCd">
-												{{ option.autNm }}
-											</option>
-										</select>
-									</div>
-								</td>
-								<td v-else><input type="text" disabled value="대리점"></td>
-							</tr>
-							<tr>
-								<th class="center">상태</th>
-								<td>
-									<input type="radio" name="state" value="01" id="detail_popup_radio1" v-model="stat">
-									<label for="detail_popup_radio1">사용</label>
-									<input type="radio" name="state" value="02" id="detail_popup_radio2" v-model="stat">
-									<label for="detail_popup_radio2">정지</label>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				<div class="pop-btn2">
-					<button class="btn-default" @click="adminDetailModalClose();">취소</button>
-					<button class="btn-pcolor" @click="doInsert">저장</button>
-				</div>
-			</div>
+      <div class="popup modal21 popup_form">
+        <div class="pop-head">
+          <h3 class="pop-tit">관리자 상세정보</h3>
+        </div>
+        <form autocomplete="off">
+          <table>
+            <tbody>
+              <tr>
+                <th>ID</th>
+                <td><input type="text" disabled v-model.trim="madangId" ref="_madangId2"></td>
+              </tr>
+              <tr>
+                <th>비밀번호</th>
+                <td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd1" v-model.trim="userPwd1"></td>
+              </tr>
+              <tr>
+                <th>비밀번호 확인</th>
+                <td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd2" v-model.trim="userPwd2"></td>
+              </tr>
+              <tr>
+                <th>이름</th>
+                <td><input type="text" disabled v-model.trim="userNm" ref="_userNm"></td>
+              </tr>
+              <tr>
+                <th>휴대폰번호</th>
+                <td><input type="number" disabled v-model.trim="mdn" ref="_phone"></td>
+              </tr>
+              <tr>
+                <th>이메일</th>
+                <td><input type="email" disabled v-model.trim="email" ref="_email"></td>
+              </tr>
+              <tr>
+                <th>권한</th>
+                <td v-if="auth === '1001'">
+                  <div v:class="select_box">
+                    <select name="" id="right" v-model="auth" ref="_auth">
+                      <option value="">선택</option>
+                      <option
+                        v-for="(option, i) in authType"
+                        v-bind:value="option.autCd"
+                        v-bind:key="i"
+                        :selected="auth === option.autCd">
+                        {{ option.autNm }}
+                      </option>
+                    </select>
+                  </div>
+                </td>
+                <td v-else><input type="text" disabled value="대리점"></td>
+              </tr>
+              <tr>
+                <th class="center">상태</th>
+                <td>
+                  <input type="radio" name="state" value="01" id="detail_popup_radio1" v-model="stat">
+                  <label for="detail_popup_radio1">사용</label>
+                  <input type="radio" name="state" value="02" id="detail_popup_radio2" v-model="stat">
+                  <label for="detail_popup_radio2">정지</label>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </form>
+        <div class="popup-btn2">
+          <button class="btn-pcolor" @click="doInsert">저장</button>
+          <button class="btn-default" @click="adminDetailModalClose();">취소</button>
+        </div>
+      </div>
 			<!-- 관리자 상세정보 팝업 끝-->
 		</div>
+    <common-modal ref="commmonModal"></common-modal>
 	</div>
 </template>
 
@@ -80,6 +82,8 @@ import api from '@/service/api';
 import sysMgtApi from "../service/sysMgtApi.js";
 import { utils_mixin, chkPattern2 } from '../service/mixins';
 import lodash from "lodash";
+import commonModal from "../components/commonModal";
+import SearchIdPopup from "@/modules/sysMgt/components/SearchIdPopup";
 
 export default {
 	name: "adminDetailPop",
@@ -90,7 +94,7 @@ export default {
 		}
 	},
 	data(){
-        return{
+    return{
 			row: {},
 			authType: [],
 			
@@ -101,8 +105,8 @@ export default {
 			auth:'',
 			stat: "",
 			userNm:"",
-            userPwd1:"",
-            userPwd2:"",
+      userPwd1:"",
+      userPwd2:"",
 			code:"",
         }
     },
@@ -115,22 +119,34 @@ export default {
 		//this.formReset();
 		this.setAuthData();
 		this.formReset();
-    }, 
+    },
+  components: {
+    commonModal,
+  },
 	methods :{
 		doPwdValidate(){
 			if(this.isNull(this.userPwd2)){
-				alert("비밀번호 확인을 입력해 주세요.");
+				// alert("비밀번호 확인을 입력해 주세요.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '비밀번호를 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
-				alert("비밀번호가 일치하지 않습니다.");
+				// alert("비밀번호가 일치하지 않습니다.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '비밀번호가 일치하지 않습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			const pwdLen = this.bytes(this.userPwd1);
 			if(!(pwdLen >= 8 && pwdLen <= 16)){
-				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+				// alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
@@ -138,9 +154,12 @@ export default {
 			const pNum = /[0-9]/g;	// 숫자 
 			const pSpc = /[!@$%^&*]/g; // 특수문자
 			if(!(pEng.test(this.userPwd1) && pNum.test(this.userPwd1) && pSpc.test(this.userPwd1))) {
-				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+				// alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
-				return;
+				return false;
 			}
 			this.row.adminPw=this.userPwd1;
 			return true;
@@ -166,6 +185,8 @@ export default {
 		},
 		// 모달 띄우기
 		async adminDetailModalOpen(props){
+      this.formReset();
+      this.setAuthData();
 			this.row.adminId = props.adminId;
 			try {
 				const response = await sysMgtApi.adminDetail(this.row);
@@ -180,7 +201,10 @@ export default {
 					this.stat = result.data.stat;
 				}
 			} catch(err) {
-				alert("실패 하였습니다.");
+				// alert("실패 하였습니다.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			}
 			var dimmed = document.getElementsByClassName('modal21');
 			for(var i = 0; i < dimmed.length; i++){
@@ -200,20 +224,23 @@ export default {
 			this.adminDetailModalClose();
         },
 		async doInsert(){
-            if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
-                try {
+      if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
+        try {
 					const response = await sysMgtApi.updateAdmin(this.row);
 					const result = response.data;
 					if (result != null && result.retCode == "0000") {
-						alert('저장 하였습니다.');
+						// alert('저장 하였습니다.');
 						this.toComplete();
 					}
-                } catch(err) {
-                	alert("실패 하였습니다.");
-                }
-            }
-        },
-        setAuthData() {
+        } catch(err) {
+          alert("실패 하였습니다.");
+          this.row.title = '관리자/유치채널 관리';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        }
+      }
+    },
+    setAuthData() {
 			// 권한 옵션.
 			api.commAuth().then(response => {
 				this.authType = response.data.data.list;
@@ -226,9 +253,4 @@ export default {
 		},
 	}
 }
-</script>
-<style>
-	.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
-	.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
-	.popup-btn-wrap button:hover {background: #000; color: #fff;}
-</style>
+</script>

frontend/src/modules/sysMgt/components/AdminRegPop.vue

@@ -1,8 +1,8 @@
 <template>
 	<!-- <div class="wrap bg-wrap"> -->
 	<div>
-		<div class="dimmed" @click="ModalClose();"></div>
-		<div class="popup-wrap">
+		<div class="dimmed modal20" @click="ModalClose();"></div>
+		<div class="popup-wrap modal20">
 			<!-- 관리자/유치채널 등록 -->
 			<div class="popup modal20 popup_form">
 				<div class="pop-head">
@@ -254,9 +254,10 @@ export default {
 		async searchMadangId(){
 
 			if(!this.madangId){
-        this.row.title = '관리자/유치채널 관리';
-        this.row.msg1 = '마당ID를 입력해주세요.';
-        this.$refs.commmonModal.alertModalOpen(this.row);
+        // this.row.title = '관리자/유치채널 관리';
+        // this.row.msg1 = '마당ID를 입력해주세요.';
+        // this.$refs.commmonModal.alertModalOpen(this.row);
+        // this.$refs.searchIdPopModal.searchIdModalOpen();
 				this.$refs.madangId.focus();
 				return false;
 			}
@@ -281,32 +282,32 @@ export default {
 
 					this.idCheck = true;
 					this.$refs._pwd1.focus();						
-
+          return false;
 				}else if(result.retCode == '1004'){
 					//alert('마당ID 정보가 없습니다.');
-          this.row.title = '관리자/유치채널 관리';
-          this.row.msg1 = '마당ID 정보가 없습니다.';
-          this.$refs.commmonModal.alertModalOpen(this.row);
-					// this.searchIdFailPop();
+          // this.row.title = '관리자/유치채널 관리';
+          // this.row.msg1 = '마당ID 정보가 없습니다.';
+          // this.$refs.commmonModal.alertModalOpen(this.row);
+					this.searchIdFailPop();
 					this.idCheck = false;
 					this.$refs.madangId.focus();
 					return false;
 				}else {
 					//alert('마당ID 조회에 실패하였습니다.');
-          this.row.title = '관리자/유치채널 관리';
-          this.row.msg1 = '마당ID 정보가 없습니다.';
-          this.$refs.commmonModal.alertModalOpen(this.row);
-					// this.searchIdFailPop();
+          // this.row.title = '관리자/유치채널 관리';
+          // this.row.msg1 = '마당ID 정보가 없습니다.';
+          // this.$refs.commmonModal.alertModalOpen(this.row);
+					this.searchIdFailPop();
 					this.idCheck = false;
 					this.$refs.madangId.focus();
 					return false;
 				}
 			} catch(err) {
 				//alert("실패 하였습니다.");
-        this.row.title = '관리자/유치채널 관리';
-        this.row.msg1 = '마당ID 정보가 없습니다.';
-        this.$refs.commmonModal.alertModalOpen(this.row);
-				// this.searchIdFailPop();
+        // this.row.title = '관리자/유치채널 관리';
+        // this.row.msg1 = '마당ID 정보가 없습니다.';
+        // this.$refs.commmonModal.alertModalOpen(this.row);
+				this.searchIdFailPop();
 				this.idCheck = false;
 				this.$refs.madangId.focus();
 				return false;
@@ -337,22 +338,18 @@ export default {
 		ModalOpen(insertType){
 			this.formReset();
 			this.insertType=insertType;
-			var dimmed = document.getElementsByClassName('dimmed');
-			dimmed[0].style.display = 'block';
-			var wrap = document.getElementsByClassName('popup-wrap');
-			wrap[0].style.display = 'block';
-			var obj = document.getElementsByClassName('modal20');
-			obj[0].style.display = 'block';
+      var dimmed = document.getElementsByClassName('modal20');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'block';
+      }
       this.setAuthData();
 		},
 		// 모달 끄기
 		ModalClose(){
-			var dimmed = document.getElementsByClassName('dimmed');
-			dimmed[0].style.display = 'none';
-			var wrap = document.getElementsByClassName('popup-wrap');
-			wrap[0].style.display = 'none';
-			var popup = document.getElementsByClassName('modal20');
-			popup[0].style.display = 'none';
+      var dimmed = document.getElementsByClassName('modal20');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'none';
+      }
 			
 		},
 		// 저장 후 부모창 호출.

frontend/src/modules/sysMgt/components/SearchIdPopup.vue

@@ -7,17 +7,17 @@
 			<!-- 시스템관리 팝업 -->
 
 			<!-- ID 조회 -->
-			<div class="popup modal17">
-				<div class="pop-head">
-					<h3 class="pop-tit">ID 조회</h3>
-				</div>
-				<div class="pop-cont">
-					<p>입력하신 마당ID를 조회할 수 없습니다</p>
-				</div>
-				<div class="pop-btn1">
-					<button class="btn-pcolor" @click="searchIdFailModalClose();">확인</button>
-				</div>
-			</div>
+      <div class="popup modal17">
+        <div class="pop-head">
+          <h3 class="pop-tit">ID 조회</h3>
+        </div>
+        <div class="pop-cont">
+          <p>입력하신 마당ID를 조회할 수 없습니다.</p>
+        </div>
+        <div class="popup-btn1">
+          <button class="btn-pcolor" @click="searchIdFailModalClose();">확인</button>
+        </div>
+      </div>
 		</div>
 
 		<div class="dimmed modal18" @click="searchIdModalCancelClose();"></div>

frontend/src/modules/sysMgt/views/AdminList.vue

@@ -31,13 +31,13 @@
 						</div>
 						<div class="input_box">
 							<label for="name" class="label">이름(대리점명)</label>
-                            <input type="text" id="name" placeholder="검색어 입력" v-model="grid.params.searchText2" @keyup.enter="search"/>
+              <input type="text" id="name" placeholder="검색어 입력" v-model="grid.params.searchText2" @keyup.enter="search"/>
 						</div>
 						<button type="button" class="button grey" @click="search">조회</button>
 					</div>
 				</form>
 				<div class="info">
-					<div class="count">총 <span>{{ totalItems }}</span>건</div>
+					<div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건</div>
 					<div class="button_group">
 						<button type="button" class="button blue admin add" @click="adminRegPopOpen();">관리자 등록</button>
 						<button type="button" class="button blue channel add" @click="adminReg2PopOpen();">유치채널 등록</button>