pop up จัดลำดับตำแหน่ง

src/api/02_organizational/api.organization.ts

@@ -22,5 +22,7 @@ export default {
   orgPosType: `${orgPos}/type`,
   orgPosLevel: `${orgPos}/level`,
   orgPosMaster: `${orgPos}/master`,
+  orgPosMasterList: `${orgPos}/master/list`,
+  orgPosSort: `${orgPos}/sort`,
   organizationShortName: `${organization}/sort`,
 };

src/modules/02_organizationalNew/components/DialogSortPosition.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+const $q = useQuasar();
+const store = useOrganizational();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("sortPosition", { required: true });
+const modalSort = defineModel<Array<any>>("data", { required: true });
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    required: true,
+    label: "ชื่อ",
+    align: "left",
+    field: "name",
+    sortable: true,
+  },
+]);
+
+function onDrop(from: any, to: any) {
+  onDropRow(from, to);
+}
+
+function onDropRow(from: any, to: any) {
+  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+}
+
+function save() {
+  dialogConfirm($q, () => {
+    const data = rows.value;
+    const dataId = data.map((item: any) => item.id);
+    http
+      .post(config.API.orgPosSort, {
+        id: store.treeId,
+        type: store.level,
+        sortId: dataId,
+      })
+      .then((res) => {
+        modal.value = false;
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  });
+}
+
+function getData() {
+  showLoader();
+  http
+    .post(config.API.orgPosMasterList, {
+      id: store.treeId,
+      type: store.level,
+      isAll: false,
+      page: 1,
+      pageSize: 100,
+      keyword: "",
+    })
+    .then((res) => {
+      console.log(res);
+      const dataList = res.data.result.data;
+      const dataMap = dataList.map((item: any) => ({
+        id: item.id,
+        name: `${item.posMasterNoPrefix}${item.posMasterNo}${
+          item.posMasterNoSuffix == null ? "" : `(${item.posMasterNoSuffix})`
+        }`,
+        posMasterNoPrefix: item.posMasterNoPrefix,
+        posMasterNo: item.posMasterNo,
+        posMasterNoSuffix: item.posMasterNoSuffix,
+      }));
+      rows.value = dataMap;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      getData();
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card style="min-width: 50vw">
+        <DialogHeader
+          :tittle="`จัดลำดับตำแหน่ง`"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <q-table
+            v-if="rows.length > 0"
+            v-draggable-table="{
+              options: {
+                mode: 'row',
+                onlyBody: true,
+                dragHandler: 'th,td',
+              },
+              onDrop,
+            }"
+            flat
+            bordered
+            :rows="rows"
+            :columns="columns"
+            :rows-per-page-options="[100]"
+            row-key="orgTreeId"
+            hide-bottom
+            hide-pagination
+            hide-header
+          />
+          <div v-else class="bg-grey-3 text-center q-pa-md text-bold">
+            ไม่พบข้อมูลลำดับตำแหน่ง
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn :disable="rows.length === 0" type="submit" :label="`บันทึก`" color="public" @click="save" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>

src/modules/02_organizationalNew/components/mainTree.vue

@@ -100,6 +100,8 @@ const type = ref<number>(0);
 const orgId = ref<string>("");
 
 const updateSelected = (id: string, level: number) => {
+  store.treeId = id;
+  store.level = level;
   if (id === nodeId.value) {
     nodeId.value = "";
   } else {

src/modules/02_organizationalNew/components/tableTree.vue

@@ -8,10 +8,12 @@ import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Ma
 /** importComponents*/
 import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
 import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
-
+import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosition.vue";
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
+const dataSort = ref<Array<any>>([]);
+const modalSort = ref<boolean>(false);
 const showAllData = ref<boolean>(false);
 const orgLevel = defineModel<number>("orgLevel", {});
 const treeId = defineModel<string>("treeId", {});
@@ -129,6 +131,10 @@ const dialogDetail = ref<boolean>(false);
 function onClickViewDetail() {
   dialogDetail.value = !dialogDetail.value;
 }
+
+function onClickSort() {
+  modalSort.value = true;
+}
 </script>
 <template>
   <!-- TOOLBAR -->
@@ -145,7 +151,14 @@ function onClickViewDetail() {
         >
           <q-tooltip>เพิ่มตำแหน่ง</q-tooltip></q-btn
         >
-        <q-btn flat round dense color="blue" icon="filter_list">
+        <q-btn
+          flat
+          round
+          dense
+          color="blue"
+          icon="filter_list"
+          @click="onClickSort()"
+        >
           <q-tooltip>จัดลำดับ</q-tooltip>
         </q-btn>
       </div>
@@ -380,6 +393,7 @@ function onClickViewDetail() {
 
   <!-- รายละเอียดตำแหน่ง -->
   <DialogPositionDetail v-model:position-detail="dialogDetail" />
+  <DialogSort v-model:sort-position="modalSort" v-model:data="dataSort" />
 </template>
 
 <style scoped></style>

src/modules/02_organizationalNew/store/organizational.ts

@@ -11,6 +11,8 @@ export const useOrganizational = defineStore("organizationalStore", () => {
   const dataActive = ref<DataActive>();
   const activeId = ref<string>();
   const draftId = ref<string>();
+  const treeId = ref<string>();
+  const level = ref<number>();
   function fetchDataActive(data: DataActive) {
     activeId.value = data.activeId;
     draftId.value = data.draftId;
@@ -57,5 +59,7 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     convertType,
     draftId,
     activeId,
+    treeId,
+    level
   };
 });