paging
This commit is contained in:
STW_TTTY\stwtt
parent
6f7206c0af
commit
3e508afff5
5 changed files with 559 additions and 334 deletions
91
src/components/TableD.vue
Normal file
91
src/components/TableD.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
<template>
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="custom-header-table"
|
||||||
|
v-bind="attrs"
|
||||||
|
virtual-scroll
|
||||||
|
:virtual-scroll-sticky-size-start="48"
|
||||||
|
dense
|
||||||
|
:pagination-label="paginationLabel"
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
>
|
||||||
|
<template v-slot:pagination="scope">
|
||||||
|
ทั้งหมด {{ attrs.rows.length }} รายการ
|
||||||
|
<q-pagination
|
||||||
|
v-model="pagination.page"
|
||||||
|
active-color="primary"
|
||||||
|
color="dark"
|
||||||
|
:max="scope.pagesNumber"
|
||||||
|
:max-pages="5"
|
||||||
|
size="sm"
|
||||||
|
boundary-links
|
||||||
|
direction-links
|
||||||
|
></q-pagination>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-for="(_, slot) in slots" v-slot:[slot]="scope">
|
||||||
|
<slot :name="slot" v-bind="scope || {}" />
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs, useSlots } from "vue";
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const slots = ref<any>(useSlots());
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
paging: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
|
if (props.paging == true)
|
||||||
|
return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
|
||||||
|
else return start + "-" + end + " ใน " + total;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-color {
|
||||||
|
color: #4154b3;
|
||||||
|
}
|
||||||
|
.custom-header-table {
|
||||||
|
height: auto;
|
||||||
|
.q-table tr:nth-child(odd) td {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.q-table tr:nth-child(even) td {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr {
|
||||||
|
background: #ecebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr th {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
/* this will be the loading indicator */
|
||||||
|
.q-table thead tr:last-child th {
|
||||||
|
/* height of all previous header rows */
|
||||||
|
top: 48px;
|
||||||
|
}
|
||||||
|
.q-table thead tr:first-child th {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -33,6 +33,11 @@ app.component(
|
||||||
defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
|
defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
|
||||||
)
|
)
|
||||||
|
|
||||||
|
app.component(
|
||||||
|
"d-table",
|
||||||
|
defineAsyncComponent(() => import("@/components/TableD.vue"))
|
||||||
|
);
|
||||||
|
|
||||||
app.config.globalProperties.$http = http
|
app.config.globalProperties.$http = http
|
||||||
|
|
||||||
app.mount("#app")
|
app.mount("#app")
|
||||||
|
|
|
||||||
|
|
@ -1,211 +1,278 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { QTableProps } from "quasar"
|
import type { QTableProps } from "quasar";
|
||||||
import { ref, onMounted } from "vue"
|
import { ref, onMounted } from "vue";
|
||||||
import { useQuasar } from "quasar"
|
import { useQuasar } from "quasar";
|
||||||
import { useRouter } from "vue-router"
|
import { useRouter } from "vue-router";
|
||||||
import { useCounterMixin } from "@/stores/mixin"
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useTransferDataStore } from "@/modules/02_transfer/store"
|
import { useTransferDataStore } from "@/modules/02_transfer/store";
|
||||||
import http from "@/plugins/http"
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config"
|
import config from "@/app.config";
|
||||||
import Table from "@/components/Table.vue"
|
import Table from "@/components/Table.vue";
|
||||||
|
|
||||||
const transferData = useTransferDataStore()
|
const transferData = useTransferDataStore();
|
||||||
const { statusText } = transferData
|
const { statusText } = transferData;
|
||||||
const router = useRouter()
|
const router = useRouter();
|
||||||
const $q = useQuasar()
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin()
|
const mixin = useCounterMixin();
|
||||||
const { date2Thai, messageError, showLoader, hideLoader } = mixin
|
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ตั้งค่า pagination
|
* ตั้งค่า pagination
|
||||||
*/
|
*/
|
||||||
const initialPagination = ref({
|
const initialPagination = ref({
|
||||||
rowsPerPage: 0,
|
rowsPerPage: 0,
|
||||||
})
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* เพิ่มหัวข้อตาราง
|
* เพิ่มหัวข้อตาราง
|
||||||
*/
|
*/
|
||||||
const filter = ref<string>("")
|
const filter = ref<string>("");
|
||||||
const rows = ref<any>([])
|
const rows = ref<any>([]);
|
||||||
const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "statustext"])
|
const visibleColumns = ref<String[]>([
|
||||||
|
"no",
|
||||||
|
"date",
|
||||||
|
"position",
|
||||||
|
"noPos",
|
||||||
|
"level",
|
||||||
|
"salary",
|
||||||
|
"transfer",
|
||||||
|
"statustext",
|
||||||
|
]);
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "no",
|
name: "no",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ลำดับ",
|
label: "ลำดับ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "no",
|
field: "no",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:5px;",
|
style: "font-size: 14px; width:5px;",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "date",
|
name: "date",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "วันที่",
|
label: "วันที่",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "date",
|
field: "date",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:15%;",
|
style: "font-size: 14px; width:15%;",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "position",
|
name: "position",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ตำแหน่ง",
|
label: "ตำแหน่ง",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "position",
|
field: "position",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:15%;",
|
style: "font-size: 14px; width:15%;",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "noPos",
|
name: "noPos",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ตำแหน่งเลขที่",
|
label: "ตำแหน่งเลขที่",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "noPos",
|
field: "noPos",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "level",
|
name: "level",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "อันดับ/ระดับ",
|
label: "อันดับ/ระดับ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "level",
|
field: "level",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "salary",
|
name: "salary",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "เงินเดือน",
|
label: "เงินเดือน",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "salary",
|
field: "salary",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "transfer",
|
name: "transfer",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "หน่วยงานที่ขอโอนไป",
|
label: "หน่วยงานที่ขอโอนไป",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "transfer",
|
field: "transfer",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "statustext",
|
name: "statustext",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "สถานะ",
|
label: "สถานะ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "statustext",
|
field: "statustext",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:10%;",
|
style: "font-size: 14px; width:10%;",
|
||||||
},
|
},
|
||||||
])
|
]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||||
*/
|
*/
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fecthListTransfer()
|
await fecthListTransfer();
|
||||||
})
|
});
|
||||||
|
|
||||||
//นำข้อมูลมาแสดง
|
//นำข้อมูลมาแสดง
|
||||||
const fecthListTransfer = async () => {
|
const fecthListTransfer = async () => {
|
||||||
showLoader()
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.get(config.API.listUserTransfer())
|
.get(config.API.listUserTransfer())
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
let data = res.data.result
|
let data = res.data.result;
|
||||||
rows.value = data.map((e: any) => ({
|
rows.value = data.map((e: any) => ({
|
||||||
id: e.id,
|
id: e.id,
|
||||||
date: date2Thai(e.createdAt),
|
date: date2Thai(e.createdAt),
|
||||||
status: e.status,
|
status: e.status,
|
||||||
statustext: statusText(e.status),
|
statustext: statusText(e.status),
|
||||||
position: e.organizationPositionOld,
|
position: e.organizationPositionOld,
|
||||||
noPos: e.posNo,
|
noPos: e.posNo,
|
||||||
level: e.positionLevel,
|
level: e.positionLevel,
|
||||||
salary: e.salary,
|
salary: e.salary,
|
||||||
transfer: e.organization,
|
transfer: e.organization,
|
||||||
}))
|
}));
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
messageError($q, e)
|
messageError($q, e);
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader()
|
hideLoader();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
|
* ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
|
||||||
*/
|
*/
|
||||||
const clickAdd = async () => {
|
const clickAdd = async () => {
|
||||||
router.push(`/transfer/add`)
|
router.push(`/transfer/add`);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* กดเพื่อย้อนกลับ
|
* กดเพื่อย้อนกลับ
|
||||||
*/
|
*/
|
||||||
const clickBack = () => {
|
const clickBack = () => {
|
||||||
router.push(`/`)
|
router.push(`/`);
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12 row justify-center">
|
<div class="col-12 row justify-center">
|
||||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||||
<div class="toptitle text-white col-12 row items-center">
|
<div class="toptitle text-white col-12 row items-center">
|
||||||
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="clickBack" />
|
<q-btn
|
||||||
เรื่องขอโอน
|
icon="mdi-arrow-left"
|
||||||
</div>
|
unelevated
|
||||||
<div class="col-12">
|
round
|
||||||
<q-card bordered class="q-pa-md">
|
dense
|
||||||
<Table
|
flat
|
||||||
style="max-height: 80vh"
|
color="primary"
|
||||||
:rows="rows"
|
class="q-mr-sm"
|
||||||
:columns="columns"
|
@click="clickBack"
|
||||||
:filter="filter"
|
/>
|
||||||
:visible-columns="visibleColumns"
|
เรื่องขอโอน
|
||||||
v-model:inputfilter="filter"
|
</div>
|
||||||
v-model:inputvisible="visibleColumns"
|
<div class="col-12">
|
||||||
:pagination="initialPagination"
|
<q-card bordered class="q-pa-md">
|
||||||
:inputShow="false"
|
<div class="q-pb-sm row">
|
||||||
:add="clickAdd"
|
<div>
|
||||||
:titleText="''"
|
<q-btn
|
||||||
>
|
size="14px"
|
||||||
<template #columns="props">
|
flat
|
||||||
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/` + props.row.id)">
|
dense
|
||||||
<q-td key="no" :props="props">
|
color="blue"
|
||||||
{{ props.rowIndex + 1 }}
|
@click="clickAdd"
|
||||||
</q-td>
|
icon="mdi-plus"
|
||||||
<q-td key="date" :props="props">
|
>
|
||||||
{{ props.row.date }}
|
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||||
</q-td>
|
</q-btn>
|
||||||
<q-td key="position" :props="props">
|
</div>
|
||||||
{{ props.row.position }}
|
<q-space />
|
||||||
</q-td>
|
<div class="items-center q-gutter-sm" style="display: flex">
|
||||||
<q-td key="noPos" :props="props">
|
<!-- ค้นหาข้อความใน table -->
|
||||||
{{ props.row.noPos }}
|
<q-input
|
||||||
</q-td>
|
standout
|
||||||
<q-td key="level" :props="props">
|
dense
|
||||||
{{ props.row.level }}
|
v-model="filter"
|
||||||
</q-td>
|
ref="filterRef"
|
||||||
<q-td key="salary" :props="props">
|
outlined
|
||||||
{{ props.row.salary }}
|
debounce="300"
|
||||||
</q-td>
|
placeholder="ค้นหา"
|
||||||
<q-td key="transfer" :props="props">
|
style="max-width: 200px"
|
||||||
{{ props.row.transfer }}
|
>
|
||||||
</q-td>
|
<template v-slot:append>
|
||||||
<q-td key="statustext" :props="props">
|
<q-icon v-if="filter == ''" name="search" />
|
||||||
{{ props.row.statustext }}
|
<q-icon
|
||||||
</q-td>
|
v-if="filter !== ''"
|
||||||
</q-tr>
|
name="clear"
|
||||||
</template>
|
class="cursor-pointer"
|
||||||
</Table>
|
@click="filter = ''"
|
||||||
</q-card>
|
/>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</q-input>
|
||||||
</div>
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:filter="filter"
|
||||||
|
row-key="name"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:rows-per-page-options="[10, 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.id"
|
||||||
|
@click="router.push(`/transfer/` + props.row.id)"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style></style>
|
<style></style>
|
||||||
|
|
|
||||||
|
|
@ -1,172 +1,245 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { QTableProps } from "quasar"
|
import type { QTableProps } from "quasar";
|
||||||
import { ref, onMounted } from "vue"
|
import { ref, onMounted } from "vue";
|
||||||
import { useQuasar } from "quasar"
|
import { useQuasar } from "quasar";
|
||||||
import { useRouter } from "vue-router"
|
import { useRouter } from "vue-router";
|
||||||
import { useCounterMixin } from "@/stores/mixin"
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import http from "@/plugins/http"
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config"
|
import config from "@/app.config";
|
||||||
import { useRestDataStore } from "@/modules/03_retire/store"
|
import { useRestDataStore } from "@/modules/03_retire/store";
|
||||||
import Table from "@/components/Table.vue"
|
import Table from "@/components/Table.vue";
|
||||||
|
|
||||||
const RestData = useRestDataStore()
|
const RestData = useRestDataStore();
|
||||||
const { statusText } = RestData
|
const { statusText } = RestData;
|
||||||
const router = useRouter()
|
const router = useRouter();
|
||||||
const $q = useQuasar()
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin()
|
const mixin = useCounterMixin();
|
||||||
const { date2Thai, messageError, showLoader, hideLoader } = mixin
|
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* เพิ่มหัวข้อตาราง
|
* เพิ่มหัวข้อตาราง
|
||||||
*/
|
*/
|
||||||
const rows = ref<any>([])
|
const rows = ref<any>([]);
|
||||||
const filter = ref<string>("")
|
const filter = ref<string>("");
|
||||||
const visibleColumns = ref<String[]>(["no", "placeLeave", "dateStartLeave", "dateLeave", "statustext"])
|
const visibleColumns = ref<String[]>([
|
||||||
|
"no",
|
||||||
|
"placeLeave",
|
||||||
|
"dateStartLeave",
|
||||||
|
"dateLeave",
|
||||||
|
"statustext",
|
||||||
|
]);
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "no",
|
name: "no",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ลำดับ",
|
label: "ลำดับ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "no",
|
field: "no",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:5%;",
|
style: "font-size: 14px; width:5%;",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "placeLeave",
|
name: "placeLeave",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "สถานที่ยื่นขอลาออกจากราชการ",
|
label: "สถานที่ยื่นขอลาออกจากราชการ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "placeLeave",
|
field: "placeLeave",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:15%;",
|
style: "font-size: 14px; width:15%;",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "dateStartLeave",
|
name: "dateStartLeave",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "วันที่ยื่นขอลาออกจากราชการ",
|
label: "วันที่ยื่นขอลาออกจากราชการ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "dateStartLeave",
|
field: "dateStartLeave",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:15%;",
|
style: "font-size: 14px; width:15%;",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "dateLeave",
|
name: "dateLeave",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "วันที่ขอลาออกจากราชการ",
|
label: "วันที่ขอลาออกจากราชการ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "dateLeave",
|
field: "dateLeave",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "statustext",
|
name: "statustext",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "สถานะ",
|
label: "สถานะ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "statustext",
|
field: "statustext",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:10%;",
|
style: "font-size: 14px; width:10%;",
|
||||||
},
|
},
|
||||||
])
|
]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ตั้งค่า pagination
|
* ตั้งค่า pagination
|
||||||
*/
|
*/
|
||||||
const initialPagination = ref({
|
const initialPagination = ref({
|
||||||
rowsPerPage: 0,
|
rowsPerPage: 0,
|
||||||
})
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||||
*/
|
*/
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fectListleave()
|
fectListleave();
|
||||||
})
|
});
|
||||||
|
|
||||||
//นำข้อมูลมาแสดง
|
//นำข้อมูลมาแสดง
|
||||||
const fectListleave = async () => {
|
const fectListleave = async () => {
|
||||||
showLoader()
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.get(config.API.listUser())
|
.get(config.API.listUser())
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
let data = res.data.result
|
let data = res.data.result;
|
||||||
rows.value = data.map((e: any) => ({
|
rows.value = data.map((e: any) => ({
|
||||||
id: e.id,
|
id: e.id,
|
||||||
placeLeave: e.location,
|
placeLeave: e.location,
|
||||||
dateStartLeave: date2Thai(e.sendDate),
|
dateStartLeave: date2Thai(e.sendDate),
|
||||||
dateLeave: date2Thai(e.activeDate),
|
dateLeave: date2Thai(e.activeDate),
|
||||||
status: e.status,
|
status: e.status,
|
||||||
statustext: statusText(e.status),
|
statustext: statusText(e.status),
|
||||||
}))
|
}));
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
messageError($q, e)
|
messageError($q, e);
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader()
|
hideLoader();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มลาออก
|
* ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มลาออก
|
||||||
*/
|
*/
|
||||||
const clickAdd = async () => {
|
const clickAdd = async () => {
|
||||||
router.push(`/retire/add`)
|
router.push(`/retire/add`);
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* กดเพื่อย้อนกลับ
|
* กดเพื่อย้อนกลับ
|
||||||
*/
|
*/
|
||||||
const clickBack = () => {
|
const clickBack = () => {
|
||||||
router.push(`/`)
|
router.push(`/`);
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12 row justify-center">
|
<div class="col-12 row justify-center">
|
||||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||||
<div class="toptitle text-white col-12 row items-center">
|
<div class="toptitle text-white col-12 row items-center">
|
||||||
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="clickBack" />
|
<q-btn
|
||||||
ลาออก
|
icon="mdi-arrow-left"
|
||||||
</div>
|
unelevated
|
||||||
<div class="col-12">
|
round
|
||||||
<q-card bordered class="q-pa-md">
|
dense
|
||||||
<Table
|
flat
|
||||||
style="max-height: 80vh"
|
color="primary"
|
||||||
:rows="rows"
|
class="q-mr-sm"
|
||||||
:columns="columns"
|
@click="clickBack"
|
||||||
:filter="filter"
|
/>
|
||||||
:visible-columns="visibleColumns"
|
ลาออก
|
||||||
v-model:inputfilter="filter"
|
</div>
|
||||||
v-model:inputvisible="visibleColumns"
|
<div class="col-12">
|
||||||
:pagination="initialPagination"
|
<q-card bordered class="q-pa-md">
|
||||||
:inputShow="false"
|
<div class="q-pb-sm row">
|
||||||
:add="clickAdd"
|
<div>
|
||||||
:titleText="''"
|
<q-btn
|
||||||
>
|
size="14px"
|
||||||
<template #columns="props">
|
flat
|
||||||
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/retire/` + props.row.id)">
|
dense
|
||||||
<q-td key="no" :props="props">
|
color="blue"
|
||||||
{{ props.rowIndex + 1 }}
|
@click="clickAdd"
|
||||||
</q-td>
|
icon="mdi-plus"
|
||||||
<q-td key="placeLeave" :props="props">
|
>
|
||||||
{{ props.row.placeLeave }}
|
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||||
</q-td>
|
</q-btn>
|
||||||
<q-td key="dateStartLeave" :props="props">
|
</div>
|
||||||
{{ props.row.dateStartLeave }}
|
<q-space />
|
||||||
</q-td>
|
<div class="items-center q-gutter-sm" style="display: flex">
|
||||||
<q-td key="dateStartLeave" :props="props">
|
<!-- ค้นหาข้อความใน table -->
|
||||||
{{ props.row.dateStartLeave }}
|
<q-input
|
||||||
</q-td>
|
standout
|
||||||
<q-td key="statustext" :props="props">
|
dense
|
||||||
{{ props.row.statustext }}
|
v-model="filter"
|
||||||
</q-td>
|
ref="filterRef"
|
||||||
</q-tr>
|
outlined
|
||||||
</template>
|
debounce="300"
|
||||||
</Table>
|
placeholder="ค้นหา"
|
||||||
</q-card>
|
style="max-width: 200px"
|
||||||
</div>
|
>
|
||||||
</div>
|
<template v-slot:append>
|
||||||
</div>
|
<q-icon v-if="filter == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="filter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="filter = ''"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:filter="filter"
|
||||||
|
row-key="name"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:rows-per-page-options="[10, 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.id"
|
||||||
|
@click="router.push(`/retire/` + props.row.id)"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style></style>
|
<style></style>
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,10 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
|
||||||
/** ดึงข้อมูล */
|
/** ดึงข้อมูล */
|
||||||
function getData() {
|
function getData() {
|
||||||
http
|
http
|
||||||
.get(config.API.developmentScholarship + `/user/${profilId.value}?year=${year.value}&type=${type.value}`)
|
.get(
|
||||||
|
config.API.developmentScholarship +
|
||||||
|
`/user/${profilId.value}?year=${year.value}&type=${type.value}`
|
||||||
|
)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
rows.value = res.data.result;
|
rows.value = res.data.result;
|
||||||
})
|
})
|
||||||
|
|
@ -255,34 +258,20 @@ onMounted(async () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
|
<d-table
|
||||||
<q-table
|
|
||||||
ref="table"
|
ref="table"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:rows="rows"
|
:rows="rows"
|
||||||
:filter="filterKeyword"
|
:filter="filterKeyword"
|
||||||
row-key="id"
|
row-key="name"
|
||||||
flat
|
flat
|
||||||
bordered
|
bordered
|
||||||
:paging="true"
|
:paging="true"
|
||||||
dense
|
dense
|
||||||
hide-pagination
|
class="custom-header-table"
|
||||||
class="custom-table2"
|
|
||||||
:visible-columns="visibleColumns"
|
:visible-columns="visibleColumns"
|
||||||
v-model:pagination="pagination"
|
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
>
|
>
|
||||||
<template v-slot:pagination="scope">
|
|
||||||
<q-pagination
|
|
||||||
v-model="currentPage"
|
|
||||||
active-color="primary"
|
|
||||||
color="dark"
|
|
||||||
:max="Number(maxPage)"
|
|
||||||
size="sm"
|
|
||||||
boundary-links
|
|
||||||
direction-links
|
|
||||||
></q-pagination>
|
|
||||||
</template>
|
|
||||||
<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">
|
||||||
|
|
@ -309,7 +298,7 @@ onMounted(async () => {
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
</q-table>
|
</d-table>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue