976 lines
32 KiB
Vue
976 lines
32 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
watch,
|
|
defineAsyncComponent,
|
|
computed,
|
|
} from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import avatar from "@/assets/avatar_user.jpg";
|
|
import { useStructureTree } from "@/stores/structureTree";
|
|
|
|
/** importType*/
|
|
import type {
|
|
DataNodeData,
|
|
QueryParams,
|
|
} from "@/modules/04_registryPerson/interface/request/Main";
|
|
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
|
|
import type { DataStructureTree } from "@/interface/main";
|
|
import type {
|
|
DataPerson,
|
|
DataType,
|
|
} from "@/modules/04_registryPerson/interface/response/Main";
|
|
|
|
/** importComponents*/
|
|
const TableView = defineAsyncComponent(
|
|
() => import("@/modules/04_registryPerson/components/TableView.vue")
|
|
);
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
const $q = useQuasar();
|
|
const store = useRegistryNewDataStore();
|
|
const { fetchStructureTree } = useStructureTree();
|
|
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const empType = ref<string>("officer"); // officer / employee / perm
|
|
const dataPersonMain = ref<DataPerson[]>([]); //ข้อมูลรายการที่ค้นหาข้อมูลทะเบียนประวัติ
|
|
const maxPage = ref<number>(1); //จำนวนหน้า
|
|
const total = ref<number>(0); //จำนวนข้อมูล
|
|
const isShowBtnFilter = ref<boolean>(false);
|
|
|
|
const filterMain = ref<string>(""); //หน่วยงาน/ส่วนราชการ
|
|
const node = ref<DataStructureTree[]>([]); //รายการโครางสร้าง
|
|
const expanded = ref<string[]>([]); //แสดงข้อมูลในโครงสร้าง
|
|
|
|
const selectNode = ref<boolean>(false); //แสดงโครงสร้าง
|
|
|
|
const isLoad = ref<boolean>(false); //โหลดข้อมูลโครงสร้าง
|
|
const nodeData = reactive<DataNodeData>({
|
|
name: "เลือกหน่วยงาน/ส่วนราชการ",
|
|
nodeId: null,
|
|
node: null,
|
|
});
|
|
|
|
/** function เรียกข้อมูลตำแหน่งประเภท*/
|
|
function fetchType() {
|
|
http
|
|
.get(config.API.orgPosType)
|
|
.then((res) => {
|
|
store.fetchType(res.data.result);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
}
|
|
|
|
/** function เรียกข้อมูลกลุ่มงาน*/
|
|
function fetchOptionGroup() {
|
|
http
|
|
.get(config.API.orgEmployeeType)
|
|
.then((res) => {
|
|
store.fetchType(res.data.result);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
}
|
|
|
|
/** function fetch รายชื่อข้อมูลทะเบียนประวัติ*/
|
|
async function fetchDataPerson() {
|
|
showLoader();
|
|
dataPersonMain.value = [];
|
|
let queryParams: QueryParams = {
|
|
page: store.formFilter.page,
|
|
pageSize: store.formFilter.pageSize,
|
|
};
|
|
|
|
if (store.formFilter.keyword) {
|
|
queryParams = Object.assign({}, queryParams, {
|
|
searchField: store.formFilter.searchType,
|
|
searchKeyword: store.formFilter.keyword.trim(),
|
|
});
|
|
}
|
|
|
|
if (store.labelOption.posLevel != "ทั้งหมด") {
|
|
queryParams = Object.assign({}, queryParams, {
|
|
posLevel: store.labelOption.posLevel,
|
|
});
|
|
}
|
|
|
|
if (store.labelOption.posType != "ทั้งหมด") {
|
|
queryParams = Object.assign({}, queryParams, {
|
|
posType: store.labelOption.posType,
|
|
});
|
|
}
|
|
|
|
if (store.formFilter.isProbation != null) {
|
|
queryParams.isProbation = store.formFilter.isProbation;
|
|
}
|
|
|
|
if (store.formFilter.isShowRetire != null) {
|
|
queryParams.isRetire = store.formFilter.isShowRetire;
|
|
queryParams.retireType = queryParams.isRetire
|
|
? store.formFilter.retireType
|
|
: undefined;
|
|
}
|
|
|
|
if (empType.value !== "officer") {
|
|
queryParams.type = empType.value;
|
|
}
|
|
|
|
if (store.formFilter.node !== null && store.formFilter.nodeId !== null) {
|
|
queryParams.node = store.formFilter.node;
|
|
queryParams.nodeId = store.formFilter.nodeId;
|
|
}
|
|
|
|
if (store.formFilter.nodeId) {
|
|
queryParams.isAll = store.formFilter.isAll;
|
|
}
|
|
|
|
if (store.formFilter.dateAppoint) {
|
|
queryParams.sortBy =
|
|
empType.value !== "officer"
|
|
? "profileEmployee.dateAppoint"
|
|
: "profile.dateAppoint";
|
|
queryParams.sort = store.formFilter.dateAppoint;
|
|
}
|
|
|
|
await http
|
|
.get(
|
|
config.API.registryNew(empType.value !== "officer" ? "-employee" : ""),
|
|
{ params: queryParams }
|
|
)
|
|
.then(async (res) => {
|
|
const dataList = await res.data.result.data;
|
|
dataPersonMain.value = dataList;
|
|
|
|
maxPage.value = Math.ceil(
|
|
res.data.result.total / store.formFilter.pageSize
|
|
);
|
|
total.value = res.data.result.total;
|
|
isShowBtnFilter.value = true;
|
|
if (dataList) {
|
|
insertAvatar(dataList).then(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
hideLoader();
|
|
})
|
|
.finally(() => {});
|
|
}
|
|
|
|
/**
|
|
* function fetch รูปโปรไฟล์
|
|
* @param items ข้อมูลคน
|
|
*/
|
|
async function insertAvatar(items: DataPerson[]) {
|
|
await Promise.all(
|
|
items.map(async (x: DataPerson, index: number) => {
|
|
try {
|
|
if (x.avatarName != null) {
|
|
const img = await http.get(
|
|
config.API.fileByFile(
|
|
"ทะเบียนประวัติ",
|
|
"โปรไฟล์",
|
|
x.id,
|
|
x.avatarName
|
|
)
|
|
);
|
|
dataPersonMain.value[index] = {
|
|
...x,
|
|
avatar: img.data.downloadUrl,
|
|
};
|
|
} else {
|
|
dataPersonMain.value[index] = {
|
|
...x,
|
|
avatar: avatar,
|
|
};
|
|
}
|
|
} catch (error) {
|
|
dataPersonMain.value[index] = {
|
|
...x,
|
|
avatar: avatar,
|
|
};
|
|
}
|
|
})
|
|
);
|
|
}
|
|
|
|
/** funciotn ค้นหาข้อมูล */
|
|
function onclickSearch() {
|
|
store.formFilter.page = 1;
|
|
store.formFilter.keyword =
|
|
store.formFilter.keyword === null ? "" : store.formFilter.keyword;
|
|
fetchDataPerson();
|
|
}
|
|
|
|
/**
|
|
* function เลือกประเภทข้าราชการ
|
|
* @param item ประเภทข้าราชการ
|
|
*/
|
|
function selectType() {
|
|
empType.value = route.name == "registryNew" ? "officer" : "perm";
|
|
store.formFilter.isShowRetire = false;
|
|
store.labelOption.retireType = "ทั้งหมด";
|
|
store.formFilter.retireType = null;
|
|
store.formFilter.keyword = "";
|
|
if (empType.value !== "officer") {
|
|
store.formFilter.isProbation = null;
|
|
fetchOptionGroup();
|
|
} else {
|
|
store.formFilter.isProbation = false;
|
|
fetchType();
|
|
}
|
|
|
|
// เช็ค store ถ้าเปลี่ยนประเภททะเบียนประวัติ ให้ล่างค่า filter ใหม่
|
|
if (store.formFilter.type != empType.value) {
|
|
store.labelOption.posType = "ทั้งหมด";
|
|
store.labelOption.posLevel = "ทั้งหมด";
|
|
store.labelOption.sortName = "ลำดับการแสดงผล";
|
|
store.formFilter.type = empType.value;
|
|
store.formFilter.dateAppoint = "";
|
|
store.labelOption.node =
|
|
empType.value === "officer"
|
|
? "เลือกหน่วยงาน/ส่วนราชการ"
|
|
: "เลือกหน่วยงาน";
|
|
store.formFilter.searchType = "fullName";
|
|
} else {
|
|
// แต่ถ้าประเภทเดิมระบบจะใช้ filter เดิมที่เคยค้นหาไว้
|
|
if (
|
|
store.formFilter.keyword != "" ||
|
|
store.labelOption.posType != "ทั้งหมด" ||
|
|
store.labelOption.posLevel != "ทั้งหมด" ||
|
|
store.formFilter.isShowRetire ||
|
|
store.formFilter.isProbation ||
|
|
store.formFilter.nodeId != null ||
|
|
store.formFilter.dateAppoint != ""
|
|
) {
|
|
store.formFilter.page = 1;
|
|
fetchDataPerson();
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* function เลือกประเภทตำแหน่ง
|
|
* @param item ประเภทตำแหน่ง
|
|
*/
|
|
function selectPosType(item: DataOption) {
|
|
const dataType = store.posTypeMain.find((e: DataType) => e.id === item.id);
|
|
const shortName =
|
|
empType.value === "officer" ? "" : dataType?.posTypeShortName;
|
|
|
|
store.fetchLevel(dataType?.posLevels, shortName);
|
|
store.labelOption.posType = item.name;
|
|
store.labelOption.posLevel = "ทั้งหมด";
|
|
store.formFilter.page = 1;
|
|
fetchDataPerson();
|
|
}
|
|
|
|
/**
|
|
* function เลือกประเภทตำแหน่ง
|
|
* @param item ประเภทระดับ
|
|
*/
|
|
function selectPosLevel(item: DataOption) {
|
|
store.labelOption.posLevel = item.name;
|
|
store.formFilter.page = 1;
|
|
fetchDataPerson();
|
|
}
|
|
|
|
/**
|
|
* function เลือกประเภทตำแหน่ง
|
|
* @param item ประเภทระดับ
|
|
*/
|
|
function selectRetireType(item: DataOption) {
|
|
store.labelOption.retireType = item.name;
|
|
store.formFilter.page = 1;
|
|
store.formFilter.retireType = item.id;
|
|
fetchDataPerson();
|
|
}
|
|
|
|
function selectDisplayOrderType(item: DataOption) {
|
|
store.labelOption.sortName = item.name;
|
|
store.formFilter.page = 1;
|
|
store.formFilter.dateAppoint = item.id;
|
|
fetchDataPerson();
|
|
}
|
|
|
|
/**
|
|
* function เคลีย์ตัวเลือก
|
|
* @param t ประเภทตัวเลือก
|
|
*/
|
|
function clearSelect(t: string) {
|
|
if (t === "posType") {
|
|
store.labelOption.posType = "ทั้งหมด";
|
|
store.labelOption.posLevel = "ทั้งหมด";
|
|
} else if (t === "posLevel") {
|
|
store.labelOption.posLevel = "ทั้งหมด";
|
|
} else if (t === "retireYear") {
|
|
store.labelOption.retireYear = "";
|
|
} else if (t === "rangeYear") {
|
|
store.formFilter.rangeYear.min = 0;
|
|
store.formFilter.rangeYear.max = 60;
|
|
} else if (t === "org") {
|
|
nodeData.node = null;
|
|
nodeData.nodeId = null;
|
|
store.formFilter.node = null;
|
|
store.formFilter.nodeId = null;
|
|
store.labelOption.node =
|
|
empType.value === "officer"
|
|
? "เลือกหน่วยงาน/ส่วนราชการ"
|
|
: "เลือกหน่วยงาน";
|
|
} else if (t === "retireType") {
|
|
store.labelOption.retireType = "ทั้งหมด";
|
|
store.formFilter.retireType = null;
|
|
}
|
|
store.formFilter.page = 1;
|
|
fetchDataPerson();
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันดึงข้อโครงสร้าง
|
|
*/
|
|
async function fetchTree() {
|
|
const data = await fetchStructureTree(route.meta.Key as string);
|
|
if (store.routerName !== route.name) {
|
|
store.formFilter.node = null;
|
|
store.formFilter.nodeId = null;
|
|
store.routerName = route.name ? route.name : "";
|
|
}
|
|
if (data) {
|
|
isLoad.value = true;
|
|
node.value = data;
|
|
}
|
|
}
|
|
|
|
/** ค้นหาข้อมูลรายชื่อข้อมูลทะเบียนประวัติตามหน่วยงาน/ส่วนราชการ*/
|
|
function sendNode() {
|
|
nodeData.node = store.formFilter.node;
|
|
nodeData.nodeId = store.formFilter.nodeId;
|
|
store.labelOption.node = nodeData.name;
|
|
selectNode.value = false;
|
|
fetchDataPerson();
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันเลือกหน่วยงาน/ส่วนราชการ
|
|
* @param data ข้อมูลหน่วยงาน/ส่วนราชการที่ต้องการค้นหาร
|
|
* เพื่อค้นหาข้อมูลตามหน่วยงาน/ส่วนราชการ
|
|
*/
|
|
function updateSelectedTreeMain(data: DataStructureTree) {
|
|
if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
|
|
store.formFilter.node = null;
|
|
store.formFilter.nodeId = null;
|
|
nodeData.name =
|
|
empType.value === "officer"
|
|
? "เลือกหน่วยงาน/ส่วนราชการ"
|
|
: "เลือกหน่วยงาน";
|
|
} else {
|
|
store.formFilter.node = data.orgLevel;
|
|
store.formFilter.nodeId = data.orgTreeId;
|
|
nodeData.name = data.orgName;
|
|
}
|
|
}
|
|
|
|
/** callback function เมื่อมีการเปิด popup*/
|
|
watch(selectNode, () => {
|
|
isLoad.value && hideLoader();
|
|
});
|
|
|
|
function getSearch() {
|
|
store.formFilter.page = 1;
|
|
fetchDataPerson();
|
|
}
|
|
|
|
function goToAdvancedSearch() {
|
|
router.push("/report/registry");
|
|
}
|
|
|
|
/** hook เมื่อมีการเรียกใช้ Components*/
|
|
onMounted(async () => {
|
|
await Promise.all([selectType(), fetchTree()]);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-card class="q-mt-md">
|
|
<q-card-section class="card-img q-pb-lg">
|
|
<div class="text-h5 text-center q-py-md text-weight-medium">
|
|
ค้นหาข้อมูลทะเบียนประวัติ
|
|
{{
|
|
empType === "officer" ? "ข้าราชการ กทม. สามัญ" : "ลูกจ้างประจำ กทม."
|
|
}}
|
|
</div>
|
|
<div class="row justify-center">
|
|
<div
|
|
class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders"
|
|
>
|
|
<q-form @submit="onclickSearch">
|
|
<div class="bg-white row col-12 q-pa-none rounded-borders">
|
|
<div class="row col-11">
|
|
<div class="col-3 row wrap">
|
|
<q-select
|
|
borderless
|
|
bg-color="white"
|
|
v-model="store.formFilter.searchType"
|
|
:options="store.searchTypeOption"
|
|
emit-value
|
|
dense
|
|
emit-option
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
class="selectS col-11 q-px-md"
|
|
color="deep-orange"
|
|
dropdown-icon="mdi-chevron-down"
|
|
/>
|
|
<q-separator vertical />
|
|
</div>
|
|
<q-input
|
|
borderless
|
|
dense
|
|
bg-color="white"
|
|
v-model="store.formFilter.keyword"
|
|
clearable
|
|
placeholder="ค้นหา"
|
|
class="col-9 q-pr-md"
|
|
@clear="store.formFilter.keyword = ''"
|
|
>
|
|
<template v-slot:before>
|
|
<q-icon name="search" color="deep-orange" />
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
<div class="row col-1">
|
|
<q-btn
|
|
class="fit btnSearch"
|
|
unelevated
|
|
color="deep-orange"
|
|
label="ค้นหา"
|
|
type="submit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
|
|
<div class="row q-mt-sm q-gutter-sm">
|
|
<q-btn-dropdown
|
|
flat
|
|
rounded
|
|
dense
|
|
label-color="white"
|
|
dropdown-icon="mdi-chevron-down"
|
|
class="q-pl-sm"
|
|
@click="() => ((selectNode = true), showLoader())"
|
|
>
|
|
<template v-slot:label>
|
|
{{
|
|
`${
|
|
store.labelOption.node !== "เลือกหน่วยงาน"
|
|
? store.labelOption.node
|
|
: empType === "officer"
|
|
? "เลือกหน่วยงาน/ส่วนราชการ"
|
|
: "เลือกหน่วยงาน"
|
|
}`
|
|
}}
|
|
<q-btn
|
|
v-if="
|
|
store.labelOption.node !== 'เลือกหน่วยงาน' &&
|
|
store.labelOption.node !== 'เลือกหน่วยงาน/ส่วนราชการ'
|
|
"
|
|
size="10px"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="close"
|
|
@click.stop.prevent="clearSelect('org')"
|
|
/>
|
|
</template>
|
|
</q-btn-dropdown>
|
|
|
|
<q-toggle
|
|
v-if="store.formFilter.nodeId"
|
|
v-model="store.formFilter.isAll"
|
|
color="primary"
|
|
label="แสดงทุกตำแหน่ง"
|
|
class="q-pr-sm"
|
|
@update:model-value="getSearch"
|
|
>
|
|
<q-tooltip
|
|
>แสดงทุกตำแหน่งที่อยู่ภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
|
|
>
|
|
</q-toggle>
|
|
|
|
<q-separator inset vertical class="lineFil" />
|
|
|
|
<q-btn-dropdown
|
|
rounded
|
|
flat
|
|
dense
|
|
label-color="white"
|
|
dropdown-icon="mdi-chevron-down"
|
|
class="q-px-sm"
|
|
>
|
|
<template v-slot:label>
|
|
{{
|
|
store.labelOption.posType !== "ทั้งหมด"
|
|
? store.labelOption.posType
|
|
: empType === "officer"
|
|
? `ตำแหน่งประเภท${store.labelOption.posType}`
|
|
: `กลุ่มงาน${store.labelOption.posType}`
|
|
}}
|
|
<q-btn
|
|
v-if="store.labelOption.posType !== 'ทั้งหมด'"
|
|
size="10px"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="close"
|
|
@click.stop.prevent="clearSelect('posType')"
|
|
/>
|
|
</template>
|
|
<q-list>
|
|
<q-item
|
|
v-for="(item, index) in store.posTypeOps"
|
|
: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-separator inset vertical class="lineFil" /> -->
|
|
<q-btn-dropdown
|
|
flat
|
|
dense
|
|
rounded
|
|
label-color="white"
|
|
dropdown-icon="mdi-chevron-down"
|
|
class="q-px-sm"
|
|
:disable="store.labelOption.posType === 'ทั้งหมด' ? true : false"
|
|
>
|
|
<template v-slot:label>
|
|
{{
|
|
store.labelOption.posLevel !== "ทั้งหมด"
|
|
? store.labelOption.posLevel
|
|
: empType === "officer"
|
|
? `ระดับ${store.labelOption.posLevel}`
|
|
: `ระดับชั้นงาน${store.labelOption.posLevel}`
|
|
}}
|
|
<q-btn
|
|
size="10px"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="close"
|
|
v-if="store.labelOption.posLevel !== 'ทั้งหมด'"
|
|
@click.stop.prevent="clearSelect('posLevel')"
|
|
/>
|
|
</template>
|
|
<q-list
|
|
:style="store.posLevelOps.length > 9 ? 'height: 450px' : ''"
|
|
>
|
|
<q-item
|
|
v-for="(item, index) in store.posLevelOps"
|
|
: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>
|
|
|
|
<q-space />
|
|
<div class="q-pt-sm q-pr-sm">
|
|
<!-- <a href="/report/registry" class="text-white">
|
|
การค้นหาขั้นสูง
|
|
<q-tooltip
|
|
>ไปยังหน้าการค้นหาขั้นสูง (Advanced search)</q-tooltip
|
|
>
|
|
</a> -->
|
|
<q-btn
|
|
flat
|
|
@click="goToAdvancedSearch"
|
|
class="text-white"
|
|
style="text-decoration: underline"
|
|
label="การค้นหาขั้นสูง"
|
|
>
|
|
<q-tooltip
|
|
>ไปยังหน้าการค้นหาขั้นสูง (Advanced search)</q-tooltip
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<q-separator
|
|
inset
|
|
vertical
|
|
class="lineFil"
|
|
v-if="empType !== 'officer' && store.formFilter.nodeId"
|
|
/>
|
|
|
|
<q-toggle
|
|
v-if="empType !== 'officer' && store.formFilter.nodeId"
|
|
v-model="store.formFilter.isAll"
|
|
color="primary"
|
|
label="แสดงตำแหน่งทั้งหมด"
|
|
@update:model-value="getSearch"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="row q-gutter-sm justify-start"
|
|
v-if="empType !== 'officer'"
|
|
>
|
|
<q-toggle
|
|
v-model="store.formFilter.isShowRetire"
|
|
color="primary"
|
|
label="แสดงข้อมูลผู้พ้นจากราชการ"
|
|
class="q-pr-sm"
|
|
@update:model-value="getSearch"
|
|
/>
|
|
<q-btn-dropdown
|
|
v-if="store.formFilter.isShowRetire"
|
|
rounded
|
|
flat
|
|
dense
|
|
label-color="white"
|
|
dropdown-icon="mdi-chevron-down"
|
|
class="q-px-sm"
|
|
>
|
|
<template v-slot:label>
|
|
{{
|
|
store.labelOption.retireType !== "ทั้งหมด"
|
|
? store.labelOption.retireType
|
|
: `${store.labelOption.retireType}`
|
|
}}
|
|
<q-btn
|
|
v-if="store.labelOption.retireType !== 'ทั้งหมด'"
|
|
size="10px"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="close"
|
|
@click.stop.prevent="clearSelect('retireType')"
|
|
/>
|
|
</template>
|
|
<q-list>
|
|
<q-item
|
|
v-for="(item, index) in store.retireTypeEmpOps"
|
|
:key="index"
|
|
clickable
|
|
v-close-popup
|
|
@click="selectRetireType(item)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>{{ item.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
|
|
<q-separator inset vertical class="lineFil" />
|
|
|
|
<q-btn-dropdown
|
|
rounded
|
|
flat
|
|
dense
|
|
label-color="white"
|
|
dropdown-icon="mdi-chevron-down"
|
|
class="q-px-sm"
|
|
>
|
|
<template v-slot:label>
|
|
{{
|
|
`ลำดับการแสดผล ${
|
|
store.formFilter.dateAppoint
|
|
? store.formFilter.dateAppoint === "ASC"
|
|
? "เก่า-ล่าสุด"
|
|
: "ล่าสุด-เก่า"
|
|
: ""
|
|
}`
|
|
}}
|
|
</template>
|
|
<q-list>
|
|
<q-item
|
|
v-for="(item, index) in store.displayOrderOps"
|
|
:key="index"
|
|
clickable
|
|
v-close-popup
|
|
@click="selectDisplayOrderType(item)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>{{ item.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
|
|
<div
|
|
v-if="empType === 'officer'"
|
|
class="row q-gutter-sm justify-start"
|
|
>
|
|
<q-toggle
|
|
v-model="store.formFilter.isProbation"
|
|
color="primary"
|
|
label="ทดลองปฏิบัติหน้าที่ราชการ"
|
|
class="q-pr-sm"
|
|
@update:model-value="getSearch"
|
|
/>
|
|
|
|
<q-separator inset vertical class="lineFil" />
|
|
|
|
<q-toggle
|
|
v-model="store.formFilter.isShowRetire"
|
|
color="primary"
|
|
label="แสดงข้อมูลผู้พ้นจากราชการ"
|
|
class="q-pr-sm"
|
|
@update:model-value="getSearch"
|
|
/>
|
|
|
|
<q-btn-dropdown
|
|
v-if="store.formFilter.isShowRetire"
|
|
rounded
|
|
flat
|
|
dense
|
|
label-color="white"
|
|
dropdown-icon="mdi-chevron-down"
|
|
>
|
|
<template v-slot:label>
|
|
{{
|
|
store.labelOption.retireType !== "ทั้งหมด"
|
|
? store.labelOption.retireType
|
|
: `${store.labelOption.retireType}`
|
|
}}
|
|
<q-btn
|
|
v-if="store.labelOption.retireType !== 'ทั้งหมด'"
|
|
size="10px"
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="close"
|
|
@click.stop.prevent="clearSelect('retireType')"
|
|
/>
|
|
</template>
|
|
<q-list>
|
|
<q-item
|
|
v-for="(item, index) in store.retireTypeOps"
|
|
:key="index"
|
|
clickable
|
|
v-close-popup
|
|
@click="selectRetireType(item)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>{{ item.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
|
|
<q-separator inset vertical class="lineFil" />
|
|
|
|
<!-- <q-toggle
|
|
v-if="store.formFilter.nodeId"
|
|
v-model="store.formFilter.isAll"
|
|
color="primary"
|
|
label="แสดงตำแหน่งทั้งหมด"
|
|
@update:model-value="getSearch"
|
|
/> -->
|
|
|
|
<q-btn-dropdown
|
|
rounded
|
|
flat
|
|
dense
|
|
label-color="white"
|
|
dropdown-icon="mdi-chevron-down"
|
|
class="q-px-sm"
|
|
>
|
|
<template v-slot:label>
|
|
{{ store.labelOption.sortName }}
|
|
</template>
|
|
<q-list>
|
|
<q-item
|
|
v-for="(item, index) in store.displayOrderOps"
|
|
:key="index"
|
|
clickable
|
|
v-close-popup
|
|
@click="selectDisplayOrderType(item)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>{{ item.name }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
<!-- <div class="row justify-center">
|
|
<a href="/report/registry" class="text-white"> Advanced search </a>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-section>
|
|
<!-- Components รายการข้อมูลทะเบียนประวัติ -->
|
|
<!-- v-model:mode="mode" -->
|
|
<div>
|
|
<TableView
|
|
v-model:form-filter="store.formFilter"
|
|
v-model:max-page="maxPage"
|
|
:rows="dataPersonMain"
|
|
:fetch-data="fetchDataPerson"
|
|
:fetch-type="fetchType"
|
|
:total="total"
|
|
:is-filter="isShowBtnFilter"
|
|
:emp-type="empType"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<!-- แสดง dialog เลือกหน่วยงาน/ส่วนราชการ -->
|
|
<q-dialog v-model="selectNode" persistent>
|
|
<q-card style="width: 850px; max-width: 80vw">
|
|
<DialogHeader
|
|
tittle="เลือกหน่วยงาน/ส่วนราชการ"
|
|
:close="() => (selectNode = false)"
|
|
/>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-section class="q-pa-sm">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-12">
|
|
<q-input dense outlined v-model="filterMain" label="ค้นหา">
|
|
<template v-slot:append>
|
|
<q-icon
|
|
v-if="filterMain !== ''"
|
|
name="clear"
|
|
class="cursor-pointer"
|
|
@click="filterMain = ''"
|
|
/>
|
|
<q-icon v-else name="search" color="grey-5" />
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-tree
|
|
class="tree-container"
|
|
dense
|
|
:nodes="node"
|
|
node-key="orgTreeName"
|
|
label-key="labelName"
|
|
v-model:expanded="expanded"
|
|
:filter="filterMain.trim()"
|
|
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
|
no-nodes-label="ไม่มีข้อมูล"
|
|
v-model:selected="nodeData.nodeId"
|
|
>
|
|
<template v-slot:default-header="prop">
|
|
<q-item
|
|
clickable
|
|
@click.stop="updateSelectedTreeMain(prop.node)"
|
|
:active="store.formFilter.nodeId === prop.node.orgTreeId"
|
|
active-class="my-list-link text-primary text-weight-medium"
|
|
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
|
>
|
|
<div>
|
|
<div class="text-weight-medium">
|
|
{{ prop.node.orgTreeName }}
|
|
</div>
|
|
<div class="text-weight-light text-grey-8">
|
|
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
|
|
{{
|
|
prop.node.orgTreeShortName == null
|
|
? null
|
|
: prop.node.orgTreeShortName
|
|
}}
|
|
</div>
|
|
</div>
|
|
</q-item>
|
|
</template>
|
|
</q-tree>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn label="ค้นหา" color="secondary" @click="sendNode">
|
|
<q-tooltip>ค้นหา</q-tooltip></q-btn
|
|
>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card-img {
|
|
background: url("@/assets/registry-banner.png");
|
|
background-size: cover;
|
|
color: white;
|
|
}
|
|
|
|
: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;
|
|
}
|
|
|
|
.btnSearch {
|
|
border-radius: 0px 4px 4px 0px;
|
|
}
|
|
.bg-Search {
|
|
background: #00000015;
|
|
}
|
|
.lineFil {
|
|
transform: rotate(30deg);
|
|
height: 20px;
|
|
margin-top: 15px;
|
|
background: #ffffff7b !important;
|
|
}
|
|
.selectS .q-field__control .q-field__append .q-icon {
|
|
color: #ff5722 !important;
|
|
}
|
|
.tree-container {
|
|
overflow: auto;
|
|
height: 73vh;
|
|
border: 1px solid #e6e6e7;
|
|
border-radius: 10px;
|
|
}
|
|
.my-list-link {
|
|
color: rgb(118, 168, 222);
|
|
border-radius: 5px;
|
|
background: #a3d3fb48 !important;
|
|
font-weight: 600;
|
|
border: 1px solid rgba(175, 185, 196, 0.217);
|
|
}
|
|
</style>
|