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

แก้ popup เป็น page

Browse source
This commit is contained in:
setthawutttty 2024-10-29 14:41:01 +07:00
parent fb9ee230b6
commit 9fd73ec8db
5 changed files with 274 additions and 266 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
View file

@ -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>

486
src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue → src/modules/04_registryPerson/components/requestEdit/requestEditPage.vue
View file

@ -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>

12
src/modules/04_registryPerson/router.ts
View file

@ -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",

12
src/modules/04_registryPerson/store.ts
View file

@ -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,
};
});

15
src/modules/04_registryPerson/views/requestEditView.vue
View file

@ -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>