แก้ popup เป็น page
This commit is contained in:
setthawutttty
parent
fb9ee230b6
commit
9fd73ec8db
5 changed files with 274 additions and 266 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, watch } from "vue";
|
import { ref, onMounted, watch } from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
@ -14,9 +15,8 @@ import type {
|
||||||
} from "@/modules/04_registryPerson/interface/index/Main";
|
} from "@/modules/04_registryPerson/interface/index/Main";
|
||||||
import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/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 $q = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
const store = useRequestEditStore();
|
const store = useRequestEditStore();
|
||||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||||
|
|
||||||
|
|
@ -24,8 +24,6 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||||
const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
|
const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
|
||||||
const keyword = ref<string>(""); //คำค้นหา
|
const keyword = ref<string>(""); //คำค้นหา
|
||||||
const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายการสถานะ
|
const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายการสถานะ
|
||||||
const modalEdit = ref<boolean>(false); //แก้ไขสถานะคำร้อง
|
|
||||||
const requestId = ref<string>(""); //id รายการแก้ไข
|
|
||||||
|
|
||||||
//Table
|
//Table
|
||||||
const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
|
const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
|
||||||
|
|
@ -208,8 +206,7 @@ function updatePageSizePagination(newPagination: Pagination) {
|
||||||
* @param id รายการคำร้อง
|
* @param id รายการคำร้อง
|
||||||
*/
|
*/
|
||||||
function onclickEdit(id: string) {
|
function onclickEdit(id: string) {
|
||||||
modalEdit.value = true;
|
router.push(`/registry-officer/request-edit-page/${id}`);
|
||||||
requestId.value = id;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -427,12 +424,6 @@ onMounted(() => {
|
||||||
</d-table>
|
</d-table>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
<DialogEditIDP
|
|
||||||
v-model:modal="modalEdit"
|
|
||||||
v-model:request-id="requestId"
|
|
||||||
:fetch-data-list="fetchData"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, watch } from "vue";
|
import { onMounted, reactive, ref, watch } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
|
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";
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
const store = useRequestEditStore();
|
const store = useRequestEditStore();
|
||||||
const {
|
const {
|
||||||
dialogConfirm,
|
dialogConfirm,
|
||||||
|
|
@ -26,14 +29,10 @@ const {
|
||||||
date2Thai,
|
date2Thai,
|
||||||
} = useCounterMixin();
|
} = useCounterMixin();
|
||||||
|
|
||||||
const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
|
const requestId = ref<string>(route.params.id as string);
|
||||||
const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
|
|
||||||
const { fetchDataList } = defineProps({
|
|
||||||
fetchDataList: { type: Function, require: true },
|
|
||||||
});
|
|
||||||
|
|
||||||
const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
|
const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
|
||||||
const isDone = ref<string>('')
|
const isDone = ref<string>("");
|
||||||
//ฟอร์มข้อมูลการพัฒนารายบุคคล
|
//ฟอร์มข้อมูลการพัฒนารายบุคคล
|
||||||
const formData = reactive<FormDataIDP>({
|
const formData = reactive<FormDataIDP>({
|
||||||
topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
|
topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
|
||||||
|
|
@ -162,7 +161,7 @@ function fetchDataByid(id: string) {
|
||||||
formData.createdFullName = data.createdFullName;
|
formData.createdFullName = data.createdFullName;
|
||||||
formData.createdAt = data.createdAt;
|
formData.createdAt = data.createdAt;
|
||||||
|
|
||||||
isDone.value = data.status
|
isDone.value = data.status;
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
messageError($q, err);
|
messageError($q, err);
|
||||||
|
|
@ -196,9 +195,8 @@ function onSubmit() {
|
||||||
reason: formData.reason,
|
reason: formData.reason,
|
||||||
})
|
})
|
||||||
.then(async () => {
|
.then(async () => {
|
||||||
await fetchDataList?.();
|
router.push("/registry-officer/request-edit");
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
closeDialog();
|
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
messageError($q, err);
|
messageError($q, err);
|
||||||
|
|
@ -214,7 +212,6 @@ function onSubmit() {
|
||||||
* และกำหนด formData เป็นค่า Defult
|
* และกำหนด formData เป็นค่า Defult
|
||||||
*/
|
*/
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
modal.value = false;
|
|
||||||
formData.topic = "";
|
formData.topic = "";
|
||||||
formData.developmentProjects = [];
|
formData.developmentProjects = [];
|
||||||
formData.reasonDevelopment70 = "";
|
formData.reasonDevelopment70 = "";
|
||||||
|
|
@ -244,251 +241,258 @@ function classInput(val: boolean) {
|
||||||
* ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
|
* ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
|
||||||
* fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
|
* fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
|
||||||
*/
|
*/
|
||||||
watch(modal, (val) => {
|
onMounted(() => {
|
||||||
if (val) {
|
fetchDataByid(requestId.value);
|
||||||
fetchDataByid(requestId.value);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="modal" persistent>
|
<div class="row items-center">
|
||||||
<q-card style="min-width: 65%">
|
<div class="toptitle text-dark row items-center q-py-xs">
|
||||||
<DialogHeader
|
<q-btn
|
||||||
:tittle="`${formData.createdFullName}
|
icon="mdi-arrow-left"
|
||||||
(ขอแก้ไขเมื่อ ${
|
unelevated
|
||||||
formData.createdAt ? date2Thai(formData.createdAt, true, true) : ''
|
round
|
||||||
})`"
|
dense
|
||||||
:close="closeDialog"
|
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-card flat>
|
||||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
<q-card-section v-if="isDone == 'PENDING'">
|
<q-card-section v-if="isDone == 'PENDING'">
|
||||||
<q-card bordered class="col-12">
|
<q-card bordered class="col-12">
|
||||||
<div class="row q-pa-md q-col-gutter-sm">
|
<div class="row q-pa-md q-col-gutter-sm">
|
||||||
<!-- สถานะ -->
|
<!-- สถานะ -->
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<q-select
|
<q-select
|
||||||
:class="classInput(isReadOnly)"
|
:class="classInput(isReadOnly)"
|
||||||
v-model="formData.status"
|
v-model="formData.status"
|
||||||
label="สถานะ"
|
label="สถานะ"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
emit-value
|
emit-value
|
||||||
map-options
|
map-options
|
||||||
:options="statusOption"
|
:options="statusOption"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
use-input
|
use-input
|
||||||
option-label="name"
|
option-label="name"
|
||||||
option-value="id"
|
option-value="id"
|
||||||
@filter="(inputValue:string,
|
@filter="(inputValue:string,
|
||||||
doneFn:Function) => filterOption(inputValue, doneFn
|
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>
|
<template v-slot:no-option>
|
||||||
</q-card>
|
<q-item>
|
||||||
</q-card-section>
|
<q-item-section class="text-grey">
|
||||||
</q-form>
|
ไม่มีข้อมูล
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- รายละเอียด -->
|
<!-- หมายเหตุ -->
|
||||||
<q-card-section class="q-pt-sm">
|
<div class="col-8">
|
||||||
<q-card bordered class="col-12">
|
<q-input
|
||||||
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
:class="classInput(isReadOnly)"
|
||||||
รายละเอียด
|
v-model="formData.reason"
|
||||||
|
label="หมายเหตุ"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
type="textarea"
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-separator />
|
<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">
|
<q-card-actions align="right">
|
||||||
<div class="q-mb-sm text-weight-medium text-body2">
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||||
วิธีการพัฒนา
|
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||||||
</div>
|
>
|
||||||
<div class="row col-12 q-ml-md q-col-gutter-sm">
|
</q-card-actions>
|
||||||
<!-- 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>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-form>
|
||||||
</q-dialog>
|
|
||||||
|
<!-- รายละเอียด -->
|
||||||
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
@ -8,6 +8,8 @@ const detailPage = () =>
|
||||||
// รายการคำร้องขอแก้ไขทะเบียนประวัติ
|
// รายการคำร้องขอแก้ไขทะเบียนประวัติ
|
||||||
const requestEdit = () =>
|
const requestEdit = () =>
|
||||||
import("@/modules/04_registryPerson/views/requestEditView.vue");
|
import("@/modules/04_registryPerson/views/requestEditView.vue");
|
||||||
|
const requestEditPage = () =>
|
||||||
|
import("@/modules/04_registryPerson/components/requestEdit/requestEditPage.vue");
|
||||||
const Page01_Detail = () =>
|
const Page01_Detail = () =>
|
||||||
import(
|
import(
|
||||||
"@/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue"
|
"@/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue"
|
||||||
|
|
@ -64,6 +66,16 @@ export default [
|
||||||
Role: "STAFF",
|
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",
|
path: "/registry-officer/request-edit/personal/:id",
|
||||||
name: "registryNewRequestEdit/personal",
|
name: "registryNewRequestEdit/personal",
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,12 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
|
||||||
const posLevelOps = ref<DataOption[]>([]);
|
const posLevelOps = ref<DataOption[]>([]);
|
||||||
const yearOps = ref<DataOption[]>([]);
|
const yearOps = ref<DataOption[]>([]);
|
||||||
const mode = ref<string>("table");
|
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[]) {
|
function fetchType(data: DataType[]) {
|
||||||
posTypeMain.value = data;
|
posTypeMain.value = data;
|
||||||
const list: DataOption[] = data.map((e: DataType) => ({
|
const list: DataOption[] = data.map((e: DataType) => ({
|
||||||
|
|
@ -88,6 +92,8 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
|
||||||
mode,
|
mode,
|
||||||
formFilter,
|
formFilter,
|
||||||
labelOption,
|
labelOption,
|
||||||
isLeave
|
isLeave,
|
||||||
|
tabs,
|
||||||
|
tabsManu,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -3,18 +3,13 @@ import { ref } from "vue";
|
||||||
|
|
||||||
import { useRouter } from "vue-router";
|
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 TabInformation from "@/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue";
|
||||||
import TabIDP from "@/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue";
|
import TabIDP from "@/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const store = useRegistryNewDataStore();
|
||||||
const tabs = ref<string>("Main");
|
|
||||||
const tabsManu = ref<DataOption[]>([
|
|
||||||
{ name: "ข้อมูลส่วนตัว", id: "Main" },
|
|
||||||
{ name: "ข้อมูลการพัฒนารายบุคคล (IDP)", id: "IDP" },
|
|
||||||
]);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -38,14 +33,14 @@ const tabsManu = ref<DataOption[]>([
|
||||||
<q-card-section style="padding: 0px">
|
<q-card-section style="padding: 0px">
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<q-tabs
|
<q-tabs
|
||||||
v-model="tabs"
|
v-model="store.tabs"
|
||||||
inline-label
|
inline-label
|
||||||
align="left"
|
align="left"
|
||||||
indicator-color="primary"
|
indicator-color="primary"
|
||||||
active-color="primary bg-teal-1"
|
active-color="primary bg-teal-1"
|
||||||
>
|
>
|
||||||
<q-tab
|
<q-tab
|
||||||
v-for="(tab, index) in tabsManu"
|
v-for="(tab, index) in store.tabsManu"
|
||||||
:key="index"
|
:key="index"
|
||||||
:name="tab.id"
|
:name="tab.id"
|
||||||
:label="tab.name"
|
:label="tab.name"
|
||||||
|
|
@ -53,7 +48,7 @@ const tabsManu = ref<DataOption[]>([
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
<q-separator />
|
<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">
|
<q-tab-panel style="padding: 0px" name="Main">
|
||||||
<TabInformation />
|
<TabInformation />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue