API ข้อมูลเครื่องราช

src/api/manage/api.insignia.ts

@@ -35,4 +35,5 @@ export default {
   insigniaTypeNew: `${insigniaType}draft`,
   insigniaTypeNewId: (id: string) => `${insigniaType}${id}`,
   insigniaNewId: (id: string) => `${insignia}${id}`,
+  insigniaSort: (id: string) => `${insignia}sort/${id}`,
 };

src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue

@@ -1,46 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { useRouter } from "vue-router";
 import InsigniaList from "@/modules/01_metadataNew/components/insignia/InsigniaList.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
-import type {
-  DetailResponse,
-  DetailRow,
-} from "@/modules/01_metadataNew/interface/response/insignia/Insignia";
 
-const nameType = ref<string>("");
 const router = useRouter();
-const route = useRoute();
-const $q = useQuasar();
-const store = useInsigniaDataStore();
-const mixin = useCounterMixin();
-const { date2Thai, messageError, hideLoader, showLoader } = mixin;
-const id = ref<string>(route.params.id.toString());
-const insigniaTypeId = ref<string>("");
 
-async function fetchData(id: string) {
+const nameId = ref<string>("");
-  showLoader();
-  await http
-    .get(config.API.insigniaTypeNewId(id))
-    .then(async (res) => {
-      insigniaTypeId.value = res.data.result.name;
-      store.fetchData(res.data.result.insignias, res.data.result.name);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  await fetchData(id.value);
-});
 </script>
 
 <template>
@@ -55,11 +20,11 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายการข้อมูลเครื่องราชอิสริยาภรณ์ {{ insigniaTypeId }}
+    รายการข้อมูลเครื่องราชอิสริยาภรณ์ {{ nameId }}
   </div>
 
   <q-card flat bordered>
-    <InsigniaList :fetchData="fetchData"/>
+    <InsigniaList v-model:insigniaTypeName="nameId" />
   </q-card>
 </template>
 

src/modules/01_metadataNew/components/insignia/InsigniaList.vue

@@ -13,20 +13,18 @@ const store = useInsigniaDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-const props = defineProps({
+// const props = defineProps({
-  fetchData: {
+//   fetchData: {
-    type: Function,
+//     type: Function,
-    default: ()=>"",
+//     default: () => "",
-  }
+//   },
-})
+// });
-const {
+const insigniaTypeName = defineModel<string>("insigniaTypeName", {
-  date2Thai,
+  required: true,
-  dialogRemove,
+});
-  dialogConfirm,
+
-  showLoader,
+const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
-  hideLoader,
+  mixin;
-  messageError,
-} = mixin;
 const $q = useQuasar();
 const columns = ref<QTableProps["columns"]>([
   {
@@ -139,9 +137,9 @@ const id = ref<string>(route.params.id.toString());
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const isActive = ref<boolean>(false);
-const name = ref<string>("");
 const shortName = ref<string>("");
 const note = ref<string>("");
+const name = ref<string>("");
 const insigniaTypeId = ref<string>("");
 const nameRef = ref<any>(null);
 const shortNameRef = ref<any>(null);
@@ -169,24 +167,25 @@ function validateForm() {
   onSubmit();
 }
 
-// async function fetchData(id: string) {
+async function fetchData(id: string) {
-//   showLoader();
+  showLoader();
-//   await http
+  await http
-//     .get(config.API.insigniaTypeNewId(id))
+    .get(config.API.insigniaTypeNewId(id))
-//     .then(async (res) => {
+    .then(async (res) => {
-//       insigniaTypeId.value = res.data.result.name;
+      insigniaTypeId.value = res.data.result.name;
-//       store.fetchData(res.data.result.insignias, res.data.result.name);
+      store.fetchData(res.data.result.insignias, res.data.result.name);
-//     })
+      insigniaTypeName.value = res.data.result.name;
-//     .catch((err) => {
+    })
-//       messageError($q, err);
+    .catch((err) => {
-//     })
+      messageError($q, err);
-//     .finally(() => {
+    })
-//       hideLoader();
+    .finally(() => {
-//     });
+      hideLoader();
-// }
+    });
-// onMounted(async () => {
+}
-//   fetchData(id.value);
+onMounted(async () => {
-// });
+  await fetchData(id.value);
+});
 
 async function onSubmit() {
   if (name.value.length > 0 && shortName.value.length > 0) {
@@ -214,7 +213,7 @@ async function addData() {
     note: note.value == "" ? "-" : note.value,
     insigniaTypeId: id.value,
   });
-  props.fetchData(id.value);
+  fetchData(id.value);
 }
 
 async function editData(idData: string) {
@@ -225,12 +224,12 @@ async function editData(idData: string) {
     note: note.value == "" ? "-" : note.value,
     insigniaTypeId: id.value,
   });
-  props.fetchData(id.value);
+  fetchData(id.value);
 }
 
 async function deleteData(idData: string) {
   await http.delete(config.API.insigniaNewId(idData));
-  props.fetchData(id.value);
+  fetchData(id.value);
 }
 
 import { defineEmits } from "vue";
@@ -265,7 +264,7 @@ const dialogOrder = ref<boolean>(false);
       >
         <q-tooltip> จัดลำดับการแสดงผล </q-tooltip>
       </q-btn>
-      <TableDraggable v-model:modal="dialogOrder" />
+      <TableDraggable v-model:modal="dialogOrder" :fetchData="fetchData" />
       <q-space />
       <div class="row q-gutter-sm">
         <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>

src/modules/01_metadataNew/components/insignia/TableDraggable.vue

@@ -42,6 +42,14 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
   },
 ]);
+const id = ref<string>(route.params.id.toString());
+
+const props = defineProps({
+  fetchData: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
 
 function onDrop(from: any, to: any) {
   onDropRow(from, to);
@@ -53,24 +61,23 @@ function onDropRow(from: any, to: any) {
 }
 
 async function save() {
-  const dataPost = await rows.value.map((obj:any) => {
+  const dataPost = await rows.value.map((obj: any) => {
-  return obj.id;
+    return obj.id;
-});
+  });
-  console.log("post data===>", dataPost);
+  console.log("post data===> ", dataPost);
-  modal.value = false
+  modal.value = false;
 
-  // showLoader();
+  showLoader();
-  // await http
+  await http
-  //   .put(config.API.insigniaTypeNewId(id), dataPost)
+    .put(config.API.insigniaSort(id.value), { id: dataPost })
-  //   .then(async (res) => {
+    .catch((err) => {
-  //   })
+      messageError($q, err);
-  //   .catch((err) => {
+    })
-  //     messageError($q, err);
+    .finally(() => {
-  //   })
+      hideLoader();
-  //   .finally(() => {
+      store.row = rows.value;
-  //     hideLoader();
+      props.fetchData(id.value);
-  store.row = rows.value
+    });
-  //   });
 }
 
 async function onSubmit() {