update UI - แสดงรายชื่อผู้สอบผ่านในรอบของการสอบคัดเลือก/แข่งขันที่ได้จากระบบ

ปรับในส่วนของการแสดงผลข้อมูลให้ครบตาม design
ปรับให้เป็นหน้าฟอร์มกรณีอยู่ในโหมดแก้ไข
ปรับการแสดงสถานะและ Action ให้ถกต้อง

src/modules/05_placement/components/pass/Detail.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+
+import { defineAsyncComponent } from "@vue/runtime-core";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const year = ref<string>("2566");
+const round = ref<string>("1");
+const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
+
+const itemTop = reactive([
+  {
+    id: 1,
+    num: 7,
+    title: "จำนวนทั้งหมด",
+    color: "#016987",
+  },
+  {
+    id: 2,
+    num: 1,
+    title: "ยังไม่บรรจุ",
+    color: "#02A998",
+  },
+  {
+    id: 3,
+    num: 5,
+    title: "เตรียมบรรจุ",
+    color: "#2EA0FF",
+  },
+  {
+    id: 4,
+    num: 1,
+    title: "บรรจุเเล้ว",
+    color: "#4154B3",
+  },
+  {
+    id: 5,
+    num: 0,
+    title: "สละสิทธิ์",
+    color: "#FF5C5F",
+  },
+]);
+const AddTablePosition = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/pass/Table.vue")
+);
+</script>
+
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
+    <div class="toptitle">
+      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+      รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
+    </div>
+    <q-space />
+
+    <div class="q-py-md row col-12 no-wrap">
+      <hr class="q-separator q-separator--vertical gt-sm" aria-orientation="vertical" style="width: 2px" />
+
+      <div class="col-12 row bg-white">
+        <div class="fit q-pa-md">
+          <div class="row col-12 q-col-gutter-md fit">
+            <div class="" v-for="item in itemTop" :key="item.id" style="width: 15%">
+              <div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm">
+                <div class="col-12 row items-center q-pa-sm">
+                  <div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">
+                    {{ item.num }}
+                  </div>
+                  <div class="col-12 text-dark ellipsis">
+                    {{ item.title }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
+    <div>
+      <AddTablePosition class="q-pa-none" />
+    </div>
+  </q-card>
+</template>
+
+<style lang="scss">
+.cardNum {
+  border-radius: 5px;
+  /* border-left: 3px solid #016987 !important; */
+  padding-left: 8px;
+}
+</style>

src/modules/05_placement/components/pass/DialogFooter.vue

@@ -0,0 +1,61 @@
+<template>
+  <q-card-actions class="text-primary">
+    <q-space />
+    <q-btn v-if="!editvisible" flat round :disabled="editvisible" :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit" icon="mdi-pencil-outline">
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+    </q-btn>
+    <div v-else>
+
+      <q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
+        icon="mdi-content-save-outline">
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card-actions>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  editvisible: Boolean,
+  modalEdit: Boolean,
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits([
+  "update:editvisible",
+  "update:next",
+  "update:previous",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const cancel = async () => {
+  props.cancel();
+};
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+const checkSave = () => {
+  props.validate();
+  props.save();
+
+};
+</script>

src/modules/05_placement/components/pass/DialogHeader.vue

@@ -0,0 +1,28 @@
+<template>
+  <q-toolbar>
+      <q-toolbar-title class="text-subtitle2 text-bold">{{ title }}</q-toolbar-title>
+    <q-btn
+    icon="close"
+    unelevated
+    round
+    dense
+    @click="close"
+    style="color: #ff8080; background-color: #ffdede"
+      />
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+
+import { ref, useAttrs } from "vue";
+const props = defineProps({
+  title: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+
+</script>

src/modules/05_placement/components/pass/Table.vue

@@ -0,0 +1,514 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Table from "@/modules/05_placement/components/pass/TableView.vue";
+import { useQuasar, QForm } from "quasar";
+import type { TableName } from "@/modules/05_placement/interface/request/placement";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+import type { QTableProps } from "quasar";
+import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const editvisible = ref<boolean>(false);
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+const visibleColumns = ref<String[]>([]);
+const store = usePlacementDataStore();
+const filter = ref<string>("");
+const { placementData } = store;
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const modal = ref<boolean>(false); //modal add detail
+const modal_right = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const Name = ref<string>();
+const positionMasterUserNote = ref<string>();
+const $q = useQuasar(); // show dialog
+const files = ref<File[]>([]);
+const appointModal = ref<boolean>(false);
+const appoint = ref<any>({
+  Code: '',
+  UnitName: '',
+  PositionNo: '',
+  PositionType: '',
+  PositionManage: '',
+  PositionTypeManage: '',
+  PositionLine: '',
+  Major: '',
+  PositionLevel: ''
+});
+
+const saveAppoint = () => {
+  console.log("save appoint===>", appoint.value);
+}
+
+const savePostpone = () => {
+  const dataPost = { note: positionMasterUserNote.value, files: files }
+  console.log("save postpone===>", dataPost);
+  positionMasterUserNote.value = '';
+  modal_right.value = false;
+}
+
+const saveDisclaim = () => {
+  const dataPost = { note: positionMasterUserNote.value }
+  console.log("save disclaim===>", dataPost);
+  positionMasterUserNote.value = '';
+  modal_right.value = false;
+}
+
+const clickEditRow = () => {
+  editRow.value = true;
+};
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const selectData = (props: TableName) => {
+  if (editvisible.value == true) {
+    // editRow.value = false;
+    // modalEdit.value = true;
+    modal.value = false;
+    // edit.value = true;
+    // position.value = props.position;
+    Name.value = props.Name;
+    // ExamOrder.value = props.ExamOrder;
+    // Unit.value = props.Unit;
+    // ReportingDate.value = props.ReportingDate;
+    // BMAOfficer.value = props.BMAOfficer;
+    // Status.value = props.Status;
+    // checkList.value = props.checkList;
+  } else {
+    // editRow.value = false;
+    // modalEdit.value = true;
+    modal.value = true;
+    // edit.value = true;
+  }
+};
+
+const getNumFile = ref(0);
+const editDetail = (props: TableName, action: "cancel" | "wait") => {
+
+  if (action === "cancel") {
+    getNumFile.value = 0;
+    editRow.value = false;
+    modalEdit.value = false;
+    modal_right.value = true;
+    edit.value = true;
+    Name.value = props.Name;
+  } else if (action === "wait") {
+    getNumFile.value = 1;
+    editRow.value = false;
+    modalEdit.value = true;
+    modal_right.value = true;
+    edit.value = true;
+    Name.value = props.Name;
+  }
+
+};
+placementData.mappingPosition.columns.length == 0
+  ? (visibleColumns.value = [
+    "position",
+    "Name",
+    "ExamOrder",
+    "Unit",
+    "ReportingDate",
+    "BMAOfficer",
+    "Status",
+    "checkList",
+  ])
+  : (visibleColumns.value = placementData.mappingPosition.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "position",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "Name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "Name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ExamOrder",
+    align: "left",
+    label: "ลำดับที่สอบได้",
+    sortable: true,
+    field: "ExamOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "Unit",
+    align: "left",
+    label: "หน่วยงานที่รับการบรรจุ",
+    sortable: true,
+    field: "Unit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ReportingDate",
+    align: "left",
+    label: "วันที่รายงานตัว",
+    sortable: true,
+    field: "ReportingDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "BMAOfficer",
+    align: "left",
+    label: "ข้าราชการฯ กทม.",
+    sortable: true,
+    field: "BMAOfficer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "Status",
+    align: "left",
+    label: "สถานะการบรรจุ",
+    sortable: true,
+    field: "Status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<TableName[]>([
+  {
+    Id: "4016500103241",
+    position: 1,
+    Name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    ExamOrder: 1,
+    unitId: "",
+    UnitGroup: "",
+    Unit: "",
+    ReportingDate: "-", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "สละสิทธิ์",
+    checkList: null,
+  },
+  {
+    Id: "4016500092355",
+    position: 2,
+    Name: "นางสาวรัชภรณ์ ภักดี",
+    ExamOrder: 2,
+    unitId: "",
+    UnitGroup: "",
+    Unit: "",
+    ReportingDate: "", //วันที่รายงานตัว
+    BMAOfficer: false,
+    Status: "ยังไม่บรรจุ",
+    checkList: null,
+  },
+  {
+    Id: "4016500086436",
+    position: 3,
+    Name: "นางสาวภาพรรณ ลออ",
+    ExamOrder: 3,
+    unitId: "",
+    UnitGroup: "",
+    Unit: "",
+    ReportingDate: "", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "ยังไม่บรรจุ",
+    checkList: null,
+  },
+
+  {
+    Id: "4016500073585",
+    position: 4,
+    Name: "นางกติมา พนมเทียน",
+    ExamOrder: 4,
+    unitId: "",
+    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+    Unit: "นักทรัพยากรบุคคล (กบห.1)",
+    ReportingDate: "2023-05-30", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "เตรียมบรรจุ",
+    checkList: null,
+  },
+
+  {
+    Id: "4016500053234",
+    position: 5,
+    Name: "นางสาววิยฎา ทองเอียด",
+    ExamOrder: 5,
+    unitId: "",
+    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+    Unit: "นักทรัพยากรบุคคล (กบห.2)",
+    ReportingDate: "2023-05-30", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "เตรียมบรรจุ",
+    checkList: null,
+  },
+  {
+    Id: "4016500042345",
+    position: 6,
+    Name: "นายศรุณ เจริญเมือง",
+    ExamOrder: 6,
+    unitId: "",
+    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+    Unit: "นักทรัพยากรบุคคล (กบห.3)",
+    ReportingDate: "2023-05-30", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "เตรียมบรรจุ",
+    checkList: null,
+  },
+  {
+    Id: "401650002245",
+    position: 7,
+    Name: "นายอภินัน บอบู่",
+    ExamOrder: 7,
+    unitId: "",
+    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+    Unit: "นักทรัพยากรบุคคล (กบห.4)",
+    ReportingDate: "2023-05-30", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "บรรจุเเล้ว",
+    checkList: null,
+  },
+]);
+
+const clickCancel = async () => {
+  editvisible.value = false;
+};
+
+const openAppointModal = (value: any) => {
+  appointModal.value = true
+  editRow.value = true;
+};
+
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal_right.value = false;
+      modal.value = false;
+      appointModal.value = false;
+    });
+  } else {
+    modal_right.value = false;
+    modal.value = false;
+    appointModal.value = false;
+  }
+};
+
+const save = () => {
+  console.log("rows===>", rows.value)
+}
+</script>
+<template>
+  <q-form ref="myForm">
+    <Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
+      :boss="true" :saveNoDraft="true" :add="save">
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
+
+          <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 == 'BMAOfficer'" class="table_ellipsis">
+              <div>
+                <q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
+                <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+              </div>
+            </div>
+            <div v-else-if="col.name == 'Name'" class="table_ellipsis">
+              {{ col.value }}
+              <p>{{ props.row.Id }}</p>
+            </div>
+            <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+
+              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
+                <div @click="openAppointModal">
+                  <q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
+                    <template v-slot:prepend>
+                      <q-icon name="bookmark" color="primary" />
+                    </template>
+                  </q-input>
+                </div>
+              </div>
+              <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
+              <div v-else>
+                {{ props.row.UnitGroup }}
+                <p>{{ col.value }}</p>
+              </div>
+            </div>
+            <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
+              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
+                <datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
+                  v-model="props.row.ReportingDate">
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
+                      <template v-slot:prepend>
+                        <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
+              <div v-else>
+                {{ mixin.date2Thai(col.value) }}
+              </div>
+            </div>
+            <div v-else class="table_ellipsis">
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
+              <div></div>
+            </div>
+            <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
+              <q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
+                @click="editDetail(props.row, 'wait')" />
+              <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')" />
+            </div>
+            <div v-else align="right">
+              <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')" />
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </Table>
+  </q-form>
+
+  <q-dialog v-model="appointModal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
+        <q-separator />
+        <q-card-section>
+
+          <div class="row q-col-gutter-xs">
+            <div class="col">
+              <q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
+            </div>
+            <div class="col">
+              <q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
+            </div>
+          </div>
+
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
+            </div>
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
+            </div>
+          </div>
+
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
+            </div>
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
+            </div>
+          </div>
+
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col">
+              <q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
+            </div>
+            <div class="col">
+              <q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
+            </div>
+          </div>
+
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col-6">
+              <q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
+            </div>
+          </div>
+
+        </q-card-section>
+
+        <q-separator />
+        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+        <DialogHeader :title="`รายละเอียดของ${Name}`" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm"> text 5 </q-card-section>
+        <q-separator />
+        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" />
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="modal_right" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+              :borderless="!edit" v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`"
+              @update:modelValue="clickEditRow" type="textarea" />
+            <q-file v-if="getNumFile == 1" v-model="files" dense :label="'เลือกไฟล์เอกสารหลักฐาน'" outlined use-chips
+              multiple class="q-py-sm">
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit"
+          :save="modalEdit ? savePostpone : saveDisclaim" />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.q-table p {
+  margin-bottom: 0;
+  color: #818181;
+}
+</style>

src/modules/05_placement/components/pass/TableView.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="q-px-md q-pb-md">
+    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+      <q-btn size="12px" v-if="!editvisible" flat round :disabled="editvisible"
+        :color="editvisible ? 'grey-7' : 'primary'" @click="clickEdit" icon="mdi-pencil-outline">
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round v-if="editvisible" :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'red'"
+        @click="clickCancel" icon="mdi-undo">
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+      <div class="q-px-sm">
+        <q-btn flat round :disabled="editvisible == false" :color="editvisible == false ? 'grey-7' : 'public'"
+          @click="add" icon="mdi-content-save-outline">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <div class="row items-center" style="display: flex" v-if="publicData == false && publicNoBtn == false"></div>
+
+        <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" 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 :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
+          multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
+          style="min-width: 150px" class="gt-xs q-ml-sm" />
+      </div>
+    </div>
+
+    <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
+      <span class="text-subtitle1">{{ titleText }}</span>
+
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <!-- ค้นหาข้อความใน table -->
+        <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" 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 :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
+          multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
+          style="min-width: 150px" class="gt-xs q-ml-sm" />
+      </div>
+    </div>
+    <q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
+      :virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" :pagination="initialPagination"
+      :rows-per-page-options="[0]">
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width v-if="history == true" />
+        </q-tr>
+      </template>
+      <template #body="props">
+        <slot v-bind="props" name="columns"></slot>
+      </template>
+    </q-table>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogMessage } = mixin;
+const editvisible = ref<boolean>(false);
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const modalPublish = ref<boolean>(false);
+const modalDelete = ref<boolean>(false);
+const props = defineProps({
+  inputfilter: String,
+  inputvisible: Array,
+  inputvisibleFilter: String,
+  editvisible: Boolean,
+  titleText: String,
+  optionsFilter: {
+    type: Array,
+    defualt: [],
+  },
+  boss: {
+    type: Boolean,
+    defualt: false,
+  },
+  saveNoDraft: {
+    type: Boolean,
+    defualt: false,
+  },
+  history: {
+    type: Boolean,
+    defualt: false,
+  },
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: false,
+  },
+  nextPageVisible: {
+    type: Boolean,
+    defualt: false,
+  },
+  publicData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  updateData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  publicNoBtn: {
+    type: Boolean,
+    defualt: false,
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  publish: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const initialPagination = ref<any>({
+  //   descending: false,
+  rowsPerPage: props.paging == true ? 25 : 0,
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+  "update:titleText",
+  "update:inputvisibleFilter",
+]);
+
+const updateEdit = (value: any) => {
+  emit("update:editvisible", value);
+};
+const updateInput = (value: any) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: any) => {
+  emit("update:inputvisible", value);
+};
+const updateVisibleFilter = (value: any) => {
+  emit("update:inputvisibleFilter", value);
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+
+const checkSave = () => {
+  props.validate();
+  props.save();
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then((success) => {
+  //       if (success) {
+  //       }
+  //     });
+  //   }
+};
+const clickEdit = () => {
+  updateEdit(!props.editvisible);
+  editvisible.value = !editvisible.value;
+  props.edit();
+};
+const clickCancel = () => {
+  updateEdit(!props.editvisible);
+  editvisible.value = !editvisible.value;
+  props.cancel();
+};
+const publishModal = () => {
+  props.validate();
+  const filter = attrs.value.rows.filter((r: any) => r.name == "");
+
+  if (filter.length == 0 || attrs.value.rows.length == 0) {
+    // modalPublish.value = true;
+    dialogMessage(
+      $q,
+      "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
+      "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
+      "public",
+      "เผยแพร่",
+      "public",
+      props.publish,
+      undefined
+    );
+  }
+};
+
+const DeleteModal = () => {
+  //   modalDelete.value = true;
+  dialogMessage(
+    $q,
+    "ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
+    "ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
+    "mdi-file-remove-outline",
+    "ลบบันทึก",
+    "red",
+    props.deleted,
+    undefined
+  );
+};
+
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+
+const add = async () => {
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate();
+  //   }
+  props.validate();
+  props.add();
+  await table.value.lastPage();
+  await table.value.scrollTo(attrs.value.rows.length - 1);
+};
+
+const deleted = async () => {
+  // const deletedF = () => {
+  if (props.publicNoBtn === false) {
+    updateEdit(false);
+  }
+  props.deleted();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  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>