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

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-09-26 13:51:30 +07:00
commit cad31ed472
22 changed files with 1513 additions and 437 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
View file

@ -799,7 +799,7 @@ onMounted(() => {
hide-bottom-space
:model-value="trainData.startYear + 543"
:rules="[
(val) =>
(val:string) =>
!!val ||
`${'กรุณาเลือกปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
]"
@ -844,7 +844,7 @@ onMounted(() => {
hide-bottom-space
:model-value="trainData.finishYear + 543"
:rules="[
(val) =>
(val:string) =>
!!val || `${'กรุณาเลือกปีที่จบการฝึกอบรม/ดูงาน'}`,
]"
:label="`${'ปีที่จบการฝึกอบรม/ดูงาน'}`"
@ -889,7 +889,7 @@ onMounted(() => {
class="inputgreen"
:model-value="date2Thai(trainData.startDate)"
:rules="[
(val) =>
(val:string) =>
!!val ||
`${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
]"
@ -934,7 +934,7 @@ onMounted(() => {
class="inputgreen"
:model-value="date2Thai(trainData.endDate)"
:rules="[
(val) =>
(val:string) =>
!!val || `${'กรุณาเลือกวันที่จบการฝึกอบรม/ดูงาน'}`,
]"
hide-bottom-space
@ -1004,7 +1004,7 @@ onMounted(() => {
class="inputgreen"
dense
:rules="[
(val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
(val:string) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
]"
hide-bottom-space
/>

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

@ -920,7 +920,7 @@ onMounted(async () => {
: null
"
:label="`${'วันที่ได้รับ'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
>
<template v-slot:prepend>
<q-icon

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

@ -661,7 +661,7 @@ onMounted(() => {
class="inputgreen"
:model-value="date2Thai(declHonorForm.issueDate)"
:label="`${'วันที่ได้รับ'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
>
<template v-slot:prepend>
<q-icon
@ -694,7 +694,7 @@ onMounted(() => {
class="inputgreen"
v-model="declHonorForm.detail"
:label="`${'รายละเอียด'}`"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">

14
src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
View file

@ -1058,7 +1058,7 @@ onMounted(async () => {
hide-bottom-space
:model-value="date2Thai(resPerformForm.date as Date)"
:label="`${'วันที่ได้รับ'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
>
<template v-slot:prepend>
<q-icon
@ -1081,7 +1081,7 @@ onMounted(async () => {
v-model="resPerformForm.point1Total"
input-class="text-right "
:label="`${'ส่วนที่1 (น้ำหนัก)'}`"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (น้ำหนัก)'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกส่วนที่1 (น้ำหนัก)'}`]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -1095,7 +1095,7 @@ onMounted(async () => {
input-class="text-right"
:label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
(val:string) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
]"
/>
</div>
@ -1109,7 +1109,7 @@ onMounted(async () => {
v-model="resPerformForm.point2Total"
input-class="text-right"
:label="`${'ส่วนที่2 (น้ำหนัก)'}`"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (น้ำหนัก)'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกส่วนที่2 (น้ำหนัก)'}`]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -1123,7 +1123,7 @@ onMounted(async () => {
input-class="text-right"
:label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
(val:string) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
]"
/>
</div>
@ -1137,7 +1137,7 @@ onMounted(async () => {
v-model="resPerformForm.pointSumTotal"
input-class="text-right"
:label="`${'ผลรวม (น้ำหนัก)'}`"
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (น้ำหนัก)'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกผลรวม (น้ำหนัก)'}`]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -1151,7 +1151,7 @@ onMounted(async () => {
input-class="text-right"
:label="`${'ผลประเมินรวม (คะแนน)'}`"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
(val:string) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
]"
/>
</div>

4
src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
View file

@ -382,7 +382,7 @@ onMounted(() => {
"
label="วันที่จ้าง"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
>
<template v-slot:prepend>
<q-icon
@ -405,7 +405,7 @@ onMounted(() => {
v-model="formData.command"
label="คำสั่งจ้าง"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
lazy-rules
/>
</div>

4
src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
View file

@ -420,7 +420,7 @@ onMounted(() => {
outlined
dense
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่'}`]"
hide-bottom-space
:label="`${'วันที่'}`"
>
@ -444,7 +444,7 @@ onMounted(() => {
dense
lazy-rules
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
/>

2
src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
View file

@ -669,7 +669,7 @@ onMounted(() => {
"
:label="dataLabel.birthDate"
:rules="[
(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
]"
>
<template v-slot:prepend>

8
src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
View file

@ -595,7 +595,7 @@ onMounted(async () => {
lazy-rules
emit-value
map-options
:rules="[(val) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
hide-bottom-space
input-debounce="0"
option-label="name"
@ -614,7 +614,7 @@ onMounted(async () => {
bg-color="white"
dense
:class="!selection.includes('firstname') ? '' : 'inputgreen'"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ'}`]"
hide-bottom-space
/>
</div>
@ -627,7 +627,7 @@ onMounted(async () => {
bg-color="white"
dense
:class="!selection.includes('lastname') ? '' : 'inputgreen'"
:rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
hide-bottom-space
/>
</div>
@ -644,7 +644,7 @@ onMounted(async () => {
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
@added="(v) => (fileUpload = v[0])"
@added="(v:any) => (fileUpload = v[0])"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">

2
src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
View file

@ -1220,7 +1220,7 @@ onMounted(async () => {
class="inputgreen"
:model-value="date2Thai(educationData.endDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
(val:string) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
]"
hide-bottom-space
:label="`${'วันที่จบการศึกษา'}`"

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

@ -975,7 +975,7 @@ onMounted(() => {
label="เงินเดือน"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
lazy-rules
hide-bottom-space
/>
@ -988,7 +988,7 @@ onMounted(() => {
dense
outlined
v-model="formDataSalary.salaryPos"
:rules="[(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`]"
label="เงินประจำตำแหน่ง"
mask="###,###,###,###"
reverse-fill-mask

6
src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
View file

@ -456,7 +456,7 @@ onMounted(() => {
borderless
class="inputgreen"
:model-value="date2Thai(formData.date)"
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
hide-bottom-space
:label="`${'วัน/เดือน/ปี'}`"
>
@ -482,7 +482,7 @@ onMounted(() => {
borderless
v-model="formData.reference"
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
/>
@ -497,7 +497,7 @@ onMounted(() => {
borderless
v-model="formData.detail"
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
/>

412
src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue Normal file
View file

@ -0,0 +1,412 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import config from "@/app.config";
import http from "@/plugins/http";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
/**
* importType
*/
import type { QTableProps } from "quasar";
import type {
DataOption,
Pagination,
} from "@/modules/04_registryPerson/interface/index/Main";
import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
/**
* importComponents
*/
import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
/**
* use
*/
const $q = useQuasar();
const router = useRouter();
const store = useRequestEditStore();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
/**
* Table
*/
const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
const page = ref<number>(1); //หน้า
const pageSize = ref<number>(10); //จำนวนต่อหน้า
const rowsTotal = ref<number>(0); //จำนวนรายการ
const maxPage = ref<number>(0); //จำนวนหน้า
const columns = ref<QTableProps["columns"]>([
{
name: "createdAt",
align: "left",
label: "วันที่ยื่นขอ",
sortable: true,
field: "createdAt",
format: (v) => (v ? date2Thai(v, false, true) : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: false,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "topic",
align: "left",
label: "ชื่อเรื่อง",
sortable: true,
field: "topic",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "detail",
align: "left",
label: "รายละเอียด",
sortable: true,
field: "detail",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "document",
align: "left",
label: "หลักฐานอ้างอิง",
sortable: true,
field: "document",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะคำร้อง",
sortable: true,
field: "status",
format: (v) => store.convertStatus(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "remark",
align: "left",
label: "หมายเหตุ",
sortable: true,
field: "remark",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"createdAt",
"fullname",
"topic",
"detail",
"document",
"status",
"remark",
]);
/**
* ตัวแปร
*/
const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
const keyword = ref<string>(""); //คำค้นหา
const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
const requestId = ref<string>(""); //id รายการแก้ไข
/**
* function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
*/
function fetchListRequset() {
showLoader();
http
.get(config.API.requestEdit + `admin`, {
params: {
page: page.value,
pageSize: pageSize.value,
status: status.value,
keyword: keyword.value,
},
})
.then((res) => {
const data = res.data.result;
maxPage.value = Math.ceil(data.total / pageSize.value);
rowsTotal.value = data.total;
rows.value = data.data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function เลือกสถานะคำร้อง
*/
function updateStatusValue() {
page.value = 1;
// fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
fetchListRequset();
}
/**
* function เคลียร์ สถานะคำร้อง
*/
function clearStatus() {
status.value = "";
statusOption.value = store.optionStatus;
}
/**
* function ค้นหาคำใน select สถานะคำร้อง
* @param val คำค้น
* @param update Function
*/
function filterOption(val: string, update: Function) {
update(() => {
status.value = val ? "" : status.value;
statusOption.value = store.optionStatus.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
}
/**
* funciton แก่ไขคำร้อง
* @param id รายการคำร้อง
*/
function onclickEdit(id: string) {
modalStatus.value = true;
requestId.value = id;
}
/**
* function เลือกแถวต่อหน้า
* @param newPagination
*/
function updatePageSizePagination(newPagination: Pagination) {
page.value = 1;
pageSize.value = newPagination.rowsPerPage;
}
/**
* function หาชื่อไฟล์
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
*/
function onDownloadFile(id: string) {
showLoader();
http
.get(
config.API.file(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
id
)
)
.then(async (res) => {
if (res.data.length !== 0) {
await downloadUrl(id, res.data[0].fileName);
} else {
hideLoader();
}
})
.catch((e) => {
messageError($q, e);
hideLoader();
});
}
/**
* function โหลดไฟล์
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
* @param fileName ชื่อไฟล์
*/
async function downloadUrl(id: string, fileName: string) {
await http
.get(
config.API.fileByFile(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
id,
fileName
)
)
.then((res) => {
window.open(res.data.downloadUrl, "_blank");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* ดูการเปลี่ยนแปลงของ pageSize
*
* เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
*/
watch(
() => pageSize.value,
() => {
fetchListRequset();
}
);
onMounted(() => {
fetchListRequset();
});
</script>
<template>
<q-card class="q-pa-md">
<div class="row q-mb-sm q-col-gutter-sm">
<div class="col-xs-10 col-md-3">
<q-select
style="max-width: 250px"
v-model="status"
label="สถานะคำร้อง"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="statusOption"
@update:model-value="updateStatusValue"
:clearable="status !== ''"
@clear="clearStatus"
use-input
@filter="(inputValue:string,
doneFn:Function) => filterOption(inputValue, doneFn
) "
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
</q-select>
</div>
<q-space />
<q-input
v-model="keyword"
outlined
clearable
dense
label="ค้นหา"
style="width: 250px"
@keydown.enter="updateStatusValue()"
>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
:columns="columns"
:rows="rows"
row-key="id"
:rows-per-page-options="[10, 25, 50, 100]"
:paging="true"
:visible-columns="visibleColumns"
@update:pagination="updatePageSizePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<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
icon="edit"
round
dense
flat
color="edit"
@click.pervent="onclickEdit(props.row.id)"
>
<q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name === 'document'">
<q-btn
icon="mdi-download"
round
dense
flat
color="primary"
@click.pervent="onDownloadFile(props.row.id)"
>
<q-tooltip>หลักฐานอ้างอิง</q-tooltip>
</q-btn>
</div>
<div v-else class="table_ellipsis2">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ rowsTotal }} รายการ
<q-pagination
v-model="page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="fetchListRequset()"
></q-pagination>
</template>
</d-table>
</div>
</q-card>
<DialogStatus
v-model:modal="modalStatus"
:fetch-data="fetchListRequset"
:request-id="requestId"
/>
</template>
<style scoped></style>

326
src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue Normal file
View file

@ -0,0 +1,326 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import type { QTableProps } from "quasar";
import type {
DataOption,
Pagination,
} from "@/modules/04_registryPerson/interface/index/Main";
import DialogEditIDP from "@/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue";
const store = useRequestEditStore();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
/**
* ตัวแปร
*/
const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
const keyword = ref<string>(""); //คำค้นหา
const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
const modalEdit = ref<boolean>(false); //แก้ไขสถานะคำร้อง
const requestId = ref<string>(""); //id รายการแก้ไข
/**
* Table
*/
const rows = ref<any[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
const page = ref<number>(1); //หน้า
const pageSize = ref<number>(10); //จำนวนต่อหน้า
const rowsTotal = ref<number>(0); //จำนวนรายการ
const maxPage = ref<number>(0); //จำนวนหน้า
const columns = ref<QTableProps["columns"]>([
{
name: "createdAt",
align: "left",
label: "วันที่ยื่นขอ",
sortable: true,
field: "createdAt",
format: (v) => (v ? date2Thai(v, false, true) : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "knowledgeSkills",
align: "left",
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
sortable: true,
field: "knowledgeSkills",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "developmentProjects",
align: "left",
label: "วิธีการพัฒนา",
sortable: true,
field: "developmentProjects",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "developmentTarget",
align: "left",
label: "เป้าหมายการพัฒนา",
sortable: true,
field: "developmentTarget",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "developmentResults",
align: "left",
label: "วิธีการวัดผลการพัฒนา",
sortable: true,
field: "developmentResults",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "developmentReport",
align: "left",
label: "รายงานผลการพัฒนา",
sortable: true,
field: "developmentReport",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "document",
align: "left",
label: "หลักฐานอ้างอิง",
sortable: true,
field: "document",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะคำร้อง",
sortable: true,
field: "status",
format: (v) => store.convertStatus(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "remark",
align: "left",
label: "หมายเหตุ",
sortable: true,
field: "remark",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"createdAt",
"knowledgeSkills",
"developmentProjects",
"developmentTarget",
"developmentResults",
"developmentReport",
"document",
"status",
"remark",
]);
function fetchData() {
const data = [
{
id: "1",
createdAt: "2024-09-17T08:21:21.600Z",
status: "PENDING",
knowledgeSkills: "ความรู้",
developmentProjects: "การพัฒนา",
developmentTarget: "เป้าหมาย",
developmentResults: "ผล",
developmentReport: "รายงาน",
},
];
rows.value = data;
}
/**
* function เลือกสถานะคำร้อง
*/
function updateStatusValue() {
page.value = 1;
// fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
// function fetchData() {
}
/**
* function เคลียร์ สถานะคำร้อง
*/
function clearStatus() {
status.value = "";
statusOption.value = store.optionStatus;
}
/**
* function ค้นหาคำใน select สถานะคำร้อง
* @param val คำค้น
* @param update Function
*/
function filterOption(val: string, update: Function) {
update(() => {
status.value = val ? "" : status.value;
statusOption.value = store.optionStatus.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
}
/**
* function เลือกแถวต่อหน้า
* @param newPagination
*/
function updatePageSizePagination(newPagination: Pagination) {
page.value = 1;
pageSize.value = newPagination.rowsPerPage;
}
/**
* funciton แก่ไขคำร้อง
* @param id รายการคำร้อง
*/
function onclickEdit(id: string) {
modalEdit.value = true;
requestId.value = id;
}
onMounted(() => {
fetchData();
});
</script>
<template>
<q-card class="q-pa-md">
<div class="row q-mb-sm q-col-gutter-sm">
<div class="col-xs-10 col-md-3">
<q-select
style="max-width: 250px"
v-model="status"
label="สถานะคำร้อง"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="statusOption"
@update:model-value="updateStatusValue"
:clearable="status !== ''"
@clear="clearStatus"
use-input
@filter="(inputValue:string,
doneFn:Function) => filterOption(inputValue, doneFn
) "
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
</q-select>
</div>
<q-space />
<q-input
v-model="keyword"
outlined
clearable
dense
label="ค้นหา"
style="width: 250px"
@keydown.enter="updateStatusValue()"
>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
:columns="columns"
:rows="rows"
row-key="id"
:rows-per-page-options="[10, 25, 50, 100]"
:paging="true"
:visible-columns="visibleColumns"
@update:pagination="updatePageSizePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<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
icon="edit"
round
dense
flat
color="edit"
@click.pervent="onclickEdit(props.row.id)"
>
<q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name === 'document'">
<q-btn icon="mdi-download" round dense flat color="primary">
<q-tooltip>หลักฐานอ้างอิง</q-tooltip>
</q-btn>
</div>
<div v-else class="table_ellipsis2">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ rowsTotal }} รายการ
<q-pagination
v-model="page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="fetchData"
></q-pagination>
</template>
</d-table>
</div>
</q-card>
<DialogEditIDP v-model:modal="modalEdit" v-model:request-id="requestId" />
</template>
<style scoped></style>

0
src/modules/04_registryPerson/components/requestEdit/DialogStatus.vue → src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
View file

406
src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue Normal file
View file

@ -0,0 +1,406 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import type {
DataOption,
DataItemsDevelopment,
} from "@/modules/04_registryPerson/interface/index/Main";
import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/Main";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const store = useRequestEditStore();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
const isReadOnly = ref<boolean>(false);
const formData = reactive<FormDataIDP>({
topic: "",
development: [],
otherAction: "",
otherPerson: "",
otherTraining: "",
developmentTarget: "",
developmentResults: "",
developmentReport: "",
status: "",
remark: "",
});
//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
{
value: "on_the_job_training",
label: "การฝึกปฏิบัติในงาน (On the job training)",
},
{
value: "job_project_assignment",
label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
},
{
value: "job_shadowing",
label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
},
{
value: "job_enlargement",
label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
},
{
value: "internal_trainer",
label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
},
{
value: "rotation",
label: "การหมุนเวียนงาน (Rotation)",
},
{
value: "activity",
label: "การทำกิจกรรม (Activity)",
},
{
value: "site_visit",
label: "การศึกษาดูงานนอกสถานที่ (Site visit)",
},
{
value: "benchmarking",
label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
},
{
value: "problem_solving",
label: "การแก้ปัญหา (Problem-solving)",
},
{
value: "team_working",
label: "การทำงานเป็นทีม (Team working)",
},
{
value: "other1",
label: "อื่น ๆ (ระบุ)",
},
]);
//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
{ value: "coaching", label: "การสอนงาน (Coaching)" },
{ value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
{ value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
{ value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
{ value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
{ value: "other2", label: "อื่น ๆ (ระบุ)" },
]);
//10 การฝึกอบรมอื่นๆ
const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
{
value: "self_learning",
label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
},
{ value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
{
value: "in_house_training",
label: "การฝึกอบรมภายในองค์กร (In – house training)",
},
{
value: "public_training",
label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
},
{
value: "e_training",
label: "การฝึกอบรมผ่าน online (e – training / e – learning)",
},
{ value: "meeting", label: "การประชุม (Meeting)" },
{ value: "seminar", label: "การสัมมนา (Seminar)" },
{ value: "other3", label: "อื่น ๆ (ระบุ)" },
]);
//ข้อมูลรายการสถานะ
const statusOptionMain = ref<DataOption[]>(
store.optionStatus.filter((e: DataOption) => e.id !== "")
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
/**
* function ค้นหาคำใน select สถานะคำร้อง
* @param val คำค้น
* @param update Function
*/
function filterOption(val: string, update: Function) {
update(() => {
formData.status = val ? "" : formData.status;
statusOption.value = statusOptionMain.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
}
function onSubmit() {
dialogConfirm($q, () => {});
}
/**
* function ปิด popup
*/
function closeDialog() {
modal.value = false;
formData.topic = "";
formData.development = [];
formData.otherAction = "";
formData.otherPerson = "";
formData.otherTraining = "";
formData.developmentTarget = "";
formData.developmentResults = "";
formData.developmentReport = "";
formData.status = "";
formData.remark = "";
}
/**
* class inpui
* @param val ค่าสถานะ
*/
function classInput(val: boolean) {
return {
"full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val,
};
}
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card style="min-width: 90%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
<q-separator />
<q-card-section style="max-height: 84vh" class="scroll">
<div class="row q-col-gutter-sm">
<div class="col-md-3 col-xs-12">
<div class="row q-col-gutter-sm">
<!-- สถานะ -->
<div class="col-12">
<q-select
:class="classInput(isReadOnly)"
v-model="formData.status"
label="สถานะ"
dense
outlined
emit-value
map-options
:options="statusOption"
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
lazy-rules
hide-bottom-space
use-input
option-label="name"
option-value="id"
@filter="(inputValue:string,
doneFn:Function) => filterOption(inputValue, doneFn
) "
>
<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
:class="classInput(isReadOnly)"
v-model="formData.remark"
label="หมายเหตุ"
dense
outlined
type="textarea"
hide-bottom-space
/>
</div>
</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-input
:class="classInput(isReadOnly)"
readonly
outlined
v-model="formData.topic"
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
dense
/>
</div>
<div class="col-12">
<q-label class="q-mb-sm text-weight-medium text-body2"
>วิธีการพัฒนา
</q-label>
<div class="row col-12 q-ml-md q-col-gutter-sm">
<!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
<div class="col-4">
<q-label class="q-mb-sm text-weight-medium text-body2"
>70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</q-label
>
<q-option-group
disable
class="check_box q-mt-sm"
keep-color
color="primary"
dense
v-model="formData.development"
:options="itemsDevelopmentAction"
type="checkbox"
/>
<div
class="row"
v-if="formData.development.includes('other1')"
>
<div class="col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
readonly
v-model="formData.otherAction"
dense
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
</div>
</div>
</div>
</div>
<!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
<div class="col-4">
<q-label class="q-mb-sm text-weight-medium text-body2"
>20 การเรียนรู้จากผู้อื่น
(Coach/Mentor/Consulting)</q-label
>
<q-option-group
disable
class="check_box q-mt-sm"
keep-color
color="primary"
dense
v-model="formData.development"
:options="itemsDevelopmentPerson"
type="checkbox"
/>
<div
class="row"
v-if="formData.development.includes('other2')"
>
<div class="col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
readonly
v-model="formData.otherPerson"
dense
outlined
label="กรุณาระบุ"
></q-input>
</div>
</div>
</div>
</div>
<!-- 10 การฝึกอบรมอื่นๆ -->
<div class="col-4">
<q-label class="q-mb-sm text-weight-medium text-body2"
>10 การฝึกอบรมอื่นๆ</q-label
>
<q-option-group
disable
class="check_box q-mt-sm"
keep-color
color="primary"
dense
v-model="formData.development"
:options="itemsDevelopmentTraining"
type="checkbox"
/>
<div
class="row"
v-if="formData.development.includes('other3')"
>
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
readonly
v-model="formData.otherTraining"
dense
outlined
label="กรุณาระบุ"
></q-input>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- เป้าหมายการนำไปพัฒนางาน -->
<div class="col-12">
<q-input
readonly
outlined
v-model="formData.developmentTarget"
label="เป้าหมายการนำไปพัฒนางาน"
dense
type="textarea"
/>
</div>
<!-- วิธีการวัดผลการพัฒนา -->
<div class="col-12">
<q-input
readonly
outlined
v-model="formData.developmentResults"
label="วิธีการวัดผลการพัฒนา"
dense
type="textarea"
/>
</div>
<!-- รายงานผลการพัฒนา -->
<div class="col-12">
<q-input
readonly
outlined
v-model="formData.developmentReport"
label="รายงานผลการพัฒนา"
dense
type="textarea"
/>
</div>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>บันทึก</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped></style>

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

@ -67,6 +67,11 @@ interface ItemTab {
label: string;
}
interface DataItemsDevelopment {
value: string;
label: string;
}
export type {
Pagination,
DataOption,
@ -80,4 +85,5 @@ export type {
ItemTab,
DataOptionEducation,
DataOptionEducationLevel,
DataItemsDevelopment,
};

14
src/modules/04_registryPerson/interface/request/Main.ts
View file

@ -66,6 +66,19 @@ interface FormChangeName {
documentId: string | null | undefined;
}
interface FormDataIDP {
topic: string;
development: string[];
otherAction: string;
otherPerson: string;
otherTraining: string;
developmentTarget: string;
developmentResults: string;
developmentReport: string;
status: string;
remark: string;
}
export type {
FormFilter,
FormAddPerson,
@ -73,4 +86,5 @@ export type {
DataNodeData,
QueryParams,
FormChangeName,
FormDataIDP,
};

430
src/modules/04_registryPerson/views/requestEditView.vue
View file

@ -1,278 +1,20 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { ref } from "vue";
import { useRouter } from "vue-router";
import config from "@/app.config";
import http from "@/plugins/http";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
/**
* importType
*/
import type { QTableProps } from "quasar";
import type {
DataOption,
Pagination,
} from "@/modules/04_registryPerson/interface/index/Main";
import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
/**
* importComponents
*/
import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/DialogStatus.vue";
import TabInformation from "@/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue";
import TabIDP from "@/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue";
/**
* use
*/
const $q = useQuasar();
const router = useRouter();
const store = useRequestEditStore();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
/**
* Table
*/
const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
const page = ref<number>(1); //หน้า
const pageSize = ref<number>(10); //จำนวนต่อหน้า
const rowsTotal = ref<number>(0); //จำนวนรายการ
const maxPage = ref<number>(0); //จำนวนหน้า
const columns = ref<QTableProps["columns"]>([
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่ยื่นขอ",
sortable: true,
field: "lastUpdatedAt",
format: (v) => (v ? date2Thai(v, false, true) : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: false,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "topic",
align: "left",
label: "ชื่อเรื่อง",
sortable: true,
field: "topic",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "detail",
align: "left",
label: "รายละเอียด",
sortable: true,
field: "detail",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "document",
align: "left",
label: "หลักฐานอ้างอิง",
sortable: true,
field: "document",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะคำร้อง",
sortable: true,
field: "status",
format: (v) => store.convertStatus(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "remark",
align: "left",
label: "หมายเหตุ",
sortable: true,
field: "remark",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
const tabs = ref<string>("Main");
const tabsManu = ref<DataOption[]>([
{ name: "ข้อมูลส่วนตัว", id: "Main" },
{ name: "ข้อมูลการพัฒนารายบุคคล (IDP)", id: "IDP" },
]);
const visibleColumns = ref<string[]>([
"lastUpdatedAt",
"fullname",
"topic",
"detail",
"document",
"status",
"remark",
]);
/**
* ตัวแปร
*/
const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
const keyword = ref<string>(""); //คำค้นหา
const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
const requestId = ref<string>(""); //id รายการแก้ไข
/**
* function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
*/
function fetchListRequset() {
showLoader();
http
.get(config.API.requestEdit + `admin`, {
params: {
page: page.value,
pageSize: pageSize.value,
status: status.value,
keyword: keyword.value,
},
})
.then((res) => {
const data = res.data.result;
maxPage.value = Math.ceil(data.total / pageSize.value);
rowsTotal.value = data.total;
rows.value = data.data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function เลือกสถานะคำร้อง
*/
function updateStatusValue() {
page.value = 1;
// fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
fetchListRequset();
}
/**
* function เคลียร์ สถานะคำร้อง
*/
function clearStatus() {
status.value = "";
statusOption.value = store.optionStatus;
}
/**
* function ค้นหาคำใน select สถานะคำร้อง
* @param val คำค้น
* @param update Function
*/
function filterOption(val: string, update: Function) {
update(() => {
status.value = val ? "" : status.value;
statusOption.value = store.optionStatus.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
}
/**
* funciton แก่ไขคำร้อง
* @param id รายการคำร้อง
*/
function onclickEdit(id: string) {
modalStatus.value = true;
requestId.value = id;
}
/**
* function เลือกแถวต่อหน้า
* @param newPagination
*/
function updatePageSizePagination(newPagination: Pagination) {
page.value = 1;
pageSize.value = newPagination.rowsPerPage;
}
/**
* function หาชื่อไฟล์
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
*/
function onDownloadFile(id: string) {
showLoader();
http
.get(
config.API.file(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
id
)
)
.then(async (res) => {
if (res.data.length !== 0) {
await downloadUrl(id, res.data[0].fileName);
} else {
hideLoader();
}
})
.catch((e) => {
messageError($q, e);
hideLoader();
});
}
/**
* function โหลดไฟล์
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
* @param fileName ชื่อไฟล์
*/
function downloadUrl(id: string, fileName: string) {
http
.get(
config.API.fileByFile(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
id,
fileName
)
)
.then((res) => {
window.open(res.data.downloadUrl, "_blank");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* ดูการเปลี่ยนแปลงของ pageSize
*
* เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
*/
watch(
() => pageSize.value,
() => {
fetchListRequset();
}
);
onMounted(() => {
fetchListRequset();
});
</script>
<template>
@ -291,139 +33,35 @@ onMounted(() => {
รายการคำร้องขอแก้ไขทะเบียนประวัติ
</div>
</div>
<q-card flat bordered class="q-pa-md">
<div class="row q-mb-sm q-col-gutter-sm">
<div class="col-xs-10 col-md-3">
<q-select
style="max-width: 250px"
v-model="status"
label="สถานะคำร้อง"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="statusOption"
@update:model-value="updateStatusValue"
:clearable="status !== ''"
@clear="clearStatus"
use-input
@filter="(inputValue:string,
doneFn:Function) => filterOption(inputValue, doneFn
) "
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
</q-select>
</div>
<q-space />
<q-input
v-model="keyword"
outlined
clearable
dense
label="ค้นหา"
style="width: 250px"
@keydown.enter="updateStatusValue()"
>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
:columns="columns"
:rows="rows"
row-key="id"
:rows-per-page-options="[10, 25, 50, 100]"
:paging="true"
:visible-columns="visibleColumns"
@update:pagination="updatePageSizePagination"
<q-card class="q-mt-sm">
<q-card-section style="padding: 0px">
<q-separator />
<q-tabs
v-model="tabs"
inline-label
align="left"
indicator-color="primary"
active-color="primary bg-teal-1"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<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
icon="edit"
round
dense
flat
color="edit"
@click.pervent="onclickEdit(props.row.id)"
>
<q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name === 'document'">
<q-btn
icon="mdi-download"
round
dense
flat
color="primary"
@click.pervent="onDownloadFile(props.row.id)"
>
<q-tooltip>หลักฐานอ้างอิง</q-tooltip>
</q-btn>
</div>
<div v-else class="table_ellipsis2">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ rowsTotal }} รายการ
<q-pagination
v-model="page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="fetchListRequset()"
></q-pagination>
</template>
</d-table>
</div>
<q-tab
v-for="(tab, index) in tabsManu"
:key="index"
:name="tab.id"
:label="tab.name"
/>
</q-tabs>
<q-separator />
<q-tab-panels v-model="tabs" animated>
<q-tab-panel style="padding: 0px" name="Main">
<TabInformation />
</q-tab-panel>
<q-tab-panel style="padding: 0px" name="IDP"> <TabIDP /> </q-tab-panel>
</q-tab-panels>
</q-card-section>
</q-card>
<DialogStatus
v-model:modal="modalStatus"
:fetch-data="fetchListRequset"
:request-id="requestId"
/>
</template>
<style scoped></style>

166
src/modules/18_command/components/Step/PerviewPDF.vue Normal file
View file

@ -0,0 +1,166 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import axios from "axios";
import { useCounterMixin } from "@/stores/mixin";
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const { messageError } = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const dataFile = defineModel<DataFileDownload>("dataFile", { required: true });
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const vuePDFRef = ref<any>(null);
const isLoadPDF = ref<boolean>(false);
/**
* function loafFile PDF
* @param url linkLoadFile
* @param type ประเภทไฟล์
*/
async function fetchPDF(url: string, type: string) {
isLoadPDF.value = false;
axios
.get(url, {
method: "GET",
responseType: "blob",
headers: {
"Content-Type": "application/json",
Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
},
})
.then(async (res) => {
const blob = new Blob([res.data]);
const objectUrl = URL.createObjectURL(blob);
const pdfData = usePDF(`${objectUrl}`);
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
isLoadPDF.value = true;
}, 1500);
})
.catch((err) => {
messageError($q, err);
});
}
function onClose() {
modal.value = false;
}
watch(modal, (val) => {
if (val) {
fetchPDF(dataFile.value.downloadUrl, dataFile.value.fileType);
} else {
pdfSrc.value = undefined;
numOfPages.value = 0;
}
});
</script>
<template>
<q-dialog
v-model="modal"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card>
<DialogHeader :close="onClose" />
<q-card-section
v-if="isLoadPDF"
bordered
class="card-pdf q-ma-md q-pa-md scroll"
style="max-height: 90vh"
>
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF
ref="vuePDFRef"
:pdf="pdfSrc"
:page="page"
fit-parent
:scale="0.1"
/>
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
</q-card-section>
<q-card-section v-else>
<div class="full-width row flex-center text-accent q-gutter-sm">
<span
><div
style="
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
"
class="text-grey-5"
>
<q-spinner color="primary" size="3em" :thickness="10" />
</div>
</span>
</div>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style scoped></style>

56
src/modules/18_command/components/Step/View0_Digital.vue
View file

@ -11,8 +11,10 @@ import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { DataOption } from "@/modules/18_command/interface/index/Main";
import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";
import DialogHeader from "@/components/DialogHeader.vue";
import PerviewPDF from "@/modules/18_command/components/Step/PerviewPDF.vue";
const $q = useQuasar();
const route = useRoute();
@ -110,20 +112,23 @@ const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำส
const isLoad = ref<boolean>(false); //แสดงโหลด
const isPersonSign = ref<boolean>(false); //ผู้มีอำนาจลงนาม
const modalPerView = ref<boolean>(false);
/**
* ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
*/
function onConfirmDraft() {
if (
store?.dataCommand?.commandNo !== "" &&
store?.dataCommand?.commandAffectDate !== null &&
store?.dataCommand?.commandExcecuteDate !== null
) {
modalSelect.value = true;
} else {
dialogMessageNotify(
$q,
"ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง วันที่ลงนาม และวันที่คำสั่งมีผลให้ครบ"
"ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง และวันที่คำสั่งมีผลให้ครบ"
);
}
}
@ -174,6 +179,7 @@ function onSubmitComment() {
function onCloseDialog() {
modalSelect.value = false;
modalComment.value = false;
isPersonSign.value = false;
}
async function fetchDoc(group: string) {
@ -253,11 +259,13 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
});
}
const dataFile = ref<DataFileDownload>();
/**
* ดาวน์โหลดลิงก์ไฟล์
* @param fileName file name
*/
function downloadFile(file: any, group: string) {
function downloadFile(file: any, group: string, isView: boolean = false) {
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
showLoader();
http
@ -270,8 +278,13 @@ function downloadFile(file: any, group: string) {
)
)
.then((res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
const data = res.data;
dataFile.value = data;
if (isView) {
modalPerView.value = true;
} else {
window.open(data.downloadUrl, "_blank");
}
})
.catch((e) => {
messageError($q, e);
@ -317,6 +330,17 @@ onMounted(async () => {
>
คำสั่ง
<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
@ -370,6 +394,17 @@ onMounted(async () => {
>
เอกสารแนบท้าย
<q-space />
<q-btn
v-if="fileTailer"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileTailer, 'tailer', true)"
>
<q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn
v-if="fileTailer"
rounded
@ -379,7 +414,7 @@ onMounted(async () => {
icon="mdi-download"
@click.prevent="downloadFile(fileTailer, 'tailer')"
>
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
<q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
@ -650,6 +685,10 @@ onMounted(async () => {
</template>
</d-table>
</div>
<div class="col-12">
<q-checkbox v-model="isPersonSign" label="ผู้มีอำนาจลงนาม" />
</div>
</div>
</q-card-section>
<q-separator />
@ -694,6 +733,11 @@ onMounted(async () => {
</q-form>
</q-card>
</q-dialog>
<PerviewPDF
v-model:modal="modalPerView"
v-model:data-file="dataFile as DataFileDownload"
/>
</template>
<style lang="scss" scoped>

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

@ -9,6 +9,10 @@ import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import http from "@/plugins/http";
import config from "@/app.config";
import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";
import PerviewPDF from "@/modules/18_command/components/Step/PerviewPDF.vue";
const $q = useQuasar();
const route = useRoute();
const store = useCommandDetail();
@ -42,6 +46,7 @@ const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const isLoad = ref<boolean>(false); //แสดงโหลด
const modalPerView = ref<boolean>(false);
/**
* ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
@ -178,11 +183,12 @@ async function fetchDoc(group: string) {
});
}
const dataFile = ref<DataFileDownload>();
/**
* ดาวน์โหลดลิงก์ไฟล์
* @param fileName file name
*/
function downloadFile(file: any, group: string) {
function downloadFile(file: any, group: string, isView: boolean = false) {
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
showLoader();
http
@ -195,8 +201,13 @@ function downloadFile(file: any, group: string) {
)
)
.then((res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
const data = res.data;
dataFile.value = data;
if (isView) {
modalPerView.value = true;
} else {
window.open(data.downloadUrl, "_blank");
}
})
.catch((e) => {
messageError($q, e);
@ -326,6 +337,17 @@ onMounted(async () => {
>
คำสั่ง
<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
@ -379,6 +401,17 @@ onMounted(async () => {
>
เอกสารแนบท้าย
<q-space />
<q-btn
v-if="fileTailer"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileTailer, 'tailer', true)"
>
<q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn
v-if="fileTailer"
rounded
@ -388,7 +421,7 @@ onMounted(async () => {
icon="mdi-download"
@click.prevent="downloadFile(fileTailer, 'tailer')"
>
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
<q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
@ -493,6 +526,11 @@ onMounted(async () => {
</div>
</span>
</div>
<PerviewPDF
v-model:modal="modalPerView"
v-model:data-file="dataFile as DataFileDownload"
/>
</template>
<style lang="scss" scoped>

28
src/modules/18_command/interface/response/Main.ts
View file

@ -32,4 +32,30 @@ interface DataCommandType {
name: string;
}
export type { ResListCommand, DataListCommand, DataCommandType };
interface DataFileDownload {
author: string;
category: [];
createdAt: string;
createdBy: string;
description: string;
downloadUrl: string;
fileName: string;
fileSize: number;
fileType: string;
hidden: boolean;
keyword: [];
metadata: {};
path: string;
pathname: string;
title: string;
updatedAt: string;
updatedBy: string;
upload: boolean;
}
export type {
ResListCommand,
DataListCommand,
DataCommandType,
DataFileDownload,
};