เลือกหน่วยงานที่รับบรรจุ

src/modules/05_placement/components/PersonalList/CardPosition.vue

@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+/** importType*/
+import type { QTableProps } from "quasar";
+
+import type { Positions } from "@/modules/05_placement/interface/response/SelectOrg";
+import type { DataPositionNo } from "@/modules/05_placement/interface/index/SelectOrg";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const { date2Thai } = useCounterMixin();
+
+const selected = defineModel("selectedPos", { required: true });
+const positionId = defineModel<string>("positionId", { required: true });
+const date = defineModel<Date>("datePos", { required: true });
+const props = defineProps({
+  position: {
+    type: Array(),
+    require: true,
+  },
+});
+
+// const positionId = ref<string>("");
+const filters = ref<string>("");
+const rowsPosition = ref<Positions[]>([]);
+
+function onClickSelectPos(id: string) {
+  positionId.value = id;
+  selected.value = [];
+  const position: DataPositionNo = props.position?.find(
+    (e: DataPositionNo) => e.id === id
+  );
+  if (position) {
+    rowsPosition.value = position.positions;
+  }
+}
+
+/** columns*/
+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",
+  },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "คนครอง",
+    sortable: true,
+    field: "positionIsSelected",
+    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",
+  "positionIsSelected",
+]);
+</script>
+<template>
+  <div class="column q-col-gutter-sm" style="height: 70vh">
+    <!-- เลือกเลขที่ตำแหน่ง -->
+    <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>
+
+        <!-- TABLE -->
+        <div class="col-12 q-pa-md">
+          <q-toolbar style="padding: 0px">
+            <q-space />
+            <div class="row q-gutter-md">
+              <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="props.position"
+            :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" />
+                    </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" v-if="positionId !== ''">
+      <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 props.position"
+            :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="วันที่รายงานตัว"
+                      lazy-rules
+                    >
+                      <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="selected"
+              >
+                <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>
+                <!-- <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="reqMaster.page"
+                active-color="primary"
+                color="dark"
+                :max="totalPage"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template> -->
+              </d-table>
+            </div>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue

@@ -0,0 +1,320 @@
+<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 {
+  PositionMaim,
+  PositionNo,
+  Positions,
+  TreeMain,
+} from "@/modules/05_placement/interface/response/SelectOrg";
+import type { DataPositionNo } from "@/modules/05_placement/interface/index/SelectOrg";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+import CardPosition from "@/modules/05_placement/components/PersonalList/CardPosition.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSelectOrgStore } from "@/modules/05_placement/stores/storeSelect";
+
+/** use*/
+const $q = useQuasar();
+const store = useSelectOrgStore();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  dialogMessageNotify,
+  dialogConfirm,
+} = useCounterMixin();
+
+/**props*/
+const modal = defineModel<boolean>("modal", { required: true });
+
+const props = defineProps({
+  dataRow: {
+    type: Object,
+    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[]>([]);
+
+const positionNo = ref<DataPositionNo[]>();
+const positionId = ref<string>("");
+const selectedPos = ref<any[]>([]);
+const datePos = ref<Date>(new Date());
+
+function closePopup() {
+  modal.value = !modal.value;
+}
+
+/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
+async function fetchOrganizationActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        fetchDataTree(data.activeId);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * 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(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: TreeMain) {
+  nodeId.value = data.orgTreeId ? data.orgTreeId : "";
+  nodeLevel.value = data.orgLevel;
+  fetchDataTable(data.orgTreeId, data.orgLevel);
+  selectedPos.value = [];
+  datePos.value = new Date();
+}
+
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async function fetchDataTable(id: string, level: number = 0) {
+  const body = {
+    node: level,
+    nodeId: id,
+    position: props?.dataRow?.positionCandidate,
+  };
+  await http
+    .post(config.API.orgPosPlacement, body)
+    .then((res) => {
+      const dataMain: PositionMaim[] = [];
+      res.data.result.data.forEach((e: PositionNo) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: Positions) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const test = { ...e, ...rest };
+          dataMain.push(test);
+        }
+      });
+      positionNo.value = store.fetchPosNo(dataMain);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {});
+}
+
+function onClickSubmit() {
+  if (selectedPos.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
+  } else {
+    dialogConfirm($q, () => {
+      const body = {
+        node: nodeLevel.value,
+        nodeId: nodeId.value,
+        posmasterId: positionId.value,
+        positionId: selectedPos.value[0].id,
+        reportingDate: datePos.value,
+      };
+      console.log(body);
+    });
+  }
+}
+
+function clearData() {
+  nodeId.value = "";
+  expanded.value = [];
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      showLoader();
+      await fetchOrganizationActive();
+      // console.log(props.dataRow);
+
+      expanded.value = [];
+      // expanded.value = [
+      //   "c6164a42-539d-401a-b289-653282c08e37",
+      //   "277e5221-9c47-43ca-a7a5-0ba6e30039c4",
+      // ];
+      // nodeId.value = "c6164a42-539d-401a-b289-653282c08e37";
+      // fetchDataTable(nodeId.value);
+    } else {
+      clearData();
+    }
+  }
+);
+
+const itemTaps = ref<string[]>();
+function filterItemsTaps(data: TreeMain[]) {
+  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;
+}
+</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">
+            <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"
+              >
+                <CardPosition
+                  :position="positionNo"
+                  v-model:selectedPos="selectedPos"
+                  v-model:datePos="datePos"
+                  v-model:positionId="positionId"
+                />
+              </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>

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

@@ -4,6 +4,10 @@ import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
+import type { DataList } from "@/modules/05_placement/interface/response/SelectOrg";
+
+import DialogSelectOrg from "@/modules/05_placement/components/PersonalList/DialogSelectOrg.vue";
+
 import Table from "@/modules/05_placement/components/PersonalList/TableView.vue";
 import DialogCard from "@/modules/05_placement/components/PersonalList/TableDetail.vue";
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
@@ -480,12 +484,16 @@ const editDetail = (
  * เปิด dialog
  * @param pid id personal
  */
-function openAppointModal(pid: string) {
-  appointModal.value = true;
-  personalId.value = pid;
-  personal.value = dataRes.value.filter(
-    (e: any) => e.personalId == personalId.value
-  );
+const modalDialogSelectOrg = ref<boolean>(false);
+const dataRow = ref<DataList>();
+function openAppointModal(pid: string, data: DataList) {
+  // appointModal.value = true;
+  // personalId.value = pid;
+  // personal.value = dataRes.value.filter(
+  //   (e: any) => e.personalId == personalId.value
+  // );
+  dataRow.value = data;
+  modalDialogSelectOrg.value = !modalDialogSelectOrg.value;
 }
 
 /** close dialog */
@@ -758,7 +766,7 @@ onMounted(async () => {
                     "
                     clickable
                     v-close-popup
-                    @click="openAppointModal(props.row.personalId)"
+                    @click="openAppointModal(props.row.personalId, props.row)"
                   >
                     <q-item-section
                       style="min-width: 0px"
@@ -1213,6 +1221,8 @@ onMounted(async () => {
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <DialogSelectOrg v-model:modal="modalDialogSelectOrg" :dataRow="dataRow" />
 </template>
 
 <style lang="scss" scoped>