hrms-bangkok/hrms-admin
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Refactoring code module 02_users

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-09 14:59:32 +07:00
parent 7540311518
commit c11ff006eb
12 changed files with 301 additions and 1363 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/modules/02_users/components/Permissions/DialogAdd.vue
View file

@ -1,8 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** importComponents*/ /** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
@ -12,9 +14,6 @@ import type { QTableProps } from "quasar";
import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main"; import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main";
import type { Roles } from "@/modules/02_users/interface/response/Main"; import type { Roles } from "@/modules/02_users/interface/response/Main";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
const { const {

29
src/modules/02_users/components/Roles/DialogAddRole.vue
View file

@ -1,19 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue"; import { reactive } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { FormRole } from "@/modules/02_users/interface/request/Main"; import type { FormRole } from "@/modules/02_users/interface/request/Main";
/** importComponents*/ /** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
const router = useRouter(); const router = useRouter();
@ -22,21 +20,24 @@ const { showLoader, hideLoader, dialogConfirm, messageError, success } =
/** props*/ /** props*/
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
// ฟอร์มบทบาท
const formData = reactive<FormRole>({ const formData = reactive<FormRole>({
roleName: "", roleName: "", // ขื่อบทบาท
roleDescription: "", roleDescription: "", // คำอธิบาย
}); });
/** function บันทึกข้อมูลผู้ใช้งาน*/ /**
* function บันทึกข้อมูลผู้ใช้งาน
*/
function onSubmit() { function onSubmit() {
dialogConfirm($q, () => { dialogConfirm($q, async () => {
showLoader(); showLoader();
http await http
.post(config.API.managementAuth, formData) .post(config.API.managementAuth, formData)
.then((res) => { .then((res) => {
closeDialog();
router.push(`/roles/${res.data.result}`); router.push(`/roles/${res.data.result}`);
success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -47,7 +48,9 @@ function onSubmit() {
}); });
} }
/** function ปิด Dialog */ /**
* function ปิด Dialog
*/
function closeDialog() { function closeDialog() {
modal.value = false; modal.value = false;
formData.roleName = ""; formData.roleName = "";

86
src/modules/02_users/components/Users/DialogAddUser.vue → src/modules/02_users/components/Users/DialogFormUser.vue
View file

@ -1,8 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue"; import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { import type {
@ -18,9 +20,6 @@ import type { Profile } from "@/modules/02_users/interface/response/Main";
/** importComponents*/ /** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
const { showLoader, hideLoader, dialogConfirm, messageError, success } = const { showLoader, hideLoader, dialogConfirm, messageError, success } =
@ -37,8 +36,7 @@ const props = defineProps({
}, },
}); });
/** Table*/ // Table
const rows = ref<Profile[]>([]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "citizenId", name: "citizenId",
@ -101,34 +99,40 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px", style: "font-size: 14px",
}, },
]); ]);
const selected = ref<Profile[]>([]); const rows = ref<Profile[]>([]); //ข้อมูลรายชื่อ
const searchType = ref<string>("citizenId"); const selected = ref<Profile[]>([]); // รายชื่อที่เลือก
const keyword = ref<string>(""); const searchType = ref<string>("citizenId"); // ประเภทค้นหา
const keyword = ref<string>(""); //คำค้นหา
// ตัวเลือกประเภทค้นหา
const searchTypeOption = ref<DataOption[]>([ const searchTypeOption = ref<DataOption[]>([
{ id: "citizenId", name: "เลขประจำตัวประชาชน" }, { id: "citizenId", name: "เลขประจำตัวประชาชน" },
{ id: "firstname", name: "ชื่อ" }, { id: "firstname", name: "ชื่อ" },
{ id: "lastname", name: "นามสกุล" }, { id: "lastname", name: "นามสกุล" },
]); ]);
const query = reactive({ const query = reactive({
page: 1, page: 1, // หน้า
pageSize: 10, pageSize: 10, // จำนวนข้อมูลต่อหน้า
}); });
const total = ref<number>(0); const total = ref<number>(0); // จำนวนรายการ
const maxPage = ref<number>(1); const maxPage = ref<number>(1); // จำนวนหน้า
const isPwd = ref<boolean>(true); const isPwd = ref<boolean>(true); // แสเดงรหัสผู้ใช้งาน
const roles = ref<Roles[]>([]); const roles = ref<Roles[]>([]); // รายการบทบาท
// ฟอร์มเพิ่มผู้ใช้งาน
const formData = reactive<FormUser>({ const formData = reactive<FormUser>({
profileId: "", profileId: "", // id รายชื่อ
username: "", username: "", // ชื่อผู้มใช้งาน
password: "", password: "", // รหัสผู้ใช้งาน
firstName: "", firstName: "", // ชื่อผู้มช้งาน
lastName: "", lastName: "", // นามสกุล
email: "", email: "", // เมล
roles: [], roles: [], // บทบาท
}); });
const roleOptions = ref([]); const roleOptions = ref([]); // รายการบทบาท;
/**
* ฟังก์ชันดึงข้อมูลรายชื่อ
*/
function fetchListUser() { function fetchListUser() {
showLoader(); showLoader();
const body = { const body = {
@ -141,8 +145,8 @@ function fetchListUser() {
`?page=${query.page}&pageSize=${query.pageSize}`, `?page=${query.page}&pageSize=${query.pageSize}`,
body body
) )
.then((res) => { .then(async (res) => {
const data = res.data.result; const data = await res.data.result;
maxPage.value = Math.ceil(data.total / query.pageSize); maxPage.value = Math.ceil(data.total / query.pageSize);
total.value = data.total; total.value = data.total;
rows.value = data.data; rows.value = data.data;
@ -156,8 +160,10 @@ function fetchListUser() {
} }
/** /**
* function fetch ข้อมูลผู้ใช้งาน * ฟังก์ชันดึงข้อมูลผู้ใช้งานตาม ID ผู้ใช้งาน
* @param id ผู้ใช้งาน * @param id ผู้ใช้งาน
*
* และกำหนดฟอร์มเพิ่มผู้ใช้งานจาก respone
*/ */
function fetchUserDetail(id: string) { function fetchUserDetail(id: string) {
showLoader(); showLoader();
@ -179,7 +185,11 @@ function fetchUserDetail(id: string) {
}); });
} }
/** function fetc รายการ role*/ /**
* ดึงข้อมูลรายการบทบาท
*
* บันทึกใน roleOptions
*/
function fetchlistRole() { function fetchlistRole() {
http http
.get(config.API.managementRole) .get(config.API.managementRole)
@ -197,7 +207,9 @@ function fetchlistRole() {
}); });
} }
/** function บันทึกข้อมูลผู้ใช้งาน*/ /**
* ฟังก์ชันยืนยันการบันทึกข้อมูลผู้ใช้งาน
*/
function onSubmit() { function onSubmit() {
formData.roles = !isStatusEdit.value formData.roles = !isStatusEdit.value
? roles.value.map((e: { id: string }) => e.id) ? roles.value.map((e: { id: string }) => e.id)
@ -225,7 +237,9 @@ function onSubmit() {
}); });
} }
/** function ปิด Dialog */ /**
* ฟังก์ชัน ปิด Dialog และกำหนด ตัวแปรไปเป็นค่า defult
*/
function closeDialog() { function closeDialog() {
modal.value = false; modal.value = false;
formData.profileId = ""; formData.profileId = "";
@ -251,6 +265,11 @@ async function updatePagination(initialPagination: Pagination) {
query.pageSize = initialPagination.rowsPerPage; query.pageSize = initialPagination.rowsPerPage;
} }
/**
* ดูการเปลี่ยนแปลงของจำนวนข้อมูลต่อหน้า
*
* ดึงข้อมูลรายชื่อตามจำนวนข้อมูลต่อหน้า
*/
watch( watch(
() => query.pageSize, () => query.pageSize,
() => { () => {
@ -258,6 +277,11 @@ watch(
} }
); );
/**
* ดูการเปลี่ยนแปลงของ modal
*
* ุ isStatusEdit เป็น true ดึงข้อมูลของผู้ใช้งาน
*/
watch( watch(
() => modal.value, () => modal.value,
() => { () => {
@ -269,6 +293,11 @@ watch(
} }
); );
/**
* ดูการเปลี่ยนแปลงของการเลือกรายชื่อ
*
* ุ กำหนด ฟอร์มเพิ่มข้อผู้ใช้งานตามราชชื่อที่เลือก
*/
watch( watch(
() => selected.value, () => selected.value,
() => { () => {
@ -279,7 +308,6 @@ watch(
formData.lastName = data.lastName; formData.lastName = data.lastName;
formData.email = data.email; formData.email = data.email;
formData.username = data.citizenId; formData.username = data.citizenId;
// formData.password = "54321";
} }
} }
); );

42
src/modules/02_users/components/Users/DialogRoleUser.vue
View file

@ -1,8 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue"; import { ref, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { Roles } from "@/modules/02_users/interface/request/Main"; import type { Roles } from "@/modules/02_users/interface/request/Main";
@ -10,9 +12,6 @@ import type { Roles } from "@/modules/02_users/interface/request/Main";
/** importComponents*/ /** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
const { const {
@ -27,8 +26,7 @@ const {
/** props*/ /** props*/
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
const userId = defineModel<string>("userId", { required: true }); const userId = defineModel<string>("userId", { required: true });
const roles = defineModel<any[]>("roles", {}); const roles = defineModel<any[]>("roles");
const props = defineProps({ const props = defineProps({
fetchlist: { fetchlist: {
type: Function, type: Function,
@ -36,7 +34,8 @@ const props = defineProps({
}, },
}); });
const rows = ref<Roles[]>([]); // Table
const rows = ref<Roles[]>([]); // รายการสิทธิ์
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "name", name: "name",
@ -59,9 +58,11 @@ const columns = ref<QTableProps["columns"]>([
]); ]);
const visibleColumns = ref<string[]>(["name", "description"]); const visibleColumns = ref<string[]>(["name", "description"]);
const selected = ref<Roles[]>([]); const selected = ref<Roles[]>([]); // รายการสิทธิ์ที่เลือก
/** function fetc รายการ role*/ /**
* ฟังก์ชันดึงข้อมูลรายการสิทธิ์ทั้งหมด
*/
function fetchlistRole() { function fetchlistRole() {
showLoader(); showLoader();
http http
@ -85,19 +86,27 @@ function fetchlistRole() {
}); });
} }
/**
* ฟังก์ชันยืนยันการบันทึกการเพิ่มสิทธิ์
*
* เมื่อเสร็จจะโหลดข้อมูลรายการสิทธิ์ที่มีใหม่
*/
function onSubmit() { function onSubmit() {
// เช็ครายการสิทธิ์ที่เลือก
if (selected.value.length === 0) { if (selected.value.length === 0) {
// ไม่มีแสดงข้อคาวมเตือน
dialogMessageNotify($q, "กรุณาเลือก role อย่างน้อง 1 role"); dialogMessageNotify($q, "กรุณาเลือก role อย่างน้อง 1 role");
} else { } else {
dialogConfirm($q, () => { // ยืนยันการบันทึกการเพิ่มสิทธิ์
dialogConfirm($q, async () => {
showLoader(); showLoader();
const body = { role: selected.value.map((e: { id: string }) => e.id) }; const body = { role: selected.value.map((e: { id: string }) => e.id) };
http http
.post(config.API.management + `/${userId.value}/role`, body) .post(config.API.management + `/${userId.value}/role`, body)
.then(() => { .then(async () => {
props.fetchlist?.(); await props.fetchlist?.();
closeDialog();
success($q, "บันทึกข้อมูลสำเร็จ"); success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -109,12 +118,17 @@ function onSubmit() {
} }
} }
/** function ปิด Dialog */ /**
* ฟังก์ชัน ปิด Dialog และกำหนดให้รายการสิทธิ์ที่เลือกเป็นค่าว่าง
*/
function closeDialog() { function closeDialog() {
modal.value = false; modal.value = false;
selected.value = []; selected.value = [];
} }
/**
* ดู modal เมื่อ modal เป็น true ทำการโหลข้อมูลรายการสิทธิ์ทั้งหมด
*/
watch( watch(
() => modal.value, () => modal.value,
() => { () => {

12
src/modules/02_users/router.ts
View file

@ -1,20 +1,20 @@
/** user*/ /** user*/
const ListsPageUser = () => import("@/modules/02_users/views/listsUser.vue"); const ListsPageUser = () => import("@/modules/02_users/views/01_user.vue");
const PageManagementRole = () => const PageManagementRole = () =>
import("@/modules/02_users/views/managementRoleUser.vue"); import("@/modules/02_users/views/page01_ManagementRoleUser.vue");
/** role*/ /** role*/
const ListsPageRole = () => import("@/modules/02_users/views/listsRole.vue"); const ListsPageRole = () => import("@/modules/02_users/views/02_rolesAndPermissions.vue");
const ListsPage2Role = () => const ListsPage2Role = () =>
import("@/modules/02_users/views/permissionDetail.vue"); import("@/modules/02_users/views/page02_rolesAndPermissionsDetail.vue");
/** PermissionPage*/ /** PermissionPage*/
const PermissionPage = () => const PermissionPage = () =>
import("@/modules/02_users/views/permissionsView.vue"); import("@/modules/02_users/views/03_permissionsView.vue");
/** roleOrganization */ /** roleOrganization */
const roleOrgview = () => const roleOrgview = () =>
import("@/modules/02_users/views/roleOrganization.vue"); import("@/modules/02_users/views/04_roleOrganization.vue");
export default [ export default [
{ {

90
src/modules/02_users/views/listsUser.vue → src/modules/02_users/views/01_user.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** importType*/ /** importType*/
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
@ -14,11 +16,7 @@ import type {
import type { Users, Roles } from "@/modules/02_users/interface/response/Main"; import type { Users, Roles } from "@/modules/02_users/interface/response/Main";
/** importComponents*/ /** importComponents*/
import DialogAddUser from "@/modules/02_users/components/Users/DialogAddUser.vue"; import DialogAddUser from "@/modules/02_users/components/Users/DialogFormUser.vue";
// import DialogManagementRole from "@/modules/02_users/components/Users/DialogManagementRole.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
@ -33,11 +31,12 @@ const {
} = useCounterMixin(); } = useCounterMixin();
/** Table*/ /** Table*/
const rows = ref<Users[]>([]); const keyword = ref<string>(""); // คำค้นหา
const total = ref<number>(0); const rows = ref<Users[]>([]); // ข้อมูลรายาการผู้ใช้งาน
const currentPage = ref<number>(1); const currentPage = ref<number>(1); // หน้า
const maxPage = ref<number>(0); const total = ref<number>(0); // จำนวนรายการ
const pageSize = ref<number>(10); const maxPage = ref<number>(0); // จำนวนหน้า
const pageSize = ref<number>(10); // จำนวนข้อมูลต่อหน้า
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -116,21 +115,14 @@ const visibleColumns = ref<string[]>([
"role", "role",
"enabled", "enabled",
]); ]);
const keyword = ref<string>("");
/** addUser*/ /** เพิ่มข้อมูลผู้ใช้งาน*/
const modalDialogAdd = ref<boolean>(false); const modalDialogAdd = ref<boolean>(false); // เปิด ปิด popup
const isStatusEdit = ref<boolean>(false); const isStatusEdit = ref<boolean>(false); // สถานะการแก้ไข
const userId = ref<string>(""); const userId = ref<string>(""); // id ผู้ใช้งานที่ต้องการแก้ไข
/** List Mune*/ // รายการตัวเลือก
const itemMenu = ref<ItemsMenu[]>([ const itemMenu = ref<ItemsMenu[]>([
// {
// label: "แก้ไข",
// icon: "edit",
// color: "edit",
// type: "edit",
// },
{ {
label: "ระงับการใช้งาน", label: "ระงับการใช้งาน",
icon: "mdi-lock-outline", icon: "mdi-lock-outline",
@ -157,18 +149,20 @@ const itemMenu = ref<ItemsMenu[]>([
}, },
]); ]);
/** function fetch รายชื่อผู้ใช้งาน*/ /**
function fetchListUsers() { * ฟังก์ชันดึงข้อมูลรายชื่อผู้ใช้งาน
*/
async function fetchListUsers() {
let max = pageSize.value; let max = pageSize.value;
let first = (currentPage.value - 1) * pageSize.value; let first = (currentPage.value - 1) * pageSize.value;
showLoader(); showLoader();
http await http
.get( .get(
config.API.managementUser + config.API.managementUser +
`?max=${max}&first=${first}&search=${keyword.value}` `?max=${max}&first=${first}&search=${keyword.value}`
) )
.then((res) => { .then(async (res) => {
const data = res.data.data; const data = await res.data.data;
total.value = res.data.total; total.value = res.data.total;
maxPage.value = Math.ceil(total.value / pageSize.value); maxPage.value = Math.ceil(total.value / pageSize.value);
@ -194,25 +188,35 @@ function fetchListUsers() {
} }
/** /**
* * ฟังก์ชันจัดการการกระทำต่าง ๆ กับข้อมูลผู้ใช้งาน
* @param type ประเภท * @param type ประเภทตัวเลือก
* @param data ข้อมูลรายการผู้ใช้งาน * @param data ข้อมูลรายการผู้ใช้งาน
*/ */
function onClickAction(type: string, data: Users) { function onClickAction(type: string, data: Users) {
// ตรวจสอบประเภทของการกระทำ
if (type === "edit") { if (type === "edit") {
// แก้ไข
modalDialogAdd.value = true; modalDialogAdd.value = true;
isStatusEdit.value = true; isStatusEdit.value = true;
userId.value = data.id; userId.value = data.id;
} else if (type === "delete") { } else if (type === "delete") {
// เรียกใช้ฟังก์ชันสำหรับลบข้อมูลผู้ใช้งาน
onDeleteUser(data.id); onDeleteUser(data.id);
} else if (type === "managementRole") { } else if (type === "managementRole") {
// ไปยังหน้าจัดการสิทธิ์ของผู้ใช้งาน
data && router.push(`/users/roles/${data.id}`); data && router.push(`/users/roles/${data.id}`);
} else if (type === "open" || type === "close") { } else if (type === "open" || type === "close") {
// เปลี่ยนสถานะเปิด/ปิดของผู้ใช้งาน
const status = type === "open" ? true : false; const status = type === "open" ? true : false;
onLockUser(data.id, status); onLockUser(data.id, status);
} }
} }
/**
* ฟังก์ชันเปิด popup สำหรับเพิ่มข้อมูลผู้ใช้งาน
*
* กำหนดสถานะการแก้ไขเป็น false และ id ผู้ใช้งานที่ต้องการแก้ไขเป็นค่าว่าง
*/
function openDialog() { function openDialog() {
modalDialogAdd.value = true; modalDialogAdd.value = true;
isStatusEdit.value = false; isStatusEdit.value = false;
@ -222,15 +226,17 @@ function openDialog() {
/** /**
* function ยืนยันการลบข้อมูลรายการผู้ใช้งาน * function ยืนยันการลบข้อมูลรายการผู้ใช้งาน
* @param id รายการผู้ใช้งาน * @param id รายการผู้ใช้งาน
*
* ลบข้อมูลรายชื่อเสร็จแล้วทำการดึงข้อมูลรายชื่อผู้ใช้งานใหม่
*/ */
function onDeleteUser(id: string) { function onDeleteUser(id: string) {
dialogRemove($q, () => { dialogRemove($q, () => {
showLoader(); showLoader();
http http
.delete(config.API.managementUser + `/${id}`) .delete(config.API.managementUser + `/${id}`)
.then(() => { .then(async () => {
await fetchListUsers();
success($q, "ลบข้อมูลสำเร็จ"); success($q, "ลบข้อมูลสำเร็จ");
fetchListUsers();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -242,9 +248,11 @@ function onDeleteUser(id: string) {
} }
/** /**
* function ระงับการใช้งาน * ฟังก์ชันระงับการใช้งานผู้ใช้งาน
* @param id ผู้ใช้งาน * @param id ผู้ใช้งาน
* @param type เปิดใช้งาน,ระงับการใช้งาน * @param type เปิดใช้งาน,ระงับการใช้งาน
*
* เสร็จแล้วทำการดึงข้อมูลรายชื่อผู้ใช้งานใหม่
*/ */
function onLockUser(id: string, type: boolean) { function onLockUser(id: string, type: boolean) {
dialogConfirm( dialogConfirm(
@ -255,7 +263,7 @@ function onLockUser(id: string, type: boolean) {
.put(config.API.managementUser + `/${id}/enableStatus/${type}`) .put(config.API.managementUser + `/${id}/enableStatus/${type}`)
.then(async () => { .then(async () => {
await fetchListUsers(); await fetchListUsers();
await success($q, type ? "เปิดใช้งานสำเร็จ" : "ระงับการใช้งานสำเร็จ"); success($q, type ? "เปิดใช้งานสำเร็จ" : "ระงับการใช้งานสำเร็จ");
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -272,12 +280,19 @@ function onLockUser(id: string, type: boolean) {
/** /**
* function อัปเดท paging * function อัปเดท paging
* @param initialPagination ข้อมูล pagination * @param initialPagination ข้อมูล pagination
*
* กำหนดหน้าไปยังหน้าแรก
*/ */
function updatePagination(initialPagination: Pagination) { function updatePagination(initialPagination: Pagination) {
currentPage.value = 1; currentPage.value = 1;
pageSize.value = initialPagination.rowsPerPage; pageSize.value = initialPagination.rowsPerPage;
} }
/**
* ดูการเปลี่ยนแปลงของจำนวนข้อมูลต่อหน้า
*
* ดึงข้อมูลรายชื่อผู้ใช้งานตามจำนวนข้อมูลต่อหน้า
*/
watch( watch(
() => pageSize.value, () => pageSize.value,
() => { () => {
@ -285,8 +300,13 @@ watch(
} }
); );
onMounted(() => { /**
fetchListUsers(); * hook ทำงานเมื่อมีการเรียกใช้งาน Components
*
* ดึงข้อมูลรายชื่อผู้ใช้งาน
*/
onMounted(async () => {
await fetchListUsers();
}); });
</script> </script>

50
src/modules/02_users/views/listsRole.vue → src/modules/02_users/views/02_rolesAndPermissions.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** importType*/ /** importType*/
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
@ -13,9 +15,6 @@ import type { Roles } from "@/modules/02_users/interface/response/Main";
/** importComponents*/ /** importComponents*/
import DialogAddRole from "@/modules/02_users/components/Roles/DialogAddRole.vue"; import DialogAddRole from "@/modules/02_users/components/Roles/DialogAddRole.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
const router = useRouter(); const router = useRouter();
@ -23,7 +22,8 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
useCounterMixin(); useCounterMixin();
/** Table*/ /** Table*/
const rows = ref<Roles[]>([]); const rows = ref<Roles[]>([]); // รายการบทบาท
const keyword = ref<string>(""); // คำค้นหา
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -54,11 +54,10 @@ const columns = ref<QTableProps["columns"]>([
}, },
]); ]);
const visibleColumns = ref<string[]>(["no", "roleName", "roleDescription"]); const visibleColumns = ref<string[]>(["no", "roleName", "roleDescription"]);
const keyword = ref<string>("");
const modalDialogAdd = ref<boolean>(false); const modalDialogAdd = ref<boolean>(false); // เพิ่มบทบาท
/** List Mune*/ // รายการตัวเลือก
const itemMenu = ref<ItemsMenu[]>([ const itemMenu = ref<ItemsMenu[]>([
{ {
label: "แก้ไข", label: "แก้ไข",
@ -74,13 +73,17 @@ const itemMenu = ref<ItemsMenu[]>([
}, },
]); ]);
/** function fetch รายการบทบาท*/ /**
function fetchListRole() { * function fetch รายการบทบาท
*
* และบันทึกใน rows
*/
async function fetchListRole() {
showLoader(); showLoader();
http await http
.get(config.API.managementAuth + `/list`) .get(config.API.managementAuth + `/list`)
.then((res) => { .then(async (res) => {
const data = res.data.result; const data = await res.data.result;
rows.value = data; rows.value = data;
}) })
.catch((err) => { .catch((err) => {
@ -92,18 +95,24 @@ function fetchListRole() {
} }
/** /**
* * ฟังก์ชันจัดการการกระทำต่าง ๆ กับข้อมูลบทบาท
* @param type ประเภท * @param type ประเภท
* @param data ข้อมูลรายการผู้ใช้งาน * @param data ข้อมูลรายการบทบาท
*/ */
function onClickAction(type: string, data: Roles) { function onClickAction(type: string, data: Roles) {
// เช็คการกระทำ
if (type === "edit") { if (type === "edit") {
// ไปหน้าจัดการสิทธิ์
router.push(`/roles/${data.id}`); router.push(`/roles/${data.id}`);
} else if (type === "delete") { } else if (type === "delete") {
// ลบรายการยบทบาท
onDeleteRole(data.id); onDeleteRole(data.id);
} }
} }
/**
* เปิด popup เพิ่มบทบาท
*/
function openDialog() { function openDialog() {
modalDialogAdd.value = true; modalDialogAdd.value = true;
} }
@ -113,13 +122,13 @@ function openDialog() {
* @param id รายการบทบาท * @param id รายการบทบาท
*/ */
function onDeleteRole(id: string) { function onDeleteRole(id: string) {
dialogRemove($q, () => { dialogRemove($q, async () => {
showLoader(); showLoader();
http await http
.delete(config.API.managementAuth + `/${id}`) .delete(config.API.managementAuth + `/${id}`)
.then(() => { .then(async () => {
await fetchListRole();
success($q, "ลบข้อมูลสำเร็จ"); success($q, "ลบข้อมูลสำเร็จ");
fetchListRole();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -130,6 +139,11 @@ function onDeleteRole(id: string) {
}); });
} }
/**
* hook ทำงานเมื่อมีการเรียกใช้งาน Components
*
* ดึงข้อมูลบทบาท
*/
onMounted(() => { onMounted(() => {
fetchListRole(); fetchListRole();
}); });

66
src/modules/02_users/views/permissionsView.vue → src/modules/02_users/views/03_permissionsView.vue
View file

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue"; import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { usePermissionsStore } from "@/modules/02_users/stores/permissions";
/** importComponents*/ import { useCounterMixin } from "@/stores/mixin";
import DialogAdd from "@/modules/02_users/components/Permissions/DialogAdd.vue";
/** importType*/ /** importType*/
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
@ -17,21 +17,23 @@ import type {
Position, Position,
} from "@/modules/02_users/interface/response/Main"; } from "@/modules/02_users/interface/response/Main";
/** importStore*/ /** importComponents*/
import { usePermissionsStore } from "@/modules/02_users/stores/permissions"; import DialogAdd from "@/modules/02_users/components/Permissions/DialogAdd.vue";
import { useCounterMixin } from "@/stores/mixin";
/**
* use
*/
const $q = useQuasar(); const $q = useQuasar();
const store = usePermissionsStore(); const store = usePermissionsStore();
const { showLoader, hideLoader, messageError, success, dialogRemove } = const { showLoader, hideLoader, messageError, success, dialogRemove } =
useCounterMixin(); useCounterMixin();
/** Tree*/ /** Tree*/
const filter = ref<string>(""); const filter = ref<string>(""); // ค้นหาข้อมูลโครงาสร้าง
const nodes = ref<Array<NodeTree[]>>([]); const nodes = ref<Array<NodeTree[]>>([]); // ข้อมูลโครงสร้าง
const lazy = ref(nodes); const lazy = ref(nodes);
const expanded = ref<string[]>([]); const expanded = ref<string[]>([]); // แสดงข้อมูลในโหนดที่เลือก
const nodeId = ref<string>(""); const nodeId = ref<string>(""); // id โหนด
/** Table*/ /** Table*/
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
@ -187,6 +189,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
style: "font-size: 14px", style: "font-size: 14px",
}, },
]); ]);
// ฟอร์มค้นหาตำแหน่ง
const reqMaster = reactive<FilterReqMaster>({ const reqMaster = reactive<FilterReqMaster>({
id: "", id: "",
type: 0, type: 0,
@ -198,21 +201,23 @@ const reqMaster = reactive<FilterReqMaster>({
}); });
const maxPage = ref<number>(0); const maxPage = ref<number>(0);
const totalRow = ref<number>(0); const totalRow = ref<number>(0);
const posMaster = ref<PosMaster[]>([]); const posMaster = ref<PosMaster[]>([]); // ข้อมูลรายการตำแหน่ง
const dataPosMaster = ref<PosMaster>(); const dataPosMaster = ref<PosMaster>(); // ข้อมูลตำแหน่ง
const pagination = ref<Pagination>({ const pagination = ref<Pagination>({
page: reqMaster.page, page: reqMaster.page,
rowsPerPage: reqMaster.pageSize, rowsPerPage: reqMaster.pageSize,
}); });
/** Dialog*/ const modalDialogAdd = ref<boolean>(false); // popup จัดการสิทธิ์
const modalDialogAdd = ref<boolean>(false);
/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/ /**
function fetchOrganizationActive() { * function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
http */
async function fetchOrganizationActive() {
showLoader();
await http
.get(config.API.activeOrganization) .get(config.API.activeOrganization)
.then((res) => { .then(async (res) => {
const data = res.data.result; const data = res.data.result;
if (data) { if (data) {
store.activeId = data.activeId; store.activeId = data.activeId;
@ -222,11 +227,14 @@ function fetchOrganizationActive() {
store.typeOrganizational === "current" store.typeOrganizational === "current"
? store.activeId ? store.activeId
: store.draftId; : store.draftId;
fetchDataTree(id); await fetchDataTree(id);
} }
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
})
.finally(() => {
hideLoader();
}); });
} }
@ -234,12 +242,12 @@ function fetchOrganizationActive() {
* function fetch ข้อมูลของ Tree * function fetch ข้อมูลของ Tree
* @param id id โครงสร้าง * @param id id โครงสร้าง
*/ */
function fetchDataTree(id: string) { async function fetchDataTree(id: string) {
showLoader(); showLoader();
http await http
.get(config.API.orgByid(id.toString())) .get(config.API.orgByid(id.toString()))
.then((res) => { .then(async (res) => {
const data = res.data.result; const data = await res.data.result;
nodes.value = data; nodes.value = data;
}) })
.catch((err) => { .catch((err) => {
@ -255,12 +263,12 @@ function fetchDataTree(id: string) {
* @param id idTree * @param id idTree
* @param level levelTree * @param level levelTree
*/ */
function fetchDataTable(id: string, revisionId: string, level: number) { async function fetchDataTable(id: string, revisionId: string, level: number) {
showLoader(); showLoader();
reqMaster.id = id; reqMaster.id = id;
reqMaster.revisionId = revisionId; reqMaster.revisionId = revisionId;
reqMaster.type = level; reqMaster.type = level;
http await http
.post(config.API.orgPosMasterList, reqMaster) .post(config.API.orgPosMasterList, reqMaster)
.then(async (res) => { .then(async (res) => {
posMaster.value = []; posMaster.value = [];
@ -268,7 +276,7 @@ function fetchDataTable(id: string, revisionId: string, level: number) {
maxPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize); maxPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
totalRow.value = res.data.result.total; totalRow.value = res.data.result.total;
res.data.result.data.forEach((e: PosMaster) => { await res.data.result.data.forEach((e: PosMaster) => {
const p = e.positions; const p = e.positions;
if (p.length !== 0) { if (p.length !== 0) {
const a = p.find((el: Position) => el.positionIsSelected === true); const a = p.find((el: Position) => el.positionIsSelected === true);
@ -311,6 +319,10 @@ function onClickAddRole(data: PosMaster) {
dataPosMaster.value = data; dataPosMaster.value = data;
} }
/**
* ยืนยันการลบสิทธิ์
* @param id ตำแหน่ง
*/
function onDeleteRole(id: string) { function onDeleteRole(id: string) {
dialogRemove( dialogRemove(
$q, $q,
@ -327,7 +339,7 @@ function onDeleteRole(id: string) {
reqMaster.revisionId, reqMaster.revisionId,
reqMaster.type reqMaster.type
); );
await success($q, "ลบข้อมูลสำเร็จ"); success($q, "ลบข้อมูลสำเร็จ");
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);

0
src/modules/02_users/views/roleOrganization.vue → src/modules/02_users/views/04_roleOrganization.vue
View file

41
src/modules/02_users/views/managementRoleUser.vue → src/modules/02_users/views/page01_ManagementRoleUser.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** importType*/ /** importType*/
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
@ -12,9 +14,6 @@ import type { Roles } from "@/modules/02_users/interface/response/Main";
/** importComponents*/ /** importComponents*/
import DialogAddRoleUser from "@/modules/02_users/components/Users/DialogRoleUser.vue"; import DialogAddRoleUser from "@/modules/02_users/components/Users/DialogRoleUser.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
const router = useRouter(); const router = useRouter();
@ -22,9 +21,10 @@ const route = useRoute();
const { dialogRemove, messageError, showLoader, hideLoader, success } = const { dialogRemove, messageError, showLoader, hideLoader, success } =
useCounterMixin(); useCounterMixin();
const userId = ref<string>(route.params.id.toString()); const userId = ref<string>(route.params.id.toString()); // id ผู้ใช้งาน
const rows = ref<Roles[]>([]); // Table
const rows = ref<Roles[]>([]); //ข้อมูลรายการสิทธิ์
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -56,14 +56,17 @@ const columns = ref<QTableProps["columns"]>([
]); ]);
const visibleColumns = ref<string[]>(["no", "name", "description"]); const visibleColumns = ref<string[]>(["no", "name", "description"]);
const modalDialogAdd = ref<boolean>(false); const modalDialogAdd = ref<boolean>(false); // เพิ่มสิทธิ์
function fetchListRoleUser() { /**
* ฟังก์ชันดึงข้อมูลรายการสิทธิ์ที่มีตามผู้ใช้งาน
*/
async function fetchListRoleUser() {
showLoader(); showLoader();
http http
.get(config.API.managementUser + `/role/${userId.value}`) .get(config.API.managementUser + `/role/${userId.value}`)
.then((res) => { .then(async (res) => {
rows.value = res.data.filter( rows.value = await res.data.filter(
(e: Roles) => (e: Roles) =>
e.name === "STAFF" || e.name === "STAFF" ||
e.name === "SUPER_ADMIN" || e.name === "SUPER_ADMIN" ||
@ -79,13 +82,19 @@ function fetchListRoleUser() {
}); });
} }
/**
* ฟังก์ชันลบข้อมูลสิทธิ์ออกจากผู้ใช้งาน
* @param id สิทธิ์
*
* ลบข้อมูลเสร็จโหลดข้อมูลรายการสิทธิ์ที่ใหม่
*/
function onDelete(id: string) { function onDelete(id: string) {
dialogRemove($q, () => { dialogRemove($q, () => {
showLoader(); showLoader();
http http
.delete(config.API.management + `/${userId.value}/role/${id}`) .delete(config.API.management + `/${userId.value}/role/${id}`)
.then(() => { .then(async () => {
fetchListRoleUser(); await fetchListRoleUser();
success($q, "ลบข้อมูลสำเร็จ"); success($q, "ลบข้อมูลสำเร็จ");
}) })
.catch((err) => { .catch((err) => {
@ -97,10 +106,18 @@ function onDelete(id: string) {
}); });
} }
/**
* ฟังก์เพิ่มสิทธิ์
*/
function openDialog() { function openDialog() {
modalDialogAdd.value = true; modalDialogAdd.value = true;
} }
/**
* hook ทำงานเมื่อมีการเรียกใช้ components
*
* โหลดข้อมูลรายการสิทธิ์ที่มี
*/
onMounted(() => { onMounted(() => {
fetchListRoleUser(); fetchListRoleUser();
}); });

57
src/modules/02_users/views/permissionDetail.vue → src/modules/02_users/views/page02_rolesAndPermissionsDetail.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { import type {
DataOption, DataOption,
@ -13,14 +15,15 @@ import type {
import type { SysList } from "@/modules/02_users/interface/response/Main"; import type { SysList } from "@/modules/02_users/interface/response/Main";
import type { FormRole } from "@/modules/02_users/interface/request/Main"; import type { FormRole } from "@/modules/02_users/interface/request/Main";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const router = useRouter();
const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
const { dialogConfirm, messageError, showLoader, hideLoader, success } = const { dialogConfirm, messageError, showLoader, hideLoader, success } =
useCounterMixin(); useCounterMixin();
const roleId = ref<string>(route.params.id.toString()); // id บทบาท
// รายการสิทธิ์การเข้าถึง
const attrPrivilegeOp = ref<DataOption[]>([ const attrPrivilegeOp = ref<DataOption[]>([
{ {
id: "ROOT", id: "ROOT",
@ -39,25 +42,26 @@ const attrPrivilegeOp = ref<DataOption[]>([
name: "มีสิทธิ์เข้าถึงข้อมูลเฉพาะเจาะจง", name: "มีสิทธิ์เข้าถึงข้อมูลเฉพาะเจาะจง",
}, },
]); ]);
const router = useRouter();
const route = useRoute();
const roleId = ref<string>(route.params.id.toString()); // ฟอร์มบทบาท
const formData = reactive<FormRole>({ const formData = reactive<FormRole>({
roleName: "", roleName: "", // ชื่อบทบาม
roleDescription: "", roleDescription: "", // คำอธิบาย
}); });
const sysListMain = ref<SysList[]>([]); const sysListMain = ref<SysList[]>([]);
const systemLists = ref<SystemList[]>([]); const systemLists = ref<SystemList[]>([]);
function fetchSys() { /**
* ดึงข้อมูลรายการระบบทั้หมด
*/
async function fetchSys() {
showLoader(); showLoader();
http await http
.get(config.API.managementSysList) .get(config.API.managementSysList)
.then((res) => { .then(async (res) => {
sysListMain.value = res.data.result; sysListMain.value = await res.data.result;
fetchDataRole(); await fetchDataRole();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -67,12 +71,17 @@ function fetchSys() {
}); });
} }
function fetchDataRole() { /**
* ดึงข้อมูลบทบาทและสิทธิ์
*
* บันทึกข้อมูลสิทธิ์เข้ากับรายการระบบ
*/
async function fetchDataRole() {
showLoader(); showLoader();
http await http
.get(config.API.managementAuth + `/${roleId.value}`) .get(config.API.managementAuth + `/${roleId.value}`)
.then((res) => { .then(async (res) => {
const data = res.data.result; const data = await res.data.result;
const sysList = data.roleAttributes; const sysList = data.roleAttributes;
formData.roleName = data.roleName; formData.roleName = data.roleName;
formData.roleDescription = data.roleDescription; formData.roleDescription = data.roleDescription;
@ -144,6 +153,9 @@ function fetchDataRole() {
}); });
} }
/**
* ยืนยันการบันทึกการบทบาทและสิทธิ์
*/
function onSubmit() { function onSubmit() {
dialogConfirm($q, () => { dialogConfirm($q, () => {
showLoader(); showLoader();
@ -189,9 +201,9 @@ function onSubmit() {
}; };
http http
.patch(config.API.managementAuth + `/${roleId.value}`, body) .patch(config.API.managementAuth + `/${roleId.value}`, body)
.then(() => { .then(async () => {
await fetchDataRole();
success($q, "บันทึกข้อมูลสำเร็จ"); success($q, "บันทึกข้อมูลสำเร็จ");
fetchDataRole();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -202,6 +214,11 @@ function onSubmit() {
}); });
} }
/**
* hook ทำงานเมื่อมีการเรียกใช้ components
*
* โหลดข้อมูลรายการระบบทั้งหมด
*/
onMounted(() => { onMounted(() => {
fetchSys(); fetchSys();
}); });

1186
src/modules/02_users/views/roleExample.vue
View file

File diff suppressed because it is too large Load diff