FE_CPONE/process/one-process-resultentry-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)"
                   >
                   {{ short_name(props.item.M_PatientName) }}
               </td>
               <td class="text-xs-left pa-1" :class="getClass(props.item)"
                   >
                  {{ props.item.T_OrderHeaderLabNumber}}
               </td>
               <td class="text-xs-left pa-1" :class="getClass(props.item)" >
                  <v-textarea
                     style="text-align:right"
                      label=""
                      solo
                      rows=1
                      hide-details
                      class="text_on_right"
                      :value="props.item.T_OrderDetailResult" 
                      v-on:keyup="doChange($event.target.value,props.item)"
                      v-if="props.item.T_TestIsQuantitative == 'Y' && isShowResult(props.item) "
                      auto-grow
                      :readonly="props.item.T_OrderDetailVerification == 'Y'"
                      :flat="props.item.T_OrderDetailVerification == 'Y'"
                  ></v-textarea>
                  <v-select
                     :items="props.item.template"
                     label=""
                     item-value="T_ResultTemplateValue"
                     item-text="T_ResultTemplateValue"
                     v-if="props.item.is_quantitative == 'N' && isShowResult(props.item) "
                     solo
                     hide-details
                     :value="props.item.T_OrderDetailResult"
                     :disabled="props.item.T_OrderDetailVerification == 'Y'"
                     ></v-select>
                     <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-left pa-1 " :class="getClass(props.item)"
                   >
                  {{ props.item.T_OrderDetailNote}}
               </td>
            </template>
         </v-data-table>
      </v-card>
   </v-layout>
</template>

<style scoped>
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: "Nama",
               align: "left",
               sortable: false,
               value: "mr",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "No Reg",
               align: "left",
               sortable: false,
               value: "mr",
               width: "10%",
               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: "Catatan",
               align: "left",
               sortable: false,
               value: "mr",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
         isLoading: false
      };
   },

   methods : {
      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>