웹밤바

Status 컴포넌트에서 상태값버튼 클릭시 emi을 이용하여 App.vue로 보냈다 App.vue에서 상태값을 다시 Group 컴포넌트로 보내고 해당하는 row만 보여준다 App.vue 공통경로 : 읽기모드 수정모드 Group.vue template ... v-show="iaValList['worklist-status'] == this.sort || this.sort=='total'" 테이블의 tr이 worklist-status값이 Status.vue에서 클릭한 값과 같거나 total일 경우 보여진다 script

header영역에 worklist-status 상태에따라 완료, 대기, 삭제등을 카운트하고 해당 상태버튼을 클릭하면 그 항목만 보일수 있도록 한다 progressbar로 현 상황을 보기쉽게 정리하는 표 App.vue 공통경로 : .. updateList status 컴포넌트에서 group에 정렬할 기준을 받아서 this.sort에 담아준다 1. 진행률을 계산하여 보여준다 2. 완료, 제외, total을 계산하여 보여준다 3. 진행률을 progressBar 시각화하여 보여준다 Status.vue template 진행률 {{percent}}% 완료 : {{countComplete}} 제외 : {{countDel}} total : {{total}} script style .progressBar { width:..

App.vue 에서 다음과 같이 데이터를 받아왔다 Tab.vue {{item}} groupTitle을 tabLists로 받아와서 각 타이틀들을 button으로 감싸주고 click시 해당 그룹으로 이동할 method를 만든다 (quickMove) quickMove(item) 매개변수로 받아온 groupTitle__1... 은 컴포넌트안의 각 타이틀에 id값으로 같은 id사용하기로 한다 getElementById(item) 으로 group안의 타이틀 id를 찾고 위치를 찾는다(offsetTop) 나는 tab이 페이지에서 항상 띄어둘것이기 때문에 그만큼의 높이값을 빼주어(headerHeight) 스크롤이 tab바로 아래에 보여지게한다 window 스크롤값을 이동시킨다

path수정과 방식은 동일하다 수정모드일경우 수정할수 있는 textarea보여지고 아닐경우 텍스트로 worklist-note의 값이 보여진다 blur될경우 수정된 내용을 sendNewIA로 store의 IAdata에 수정한다. ... {{iaVal}} ... updatePath: function(data,target){ data['mode'] = ''; let row = data; row['worklist-path'] = target.value; this.sendNewIA(row); },

{{iaVal}} 링크수정 링크수정 버튼 클릭시 임시로 해당 row에 mode라는 항목과 modi 값을 넣어준다 이 값은 링크가 수정완료 되면 사라진다 pathModi : function(row){ row['mode'] = 'modi'; }, iaValList['mode']가 modi이면 input이 보여져서 경로를 수정할수 있다 수정이 완료되고 focus가 떠나면(blur) mode는 초기화하고 path에 새로운 경로는 sendNewIA로 store에 보내서 메인 IAdata를 수정한다 mode가 modi가 아니기때문에 input은 가려지고 a링크가 보여진다 updatePath: function(data,target){ data['mode'] = ''; let row = data; row['workli..

... {{iaVal}} ... :href="`${commonURL}${iaValList['worklist-path']}`" target="_blank" 클릭하면 공통 URL + worklist-path의 설정한 경로를 새창으로 이동 @mouseenter="previewLink(`${commonURL}${iaValList['worklist-path']}`, $event)" previewLink : function (link,event){ const el = event.target const iframe = document.createElement('iframe') iframe.src=`${link}.html`; iframe.width=1240; iframe.height=1500; iframe.setAtt..

worklist-path일 경우 작업물의 폴더와 파일경로를 a링크로 보여주고 마우스오버시 미리보기 레이어가 노출된다 https://shubamba.tistory.com/106?category=582020

상태(worklist-status) 셀에 select box로 해당 상태를 선택하면 그 해당 행의 색상을 변경하고 진행상황에 숫자가 카운트 한다(추후 4-1. 완료, 제외, total count 에서 진행) Group.vue ... 대기 진행중 완료 제외 {{this.statusRename(iaVal)}} ... 수정모드일 경우에(v-if="isModify") selectbox가 보이고 수정모드가 아닐경우 worklist-status의 값이 텍스트로 보인다 statusRename으로 적절하게 워딩을 변경했다 worklist-status의 값을 stay, ing, complete, del로 정하고(필요에 따라 가감) select box에서 상태값을 선택했을때 (@change) updateStatus를 실행..

Group.vue 상태 path 비고 {{ iaKey }} {{iaVal}} col__${iaKey.replace(/\s/g, '-')} 공백은 대쉬(-)로 치환하여 각 열마다 동일한 class를 부여하여 width등을 제어한다

랜딩 App.vue 에서 다음과 같이 데이터를 받아왔다 Group.vue script props:{ isModify : Boolean, iaList : Object, idx: Number }, data (){ return { iaGroup : Object.values(this.iaList)[0], iaKeys: this.$store.state.iaKeys, } }, template {{Object.keys(iaList)[0]}} 상태 path 비고 {{ iaKey }} {{iaVal}} 1. h2에 this.groups에 저장된 {groupTitle : arr} 의 key값을 넣어준다 id에 tab 컴포넌트에서 약속한 id값을 넣어준다. https://shubamba.tistory.com/109 [vue..