Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
a5b53a705c
9 changed files with 525 additions and 30 deletions
|
|
@ -623,22 +623,34 @@ const menuList = readonly<any[]>([
|
|||
children: [
|
||||
{
|
||||
key: 12.1,
|
||||
label: "ผังบัญชีเงินเดือน",
|
||||
label: "ผังบัญชีเงินเดือนข้าราชการ",
|
||||
path: "salaryChart",
|
||||
role: "salary",
|
||||
},
|
||||
{
|
||||
key: 12.2,
|
||||
label: "ผังบัญชีค่าจ้างลูกจ้าง",
|
||||
path: "salaryEmployeeChart",
|
||||
role: "salary",
|
||||
},
|
||||
{
|
||||
key: 12.3,
|
||||
label: "รอบการขึ้นเงินเดือน",
|
||||
path: "salaryRound",
|
||||
role: "salary",
|
||||
},
|
||||
{
|
||||
key: 12.3,
|
||||
label: "รายการเงินเดือน",
|
||||
key: 12.4,
|
||||
label: "เลื่อนเงินเดือนข้าราชการ",
|
||||
path: "salaryLists",
|
||||
role: "salary",
|
||||
},
|
||||
{
|
||||
key: 12.5,
|
||||
label: "เลื่อนค่าจ้างลูกจ้างประจำ",
|
||||
path: "salaryEmployeeLists",
|
||||
role: "salary",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ const rows = [
|
|||
:grid="mode === 'card'"
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table q-mx-lg"
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
>
|
||||
|
|
|
|||
6
src/modules/04_registryNew/interface/index/registry.ts
Normal file
6
src/modules/04_registryNew/interface/index/registry.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
interface RangeYear {
|
||||
min: number;
|
||||
max: number;
|
||||
}
|
||||
|
||||
export type { RangeYear };
|
||||
15
src/modules/04_registryNew/interface/response/Main.ts
Normal file
15
src/modules/04_registryNew/interface/response/Main.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
interface DataType {
|
||||
id: string;
|
||||
posLevels: any;
|
||||
posTypeName: string;
|
||||
posTypeRank: number;
|
||||
}
|
||||
|
||||
interface DataLevel {
|
||||
id: string;
|
||||
posLevelAuthority: string | null;
|
||||
posLevelName: string;
|
||||
posLevelRank: number;
|
||||
}
|
||||
|
||||
export type { DataType, DataLevel };
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { defineStore } from "pinia";
|
||||
|
||||
import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
|
||||
import type {
|
||||
DataType,
|
||||
DataLevel,
|
||||
} from "@/modules/04_registryNew/interface/response/Main";
|
||||
|
||||
export const useRegistryNewDataStore = defineStore("registryNew", () => {
|
||||
function fetchType(data: DataType[]) {
|
||||
const list: DataOption[] = data.map((e: DataType) => ({
|
||||
id: e.id,
|
||||
name: e.posTypeName,
|
||||
}));
|
||||
return list;
|
||||
}
|
||||
function fetchLevel(data: DataLevel[]) {
|
||||
const list: DataOption[] = data.map((e: DataLevel) => ({
|
||||
id: e.id,
|
||||
name: e.posLevelName,
|
||||
}));
|
||||
return list;
|
||||
}
|
||||
return {
|
||||
fetchType,
|
||||
fetchLevel,
|
||||
};
|
||||
});
|
||||
|
|
@ -1,11 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableColumn } from "quasar";
|
||||
import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
|
||||
import type { RangeYear } from "@/modules/04_registryNew/interface/index/registry";
|
||||
|
||||
/** importComponents*/
|
||||
import Search from "@/modules/04_registryNew/components/registry/Search.vue";
|
||||
import TableView from "@/modules/04_registryNew/components/registry/TableView.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableColumn } from "quasar";
|
||||
|
||||
/** importStore*/
|
||||
import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useRegistryNewDataStore();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
|
||||
const mode = ref<"table" | "card">("table");
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -132,18 +147,423 @@ const visibleColumns = ref<string[]>([
|
|||
"year",
|
||||
"salary",
|
||||
]);
|
||||
|
||||
const isSearchData = ref<boolean>(true);
|
||||
const isShowFilter = ref<boolean>(true);
|
||||
const keyword = ref<string>("");
|
||||
|
||||
const searchType = ref<string>("fullName");
|
||||
|
||||
const searchTypeOption = ref<DataOption[]>([
|
||||
{ id: "fullName", name: "ชื่อ-นามสกุล" },
|
||||
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
|
||||
{ id: "posNo", name: "ตำแหน่งเลขที่" },
|
||||
{ id: "position", name: "ตำแหน่งสายงาน" },
|
||||
]);
|
||||
|
||||
const labelOption = reactive({
|
||||
type: "ทั้งหมด",
|
||||
posType: "ทั้งหมด",
|
||||
posLevel: "ทั้งหมด",
|
||||
});
|
||||
|
||||
const type = ref<string>("ข้าราชการทั้งหมด");
|
||||
const posType = ref<string>("ทั้งหมด");
|
||||
const posLevel = ref<string>("ทั้งหมด");
|
||||
const retireYear = ref<number | null>(null);
|
||||
const isShowRetire = ref<boolean>(false);
|
||||
const isProbation = ref<boolean>(false);
|
||||
const TypeOption = ref<DataOption[]>([
|
||||
{ id: "0", name: "ข้าราชการทั้งหมด" },
|
||||
{ id: "1", name: "ข้าราชการ กทม.สามัญ" },
|
||||
{ id: "2", name: "ลูกจ้างประจำ" },
|
||||
{ id: "3", name: "ลููกจ้างชั่วคราว" },
|
||||
]);
|
||||
const posTypeOption = ref<DataOption[]>([]);
|
||||
const posLevelOption = ref<DataOption[]>([]);
|
||||
const rangeYear = ref<RangeYear>({
|
||||
min: 0,
|
||||
max: 60,
|
||||
});
|
||||
|
||||
const conditionTotal = computed(() => {
|
||||
let num: string = "";
|
||||
if (isProbation.value && isShowRetire.value) {
|
||||
num = "(2)";
|
||||
} else if (isProbation.value || isShowRetire.value) {
|
||||
num = "(1)";
|
||||
} else "";
|
||||
|
||||
return num;
|
||||
});
|
||||
|
||||
function fetchType() {
|
||||
http
|
||||
.get(config.API.orgPosType)
|
||||
.then(async (res) => {
|
||||
posTypeOption.value = store.fetchType(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchLevel() {
|
||||
http
|
||||
.get(config.API.orgPosLevel)
|
||||
.then(async (res) => {
|
||||
posLevelOption.value = store.fetchLevel(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onClickShowFilter() {
|
||||
isShowFilter.value = !isShowFilter.value;
|
||||
}
|
||||
|
||||
function selectType(item: DataOption) {
|
||||
labelOption.type = item.name;
|
||||
}
|
||||
|
||||
function selectPosType(item: DataOption) {
|
||||
labelOption.posType = item.name;
|
||||
}
|
||||
|
||||
function selectPosLevel(item: DataOption) {
|
||||
labelOption.posLevel = item.name;
|
||||
}
|
||||
|
||||
function clearSelect(t: string) {
|
||||
if (t === "type") {
|
||||
labelOption.type = "ทั้งหมด";
|
||||
} else if (t === "posType") {
|
||||
labelOption.posType = "ทั้งหมด";
|
||||
} else if (t === "posLevel") {
|
||||
labelOption.posLevel = "ทั้งหมด";
|
||||
} else if (t === "retireYear") {
|
||||
retireYear.value = null;
|
||||
} else if (t === "rangeYear") {
|
||||
rangeYear.value.min = 0;
|
||||
rangeYear.value.max = 60;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
fetchType();
|
||||
fetchLevel();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
ข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
<Search />
|
||||
<div
|
||||
|
||||
<q-card>
|
||||
<q-card-section class="card-img">
|
||||
<div class="text-h5 text-center q-pa-md">ค้นหาข้อมูลทะเบียนประวัติ</div>
|
||||
<div class="row justify-center">
|
||||
<div class="col-12 col-md-10">
|
||||
<q-toolbar style="padding: 0px">
|
||||
<q-select
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="searchType"
|
||||
:options="searchTypeOption"
|
||||
emit-value
|
||||
dense
|
||||
emit-option
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
/>
|
||||
<q-toolbar-title>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="keyword"
|
||||
clearable
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
</q-input>
|
||||
</q-toolbar-title>
|
||||
<q-btn color="blue" label="ค้นหา" />
|
||||
</q-toolbar>
|
||||
<q-toolbar inset align="right" style="padding: 0px">
|
||||
<q-toolbar-title>
|
||||
<q-btn
|
||||
flat
|
||||
label="ตัวเลือกเพิ่มเติม"
|
||||
icon-right="tune"
|
||||
@click="onClickShowFilter"
|
||||
/></q-toolbar-title>
|
||||
</q-toolbar>
|
||||
|
||||
<div class="q-pa-md" v-if="isShowFilter">
|
||||
<div class="row q-gutter-sm">
|
||||
<q-btn-dropdown
|
||||
rounded
|
||||
outline
|
||||
class="custom-btn"
|
||||
label-color="white"
|
||||
>
|
||||
<template v-slot:label>
|
||||
{{ `ประเภทข้าราชการ ${labelOption.type}` }}
|
||||
|
||||
<q-btn
|
||||
size="10px"
|
||||
flat
|
||||
round
|
||||
color="white"
|
||||
icon="close"
|
||||
v-if="labelOption.type !== 'ทั้งหมด'"
|
||||
@click.stop.prevent="clearSelect('type')"
|
||||
/>
|
||||
</template>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="(item, index) in TypeOption"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="selectType(item)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-btn-dropdown
|
||||
rounded
|
||||
outline
|
||||
label-color="white"
|
||||
class="custom-btn"
|
||||
>
|
||||
<template v-slot:label>
|
||||
{{ `ประเภทตำแหน่ง ${labelOption.posType}` }}
|
||||
<q-btn
|
||||
size="10px"
|
||||
flat
|
||||
round
|
||||
color="white"
|
||||
icon="close"
|
||||
v-if="labelOption.posType !== 'ทั้งหมด'"
|
||||
@click.stop.prevent="clearSelect('posType')"
|
||||
/>
|
||||
</template>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="(item, index) in posTypeOption"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="selectPosType(item)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-btn-dropdown
|
||||
rounded
|
||||
outline
|
||||
class="custom-btn"
|
||||
label-color="white"
|
||||
>
|
||||
<template v-slot:label>
|
||||
{{ `ระดับตำแหน่ง ${labelOption.posLevel}` }}
|
||||
<q-btn
|
||||
size="10px"
|
||||
flat
|
||||
round
|
||||
color="white"
|
||||
icon="close"
|
||||
v-if="labelOption.posLevel !== 'ทั้งหมด'"
|
||||
@click.stop.prevent="clearSelect('posLevel')"
|
||||
/>
|
||||
</template>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="(item, index) in posLevelOption"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="selectPosLevel(item)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="retireYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
clearable
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="cursor-pointer custom-select"
|
||||
rounded
|
||||
label-color="white"
|
||||
outlined
|
||||
dense
|
||||
input-style="color:white;"
|
||||
borderless
|
||||
:model-value="retireYear === null ? null : retireYear + 543"
|
||||
:label="`${'ปีเกษียณ'}`"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-btn
|
||||
size="10px"
|
||||
flat
|
||||
round
|
||||
color="white"
|
||||
icon="close"
|
||||
v-if="retireYear !== null"
|
||||
@click.stop.prevent="clearSelect('retireYear')"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-btn-dropdown
|
||||
rounded
|
||||
outline
|
||||
class="custom-btn"
|
||||
label-color="white"
|
||||
>
|
||||
<template v-slot:label>
|
||||
{{ `อายุราชการ (${rangeYear.min} - ${rangeYear.max} ปี)` }}
|
||||
<q-btn
|
||||
size="10px"
|
||||
flat
|
||||
round
|
||||
color="white"
|
||||
icon="close"
|
||||
v-if="rangeYear.min !== 0 || rangeYear.max !== 60"
|
||||
@click.stop.prevent="clearSelect('rangeYear')"
|
||||
/>
|
||||
</template>
|
||||
<div class="row justify-center">
|
||||
<div class="col-12 q-pa-md text-center">
|
||||
<div>
|
||||
<span>จำนวนปี</span>
|
||||
<q-badge
|
||||
color="grey-4"
|
||||
text-color="black"
|
||||
class="q-ml-sm"
|
||||
:label="`${rangeYear.min}-${rangeYear.max}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="q-ma-md">
|
||||
<q-range
|
||||
v-model="rangeYear"
|
||||
:min="0"
|
||||
:max="60"
|
||||
:step="1"
|
||||
label-always
|
||||
color="primary"
|
||||
selection-color="blue"
|
||||
label-color="primary"
|
||||
thumb-color="blue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-btn-dropdown
|
||||
rounded
|
||||
outline
|
||||
class="custom-btn"
|
||||
color="white"
|
||||
:label="`เงื่อนไขอื่นๆ ${conditionTotal}`"
|
||||
>
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section>
|
||||
<q-toggle
|
||||
v-model="isProbation"
|
||||
color="primary"
|
||||
label="ทดลองปฏิบัติหน้าที่ราชการ"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section>
|
||||
<q-toggle
|
||||
v-model="isShowRetire"
|
||||
color="primary"
|
||||
label="แสดงข้อมูลผู้พ้นจากราชการ"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div
|
||||
style="
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
v-if="isSearchData"
|
||||
>
|
||||
<q-icon name="search" size="4rem" />
|
||||
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
<div v-else class="col-12 q-pa-md">
|
||||
<!-- <TableView
|
||||
:columns="columns"
|
||||
v-model:visibleColumns="visibleColumns"
|
||||
v-model:mode="mode"
|
||||
/> -->
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<!-- <Search /> -->
|
||||
<!-- <div
|
||||
flat
|
||||
class="q-py-lg bg-white"
|
||||
style="width: 100%"
|
||||
>
|
||||
<div class="flex justify-between q-mb-md q-pr-lg q-pl-sm">
|
||||
> -->
|
||||
<!-- <div class="flex justify-between q-mb-md q-pr-lg q-pl-sm">
|
||||
<div>
|
||||
<q-btn round flat color="primary" icon="add" size="16px">
|
||||
<q-tooltip>เพิ่ม</q-tooltip></q-btn
|
||||
|
|
@ -202,19 +622,33 @@ const visibleColumns = ref<string[]>([
|
|||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<TableView
|
||||
<!-- <TableView
|
||||
:columns="columns"
|
||||
v-model:visibleColumns="visibleColumns"
|
||||
v-model:mode="mode"
|
||||
/>
|
||||
<!-- <CardView v-if="mode === 'card'" /> -->
|
||||
</div>
|
||||
/> -->
|
||||
<!-- <CardView v-if="mode === 'card'" /> -->
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<!-- <style scoped>
|
||||
.no-shadow :deep(.q-card) {
|
||||
box-shadow: none;
|
||||
<style scoped>
|
||||
.card-img {
|
||||
background: url("@/assets/registry-banner.png");
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
</style> -->
|
||||
|
||||
:deep(.custom-select.q-field--outlined .q-field__control) {
|
||||
color: white;
|
||||
background-color: #36969f;
|
||||
}
|
||||
:deep(.custom-select.q-field--outlined .q-field__control::before) {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
:deep(.custom-btn.q-btn--outline::before) {
|
||||
background-color: #36969f;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,15 +54,15 @@ const typeRangeOps = computed(() => {
|
|||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (typeRef.value.validate()) {
|
||||
if (
|
||||
store.roundMainCode === "APR" &&
|
||||
store.remaining === 0 &&
|
||||
type.value === "FULL"
|
||||
) {
|
||||
dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
|
||||
} else {
|
||||
// if (
|
||||
// store.roundMainCode === "APR" &&
|
||||
// store.remaining === 0 &&
|
||||
// type.value === "FULL"
|
||||
// ) {
|
||||
// dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
|
||||
// } else {
|
||||
onSubmit();
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -220,7 +220,7 @@ async function filterFn(page: number) {
|
|||
<template>
|
||||
<div class="row items-center">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
รายการผังบัญชีเงินเดือน
|
||||
รายการผังบัญชีเงินเดือนข้าราชการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -296,7 +296,7 @@ onMounted(async () => {
|
|||
<template>
|
||||
<div class="row items-center">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
รายการเงินเดือน
|
||||
รายการเลื่อนเงินเดือนข้าราชการ
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue