จัดการข้แมูลผู้ใช้ => จัดการสิทธิ์
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
0d60113fd7
commit
60dd477afe
11 changed files with 2177 additions and 19 deletions
147
src/modules/02_users/components/Roles/DialogAddRole.vue
Normal file
147
src/modules/02_users/components/Roles/DialogAddRole.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<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 { FormRole } from "@/modules/02_users/interface/request/Main";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
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: "",
|
||||
});
|
||||
|
||||
/**
|
||||
* 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();
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
/** function ปิด Dialog */
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
formData.role = "";
|
||||
formData.description = "";
|
||||
}
|
||||
|
||||
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"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.role"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
label="ชื่อบทบาท"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.description"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกคำอิบาย'}`,]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
label="คำอิบาย"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -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 />
|
||||
|
|
|
|||
181
src/modules/02_users/components/Users/DialogRoleUser.vue
Normal file
181
src/modules/02_users/components/Users/DialogRoleUser.vue
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<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 type { Roles } from "@/modules/02_users/interface/request/Main";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
success,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const userId = defineModel<string>("userId", { required: true });
|
||||
const roles = defineModel<Roles[]>("roles", {});
|
||||
|
||||
const props = defineProps({
|
||||
fetchlist: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const rows = ref<Roles[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
align: "left",
|
||||
label: "คำอธิบาย",
|
||||
sortable: true,
|
||||
field: "description",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>(["name", "description"]);
|
||||
|
||||
const selected = ref<Roles[]>([]);
|
||||
|
||||
/** function fetc รายการ role*/
|
||||
function fetchlistRole() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.managementRole)
|
||||
.then((res) => {
|
||||
const rolesIds = roles.value?.map((e) => e.id);
|
||||
rows.value = res.data.filter((v: Roles) => !rolesIds?.includes(v.id));
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (selected.value.length === 0) {
|
||||
dialogMessageNotify($q, "กรุณาเลือก role อย่างน้อง 1 role");
|
||||
} else {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = { role: selected.value.map((e: { id: string }) => e.id) };
|
||||
http
|
||||
.post(config.API.management + `/${userId.value}/role`, body)
|
||||
.then(() => {
|
||||
props.fetchlist?.();
|
||||
closeDialog();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปิด Dialog */
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
selected.value = [];
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
fetchlistRole();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 50%">
|
||||
<DialogHeader tittle="เพิ่มสิทธิ์" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="col-12 q-pt-sm">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" @click="onSubmit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue