From f77ab6558946fe99e28dca4aa2d6c4769b82837e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 5 Feb 2024 11:16:29 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=E0=B8=95=E0=B8=B3?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PositionDetail.vue             | 219 +++++++++++++++---
 .../components/listView.vue                   |  14 +-
 .../components/tableTree.vue                  |  46 +---
 .../interface/index/Main.ts                   |   2 +
 .../interface/index/organizational.ts         |  53 +++++
 .../store/organizational.ts                   |  10 -
 6 files changed, 260 insertions(+), 84 deletions(-)
 create mode 100644 src/modules/02_organizationalNew/interface/index/organizational.ts

diff --git a/src/modules/02_organizationalNew/components/PositionDetail.vue b/src/modules/02_organizationalNew/components/PositionDetail.vue
index 61b1d0cd5..87c76d73d 100644
--- a/src/modules/02_organizationalNew/components/PositionDetail.vue
+++ b/src/modules/02_organizationalNew/components/PositionDetail.vue
@@ -1,39 +1,155 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
-const modal = defineModel<boolean>("positionDetail", { required: true });
 
+/** import type*/
+import type { QTableProps } from "quasar";
+import type {
+  FormDetailPosition,
+  Position,
+} from "@/modules/02_organizationalNew/interface/index/organizational";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+/**use*/
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const store = useOrganizational();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
-const formData = reactive<any>({
-  positionNo: "ศสท.2", //*เลขที่ตำแหน่ง
-  positionType: "วิชาการ", //*ตำแหน่งประเภท
-  positionPathSide: "นักจัดการทั่วไป", //*ตำแหน่งในสายงาน
-  positionLine: "จัดการงานทั่วไป", //*สายงาน
-  positionSide: "ไม่มี", //*ด้าน/สาขา
-  positionLevel: "ชำนาญการพิเศษ", //*ระดับตำแหน่ง
-  positionExecutive: "หัวหน้าฝ่าย", //*ตำแหน่งทางการบริหาร
-  positionExecutiveSide: "ไม่มี", //*ด้านทางการบริหาร
-  status: "ปกติ", //*สถานะตำแหน่ง
+/**Props*/
+const modal = defineModel<boolean>("positionDetail", { required: true });
+const prosp = defineProps({
+  dataDetailPos: { type: Object, require: true },
 });
 
+/** formData*/
+const formData = reactive<FormDetailPosition>({
+  positionNo: "", //*เลขที่ตำแหน่ง
+  positionType: "", //*ตำแหน่งประเภท
+  positionPathSide: "", //*ตำแหน่งในสายงาน
+  positionLine: "", //*สายงาน
+  positionSide: "", //*ด้าน/สาขา
+  positionLevel: "", //*ระดับตำแหน่ง
+  positionExecutive: "", //*ตำแหน่งทางการบริหาร
+  positionExecutiveSide: "", //*ด้านทางการบริหาร
+  status: "", //*สถานะตำแหน่ง
+});
+
+const columns = 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 row = ref<Position[]>([]);
+
+/** function ปิด popup*/
 function close() {
   modal.value = false;
 }
 
+/** callblack function ทำเมื่อเปิด popup set เลขที่ตำแหน่ง และสถานะตำแหน่ง */
 watch(
   () => modal.value,
   () => {
     if (modal.value == true) {
+      if (prosp.dataDetailPos) {
+        formData.positionNo = prosp.dataDetailPos.posMasterNo;
+        formData.status =
+          store.typeOrganizational === "current"
+            ? "ปกติ"
+            : store.typeOrganizational === "draft"
+            ? "แบบร่าง"
+            : "ยุบเลิก";
+        row.value = prosp.dataDetailPos.positions.map((e: Position) => ({
+          ...e,
+          positionName: e.positionName ? e.positionName : "-",
+          positionField: e.positionField ? e.positionField : "-",
+          posTypeName: e.posTypeName ? e.posTypeName : "-",
+          posLevelName: e.posLevelName ? e.posLevelName : "-",
+          posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+          positionExecutiveField: e.positionExecutiveField
+            ? e.positionExecutiveField
+            : "-",
+          positionArea: e.positionArea ? e.positionArea : "-",
+        }));
+      }
     }
   }
 );
@@ -56,7 +172,7 @@ watch(
                 <p>{{ formData.positionNo }}</p>
               </div>
             </div>
-
+            <!-- 
             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
@@ -66,9 +182,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionType }}</p>
               </div>
-            </div>
+            </div> -->
 
-            <div class="row q-col-gutter-sm q-mb-xs">
+            <!-- <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ตำแหน่งในสายงาน</p>
@@ -77,9 +193,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionPathSide }}</p>
               </div>
-            </div>
+            </div> -->
 
-            <div class="row q-col-gutter-sm q-mb-xs">
+            <!-- <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>สายงาน</p>
@@ -88,9 +204,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionLine }}</p>
               </div>
-            </div>
+            </div> -->
 
-            <div class="row q-col-gutter-sm q-mb-xs">
+            <!-- <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ด้าน/สาขา</p>
@@ -99,9 +215,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionSide }}</p>
               </div>
-            </div>
+            </div> -->
 
-            <div class="row q-col-gutter-sm q-mb-xs">
+            <!-- <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ระดับตำแหน่ง</p>
@@ -110,9 +226,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionLevel }}</p>
               </div>
-            </div>
+            </div> -->
 
-            <div class="row q-col-gutter-sm q-mb-xs">
+            <!-- <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ตำแหน่งทางการบริหาร</p>
@@ -121,9 +237,9 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionExecutive }}</p>
               </div>
-            </div>
+            </div> -->
 
-            <div class="row q-col-gutter-sm q-mb-xs">
+            <!-- <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
                 <div>
                   <p>ด้านทางการบริหาร</p>
@@ -132,7 +248,7 @@ watch(
               <div class="col-8 text-grey-8">
                 <p>{{ formData.positionExecutiveSide }}</p>
               </div>
-            </div>
+            </div> -->
 
             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">
@@ -144,6 +260,49 @@ watch(
                 <p>{{ formData.status }}</p>
               </div>
             </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-12">
+                <d-table
+                  flat
+                  :columns="columns"
+                  :rows="row"
+                  row-key="id"
+                  dense
+                  hide-bottom
+                  class="custom-header-table-expand"
+                >
+                  <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"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+
+                        <div v-else>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div>
           </div>
         </q-card-section>
       </q-card>
diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index 00bced78e..88895010a 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -33,7 +33,6 @@ const nodeId = ref<string>(""); // id ของ Tree
 const orgLevel = ref<number>(0); // levelTree
 const isLoad = ref<boolean>(false); // loadTable
 const selected = ref<string>("");
-const nodeData = ref<any>();
 const reqMaster = reactive<FilterMaster>({
   id: "",
   type: 0,
@@ -100,12 +99,13 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
       totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
       res.data.result.data.forEach((e: PosMaster) => {
         const p = e.positions;
-        const a = p.find((el: Position) => el.positionIsSelected === true);
-        const { id, ...rest } = a ? a : p[0];
-        const test = { ...e, ...rest };
-
-        dataMain.push(test);
-        posMaster.value = store.fetchPosMaster(dataMain);
+        if (p.length !== 0) {
+          const a = p.find((el: Position) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const test = { ...e, ...rest };
+          dataMain.push(test);
+          posMaster.value = store.fetchPosMaster(dataMain);
+        }
       });
     })
     .catch((err) => {
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index 65ed8ea22..a16bcb80b 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -12,6 +12,7 @@ import type {
 } from "@/modules/02_organizationalNew/interface/index/Main";
 import type { FilterMaster } from "@/modules/02_organizationalNew/interface/request/organizational";
 import type { PosMaster2 } from "@/modules/02_organizationalNew/interface/response/organizational";
+import type { DataPosition } from "@/modules/02_organizationalNew/interface/index/organizational";
 
 /** importComponents*/
 import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
@@ -238,8 +239,10 @@ function onClickPosition(type: string, id: string) {
 }
 
 const dialogDetail = ref<boolean>(false);
-function onClickViewDetail() {
+const dataDetailPos = ref<DataPosition[]>([]);
+function onClickViewDetail(data: DataPosition[]) {
   dialogDetail.value = !dialogDetail.value;
+  dataDetailPos.value = data;
 }
 
 function onClickDelete(id: string) {
@@ -436,7 +439,7 @@ function updatePagination(newPagination: NewPagination) {
                     v-close-popup
                     @click="
                       item.type === 'VIEWDETIAL'
-                        ? onClickViewDetail()
+                        ? onClickViewDetail(props.row)
                         : item.type === 'EDIT'
                         ? onClickPosition('EDIT', props.row.id)
                         : item.type === 'DEL'
@@ -480,7 +483,6 @@ function updatePagination(newPagination: NewPagination) {
                     >
                       <span class="text-weight-medium">{{ col.label }}</span>
                     </q-th>
-                    <!-- <q-th auto-width></q-th> -->
                   </q-tr>
                 </template>
                 <template v-slot:body="props">
@@ -498,39 +500,6 @@ function updatePagination(newPagination: NewPagination) {
                         {{ col.value }}
                       </div>
                     </q-td>
-                    <!-- <q-td>
-                      <q-btn
-                        flat
-                        dense
-                        icon="mdi-dots-vertical"
-                        class="q-pa-none q-ml-xs"
-                        color="grey-13"
-                      >
-                        <q-menu>
-                          <q-list
-                            dense
-                            style="min-width: 200px"
-                            v-for="(item, index) in listMenu"
-                            :key="index"
-                          >
-                            <q-item
-                              clickable
-                              v-close-popup
-                              @click="
-                                item.type === 'VIEWDETIAL'
-                                  ? onClickViewDetail()
-                                  : null
-                              "
-                            >
-                              <q-item-section avatar>
-                                <q-icon :color="item.color" :name="item.icon" />
-                              </q-item-section>
-                              <q-item-section>{{ item.label }}</q-item-section>
-                            </q-item>
-                          </q-list>
-                        </q-menu>
-                      </q-btn>
-                    </q-td> -->
                   </q-tr>
                 </template>
               </q-table>
@@ -553,7 +522,10 @@ function updatePagination(newPagination: NewPagination) {
   </div>
 
   <!-- รายละเอียดตำแหน่ง -->
-  <DialogPositionDetail v-model:position-detail="dialogDetail" />
+  <DialogPositionDetail
+    v-model:position-detail="dialogDetail"
+    :dataDetailPos="dataDetailPos"
+  />
 
   <!-- อัตรากำลัง -->
   <DialogFormPosotion
diff --git a/src/modules/02_organizationalNew/interface/index/Main.ts b/src/modules/02_organizationalNew/interface/index/Main.ts
index 2569f9f8e..438caf701 100644
--- a/src/modules/02_organizationalNew/interface/index/Main.ts
+++ b/src/modules/02_organizationalNew/interface/index/Main.ts
@@ -124,6 +124,8 @@ interface NewPagination {
   sortBy: string;
 }
 
+
+
 export type {
   Pagination,
   DataOption,
diff --git a/src/modules/02_organizationalNew/interface/index/organizational.ts b/src/modules/02_organizationalNew/interface/index/organizational.ts
new file mode 100644
index 000000000..a5e400916
--- /dev/null
+++ b/src/modules/02_organizationalNew/interface/index/organizational.ts
@@ -0,0 +1,53 @@
+interface DataPosition {
+  id: string;
+  orgRootId: string;
+  orgChild1Id: string | null;
+  orgChild2Id: string | null;
+  orgChild3Id: string | null;
+  orgChild4Id: string | null;
+  posMasterNoPrefix: string;
+  posMasterNo: string;
+  posMasterNoSuffix: string;
+  orgShortname: string;
+  positions: Position[];
+  positionName: string;
+  positionField: string;
+  posTypeId: string;
+  posTypeName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  positionExecutiveField: string;
+  positionArea: string;
+  positionIsSelected: string | boolean;
+}
+
+interface Position {
+  id: string;
+  positionName: string;
+  positionField: string;
+  posTypeId: string;
+  posTypeName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  positionExecutiveField: string;
+  positionArea: string;
+  positionIsSelected: boolean;
+}
+
+interface FormDetailPosition {
+  positionNo: string;
+  positionType: string;
+  positionPathSide: string;
+  positionLine: string;
+  positionSide: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveSide: string;
+  status: string;
+}
+
+export type { DataPosition, Position, FormDetailPosition };
diff --git a/src/modules/02_organizationalNew/store/organizational.ts b/src/modules/02_organizationalNew/store/organizational.ts
index 92648777f..fa7ed8822 100644
--- a/src/modules/02_organizationalNew/store/organizational.ts
+++ b/src/modules/02_organizationalNew/store/organizational.ts
@@ -58,16 +58,6 @@ export const useOrganizational = defineStore("organizationalStore", () => {
       posTypeName: e.posTypeName ? e.posTypeName : "-",
       posLevelName: e.posLevelName ? e.posLevelName : "-",
       posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
-      // positions: [
-      //   {
-      //     ...e.positions,
-      //     positionName: e.positionName ? e.positionName : "-",
-      //     posTypeName: e.posTypeName ? e.posTypeName : "-",
-      //     posLevelName: e.posLevelName ? e.posLevelName : "-",
-      //     posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
-      //     positionIsSelected: e.positionIsSelected ? "มีคนครอง" : "ไม่มีคนครอง",
-      //   },
-      // ],
     }));
     return newPosMaster;
   }