feat/issue
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
50b9ed9d35
commit
ac6c1583ee
4 changed files with 408 additions and 0 deletions
|
|
@ -18,4 +18,7 @@ export default {
|
||||||
|
|
||||||
checkoutCheck: `${leave}/user/checkout-check`,
|
checkoutCheck: `${leave}/user/checkout-check`,
|
||||||
privacy: `${env.API_URI}/org/profile/privacy`,
|
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}`,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
320
src/components/DialogDebug.vue
Normal file
320
src/components/DialogDebug.vue
Normal file
|
|
@ -0,0 +1,320 @@
|
||||||
|
<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: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ฟังก์ชันบันทึกข้อมูล */
|
||||||
|
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.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 = []
|
||||||
|
}
|
||||||
|
</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>
|
||||||
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 { logout, tokenParsed, getCookie, gotoLeavePage } from '@/plugins/auth'
|
||||||
import { useCounterMixin } from '@/stores/mixin'
|
import { useCounterMixin } from '@/stores/mixin'
|
||||||
import { usePrivacyStore } from '@/stores/privacy'
|
import { usePrivacyStore } from '@/stores/privacy'
|
||||||
|
import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
|
||||||
|
|
||||||
import type { notiType } from '@/interface/index/Main'
|
import type { notiType } from '@/interface/index/Main'
|
||||||
import type { Noti } from '@/interface/response/Main'
|
import type { Noti } from '@/interface/response/Main'
|
||||||
|
|
||||||
import DialogHeader from '@/components/DialogHeader.vue'
|
import DialogHeader from '@/components/DialogHeader.vue'
|
||||||
import PopupPrivacy from '@/components/PopupPrivacy.vue'
|
import PopupPrivacy from '@/components/PopupPrivacy.vue'
|
||||||
|
import DialogDebug from '@/components/DialogDebug.vue'
|
||||||
|
|
||||||
const mixin = useCounterMixin()
|
const mixin = useCounterMixin()
|
||||||
const privacyStore = usePrivacyStore()
|
const privacyStore = usePrivacyStore()
|
||||||
|
const positionKeycloakStore = usePositionKeycloakStore()
|
||||||
const {
|
const {
|
||||||
date2Thai,
|
date2Thai,
|
||||||
hideLoader,
|
hideLoader,
|
||||||
|
|
@ -42,6 +45,7 @@ const notiList = ref<notiType[]>([]) // รายการแจ้งเตื
|
||||||
const totalNotiList = ref<number>(0) //จำนวนการรายการแจ้งเตือน
|
const totalNotiList = ref<number>(0) //จำนวนการรายการแจ้งเตือน
|
||||||
const totalNoti = ref<number>(0) //จำนวนการแจ้งเตือน
|
const totalNoti = ref<number>(0) //จำนวนการแจ้งเตือน
|
||||||
const statusLoad = ref<boolean>(false) // สถานะการโหลด
|
const statusLoad = ref<boolean>(false) // สถานะการโหลด
|
||||||
|
const modalDebug = ref<boolean>(false) // ตัวแปร popup debug
|
||||||
//รูปแบบการแสดงผลของวันที่และเวลา
|
//รูปแบบการแสดงผลของวันที่และเวลา
|
||||||
const thaiOptions: Intl.DateTimeFormatOptions = {
|
const thaiOptions: Intl.DateTimeFormatOptions = {
|
||||||
hour: '2-digit',
|
hour: '2-digit',
|
||||||
|
|
@ -173,6 +177,7 @@ async function fetchKeycloakPosition() {
|
||||||
.get(config.API.keycloakPosition())
|
.get(config.API.keycloakPosition())
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
const data = await res.data.result
|
const data = await res.data.result
|
||||||
|
positionKeycloakStore.setPositionKeycloak(data)
|
||||||
privacyStore.modalPrivacy = !data.privacyCheckin ? true : false
|
privacyStore.modalPrivacy = !data.privacyCheckin ? true : false
|
||||||
privacyStore.setAccepted(data.privacyCheckin)
|
privacyStore.setAccepted(data.privacyCheckin)
|
||||||
//เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
|
//เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
|
||||||
|
|
@ -493,6 +498,20 @@ onMounted(async () => {
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section class="q-py-sm"> Landing Page </q-item-section>
|
<q-item-section class="q-py-sm"> Landing Page </q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
<q-item clickable @click="modalDebug = true">
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-avatar
|
||||||
|
color="warning"
|
||||||
|
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 clickable @click="onreset()">
|
||||||
<q-item-section avatar>
|
<q-item-section avatar>
|
||||||
<q-avatar
|
<q-avatar
|
||||||
|
|
@ -622,6 +641,7 @@ onMounted(async () => {
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
<popup-privacy v-model:modal="privacyStore.modalPrivacy" />
|
<popup-privacy v-model:modal="privacyStore.modalPrivacy" />
|
||||||
|
<dialog-debug v-model:modal="modalDebug" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue