Commit @70e4e28e323645e5c942715b1aa3405a180b80c7

Y
List All
Feedback
- This Project
- All Projects

박정하 6 days ago

250805 박정하 사용자 목록 선택 모달 수정

@70e4e28e323645e5c942715b1aa3405a180b80c7

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,5 +1,5 @@
1	1	<template>
2		- <div class="popup-overlay" @click.self="$emit('close')">
	2	+ <div class="popup-overlay" @click.self="handleClose">
3	3	<div class="popup-content">
4	4	<div class="card">
5	5	<div class="card-body">
...	...	@@ -7,9 +7,8 @@
7	7	<div class="sch-form-wrap">
8	8	<div class="input-group">
9	9	<div class="sch-input">
10		- <input type="text" class="form-control" placeholder="직원명" v-model="request.searchText"
11		- @keyup.enter="findDatas">
12		- <button type="button" class="ico-sch" @click="findDatas">
	10	+ <input type="text" class="form-control" placeholder="직원명" v-model="searchParams.searchText" @keyup.enter="handleSearch">
	11	+ <button type="button" class="ico-sch" @click="handleSearch">
13	12	<SearchOutlined />
14	13	</button>
15	14	</div>
...	...	@@ -27,23 +26,22 @@
27	26	</tr>
28	27	</thead>
29	28	<tbody>
30		- <tr v-for="(item, idx) in users" :key="idx">
31		- <td>{{ item.clsfNm }}</td>
32		- <td>{{ item.rspofcNm }}</td>
33		- <td>{{ item.deptNm }}</td>
34		- <td>{{ item.userNm }}</td>
	29	+ <tr v-for="(employee, index) in employeeList" :key="index">
	30	+ <td>{{ employee.clsfNm }}</td>
	31	+ <td>{{ employee.rspofcNm }}</td>
	32	+ <td>{{ employee.deptNm }}</td>
	33	+ <td>{{ employee.userNm }}</td>
35	34	<td>
36		- <button type="button" class="btn sm sm secondary" @click="selectPerson(item)"
37		- :disabled="isUserSelected(item.userId)">선택</button>
	35	+ <button type="button" class="btn sm secondary" @click="handleSelectEmployee(employee)" :disabled="isEmployeeDisabled(employee.userId)"> 선택 </button>
38	36	</td>
39	37	</tr>
40	38	</tbody>
41	39	</table>
42	40	</div>
43		- <Pagination :search="request" @onChange="fnChangeCurrentPage" />
	41	+ <Pagination :search="searchParams" @onChange="handlePageChange" />
44	42	</div>
45	43	</div>
46		- <button @click="$emit('close')" class="close-btn">
	44	+ <button @click="handleClose" class="close-btn">
47	45	<CloseCircleFilled />
48	46	</button>
49	47	</div>
...	...	@@ -56,81 +54,95 @@
56	54	import { findUsersProc } from '../../../resources/api/user';
57	55
58	56	export default {
	57	+ name: 'EmployeeSelectionModal',
	58	+
59	59	components: {
60		- SearchOutlined, CloseCircleFilled,
	60	+ SearchOutlined,
	61	+ CloseCircleFilled,
61	62	Pagination
62	63	},
63	64
64	65	props: {
65		- lists: {
	66	+ // 이미 선택된 사용자 목록
	67	+ selectedEmployees: {
66	68	type: Array,
67	69	default: () => [],
	70	+ },
	71	+
	72	+ // 사용자 목록 내 유저아이디 key(혹은 column) 값
	73	+ idField: {
	74	+ type: String,
	75	+ default: 'userId'
68	76	}
69	77	},
70	78
	79	+ emits: ['close', 'select'],
	80	+
71	81	data() {
72	82	return {
73		- users: [],
	83	+ employeeList: [],
74	84
75		- request: {
76		- searchType: 'nm', // 검색조건 사용자 이름 고정
	85	+ searchParams: {
	86	+ searchType: 'nm', // 검색조건 (사용자 이름으로 고정)
77	87	searchText: null, // 검색어
78		- searchSttus: 1, // 회원상태 승인 고정
79		- searchUseAt: 'Y', // 사용여부 사용 고정
	88	+ searchSttus: 1, // 회원상태 (승인 고정)
	89	+ searchUseAt: 'Y', // 사용여부 (사용으로 고정)
80	90	},
81	91	}
82	92	},
83	93
84	94	computed: {
85		- selectedUserIds() {
86		- return new Set(this.lists.map(member => member.userId)); // userId로 변경
	95	+ selectedEmployeeIds() {
	96	+ return new Set(this.selectedEmployees.map(member => member[this.idField]));
87	97	}
88	98	},
89	99
90		- watch: {},
91		-
92		- created() { },
93		-
94	100	mounted() {
95		- this.findDatas(); // 목록 조회
96		-
	101	+ this.fetchEmployeeList();
97	102	},
98	103
99	104	methods: {
100		- // 목록 조회
101		- async findDatas() {
	105	+ // 직원 목록 조회
	106	+ async fetchEmployeeList() {
102	107	try {
103		- const response = await findUsersProc(this.request);
	108	+ const response = await findUsersProc(this.searchParams);
104	109	const result = response.data.data;
105	110
106		- this.users = result.users;
107		- this.request = result.search;
	111	+ this.employeeList = result.users;
	112	+ this.searchParams = result.search;
108	113	} catch (error) {
109		- if (error.response) {
110		- alert(error.response.data.message);
111		- } else {
112		- alert("에러가 발생했습니다.");
113		- }
114		- console.error(error.message);
	114	+ const message = error.response.data.message;
	115	+ alert(message);
	116	+ console.error(error);
115	117	}
116	118	},
117	119
118		- // 사용자 검증
119		- isUserSelected(userId) {
120		- return this.selectedUserIds.has(userId);
	120	+ // 검색 처리
	121	+ async handleSearch() {
	122	+ await this.fetchEmployeeList();
121	123	},
122	124
123		- // 승인자 선택
124		- selectPerson(item) {
125		- this.$emit('onSelected', item);
	125	+ // 직원 선택 불가 여부 확인
	126	+ isEmployeeDisabled(userId) {
	127	+ return this.selectedEmployeeIds.has(userId) \|\| this.$store.state.userInfo.userId === userId;
	128	+ },
	129	+
	130	+ // 직원 선택
	131	+ handleSelectEmployee(employee) {
	132	+ this.$emit('select', employee);
	133	+ this.handleClose();
	134	+ },
	135	+
	136	+ // 모달 닫기
	137	+ handleClose() {
126	138	this.$emit('close');
127	139	},
128	140
129		- // 페이지 이동
130		- fnChangeCurrentPage(currentPage) {
131		- this.request.currentPage = Number(currentPage);
	141	+ // 페이지 변경
	142	+ handlePageChange(currentPage) {
	143	+ this.searchParams.currentPage = Number(currentPage);
132	144	this.$nextTick(() => {
133		- this.findDatas();
	145	+ this.fetchEmployeeList();
134	146	});
135	147	},
136	148	}

Delete comment