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

แก้รายการเกษียณ

Browse source
This commit is contained in:
Warunee Tamkoo 2023-09-25 16:28:35 +07:00
parent dc20b0c6a8
commit 5a550e5265
1 changed files with 183 additions and 328 deletions
Download patch file Download diff file Expand all files Collapse all files

511
src/modules/06_retirement/components/ListRetirement/TableList.vue
View file

@ -33,105 +33,9 @@ const filter = ref<string>("");
const statusUpload = ref<boolean>();
const modalEdit = ref<boolean>(false);
const textReport = ref<string>("");
const columns = ref<any["columns"]>([
{
name: "order",
label: "ลำดับ",
title: "ลำดับ",
field: "order",
align: "left",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
title: "ชื่อ - นามสกุล",
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationOrganization",
align: "left",
label: "สังกัด",
title: "สังกัด",
field: "organizationOrganization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionEmployeeGroup",
align: "left",
label: "กลุ่มงาน",
title: "กลุ่มงาน",
// subtitle: "ในสายงาน/ระดับ",
field: "positionEmployeeGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionEmployeePosition",
align: "left",
label: "ตำแหน่ง",
title: "ตำแหน่ง",
// subtitle: "ประเภท",
field: "positionEmployeePosition",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionEmployeeLevel",
align: "left",
label: "ระดับชั้น",
title: "ระดับชั้น",
// subtitle: "ทางการบริหาร",
field: "positionEmployeeLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
const employeeType = ref<string>("OFFICER")
{
name: "positionNumber",
align: "left",
label: "ตำแหน่ง (เลขที่) ",
title: "ตำแหน่ง",
subtitle: "เลขที่",
field: "positionNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "govGroup",
align: "left",
label: "ส่วนราชการ (ระดับฝ่าย/กลุ่มงาน/ส่วน)",
title: "ส่วนราชการ",
subtitle: "ระดับฝ่าย/กลุ่มงาน/ส่วน",
field: "govGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "govOffice",
align: "left",
label: "ส่วนราชการ (ระดับสถาบัน/สำนักงาน/กอง)",
title: "ส่วนราชการ",
subtitle: "ระดับสถาบัน/สำนักงาน/กอง",
field: "govOffice",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "bureau",
align: "left",
label: "หน่วยงาน",
title: "หน่วยงาน",
field: "bureau",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columns = ref<any["columns"]>([])
const rows = ref<any>([]);
const visibleColumns = ref<string[]>([
"order",
@ -140,6 +44,8 @@ const visibleColumns = ref<string[]>([
"positionEmployeePosition",
"positionEmployeeLevel",
"positionEmployeeGroup",
"organizationAgency",
"organizationGovernmentAgency",
"positionNumber",
"govGroup",
"govOffice",
@ -172,6 +78,8 @@ const fecthlistprofile = async (id: string) => {
statusReport.value = res.data.result.json;
typeReport.value = res.data.result.typeReport;
textReport.value = res.data.result.detail;
employeeType.value = res.data.result.type;
// รายชื่อผู้เกษียณอายุราชการ
rows.value = res.data.result.profile.map((e: any) => ({
id: e.id,
@ -179,10 +87,12 @@ const fecthlistprofile = async (id: string) => {
order: e.order,
name: e.fullName,
organizationOrganization: e.organizationOrganization,
positionEmployeePosition: e.positionEmployeePosition,
positionEmployeeLevel: e.positionEmployeeLevel,
positionNumber: e.posNoEmployee,
positionEmployeeGroup: e.positionEmployeeGroup,
positionEmployeePosition: res.data.result.type == 'OFFICER' ? e.positionType : e.positionEmployeePosition,
positionEmployeeLevel: res.data.result.type == 'OFFICER' ? (e.positionExecutive != null ? e.positionExecutive : "-") : e.positionEmployeeLevel,
positionNumber: res.data.result.type == 'OFFICER' ? e.posNo : e.posNoEmployee,
positionEmployeeGroup: res.data.result.type == 'OFFICER' ? e.position : e.positionEmployeeGroup,
organizationAgency: e.organizationAgency,
organizationGovernmentAgency: e.organizationGovernmentAgency,
bureau: e.oc,
reason: e.reason,
remove: e.remove,
@ -195,9 +105,110 @@ const fecthlistprofile = async (id: string) => {
messageError($q, e);
})
.finally(() => {
columns.value = [
{
name: "order",
label: "ลำดับ",
title: "ลำดับ",
field: "order",
align: "left",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
title: "ชื่อ - นามสกุล",
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationOrganization",
align: "left",
label: "สังกัด",
title: "สังกัด",
field: "organizationOrganization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionEmployeeGroup",
align: "left",
label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ในสายงาน/ระดับ)" : "กลุ่มงาน",
title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "กลุ่มงาน",
subtitle: employeeType.value == "OFFICER" ? "ในสายงาน/ระดับ" : "",
field: "positionEmployeeGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionEmployeePosition",
align: "left",
label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ประเภท)" : "ตำแหน่ง",
title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ตำแหน่ง",
subtitle: employeeType.value == "OFFICER" ? "ประเภท" : "",
field: "positionEmployeePosition",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionEmployeeLevel",
align: "left",
label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ทางการบริหาร)" : "ระดับชั้น",
title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ระดับชั้น",
subtitle: employeeType.value == "OFFICER" ? "ทางการบริหาร" : "",
field: "positionEmployeeLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionNumber",
align: "left",
label: "ตำแหน่ง (เลขที่) ",
title: "ตำแหน่ง",
subtitle: "เลขที่",
field: "positionNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationAgency",
align: "left",
label: "ส่วนราชการ (ระดับฝ่าย/กลุ่มงาน/ส่วน)",
title: "ส่วนราชการ",
subtitle: "ระดับฝ่าย/กลุ่มงาน/ส่วน",
field: "organizationAgency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationGovernmentAgency",
align: "left",
label: "ส่วนราชการ (ระดับสถาบัน/สำนักงาน/กอง)",
title: "ส่วนราชการ",
subtitle: "ระดับสถาบัน/สำนักงาน/กอง",
field: "organizationGovernmentAgency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "bureau",
align: "left",
label: "หน่วยงาน",
title: "หน่วยงาน",
field: "bureau",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
];
hideLoader();
});
};
// เช็คสถานะการอัพโหลด
const fecthCheck = async (id: string) => {
await http
@ -371,154 +382,69 @@ const paginationLabel = (start: number, end: number, total: number) => {
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="backHistory"
/>
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
รายชื่อผู้เกษียณอายุราชการ
</div>
<div>
<q-card class="col-12 q-pa-md">
<div class="row col-12 q-pb-sm">
<div class="row">
<AddList
:dataProfile="dataProfile"
:retireld="retireld"
:profile-id="profileId"
:UpdateListId="UpdateListId"
v-if="
statusReport === false &&
<AddList :dataProfile="dataProfile" :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId"
v-if="statusReport === false &&
(typeReport == 'ADD' || typeReport == '' || typeReport == null) &&
statusUpload !== true
"
/>
" />
<q-btn color="primary" flat round icon="mdi-dots-vertical">
<q-menu>
<q-list style="min-width: 100px">
<q-item
clickable
v-close-popup
type="a"
@click="openmodalEditReport()"
target="_blank"
>
<q-item-section avatar
><q-icon color="primary" name="mdi-pencil"
/></q-item-section>
<q-item clickable v-close-popup type="a" @click="openmodalEditReport()" target="_blank">
<q-item-section avatar><q-icon color="primary" name="mdi-pencil" /></q-item-section>
<q-item-section>แก้ไข มติ อ.ก.ก. </q-item-section>
</q-item>
<q-separator />
<q-item
clickable
v-close-popup
type="a"
@click="downloadAttachment('pdf', retireld)"
target="_blank"
>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item clickable v-close-popup type="a" @click="downloadAttachment('pdf', retireld)" target="_blank">
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
type="a"
@click="downloadAttachment('docx', retireld)"
target="_blank"
>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item clickable v-close-popup type="a" @click="downloadAttachment('docx', retireld)" target="_blank">
<q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
</q-btn>
<q-file
bg-color="white"
clearable
outlined
dense
v-model="fileUpload"
accept=".pdf"
:style="fileUpload === null ? 'width: 150px' : 'width: auto'"
label="อัปโหลดไฟล์"
v-if="statusUpload !== true"
>
<q-file bg-color="white" clearable outlined dense v-model="fileUpload" accept=".pdf"
:style="fileUpload === null ? 'width: 150px' : 'width: auto'" label="อัปโหลดไฟล์"
v-if="statusUpload !== true">
<template v-slot:prepend>
<q-icon color="light-blue" name="attach_file" />
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
</template>
</q-file>
<q-btn
flat
round
color="light-blue"
icon="upload"
@click="uploadFile(fileUpload)"
v-if="fileUpload !== null"
/>
<q-btn flat round color="light-blue" icon="upload" @click="uploadFile(fileUpload)" v-if="fileUpload !== null" />
</div>
<q-space />
<div class="row">
<q-tabs shrink>
<q-input
borderless
outlined
dense
debounce="300"
v-model="filter"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา"
style="max-width: 200px" class="q-ml-sm">
<template v-slot:append>
<q-icon name="search" />
</template>
</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
style="min-width: 150px"
class="gt-xs q-ml-sm"
>
<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 style="min-width: 150px" class="gt-xs q-ml-sm">
</q-select>
</q-tabs>
</div>
</div>
<div>
<q-table
flat
dense
bordered
:rows="rows"
:columns="columns"
row-key="order"
class="custom-header-table"
:filter="filter"
:visible-columns="visibleColumns"
no-data-label="ไม่มีข้อมูล"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
:filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
:pagination-label="paginationLabel" v-model:pagination="pagination">
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -530,45 +456,29 @@ const paginationLabel = (start: number, end: number, total: number) => {
</div>
</q-th>
<q-th auto-width />
<q-th
auto-width
v-if="
(typeReport === 'EDIT' ||
typeReport === null ||
typeReport === '') &&
statusReport === false &&
statusUpload !== true
"
/>
<q-th auto-width v-if="(typeReport === 'EDIT' ||
typeReport === null ||
typeReport === '') &&
statusReport === false &&
statusUpload !== true
" />
<q-th auto-width v-else></q-th>
<q-th
auto-width
v-if="
(typeReport === 'REMOVE' ||
typeReport === null ||
typeReport === '') &&
statusReport === false &&
statusUpload !== true
"
/>
<q-th auto-width v-if="(typeReport === 'REMOVE' ||
typeReport === null ||
typeReport === '') &&
statusReport === false &&
statusUpload !== true
" />
<q-th auto-width v-else></q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
:style="props.row.profileId === profileId && 'color: #26a69a;'"
@click.stop="router.push(`/registry/${props.row.profileId}`)"
>
<q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
@click.stop="router.push(`/registry/${props.row.profileId}`)">
<q-td key="order" :props="props">{{ props.row.order }} </q-td>
<q-td key="name" :props="props">{{ props.row.name }}</q-td>
<q-td
class="table_ellipsis"
key="organizationOrganization"
:props="props"
>{{ props.row.organizationOrganization }}</q-td
>
<q-td class="table_ellipsis" key="organizationOrganization" :props="props">{{
props.row.organizationOrganization }}</q-td>
<q-td key="positionEmployeeGroup" :props="props">{{
props.row.positionEmployeeGroup
}}</q-td>
@ -582,81 +492,51 @@ const paginationLabel = (start: number, end: number, total: number) => {
<q-td key="positionNumber" :props="props">{{
props.row.positionNumber
}}</q-td>
<q-td key="govGroup" :props="props">{{
props.row.govGroup
<q-td key="organizationAgency" :props="props">{{
props.row.organizationAgency
}}</q-td>
<q-td key="govOffice" :props="props">{{
props.row.govOffice
<q-td key="organizationGovernmentAgency" :props="props">{{
props.row.organizationGovernmentAgency
}}</q-td>
<q-td class="table_ellipsis" key="bureau" :props="props">{{
props.row.bureau
}}</q-td>
<q-td auto-width></q-td>
<q-td
auto-width
v-if="
(typeReport === 'EDIT' ||
<q-td auto-width v-if="(typeReport === 'EDIT' ||
typeReport === null ||
typeReport === '') &&
statusReport === false &&
statusUpload !== true
"
>
<q-btn
flat
round
color="primary"
icon="mdi-pencil"
dense
@click.stop="
(modalNote = true),
(note = props.row.reason),
(action = 'edit'),
(retireProfileId = props.row.id)
"
>
">
<q-btn flat round color="primary" icon="mdi-pencil" dense @click.stop="
(modalNote = true),
(note = props.row.reason),
(action = 'edit'),
(retireProfileId = props.row.id)
">
<q-tooltip>กรอกเหตุผล</q-tooltip>
</q-btn>
</q-td>
<q-td auto-width v-else></q-td>
<q-td
auto-width
v-if="
(typeReport === 'REMOVE' ||
typeReport === null ||
typeReport === '') &&
statusReport === false &&
statusUpload !== true
"
>
<q-btn
flat
round
class="text-red-14"
icon="mdi-delete"
dense
@click.stop="
(modalNote = true),
(action = 'delete'),
(note = props.row.reason),
(retireProfileId = props.row.id)
"
><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
>
<q-td auto-width v-if="(typeReport === 'REMOVE' ||
typeReport === null ||
typeReport === '') &&
statusReport === false &&
statusUpload !== true
">
<q-btn flat round class="text-red-14" icon="mdi-delete" dense @click.stop="
(modalNote = true),
(action = 'delete'),
(note = props.row.reason),
(retireProfileId = props.row.id)
"><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
</q-td>
<q-td auto-width v-else></q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
<q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
boundary-links direction-links></q-pagination>
</template>
</q-table>
</div>
@ -671,46 +551,21 @@ const paginationLabel = (start: number, end: number, total: number) => {
<q-card-section class="q-pt-none bg-grey-1">
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-input
outlined
dense
lazy-rules
v-model="note"
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
:label="`${'กรอกเหตุผล'}`"
type="textarea"
/>
<q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
:label="`${'กรอกเหตุผล'}`" type="textarea" />
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn
v-if="action === 'delete'"
label="บันทึก"
color="secondary"
:disable="visibleNote"
@click="clickDelete"
/>
<q-btn
v-else
label="บักทึก"
color="secondary"
@click="saveNote"
:disable="visibleNote"
/>
<q-btn v-if="action === 'delete'" label="บันทึก" color="secondary" :disable="visibleNote" @click="clickDelete" />
<q-btn v-else label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
</q-card-actions>
</q-card>
</q-dialog>
<DialogPopupReason
:modal="modalEdit"
title="แก้ไขมติ อ.ก.ก."
label="มติ อ.ก.ก."
:click-close="closemodalEditReport"
:savaForm="saveEdiitReport"
:textReport="textReport"
/>
<DialogPopupReason :modal="modalEdit" title="แก้ไขมติ อ.ก.ก." label="มติ อ.ก.ก." :click-close="closemodalEditReport"
:savaForm="saveEdiitReport" :textReport="textReport" />
</template>
<style lang="scss" scope>