จัดการข้แมูลผู้ใช้ => จัดการสิทธิ์

src/modules/02_users/components/Users/DialogAddUser.vue

@@ -4,7 +4,10 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { FormUser } from "@/modules/02_users/interface/request/Main";
+import type {
+  FormUser,
+  Roles,
+} from "@/modules/02_users/interface/request/Main";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -29,13 +32,17 @@ const props = defineProps({
 });
 
 const isPwd = ref<boolean>(true);
+const roles = ref<Roles[]>([]);
 const formData = reactive<FormUser>({
   username: "",
   password: "",
   firstName: "",
   lastName: "",
   email: "",
+  roles: [],
 });
+const roleOptionsMain = ref([]);
+const roleOptions = ref([]);
 
 /**
  * function fetch ข้อมูลผู้ใช้งาน
@@ -51,6 +58,23 @@ function fetchUserDetail(id: string) {
       formData.firstName = data.firstName;
       formData.lastName = data.lastName;
       formData.email = data.email;
+      roles.value = data.roles;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function fetc รายการ role*/
+function fetchlistRole() {
+  showLoader();
+  http
+    .get(config.API.managementRole)
+    .then((res) => {
+      roleOptions.value = res.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -62,6 +86,11 @@ function fetchUserDetail(id: string) {
 
 /** function บันทึกข้อมูลผู้ใช้งาน*/
 function onSubmit() {
+  formData.roles = !isStatusEdit.value
+    ? roles.value.map((e: { id: string }) => e.id)
+    : undefined;
+  formData.password = !isStatusEdit.value ? formData.password : undefined;
+
   dialogConfirm($q, () => {
     showLoader();
     const url = isStatusEdit.value
@@ -91,6 +120,7 @@ function closeDialog() {
   formData.firstName = "";
   formData.lastName = "";
   formData.email = "";
+  roles.value = [];
 }
 
 watch(
@@ -99,6 +129,7 @@ watch(
     if (modal.value && isStatusEdit.value) {
       fetchUserDetail(userId.value);
     }
+    modal.value && fetchlistRole();
   }
 );
 </script>
@@ -190,6 +221,25 @@ watch(
               >
               </q-input>
             </div>
+            <div class="col-12" v-if="!isStatusEdit">
+              <q-select
+                v-model="roles"
+                outlined
+                label="role"
+                dense
+                option-label="name"
+                option-value="id"
+                :options="roleOptions"
+                class="inputgreen"
+                map-options
+                hide-bottom-space
+                lazy-rules
+                use-chips
+                multiple
+                use-input
+                :rules="[(val:any) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
+              />
+            </div>
           </div>
         </q-card-section>
         <q-separator />