1227 lines
61 KiB
Vue
1227 lines
61 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, watch } from "vue";
|
|
import type {
|
|
DataOption1,
|
|
DataOption,
|
|
} from "@/modules/05_placement/interface/index/Main";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import type { QForm } from "quasar";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
date2Thai,
|
|
messageError,
|
|
showLoader,
|
|
hideLoader,
|
|
success,
|
|
dialogConfirm,
|
|
} = mixin;
|
|
const $q = useQuasar(); //ใช้ noti quasar
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const props = defineProps({
|
|
next: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
previous: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
});
|
|
const next = () => props.next();
|
|
const orderId = route.params.orderid;
|
|
|
|
const myForm = ref<QForm>();
|
|
const myForm2 = ref<QForm>();
|
|
|
|
//option
|
|
const typeOrderOption = ref<DataOption1[]>([]);
|
|
const byOrderOption = ref<DataOption1[]>([]);
|
|
const CommandOption = ref<DataOption1[]>([]);
|
|
|
|
//Main
|
|
const typeOrder = ref<any>([]);
|
|
const nameOrder = ref<string>("");
|
|
const command = ref<number | "">();
|
|
const dateYear = ref<number>(new Date().getFullYear());
|
|
const dateCommand = ref<Date>(new Date());
|
|
const byOrder = ref<string>("");
|
|
const nameCommand = ref<any>([]);
|
|
const positionCommand = ref<string>("");
|
|
|
|
//form C-PM-01 - 04
|
|
const examRound = ref<string>("");
|
|
const examRoundOption = ref<DataOption1[]>([]);
|
|
const conclusionRegisterNo = ref<string>("");
|
|
const conclusionRegisterDate = ref<Date>(new Date());
|
|
// const registerOption = ref<DataOption1[]>([
|
|
// {
|
|
// name: "รับสมคัรสอบ ครั้งที่ 1",
|
|
// id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
|
|
// },
|
|
// ]);
|
|
const conclusionResultNo = ref<string>("");
|
|
const conclusionResultDate = ref<Date>(new Date());
|
|
// const announceOption = ref<DataOption1[]>([
|
|
// {
|
|
// name: "ผลการสอบแข่งขั้น ครั้งที่ 1",
|
|
// id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
|
|
// },
|
|
// ]);
|
|
|
|
// C-PM-05 - 06
|
|
const conclusion1 = ref<string>("");
|
|
const conclusionDate1 = ref<Date>(new Date());
|
|
const conclusion1Option = ref<DataOption1[]>([
|
|
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const conclusion2 = ref<string>("");
|
|
const conclusionDate2 = ref<Date>(new Date());
|
|
const conclusion2Option = ref<DataOption1[]>([
|
|
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const meeting = ref<string>("");
|
|
const dateMeeting = ref<Date>(new Date());
|
|
const meetingOption = ref<DataOption1[]>([
|
|
{ name: "การประชุมครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
|
|
// C-PM-07
|
|
const conclusionRelocation1 = ref<string>("");
|
|
const conclusionRelocationDate1 = ref<Date>(new Date());
|
|
const RelocationOption1 = ref<DataOption1[]>([
|
|
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const conclusionRelocation2 = ref<string>("");
|
|
const conclusionRelocationDate2 = ref<Date>(new Date());
|
|
const RelocationOption2 = ref<DataOption1[]>([
|
|
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
|
|
// C-PM-08 && 14
|
|
const conclusion = ref<string>("");
|
|
const conclusionDate = ref<Date>(new Date());
|
|
const conclusionOption = ref<DataOption1[]>([
|
|
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const conclusionLeave = ref<string>("");
|
|
const conclusionLeaveDate = ref<Date>(new Date());
|
|
const LeaveOption = ref<DataOption1[]>([
|
|
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const conclusionReceive = ref<string>("");
|
|
const conclusionReceiveDate = ref<Date>(new Date());
|
|
const ReceiveOption = ref<DataOption1[]>([
|
|
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
|
|
// C-PM-09
|
|
const organizations = ref<string>("");
|
|
const organizationsOption = ref<DataOption1[]>([
|
|
{ name: "หน่วยงานที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const order = ref<string>("");
|
|
const orderDate = ref<Date>(new Date());
|
|
const orderOption = ref<DataOption1[]>([
|
|
{ name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const book = ref<string>("");
|
|
const bookDate = ref<Date>(new Date());
|
|
const bookOption = ref<DataOption1[]>([
|
|
{ name: "หนังสือ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
|
|
// C-PM-10
|
|
const organizationsOld = ref<string>("");
|
|
const organizationsOldOption = ref<DataOption1[]>([
|
|
{ name: "หน่วยงานที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const orderOld = ref<string>("");
|
|
const orderOldDate = ref<Date>(new Date());
|
|
const orderOldOption = ref<DataOption1[]>([
|
|
{ name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const locationname = ref<string>("");
|
|
const experimentOc = ref<string>("");
|
|
const experimentformDate = ref<Date>(new Date());
|
|
const experimenttoDate = ref<Date>(new Date());
|
|
const chairman = ref<string>("");
|
|
const chairmanOption = ref<DataOption1[]>([
|
|
{ name: "ประธาน ", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
]);
|
|
const director = ref<string>("");
|
|
const directorOption = ref<DataOption1[]>([
|
|
{ name: "กรรมการ 1 ", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
{ name: "กรรมการ 2 ", id: "3fa85f64-5717-4562-e24k-2c963f66afa6" },
|
|
]);
|
|
const director2 = ref<string>("");
|
|
const director2Option = ref<DataOption1[]>([
|
|
{ name: "กรรมการ 1 ", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
|
|
{ name: "กรรมการ 2 ", id: "3fa85f64-5717-4562-e24k-2c963f66afa6" },
|
|
]);
|
|
|
|
// C-PM-11-12
|
|
const committeeOc = ref<string>("");
|
|
const committeeOcOption = ref<DataOption1[]>([
|
|
{
|
|
name: "หน่วยงาน (อนุสนธิคำสั่ง) ",
|
|
id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
|
|
},
|
|
]);
|
|
const committeeOrder = ref<string>("");
|
|
const committeeOrderOption = ref<DataOption1[]>([
|
|
{
|
|
name: "คำสั่ง (อนุสนธิคำสั่ง) ",
|
|
id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
|
|
},
|
|
]);
|
|
const committeeDate = ref<Date>(new Date());
|
|
|
|
// C-PM-13
|
|
const receiveOc = ref<string>("");
|
|
const receiveOcOption = ref<DataOption1[]>([
|
|
{
|
|
name: "คำสั่งโอน ",
|
|
id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
|
|
},
|
|
]);
|
|
|
|
// C-PM-16
|
|
const orderNumber = ref<string>();
|
|
const orderNumberDate = ref<Date>(new Date());
|
|
|
|
onMounted(async () => {
|
|
if (orderId) {
|
|
fecthTypeOption("hasData");
|
|
} else {
|
|
fecthTypeOption("noData");
|
|
}
|
|
});
|
|
watch(byOrder, async () => {
|
|
await http
|
|
.get(config.API.approverOC(byOrder.value))
|
|
.then((res: any) => {
|
|
CommandOption.value = res.data.result;
|
|
console.log(CommandOption.value);
|
|
})
|
|
.catch((e: any) => {
|
|
console.log(e);
|
|
});
|
|
});
|
|
watch(nameCommand, async () => {
|
|
console.log(nameCommand.value);
|
|
console.log(positionCommand.value);
|
|
|
|
if (positionCommand.value === "" || positionCommand.value === undefined) {
|
|
positionCommand.value = nameCommand.value.positionName;
|
|
}
|
|
// if (nameCommand.value === "") {
|
|
// positionCommand.value = "";
|
|
// }
|
|
});
|
|
const fecthTypeOption = async (actions: string) => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.typeOrder())
|
|
.then((res) => {
|
|
typeOrderOption.value = res.data.result.map((e: any) => ({
|
|
id: e.id,
|
|
name: e.name,
|
|
category: e.category,
|
|
commandCode: e.commandCode,
|
|
fullname: e.commandCode + " " + e.name,
|
|
}));
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
if (actions == "hasData") {
|
|
await fetchdetailOrder();
|
|
}
|
|
await fecthCommand();
|
|
await fecthExamRoundOption();
|
|
hideLoader();
|
|
});
|
|
};
|
|
const fetchdetailOrder = async () => {
|
|
let orderIdString = orderId.toString();
|
|
await http
|
|
.get(config.API.detailOrder(orderIdString))
|
|
.then((res: any) => {
|
|
console.log(typeOrderOption.value);
|
|
|
|
const data = res.data.result;
|
|
typeOrder.value = typeOrderOption.value.find(
|
|
(e) => e.id === data.orderTypeValue
|
|
);
|
|
nameOrder.value = data.orderTitle;
|
|
command.value = data.orderNo;
|
|
dateYear.value = Number(data.orderYear);
|
|
dateCommand.value = data.orderDate;
|
|
byOrder.value = data.orderBy;
|
|
nameCommand.value = data.signatoryBy;
|
|
positionCommand.value = data.signatoryPosition;
|
|
console.log(nameCommand.value);
|
|
|
|
examRound.value = data.examRound;
|
|
conclusionRegisterNo.value = data.conclusionRegisterNo;
|
|
conclusionRegisterDate.value = data.conclusionRegisterDate;
|
|
conclusionResultNo.value = data.conclusionResultNo;
|
|
conclusionResultDate.value = data.conclusionResultDate;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
await fecthExamRoundOption();
|
|
await fecthCommand();
|
|
hideLoader();
|
|
});
|
|
};
|
|
const fecthCommand = async () => {
|
|
await http
|
|
.get(config.API.organizationsOrder())
|
|
.then((res: any) => {
|
|
console.log(res);
|
|
byOrderOption.value = res.data.result;
|
|
})
|
|
.catch((e: any) => {
|
|
console.log(e);
|
|
});
|
|
};
|
|
const fecthExamRoundOption = async () => {
|
|
await http
|
|
.get(config.API.examroundOrder())
|
|
.then((res) => {
|
|
examRoundOption.value = res.data.result;
|
|
// console.log(examRoundOption.value);
|
|
})
|
|
.catch((e) => { });
|
|
};
|
|
|
|
const submit = async () => {
|
|
const formdata = {
|
|
orderTypeValue: typeOrder.value.id,
|
|
orderTitle: nameOrder.value,
|
|
orderNo:
|
|
command.value == undefined || command.value == "" ? "" : command.value,
|
|
orderYear: dateYear.value,
|
|
orderDate: dateCommand.value,
|
|
orderBy: byOrder.value,
|
|
registerPosition: "",
|
|
signatoryBy:
|
|
nameCommand.value.id === undefined
|
|
? nameCommand.value
|
|
: nameCommand.value.id,
|
|
signatoryPosition: positionCommand.value,
|
|
};
|
|
if (
|
|
typeOrder.value.commandCode == "C-PM-01" ||
|
|
typeOrder.value.commandCode == "C-PM-02" ||
|
|
typeOrder.value.commandCode == "C-PM-03" ||
|
|
typeOrder.value.commandCode == "C-PM-04"
|
|
) {
|
|
Object.assign(formdata, {
|
|
examRound: examRound.value,
|
|
conclusionRegisterNo: conclusionRegisterNo.value,
|
|
conclusionRegisterDate: conclusionRegisterDate.value,
|
|
conclusionResultNo: conclusionResultNo.value.toString(),
|
|
conclusionResultDate: conclusionResultDate.value,
|
|
});
|
|
} else if (
|
|
typeOrder.value.commandCode == "C-PM-04" ||
|
|
typeOrder.value.commandCode == "C-PM-05"
|
|
) {
|
|
Object.assign(formdata, {
|
|
conclusionRegisterNo: conclusion1.value,
|
|
conclusionRegisterDate: conclusionDate1.value,
|
|
conclusionResultNo: conclusion2.value,
|
|
conclusionResultDate: conclusionDate2.value,
|
|
meeting: meeting.value,
|
|
dateMeeting: dateMeeting.value,
|
|
});
|
|
} else if (typeOrder.value.commandCode == "C-PM-07") {
|
|
Object.assign(formdata, {
|
|
conclusionRelocation1: conclusionRelocation1.value,
|
|
conclusionRelocationDate1: conclusionRelocationDate1.value,
|
|
conclusionRelocation2: conclusionRelocation2.value,
|
|
conclusionRelocationDate2: conclusionRelocationDate2.value,
|
|
});
|
|
} else if (typeOrder.value.commandCode == "C-PM-08") {
|
|
Object.assign(formdata, {
|
|
conclusion: conclusion.value,
|
|
conclusionDate: conclusionDate.value,
|
|
conclusionLeave: conclusionLeave.value,
|
|
conclusionLeaveDate: conclusionLeaveDate.value,
|
|
conclusionReceive: conclusionReceive.value,
|
|
conclusionReceiveDate: conclusionReceiveDate.value,
|
|
});
|
|
} else if (typeOrder.value.commandCode == "C-PM-09") {
|
|
Object.assign(formdata, {
|
|
organizations: organizations.value,
|
|
order: order.value,
|
|
orderDate: orderDate.value,
|
|
book: book.value,
|
|
bookDate: bookDate.value,
|
|
});
|
|
} else if (typeOrder.value.commandCode == "C-PM-10") {
|
|
Object.assign(formdata, {
|
|
organizationsOld: organizationsOld.value,
|
|
orderOld: orderOld.value,
|
|
orderOldDate: orderOldDate.value,
|
|
locationname: locationname.value,
|
|
experimentOc: experimentOc.value,
|
|
experimentformDate: experimentformDate.value,
|
|
experimenttoDate: experimenttoDate.value,
|
|
chairman: chairman.value,
|
|
director: director.value,
|
|
director2: director2.value,
|
|
});
|
|
} else if (
|
|
typeOrder.value.commandCode == "C-PM-11" ||
|
|
typeOrder.value.commandCode == "C-PM-12"
|
|
) {
|
|
Object.assign(formdata, {
|
|
committeeOc: committeeOc.value,
|
|
committeeOrder: committeeOrder.value,
|
|
committeeDate: committeeDate.value,
|
|
});
|
|
} else if (typeOrder.value.commandCode == "C-PM-13") {
|
|
Object.assign(formdata, {
|
|
receiveOc: receiveOc.value,
|
|
});
|
|
} else if (typeOrder.value.commandCode == "C-PM-14") {
|
|
Object.assign(formdata, {
|
|
conclusionReceive: conclusionReceive.value,
|
|
conclusionReceiveDate: conclusionReceiveDate.value,
|
|
});
|
|
} else if (typeOrder.value.commandCode == "C-PM-16") {
|
|
Object.assign(formdata, {
|
|
orderNumber: orderNumber.value,
|
|
orderNumberDate: orderNumberDate.value,
|
|
});
|
|
}
|
|
console.log(formdata);
|
|
|
|
await myForm.value!.validate().then((result: boolean) => {
|
|
if (result) {
|
|
dialogConfirm($q, () => {
|
|
if (!orderId) {
|
|
createListOrder(formdata);
|
|
} else {
|
|
let orderIdString = orderId.toString();
|
|
updateOrder(formdata, orderIdString);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
const createListOrder = async (formData: Object) => {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.createOrder(), formData)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
localStorage.setItem("orderId", data.id);
|
|
router.push(`/order/detail/${data.id}?step=${2}`);
|
|
next();
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
const updateOrder = async (formData: Object, orderId: string) => {
|
|
showLoader();
|
|
await http
|
|
.put(config.API.detailOrder(orderId), formData)
|
|
.then((res) => {
|
|
console.log(res);
|
|
next();
|
|
success($q, "แก้ไขข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
|
*/
|
|
const getClass = (val: boolean) => {
|
|
return {
|
|
"full-width inputgreen cursor-pointer": val,
|
|
"full-width cursor-pointer": !val,
|
|
};
|
|
};
|
|
</script>
|
|
<template>
|
|
<div style="max-height: 68vh; overflow-y: scroll">
|
|
<!-- Main -->
|
|
<q-form ref="myForm" class="q-pa-md">
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
|
|
<div class="col-xs-12 col-md-6">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="typeOrder"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]" hide-bottom-space
|
|
:label="`${'ประเภทคำสั่ง'}`" map-options option-label="fullname" :options="typeOrderOption" option-value="id"
|
|
use-input input-debounce="0" />
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`" hide-bottom-space />
|
|
</div>
|
|
<div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
|
|
<div class="col-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="command" hide-bottom-space :label="`${'คำสั่งเลขที่'}`"/>
|
|
</div>
|
|
<label class="col-1 flex justify-center items-center text-bold">/</label>
|
|
<div class="col-5">
|
|
<datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false">
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
|
|
:label="`${'พ.ศ.'}`" dense outlined>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-5 col-md-3">
|
|
<datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
|
|
" :label="`${'วันที่คำสั่งมีผล'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`]">
|
|
<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-xs-12 col-md-6">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" emit-value hide-bottom-space
|
|
:label="`${'คำสั่งโดย'}`" map-options option-label="name" :options="byOrderOption" option-value="id" use-input
|
|
input-debounce="0" @update:model-value="(nameCommand = ''), (positionCommand = '')" />
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกผู้มีอำนาจลงนาม'}`]" hide-bottom-space
|
|
:label="`${'ผู้มีอำนาจลงนาม'}`" map-options option-label="name" :options="CommandOption" option-value="id"
|
|
use-input input-debounce="0">
|
|
<template v-if="CommandOption.length === 0" v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-primary">
|
|
กรุณาเลือกคำสั่งโดยก่อน
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</selector>
|
|
|
|
<!-- <q-input
|
|
:class="getClass(true)"
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="nameCommand"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
|
|
:label="`${'ผู้มีอำนาจลงนาม'}`"
|
|
hide-bottom-space
|
|
/> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="positionCommand"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
|
|
hide-bottom-space disable />
|
|
</div>
|
|
<div class="col-12">
|
|
<q-separator v-if="typeOrder.commandCode" />
|
|
</div>
|
|
|
|
<!-- C-PM-01-04 -->
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-01' ||
|
|
typeOrder.commandCode === 'C-PM-02' ||
|
|
typeOrder.commandCode === 'C-PM-03' ||
|
|
typeOrder.commandCode === 'C-PM-04'
|
|
">
|
|
<div class="col-xs-12 col-md-12">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
|
|
emit-value map-options option-label="examRoundName" :options="examRoundOption" option-value="examRoundValue"
|
|
use-input input-debounce="0" />
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRegisterNo"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
|
|
:label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRegisterNo"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
|
|
hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" emit-value map-options
|
|
option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionRegisterDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionRegisterDate != null
|
|
? date2Thai(conclusionRegisterDate)
|
|
: null
|
|
" :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
|
|
(val) =>
|
|
!!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
|
|
]">
|
|
<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-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionResultNo"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง ผลการสอบฯ)'}`]"
|
|
:label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบฯ)'}`" hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionResultNo"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
|
|
hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" emit-value map-options
|
|
option-label="name" :options="announceOption" option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionResultDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionResultDate != null
|
|
? date2Thai(conclusionResultDate)
|
|
: null
|
|
" :label="`${'ลงวันที่ (เรื่อง ผลการสอบฯ)'}`" :rules="[
|
|
(val) =>
|
|
!!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบฯ)'}`,
|
|
]">
|
|
<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>
|
|
|
|
<!-- C-PM-05-06 -->
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-05' ||
|
|
typeOrder.commandCode === 'C-PM-06'
|
|
">
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusion1"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
|
|
hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusion1"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]" hide-bottom-space
|
|
:label="`${'มติ กก. ครั้งที่'}`" emit-value map-options option-label="name" :options="conclusion1Option"
|
|
option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionDate1" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionDate1 != null ? date2Thai(conclusionDate1) : null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusion2"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
|
|
hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusion2" :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]" hide-bottom-space :label="`${'มติ กก. ครั้งที่ '}`" emit-value map-options option-label="name" :options="conclusion2Option" option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionDate2" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionDate2 != null ? date2Thai(conclusionDate2) : null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกการประชุม ครั้งที่'}`]" :label="`${'การประชุม ครั้งที่'}`"
|
|
hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="meeting"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกการประชุม ครั้งที่ '}`]" hide-bottom-space
|
|
:label="`${'การประชุมครั้งที่ '}`" emit-value map-options option-label="name" :options="meetingOption"
|
|
option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="dateMeeting" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="dateMeeting != null ? date2Thai(dateMeeting) : null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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>
|
|
|
|
<!-- C-PM-07 -->
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-07'">
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRelocation1"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
|
|
hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRelocation1" :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]" hide-bottom-space :label="`${'มติ กก. ครั้งที่'}`" emit-value map-options option-label="name" :options="RelocationOption1" option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionRelocationDate1" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionRelocationDate1 != null
|
|
? date2Thai(conclusionRelocationDate1)
|
|
: null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRelocation2"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
|
|
hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRelocation2" :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]" hide-bottom-space :label="`${'มติ กก. ครั้งที่ '}`" emit-value map-options option-label="name" :options="RelocationOption2" option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionRelocationDate2" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionRelocationDate2 != null
|
|
? date2Thai(conclusionRelocationDate2)
|
|
: null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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>
|
|
|
|
<!-- C-PM-08 -->
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-08'">
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusion"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
|
|
hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusion" :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]" hide-bottom-space :label="`${'มติ กก. ครั้งที่'}`" emit-value map-options option-label="name" :options="conclusionOption" option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionDate != null ? date2Thai(conclusionDate) : null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionLeave"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง ออกจากราชการ)'}`]"
|
|
:label="`${'มติ กก. ครั้งที่ (เรื่อง ออกจากราชการ)'}`" hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionLeave" :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่องราชการออกจากราชการไปแล้ว)'}`]" hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่องราชการออกจากราชการไปแล้ว) '}`" emit-value map-options option-label="name" :options="LeaveOption" option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionLeaveDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionLeaveDate != null
|
|
? date2Thai(conclusionLeaveDate)
|
|
: null
|
|
" :label="`${'ลงวันที่ (เรื่อง ออกจากราชการ)'}`" :rules="[
|
|
(val) =>
|
|
!!val ||
|
|
`${'กรุณาเลือกลงวันที่ (เรื่อง ออกจากราชการ)'}`,
|
|
]">
|
|
<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-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`]"
|
|
:label="`${'มติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`" hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
|
|
:rules="[(val: string) => !!val || `${'มติ กก. ครั้งที่ (กลับเข้าราชการ)'}`]" hide-bottom-space
|
|
:label="`${'มติ กก. ครั้งที่ (กลับเข้าราชการ)'}`" emit-value map-options option-label="name"
|
|
:options="ReceiveOption" option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionReceiveDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionReceiveDate != null
|
|
? date2Thai(conclusionReceiveDate)
|
|
: null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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>
|
|
|
|
<!-- C-PM-09 -->
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-09'">
|
|
<div class="col-xs-12 col-md-12">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="organizations"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]" hide-bottom-space
|
|
:label="`${'ชื่อหน่วยงาน'}`" emit-value map-options option-label="name" :options="organizationsOption"
|
|
option-value="id" use-input input-debounce="0" />
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="order"
|
|
:rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่'}`]" :label="`${'คำสั่งที่'}`" hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="order"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งที่'}`]" hide-bottom-space :label="`${'คำสั่งที่'}`"
|
|
emit-value map-options option-label="name" :options="orderOption" option-value="id" use-input
|
|
input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="orderDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker"
|
|
:model-value="orderDate != null ? date2Thai(orderDate) : null" :label="`${'ลงวันที่ '}`"
|
|
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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-xs-12 col-md-6">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="book"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก หนังสือสำนักงาน ก.พ. ที่ นร'}`]" hide-bottom-space
|
|
:label="`${'หนังสือสำนักงาน ก.พ. ที่ นร'}`" emit-value map-options option-label="name" :options="bookOption"
|
|
option-value="id" use-input input-debounce="0" />
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="bookDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker"
|
|
:model-value="bookDate != null ? date2Thai(bookDate) : null" :label="`${'ลงวันที่'}`"
|
|
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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>
|
|
|
|
<!-- C-PM-10 -->
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-10'">
|
|
<div class="col-xs-12 col-md-4">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="organizationsOld"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน (ต้นทาง)'}`]" hide-bottom-space
|
|
:label="`${'ชื่อหน่วยงาน (ต้นทาง)'}`" emit-value map-options option-label="name"
|
|
:options="organizationsOldOption" option-value="id" use-input input-debounce="0" />
|
|
</div>
|
|
<div class="col-xs-12 col-md-4">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="orderOld"
|
|
:rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่ (ต้นทาง)'}`]" :label="`${'คำสั่งที่ (ต้นทาง)'}`"
|
|
hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="orderOld"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งที่ (ต้นทาง)'}`]" hide-bottom-space
|
|
:label="`${'คำสั่งที่ (ต้นทาง)'}`" emit-value map-options option-label="name" :options="orderOldOption"
|
|
option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-4">
|
|
<datepicker menu-class-name="modalfix" v-model="orderOldDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="orderOldDate != null ? date2Thai(orderOldDate) : null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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-xs-12 col-md-4">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="locationname"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกให้ดำรงตำแหน่ง ณ'}`]" :label="`${'ให้ดำรงตำแหน่ง ณ'}`"
|
|
hide-bottom-space />
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-4">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="experimentOc" :rules="[
|
|
(val) =>
|
|
!!val ||
|
|
`${'กรุณากรอกหน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`,
|
|
]" :label="`${'หน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`" hide-bottom-space />
|
|
</div>
|
|
<div class="col-md-4"></div>
|
|
|
|
<div class="col-xs-12 col-md-4">
|
|
<datepicker menu-class-name="modalfix" v-model="experimentformDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="experimentformDate != null
|
|
? date2Thai(experimentformDate)
|
|
: null
|
|
" :label="`${'ทดลองปฏิบัติหน้าที่ราชการตั้งแต่วันที่ '}`" :rules="[
|
|
(val) =>
|
|
!!val ||
|
|
`${'กรุณาเลือกลงวันที่ทดลองปฏิบัติหน้าที่ราชการตั้งแต่วันที่ '}`,
|
|
]">
|
|
<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-xs-12 col-md-4">
|
|
<datepicker menu-class-name="modalfix" v-model="experimenttoDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="experimenttoDate != null ? date2Thai(experimenttoDate) : null
|
|
" :label="`${'ทดลองปฏิบัติหน้าที่ราชการถึงวันที่ '}`" :rules="[
|
|
(val) =>
|
|
!!val ||
|
|
`${'กรุณาเลือกลงวันที่ทดลองปฏิบัติหน้าที่ราชการถึงวันที่ '}`,
|
|
]">
|
|
<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-md-4"></div>
|
|
|
|
<div class="col-xs-12 col-md-4">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="chairman"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกประธาน'}`]" hide-bottom-space :label="`${'ประธาน'}`"
|
|
emit-value map-options option-label="name" :options="chairmanOption" option-value="id" use-input
|
|
input-debounce="0" />
|
|
</div>
|
|
<div class="col-xs-12 col-md-4">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="director"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกกรรมการ'}`]" hide-bottom-space :label="`${'กรรมการ'}`"
|
|
emit-value map-options option-label="name" :options="directorOption" option-value="id" use-input
|
|
input-debounce="0" />
|
|
</div>
|
|
<div class="col-xs-12 col-md-4">
|
|
<selector :class="getClass(true)" outlined dense lazy-rules v-model="director2"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกกรรมการ'}`]" hide-bottom-space :label="`${'กรรมการ'}`"
|
|
emit-value map-options option-label="name" :options="director2Option" option-value="id" use-input
|
|
input-debounce="0" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- C-PM-11 - 12 -->
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-11' ||
|
|
typeOrder.commandCode === 'C-PM-12'
|
|
">
|
|
<div class="col-xs-12 col-md-4">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="committeeOc" :rules="[(val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`]" :label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`" hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="committeeOc"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน (อนุสนธิคำสั่ง)'}`]" hide-bottom-space
|
|
:label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`" emit-value map-options option-label="name"
|
|
:options="committeeOcOption" option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-4">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="committeeOrder" :rules="[(val) => !!val || `${'กรุณาเลือกอนุสนธิคำสั่งที่'}`]" :label="`${'อนุสนธิคำสั่งที่'}`" hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="committeeOrder"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกอนุสนธิคำสั่งที่'}`]" hide-bottom-space
|
|
:label="`${'อนุสนธิคำสั่งที่'}`" emit-value map-options option-label="name" :options="committeeOrderOption"
|
|
option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-4">
|
|
<datepicker menu-class-name="modalfix" v-model="committeeDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="committeeDate != null ? date2Thai(committeeDate) : null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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>
|
|
|
|
<!-- C-PM-13 -->
|
|
<div class="row col-6 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-13'">
|
|
<div class="col-xs-12 col-md-12">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="receiveOc" :rules="[(val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน'}`]" :label="`${'ชื่อหน่วยงาน'}`" hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="receiveOc"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]" hide-bottom-space
|
|
:label="`${'ชื่อหน่วยงาน'}`" emit-value map-options option-label="name" :options="receiveOcOption"
|
|
option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- C-PM-14 -->
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-14'">
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
|
|
hide-bottom-space />
|
|
|
|
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
|
|
:rules="[(val: string) => !!val || `${'มติ กก. ครั้งที่ '}`]" hide-bottom-space
|
|
:label="`${'มติ กก. ครั้งที่ '}`" emit-value map-options option-label="name" :options="ReceiveOption"
|
|
option-value="id" use-input input-debounce="0" /> -->
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="conclusionReceiveDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="conclusionReceiveDate != null
|
|
? date2Thai(conclusionReceiveDate)
|
|
: null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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>
|
|
|
|
<!-- C-PM-16 -->
|
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-16'">
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="orderNumber" :rules="[
|
|
(val) => !!val || `${'กรุณากรอกคำสั่งให้ช่วยราชการเลขที่'}`,
|
|
]" :label="`${'คำสั่งให้ช่วยราชการเลขที่'}`" hide-bottom-space />
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<datepicker menu-class-name="modalfix" v-model="orderNumberDate" :locale="'th'" autoApply 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 outlined dense class="full-width datepicker" :model-value="orderNumberDate != null ? date2Thai(orderNumberDate) : null
|
|
" :label="`${'ลงวันที่ '}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]">
|
|
<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>
|
|
</q-form>
|
|
</div>
|
|
|
|
<q-separator />
|
|
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
|
<q-btn unelevated label="บันทึก" color="public" @click="submit">
|
|
<q-tooltip>บันทึก</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<style>.q-field--with-bottom {
|
|
padding-bottom: 0px;
|
|
}</style>
|