Refactoring code module 02_users
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
7540311518
commit
c11ff006eb
12 changed files with 301 additions and 1363 deletions
|
|
@ -1,8 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** importComponents*/
|
||||
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 { Roles } from "@/modules/02_users/interface/response/Main";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
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 router = useRouter();
|
||||
|
|
@ -22,21 +20,24 @@ const { showLoader, hideLoader, dialogConfirm, messageError, success } =
|
|||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
||||
// ฟอร์มบทบาท
|
||||
const formData = reactive<FormRole>({
|
||||
roleName: "",
|
||||
roleDescription: "",
|
||||
roleName: "", // ขื่อบทบาท
|
||||
roleDescription: "", // คำอธิบาย
|
||||
});
|
||||
|
||||
/** function บันทึกข้อมูลผู้ใช้งาน*/
|
||||
/**
|
||||
* function บันทึกข้อมูลผู้ใช้งาน
|
||||
*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
http
|
||||
await http
|
||||
.post(config.API.managementAuth, formData)
|
||||
.then((res) => {
|
||||
closeDialog();
|
||||
router.push(`/roles/${res.data.result}`);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
closeDialog();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -47,7 +48,9 @@ function onSubmit() {
|
|||
});
|
||||
}
|
||||
|
||||
/** function ปิด Dialog */
|
||||
/**
|
||||
* function ปิด Dialog
|
||||
*/
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
formData.roleName = "";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<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 { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
|
|
@ -18,9 +20,6 @@ import type { Profile } from "@/modules/02_users/interface/response/Main";
|
|||
/** importComponents*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, dialogConfirm, messageError, success } =
|
||||
|
|
@ -37,8 +36,7 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
/** Table*/
|
||||
const rows = ref<Profile[]>([]);
|
||||
// Table
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "citizenId",
|
||||
|
|
@ -101,34 +99,40 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const selected = ref<Profile[]>([]);
|
||||
const searchType = ref<string>("citizenId");
|
||||
const keyword = ref<string>("");
|
||||
const rows = ref<Profile[]>([]); //ข้อมูลรายชื่อ
|
||||
const selected = ref<Profile[]>([]); // รายชื่อที่เลือก
|
||||
const searchType = ref<string>("citizenId"); // ประเภทค้นหา
|
||||
const keyword = ref<string>(""); //คำค้นหา
|
||||
// ตัวเลือกประเภทค้นหา
|
||||
const searchTypeOption = ref<DataOption[]>([
|
||||
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
|
||||
{ id: "firstname", name: "ชื่อ" },
|
||||
{ id: "lastname", name: "นามสกุล" },
|
||||
]);
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
page: 1, // หน้า
|
||||
pageSize: 10, // จำนวนข้อมูลต่อหน้า
|
||||
});
|
||||
const total = ref<number>(0);
|
||||
const maxPage = ref<number>(1);
|
||||
const total = ref<number>(0); // จำนวนรายการ
|
||||
const maxPage = ref<number>(1); // จำนวนหน้า
|
||||
|
||||
const isPwd = ref<boolean>(true);
|
||||
const roles = ref<Roles[]>([]);
|
||||
const isPwd = ref<boolean>(true); // แสเดงรหัสผู้ใช้งาน
|
||||
const roles = ref<Roles[]>([]); // รายการบทบาท
|
||||
// ฟอร์มเพิ่มผู้ใช้งาน
|
||||
const formData = reactive<FormUser>({
|
||||
profileId: "",
|
||||
username: "",
|
||||
password: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
roles: [],
|
||||
profileId: "", // id รายชื่อ
|
||||
username: "", // ชื่อผู้มใช้งาน
|
||||
password: "", // รหัสผู้ใช้งาน
|
||||
firstName: "", // ชื่อผู้มช้งาน
|
||||
lastName: "", // นามสกุล
|
||||
email: "", // เมล
|
||||
roles: [], // บทบาท
|
||||
});
|
||||
const roleOptions = ref([]);
|
||||
const roleOptions = ref([]); // รายการบทบาท;
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลรายชื่อ
|
||||
*/
|
||||
function fetchListUser() {
|
||||
showLoader();
|
||||
const body = {
|
||||
|
|
@ -141,8 +145,8 @@ function fetchListUser() {
|
|||
`?page=${query.page}&pageSize=${query.pageSize}`,
|
||||
body
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
maxPage.value = Math.ceil(data.total / query.pageSize);
|
||||
total.value = data.total;
|
||||
rows.value = data.data;
|
||||
|
|
@ -156,8 +160,10 @@ function fetchListUser() {
|
|||
}
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลผู้ใช้งาน
|
||||
* ฟังก์ชันดึงข้อมูลผู้ใช้งานตาม ID ผู้ใช้งาน
|
||||
* @param id ผู้ใช้งาน
|
||||
*
|
||||
* และกำหนดฟอร์มเพิ่มผู้ใช้งานจาก respone
|
||||
*/
|
||||
function fetchUserDetail(id: string) {
|
||||
showLoader();
|
||||
|
|
@ -179,7 +185,11 @@ function fetchUserDetail(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/** function fetc รายการ role*/
|
||||
/**
|
||||
* ดึงข้อมูลรายการบทบาท
|
||||
*
|
||||
* บันทึกใน roleOptions
|
||||
*/
|
||||
function fetchlistRole() {
|
||||
http
|
||||
.get(config.API.managementRole)
|
||||
|
|
@ -197,7 +207,9 @@ function fetchlistRole() {
|
|||
});
|
||||
}
|
||||
|
||||
/** function บันทึกข้อมูลผู้ใช้งาน*/
|
||||
/**
|
||||
* ฟังก์ชันยืนยันการบันทึกข้อมูลผู้ใช้งาน
|
||||
*/
|
||||
function onSubmit() {
|
||||
formData.roles = !isStatusEdit.value
|
||||
? roles.value.map((e: { id: string }) => e.id)
|
||||
|
|
@ -225,7 +237,9 @@ function onSubmit() {
|
|||
});
|
||||
}
|
||||
|
||||
/** function ปิด Dialog */
|
||||
/**
|
||||
* ฟังก์ชัน ปิด Dialog และกำหนด ตัวแปรไปเป็นค่า defult
|
||||
*/
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
formData.profileId = "";
|
||||
|
|
@ -251,6 +265,11 @@ async function updatePagination(initialPagination: Pagination) {
|
|||
query.pageSize = initialPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* ดูการเปลี่ยนแปลงของจำนวนข้อมูลต่อหน้า
|
||||
*
|
||||
* ดึงข้อมูลรายชื่อตามจำนวนข้อมูลต่อหน้า
|
||||
*/
|
||||
watch(
|
||||
() => query.pageSize,
|
||||
() => {
|
||||
|
|
@ -258,6 +277,11 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* ดูการเปลี่ยนแปลงของ modal
|
||||
*
|
||||
* ุ isStatusEdit เป็น true ดึงข้อมูลของผู้ใช้งาน
|
||||
*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
|
|
@ -269,6 +293,11 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* ดูการเปลี่ยนแปลงของการเลือกรายชื่อ
|
||||
*
|
||||
* ุ กำหนด ฟอร์มเพิ่มข้อผู้ใช้งานตามราชชื่อที่เลือก
|
||||
*/
|
||||
watch(
|
||||
() => selected.value,
|
||||
() => {
|
||||
|
|
@ -279,7 +308,6 @@ watch(
|
|||
formData.lastName = data.lastName;
|
||||
formData.email = data.email;
|
||||
formData.username = data.citizenId;
|
||||
// formData.password = "54321";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
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*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const {
|
||||
|
|
@ -27,8 +26,7 @@ const {
|
|||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const userId = defineModel<string>("userId", { required: true });
|
||||
const roles = defineModel<any[]>("roles", {});
|
||||
|
||||
const roles = defineModel<any[]>("roles");
|
||||
const props = defineProps({
|
||||
fetchlist: {
|
||||
type: Function,
|
||||
|
|
@ -36,7 +34,8 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const rows = ref<Roles[]>([]);
|
||||
// Table
|
||||
const rows = ref<Roles[]>([]); // รายการสิทธิ์
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
|
|
@ -59,9 +58,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
const visibleColumns = ref<string[]>(["name", "description"]);
|
||||
|
||||
const selected = ref<Roles[]>([]);
|
||||
const selected = ref<Roles[]>([]); // รายการสิทธิ์ที่เลือก
|
||||
|
||||
/** function fetc รายการ role*/
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลรายการสิทธิ์ทั้งหมด
|
||||
*/
|
||||
function fetchlistRole() {
|
||||
showLoader();
|
||||
http
|
||||
|
|
@ -85,19 +86,27 @@ function fetchlistRole() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันยืนยันการบันทึกการเพิ่มสิทธิ์
|
||||
*
|
||||
* เมื่อเสร็จจะโหลดข้อมูลรายการสิทธิ์ที่มีใหม่
|
||||
*/
|
||||
function onSubmit() {
|
||||
// เช็ครายการสิทธิ์ที่เลือก
|
||||
if (selected.value.length === 0) {
|
||||
// ไม่มีแสดงข้อคาวมเตือน
|
||||
dialogMessageNotify($q, "กรุณาเลือก role อย่างน้อง 1 role");
|
||||
} else {
|
||||
dialogConfirm($q, () => {
|
||||
// ยืนยันการบันทึกการเพิ่มสิทธิ์
|
||||
dialogConfirm($q, async () => {
|
||||
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();
|
||||
.then(async () => {
|
||||
await props.fetchlist?.();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
closeDialog();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -109,12 +118,17 @@ function onSubmit() {
|
|||
}
|
||||
}
|
||||
|
||||
/** function ปิด Dialog */
|
||||
/**
|
||||
* ฟังก์ชัน ปิด Dialog และกำหนดให้รายการสิทธิ์ที่เลือกเป็นค่าว่าง
|
||||
*/
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
selected.value = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* ดู modal เมื่อ modal เป็น true ทำการโหลข้อมูลรายการสิทธิ์ทั้งหมด
|
||||
*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue