hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into dev

Browse source 
* develop:
  fix:add fiedl email phone
  fix: show workflow EMP
  fix:disable radio Digital
  fix:profileId To citizenId
  fix: form upload Attachment
  fix:bug
  fix:btn position
  fix: img
  fix:interface
  feat:page issues
  fix:org name
  fix:path upload
  fix
  fix: max-file-size="5000000"
  feat:issue
This commit is contained in:
Warunee Tamkoo 2026-02-04 13:44:40 +07:00
commit c9e5f1cd71
27 changed files with 1775 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/api/02_organizational/api.organization.ts
View file

@ -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
View 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>

6
src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
View file

@ -40,6 +40,9 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const isLeave = defineModel<boolean>("isLeave", {
required: true,
});
const citizenId = defineModel<string>("citizenId", {
required: true,
});
const baseColumns = ref<QTableColumn[]>([
{
@ -614,7 +617,7 @@ onMounted(() => {
disable
v-model="formData.status"
label="ใช้งาน"
keep-color="primary"
keep-color
/>
</div>
</div>
@ -642,6 +645,7 @@ onMounted(() => {
v-model:modal="modalCommand"
v-model:command="command"
v-model:command-id="commandId"
:citizen-id="citizenId"
/>
</template>

4
src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue
View file

@ -46,6 +46,9 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const isLeave = defineModel<boolean>("isLeave", {
required: true,
});
const citizenId = defineModel<string>("citizenId", {
required: true,
});
const baseColumns = ref<QTableColumn[]>([
{
@ -977,6 +980,7 @@ onMounted(() => {
v-model:modal="modalCommand"
v-model:command="command"
v-model:command-id="commandId"
:citizen-id="citizenId"
/>
</template>

4
src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
View file

@ -39,6 +39,9 @@ const profileId = ref<string>(
const isLeave = defineModel<boolean>("isLeave", {
required: true,
});
const citizenId = defineModel<string>("citizenId", {
required: true,
});
const store = useGovernmentPosDataStore();
const {
@ -1621,6 +1624,7 @@ onMounted(async () => {
v-model:modal="modalCommand"
v-model:command="command"
v-model:commandId="commandId"
:citizen-id="citizenId"
/>
</template>

15
src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
View file

@ -65,13 +65,22 @@ const storeRegistry = useRegistryNewDataStore();
<PerformSpecialWork :is-leave="storeRegistry.isLeave" />
</q-tab-panel>
<q-tab-panel v-if="empType != '-employee'" name="5">
<ActingPos :is-leave="storeRegistry.isLeave" />
<ActingPos
:is-leave="storeRegistry.isLeave"
:citizen-id="storeRegistry.citizenId"
/>
</q-tab-panel>
<q-tab-panel v-if="empType != '-employee'" name="6">
<HelpGovernmentDetail :is-leave="storeRegistry.isLeave" />
<HelpGovernmentDetail
:is-leave="storeRegistry.isLeave"
:citizen-id="storeRegistry.citizenId"
/>
</q-tab-panel>
<q-tab-panel name="7">
<Postion :is-leave="storeRegistry.isLeave" />
<Postion
:is-leave="storeRegistry.isLeave"
:citizen-id="storeRegistry.citizenId"
/>
</q-tab-panel>
</q-tab-panels>
</template>

4
src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
View file

@ -39,6 +39,9 @@ const profileId = ref<string>(
const isLeave = defineModel<boolean>("isLeave", {
required: true,
});
const citizenId = defineModel<string>("citizenId", {
required: true,
});
const store = useSalaryDataStore();
const {
@ -1624,6 +1627,7 @@ onMounted(async () => {
v-model:modal="modalCommand"
v-model:command="command"
v-model:commandId="commandId"
:citizen-id="citizenId"
/>
</template>

5
src/modules/04_registryPerson/components/detail/Salary/Main.vue
View file

@ -45,7 +45,10 @@ const tab = ref<string>("1");
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="1">
<PositionSalary :is-leave="storeRegistry.isLeave" />
<PositionSalary
:is-leave="storeRegistry.isLeave"
:citizen-id="storeRegistry.citizenId"
/>
</q-tab-panel>
<q-tab-panel name="2">
<NotReceiveSalary :is-leave="storeRegistry.isLeave" />

9
src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue
View file

@ -553,12 +553,17 @@ onMounted(async () => {
</q-form>
<div class="col-12">
{{ typeEmp }}
<!-- v-if="typeEmp != 'employee'" -->
<Workflow
v-if="typeEmp != 'employee'"
v-model:is-check-data="isCheckData"
ref="workflowRef"
:id="requestId"
sys-name="REGISTRY_PROFILE"
:sys-name="
typeEmp !== 'employee'
? 'REGISTRY_PROFILE'
: 'REGISTRY_PROFILE_EMP'
"
/>
</div>
</div>

5
src/modules/05_placement/components/PersonalList/Table.vue
View file

@ -53,6 +53,7 @@ const props = defineProps({
const modalCommand = ref<boolean>(false);
const command = ref<string>("");
const commandId = ref<string>("");
const commandCitizenId = ref<string>("");
let roleAdmin = ref<boolean>(false);
const edit = ref<boolean>(true);
@ -912,9 +913,10 @@ function onSearchAdd() {
}
function onRefCommand(data: any) {
modalCommand.value = true;
command.value = data.refCommandNo;
commandId.value = data.commandId;
commandCitizenId.value = data.citizenId;
modalCommand.value = true;
// commandId.value = 'bdf9da91-ba45-497a-a2b7-cc49e2446d97'; //จำลอง
}
@ -1787,6 +1789,7 @@ onMounted(async () => {
v-model:modal="modalCommand"
v-model:command="command"
v-model:commandId="commandId"
v-model:citizen-id="commandCitizenId"
/>
</template>

2
src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
View file

@ -130,7 +130,7 @@ async function fectFormfull() {
evaluate_expenct_level.value = await probationStore.assignOutput.map(
(e: any) => ({
id: e.id,
labal: e.output_desc,
label: e.output_desc,
})
);
evaluate_ouptut.value = await probationStore.assignOutput.map((e: any) => ({

14
src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
View file

@ -122,7 +122,7 @@ const variablesToWatch = [
competency_level,
learn_level,
apply_level,
success_level,
// success_level,
];
const ArrayCountbotton = [orientation, self_learning, training_seminar];
@ -158,7 +158,7 @@ async function fecthFormdata(id: string) {
evaluate_expenct_level.value = res.data.result.assign_output.map(
(e: any) => ({
id: e.id,
labal: e.output_desc,
label: e.output_desc,
})
);
evaluate_ouptut.value = res.data.result.assign_output.map((e: any) => ({
@ -186,7 +186,7 @@ function savaForm() {
competency_level.value === 0 ||
learn_level.value === 0 ||
apply_level.value === 0 ||
success_level.value === 0 ||
// success_level.value === 0 ||
achievement_strength_desc.value === "" ||
lengthconduct.value !== 4 ||
lengthmoral_level.value !== 3 ||
@ -260,7 +260,7 @@ function putformData() {
competency_level: competency_level.value,
learn_level: learn_level.value,
apply_level: apply_level.value,
success_level: success_level.value,
// success_level: success_level.value,
achievement_other: achievement_other.value,
achievement_strength_desc: achievement_strength_desc.value,
achievement_improve_desc: achievement_improve_desc.value,
@ -809,7 +809,7 @@ onMounted(async () => {
</q-list>
</q-card>
<q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
<!-- <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
<q-list dense>
<q-item
dense
@ -843,7 +843,7 @@ onMounted(async () => {
</q-item-section>
</q-item>
</q-list>
</q-card>
</q-card> -->
<q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
<q-list dense>
@ -851,7 +851,7 @@ onMounted(async () => {
<q-item-section>
<q-item-label>
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.8 อื่น ๆ
1.7 อื่น ๆ
<q-checkbox
class="q-ml-sm"
dense

14
src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
View file

@ -130,7 +130,7 @@ const variablesToWatch = [
competency_level,
learn_level,
apply_level,
success_level,
// success_level,
];
const ArrayCountbotton = [orientation, self_learning, training_seminar];
@ -157,7 +157,7 @@ function savaForm() {
competency_level.value === 0 ||
learn_level.value === 0 ||
apply_level.value === 0 ||
success_level.value === 0 ||
// success_level.value === 0 ||
achievement_strength_desc.value === "" ||
lengthconduct.value !== 4 ||
lengthmoral_level.value !== 3 ||
@ -242,7 +242,7 @@ async function fecthFormdata(id: string) {
evaluate_expenct_level.value = res.data.result.assign_output.map(
(e: any) => ({
id: e.id,
labal: e.output_desc,
label: e.output_desc,
})
);
evaluate_ouptut.value = res.data.result.assign_output.map((e: any) => ({
@ -267,7 +267,7 @@ function putformData() {
competency_level: competency_level.value,
learn_level: learn_level.value,
apply_level: apply_level.value,
success_level: success_level.value,
// success_level: success_level.value,
achievement_other: achievement_other.value,
achievement_strength_desc: achievement_strength_desc.value,
achievement_improve_desc: achievement_improve_desc.value,
@ -814,7 +814,7 @@ onMounted(async () => {
</q-list>
</q-card>
<q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
<!-- <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
<q-list dense>
<q-item
dense
@ -848,7 +848,7 @@ onMounted(async () => {
</q-item-section>
</q-item>
</q-list>
</q-card>
</q-card> -->
<q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
<q-list dense>
@ -856,7 +856,7 @@ onMounted(async () => {
<q-item-section>
<q-item-label>
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.8 อื่น ๆ
1.7 อื่น ๆ
<q-checkbox
class="q-ml-sm"
dense

2
src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
View file

@ -170,7 +170,7 @@ async function fectFormfull() {
evaluate_expenct_level.value = await probationStore.assignOutput.map(
(e: any) => ({
id: e.id,
labal: e.output_desc,
label: e.output_desc,
})
);
evaluate_ouptut.value = await probationStore.assignOutput.map((e: any) => ({

3
src/modules/13_salary/components/DialogInfoMain.vue
View file

@ -36,6 +36,7 @@ const props = defineProps({
const avatar = ref<string>("");
const fullName = ref<string>("");
const position = ref<string>("");
const citizenId = ref<string>("");
const isLoading = ref<boolean>(true);
/** function เรียกข้อมูลส่วนตัว*/
@ -48,6 +49,7 @@ function fetchInformation() {
fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`;
position.value = data.position;
citizenId.value = data.citizenId;
if (data.avatarName) {
await fetchProfile(data.id as string, data.avatarName);
@ -220,6 +222,7 @@ watch(
v-if="type === 'posSalary'"
v-model:profileId="profileId"
:employeeClass="employeeClass"
:citizenId="citizenId"
/>
<InfoDiscipline
v-if="type === 'discipline'"

2
src/modules/13_salary/components/InfoSalary.vue
View file

@ -26,6 +26,7 @@ const {
/** props*/
const profileId = defineModel<string>("profileId", { required: true });
const employeeClass = defineModel<string>("employeeClass", { required: true });
const citizenId = defineModel<string>("citizenId", { required: true });
const modalCommand = ref<boolean>(false);
const command = ref<string>("");
@ -470,6 +471,7 @@ onMounted(() => {
v-model:modal="modalCommand"
v-model:command="command"
v-model:commandId="commandId"
:citizen-id="citizenId"
/>
</template>

22
src/modules/18_command/components/DialogPreviewCommand.vue
View file

@ -19,6 +19,7 @@ const { showLoader, hideLoader, messageError } = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const command = defineModel<string>("command", { required: true });
const commandId = defineModel<string>("commandId", { required: true });
const citizenId = defineModel<string>("citizenId", { required: true });
const promises = ref<any>([]);
const tab = ref<string>("main"); //tab
@ -37,6 +38,7 @@ function closeDialog() {
modal.value = false;
command.value = "";
commandId.value = "";
citizenId.value = "";
}
/**
@ -88,13 +90,25 @@ async function downloadCover(type: string) {
*/
async function fetchDataCommand(type: string) {
let newType = type === "cover" ? "คำสั่ง" : "แนบท้าย";
const pathAPI =
type === "cover"
? config.API.fileByFile(
"ระบบออกคำสั่ง",
newType,
commandId.value,
newType
)
: config.API.subFileByFileName(
"ระบบออกคำสั่ง",
newType,
commandId.value,
citizenId.value,
newType
);
await http
.get(
config.API.fileByFile("ระบบออกคำสั่ง", newType, commandId.value, newType)
)
.get(pathAPI)
.then(async (res) => {
const data = res.data;
console.log(res);
if (type === "cover") {
dataCover.value = data;

5
src/modules/18_command/components/Step/0_Main.vue
View file

@ -43,7 +43,7 @@ async function fetchData() {
? "Live"
: data.isSignature === false
? "Digital"
: "";
: "Live";
isStatus.value = data.status;
isDraft.value = data.isDraft;
isSign.value = data.isSign;
@ -174,11 +174,12 @@ onMounted(async () => {
<q-item tag="label" v-ripple>
<q-item-section avatar>
<!-- :disable="isSignature !== null || store.readonly" -->
<q-radio
v-model="signaturetype"
val="Digital"
color="primary"
:disable="isSignature !== null || store.readonly"
disable
/>
</q-item-section>
<q-item-section>

443
src/modules/18_command/components/Step/View0_Live.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onMounted, ref, computed } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
@ -42,12 +42,23 @@ const isAuthority = defineModel<boolean>("isAuthority", { required: true }); //
const isCheckAuthority = ref<boolean>(false); //เช็ครอผู้มีอำนาจลงนามอนุมัติ
const isAttachment = defineModel<boolean>("isAttachment", { required: true }); //เช็คบัญชีแนบท้าย
const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
// const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
// const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const isLoad = ref<boolean>(true); //แสดงโหลด
const modalPerView = ref<boolean>(false);
// สมมติว่ามีรายชื่อ
const attachmentList = ref<any[]>([]);
const attachmentFiles = ref<Record<number, any>>({});
const isFileTailer = computed(() => {
// จำนวนไฟล์ที่อัปโหลดครบทุกคน
return (
attachmentList.value.length > 0 &&
attachmentList.value.every((person) => !!attachmentFiles.value[person.id])
);
});
/**
* ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
@ -88,7 +99,9 @@ async function updateCheckboxAuthority(val: boolean) {
.put(config.API.command + `/pending-check/${commandId.value}`, {
sign: val,
})
.then(() => {})
.then(() => {
isAttachment.value && fetchLists();
})
.catch((err) => {
messageError($q, err);
})
@ -104,7 +117,7 @@ async function updateCheckboxAuthority(val: boolean) {
function onUploadFile(group: string) {
showLoader();
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
// let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
const fileName = { fileName: type };
http
.post(config.API.file("ระบบออกคำสั่ง", type, commandId.value), {
@ -118,7 +131,11 @@ function onUploadFile(group: string) {
res.data[key]?.fileName !== ""
);
foundKey &&
(await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, group));
(await uploadFileDoc(
res.data[foundKey]?.uploadUrl,
fileUploadOrder.value,
group
));
})
.catch((err) => {
messageError($q, err);
@ -134,7 +151,12 @@ function onUploadFile(group: string) {
* @param file ไฟล์ที่ต้องการอัปโหลด
* @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
*/
async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
async function uploadFileDoc(
uploadUrl: string,
file: any,
group: string,
id?: string
) {
const formData = new FormData();
formData.append("file", file);
showLoader();
@ -154,7 +176,11 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
if (group === "order") {
fileUploadOrder.value = null;
} else {
fileUploadTailer.value = null;
attachmentList.value.forEach((e) => {
if (e.id === id) {
e.file = null;
}
});
}
hideLoader();
});
@ -167,15 +193,40 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
async function fetchDoc(group: string) {
showLoader();
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
if (group === "order") {
await fetchDocOrder(type);
} else {
attachmentList.value.forEach(async (e) => {
await fetchDocTailer(type, e.id);
});
}
}
async function fetchDocOrder(type: string) {
await http
.get(config.API.file("ระบบออกคำสั่ง", type, commandId.value))
.then((res) => {
const data = res.data[0];
if (group === "order") {
fileOrder.value = data;
} else {
fileTailer.value = data;
}
fileOrder.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function fetchDocTailer(type: string, id: string) {
await http
.get(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, id))
.then((res) => {
const data = res.data[0];
attachmentList.value.forEach((e) => {
if (e.id === id) {
attachmentFiles.value[e.id] = data;
}
});
})
.catch((e) => {
messageError($q, e);
@ -190,18 +241,33 @@ const dataFile = ref<DataFileDownload>();
* ดาวน์โหลดลิงก์ไฟล์
* @param fileName file name
*/
function downloadFile(file: any, group: string, isView: boolean = false) {
function downloadFile(
file: any,
group: string,
isView: boolean = false,
id: string
) {
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
const pathApi =
group === "order"
? config.API.fileByFile(
"ระบบออกคำสั่ง",
type,
commandId.value,
file.fileName
)
: config.API.subFileByFileName(
"ระบบออกคำสั่ง",
type,
commandId.value,
id,
file.fileName
);
showLoader();
http
.get(
config.API.fileByFile(
"ระบบออกคำสั่ง",
type,
commandId.value,
file.fileName
)
)
.get(pathApi)
.then((res) => {
const data = res.data;
dataFile.value = data;
@ -257,6 +323,49 @@ function onConfirmOrder() {
}
}
/** ดึงข้อมูล บุคคล */
async function fetchLists() {
await http
.get(config.API.commandAction(commandId.value, "tab2"))
.then(async (res) => {
const data = await res.data.result;
attachmentList.value = data.commandRecives.map((item: any) => ({
id: item.citizenId,
name: item.prefix + item.firstName + " " + item.lastName,
file: null,
}));
})
.catch((e) => {
messageError($q, e);
});
}
function onUploadFileTailer(id: string, file: any) {
const type = "แนบท้าย";
const fileName = { fileName: type };
http
.post(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, id), {
replace: true,
fileList: fileName,
})
.then(async (res) => {
const foundKey: string | undefined = Object.keys(res.data).find(
(key) =>
res.data[key]?.fileName !== undefined &&
res.data[key]?.fileName !== ""
);
foundKey &&
(await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, type, id));
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
onMounted(async () => {
isCheckDraft.value = isDraft.value;
isCheckAuthority.value = isAuthority.value;
@ -264,6 +373,7 @@ onMounted(async () => {
isLoad.value = false;
let promises = [fetchDoc("order")];
if (isAttachment.value) {
await fetchLists();
promises.push(fetchDoc("tailer"));
}
await Promise.all(promises).finally(() => {
@ -318,141 +428,172 @@ onMounted(async () => {
/>
</div>
<div
class="row col-12 q-col-gutter-sm"
style="padding-left: 50px"
v-if="isAuthority"
>
<div class="row col-12" style="padding-left: 50px" v-if="isAuthority">
<div class="col-12 text-header">
อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
</div>
<div class="col-6">
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
<div
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
<div class="col-6 q-col-gutter-sm">
<div class="col-6">
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
คำสั่ง
<q-space />
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileOrder, 'order', true)"
<div
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
>
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="red"
icon="mdi-download"
@click.prevent="downloadFile(fileOrder, 'order')"
>
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-md" v-if="step === 2">
<q-file
outlined
dense
v-model="fileUploadOrder"
label="เลือกไฟล์คำสั่ง"
hide-bottom-space
accept=".pdf"
:readonly="store.readonly"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
คำสั่ง
<q-space />
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="
downloadFile(fileOrder, 'order', true, '')
"
>
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="red"
icon="mdi-download"
@click.prevent="
downloadFile(fileOrder, 'order', false, '')
"
>
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-md" v-if="step === 2">
<q-file
outlined
dense
v-model="fileUploadOrder"
label="เลือกไฟล์คำสั่ง"
hide-bottom-space
accept=".pdf"
:readonly="store.readonly"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
@click.prevent="onUploadFile('order')"
flat
round
icon="mdi-upload"
:color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
:disable="fileUploadOrder == null"
/>
</template>
</q-file>
</div>
</q-card>
</div>
<template v-slot:after>
<q-btn
@click.prevent="onUploadFile('order')"
flat
round
icon="mdi-upload"
:color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
:disable="fileUploadOrder == null"
/>
</template>
</q-file>
</div>
</q-card>
</div>
<div class="col-6" v-if="isAttachment">
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
<div
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
<div class="col-6" v-if="isAttachment">
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
เอกสารแนบท้าย
<q-space />
<q-btn
v-if="fileTailer"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileTailer, 'tailer', true)"
<div
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
>
<q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn
v-if="fileTailer"
rounded
flat
dense
color="red"
icon="mdi-download"
@click.prevent="downloadFile(fileTailer, 'tailer')"
>
<q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-md" v-if="step === 2">
<q-file
outlined
dense
v-model="fileUploadTailer"
label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
accept=".pdf"
:readonly="store.readonly"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
@click.prevent="onUploadFile('tailer')"
flat
round
icon="mdi-upload"
:color="fileUploadTailer == null ? 'grey-5' : 'blue-5'"
:disable="fileUploadTailer == null"
/>
<q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
</template>
</q-file>
</div>
</q-card>
เอกสารแนบท้าย
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md q-col-gutter-sm">
<div
v-for="(person, idx) in attachmentList"
:key="person.id"
class="col-12"
>
<q-card flat bordered class="q-pa-sm">
<div class="row items-center">
<div class="text-weight-medium">
{{ person.name }}
</div>
<q-space />
<q-btn
v-if="attachmentFiles[person.id]"
@click.prevent="
downloadFile(
attachmentFiles[person.id],
'tailer',
true,
person.id
)
"
flat
dense
color="primary"
icon="mdi-eye"
class="q-mr-xs"
>
<q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn
v-if="attachmentFiles[person.id]"
@click.prevent="
downloadFile(
attachmentFiles[person.id],
'tailer',
false,
person.id
)
"
flat
dense
color="red"
icon="mdi-download"
>
<q-tooltip>ดาวน์โหลดไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
</div>
<q-file
v-if="step === 2"
outlined
dense
v-model="person.file"
label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
accept=".pdf"
:readonly="store.readonly"
class="full-width"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
@click.prevent="
onUploadFileTailer(person.id, person.file)
"
flat
round
icon="mdi-upload"
:color="person.file == null ? 'grey-5' : 'blue-5'"
:disable="person.file == null"
/>
<q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
</template>
</q-file>
</q-card>
</div>
</div>
</q-card>
</div>
</div>
</div>
@ -462,7 +603,7 @@ onMounted(async () => {
step === 2 &&
isAuthority &&
fileOrder &&
(!isAttachment || fileTailer)
(!isAttachment || isFileTailer)
"
>
<q-btn
@ -472,14 +613,14 @@ onMounted(async () => {
:color="
!isAuthority ||
fileOrder === null ||
(fileTailer === null && isAttachment)
(!isFileTailer && isAttachment)
? 'grey-5'
: 'public'
"
:disable="
!isAuthority ||
fileOrder === null ||
(fileTailer === null && isAttachment)
(!isFileTailer && isAttachment)
"
/>
</div>

463
src/modules/22_issues/components/DialogViewIssue.vue Normal file
View 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
View 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
View 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
View 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
View 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>

2
src/router/index.ts
View file

@ -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
View 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 };
});

20
src/views/MainLayout.vue
View file

@ -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>