จัดการบทบาทและสิทธิ์ => API

src/modules/02_users/views/permissionDetail.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
-import { useRouter } from "vue-router";
+import { onMounted, reactive, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { FormRole } from "@/modules/02_users/interface/request/Main";
 
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { dialogConfirm, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
 const attrPrivilege = ref<any[]>([]);
 const attrPrivilegeOp = ref<any[]>([
   {
@@ -23,9 +35,12 @@ const attrPrivilegeOp = ref<any[]>([
   },
 ]);
 const router = useRouter();
+const route = useRoute();
+
+const roleId = ref<string>(route.params.id.toString());
 const formData = reactive<FormRole>({
-  role: "",
-  description: "",
+  roleName: "",
+  roleDescription: "",
 });
 
 const columns = ref<any>([]);
@@ -1154,9 +1169,49 @@ const systemLists = ref<any>([
   },
 ]);
 
+function fetchDataRole() {
+  showLoader();
+  http
+    .get(config.API.managementAuth + `/${roleId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.roleName = data.roleName;
+      formData.roleDescription = data.roleDescription;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      ...formData,
+      authRoleAttrs: [],
+    };
+    http
+      .patch(config.API.managementAuth + `/${roleId.value}`, body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        fetchDataRole();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
   console.log(systemLists.value);
 }
+
+onMounted(() => {
+  fetchDataRole();
+});
 </script>
 
 <template>
@@ -1182,7 +1237,7 @@ function onSubmit() {
             <div class="row q-col-gutter-md">
               <div class="col-4">
                 <q-input
-                  v-model="formData.role"
+                  v-model="formData.roleName"
                   outlined
                   dense
                   :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
@@ -1194,7 +1249,7 @@ function onSubmit() {
               </div>
               <div class="col-8">
                 <q-input
-                  v-model="formData.description"
+                  v-model="formData.roleDescription"
                   outlined
                   dense
                   lazy-rules