add slicing worklist

worklist/components/listWorklist.vue

@@ -0,0 +1,131 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+
+            <v-data-table
+                :headers="headers"
+                :items="xpatients"
+                return-object
+                hide-default-footer
+            >
+                <template v-slot:headers="{ columns }">
+                    <tr>                        
+                        <td width="15%" class="pa-4 bg-secondary-lighten font-weight-bold">
+                            {{ $t('message.headerWorklist.test') }}
+                        </td>
+                        <td class="pa-1 bg-secondary-lighten font-weight-bold">
+                            <span class="position-relative" style="top:6px;">
+                                {{ $t('message.headerWorklist.patient') }}
+                            </span>
+                            <span class="text-black float-right mr-3" style="font-size:20px;">
+                                {{ staff }}
+                            </span>
+                        </td>
+                    </tr>
+                </template>
+
+                <template v-slot:item="{ item }">
+                    <tr>
+                        <td>
+                            <p class="mt-2 font-weight-medium text-uppercase">{{ item.T_TestName }}</p>
+                            <p class="text-grey">{{ item.T_TestCode }}</p>
+                            <p class="mb-2 text-black">Total pasien : {{ item.patients.length }}</p>
+                        </td>
+                        <td>
+                            <v-row class="flex-wrap">
+                                <v-sheet v-for="(p, i) in item.patients" v-bind:key="i" class="pr-3 row-pointer">
+                                    <v-sheet :class="p.is_received == 'Y' ? 'text-uppercase bg-primary-lighten text-primary box-y':'text-uppercase text-black box-n'">
+                                        <p class="font-weight-medium">{{ p.name }}</p>
+                                        <p >{{ p.number }}</p>
+                                    </v-sheet>
+                                </v-sheet>
+                            </v-row>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .row-pointer :hover {
+        cursor: pointer;
+    }
+
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
+    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th,
+    .v-table .v-table__wrapper > table > thead > tr > th {
+        border-bottom: dashed 1px #EEEEEE;
+    }
+
+    .box-y {
+        display: flex;
+        width: 202px;
+        padding: 8px 12px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        border-radius: 4px;
+        border: 1px solid #E3F2FD;
+    }
+    .box-n {
+        display: flex;
+        width: 202px;
+        padding: 8px 12px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        border-radius: 4px;
+        border: 1px solid #E0E0E0;
+    }
+
+</style>
+    
+<script type="module">
+    export default {
+        name: "ListPatient",
+        data() {
+            return {
+                staff: "BELUM ADA STAFF",
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'test',
+                        sortable: false,
+                        width: "15%",
+                        title: this.$t('message.headerWorklist.test'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'patient', 
+                        sortable: false,
+                        width: "85%",
+                        title: this.$t('message.headerWorklist.patient'),
+                        class: "bg-secondary-lighten font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xpatients() {
+                return this.$store.state.worklist.patients
+            },
+            selected_patient: {
+                get() {
+                    return this.$store.state.worklist.selected_patient
+                },
+                set(val) {
+                    this.$store.commit("worklist/setSelectedPatient", val)
+                }
+            }
+        },
+        methods: {
+
+        },
+        wacth: {
+
+        }
+    }
+</script>