fixing column บรรจุ แต่งตั้ง ย้าย

This commit is contained in:
Warunee Tamkoo 2024-05-24 14:58:40 +07:00
parent bb2d03e499
commit 9cde68ab4f
74 changed files with 620 additions and 626 deletions

View file

@ -2,6 +2,7 @@
import { ref, computed, watchEffect } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useTransferDataStore } from "@/modules/05_placement/store";
import type { QTableProps } from "quasar";
import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
@ -9,21 +10,30 @@ import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogH
import http from "@/plugins/http";
import config from "@/app.config";
const transferStore = useTransferDataStore();
const { statusText } = transferStore;
const $q = useQuasar();
const selected = ref<ResponseData[]>([]);
const mixin = useCounterMixin();
const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
const {
showLoader,
success,
messageError,
dialogConfirm,
hideLoader,
date2Thai,
} = mixin;
//
const visibleColumns2 = ref<string[]>([
"no",
"fullname",
"position",
"positionLevel",
"posType",
"organizationPositionOld",
"organization",
"statustext",
"dateText",
"status",
"createdAt",
]);
const columns2 = ref<QTableProps["columns"]>([
{
@ -34,8 +44,6 @@ const columns2 = ref<QTableProps["columns"]>([
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "fullname",
@ -47,33 +55,26 @@ const columns2 = ref<QTableProps["columns"]>([
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
},
{
name: "position",
name: "posType",
align: "left",
label: "ตำแหน่งในสายงาน",
label: "ประเภทตำแหน่ง",
sortable: true,
field: "position",
field: "posType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format(val, row) {
return row.positionTypeOld + " (" + row.positionLevelOld + ")";
},
},
{
name: "organizationPositionOld",
align: "left",
label: "สังกัด",
label: "ตำแหน่งและหน่วยงานเดิม",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
@ -93,27 +94,28 @@ const columns2 = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateText",
name: "createdAt",
align: "left",
label: "วันที่ดำเนินการ",
sortable: true,
field: "dateText",
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
sortOrder: "da",
format(val) {
return date2Thai(val);
},
},
{
name: "statustext",
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "statustext",
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (val) => statusText(val),
},
]);
@ -122,11 +124,9 @@ const props = defineProps({
closeModal: Function,
getData: Function,
rows2: Array,
filterKeyword2:String,
filterKeyword2: String,
});
const checkSelected = computed(() => {
if (selected.value.length === 0) {
return true;
@ -135,8 +135,13 @@ const checkSelected = computed(() => {
//popup
const saveOrder = () => {
dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
}
dialogConfirm(
$q,
() => Ordersave(),
"ยืนยันส่งไปออกคำสั่ง",
"ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
);
};
//
const Ordersave = async () => {
const id = selected.value.map((r) => r.id);
@ -160,17 +165,13 @@ const Ordersave = async () => {
});
};
const emit = defineEmits([
"update:filterKeyword2",
"update:selected",
]);
const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
const updateInput = (value: any) => {
emit("update:filterKeyword2", value);
};
//
const Reset = () => {
emit("update:filterKeyword2", "");
emit("update:filterKeyword2", "");
};
watchEffect(() => {
if (props.Modal === true) {
@ -192,7 +193,7 @@ watchEffect(() => {
outlined
dense
debounce="300"
:model-value="filterKeyword2"
:model-value="filterKeyword2"
@update:model-value="updateInput"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
@ -254,34 +255,23 @@ watchEffect(() => {
v-model="props.selected"
/>
</q-td>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props">
{{ props.row.positionLevel }}
</q-td>
<q-td key="organizationPositionOld" :props="props">
<div class="table_ellipsis">
{{ props.row.organizationPositionOld }}
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
</q-td>
<q-td key="organization" :props="props">
<div class="table_ellipsis">
{{ props.row.organization }}
<div
v-else
:class="
col.name === 'organizationPositionOld' ||
col.name === 'organization'
? 'table_ellipsis'
: ''
"
>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td key="dateText" :props="props">
{{ props.row.dateText }}
</q-td>
<q-td key="statustext" :props="props">
{{ props.row.statustext }}
</q-td>
</q-tr>
</template>
</d-table>
@ -297,4 +287,4 @@ watchEffect(() => {
</q-card-actions>
</q-card>
</q-dialog>
</template>
</template>

View file

@ -15,9 +15,10 @@ const router = useRouter();
const mixin = useCounterMixin();
const transferStore = useTransferDataStore();
const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
const { statusText } = transferStore;
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
const modal = ref<boolean>(false);
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
@ -30,12 +31,11 @@ const filters = ref<ResponseData[]>([]);
const visibleColumns = ref<string[]>([
"no",
"fullname",
"position",
"positionLevel",
"posType",
"organizationPositionOld",
"organization",
"statustext",
"dateText",
"status",
"createdAt",
]);
const resetFilter = () => {
@ -65,33 +65,26 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
},
{
name: "position",
name: "posType",
align: "left",
label: "ตำแหน่งในสายงาน",
label: "ประเภทตำแหน่ง",
sortable: true,
field: "position",
field: "posType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format(val, row) {
return row.positionTypeOld + " (" + row.positionLevelOld + ")";
},
},
{
name: "organizationPositionOld",
align: "left",
label: "สังกัด",
label: "ตำแหน่งและหน่วยงานเดิม",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
@ -111,27 +104,28 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateText",
name: "createdAt",
align: "left",
label: "วันที่ดำเนินการ",
sortable: true,
field: "dateText",
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
sortOrder: "da",
format(val) {
return date2Thai(val);
},
},
{
name: "statustext",
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "statustext",
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (val) => statusText(val),
},
]);
@ -144,17 +138,16 @@ const closeModal = () => {
//
const openModalOrder = () => {
openModal();
console.log("filters===>",filters.value)
const row = filters.value.filter(
(r: ResponseData) =>
(r.status == "APPROVE") &&
r.status == "APPROVE" &&
r.organizationPositionOld &&
r.positionTypeOld &&
r.positionLevelOld &&
r.positionNumberOld &&
r.salary !== null &&
r.organization &&
r.date
r.date
);
rows2.value = row;
};
@ -164,38 +157,8 @@ const getData = async () => {
await http
.get(config.API.transfer)
.then((res: any) => {
const data = res.data.result;
let list: ResponseData[] = [];
data.map((r: ResponseData) => {
list.push({
dateText:
r.createdAt !== null ? date2Thai(new Date(r.createdAt)) : "-",
createdAt: r.createdAt !== null ? new Date(r.createdAt) : null,
date: r.date,
firstName: r.firstName ?? "",
id: r.id ?? "",
isActive: r.isActive ? r.isActive : false,
lastName: r.lastName ?? "",
organization: r.organization ?? "",
organizationPositionOld: r.organizationPositionOld ?? "",
posNo: r.posNo ?? "",
position: r.position ?? "",
positionLevel: r.positionLevel ?? "",
positionLevelOld: r.positionLevelOld ?? "",
positionNumberOld: r.positionNumberOld ?? "",
positionTypeOld: r.positionTypeOld ?? "",
prefix: r.prefix ?? "",
reason: r.reason ?? "",
salary: r.salary ? r.salary : 0,
status: r.status ?? "",
statustext: statusText(r.status ?? ""),
fullname: `${r.prefix ?? ""} ${r.firstName ?? ""} ${
r.lastName ?? ""
}`,
});
});
rows.value = list;
filters.value = list;
rows.value = res.data.result;
filters.value = rows.value;
})
.catch((e) => {
messageError($q, e);
@ -282,39 +245,23 @@ onMounted(async () => {
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="router.push(`/transfer/${props.row.id}`)"
>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props">
{{ props.row.positionLevel }}
</q-td>
<q-td key="organizationPositionOld" :props="props">
<div class="table_ellipsis">
{{ props.row.organizationPositionOld }}
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.id"
class="cursor-pointer"
@click="router.push(`/transfer/${props.row.id}`)"
>
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
</q-td>
<q-td key="organization" :props="props">
<div class="table_ellipsis">
{{ props.row.organization }}
<div v-else>
{{
col.value == null ? "" : col.value == "" ? "-" : col.value
}}
</div>
</q-td>
<q-td key="dateText" :props="props">
{{ props.row.dateText }}
</q-td>
<q-td key="statustext" :props="props">
{{ props.row.statustext }}
</q-td>
</q-tr>
</template>
</d-table>

View file

@ -360,7 +360,7 @@ onMounted(async () => {
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<div class="col-12 text-top">ระด</div>
<div class="col-12 text-top">ระดตำแหน</div>
<div class="col-12 text-detail">
{{ responseData.positionLevelOld }}
</div>
@ -584,9 +584,9 @@ onMounted(async () => {
:readonly="!edit"
:borderless="!edit"
v-model="positionTypeOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
:rules="[(val) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
hide-bottom-space
:label="`${'ตำแหน่งประเภท'}`"
:label="`${'ประเภทตำแหน่ง'}`"
/>
</div>
<div class="col-xs-6 col-sm-3">
@ -598,9 +598,9 @@ onMounted(async () => {
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
:rules="[(val) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
hide-bottom-space
:label="`${'ระดับ'}`"
:label="`${'ระดับตำแหน่ง'}`"
/>
</div>
<div class="col-xs-6 col-sm-3">