1213 lines
46 KiB
Vue
1213 lines
46 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, reactive, ref, computed, watch } from "vue";
|
||
import { useQuasar } from "quasar";
|
||
import { useRoute } from "vue-router";
|
||
import { useCounterMixin } from "@/stores/mixin";
|
||
|
||
/**importType*/
|
||
import type {
|
||
DataOptionTechnique,
|
||
FormProjectDetail,
|
||
DataOption,
|
||
} from "@/modules/15_development/interface/index/Main";
|
||
import type { DataStrategic } from "@/modules/15_development/interface/response/Main";
|
||
|
||
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
||
|
||
import http from "@/plugins/http";
|
||
import config from "@/app.config";
|
||
|
||
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
|
||
const props = defineProps({
|
||
prevStep: { type: Function, required: true },
|
||
nextStep: { type: Function, required: true },
|
||
onCheckChangeData: { type: Function, required: true },
|
||
});
|
||
|
||
const step = ref<string>("");
|
||
const reasonPlanned70 = ref<string>("");
|
||
const reasonPlanned20 = ref<string>("");
|
||
const reasonPlanned10 = ref<string>("");
|
||
const reasonActual70 = ref<string>("");
|
||
const reasonActual20 = ref<string>("");
|
||
const reasonActual10 = ref<string>("");
|
||
|
||
const checkOtherBox11 = computed<boolean>(() => {
|
||
return formData.developmentProjectTechniquePlanneds.includes("other1");
|
||
});
|
||
const checkOtherBox12 = computed<boolean>(() => {
|
||
return formData.developmentProjectTechniquePlanneds.includes("other2");
|
||
});
|
||
const checkOtherBox13 = computed<boolean>(() => {
|
||
return formData.developmentProjectTechniquePlanneds.includes("other3");
|
||
});
|
||
|
||
const checkOtherBox21 = computed<boolean>(() => {
|
||
return formData.developmentProjectTechniqueActuals.includes("other1");
|
||
});
|
||
const checkOtherBox22 = computed<boolean>(() => {
|
||
return formData.developmentProjectTechniqueActuals.includes("other2");
|
||
});
|
||
const checkOtherBox23 = computed<boolean>(() => {
|
||
return formData.developmentProjectTechniqueActuals.includes("other3");
|
||
});
|
||
|
||
const $q = useQuasar();
|
||
const store = useDevelopmentDataStore();
|
||
const route = useRoute();
|
||
const projectId = ref<string>(route.params.id.toLocaleString());
|
||
const { showLoader, hideLoader, messageError, date2Thai, diffDay } =
|
||
useCounterMixin();
|
||
const checkRoutePermission = ref<boolean>(
|
||
route.name == "developmentDetailPage"
|
||
);
|
||
const projectTypeOp = ref<any[]>([
|
||
{ label: "โครงการตามยุทธศาสตร์", value: "โครงการตามยุทธศาสตร์" },
|
||
{
|
||
label: "โครงการตามภารกิจประจำของหน่วยงาน",
|
||
value: "โครงการตามภารกิจประจำของหน่วยงาน",
|
||
},
|
||
{ label: "โครงการใหม่", value: "โครงการใหม่" },
|
||
{ label: "โครงการต่อเนื่อง", value: "โครงการต่อเนื่อง" },
|
||
]);
|
||
|
||
/** option */
|
||
const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
|
||
{
|
||
value: "on_the_job_training",
|
||
label: "การฝึกปฏิบัติในงาน (On the job training)",
|
||
},
|
||
{
|
||
value: "job_project_assignment",
|
||
label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
|
||
},
|
||
{
|
||
value: "job_shadowing",
|
||
label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
|
||
},
|
||
{
|
||
value: "job_enlargement",
|
||
label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
|
||
},
|
||
{
|
||
value: "internal_trainer",
|
||
label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
|
||
},
|
||
{
|
||
value: "rotation",
|
||
label: "การหมุนเวียนงาน (Rotation)",
|
||
},
|
||
{
|
||
value: "activity",
|
||
label: "การทำกิจกรรม (Activity)",
|
||
},
|
||
{
|
||
value: "site_visit",
|
||
label: "การศึกษาดูงานนอกสถานที่ (Site visit)",
|
||
},
|
||
{
|
||
value: "benchmarking",
|
||
label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
|
||
},
|
||
{
|
||
value: "problem_solving",
|
||
label: "การแก้ปัญหา (Problem-solving)",
|
||
},
|
||
{
|
||
value: "team_working",
|
||
label: "การทำงานเป็นทีม (Team working)",
|
||
},
|
||
{
|
||
value: "other1",
|
||
label: "อื่น ๆ (ระบุ)",
|
||
},
|
||
]);
|
||
|
||
const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
|
||
{ value: "coaching", label: "การสอนงาน (Coaching)" },
|
||
{ value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
|
||
{ value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
|
||
{ value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
|
||
{ value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
|
||
{ value: "other2", label: "อื่น ๆ (ระบุ)" },
|
||
]);
|
||
|
||
const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
|
||
{
|
||
value: "self_learning",
|
||
label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
|
||
},
|
||
{ value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
|
||
{
|
||
value: "in_house_training",
|
||
label: "การฝึกอบรมภายในองค์กร (In – house training)",
|
||
},
|
||
{
|
||
value: "public_training",
|
||
label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
|
||
},
|
||
{
|
||
value: "e_training",
|
||
label: "การฝึกอบรมผ่าน online (e – training / e – learning)",
|
||
},
|
||
{ value: "meeting", label: "การประชุม (Meeting)" },
|
||
{ value: "seminar", label: "การสัมมนา (Seminar)" },
|
||
{ value: "other3", label: "อื่น ๆ (ระบุ)" },
|
||
]);
|
||
|
||
const formData = reactive<FormProjectDetail>({
|
||
developmentProjectTypes: [],
|
||
projectModal: null,
|
||
isBackPlanned: false,
|
||
isHoldPlanned: false,
|
||
projectDayBackPlanned: null,
|
||
projectDayHoldPlanned: null,
|
||
projectNigthHoldPlanned: null,
|
||
developmentProjectTechniquePlanneds: [],
|
||
isBackActual: false,
|
||
isHoldActual: false,
|
||
projectDayBackActual: null,
|
||
projectDayHoldActual: null,
|
||
projectNigthHoldActual: null,
|
||
developmentProjectTechniqueActuals: [],
|
||
projectModalActual: null,
|
||
projectModalPlanned: null,
|
||
strategyChildPlannedId: null, //id ยุทธศาสตร์เป้าหมายตามแผน
|
||
strategyChildPlannedNode: 0, //node ยุทธศาสตร์เป้าหมายตามแผน
|
||
strategyChildActualId: null, //id ยุทธศาสตร์เป้าหมายตามจริง
|
||
strategyChildActualNode: 0, //node ยุทธศาสตร์เป้าหมายตามจริง
|
||
dateStart: null, //วันที่เริ่มต้น
|
||
dateEnd: null, //วันที่สิ้นสุด
|
||
totalDate: null, //รวมระยะเวลา (วัน)
|
||
developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
|
||
});
|
||
|
||
const nodes = ref<any>([]);
|
||
const filter = ref<string>("");
|
||
const filter2 = ref<string>("");
|
||
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
||
const noData = ref<string>("ไม่มีข้อมูล");
|
||
const expanded = ref<Array<string | null>>([]);
|
||
const expanded2 = ref<Array<string | null>>([]);
|
||
|
||
/**
|
||
* ดึงข้อมูล จังหวัด
|
||
*/
|
||
function fetchProvince() {
|
||
http
|
||
.get(config.API.province)
|
||
.then((res) => {
|
||
const data = res.data.result;
|
||
provinceOp.value = data.map((item: DataOption) => ({
|
||
id: item.id,
|
||
name: item.name,
|
||
}));
|
||
provinceOpMain.value = provinceOp.value;
|
||
})
|
||
.catch((e) => {
|
||
messageError($q, e);
|
||
});
|
||
}
|
||
|
||
/** ดึงข้อมูลทั้งหมด */
|
||
function fetchData() {
|
||
showLoader();
|
||
http
|
||
.get(config.API.developmentMainTab("tab3", projectId.value))
|
||
.then((res) => {
|
||
const data = res.data.result;
|
||
formData.developmentProjectTypes = data.developmentProjectTypes;
|
||
formData.projectModal = data.projectModal;
|
||
formData.isBackPlanned = data.isBackPlanned;
|
||
formData.isHoldPlanned = data.isHoldPlanned;
|
||
formData.projectDayBackPlanned = data.projectDayBackPlanned;
|
||
formData.projectDayHoldPlanned = data.projectDayHoldPlanned;
|
||
formData.projectNigthHoldPlanned = data.projectNigthHoldPlanned;
|
||
formData.developmentProjectTechniquePlanneds =
|
||
data.developmentProjectTechniquePlanneds;
|
||
formData.isBackActual = data.isBackActual;
|
||
formData.isHoldActual = data.isHoldActual;
|
||
formData.projectDayBackActual = data.projectDayBackActual;
|
||
formData.projectDayHoldActual = data.projectDayHoldActual;
|
||
formData.projectNigthHoldActual = data.projectNigthHoldActual;
|
||
formData.developmentProjectTechniqueActuals =
|
||
data.developmentProjectTechniqueActuals;
|
||
formData.projectModalPlanned = data.projectModalPlanned;
|
||
formData.projectModalActual = data.projectModalActual;
|
||
formData.dateStart = data.dateStart;
|
||
formData.dateEnd = data.dateEnd;
|
||
formData.totalDate = data.totalDate;
|
||
formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
|
||
address: e.address,
|
||
provinceId: e.provinceId,
|
||
}));
|
||
|
||
const arrayExpanded = [
|
||
data.strategyChild1Planned,
|
||
data.strategyChild2Planned,
|
||
data.strategyChild3Planned,
|
||
data.strategyChild4Planned,
|
||
data.strategyChild5Planned,
|
||
];
|
||
|
||
const arrayExpanded2 = [
|
||
data.strategyChild1Actual,
|
||
data.strategyChild2Actual,
|
||
data.strategyChild3Actual,
|
||
data.strategyChild4Actual,
|
||
data.strategyChild5Actual,
|
||
];
|
||
|
||
const filteredArray = arrayExpanded.filter((item) => item !== null);
|
||
const filteredArray2 = arrayExpanded2.filter((item) => item !== null);
|
||
const lastItem = filteredArray[filteredArray.length - 1];
|
||
const lastItem2 = filteredArray2[filteredArray2.length - 1];
|
||
|
||
formData.strategyChildPlannedId =
|
||
lastItem !== undefined ? lastItem : null;
|
||
formData.strategyChildPlannedNode =
|
||
lastItem !== undefined ? filteredArray.length : null;
|
||
formData.strategyChildActualId =
|
||
lastItem2 !== undefined ? lastItem2 : null;
|
||
formData.strategyChildActualNode =
|
||
lastItem2 !== undefined ? filteredArray2.length : null;
|
||
|
||
expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
|
||
expanded2.value = arrayExpanded2.filter((e) => e !== null).slice(0, -1);
|
||
reasonPlanned70.value = data.reasonPlanned70 ? data.reasonPlanned70 : "";
|
||
reasonPlanned20.value = data.reasonPlanned20 ? data.reasonPlanned20 : "";
|
||
reasonPlanned10.value = data.reasonPlanned10 ? data.reasonPlanned10 : "";
|
||
reasonActual70.value = data.reasonActual70 ? data.reasonActual70 : "";
|
||
reasonActual20.value = data.reasonActual20 ? data.reasonActual20 : "";
|
||
reasonActual10.value = data.reasonActual10 ? data.reasonActual10 : "";
|
||
})
|
||
.catch((err) => {
|
||
messageError($q, err);
|
||
})
|
||
.finally(() => {
|
||
hideLoader();
|
||
isChangeData.value = false;
|
||
});
|
||
}
|
||
|
||
/** ดึงข้อมูล ยุทธศาสตร์/แผน */
|
||
function fetchTree() {
|
||
showLoader();
|
||
http
|
||
.get(config.API.devStrategy)
|
||
.then((res) => {
|
||
const data = res.data.result;
|
||
nodes.value = data;
|
||
})
|
||
.catch((err) => {
|
||
messageError($q, err);
|
||
})
|
||
.finally(() => {
|
||
hideLoader();
|
||
isChangeData.value = false;
|
||
});
|
||
}
|
||
|
||
/** Main save */
|
||
function onSubmit() {
|
||
showLoader();
|
||
http
|
||
.put(config.API.developmentMainTab("tab3", projectId.value), {
|
||
...formData,
|
||
reasonPlanned70: reasonPlanned70.value,
|
||
reasonPlanned20: reasonPlanned20.value,
|
||
reasonPlanned10: reasonPlanned10.value,
|
||
reasonActual70: reasonActual70.value,
|
||
reasonActual20: reasonActual20.value,
|
||
reasonActual10: reasonActual10.value,
|
||
})
|
||
.then(() => {})
|
||
.catch((err) => {
|
||
messageError($q, err);
|
||
hideLoader();
|
||
})
|
||
.finally(() => {
|
||
isChangeData.value = false;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* update data
|
||
* @param data ข้อมูลยุทธศาสตร์/แผน
|
||
* @param type 1/2 เพื่อเเยก ยุทธศาสตร์1 ยุทธศาสตร์2
|
||
*/
|
||
function updateSelected(data: DataStrategic, type: string) {
|
||
if (type === "1") {
|
||
formData.strategyChildPlannedId = data.id;
|
||
formData.strategyChildPlannedNode = data.level;
|
||
} else if (type === "2") {
|
||
formData.strategyChildActualId = data.id;
|
||
formData.strategyChildActualNode = data.level;
|
||
}
|
||
}
|
||
|
||
const provinceOp = ref<DataOption[]>([]);
|
||
const provinceOpMain = ref<DataOption[]>([]);
|
||
|
||
/** เพิ่มข้อมูลสถานที่ดำเนินการ */
|
||
function onClickAddLocation() {
|
||
const data = {
|
||
address: "",
|
||
provinceId: "",
|
||
};
|
||
formData.developmentAddresss.push(data);
|
||
}
|
||
|
||
/** ลบข้อมูล */
|
||
function onClickDeleteLocation(index: number) {
|
||
formData.developmentAddresss.splice(index, 1);
|
||
}
|
||
|
||
/**
|
||
* Fuction Filter จังหวัด
|
||
* @param val ค่าตัวพิมพ์ค้นหา
|
||
* @param update ทุกครั้งที่พิมพ์ค่า
|
||
*/
|
||
const filterSelector = (val: string, update: Function) => {
|
||
update(() => {
|
||
provinceOp.value = provinceOpMain.value.filter(
|
||
(v: DataOption) => v.name.indexOf(val) > -1
|
||
);
|
||
});
|
||
};
|
||
|
||
watch(
|
||
() => [formData.dateStart, formData.dateEnd],
|
||
() => {
|
||
if (formData.dateStart && formData.dateEnd) {
|
||
formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
|
||
}
|
||
}
|
||
);
|
||
|
||
/**
|
||
* function ไปยัง Tab ค่อไป
|
||
*/
|
||
function onNextTab() {
|
||
step.value == "next" ? props.nextStep() : props.prevStep();
|
||
}
|
||
/**
|
||
* ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์
|
||
*/
|
||
onMounted(async () => {
|
||
fetchProvince();
|
||
fetchData();
|
||
fetchTree();
|
||
});
|
||
|
||
/**
|
||
* เรียก function ไปใช่หน้าหลัก
|
||
*/
|
||
defineExpose({
|
||
onSubmit,
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<q-form greedy @submit.prevent @validation-success="onNextTab">
|
||
<div class="row q-pa-sm">
|
||
<div class="col-12">
|
||
<div class="col-12 text-bold">ประเภทโครงการ</div>
|
||
<q-option-group
|
||
:disable="checkRoutePermission"
|
||
:options="projectTypeOp"
|
||
type="checkbox"
|
||
v-model="formData.developmentProjectTypes"
|
||
color="primary"
|
||
keep-color
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
</div>
|
||
|
||
<!-- ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์/แผน -->
|
||
<q-card bordered class="col-12 q-my-sm">
|
||
<div
|
||
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
||
>
|
||
ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์/แผน
|
||
</div>
|
||
<q-separator />
|
||
|
||
<q-card-section>
|
||
<div class="row col-12 q-col-gutter-sm">
|
||
<div class="col-6">
|
||
<q-card bordered class="col-12">
|
||
<div
|
||
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
|
||
>
|
||
ยุทธศาสตร์/แผน
|
||
</div>
|
||
<q-separator />
|
||
|
||
<q-card-section class="q-pa-sm">
|
||
<q-input
|
||
:readonly="checkRoutePermission"
|
||
dense
|
||
outlined
|
||
v-model="filter"
|
||
label="ค้นหา"
|
||
class="inputgreen"
|
||
>
|
||
<template v-slot:append>
|
||
<q-icon
|
||
v-if="filter !== ''"
|
||
name="clear"
|
||
class="cursor-pointer"
|
||
@click="filter = ''"
|
||
/>
|
||
<q-icon v-else name="search" color="grey-5" />
|
||
</template>
|
||
</q-input>
|
||
<q-tree
|
||
dense
|
||
:nodes="nodes"
|
||
selected-color="primary"
|
||
node-key="id"
|
||
label-key="name"
|
||
:filter="filter"
|
||
:no-results-label="notFound"
|
||
:no-nodes-label="noData"
|
||
v-model:expanded="expanded"
|
||
:style="checkRoutePermission ? 'pointer-events: none;' : ''"
|
||
>
|
||
<template v-slot:default-header="prop">
|
||
<q-item
|
||
clickable
|
||
@click.stop="
|
||
updateSelected(prop.node, '1'),
|
||
props.onCheckChangeData()
|
||
"
|
||
:active="
|
||
formData.strategyChildPlannedId == prop.node.id
|
||
"
|
||
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.name }}
|
||
</div>
|
||
</div>
|
||
</q-item>
|
||
</template>
|
||
</q-tree>
|
||
</q-card-section>
|
||
</q-card>
|
||
</div>
|
||
<div class="col-6">
|
||
<q-card bordered class="col-12">
|
||
<div
|
||
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
|
||
>
|
||
ยุทธศาสตร์/แผน
|
||
</div>
|
||
<q-separator />
|
||
|
||
<q-card-section class="q-pa-sm">
|
||
<q-input
|
||
:readonly="checkRoutePermission"
|
||
dense
|
||
outlined
|
||
v-model="filter2"
|
||
label="ค้นหา"
|
||
class="inputgreen"
|
||
>
|
||
<template v-slot:append>
|
||
<q-icon
|
||
v-if="filter2 !== ''"
|
||
name="clear"
|
||
class="cursor-pointer"
|
||
@click="filter2 = ''"
|
||
/>
|
||
<q-icon v-else name="search" color="grey-5" />
|
||
</template>
|
||
</q-input>
|
||
<q-tree
|
||
dense
|
||
:nodes="nodes"
|
||
node-key="id"
|
||
label-key="name"
|
||
:filter="filter2"
|
||
:no-results-label="notFound"
|
||
:no-nodes-label="noData"
|
||
v-model:expanded="expanded2"
|
||
:style="checkRoutePermission ? 'pointer-events: none;' : ''"
|
||
>
|
||
<template v-slot:default-header="prop">
|
||
<q-item
|
||
clickable
|
||
@click.stop="
|
||
updateSelected(prop.node, '2'),
|
||
props.onCheckChangeData()
|
||
"
|
||
:active="formData.strategyChildActualId == prop.node.id"
|
||
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.name }}
|
||
</div>
|
||
</div>
|
||
</q-item>
|
||
</template>
|
||
</q-tree>
|
||
</q-card-section>
|
||
</q-card>
|
||
</div>
|
||
</div>
|
||
</q-card-section>
|
||
</q-card>
|
||
|
||
<!-- เวลาและสถานที่ดำเนินการ -->
|
||
<q-card bordered class="col-12 q-my-sm">
|
||
<div
|
||
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
||
>
|
||
เวลาและสถานที่ดำเนินการ
|
||
</div>
|
||
<q-separator />
|
||
<q-card-section>
|
||
<div class="row col-12 q-col-gutter-sm">
|
||
<div class="col-12 text-bold">ระยะเวลาดำเนินการ</div>
|
||
<div class="row col-12 q-col-gutter-sm">
|
||
<div class="col-12 col-sm-6 col-md-3">
|
||
<datepicker
|
||
menu-class-name="modalfix"
|
||
v-model="formData.dateStart"
|
||
:locale="'th'"
|
||
autoApply
|
||
:readonly="checkRoutePermission"
|
||
:enableTimePicker="false"
|
||
week-start="0"
|
||
:max-date="formData.dateEnd"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
>
|
||
<template #year="{ year }">{{ year + 543 }}</template>
|
||
<template #year-overlay-value="{ value }">{{
|
||
parseInt(value + 543)
|
||
}}</template>
|
||
<template #trigger>
|
||
<q-input
|
||
class="inputgreen"
|
||
dense
|
||
:readonly="checkRoutePermission"
|
||
outlined
|
||
:model-value="
|
||
formData.dateStart
|
||
? date2Thai(formData.dateStart)
|
||
: null
|
||
"
|
||
:label="`${'วันที่เริ่มต้น'}`"
|
||
>
|
||
<template v-slot:prepend>
|
||
<q-icon
|
||
name="event"
|
||
class="cursor-pointer"
|
||
style="color: var(--q-primary)"
|
||
>
|
||
</q-icon>
|
||
</template>
|
||
</q-input>
|
||
</template>
|
||
</datepicker>
|
||
</div>
|
||
|
||
<div class="col-12 col-sm-6 col-md-3">
|
||
<datepicker
|
||
menu-class-name="modalfix"
|
||
v-model="formData.dateEnd"
|
||
:locale="'th'"
|
||
:readonly="checkRoutePermission"
|
||
autoApply
|
||
:enableTimePicker="false"
|
||
week-start="0"
|
||
:min-date="formData.dateStart"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
>
|
||
<template #year="{ year }">{{ year + 543 }}</template>
|
||
<template #year-overlay-value="{ value }">{{
|
||
parseInt(value + 543)
|
||
}}</template>
|
||
<template #trigger>
|
||
<q-input
|
||
dense
|
||
:readonly="checkRoutePermission"
|
||
outlined
|
||
class="inputgreen"
|
||
:model-value="
|
||
formData.dateEnd ? date2Thai(formData.dateEnd) : null
|
||
"
|
||
:label="`${'วันที่สิ้นสุด'}`"
|
||
>
|
||
<template v-slot:prepend>
|
||
<q-icon
|
||
name="event"
|
||
class="cursor-pointer"
|
||
style="color: var(--q-primary)"
|
||
>
|
||
</q-icon>
|
||
</template>
|
||
</q-input>
|
||
</template>
|
||
</datepicker>
|
||
</div>
|
||
|
||
<div class="col-12 col-sm-6 col-md-3">
|
||
<q-input
|
||
dense
|
||
:readonly="checkRoutePermission"
|
||
outlined
|
||
class="inputgreen"
|
||
label="รวมระยะเวลา (วัน)"
|
||
v-model="formData.totalDate"
|
||
mask="#"
|
||
reverse-fill-mask
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 q-mt-md">
|
||
<span class="text-bold">สถานที่ดำเนินการ</span>
|
||
<q-btn
|
||
v-if="!checkRoutePermission"
|
||
dense
|
||
flat
|
||
round
|
||
color="primary"
|
||
icon="add"
|
||
@click="onClickAddLocation"
|
||
>
|
||
<q-tooltip>เพิ่มสถานที่ดำเนินการ</q-tooltip>
|
||
</q-btn>
|
||
</div>
|
||
|
||
<div
|
||
class="col-12"
|
||
v-for="(item, index) in formData.developmentAddresss"
|
||
>
|
||
<div class="row q-col-gutter-sm">
|
||
<div class="col-8">
|
||
<q-input
|
||
:readonly="checkRoutePermission"
|
||
outlined
|
||
dense
|
||
class="inputgreen"
|
||
v-model="formData.developmentAddresss[index].address"
|
||
label="ชื่อสถานที่"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
</div>
|
||
<div class="col-3">
|
||
<q-select
|
||
:readonly="checkRoutePermission"
|
||
outlined
|
||
dense
|
||
v-model="formData.developmentAddresss[index].provinceId"
|
||
label="จังหวัด"
|
||
:options="provinceOp"
|
||
option-label="name"
|
||
option-value="id"
|
||
emit-value
|
||
map-options
|
||
class="inputgreen"
|
||
use-input
|
||
@update:model-value="props.onCheckChangeData()"
|
||
@filter="
|
||
(inputValue:string, doneFn:Function) =>
|
||
filterSelector(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-1 text-center">
|
||
<q-btn
|
||
v-if="index !== 0 && !checkRoutePermission"
|
||
dense
|
||
flat
|
||
round
|
||
color="red"
|
||
icon="delete"
|
||
@click="
|
||
onClickDeleteLocation(index), props.onCheckChangeData()
|
||
"
|
||
>
|
||
<q-tooltip>ลบ</q-tooltip></q-btn
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</q-card-section>
|
||
</q-card>
|
||
|
||
<!-- รูปแบบโครงการ -->
|
||
<q-card bordered class="col-12 q-my-sm">
|
||
<div
|
||
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
||
>
|
||
รูปแบบโครงการ
|
||
</div>
|
||
<q-separator />
|
||
|
||
<q-card-section>
|
||
<div class="row col-12 q-col-gutter-sm">
|
||
<div class="col-12 text-bold">รูปแบบโครงการตามแผน</div>
|
||
|
||
<div class="row col-12 q-col-gutter-sm">
|
||
<div class="col-12 col-md-3">
|
||
<q-checkbox
|
||
:disable="
|
||
store.projectStatus === 'FINISH' || checkRoutePermission
|
||
"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
value="GO_BLACK"
|
||
label="ไป-กลับ"
|
||
v-model="formData.isBackPlanned"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
></q-checkbox>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<q-input
|
||
:readonly="
|
||
store.projectStatus === 'FINISH' || checkRoutePermission
|
||
"
|
||
dense
|
||
outlined
|
||
v-model="formData.projectDayBackPlanned"
|
||
label="จำนวน (วัน)"
|
||
mask="#"
|
||
reverse-fill-mask
|
||
class="inputgreen"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="row col-12 q-col-gutter-sm">
|
||
<div class="col-12 col-md-3">
|
||
<q-checkbox
|
||
:disable="
|
||
store.projectStatus === 'FINISH' || checkRoutePermission
|
||
"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
value="HOLD"
|
||
label="พักค้าง"
|
||
v-model="formData.isHoldPlanned"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
></q-checkbox>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<q-input
|
||
:readonly="
|
||
store.projectStatus === 'FINISH' || checkRoutePermission
|
||
"
|
||
dense
|
||
outlined
|
||
v-model="formData.projectDayHoldPlanned"
|
||
label="จำนวน (วัน)"
|
||
mask="#"
|
||
reverse-fill-mask
|
||
class="inputgreen"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<q-input
|
||
:readonly="
|
||
store.projectStatus === 'FINISH' || checkRoutePermission
|
||
"
|
||
dense
|
||
outlined
|
||
v-model="formData.projectNigthHoldPlanned"
|
||
label="จำนวน (คืน)"
|
||
mask="#"
|
||
class="inputgreen"
|
||
reverse-fill-mask
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 q-py-md">
|
||
<div class="row q-col-gutter-md">
|
||
<div class="col-12">
|
||
<q-label class="text-bold"
|
||
>เทคนิควิธีการที่ใช้ในการพัฒนา</q-label
|
||
>
|
||
</div>
|
||
<div class="col-12 col-sm-6 col-md-4 align-top">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>การเรียนรู้และการพัฒนาจากการลงมือทำ (70)</q-label
|
||
>
|
||
<q-option-group
|
||
class="check_box q-mt-sm"
|
||
:disable="
|
||
store.projectStatus === 'FINISH' || checkRoutePermission
|
||
"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
v-model="formData.developmentProjectTechniquePlanneds"
|
||
:options="projectTechniquesOp1"
|
||
type="checkbox"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
<div class="row" v-if="checkOtherBox11">
|
||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
@update:model-value="props.onCheckChangeData()"
|
||
v-model="reasonPlanned70"
|
||
dense
|
||
:readonly="
|
||
store.projectStatus === 'FINISH' ||
|
||
checkRoutePermission
|
||
"
|
||
outlined
|
||
class="inputgreen"
|
||
label="กรุณาระบุ"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-sm-6 col-md-4">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>การเรียนรู้และการพัฒนาจากบุคคลอื่น (20)</q-label
|
||
>
|
||
<q-option-group
|
||
class="check_box q-mt-sm"
|
||
:disable="
|
||
store.projectStatus === 'FINISH' || checkRoutePermission
|
||
"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
v-model="formData.developmentProjectTechniquePlanneds"
|
||
:options="projectTechniquesOp2"
|
||
type="checkbox"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
<div class="row" v-if="checkOtherBox12">
|
||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
v-model="reasonPlanned20"
|
||
dense
|
||
:readonly="
|
||
store.projectStatus === 'FINISH' ||
|
||
checkRoutePermission
|
||
"
|
||
outlined
|
||
class="inputgreen"
|
||
label="กรุณาระบุ"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-sm-6 col-md-4">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>การเรียนรู้และการพัฒนาจากการฝึกอบรม (10)</q-label
|
||
>
|
||
<q-option-group
|
||
class="check_box q-mt-sm"
|
||
:disable="
|
||
store.projectStatus === 'FINISH' || checkRoutePermission
|
||
"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
v-model="formData.developmentProjectTechniquePlanneds"
|
||
:options="projectTechniquesOp3"
|
||
type="checkbox"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
<div class="row" v-if="checkOtherBox13">
|
||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
v-model="reasonPlanned10"
|
||
dense
|
||
:readonly="
|
||
store.projectStatus === 'FINISH' ||
|
||
checkRoutePermission
|
||
"
|
||
outlined
|
||
class="inputgreen"
|
||
label="กรุณาระบุ"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-sm-6 col-md-4">
|
||
<q-input
|
||
:readonly="
|
||
store.projectStatus === 'FINISH' || checkRoutePermission
|
||
"
|
||
dense
|
||
outlined
|
||
v-model="formData.projectModalPlanned"
|
||
label="จำนวน (รุ่น)"
|
||
mask="#"
|
||
reverse-fill-mask
|
||
class="inputgreen"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
</div>
|
||
|
||
<div class="col-12" v-if="store.projectStatus === 'FINISH'">
|
||
<div class="row col-12 q-col-gutter-sm">
|
||
<div class="col-12 q-my-sm">
|
||
<q-separator />
|
||
</div>
|
||
<div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
|
||
<div class="row col-12 q-col-gutter-sm">
|
||
<div class="col-md-3">
|
||
<q-checkbox
|
||
:disable="checkRoutePermission"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
value="GO_BLACK"
|
||
label="ไป-กลับ"
|
||
v-model="formData.isBackActual"
|
||
></q-checkbox>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<q-input
|
||
:readonly="checkRoutePermission"
|
||
class="inputgreen"
|
||
dense
|
||
outlined
|
||
v-model="formData.projectDayBackActual"
|
||
label="จำนวน (วัน)"
|
||
mask="#"
|
||
reverse-fill-mask
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="row col-12 q-col-gutter-sm">
|
||
<div class="col-12 col-md-3">
|
||
<q-checkbox
|
||
:disable="checkRoutePermission"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
value="HOLD"
|
||
label="พักค้าง"
|
||
v-model="formData.isHoldActual"
|
||
></q-checkbox>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<q-input
|
||
:readonly="checkRoutePermission"
|
||
class="inputgreen"
|
||
dense
|
||
outlined
|
||
v-model="formData.projectDayHoldActual"
|
||
label="จำนวน (วัน)"
|
||
mask="#"
|
||
reverse-fill-mask
|
||
/>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<q-input
|
||
:readonly="checkRoutePermission"
|
||
class="inputgreen"
|
||
dense
|
||
outlined
|
||
v-model="formData.projectNigthHoldActual"
|
||
label="จำนวน (คืน)"
|
||
mask="#"
|
||
reverse-fill-mask
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 q-py-md">
|
||
<div class="row q-col-gutter-md">
|
||
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>การเรียนรู้และการพัฒนาจากการลงมือทำ (70)</q-label
|
||
>
|
||
<q-option-group
|
||
class="check_box q-mt-sm"
|
||
keep-color
|
||
:disable="checkRoutePermission"
|
||
color="primary"
|
||
dense
|
||
v-model="formData.developmentProjectTechniqueActuals"
|
||
:options="projectTechniquesOp1"
|
||
type="checkbox"
|
||
/>
|
||
<div class="row" v-if="checkOtherBox21">
|
||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
:readonly="checkRoutePermission"
|
||
v-model="reasonActual70"
|
||
dense
|
||
outlined
|
||
class="inputgreen"
|
||
label="กรุณาระบุ"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>การเรียนรู้และการพัฒนาจากบุคคลอื่น (20)</q-label
|
||
>
|
||
<q-option-group
|
||
class="check_box q-mt-sm"
|
||
keep-color
|
||
color="primary"
|
||
:disable="checkRoutePermission"
|
||
dense
|
||
v-model="formData.developmentProjectTechniqueActuals"
|
||
:options="projectTechniquesOp2"
|
||
type="checkbox"
|
||
/>
|
||
<div class="row" v-if="checkOtherBox22">
|
||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
:readonly="checkRoutePermission"
|
||
v-model="reasonActual20"
|
||
dense
|
||
outlined
|
||
class="inputgreen"
|
||
label="กรุณาระบุ"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>การเรียนรู้และการพัฒนาจากการฝึกอบรม (10)</q-label
|
||
>
|
||
<q-option-group
|
||
class="check_box q-mt-sm"
|
||
keep-color
|
||
:disable="checkRoutePermission"
|
||
color="primary"
|
||
dense
|
||
v-model="formData.developmentProjectTechniqueActuals"
|
||
:options="projectTechniquesOp3"
|
||
type="checkbox"
|
||
/>
|
||
<div class="row" v-if="checkOtherBox23">
|
||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
v-model="reasonActual10"
|
||
dense
|
||
:readonly="checkRoutePermission"
|
||
outlined
|
||
class="inputgreen"
|
||
label="กรุณาระบุ"
|
||
@update:model-value="props.onCheckChangeData()"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-sm-6 col-md-4">
|
||
<q-input
|
||
dense
|
||
class="inputgreen"
|
||
:readonly="checkRoutePermission"
|
||
outlined
|
||
v-model="formData.projectModalActual"
|
||
label="จำนวน (รุ่น)"
|
||
mask="#"
|
||
reverse-fill-mask
|
||
@update:model-value="props.onCheckChangeData()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</q-card-section>
|
||
</q-card>
|
||
</div>
|
||
|
||
<q-separator />
|
||
<div class="text-center q-pa-sm" v-if="!checkRoutePermission">
|
||
<q-btn
|
||
rounded
|
||
label="ก่อนหน้า"
|
||
icon="mdi-chevron-left"
|
||
id="onSubmit"
|
||
type="submit"
|
||
color="public"
|
||
class="q-mr-xs"
|
||
style="width: 120px"
|
||
@click="step = 'prev'"
|
||
>
|
||
</q-btn>
|
||
<q-btn
|
||
rounded
|
||
label="ถัดไป"
|
||
icon-right="mdi-chevron-right"
|
||
id="onSubmit"
|
||
type="submit"
|
||
color="public"
|
||
class="q-ml-xs"
|
||
style="width: 120px"
|
||
@click="step = 'next'"
|
||
>
|
||
</q-btn>
|
||
</div>
|
||
</q-form>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.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);
|
||
}
|
||
.other_custom {
|
||
position: absolute;
|
||
left: -7px;
|
||
top: -29px;
|
||
}
|
||
.other_custom_input {
|
||
position: absolute;
|
||
top: -25px;
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.check_box .q-checkbox) {
|
||
align-items: start;
|
||
}
|
||
</style>
|