✅ 프로젝트 개요
✅ 프로젝트 일정
✅ 프로젝트 참여인원
ERD관리 및 DB설계 담당을 했으며,
담당 기능으로는 전자결재의 모든 기능과 메인페이지를 맡았습니다
✅ DB 접속 환경
- 아이디 : workit
- 비번 : finally!
- 호스트 : 14.36.141.71
- 포트 : 8877
✅ 개발 환경
✅ 전자결재 기능 구현 화면
우선 전자결재에 대한 용어를 설명하도록 하겠습니다
전자결재에는 토글로 5가지의 서브 메뉴로 나누어집니다
결재신청 버튼을 누르면 결재양식 선택 모달창이 열립니다
(기안서 종류 3가지 -> 연장근무신청서, 근태신청서, 지출결의서)
원하는 기안서를 선택하면 각 결재서의 양식이 보입니다
기안서 신청 -> (해당 기안서를 임시저장 및 기안서를 신청할 수 있음)
밑에 사진은 연장근무신청서의 UI양식을 만들었습니다
결재선 설정 버튼을 누르면 [결재선]과 [참조선]을 선택하는 모달창이 나옴
해당 부서를 클릭하면 AJAX 방식으로 부서마다 인원들이 조회됨
각 선마다 원하는 인원을 체크하여, 화살표버튼으로 추가 및 삭제 가능
(JS로 같은라인에 동일인물 중복처리 불가능 + 결재선과 참조선라인에 동일 인물 추가 불가능
+ 본인은 해당 부서에 조회되지 않도록 예외처리 함)
결재선 등록을 누르면 해당 결재선 라인에 있는 순서대로
밑에 있는 사진과같이 양식에 서명란이 추가되는것을 볼 수 있다
( 저 상태에서 다시 결재선 설정을하면, 위 사진과 결재선과 참조선이 그대로 들어가있는 화면이 나오며, 다시 결재선과 참조선을 설정할 수 있다)
다음 화면을위해 내용들을 입력한 후 임시저장버튼을 눌러보겠습니다
다시 전자결재의 임시저장함 서브메뉴로 들어가면
밑에 사진과 같이 임시저장된 문서를 조회할 수 있습니다
임시저장된 문서를 조회하면 밑에 사진과 같이 기존에 저장한 내용들과 결재선, 참조선 등
동적으로 태그들을 생성되도록 구현하였습니다.
저 화면에서 바꿀 내용들을 수정하여 다시 임시저장 및 결재상신을 할 수 있으며
처음부터 다시 작성하고싶으면, 삭제버튼을 통해 임시저장된 기안서를 삭제할 수 있습니다
다음 화면을위해 이제 해당 내용을 바탕으로 결재를 상신하도록 하겠습니다
본인이 작성한 기안서를 조회하기 위해서 기안문서함 페이지로 넘어가도록 하겠습니다
기안 문서함페이지는 10개 기준으로 페이징 처리를 진행하였습니다
밑에사진은 방금 위에서 작성한 기안서를 등록했으므로, 결재대기 상태로 기안서 남아있는것을 확인할 수 있습니다. 기안서의 상태는 [결재대기, 결재처리중, 반려, 완료]로 구분되어있으며 각 상태는 나중화면에서 보여주도록 하겠습니다
1. 결재 대기 : 연보라색 글씨
2. 결재 처리중 : 평범한 하늘색 글씨
3. 반려 : 빨간색 글씨
4. 완료 : 초록색 글씨
결재대기 상태인 기안서를 조회하면 밑에와 같은 화면이 나오며
결재대기인 기안서 즉 1차 결재자가 서명하지 않았을 경우
철회버튼을 통해 해당 문서를 임시저장함으로 보낼 수 있습니다
다음 화면을 위해서 첫번째 결재자인 최강사 아이디로 보여주겠습니다
최강사 아이디로 로그인하면, 결재대기문서함에서 1건이 조회되는것을 볼 수 있습니다
해당 문서를 조회하면 밑에와 같은 화면이 나오며 결재대기문서에서는
[결재반려, 결재승인, 전결] 세가지의 선택지가 나옵니다
우선 결재승인을 진행하겠습니다
다시 기안서를 작성한 최주영으로 로그인하면
밑 사진과같이 결재대기 -> 결재처리중으로 바뀐것을 볼 수 있습니다
기안서를 조회하면 다음과 같이 최강사의 서명란에 도장이 찍혀있는것을 볼 수 있으며,
결재승인을 진행했기때문에, 철회버튼이 없어진것을 볼 수 있습니다.
다음은 장행정 팀장으로 로그인해보겠습니다
이번에는 결재선의 서명순서가 장행정팀장이기 때문에 결재대기문서에 조회되는것을 볼 수 있다
-> 최강사가 결재하지않으면 [장행정, 김구디] 사람은 결재를 할 수 없다
이번에는 전결버튼을 눌러보겠습니다
전결버튼을 누르고, 기안서를 작성한 최주영으로 로그인하여 기안문서함으로 들어가면
결재처리중 -> 완료로 바뀐것을 볼 수있다
전결 버튼으로 인해서, 김구디사원이 서명하지않았지만, 모두 서명이 되어있는것을 볼 수 있다
다음은 다시 (최주영)아이디로 근태신청서를 올리도록 하겠습니다
근태신청서의 양식은 다음과 같으며, 5개의 종류중 원하는 양식을 선택할 수 있습니다
[연차,보건,경조] 의 경우 -> input type date ~ input type date 로 선택하도록 진행
[반차, 외출] 의 경우 -> input type date + input type time ~ input type time 으로 선택되도록 진행
일자는 1박2일로 신청을 진행해보겠습니다
최강사 로그인하여, 결재대기문서에서 방금 작성한 기안서를 조회하고
반려버튼을 누르면, 아래 사진과같이 반려메시지를 입력하라는 모달창이 열립니다
메시지를 입력후 반려처리를 진행해보겠습니다
반려처리를 하고, 기안서를 작성한 최주영 아이디로 로그인하면
밑에 사진과같이, 결재대기중 -> 반려 로 바뀐것을 볼 수 있다
반련된 기안서를 조회하면
해당 결재대상자가 작성한 반려 사유가 오른쪽상단에 나오며
반려처리된 기안문서의 경우, 재작성 버튼을 통해 다시 작성할 수 있습니다
다음은 지출결의서 양식입니다
위와 내용이 중복되므로, 이하 설명은 생략하겠습니다
이 지출결의서의 첨부파일과, 참조선의 대상에 대해 집중적으로 보시기바랍니다
우선 최주영의 아이디로 지출결의서를 등록하도록 하겠습니다
다시 첫번째 결재자인 최강사 아이디로 로그인한 후, 결재대기문서에서 기안서를 조회하면
다음과 같은 사진이 나오는데, 반려와 승인은 위에서 설명했으므로 생략하겠습니다
첨부파일 부분의 버튼을 클릭하면, 다음과 같이 파일이 다운로드 되는것을 볼 수 있습니다
다음은 참조선 대상인 김사원으로 로그인 한 후, 참조문서함에 들어온 화면입니다
해당 문서를 조회하면, 결재를 하지못하지만, 해당 문서를 조회만 가능합니다
마지막으로 메인페이지 부분입니다
게시판의 경우, 각 부서별 작성한 게시물들만 볼 수 있는 목록입니다 (등록일 기준 5개만 조회)
공지사항은 부서별 상관없이 다 조회(등록일 기준 5개만 조회)
미결재의 경우 본인이 결재대상인 문서들이 조회됩니다 (등록일 기준 5개만 조회)
신청한 강의실의 경우 본인이 신청한 강의실들이 조회됩니다 (등록일 기준 5개만 조회)
ToDo 리스트의 경우 본인이 해야할 것들을 최대 5개까지 작성할 수 있으며
-> ajax로 [추가,삭제] 가능
모든 메뉴들은 더보기(+)를 누르면 해당 목록이 있는곳으로 이동되며
각 메뉴안의 글들을 선택하면, 해당 상세페이지로 이동됩니다
곧 그룹웨어 프로젝트를 들어가서 검색을 통해 들어왔어요 !
깔끔하네요 :)