FE_CPONE/process/one-process-verification-px/components/oneResultList.vue

<template>
   <v-layout class="fill-height" column>
      <v-card class="grow">
            <hr style="border-top:0px solid #c8c8c8;" />
         <v-data-table
            :headers="headers" :items="orders"
            :loading="isLoading"
            hide-actions class="tblresult xelevation-1">
            <template slot="items" slot-scope="props">
               <td class="text-xs-left pl-2 pa-1" :class="getClass(props.item)"
                   >
                  {{ props.item.T_OrderHeaderLabNumber}}
               </td>
                     <span class="d_right" :class="getResultClass(props.item)">
                        {{ labelResult(props.item) }}
                     </span>
               </td>
               <td class="text-xs-left pa-1" :class="getClass(props.item)"
                   >
                  {{ props.item.Nat_UnitName}}
               </td>
               <td class="text-xs-left pa-1 " :class="getClass(props.item)"
                   >
                  {{ props.item.T_OrderDetailNormalValueNote}}
               </td>
               <td class="text-xs-right pa-1 pr-2" :class="getClass(props.item)" >
                  <v-spacer></v-spacer>
                  <div>
                     <!--
                   <v-btn  fab :dark="verification(props.item) == 'N'" 
                          small :color="verification(props.item) == 'N' ? 'red' : 'white'" class="ma-0 float-left" 
                          @click="verification_change(props.index)">
                     <v-icon>clear</v-icon>
                   </v-btn>

                   <v-btn  fab :dark="verification(props.item) == 'Y'" 
                          small :color="verification(props.item) == 'N' ? 'green' : 'white'" class="ml-1 ma-0 float-left" 
                          @click="verification_change('Y', props.index)" >
                      <v-icon>done</v-icon>
                   </v-btn>
                     -->
                   <v-btn fab :dark="props.item.sample_handling_perfect == 'Y'" small :color="delta_color(props.item)+' lighten-2'" 
                          class="ma-0 ml-3" 
                          @click="select(props.index, props.item); trend(props.item.id)">
                      <v-icon>equalizer</v-icon>
                   </v-btn>
                   <v-btn fab 
                          :dark="props.item.sample_handling_perfect == 'Y'" small :color="delta_color(props.item)+' lighten-2'" class="ma-0" 
                          @click="select(props.index, props.item); delta(props.item.id)">
                      <span class="icon-delta"></span>
                   </v-btn>
                  </div>
               </td>
            </template>
         </v-data-table>
      </v-card>
   </v-layout>
</template>

<style scoped>


.searchbox .v-btn {
min-height:60px;
}
table.v-table tbody td,table.v-table tbody th {
height: 40px;
}

table.v-table thead tr {
height: 40px;
}

.btn_rerun {
position: absolute; 
top: 4px;
right: 2px 
}

.v-btn--floating {
border-radius: 0%; 
}
.cb-auto-ver {
float: left;
}


span.d_right {
   display:inline-block;
   width:100%;
   padding-right:15px;
   text-align:right;
}
.text_on_right textarea {
   text-align:right;
}
td.selected {
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}
table.v-table thead tr {
   height: 40px;
}
</style>

<script>
module.exports = {
   data() {
      return {
         query: "",
         items: [],
         headers: [
            {
               text: "No Reg",
               align: "left",
               sortable: false,
               value: "mr",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "Hasil",
               align: "right",
               sortable: false,
               value: "mr",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "Unit",
               align: "left",
               sortable: false,
               value: "mr",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "Nilai Normal",
               align: "left",
               sortable: false,
               value: "mr",
               width: "30%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "Verifikasi",
               align: "center",
               sortable: false,
               value: "mr",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
         isLoading: false
      };
   },

   methods : {
      verification(item) {
         return 'Y'
      },
      delta_color(item) {
         return {}
      },
      doChange(v,item) {
         let orders = this.$store.state.list_px.orders
         let idx = _.findIndex(orders,function(order) { return order.T_OrderDetailID == item.T_OrderDetailID })
         if (idx > -1) {
            orders[idx].T_OrderDetailResult = v
            this.$store.commit("list_px/update_orders",orders)
         }
      },
      getResultClass(it) {
         return {}
         if (it.SampleStatus == "OK") {
            if (it.T_OrderSampleWorklistReceive== 'N') return {};
            if (it.IsPreAnalytic == "N") return {"red--text":true};
            return {};
         }
         if (it.IsPreAnalytic == "N") return {"red--text":true};
      },
      oneMoment : function(d) {
         return window.oneMoment(d)
      },
      short_name(p) {
         if (p.length > 20) return p.substr(0,20) + '...'
            return p
      },
      getClass(item) {
         let cls={ 'amber lighten-4' : false }
         if (item.Nat_TestID  == this.$store.state.list_px.selected_px.Nat_TestID ) {
            cls = { 'amber lighten-4' : true }
         }
         return cls
      },
      isShowResult(it) {
         if (it.SampleStatus == "OK") {
            if (it.T_OrderSampleWorklistReceive== 'N') return false;
            if (it.IsPreAnalytic == "N") return false;
            return true;
         }
         return false;
      },
      labelResult(it) {
         if (it.SampleStatus != "OK") return it.SampleStatus;
         if (it.IsPreAnalytic == "N" ) return "Belum Pre-Analytic";
         if (it.T_OrderSampleWorklistReceive == "N") return it.T_OrderDetailResult;
         return "";
      }
   },
   computed : {
      orders() {
         return this.$store.state.list_px.orders
      }
   },
   mounted() {
      this.$store.dispatch("list_px/search_order")
   }
}
</script>