แก้ไข ออกคำสั่ง

src/modules/05_placement/components/OrderPlacement/step/step02.vue

@@ -1,37 +1,95 @@
 <template>
   <div>
     <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
-      <Table
+      <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"
-        :filter="filter"
         :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
+        :filter="filter"
-        v-model:inputvisible="visibleColumns"
+        row-key="name"
-        :nornmalData="true"
-        :refreshBtn="true"
         selection="multiple"
         v-model:selected="selected"
+        class="custom-header-table"
+        :pagination-label="paginationLabel"
       >
-        <template #columns="props">
+        <template v-slot:header-selection="scope">
-          <q-tr :props="props"
+          <q-checkbox keep-color color="primary" v-model="scope.selected" />
-            ><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>
+
+        <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">
@@ -55,7 +113,8 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import Table from "@/modules/05_placement/components/pass/TableView.vue";
+import { useQuasar } from "quasar";
+import type { QInput } from "quasar";
 
 const props = defineProps({
   next: {
@@ -71,6 +130,9 @@ const props = defineProps({
 const next = () => props.next();
 const previous = () => props.previous();
 
+const $q = useQuasar();
+
+const filterRef = ref<QInput>();
 const filter = ref<string>("");
 const visibleColumns = ref<String[]>([
   "name",
@@ -223,5 +285,55 @@ const rows = [
 ];
 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>