จัดการบทบาทและสิทธิ์ => API
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
8a53037137
commit
ca0c31fc29
6 changed files with 135 additions and 140 deletions
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
|
|
@ -14,101 +16,56 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const { showLoader, hideLoader, dialogConfirm, messageError, success } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
|
||||
const roleId = defineModel<string>("roleId", { required: true });
|
||||
const props = defineProps({
|
||||
fetchlist: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const formData = reactive<FormRole>({
|
||||
role: "",
|
||||
description: "",
|
||||
roleName: "",
|
||||
roleDescription: "",
|
||||
});
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลผู้ใช้งาน
|
||||
* @param id ผู้ใช้งาน
|
||||
*/
|
||||
function fetchRoleDetail(id: string) {
|
||||
// showLoader();
|
||||
// http
|
||||
// .get(config.API.managementUser + `/${id}`)
|
||||
// .then((res) => {
|
||||
// const data = res.data;
|
||||
// formData.username = data.username;
|
||||
// formData.firstName = data.firstName;
|
||||
// formData.lastName = data.lastName;
|
||||
// formData.email = data.email;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
/** function บันทึกข้อมูลผู้ใช้งาน*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
// showLoader();
|
||||
// const url = isStatusEdit.value
|
||||
// ? config.API.managementUser + `/${roleId.value}`
|
||||
// : config.API.managementUser;
|
||||
// http[isStatusEdit.value ? "put" : "post"](url, formData)
|
||||
// .then(() => {
|
||||
// success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
// props.fetchlist?.();
|
||||
closeDialog();
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.managementAuth, formData)
|
||||
.then((res) => {
|
||||
closeDialog();
|
||||
router.push(`/roles/${res.data.result}`);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** function ปิด Dialog */
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
formData.role = "";
|
||||
formData.description = "";
|
||||
formData.roleName = "";
|
||||
formData.roleDescription = "";
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value && isStatusEdit.value) {
|
||||
fetchRoleDetail(roleId.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 25%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
:tittle="isStatusEdit ? 'แก้ไขบทบาท' : 'เพิ่มบทบาท'"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<DialogHeader :tittle="'เพิ่มบทบาท'" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.role"
|
||||
v-model="formData.roleName"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
|
||||
|
|
@ -120,7 +77,7 @@ watch(
|
|||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.description"
|
||||
v-model="formData.roleDescription"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกคำอิบาย'}`,]"
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ interface FormUser {
|
|||
}
|
||||
|
||||
interface FormRole {
|
||||
role: string;
|
||||
description: string;
|
||||
roleName: string;
|
||||
roleDescription: string;
|
||||
}
|
||||
|
||||
interface Roles {
|
||||
|
|
|
|||
|
|
@ -8,12 +8,15 @@ interface Users {
|
|||
}
|
||||
|
||||
interface Roles {
|
||||
clientRole?: boolean;
|
||||
composite?: boolean;
|
||||
containerId?: string;
|
||||
description: string;
|
||||
createdAt: string;
|
||||
createdFullName: string;
|
||||
createdUserId: string;
|
||||
id: string;
|
||||
name: string;
|
||||
lastUpdateFullName: string;
|
||||
lastUpdateUserId: string;
|
||||
lastUpdatedAt: string;
|
||||
roleDescription: string;
|
||||
roleName: string;
|
||||
}
|
||||
|
||||
interface NodeTree {
|
||||
|
|
|
|||
|
|
@ -23,13 +23,7 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
|||
useCounterMixin();
|
||||
|
||||
/** Table*/
|
||||
const rows = ref<Roles[]>([
|
||||
{
|
||||
id: "1",
|
||||
name: "ชื่อบทบาท",
|
||||
description: "คำอธิบาย",
|
||||
},
|
||||
]);
|
||||
const rows = ref<Roles[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -41,30 +35,28 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
name: "roleName",
|
||||
align: "left",
|
||||
label: "ชื่อบทบาท",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
field: "roleName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
name: "roleDescription",
|
||||
align: "left",
|
||||
label: "คำอธิบาย",
|
||||
sortable: true,
|
||||
field: "description",
|
||||
field: "roleDescription",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>(["no", "name", "description"]);
|
||||
const visibleColumns = ref<string[]>(["no", "roleName", "roleDescription"]);
|
||||
const keyword = ref<string>("");
|
||||
|
||||
const modalDialogAdd = ref<boolean>(false);
|
||||
const isStatusEdit = ref<boolean>(false);
|
||||
const roleId = ref<string>("");
|
||||
|
||||
/** List Mune*/
|
||||
const itemMenu = ref<ItemsMenu[]>([
|
||||
|
|
@ -84,19 +76,19 @@ const itemMenu = ref<ItemsMenu[]>([
|
|||
|
||||
/** function fetch รายการบทบาท*/
|
||||
function fetchListRole() {
|
||||
// showLoader();
|
||||
// http
|
||||
// .get(config.API.managementUser)
|
||||
// .then((res) => {
|
||||
// const data = res.data;
|
||||
// rows.value = data;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.managementAuth + `/list`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -106,9 +98,7 @@ function fetchListRole() {
|
|||
*/
|
||||
function onClickAction(type: string, data: Roles) {
|
||||
if (type === "edit") {
|
||||
modalDialogAdd.value = true;
|
||||
isStatusEdit.value = true;
|
||||
roleId.value = data.id;
|
||||
router.push(`/roles/${data.id}`);
|
||||
} else if (type === "delete") {
|
||||
onDeleteRole(data.id);
|
||||
}
|
||||
|
|
@ -116,8 +106,6 @@ function onClickAction(type: string, data: Roles) {
|
|||
|
||||
function openDialog() {
|
||||
modalDialogAdd.value = true;
|
||||
isStatusEdit.value = false;
|
||||
roleId.value = "";
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -126,26 +114,22 @@ function openDialog() {
|
|||
*/
|
||||
function onDeleteRole(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
// showLoader();
|
||||
// http
|
||||
// .delete(config.API.managementUser + `/${id}`)
|
||||
// .then(() => {
|
||||
// success($q, "ลบข้อมูลสำเร็จ");
|
||||
// fetchListRole();
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
showLoader();
|
||||
http
|
||||
.delete(config.API.managementAuth + `/${id}`)
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
fetchListRole();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function viewDetail(id: string) {
|
||||
router.push(`/roles/${id}`);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchListRole();
|
||||
});
|
||||
|
|
@ -216,12 +200,7 @@ onMounted(() => {
|
|||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="viewDetail(props.row.id)"
|
||||
>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
|
|
@ -265,12 +244,9 @@ onMounted(() => {
|
|||
</div>
|
||||
</q-card>
|
||||
|
||||
<DialogAddRole
|
||||
:fetchlist="fetchListRole"
|
||||
v-model:modal="modalDialogAdd"
|
||||
v-model:isStatusEdit="isStatusEdit"
|
||||
:roleId="roleId"
|
||||
/>
|
||||
<DialogAddRole v-model:modal="modalDialogAdd" />
|
||||
<!-- :fetchlist="fetchListRole" v-model:isStatusEdit="isStatusEdit"
|
||||
:roleId="roleId" -->
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue