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

UI ทะเบียนประวัติ Part 1

Browse source
This commit is contained in:
setthawutttty 2025-01-24 14:38:21 +07:00
parent cb49d7e0ab
commit d448de5784
12 changed files with 1111 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

244
src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
@ -36,6 +37,8 @@ const {
onSearchDataTable,
} = mixin;
const fileUpload = ref<File>();
const uploadUrl = ref<string>("");
/** props*/
const isLeave = defineModel<boolean>("isLeave", {
required: true,
@ -74,6 +77,7 @@ const OpsFilter = ref<InsigniaOps>({
});
const insigniaOptions = ref<any[]>([]);
const insigniaOptionsMain = ref<any[]>([]);
//ต้วลือกรายการครื่องราช
const Ops = ref<InsigniaOps>({
insigniaOptions: [],
@ -516,7 +520,12 @@ async function addEditData(editStatus: boolean = false) {
!editStatus && empType.value === "" ? profileId.value : undefined,
};
try {
await http[method](url, reqBody);
await http[method](url, reqBody).then(async (res) => {
if (fileUpload.value && res.data.result) {
await uploadProfile(res.data.result);
}
});
await fetchData();
await success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
@ -527,6 +536,80 @@ async function addEditData(editStatus: boolean = false) {
}
}
/**
* ฟังก์ชันส้ราง Path อัปโหลดไฟล์
* @param id
*/
async function uploadProfile(id: string) {
await http
.post(
config.API.subFile("ทะเบียนประวัติ", "เครื่องราชฯ", profileId.value, id),
{
replace: true,
fileList: [
{
fileName: "เอกสารหลักฐาน",
},
],
}
)
.then(async (res) => {
uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
await uploadFileURL(uploadUrl.value, fileUpload.value);
})
.catch((err) => {
messageError($q, err);
});
}
/**
* ฟังก์ชันอัปโหลดำไฟล์
* @param uploadUrl Path อัปโหลดไฟล์
* @param file ไฟล์เอกสาร
*/
async function uploadFileURL(uploadUrl: string, file: any) {
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(() => {
fileUpload.value = undefined;
})
.catch((err) => {
messageError($q, err);
});
}
/**
* ฟังก์ชันโหลไฟลเอกสารหลักฐาน
* @param id รายการที่ต้องการโหลด
*/
async function onDownloadFile(id: string) {
showLoader();
await http
.get(
config.API.subFileByFileName(
"ทะเบียนประวัติ",
"เครื่องราชฯ",
profileId.value,
id,
"เอกสารหลักฐาน"
)
)
.then(async (res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/** เปิด form ข้อมูลเครื่องราชอิสริยาภรณ์*/
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
modal.value = true;
@ -534,7 +617,7 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
if (editStatus && row) {
id.value = row.id;
insigniaType.value = row.insignia.insigniaType.name;
insigniaType.value = row.insignia.insigniaType.id;
insigniaForm.year = row.year;
insigniaForm.no = row.no;
insigniaForm.volume = row.volume;
@ -548,6 +631,14 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
insigniaForm.refCommandDate = row.refCommandDate;
insigniaForm.refCommandNo = row.refCommandNo;
insigniaForm.note = row.note;
const insigniaTypeFilter = insigniaOptionsMain.value.filter(
(r: any) => r.typeId === insigniaType.value
);
if (insigniaTypeFilter.length > 0) {
OpsFilter.value.insigniaOptions = insigniaTypeFilter;
insigniaOptions.value = OpsFilter.value.insigniaOptions;
}
} else {
clearData();
}
@ -610,12 +701,15 @@ function filterSelector(val: string, update: Function, refData: string) {
}
/** ค้นหาลำดับชั้น*/
function insigniaTypeSelection() {
const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
(r: DataOptionInsignia) => r.id === insigniaForm.insigniaId
function insigniaTypeSelection(check: boolean) {
if (check) {
insigniaForm.insigniaId = "";
}
const insigniaTypeFilter = insigniaOptionsMain.value.filter(
(r: any) => r.typeId === insigniaType.value
);
if (insigniaTypeFilter.length > 0) {
insigniaType.value = insigniaTypeFilter[0].typeName;
OpsFilter.value.insigniaOptions = insigniaTypeFilter;
}
}
@ -635,6 +729,7 @@ function clearData() {
insigniaForm.refCommandNo = "";
insigniaForm.refCommandDate = null;
insigniaForm.note = "";
fileUpload.value = undefined;
}
function serchDataTable() {
@ -658,7 +753,8 @@ onMounted(async () => {
await fetchData();
store.insigniaOption.length === 0 ? await fetchInsignia() : "";
Ops.value.insigniaOptions = store.insigniaOption;
OpsFilter.value.insigniaOptions = store.insigniaOption;
insigniaOptionsMain.value = store.insigniaOption;
insigniaOptions.value = store.insigniaOption;
});
</script>
@ -755,6 +851,7 @@ onMounted(async () => {
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width></q-th>
</q-tr>
</template>
@ -789,6 +886,19 @@ onMounted(async () => {
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.isUpload == true"
color="green"
flat
dense
round
icon="mdi-file-document-outline"
@click="onDownloadFile(props.row.id)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
@ -951,15 +1061,15 @@ onMounted(async () => {
option-value="id"
input-debounce="0"
option-label="name"
v-model="insigniaForm.insigniaId"
v-model="insigniaType"
class="inputgreen"
:label="`${'ชื่อเครื่องราชฯ'}`"
:options="insigniaOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
:label="`${'ลำดับชั้น'}`"
:options="store.insigniaTypeOp"
:rules="[(val:string) => !!val || `${'กรุณาเลือกลำดับชั้น'}`]"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
) "
@update:modelValue="insigniaTypeSelection"
@update:modelValue="insigniaTypeSelection(true)"
>
<template v-slot:no-option>
<q-item>
@ -971,16 +1081,39 @@ onMounted(async () => {
</q-select>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
<q-select
dense
readonly
outlined
:readonly="insigniaType == ''"
use-input
hide-selected
fill-input
emit-value
lazy-rules
map-options
hide-bottom-space
v-model="insigniaType"
:label="`${'ลำดับชั้น'}`"
/>
option-value="id"
input-debounce="0"
option-label="name"
v-model="insigniaForm.insigniaId"
class="inputgreen"
:label="`${'ชื่อเครื่องราชฯ'}`"
:options="insigniaOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
) "
>
<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-6 col-sm-6 col-md-6">
<q-input
dense
@ -1152,6 +1285,83 @@ onMounted(async () => {
label="หมายเหตุ"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row">
<q-uploader
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".pdf"
bordered
label="[ไฟล์ pdf ขนาดไม่เกิน 10MB]"
@added="(v:any) => (fileUpload = v[0])"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<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">
{{ "[ไฟล์ .pdf ขนาดไม่เกิน 10MB]" }}
</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>
</div>
</q-card-section>
<q-separator />

210
src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
@ -10,6 +11,7 @@ import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/DeclarationHonor";
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/DeclarationHonor";
import DialogHeader from "@/components/DialogHeader.vue";
@ -38,9 +40,24 @@ const isLeave = defineModel<boolean>("isLeave", {
required: true,
});
const fileUpload = ref<File>();
const uploadUrl = ref<string>("");
const typeOp = ref<DataOption[]>([
{
id: "CER_RETIRE",
name: "ประกาศเกียรติคุณประเภทที่ 4 ชั้นที่ 1 (เกษียณอายุราชการ)",
},
{
id: "CER_20YEAR",
name: "ประกาศเกียรติคุณประเภทที่ 4 ชั้นที่ 2 (ปฏิบัติหน้าที่ราชการครบ 20 ปีบริบูรณ์)",
},
{ id: "OUTSTAND", name: "ข้าราชการกรุงเทพมหานครสามัญดีเด่น" },
]);
const id = ref<string>(""); //id ที่ต้องการแก้ไข
const issueDateYear = ref<number>(0); //ปีที่ได้รับ
const declHonorForm = reactive<RequestItemsObject>({
type: "", //ประเภท
isDate: "false", //ปี
issuer: "", //ผู้มีอำนาจลงนาม
detail: "", //รายละเอียด
@ -277,7 +294,11 @@ async function addEditData(editStatus: boolean = false) {
};
try {
await http[method](url, reqBody);
await http[method](url, reqBody).then(async (res) => {
if (fileUpload.value && res.data.result) {
await uploadProfile(res.data.result);
}
});
await fetchData();
await success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
@ -288,6 +309,85 @@ async function addEditData(editStatus: boolean = false) {
}
}
/**
* ฟังก์ชันส้ราง Path อัปโหลดไฟล์
* @param id
*/
async function uploadProfile(id: string) {
await http
.post(
config.API.subFile(
"ทะเบียนประวัติ",
"ประกาศเกียรติคุณ",
profileId.value,
id
),
{
replace: true,
fileList: [
{
fileName: "เอกสารหลักฐาน",
},
],
}
)
.then(async (res) => {
uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
await uploadFileURL(uploadUrl.value, fileUpload.value);
})
.catch((err) => {
messageError($q, err);
});
}
/**
* ฟังก์ชันอัปโหลดำไฟล์
* @param uploadUrl Path อัปโหลดไฟล์
* @param file ไฟล์เอกสาร
*/
async function uploadFileURL(uploadUrl: string, file: any) {
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(() => {
fileUpload.value = undefined;
})
.catch((err) => {
messageError($q, err);
});
}
/**
* ฟังก์ชันโหลไฟลเอกสารหลักฐาน
* @param id รายการที่ต้องการโหลด
*/
async function onDownloadFile(id: string) {
showLoader();
await http
.get(
config.API.subFileByFileName(
"ทะเบียนประวัติ",
"ประกาศเกียรติคุณ",
profileId.value,
id,
"เอกสารหลักฐาน"
)
)
.then(async (res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/** เปิด form ข้อมูลประกาศเกียรติคุณ*/
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
modal.value = true;
@ -302,6 +402,7 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
declHonorForm.issueDate = row.issueDate;
declHonorForm.refCommandNo = row.refCommandNo;
declHonorForm.refCommandDate = row.refCommandDate;
declHonorForm.type = row.type;
declHonorForm.isDate = row.isDate ? "true" : "false";
} else {
clearData();
@ -352,6 +453,7 @@ function clearData() {
declHonorForm.detail = "";
declHonorForm.issueDate = new Date();
declHonorForm.refCommandNo = "";
declHonorForm.type = "";
declHonorForm.refCommandDate = null;
declHonorForm.isDate = "false";
}
@ -469,6 +571,7 @@ onMounted(() => {
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
@ -502,6 +605,19 @@ onMounted(() => {
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.isUpload == true"
color="green"
flat
dense
round
icon="mdi-file-document-outline"
@click="onDownloadFile(props.row.id)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
@ -687,6 +803,21 @@ onMounted(() => {
:label="`${'ผู้มีอำนาจลงนาม'}`"
/>
</div>
<div class="col-12">
<q-select
outlined
dense
label="ประเภท"
v-model="declHonorForm.type"
:options="typeOp"
option-label="name"
option-value="id"
class="inputgreen"
emit-value
map-options
>
</q-select>
</div>
<div class="col-12">
<q-input
dense
@ -756,6 +887,83 @@ onMounted(() => {
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row">
<q-uploader
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".pdf"
bordered
label="[ไฟล์ pdf ขนาดไม่เกิน 10MB]"
@added="(v:any) => (fileUpload = v[0])"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<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">
{{ "[ไฟล์ .pdf ขนาดไม่เกิน 10MB]" }}
</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>
</div>
</q-card-section>
<q-separator color="grey-4" />

185
src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import axios from "axios";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
@ -32,7 +33,8 @@ const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const fileUpload = ref<File>();
const uploadUrl = ref<string>("");
/** props*/
const isLeave = defineModel<boolean>("isLeave", {
required: true,
@ -177,6 +179,7 @@ function closeDialog() {
dutyData.reference = "";
dutyData.refCommandNo = "";
dutyData.refCommandDate = null;
fileUpload.value = undefined;
}
/** fetch ข้อมูลรายการพิเศษ*/
@ -211,7 +214,10 @@ function addData() {
};
http
.post(config.API.profileNewDuty(empType.value), body)
.then(async () => {
.then(async (res) => {
if (fileUpload.value && res.data.result) {
await uploadProfile(res.data.result);
}
await fetchData(profileId.value);
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
@ -232,7 +238,10 @@ function editData(idData: string) {
...dutyData,
profileId: undefined,
})
.then(async () => {
.then(async (res) => {
if (fileUpload.value && res.data.result) {
await uploadProfile(res.data.result);
}
await fetchData(profileId.value);
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
@ -245,6 +254,85 @@ function editData(idData: string) {
});
}
/**
* ฟังก์ชันส้ราง Path อัปโหลดไฟล์
* @param id
*/
async function uploadProfile(id: string) {
await http
.post(
config.API.subFile(
"ทะเบียนประวัติ",
"ประกาศเกียรติคุณ",
profileId.value,
id
),
{
replace: true,
fileList: [
{
fileName: "เอกสารหลักฐาน",
},
],
}
)
.then(async (res) => {
uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
await uploadFileURL(uploadUrl.value, fileUpload.value);
})
.catch((err) => {
messageError($q, err);
});
}
/**
* ฟังก์ชันอัปโหลดำไฟล์
* @param uploadUrl Path อัปโหลดไฟล์
* @param file ไฟล์เอกสาร
*/
async function uploadFileURL(uploadUrl: string, file: any) {
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(() => {
fileUpload.value = undefined;
})
.catch((err) => {
messageError($q, err);
});
}
/**
* ฟังก์ชันโหลไฟลเอกสารหลักฐาน
* @param id รายการที่ต้องการโหลด
*/
async function onDownloadFile(id: string) {
showLoader();
await http
.get(
config.API.subFileByFileName(
"ทะเบียนประวัติ",
"ประกาศเกียรติคุณ",
profileId.value,
id,
"เอกสารหลักฐาน"
)
)
.then(async (res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/** ยืนยันการบันทึกข้อมูล*/
function onSubmit() {
dialogConfirm(
@ -364,6 +452,7 @@ onMounted(() => {
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props" v-if="mode === 'table'">
@ -397,6 +486,19 @@ onMounted(() => {
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.isUpload == true"
color="green"
flat
dense
round
icon="mdi-file-document-outline"
@click="onDownloadFile(props.row.id)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:item="props" v-else>
@ -651,6 +753,83 @@ onMounted(() => {
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row">
<q-uploader
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".pdf"
bordered
label="[ไฟล์ pdf ขนาดไม่เกิน 10MB]"
@added="(v:any) => (fileUpload = v[0])"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<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">
{{ "[ไฟล์ .pdf ขนาดไม่เกิน 10MB]" }}
</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>
</div>
</q-card-section>
<q-separator />

275
src/modules/04_registryPerson/components/detail/Other/03_Document7.vue Normal file
View file

@ -0,0 +1,275 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { ArrayFileList } from "@/modules/04_registryPerson/interface/index/document";
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const {
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
dialogRemove,
} = mixin;
/**
* props
*/
const isLeave = defineModel<boolean>("isLeave", {
required: true,
});
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const documentFile = ref<any>(null);
const fileList = ref<ArrayFileList[]>([]); //รายการเอกสารหลักฐาน
/**
* ฟังก์ชันดึงข้อมูลรายการเอกสารหลักฐาน
*/
async function getData() {
showLoader();
await http
.get(
config.API.file("ระบบทะเบียนประวัติ", "เอกสาร ก.พ.7", profileId.value)
)
.then((res) => {
console.log("ระบบทะเบียนประวัติ", "เอกสาร ก.พ.7", profileId.value)
fileList.value = res.data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* ฟังก์ชั่นสร้าง Path สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
*/
function clickUpload(file: any) {
const fileName = { fileName: file.name };
dialogConfirm(
$q,
async () => {
showLoader();
const selectedFile = file;
const formdata = new FormData();
formdata.append("file", selectedFile);
await http
.post(
config.API.file(
"ระบบทะเบียนประวัติ",
"เอกสาร ก.พ.7",
profileId.value
),
{
replace: false,
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 &&
uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
})
.catch((err) => {
messageError($q, err);
});
},
"ยืนยันการอัปโหลดไฟล์",
"ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
);
}
/**
* ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
*/
async function uploadFileDoc(uploadUrl: string, file: any) {
const Data = new FormData();
Data.append("file", documentFile.value);
showLoader();
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(async () => {
await getData();
success($q, "อัปโหลดไฟล์สำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
documentFile.value = null;
});
}
/**
* ดาวน์โหลดลิงก์ไฟล์
* @param fileName file name
*/
function downloadFile(fileName: string) {
showLoader();
http
.get(
config.API.fileByFile(
"ระบบทะเบียนประวัติ",
"เอกสาร ก.พ.7",
profileId.value,
fileName
)
)
.then((res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
/**
* ลบไฟล์
* @param fileName file name
*/
function deleteFile(fileName: string) {
dialogRemove($q, async () => {
showLoader();
http
.delete(
config.API.fileByFile(
"ระบบทะเบียนประวัติ",
"เอกสาร ก.พ.7",
profileId.value,
fileName
)
)
.then(async () => {
await setTimeout(async () => {
await getData();
await success($q, `ลบไฟล์สำเร็จ`);
}, 1500);
})
.catch((e) => {
messageError($q, e);
hideLoader();
});
});
}
onMounted(() => {
getData();
});
</script>
<template>
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
อัปโหลดไฟล์เอกสาร ก.พ.7
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div class="col-12 row">
<q-file
v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
for="inputFiles"
class="col-12"
outlined
dense
v-model="documentFile"
label="ไฟล์เอกสาร ก.พ.7"
hide-bottom-space
accept=".pdf,.xlsx,.docx,.png,.jpg"
clearable
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
<template v-slot:after>
<q-btn
size="14px"
v-if="documentFile"
flat
round
dense
color="primary"
icon="mdi-upload"
@click="clickUpload(documentFile)"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</template>
</q-file>
<!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
</div>
<div v-if="fileList.length > 0" class="col-xs-12 row">
<q-list class="full-width rounded-borders" bordered separator>
<q-item
clickable
v-ripple
v-for="data in fileList"
:key="data.id"
class="items-center"
>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<div>
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(data.fileName)"
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
>
<q-btn
v-if="isLeave == false"
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.fileName)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</div>
</q-item>
</q-list>
</div>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
</div>
</div>
</q-card>
</template>
<style scoped></style>

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

@ -6,6 +6,7 @@ import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
/** importComponents*/
import OtherInformation from "@/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue";
import Documentipline from "@/modules/04_registryPerson/components/detail/Other/02_Document.vue";
import Document7 from "@/modules/04_registryPerson/components/detail/Other/03_Document7.vue";
const storeRegistry = useRegistryNewDataStore();
@ -32,6 +33,7 @@ const tab = ref<string>("1");
>
<q-tab name="1" label="ข้อมูลอื่นๆ" />
<q-tab name="2" label="เอกสารหลักฐาน" />
<q-tab name="3" label="เอกสาร ก.พ.7" />
</q-tabs>
<q-separator />
@ -42,6 +44,9 @@ const tab = ref<string>("1");
<q-tab-panel name="2">
<Documentipline :is-leave="storeRegistry.isLeave" />
</q-tab-panel>
<q-tab-panel name="3">
<Document7 :is-leave="storeRegistry.isLeave" />
</q-tab-panel>
</q-tab-panels>
</template>

187
src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
@ -30,7 +31,12 @@ const {
} = mixin;
const id = ref<string>(route.params.id.toString()); //id profile
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const fileUpload = ref<File>();
const uploadUrl = ref<string>("");
const mode = ref<string>("table"); //การแสดงของ Table card
/**
@ -221,6 +227,7 @@ function clearForm() {
specialSkill.field = "";
specialSkill.reference = "";
specialSkill.remark = "";
fileUpload.value = undefined;
}
/**
@ -285,7 +292,10 @@ async function addData() {
profileId: empType.value === "" ? id.value : undefined,
profileEmployeeId: empType.value !== "" ? id.value : undefined,
})
.then(async () => {
.then(async (res) => {
if (fileUpload.value && res.data.result) {
await uploadProfile(res.data.result);
}
await fetchData(id.value);
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
@ -311,7 +321,10 @@ async function editData(idData: string) {
dateEnd: null,
profileId: undefined,
})
.then(async () => {
.then(async (res) => {
if (fileUpload.value && res.data.result) {
await uploadProfile(res.data.result);
}
await fetchData(id.value);
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
@ -324,6 +337,85 @@ async function editData(idData: string) {
});
}
/**
* ฟังก์ชันส้ราง Path อัปโหลดไฟล์
* @param id
*/
async function uploadProfile(id: string) {
await http
.post(
config.API.subFile(
"ทะเบียนประวัติ",
"ประกาศเกียรติคุณ",
profileId.value,
id
),
{
replace: true,
fileList: [
{
fileName: "เอกสารหลักฐาน",
},
],
}
)
.then(async (res) => {
uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
await uploadFileURL(uploadUrl.value, fileUpload.value);
})
.catch((err) => {
messageError($q, err);
});
}
/**
* ฟังก์ชันอัปโหลดำไฟล์
* @param uploadUrl Path อัปโหลดไฟล์
* @param file ไฟล์เอกสาร
*/
async function uploadFileURL(uploadUrl: string, file: any) {
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(() => {
fileUpload.value = undefined;
})
.catch((err) => {
messageError($q, err);
});
}
/**
* ฟังก์ชันโหลไฟลเอกสารหลักฐาน
* @param id รายการที่ต้องการโหลด
*/
async function onDownloadFile(id: string) {
showLoader();
await http
.get(
config.API.subFileByFileName(
"ทะเบียนประวัติ",
"ประกาศเกียรติคุณ",
profileId.value,
id,
"เอกสารหลักฐาน"
)
)
.then(async (res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/** function ปิด popup ข้อมูลความสามารถพิเศษ*/
function closeDialog() {
dialog.value = false;
@ -452,6 +544,7 @@ onMounted(() => {
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props" v-if="mode === 'table'">
@ -489,6 +582,19 @@ onMounted(() => {
<q-td v-for="col in props.cols" :key="col.id">
<div>{{ col.value ? col.value : "-" }}</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.isUpload == true"
color="green"
flat
dense
round
icon="mdi-file-document-outline"
@click="onDownloadFile(props.row.id)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:item="props" v-else>
@ -604,6 +710,83 @@ onMounted(() => {
label="เอกสารอ้างอิง"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row">
<q-uploader
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".pdf"
bordered
label="[ไฟล์ pdf ขนาดไม่เกิน 10MB]"
@added="(v:any) => (fileUpload = v[0])"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<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">
{{ "[ไฟล์ .pdf ขนาดไม่เกิน 10MB]" }}
</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>
</div>
</q-card-section>

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

@ -109,7 +109,15 @@ const baseColumns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionType",
align: "left",
@ -166,6 +174,7 @@ const visibleColumns = ref<string[]>([
"positionSalaryAmount",
"mouthSalaryAmount",
"posNo",
"position",
"positionType",
"positionLevel",
"templateDoc",
@ -718,7 +727,9 @@ onMounted(() => {
<q-btn
v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
flat
:disable="props.row.commandId !== null && props.row.commandId !== ''"
:disable="
props.row.commandId !== null && props.row.commandId !== ''
"
:color="props.row.commandId ? 'grey' : 'edit'"
dense
round

1
src/modules/04_registryPerson/interface/index/Main.ts
View file

@ -19,6 +19,7 @@ interface DataOptionSys {
interface DataOptionInsignia {
id: string;
name: string;
typeId: string;
typeName: string;
}

1
src/modules/04_registryPerson/interface/request/DeclarationHonor.ts
View file

@ -6,6 +6,7 @@ interface RequestItemsObject {
issuer: string;
refCommandDate: Date | null;
refCommandNo: string;
type: string;
isDate: boolean | string;
}

1
src/modules/04_registryPerson/interface/response/DeclarationHonor.ts
View file

@ -12,6 +12,7 @@ interface ResponseObject {
lastUpdateUserId: string;
lastUpdatedAt: Date;
profileId: string;
type: string;
refCommandDate: Date;
refCommandNo: string;
}

13
src/modules/04_registryPerson/stores/insignia.ts
View file

@ -1,21 +1,30 @@
import { ref, computed } from "vue";
import { defineStore } from "pinia";
import type { DataOptionInsignia } from "@/modules/04_registryPerson/interface/index/Main";
import type { DataOptionInsignia,DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { ResponseObject as Insignia } from "@/modules/07_insignia/interface/response/Main";
export const useInsigniaDataStore = defineStore("insigniaDataStore", () => {
const insigniaOption = ref<DataOptionInsignia[]>([]);
const insigniaTypeOp = ref<DataOption[]>([]);
const insigniaTypeOpMain = ref<DataOption[]>([]);
function mapInsigniaOption(resData: any) {
insigniaTypeOp.value = Array.from(
new Map(
resData.map((item:any) => [item.insigniaTypeName, { id: item.insigniaTypeId, name: item.insigniaTypeName }])
).values()
) as DataOption[];
insigniaOption.value = [];
resData.map((r: Insignia) => {
insigniaOption.value.push({
id: r.id.toString(),
name: r.name.toString() + ` (${r.shortName})`,
typeId: r.insigniaTypeId.toString(),
typeName: r.insigniaTypeName.toString(),
});
});
}
return { insigniaOption, mapInsigniaOption };
return { insigniaOption, mapInsigniaOption,insigniaTypeOp };
});

1
src/modules/07_insignia/interface/response/Main.ts
View file

@ -8,6 +8,7 @@ interface ResponseObject {
lastUpdateFullName: string;
isActive: boolean;
note: string;
insigniaTypeId: string;
}
interface ResponsePeriod {