[vue: worklist 제작] 2-2. 진행상태 select (대기:기본, 진행중, 완료, 제외..)

상태(worklist-status) 셀에 select box로 해당 상태를 선택하면

그 해당 행의 색상을 변경하고 진행상황에 숫자가 카운트 한다(추후 4-1. 완료, 제외, total count 에서 진행)

 

 

Group.vue

<template>
  ...
    <tbody>
      <tr v-for="(iaValList) in iaGroup"  
        :class="`status__badge status__badge--${iaValList['worklist-status']}`">
        <td v-for="(iaVal, title) in iaValList" .. >
        
          <div v-if="title == 'worklist-status'">
            <select name="" id="" @change="updateStatus(iaValList,$event.target)" v-if="isModify">
              <option value="stay" :selected="iaValList['worklist-status'] == 'stay'">대기</option>
              <option value="ing" :selected="iaValList['worklist-status'] == 'ing'">진행중</option>
              <option value="complete" :selected="iaValList['worklist-status'] == 'complete'">완료</option>
              <option value="del" :selected="iaValList['worklist-status'] == 'del'">제외</option>
            </select>
            <span v-else>
              {{this.statusRename(iaVal)}}
            </span>
          </div>
   ...
 </template>
 
<script>
export default {
  ...
  methods: {
    sendNewIA : function(data){
      this.$store.dispatch('modiIA', data)
    },
    updateStatus : function(data,target){
      let row = data;
      row['worklist-status'] = target.value;
      this.sendNewIA(row);
    },
    statusRename : function(status){
      switch(status){
        case 'stay' : return "대기";
        break;
        case 'ing' : return "진행중";
        break;
        case 'complete' : return "완료";
        break;
        case 'del' : return "제외";
        break;
        default : return ''
      }
    }
  }
  ...
  </script>

 

 

수정모드일 경우에(v-if="isModify") selectbox가 보이고

수정모드가 아닐경우 worklist-status의 값이 텍스트로 보인다

statusRename으로 적절하게 워딩을 변경했다

 

 

worklist-status의 값을 stay, ing, complete, del로 정하고(필요에 따라 가감)

select box에서 상태값을 선택했을때 (@change) updateStatus를 실행한다

매개변수로 해당 열(tr부분)과 해당 select에 변경된 값을 가져갈 이벤트 타겟을 보낸다

<select name="" id="" @change="updateStatus(iaValList,$event.target)" v-if="isModify">

  <option value="stay" :selected="iaValList['worklist-status'] == 'stay'">대기</option>

  <option value="ing" :selected="iaValList['worklist-status'] == 'ing'">진행중</option>

  <option value="complete" :selected="iaValList['worklist-status'] == 'complete'">완료</option>

  <option value="del" :selected="iaValList['worklist-status'] == 'del'">제외</option>

</select>

 

해당열을 data로 받아서 그 worklist-status 값을 selectbox에서 선택한 value값으로 변경해준다

sendNewIA를 실행시켜 store에 보낸다.

sendNewIA : function(data){

  this.$store.dispatch('modiIA', data)

},

updateStatus : function(data,target){

  let row = data;

  row['worklist-status'] = target.value;

  this.sendNewIA(row);

},

store.js

const store = new Vuex.Store({
    state: {
		...
    },
    mutations: {
		...
        MODI_IA(state,{newIA,id}){
            const list = state.iaData.filter ((ia)=>{
                if(ia[id] == newIA[id]) {
                    ia = newIA
                }
            })
            state.iaData = list;
        }
    },
    actions: {
		...
        modiIA ({commit},newIA) {
            const id = newIA['SCREEN ID']
            commit('MODI_IA',{newIA,id});
        }
    }
})

modiIA

dispatch로 받은 row의 SCREEN ID를 추출해서 row와 함께 MODI_IA로 보낸다

 

MODI_IA

iaData를 순회하여 SCREEN ID가 같은 row를 찾아 새 row(newIA)로 변경하여 다시 덮어씌운다

 

 

 

 

worklist-status 값이 변경되면

해당 tr의 class가 변경되어 css에서 설정한 색상으로 변경된다

:class="`... status__badge--${iaValList['worklist-status']}`"