[vue: worklist 제작] 4. 진행상황표

 

header영역에 worklist-status 상태에따라 완료, 대기, 삭제등을 카운트하고 

해당 상태버튼을 클릭하면 그 항목만 보일수 있도록 한다

progressbar로 현 상황을 보기쉽게 정리하는 표

 

App.vue

<template>
  <div>
      <header>
        <Status @updateList="updateList"/>
        <Tab :tabLists="groupTitles"/>

        공통경로 : <input type="text" v-model="this.commonURL">
      </header>
      ..
 </template>
 
 <script>
 ...
 
  methods : {
  ...
    updateList(status){
      this.sort = status;
    },
  }
 </script>

updateList

status 컴포넌트에서 group에 정렬할 기준을 받아서 this.sort에 담아준다

 

 

1. 진행률을 계산하여 보여준다

2. 완료, 제외, total을 계산하여 보여준다

3. 진행률을 progressBar 시각화하여 보여준다

 

 

Status.vue

template

<template>
  <div class="status">
      진행률 {{percent}}%
      <button type="button" @click="sortList('complete')">완료 : {{countComplete}}</button>
      <button type="button" @click="sortList('del')"> 제외 : {{countDel}}</button>
      <button type="button" @click="sortList('total')"> total : {{total}}</button>

      <div class="progressBar"><span :style="`width:${Math.floor(percent)}%`"></span></div>
  </div>
</template>

 

 

 

script

<script>
export default {
  name: 'status',
  data(){
    return {
      iaList:this.$store.state.iaData,
    }
  },
  computed:{
    total: function(){
      return this.iaList.length;
    },
    countComplete: function(){
      const list = this.iaList.filter((item)=>{
        return item['worklist-status']=='complete'
      })
      return list.length;
    },
    countDel:function(){
      const list = this.iaList.filter((item)=>{
        return item['worklist-status']=='del'
      })
      return list.length;
    },
    percent: function(){
      const calc = (this.countComplete*100) / (this.total - this.countDel);
      return calc.toFixed(2);
    }
  },
  methods:{
    sortList : function(sort){
      this.$emit('updateList',sort);
    },
  }
}
</script>

 

style

.progressBar {
    width: 100%;
    height: 3px;
    background: #eee;

    span {
        display: block;
        height: 3px;
        border-radius:2px;
        background-color: salmon;
    }
}

 

 

간단한 연산을 위해 computed를 사용했다

total: function(){

  return this.iaList.length;

},

iaList의 개수를 반환한다

 

 

 

countComplete: function(){

  const list = this.iaList.filter((item)=>{

    return item['worklist-status']=='complete'

  })

  return list.length;

},

worklist-status값이 complete인 경우 그 개수를 반환

 

 

countDel:function(){

  const list = this.iaList.filter((item)=>{

    return item['worklist-status']=='del'

  })

  return list.length;

},

worklist-status값이 complete인 경우 그 개수를 반환

 

 

 

percent: function(){

  const calc = (this.countComplete*100) / (this.total - this.countDel);

  return calc.toFixed(2);

}

합계에서 삭제된 부분을 제하고 완료된부분을 계산하여 백분률로 반환

 

 

 

 

버튼 클릭시 상태값에 해당하는 항목만 보여주기위해 sort를 $emit으로 보내준다

@click="sortList('complete')"

methods:{

  sortList : function(sort){

    this.$emit('updateList',sort);

  },

},