hrms-mgt/src/modules/05_placement/components/OrderPlacement/step/step02.vue

<template>
  <div>
    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
      <div class="col-12 row q-py-sm items-center">
        <q-btn flat round color="primary" @click="refresh" icon="mdi-refresh">
          <q-tooltip>อัปเดตข้อมูล</q-tooltip>
        </q-btn>
        <q-space />
        <div class="items-center" style="display: flex">
          <!-- ค้นหาข้อความใน table -->
          <q-input
            standout
            dense
            v-model="filter"
            ref="filterRef"
            outlined
            debounce="300"
            placeholder="ค้นหา"
            style="max-width: 200px"
            class="q-ml-sm"
          >
            <template v-slot:append>
              <q-icon v-if="inputfilter == ''" name="search" />
              <q-icon
                v-if="inputfilter !== ''"
                name="clear"
                class="cursor-pointer"
                @click="resetFilter"
              />
            </template>
          </q-input>
          <!-- แสดงคอลัมน์ใน table -->
          <q-select
            v-model="visibleColumns"
            :display-value="$q.lang.table.columns"
            multiple
            outlined
            dense
            :options="columns"
            options-dense
            option-value="name"
            map-options
            emit-value
            style="min-width: 150px"
            class="gt-xs q-ml-sm"
          />
        </div>
      </div>
      <q-table
        flat
        bordered
        dense
        :rows="rows"
        :columns="columns"
        :visible-columns="visibleColumns"
        :filter="filter"
        row-key="name"
        selection="multiple"
        v-model:selected="selected"
        class="custom-header-table"
        :pagination-label="paginationLabel"
      >
        <template v-slot:header-selection="scope">
          <q-checkbox keep-color color="primary" v-model="scope.selected" />
        </template>

        <template v-slot:body-selection="scope">
          <q-checkbox
            keep-color
            color="primary"
            :model-value="scope.selected"
            @update:model-value="
              (val, evt) => {
                Object.getOwnPropertyDescriptor(scope, 'selected').set(
                  val,
                  evt
                );
              }
            "
          />
        </template>
        <template v-slot:body-cell="props">
          <q-td :props="props">
            <div v-if="props.cols.name == 'no'">
              {{ props.rowIndex + 1 }}
            </div>
            <div v-else @click="click(props)">
              {{ props.value }}
            </div>
          </q-td>
        </template>
      </q-table>
    </div>
    <q-separator />
    <div class="flex justify-end q-px-md q-gutter-sm">
      <q-btn
        flat
        round
        color="public"
        icon="mdi-content-save-outline"
        @click="next"
      >
        <q-tooltip>บันทึก</q-tooltip>
      </q-btn>
      <q-btn flat round color="primary" icon="chevron_left" @click="previous">
        <q-tooltip>ย้อนกลับ</q-tooltip>
      </q-btn>
      <q-btn flat round color="primary" icon="chevron_right" @click="next">
        <q-tooltip>ต่อไป</q-tooltip>
      </q-btn>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import type { QInput } from "quasar";

const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});

const next = () => props.next();
const previous = () => props.previous();

const $q = useQuasar();

const filterRef = ref<QInput>();
const filter = ref<string>("");
const visibleColumns = ref<String[]>([
  "name",
  "calories",
  "fat",
  "carbs",
  "protein",
  "sodium",
  "calcium",
  "iron",
]);
const columns = [
  {
    name: "desc",
    required: true,
    label: "Dessert (100g serving)",
    align: "left",
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true,
  },
  {
    name: "calories",
    align: "center",
    label: "Calories",
    field: "calories",
    sortable: true,
  },
  { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
  { name: "carbs", label: "Carbs (g)", field: "carbs" },
  { name: "protein", label: "Protein (g)", field: "protein" },
  { name: "sodium", label: "Sodium (mg)", field: "sodium" },
  {
    name: "calcium",
    label: "Calcium (%)",
    field: "calcium",
    sortable: true,
    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
  },
  {
    name: "iron",
    label: "Iron (%)",
    field: "iron",
    sortable: true,
    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
  },
];

const rows = [
  {
    name: "Frozen Yogurt",
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    sodium: 87,
    calcium: "14%",
    iron: "1%",
  },
  {
    name: "Ice cream sandwich",
    calories: 237,
    fat: 9.0,
    carbs: 37,
    protein: 4.3,
    sodium: 129,
    calcium: "8%",
    iron: "1%",
  },
  {
    name: "Eclair",
    calories: 262,
    fat: 16.0,
    carbs: 23,
    protein: 6.0,
    sodium: 337,
    calcium: "6%",
    iron: "7%",
  },
  {
    name: "Cupcake",
    calories: 305,
    fat: 3.7,
    carbs: 67,
    protein: 4.3,
    sodium: 413,
    calcium: "3%",
    iron: "8%",
  },
  {
    name: "Gingerbread",
    calories: 356,
    fat: 16.0,
    carbs: 49,
    protein: 3.9,
    sodium: 327,
    calcium: "7%",
    iron: "16%",
  },
  {
    name: "Jelly bean",
    calories: 375,
    fat: 0.0,
    carbs: 94,
    protein: 0.0,
    sodium: 50,
    calcium: "0%",
    iron: "0%",
  },
  {
    name: "Lollipop",
    calories: 392,
    fat: 0.2,
    carbs: 98,
    protein: 0,
    sodium: 38,
    calcium: "0%",
    iron: "2%",
  },
  {
    name: "Honeycomb",
    calories: 408,
    fat: 3.2,
    carbs: 87,
    protein: 6.5,
    sodium: 562,
    calcium: "0%",
    iron: "45%",
  },
  {
    name: "Donut",
    calories: 452,
    fat: 25.0,
    carbs: 51,
    protein: 4.9,
    sodium: 326,
    calcium: "2%",
    iron: "22%",
  },
  {
    name: "KitKat",
    calories: 518,
    fat: 26.0,
    carbs: 65,
    protein: 7,
    sodium: 54,
    calcium: "12%",
    iron: "6%",
  },
];
const selected = ref([]);

const click = (e: any) => {
  console.log(e);
};

const selectData = (row: any) => {};

const refresh = () => {};

const paginationLabel = (start: string, end: string, total: string) => {
  //   if (props.paging == true)
  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
  //   else
  return start + "-" + end + " ใน " + total;
};

const resetFilter = () => {
  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
  filter.value = "";
  filterRef.value!.focus();
};
</script>
<style lang="scss">
.icon-color {
  color: #4154b3;
}
.custom-header-table {
  max-height: 64vh;
  .q-table tr:nth-child(odd) td {
    background: white;
  }
  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }
  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }
  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>