westone-ui/list-patient/components/lists.vue

<template>
  <div>
    <v-container class="bg-white rounded-lg" fluid>
      <div
        class="bg-secondary-lighten rounded-lg d-flex justify-space-between pa-5 mb-5"
      >
        <h3 class="primary-lighten">
          {{ $t("message.tableListPatient.title") }}
        </h3>
        <h3 class="primary-lighten">{{ patients.length }}</h3>
      </div>
      <v-data-table
        v-model:page="page"
        height="275px"
        :items="patients"
        :headers="headers"
        :items-per-page="itemsPerPage"
        hide-default-footer
        class="row-pointer"
      >
        <template v-slot:headers="{ columns }">
          <tr>
            <template v-for="column in columns" :key="column.key">
              <td
                :class="column.class"
                :style="{ width: column.width, textAlign: column.align }"
              >
                <span>{{ column.title }}</span>
              </td>
            </template>
          </tr>
        </template>
        <template v-slot:item="{ item }">
          <tr>
            <td>
              <v-btn
                icon="mdi-pencil"
                variant="flat"
                :class="[
                  'rounded-0 w-100 h-100 pa-2 text-white',
                  { 'bg-info': item.process },
                  { 'bg-secondary': !item.process },
                ]"
                @click="onSelectPatient(item)"
              ></v-btn>
            </td>
            <td>
              <p class="font-weight-medium">{{ item.no }}</p>
            </td>
            <td>
              <div>
                <p class="font-weight-medium mt-2">{{ item.noReg1 }}</p>
                <p
                  v-if="item.noReg2"
                  class="font-weight-medium text-error mb-2"
                >
                  {{ item.noReg2 }}
                </p>
              </div>
            </td>
            <td>
              <div>
                <p class="mt-2 mb-2" style="font-size: 12px">{{ item.name }}</p>
                <p class="mb-2">
                  <v-chip label size="small">
                    {{ item.staff }}
                  </v-chip>
                </p>
                <p class="mb-2">
                  <v-chip label size="small">
                    {{ item.orderTime }}
                  </v-chip>
                </p>
              </div>
            </td>
            <td>
              <p style="font-size: 12px">{{ item.agreement }}</p>
            </td>
            <td>
              <div>
                <p class="mt-2" style="font-size: 12px">{{ item.doctor.no }}</p>
                <p class="mb-2" style="font-size: 12px">
                  {{ item.doctor.name }}
                </p>
              </div>
            </td>
            <td>
              <div>
                <p
                  v-for="result in item.result"
                  :key="result"
                  style="font-size: 12px"
                >
                  {{ result }}
                </p>
              </div>
            </td>
            <td>
              <div>
                <p
                  v-for="inspection in item.inspection"
                  :key="inspection"
                  style="font-size: 12px"
                >
                  {{ inspection }}
                </p>
              </div>
            </td>
            <td>
              <div>
                <p v-for="delivery in item.delivery">
                  <v-chip variant="flat" color="primary" class="rounded">{{
                    delivery
                  }}</v-chip>
                </p>
              </div>
            </td>
            <td>
              <div>
                <p class="font-weight-medium">{{ item.total.all }}</p>
                <p v-if="item.total.disc" class="font-weight-medium text-error">
                  {{ item.total.disc }}
                </p>
              </div>
            </td>
          </tr>
        </template>

        <template v-slot:bottom>
          <div class="text-center pt-2">
            <v-pagination v-model="page" :length="pageCount"></v-pagination>
          </div>
        </template>
      </v-data-table>
    </v-container>
  </div>

  <info-dialog></info-dialog>
  <change-birthday-dialog></change-birthday-dialog>
  <barcode-dialog></barcode-dialog>
  <material-dialog></material-dialog>
</template>

<script>
import InfoDialogComponent from "./infoDialog.vue";
import ChangeBirthdayDialogComponent from "./changeBirthdayDialog.vue";
import BarcodeDialogComponent from "./barcodeDialog.vue";
import MaterialDialogComponent from "./materialDialog.vue";

export default {
  name: "MainLists",
  components: {
    "info-dialog": InfoDialogComponent,
    "change-birthday-dialog": ChangeBirthdayDialogComponent,
    "barcode-dialog": BarcodeDialogComponent,
    "material-dialog": MaterialDialogComponent,
  },
  mounted() {},
  data() {
    return {
      page: 1,
      itemsPerPage: 3,
      headers: [
        {
          title: "",
          align: "start",
          sortable: false,
          key: "actionButton",
          width: "4%",
          class: "",
        },
        {
          title: this.$t("message.tableListPatient.no"),
          align: "center",
          sortable: false,
          key: "no",
          width: "4%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.tableListPatient.noreg"),
          align: "start",
          sortable: false,
          key: "noreg",
          width: "12%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.tableListPatient.name"),
          align: "start",
          sortable: false,
          key: "noreg",
          width: "12%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.tableListPatient.agreement"),
          align: "start",
          sortable: false,
          key: "noreg",
          width: "14%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.tableListPatient.doctor"),
          align: "start",
          sortable: false,
          key: "noreg",
          width: "12%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.tableListPatient.result"),
          align: "start",
          sortable: false,
          key: "noreg",
          width: "14%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.tableListPatient.inspection"),
          align: "start",
          sortable: false,
          key: "noreg",
          width: "12%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.tableListPatient.delivery"),
          align: "start",
          sortable: false,
          key: "noreg",
          width: "12%",
          class: "font-weight-bold",
        },
        {
          title: this.$t("message.tableListPatient.total"),
          align: "start",
          sortable: false,
          key: "noreg",
          width: "4%",
          class: "font-weight-bold",
        },
      ],
    };
  },
  computed: {
    patients() {
      return this.$store.state.collection.patients;
    },
    pageCount() {
      return Math.ceil(this.patients.length / this.itemsPerPage);
    },
  },
  methods: {
    onSelectPatient(patient) {
      this.$store.commit("setMenuSelectedPatient", true);
      this.$store.commit("setSelectedPatient", patient);
    },
  },
};
</script>

<style scoped>
.row-pointer >>> tbody tr :hover {
  cursor: pointer;
}
</style>