Commit @5ee298db87a190f94c9165c2eb7e815f3bdee913

하석형 05-16

250516 하석형 부서 사용자 다중 등록 기능

@5ee298db87a190f94c9165c2eb7e815f3bdee913

cf5ef58

5ee298d

client/views/pages/adm/departmentManagement/DepartmentManagement.vue

--- client/views/pages/adm/departmentManagement/DepartmentManagement.vue

+++ client/views/pages/adm/departmentManagement/DepartmentManagement.vue


       <button class="btn-close" @click="modalClose"></button>
     </template>
     <div class="tbl-wrap">
-      <ListTable
+      <!-- <ListTable
         :className="'data cursor'"
         :colgroup="mbrColgroup"
         :thead="mbrThead"
         :tbody="mbrTbody"
-        @listClick="selectMbr"
+        @listClick="addMbr"
       >
+      </ListTable> -->
+      <ListTable
+        :className="'data'"
+        :colgroup="mbrColgroup"
+        :thead="mbrThead"
+        :tbody="mbrTbody"
+      >
+        <template v-slot:checkbox="{ row, idx }">
+          <div class="form-check">
+            <input
+            type="checkbox"
+            :id="'checkAdd_' + idx"
+            class="checkbox md"
+            :checked="selectedAddMbr.includes(row.loginId)"
+            @change="() => checkboxAddChange(row, idx)"
+          />
+          <label :for="'checkAdd_' + idx"></label>
+          </div>
+        </template>
       </ListTable>
     </div>
+    <template v-slot:footer>
+      <button class="btn sm tertiary" @click="modalClose">취소</button>
+      <button class="btn sm main" @click="addMbr">추가</button>
+    </template>
   </Modal>
 </template>
 

       colgroup: ["5%", "15%", "20%", "20%", "20%"], // 부서관련 등록된 사용자 테이블 생성
       thead: ["선택", "아이디", "이름", "연락처", "이메일"], // 부서관련 등록된 사용자 테이블 생성
       tbody: [],
-      mbrColgroup: ["20%", "20%", "20%", "20%"], // 부서관련 등록할 사용자 테이블 생성
-      mbrThead: ["아이디", "이름", "연락처", "이메일"], // 부서관련 등록할 사용자 테이블 생성
+      mbrColgroup: ["20%", "20%", "20%", "20%", "20%"], // 부서관련 등록할 사용자 테이블 생성
+      mbrThead: ["선택", "아이디", "이름", "연락처", "이메일"], // 부서관련 등록할 사용자 테이블 생성
       mbrTbody: [],
       iconPath: 'ico_team',
       userListModal: false,

       deptMbr: [], // 부서에 등록된 사용자 목록
       mbrList: [], // 부서에 등록되지 않은 사용자 목록 [ 부서 사용자 등록을 위한 사용자 목록 ]
       selectedMbr: [], // 부서에 등록된 사용자 중 지정된 사용자 [삭제용도]
+      selectedAddMbr: [], // 부서에 등록할 사용자 [등록용도]
       selectedDeptId: null, // 선택된 부서
       selectedAuthrt: "", // 부서 권한
       newDept: {}, // 신규 부서 등록

         }
       }
     },
+    // 추가할 사용자 정보 체크
+    checkboxAddChange(row, idx) {
+      const selectIdx = this.selectedAddMbr.indexOf(row.loginId);
+      if (selectIdx === -1) {
+        this.selectedAddMbr.push(row.loginId);
+      } else {
+        this.selectedAddMbr.splice(selectIdx, 1);
+      }
+    },
     // 사용자 부서 등록
-    async selectMbr(idx) {
-      if (!confirm("해당 사용자를 등록하시겠습니까?")) return false;
-      try {
-        const params = {
+    async addMbr(idx) {
+      if (this.selectedAddMbr.length <= 0) {
+        alert("등록할 사용자를 추가하세요.");
+        return;
+      }
+      // if (!confirm("해당 사용자를 등록하시겠습니까?")) return false;
+      
+      // 회원 아이디 추출
+      const addMbr = this.mbrList
+        .filter((mbr) => this.selectedAddMbr.includes(mbr.lgnId))
+        .map((mbr) => ({
+          ...mbr,
           deptId: this.selectedDeptId,
-          mbrId: this.mbrList[idx].mbrId,
-        };
-        const res = await deptMbrSaveProc(params);
+      }));
+      try {
+        const res = await deptMbrSaveProc(addMbr);
         alert(res.data.message);
         if (res.status == 200) {
           this.fnFindByMbr();
+          this.modalClose();
         }
       } catch (error) {
         const errorData = error.response.data;

Add a comment

Open 0
Closed 0

List

...	...	@@ -172,15 +172,38 @@
172	172	<button class="btn-close" @click="modalClose"></button>
173	173	</template>
174	174	<div class="tbl-wrap">
175		- <ListTable
	175	+ <!-- <ListTable
176	176	:className="'data cursor'"
177	177	:colgroup="mbrColgroup"
178	178	:thead="mbrThead"
179	179	:tbody="mbrTbody"
180		- @listClick="selectMbr"
	180	+ @listClick="addMbr"
181	181	>
	182	+ </ListTable> -->
	183	+ <ListTable
	184	+ :className="'data'"
	185	+ :colgroup="mbrColgroup"
	186	+ :thead="mbrThead"
	187	+ :tbody="mbrTbody"
	188	+ >
	189	+ <template v-slot:checkbox="{ row, idx }">
	190	+ <div class="form-check">
	191	+ <input
	192	+ type="checkbox"
	193	+ :id="'checkAdd_' + idx"
	194	+ class="checkbox md"
	195	+ :checked="selectedAddMbr.includes(row.loginId)"
	196	+ @change="() => checkboxAddChange(row, idx)"
	197	+ />
	198	+ <label :for="'checkAdd_' + idx"></label>
	199	+ </div>
	200	+ </template>
182	201	</ListTable>
183	202	</div>
	203	+ <template v-slot:footer>
	204	+ <button class="btn sm tertiary" @click="modalClose">취소</button>
	205	+ <button class="btn sm main" @click="addMbr">추가</button>
	206	+ </template>
184	207	</Modal>
185	208	</template>
186	209
...	...	@@ -220,8 +243,8 @@
220	243	colgroup: ["5%", "15%", "20%", "20%", "20%"], // 부서관련 등록된 사용자 테이블 생성
221	244	thead: ["선택", "아이디", "이름", "연락처", "이메일"], // 부서관련 등록된 사용자 테이블 생성
222	245	tbody: [],
223		- mbrColgroup: ["20%", "20%", "20%", "20%"], // 부서관련 등록할 사용자 테이블 생성
224		- mbrThead: ["아이디", "이름", "연락처", "이메일"], // 부서관련 등록할 사용자 테이블 생성
	246	+ mbrColgroup: ["20%", "20%", "20%", "20%", "20%"], // 부서관련 등록할 사용자 테이블 생성
	247	+ mbrThead: ["선택", "아이디", "이름", "연락처", "이메일"], // 부서관련 등록할 사용자 테이블 생성
225	248	mbrTbody: [],
226	249	iconPath: 'ico_team',
227	250	userListModal: false,
...	...	@@ -230,6 +253,7 @@
230	253	deptMbr: [], // 부서에 등록된 사용자 목록
231	254	mbrList: [], // 부서에 등록되지 않은 사용자 목록 [ 부서 사용자 등록을 위한 사용자 목록 ]
232	255	selectedMbr: [], // 부서에 등록된 사용자 중 지정된 사용자 [삭제용도]
	256	+ selectedAddMbr: [], // 부서에 등록할 사용자 [등록용도]
233	257	selectedDeptId: null, // 선택된 부서
234	258	selectedAuthrt: "", // 부서 권한
235	259	newDept: {}, // 신규 부서 등록
...	...	@@ -493,18 +517,36 @@
493	517	}
494	518	}
495	519	},
	520	+ // 추가할 사용자 정보 체크
	521	+ checkboxAddChange(row, idx) {
	522	+ const selectIdx = this.selectedAddMbr.indexOf(row.loginId);
	523	+ if (selectIdx === -1) {
	524	+ this.selectedAddMbr.push(row.loginId);
	525	+ } else {
	526	+ this.selectedAddMbr.splice(selectIdx, 1);
	527	+ }
	528	+ },
496	529	// 사용자 부서 등록
497		- async selectMbr(idx) {
498		- if (!confirm("해당 사용자를 등록하시겠습니까?")) return false;
499		- try {
500		- const params = {
	530	+ async addMbr(idx) {
	531	+ if (this.selectedAddMbr.length <= 0) {
	532	+ alert("등록할 사용자를 추가하세요.");
	533	+ return;
	534	+ }
	535	+ // if (!confirm("해당 사용자를 등록하시겠습니까?")) return false;
	536	+
	537	+ // 회원 아이디 추출
	538	+ const addMbr = this.mbrList
	539	+ .filter((mbr) => this.selectedAddMbr.includes(mbr.lgnId))
	540	+ .map((mbr) => ({
	541	+ ...mbr,
501	542	deptId: this.selectedDeptId,
502		- mbrId: this.mbrList[idx].mbrId,
503		- };
504		- const res = await deptMbrSaveProc(params);
	543	+ }));
	544	+ try {
	545	+ const res = await deptMbrSaveProc(addMbr);
505	546	alert(res.data.message);
506	547	if (res.status == 200) {
507	548	this.fnFindByMbr();
	549	+ this.modalClose();
508	550	}
509	551	} catch (error) {
510	552	const errorData = error.response.data;

Delete comment