GitHub
commit
8646e76d70
10 changed files with 1397 additions and 0 deletions
|
|
@ -195,6 +195,7 @@ export default {
|
|||
|
||||
orgAssistance: (id: string) => `${orgProfile}/assistance/${id}`,
|
||||
|
||||
orgIssues: `${organization}/issues`,
|
||||
// active รักษาการในตำแหน่งตามหน่วยงาน
|
||||
activeActPosition: (id: string) => `${orgPosAct}/${id}`,
|
||||
};
|
||||
|
|
|
|||
410
src/components/Dialogs/DialogDebug.vue
Normal file
410
src/components/Dialogs/DialogDebug.vue
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import axios from "axios";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePositionKeycloakStore } from "@/stores/positionKeycloak";
|
||||
import { useMenuDataStore } from "@/stores/menuList";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = usePositionKeycloakStore();
|
||||
const { dataPositionKeycloak } = storeToRefs(store);
|
||||
const { findOrgName } = store;
|
||||
|
||||
const { menuList } = storeToRefs(useMenuDataStore());
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
|
||||
useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", {
|
||||
default: false,
|
||||
});
|
||||
|
||||
const title = computed(() => "แจ้งปัญหาการใช้งานระบบ");
|
||||
const orgName = computed(() => findOrgName(dataPositionKeycloak.value) || "");
|
||||
const optionData = computed(() => {
|
||||
return menuList.value.map((menu) => ({
|
||||
label: menu.sysName,
|
||||
value: menu.sysName,
|
||||
disable: menu?.children?.length === 0 ? false : true,
|
||||
children: menu?.children?.map((subMenu) => ({
|
||||
label: subMenu.sysName,
|
||||
value: `${menu.sysName}/${subMenu.sysName}`,
|
||||
})),
|
||||
}));
|
||||
});
|
||||
|
||||
const menuSelect = ref();
|
||||
const optionsMenu = ref(optionData.value);
|
||||
const formData = reactive({
|
||||
title: "",
|
||||
description: "",
|
||||
system: "mgt",
|
||||
fileAttachments: [] as File[],
|
||||
menu: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
});
|
||||
|
||||
/** ฟังก์ชันบันทึกข้อมูล */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
try {
|
||||
showLoader();
|
||||
const payload = {
|
||||
title: formData.title,
|
||||
description: formData.description,
|
||||
system: formData.system,
|
||||
menu: formData.menu,
|
||||
org: orgName.value,
|
||||
email: formData.email,
|
||||
phone: formData.phone,
|
||||
};
|
||||
|
||||
const res = await http.post(config.API.orgIssues, payload);
|
||||
|
||||
const issueCode = res.data.result.codeIssue;
|
||||
await uploadProfile(issueCode);
|
||||
success($q, "บันทึกข้อมูลเรียบร้อย");
|
||||
|
||||
onClose();
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันเพิ่มไฟล์
|
||||
* @param files ไฟล์ที่ต้องการเพิ่ม
|
||||
*/
|
||||
async function onAddfile(files: any) {
|
||||
files.forEach((file: any) => {
|
||||
formData.fileAttachments.push(file);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันลบไฟล์
|
||||
* @param files ไฟล์ที่ต้องการลบ
|
||||
*/
|
||||
async function onRemoveFile(files: any) {
|
||||
files.forEach((file: any) => {
|
||||
const index = formData.fileAttachments.findIndex(
|
||||
(x: any) => x.__key == file.__key
|
||||
);
|
||||
if (index > -1) {
|
||||
formData.fileAttachments.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันสร้าง url อัปโหลดไฟล์
|
||||
* @param code รหัส issue
|
||||
*/
|
||||
async function uploadProfile(code: string) {
|
||||
if (formData.fileAttachments.length === 0) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const fileName = formData.fileAttachments.map((file) => ({
|
||||
fileName: file.name,
|
||||
}));
|
||||
const res = await http.post(
|
||||
config.API.file("issueAttachments", formData.system, code),
|
||||
{
|
||||
replace: false,
|
||||
fileList: fileName,
|
||||
}
|
||||
);
|
||||
|
||||
for (const file of formData.fileAttachments) {
|
||||
const fileInfo = res.data[file.name];
|
||||
if (fileInfo && fileInfo.uploadUrl) {
|
||||
await uploadFileDoc(fileInfo.uploadUrl, file);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
messageError($q, e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปโหลดไฟล์เอกสาร
|
||||
* @param uploadUrl ลิงก์อัปโหลดไฟล์
|
||||
* @param file ไฟล์ที่ต้องการอัปโหลด
|
||||
*/
|
||||
async function uploadFileDoc(uploadUrl: string, file: any) {
|
||||
try {
|
||||
await axios.put(uploadUrl, file, {
|
||||
headers: {
|
||||
"Content-Type": file.type,
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
messageError($q, e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันกรองข้อมูลใน select
|
||||
* @param val ค่าที่กรอง
|
||||
* @param update ฟังก์ชันอัปเดตค่าหลังกรอง
|
||||
*/
|
||||
function filterSelector(val: string, update: Function) {
|
||||
update(() => {
|
||||
if (!val) {
|
||||
optionsMenu.value = optionData.value;
|
||||
return;
|
||||
}
|
||||
optionsMenu.value = optionData.value
|
||||
.map((parent: any) => {
|
||||
const matchParent = parent.label.indexOf(val) > -1;
|
||||
|
||||
const filteredChildren = (parent.children || []).filter(
|
||||
(child: any) => child.label.indexOf(val) > -1
|
||||
);
|
||||
if (matchParent) {
|
||||
return { ...parent };
|
||||
} else if (filteredChildren.length > 0) {
|
||||
return { ...parent, children: filteredChildren };
|
||||
}
|
||||
|
||||
return null;
|
||||
})
|
||||
.filter((item: any) => item !== null);
|
||||
});
|
||||
}
|
||||
|
||||
/** ฟังก์ชันปิด dialog และรีเซ็ตข้อมูล */
|
||||
function onClose() {
|
||||
modal.value = false;
|
||||
formData.menu = "";
|
||||
formData.title = "";
|
||||
formData.description = "";
|
||||
formData.fileAttachments = [];
|
||||
formData.email = "";
|
||||
formData.phone = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 700px; max-width: 80vw">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader :tittle="title" :close="onClose" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row col q-col-gutter-md">
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
ref="menuSelect"
|
||||
dense
|
||||
outlined
|
||||
label="ระบบ"
|
||||
v-model="formData.menu"
|
||||
:options="optionsMenu"
|
||||
class="inputgreen"
|
||||
:rules="[ (val: string) => !!val || 'กรุณาเลือกระบบ' ]"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn,
|
||||
)"
|
||||
>
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section>
|
||||
<q-item-label>{{ scope.opt.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-list v-if="scope.opt.children">
|
||||
<q-item
|
||||
v-for="child in scope.opt.children"
|
||||
:key="child.value"
|
||||
clickable
|
||||
@click.stop="
|
||||
formData.menu = child.value;
|
||||
menuSelect.hidePopup();
|
||||
"
|
||||
>
|
||||
<q-item-section class="q-ml-md">
|
||||
{{ child.label }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="หัวข้อปัญหา"
|
||||
v-model="formData.title"
|
||||
class="inputgreen"
|
||||
:rules="[ (val: string) => !!val || 'กรุณากรอกหัวข้อปัญหา' ]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียดปัญหา"
|
||||
v-model="formData.description"
|
||||
class="inputgreen"
|
||||
:rules="[ (val: string) => !!val || 'กรุณากรอกรายละเอียดปัญหา' ]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-uploader
|
||||
color="gray"
|
||||
type="file"
|
||||
flat
|
||||
ref="uploader"
|
||||
class="full-width"
|
||||
text-color="dark"
|
||||
accept=".jpg,.png,.pdf,.csv,.doc"
|
||||
bordered
|
||||
label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 5MB]"
|
||||
multiple
|
||||
max-file-size="5000000"
|
||||
@added="onAddfile"
|
||||
@removed="onRemoveFile"
|
||||
>
|
||||
<template v-slot:header="scope">
|
||||
<div
|
||||
class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
|
||||
>
|
||||
<q-btn
|
||||
v-if="scope.queuedFiles.length > 0"
|
||||
icon="clear_all"
|
||||
@click="scope.removeQueuedFiles"
|
||||
round
|
||||
dense
|
||||
flat
|
||||
>
|
||||
<q-tooltip>ลบทั้งหมด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="scope.uploadedFiles.length > 0"
|
||||
icon="done_all"
|
||||
@click="scope.removeUploadedFiles"
|
||||
round
|
||||
dense
|
||||
flat
|
||||
>
|
||||
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-spinner
|
||||
v-if="scope.isUploading"
|
||||
class="q-uploader__spinner"
|
||||
/>
|
||||
<div class="col">
|
||||
<div class="q-uploader__title">
|
||||
{{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 5MB]" }}
|
||||
</div>
|
||||
<div class="q-uploader__subtitle">
|
||||
{{ scope.uploadSizeLabel }}
|
||||
/
|
||||
{{ scope.uploadProgressLabel }}
|
||||
</div>
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="scope.canAddFiles"
|
||||
type="a"
|
||||
icon="add_box"
|
||||
@click="scope.pickFiles"
|
||||
round
|
||||
dense
|
||||
flat
|
||||
>
|
||||
<q-uploader-add-trigger />
|
||||
<q-tooltip>เลือกไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="scope.isUploading"
|
||||
icon="clear"
|
||||
@click="scope.abort"
|
||||
round
|
||||
dense
|
||||
flat
|
||||
>
|
||||
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</q-uploader>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-md-6 col-lg-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="อีเมลติดต่อกลับ"
|
||||
v-model="formData.email"
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
() =>
|
||||
!!formData.email ||
|
||||
!!formData.phone ||
|
||||
'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6 col-lg-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="เบอร์โทรติดต่อกลับ"
|
||||
v-model="formData.phone"
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
() =>
|
||||
!!formData.email ||
|
||||
!!formData.phone ||
|
||||
'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
class="q-px-md items-center"
|
||||
color="public"
|
||||
label="บันทึก"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
463
src/modules/22_issues/components/DialogViewIssue.vue
Normal file
463
src/modules/22_issues/components/DialogViewIssue.vue
Normal file
|
|
@ -0,0 +1,463 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useIssueStore } from "@/modules/22_issues/store";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
IssueData,
|
||||
IssueAttachment,
|
||||
IssueAttachmentWithDownloadUrl,
|
||||
} from "@/modules/22_issues/interface/Main";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useIssueStore();
|
||||
const { statusOptions } = storeToRefs(store);
|
||||
const { convertStatus, convertSystem } = store;
|
||||
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
date2Thai,
|
||||
} = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", {
|
||||
default: false,
|
||||
});
|
||||
const type = defineModel<string>("type", {
|
||||
default: "edit",
|
||||
});
|
||||
const data = defineModel<IssueData | null>("data", {
|
||||
default: null,
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
fetchData: () => Promise<void>;
|
||||
}>();
|
||||
|
||||
const isEdit = computed(() => type.value === "edit");
|
||||
const title = computed(() => (isEdit.value ? "แก้ไขสถานะ" : "รายละเอียดปัญหา"));
|
||||
const optionsStatus = computed(() =>
|
||||
statusOptions.value.filter((item) => item.value !== "")
|
||||
);
|
||||
const splitterModel = computed({
|
||||
get: () => (isEdit.value ? 70 : 100),
|
||||
set: (val: number) => {},
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
status: "",
|
||||
remark: "",
|
||||
});
|
||||
const fileList = ref<IssueAttachment[]>([]);
|
||||
const images = ref<IssueAttachmentWithDownloadUrl[]>([]);
|
||||
|
||||
const imageModal = ref(false);
|
||||
const selectedImg = ref("");
|
||||
|
||||
// ฟังก์ชันสำหรับเปิดดูรูป
|
||||
const openPreview = (url: string) => {
|
||||
selectedImg.value = url;
|
||||
imageModal.value = true;
|
||||
};
|
||||
|
||||
/** ฟังก์ชันบันทึกข้อมูล */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
try {
|
||||
await http.put(config.API.orgIssues + "/" + data?.value?.id, {
|
||||
status: form.status,
|
||||
remark: form.remark,
|
||||
});
|
||||
await props.fetchData();
|
||||
success($q, "บันทึกข้อมูลเรียบร้อย");
|
||||
onClose();
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** ฟังก์ชันปิด dialog และรีเซ็ตข้อมูล */
|
||||
function onClose() {
|
||||
modal.value = false;
|
||||
form.status = "";
|
||||
form.remark = "";
|
||||
fileList.value = [];
|
||||
images.value = [];
|
||||
}
|
||||
|
||||
async function fetchDocument(codeIssue: string, system: string) {
|
||||
try {
|
||||
const res = await http.get(
|
||||
config.API.file("issueAttachments", system, codeIssue)
|
||||
);
|
||||
const allFiles = res.data;
|
||||
|
||||
// 1. แยกไฟล์ที่ไม่ใช่รูปเก็บเข้า list
|
||||
fileList.value = allFiles.filter(
|
||||
(f: IssueAttachment) => !/\.(jpg|jpeg|png|gif|webp)$/i.test(f.fileName)
|
||||
);
|
||||
|
||||
// 2. แยกเฉพาะรูปภาพแล้วโหลดข้อมูล
|
||||
const images = allFiles.filter((f: IssueAttachment) =>
|
||||
/\.(jpg|jpeg|png|gif|webp)$/i.test(f.fileName)
|
||||
);
|
||||
for (const img of images) {
|
||||
await getImg(img.path, img.fileName);
|
||||
}
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันเรียกข้อมูลรายการรูป
|
||||
* @param dataList ข้อมูล
|
||||
*/
|
||||
async function getImg(path: string, fileName: string) {
|
||||
await http
|
||||
.get(config.API.fileByPath(`${path}/${fileName}`))
|
||||
.then((res) => {
|
||||
const data = res.data;
|
||||
const newData: IssueAttachmentWithDownloadUrl = {
|
||||
...data,
|
||||
};
|
||||
|
||||
images.value.push(newData);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ดาวน์โหลดลิงก์ไฟล์
|
||||
* @param fileName file name
|
||||
*/
|
||||
function downloadFile(fileName: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.fileByFile(
|
||||
"issueAttachments",
|
||||
data?.value?.system || "",
|
||||
data?.value?.codeIssue || "",
|
||||
fileName
|
||||
)
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.downloadUrl;
|
||||
window.open(data, "_blank");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const downloadImage = async (url: string, fileName: string = "image.png") => {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob(); // แปลงข้อมูลเป็น Blob
|
||||
const blobUrl = window.URL.createObjectURL(blob);
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = blobUrl;
|
||||
link.download = fileName; // กำหนดชื่อไฟล์ที่ต้องการให้บันทึก
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// ล้างหน่วยความจำ
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(blobUrl);
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
(val: boolean) => {
|
||||
if (val && data.value) {
|
||||
form.status = data.value.status || "";
|
||||
form.remark = data.value.remark || "";
|
||||
fetchDocument(data.value.codeIssue, data.value.system);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="overflow-hidden" style="min-width: 900px; max-width: 90vw">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader :tittle="title" :close="onClose" />
|
||||
<q-separator />
|
||||
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
:limits="isEdit ? [70, 70] : [100, 100]"
|
||||
style="height: 800px"
|
||||
:separator-class="!isEdit ? 'hidden' : ''"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="q-pa-lg">
|
||||
<div class="q-gutter-y-md text-body2">
|
||||
<div class="row">
|
||||
<div class="col-3 text-grey-7">รหัส:</div>
|
||||
<div class="col-9 text-weight-bold">
|
||||
{{ data?.codeIssue || "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3 text-grey-7">หัวข้อ:</div>
|
||||
<div class="col-9">{{ data?.title || "-" }}</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3 text-grey-7">รายละเอียด:</div>
|
||||
<div class="col-9">{{ data?.description || "-" }}</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3 text-grey-7">ระบบ/เมนู:</div>
|
||||
<div class="col-9">
|
||||
{{ convertSystem(data?.system || "") }} / {{ data?.menu }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3 text-grey-7">ผู้แจ้ง:</div>
|
||||
<div class="col-9">{{ data?.createdFullName || "-" }}</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3 text-grey-7">วันที่แจ้ง:</div>
|
||||
<div class="col-9">
|
||||
{{
|
||||
data?.createdAt
|
||||
? date2Thai(data?.createdAt, false, true)
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3 text-grey-7">สถานะ:</div>
|
||||
<div class="col-9">
|
||||
{{ convertStatus(data?.status || "") }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="data?.remark"
|
||||
class="row q-mt-sm bg-grey-2 q-pa-sm rounded-borders"
|
||||
>
|
||||
<div class="col-12 text-grey-7 text-caption">หมายเหตุ:</div>
|
||||
<div class="col-12">{{ data?.remark }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="images.length > 0" class="q-mt-xl">
|
||||
<div class="text-subtitle2 q-mb-sm">
|
||||
<q-icon name="image" /> รูปภาพประกอบ
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div
|
||||
v-for="(img, index) in images"
|
||||
:key="index"
|
||||
class="col-4"
|
||||
>
|
||||
<q-img
|
||||
:src="img.downloadUrl"
|
||||
:ratio="1"
|
||||
fit="cover"
|
||||
class="rounded-borders shadow-1 cursor-pointer image-hover"
|
||||
@click="openPreview(img.downloadUrl)"
|
||||
>
|
||||
<div class="absolute-full flex flex-center view-overlay">
|
||||
<q-icon name="visibility" size="sm" />
|
||||
</div>
|
||||
<div class="absolute-top-right btn-overlay q-pa-xs">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="download"
|
||||
color="white"
|
||||
size="sm"
|
||||
class="bg-black-op"
|
||||
@click.stop="
|
||||
downloadImage(img.downloadUrl, img.fileName)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</q-img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="fileList.length > 0" class="q-mt-lg">
|
||||
<div class="text-subtitle2 q-mb-sm">
|
||||
<q-icon name="attachment" /> ไฟล์เอกสารแนบ
|
||||
</div>
|
||||
<q-list bordered separator class="rounded-borders">
|
||||
<q-item v-for="file in fileList" :key="file.fileName" dense>
|
||||
<q-item-section avatar
|
||||
><q-icon name="description" color="blue"
|
||||
/></q-item-section>
|
||||
<q-item-section class="text-caption ellipsis">{{
|
||||
file.fileName
|
||||
}}</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="download"
|
||||
color="blue"
|
||||
size="sm"
|
||||
@click="downloadFile(file.fileName)"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:after v-if="isEdit">
|
||||
<div class="q-pa-lg bg-grey-1 full-height">
|
||||
<div class="col-12 q-pa-none q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="form.status"
|
||||
:options="optionsStatus"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
map-options
|
||||
label="สถานะ"
|
||||
emit-value
|
||||
:rules="[ (val: string) => !!val || 'กรุณาเลือกสถานะ' ]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:readonly="isEdit ? false : true"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:readonly="isEdit ? false : true"
|
||||
dense
|
||||
outlined
|
||||
label="หมายเหตุ"
|
||||
v-model="form.remark"
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-splitter>
|
||||
|
||||
<q-separator v-if="isEdit" />
|
||||
<q-card-actions align="right" class="q-pa-md" v-if="isEdit">
|
||||
<q-btn
|
||||
type="submit"
|
||||
class="q-px-md items-center"
|
||||
color="public"
|
||||
label="บันทึก"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- <q-dialog v-model="imageModal">
|
||||
<q-btn
|
||||
icon="close"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
class="absolute-top-right z-top text-white"
|
||||
/>
|
||||
|
||||
<q-img :src="selectedImg" />
|
||||
</q-dialog> -->
|
||||
<q-dialog v-model="imageModal">
|
||||
<q-btn
|
||||
icon="close"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
class="absolute-top-right z-top text-white"
|
||||
/>
|
||||
<q-card
|
||||
style="
|
||||
width: auto;
|
||||
max-width: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="selectedImg"
|
||||
style="
|
||||
display: block;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
"
|
||||
/>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bg-black-op {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.view-overlay {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.btn-overlay {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.image-hover:hover .view-overlay,
|
||||
.image-hover:hover .btn-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
/* ซ่อน Splitter Line เมื่อไม่ได้แก้ไข */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
42
src/modules/22_issues/interface/Main.ts
Normal file
42
src/modules/22_issues/interface/Main.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import type { D } from "@fullcalendar/core/internal-common";
|
||||
|
||||
interface Options {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface IssueData {
|
||||
codeIssue: string;
|
||||
createdAt: Date;
|
||||
createdFullName: string;
|
||||
createdUserId: string;
|
||||
description: string;
|
||||
id: string;
|
||||
lastUpdateFullName: string;
|
||||
lastUpdateUserId: string;
|
||||
lastUpdatedAt: Date;
|
||||
menu: string;
|
||||
org: string;
|
||||
remark: string;
|
||||
status: "IN_PROGRESS" | "RESOLVED" | "CLOSED" | "NEW";
|
||||
system: "mgt" | "user" | "checkin";
|
||||
title: string;
|
||||
}
|
||||
|
||||
interface IssueAttachment {
|
||||
fileName: string;
|
||||
path: string;
|
||||
pathname: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
interface IssueAttachmentWithDownloadUrl extends IssueAttachment {
|
||||
downloadUrl: string;
|
||||
}
|
||||
|
||||
export type {
|
||||
Options,
|
||||
IssueData,
|
||||
IssueAttachment,
|
||||
IssueAttachmentWithDownloadUrl,
|
||||
};
|
||||
14
src/modules/22_issues/router.ts
Normal file
14
src/modules/22_issues/router.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
const Main = () => import("@/modules/22_issues/views/Main.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/issues",
|
||||
name: "issuesMain",
|
||||
component: Main,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: "REPORT_ORG",
|
||||
Role: "STAFF",
|
||||
},
|
||||
},
|
||||
];
|
||||
52
src/modules/22_issues/store.ts
Normal file
52
src/modules/22_issues/store.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import type { Options } from "@/modules/22_issues/interface/Main";
|
||||
|
||||
export const useIssueStore = defineStore("issue", () => {
|
||||
const systemOptions = ref<Options[]>([
|
||||
{ label: "ทั้งหมด", value: "" },
|
||||
{ label: "ระบบบริหารจัดการ", value: "MGT" },
|
||||
{ label: "ระบบผู้ใช้งาน", value: "USER" },
|
||||
{ label: "ระบบลงเวลา", value: "CHECKIN" },
|
||||
]);
|
||||
|
||||
const statusOptions = ref<Options[]>([
|
||||
{ label: "ทั้งหมด", value: "" },
|
||||
{ label: "ใหม่", value: "NEW" },
|
||||
{ label: "กำลังดำเนินการ", value: "IN_PROGRESS" },
|
||||
{ label: "แก้ไขแล้ว", value: "RESOLVED" },
|
||||
{ label: "ปิดแล้ว", value: "CLOSED" },
|
||||
]);
|
||||
|
||||
function convertStatus(status: string) {
|
||||
let val = status.toUpperCase();
|
||||
switch (val) {
|
||||
case "NEW":
|
||||
return "ใหม่";
|
||||
case "IN_PROGRESS":
|
||||
return "กำลังดำเนินการ";
|
||||
case "RESOLVED":
|
||||
return "แก้ไขแล้ว";
|
||||
case "CLOSED":
|
||||
return "ปิดแล้ว";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
|
||||
function convertSystem(system: string) {
|
||||
let val = system.toUpperCase();
|
||||
switch (val) {
|
||||
case "MGT":
|
||||
return "ระบบบริหารจัดการ";
|
||||
case "USER":
|
||||
return "ระบบผู้ใช้งาน";
|
||||
case "CHECKIN":
|
||||
return "ระบบลงเวลา";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
|
||||
return { systemOptions, statusOptions, convertStatus, convertSystem };
|
||||
});
|
||||
333
src/modules/22_issues/views/Main.vue
Normal file
333
src/modules/22_issues/views/Main.vue
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useIssueStore } from "@/modules/22_issues/store";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { IssueData } from "@/modules/22_issues/interface/Main";
|
||||
|
||||
import DialogViewIssue from "@/modules/22_issues/components/DialogViewIssue.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useIssueStore();
|
||||
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
|
||||
useCounterMixin();
|
||||
|
||||
const { convertStatus, convertSystem } = store;
|
||||
const { systemOptions, statusOptions } = storeToRefs(store);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"title",
|
||||
"description",
|
||||
"system",
|
||||
"menu",
|
||||
"createdAt",
|
||||
"createdFullName",
|
||||
"status",
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "title",
|
||||
align: "left",
|
||||
label: "หัวข้อปัญหา",
|
||||
sortable: false,
|
||||
field: "title",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
align: "left",
|
||||
label: "รายละเอียด",
|
||||
sortable: false,
|
||||
field: "description",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "system",
|
||||
align: "left",
|
||||
label: "ระบบ",
|
||||
sortable: false,
|
||||
field: "system",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (val: string) => convertSystem(val),
|
||||
},
|
||||
{
|
||||
name: "menu",
|
||||
align: "left",
|
||||
label: "เมนู",
|
||||
sortable: false,
|
||||
field: "menu",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่สร้าง",
|
||||
sortable: false,
|
||||
field: "createdAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (val: string) => date2Thai(new Date(val), false, true),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ชื่อผู้สร้าง",
|
||||
sortable: false,
|
||||
field: "createdFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: false,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (val: string) => convertStatus(val),
|
||||
},
|
||||
]);
|
||||
const filterKeyword = ref<string>(""); // ค้นหา
|
||||
const systemFilter = ref<string>(""); // กรองระบบ
|
||||
const statusFilter = ref<string>("NEW"); // กรองสถานะ
|
||||
const rows = ref<IssueData[]>([]); // ข้อมูลตาราง
|
||||
const rowsData = ref<IssueData[]>([]); // ข้อมูลตารางทั้งหมด
|
||||
|
||||
const modal = ref<boolean>(false); // modal แสดงรายละเอียด
|
||||
const typeModal = ref<string>("view"); // ประเภท modal
|
||||
const dataIssue = ref<IssueData | null>(null); // ข้อมูลรายงานปัญหา
|
||||
|
||||
/** fetch รายการรายงานปัญหา */
|
||||
async function fetchListIssues() {
|
||||
try {
|
||||
showLoader();
|
||||
const res = await http.get(config.API.orgIssues + "/lists");
|
||||
rowsData.value = res.data.result;
|
||||
onSearch();
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
/** ค้นหารายการรายงานปัญหา*/
|
||||
function onSearch() {
|
||||
let filtered = onSearchDataTable(
|
||||
filterKeyword.value,
|
||||
rowsData.value,
|
||||
columns.value ? columns.value : []
|
||||
);
|
||||
if (systemFilter.value) {
|
||||
filtered = filtered.filter(
|
||||
(item) =>
|
||||
item.system &&
|
||||
item.system.toUpperCase() === systemFilter.value.toUpperCase()
|
||||
);
|
||||
}
|
||||
if (statusFilter.value) {
|
||||
filtered = filtered.filter(
|
||||
(item) =>
|
||||
item.status &&
|
||||
item.status.toUpperCase() === statusFilter.value.toUpperCase()
|
||||
);
|
||||
}
|
||||
rows.value = filtered;
|
||||
}
|
||||
|
||||
/**
|
||||
* แสดงรายละเอียดรายงานปัญหา
|
||||
* @param row ข้อมูลรายงานปัญหา
|
||||
* @param type ประเภทของ modal
|
||||
*/
|
||||
function onViewDetail(row: IssueData, type: string) {
|
||||
typeModal.value = type;
|
||||
dataIssue.value = row;
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
/** โหลดข้อมูลเมื่อเข้าหน้า */
|
||||
onMounted(async () => {
|
||||
await fetchListIssues();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
รายการรายงานปัญหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat bordered class="q-pa-md">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-xs items-end">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-8 col-md-6">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="systemFilter"
|
||||
:options="systemOptions"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
map-options
|
||||
label="ระบบ"
|
||||
emit-value
|
||||
@update:modelValue="onSearch"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-8 col-md-6">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="statusFilter"
|
||||
:options="statusOptions"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
map-options
|
||||
label="สถานะ"
|
||||
emit-value
|
||||
@update:modelValue="onSearch"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-0 col-sm-1 col-md-3 col-lg-5"></div>
|
||||
<div class="col-xs-12 col-sm-5 col-md-3 col-lg-4">
|
||||
<div class="row q-col-gutter-xs">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-7">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="onSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-5">
|
||||
<q-select
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
option-value="name"
|
||||
style="min-width: 140px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<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"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width></q-th>
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="checkPermission($route)?.attrIsGet"
|
||||
round
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-eye"
|
||||
@click.prevent.stop="onViewDetail(props.row, 'view')"
|
||||
>
|
||||
<q-tooltip>รายละเอียด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="
|
||||
checkPermission($route)?.attrIsUpdate &&
|
||||
checkPermission($route)?.attrIsGet
|
||||
"
|
||||
round
|
||||
color="edit"
|
||||
flat
|
||||
dense
|
||||
icon="edit"
|
||||
@click.prevent.stop="onViewDetail(props.row, 'edit')"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div
|
||||
:class="col.name === 'description' ? 'table_ellipsis' : ''"
|
||||
>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<DialogViewIssue
|
||||
v-model:modal="modal"
|
||||
:type="typeModal"
|
||||
:data="dataIssue"
|
||||
:fetch-data="fetchListIssues"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -28,6 +28,7 @@ import ModuleCommand from "@/modules/18_command/router";
|
|||
import ModulePositionCondition from "@/modules/19_condition/router";
|
||||
import ModulePositionTemp from "@/modules/20_positionTemp/router";
|
||||
import ModuleReport from "@/modules/21_report/router";
|
||||
import ModuleIssues from "@/modules/22_issues/router";
|
||||
|
||||
// TODO: ใช้หรือไม่?
|
||||
import { authenticated, logout } from "@/plugins/auth";
|
||||
|
|
@ -79,6 +80,7 @@ const router = createRouter({
|
|||
...ModulePositionCondition,
|
||||
...ModulePositionTemp,
|
||||
...ModuleReport,
|
||||
...ModuleIssues,
|
||||
],
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
60
src/stores/positionKeycloak.ts
Normal file
60
src/stores/positionKeycloak.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const usePositionKeycloakStore = defineStore("positionKeycloak", () => {
|
||||
const dataPositionKeycloak = ref<any>(null);
|
||||
|
||||
function setPositionKeycloak(data: any) {
|
||||
dataPositionKeycloak.value = data;
|
||||
}
|
||||
|
||||
function findOrgName(obj: any) {
|
||||
if (obj) {
|
||||
let name =
|
||||
obj.child4 != null &&
|
||||
obj.child4 !== "" &&
|
||||
obj.child3 != null &&
|
||||
obj.child3 !== ""
|
||||
? obj.child4 + (obj.child3 ? "/" : "")
|
||||
: obj.child4 != null && obj.child4 !== ""
|
||||
? obj.child4
|
||||
: "";
|
||||
|
||||
name +=
|
||||
obj.child3 != null &&
|
||||
obj.child3 !== "" &&
|
||||
obj.child2 != null &&
|
||||
obj.child2 !== ""
|
||||
? obj.child3 + (obj.child2 ? "/" : "")
|
||||
: obj.child3 != null && obj.child3 !== ""
|
||||
? obj.child3
|
||||
: "";
|
||||
|
||||
name +=
|
||||
obj.child2 != null &&
|
||||
obj.child2 !== "" &&
|
||||
obj.child1 != null &&
|
||||
obj.child1 !== ""
|
||||
? obj.child2 + (obj.child1 ? "/" : "")
|
||||
: obj.child2 != null && obj.child2 !== ""
|
||||
? obj.child2
|
||||
: "";
|
||||
|
||||
name +=
|
||||
obj.child1 != null &&
|
||||
obj.child1 !== "" &&
|
||||
obj.root != null &&
|
||||
obj.root !== ""
|
||||
? obj.child1 + (obj.root ? "/" : "")
|
||||
: obj.child1 != null && obj.child1 !== ""
|
||||
? obj.child1
|
||||
: "";
|
||||
name += obj.root != null && obj.root !== "" ? obj.root : "";
|
||||
return name == "" ? "-" : name;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
return { dataPositionKeycloak, setPositionKeycloak, findOrgName };
|
||||
});
|
||||
|
|
@ -6,6 +6,7 @@ import { storeToRefs } from "pinia";
|
|||
import { scroll, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useMenuDataStore } from "@/stores/menuList";
|
||||
import { usePositionKeycloakStore } from "@/stores/positionKeycloak";
|
||||
import {
|
||||
tokenParsed,
|
||||
logout,
|
||||
|
|
@ -26,6 +27,7 @@ import type {
|
|||
import { tabList, tabListPlacement } from "../interface/request/main/main";
|
||||
|
||||
import LoginLinkage from "@/components/LoginLinkage.vue";
|
||||
import DialogDebug from "@/components/Dialogs/DialogDebug.vue";
|
||||
|
||||
// landing page config url
|
||||
const configParam = {
|
||||
|
|
@ -63,6 +65,7 @@ const modalLoginLinkage = ref<boolean>(false); //เข้าสู่ระบ
|
|||
|
||||
// landing page redirect
|
||||
const landingPageUrl = ref<string>(configParam.landingPageUrl);
|
||||
const modalDebug = ref<boolean>(false);
|
||||
|
||||
async function fetchmsgNoread() {
|
||||
await http
|
||||
|
|
@ -524,6 +527,7 @@ async function fetchKeycloakPosition() {
|
|||
.get(config.API.keycloakPosition())
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
usePositionKeycloakStore().setPositionKeycloak(data);
|
||||
if (data.avatarName) {
|
||||
await getImg(data.profileId, data.avatarName);
|
||||
} else {
|
||||
|
|
@ -783,6 +787,21 @@ function onViewDetailNoti(url: string) {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable @click="modalDebug = true">
|
||||
<q-item-section avatar>
|
||||
<q-avatar
|
||||
color="yellow-8"
|
||||
text-color="white"
|
||||
icon="mdi-bug"
|
||||
size="24px"
|
||||
font-size="14px"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">
|
||||
แจ้งปัญหาการใช้งานระบบ
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable @click="modalLoginLinkage = true">
|
||||
<q-item-section avatar>
|
||||
<q-avatar
|
||||
|
|
@ -1216,6 +1235,7 @@ function onViewDetailNoti(url: string) {
|
|||
</q-page-container>
|
||||
<full-loader :visibility="loader" />
|
||||
<LoginLinkage v-model:modal="modalLoginLinkage" />
|
||||
<DialogDebug v-model:modal="modalDebug" />
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue