Commit @0b7483d28f0d2a1ab5923713f393dcae8279868f

Stormen123 2023-06-26

20230626 김성훈 횡단보도유지보수담당자 상세조회,수정,삭제 추가

@0b7483d28f0d2a1ab5923713f393dcae8279868f

2698cce

0b7483d

client/views/pages/SystemManagement/ChargeManagement.vue

--- client/views/pages/SystemManagement/ChargeManagement.vue

+++ client/views/pages/SystemManagement/ChargeManagement.vue


 <template>
   <div class="wrap">
     <div class="board-wrap">
+      <div>
+        <h2 class="page-title">횡단보도 유지보수 담당자 관리</h2>
+      </div>
+      <hr class="margin">
       <div class="search-wrap clear-fix">
-        <div class="float-right">
+        <div class="float-right flex gap">
             <label>등록일자</label>
             <input type="date" value-format="yyyyMMdd" v-model="managerListSearch.startDate"/>
-            <span>~</span>
+            <span> ~ </span>
             <input type="date" value-format="yyyyMMdd" v-model="managerListSearch.endDate"/>
             <select v-model="managerListSearch.searchType">
-              <option value="">검색조건</option>
+              <option value="null">검색조건</option>
               <option value="mngr_nm">이름</option>
               <option value="mngr_ogdp_info">소속정보</option>
             </select>

 
 
     //횡단보도 유지보수 관리자 상세조회 페이지 이동
-    managerSelectOnePage: function (user) {
-      this.$router.push({ path: '/', query: {}});
+    managerSelectOnePage: function (manager) {
+      this.$router.push({ path: '/ManagerModifyForm.page', query: {'mntnce_mngr_id':manager.mntnce_mngr_id}});
     },
 
     //횡단보도 유지보수 관리자 등록 페이지 이동

   margin-right: 1rem;
 }
 
+h2.page-title {
+  font-size: 24px;
+}
+
+hr.margin {
+  margin: 30px 0;
+}
+
 table {
   width: 100%;
   text-align: center;

2698cce

0b7483d

client/views/pages/SystemManagement/ManagerAddForm.vue

--- client/views/pages/SystemManagement/ManagerAddForm.vue

+++ client/views/pages/SystemManagement/ManagerAddForm.vue

...	...	@@ -2,7 +2,7 @@
2	2	<div class="wrap">
3	3	<div>
4	4	<div>
5		- <h2 class="page-title">횡단보도 유지보수 담당자</h2>
	5	+ <h2 class="page-title">횡단보도 유지보수 담당자 등록</h2>
6	6	</div>
7	7	<hr class="margin">
8	8	<div class="form-wrap">

0b7483d

client/views/pages/SystemManagement/ManagerModifyForm.vue (added)

+++ client/views/pages/SystemManagement/ManagerModifyForm.vue

...	...	@@ -0,0 +1,370 @@
	1	+<template>
	2	+ <div class="wrap">
	3	+ <div>
	4	+ <div>
	5	+ <h2 class="page-title">횡단보도 유지보수 담당자 정보</h2>
	6	+ </div>
	7	+ <hr class="margin">
	8	+ <div class="form-wrap">
	9	+ <div class="flex m-b">
	10	+ <span>이름 : </span>
	11	+ <input type="text" placeholder=" Name" v-model="manager.mngr_nm">
	12	+ </div>
	13	+ <div class="flex m-b">
	14	+ <span>전화번호 : </span>
	15	+ <input type="text" placeholder=" '-' 을 제외하고 입력해주세요." maxlength="13" v-model="manager.mngr_telno" @change="phoneCheck" @keyup="getPhoneMask(manager.mngr_telno)">
	16	+ <p style="color:red" v-if="telno_boolean === false"> 전화번호 9~11자리를 입력해주세요.</p>
	17	+ </div>
	18	+ <div class="flex m-b">
	19	+ <span>이메일 : </span>
	20	+ <input type="text" placeholder=" 예) qwer@naver.com" v-model="manager.mngr_eml" @change="emailCheck">
	21	+ <p style="color:red" v-if="email_boolean === false"> 잘못된 이메일 형식입니다.</p>
	22	+ </div>
	23	+ <div class="flex m-b">
	24	+ <span>소속명 : </span>
	25	+ <input type="text" placeholder=" 소속정보를 입력해주세요." v-model="manager.mngr_ogdp_info">
	26	+ </div>
	27	+
	28	+ <div class="btn-wrap">
	29	+ <button type="button" class="green-btn" @click="managerUpdateCheck">수정</button>
	30	+ <button type="button" class="green-btn" @click="modal_delete = true">삭제</button>
	31	+ <button class="btn-2 gray-btn" @click="managerSelectListPage">취소</button>
	32	+ </div>
	33	+ </div>
	34	+ </div>
	35	+ </div>
	36	+
	37	+ <div class="modal-wrap" v-if="modal_update == true">
	38	+ <div class="modal-bg">
	39	+ </div>
	40	+ <div class="modal">
	41	+ <p>수정하신 정보를 <span class="txt-point">저장</span>하시겠습니까?</p>
	42	+ <div class="btn-wrap">
	43	+ <button type="button" class="green-btn" @click="managerUpdate">확인</button>
	44	+ <button type="button" class="gray-btn" @click="modal_update = false">취소</button>
	45	+ </div>
	46	+ </div>
	47	+ </div>
	48	+
	49	+ <div class="modal-wrap" v-if="modal_delete == true">
	50	+ <div class="modal-bg">
	51	+ </div>
	52	+ <div class="modal">
	53	+ <p>
	54	+ 해당 기능은 데이터 <span class="txt-point-red">삭제</span>기능입니다.<br>
	55	+ 데이터 <span class="txt-point-red">삭제</span> 후, 조회에서 해당 데이터를 확인할 수 없습니다.<br>
	56	+ <span class="txt-point-red">삭제</span>를 원하시면 아래 삭제 버튼을 눌러주세요.
	57	+ </p>
	58	+ <div class="btn-wrap">
	59	+ <button type="button" class="green-btn" @click="managerDelete">삭제</button>
	60	+ <button type="button" class="gray-btn" @click="modal_delete = false">취소</button>
	61	+ </div>
	62	+ </div>
	63	+ </div>
	64	+</template>
	65	+
	66	+<script>
	67	+import axios from 'axios';
	68	+import COMMON_UTIL from '../../../resources/js/commonUtil.ts';
	69	+import { useRoute } from 'vue-router';
	70	+
	71	+export default {
	72	+ data: () => {
	73	+ return {
	74	+ manager: {
	75	+ mngr_nm: null,
	76	+ mngr_telno: null,
	77	+ mngr_eml: null,
	78	+ mngr_ogdp_info: null
	79	+ },
	80	+ route: useRoute(),
	81	+
	82	+ telno_boolean: true,
	83	+ email_boolean: true,
	84	+ modal_update: false,
	85	+ modal_delete: false
	86	+ };
	87	+ },
	88	+ methods: {
	89	+
	90	+ managerSelectOne: function() {
	91	+ const vm = this;
	92	+ axios({
	93	+ url: '/managerSelectOne.json',
	94	+ method: 'post',
	95	+ headers: {
	96	+ "Content-Type": "application/json; charset=UTF-8"
	97	+ },
	98	+ data: vm.route.query
	99	+ }).then(function(response) {
	100	+ console.log("managerSelectOne - response : ", response.data);
	101	+ vm.manager = response.data;
	102	+ vm.manager.mngr_telno = vm.HyphenMinus(response.data.mngr_telno);
	103	+ }).catch(function(error) {
	104	+ console.log("managerSelectOne - error : ", error);
	105	+ });
	106	+ },
	107	+
	108	+ // 전화번호 '-' 추가 후 출력
	109	+ HyphenMinus: function (telno) {
	110	+ return COMMON_UTIL.HyphenMinus(telno);
	111	+ },
	112	+
	113	+ //전화번호 입력 시 자동 '-' 삽입
	114	+ getPhoneMask: function(telNumber) {
	115	+ var res = COMMON_UTIL.getMask(telNumber)
	116	+ this.manager.mngr_telno = res
	117	+ //서버 전송 값에는 '-' 를 제외하고 숫자만 저장
	118	+ this.manager.mngr_telno = this.telno.replace(/[^0-9]/g, '')
	119	+ },
	120	+
	121	+ emailCheck: function() {
	122	+ this.email_boolean = true;
	123	+ if (COMMON_UTIL.checkEmail(this.manager.mngr_eml) === false) this.email_boolean = false;
	124	+ },
	125	+
	126	+ phoneCheck: function() {
	127	+ this.telno_boolean = true;
	128	+ if (COMMON_UTIL.checkPhone(this.manager.mngr_telno) === false) this.telno_boolean = false;
	129	+ },
	130	+
	131	+ // 수정버튼 클릭 시 빈칸 검사
	132	+ managerUpdateCheck: function() {
	133	+
	134	+ if (COMMON_UTIL.isEmpty(this.manager.mngr_nm) === false) {
	135	+ alert('이름을 입력해주세요.');
	136	+ return false;
	137	+ }
	138	+
	139	+ if (COMMON_UTIL.isEmpty(this.manager.mngr_telno) === false) {
	140	+ alert('전화번호를 입력해주세요.');
	141	+ return false;
	142	+ }
	143	+
	144	+ if (COMMON_UTIL.checkPhone(this.manager.mngr_telno) === false) {
	145	+ alert('전화번호 형식을 확인해주세요.');
	146	+ return false;
	147	+ }
	148	+
	149	+ if (COMMON_UTIL.isEmpty(this.manager.mngr_eml) === false) {
	150	+ alert('이메일을 입력해주세요.');
	151	+ return false;
	152	+ }
	153	+
	154	+ if (COMMON_UTIL.checkEmail(this.manager.mngr_eml) === false) {
	155	+ alert('이메일 형식을 확인해주세요.');
	156	+ return false;
	157	+ }
	158	+
	159	+ if (COMMON_UTIL.isEmpty(this.manager.mngr_ogdp_info) === false) {
	160	+ alert('소속정보를 입력해주세요.');
	161	+ return false;
	162	+ }
	163	+
	164	+ this.modal_update = true
	165	+ },
	166	+
	167	+ // 횡단보도 유지보수 담당자 수정
	168	+ managerUpdate: function() {
	169	+ const vm = this;
	170	+ //서버 전송 값에는 '-' 를 제외하고 숫자만 저장
	171	+ vm.manager.mngr_telno = vm.manager.mngr_telno.replace(/[^0-9]/g, '');
	172	+
	173	+ axios({
	174	+ url: '/managerUpdate.json',
	175	+ method: 'post',
	176	+ herders: {
	177	+ 'Content-Type': "application/json; charset=UTF-8",
	178	+ },
	179	+ data: vm.manager
	180	+ }).then(function (response) {
	181	+ console.log("managerUpdate - response : ", response.data);
	182	+ let result = response.data;
	183	+ if (result > 0) {
	184	+ alert("횡단보도 유지보수 담당자 수정을 완료 하였습니다.");
	185	+ vm.managerSelectListPage();
	186	+ } else {
	187	+ alert('수정 실패, 관리자에게 문의해주세요.');
	188	+ vm.modal_update = false;
	189	+ }
	190	+ }).catch(function(error) {
	191	+ console.log("managerInsert - error : ", error);
	192	+ alert('횡단보도 유지보수 담당자 등록 오류, 관리자에게 문의해주세요.');
	193	+ vm.modal_update = false;
	194	+ })
	195	+ },
	196	+
	197	+ //횡단보도 유지보수 담당자 삭제
	198	+ managerDelete: function() {
	199	+ const vm = this;
	200	+
	201	+ axios({
	202	+ url: '/managerDelete.json',
	203	+ method: 'post',
	204	+ headers: {
	205	+ 'Content-Type': "application/json; charset=UTF-8",
	206	+ },
	207	+ data: vm.manager
	208	+ }).then(function(response) {
	209	+ console.log("managerDelete - response : ",response.data);
	210	+ let result = response.data;
	211	+ if(result > 0) {
	212	+ alert("횡단보도 유지보수 담당자 삭제를 완료 하였습니다.");
	213	+ vm.managerSelectListPage();
	214	+ } else {
	215	+ alert("삭제 실패, 관리자에게 문의해주세요.");
	216	+ vm.modal_delete = false;
	217	+ }
	218	+ }).catch(function (error) {
	219	+ console.log("managerDelete - error : ", error);
	220	+ alert("횡단보도 유지보수 담당자 삭제 오류, 관리자에게 문의해주세요.");
	221	+ vm.modal_delete = false;
	222	+ })
	223	+ },
	224	+
	225	+ //횡단보도 유지보수 관리자 목록 페이지 이동
	226	+ managerSelectListPage: function () {
	227	+ this.$router.push({ path : '/ChargeManagement.page'});
	228	+ },
	229	+ },
	230	+ watch: {},
	231	+ computed: {},
	232	+ mounted() {
	233	+ console.log("Main4 mounted");
	234	+ this.managerSelectOne();
	235	+ },
	236	+};
	237	+</script>
	238	+
	239	+<style scoped>
	240	+.wrap {
	241	+ width: 155rem;
	242	+ margin: 100px auto;
	243	+}
	244	+
	245	+.tab-wrap {
	246	+ margin-bottom: 30px;
	247	+}
	248	+
	249	+.tab-wrap ul {
	250	+ display: flex;
	251	+ gap: 2rem;
	252	+}
	253	+
	254	+.tab {
	255	+ display: inline-block;
	256	+ width: 20rem;
	257	+ height: 3rem;
	258	+ line-height: 3rem;
	259	+ text-align: center;
	260	+ border-radius: 5px;
	261	+ background: #fff;
	262	+ color: #949292;
	263	+ border: 1px solid #949292;
	264	+}
	265	+
	266	+.tab.active {
	267	+ background: #13833b;
	268	+ color: #fff;
	269	+ border-color: #13833b;
	270	+}
	271	+
	272	+h2.page-title {
	273	+ font-size: 24px;
	274	+}
	275	+
	276	+hr.margin {
	277	+ margin: 30px 0;
	278	+}
	279	+
	280	+.form-wrap {
	281	+ width: 52rem;
	282	+ margin: 0 auto;
	283	+}
	284	+
	285	+.idchk {
	286	+ margin-left: 1rem;
	287	+}
	288	+
	289	+.btn-wrap {
	290	+ margin-top: 30px;
	291	+ text-align: center;
	292	+}
	293	+
	294	+.btn-2 {
	295	+ display: inline-block;
	296	+ padding: 0.3rem 2rem;
	297	+ font-size: 13.333px;
	298	+ color: #000;
	299	+}
	300	+
	301	+.btn-wrap>*:not(:last-child) {
	302	+ margin-right: 2rem;
	303	+}
	304	+
	305	+.form-wrap .flex span {
	306	+ display: inline-block;
	307	+ width: 10rem;
	308	+ padding: 0 5px;
	309	+}
	310	+
	311	+.form-wrap input:not([type="radio"]) {
	312	+ min-width: 30rem;
	313	+}
	314	+
	315	+.form-wrap select {
	316	+ min-width: 9rem;
	317	+}
	318	+
	319	+.form-wrap select:not(:last-child) {
	320	+ margin-right: 1.5rem;
	321	+}
	322	+
	323	+.form-wrap input[type="radio"] {
	324	+ vertical-align: middle;
	325	+}
	326	+
	327	+.form-wrap label:not(:last-child) {
	328	+ margin-right: 2rem;
	329	+}
	330	+
	331	+.modal-wrap {
	332	+ position: fixed;
	333	+ top: 0;
	334	+ left: 0;
	335	+ right: 0;
	336	+ bottom: 0;
	337	+}
	338	+
	339	+.modal-bg {
	340	+ position: absolute;
	341	+ width: 100%;
	342	+ height: 100%;
	343	+ background-color: rgba(0, 0, 0, .6);
	344	+}
	345	+
	346	+.modal {
	347	+ position: absolute;
	348	+ top: 50%;
	349	+ left: 50%;
	350	+ transform: translate(-50%, -50%);
	351	+ max-width: 350px;
	352	+ padding: 5rem;
	353	+ z-index: 2;
	354	+ background-color: #fff;
	355	+ border-radius: 1rem;
	356	+ text-align: center;
	357	+}
	358	+
	359	+.modal .btn-wrap {
	360	+ margin-top: 15px;
	361	+ text-align: center;
	362	+}
	363	+.txt-point {
	364	+ color: #13833b;
	365	+}
	366	+
	367	+.txt-point-red {
	368	+ color: red;
	369	+}
	370	+</style>(No newline at end of file)

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,14 +1,18 @@
1	1	<template>
2	2	<div class="wrap">
3	3	<div class="board-wrap">
	4	+ <div>
	5	+ <h2 class="page-title">횡단보도 유지보수 담당자 관리</h2>
	6	+ </div>
	7	+ <hr class="margin">
4	8	<div class="search-wrap clear-fix">
5		- <div class="float-right">
	9	+ <div class="float-right flex gap">
6	10	<label>등록일자</label>
7	11	<input type="date" value-format="yyyyMMdd" v-model="managerListSearch.startDate"/>
8		- <span>~</span>
	12	+ <span> ~ </span>
9	13	<input type="date" value-format="yyyyMMdd" v-model="managerListSearch.endDate"/>
10	14	<select v-model="managerListSearch.searchType">
11		- <option value="">검색조건</option>
	15	+ <option value="null">검색조건</option>
12	16	<option value="mngr_nm">이름</option>
13	17	<option value="mngr_ogdp_info">소속정보</option>
14	18	</select>
...	...	@@ -115,8 +119,8 @@
115	119
116	120
117	121	//횡단보도 유지보수 관리자 상세조회 페이지 이동
118		- managerSelectOnePage: function (user) {
119		- this.$router.push({ path: '/', query: {}});
	122	+ managerSelectOnePage: function (manager) {
	123	+ this.$router.push({ path: '/ManagerModifyForm.page', query: {'mntnce_mngr_id':manager.mntnce_mngr_id}});
120	124	},
121	125
122	126	//횡단보도 유지보수 관리자 등록 페이지 이동
...	...	@@ -168,6 +172,14 @@
168	172	margin-right: 1rem;
169	173	}
170	174
	175	+h2.page-title {
	176	+ font-size: 24px;
	177	+}
	178	+
	179	+hr.margin {
	180	+ margin: 30px 0;
	181	+}
	182	+
171	183	table {
172	184	width: 100%;
173	185	text-align: center;

Delete comment