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

ข้อมูลทะเบียนประวัติ

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-05-28 15:44:17 +07:00
parent b05065ba67
commit bd6f4fde7f
34 changed files with 9004 additions and 706 deletions
Download patch file Download diff file Expand all files Collapse all files

241
src/modules/10_registry/Dialog/DialogHistory.vue Normal file
View file

@ -0,0 +1,241 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import { useCounterMixin } from "@/stores/mixin";
const type = ref<string>("");
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const store = useRegistryInFormationStore();
const modal = defineModel<boolean>("modal", { required: true });
const title = defineModel<string>("title", { required: true });
const filter = ref<string>("");
const rows = defineModel<any>("rows");
const columns = defineModel<QTableProps["columns"]>("columns");
const visibleColumns = defineModel<string[]>("visibleColumns");
const props = defineProps({
getData: Function,
type: String,
});
function close() {
modal.value = false;
}
function dateThaiRange(val: [Date, Date]) {
if (val === null) {
} else if (date2Thai(val[0]) === date2Thai(val[1])) {
return `${date2Thai(val[0])}`;
} else {
return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
}
}
function statusLeave(val: string) {
switch (val) {
case "waitting":
return "รออนุมัติ";
case "reject":
return "ไม่ผ่านการอนุมัติ";
case "approve":
return "ผ่านการอนุมัติ";
case "cancel":
return "ยกเลิก";
default:
return "-";
}
}
watch(
() => modal.value,
(n) => {
if (n) {
if (props.type) {
type.value = props.type;
}
props.getData?.();
}
}
);
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card style="min-width: 70vw">
<DialogHeader :tittle="title" :close="close" />
<q-separator />
<q-card-section>
<div class="row justify-end q-col-gutter-sm q-mb-sm">
<div class="col-12 col-sm-3">
<q-input
class="inputgreen"
outlined
dense
v-model="filter"
label="ค้นหา"
>
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon
v-else
name="search"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
</div>
<div class="col-12 col-sm-2">
<q-select
dense
multiple
outlined
emit-value
map-options
options-cover
options-dense
option-value="name"
v-model="visibleColumns"
:options="columns"
:display-value="$q.lang.table.columns"
/>
</div>
</div>
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows"
:columns="columns"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<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, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'insignia' && type == 'insignia'">
{{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
}}{{
props.row.insignia.shortName
? `(${props.row.insignia.shortName})`
: ""
}}
</div>
<div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}
</div>
<div v-else-if="col.name == 'status' && type == 'Leave'">
{{ props.row.status ? statusLeave(props.row.status) : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:item="props">
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
>
<q-card bordered flat class="q-pt-md">
<q-list dense>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section
v-if="col.name == 'insignia' && type == 'insignia'"
class="fix_top"
>
<q-item-label class="text-dark text-weight-medium">
{{
props.row.insignia
? `${props.row.insignia.name} `
: "-"
}}{{
props.row.insignia.shortName
? `(${props.row.insignia.shortName})`
: ""
}}</q-item-label
>
</q-item-section>
<q-item-section
v-else-if="col.name == 'dateLeave' && type == 'Leave'"
class="fix_top"
>
<q-item-label class="text-dark text-weight-medium">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}</q-item-label
>
</q-item-section>
<q-item-section
v-else-if="col.name == 'status' && type == 'Leave'"
class="fix_top"
>
<q-item-label class="text-dark text-weight-medium">
{{ props.row.status ? statusLeave(props.row.status) : "-" }}</q-item-label
>
</q-item-section>
<q-item-section v-else class="fix_top">
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
>
<span> ไม่พบข้อมูลประวัติการแก้ไข </span>
</div>
</template>
</d-table>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style scoped>
.fix_top {
justify-content: start !important;
}
</style>