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

ปรับ ui รายการลาออก

Browse source
This commit is contained in:
setthawutttty 2025-05-07 22:31:36 +07:00
parent ba63d25827
commit 9762b4e675
3 changed files with 204 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/modules/03_retire/interface/Main.ts
View file

@ -54,15 +54,35 @@ interface MainListResponse {
isActive: boolean;
}
interface DataOptions{
id:string
name:string
interface DataOptions {
id: string;
name: string;
}
interface RowsType {
commanders: SeqTypeRow[];
approvers: SeqTypeRow[];
}
interface SeqTypeRow {
seq: number;
prefix: string;
firstName: string;
lastName: string;
positionName: string;
profileId: string;
keycloakId: string;
approveStatus: string;
comment: string;
rejectDate: Date | null;
}
export type {
QuestionDescription,
OptionQuestions,
OptionQuestions2,
MainList,
MainListResponse,
DataOptions
DataOptions,
RowsType,
SeqTypeRow,
};

19
src/modules/03_retire/store.ts
View file

@ -4,9 +4,9 @@ export const useRestDataStore = defineStore("Rest", () => {
const statusText = (val: string) => {
switch (val) {
case "WAITTING":
return "รอดำเนินการ";
return "ใหม่";
case "PENDING":
return "เลือกตำแหน่งแล้ว";
return "รอดำเนินการ";
case "APPROVE":
return "อนุมัติ";
case "REJECT":
@ -16,7 +16,7 @@ export const useRestDataStore = defineStore("Rest", () => {
case "WAITING":
return "รอออกคำสั่ง";
case "DONE":
return "ออกคำสั่งเสร็จแล้ว";
return "ออกคำสั่งเสร็จสิ้น";
case "DONECANCEL":
return "ยกเลิกการลาออก";
case "CANCEL":
@ -28,7 +28,20 @@ export const useRestDataStore = defineStore("Rest", () => {
}
};
function convertStatusText(val: string) {
switch (val) {
case "PENDING":
return "รอดำเนินการ";
case "APPROVE":
return "อนุญาต";
case "REJECT":
return "ยับยั้ง";
}
}
return {
statusText,
convertStatusText
};
});

232
src/modules/03_retire/views/addRetire.vue
View file

@ -1,15 +1,20 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import type { QForm } from "quasar";
import type { QForm, QTableProps } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRestDataStore } from "@/modules/03_retire/store";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import type { DataOptions } from "@/modules/03_retire/interface/Main";
import type {
DataOptions,
RowsType,
SeqTypeRow,
} from "@/modules/03_retire/interface/Main";
import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
import Header from "@/components/DialogHeader.vue";
@ -18,6 +23,8 @@ import Workflow from "@/components/Workflow/Main.vue";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useRestDataStore();
const { convertStatusText } = store;
const link = ref<string>("");
const dataStore = useDataStore();
const routeName = router.currentRoute.value.name;
@ -37,6 +44,7 @@ const id = ref<string>(
? route.params.id.toString()
: ""
); //เก็บ id path
const rowsApprover = ref<RowsType>();
const myform = ref<QForm | null>(null); //form
const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
const dateCommand = ref<Date>(new Date()); //วันที่ยื่นขอลาออกจากราชการ
@ -73,6 +81,69 @@ const dataDetail = ref<any>({});
const modalWorkflow = ref<boolean>(false);
const columnsCommanders = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionName",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "positionName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "approveStatus",
align: "left",
label: "สถานะ",
sortable: true,
field: "approveStatus",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "comment",
align: "left",
label: "ความคิดเห็นและเหตุผล",
field: "comment",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "rejectDate",
align: "left",
label: "วันสุดท้ายที่ยับยั้ง",
field: "rejectDate",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
return `${row.rejectDate ? date2Thai(row.rejectDate) : "-"}`;
},
},
]);
/**
* ฟังก์ชั่นเปลี่ยนเป็น string ของ status
* @param val value ของ status true/false
@ -159,6 +230,10 @@ async function fectDataresign(id: string) {
noteReason.value = data.reason;
remark.value = data.remark;
rowsApprover.value = {
commanders: data.commanders,
approvers: data.approvers,
};
files.value = data.docs;
dataDetail.value = data;
})
@ -521,52 +596,56 @@ onMounted(async () => {
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.commanderReject !== null
? statusOrder(dataDetail.commanderReject)
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
<div class="col-12 text-detail">
{{
dataDetail.commanderRejectDate !== null
? date2Thai(dataDetail.commanderRejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
<div
class="col-12 text-detail"
v-if="dataDetail.commanderReject === false"
>
{{
dataDetail.commanderApproveReason !== null
? dataDetail.commanderApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-if="dataDetail.commanderReject === true"
>
{{
dataDetail.commanderRejectReason !== null
? dataDetail.commanderRejectReason
: "-"
}}
</div>
</div>
</div>
<div class="col-12">
<d-table
ref="table"
:columns="columnsCommanders"
:rows="rowsApprover?.commanders ?? []"
row-key="key"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[1, 25, 50, 100]"
>
<template v-slot:header="props">
<q-tr :props="props">
<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" class="cursor-pointer">
<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 == 'approveStatus'">
{{
props.row.approveStatus
? convertStatusText(props.row.approveStatus)
: "-"
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
</div>
@ -584,12 +663,28 @@ onMounted(async () => {
<q-separator />
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">ชื่อ - นามสกุล</div>
<div class="col-12 text-detail">
{{
rowsApprover &&
rowsApprover.approvers &&
rowsApprover.approvers[0]?.firstName
? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
: "-"
}}
</div>
</div>
<div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail">
{{
dataDetail.oligarchReject !== null
? statusOrder(dataDetail.oligarchReject)
rowsApprover &&
rowsApprover.approvers &&
rowsApprover.approvers[0]?.approveStatus
? convertStatusText(
rowsApprover?.approvers[0].approveStatus
)
: "-"
}}
</div>
@ -598,31 +693,22 @@ onMounted(async () => {
<div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
<div class="col-12 text-detail">
{{
dataDetail.oligarchRejectDate !== null
? date2Thai(dataDetail.oligarchRejectDate)
rowsApprover &&
rowsApprover.approvers &&
rowsApprover.approvers[0]?.rejectDate
? date2Thai(rowsApprover?.approvers[0].rejectDate)
: "-"
}}
</div>
</div>
<div class="col-xs-12 row items-start">
<div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
<div
class="col-12 text-detail"
v-if="dataDetail.oligarchReject == false"
>
<div class="col-12 text-detail">
{{
dataDetail.oligarchApproveReason !== null
? dataDetail.oligarchApproveReason
: "-"
}}
</div>
<div
class="col-12 text-detail"
v-else-if="dataDetail.oligarchReject == true"
>
{{
dataDetail.oligarchRejectReason !== null
? dataDetail.oligarchRejectReason
rowsApprover &&
rowsApprover.approvers &&
rowsApprover.approvers[0]?.comment
? rowsApprover?.approvers[0].comment
: "-"
}}
</div>
@ -691,3 +777,13 @@ onMounted(async () => {
</q-card>
</q-dialog>
</template>
<style scoped>
.text-top {
color: gray;
font-weight: 400;
padding-bottom: 3px;
}
.text-detail {
font-weight: 500;
}
</style>