From 748182670570c01cae5a8d281fcb00bee30fd56a Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 27 Jun 2023 15:16:53 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20UI=20=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=AA?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87=E0=B8=AA=E0=B8=B3=E0=B9=80=E0=B8=99=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OrderPlacement/detailOrderPlacement.vue   |   2 +-
 .../components/OrderPlacement/step/step03.vue | 336 +++++++++++++++++-
 2 files changed, 335 insertions(+), 3 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 90a07b710..baea12128 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -38,7 +38,7 @@
 
       <q-step
         :name="3"
-        title="เลือก"
+        title="เลือกรายชื่อส่งสำเนาคำสั่ง"
         prefix="3"
         :done="step > 3"
         :header-nav="step > 3"
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index db43bbf6f..b2bc1cc9f 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -1,6 +1,119 @@
 <template>
   <div>
-    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">03</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
+          size="12px"
+          flat
+          round
+          color="add"
+          @click="clickAdd"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+        <!-- การ์ดเพิ่มหน่วยงาน-->
+        <q-form ref="myForm"> </q-form>
+        <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>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
+        <q-table
+          flat
+          bordered
+          dense
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+          v-model:selected="selected"
+          class="custom-header-table"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="props.col.name == 'notification'">
+                <q-select
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  multiple
+                  :outlined="true"
+                  dense
+                  use-chips
+                  lazy-rules
+                  :readonly="!true"
+                  :borderless="!true"
+                  v-model="props.value"
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทาง'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทาง'}`]"
+                  :label="`${'เลือกช่องทาง'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="notificationOption"
+                  option-value="id"
+                  input-debounce="0"
+                  color="primary"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-black">
+                        ไม่พบข้อมูลที่ค้นหา
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <div v-else @click="click(props)">
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </q-table>
+      </div>
+    </div>
     <q-separator />
     <div class="flex justify-end q-px-md q-gutter-sm">
       <q-btn
@@ -22,7 +135,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
+import { useQuasar, QInput, QForm } from "quasar";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import router from "@/router";
 
 const props = defineProps({
   next: {
@@ -37,4 +153,220 @@ 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[]>([
+  "no",
+  "idcard",
+  "name",
+  "position",
+  "department",
+  "notification",
+]);
+const columns = [
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idcard",
+    sortable: true,
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+  },
+  {
+    name: "department",
+    align: "left",
+    label: "หน่วยงาน",
+    field: "department",
+    sortable: true,
+  },
+  {
+    name: "notification",
+    align: "left",
+    label: "ช่องทางการส่งสำเนา",
+    field: "notification",
+    sortable: true,
+  },
+];
+
+const rows = [
+  {
+    no: "0ac56905-1a74-4606-a120-233340adde95",
+    name: "นางนัทธ์ เหล่าสกุล",
+    idcard: "9158455632145",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Email ",
+  },
+  {
+    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
+    name: "นางขรรค์ จันทรสมบัติ",
+    idcard: "8558455632126",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Inbox",
+  },
+  {
+    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
+    name: "นางโอภาส จรัสวงศ์",
+    idcard: "8158455635425",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Notification",
+  },
+  {
+    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
+    name: "นางธิญา หงษ์ทอง",
+    idcard: "4558455632145",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Notification",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางธนวิทย์ พิกุลเทพ",
+    idcard: "5542455632145",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Inbox ",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางหนึ่ง สตาภิรมย์",
+    idcard: "7448455632145",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Inbox ",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางสัจพร คมคาย",
+    idcard: "1236455632145",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Inbox ",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางตุลยากร ปรีดาศิริกุล",
+    idcard: "1523455632145",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Inbox ",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางบัลลังค์ จิรวาณิชย์",
+    idcard: "1258455632145",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Inbox ",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางคมคาย เรืองรังสรรค์",
+    idcard: "8548455632145",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Inbox ",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางพรทิพา คมคาย",
+    idcard: "6598455632145",
+    position: "ผู้อำนวยการ",
+    department: "กลุ่มงานช่วยบริหาร",
+    notification: "Inbox ",
+  },
+];
+// const clickAdd = () => {
+//   router.push({ name: "OrderplacementDetail" });
+// };
+const selected = ref([]);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const notificationOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+
+const click = (e: any) => {
+  console.log(e);
+};
+
+const myForm = ref<QForm | null>(null);
+const clickAdd = async () => {
+  await myForm.value!.validate().then(async (result: boolean) => {
+    // console.log(result);
+  });
+};
+
+const selectData = (row: any) => {};
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </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>