ทำเบียนประวัติลูกจ้างชั่วคราว

src/modules/08_registryEmployee/components/DialogSelectPos.vue

@@ -0,0 +1,929 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  TreeMain,
+  PositionNo,
+  Position,
+} from "@/modules/08_registryEmployee/interface/response/Employee";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { asCleanDays } from "@fullcalendar/core/internal";
+
+/** use*/
+const $q = useQuasar();
+const {
+  success,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogMessageNotify,
+  dialogConfirm,
+} = useCounterMixin();
+
+/**props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  dataRow: {
+    type: Object,
+    require: true,
+  },
+  fetchData: {
+    type: Function,
+    require: true,
+  },
+});
+
+/** Tree*/
+const nodeId = ref<string>("");
+const nodeLevel = ref<number>(0);
+const filterTree = ref<string>("");
+const nodes = ref<Array<TreeMain>>([]);
+const lazy = ref(nodes);
+const expanded = ref<string[]>([]);
+
+/** Table*/
+const filters = ref<string>("");
+const rowsPosition = ref<Position[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "isPosition",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "isPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "positionName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsPostition = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "isPosition",
+  "no",
+  "posMasterNo",
+  "positionName",
+  "posTypeName",
+  "posLevelName",
+]);
+
+/** Position*/
+const positionNo = ref<PositionNo[]>([]);
+const positionId = ref<string>("");
+const seletcId = ref<string>("");
+const selectedPos = ref<any[]>([]);
+const datePos = ref<Date>(new Date());
+const posMasterMain = ref<any>([]);
+const orgRevisionId = ref<string>("");
+
+/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
+async function fetchOrganizationActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        orgRevisionId.value = data.activeId;
+        fetchDataTree(data.activeId);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function fetch ข้อมูลของ Tree
+ * @param id id โครงสร้าง
+ */
+async function fetchDataTree(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        nodes.value = data;
+        filterItemsTaps(data);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
+    });
+}
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: TreeMain) {
+  if (props?.dataRow?.nodeId === data.orgTreeId) {
+    positionId.value = props?.dataRow?.posmasterId;
+    seletcId.value = props?.dataRow?.positionId;
+    datePos.value = props?.dataRow?.reportingDateFullDate;
+  } else {
+    positionId.value = "";
+    seletcId.value = "";
+    selectedPos.value = [];
+    datePos.value = new Date();
+  }
+
+  nodeId.value = data.orgTreeId ? data.orgTreeId : "";
+  nodeLevel.value = data.orgLevel;
+  fetchDataTable(data.orgTreeId, data.orgLevel);
+}
+
+const isAll = ref<boolean>(false);
+const isBlank = ref<boolean>(false);
+
+/**
+ * function fetch ข้อมูลรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async function fetchDataTable(id: string, level: number = 0) {
+  showLoader();
+  const body = {
+    node: level,
+    nodeId: id,
+    position: "",
+    typeCommand: "",
+    posLevel: props.dataRow?.posLevelCandidateId
+      ? props.dataRow?.posLevelCandidateId
+      : "",
+    posType: props.dataRow?.posTypeCandidateId
+      ? props.dataRow?.posTypeCandidateId
+      : "",
+    isAll: isAll.value,
+    isBlank: isBlank.value,
+  };
+  await http
+    .post(config.API.orgPosPlacemenTemp, body)
+    .then((res) => {
+      const dataMain: PositionNo[] = [];
+
+      posMasterMain.value = res.data.result.data;
+      res.data.result.data.forEach((e: any) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: Position) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const data: any = { ...e, ...rest };
+          dataMain.push(data);
+        }
+      });
+      positionNo.value = dataMain;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
+    });
+}
+
+/**
+ * function fetch ข้อมูล expanded tree
+ * @param level levelTree
+ * @param id treeId
+ */
+async function fetchPosFind(level: number, id: string) {
+  showLoader();
+  const body = {
+    node: level,
+    nodeId: id,
+  };
+  await http
+    .post(config.API.orgPosFind, body)
+    .then(async (res) => {
+      const data = res.data.result;
+
+      expanded.value = data;
+      nodeId.value = id;
+      positionId.value = props?.dataRow?.posmasterId;
+      seletcId.value = props?.dataRow?.positionId;
+      datePos.value = props?.dataRow?.reportingDateFullDate;
+
+      await fetchDataTable(nodeId.value, level);
+      positionId.value && (await onClickSelectPos(positionId.value));
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/** function บันทึกข้อมูลตำแหน่ง*/
+async function onClickSubmit() {
+  const dataPosMaster = await posMasterMain.value?.find(
+    (e: any) => e.id === positionId.value
+  );
+
+  if (selectedPos.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+      const body = {
+        node: dataPosMaster.node,
+        nodeId: dataPosMaster.nodeId,
+        orgRevisionId: orgRevisionId.value,
+        positionId: selectedPos.value[0].id,
+        posMasterNo: dataPosMaster.posMasterNo.toString(), //เลขที่ตำแหน่ง(เลขอย่่างเดียว)
+        position: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
+        positionField: "", //ชื่อตำแหน่ง
+        posTypeId: selectedPos.value[0].posTypeId, //ชื่อตำแหน่ง
+        posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
+        posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
+        posLevelName: selectedPos.value[0].posLevelName.toString(), //ชื่อตำแหน่ง
+        posmasterId: dataPosMaster.id,
+      };
+
+      await http
+        .put(config.API.positionEmployee(props?.dataRow?.id), body)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          props.fetchData?.();
+          closePopup();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+/** function closePopup*/
+function closePopup() {
+  modal.value = !modal.value;
+  clearData();
+}
+
+/** function clearData*/
+function clearData() {
+  nodeId.value = "";
+  expanded.value = [];
+  positionId.value = "";
+  seletcId.value = "";
+}
+
+const itemTaps = ref<string[]>();
+function filterItemsTaps(data: any[]) {
+  let orgTreeIds: string[] = [];
+  for (const child of data) {
+    orgTreeIds.push(child.orgTreeId);
+    if (child.children) {
+      orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
+    }
+  }
+  itemTaps.value = orgTreeIds;
+  return orgTreeIds;
+}
+
+async function onClickSelectPos(id: string) {
+  positionId.value = id;
+  selectedPos.value = [];
+  const position: any = positionNo.value.find((e: any) => e.id === id);
+
+  // หาตำแหน่ง
+  if (position) {
+    rowsPosition.value = position.positions;
+    if (seletcId.value) {
+      selectedPos.value = rowsPosition.value.filter(
+        (e) => e.id === seletcId.value
+      );
+    }
+  }
+}
+
+/** callback function เมื่อมีการเปิด popup*/
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      await fetchOrganizationActive();
+      if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
+        await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
+      } else {
+        expanded.value = [];
+      }
+    }
+  }
+);
+
+watch(
+  () => isAll.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      fetchDataTable(nodeId.value, nodeLevel.value);
+    }
+  }
+);
+
+watch(
+  () => isBlank.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      fetchDataTable(nodeId.value, nodeLevel.value);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-card>
+      <Header :tittle="'เลือกหน่วยงานที่รับบรรจุ'" :close="closePopup" />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-sm bg-grey-2">
+        <div class="row">
+          <q-card
+            bordered
+            class="col-12 col-sm-3 scroll q-pa-sm"
+            style="height: 75vh"
+          >
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
+              >
+            </q-toolbar>
+
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filterTree = ''"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-sm q-gutter-sm"
+              dense
+              default-expand-all
+              :nodes="lazy"
+              node-key="orgTreeId"
+              label-key="orgTreeName"
+              :filter="filterTree"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:expanded="expanded"
+            >
+              <template v-slot:default-header="prop">
+                <q-item
+                  clickable
+                  :active="nodeId == prop.node.orgTreeId"
+                  @click.stop="updateSelected(prop.node)"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </q-card>
+
+          <q-card
+            bordered
+            class="col-12 col-sm-9 q-pa-sm scroll"
+            style="height: 75vh"
+          >
+            <q-tab-panels
+              v-model="nodeId"
+              animated
+              transition-prev="jump-up"
+              transition-next="jump-up"
+            >
+              <q-tab-panel
+                v-for="(item, index) in itemTaps"
+                :key="index"
+                :name="item"
+              >
+                <div class="column q-col-gutter-sm">
+                  <!-- เลือกเลขที่ตำแหน่ง -->
+                  <div class="col-7">
+                    <q-card
+                      bordered
+                      style="height: 100%; border: 1px solid #d6dee1"
+                    >
+                      <div
+                        class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                      >
+                        เลือกเลขที่ตำแหน่ง
+                      </div>
+                      <div class="col-12"><q-separator /></div>
+                      <div class="col-12 q-pa-md">
+                        <q-toolbar style="padding: 0px">
+                          <div class="row q-gutter-md">
+                            <q-checkbox
+                              keep-color
+                              v-model="isBlank"
+                              label="แสดงเฉพาะตำแหน่งว่าง"
+                              color="primary"
+                            >
+                              <q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
+                            </q-checkbox>
+                          </div>
+                          <q-space />
+
+                          <div class="row q-gutter-md">
+                            <q-checkbox
+                              keep-color
+                              v-model="isAll"
+                              label="แสดงตำแหน่งทั้งหมด"
+                              color="primary"
+                            >
+                              <q-tooltip
+                                >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+                              >
+                            </q-checkbox>
+                            <div>
+                              <q-input
+                                outlined
+                                dense
+                                v-model="filters"
+                                label="ค้นหา"
+                              >
+                                <template v-slot:append>
+                                  <q-icon name="search" color="grey-5" />
+                                </template>
+                              </q-input>
+                            </div>
+                            <div>
+                              <q-select
+                                v-model="visibleColumns"
+                                multiple
+                                outlined
+                                dense
+                                options-dense
+                                :display-value="$q.lang.table.columns"
+                                emit-value
+                                map-options
+                                :options="columns"
+                                option-value="name"
+                                options-cover
+                                style="min-width: 180px"
+                              />
+                            </div>
+                          </div>
+                        </q-toolbar>
+                        <d-table
+                          ref="table"
+                          :columns="columns"
+                          :rows="positionNo"
+                          :filter="filters"
+                          row-key="id"
+                          flat
+                          bordered
+                          :paging="true"
+                          dense
+                          :rows-per-page-options="[10, 25, 50, 100]"
+                          class="tableTb"
+                          :visible-columns="visibleColumns"
+                        >
+                          <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-tr>
+                          </template>
+                          <template v-slot:body="props">
+                            <q-tr :props="props" class="cursor-pointer">
+                              <q-td
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                                @click="onClickSelectPos(props.row.id)"
+                                :class="
+                                  props.row.id === positionId ? 'bg-blue-2' : ''
+                                "
+                              >
+                                <div v-if="col.name == 'no'">
+                                  {{ props.rowIndex + 1 }}
+                                </div>
+                                <div v-else-if="col.name === 'posMasterNo'">
+                                  {{
+                                    props.row.isSit
+                                      ? col.value + " " + "(ทับที่)"
+                                      : col.value
+                                  }}
+                                </div>
+                                <div v-else-if="col.name === 'isPosition'">
+                                  <div v-if="col.value">
+                                    <q-icon
+                                      name="done"
+                                      color="primary"
+                                      size="24px"
+                                    >
+                                      <q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
+                                    </q-icon>
+                                  </div>
+                                </div>
+
+                                <div v-else>
+                                  {{ col.value ? col.value : "-" }}
+                                </div>
+                              </q-td>
+                            </q-tr>
+                          </template>
+                        </d-table>
+
+                        <!-- <d-table
+                          ref="table"
+                          :columns="columns"
+                          :rows="positionNo"
+                          :filter="filters"
+                          row-key="id"
+                          flat
+                          bordered
+                          :paging="true"
+                          dense
+                          :rows-per-page-options="[10, 25, 50, 100]"
+                          :visible-columns="visibleColumns"
+                        >
+                          <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-tr>
+                          </template>
+                          <template v-slot:body="props">
+                            <q-tr :props="props" class="cursor-pointer">
+                              <q-td
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                                @click="onClickSelectPos(props.row.id)"
+                                :class="
+                                  props.row.id === positionId ? 'bg-blue-2' : ''
+                                "
+                              >
+                                <div v-if="col.name == 'no'">
+                                  {{ props.rowIndex + 1 }}
+                                </div>
+                                <div v-else-if="col.name === 'posMasterNo'">
+                                  {{
+                                    props.row.isSit
+                                      ? col.value + " " + "(ทับที่)"
+                                      : col.value
+                                  }}
+                                </div>
+                                <div v-else-if="col.name === 'isPosition'">
+                                  <div v-if="col.value">
+                                    <q-icon
+                                      name="done"
+                                      color="primary"
+                                      size="24px"
+                                    >
+                                      <q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
+                                    </q-icon>
+                                  </div>
+                                </div>
+
+                                <div v-else>
+                                  {{ col.value ? col.value : "-" }}
+                                </div>
+                              </q-td>
+                            </q-tr>
+                          </template>
+                        </d-table> -->
+                      </div>
+                    </q-card>
+                  </div>
+
+                  <!-- เลือกตำแหน่ง -->
+                  <div class="col-5">
+                    <q-card
+                      bordered
+                      style="height: 100%; border: 1px solid #d6dee1"
+                    >
+                      <div
+                        class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                      >
+                        เลือกตำแหน่ง
+                      </div>
+                      <div class="col-12"><q-separator /></div>
+                      <q-tab-panels
+                        v-model="positionId"
+                        animated
+                        swipeable
+                        vertical
+                        transition-prev="jump-up"
+                        transition-next="jump-up"
+                      >
+                        <q-tab-panel
+                          v-for="(item, index) in positionNo"
+                          :key="index"
+                          :name="item.id"
+                        >
+                          <div class="col-12">
+                            <!-- <q-toolbar style="padding: 0px">
+                            <datepicker
+                              menu-class-name="modalfix"
+                              v-model="date"
+                              :locale="'th'"
+                              autoApply
+                              borderless
+                              :enableTimePicker="false"
+                              week-start="0"
+                              :min-date="date"
+                            >
+                              <template #year="{ year }">
+                                {{ year + 543 }}
+                              </template>
+                              <template #year-overlay-value="{ value }">
+                                {{ parseInt(value + 543) }}
+                              </template>
+                              <template #trigger>
+                                <q-input
+                                  ref="dateRef"
+                                  outlined
+                                  dense
+                                  hide-bottom-space
+                                  :model-value="date != null ? date2Thai(date) : null"
+                                  label="วันที่รายงานตัว"
+                                >
+                                  <template v-slot:prepend>
+                                    <q-icon
+                                      name="event"
+                                      class="cursor-pointer"
+                                      style="color: var(--q-primary)"
+                                    >
+                                    </q-icon>
+                                  </template>
+                                </q-input>
+                              </template>
+                            </datepicker>
+                          </q-toolbar> -->
+                            <d-table
+                              ref="table"
+                              :columns="columnsPostition"
+                              :rows="rowsPosition"
+                              row-key="id"
+                              flat
+                              bordered
+                              :paging="true"
+                              dense
+                              :rows-per-page-options="[10, 25, 50, 100]"
+                              class="tableTb"
+                              selection="single"
+                              v-model:selected="selectedPos"
+                            >
+                              <template v-slot:header-selection="scope">
+                                <q-checkbox
+                                  keep-color
+                                  color="primary"
+                                  dense
+                                  v-model="scope.checkBox"
+                                />
+                              </template>
+                              <template v-slot:header="props">
+                                <q-tr :props="props">
+                                  <q-th auto-width />
+                                  <q-th
+                                    v-for="col in props.cols"
+                                    :key="col.name"
+                                    :props="props"
+                                  >
+                                    <span class="text-weight-medium">{{
+                                      col.label
+                                    }}</span>
+                                  </q-th>
+                                </q-tr>
+                              </template>
+                              <template v-slot:body="props">
+                                <q-tr :props="props" class="cursor-pointer">
+                                  <q-td>
+                                    <q-checkbox
+                                      keep-color
+                                      color="primary"
+                                      dense
+                                      v-model="props.selected"
+                                    />
+                                  </q-td>
+                                  <q-td
+                                    v-for="col in props.cols"
+                                    :key="col.name"
+                                    :props="props"
+                                  >
+                                    <div v-if="col.name == 'no'">
+                                      {{ props.rowIndex + 1 }}
+                                    </div>
+                                    <div v-else-if="col.name === 'posMasterNo'">
+                                      {{
+                                        props.row.isSit
+                                          ? col.value + " " + "(ทับที่)"
+                                          : col.value
+                                      }}
+                                    </div>
+
+                                    <div v-else>
+                                      {{ col.value ? col.value : "-" }}
+                                    </div>
+                                  </q-td>
+                                </q-tr>
+                              </template>
+                            </d-table>
+                          </div>
+                        </q-tab-panel>
+                      </q-tab-panels>
+                    </q-card>
+                  </div>
+                </div>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-card>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>