ปรับเเก้

src/modules/05_placement/components/AppointEmployee/Detail.vue

@@ -7,12 +7,15 @@ import type { ResponseTitle } from "@/modules/05_placement/interface/response/Re
 import type {
   appointmentData,
   ResponseData,
+  DataProfile
 } from "@/modules/05_placement/interface/response/AppointMent";
 import type { QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 
+import CardProfile from "@/components/CardProfile.vue";
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const $q = useQuasar();
@@ -20,6 +23,8 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
+const dataProfile = ref<DataProfile>();
+
 const appointment = ref<appointmentData>({
   citizenId: "",
   prefixId: "",
@@ -63,6 +68,7 @@ const fecthappointmentByid = async () => {
   await http
     .get(config.API.appointEmployeeByid(paramsId.toString()))
     .then((res: ResponseData) => {
+      dataProfile.value = res.data.result as unknown as DataProfile;
       const data = res.data.result;
       appointment.value = data;
       profileId.value = data.profileId;
@@ -175,56 +181,7 @@ onMounted(async () => {
     />
     รายละเอียดการปรับระดับชั้นงานลูกจ้าง {{ title.fullname }}
   </div>
-  <q-card bordered class="row col-12 text-dark">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-subtitle2">
-        {{ title.fullname }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(profileId)"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img :src="avatar" v-if="avatar !== ''" />
-          <q-img src="@/assets/avatar_user.jpg" v-else />
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12 q-pl-md">
-            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">
-              {{ title.positionTypeOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">
-              {{ title.positionLevelOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">
-              {{ title.organizationPositionOld }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
+  <CardProfile :data="dataProfile as DataProfile" />
 
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">

src/modules/05_placement/components/AppointEmployee/Dialogbody.vue

@@ -9,8 +9,13 @@ import DialogHeader from "@/modules/05_placement/components/AppointMent/DialogHe
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+import { useTransferDataStore } from "@/modules/05_placement/store";
+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<[]>([]);
@@ -35,7 +40,7 @@ const visibleColumns2 = ref<string[]>([
   "citizenId",
   "fullname",
   "organizationName",
-  "birthday",
+  "dateOfBirth",
 ]);
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -68,7 +73,7 @@ const columns2 = ref<QTableProps["columns"]>([
   {
     name: "organizationName",
     align: "left",
-    label: "หน่วยงานที่รับการปรับระดับชั้นงาน",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน-ย้าย",
     sortable: true,
     field: "organizationName",
     headerStyle: "font-size: 14px",
@@ -77,11 +82,11 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "birthday",
+    name: "dateOfBirth",
     align: "left",
     label: "วัน/เดือน/ปี เกิด",
     sortable: true,
-    field: "birthday",
+    field: "dateOfBirth",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -115,7 +120,7 @@ const createdAppoint = async () => {
   let pId: string[] = [];
   let Type = props.type as string;
   selected.value.forEach((e: UserData) => {
-    pId.push(e.personalId);
+    pId.push(e.id);
   });
   let data = {
     id: pId,
@@ -228,7 +233,7 @@ watchEffect(() => {
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td>
+              <q-td auto-width>
                 <q-checkbox
                   keep-color
                   color="primary"
@@ -236,59 +241,64 @@ watchEffect(() => {
                   v-model="props.selected"
                 />
               </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="citizenId" :props="props">
-                {{ props.row.citizenId }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="organizationName" :props="props">
-                {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                {{
-                  props.row.organizationShortName !== null
-                    ? `(${props.row.organizationShortName})`
-                    : ""
-                }}
-                <!-- <div
-                  v-if="
-                    props.row.orgName !== null ||
-                    props.row.positionPath !== null
-                  "
-                >
+              <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 == '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.root !== null ? props.row.root : "-" }}
                       {{
-                        props.row.organizationShortName !== null
-                          ? `(${props.row.organizationShortName})`
+                        props.row.rootShortName !== null
+                          ? `(${props.row.rootShortName})`
                           : ""
                       }}
                     </div>
                     <div class="text-weight-light">
                       {{
-                        props.row.positionPath !== null
-                          ? props.row.positionPath
-                          : "-"
+                        props.row.nodeName !== null ? props.row.nodeName : ""
                       }}
                       {{
-                        props.row.positionNumber !== null
-                          ? `(${props.row.positionNumber})`
+                        props.row.nodeShortName !== null
+                          ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
                           : ""
                       }}
                     </div>
                   </div>
                 </div>
+                <div v-else-if="col.name == 'createdAt'">
+                  {{
+                    props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
+                  }}
+                </div>
                 <div v-else>
-                  <div class="col-4">
-                    <div class="text-weight-medium">-</div>
-                  </div>
-                </div> -->
-              </q-td>
-              <q-td key="birthday" :props="props">
-                {{ props.row.birthday }}
+                  {{ col.value ? col.value : "-" }}
+                </div>
               </q-td>
             </q-tr>
           </template>

src/modules/05_placement/components/AppointEmployee/Main.vue

@@ -17,6 +17,13 @@ import type { OpType } from "@/modules/05_placement/interface/response/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import DialogOrgSelectEmployee from "@/components/Dialogs/DialogOrgSelectEmployee.vue";
+
+const posType = ref<string>("");
+const posLevel = ref<string>("");
+const position = ref<string>("");
+const dataRows = ref<any[]>([]);
+
 const $q = useQuasar();
 const modal = ref<boolean>(false);
 const storeFn = useTransferDataStore();
@@ -205,7 +212,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "organizationName",
     align: "left",
-    label: "หน่วยงานที่รับการปรับระดับชั้นงาน",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน-ย้าย",
     sortable: true,
     field: "organizationName",
     headerStyle: "font-size: 14px",
@@ -252,29 +259,31 @@ const fecthlistappointment = async () => {
     .then((res) => {
       let response = res.data.result;
       listRecevice.value = response;
-      rows.value = response.map((e: resData) => ({
-        personalId: e.id,
-        citizenId: e.citizenId,
-        fullname: e.prefix + e.firstname + "  " + e.lastname,
-        organizationName: e.organizationName + " " + e.organizationShortName,
-        orgName: e.organizationName,
-        organizationShortName: e.organizationShortName,
-        status: statusText(e.status),
-        createdAt: date2Thai(e.createdAt),
-        birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
-        educationOld: e.educationOld,
-        organizationPositionOld: e.organizationPositionOld,
-        positionTypeOld: e.positionTypeOld,
-        positionLevelOld: e.positionLevelOld,
-        positionNumberOld: e.positionNumberOld,
-        salary: e.salary,
-        positionDate: e.positionDate,
-      }));
+      rows.value = response
+      // rows.value = response.map((e: resData) => ({
+      //   personalId: e.id,
+      //   citizenId: e.citizenId,
+      //   fullname: e.prefix + e.firstname + "  " + e.lastname,
+      //   organizationName: e.organizationName + " " + e.organizationShortName,
+      //   orgName: e.organizationName,
+      //   organizationShortName: e.organizationShortName,
+      //   status: statusText(e.status),
+      //   createdAt: date2Thai(e.createdAt),
+      //   birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
+      //   educationOld: e.educationOld,
+      //   organizationPositionOld: e.organizationPositionOld,
+      //   positionTypeOld: e.positionTypeOld,
+      //   positionLevelOld: e.positionLevelOld,
+      //   positionNumberOld: e.positionNumberOld,
+      //   salary: e.salary,
+      //   positionDate: e.positionDate,
+      // }));
+
       rows2.value = rows.value.filter(
-        (e: orgFilter) =>
-          e.orgName !== null &&
-          e.status !== "ส่งรายชื่อไปออกคำสั่ง" &&
-          e.status !== "ออกคำสั่งเสร็จแล้ว" &&
+        (e: any) =>
+          e.root !== null &&
+          e.status !== "REPORT" &&
+          e.status !== "DONE" &&
           e.educationOld &&
           e.organizationPositionOld &&
           e.positionTypeOld &&
@@ -474,6 +483,54 @@ const savePosition = async () => {
 //     id.value = "";
 //   }
 // };
+
+
+
+
+function openModalTree(data:any){
+  modalTree.value = true
+
+  personalId.value = data.id;
+  dataRows.value = data;
+  posType.value = data.posTypeId;
+  posLevel.value = data.posLevelId;
+  position.value = data.positionName;
+}
+
+function onSave(data: any) {
+  console.log("not save", data);
+  const dataAppoint = {
+    // personalId: data.personalId,
+    node: data.node,
+    nodeId: data.nodeId,
+    orgRevisionId: data.orgRevisionId,
+    positionId: data.positionId,
+    posMasterNo: data.posMasterNo,
+    positionName: data.positionName,
+    posTypeId: data.posTypeId,
+    posTypeName: data.posTypeName,
+    posLevelId: data.posLevelId,
+    posLevelName: data.posLevelName,
+    reportingDate: data.reportingDate,
+    posmasterId: data.posmasterId,
+  };
+
+  showLoader();
+  http
+    .put(config.API.appointmentPosition(personalId.value), dataAppoint)
+    .then((res) => {
+      modalTree.value = false;
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      fecthlistappointment();
+      hideLoader();
+    });
+}
+
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -554,76 +611,64 @@ const savePosition = async () => {
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td
-                  key="no"
+                  v-for="col in props.cols"
+                  :key="col.name"
                   :props="props"
-                  @click="nextPage(props.row.personalId)"
+                  @click="nextPage(props.row.id)"
                 >
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="citizenId"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.citizenId }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="organizationName"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  <div
-                    v-if="
-                      props.row.orgName !== null ||
-                      props.row.positionPath !== null
-                    "
-                  >
+                  <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.root !== null ? props.row.root : "-" }}
                         {{
-                          props.row.orgName !== null ? props.row.orgName : "-"
+                          props.row.rootShortName !== null
+                            ? `(${props.row.rootShortName})`
+                            : ""
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.nodeName !== null ? props.row.nodeName : ""
                         }}
                         {{
-                          props.row.organizationShortName !== null
-                            ? `(${props.row.organizationShortName})`
+                          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="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.birthday }}
-                </q-td>
-                <q-td
-                  key="createdAt"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td
-                  key="status"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.status }}
                 </q-td>
                 <q-td auto-width>
                   <q-btn
@@ -643,7 +688,7 @@ const savePosition = async () => {
                       transition-hide="jump-up"
                     >
                       <q-list dense style="min-width: 200px">
-                        <q-item
+                        <!-- <q-item
                           clickable
                           v-close-popup
                           @click="openModalEmployee(props.row.personalId)"
@@ -660,11 +705,29 @@ const savePosition = async () => {
                             />
                           </q-item-section>
                           <q-item-section>กำหนดตำแหน่ง</q-item-section>
+                        </q-item> -->
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section>หน่วยงานที่รับการปรับระดับชั้นงาน</q-item-section>
                         </q-item>
                         <q-item
                           clickable
                           v-close-popup
-                          @click="clickDelete(props.row.personalId)"
+                          @click="clickDelete(props.row.id)"
                         >
                           <q-item-section
                             style="min-width: 0px"
@@ -783,5 +846,16 @@ const savePosition = async () => {
     :personal="personal"
     :personalId="personalId"
   /> -->
+
+  <DialogOrgSelectEmployee
+    :title="`เลือกหน่วยงานที่รับการปรับระดับชั้นงาน`"
+    v-model:modal="modalTree"
+    :posType="posType"
+    :posLevel="posLevel"
+    :position="position"
+    :dataRows="dataRows"
+    :onSubmit="onSave"
+  />
+
 </template>
 <style scoped lang="scss"></style>