feat(position-employee): HistoryPos
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
df2b3f7b32
commit
49b57e7b40
4 changed files with 144 additions and 41 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -7,36 +7,38 @@ import { usePositionEmp } from "@/modules/16_positionEmployee/store/organization
|
|||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { HistoryPos } from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
|
||||
/**
|
||||
* importCompoonents
|
||||
*/
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
/** use*/
|
||||
const store = usePositionEmp();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
rowId: {
|
||||
type: String,
|
||||
},
|
||||
historyType: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const title = computed(() => {
|
||||
if (props.historyType === "HISTORY") return "ประวัติตำแหน่ง";
|
||||
if (props.historyType === "OWNER_HISTORY") return "ประวัติคนครอง";
|
||||
return "";
|
||||
});
|
||||
|
||||
const rows = ref<HistoryPos[]>([]); //รายการแก้ไขประวัติ
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
const baseColumns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
|
|
@ -47,30 +49,37 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "orgShortName",
|
||||
name: "fullname",
|
||||
align: "left",
|
||||
label: "ชื่อคนครอง",
|
||||
sortable: true,
|
||||
field: "fullname",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "shortName",
|
||||
align: "left",
|
||||
label: "อักษรย่อ",
|
||||
sortable: true,
|
||||
field: "orgShortName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
field: (v) => date2Thai(v),
|
||||
field: "shortName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "posMasterNoPrefix",
|
||||
align: "left",
|
||||
label: " Prefix ตำแหน่งเลขที่",
|
||||
label: " Prefix เลขที่ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posMasterNoPrefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "posMasterNo",
|
||||
|
|
@ -80,18 +89,76 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "posMasterNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a
|
||||
.toString()
|
||||
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "posMasterNoSuffix",
|
||||
align: "left",
|
||||
label: "Suffix ตำแหน่งเลขที่",
|
||||
label: "Suffix เลขที่ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posMasterNoSuffix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "กลุ่มงาน",
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
format(val, row) {
|
||||
let name = "";
|
||||
if (row.posType && row.position) {
|
||||
name = `${row.posType} (${row.posLevel})`;
|
||||
} else if (row.posType) {
|
||||
name = `${row.posType}`;
|
||||
} else if (row.posLevel) {
|
||||
name = `(${row.posLevel})`;
|
||||
} else name = "-";
|
||||
return name;
|
||||
},
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
||||
{
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
field: "lastUpdatedAt",
|
||||
sortable: false,
|
||||
format(val) {
|
||||
return date2Thai(val, true, true);
|
||||
},
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = computed(() =>
|
||||
props.historyType === "HISTORY"
|
||||
? (baseColumns.value || []).filter((col: any) => col.name !== "fullname")
|
||||
: baseColumns.value || []
|
||||
);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลประวัติตำแหน่ง
|
||||
* @param id
|
||||
|
|
@ -99,10 +166,13 @@ const columns = ref<QTableProps["columns"]>([
|
|||
function fetchHistoryPos(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.orgPosHistory(id))
|
||||
.get(config.API.orgPosHistoryUpdateEmp(id))
|
||||
.then((res) => {
|
||||
const data: HistoryPos[] = res.data.result;
|
||||
rows.value = data;
|
||||
rows.value =
|
||||
props.historyType === "HISTORY"
|
||||
? formatHistoryData(data)
|
||||
: formatHistoryOwnerData(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -112,9 +182,23 @@ function fetchHistoryPos(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* callback function ทำงานเมื่อ modal === true
|
||||
*/
|
||||
function formatHistoryOwnerData(data: HistoryPos[]) {
|
||||
return data.map((item) => ({
|
||||
...item,
|
||||
fullname: item.firstName
|
||||
? `${item.prefix}${item.firstName} ${item.lastName}`.trim()
|
||||
: "ว่าง",
|
||||
}));
|
||||
}
|
||||
|
||||
function formatHistoryData(data: HistoryPos[]) {
|
||||
return data.map((item) => ({
|
||||
...item,
|
||||
shortName: item.orgShortName ?? "-",
|
||||
}));
|
||||
}
|
||||
|
||||
/** callback function ทำงานเมื่อ modal === true*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
|
|
@ -124,9 +208,9 @@ watch(
|
|||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 700px; max-width: 80vw">
|
||||
<q-card style="min-width: 80%">
|
||||
<Header
|
||||
:tittle="'ประวัติตำแหน่ง'"
|
||||
:tittle="title"
|
||||
:close="
|
||||
() => {
|
||||
modal = false;
|
||||
|
|
@ -167,7 +251,7 @@ watch(
|
|||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue