รายการแต่งตั้ง-เลื่อน-ย้าย

2024-05-03 17:35:17 +07:00 · 2024-05-03 17:35:17 +07:00 · ad2e4ece16
commit ad2e4ece16
parent 7a2d0d2811
4 changed files with 211 additions and 97 deletions
--- a/src/components/Dialogs/DialogOrgSelect.vue
+++ b/src/components/Dialogs/DialogOrgSelect.vue
@ -244,6 +244,7 @@ function close() {

 async function getDataTable(id: string, level: number = 0) {
  showLoader();
+  
  const body = {
    node: level,
    nodeId: id,
@ -308,10 +309,16 @@ async function getDataTable(id: string, level: number = 0) {
 * @param data ข่อมูล Tree
 */
 function updateSelected(data: DataTree) {
-  positionId.value = "";
-  seletcId.value = "";
-  selectedPos.value = [];
-  datePos.value = new Date();
+  if (props?.dataRows?.nodeId === data.orgTreeId) {
+    positionId.value = props?.dataRows?.posmasterId;
+    seletcId.value = props?.dataRows?.positionId;
+    datePos.value = props?.dataRows?.reportingDateFullDate;
+  } else {
+    positionId.value = "";
+    seletcId.value = "";
+    selectedPos.value = [];
+    datePos.value = new Date();
+  }

  nodeId.value = data.orgTreeId ? data.orgTreeId : "";
  nodeLevel.value = data.orgLevel;
@ -396,11 +403,50 @@ async function onClickSelectPos(id: string) {
  }
 }

+/**
+ * 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((res) => {
+      const data = res.data.result;
+      expanded.value = data;
+      nodeId.value = id;
+      positionId.value = props?.dataRows?.posmasterId;
+      seletcId.value = props?.dataRows?.positionId;
+      datePos.value = props?.dataRows?.reportingDateFullDate;
+
+      getDataTable(nodeId.value, level);
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
 watch(
  () => modal.value,
-  (n) => {
+  async (n) => {
    if (n == true) {
      getActive();
+      if (props?.dataRows?.node !== null && props?.dataRows?.nodeId !== null) {
+        await fetchPosFind(props?.dataRows?.node, props?.dataRows?.nodeId);
+        if (positionId.value) {
+          setTimeout(async () => {
+            await onClickSelectPos(positionId.value);
+          }, 200);
+        }
+      } else {
+        expanded.value = [];
+      }
    }
  }
 );
@ -436,7 +482,7 @@ function onSubmit() {
    (e: any) => e.id === positionId.value
  );

-  console.log(dataPosMaster)
+  console.log(dataPosMaster);
  if (selectedPos.value.length === 0) {
    dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
  } else {
@ -461,7 +507,6 @@ function onSubmit() {
      props.onSubmit?.(body);
    });
  }
-
 }
 </script>
 <template>
@ -496,7 +541,6 @@ function onSubmit() {
              <q-tree
                class="q-pa-sm q-gutter-sm"
                dense
-                default-expand-all
                :nodes="lazy"
                node-key="orgTreeId"
                label-key="orgTreeName"
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/Detail.vue
@ -17,11 +17,6 @@ import config from "@/app.config";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import CardProfile from "@/components/CardProfile.vue";

-const formData = reactive<any>({
-  firstName: "",
-  lastName: "",
-});
-
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const $q = useQuasar();
@ -71,9 +66,6 @@ const fecthappointmentByid = async () => {
      dataProfile.value = res.data.result as unknown as DataProfile;
      const data = res.data.result;

-      formData.firstName = data.firstName
-      formData.lastName = data.lastName
-      
      profileId.value = data.profileId;
      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${
        data.lastname ?? "-"
@ -118,10 +110,6 @@ const clickSave = async () => {
 // เเก้ไขข้อมูล
 const putAppointment = async () => {
  let data = {
-    // CitizenId: appointment.value.citizenId,
-    // prefixId: appointment.value.prefixId,
-    Firstname: formData.firstName,
-    Lastname: formData.lastName,
    educationOld: educationOld.value,
    organizationPositionOld: organizationPositionOld.value,
    positionTypeOld: positionTypeOld.value,
--- a/src/modules/05_placement/components/AppointMent/Dialogbody.vue
+++ b/src/modules/05_placement/components/AppointMent/Dialogbody.vue
@ -1,16 +1,28 @@
 <script setup lang="ts">
-import { ref, computed,watchEffect } from "vue";
+import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import type { UserData } from "@/modules/05_placement/interface/response/AppointMent";

 import DialogHeader from "@/modules/05_placement/components/AppointMent/DialogHeader.vue";
+import { useTransferDataStore } from "@/modules/05_placement/store";

 import http from "@/plugins/http";
 import config from "@/app.config";
+
+const storeFn = useTransferDataStore();
+const { statusText } = storeFn;
+
 const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  hideLoader,
+  date2Thai,
+} = mixin;

 const $q = useQuasar();
 const selected = ref<[]>([]);
@ -27,8 +39,8 @@ const props = defineProps({
  nextPage: Function,
  optionsType: Array,
  rows2: Array,
-  filterKeyword2:String,
-  type:String,
+  filterKeyword2: String,
+  type: String,
 });
 const visibleColumns2 = ref<string[]>([
  "no",
@ -86,14 +98,13 @@ const columns2 = ref<QTableProps["columns"]>([
    style: "font-size: 14px",
  },
 ]);
-const pageNext = (item:object) => {
-    props.nextPage?.(item)
-}
+const pageNext = (item: object) => {
+  props.nextPage?.(item);
+};
 const emit = defineEmits([
  "update:filterKeyword2",
  "update:type",
  "update:selected",
-
 ]);
 const updateInput = (value: any) => {
  emit("update:filterKeyword2", value);
@ -104,18 +115,17 @@ const updateInputType = (value: string) => {
 };
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
-    emit("update:filterKeyword2", "");
+  emit("update:filterKeyword2", "");
 };
 //เปิด modal ยืนยัน
 const clickAddlist = () => {
  dialogConfirm($q, () => createdAppoint());
 };

-
 //อัพเดต ส่งไปออกคำสั่ง
 const createdAppoint = async () => {
  let pId: string[] = [];
-  let Type = props.type as string
+  let Type = props.type as string;
  selected.value.forEach((e: UserData) => {
    pId.push(e.personalId);
  });
@ -135,7 +145,7 @@ const createdAppoint = async () => {
      hideLoader();
      props.fecthlistappointment?.();
      selected.value = [];
-      props.clickClose?.()
+      props.clickClose?.();
    });
 };

@ -146,7 +156,7 @@ watchEffect(() => {
 });
 </script>
 <template>
-<q-dialog v-model="props.Modal">
+  <q-dialog v-model="props.Modal">
    <q-card style="width: 1200px; max-width: 80vw">
      <DialogHeader title="ส่งไปออกคำสั่ง" :close="clickClose" />
      <q-separator />
@ -154,70 +164,149 @@ watchEffect(() => {
        <div class="row justify-between">
          <div class="col-5">
            <q-toolbar style="padding: 0">
-              <q-select outlined dense :model-value="type" @update:model-value="updateInputType" :options="optionsType" 
-              label="คำสั่งแต่งตั่ง-เลื่อน-ย้าย" style="width: 400px; max-width: auto" emit-value map-options option-label="name" 
-              option-value="id" />
+              <q-select
+                outlined
+                dense
+                :model-value="type"
+                @update:model-value="updateInputType"
+                :options="optionsType"
+                label="คำสั่งแต่งตั่ง-เลื่อน-ย้าย"
+                style="width: 400px; max-width: auto"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+              />
            </q-toolbar>
          </div>
          <div class="col-5">
            <q-toolbar style="padding: 0">
-              <q-input borderless outlined dense debounce="300" :model-value="filterKeyword2"
-                @update:model-value="updateInput" placeholder="ค้นหา"
-                style="width: 850px; max-width: auto">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword2"
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
                <template v-slot:append>
                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="Reset" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
                </template>
              </q-input>
-              <q-select v-model="visibleColumns2" multiple outlined dense options-dense
-                :display-value="$q.lang.table.columns" emit-value map-options :options="columns2" option-value="name"
-                options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
            </q-toolbar>
          </div>
        </div>

-        <d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="personalId" flat
-          :visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected">
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="personalId"
+          flat
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
          <template v-slot:header-selection="scope">
-            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
          </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 auto-width>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
              </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="citizenId" :props="props" @click="pageNext(props.row)">
-                {{ props.row.citizenId }}
-              </q-td>
-              <q-td key="fullname" :props="props" @click="pageNext(props.row)">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="organizationName" :props="props" @click="pageNext(props.row)">
-                <div v-if="props.row.orgName !== null ||
-                  props.row.positionPath !== null
-                  ">
+              <q-td
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                @click="pageNext(props.row)"
+              >
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name == 'fullname'">
+                  {{
+                    props.row.firstName
+                      ? `${props.row.prefix ?? ""}${
+                          props.row.firstName ?? ""
+                        } ${props.row.lastName ?? ""}`
+                      : "-"
+                  }}
+                </div>
+
+                <div v-else-if="col.name == 'status'">
+                  {{ props.row.status ? statusText(props.row.status) : "-" }}
+                </div>
+                <div v-else-if="col.name == 'dateOfBirth'">
+                  {{
+                    props.row.dateOfBirth
+                      ? date2Thai(props.row.dateOfBirth)
+                      : "-"
+                  }}
+                </div>
+                <div v-else-if="col.name == 'organizationName'">
                  <div class="col-4">
                    <div class="text-weight-medium">
-                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                      {{ props.row.organizationShortName !== null ? `(${props.row.organizationShortName})` : "" }}
+                      {{ props.row.root !== null ? props.row.root : "-" }}
+                      {{
+                        props.row.rootShortName !== null
+                          ? `(${props.row.rootShortName})`
+                          : ""
+                      }}
                    </div>
                    <div class="text-weight-light">
-                      {{ props.row.positionPath !== null ? props.row.positionPath : "-" }}
-                      {{ props.row.positionNumber !== null ? `(${props.row.positionNumber})` : "" }}
+                      {{
+                        props.row.nodeName !== null ? props.row.nodeName : ""
+                      }}
+                      {{
+                        props.row.nodeShortName !== null
+                          ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
+                          : ""
+                      }}
                    </div>
                  </div>
                </div>
-                <div v-else>
-                  <div class="col-4">
-                    <div class="text-weight-medium">-</div>
-                  </div>
+                <div v-else-if="col.name == 'createdAt'">
+                  {{
+                    props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
+                  }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
                </div>
-              </q-td>
-              <q-td key="birthday" :props="props" @click="pageNext(props.row)">
-                {{ props.row.birthday }}
              </q-td>
            </q-tr>
          </template>
@ -225,8 +314,13 @@ watchEffect(() => {
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ส่งไปออกคำสั่ง" @click="clickAddlist" color="public" :disable="checkSelected" />
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="clickAddlist"
+          color="public"
+          :disable="checkSelected"
+        />
      </q-card-actions>
    </q-card>
  </q-dialog>
-</template>
+</template>
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/components/AppointMent/Main.vue
@ -191,8 +191,8 @@ const fecthlistappointment = async () => {
      // }));

      rows2.value = rows.value.filter(
-        (e: orgFilter) =>
-          e.orgName !== null &&
+        (e: any) =>
+          e.root !== null &&
          e.status !== "REPORT" &&
          e.status !== "DONE" &&
          e.educationOld &&
@ -232,7 +232,7 @@ const fecthTypeOption = async () => {

 // เปิดโครงสร้าง
 const openModalTree = (data: any, type: string) => {
-  personalId.value = data.id
+  personalId.value = data.id;
  modalTree.value = true;
  typeModal.value = type;
  dataRows.value = data;
@ -310,7 +310,6 @@ function onSave(data: any) {
    });
 }

-
 onMounted(() => {
  fecthlistappointment();
 });
@ -416,7 +415,11 @@ onMounted(() => {
                    {{ props.row.status ? statusText(props.row.status) : "-" }}
                  </div>
                  <div v-else-if="col.name == 'dateOfBirth'">
-                    {{ props.row.status ? statusText(props.row.status) : "-" }}
+                    {{
+                      props.row.dateOfBirth
+                        ? date2Thai(props.row.dateOfBirth)
+                        : "-"
+                    }}
                  </div>
                  <div v-else-if="col.name == 'organizationName'">
                    <div class="col-4">
@ -470,12 +473,7 @@ onMounted(() => {
                        <q-item
                          clickable
                          v-close-popup
-                          @click="
-                            openModalTree(
-                              props.row,
-                              'APPOINT'
-                            )
-                          "
+                          @click="openModalTree(props.row, 'APPOINT')"
                        >
                          <q-item-section
                            style="min-width: 0px"
@ -495,12 +493,7 @@ onMounted(() => {
                        <q-item
                          clickable
                          v-close-popup
-                          @click="
-                            openModalTree(
-                              props.row,
-                              'SLIP'
-                            )
-                          "
+                          @click="openModalTree(props.row, 'SLIP')"
                        >
                          <q-item-section
                            style="min-width: 0px"
@ -520,12 +513,7 @@ onMounted(() => {
                        <q-item
                          clickable
                          v-close-popup
-                          @click="
-                            openModalTree(
-                              props.row,
-                              'MOVE'
-                            )
-                          "
+                          @click="openModalTree(props.row, 'MOVE')"
                        >
                          <q-item-section
                            style="min-width: 0px"