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">
      <Table
        :rows="rows"
        :columns="columns"
        :filter="filter"
        :visible-columns="visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="visibleColumns"
        :nornmalData="true"
        :refreshBtn="true"
        selection="multiple"
        v-model:selected="selected"
      >
        <template #columns="props">
          <q-tr :props="props"
            ><q-td
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              @click="selectData(props.row)"
              class="cursor-pointer"
            >
              <div v-if="col.name == 'no'" class="table_ellipsis">
                {{ props.rowIndex }}
              </div>
              <div v-else class="table_ellipsis">
                {{ col.value }}
              </div>
            </q-td></q-tr
          >
        </template>
      </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 Table from "@/modules/05_placement/components/pass/TableView.vue";

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 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 selectData = (row: any) => {};
</script>