รายละเอียดตำแหน่ง

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>({
+/**Props*/
-  positionNo: "ศสท.2", //*เลขที่ตำแหน่ง
+const modal = defineModel<boolean>("positionDetail", { required: true });
-  positionType: "วิชาการ", //*ตำแหน่งประเภท
+const prosp = defineProps({
-  positionPathSide: "นักจัดการทั่วไป", //*ตำแหน่งในสายงาน
+  dataDetailPos: { type: Object, require: true },
-  positionLine: "จัดการงานทั่วไป", //*สายงาน
-  positionSide: "ไม่มี", //*ด้าน/สาขา
-  positionLevel: "ชำนาญการพิเศษ", //*ระดับตำแหน่ง
-  positionExecutive: "หัวหน้าฝ่าย", //*ตำแหน่งทางการบริหาร
-  positionExecutiveSide: "ไม่มี", //*ด้านทางการบริหาร
-  status: "ปกติ", //*สถานะตำแหน่ง
 });
 
+/** 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>

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);
+        if (p.length !== 0) {
-        const { id, ...rest } = a ? a : p[0];
+          const a = p.find((el: Position) => el.positionIsSelected === true);
-        const test = { ...e, ...rest };
+          const { id, ...rest } = a ? a : p[0];
-
+          const test = { ...e, ...rest };
-        dataMain.push(test);
+          dataMain.push(test);
-        posMaster.value = store.fetchPosMaster(dataMain);
+          posMaster.value = store.fetchPosMaster(dataMain);
+        }
       });
     })
     .catch((err) => {

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

src/modules/02_organizationalNew/interface/index/Main.ts

@@ -124,6 +124,8 @@ interface NewPagination {
   sortBy: string;
 }
 
+
+
 export type {
   Pagination,
   DataOption,

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 };

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;
   }