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

ระบบลา เพิ่ม dialog ขอแก้ไข,ดูรายละเอียด,ตารางสถิติการลา

Browse source
This commit is contained in:
Tanyalak 2023-09-29 15:56:13 +07:00
parent ce05548bc5
commit 9a55a75706
4 changed files with 392 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/modules/05_leave/views/Main.vue
View file

@ -144,7 +144,7 @@
<q-card class="row col-12 items-center q-px-md q-py-sm">
<div class="text-weight-bold">สถิติการลา</div>
<q-space/>
<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" label="ตารางสถิติการลา" />
<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="data = true" label="ตารางสถิติการลา" />
</q-card>
<div bordered class="col-12 row justify-center q-px-md q-pb-md" v-for="(item,index) in itemPie" :key="index">
<q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0">
@ -187,6 +187,36 @@
</div>
</div>
</div>
<!-- modal ตารางสถิติการลา -->
<q-dialog v-model="data" persistent>
<q-card style="min-width: 85%;">
<q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
v-close-popup
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-separator />
<q-card-section class="q-p-md row">
<q-table
flat bordered
dense
:rows="rows"
:columns="columns"
row-key="name"
class="col-12"
hide-bottom
v-model:pagination="pagination"
/>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
@ -221,6 +251,106 @@ const itemPie = ref([
{text: 'ลากิจส่วนตัว', color: 'text-deep-purple', value: 80, all: '12', use: '9', remain: '3'},
{text: 'ลาพักผ่อน', color: 'text-indigo', value: 78, all: '20', use: '17', remain: '3'}
])
const data = ref(false);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:5%;",
},
{
name: "type",
align: "left",
label: "ประเภทการลา",
sortable: true,
field: "type",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "numDate",
align: "left",
label: "โควตาวันลา",
sortable: true,
field: "numDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "extend",
align: "left",
label: "ทดวันลา",
sortable: true,
field: "extend",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "use",
align: "left",
label: "ใช้ไป (%)",
sortable: true,
field: "use",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "numAll",
align: "left",
label: "จำนวนยื่นขอลา (วัน)",
sortable: true,
field: "numAll",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "numDone",
align: "left",
label: "จำนวนที่อนุมัติ (วัน)",
sortable: true,
field: "numDone",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "numNot",
align: "left",
label: "จำนวนที่ไม่อนุมัติ (วัน)",
sortable: true,
field: "numNot",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "numCancel",
align: "left",
label: "จำนวนที่ยกเลิก (วัน)",
sortable: true,
field: "numCancel",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
])
const rows = ref<any>([
{no:'1',type: 'ลาป่วย' },
{no:'2',type: 'ลากิจส่วนตัว' },
{no:'3',type: 'ลาคลอดบุตร' },
{no:'4',type: 'ลาช่วยเหลือภริยาที่คลอดบุตร' },
{no:'5',type: 'ลาพักผ่อน' },
{no:'6',type: 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ' },
{no:'7',type: 'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล' },
{no:'8',type: 'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน' },
{no:'9',type: 'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ' },
{no:'10',type: 'ลาติดตามคู่สมรส' },
{no:'11',type: 'ลาฟื้นฟูสมรรถภาพด้านอาชีพ' }
])
const pagination = ref({rowsPerPage: 11})
</script>
<style>
.borderTop{