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

Ui เครื่องราช

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-07-17 14:56:08 +07:00
parent 4b4f99f89f
commit 18d9947936
6 changed files with 951 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

266
src/modules/06_retirement/components/ListRetirement/AddList.vue Normal file
View file

@ -0,0 +1,266 @@
<script setup lang="ts">
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const {} = mixin;
const modal = ref<boolean>(false);
const columns = ref<any["columns"]>([
{
name: "index",
required: true,
label: "ลำดับ",
field: "index",
align: "left",
},
{
name: "fullname",
required: true,
label: "ชื่อ-สกุล",
field: "fullname",
align: "left",
},
{
name: "position",
required: true,
label: "ตำแหน่งในสายงาน",
field: "position",
align: "left",
},
{
name: "level",
required: true,
label: "ระดับ",
field: "level",
align: "left",
},
{
name: "affiliation",
required: true,
label: "สังกัด",
field: "affiliation",
align: "left",
},
{
name: "funtion",
required: true,
label: "",
field: "funtion",
align: "left",
},
]);
const rows = ref<any>([
{
fullname: "นายใจดี ยอดใจ",
position: "นักวิชาการพัสดุ",
level: "ปฎิบัติการ",
affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
fullname: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฎิบัติการ",
affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
fullname: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฎิบัติการ",
affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
fullname: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฎิบัติการ",
affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
fullname: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฎิบัติการ",
affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
fullname: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฎิบัติการ",
affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
fullname: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฎิบัติการ",
affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
]);
const filter = ref<string>("");
const clickAdd = () => {
$q.dialog({
title: "ยืนยันการเพิ่มข้อมูล",
message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
console.log("เพิ่มข้อมูล");
})
.onCancel(() => {})
.onDismiss(() => {});
};
const paging = ref<boolean>(true);
const pagination = ref({
sortBy: "fullname",
descending: true,
page: 1,
rowsPerPage: 10,
});
const paginationLabel = (start: number, end: number, total: number) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<q-btn
flat
round
class="text-teal-5"
icon="mdi-plus"
size="md"
@click="modal = true"
></q-btn>
<q-dialog v-model="modal">
<q-card style="width: 850px; max-width: 80vw" class="q-px-sm q-pb-md">
<q-toolbar class="q-py-md">
<q-toolbar-title class="header-text text-weight-bolder"
>เพิ่มรายชื่อ
</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="modal = false"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<div class="q-pa-md">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
v-model="filter"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</q-toolbar>
<q-table
flat
bordered
dense
:rows="rows"
:columns="columns"
row-key="name"
class="custom-header-table"
:filter="filter"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props"
><div>
<span class="row text-black">{{ col.label }}</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="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="level" :props="props">{{ props.row.level }}</q-td>
<q-td key="affiliation" :props="props">
{{ props.row.affiliation }}
</q-td>
<q-td>
<q-btn
outline
label="เพิ่ม"
class="text-teal-5"
@click="clickAdd"
/>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</q-card>
</q-dialog>
</template>
<style lang="scss">
.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;
}
/* 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>