อัพเดท type //เมนูเครื่องราช

This commit is contained in:
AnandaTon 2023-07-17 14:02:44 +07:00
parent d626279c6c
commit 27b4e9dd4c
8 changed files with 221 additions and 239 deletions

View file

@ -228,6 +228,30 @@ const menuList = readonly<any[]>([
path: "insigniaProposals", path: "insigniaProposals",
role: "insignia", 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",
},
], ],
}, },
{ {

View file

@ -1 +1,9 @@
export type {}; interface FormProprsalsRound {
id: number;
name: string;
year: number;
startDate: number;
endDate: number;
status: string;
}
export type { FormProprsalsRound };

View file

@ -167,5 +167,9 @@ const $q = useQuasar();
const dateStart = ref<any>(new Date()); const dateStart = ref<any>(new Date());
const dateEnd = 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; const routeName = router.currentRoute.value.name;
</script> </script>

View file

@ -116,7 +116,7 @@
size="12px" size="12px"
flat flat
round round
color="indigo" color="light-blue-8"
@click.stop.prevent="clickProposals(props.row.id)" @click.stop.prevent="clickProposals(props.row.id)"
icon="mdi-file-download" icon="mdi-file-download"
> >
@ -161,6 +161,7 @@ import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import router from "@/router"; import router from "@/router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
const $q = useQuasar(); // noti quasar const $q = useQuasar(); // noti quasar
const modal = ref<boolean>(false); const modal = ref<boolean>(false);
@ -229,7 +230,7 @@ const columns = ref<QTableProps["columns"]>([
]); ]);
// () // ()
const rows = ref<any[]>([ const rows = ref<FormProprsalsRound[]>([
{ {
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ", round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566", year: "2566",

View file

@ -0,0 +1 @@
export type {};

View 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 };

View file

@ -0,0 +1 @@
export type {};

View file

@ -2,157 +2,173 @@
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
รายชอลกจางชวคราว รายชอลกจางชวคราว
</div> </div>
<q-card flat bordered class="q-pa-md"> <q-card flat bordered class="q-pa-md">
<div class="col-12 row items-center"> <div class="col-12 row items-center">
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus"> <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
<q-tooltip>เพมขอม</q-tooltip> <q-tooltip>เพมขอม</q-tooltip>
</q-btn> </q-btn>
<q-space /> <q-space />
<div class="items-center" style="display: flex"> <div class="items-center" style="display: flex">
<!-- นหาขอความใน table --> <!-- นหาขอความใน table -->
<q-input <q-input
standout 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
dense dense
:rows="rows" v-model="filter"
:columns="columns" ref="filterRef"
:visible-columns="visibleColumns" outlined
:filter="filter" debounce="300"
row-key="name" placeholder="ค้นหา"
class="custom-header-table" style="max-width: 200px"
:pagination-label="paginationLabel" class="q-ml-sm"
v-model:pagination="pagination"
> >
<template v-slot:header="props"> <template v-slot:append>
<q-tr :props="props"> <q-icon v-if="filter == ''" name="search" />
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <q-icon
<span class="text-weight-medium">{{ col.label }}</span> v-if="filter !== ''"
</q-th> name="clear"
<q-th auto-width /> class="cursor-pointer"
</q-tr> @click="resetFilter"
/>
</template> </template>
<template v-slot:body="props"> </q-input>
<q-tr :props="props" class="cursor-pointer"> <!-- แสดงคอลมนใน table -->
<q-td key="no" :props="props"> <q-select
{{ props.rowIndex + 1 }} v-model="visibleColumns"
</q-td> :display-value="$q.lang.table.columns"
<q-td key="positionNum" :props="props"> multiple
{{ props.row.positionNum }} outlined
</q-td> dense
<q-td key="name" :props="props"> :options="columns"
{{ props.row.name }} options-dense
</q-td> option-value="name"
<q-td key="position" :props="props"> map-options
{{ props.row.position }} emit-value
</q-td> style="min-width: 150px"
<q-td key="path" :props="props"> class="gt-xs q-ml-sm"
{{ 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> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
@ -163,6 +179,7 @@ import { useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { treeTab } from "@/modules/05_placement/interface/index/Main"; import type { treeTab } from "@/modules/05_placement/interface/index/Main";
import { FormRegistryEmployee } from "@/modules/08_registryEmployee/request/Main.ts";
const props = defineProps({ const props = defineProps({
next: { 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({ const paginationModal = ref({
sortBy: "desc", sortBy: "desc",
descending: false, descending: false,
@ -390,7 +320,7 @@ const columns = ref<QTableProps["columns"]>([
}, },
]); ]);
const rows = [ const rows = ref<FormRegistryEmployee[]>([
{ {
no: "0ac56905-1a74-4606-a120-233340adde95", no: "0ac56905-1a74-4606-a120-233340adde95",
name: "นางนัทธ์ เหล่าสกุล", name: "นางนัทธ์ เหล่าสกุล",
@ -535,7 +465,7 @@ const rows = [
yearly: 2565, yearly: 2565,
pay: "20,250", pay: "20,250",
}, },
]; ]);
onMounted(async () => { onMounted(async () => {
await nodeTree(); await nodeTree();