GitHub
commit
3c09380a26
4 changed files with 450 additions and 0 deletions
|
|
@ -18,4 +18,7 @@ export default {
|
|||
|
||||
checkoutCheck: `${leave}/user/checkout-check`,
|
||||
privacy: `${env.API_URI}/org/profile/privacy`,
|
||||
orgIssues: `${env.API_URI}/org/issues`,
|
||||
fileUpload: (name: string, group: string, id: string) =>
|
||||
`${env.API_URI}/salary/file/${name}/${group}/${id}`,
|
||||
}
|
||||
|
|
|
|||
362
src/components/DialogDebug.vue
Normal file
362
src/components/DialogDebug.vue
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
<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 http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
|
||||
import DialogHeader from '@/components/DialogHeader.vue'
|
||||
|
||||
const $q = useQuasar()
|
||||
const store = usePositionKeycloakStore()
|
||||
const { menuData, 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(() => menuData.value)
|
||||
|
||||
const optionsMenu = ref(menuData.value)
|
||||
|
||||
const formData = reactive({
|
||||
title: '',
|
||||
description: '',
|
||||
system: 'checkin',
|
||||
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.fileUpload('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: string) =>
|
||||
item.toLowerCase().includes(val.toLowerCase())
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชันปิด 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
|
||||
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 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>
|
||||
65
src/stores/positionKeycloak.ts
Normal file
65
src/stores/positionKeycloak.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const usePositionKeycloakStore = defineStore('positionKeycloak', () => {
|
||||
const menuData = ref<string[]>([
|
||||
'ลงเวลาปฏิบัติงาน',
|
||||
'ประวัติการลงเวลา',
|
||||
'รายการลงเวลากรณีพิเศษ',
|
||||
])
|
||||
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 { setPositionKeycloak, dataPositionKeycloak, findOrgName, menuData }
|
||||
})
|
||||
|
|
@ -9,15 +9,18 @@ import avatar from '@/assets/avatar_user.jpg'
|
|||
import { logout, tokenParsed, getCookie, gotoLeavePage } from '@/plugins/auth'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
import { usePrivacyStore } from '@/stores/privacy'
|
||||
import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
|
||||
|
||||
import type { notiType } from '@/interface/index/Main'
|
||||
import type { Noti } from '@/interface/response/Main'
|
||||
|
||||
import DialogHeader from '@/components/DialogHeader.vue'
|
||||
import PopupPrivacy from '@/components/PopupPrivacy.vue'
|
||||
import DialogDebug from '@/components/DialogDebug.vue'
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const privacyStore = usePrivacyStore()
|
||||
const positionKeycloakStore = usePositionKeycloakStore()
|
||||
const {
|
||||
date2Thai,
|
||||
hideLoader,
|
||||
|
|
@ -42,6 +45,7 @@ const notiList = ref<notiType[]>([]) // รายการแจ้งเตื
|
|||
const totalNotiList = ref<number>(0) //จำนวนการรายการแจ้งเตือน
|
||||
const totalNoti = ref<number>(0) //จำนวนการแจ้งเตือน
|
||||
const statusLoad = ref<boolean>(false) // สถานะการโหลด
|
||||
const modalDebug = ref<boolean>(false) // ตัวแปร popup debug
|
||||
//รูปแบบการแสดงผลของวันที่และเวลา
|
||||
const thaiOptions: Intl.DateTimeFormatOptions = {
|
||||
hour: '2-digit',
|
||||
|
|
@ -173,6 +177,7 @@ async function fetchKeycloakPosition() {
|
|||
.get(config.API.keycloakPosition())
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result
|
||||
positionKeycloakStore.setPositionKeycloak(data)
|
||||
privacyStore.modalPrivacy = !data.privacyCheckin ? true : false
|
||||
privacyStore.setAccepted(data.privacyCheckin)
|
||||
//เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
|
||||
|
|
@ -493,6 +498,20 @@ onMounted(async () => {
|
|||
</q-item-section>
|
||||
<q-item-section class="q-py-sm"> Landing Page </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="onreset()">
|
||||
<q-item-section avatar>
|
||||
<q-avatar
|
||||
|
|
@ -622,6 +641,7 @@ onMounted(async () => {
|
|||
</q-dialog>
|
||||
|
||||
<popup-privacy v-model:modal="privacyStore.modalPrivacy" />
|
||||
<dialog-debug v-model:modal="modalDebug" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue