Merge commit 'afa42c0133' into develop
This commit is contained in:
Tanyalak
commit
87ecd70e03
32 changed files with 3536 additions and 426 deletions
88
src/components/Table.vue
Normal file
88
src/components/Table.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<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">
|
||||
<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>
|
||||
|
|
@ -221,9 +221,101 @@ const menuList = readonly<any[]>([
|
|||
label: "เครื่องราชอิสริยาภรณ์",
|
||||
path: "insignia",
|
||||
role: "insignia",
|
||||
children: [
|
||||
{
|
||||
key: 8.1,
|
||||
label: "รายการเสนอขอ" /* รายชื่อผู้สอบผ่าน */,
|
||||
path: "insigniaProposals",
|
||||
role: "insignia",
|
||||
},
|
||||
{
|
||||
key: 8.2,
|
||||
label: "จัดทำรายชื่อข้าราชการสามัญ" /* รายชื่อผู้สอบผ่าน */,
|
||||
path: "insigniaNameList",
|
||||
role: "insignia",
|
||||
},
|
||||
{
|
||||
key: 8.3,
|
||||
label: "อนุมัติรายชื่อข้าราชการสามัญ" /* รายชื่อผู้สอบผ่าน */,
|
||||
path: "insigniaNameApprove",
|
||||
role: "insignia",
|
||||
},
|
||||
{
|
||||
key: 8.4,
|
||||
label:
|
||||
"บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์" /* รายชื่อผู้สอบผ่าน */,
|
||||
path: "insigniaRecord",
|
||||
role: "insignia",
|
||||
},
|
||||
{
|
||||
key: 8.5,
|
||||
label: "รายงาน" /* รายชื่อผู้สอบผ่าน */,
|
||||
path: "insigniaReport",
|
||||
role: "insignia",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 9,
|
||||
icon: "mdi-medal-outline",
|
||||
activeIcon: "mdi-medal",
|
||||
label: "เหรียญจักรพรรดิมาลา",
|
||||
path: "coin",
|
||||
role: "coin",
|
||||
children: [
|
||||
{
|
||||
key: 9.1,
|
||||
label: "รายการเสนอขอ",
|
||||
path: "coinProposals",
|
||||
role: "coin",
|
||||
},
|
||||
{
|
||||
key: 9.2,
|
||||
label: "จัดการคำขอ",
|
||||
path: "coinManage",
|
||||
role: "coin",
|
||||
},
|
||||
{
|
||||
key: 9.3,
|
||||
label: "บันทึกผลการได้รับพระราชทานเหรียญจักรพรรดิมาลา",
|
||||
path: "coinReceive",
|
||||
role: "coin",
|
||||
},
|
||||
{
|
||||
key: 9.4,
|
||||
label: "บันทึกผลการจ่ายใบกำกับ",
|
||||
path: "coinPayment",
|
||||
role: "coin",
|
||||
},
|
||||
{
|
||||
key: 9.5,
|
||||
label:
|
||||
"รายชื่อที่ยื่นคำร้องขอแก้ไขข้อมูลการขอพระราชทานเหรียญจักรพรรดิมาลา",
|
||||
path: "coinRequest",
|
||||
role: "coin",
|
||||
},
|
||||
{
|
||||
key: 9.6,
|
||||
label: "ประวัติการยื่นขอ",
|
||||
path: "coinHistory",
|
||||
role: "coin",
|
||||
},
|
||||
{
|
||||
key: 9.7,
|
||||
label: "จัดสรรเหรียญตรา",
|
||||
path: "coinAllocate",
|
||||
role: "coin",
|
||||
},
|
||||
{
|
||||
key: 9.8,
|
||||
label: "รายงาน",
|
||||
path: "coinReport",
|
||||
role: "coin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 10,
|
||||
icon: "o_contact_page",
|
||||
activeIcon: "contact_page",
|
||||
label: "ทะเบียนประวัติลูกจ้าง",
|
||||
|
|
|
|||
|
|
@ -70,6 +70,11 @@ app.component(
|
|||
defineAsyncComponent(() => import("@/components/Selector.vue"))
|
||||
);
|
||||
|
||||
app.component(
|
||||
"d-table",
|
||||
defineAsyncComponent(() => import("@/components/Table.vue"))
|
||||
);
|
||||
|
||||
app.config.globalProperties.$http = http;
|
||||
|
||||
app.mount("#app");
|
||||
|
|
|
|||
|
|
@ -534,7 +534,7 @@ const OriginalDataFetch = async () => {
|
|||
|
||||
// ดูรายการหน้าต่อไป
|
||||
const redirectToPage = (id?: number) => {
|
||||
router.push({ name: "placementDetail" });
|
||||
// router.push({ name: "placementDetail" });
|
||||
router.push(`/placement/order/detail`);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -46,9 +46,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
|
|
@ -56,9 +54,6 @@
|
|||
row-key="name"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
class="custom-header-table"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
|
|
@ -70,20 +65,6 @@
|
|||
</template>
|
||||
|
||||
<template v-slot:body-selection="scope">
|
||||
<!-- <q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
:model-value="scope.selected"
|
||||
@update:model-value="
|
||||
(val, evt) => {
|
||||
Object.getOwnPropertyDescriptor(scope, 'selected').set(
|
||||
val,
|
||||
evt
|
||||
);
|
||||
}
|
||||
"
|
||||
/> -->
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
|
|
@ -97,57 +78,13 @@
|
|||
<div v-if="props.col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<!-- <div v-else-if="props.col.name == 'educate'">
|
||||
<q-select
|
||||
:class="getClass(true)"
|
||||
hide-bottom-space
|
||||
multiple
|
||||
:outlined="true"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!true"
|
||||
:borderless="!true"
|
||||
v-model="props.value"
|
||||
:rules="[(val:any) => !!val || `${'กรุณาเลือกวุฒิการศึกษา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกวุฒิการศึกษา'}`]"
|
||||
:label="`${'เลือกวุฒิการศึกษา'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="[]"
|
||||
option-value="id"
|
||||
input-debounce="0"
|
||||
color="primary"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="cast_for_education" color="primary" />
|
||||
</template>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-black">
|
||||
ไม่พบข้อมูลที่ค้นหา
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
|
||||
<div v-else @click="click(props)">
|
||||
{{ props.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<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>
|
||||
</q-table>
|
||||
</d-table>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||
|
|
@ -230,7 +167,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const rows = [
|
||||
const rows = ref<any>([
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางนัทธ์ เหล่าสกุล",
|
||||
|
|
@ -297,7 +234,7 @@ const rows = [
|
|||
idcard: "6598455632145",
|
||||
educate: "ปริญญาตรี",
|
||||
},
|
||||
];
|
||||
]);
|
||||
const selected = ref([]);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
|
|
@ -332,13 +269,6 @@ const selectData = (row: any) => {};
|
|||
|
||||
const refresh = () => {};
|
||||
|
||||
const paginationLabel = (start: number, end: number, total: number) => {
|
||||
// if (props.paging == true)
|
||||
// return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
|
||||
// else
|
||||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
filter.value = "";
|
||||
|
|
@ -352,33 +282,4 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
.custom-header-table {
|
||||
.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>
|
||||
<style lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -46,18 +46,12 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
class="custom-header-table"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -127,19 +121,7 @@
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<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>
|
||||
</q-table>
|
||||
</d-table>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||
|
|
@ -246,10 +228,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
<d-table
|
||||
:rows="rowsModal"
|
||||
:columns="columnsModal"
|
||||
:visible-columns="visibleColumnsModal"
|
||||
|
|
@ -257,9 +236,6 @@
|
|||
row-key="name"
|
||||
selection="multiple"
|
||||
v-model:selected="selectedModal"
|
||||
class="custom-header-table"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="paginationModal"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
|
|
@ -304,19 +280,7 @@
|
|||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="paginationModal.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
@ -717,34 +681,4 @@ const onSelected = async (id: string) => {
|
|||
|
||||
const deleteData = async (id: string) => {};
|
||||
</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>
|
||||
<style lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ const loadTreeData = async () => {
|
|||
};
|
||||
|
||||
function filterByPersonIdNull(obj: any) {
|
||||
if (obj.name === null) {
|
||||
if (obj.name === null && obj.isCondition != true) {
|
||||
return true;
|
||||
}
|
||||
if (obj.children && obj.children.length > 0) {
|
||||
|
|
|
|||
266
src/modules/06_retirement/components/ListRetirement/AddList.vue
Normal file
266
src/modules/06_retirement/components/ListRetirement/AddList.vue
Normal 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>
|
||||
|
|
@ -0,0 +1,342 @@
|
|||
<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>
|
||||
|
|
@ -3,6 +3,8 @@
|
|||
*/
|
||||
|
||||
const Main = () => import("@/modules/06_retirement/views/Main.vue");
|
||||
const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
|
||||
|
||||
|
||||
export default [
|
||||
{
|
||||
|
|
@ -15,4 +17,14 @@ export default [
|
|||
Role: "retirement",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/retirement/list",
|
||||
name: "retirement/list",
|
||||
component: Listretirement,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [7.1],
|
||||
Role: "retirement",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<q-tab name="employee" label="ลูกจ้างประจำ" />
|
||||
</q-tabs>
|
||||
</div>
|
||||
<q-separator/>
|
||||
<q-separator />
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div class="row col-12">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
style="min-width: 150px;"
|
||||
style="min-width: 150px"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
<div>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-tr :props="props" class="cursor-pointer" @click="nextPage">
|
||||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
|
|
@ -178,7 +178,9 @@ import type {
|
|||
FormMainProbation2,
|
||||
} from "@/modules/05_placement/interface/request/Main";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const modal = ref<boolean>(false);
|
||||
const pagination = ref({
|
||||
|
|
@ -334,6 +336,7 @@ const clickDelete = (id: string) => {
|
|||
|
||||
const clickAdd = () => {
|
||||
// modal.value = true;
|
||||
router.push("/retirement/list");
|
||||
};
|
||||
const clickClose = async () => {
|
||||
modal.value = false;
|
||||
|
|
@ -366,6 +369,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
const nextPage = () => {
|
||||
router.push("/retirement/list");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
|
|
|
|||
175
src/modules/07_insignia/components/1_Proposals/addProposals.vue
Normal file
175
src/modules/07_insignia/components/1_Proposals/addProposals.vue
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
<div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-separator />
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-10"
|
||||
dense
|
||||
outlined
|
||||
v-model="roundInsig"
|
||||
label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
|
||||
/>
|
||||
<q-input
|
||||
class="col-2"
|
||||
dense
|
||||
outlined
|
||||
v-model="year"
|
||||
label="ปีที่เสนอ"
|
||||
/>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
class="col-xs-12 col-sm-5"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="col-xs-12 col-sm-5"
|
||||
:model-value="
|
||||
dateStart != null ? date2Thai(dateStart) : null
|
||||
"
|
||||
:label="`${'วันเริ่มต้น'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateEnd"
|
||||
class="col-xs-12 col-sm-5"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="col-xs-12 col-sm-4"
|
||||
:model-value="dateEnd != null ? date2Thai(dateEnd) : null"
|
||||
:label="`${'วันสิ้นสุด'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-2"
|
||||
dense
|
||||
outlined
|
||||
v-model="datelast"
|
||||
label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
|
||||
/>
|
||||
<q-file
|
||||
class="col-xs-12 col-sm-10"
|
||||
outlined
|
||||
dense
|
||||
v-model="files"
|
||||
label="อัปโหลดเอกสารประกอบ"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar";
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const dateStart = ref<any>(new Date());
|
||||
const dateEnd = ref<any>(new Date());
|
||||
|
||||
const roundInsig = ref<string>("");
|
||||
const year = ref<string>("");
|
||||
const datelast = ref<string>("");
|
||||
|
||||
const routeName = router.currentRoute.value.name;
|
||||
</script>
|
||||
362
src/modules/07_insignia/components/1_Proposals/listProposals.vue
Normal file
362
src/modules/07_insignia/components/1_Proposals/listProposals.vue
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div>
|
||||
<q-btn
|
||||
@click="clickAdd()"
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
<q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
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>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</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="col-xs-12 col-sm-3 col-md-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="Order"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:visible-columns="visibleColumns"
|
||||
: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">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="round" :props="props">
|
||||
{{ props.row.round }}
|
||||
</q-td>
|
||||
<q-td key="year" :props="props">
|
||||
{{ props.row.year }}
|
||||
</q-td>
|
||||
<q-td key="startDate" :props="props">
|
||||
{{ props.row.startDate }}
|
||||
</q-td>
|
||||
<q-td key="endDate" :props="props">
|
||||
{{ props.row.endDate }}
|
||||
</q-td>
|
||||
<q-td key="status" :props="props">
|
||||
<q-icon
|
||||
v-if="props.row.status == 'ยังไม่ได้เสนอ'"
|
||||
name="mdi-close"
|
||||
color="grey-5"
|
||||
class="text-h5"
|
||||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
name="mdi-check"
|
||||
color="positive"
|
||||
class="text-h5"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="light-blue-8"
|
||||
@click.stop.prevent="clickProposals(props.row.id)"
|
||||
icon="mdi-file-download"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
@click="clickDelete(props.row.id)"
|
||||
icon="mdi-delete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<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>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import router from "@/router";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
|
||||
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const modal = ref<boolean>(false);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"round",
|
||||
"year",
|
||||
"startDate",
|
||||
"endDate",
|
||||
"status",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "round",
|
||||
align: "left",
|
||||
label: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "year",
|
||||
align: "left",
|
||||
label: "ปีที่เสนอ",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "startDate",
|
||||
align: "left",
|
||||
label: "วันที่เริ่มต้น",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "endDate",
|
||||
align: "left",
|
||||
label: "วันที่สิ้นสุด",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "institution",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<FormProprsalsRound[]>([
|
||||
{
|
||||
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
|
||||
year: "2566",
|
||||
startDate: "2566",
|
||||
endDate: "31 พ.ค. 2566",
|
||||
status: "เสนอเเล้ว",
|
||||
},
|
||||
{
|
||||
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
|
||||
year: "2566",
|
||||
startDate: "2566",
|
||||
endDate: "31 พ.ค. 2566",
|
||||
status: "เสนอเเล้ว",
|
||||
},
|
||||
{
|
||||
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
|
||||
year: "2566",
|
||||
startDate: "2566",
|
||||
endDate: "31 พ.ค. 2566",
|
||||
status: "เสนอเเล้ว",
|
||||
},
|
||||
{
|
||||
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
|
||||
year: "2566",
|
||||
startDate: "2566",
|
||||
endDate: "31 พ.ค. 2566",
|
||||
status: "ยังไม่ได้เสนอ",
|
||||
},
|
||||
{
|
||||
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
|
||||
year: "2566",
|
||||
startDate: "2566",
|
||||
endDate: "31 พ.ค. 2566",
|
||||
status: "เสนอเเล้ว",
|
||||
},
|
||||
]);
|
||||
|
||||
// หัวตาราง2
|
||||
const clickDelete = (id: string) => {
|
||||
$q.dialog({
|
||||
title: "ยืนยันการลบข้อมูล",
|
||||
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(async () => {})
|
||||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
};
|
||||
|
||||
const clickAdd = () => {
|
||||
router.push({ name: "roundAdd" });
|
||||
};
|
||||
|
||||
// ค้นหาในตาราง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const filterKeyword2 = ref<string>("");
|
||||
const filterRef2 = ref<any>(null);
|
||||
const resetFilter2 = () => {
|
||||
filterKeyword2.value = "";
|
||||
filterRef2.value.focus();
|
||||
};
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.filter-card {
|
||||
background-color: #f1f1f1b0;
|
||||
}
|
||||
|
||||
.toggle-expired-account {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 150%;
|
||||
color: #35373c;
|
||||
}
|
||||
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
|
||||
.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>
|
||||
516
src/modules/07_insignia/components/Coin.vue
Normal file
516
src/modules/07_insignia/components/Coin.vue
Normal file
|
|
@ -0,0 +1,516 @@
|
|||
<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="router.go(-1)"
|
||||
/> -->
|
||||
ประวัติการยื่นขอพระราชทานเหรียญจักรพรรดิมาลา
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
align="left"
|
||||
class="bg-white text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
>
|
||||
<q-tab name="yes" label="คนที่ยื่นขอ" />
|
||||
<q-tab name="no" label="คนที่ไม่ยื่นขอ" />
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<div class="q-py-md q-px-lg">
|
||||
<!-- <div>
|
||||
<label class="q-mr-sm">รอบ</label>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
de
|
||||
color="grey"
|
||||
icon="mdi-menu-left"
|
||||
:class="getArrow(arrow)"
|
||||
@click="clickRound"
|
||||
/>
|
||||
</div>
|
||||
<Transition>
|
||||
<div v-if="arrow" class="bg-base rounded-borders q-pa-md">
|
||||
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateGoverment"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker bg-white"
|
||||
:model-value="
|
||||
dateGoverment != null ? date2Thai(dateGoverment) : null
|
||||
"
|
||||
:label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateReceiver"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker bg-white"
|
||||
:model-value="
|
||||
dateReceiver != null ? date2Thai(dateReceiver) : null
|
||||
"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="issue"
|
||||
:label="`${'ฉบับ'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="book"
|
||||
:label="`${'เล่มที่'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="volume"
|
||||
:label="`${'เล่ม'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="section"
|
||||
:label="`${'ตอนที่'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-file
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
v-model="government"
|
||||
label="ราชกิจจานุเบกษา"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-file
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
v-model="document"
|
||||
label="เอกสารประกอบ"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition> -->
|
||||
<div :class="marginTop(arrow)">
|
||||
<div class="col-12 row q-pb-sm items-center">
|
||||
<selector
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="capYears"
|
||||
hide-bottom-space
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="capYearsOption"
|
||||
option-value="id"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'capYearsOption'
|
||||
) "
|
||||
/>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
>
|
||||
<template v-slot:body-cell="props">
|
||||
<q-td :props="props">
|
||||
<div v-if="props.col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ props.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
// import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import type { QTableProps, QInput } from "quasar";
|
||||
|
||||
// const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const tab = ref<string>("yes");
|
||||
const arrow = ref<boolean>(false);
|
||||
|
||||
// const dateGoverment = ref<Date>(new Date());
|
||||
// const dateReceiver = ref<Date>(new Date());
|
||||
// const issue = ref<string>("");
|
||||
// const book = ref<string>("");
|
||||
// const volume = ref<string>("");
|
||||
// const section = ref<string>("");
|
||||
// const government = ref<any>(null);
|
||||
// const document = ref<any>(null);
|
||||
|
||||
const capYears = ref<string>("");
|
||||
const capYearsOption = ref<DataOption[]>([]);
|
||||
const capYearsOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"cardid",
|
||||
"name",
|
||||
"position",
|
||||
"range",
|
||||
"salary",
|
||||
"zone",
|
||||
"school",
|
||||
"date",
|
||||
]);
|
||||
const filterRef = ref<QInput>();
|
||||
const filter = ref<string>("");
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
field: "no",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "cardid",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
field: "cardid",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ - นามสกุล",
|
||||
field: "name",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
field: "position",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "range",
|
||||
align: "left",
|
||||
label: "อันดับ",
|
||||
field: "range",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "salary",
|
||||
align: "left",
|
||||
label: "เงินเดือน",
|
||||
field: "salary",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "zone",
|
||||
align: "left",
|
||||
label: "เขต",
|
||||
field: "zone",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "school",
|
||||
align: "left",
|
||||
label: "โรงเรียน",
|
||||
field: "school",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "วันที่ยื่นขอ",
|
||||
field: "date",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const rows = ref<any>([
|
||||
{
|
||||
no: "1",
|
||||
cardid: "1XXXXXXXXXXXX",
|
||||
name: "นางสาวรัชภรณ์ ภักดี",
|
||||
position: "กกก",
|
||||
range: "1",
|
||||
salary: "XXXXXX",
|
||||
zone: "1",
|
||||
school: "โรงเรียน",
|
||||
date: date2Thai(new Date()),
|
||||
},
|
||||
{
|
||||
no: "2",
|
||||
cardid: "1XXXXXXXXXXXX",
|
||||
name: "นางสาวรัชภรณ์ ภักดี",
|
||||
position: "กกก",
|
||||
range: "1",
|
||||
salary: "XXXXXX",
|
||||
zone: "1",
|
||||
school: "โรงเรียน",
|
||||
date: date2Thai(new Date()),
|
||||
},
|
||||
{
|
||||
no: "3",
|
||||
cardid: "1XXXXXXXXXXXX",
|
||||
name: "นางสาวรัชภรณ์ ภักดี",
|
||||
position: "กกก",
|
||||
range: "1",
|
||||
salary: "XXXXXX",
|
||||
zone: "1",
|
||||
school: "โรงเรียน",
|
||||
date: date2Thai(new Date()),
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
const op2: DataOption[] = [
|
||||
{ id: "1", name: "2566" },
|
||||
{ id: "2", name: "2565" },
|
||||
{ id: "3", name: "2564" },
|
||||
];
|
||||
|
||||
capYearsOption.value = op2;
|
||||
capYearsOptionFilter.value = op2;
|
||||
});
|
||||
|
||||
const clickRound = () => {
|
||||
arrow.value = !arrow.value;
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
filter.value = "";
|
||||
filterRef.value!.focus();
|
||||
};
|
||||
|
||||
const filterSelector = (val: any, update: Function, filtername: string) => {
|
||||
switch (filtername) {
|
||||
case "capYearsOption":
|
||||
update(() => {
|
||||
capYearsOption.value = capYearsOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// const getArrow = (val: boolean) => {
|
||||
// return {
|
||||
// "arrow cursor-pointer": !val,
|
||||
// "arrow-active cursor-pointer": val,
|
||||
// };
|
||||
// };
|
||||
|
||||
const marginTop = (val: boolean) => {
|
||||
return {
|
||||
"": !val,
|
||||
"q-mt-md": val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.arrow {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.arrow-active {
|
||||
transition: transform 0.5s;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.bg-base {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
502
src/modules/07_insignia/components/RecordInsignia.vue
Normal file
502
src/modules/07_insignia/components/RecordInsignia.vue
Normal file
|
|
@ -0,0 +1,502 @@
|
|||
<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="router.go(-1)"
|
||||
/> -->
|
||||
บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
align="left"
|
||||
class="bg-white text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
>
|
||||
<q-tab name="hight" label="ขั้นสายสะพาน" />
|
||||
<q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<div class="q-py-md q-px-lg">
|
||||
<div>
|
||||
<label class="q-mr-sm">รอบ</label>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
de
|
||||
color="grey"
|
||||
icon="mdi-menu-left"
|
||||
:class="getArrow(arrow)"
|
||||
@click="clickRound"
|
||||
/>
|
||||
</div>
|
||||
<Transition>
|
||||
<div v-if="arrow" class="bg-base rounded-borders q-pa-md">
|
||||
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateGoverment"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker bg-white"
|
||||
:model-value="
|
||||
dateGoverment != null ? date2Thai(dateGoverment) : null
|
||||
"
|
||||
:label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateReceiver"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker bg-white"
|
||||
:model-value="
|
||||
dateReceiver != null ? date2Thai(dateReceiver) : null
|
||||
"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="issue"
|
||||
:label="`${'ฉบับ'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="book"
|
||||
:label="`${'เล่มที่'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="volume"
|
||||
:label="`${'เล่ม'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="section"
|
||||
:label="`${'ตอนที่'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-file
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
v-model="government"
|
||||
label="ราชกิจจานุเบกษา"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-file
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
v-model="document"
|
||||
label="เอกสารประกอบ"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
<div :class="marginTop(arrow)">
|
||||
<div class="col-12 row q-pb-sm items-center">
|
||||
<selector
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="selectType"
|
||||
hide-bottom-space
|
||||
:label="`${'ประเภทเครื่องราชฯ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="selectTypeOption"
|
||||
option-value="id"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'selectTypeOption'
|
||||
) "
|
||||
/>
|
||||
<selector
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="selectStatus"
|
||||
hide-bottom-space
|
||||
:label="`${'สถานะการบันทึก'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="selectStatusOption"
|
||||
option-value="id"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'selectStatusOption'
|
||||
) "
|
||||
/>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
>
|
||||
<template v-slot:body-cell="props">
|
||||
<q-td :props="props">
|
||||
<div v-if="props.col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ props.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
// import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import type { QTableProps, QInput } from "quasar";
|
||||
|
||||
// const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const tab = ref<string>("hight");
|
||||
const arrow = ref<boolean>(false);
|
||||
|
||||
const dateGoverment = ref<Date>(new Date());
|
||||
const dateReceiver = ref<Date>(new Date());
|
||||
const issue = ref<string>("");
|
||||
const book = ref<string>("");
|
||||
const volume = ref<string>("");
|
||||
const section = ref<string>("");
|
||||
const government = ref<any>(null);
|
||||
const document = ref<any>(null);
|
||||
|
||||
const selectStatus = ref<string>("");
|
||||
const selectStatusOption = ref<DataOption[]>([]);
|
||||
const selectStatusOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const selectType = ref<string>("");
|
||||
const selectTypeOption = ref<DataOption[]>([]);
|
||||
const selectTypeOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"status",
|
||||
"name",
|
||||
"type",
|
||||
"page",
|
||||
"number",
|
||||
]);
|
||||
const filterRef = ref<QInput>();
|
||||
const filter = ref<string>("");
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
field: "no",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
field: "status",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ - สกุล",
|
||||
field: "name",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
align: "left",
|
||||
label: "ประเภทเครื่องราชฯ",
|
||||
field: "type",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "page",
|
||||
align: "left",
|
||||
label: "หน้าในราชกิจนุเบกษา",
|
||||
field: "page",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "number",
|
||||
align: "left",
|
||||
label: "ลำดับที่ในราชกิจจานุเบกษา",
|
||||
field: "number",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const rows = ref<any>([
|
||||
{
|
||||
no: "1",
|
||||
status: "รอบันทึกข้อมูล",
|
||||
name: "นางสาวรัชภรณ์ ภักดี",
|
||||
type: "ทั้งหมด",
|
||||
page: "8",
|
||||
number: "11",
|
||||
},
|
||||
{
|
||||
no: "2",
|
||||
status: "บันทึกลง ก.พ. 7 แล้ว",
|
||||
name: "นางสาวภาพรรณ ลออ",
|
||||
type: "ทั้งหมด",
|
||||
page: "12",
|
||||
number: "11",
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
const op1: DataOption[] = [{ id: "1", name: "ทั้งหมด" }];
|
||||
const op2: DataOption[] = [
|
||||
{ id: "1", name: "ทั้งหมด" },
|
||||
{ id: "2", name: "รอบันทึกข้อมูล" },
|
||||
{ id: "3", name: "บันทึกลง ก.พ. 7 แล้ว" },
|
||||
];
|
||||
selectTypeOption.value = op1;
|
||||
selectTypeOptionFilter.value = op1;
|
||||
selectStatusOption.value = op2;
|
||||
selectStatusOptionFilter.value = op2;
|
||||
});
|
||||
|
||||
const clickRound = () => {
|
||||
arrow.value = !arrow.value;
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
filter.value = "";
|
||||
filterRef.value!.focus();
|
||||
};
|
||||
|
||||
const filterSelector = (val: any, update: Function, filtername: string) => {
|
||||
switch (filtername) {
|
||||
case "selectTypeOption":
|
||||
update(() => {
|
||||
selectTypeOption.value = selectTypeOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "selectStatusOption":
|
||||
update(() => {
|
||||
selectStatusOption.value = selectStatusOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const getArrow = (val: boolean) => {
|
||||
return {
|
||||
"arrow cursor-pointer": !val,
|
||||
"arrow-active cursor-pointer": val,
|
||||
};
|
||||
};
|
||||
|
||||
const marginTop = (val: boolean) => {
|
||||
return {
|
||||
"": !val,
|
||||
"q-mt-md": val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.arrow {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.arrow-active {
|
||||
transition: transform 0.5s;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.bg-base {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
41
src/modules/07_insignia/components/report/ReportView.vue
Normal file
41
src/modules/07_insignia/components/report/ReportView.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รางงานเครื่องราชอิสริยาภรณ์
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md">
|
||||
<q-item to="/insignia/report/report-01" tag="q-item" dense>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-file" size="xs" />
|
||||
</q-item-section>
|
||||
<q-item-section class="text-dark">
|
||||
รายงาน ขร.1 - ขร.4
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item to="/insignia/report/report-02" dense>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-file" size="xs" />
|
||||
</q-item-section>
|
||||
<q-item-section class="text-dark">
|
||||
รายงานผลการจ่ายใบกำกับ
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item to="/insignia/report/report-03" dense>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="primary" name="mdi-file" size="xs" />
|
||||
</q-item-section>
|
||||
<q-item-section class="text-dark"
|
||||
>รายชื่อข้าราชการสามัญฯ ที่ได้รับ/ไม่ได้รับใบกำกับ
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope></style>
|
||||
280
src/modules/07_insignia/components/report/Report_01.vue
Normal file
280
src/modules/07_insignia/components/report/Report_01.vue
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
|
||||
const pdfSrc = ref<any>();
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const dialog = ref<boolean>(false);
|
||||
onMounted(async () => {
|
||||
const pdfData = usePDF(
|
||||
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
}, 1000);
|
||||
console.log(pdfData);
|
||||
});
|
||||
|
||||
const splitterModel = ref(14);
|
||||
const selectReport = ref<any>({ id: 1, name: "รายงานขร.1" });
|
||||
const optionsReport = ref<any>([
|
||||
{ id: 1, name: "รายงานขร.1" },
|
||||
{ id: 2, name: "รายงานขร.2" },
|
||||
{ id: 3, name: "รายงานขร.3" },
|
||||
{ id: 4, name: "รายงานขร.4" },
|
||||
]);
|
||||
const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
|
||||
const optionsList = ref<any>([
|
||||
{ id: 1, name: "list 1" },
|
||||
{ id: 2, name: "list 2" },
|
||||
]);
|
||||
const nextPage = () => {
|
||||
if (page.value < numOfPages.value) {
|
||||
page.value++;
|
||||
}
|
||||
};
|
||||
const backPage = () => {
|
||||
if (page.value !== 1) {
|
||||
page.value--;
|
||||
}
|
||||
};
|
||||
|
||||
const backHistory = () => {
|
||||
window.history.back();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="backHistory"
|
||||
/>
|
||||
รายงาน ขร.1 - ขร.4
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md q-gutter-y-md">
|
||||
<q-toolbar style="padding: 0" >
|
||||
<q-select
|
||||
class="q-mr-sm"
|
||||
dense
|
||||
outlined
|
||||
v-model="selectReport"
|
||||
:options="optionsReport"
|
||||
:label="optionsReport.name"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="selectList"
|
||||
:options="optionsList"
|
||||
:label="optionsList.name"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
<q-space />
|
||||
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
|
||||
<q-btn outline color="primary" icon="download" label="ดาวน์โหลด" />
|
||||
<q-btn icon="mdi-eye" color="primary" label="แสดงรางงาน" />
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="mdi-fullscreen"
|
||||
@click="dialog = true"
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
horizontal
|
||||
style="
|
||||
height: 70vh;
|
||||
border: 1px solid rgb(210, 210, 210);
|
||||
border-radius: 5px;
|
||||
"
|
||||
before-class="overflow-hidden disable"
|
||||
separator-class="bg-white disabled"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="q-pa-md">
|
||||
<div class="row items-start items-center">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-left"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
class="my-auto"
|
||||
@click="backPage"
|
||||
:disable="page == 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto">
|
||||
<div class="q-pa-md flex">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-right"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
@click="nextPage"
|
||||
:disable="page === numOfPages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<div class="q-pa-md">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
<div class="q-pa-md">
|
||||
<div class="row items-start items-center">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-left"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
class="my-auto"
|
||||
@click="backPage"
|
||||
:disable="page == 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto">
|
||||
<div class="q-pa-md flex">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-right"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
@click="nextPage"
|
||||
:disable="page === numOfPages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Full Screen -->
|
||||
<q-dialog
|
||||
v-model="dialog"
|
||||
persistent
|
||||
:maximized="true"
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<q-card class="bg-white">
|
||||
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
size="12px"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
<div class="q-pa-md">
|
||||
<div class="row items-start items-center">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-left"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
class="my-auto"
|
||||
@click="backPage"
|
||||
:disable="page == 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto">
|
||||
<div class="q-pa-md flex">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-right"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
@click="nextPage"
|
||||
:disable="page === numOfPages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row items- items-center">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
</div>
|
||||
<div class="row items- items-end">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-left"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
class="my-auto"
|
||||
@click="backPage"
|
||||
:disable="page == 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto">
|
||||
<div class="q-pa-md flex">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-right"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
@click="nextPage"
|
||||
:disable="page === numOfPages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +1,9 @@
|
|||
export type {};
|
||||
interface FormProprsalsRound {
|
||||
id: number;
|
||||
name: string;
|
||||
year: number;
|
||||
startDate: number;
|
||||
endDate: number;
|
||||
status: string;
|
||||
}
|
||||
export type { FormProprsalsRound };
|
||||
|
|
|
|||
|
|
@ -3,6 +3,17 @@
|
|||
*/
|
||||
|
||||
const Main = () => import("@/modules/07_insignia/views/Main.vue");
|
||||
const ReportView = () =>
|
||||
import("../07_insignia/components/report/ReportView.vue");
|
||||
const report_01 = () =>
|
||||
import("../07_insignia/components/report/Report_01.vue");
|
||||
const RecordInsignia = () =>
|
||||
import("@/modules/07_insignia/components/RecordInsignia.vue");
|
||||
const Coin = () => import("@/modules/07_insignia/components/Coin.vue");
|
||||
const insigniaProposals = () =>
|
||||
import("@/modules/07_insignia/components/1_Proposals/listProposals.vue");
|
||||
const roundAdd = () =>
|
||||
import("@/modules/07_insignia/components/1_Proposals/addProposals.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
|
|
@ -11,7 +22,68 @@ export default [
|
|||
component: Main,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [7],
|
||||
Key: [8],
|
||||
Role: "insignia",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/insignia/round-proposals",
|
||||
name: "insigniaProposals",
|
||||
component: insigniaProposals,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [8.1],
|
||||
Role: "insignia",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/insignia/round-add",
|
||||
name: "roundAdd",
|
||||
component: roundAdd,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [8.1],
|
||||
Role: "insignia",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/insignia/record",
|
||||
name: "insigniaRecord",
|
||||
component: RecordInsignia,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [8.4],
|
||||
Role: "insignia",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/insignia/coin",
|
||||
name: "coin",
|
||||
component: Coin,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [8],
|
||||
Role: "insignia",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/insignia/report",
|
||||
name: "insigniaReport",
|
||||
component: ReportView,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [8.5],
|
||||
Role: "insignia",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/insignia/report/report-01",
|
||||
name: "report-report-01",
|
||||
component: report_01,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [8.5],
|
||||
Role: "insignia",
|
||||
},
|
||||
},
|
||||
|
|
|
|||
1
src/modules/08_registryEmployee/index/Main.ts
Normal file
1
src/modules/08_registryEmployee/index/Main.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export type {};
|
||||
13
src/modules/08_registryEmployee/request/Main.ts
Normal file
13
src/modules/08_registryEmployee/request/Main.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
interface FormRegistryEmployee {
|
||||
no: string;
|
||||
name: string;
|
||||
positionNum: string;
|
||||
position: string;
|
||||
path: string;
|
||||
type: string;
|
||||
level: string;
|
||||
affiliation: string;
|
||||
yearly: number;
|
||||
pay: string;
|
||||
}
|
||||
export type { FormRegistryEmployee };
|
||||
1
src/modules/08_registryEmployee/response/Main.ts
Normal file
1
src/modules/08_registryEmployee/response/Main.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export type {};
|
||||
|
|
@ -2,157 +2,173 @@
|
|||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายชื่อลูกจ้างชั่วคราว
|
||||
</div>
|
||||
<q-card flat bordered class="q-pa-md">
|
||||
<div class="col-12 row items-center">
|
||||
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 q-pt-sm">
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
<q-card flat bordered class="q-pa-md">
|
||||
<div class="col-12 row items-center">
|
||||
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
class="custom-header-table"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<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-th auto-width />
|
||||
</q-tr>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="positionNum" :props="props">
|
||||
{{ props.row.positionNum }}
|
||||
</q-td>
|
||||
<q-td key="name" :props="props">
|
||||
{{ props.row.name }}
|
||||
</q-td>
|
||||
<q-td key="position" :props="props">
|
||||
{{ props.row.position }}
|
||||
</q-td>
|
||||
<q-td key="path" :props="props">
|
||||
{{ props.row.path }}
|
||||
</q-td>
|
||||
<q-td key="type" :props="props">
|
||||
{{ props.row.type }}
|
||||
</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 key="yearly" :props="props">
|
||||
{{ props.row.yearly }}
|
||||
</q-td>
|
||||
<q-td key="pay" :props="props">
|
||||
{{ props.row.pay }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
icon="mdi-dots-vertical"
|
||||
size="12px"
|
||||
color="grey-7"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
>
|
||||
<q-menu transition-show="jump-down" transition-hide="jump-up">
|
||||
<q-list dense style="min-width: 160px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="editDetail(props.row)"
|
||||
>
|
||||
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
|
||||
<q-icon color="blue" size="xs" name="mdi-account-settings" />
|
||||
</q-item-section>
|
||||
<q-item-section>กำหนดตำแหน่ง</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item clickable v-close-popup @click="clickDelete('test')">
|
||||
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
|
||||
<q-icon color="red" size="xs" name="mdi-delete" />
|
||||
</q-item-section>
|
||||
<q-item-section>ลบ</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator />
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<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>
|
||||
</q-table>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 q-pt-sm">
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
class="custom-header-table"
|
||||
: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">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="positionNum" :props="props">
|
||||
{{ props.row.positionNum }}
|
||||
</q-td>
|
||||
<q-td key="name" :props="props">
|
||||
{{ props.row.name }}
|
||||
</q-td>
|
||||
<q-td key="position" :props="props">
|
||||
{{ props.row.position }}
|
||||
</q-td>
|
||||
<q-td key="path" :props="props">
|
||||
{{ props.row.path }}
|
||||
</q-td>
|
||||
<q-td key="type" :props="props">
|
||||
{{ props.row.type }}
|
||||
</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 key="yearly" :props="props">
|
||||
{{ props.row.yearly }}
|
||||
</q-td>
|
||||
<q-td key="pay" :props="props">
|
||||
{{ props.row.pay }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
icon="mdi-dots-vertical"
|
||||
size="12px"
|
||||
color="grey-7"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
>
|
||||
<q-menu transition-show="jump-down" transition-hide="jump-up">
|
||||
<q-list dense style="min-width: 160px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="editDetail(props.row)"
|
||||
>
|
||||
<q-item-section
|
||||
style="min-width: 0px"
|
||||
avatar
|
||||
class="q-py-sm"
|
||||
>
|
||||
<q-icon
|
||||
color="blue"
|
||||
size="xs"
|
||||
name="mdi-account-settings"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>กำหนดตำแหน่ง</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="clickDelete('test')"
|
||||
>
|
||||
<q-item-section
|
||||
style="min-width: 0px"
|
||||
avatar
|
||||
class="q-py-sm"
|
||||
>
|
||||
<q-icon color="red" size="xs" name="mdi-delete" />
|
||||
</q-item-section>
|
||||
<q-item-section>ลบ</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator />
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<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>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
|
|
@ -163,6 +179,7 @@ import { useRouter } from "vue-router";
|
|||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { treeTab } from "@/modules/05_placement/interface/index/Main";
|
||||
import { FormRegistryEmployee } from "@/modules/08_registryEmployee/request/Main.ts";
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
|
|
@ -210,93 +227,6 @@ const columnsModal = [
|
|||
},
|
||||
];
|
||||
|
||||
const rowsModal = [
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางนัทธ์ เหล่าสกุล",
|
||||
positionNum: "สกก.3",
|
||||
position: "นักบริหาร",
|
||||
path: "บริหาร",
|
||||
type: "บริหาร",
|
||||
level: "ชำนาญการพิเศษ",
|
||||
affiliation: "ฝ่ายบริหารงานทั่วไป",
|
||||
yearly: 2565,
|
||||
pay: "40,000",
|
||||
},
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นายภูวนัย ต้นทอง",
|
||||
positionNum: "กทม.2",
|
||||
position: "นักบริหาร",
|
||||
path: "บริหาร",
|
||||
type: "บริหาร",
|
||||
level: "ชำนาญการพิเศษ",
|
||||
affiliation: "ฝ่ายบริหารงานทั่วไป",
|
||||
yearly: 2565,
|
||||
pay: "35,000",
|
||||
},
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางปริศนา ตรีวุฒิ",
|
||||
positionNum: "กบห.3",
|
||||
position: "นักบริหาร",
|
||||
path: "บริหาร",
|
||||
type: "บริหาร",
|
||||
level: "ชำนาญการพิเศษ",
|
||||
affiliation: "ฝ่ายบริหารงานทั่วไป",
|
||||
yearly: 2565,
|
||||
pay: "38,000",
|
||||
},
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางเมษา เกียรติบวรสกุล ",
|
||||
positionNum: "สกก.3",
|
||||
position: "นักบริหาร",
|
||||
path: "บริหาร",
|
||||
type: "บริหาร",
|
||||
level: "ชำนาญการพิเศษ",
|
||||
affiliation: "ฝ่ายบริหารงานทั่วไป",
|
||||
yearly: 2565,
|
||||
pay: "25,000",
|
||||
},
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางพริมา พงศ์พินิจ",
|
||||
positionNum: "สกก.3",
|
||||
position: "นักบริหาร",
|
||||
path: "บริหาร",
|
||||
type: "บริหาร",
|
||||
level: "ชำนาญการพิเศษ",
|
||||
affiliation: "ฝ่ายบริหารงานทั่วไป",
|
||||
yearly: 2565,
|
||||
pay: "30,000",
|
||||
},
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางพรพักตร์ พาใจขวัญ",
|
||||
positionNum: "สกก.3",
|
||||
position: "นักบริหาร",
|
||||
path: "บริหาร",
|
||||
type: "บริหาร",
|
||||
level: "ชำนาญการพิเศษ",
|
||||
affiliation: "ฝ่ายบริหารงานทั่วไป",
|
||||
yearly: 2565,
|
||||
pay: "40,000",
|
||||
},
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางชลธิมา คมสกุล ",
|
||||
positionNum: "สกก.3",
|
||||
position: "นักบริหาร",
|
||||
path: "บริหาร",
|
||||
type: "บริหาร",
|
||||
level: "ชำนาญการพิเศษ",
|
||||
affiliation: "ฝ่ายบริหารงานทั่วไป",
|
||||
yearly: 2565,
|
||||
pay: "15,000",
|
||||
},
|
||||
];
|
||||
|
||||
const paginationModal = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
|
|
@ -390,7 +320,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const rows = [
|
||||
const rows = ref<FormRegistryEmployee[]>([
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางนัทธ์ เหล่าสกุล",
|
||||
|
|
@ -535,7 +465,7 @@ const rows = [
|
|||
yearly: 2565,
|
||||
pay: "20,250",
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
await nodeTree();
|
||||
|
|
|
|||
516
src/modules/09_coin/components/Coin.vue
Normal file
516
src/modules/09_coin/components/Coin.vue
Normal file
|
|
@ -0,0 +1,516 @@
|
|||
<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="router.go(-1)"
|
||||
/> -->
|
||||
ประวัติการยื่นขอพระราชทานเหรียญจักรพรรดิมาลา
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
align="left"
|
||||
class="bg-white text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
>
|
||||
<q-tab name="yes" label="คนที่ยื่นขอ" />
|
||||
<q-tab name="no" label="คนที่ไม่ยื่นขอ" />
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<div class="q-py-md q-px-lg">
|
||||
<!-- <div>
|
||||
<label class="q-mr-sm">รอบ</label>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
de
|
||||
color="grey"
|
||||
icon="mdi-menu-left"
|
||||
:class="getArrow(arrow)"
|
||||
@click="clickRound"
|
||||
/>
|
||||
</div>
|
||||
<Transition>
|
||||
<div v-if="arrow" class="bg-base rounded-borders q-pa-md">
|
||||
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateGoverment"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker bg-white"
|
||||
:model-value="
|
||||
dateGoverment != null ? date2Thai(dateGoverment) : null
|
||||
"
|
||||
:label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateReceiver"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker bg-white"
|
||||
:model-value="
|
||||
dateReceiver != null ? date2Thai(dateReceiver) : null
|
||||
"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="issue"
|
||||
:label="`${'ฉบับ'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="book"
|
||||
:label="`${'เล่มที่'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="volume"
|
||||
:label="`${'เล่ม'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-2">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="section"
|
||||
:label="`${'ตอนที่'}`"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-file
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
v-model="government"
|
||||
label="ราชกิจจานุเบกษา"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<q-file
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
v-model="document"
|
||||
label="เอกสารประกอบ"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition> -->
|
||||
<div :class="marginTop(arrow)">
|
||||
<div class="col-12 row q-pb-sm items-center">
|
||||
<selector
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="capYears"
|
||||
hide-bottom-space
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="capYearsOption"
|
||||
option-value="id"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'capYearsOption'
|
||||
) "
|
||||
/>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
>
|
||||
<template v-slot:body-cell="props">
|
||||
<q-td :props="props">
|
||||
<div v-if="props.col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ props.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
// import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import type { QTableProps, QInput } from "quasar";
|
||||
|
||||
// const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const tab = ref<string>("yes");
|
||||
const arrow = ref<boolean>(false);
|
||||
|
||||
// const dateGoverment = ref<Date>(new Date());
|
||||
// const dateReceiver = ref<Date>(new Date());
|
||||
// const issue = ref<string>("");
|
||||
// const book = ref<string>("");
|
||||
// const volume = ref<string>("");
|
||||
// const section = ref<string>("");
|
||||
// const government = ref<any>(null);
|
||||
// const document = ref<any>(null);
|
||||
|
||||
const capYears = ref<string>("");
|
||||
const capYearsOption = ref<DataOption[]>([]);
|
||||
const capYearsOptionFilter = ref<DataOption[]>([]);
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"cardid",
|
||||
"name",
|
||||
"position",
|
||||
"range",
|
||||
"salary",
|
||||
"zone",
|
||||
"school",
|
||||
"date",
|
||||
]);
|
||||
const filterRef = ref<QInput>();
|
||||
const filter = ref<string>("");
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
field: "no",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "cardid",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
field: "cardid",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ - นามสกุล",
|
||||
field: "name",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
field: "position",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "range",
|
||||
align: "left",
|
||||
label: "อันดับ",
|
||||
field: "range",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "salary",
|
||||
align: "left",
|
||||
label: "เงินเดือน",
|
||||
field: "salary",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "zone",
|
||||
align: "left",
|
||||
label: "เขต",
|
||||
field: "zone",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "school",
|
||||
align: "left",
|
||||
label: "โรงเรียน",
|
||||
field: "school",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "วันที่ยื่นขอ",
|
||||
field: "date",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const rows = ref<any>([
|
||||
{
|
||||
no: "1",
|
||||
cardid: "1XXXXXXXXXXXX",
|
||||
name: "นางสาวรัชภรณ์ ภักดี",
|
||||
position: "กกก",
|
||||
range: "1",
|
||||
salary: "XXXXXX",
|
||||
zone: "1",
|
||||
school: "โรงเรียน",
|
||||
date: date2Thai(new Date()),
|
||||
},
|
||||
{
|
||||
no: "2",
|
||||
cardid: "1XXXXXXXXXXXX",
|
||||
name: "นางสาวรัชภรณ์ ภักดี",
|
||||
position: "กกก",
|
||||
range: "1",
|
||||
salary: "XXXXXX",
|
||||
zone: "1",
|
||||
school: "โรงเรียน",
|
||||
date: date2Thai(new Date()),
|
||||
},
|
||||
{
|
||||
no: "3",
|
||||
cardid: "1XXXXXXXXXXXX",
|
||||
name: "นางสาวรัชภรณ์ ภักดี",
|
||||
position: "กกก",
|
||||
range: "1",
|
||||
salary: "XXXXXX",
|
||||
zone: "1",
|
||||
school: "โรงเรียน",
|
||||
date: date2Thai(new Date()),
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
const op2: DataOption[] = [
|
||||
{ id: "1", name: "2566" },
|
||||
{ id: "2", name: "2565" },
|
||||
{ id: "3", name: "2564" },
|
||||
];
|
||||
|
||||
capYearsOption.value = op2;
|
||||
capYearsOptionFilter.value = op2;
|
||||
});
|
||||
|
||||
const clickRound = () => {
|
||||
arrow.value = !arrow.value;
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
filter.value = "";
|
||||
filterRef.value!.focus();
|
||||
};
|
||||
|
||||
const filterSelector = (val: any, update: Function, filtername: string) => {
|
||||
switch (filtername) {
|
||||
case "capYearsOption":
|
||||
update(() => {
|
||||
capYearsOption.value = capYearsOptionFilter.value.filter(
|
||||
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// const getArrow = (val: boolean) => {
|
||||
// return {
|
||||
// "arrow cursor-pointer": !val,
|
||||
// "arrow-active cursor-pointer": val,
|
||||
// };
|
||||
// };
|
||||
|
||||
const marginTop = (val: boolean) => {
|
||||
return {
|
||||
"": !val,
|
||||
"q-mt-md": val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.arrow {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.arrow-active {
|
||||
transition: transform 0.5s;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.bg-base {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
1
src/modules/09_coin/interface/index/Main.ts
Normal file
1
src/modules/09_coin/interface/index/Main.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export type {};
|
||||
1
src/modules/09_coin/interface/request/Main.ts
Normal file
1
src/modules/09_coin/interface/request/Main.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export type {};
|
||||
1
src/modules/09_coin/interface/response/Main.ts
Normal file
1
src/modules/09_coin/interface/response/Main.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export type {};
|
||||
18
src/modules/09_coin/router.ts
Normal file
18
src/modules/09_coin/router.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* Router เครื่องราชอิสริยาภรณ์ (insignia)
|
||||
*/
|
||||
|
||||
const Main = () => import("@/modules/09_coin/views/Main.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/coin",
|
||||
name: "coin",
|
||||
component: Main,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
];
|
||||
5
src/modules/09_coin/store.ts
Normal file
5
src/modules/09_coin/store.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { defineStore } from "pinia";
|
||||
|
||||
export const useCoinDataStore = defineStore("coin", () => {
|
||||
return {};
|
||||
});
|
||||
12
src/modules/09_coin/views/Main.vue
Normal file
12
src/modules/09_coin/views/Main.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
เหรียญจักรพรรดิมาลา
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm"> </q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope></style>
|
||||
|
|
@ -12,6 +12,7 @@ import ModulePlacement from "@/modules/05_placement/router";
|
|||
import ModuleRetirement from "@/modules/06_retirement/router";
|
||||
import ModuleInsignia from "@/modules/07_insignia/router";
|
||||
import ModuleRegistryEmployee from "@/modules/08_registryEmployee/router";
|
||||
import ModuleCoin from "@/modules/09_coin/router";
|
||||
|
||||
// TODO: ใช้หรือไม่?
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
|
|
@ -42,6 +43,7 @@ const router = createRouter({
|
|||
...ModuleRetirement,
|
||||
...ModuleInsignia,
|
||||
...ModuleRegistryEmployee,
|
||||
...ModuleCoin,
|
||||
],
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -716,7 +716,10 @@ if (keycloak.tokenParsed != null) {
|
|||
expand-icon="mdi-chevron-down"
|
||||
expanded-icon="mdi-chevron-up"
|
||||
v-if="
|
||||
menuItem.key == 3 || menuItem.key == 5 || menuItem.key == 6
|
||||
menuItem.key == 3 ||
|
||||
menuItem.key == 5 ||
|
||||
menuItem.key == 6 ||
|
||||
menuItem.key == 8
|
||||
"
|
||||
>
|
||||
<template v-slot:header>
|
||||
|
|
@ -727,7 +730,7 @@ if (keycloak.tokenParsed != null) {
|
|||
font-size="20px"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section >{{ menuItem.label }}</q-item-section>
|
||||
<q-item-section>{{ menuItem.label }}</q-item-section>
|
||||
</template>
|
||||
|
||||
<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
|
||||
|
|
@ -751,7 +754,9 @@ if (keycloak.tokenParsed != null) {
|
|||
:to="{ name: `${subMenu2.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400">{{ subMenu2.label }} </q-item-label>
|
||||
<q-item-label class="font-400"
|
||||
>{{ subMenu2.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
|
|
@ -781,7 +786,9 @@ if (keycloak.tokenParsed != null) {
|
|||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400">{{ subMenu.label }}</q-item-label>
|
||||
<q-item-label class="font-400">{{
|
||||
subMenu.label
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
|
|
@ -930,7 +937,7 @@ if (keycloak.tokenParsed != null) {
|
|||
.menuSub .q-item {
|
||||
border-radius: 0 100px 100px 0;
|
||||
margin-right: 2%;
|
||||
font-weight: 500 ;
|
||||
font-weight: 500;
|
||||
}
|
||||
.expan2 .q-item {
|
||||
padding-left: 10%;
|
||||
|
|
@ -938,8 +945,8 @@ if (keycloak.tokenParsed != null) {
|
|||
/* .menuSubAct {
|
||||
background: #1e2529d9;
|
||||
} */
|
||||
.font-400{
|
||||
font-weight: 400 ;
|
||||
.font-400 {
|
||||
font-weight: 400;
|
||||
}
|
||||
.expan2 .menuSubHover {
|
||||
padding-left: 30%;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue