แก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน

src/modules/04_registryPerson/views/edit/components/DialogEdit.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  convertDateToAPI,
+} = useCounterMixin();
+
+const profileId = ref<string>(route.params.id.toString());
+
+const modal = defineModel<boolean>("modal", { required: true });
+const empType = defineModel<string>("empType", { required: true });
+
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+});
+
+const remark = ref<string>("");
+
+function onClickCloseDialog() {
+  modal.value = false;
+}
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .patch(config.API.salaryTemp + `/return-edit/${profileId.value}`, {
+        detailForEdit: remark.value,
+      })
+      .then(async () => {
+        await props.fetchData?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        onClickCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+watch(modal, async (val) => {
+  if (val) {
+  } else {
+    remark.value = "";
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 40%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="'ตีกลับให้แก้ไข'" :close="onClickCloseDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row">
+            <div class="col-12">
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                borderless
+                v-model="remark"
+                :label="`${'รายละเอียดการแก้ไข'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/04_registryPerson/views/edit/components/DialogForm.vue

@@ -66,6 +66,8 @@ const formData = reactive<FormDataSalary>({
   orgChild3: "", //ส่วนราชการระดับ 3
   orgChild4: "", //ส่วนราชการระดับ 4
   remark: "", //หมายเหตุ
+  posNumCodeSit: "", //หน่วยงานที่ออกคำสั่ง
+  posNumCodeSitAbb: "", //ตัวย่อหน่วยงานที่ออกคำสั่ง
 });
 const formReadonly = reactive<FormDataSalary>({
   commandCode: "", //ประเภทคำสั่ง
@@ -92,6 +94,8 @@ const formReadonly = reactive<FormDataSalary>({
   orgChild3: "", //ส่วนราชการระดับ 3
   orgChild4: "", //ส่วนราชการระดับ 4
   remark: "", //หมายเหตุ
+  posNumCodeSit: "", //หน่วยงานที่ออกคำสั่ง
+  posNumCodeSitAbb: "", //ตัวย่อหน่วยงานที่ออกคำสั่ง
 });
 
 const dataLevel = ref<DataPosType[]>([]); //รายการ ตำแหน่งเงินเดือน
@@ -104,6 +108,7 @@ const posExecutiveOptions = ref<DataOption[]>(store.posExecutiveData); //รา
 
 const salaryId = ref<string>("");
 
+/** function เรียกข้อมูลตำแหน่ง*/
 async function fetchDataPosition() {
   try {
     showLoader();
@@ -120,6 +125,7 @@ async function fetchDataPosition() {
 
 /** function fetch ข้อมูลประเภทคำสั่ง*/
 async function fetchDataCommandCode() {
+  // เช็ค store.commandCodeData มีค่ามากกว่า 0 รีเทินร์ false
   if (store.commandCodeData.length > 0) return false;
   await http
     .get(config.API.orgCommandCode)
@@ -263,11 +269,19 @@ async function updateSelectType(val: string, status: boolean = false) {
   }
 }
 
+/**
+ * function กำหนดข้อมูล
+ * @param index รายการที่ต้องการดู
+ */
 async function onDefineData(index: number) {
+  // ดึงข้อมูลจาก rowData ตามตำแหน่ง index ที่รับมา
   const data = rowData.value[index];
+  // กำหนดค่า salaryId ให้เป็น id ของข้อมูลตาม Index
   salaryId.value = data.id;
 
+  // เรียก function fetchDataPosition เรียกข้อมูลตำแหน่ง
   const newData = await fetchDataPosition();
+  // อัปเดตค่าประเภทตำแหน่งงาน
   updateSelectType(data.positionType);
 
   if (newData) {
@@ -298,6 +312,8 @@ async function onDefineData(index: number) {
     formData.orgChild3 = salaryNew.orgChild3;
     formData.orgChild4 = salaryNew.orgChild4;
     formData.remark = salaryNew.remark;
+    formData.posNumCodeSit = salaryNew.posNumCodeSit;
+    formData.posNumCodeSitAbb = salaryNew.posNumCodeSitAbb;
 
     formReadonly.commandCode = salaryOld.commandCode;
     formReadonly.commandNo = salaryOld.commandNo;
@@ -322,6 +338,8 @@ async function onDefineData(index: number) {
     formReadonly.orgChild3 = salaryOld.orgChild3;
     formReadonly.orgChild4 = salaryOld.orgChild4;
     formReadonly.remark = salaryOld.remark;
+    formReadonly.posNumCodeSit = salaryOld.posNumCodeSit;
+    formReadonly.posNumCodeSitAbb = salaryOld.posNumCodeSitAbb;
   }
 }
 

src/modules/04_registryPerson/views/edit/components/DialogHistory.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableColumn } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
+
+const profileId = ref<string>(route.params.id.toString());
+
+const modal = defineModel<boolean>("modal", { required: true });
+const empType = defineModel<string>("empType", { required: true });
+
+const keyword = ref<string>("");
+const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "detailForEdit",
+    align: "left",
+    label: "รายละเอียดการแก้ไข",
+    sortable: true,
+    field: "detailForEdit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "returnedDate",
+    align: "left",
+    label: "วันที่ตีกลับ",
+    sortable: true,
+    field: "returnedDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "returnedDate",
+  "detailForEdit",
+  "lastUpdateFullName",
+]);
+
+/** function ปิด popup ประวัติการดำเนินการ*/
+function onClickCloseDialog() {
+  modal.value = false;
+}
+
+/** function fetch รายการข้อมูลประวัติการดำเนินการ*/
+function fetchDataHistory() {
+  showLoader();
+  http
+    .get(config.API.salaryTemp + `/return-edit/history/${profileId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+      rowsMain.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function ค้นหาข้อมูลรายการในตาราง*/
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ตรวจสอบค่าของตัวแปร modal */
+watch(modal, async (val) => {
+  // เช็คว่าถ้า modal เป็น true
+  if (val) {
+    //เรียกฟังก์ชันดึงข้อมูลประวัติการดำเนินการ
+    fetchDataHistory();
+  } else {
+    keyword.value = "";
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        :tittle="'ประวัติการดำเนินการ'"
+        :close="onClickCloseDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <div class="row q-col-gutter-sm">
+              <q-space />
+              <q-input
+                dense
+                outlined
+                v-model="keyword"
+                label="ค้นหา"
+                @keydown.enter.pervent="serchDataTable"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
+          </div>
+
+          <div class="col-12">
+            <d-table
+              ref="table"
+              row-key="id"
+              flat
+              bordered
+              dense
+              :columns="columns"
+              :rows="rows"
+              :paging="true"
+              :rows-per-page-options="[20, 50, 100]"
+              :visible-columns="visibleColumns"
+            >
+              >
+              <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">
+                  <q-td v-for="col in props.cols" :key="col.id">
+                    <div v-if="col.name === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/04_registryPerson/views/edit/components/FormPosition.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
@@ -107,7 +106,7 @@ function classInput(val: boolean) {
 
 <template>
   <div class="row col-12 q-col-gutter-sm">
-    <div class="col-xs-12 col-sm-12 col-md-8">
+    <div class="col-xs-12 col-sm-6 col-md-8">
       <!-- :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']" -->
       <q-select
         outlined
@@ -141,7 +140,7 @@ function classInput(val: boolean) {
       </q-select>
     </div>
 
-    <div class="col-xs-6 col-sm-6 col-md-4">
+    <div class="col-xs-12 col-sm-6 col-md-4">
       <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ]" -->
       <datepicker
         :readonly="isReadonly"
@@ -175,6 +174,35 @@ function classInput(val: boolean) {
       </datepicker>
     </div>
 
+    <div class="col-xs-12 col-sm-6 col-md-8">
+      <q-input
+        :readonly="isReadonly"
+        :class="classInput(isReadonly)"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.posNumCodeSit"
+        hide-bottom-space
+        :label="`${'หน่วยงานที่ออกคำสั่ง'}`"
+        hint="*ชื่อเต็มหน่วยงานที่ออกคำสั่ง"
+      />
+    </div>
+
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <q-input
+        :readonly="isReadonly"
+        :class="classInput(isReadonly)"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.posNumCodeSitAbb"
+        hide-bottom-space
+        :label="`${'ตัวย่อหน่วยงานที่ออกคำสั่ง'}`"
+      />
+    </div>
+
     <div class="col-xs-6 col-sm-12 col-md-8">
       <div class="row q-col-gutter-sm">
         <div class="col-6">

src/modules/04_registryPerson/views/edit/components/Table.vue

@@ -33,6 +33,7 @@ const empType = ref<string>(route.params.type.toString());
 const profileId = ref<string>(route.params.id.toString());
 
 const tabs = defineModel<string>("tabs", { required: true });
+const isConfirmEdit = defineModel<boolean>("isConfirmEdit", { required: true });
 const statusCheckEdit = defineModel<string>("statusCheckEdit", {
   required: true,
 });
@@ -322,6 +323,11 @@ function onEditData(index: number) {
   modal.value = true;
 }
 
+/**
+ * function สลับตำแหน่งของข้อมูลขึ้นลง
+ * @param action up , down
+ * @param id id รายการที่ต้องการสลับตะแหน่ง
+ */
 async function onSwapData(action: string, id: string) {
   showLoader();
   await http
@@ -337,6 +343,11 @@ async function onSwapData(action: string, id: string) {
     });
 }
 
+/**
+ * function ลบข้อมูลรายการตำแหน่งเงินเดือน
+ * @param id id ที่ต้องการลบข้อมูลรายการตำแหน่งเงินเดือน
+ * @param isDelete true ลบข้อมูลรานการตำแหน่งเงินเดือน false นำข้อมูลรายการที่ลบไปกลับมา
+ */
 function onConfirmDeleteData(id: string, isDelete: boolean) {
   isDelete
     ? dialogConfirm(
@@ -352,6 +363,11 @@ function onConfirmDeleteData(id: string, isDelete: boolean) {
       });
 }
 
+/**
+ * function ลบข้อมูลรายการตำแหน่งเงินเดือน
+ * @param id id ที่ต้องการลบข้อมูลรายการตำแหน่งเงินเดือน
+ * @param isDelete true ลบข้อมูลรานการตำแหน่งเงินเดือน false นำข้อมูลรายการที่ลบไปกลับมา
+ */
 async function onDeleteData(id: string, isDelete: boolean) {
   showLoader();
   const path = isDelete ? "/delete-renew" : "/delete";
@@ -372,6 +388,13 @@ async function onDeleteData(id: string, isDelete: boolean) {
     });
 }
 
+/**
+ * class สีของข้อความ
+ * @param isDelete รายการที่ลบ
+ * @param isEdit รายการที่แก้ไข
+ * @param isEntry รายการข้อมูลที่มากจาก Entry
+ * @returns class ส
+ */
 function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
   return isDelete
     ? "text-red"
@@ -437,7 +460,13 @@ onMounted(() => {
         >
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th v-if="tabs === 'PENDING' && statusCheckEdit !== 'CHECKED'" />
+            <q-th
+              v-if="
+                tabs === 'PENDING' &&
+                statusCheckEdit == 'PENDING' &&
+                isConfirmEdit
+              "
+            />
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
@@ -445,7 +474,13 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props">
-            <q-td v-if="tabs === 'PENDING' && statusCheckEdit !== 'CHECKED'">
+            <q-td
+              v-if="
+                tabs === 'PENDING' &&
+                statusCheckEdit == 'PENDING' &&
+                isConfirmEdit
+              "
+            >
               <q-btn
                 dense
                 flat