feat/issue
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
226469dd85
commit
46d5fab4e3
5 changed files with 428 additions and 7 deletions
|
|
@ -126,7 +126,7 @@ export default {
|
|||
dataUserCertificateHistoryByType: (
|
||||
emType: string,
|
||||
type: string,
|
||||
id: string
|
||||
id: string,
|
||||
) => `${org}/profile${emType}/${type}/history/${id}`,
|
||||
dataUserHonorHistory: (type: string, emType: string, id: string) =>
|
||||
`${profileOrg}${emType}/${type}/history/${id}`,
|
||||
|
|
@ -176,4 +176,5 @@ export default {
|
|||
changePassword: `${org}/keycloak/user/change-password`,
|
||||
|
||||
orgAssistance: (id: string) => `${profileOrg}/assistance/${id}`,
|
||||
orgIssues: `${env.API_URI}/org/issues`,
|
||||
};
|
||||
|
|
|
|||
333
src/components/DialogDebug.vue
Normal file
333
src/components/DialogDebug.vue
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
<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 { useDataStore } from "@/stores/data";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { MenuMainList } from "@/modules/01_dashboard/interface/Main";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = usePositionKeycloakStore();
|
||||
const dataStore = useDataStore();
|
||||
const { menuData } = storeToRefs(store);
|
||||
const { findOrgName } = store;
|
||||
const { dataprofilePosition } = storeToRefs(dataStore);
|
||||
|
||||
// const { menuList } = storeToRefs(useMenuDataStore());
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
|
||||
useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", {
|
||||
default: false,
|
||||
});
|
||||
|
||||
interface OptionSelect {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const title = computed(() => "แจ้งปัญหาการใช้งานระบบ");
|
||||
const orgName = computed(() => findOrgName(dataprofilePosition.value) || "");
|
||||
const optionData = computed(() => {
|
||||
return menuData.value.map((menu: MenuMainList) => ({
|
||||
label: menu.title,
|
||||
value: menu.title,
|
||||
}));
|
||||
});
|
||||
|
||||
const optionsMenu = ref(optionData.value);
|
||||
const formData = reactive({
|
||||
title: "",
|
||||
description: "",
|
||||
system: "user",
|
||||
fileAttachments: [] as File[],
|
||||
menu: "",
|
||||
});
|
||||
|
||||
/** ฟังก์ชันบันทึกข้อมูล */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
try {
|
||||
showLoader();
|
||||
const payload = {
|
||||
title: formData.title,
|
||||
description: formData.description,
|
||||
system: formData.system,
|
||||
menu: formData.menu,
|
||||
org: orgName.value,
|
||||
};
|
||||
|
||||
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.filter((item: OptionSelect) =>
|
||||
item.label.toLowerCase().includes(val.toLowerCase()),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/** ฟังก์ชันปิด dialog และรีเซ็ตข้อมูล */
|
||||
function onClose() {
|
||||
modal.value = false;
|
||||
formData.menu = "";
|
||||
formData.title = "";
|
||||
formData.description = "";
|
||||
formData.fileAttachments = [];
|
||||
}
|
||||
</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
|
||||
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,
|
||||
)"
|
||||
/>
|
||||
</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>
|
||||
</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>
|
||||
|
|
@ -8,6 +8,7 @@ import http from "@/plugins/http";
|
|||
import { tokenParsed } from "@/plugins/auth";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
import { usePositionKeycloakStore } from "@/stores/positionKeycloak";
|
||||
|
||||
import type {
|
||||
InboxDetail,
|
||||
|
|
@ -20,6 +21,7 @@ import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
|
|||
|
||||
const $q = useQuasar();
|
||||
const dataStore = useDataStore();
|
||||
const positionKeycloakStore = usePositionKeycloakStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
||||
|
||||
|
|
@ -42,7 +44,9 @@ const filteredItems = computed(() => {
|
|||
การพัฒนารายบุคคล: isOfficer,
|
||||
};
|
||||
|
||||
return items.value.filter((item) => conditions[item.title] ?? true);
|
||||
const data = items.value.filter((item) => conditions[item.title] ?? true);
|
||||
positionKeycloakStore.menuData = data;
|
||||
return data;
|
||||
});
|
||||
|
||||
const items = ref<MenuMainList[]>([
|
||||
|
|
@ -220,7 +224,7 @@ async function onClickOpenPopupDetail(data: InboxDetail) {
|
|||
.get(config.API.msgInboxRead(data.no))
|
||||
.then(() => {
|
||||
const filterDate = inboxList.value.filter(
|
||||
(r: InboxDetail) => r.no == data.no
|
||||
(r: InboxDetail) => r.no == data.no,
|
||||
);
|
||||
for (const item of filterDate) {
|
||||
item.isOpen = true;
|
||||
|
|
|
|||
56
src/stores/positionKeycloak.ts
Normal file
56
src/stores/positionKeycloak.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const usePositionKeycloakStore = defineStore("positionKeycloak", () => {
|
||||
const menuData = ref<any>(null);
|
||||
|
||||
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 { findOrgName, menuData };
|
||||
});
|
||||
|
|
@ -19,6 +19,7 @@ import { useDataStore } from "@/stores/data";
|
|||
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
||||
|
||||
import DialogResetPass from "@/components/DialogResetPass.vue";
|
||||
import DialogDebug from "@/components/DialogDebug.vue";
|
||||
|
||||
// landing page config url
|
||||
const configParam = {
|
||||
|
|
@ -50,6 +51,7 @@ const currentRouteName = router.currentRoute.value.name;
|
|||
const tab = ref<any>(currentRouteName);
|
||||
const isSsoToken = ref(false);
|
||||
const modalResetPass = ref(false); // ตัวแปรควบคุมการเปิดปิด Dialog เปลี่ยนรหัสผ่าน
|
||||
const modalDebug = ref(false); // ตัวแปรควบคุมการเปิดปิด Dialog แจ้งปัญหา
|
||||
|
||||
/**
|
||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
|
|
@ -165,7 +167,7 @@ const doLogout = () => {
|
|||
logoutSSO();
|
||||
},
|
||||
"ยืนยันการออกจากระบบ",
|
||||
"ต้องการออกจากระบบใช่หรือไม่"
|
||||
"ต้องการออกจากระบบใช่หรือไม่",
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -216,7 +218,7 @@ watch(
|
|||
notiList.value = updatedNotifications;
|
||||
fetchTotolNotificate();
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const thaiOptions: Intl.DateTimeFormatOptions = {
|
||||
|
|
@ -260,7 +262,7 @@ watch(
|
|||
() => route.name,
|
||||
(newVal) => {
|
||||
tab.value = newVal;
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
|
|
@ -416,7 +418,7 @@ watch(
|
|||
{{
|
||||
new Date(item.receiveDate).toLocaleTimeString(
|
||||
"th-TH",
|
||||
thaiOptions
|
||||
thaiOptions,
|
||||
)
|
||||
}}
|
||||
น.</q-item-label
|
||||
|
|
@ -536,6 +538,16 @@ watch(
|
|||
</q-item-section>
|
||||
<q-item-section> Landing Page </q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click.prevent="modalDebug = true">
|
||||
<q-item-section avatar style="min-width: 30px">
|
||||
<q-icon color="warning" size="18px" name="mdi-bug" />
|
||||
</q-item-section>
|
||||
<q-item-section
|
||||
><q-item-label
|
||||
>แจ้งปัญหาการใช้งานระบบ
|
||||
</q-item-label></q-item-section
|
||||
>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable v-close-popup @click="onInfo">
|
||||
<q-item-section avatar style="min-width: 30px">
|
||||
|
|
@ -592,6 +604,20 @@ watch(
|
|||
</q-item-section>
|
||||
<q-item-section> Landing Page </q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click.prevent="modalDebug = true"
|
||||
>
|
||||
<q-item-section avatar style="min-width: 30px">
|
||||
<q-icon color="warning" size="18px" name="mdi-bug" />
|
||||
</q-item-section>
|
||||
<q-item-section
|
||||
><q-item-label
|
||||
>แจ้งปัญหาการใช้งานระบบ
|
||||
</q-item-label></q-item-section
|
||||
>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="onInfo">
|
||||
<q-item-section avatar style="min-width: 30px">
|
||||
<q-icon
|
||||
|
|
@ -744,6 +770,7 @@ watch(
|
|||
</q-layout>
|
||||
|
||||
<DialogResetPass v-model="modalResetPass" />
|
||||
<DialogDebug v-model:modal="modalDebug" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue