Merge branch 'develop' of https://github.com/Frappet/bma-ehr-frontend into develop
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
e1969f744b
9 changed files with 319 additions and 286 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -14,9 +15,8 @@ import type {
|
|||
} from "@/modules/04_registryPerson/interface/index/Main";
|
||||
import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";
|
||||
|
||||
import DialogEditIDP from "@/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const store = useRequestEditStore();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
|
||||
|
|
@ -24,8 +24,6 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
|||
const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
|
||||
const keyword = ref<string>(""); //คำค้นหา
|
||||
const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายการสถานะ
|
||||
const modalEdit = ref<boolean>(false); //แก้ไขสถานะคำร้อง
|
||||
const requestId = ref<string>(""); //id รายการแก้ไข
|
||||
|
||||
//Table
|
||||
const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
|
||||
|
|
@ -208,8 +206,7 @@ function updatePageSizePagination(newPagination: Pagination) {
|
|||
* @param id รายการคำร้อง
|
||||
*/
|
||||
function onclickEdit(id: string) {
|
||||
modalEdit.value = true;
|
||||
requestId.value = id;
|
||||
router.push(`/registry-officer/request-edit-page/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -427,12 +424,6 @@ onMounted(() => {
|
|||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<DialogEditIDP
|
||||
v-model:modal="modalEdit"
|
||||
v-model:request-id="requestId"
|
||||
:fetch-data-list="fetchData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
|
||||
|
|
@ -16,6 +17,8 @@ import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/
|
|||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useRequestEditStore();
|
||||
const {
|
||||
dialogConfirm,
|
||||
|
|
@ -26,14 +29,10 @@ const {
|
|||
date2Thai,
|
||||
} = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
|
||||
const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
|
||||
const { fetchDataList } = defineProps({
|
||||
fetchDataList: { type: Function, require: true },
|
||||
});
|
||||
const requestId = ref<string>(route.params.id as string);
|
||||
|
||||
const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
|
||||
const isDone = ref<string>('')
|
||||
const isDone = ref<string>("");
|
||||
//ฟอร์มข้อมูลการพัฒนารายบุคคล
|
||||
const formData = reactive<FormDataIDP>({
|
||||
topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
|
||||
|
|
@ -162,7 +161,7 @@ function fetchDataByid(id: string) {
|
|||
formData.createdFullName = data.createdFullName;
|
||||
formData.createdAt = data.createdAt;
|
||||
|
||||
isDone.value = data.status
|
||||
isDone.value = data.status;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -196,9 +195,8 @@ function onSubmit() {
|
|||
reason: formData.reason,
|
||||
})
|
||||
.then(async () => {
|
||||
await fetchDataList?.();
|
||||
router.push("/registry-officer/request-edit");
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
closeDialog();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -214,7 +212,6 @@ function onSubmit() {
|
|||
* และกำหนด formData เป็นค่า Defult
|
||||
*/
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
formData.topic = "";
|
||||
formData.developmentProjects = [];
|
||||
formData.reasonDevelopment70 = "";
|
||||
|
|
@ -244,251 +241,258 @@ function classInput(val: boolean) {
|
|||
* ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
|
||||
* fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
|
||||
*/
|
||||
watch(modal, (val) => {
|
||||
if (val) {
|
||||
fetchDataByid(requestId.value);
|
||||
}
|
||||
onMounted(() => {
|
||||
fetchDataByid(requestId.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 65%">
|
||||
<DialogHeader
|
||||
:tittle="`${formData.createdFullName}
|
||||
(ขอแก้ไขเมื่อ ${
|
||||
formData.createdAt ? date2Thai(formData.createdAt, true, true) : ''
|
||||
})`"
|
||||
:close="closeDialog"
|
||||
<div class="row items-center">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
<q-separator />
|
||||
{{
|
||||
`${formData.createdFullName}
|
||||
(ขอแก้ไขเมื่อ ${
|
||||
formData.createdAt ? date2Thai(formData.createdAt, true, true) : ""
|
||||
})`
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- สถานะคำร้อง -->
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<q-card-section v-if="isDone == 'PENDING'">
|
||||
<q-card bordered class="col-12">
|
||||
<div class="row q-pa-md q-col-gutter-sm">
|
||||
<!-- สถานะ -->
|
||||
<div class="col-4">
|
||||
<q-select
|
||||
:class="classInput(isReadOnly)"
|
||||
v-model="formData.status"
|
||||
label="สถานะ"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
:options="statusOption"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
use-input
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@filter="(inputValue:string,
|
||||
<q-card flat>
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<q-card-section v-if="isDone == 'PENDING'">
|
||||
<q-card bordered class="col-12">
|
||||
<div class="row q-pa-md q-col-gutter-sm">
|
||||
<!-- สถานะ -->
|
||||
<div class="col-4">
|
||||
<q-select
|
||||
:class="classInput(isReadOnly)"
|
||||
v-model="formData.status"
|
||||
label="สถานะ"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
:options="statusOption"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
use-input
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterOption(inputValue, doneFn
|
||||
) "
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<!-- หมายเหตุ -->
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
:class="classInput(isReadOnly)"
|
||||
v-model="formData.reason"
|
||||
label="หมายเหตุ"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<!-- รายละเอียด -->
|
||||
<q-card-section class="q-pt-sm">
|
||||
<q-card bordered class="col-12">
|
||||
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
||||
รายละเอียด
|
||||
<!-- หมายเหตุ -->
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
:class="classInput(isReadOnly)"
|
||||
v-model="formData.reason"
|
||||
label="หมายเหตุ"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<div class="row q-col-gutter-sm q-pa-md">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.topic"
|
||||
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
วิธีการพัฒนา
|
||||
</div>
|
||||
<div class="row col-12 q-ml-md q-col-gutter-sm">
|
||||
<!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment70"
|
||||
type="checkbox"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other1')"
|
||||
>
|
||||
<div class="col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment70"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment20"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other2')"
|
||||
>
|
||||
<div class="col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment20"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 10 การฝึกอบรมอื่นๆ -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
10 การฝึกอบรมอื่นๆ
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment10"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other3')"
|
||||
>
|
||||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment10"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- เป้าหมายการนำไปพัฒนางาน -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentTarget"
|
||||
label="เป้าหมายการนำไปพัฒนางาน"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- วิธีการวัดผลการพัฒนา -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentResults"
|
||||
label="วิธีการวัดผลการพัฒนา"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- รายงานผลการพัฒนา -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentReport"
|
||||
label="รายงานผลการพัฒนา"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</q-form>
|
||||
|
||||
<!-- รายละเอียด -->
|
||||
<q-card-section class="q-pt-sm">
|
||||
<q-card bordered class="col-12">
|
||||
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
||||
รายละเอียด
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-col-gutter-sm q-pa-md">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.topic"
|
||||
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
วิธีการพัฒนา
|
||||
</div>
|
||||
<div class="row col-12 q-ml-md q-col-gutter-sm">
|
||||
<!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment70"
|
||||
type="checkbox"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other1')"
|
||||
>
|
||||
<div class="col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment70"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment20"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other2')"
|
||||
>
|
||||
<div class="col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment20"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 10 การฝึกอบรมอื่นๆ -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
10 การฝึกอบรมอื่นๆ
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment10"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other3')"
|
||||
>
|
||||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment10"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- เป้าหมายการนำไปพัฒนางาน -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentTarget"
|
||||
label="เป้าหมายการนำไปพัฒนางาน"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- วิธีการวัดผลการพัฒนา -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentResults"
|
||||
label="วิธีการวัดผลการพัฒนา"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- รายงานผลการพัฒนา -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentReport"
|
||||
label="รายงานผลการพัฒนา"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -8,6 +8,8 @@ const detailPage = () =>
|
|||
// รายการคำร้องขอแก้ไขทะเบียนประวัติ
|
||||
const requestEdit = () =>
|
||||
import("@/modules/04_registryPerson/views/requestEditView.vue");
|
||||
const requestEditPage = () =>
|
||||
import("@/modules/04_registryPerson/components/requestEdit/requestEditPage.vue");
|
||||
const Page01_Detail = () =>
|
||||
import(
|
||||
"@/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue"
|
||||
|
|
@ -64,6 +66,16 @@ export default [
|
|||
Role: "STAFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/registry-officer/request-edit-page/:id",
|
||||
name: "registryNewRequestEditPage",
|
||||
component: requestEditPage,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: "SYS_REGISTRY_OFFICER",
|
||||
Role: "STAFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/registry-officer/request-edit/personal/:id",
|
||||
name: "registryNewRequestEdit/personal",
|
||||
|
|
|
|||
|
|
@ -25,8 +25,12 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
|
|||
const posLevelOps = ref<DataOption[]>([]);
|
||||
const yearOps = ref<DataOption[]>([]);
|
||||
const mode = ref<string>("table");
|
||||
const isLeave = ref<boolean>(false)
|
||||
|
||||
const isLeave = ref<boolean>(false);
|
||||
const tabs = ref<string>("Main");
|
||||
const tabsManu = ref<DataOption[]>([
|
||||
{ name: "ข้อมูลส่วนตัว", id: "Main" },
|
||||
{ name: "ข้อมูลการพัฒนารายบุคคล (IDP)", id: "IDP" },
|
||||
]);
|
||||
function fetchType(data: DataType[]) {
|
||||
posTypeMain.value = data;
|
||||
const list: DataOption[] = data.map((e: DataType) => ({
|
||||
|
|
@ -88,6 +92,8 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
|
|||
mode,
|
||||
formFilter,
|
||||
labelOption,
|
||||
isLeave
|
||||
isLeave,
|
||||
tabs,
|
||||
tabsManu,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,18 +3,13 @@ import { ref } from "vue";
|
|||
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
|
||||
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
|
||||
|
||||
import TabInformation from "@/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue";
|
||||
import TabIDP from "@/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const tabs = ref<string>("Main");
|
||||
const tabsManu = ref<DataOption[]>([
|
||||
{ name: "ข้อมูลส่วนตัว", id: "Main" },
|
||||
{ name: "ข้อมูลการพัฒนารายบุคคล (IDP)", id: "IDP" },
|
||||
]);
|
||||
const store = useRegistryNewDataStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -38,14 +33,14 @@ const tabsManu = ref<DataOption[]>([
|
|||
<q-card-section style="padding: 0px">
|
||||
<q-separator />
|
||||
<q-tabs
|
||||
v-model="tabs"
|
||||
v-model="store.tabs"
|
||||
inline-label
|
||||
align="left"
|
||||
indicator-color="primary"
|
||||
active-color="primary bg-teal-1"
|
||||
>
|
||||
<q-tab
|
||||
v-for="(tab, index) in tabsManu"
|
||||
v-for="(tab, index) in store.tabsManu"
|
||||
:key="index"
|
||||
:name="tab.id"
|
||||
:label="tab.name"
|
||||
|
|
@ -53,7 +48,7 @@ const tabsManu = ref<DataOption[]>([
|
|||
</q-tabs>
|
||||
<q-separator />
|
||||
|
||||
<q-tab-panels v-model="tabs" animated>
|
||||
<q-tab-panels v-model="store.tabs" animated>
|
||||
<q-tab-panel style="padding: 0px" name="Main">
|
||||
<TabInformation />
|
||||
</q-tab-panel>
|
||||
|
|
|
|||
|
|
@ -34,14 +34,17 @@ const paging = ref<boolean>(true);
|
|||
const filterRef2 = ref<any>(null);
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const paging2 = ref<boolean>(true);
|
||||
const fillterStatus = ref<any>([]);
|
||||
const fillter = ref<any>("");
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterKeyword2 = ref<string>("");
|
||||
const rows = ref<FormMainProbation[]>([]);
|
||||
const rows2 = ref<FormMainProbation2[]>([]);
|
||||
const dataUpdate = ref<FormMainProbation[]>([]);
|
||||
const Opfillter = ref<OpfillterTypeSt[]>([]);
|
||||
const Opfillter2 = ref<OpfillterTypeSt[]>([]);
|
||||
const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
|
||||
const formMain = reactive({ keyword: "", pageSize: 10, page: 1 });
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
const modalAdd = ref<boolean>(false);
|
||||
|
|
@ -237,22 +240,22 @@ const columns2 = ref<QTableProps["columns"]>([
|
|||
|
||||
/** get ข้อมูล */
|
||||
async function getpersonalList() {
|
||||
rows.value = [];
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.probationPersonalList() +
|
||||
`?status=${fillter.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filterKeyword.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
rows.value = res.data.data.data;
|
||||
.then(async (res) => {
|
||||
const data = await res.data.data.data;
|
||||
const resTotal = await res.data.data.total;
|
||||
rows.value = data;
|
||||
fillterStatus.value = data;
|
||||
dataUpdate.value = rows.value;
|
||||
Opfillter.value = storeFn.optionStatusProbation;
|
||||
Opfillter2.value = storeFn.optionStatusProbation;
|
||||
|
||||
totalList.value = Math.ceil(
|
||||
res.data.data.total / pagination.value.rowsPerPage
|
||||
);
|
||||
total.value = res.data.data.total;
|
||||
totalList.value = Math.ceil(resTotal / pagination.value.rowsPerPage);
|
||||
total.value = resTotal;
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
@ -288,6 +291,15 @@ function updatePagination(newPagination: any) {
|
|||
formProbation.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePaginationMain(newPagination: any) {
|
||||
pagination.value.page = 1;
|
||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
async function filterKeyword2Fn(page: number) {
|
||||
page !== 1 ? (formProbation.page = 1) : await onclickAddProbation();
|
||||
}
|
||||
|
|
@ -366,6 +378,7 @@ async function clickClose() {
|
|||
function resetFilter() {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
getSearchMain()
|
||||
}
|
||||
|
||||
/** reset ฟิลเตอร์ ใน dialog */
|
||||
|
|
@ -374,6 +387,11 @@ function resetFilter2() {
|
|||
filterRef2.value.focus();
|
||||
}
|
||||
|
||||
function paginationLabel(start: string, end: string, total: string) {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
}
|
||||
|
||||
function paginationLabel2(start: string, end: string, total: string) {
|
||||
if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
|
|
@ -441,14 +459,19 @@ function closeAdd() {
|
|||
topic.value = "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ";
|
||||
}
|
||||
|
||||
function getSearch() {
|
||||
pagination.value.page = 1;
|
||||
getpersonalList();
|
||||
function getSearchMain(){
|
||||
pagination.value.page = 1
|
||||
getpersonalList()
|
||||
}
|
||||
|
||||
watch([() => formProbation.page, () => formProbation.pageSize], () => {
|
||||
onclickAddProbation();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => pagination.value.rowsPerPage,
|
||||
() => {
|
||||
getSearch();
|
||||
async () => {
|
||||
getSearchMain()
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -478,7 +501,7 @@ onMounted(async () => {
|
|||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="getpersonalList()"
|
||||
@update:model-value="getSearchMain()"
|
||||
@filter="filterFn"
|
||||
use-input
|
||||
behavior="menu"
|
||||
|
|
@ -530,7 +553,7 @@ onMounted(async () => {
|
|||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="getSearch"
|
||||
@keydown.enter.prevent="getSearchMain()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
|
|
@ -563,14 +586,15 @@ onMounted(async () => {
|
|||
<d-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="personal_id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[1, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePaginationMain"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ function redirectToPageadd() {
|
|||
/** ล้างค่าใน input */
|
||||
function resetFilter() {
|
||||
filterKeyword.value = "";
|
||||
page.value = 1
|
||||
if (filterRef.value) {
|
||||
filterRef.value.focus();
|
||||
getList();
|
||||
|
|
|
|||
|
|
@ -365,7 +365,7 @@ function filterSelector(val: string, update: Function, refData: string) {
|
|||
|
||||
async function fetchCheckisOfficer() {
|
||||
http
|
||||
.get(config.API.workflowKeycloakSystem(`SALARY_OFFICER`))
|
||||
.get(config.API.workflowKeycloakSystem(`SYS_SALARY_OFFICER`))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
isOfficer.value = data.isOfficer;
|
||||
|
|
|
|||
|
|
@ -363,7 +363,7 @@ function filterSelector(val: string, update: Function, refData: string) {
|
|||
|
||||
async function fetchCheckisOfficer() {
|
||||
http
|
||||
.get(config.API.workflowKeycloakSystem(`SALARY_EMP`))
|
||||
.get(config.API.workflowKeycloakSystem(`SYS_WAGE`))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
isOfficer.value = data.isOfficer;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue