342 lines
9.2 KiB
Vue
342 lines
9.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import AddList from "../ListRetirement/AddList.vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
|
|
const $q = useQuasar(); //ใช้ noti quasar
|
|
const mixin = useCounterMixin();
|
|
const {} = mixin;
|
|
|
|
const columns = ref<any["columns"]>([
|
|
{
|
|
name: "index",
|
|
required: true,
|
|
label: "ลำดับ",
|
|
field: "index",
|
|
align: "left",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "fixname",
|
|
align: "left",
|
|
label: "คำนำหน้านาม",
|
|
field: "fixname",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "name",
|
|
align: "left",
|
|
label: "ชื่อ - นามสกุล",
|
|
field: "name",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "brand",
|
|
align: "left",
|
|
label: "สังกัด",
|
|
field: "brand",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "positionType",
|
|
align: "left",
|
|
label: "ตำแหน่ง",
|
|
sublabel: "ประเภท",
|
|
field: "positionType",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "positionManager",
|
|
align: "left",
|
|
label: "ตำแหน่ง ",
|
|
sublabel: "ทางการบริหาร",
|
|
field: "positionManager",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "positionLavel",
|
|
align: "left",
|
|
label: "ตำแหน่ง ",
|
|
sublabel: "ในสายงาน/ระดับ",
|
|
field: "positionLavel",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "positionNumber",
|
|
align: "left",
|
|
label: "ตำแหน่ง ",
|
|
sublabel: "เลขที่",
|
|
field: "positionNumber",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "govGroup",
|
|
align: "left",
|
|
label: "ส่วนราชการ ",
|
|
sublabel: "ระดับฝ่าย/กลุ่มงาน/ส่วน",
|
|
field: "govGroup",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "govOffice",
|
|
align: "left",
|
|
label: "ส่วนราชการ ",
|
|
sublabel: "ระดับสถาบัน/สำนักงาน/กอง",
|
|
field: "govOffice",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "bureau",
|
|
align: "left",
|
|
label: "หน่วยงาน",
|
|
field: "bureau",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "button",
|
|
align: "left",
|
|
label: "",
|
|
field: "",
|
|
},
|
|
]);
|
|
const rows = ref<any>([
|
|
{
|
|
fixname: "นางสาว",
|
|
name: "รัชภรณ์ ภัคดี",
|
|
brand: "ฝ่ายบริหารทั่วไป",
|
|
positionType: "บริหาร",
|
|
positionManager: "จัดการทั่วไป",
|
|
positionLavel: "ชำนาญการ",
|
|
positionNumber: "กบห.2",
|
|
govGroup: "ฝ่ายบริหารทั่วไป",
|
|
govOffice: "ฝ่ายบริหารทั่วไป",
|
|
bureau: "บริหาร",
|
|
},
|
|
{
|
|
fixname: "นางสาว",
|
|
name: "รัชภรณ์ ภัคดี",
|
|
brand: "ฝ่ายบริหารทั่วไป",
|
|
positionType: "บริหาร",
|
|
positionManager: "จัดการทั่วไป",
|
|
positionLavel: "ชำนาญการ",
|
|
positionNumber: "กบห.2",
|
|
govGroup: "ฝ่ายบริหารทั่วไป",
|
|
govOffice: "ฝ่ายบริหารทั่วไป",
|
|
bureau: "บริหาร",
|
|
},
|
|
{
|
|
fixname: "นางสาว",
|
|
name: "รัชภรณ์ ภัคดี",
|
|
brand: "ฝ่ายบริหารทั่วไป",
|
|
positionType: "บริหาร",
|
|
positionManager: "จัดการทั่วไป",
|
|
positionLavel: "ชำนาญการ",
|
|
positionNumber: "กบห.2",
|
|
govGroup: "ฝ่ายบริหารทั่วไป",
|
|
govOffice: "ฝ่ายบริหารทั่วไป",
|
|
bureau: "บริหาร",
|
|
},
|
|
]);
|
|
const visibleColumns = ref<any>([
|
|
"fixname",
|
|
"name",
|
|
"brand",
|
|
"positionType",
|
|
"positionManager",
|
|
"positionLavel",
|
|
"positionNumber",
|
|
"govGroup",
|
|
"govOffice",
|
|
"bureau",
|
|
"button",
|
|
]);
|
|
const filter = ref<string>("");
|
|
|
|
const clickDelete = () => {
|
|
$q.dialog({
|
|
title: "ยืนยันการลบข้อมูล",
|
|
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
|
cancel: {
|
|
flat: true,
|
|
color: "negative",
|
|
},
|
|
persistent: true,
|
|
})
|
|
.onOk(async () => {
|
|
console.log("ลบข้อมูล");
|
|
})
|
|
.onCancel(() => {})
|
|
.onDismiss(() => {});
|
|
};
|
|
const backHistory = () => {
|
|
window.history.back();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toptitle text-dark col-12 row items-center">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="backHistory"
|
|
/>
|
|
รายชื่อผู้เกษียณอายุราชการ
|
|
</div>
|
|
<div>
|
|
<q-card class="col-12 q-pa-md">
|
|
<q-toolbar>
|
|
<AddList />
|
|
<q-space />
|
|
<q-tabs shrink>
|
|
<q-input
|
|
borderless
|
|
outlined
|
|
dense
|
|
debounce="300"
|
|
v-model="filter"
|
|
placeholder="ค้นหา"
|
|
style="max-width: 200px"
|
|
class="q-ml-sm"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon name="search" />
|
|
</template>
|
|
</q-input>
|
|
<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"
|
|
class="gt-xs q-ml-sm"
|
|
/>
|
|
</q-tabs>
|
|
</q-toolbar>
|
|
|
|
<div class="q-pa-md">
|
|
<q-table
|
|
flat
|
|
bordered
|
|
:rows="rows"
|
|
:columns="columns"
|
|
row-key="name"
|
|
class="custom-header-table"
|
|
hide-bottom
|
|
:filter="filter"
|
|
:visible-columns="visibleColumns"
|
|
no-data-label="ไม่มีข้อมูล"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div class="text-grey-7 text-weight-medium">
|
|
<span class="row">{{ col.label }}</span>
|
|
<span class="row" style="font-size: 12px">{{
|
|
col.sublabel
|
|
}}</span>
|
|
</div>
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props" class="cursor-pointer">
|
|
<q-td>{{ props.rowIndex + 1 }}</q-td>
|
|
<q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td>
|
|
<q-td key="name" :props="props">{{ props.row.name }}</q-td>
|
|
<q-td key="brand" :props="props">{{ props.row.brand }}</q-td>
|
|
<q-td key="positionType" :props="props">{{
|
|
props.row.positionType
|
|
}}</q-td>
|
|
<q-td key="positionManager" :props="props">{{
|
|
props.row.positionManager
|
|
}}</q-td>
|
|
<q-td key="positionLavel" :props="props">{{
|
|
props.row.positionLavel
|
|
}}</q-td>
|
|
<q-td key="positionNumber" :props="props">{{
|
|
props.row.positionNumber
|
|
}}</q-td>
|
|
<q-td key="govGroup" :props="props">{{
|
|
props.row.govGroup
|
|
}}</q-td>
|
|
<q-td key="govOffice" :props="props">{{
|
|
props.row.govOffice
|
|
}}</q-td>
|
|
<q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
|
|
<q-td>
|
|
<q-btn
|
|
flat
|
|
round
|
|
class="text-red-14"
|
|
icon="mdi-delete"
|
|
size="md"
|
|
@click="clickDelete"
|
|
/>
|
|
<q-btn
|
|
flat
|
|
round
|
|
class="text-teal-5"
|
|
icon="mdi-eye"
|
|
size="md"
|
|
/>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scope>
|
|
.custom-header-table {
|
|
max-height: 64vh;
|
|
|
|
.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;
|
|
}
|
|
.q-table thead tr:last-child th {
|
|
top: 48px;
|
|
}
|
|
.q-table thead tr:first-child th {
|
|
top: 0;
|
|
}
|
|
}
|
|
</style>
|