2819 lines
98 KiB
Vue
2819 lines
98 KiB
Vue
<script setup lang="ts">
|
|
import { useQuasar } from "quasar";
|
|
import { ref, reactive, computed, watch, onMounted } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import type {
|
|
MonthOption,
|
|
CheckboxItem,
|
|
} from "@/modules/11_probation/interface/index/assign";
|
|
|
|
const OPchairmanFn = ref<any>([]);
|
|
const OPcommanderFn = ref<any>([]);
|
|
const Other5 = ref<string>("");
|
|
const Other = ref<string>("");
|
|
const OtherLaw = ref<string>("");
|
|
const other5_no1_desc = ref<string>("");
|
|
const other_desc = ref<object>({});
|
|
const other4_desc = ref<string>();
|
|
const knowledgeCount = ref<number>(3);
|
|
const knowledge = ref<any[]>([]);
|
|
const commander = ref<any>("");
|
|
const chairman = ref<any>("");
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
date2Thai,
|
|
dateToISO,
|
|
hideLoader,
|
|
messageError,
|
|
dialogConfirm,
|
|
showLoader,
|
|
success,
|
|
} = mixin;
|
|
const date_start = ref<Date>();
|
|
const group = ref<any | null>(null);
|
|
const group2 = ref<any | null>(null);
|
|
const group3 = ref<any | null>(null);
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const main = ref<any>();
|
|
const productivityCount = ref<number>(1);
|
|
const output_desc = ref<string[]>(Array(productivityCount.value).fill(""));
|
|
const indicator_desc = ref<string[]>(Array(productivityCount.value).fill(""));
|
|
const main2 = ref<any>();
|
|
const main3 = ref<any>();
|
|
const main4 = ref<any>();
|
|
const main5 = ref<any>();
|
|
const date1 = ref<any>();
|
|
const date2 = ref<any>();
|
|
const date3 = ref<any>();
|
|
const date4 = ref<any>();
|
|
const checkRule = ref<CheckboxItem[]>([]);
|
|
const id = ref<string>(route.params.id as string);
|
|
const profileId = ref<string>(route.params.profileId as string);
|
|
const activityCount = ref<number>(2);
|
|
const routeName = router.currentRoute.value.name;
|
|
const isDatePicker2Readonly = computed(() => {
|
|
return date_start.value === undefined;
|
|
});
|
|
const activityArray = computed(() => {
|
|
return Array(activityCount.value).fill("");
|
|
});
|
|
const knowledgeArray = computed(() => {
|
|
return Array(knowledgeCount.value).fill("");
|
|
});
|
|
const ProductivityArray = computed(() => {
|
|
return Array(productivityCount.value).fill("");
|
|
});
|
|
const skill = ref<any>();
|
|
const skill2 = ref<any>();
|
|
const skill3 = ref<any>();
|
|
const skill4 = ref<any>();
|
|
const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
|
|
const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
|
|
|
|
const editStatus = ref<boolean>(routeName == "probationAdd" ? true : false);
|
|
const $q = useQuasar();
|
|
const mode = ref<any>($q.screen.gt.xs);
|
|
|
|
const monthSelect = ref<any>();
|
|
const fullname = ref<string>("");
|
|
const position = ref<string>("");
|
|
const date_finish = ref<any>();
|
|
|
|
const monthOp: MonthOption[] = [];
|
|
|
|
const caretaker1 = ref<any>("");
|
|
const caretaker2 = ref<any>("");
|
|
const optionCaretaker2 = ref<any>([]);
|
|
const optionCaretaker = ref<any>([]);
|
|
const OPmain = ref<
|
|
Array<{ id: number; naem: string; description: string; level: string }>
|
|
>([]);
|
|
const OPgroup = ref<
|
|
Array<{ id: number; title: string; description: string; level: number }>
|
|
>([]);
|
|
const OPcomputer = ref<
|
|
Array<{ id: number; title: string; level: number; level_description: string }>
|
|
>([]);
|
|
const OPenglish = ref<
|
|
Array<{ id: number; title: string; level: number; level_description: string }>
|
|
>([]);
|
|
const OPinfomation = ref<
|
|
Array<{ id: number; title: string; level: number; level_description: string }>
|
|
>([]);
|
|
const OPresourse = ref<
|
|
Array<{ id: number; title: string; level: number; level_description: string }>
|
|
>([]);
|
|
const OPknowledge = ref<
|
|
Array<{ id: number; title: number; description: string; level: string }>
|
|
>([]);
|
|
const OPcaretaker = ref<
|
|
Array<{
|
|
id: string;
|
|
prefix: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
name: string;
|
|
citizenId: number;
|
|
isDirector: boolean;
|
|
position: string;
|
|
positionLevel: string;
|
|
}>[]
|
|
>([]);
|
|
const OPcommander = ref<
|
|
Array<{
|
|
id: string;
|
|
prefix: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
name: string;
|
|
citizenId: number;
|
|
isDirector: boolean;
|
|
position: string;
|
|
positionLevel: string;
|
|
}>[]
|
|
>([]);
|
|
const OPchairman = ref<
|
|
Array<{
|
|
id: string;
|
|
prefix: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
name: string;
|
|
citizenId: number;
|
|
isDirector: boolean;
|
|
position: string;
|
|
positionLevel: string;
|
|
}>[]
|
|
>([]);
|
|
|
|
/** reset ค่าวันที่สิ้นสุด */
|
|
function clearDateExam2() {
|
|
date_finish.value = undefined;
|
|
}
|
|
|
|
function edit() {
|
|
editStatus.value = true;
|
|
}
|
|
function cancel() {
|
|
editStatus.value = false;
|
|
getAssign();
|
|
}
|
|
|
|
/** ฟังชั่นส่ง วันที่ไปคำนวณ */
|
|
async function postDateTime() {
|
|
await http
|
|
.post(config.API.calculateDate(), {
|
|
month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
|
|
start_date: dateToISO(date_start.value as Date),
|
|
})
|
|
.then(async (res) => {
|
|
const result = res.data;
|
|
date_finish.value = result.finish_date;
|
|
})
|
|
.catch((e) => {})
|
|
.finally(async () => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** เช็ค จำนวนเดือน เเละ วันที่เริ่ม ไม่เท่ากับ undefined*/
|
|
watch(
|
|
() => [monthSelect.value, date_start.value],
|
|
() => {
|
|
if (monthSelect.value !== undefined && date_start.value !== undefined) {
|
|
postDateTime();
|
|
}
|
|
}
|
|
);
|
|
|
|
/** get ข้อมูล */
|
|
async function getUser() {
|
|
await http
|
|
.get(config.API.orgProfilePlacement(profileId.value))
|
|
.then((res: any) => {
|
|
const data = res.data.result;
|
|
|
|
OPcaretaker.value = data.caregiver.map((item: any) => ({
|
|
id: item.id,
|
|
name: item.prefix + item.firstName + " " + item.lastName,
|
|
label: item.position
|
|
? `${item.prefix} ${item.firstName} ${item.lastName} (${
|
|
item.position
|
|
}${
|
|
item.posLevel && item.posType
|
|
? ", " + item.posType + ": " + item.posLevel
|
|
: ""
|
|
})`
|
|
: `${item.prefix} ${item.firstName} ${item.lastName}`,
|
|
citizenId: item.citizenId,
|
|
isDirector: item.isDirector,
|
|
posLevel: item.posLevel,
|
|
posType: item.posType,
|
|
position: item.position,
|
|
}));
|
|
|
|
OPcommander.value = data.commander.map((item: any) => ({
|
|
id: item.id,
|
|
name: item.prefix + item.firstName + " " + item.lastName,
|
|
label: item.position
|
|
? `${item.prefix} ${item.firstName} ${item.lastName} (${
|
|
item.position
|
|
}${
|
|
item.posLevel && item.posType
|
|
? ", " + item.posType + ": " + item.posLevel
|
|
: ""
|
|
})`
|
|
: `${item.prefix} ${item.firstName} ${item.lastName}`,
|
|
citizenId: item.citizenId,
|
|
posLevel: item.posLevel,
|
|
posType: item.posType,
|
|
position: item.position,
|
|
}));
|
|
|
|
OPchairman.value = data.chairman.map((item: any) => ({
|
|
id: item.id,
|
|
name: item.prefix + item.firstName + " " + item.lastName,
|
|
label: item.position
|
|
? `${item.prefix} ${item.firstName} ${item.lastName} (${
|
|
item.position
|
|
}${
|
|
item.posLevel && item.posType
|
|
? ", " + item.posType + ": " + item.posLevel
|
|
: ""
|
|
})`
|
|
: `${item.prefix} ${item.firstName} ${item.lastName}`,
|
|
citizenId: item.citizenId,
|
|
posLevel: item.posLevel,
|
|
posType: item.posType,
|
|
position: item.position,
|
|
}));
|
|
});
|
|
}
|
|
|
|
/**
|
|
*ดึงข้อมูลที่ได้รับมอบหมาย
|
|
* @param id personal id
|
|
*/
|
|
async function getAssignNew(id: string) {
|
|
await http.get(config.API.newAssign(id)).then((res: any) => {
|
|
const data = res.data.data;
|
|
|
|
const monthOption = {
|
|
value: data.assign_month,
|
|
label: `${data.assign_month} เดือน`,
|
|
};
|
|
monthOp.push(monthOption);
|
|
monthSelect.value = `${data.assign_month} เดือน`;
|
|
fullname.value =
|
|
data.person.prefixName +
|
|
data.person.firstName +
|
|
" " +
|
|
data.person.lastName;
|
|
position.value = data.person.positionName;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
|
|
* @param val รับค่า input
|
|
* @param update fn
|
|
*/
|
|
function filterFnCaretaker(val: string, update: any) {
|
|
if (val == "") {
|
|
update(() => {
|
|
optionCaretaker.value = filtermantor(OPcaretaker.value, [
|
|
caretaker2.value,
|
|
]);
|
|
});
|
|
} else {
|
|
update(() => {
|
|
optionCaretaker.value = filtermantor(OPcaretaker.value, [
|
|
caretaker2.value,
|
|
]).filter((e: any) => e.name.search(val) !== -1);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันกรองข้อมูล
|
|
* @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
|
|
* @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
|
|
* @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
|
|
*/
|
|
function filtermantor(options: any[], excludedGroups: any[]) {
|
|
return options.filter(
|
|
(item) => !excludedGroups.some((group) => group && group.id === item.id)
|
|
);
|
|
}
|
|
|
|
/**
|
|
* ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
|
|
* @param val รับค่า input
|
|
* @param update fn
|
|
*/
|
|
|
|
function filterFnCaretaker2(val: string, update: any) {
|
|
if (val == "") {
|
|
update(() => {
|
|
optionCaretaker2.value = filtermantor(OPcaretaker.value, [
|
|
caretaker1.value,
|
|
]);
|
|
});
|
|
} else {
|
|
update(() => {
|
|
optionCaretaker2.value = filtermantor(OPcaretaker.value, [
|
|
caretaker1.value,
|
|
]).filter((e: any) => e.name.search(val) !== -1);
|
|
});
|
|
}
|
|
}
|
|
|
|
/** เพิ่ม ผลการปฏิบัติงาน*/
|
|
function addActivity() {
|
|
activityCount.value++;
|
|
}
|
|
|
|
/**
|
|
* ลบ ผลการปฏิบัติงาน
|
|
* @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
|
|
*/
|
|
function deleteactivity(item: number) {
|
|
activity_desc.value.splice(item, 1);
|
|
goal_desc.value.splice(item, 1);
|
|
if (activityCount.value > 2) {
|
|
activityCount.value--;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* get ข้อมูล ความรู้เรื่องกฎหมายและกฎระเบียบ
|
|
* @param id personal id
|
|
*/
|
|
async function getLaw(id: string) {
|
|
await http.get(config.API.lawOptions(id)).then((res: any) => {
|
|
checkRule.value = res.data.data;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* get ข้อมูล ทักษะ
|
|
* @param id personal id
|
|
*/
|
|
async function getSkill(id: string) {
|
|
await http.get(config.API.skillOptions(id)).then((res: any) => {
|
|
const skillData = res.data.data;
|
|
OPcomputer.value = [skillData.computer];
|
|
OPenglish.value = [skillData.english];
|
|
OPinfomation.value = [skillData.information];
|
|
OPresourse.value = [skillData.resourse];
|
|
skill.value = skillData.computer;
|
|
skill2.value = skillData.english;
|
|
skill3.value = skillData.information;
|
|
skill4.value = skillData.resourse;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* get ข้อมูล ความรู้ความสามารถในการปฏิบัติงาน
|
|
* @param id personal id
|
|
*/
|
|
async function getKnowledge(id: string) {
|
|
await http.get(config.API.knowledgeOptions(id)).then((res: any) => {
|
|
OPknowledge.value = res.data.data;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* get ข้อมูล สมรรถนะหลัก
|
|
* @param id personal id
|
|
*/
|
|
const assign_competencyMain = ref<any>();
|
|
async function getcompetency(id: string) {
|
|
http
|
|
.get(config.API.kpiCapacity + `/head`)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
assign_competencyMain.value = data;
|
|
main.value = data[0];
|
|
main2.value = data[1];
|
|
main3.value = data[2];
|
|
main4.value = data[3];
|
|
main5.value = data[4];
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
// await http.get(config.API.competencyOptions(id)).then((res: any) => {
|
|
// const data = res.data.data;
|
|
// OPmain.value = data;
|
|
// main.value = data[0];
|
|
// main2.value = data[1];
|
|
// main3.value = data[2];
|
|
// main4.value = data[3];
|
|
// main5.value = data[4];
|
|
// });
|
|
}
|
|
|
|
/**
|
|
* get ข้อมูล สมรรถนะประจํากลุ่มงาน
|
|
* @param id personal id
|
|
*/
|
|
const assign_competencyGroupMain = ref<any>();
|
|
async function getCompetencyGroup(id: string) {
|
|
http
|
|
.get(config.API.kpiCapacity + `/group?positionName=${position.value}`)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
assign_competencyGroupMain.value = data;
|
|
|
|
OPgroup.value = data;
|
|
group.value = data[0];
|
|
group2.value = data[1];
|
|
group3.value = data[2];
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
|
|
// await http.get(config.API.competencyGroupOptions(id)).then((res: any) => {
|
|
// const data = res.data.data;
|
|
// OPgroup.value = data;
|
|
// group.value = data[0];
|
|
// group2.value = data[1];
|
|
// group3.value = data[2];
|
|
// });
|
|
}
|
|
|
|
/** get ข้อมูลรายการมอบหมาย */
|
|
async function getAssign() {
|
|
await http.get(config.API.probationsGetAssign(id.value)).then((res) => {
|
|
editStatus.value = false;
|
|
const data = res.data.data;
|
|
fullname.value = data.profile.name;
|
|
position.value = data.profile.positionName;
|
|
date_start.value = data.assign.date_start;
|
|
date_finish.value = data.assign.date_finish;
|
|
date1.value = data.assign.experimenter_dated;
|
|
if (data.mentors.length > 1) {
|
|
date2.value = data.mentors[0].dated;
|
|
caretaker1.value = data.mentors[0];
|
|
date3.value = data.mentors[1].dated;
|
|
caretaker2.value = data.mentors[1];
|
|
} else {
|
|
date2.value = data.mentors[0].dated;
|
|
caretaker1.value = data.mentors[0];
|
|
}
|
|
|
|
date4.value = data.commander.dated;
|
|
activity_desc.value = data.jobs.map((job: any) => job.activity_desc);
|
|
goal_desc.value = data.jobs.map((job: any) => job.goal_desc);
|
|
activityCount.value = data.jobs.length;
|
|
|
|
chairman.value = data.chairman;
|
|
commander.value = data.commander;
|
|
knowledge.value = data.knowledges.map((id: any) => id.id);
|
|
knowledgeCount.value = data.knowledges.length;
|
|
other_desc.value = data.assign.other_desc;
|
|
other4_desc.value = data.assign.other4_desc;
|
|
other5_no1_desc.value = data.assign.other5_no1_desc;
|
|
|
|
const skills = data.skills.map((skills: any) => ({
|
|
id: skills.id,
|
|
title: skills.title,
|
|
level: skills.level,
|
|
level_description: skills.description,
|
|
}));
|
|
[skill.value, skill2.value, skill3.value, skill4.value] = skills;
|
|
|
|
main.value = data.competencys[0];
|
|
main2.value = data.competencys[1];
|
|
main3.value = data.competencys[2];
|
|
main4.value = data.competencys[3];
|
|
main5.value = data.competencys[4];
|
|
|
|
group.value = data.competency_groups[0];
|
|
group2.value = data.competency_groups[1];
|
|
group3.value = data.competency_groups[2];
|
|
|
|
output_desc.value = data.outputs.map((output: any) => output.output_desc);
|
|
indicator_desc.value = data.outputs.map(
|
|
(output: any) => output.indicator_desc
|
|
);
|
|
productivityCount.value = data.outputs.length;
|
|
|
|
checkRule.value = data.laws.map((law: any) => ({
|
|
id: law.id,
|
|
checked: law.selected,
|
|
description: law.description,
|
|
status_select: law.status_select,
|
|
}));
|
|
});
|
|
}
|
|
|
|
/** เพิ่มความรู้ความสามารถ โดย สูงสุดที่ 6 item */
|
|
function addKnowledge() {
|
|
if (knowledgeCount.value < 6) {
|
|
knowledgeCount.value++;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ลบ ความรู้ความสามารถ
|
|
* @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
|
|
*/
|
|
function deleteknowledge(item: number) {
|
|
knowledge.value.splice(item, 1);
|
|
if (knowledgeCount.value > 3) {
|
|
knowledgeCount.value--;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันกรองข้อมูล
|
|
* @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
|
|
* @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
|
|
* @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
|
|
*/
|
|
function filterMain(options: any[], excludedGroups: any[]) {
|
|
return options.filter(
|
|
(item) => !excludedGroups.some((group) => group && group.id === item.id)
|
|
);
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันกรองข้อมูล
|
|
* @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
|
|
* @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
|
|
* @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
|
|
*/
|
|
function filterData(options: any[], excludedGroups: any[]) {
|
|
return options.filter(
|
|
(item) => !excludedGroups.some((group) => group && group.id === item.id)
|
|
);
|
|
}
|
|
|
|
/** เพิ่ม ผลผลิตของงาน*/
|
|
function addProductivity() {
|
|
productivityCount.value++;
|
|
}
|
|
|
|
/**
|
|
* ลบ ผลผลิตของงาน
|
|
* @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
|
|
*/
|
|
function deleteProductivitys(item: number) {
|
|
output_desc.value.splice(item, 1);
|
|
indicator_desc.value.splice(item, 1);
|
|
if (productivityCount.value > 1) {
|
|
productivityCount.value--;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
|
|
* @param val รับค่า input
|
|
* @param update fn
|
|
*/
|
|
|
|
function filterFnCommander(val: string, update: any) {
|
|
if (val == "") {
|
|
update(() => {
|
|
OPcommanderFn.value = OPcommander.value;
|
|
});
|
|
} else {
|
|
update(() => {
|
|
OPcommanderFn.value = OPcommander.value.filter(
|
|
(e: any) => e.name.search(val) !== -1
|
|
);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
|
|
* @param val รับค่า input
|
|
* @param update fn
|
|
*/
|
|
|
|
function filterFnChairman(val: string, update: any) {
|
|
if (val == "") {
|
|
update(() => {
|
|
OPchairmanFn.value = OPchairman.value;
|
|
});
|
|
} else {
|
|
update(() => {
|
|
OPchairmanFn.value = OPchairman.value.filter(
|
|
(e: any) => e.name.search(val) !== -1
|
|
);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* pop up confirm
|
|
* @param id personal id
|
|
*/
|
|
function saveEdit(id: string) {
|
|
dialogConfirm($q, async () => await dataEdit(id));
|
|
}
|
|
|
|
/**
|
|
* เช็คข้อมูลก่อนบันทึก
|
|
* @param id personal id
|
|
*/
|
|
async function saveData(id: string) {
|
|
dialogConfirm($q, async () => await DataSave(id));
|
|
}
|
|
|
|
/**
|
|
* update edit
|
|
* @param id personal id
|
|
*/
|
|
async function dataEdit(id: string) {
|
|
// await myForm.value.validate().then((result: boolean) => {
|
|
// if (result) {
|
|
showLoader();
|
|
const data = putDataEdit(id);
|
|
http
|
|
.put(config.API.saveEditAssign(id), data)
|
|
.then(() => {})
|
|
.catch(() => {})
|
|
.finally(async () => {
|
|
editStatus.value = false;
|
|
getAssign();
|
|
hideLoader();
|
|
});
|
|
// } else {
|
|
// dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
|
|
// }
|
|
// });
|
|
}
|
|
|
|
/** ฟังชั่น อัพเดต ข้อมูลที่จะส่ง
|
|
* @param id personal
|
|
*/
|
|
function putDataEdit(id: string) {
|
|
const GUID = profileId.value;
|
|
const assign_job = activityArray.value.map((item, index) => {
|
|
const activityDesc = activity_desc.value[index]?.trim();
|
|
const goalDesc = goal_desc.value[index]?.trim();
|
|
|
|
if (activityDesc !== "" && goalDesc !== "") {
|
|
return {
|
|
activity_desc: activityDesc,
|
|
goal_desc: goalDesc,
|
|
};
|
|
} else {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
const know_ledge = knowledge.value.map((item) => ({
|
|
level: item ? item.level : null,
|
|
}));
|
|
|
|
const Productivity_assign = ProductivityArray.value.map((item, index) => {
|
|
const outputDesc = output_desc.value[index]?.trim();
|
|
const indicatorDesc = indicator_desc.value[index]?.trim();
|
|
|
|
if (outputDesc !== "" && indicatorDesc !== "") {
|
|
return {
|
|
output_desc: outputDesc,
|
|
indicator_desc: indicatorDesc,
|
|
};
|
|
} else {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
const allGroup = [];
|
|
if (group.value) allGroup.push({ level: group.value.level });
|
|
if (group2.value) allGroup.push({ level: group2.value.level });
|
|
if (group3.value) allGroup.push({ level: group3.value.level });
|
|
|
|
const allSkills = [];
|
|
if (skill.value) allSkills.push({ level: skill.value.level });
|
|
if (skill2.value) allSkills.push({ level: skill2.value.level });
|
|
if (skill3.value) allSkills.push({ level: skill3.value.level });
|
|
if (skill4.value) allSkills.push({ level: skill4.value.level });
|
|
|
|
const allCompetency = [];
|
|
if (main.value) allCompetency.push(main.value);
|
|
if (main2.value) allCompetency.push(main2.value);
|
|
if (main3.value) allCompetency.push(main3.value);
|
|
if (main4.value) allCompetency.push(main4.value);
|
|
if (main5.value) allCompetency.push(main5.value);
|
|
|
|
const assign_director = [
|
|
{
|
|
personal_id:
|
|
caretaker1.value.id != null
|
|
? caretaker1.value.id
|
|
: caretaker1.value.personal_id,
|
|
role: "mentor",
|
|
name: caretaker1.value.name,
|
|
position: caretaker1.value.position,
|
|
posType: caretaker1.value.posType,
|
|
posLevel: caretaker1.value.posLevel,
|
|
dated:
|
|
date2.value instanceof Date
|
|
? dateToISO(date2.value)
|
|
: dateToISO(new Date(date2.value)),
|
|
},
|
|
{
|
|
personal_id:
|
|
commander.value.id != null
|
|
? commander.value.id
|
|
: commander.value.personal_id,
|
|
role: "commander",
|
|
name: commander.value.name,
|
|
position: commander.value.position,
|
|
posType: commander.value.posType,
|
|
posLevel: commander.value.posLevel,
|
|
dated:
|
|
date4.value instanceof Date
|
|
? dateToISO(date4.value)
|
|
: dateToISO(new Date(date4.value)),
|
|
},
|
|
{
|
|
personal_id:
|
|
chairman.value.id != null
|
|
? chairman.value.id
|
|
: chairman.value.personal_id,
|
|
role: "chairman",
|
|
name: chairman.value.name,
|
|
position: chairman.value.position,
|
|
posType: chairman.value.posType,
|
|
posLevel: chairman.value.posLevel,
|
|
},
|
|
];
|
|
|
|
if (caretaker2.value) {
|
|
assign_director.push({
|
|
personal_id:
|
|
caretaker2.value.id != null
|
|
? caretaker2.value.id
|
|
: caretaker2.value.personal_id,
|
|
name: caretaker2.value.name,
|
|
position: caretaker2.value.position,
|
|
posType: caretaker2.value.posType,
|
|
posLevel: caretaker2.value.posLevel,
|
|
role: "mentor",
|
|
dated:
|
|
date3.value instanceof Date
|
|
? dateToISO(date3.value)
|
|
: dateToISO(new Date(date3.value)),
|
|
});
|
|
}
|
|
const data = {
|
|
personal_id: GUID,
|
|
fullname: fullname.value,
|
|
position: position.value,
|
|
monthSelect:
|
|
monthSelect.value !== null ? parseInt(monthSelect.value) : null,
|
|
date_start:
|
|
date_start.value instanceof Date
|
|
? dateToISO(date_start.value)
|
|
: new Date(),
|
|
date_finish:
|
|
date_finish.value instanceof Date
|
|
? dateToISO(date_finish.value)
|
|
: dateToISO(new Date(date_finish.value)),
|
|
assign_knowledges: know_ledge,
|
|
assign_jobs: assign_job.filter((item) => item !== null),
|
|
other_desc: OtherLaw.value,
|
|
assign_skill: allSkills,
|
|
assign_competency: assign_competencyMain.value,
|
|
assign_competency_group: assign_competencyGroupMain.value,
|
|
other4_desc: Other.value,
|
|
other5_no1_desc: Other5.value,
|
|
assign_outputs: Productivity_assign.filter((item) => item !== null),
|
|
assign_director: assign_director,
|
|
experimenter_dated:
|
|
date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
|
|
assign_law: checkRule.value
|
|
.filter((item) => item.checked === 1)
|
|
.map((item) => ({
|
|
id: item.id,
|
|
checked: item.checked,
|
|
})),
|
|
};
|
|
return data;
|
|
}
|
|
|
|
/** ฟังชั่น สร้างข้อมูลที่จะส่ง
|
|
* @param id personal
|
|
*/
|
|
function putData(id: string) {
|
|
const GUID = profileId.value;
|
|
const assign_job = activityArray.value.map((item, index) => {
|
|
const activityDesc = activity_desc.value[index]?.trim();
|
|
const goalDesc = goal_desc.value[index]?.trim();
|
|
|
|
if (activityDesc !== "" && goalDesc !== "") {
|
|
return {
|
|
activity_desc: activityDesc,
|
|
goal_desc: goalDesc,
|
|
};
|
|
} else {
|
|
return null;
|
|
}
|
|
});
|
|
const know_ledge = knowledge.value.map((item) => ({
|
|
level: item ? item.level : null,
|
|
}));
|
|
|
|
const Productivity_assign = ProductivityArray.value.map((item, index) => {
|
|
const outputDesc = output_desc.value[index]?.trim();
|
|
const indicatorDesc = indicator_desc.value[index]?.trim();
|
|
|
|
if (outputDesc !== "" && indicatorDesc !== "") {
|
|
return {
|
|
output_desc: outputDesc,
|
|
indicator_desc: indicatorDesc,
|
|
};
|
|
} else {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
const allGroup = [];
|
|
if (group.value) allGroup.push({ level: group.value.level });
|
|
if (group2.value) allGroup.push({ level: group2.value.level });
|
|
if (group3.value) allGroup.push({ level: group3.value.level });
|
|
|
|
const allSkills = [];
|
|
if (skill.value) allSkills.push({ level: skill.value.level });
|
|
if (skill2.value) allSkills.push({ level: skill2.value.level });
|
|
if (skill3.value) allSkills.push({ level: skill3.value.level });
|
|
if (skill4.value) allSkills.push({ level: skill4.value.level });
|
|
|
|
const allCompetency = assign_competencyMain.value;
|
|
|
|
const assign_director = [
|
|
{
|
|
personal_id: caretaker1.value.id,
|
|
name: caretaker1.value.name,
|
|
position: caretaker1.value.position,
|
|
posType: caretaker1.value.posType,
|
|
posLevel: caretaker1.value.posLevel,
|
|
role: "mentor",
|
|
dated:
|
|
date2.value instanceof Date
|
|
? dateToISO(date2.value)
|
|
: dateToISO(new Date(date2.value)),
|
|
},
|
|
{
|
|
personal_id: commander.value.id,
|
|
role: "commander",
|
|
name: commander.value.name,
|
|
position: commander.value.position,
|
|
posType: commander.value.posType,
|
|
posLevel: commander.value.posLevel,
|
|
dated:
|
|
date4.value instanceof Date
|
|
? dateToISO(date4.value)
|
|
: dateToISO(new Date(date4.value)),
|
|
},
|
|
{
|
|
personal_id: chairman.value.id,
|
|
role: "chairman",
|
|
name: chairman.value.name,
|
|
position: chairman.value.position,
|
|
posType: chairman.value.posType,
|
|
posLevel: chairman.value.posLevel,
|
|
},
|
|
];
|
|
|
|
if (caretaker2.value) {
|
|
assign_director.push({
|
|
personal_id: caretaker2.value.id,
|
|
name: caretaker2.value.name,
|
|
position: caretaker2.value.position,
|
|
posType: caretaker2.value.posType,
|
|
posLevel: caretaker2.value.posLevel,
|
|
role: "mentor",
|
|
dated:
|
|
date3.value instanceof Date
|
|
? dateToISO(date3.value)
|
|
: dateToISO(new Date(date3.value)),
|
|
});
|
|
}
|
|
const data = {
|
|
personalId: GUID,
|
|
fullname: fullname.value,
|
|
position: position.value,
|
|
monthSelect:
|
|
monthSelect.value !== null ? parseInt(monthSelect.value) : null,
|
|
date_start:
|
|
date_start.value instanceof Date
|
|
? dateToISO(date_start.value)
|
|
: new Date(),
|
|
date_finish:
|
|
date_finish.value instanceof Date
|
|
? dateToISO(date_finish.value)
|
|
: dateToISO(new Date(date_finish.value)),
|
|
|
|
assign_knowledges: know_ledge,
|
|
assign_jobs: assign_job.filter((item) => item !== null),
|
|
other_desc: OtherLaw.value,
|
|
assign_skill: allSkills,
|
|
assign_competency: assign_competencyMain.value,
|
|
assign_competency_group: assign_competencyGroupMain.value,
|
|
other4_desc: Other.value,
|
|
other5_no1_desc: Other5.value,
|
|
assign_outputs: Productivity_assign.filter((item) => item !== null),
|
|
|
|
assign_director: assign_director,
|
|
experimenter_dated:
|
|
date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
|
|
|
|
assign_law: checkRule.value
|
|
.filter((item) => item.checked === 1)
|
|
.map((item) => ({
|
|
id: item.id,
|
|
checked: item.checked,
|
|
})),
|
|
};
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* บันทึก
|
|
* @param id personal id
|
|
*/
|
|
async function DataSave(id: string) {
|
|
const data = putData(id);
|
|
await http
|
|
.post(config.API.saveFinish(id), data)
|
|
.then(() => {
|
|
router.push(`/probation/detail/${profileId.value}/${id}`);
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* download file
|
|
* @param type type file
|
|
*/
|
|
async function clickdownloadFile(type: string) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.reportAssign(type, id.value), {
|
|
responseType: "blob",
|
|
})
|
|
.then((res) => {
|
|
downloadFile(
|
|
res,
|
|
`แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ-${fullname.value}.${type}`
|
|
);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* download file
|
|
* @param response ไฟล์
|
|
* @param filename ชื่อไฟล์
|
|
*/
|
|
function downloadFile(response: any, filename: string) {
|
|
const link = document.createElement("a");
|
|
var fileName = filename;
|
|
link.href = window.URL.createObjectURL(new Blob([response.data]));
|
|
link.setAttribute("download", fileName);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await showLoader();
|
|
await getUser();
|
|
await getAssignNew(profileId.value);
|
|
await getLaw(profileId.value);
|
|
await getSkill(profileId.value);
|
|
await getKnowledge(profileId.value);
|
|
await getcompetency(profileId.value);
|
|
await getCompetencyGroup(profileId.value);
|
|
if (id.value !== undefined) {
|
|
await getAssign();
|
|
}
|
|
await hideLoader();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
|
|
<div
|
|
v-if="routeName !== 'probationAdd'"
|
|
class="toptitle text-white col-12 row items-center"
|
|
>
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.go(-1)"
|
|
/>
|
|
<div>แบบมอบหมายงานฯ</div>
|
|
</div>
|
|
</div>
|
|
<q-form
|
|
greedy
|
|
@submit.prevent
|
|
@validation-success="id !== undefined ? saveEdit(id) : saveData(profileId)"
|
|
>
|
|
<div
|
|
:class="
|
|
$q.screen.gt.xs
|
|
? `row q-col-gutter-y-md q-col-gutter-x-sm`
|
|
: routeName == 'probationAdd'
|
|
? `row q-col-gutter-y-md q-col-gutter-x-sm`
|
|
: `row q-col-gutter-y-md q-col-gutter-x-sm mobileClass q-mt-sm `
|
|
"
|
|
>
|
|
<div
|
|
v-if="routeName !== 'probationAdd'"
|
|
class="col-12 row items-center q-col-gutter-x-sm"
|
|
>
|
|
<span class="text-weight-bold text-dark text-body1"
|
|
>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</span
|
|
>
|
|
<div v-if="!editStatus">
|
|
<q-btn
|
|
v-if="!editStatus"
|
|
round
|
|
flat
|
|
dense
|
|
icon="mdi-download"
|
|
color="primary"
|
|
>
|
|
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
|
<q-menu>
|
|
<q-list style="min-width: 150px">
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="clickdownloadFile('pdf')"
|
|
>
|
|
<q-item-section avatar
|
|
><q-icon color="red" name="mdi-file-pdf" />
|
|
</q-item-section>
|
|
<q-item-section>ไฟล์ .PDF</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="clickdownloadFile('docx')"
|
|
>
|
|
<q-item-section avatar
|
|
><q-icon color="blue" name="mdi-file-word"
|
|
/></q-item-section>
|
|
<q-item-section>ไฟล์ .docx</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
<q-btn flat icon="edit" dense color="edit" round @click="edit">
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
<div v-else>
|
|
<q-btn flat icon="mdi-undo" dense color="red" round @click="cancel"
|
|
><q-tooltip>ยกเลิก</q-tooltip></q-btn
|
|
>
|
|
<q-btn
|
|
flat
|
|
icon="mdi-content-save-outline"
|
|
dense
|
|
color="public"
|
|
round
|
|
type="submit"
|
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 text-weight-bold text-dark items-center">
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
|
|
ผู้ทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-6">
|
|
<q-input
|
|
hide-bottom-space
|
|
readonly
|
|
dense
|
|
borderless
|
|
outlined
|
|
v-model="fullname"
|
|
label="ชื่อ-นามสกุล"
|
|
bg-color="white"
|
|
/>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<q-input
|
|
hide-bottom-space
|
|
readonly
|
|
dense
|
|
borderless
|
|
outlined
|
|
v-model="position"
|
|
label="ตำแหน่ง"
|
|
bg-color="white"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-12 text-weight-bold text-dark items-center">
|
|
ระยะเวลาการทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-4">
|
|
<q-select
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกระยะเวลา']"
|
|
hide-bottom-space
|
|
:options="monthOp"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
option-label="label"
|
|
option-value="value"
|
|
:outlined="editStatus == true"
|
|
v-model="monthSelect"
|
|
:label="`ระยะเวลา (เดือน)`"
|
|
bg-color="white"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="date_start"
|
|
:locale="'th'"
|
|
autoApply
|
|
borderless
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:readonly="editStatus != true"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
dense
|
|
borderless
|
|
:readonly="editStatus != true"
|
|
:outlined="editStatus == true"
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
|
|
hide-bottom-space
|
|
class="full-width datepicker"
|
|
:model-value="
|
|
date_start != null ? date2Thai(date_start) : undefined
|
|
"
|
|
:label="`${'ตั้งเเต่วันที่'}`"
|
|
bg-color="white"
|
|
>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="date_finish"
|
|
:locale="'th'"
|
|
autoApply
|
|
borderless
|
|
:readonly="isDatePicker2Readonly || editStatus != true"
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
hide-bottom-space
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
readonly
|
|
class="full-width datepicker"
|
|
:model-value="
|
|
date_finish != null ? date2Thai(date_finish) : undefined
|
|
"
|
|
:label="`${'ถึงวันที่'}`"
|
|
clearable
|
|
bg-color="white"
|
|
@clear="clearDateExam2"
|
|
>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-separator size="3px" color="grey-2" />
|
|
</div>
|
|
<div class="col-12 text-weight-bold text-dark items-center">
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
|
|
ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกผู้ดูเเล']"
|
|
option-value="id"
|
|
:options="optionCaretaker"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
hide-bottom-space
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="caretaker1"
|
|
:label="`ผู้ดูแลคนที่ 1`"
|
|
option-label="label"
|
|
@filter="filterFnCaretaker"
|
|
use-input
|
|
behavior="menu"
|
|
bg-color="white"
|
|
>
|
|
<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-xs-12 col-sm-6">
|
|
<q-select
|
|
clearable
|
|
:options="optionCaretaker2"
|
|
option-value="id"
|
|
option-label="label"
|
|
hide-bottom-space
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="caretaker2"
|
|
:label="`ผู้ดูแลคนที่ 2`"
|
|
@filter="filterFnCaretaker2"
|
|
use-input
|
|
behavior="menu"
|
|
bg-color="white"
|
|
>
|
|
<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-12">
|
|
<q-separator size="3px" color="grey-2" />
|
|
</div>
|
|
|
|
<div class="col-12 text-weight-bold text-dark items-center">
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
|
|
ผลการปฏิบัติงาน
|
|
</div>
|
|
|
|
<div class="col-12 text-top2 row items-center no-wrap">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
|
|
<q-btn
|
|
v-if="editStatus == true"
|
|
round
|
|
color="primary"
|
|
dense
|
|
icon="mdi-plus"
|
|
flat
|
|
class="q-ml-sm"
|
|
@click="addActivity"
|
|
/>
|
|
</div>
|
|
<div class="col-12 row q-gutter-sm">
|
|
<q-card
|
|
v-for="(item, index) in activityArray"
|
|
:key="index"
|
|
flat
|
|
bordered
|
|
class="col-12 q-pa-sm bg-grey-1"
|
|
>
|
|
<div class="col-12 row q-col-gutter-sm">
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-input
|
|
:rules="index < 2 ? [(val:string) => !!val || 'กรุณากรอกข้อมูล'] : []"
|
|
hide-bottom-space
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
class="bg-white"
|
|
type="textarea"
|
|
v-model="activity_desc[index]"
|
|
label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-5">
|
|
<q-input
|
|
:rules="index < 2 ? [(val:string) => !!val || 'กรุณากรอกข้อมูล'] : []"
|
|
hide-bottom-space
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
class="bg-white"
|
|
type="textarea"
|
|
v-model="goal_desc[index]"
|
|
label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
|
|
/>
|
|
</div>
|
|
<!-- delete -->
|
|
<div
|
|
v-if="index > 1"
|
|
class="col-xs-12 col-sm-1 flex justify-center items-center"
|
|
>
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="red"
|
|
icon="mdi-trash-can-outline"
|
|
@click="deleteactivity(index)"
|
|
v-if="editStatus == true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12 text-weight-bold text-dark">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<q-card bordered flat class="q-pa-sm bg-grey-1 row q-col-gutter-y-md">
|
|
<div class="col-12">
|
|
<div class="col-12 text-top2 row items-center">
|
|
ความรู้ความสามารถในการปฏิบัติงาน
|
|
<q-btn
|
|
v-if="editStatus == true"
|
|
round
|
|
color="primary"
|
|
dense
|
|
icon="mdi-plus"
|
|
flat
|
|
class="q-ml-sm"
|
|
@click="addKnowledge"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in knowledgeArray"
|
|
:key="index"
|
|
class="col-12 row q-col-gutter-sm"
|
|
>
|
|
<div class="col-xs-12 col-sm-11 q-my-xs">
|
|
<q-select
|
|
:option-label="(item:any) => `${item.title}-${item.description}`"
|
|
option-value="id"
|
|
map-options
|
|
:rules="
|
|
index < 3 ? [(val:string) => !!val || 'กรุณาเลือกความสามารถ'] : []
|
|
"
|
|
hide-bottom-space
|
|
:options="OPknowledge"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="knowledge[index]"
|
|
:label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1}`"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="index > 2"
|
|
class="col-xs-12 col-sm-1 flex justify-center items-center"
|
|
>
|
|
<q-btn
|
|
v-if="editStatus == true"
|
|
flat
|
|
round
|
|
color="red"
|
|
icon="mdi-trash-can-outline"
|
|
@click="deleteknowledge(index)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="col-12 text-top2 row items-center">
|
|
ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
|
|
</div>
|
|
<q-card
|
|
flat
|
|
bordered
|
|
class="col-12"
|
|
style="max-height: 500px; overflow-y: scroll"
|
|
>
|
|
<div class="example-row-column-width">
|
|
<div class="bg-grey-3 q-py-xs">
|
|
<div
|
|
class="row"
|
|
v-for="(item, index) in checkRule"
|
|
:key="item.id"
|
|
>
|
|
<div
|
|
v-if="index === 0"
|
|
:class="`${
|
|
$q.screen.gt.xs
|
|
? 'col-1 text-center'
|
|
: 'col-2 text-center'
|
|
} `"
|
|
>
|
|
<q-checkbox
|
|
:true-value="1"
|
|
:false-value="0"
|
|
v-if="item.status_select === 1"
|
|
v-model="item.checked"
|
|
dense
|
|
:disable="editStatus != true"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="index === 0"
|
|
:class="`${$q.screen.gt.xs ? 'col-11' : 'col-10'}`"
|
|
>
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-for="(item, index) in checkRule" :key="item.id">
|
|
<div
|
|
v-if="index === 1"
|
|
class="row bg-grey-2 q-py-xs borderCheck"
|
|
>
|
|
<div
|
|
:class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
|
|
></div>
|
|
<div class="col-10">
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-for="(item, index) in checkRule" :key="item.id">
|
|
<div
|
|
v-if="index === 2"
|
|
class="row bg-grey-2 q-py-xs borderCheck"
|
|
>
|
|
<div
|
|
:class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
|
|
></div>
|
|
<div
|
|
:class="`col-10 ${
|
|
$q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
|
|
}`"
|
|
>
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else-if="index > 2 && index < 9"
|
|
class="row borderCheck border_y q-py-xs items-center"
|
|
>
|
|
<div
|
|
:class="`${
|
|
$q.screen.gt.xs
|
|
? 'col-1 text-center'
|
|
: 'col-2 text-center'
|
|
} `"
|
|
>
|
|
<q-checkbox
|
|
:true-value="1"
|
|
:false-value="0"
|
|
v-model="item.checked"
|
|
dense
|
|
:disable="editStatus != true"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
:class="`${
|
|
$q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
|
|
}`"
|
|
>
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-for="(item, index) in checkRule" :key="item.id">
|
|
<div
|
|
v-if="index === 9"
|
|
class="row bg-grey-2 q-py-xs borderCheck"
|
|
>
|
|
<div
|
|
:class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
|
|
></div>
|
|
<div
|
|
:class="`col-10 ${
|
|
$q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
|
|
}`"
|
|
>
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else-if="index > 9 && index < 16"
|
|
class="row borderCheck border_y q-py-xs"
|
|
>
|
|
<div
|
|
:class="`${
|
|
$q.screen.gt.xs
|
|
? 'col-1 text-center'
|
|
: 'col-2 text-center'
|
|
} `"
|
|
>
|
|
<q-checkbox
|
|
:true-value="1"
|
|
:false-value="0"
|
|
v-model="item.checked"
|
|
dense
|
|
:disable="editStatus != true"
|
|
/>
|
|
</div>
|
|
<div
|
|
:class="`${
|
|
$q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
|
|
}`"
|
|
>
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-for="(item, index) in checkRule" :key="item.id">
|
|
<div
|
|
v-if="index === 16"
|
|
class="row bg-grey-2 q-py-xs borderCheck"
|
|
>
|
|
<div
|
|
:class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
|
|
></div>
|
|
<div
|
|
:class="`col-10 ${
|
|
$q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
|
|
}`"
|
|
>
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="index > 16 && index < 19"
|
|
class="row borderCheck border_y q-py-xs"
|
|
>
|
|
<div
|
|
:class="`${
|
|
$q.screen.gt.xs
|
|
? 'col-1 text-center'
|
|
: 'col-2 text-center'
|
|
} `"
|
|
>
|
|
<q-checkbox
|
|
:true-value="1"
|
|
:false-value="0"
|
|
v-model="item.checked"
|
|
dense
|
|
:disable="editStatus != true"
|
|
/>
|
|
</div>
|
|
<div
|
|
:class="`${
|
|
$q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
|
|
}`"
|
|
>
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-for="(item, index) in checkRule" :key="item.id">
|
|
<div
|
|
v-if="index === 19"
|
|
class="row bg-grey-2 q-py-xs borderCheck"
|
|
>
|
|
<div
|
|
:class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
|
|
></div>
|
|
<div
|
|
:class="`col-10 ${
|
|
$q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
|
|
}`"
|
|
>
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else-if="index > 19 && index < 30"
|
|
class="row borderCheck border_y q-py-xs"
|
|
>
|
|
<div
|
|
:class="`${
|
|
$q.screen.gt.xs
|
|
? 'col-1 text-center'
|
|
: 'col-2 text-center'
|
|
} `"
|
|
>
|
|
<q-checkbox
|
|
:true-value="1"
|
|
:false-value="0"
|
|
v-model="item.checked"
|
|
dense
|
|
:disable="editStatus != true"
|
|
/>
|
|
</div>
|
|
<div
|
|
:class="`${
|
|
$q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
|
|
}`"
|
|
>
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="col-12 text-top2">
|
|
กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
|
|
</div>
|
|
<div class="col-12 row q-col-gutter-md">
|
|
<div class="col-12">
|
|
<q-input
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="OtherLaw"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="col-12 text-top2">ทักษะ</div>
|
|
<div class="col-12 row q-col-gutter-sm">
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:option-label="
|
|
(item:any) => `${item.title} - ${item.level_description}`
|
|
"
|
|
option-value="id"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
|
|
:options="OPcomputer"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
map-options
|
|
:outlined="editStatus == true"
|
|
v-model="skill"
|
|
label="ด้านที่ 1"
|
|
>
|
|
<template v-slot:selected-item="scope">
|
|
<div class="ellipsis-2-lines">
|
|
{{ scope.opt.title }} -
|
|
{{ scope.opt.level_description }}
|
|
</div>
|
|
</template></q-select
|
|
>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
ellipsis-2-lines
|
|
:option-label="
|
|
(item:any) => `${item.title} - ${item.level_description}`
|
|
"
|
|
option-value="id"
|
|
map-options
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
|
|
:options="OPenglish"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="skill2"
|
|
label="ด้านที่ 2"
|
|
>
|
|
<template v-slot:selected-item="scope">
|
|
<div class="ellipsis-2-lines">
|
|
{{ scope.opt.title }} -
|
|
{{ scope.opt.level_description }}
|
|
</div>
|
|
</template></q-select
|
|
>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:option-label="
|
|
(item:any) => `${item.title} - ${item.level_description}`
|
|
"
|
|
option-value="id"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
|
|
:options="OPinfomation"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
map-options
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="skill3"
|
|
label="ด้านที่ 3"
|
|
>
|
|
<template v-slot:selected-item="scope">
|
|
<div class="ellipsis-2-lines">
|
|
{{ scope.opt.title }} -
|
|
{{ scope.opt.level_description }}
|
|
</div>
|
|
</template></q-select
|
|
>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:option-label="
|
|
(item:any) => `${item.title} - ${item.level_description}`
|
|
"
|
|
option-value="id"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
|
|
:options="OPresourse"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
map-options
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="skill4"
|
|
label="ด้านที่ 4"
|
|
>
|
|
<template v-slot:selected-item="scope">
|
|
<div class="ellipsis-2-lines">
|
|
{{ scope.opt.title }} -
|
|
{{ scope.opt.level_description }}
|
|
</div>
|
|
</template></q-select
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12 text-weight-bold text-dark">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
|
|
</div>
|
|
<div class="col-12">
|
|
<q-card bordered flat class="q-pa-md bg-grey-1">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-12 text-top2">สมรรถนะหลัก</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:options-html="true"
|
|
:option-label="
|
|
(item:any) => `${item.name} - ระดับ:๑ ${item.description}`
|
|
"
|
|
option-value="id"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
|
|
:options="filterMain(OPmain, [main2, main3, main4, main5])"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
map-options
|
|
:outlined="editStatus == true"
|
|
v-model="main"
|
|
label="ตัวที่ 1"
|
|
>
|
|
</q-select>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:options-html="true"
|
|
:option-label="
|
|
(item:any) => `${item.name} - ระดับ:๑ ${item.description}`
|
|
"
|
|
option-value="id"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
|
|
:options="filterMain(OPmain, [main, main3, main4, main5])"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
map-options
|
|
:outlined="editStatus == true"
|
|
v-model="main2"
|
|
label="ตัวที่ 2"
|
|
>
|
|
</q-select>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:options-html="true"
|
|
:option-label="
|
|
(item:any) => `${item.name} - ระดับ:๑ ${item.description}`
|
|
"
|
|
option-value="id"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
|
|
:options="filterMain(OPmain, [main, main2, main4, main5])"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
map-options
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="main3"
|
|
label="ตัวที่ 3"
|
|
>
|
|
</q-select>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:options-html="true"
|
|
:option-label="
|
|
(item:any) => `${item.name} - ระดับ:๑ ${item.description}`
|
|
"
|
|
option-value="id"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
|
|
:options="filterMain(OPmain, [main, main2, main3, main5])"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
map-options
|
|
:outlined="editStatus == true"
|
|
v-model="main4"
|
|
label="ตัวที่ 4"
|
|
>
|
|
</q-select>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะ']"
|
|
:options="filterMain(OPmain, [main, main2, main3, main4])"
|
|
:options-html="true"
|
|
:option-label="
|
|
(item:any) => `${item.name} - ระดับ:๑ ${item.description}`
|
|
"
|
|
option-value="id"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
map-options
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="main5"
|
|
label="ตัวที่ 5"
|
|
>
|
|
</q-select>
|
|
</div>
|
|
<div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:options-html="true"
|
|
:option-label="
|
|
(item:any) => `${item.name} - ระดับ:๒ ${item.description}`
|
|
"
|
|
option-value="id"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
|
|
:options="filterData(OPgroup, [group2, group3])"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
map-options
|
|
:outlined="editStatus == true"
|
|
v-model="group"
|
|
label="ตัวที่ 1"
|
|
>
|
|
</q-select>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:options-html="true"
|
|
:option-label="
|
|
(item:any) => `${item.name} - ระดับ:๒ ${item.description}`
|
|
"
|
|
option-value="id"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
|
|
:options="filterData(OPgroup, [group, group3])"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
map-options
|
|
:outlined="editStatus == true"
|
|
v-model="group2"
|
|
label="ตัวที่ 2"
|
|
>
|
|
</q-select>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-select
|
|
:options-html="true"
|
|
:option-label="
|
|
(item:any) => `${item.name} - ระดับ:๒ ${item.description}`
|
|
"
|
|
option-value="id"
|
|
map-options
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
|
|
:options="filterData(OPgroup, [group, group2])"
|
|
class="bg-white"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="group3"
|
|
label="ตัวที่ 3"
|
|
>
|
|
</q-select>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12 row">
|
|
<div class="col-12 text-weight-bold text-dark row items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
|
|
class="text-weight-regular q-pl-sm"
|
|
>
|
|
( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span
|
|
>
|
|
</div>
|
|
<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
|
|
<div class="row col-12 q-gutter-lg">
|
|
<div class="col-12 row">
|
|
<div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
|
|
<div class="col-12 row q-col-gutter-md">
|
|
<div class="col-12 column q-ml-md">
|
|
<li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
|
|
<li>มีความรับผิดชอบในการปฏิบัติงาน</li>
|
|
<li>
|
|
ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว
|
|
เอาใจใส่เป็นมาตรฐานเดียวกัน
|
|
</li>
|
|
<li>
|
|
ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 row">
|
|
<div class="col-12 text-top2">ความมีคุณธรรมจริยธรรม ได้แก่</div>
|
|
<div class="col-12 row q-col-gutter-md">
|
|
<div class="col-12 column q-ml-md">
|
|
<li>
|
|
อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
|
|
</li>
|
|
<li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
|
|
<li>
|
|
ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
|
|
อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
|
|
และพระมหากษัตริย์
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 row">
|
|
<div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
|
|
<div class="col-12 row q-col-gutter-md">
|
|
<div class="col-12 column q-ml-md">
|
|
<li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
|
|
<li>
|
|
แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
|
|
</li>
|
|
<li>
|
|
ไม่กระทำการใด ๆ
|
|
อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
|
|
</li>
|
|
<li>
|
|
ไม่กระทำการใด ๆ
|
|
อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
|
|
</li>
|
|
<li>
|
|
ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12 row">
|
|
<div class="col-12 text-weight-bold text-dark">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
3.5 อื่นๆ (ถ้ามี)
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="Other"
|
|
bg-color="white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 row">
|
|
<div class="col-12 text-weight-bold text-dark row items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
|
|
<q-btn
|
|
v-if="editStatus == true"
|
|
round
|
|
color="primary"
|
|
dense
|
|
icon="mdi-plus"
|
|
flat
|
|
class="q-ml-sm"
|
|
@click="addProductivity"
|
|
/>
|
|
</div>
|
|
<div class="col-12 row q-gutter-md">
|
|
<q-card
|
|
v-for="(item, index) in ProductivityArray"
|
|
:key="index"
|
|
flat
|
|
bordered
|
|
class="col-12 q-pa-sm bg-grey-1"
|
|
>
|
|
<div class="col-12 row q-col-gutter-sm">
|
|
<div class="col-xs-12 col-sm-6">
|
|
<q-input
|
|
hide-bottom-space
|
|
:rules="
|
|
index < 1 ? [(val:string) => !!val || 'กรุณากรอกข้อมูล'] : []
|
|
"
|
|
type="textarea"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="output_desc[index]"
|
|
label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
|
|
bg-color="white"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-5">
|
|
<q-input
|
|
:rules="
|
|
index < 1 ? [(val:string) => !!val || 'กรุณากรอกข้อมูล'] : []
|
|
"
|
|
hide-bottom-space
|
|
bg-color="white"
|
|
type="textarea"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="indicator_desc[index]"
|
|
label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
v-if="index > 0"
|
|
class="col-xs-12 col-sm-1 flex justify-center items-center"
|
|
>
|
|
<q-btn
|
|
flat
|
|
v-if="editStatus == true"
|
|
round
|
|
color="red"
|
|
icon="mdi-trash-can-outline"
|
|
@click="deleteProductivitys(index)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<q-separator size="3px" color="grey-2" />
|
|
</div>
|
|
<div class="col-12 row q-col-gutter-y-sm">
|
|
<div class="col-12 text-weight-bold text-dark items-center">
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
|
|
การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
|
|
<div class="col-12 text-top2">
|
|
ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
|
|
ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
|
|
</div>
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
|
|
</div>
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
4.2
|
|
การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
|
|
</div>
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
4.3
|
|
การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
|
|
</div>
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
4.4 การอบรมอื่นๆ ที่หน่วยงานกำหนด (ถ้ามี)
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-separator size="3px" color="grey-2" />
|
|
</div>
|
|
|
|
<div class="col-12 row q-col-gutter-y-sm">
|
|
<div class="col-12 text-weight-bold text-dark items-center">
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
|
|
การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
5.1
|
|
ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
|
|
</div>
|
|
<div class="col-12">
|
|
<q-card flat bordered class="q-pa-sm bg-grey-1">
|
|
<div class="row q-col-gutter-y-sm">
|
|
<div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
|
|
<div class="col-12">
|
|
<div class="column q-ml-md">
|
|
<li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
|
|
<li>ทักษะที่ ก.ก. กำหนด</li>
|
|
<li>สมรรถนะตามที่ ก.ก. กำหนด</li>
|
|
<li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
|
|
<li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
|
|
<li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
|
|
<li>อื่นๆ (ถ้ามี)</li>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="Other5"
|
|
label="กรอกอื่นๆ"
|
|
bg-color="white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 row">
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
5.3
|
|
ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
|
|
</div>
|
|
<div class="col-12">
|
|
<q-card flat bordered class="q-pa-sm bg-grey-1">
|
|
<div class="column q-ml-md">
|
|
<li>
|
|
บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา
|
|
</li>
|
|
<li>แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา</li>
|
|
<li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 row">
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
5.4 สัดส่วนของคะแนนและมาตรฐานการประเมิน
|
|
</div>
|
|
<div class="col-12">
|
|
<q-card flat bordered class="q-pa-sm bg-grey-1">
|
|
<div class="q-col-gutter-md">
|
|
<div class="q-ml-md">
|
|
<li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
|
|
<div class="q-pl-lg">
|
|
ส่วนที่ 1 คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ
|
|
50
|
|
</div>
|
|
<div class="q-pl-lg">
|
|
ส่วนที่ 2 คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ
|
|
50
|
|
</div>
|
|
<div class="q-pl-lg">
|
|
มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60
|
|
</div>
|
|
<li>
|
|
สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
|
|
</li>
|
|
<div class="q-pl-lg">
|
|
คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
|
|
</div>
|
|
<div>
|
|
<span style="text-decoration: underline">หมายเหตุ</span>
|
|
ให้นำคะแนนรวมทั้ง 2
|
|
ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
|
|
จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<q-separator size="3px" color="grey-2" />
|
|
</div>
|
|
|
|
<div class="col-12 row q-col-gutter-y-sm">
|
|
<div class="col-12 text-weight-bold text-dark items-center">
|
|
การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
ผู้ทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-xs-12 col-sm-4">
|
|
<q-input
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="fullname"
|
|
label="ชื่อ-นามสกุล"
|
|
bg-color="white"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-4">
|
|
<q-input
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="position"
|
|
label="ตำแหน่ง"
|
|
bg-color="white"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-4">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="date1"
|
|
:locale="'th'"
|
|
autoApply
|
|
:readonly="editStatus != true"
|
|
borderless
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
class="full-width datepicker"
|
|
:model-value="date1 != null ? date2Thai(date1) : null"
|
|
label="ลงวันที่"
|
|
bg-color="white"
|
|
>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
<div class="col-xs-12 col-sm-8">
|
|
<q-select
|
|
v-if="editStatus == true"
|
|
:options="optionCaretaker"
|
|
option-label="label"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="caretaker1"
|
|
label="ผู้ดูแลคนที่ 1"
|
|
@filter="filterFnCaretaker"
|
|
use-input
|
|
behavior="menu"
|
|
bg-color="white"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
ไม่มีข้อมูล
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
<q-select
|
|
v-else
|
|
:options="optionCaretaker"
|
|
option-value="id"
|
|
option-label="label"
|
|
class="col-xs-12 col-sm-8"
|
|
:readonly="!editStatus"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus"
|
|
v-model="caretaker1"
|
|
label="ผู้ดูแลคนที่ 1"
|
|
@filter="filterFnCaretaker"
|
|
use-input
|
|
behavior="menu"
|
|
bg-color="white"
|
|
>
|
|
<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-xs-12 col-sm-4">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="date2"
|
|
:locale="'th'"
|
|
autoApply
|
|
borderless
|
|
:enableTimePicker="false"
|
|
:readonly="editStatus != true"
|
|
week-start="0"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
class="full-width datepicker"
|
|
:model-value="date2 != null ? date2Thai(date2) : null"
|
|
label="ลงวันที่"
|
|
bg-color="white"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon
|
|
name="event"
|
|
class="cursor-pointer"
|
|
style="color: var(--q-primary)"
|
|
>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
|
|
<q-select
|
|
clearable
|
|
v-if="editStatus == true"
|
|
:options="optionCaretaker2"
|
|
option-label="label"
|
|
class="col-xs-12 col-sm-8"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="caretaker2"
|
|
label="ผู้ดูแลคนที่ 2"
|
|
@filter="filterFnCaretaker2"
|
|
use-input
|
|
behavior="menu"
|
|
bg-color="white"
|
|
><template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
|
|
<q-select
|
|
clearable
|
|
v-else
|
|
:options="optionCaretaker2"
|
|
option-value="id"
|
|
option-label="label"
|
|
class="col-xs-12 col-sm-8"
|
|
:readonly="!editStatus"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus"
|
|
v-model="caretaker2"
|
|
label="ผู้ดูแลคนที่ 2"
|
|
@filter="filterFnCaretaker2"
|
|
use-input
|
|
behavior="menu"
|
|
bg-color="white"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
|
|
<div class="col-xs-12 col-sm-4">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="date3"
|
|
:locale="'th'"
|
|
autoApply
|
|
borderless
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:readonly="editStatus != true || !caretaker2"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
hide-bottom-space
|
|
:disable="!caretaker2"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
:rules="
|
|
caretaker2 ? [(val:string) => !!val || 'กรุณาเลือกวันที่'] : []
|
|
"
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
class="full-width datepicker"
|
|
:model-value="caretaker2 != null ? date2Thai(date3) : null"
|
|
label="ลงวันที่"
|
|
bg-color="white"
|
|
>
|
|
<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>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-12 text-top2 items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
ผู้บังคับบัญชาผู้มอบหมายงาน
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="row q-col-gutter-sm">
|
|
<q-select
|
|
v-if="editStatus == true"
|
|
:options="OPcommanderFn"
|
|
option-label="label"
|
|
class="col-xs-12 col-sm-8"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
|
|
:outlined="editStatus == true"
|
|
v-model="commander"
|
|
hide-bottom-space
|
|
label="ผู้บังคับบัญชา"
|
|
use-input
|
|
behavior="menu"
|
|
@filter="filterFnCommander"
|
|
bg-color="white"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
ไม่มีข้อมูล
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
|
|
<q-select
|
|
v-else
|
|
:options="OPcommanderFn"
|
|
option-value="id"
|
|
option-label="label"
|
|
class="col-xs-12 col-sm-8"
|
|
:readonly="!editStatus"
|
|
dense
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
|
|
borderless
|
|
hide-bottom-space
|
|
:outlined="editStatus"
|
|
v-model="commander"
|
|
label="ผู้บังคับบัญชา"
|
|
use-input
|
|
behavior="menu"
|
|
@filter="filterFnCommander"
|
|
bg-color="white"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
ไม่มีข้อมูล
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
|
|
<div class="col-xs-12 col-sm-4">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="date4"
|
|
:locale="'th'"
|
|
autoApply
|
|
borderless
|
|
:readonly="editStatus != true"
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
class="full-width datepicker"
|
|
:model-value="date4 != null ? date2Thai(date4) : null"
|
|
label="ลงวันที่"
|
|
bg-color="white"
|
|
>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="row q-col-gutter-y-sm">
|
|
<div class="col-12 text-top2 row items-center">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
ประธานกรรมการ
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row q-col-gutter-sm">
|
|
<q-select
|
|
v-if="editStatus == true"
|
|
:options="OPchairmanFn"
|
|
option-label="label"
|
|
class="col-xs-12 col-sm-8"
|
|
:readonly="editStatus != true"
|
|
dense
|
|
hide-bottom-space
|
|
borderless
|
|
:outlined="editStatus == true"
|
|
v-model="chairman"
|
|
label="ประธานกรรมการ"
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
|
|
use-input
|
|
behavior="menu"
|
|
@filter="filterFnChairman"
|
|
bg-color="white"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
ไม่มีข้อมูล
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
|
|
<q-select
|
|
v-else
|
|
:options="OPchairmanFn"
|
|
option-value="id"
|
|
option-label="label"
|
|
class="col-xs-12 col-sm-8"
|
|
:readonly="!editStatus"
|
|
dense
|
|
hide-bottom-space
|
|
borderless
|
|
:outlined="editStatus"
|
|
v-model="chairman"
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
|
|
label="ประธานกรรมการ"
|
|
use-input
|
|
behavior="menu"
|
|
@filter="filterFnChairman"
|
|
bg-color="white"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
ไม่มีข้อมูล
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="routeName == 'probationAdd'"
|
|
class="full-width"
|
|
align="right"
|
|
>
|
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
</template>
|
|
<style scoped>
|
|
.mobileClass {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding-right: 16px;
|
|
padding-bottom: 16px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.border_y {
|
|
border-left: 1px solid #d8d8d8;
|
|
border-right: 1px solid #d8d8d8;
|
|
}
|
|
|
|
.borderCheck {
|
|
border-bottom: 1px solid #d8d8d8;
|
|
}
|
|
|
|
.text-top2 {
|
|
font-weight: 500;
|
|
color: rgb(70, 68, 68);
|
|
}
|
|
|
|
.text-top0 {
|
|
font-weight: 600;
|
|
padding-bottom: 8px;
|
|
color: rgb(70, 68, 68);
|
|
}
|
|
|
|
.text-Hd {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
padding-bottom: 5px;
|
|
color: #02a998;
|
|
}
|
|
|
|
.bin {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.q-item span {
|
|
white-space: normal;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|