แก้ไขทะเบียนประวัติ ==> เพิ่ม จัดลำดับการ

src/modules/04_registryPerson/components/detail/PersonalInformation/DialogSortEducation.vue

@@ -262,7 +262,7 @@ function onSubmit() {
 watch(modal, async () => {
   if (modal.value && props.dataSort) {
     const dataList = props.dataSort;
-    rows.value = dataList;
+    rows.value.push(...dataList);
     selected.value = dataList.filter((item: any) => item.isUse == true);
   } else {
     selected.value = [];
@@ -294,7 +294,7 @@ watch(modal, async () => {
             bordered
             :rows="rows"
             :columns="columns"
-            :rows-per-page-options="[100]"
+            :rows-per-page-options="[0]"
             row-key="id"
             hide-bottom
             hide-pagination

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

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { PropType } from "vue";
+import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+import { co } from "@fullcalendar/core/internal-common";
+
+/** use*/
+const $q = useQuasar();
+const route = useRoute();
+const {
+  dialogConfirm,
+  showLoader,
+  success,
+  hideLoader,
+  messageError,
+  findOrgNameHtml,
+} = useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+
+const props = defineProps({
+  dataSort: Array as PropType<DataPosition[]>,
+  columns: Array as PropType<QTableProps["columns"]>,
+  fetchData: Function,
+});
+const profileId = ref<string>(route.params.id.toString()); //id profile
+
+/** ข้อมูล Table*/
+const rowsData = ref<DataPosition[]>([]);
+
+/**
+ * fiunction จัดลำดับ
+ * @param from ตำแหน่งปัจุบัน
+ * @param to ตำแหน่งที่จะย้ายไป
+ */
+function onDrop(from: number, to: number) {
+  rowsData.value.splice(to - 1, 0, rowsData.value.splice(from - 1, 1)[0]);
+}
+
+/** function บันทึกการจัดลำดับ*/
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const body = rowsData.value.map((e: any) => e.id);
+    console.log("body", body);
+    await http
+      .put(config.API.salaryTemp + `/change/sort/${profileId.value}`, {
+        id: body,
+      })
+      .then(async () => {
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+        modal.value = false;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+watch(modal, async () => {
+  if (modal.value && props.dataSort) {
+    const dataList = props.dataSort;
+    rowsData.value.push(...dataList);
+  } else {
+    rowsData.value = [];
+  }
+});
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent full-width>
+      <q-card style="min-width: 80vw">
+        <DialogHeader :tittle="`จัดลำดับการ`" :close="() => (modal = false)" />
+        <q-separator />
+        <q-card-section style="max-height: 70vh" class="scroll">
+          <q-table
+            class="custom-header-table"
+            v-if="rowsData.length > 0"
+            v-draggable-table="{
+              options: {
+                mode: 'row',
+                onlyBody: true,
+                dragHandler: 'td',
+              },
+              onDrop,
+            }"
+            flat
+            bordered
+            :rows="rowsData"
+            :columns="columns"
+            :rows-per-page-options="[0]"
+            row-key="id"
+            hide-bottom
+            hide-pagination
+          >
+            <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-if="col.name === 'organization'"
+                    class="text-html"
+                  >
+                    {{
+                      findOrgNameHtml({
+                        root: props.row.orgRoot,
+                        child1: props.row.orgChild1,
+                        child2: props.row.orgChild2,
+                        child3: props.row.orgChild3,
+                        child4: props.row.orgChild4,
+                      })
+                    }}
+                  </div>
+
+                  <div v-else-if="col.name === 'commandCode'">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+          <div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :disable="rowsData.length === 0"
+            type="submit"
+            :label="`บันทึก`"
+            color="public"
+            @click="onSubmit"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
+
+<style lang="scss"></style>

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

@@ -12,6 +12,7 @@ import type { QTableColumn } from "quasar";
 import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
 
 import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
+import DialogSort from "@/modules/04_registryPerson/views/edit/components/DialogSort.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -276,6 +277,7 @@ const columns = computed<QTableColumn[]>(() => {
 });
 
 const modal = ref<boolean>(false);
+const modalSort = ref<boolean>(false);
 
 /** function fetch ข้อมูลรายการตำแหน่งเงินเดือน*/
 async function fetchData() {
@@ -410,7 +412,19 @@ onMounted(() => {
 <template>
   <div class="row q-col-gutter-sm">
     <div class="col-12">
-      <div class="row q-col-gutter-sm">
+      <div class="row q-col-gutter-sm items-center">
+        <q-btn
+          v-if="tabs === 'PENDING' && statusCheckEdit == 'PENDING'"
+          class="q-ml-sm"
+          round
+          flat
+          dense
+          color="blue"
+          icon="mdi-sort"
+          @click="modalSort = true"
+        >
+          <q-tooltip>จัดลำดับข้อมูล</q-tooltip></q-btn
+        >
         <q-space />
         <q-input
           dense
@@ -571,6 +585,13 @@ onMounted(() => {
     :row-data="rows"
     :fetch-data="fetchData"
   />
+
+  <DialogSort
+    v-model:modal="modalSort"
+    :data-sort="rowsMain"
+    :fetch-data="fetchData"
+    :columns="columns"
+  />
 </template>
 
 <style scoped></style>