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

refactor รายการลาออก

Browse source
This commit is contained in:
AnandaTon 2023-09-19 10:32:19 +07:00
parent 9dc3f982a7
commit 4bacdb1086
1 changed files with 114 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

144
src/modules/06_retirement/components/resign/Resign.vue
View file

@ -5,10 +5,8 @@ import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useRetirementDataStore } from "@/modules/06_retirement/store"; import { useRetirementDataStore } from "@/modules/06_retirement/store";
import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue"; import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main"; import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
@ -16,9 +14,7 @@ const $q = useQuasar(); //ใช้ noti quasar
const router = useRouter(); const router = useRouter();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const RetirementData = useRetirementDataStore(); const RetirementData = useRetirementDataStore();
const { messageError, date2Thai, showLoader, hideLoader, success } = mixin; const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
const { statusText } = RetirementData;
const rows = ref<ResponseItems[]>([]); const rows = ref<ResponseItems[]>([]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
@ -276,7 +272,6 @@ const closeModal = () => (modal.value = false);
const selected = ref<ResponseItems[]>([]); const selected = ref<ResponseItems[]>([]);
const checkSelected = computed(() => { const checkSelected = computed(() => {
if (selected.value.length === 0) { if (selected.value.length === 0) {
return true; return true;
} }
}); });
@ -287,20 +282,19 @@ const resetFilter = () => {
}; };
const openModalOrder = () => { const openModalOrder = () => {
openModal(); openModal();
const row = filters.value.filter( const row = filters.value.filter(
(r: ResponseItems) => (r: ResponseItems) =>
r.status == "PENDING" || r.status == "APPROVE" || r.status == "REJECT" r.status == "PENDING" || r.status == "APPROVE" || r.status == "REJECT"
); );
rows2.value = row; rows2.value = row;
}; };
onMounted(async () => { onMounted(async () => {
await fecthlist(); await fecthlist();
}); });
//นำข้อมูลจาก API มาแสดง
const fecthlist = async () => { const fecthlist = async () => {
showLoader(); showLoader();
await http await http
@ -346,6 +340,7 @@ const fecthlist = async () => {
}); });
}; };
//บันทึกคำสั่ง
const saveOrder = async () => { const saveOrder = async () => {
const id = selected.value.map((r) => r.id); const id = selected.value.map((r) => r.id);
const body = { const body = {
@ -369,6 +364,8 @@ const saveOrder = async () => {
hideLoader(); hideLoader();
}); });
}; };
//แปลงข้อความ status
const status = (val: string) => { const status = (val: string) => {
switch (val) { switch (val) {
case "WAITTING": case "WAITTING":
@ -405,28 +402,66 @@ const pagination = ref({
<div class="row col-12"> <div class="row col-12">
<div class="row col-12 q-col-gutter-sm"> <div class="row col-12 q-col-gutter-sm">
<div> <div>
<q-btn @click="openModalOrder" size="14px" flat round color="add" icon="mdi-account-arrow-right"> <q-btn
@click="openModalOrder"
size="14px"
flat
round
color="add"
icon="mdi-account-arrow-right"
>
<q-tooltip>ส่งไปออกคำสั่งลาออก</q-tooltip> <q-tooltip>ส่งไปออกคำสั่งลาออก</q-tooltip>
</q-btn> </q-btn>
</div> </div>
<q-space /> <q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined <q-input
debounce="300" placeholder="ค้นหา"> class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append> <template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" /> <q-icon v-if="filterKeyword == ''" name="search" />
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" /> <q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template> </template>
</q-input> </q-input>
<q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns" <q-select
emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px" v-model="visibleColumns"
class="col-xs-12 col-sm-3 col-md-2" /> 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="col-xs-12 col-sm-3 col-md-2"
/>
</div> </div>
<div class="col-12 q-pt-sm"> <div class="col-12 q-pt-sm">
<d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" :visible-columns="visibleColumns" <d-table
v-model:pagination="pagination"> :columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
>
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -435,7 +470,11 @@ const pagination = ref({
</q-tr> </q-tr>
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/retirement/resign/${props.row.id}`)"> <q-tr
:props="props"
class="cursor-pointer"
@click="router.push(`/retirement/resign/${props.row.id}`)"
>
<q-td key="no" :props="props"> <q-td key="no" :props="props">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</q-td> </q-td>
@ -485,32 +524,72 @@ const pagination = ref({
<div class="row justify-end"> <div class="row justify-end">
<div class="col-5"> <div class="col-5">
<q-toolbar style="padding: 0"> <q-toolbar style="padding: 0">
<q-input
<q-input borderless outlined dense debounce="300" v-model="filterKeyword2" placeholder="ค้นหา" borderless
style="width: 850px; max-width: auto"> outlined
dense
debounce="300"
v-model="filterKeyword2"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append> <template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" /> <q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter" /> <q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template> </template>
</q-input> </q-input>
<q-select v-model="visibleColumns2" multiple outlined dense options-dense <q-select
:display-value="$q.lang.table.columns" emit-value map-options :options="columns2" option-value="name" v-model="visibleColumns2"
options-cover style="min-width: 150px" class="gt-xs q-ml-sm" /> multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</q-toolbar> </q-toolbar>
</div> </div>
</div> </div>
<d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="id" <d-table
:visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected" :columns="columns2"
v-model:pagination="pagination"> :rows="rows2"
:filter="filterKeyword2"
row-key="id"
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
v-model:pagination="pagination"
>
<template v-slot:header-selection="scope"> <template v-slot:header-selection="scope">
<q-checkbox keep-color color="primary" dense v-model="scope.selected" /> <q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td> <q-td>
<q-checkbox keep-color color="primary" dense v-model="props.selected" /> <q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td> </q-td>
<q-td key="no" :props="props"> <q-td key="no" :props="props">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
@ -548,7 +627,12 @@ const pagination = ref({
</q-card-section> </q-card-section>
<q-card-actions align="right" class="bg-white text-teal"> <q-card-actions align="right" class="bg-white text-teal">
<q-btn label="ส่งไปออกคำสั่ง" @click="saveOrder" :disable="checkSelected" color="public" /> <q-btn
label="ส่งไปออกคำสั่ง"
@click="saveOrder"
:disable="checkSelected"
color="public"
/>
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>