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

2024-02-05 11:16:29 +07:00 · 2024-02-05 11:16:29 +07:00 · f77ab65589
commit f77ab65589
parent 01f89066a0
6 changed files with 260 additions and 84 deletions
--- 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>
--- 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) => {
--- 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
--- 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,
--- a/src/modules/02_organizationalNew/interface/index/organizational.ts
+++ 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 };
--- 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;
  }