FE_CPONE/test/vuex/cpone-antrian/components/main.vue

<template>
  <!-- <v-dialog persistent v-model="dialogValidasi" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          <v-layout align-center justify-space-between row fill-height>
            <div>KONFIRMASI</div>
          </v-layout>
        </v-card-title>
        <v-card-text
          >Apakah anda yakin akan mevalidasi
          <kbd class="mx-2">{{ selectedPriceHeader.headerCode }}</kbd>
          <span>{{ selectedPriceHeader.headerName }}</span> ?
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="error"
            :disabled="loading"
            flat
            @click="dialogValidasi = false"
          >
            BATAL
          </v-btn>
          <v-btn
            color="success"
            :disabled="loading"
            flat
            @click="validateHeader()"
          >
            YAKIN
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog> -->
  <v-layout
    class="fill-height"
    style="
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      justify-items: center;
    "
    column
  >
    <one-settings v-if="screen==='setting'"></one-settings>
    <one-display v-if="screen==='display'"></one-display>
  </v-layout>
</template>
<style scoped></style>
<script>
  // const { data } = require("./onePriceHeader.vue");

  module.exports = {
    components: {
      "one-settings": httpVueLoader("./settings.vue"),
      "one-display": httpVueLoader("./display.vue"),
      //   "one-dialog-alert": httpVueLoader("./oneDialogAlert.vue"),
    },
    async mounted() {
      this.loading = true;
      await this.$store.dispatch("queue/getStation");
      await this.$store.dispatch("queue/getbranch");
      await this.$store.dispatch("queue/getSetup");
      await this.$store.dispatch("queue/getsetuponsite");

      let dataLocal = localStorage.getItem("queue-west");
      let local = JSON.parse(dataLocal);
      var elem = document.documentElement;
      if (dataLocal != null) {
        await this.$store.dispatch("queue/getAntrian");
        this.screen = "display";
        this.loading = false;
      }
      // if (elem.requestFullscreen) {
      //   elem.requestFullscreen();
      // } else if (elem.webkitRequestFullscreen) {
      //   /* Safari */
      //   elem.webkitRequestFullscreen();
      // } else if (elem.msRequestFullscreen) {
      //   /* IE11 */
      //   elem.msRequestFullscreen();
      // }
    },
    methods: {},
    computed: {
      screen: {
        get() {
          return this.$store.state.queue.screen;
        },
        set(val) {
          this.$store.commit("queue/update_screen", val);
        },
      },
      title: {
        get() {
          return this.$store.state.queue.title;
        },
        set(val) {
          this.$store.commit("queue/update_title", val);
        },
      },
      loading: {
        get() {
          return this.$store.state.queue.loading;
        },
        set(val) {
          this.$store.commit("queue/update_loading", val);
        },
      },
      stationList: {
        get() {
          return this.$store.state.queue.stationList;
        },
        set(val) {
          this.$store.commit("queue/update_stationList", val);
        },
      },
      selectedStation: {
        get() {
          return this.$store.state.queue.selectedStation;
        },
        set(val) {
          this.$store.commit("queue/update_selectedStation", val);
        },
      },
      branchList: {
        get() {
          return this.$store.state.queue.branchList;
        },
        set(val) {
          this.$store.commit("queue/update_branchList", val);
        },
      },
      selectedBranch: {
        get() {
          return this.$store.state.queue.selectedBranch;
        },
        set(val) {
          this.$store.commit("queue/update_selectedBranch", val);
        },
      },
    },
    watch: {},
    data() {
      return {
        selected_delivery: {},
        search_company: "",
        search_test: "",
        menufilterdatestart: false,
        menufilterdateend: false,
        date: new Date().toISOString().substr(0, 10),
        items: [],
        menustartdate: false,
        menuenddate: false,
        errors: [],
        sheet: false,
        indeterminatex: false,
        checkednotall: false,
        bar_chx_all: false,
        selected_barcode: [],
        dialogtimeline: false,
        search_doctor: "",
        dialogWarning: false,
        dialogWarningMsg: "",
        rules: {
          min: (v) => v > 0 || "Minimum value 1",
          maxPersen: (v) => v <= 100 || "Maximum value 100",
        },
        headers: [
          {
            text: "STATUS",
            align: "center",
            sortable: false,
            value: "lab",
            width: "10%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "TEST",
            align: "center",
            sortable: false,
            value: "lab",
            width: "25%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "AMOUNT",
            align: "center",
            sortable: false,
            value: "lab",
            width: "15%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "DISKON",
            align: "center",
            sortable: false,
            value: "name",
            width: "15%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "DISKON RP",
            align: "center",
            sortable: false,
            value: "name",
            width: "15%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "TOTAL",
            align: "center",
            sortable: false,
            value: "status",
            width: "20%",
            class: "pa-2 blue darken-2 white--text",
          },
        ],
      };
    },
  };
</script>