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

Merge branch 'develop' into nice_dev

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-03-05 10:52:41 +07:00
commit c9b4238c97
5 changed files with 225 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

205
src/modules/04_registryNew/components/registry/Search.vue
View file

@ -1,6 +1,18 @@
<script setup lang="ts">
import { ref } from "vue";
const search = ref<string>("");
const dropdownInput = ref<boolean>(false);
const name = ref<string>("");
const citizenId = ref<number>();
const retireYear = ref<number>();
const year = ref<number>();
const level = ref<number>();
const posNo = ref<string>("");
const posOc = ref<string>("");
const isActive1 = ref<boolean>(false);
const isActive2 = ref<boolean>(false);
</script>
<template>
<div
@ -22,8 +34,128 @@ const search = ref<string>("");
<div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
<div
class="flex full-width items-center bg-white"
style="flex-grow: 1; border-radius: 0.5rem"
style="flex-grow: 1; border-radius: 0.5rem; position: relative"
>
<div
v-if="dropdownInput"
class="full-width bg-white q-pa-md"
style="
top: 85%;
position: absolute;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
z-index: 10;
"
>
<div
class="q-pa-md"
style="
border-radius: 0.5rem;
background-color: whitesmoke;
border: 1px solid gainsboro;
"
>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-input
outlined
dense
v-model="name"
label="ข้าราชการ กทม.สามัญ"
class="bg-white"
/>
</div>
<div class="col">
<q-input
outlined
dense
v-model="citizenId"
label="เลขประจำตัวประชาชน"
class="bg-white"
/>
</div>
<div class="col">
<q-input
outlined
dense
v-model="citizenId"
label="เลขประจำตัวประชาชน"
class="bg-white"
/>
</div>
</div>
<div class="row q-gutter-md">
<div class="col-2">
<q-input
outlined
dense
v-model="retireYear"
label="ปีเกษียณ"
class="bg-white"
/>
</div>
<div class="col-2">
<q-input
outlined
dense
v-model="year"
label="อายุราชการ (ปี)"
class="bg-white"
/>
</div>
<div class="col-2">
<q-input
outlined
dense
v-model="level"
label="ระดับ"
class="bg-white"
/>
</div>
<div class="col-2">
<q-input
outlined
dense
v-model="posNo"
label="ตำแหน่งเลขที่"
class="bg-white"
/>
</div>
<div class="col">
<q-input
outlined
dense
v-model="posOc"
label="ตำแหน่งทางการบริหาร"
class="bg-white"
/>
</div>
</div>
</div>
<div
class="flex q-mt-xs"
style="align-content: flex-end; flex-direction: row-reverse"
>
<div class="q-pa-sm bg-white weight-medium">
<div class="row no-wrap items-center q-my-sm">
<label class="toggle-control">
<input type="checkbox" dense v-model="isActive1" @change="" />
<span class="control"></span>
</label>
<p class="q-ma-none">แสดงข้อมูลผู้พ้นจากราชการ</p>
</div>
</div>
<div class="q-pa-sm bg-white weight-medium">
<div class="row no-wrap items-center q-my-sm q-mr-lg">
<label class="toggle-control">
<input type="checkbox" dense v-model="isActive2" @change="" />
<span class="control"></span>
</label>
<p class="q-ma-none">แสดงข้อมูลผู้พ้นจากราชการ</p>
</div>
</div>
</div>
</div>
<q-icon
class="q-mx-md"
round
@ -47,9 +179,80 @@ const search = ref<string>("");
icon="filter_list"
dense
size="12px"
@click="() => (dropdownInput = !dropdownInput)"
/>
</div>
<q-btn class="q-ml-lg q-px-lg" color="blue" unelevated label="ค้นหา" />
</div>
</div>
</template>
<style scoped lang="scss">
.border_custom {
border-radius: 6px !important;
border: 1px solid #e1e1e1;
}
$toggle-background-color-on: #06884d;
$toggle-background-color-off: darkgray;
$toggle-control-color: white;
$toggle-width: 40px;
$toggle-height: 25px;
$toggle-gutter: 3px;
$toggle-radius: 50%;
$toggle-control-speed: 0.15s;
$toggle-control-ease: ease-in;
// These are our computed variables
// change at your own risk.
$toggle-radius: $toggle-height / 2;
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
.toggle-control {
display: block;
position: relative;
padding-left: $toggle-width;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
user-select: none;
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
input:checked ~ .control {
background-color: $toggle-background-color-on;
&:after {
left: $toggle-width - $toggle-control-size - $toggle-gutter;
}
}
.control {
position: absolute;
top: -7px;
left: -15px;
height: $toggle-height;
width: $toggle-width;
border-radius: $toggle-radius;
background-color: $toggle-background-color-off;
transition: background-color $toggle-control-speed $toggle-control-ease;
&:after {
content: "";
position: absolute;
left: $toggle-gutter;
top: $toggle-gutter;
width: $toggle-control-size;
height: $toggle-control-size;
border-radius: $toggle-radius;
background: $toggle-control-color;
transition: left $toggle-control-speed $toggle-control-ease;
}
}
}
</style>

4
src/modules/04_registryNew/components/registry/TableView.vue
View file

@ -11,6 +11,7 @@ const rows = [
{
no: 1,
fullName: "นางสาวกัณฐิมา กานสิน",
citizenId: "1231231231234",
posNo: "สกก.1",
position: "นักบริหาร",
posPath: "บริหาร",
@ -23,6 +24,7 @@ const rows = [
{
no: 2,
fullName: "นายธามไทย คนคูเมือง",
citizenId: "5555555555555",
posNo: "สกก.5",
position: "นักจัดการงานทั่วไป",
posPath: "จัดการงานทั่วไป",
@ -73,7 +75,7 @@ const rows = [
<q-item-section>
<div class="text-weight-medium">{{ props.row.fullName }}</div>
<div class="text-weight-light">123123123123123</div>
<div class="text-weight-light">{{ props.row.citizenId }}</div>
</q-item-section>
</q-item>
</template>

4
src/modules/04_registryNew/views/list.vue
View file

@ -4,7 +4,7 @@ import Search from "@/modules/04_registryNew/components/registry/Search.vue";
import TableView from "@/modules/04_registryNew/components/registry/TableView.vue";
import CardView from "@/modules/04_registryNew/components/registry/CardView.vue";
import { useQuasar } from "quasar";
import type { QTableColumn, QTableProps } from "quasar";
import type { QTableColumn } from "quasar";
const $q = useQuasar();
const mode = ref<"table" | "card">("table");
@ -33,7 +33,7 @@ const columns = [
},
{
name: "posNo",
align: "center",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "posNo",

6
src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
View file

@ -38,7 +38,7 @@ const columns = ref<QTableProps["columns"]>([
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -74,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
name: "posType",
align: "left",
label: "ประเภทตำเเหน่ง",
sortable: false,
sortable: true,
field: "posType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -83,7 +83,7 @@ const columns = ref<QTableProps["columns"]>([
name: "posLevel",
align: "left",
label: "ระดับตำเเหน่ง",
sortable: false,
sortable: true,
field: "posLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",

19
src/modules/13_salary/views/salaryRate.vue
View file

@ -54,7 +54,7 @@ const columns = ref<QTableProps["columns"]>([
name: "salary",
align: "left",
label: "เงินเดือนฐาน",
sortable: true,
sortable: false,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -63,6 +63,7 @@ const columns = ref<QTableProps["columns"]>([
name: "salaryHalf",
align: "left",
label: "เลื่อน 0.5 ขั้น/(พิเศษ)",
sortable: false,
field: "salaryHalf",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -71,7 +72,7 @@ const columns = ref<QTableProps["columns"]>([
name: "salaryFull",
align: "left",
label: "เลื่อน 1 ขั้น/(พิเศษ)",
sortable: true,
sortable: false,
field: "salaryFull",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -80,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
name: "salaryFullHalf",
align: "left",
label: "เลื่อน 1.5 ขั้น/(พิเศษ)",
sortable: true,
sortable: false,
field: "salaryFullHalf",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -89,7 +90,7 @@ const columns = ref<QTableProps["columns"]>([
name: "isNext",
align: "left",
label: "ทะลุขั้น",
sortable: true,
sortable: false,
field: "isNext",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -116,7 +117,7 @@ const itemMenu = ref<ItemsMenu[]>([
/** queryString*/
const formQuery = reactive<FormQuerySalary>({
page: 1, //*หน้า
pageSize: 10, //*จำนวนแถวต่อหน้า
pageSize: 100, //*จำนวนแถวต่อหน้า
keyword: "", //keyword ค้นหา
});
const totalRow = ref<number>(1);
@ -144,6 +145,11 @@ async function fetchListSalalyRate() {
});
}
/** ตั้งค่าเริ่มต้น paging */
const pagination = ref({
page: 1,
rowsPerPage: 100,
});
/**
* function updatePagination
* @param newPagination ข้อมูล Pagination ใหม่
@ -253,8 +259,9 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
bordered
:paging="true"
dense
:rows-per-page-options="[10, 25, 50, 100]"
:rows-per-page-options="[10, 25, 50, 100, 500]"
@update:pagination="updatePagination"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">