แยกเป็น component ทดลองงาน

This commit is contained in:
Thanit Konmek 2023-07-26 03:15:51 +07:00
parent 97b5e63813
commit 86c61e8bf3
14 changed files with 2228 additions and 1332 deletions

View file

@ -10,13 +10,17 @@
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
v-if="routeName == 'probationWorkAdd'"
/>
<div v-if="routeName == 'probationWorkAdd'">
เพมแบบมอบหมายงานการทดลองปฏหนาทราชการ
</div>
<div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
</div>
<q-card bordered class="col-12 text-dark">
<q-card
:bordered="routeName == 'probationWorkAdd'"
class="col-12 text-dark"
>
<div class="row col-12 q-pa-lg">
<div class="row col-12 q-gutter-lg">
<div class="col-12 row">
@ -251,22 +255,21 @@
:disable="routeName != 'probationWorkAdd'"
/>
</div>
<div class="col-2 ">1. ฐธรรมน</div>
<div class="col-2">1. ฐธรรมน</div>
</div>
<div class="row q-mt-xs bg-grey-3 q-py-xs">
<div class="col-1"></div>
<div class="col-2">2.กฎหมายปกครอง</div>
</div>
<div class="row bg-grey-2 q-py-xs borderCheck ">
<div class="row bg-grey-2 q-py-xs borderCheck">
<div class="col-1"></div>
<div class="col-10 q-pl-md ">2.1 ทำงานได</div>
<div class="col-10 q-pl-md">2.1 ทำงานได</div>
</div>
<div
v-for="item in checkList21"
:key="item.id"
class="row q-py-xs borderCheck border_y"
>
<div class="col-1 text-center">
<q-checkbox
@ -278,11 +281,13 @@
<div class="col-9 q-pl-xl">{{ item.text }}</div>
</div>
<div class="row bg-grey-2 q-py-xs borderCheck">
<div class="row bg-grey-2 q-py-xs borderCheck">
<div class="col-1"></div>
<div class="col-10 q-pl-md">2.2 านการปฏราชการ</div>
<div class="col-10 q-pl-md">
2.2 านการปฏราชการ
</div>
</div>
<div
<div
v-for="item in checkList22"
:key="item.id"
class="row q-py-xs borderCheck border_y"
@ -297,11 +302,13 @@
<div class="col-9 q-pl-xl">{{ item.text }}</div>
</div>
<div class="row bg-grey-2 q-py-xs borderCheck">
<div class="row bg-grey-2 q-py-xs borderCheck">
<div class="col-1"></div>
<div class="col-10 q-pl-md">2.3 านการบรหารทรพยากรบคคล</div>
<div class="col-10 q-pl-md">
2.3 านการบรหารทรพยากรบคคล
</div>
</div>
<div
<div
v-for="item in checkList23"
:key="item.id"
class="row q-py-xs borderCheck border_y"
@ -316,11 +323,13 @@
<div class="col-9 q-pl-xl">{{ item.text }}</div>
</div>
<div class="row bg-grey-2 q-py-xs borderCheck">
<div class="row bg-grey-2 q-py-xs borderCheck">
<div class="col-1"></div>
<div class="col-10 q-pl-md">2.4 านการบรหารงบประมาณและการคล</div>
<div class="col-10 q-pl-md">
2.4 านการบรหารงบประมาณและการคล
</div>
</div>
<div
<div
v-for="item in checkList24"
:key="item.id"
class="row q-py-xs borderCheck border_y"
@ -335,7 +344,7 @@
<div class="col-9 q-pl-xl">{{ item.text }}</div>
</div>
<div class="row q-mt-xs bg-grey-3 q-py-xs">
<div class="row q-mt-xs bg-grey-3 q-py-xs">
<div class="col-1 text-center">
<q-checkbox
v-model="val3"
@ -343,7 +352,9 @@
:disable="routeName != 'probationWorkAdd'"
/>
</div>
<div class="col-11">3. กฎหมายอนๆ เกยวของกบการปฏงาน</div>
<div class="col-11">
3. กฎหมายอนๆ เกยวของกบการปฏงาน
</div>
</div>
</div>
</q-card>
@ -641,9 +652,9 @@
icon="mdi-plus"
flat
class="q-ml-sm"
@click="addProductivity"
@click="addProductivity"
/>
<q-btn
<q-btn
v-if="productivityCount > 1 && routeName == 'probationWorkAdd'"
round
color="red"
@ -659,7 +670,12 @@
</q-chip>
</div>
<div class="col-12 row q-gutter-md">
<q-card v-for="item in productivityCount" flat bordered class="col-12 q-pa-sm bg-grey-1">
<q-card
v-for="item in productivityCount"
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
@ -669,7 +685,7 @@
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="Productivitys[item-1]"
v-model="Productivitys[item - 1]"
label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
/>
</div>
@ -681,7 +697,7 @@
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="goals1[item-1]"
v-model="goals1[item - 1]"
label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
/>
</div>
@ -1143,48 +1159,156 @@ const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));
const addProductivity = () => {
productivityCount.value++;
productivityCount.value++;
};
const resetProductivity = () => {
productivityCount.value = 1;
productivityCount.value = 1;
Productivitys.value = Array(productivityCount.value).fill("");
goals1.value = Array(productivityCount.value).fill("");
};
const checkList21 = ref([
{ id: 1, text: '2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร', checked: false },
{ id: 2, text: '2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน', checked: false },
{ id: 3, text: '2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่', checked: false },
{ id: 4, text: '2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙', checked: false },
{ id: 5, text: '2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒', checked: false },
{ id: 6, text: '2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖', checked: false },
{
id: 1,
text: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
checked: false,
},
{
id: 2,
text: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
checked: false,
},
{ id: 3, text: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่", checked: false },
{
id: 4,
text: "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙",
checked: false,
},
{
id: 5,
text: "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒",
checked: false,
},
{
id: 6,
text: "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
checked: false,
},
]);
const checkList22 = ref([
{ id: 1, text: '2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖', checked: false },
{ id: 2, text: '2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง', checked: false },
{ id: 3, text: '2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่', checked: false },
{ id: 4, text: '2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ', checked: false },
{ id: 5, text: '2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖', checked: false },
{ id: 6, text: '2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔', checked: false },
{
id: 1,
text: "2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
checked: false,
},
{
id: 2,
text: "2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
checked: false,
},
{
id: 3,
text: "2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
checked: false,
},
{
id: 4,
text: "2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
checked: false,
},
{
id: 5,
text: "2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
checked: false,
},
{
id: 6,
text: "2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
checked: false,
},
]);
const checkList23 = ref([
{ id: 1, text: '2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง', checked: false },
{ id: 2, text: '2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง', checked: false },
{
id: 1,
text: "2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
checked: false,
},
{
id: 2,
text: "2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
checked: false,
},
]);
const checkList24 = ref([
{ id: 1, text: '2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖', checked: false },
{ id: 2, text: '2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘', checked: false },
{ id: 3, text: '2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑', checked: false },
{ id: 4, text: '2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒', checked: false },
{ id: 5, text: '2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔', checked: false },
{ id: 6, text: '2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ', checked: false },
{ id: 7, text: '2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕', checked: false },
{ id: 8, text: '2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖', checked: false },
{ id: 9, text: '2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔', checked: false },
{ id: 10, text: '2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔', checked: false },
{ id: 11, text: '2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕', checked: false },
{ id: 12, text: '2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗', checked: false },
{ id: 13, text: '2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗', checked: false },
{ id: 14, text: '2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘', checked: false },
{
id: 1,
text: "2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
checked: false,
},
{
id: 2,
text: "2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
checked: false,
},
{
id: 3,
text: "2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
checked: false,
},
{
id: 4,
text: "2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
checked: false,
},
{
id: 5,
text: "2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
checked: false,
},
{
id: 6,
text: "2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
checked: false,
},
{
id: 7,
text: "2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
checked: false,
},
{
id: 8,
text: "2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
checked: false,
},
{
id: 9,
text: "2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
checked: false,
},
{
id: 10,
text: "2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔",
checked: false,
},
{
id: 11,
text: "2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕",
checked: false,
},
{
id: 12,
text: "2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗",
checked: false,
},
{
id: 13,
text: "2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗",
checked: false,
},
{
id: 14,
text: "2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘",
checked: false,
},
]);
const law = ref([]);
const listlaw = [
@ -1237,12 +1361,12 @@ const date3 = ref<Date>(new Date());
const date4 = ref<Date>(new Date());
</script>
<style lang="scss" scoped>
.border_y{
border-left:1px solid #d8d8d8 ;
border-right:1px solid #d8d8d8 ;
.border_y {
border-left: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
}
.borderCheck{
border-bottom: 1px solid #d8d8d8;
.borderCheck {
border-bottom: 1px solid #d8d8d8;
}
.text-top2 {
font-weight: 500;

View file

@ -1,7 +1,7 @@
<!-- card อมลสวนต -->
<template>
<div class="q-pb-md">
<!-- <div class="toptitle text-dark col-12 row items-center">
<div class="q-pb-md">
<!-- <div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
@ -14,752 +14,118 @@
/>
ฟอรมแบบประเมนสำหรบผแล
</div> -->
<div class="col-12 text-dark">
<div class="row col-12 q-pa-lg">
<div class="row col-12 q-gutter-lg">
<div class="col-12 row">
<div class="col-12 text-top0 row items-center ">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
นเรมทดลองปฎหนาทราชการ งแตนท
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
งวนท
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
</div>
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
การทดลองปฏหนาทราชการมผล งน
<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
ระหวางวนท
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
งวนท
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
</div>
<div class="col-12 q-pt-md">
<q-separator size="3px" color="grey-2" />
</div>
</div>
<div class="col-12 text-dark">
<div class="row col-12 q-gutter-lg q-pa-lg">
<div class="col-12 row">
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
นเรมทดลองปฎหนาทราชการ งแตนท
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
งวนท
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
</div>
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
การทดลองปฏหนาทราชการมผล งน
<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
ระหวางวนท
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
งวนท
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
</div>
<div class="col-12 q-pt-md">
<q-separator size="3px" color="grey-2" />
</div>
</div>
<!--------------------- 1 --------------------->
<FormEva1 />
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
ผลสมฤทธของการทดลองปฏหนาทราชการ
</div>
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.1 ความสำเรจของงานทไดบมอบหมาย
</div>
<div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
1.ผลผลตของงานทคาดหว
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense v-for="(list, i) in list1_1" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.1 ความสำเรจของงานทไดบมอบหมาย
</div>
<div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
1.ผลผลตของงานทเกดข
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense v-for="(list, i) in list1_2" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<!-- <q-item-label>{{ list.label }}</q-item-label> -->
<q-input outlined dense v-model="text2_1"
class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules type="textarea"
label="ผลผลิตของงานที่เกิดขึ้นจริง" hide-bottom-space :row="1"/>
</q-item-section>
<q-item-section side>
<q-rating v-model="model1" :val="list.id" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.2 ความรความสามารถ
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>ความรความสามารถ</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="model1_2" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.3 กษะ
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>กษะ</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="model1_3" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.4 สมรรถนะ
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>สมรรถนะ</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="model1_4" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.5 ความสามารถในการเรยนรงาน
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>ความสามารถในการเรยนรงาน</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="model1_5" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.6 ความสามารถในการปรบใชความรบงานในหนาท
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>ความสามารถในการปรบใชความรบงานในหนาท</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="model1_6" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.7 นๆ
<q-checkbox class="q-ml-sm" dense v-model="etc" />
</div>
<q-card v-if="etc" flat bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>
<q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow
hide-bottom-space outlined class="bg-white"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="modelEtc" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
ดเด (ไมเก 5 บรรท)
</div>
<q-input outlined dense v-model="text2_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
งทควรปรบปร (ไมเก 5 บรรท)
</div>
<q-input outlined dense v-model="text2_2" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
</div>
<!--------------------- 2 --------------------->
<FormEva2 />
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<!--------------------- 3 --------------------->
<FormEva3 />
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<!--------------------- งคบบญชาผมอบหมายงาน --------------------->
<FormEvaOrder />
</div>
<!-- 2 -->
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
พฤตกรรมของผทดลองปฏหนาทราชการ
</div>
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.1 ความประพฤต
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense v-for="(list, i) in list2_1" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.2 ความมณธรรมจรยธรรม
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense v-for="(list, i) in list2_2" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.3 การรกษาว
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense v-for="(list, i) in list2_3" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.4 นๆ
<q-checkbox class="q-ml-sm" dense v-model="etc_4" />
</div>
<q-card v-if="etc_4" flat bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>
<q-input v-model="etc_text2" label="กรอกอื่นๆ" dense lazy-rules autogrow
hide-bottom-space outlined class="bg-white"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating v-model="modelEtc" max="5" size="sm" color="grey"
:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
ดเด (ไมเก 5 บรรท)
</div>
<q-input outlined dense v-model="text3_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
งทควรปรบปร (ไมเก 5 บรรท)
</div>
<q-input outlined dense v-model="text3_2" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
</div>
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<!-- 3 -->
<div class="col-12 row justify-center">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
การพฒนาผทดลองปฏหนาทราชการ
</div>
<q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>1. การปฐมนเทศ</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
v-model="radio_1" val="1" label="ดำเนินการเเล้ว" />
<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
v-model="radio_1" val="0" label=" ยังไม่ได้ดำเนินการ" />
</div>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" />
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>2. การเรยนรวยตนเอง</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
v-model="radio_2" val="1" label="ดำเนินการเเล้ว" />
<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
v-model="radio_2" val="0" label=" ยังไม่ได้ดำเนินการ" />
</div>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" />
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>3. การอบรมสมนารวมก</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
v-model="radio_3" val="1" label="ดำเนินการเเล้ว" />
<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
v-model="radio_3" val="0" label=" ยังไม่ได้ดำเนินการ" />
</div>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" />
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>4. การอบรมอ ตามทหนวยงานกำหนด (าม)</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
v-model="radio_4" val="1" label="ดำเนินการเเล้ว" />
<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
v-model="radio_4" val="0" label=" ยังไม่ได้ดำเนินการ" />
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
งคบบญชาผมอบหมายงาน
</div>
<div class="col-12 row q-col-gutter-md">
<q-select class="col-xs-12 col-sm-8" dense v-model="Autherise" outlined :options="option"
label="ผู้บังคับบัญชา" />
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="dateAutherise" :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 col-3" :model-value="dateAutherise != null ? date2Thai(dateAutherise) : 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>
</div>
</div>
<q-separator />
<div class="flex justify-end q-px-sm q-pt-sm">
<q-btn dense class="q-px-md" unelevated label="บันทึก" color="public" />
</div>
</div>
</div>
<q-separator />
<div class="flex justify-end q-px-sm q-pt-sm">
<q-footer class="bg-white q-px-lg q-py-sm flex justify-end">
<q-btn
dense
class="q-px-md"
unelevated
label="บันทึก"
color="public"
/>
</q-footer>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref, defineAsyncComponent } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import router from "@/router";
const FormEva1 = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/form/formEva1.vue")
);
const FormEva2 = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/form/formEva2.vue")
);
const FormEva3 = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/form/formEva3.vue")
);
const FormEvaOrder = defineAsyncComponent(
() =>
import("@/modules/05_placement/components/probation/form/formEvaOrder.vue")
);
const $q = useQuasar();
const ratingColors = ['light-blue-3', 'light-blue-6', 'blue', 'blue-9', 'blue-10'];
const list1_1 = [
{ id: '1', label: 'ผลผลิตของงานที่คาดหวัง 1' },
{ id: '2', label: 'ผลผลิตของงานที่คาดหวัง 2' },
{ id: '3', label: 'ผลผลิตของงานที่คาดหวัง 3' },
{ id: '4', label: 'ผลผลิตของงานที่คาดหวัง 4' },
{ id: '5', label: 'ผลผลิตของงานที่คาดหวัง 5' }
];
const list1_2 = [
{ id: '1', label: 'ผลผลิตของงานที่เกิดขึ้น 1' },
{ id: '2', label: 'ผลผลิตของงานที่เกิดขึ้น 2' },
{ id: '3', label: 'ผลผลิตของงานที่เกิดขึ้น 3' },
{ id: '4', label: 'ผลผลิตของงานที่เกิดขึ้น 4' },
{ id: '5', label: 'ผลผลิตของงานที่เกิดขึ้น 5' }
];
const list2_1 = [
{ id: '1', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี' },
{ id: '2', label: 'มีความรับผิดชอบในการปฏิบัติบัติงาน' },
{ id: '3', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน' },
{ id: '4', label: 'ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร' },
];
const list2_2 = [
{ id: '1', label: 'อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ' },
{ id: '2', label: 'มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต' },
{ id: '3', label: 'ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ' },
];
const list2_3 = [
{ id: '1', label: 'มีความรับรัผิดชอบในการรักษาเวลาทำงาน' },
{ id: '2', label: 'แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ' },
{ id: '3', label: 'ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน' },
{ id: '4', label: 'ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ' },
{ id: '5', label: 'ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ' }
];
const etc_text = ref<any>(null);
const etc_text2 = ref<any>(null);
const text3_1 = ref<any>(null);
const text3_2 = ref<any>(null);
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const dateToday = ref<Date>(new Date("10-10-2023"));
const dateEnd = ref<Date>(new Date("12-10-2023"));
const period = ref<number>(1);
const Autherise = ref<any>(null);
const model = ref<any>(0);
const model1 = ref<any>(0);
const model1_2 = ref<any>(0);
const model1_3 = ref<any>(0);
const model1_4 = ref<any>(0);
const model1_5 = ref<any>(0);
const model1_6 = ref<any>(0);
const modelEtc = ref<any>(0);
const dateAutherise = ref<any>(new Date());
const etc = ref<any>(false);
const etc_4 = ref<any>(false);
const radio_1 = ref<any>(null);
const radio_2 = ref<any>(null);
const radio_3 = ref<any>(null);
const radio_4 = ref<any>(null);
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
const text2_1 = ref<string>('');
const text2_2 = ref<string>('');
const onSubmit = () => {
$q.notify({
color: "green-4",
textColor: "white",
icon: "cloud_done",
message: "ส่งแบบประเมินเเล้ว",
});
$q.notify({
color: "green-4",
textColor: "white",
icon: "cloud_done",
message: "ส่งแบบประเมินเเล้ว",
});
};
const onReset = () => {
router.push({ name: "probation" });
router.push({ name: "probation" });
};
</script>
<style lang="scss" scoped>
.text-top2 {
font-weight: 500;
padding-bottom: 8px;
color: rgb(70, 68, 68);
font-weight: 500;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
.text-top0 {
font-weight: 600;
padding-bottom: 8px;
color: rgb(70, 68, 68);
font-weight: 600;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
.text-Hd {
font-weight: 600;
font-size: 1rem;
padding-bottom: 5px;
color: #02A998;
}
.q-rating__icon {
text-shadow: transparent !important;
}
</style>
</style>

View file

@ -1,171 +1,170 @@
<template>
<!-- <div class="toptitle text-dark col-12 row items-center">ดการบญช 2</div> -->
<q-card flat bordered class="col-12">
<q-layout view="hHh Lpr lff" container class="shadow-2 rounded-borders page-relative" style="height: 82vh">
<q-header class="bg-grey-1">
<q-toolbar>
<div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
@click="router.go(-1)" />
นทกผลการทดลองปฏหนาทราชการของ นายสมค ยอดใจ
</div>
</q-toolbar>
<q-separator />
</q-header>
<q-drawer v-model="drawer" show-if-above :width="150" :breakpoint="500" class="bg-grey-1" bordered>
<q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
<q-list class="text-grey-7">
<q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense
v-ripple>
<q-item-section avatar style="min-width: 40px">
<q-icon size="18px" name="mdi-file" />
</q-item-section>
<!-- <div class="toptitle text-dark col-12 row items-center">ดการบญช 2</div> -->
<q-card flat bordered class="col-12">
<q-layout
view="hHh Lpr lff"
container
class="shadow-2 rounded-borders page-relative"
style="height: 82vh"
>
<q-header class="bg-grey-1">
<q-toolbar>
<div
class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
>
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
นทกผลการทดลองปฏหนาทราชการของ นายสมค ยอดใจ
</div>
</q-toolbar>
<q-separator />
</q-header>
<q-drawer
v-model="drawer"
show-if-above
:width="150"
:breakpoint="500"
class="bg-grey-1"
bordered
>
<q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
<q-list class="text-grey-7">
<q-item
active-class="text-primary bg-teal-1 text-weight-medium"
clickable
class="q-py-sm"
dense
v-ripple
:active="activeTab == 'tab1'"
@click="activeTab = 'tab1'"
>
<q-item-section avatar style="min-width: 40px">
<q-icon size="18px" name="mdi-file" />
</q-item-section>
<q-item-section>
แบบมอบหมายงาน
</q-item-section>
</q-item>
<q-item-section> แบบมอบหมายงาน </q-item-section>
</q-item>
<q-item dense active class="q-py-sm" active-class="text-primary bg-teal-1 text-weight-medium"
clickable v-ripple>
<q-item-section avatar style="min-width: 40px">
<q-icon size="18px" name="mdi-file-edit" />
</q-item-section>
<q-item
dense
class="q-py-sm"
active-class="text-primary bg-teal-1 text-weight-medium"
clickable
v-ripple
:active="activeTab == 'tab2'"
@click="activeTab = 'tab2'"
>
<q-item-section avatar style="min-width: 40px">
<q-icon size="18px" name="mdi-file-edit" />
</q-item-section>
<q-item-section>
นทกผลการทดลองปฏหนาทราชการ (2)
</q-item-section>
</q-item>
<q-item-section>
นทกผลการทดลองปฏหนาทราชการ (2)
</q-item-section>
</q-item>
<q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense
v-ripple>
<q-item-section avatar style="min-width: 40px">
<q-icon size="18px" name="mdi-file-star" />
</q-item-section>
<q-item
active-class="text-primary bg-teal-1 text-weight-medium"
clickable
class="q-py-sm"
dense
v-ripple
:active="activeTab == 'tab3'"
@click="activeTab = 'tab3'"
>
<q-item-section avatar style="min-width: 40px">
<q-icon size="18px" name="mdi-file-star" />
</q-item-section>
<q-item-section>
ประเมนผลการทดลองปฏหนาทราชการ (1)
</q-item-section>
</q-item>
<q-item-section>
ประเมนผลการทดลองปฏหนาทราชการ (1)
</q-item-section>
</q-item>
<q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense
v-ripple>
<q-item-section avatar style="min-width: 40px">
<q-icon size="18px" name="mdi-file-chart" />
</q-item-section>
<q-item
active-class="text-primary bg-teal-1 text-weight-medium"
clickable
class="q-py-sm"
dense
v-ripple
:active="activeTab == 'tab4'"
@click="activeTab = 'tab4'"
>
<q-item-section avatar style="min-width: 40px">
<q-icon size="18px" name="mdi-file-chart" />
</q-item-section>
<q-item-section>
รายงานการประเมนผลการทดลองปฏหนาทราชการ
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</q-drawer>
<q-page-container>
<q-layout view="hHh Lpr lff" container style="height: 72vh">
<q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-x-md items-center">
<q-tabs dense v-model="tab" active-class="text-primary text-weight-medium"
indicator-color="grey-1" class="text-grey-7">
<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save1'"
:color="tab !== 'save1' ? 'grey' : 'add'">
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-item-section>
รายงานการประเมนผลการทดลองปฏหนาทราชการ
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</q-drawer>
<q-page-container>
<q-layout view="hHh Lpr lFf" container style="height: 72vh">
<q-tab-panels
v-model="activeTab"
animated
class="shadow-2 rounded-borders"
vertical
>
<q-tab-panel name="tab1">
<ProbationFormAssign />
</q-tab-panel>
<q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save2'"
:color="tab !== 'save2' ? 'grey' : 'add'">
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tab name="save3" label="บันทึกผลครั้งที่ 3" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
:color="tab !== 'save3' ? 'grey' : 'add'">
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus">
<q-tooltip>
เพมบนทกผลการทดลอง
</q-tooltip>
</q-btn>
</div>
</div>
<q-separator />
</div>
</q-header>
<q-page-container>
<div class="col-12 row">
<Form />
</div>
</q-page-container>
</q-layout>
</q-page-container>
</q-layout>
</q-card>
<q-tab-panel name="tab2"> <Tabs2 /></q-tab-panel>
<q-tab-panel name="tab3">
<Tabs3 />
</q-tab-panel>
<q-tab-panel name="tab4">
<Tabs4 />
</q-tab-panel>
</q-tab-panels>
</q-layout>
</q-page-container>
</q-layout>
</q-card>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import Form from "@/modules/05_placement/components/probation/FormEvaluation.vue";
import { ref, defineAsyncComponent } from "vue";
const ProbationFormAssign = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormAssign.vue")
);
const Tabs2 = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/tabs/tabs2.vue")
);
const Tabs3 = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/tabs/tabs3.vue")
);
const Tabs4 = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/tabs/tabs4.vue")
);
const router = useRouter();
const drawer = ref<boolean>(true);
const tab = ref('save1');
const activeTab = ref<string>("tab1");
</script>
<style lang="scss" scope>
.btn-absolute {
z-index: 50;
position: absolute;
left: 200px;
top: 10px;
z-index: 50;
position: absolute;
left: 200px;
top: 10px;
}
.btnShadow {
box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
}
</style>
</style>

View file

@ -1,274 +1,302 @@
<template>
<div class="toptitle text-dark 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)"
/>
รายละเอยดงานทไดบมอบหมายของ {{ name }}
<div class="toptitle text-dark 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)"
/>
รายละเอยดงานทไดบมอบหมายของ {{ name }}
</div>
<q-card bordered class="row col-12 text-dark">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
<q-space />
<q-btn
outline
color="blue"
dense
icon-right="mdi-open-in-new"
class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ"
/>
</div>
<q-card bordered class="row col-12 text-dark">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
<q-space />
<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" />
</div>
<div class="col-12"><q-separator/></div>
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-3 col-sm-2 col-md-1 row ">
<q-img src="@/assets/avatar_user.jpg" />
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12 q-pl-md">
<div class="col-12 text-top">ตำแหนงในสายงาน</div>
<div class="col-12 text-detail">{{position}}</div>
</div>
</div>
<div class="col-xs-6 col-sm-2 row items-center">
<div class="col-12">
<div class="col-12 text-top">ระด</div>
<div class="col-12 text-detail">{{level}}</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<div class="col-12 text-top">งก</div>
<div class="col-12 text-detail">{{institution}}</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<div class="col-12 text-top">สถานะการทดลองงาน</div>
<div class="col-12 text-detail">
<q-icon size="20px" v-if="status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange" />
<q-icon size="20px" v-else-if="status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red" />
<q-icon size="20px" v-else name="mdi-check" color="teal" />
{{ status }}
</div>
</div>
</div>
</div>
</div>
</q-card>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-3 col-sm-2 col-md-1 row">
<q-img src="@/assets/avatar_user.jpg" />
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12 q-pl-md">
<div class="col-12 text-top">ตำแหนงในสายงาน</div>
<div class="col-12 text-detail">{{ position }}</div>
</div>
</div>
<div class="col-xs-6 col-sm-2 row items-center">
<div class="col-12">
<div class="col-12 text-top">ระด</div>
<div class="col-12 text-detail">{{ level }}</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<div class="col-12 text-top">งก</div>
<div class="col-12 text-detail">{{ institution }}</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<div class="col-12 text-top">สถานะการทดลองงาน</div>
<div class="col-12 text-detail">
<q-icon
size="20px"
v-if="status == 'อยู่ระหว่างการทดลองงาน'"
name="mdi-timer-sand"
color="deep-orange"
/>
<q-icon
size="20px"
v-else-if="status == 'ไม่ผ่านการทดลอง'"
name="mdi-close"
color="red"
/>
<q-icon size="20px" v-else name="mdi-check" color="teal" />
{{ status }}
</div>
</div>
</div>
</div>
</div>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn @click="router.push(`/probation/add`)" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพมงานทไดบมอบหมาย</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="router.push(`/probation/add`)"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพมงานทไดบมอบหมาย</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/form`)">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<!-- <q-td auto-width>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="clickSelect(props.row.no)"
>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<!-- <q-td auto-width>
<q-btn flat dense size="12px" round color="blue" icon="mdi-file-download-outline">
<q-tooltip> ดาวนโหลด .Docx</q-tooltip>
</q-btn>
</q-td> -->
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useRouter, useRoute } from "vue-router";
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
const router = useRouter();
const route = useRoute();
const name = ref<string>('นายสมคิด ยอดใจ')
const position = ref<string>('นักจัดการงานทั่วไป')
const level = ref<string>('ชำนาญการพิเศษ')
const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
const status = ref<string>('อยู่ระหว่างการทดลองงาน')
const name = ref<string>("นายสมคิด ยอดใจ");
const position = ref<string>("นักจัดการงานทั่วไป");
const level = ref<string>("ชำนาญการพิเศษ");
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
const status = ref<string>("อยู่ระหว่างการทดลองงาน");
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"no",
"startDate",
"endDete",
"intendant",
"commander",
"no",
"startDate",
"endDete",
"intendant",
"commander",
]); //
//
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "startDate",
align: "left",
label: "ตั้งแต่วันที่",
sortable: true,
field: "startDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "endDete",
align: "left",
label: "ถึงวันที่",
sortable: true,
field: "endDete",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "intendant",
align: "left",
label: "ผู้ดูแล",
sortable: true,
field: "intendant",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "commander",
align: "left",
label: "ผู้บังคับบัญชา",
sortable: true,
field: "commander",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
}
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "startDate",
align: "left",
label: "ตั้งแต่วันที่",
sortable: true,
field: "startDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "endDete",
align: "left",
label: "ถึงวันที่",
sortable: true,
field: "endDete",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "intendant",
align: "left",
label: "ผู้ดูแล",
sortable: true,
field: "intendant",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "commander",
align: "left",
label: "ผู้บังคับบัญชา",
sortable: true,
field: "commander",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ()
const rows = ref<FormProbationDetail[]>([
{
no: "1",
startDate: "09 ก.ย. 2566",
endDete: "20 ต.ค. 2566",
intendant: "นางสาวรัชภรณ์ ภักดี",
commander: "นายนภัทร วันดี"
},
{
no: "2",
startDate: "25 ต.ค. 2566",
endDete: "24 ม.ค. 2567",
intendant: "นางสาวทวิดา กมลเวชชี",
commander: "นางพิศ โพธิ์ดำ"
},
// {
// no: "3",
// startDate: "09 .. 2566",
// endDete: "20 .. 2566",
// intendant: " ",
// commander: " "
// },
{
no: "1",
startDate: "09 ก.ย. 2566",
endDete: "20 ต.ค. 2566",
intendant: "นางสาวรัชภรณ์ ภักดี",
commander: "นายนภัทร วันดี",
},
{
no: "2",
startDate: "25 ต.ค. 2566",
endDete: "24 ม.ค. 2567",
intendant: "นางสาวทวิดา กมลเวชชี",
commander: "นางพิศ โพธิ์ดำ",
},
// {
// no: "3",
// startDate: "09 .. 2566",
// endDete: "20 .. 2566",
// intendant: " ",
// commander: " "
// },
]);
const clickAdd = () => {
const clickAdd = () => {};
const clickSelect = (id: string) => {
// console.log(route.fullPath);
router.push(`${route.fullPath}/${id}`);
};
//
@ -290,16 +318,15 @@ const paginationLabel = (start: string, end: string, total: string) => {
<style lang="scss" scope>
.q-img {
border-radius: 5px;
height: 70px;
height: 70px;
}
.text-top{
color: gray;
font-weight: 400;
padding-bottom: 3px;
.text-top {
color: gray;
font-weight: 400;
padding-bottom: 3px;
}
.text-detail{
font-weight: 500;
.text-detail {
font-weight: 500;
}
.custom-header-table {
max-height: 64vh;
@ -331,4 +358,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
top: 0;
}
}
</style>
</style>

View file

@ -0,0 +1,472 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
ผลสมฤทธของการทดลองปฏหนาทราชการ
</div>
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.1 ความสำเรจของงานทไดบมอบหมาย
</div>
<div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
1.ผลผลตของงานทคาดหว
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list1_1" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model"
:val="list.id"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.1 ความสำเรจของงานทไดบมอบหมาย
</div>
<div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
1.ผลผลตของงานทเกดข
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list1_2" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<!-- <q-item-label>{{ list.label }}</q-item-label> -->
<q-input
outlined
dense
v-model="text2_1"
class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules
type="textarea"
label="ผลผลิตของงานที่เกิดขึ้นจริง"
hide-bottom-space
:row="1"
/>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1"
:val="list.id"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.2 ความรความสามารถ
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>ความรความสามารถ</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_2"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.3 กษะ
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>กษะ</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_3"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.4 สมรรถนะ
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>สมรรถนะ</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_4"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.5 ความสามารถในการเรยนรงาน
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>ความสามารถในการเรยนรงาน</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_5"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.6 ความสามารถในการปรบใชความรบงานในหนาท
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label
>ความสามารถในการปรบใชความรบงานในหนาท</q-item-label
>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_6"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.7 นๆ
<q-checkbox class="q-ml-sm" dense v-model="etc" />
</div>
<q-card
v-if="etc"
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>
<q-input
v-model="etc_text"
label="กรอกอื่นๆ"
dense
lazy-rules
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="modelEtc"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<FormComment />
</div>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
const FormComment = defineAsyncComponent(
() =>
import(
"@/modules/05_placement/components/probation/form/formEvacomment.vue"
)
);
const $q = useQuasar();
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const list1_1 = [
{ id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
{ id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
{ id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
{ id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
{ id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
];
const list1_2 = [
{ id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
{ id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
{ id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
{ id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
{ id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
];
const etc_text = ref<any>(null);
const text2_1 = ref<string>("");
const model = ref<any>(0);
const model1 = ref<any>(0);
const model1_2 = ref<any>(0);
const model1_3 = ref<any>(0);
const model1_4 = ref<any>(0);
const model1_5 = ref<any>(0);
const model1_6 = ref<any>(0);
const modelEtc = ref<any>(0);
const etc = ref<any>(false);
</script>
<style lang="scss" scoped>
.text-top2 {
font-weight: 500;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
.text-top0 {
font-weight: 600;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
.q-rating__icon {
text-shadow: transparent !important;
}
</style>

View file

@ -0,0 +1,289 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
พฤตกรรมของผทดลองปฏหนาทราชการ
</div>
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.1 ความประพฤต
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list2_1" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model"
:val="list.id"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.2 ความมณธรรมจรยธรรม
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list2_2" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model"
:val="list.id"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.3 การรกษาว
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list2_3" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model"
:val="list.id"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.4 นๆ
<q-checkbox class="q-ml-sm" dense v-model="etc_4" />
</div>
<q-card
v-if="etc_4"
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>
<q-input
v-model="etc_text2"
label="กรอกอื่นๆ"
dense
lazy-rules
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="modelEtc"
max="5"
size="sm"
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
>
<template v-slot:tip-1>
<q-tooltip>ำกวาความคาดหวงมาก</q-tooltip>
</template>
<template v-slot:tip-2>
<q-tooltip>ำกวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-3>
<q-tooltip>เปนไปตามความคาดหว</q-tooltip>
</template>
<template v-slot:tip-4>
<q-tooltip>งวาความคาดหวงคอนขางมาก</q-tooltip>
</template>
<template v-slot:tip-5>
<q-tooltip>งกวาความคาดหวงมาก</q-tooltip>
</template>
</q-rating>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<FormComment />
</div>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
const FormComment = defineAsyncComponent(
() =>
import(
"@/modules/05_placement/components/probation/form/formEvacomment.vue"
)
);
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const list2_1 = [
{ id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
{ id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
{
id: "3",
label:
"ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
},
{
id: "4",
label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
},
];
const list2_2 = [
{
id: "1",
label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
},
{ id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
{
id: "3",
label:
"ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
},
];
const list2_3 = [
{ id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
{
id: "2",
label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
},
{
id: "3",
label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
},
{
id: "4",
label:
"ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
},
{
id: "5",
label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
},
];
const etc_text2 = ref<any>(null);
const modelEtc = ref<any>(0);
const etc_4 = ref<any>(false);
const model = ref<any>(0);
</script>
<style lang="scss" scoped>
.text-top0 {
font-weight: 600;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
.q-rating__icon {
text-shadow: transparent !important;
}
</style>

View file

@ -0,0 +1,130 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row justify-center">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
การพฒนาผทดลองปฏหนาทราชการ
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>1. การปฐมนเทศ</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_1"
val="1"
label="ดำเนินการเเล้ว"
/>
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_1"
val="0"
label=" ยังไม่ได้ดำเนินการ"
/>
</div>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" />
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>2. การเรยนรวยตนเอง</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_2"
val="1"
label="ดำเนินการเเล้ว"
/>
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_2"
val="0"
label=" ยังไม่ได้ดำเนินการ"
/>
</div>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" />
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>3. การอบรมสมนารวมก</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_3"
val="1"
label="ดำเนินการเเล้ว"
/>
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_3"
val="0"
label=" ยังไม่ได้ดำเนินการ"
/>
</div>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" />
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label
>4. การอบรมอ ตามทหนวยงานกำหนด (าม)</q-item-label
>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_4"
val="1"
label="ดำเนินการเเล้ว"
/>
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_4"
val="0"
label=" ยังไม่ได้ดำเนินการ"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const radio_1 = ref<any>(null);
const radio_2 = ref<any>(null);
const radio_3 = ref<any>(null);
const radio_4 = ref<any>(null);
</script>
<style lang="scss" scoped>
.text-top0 {
font-weight: 600;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
</style>

View file

@ -0,0 +1,83 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
งคบบญชาผมอบหมายงาน
</div>
<div class="col-12 row q-col-gutter-md">
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="Autherise"
outlined
:options="option"
label="ผู้บังคับบัญชา"
/>
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="dateAutherise"
: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 col-3"
:model-value="
dateAutherise != null ? date2Thai(dateAutherise) : 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>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const Autherise = ref<any>(null);
const dateAutherise = ref<any>(new Date());
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
</script>
<style lang="scss" scoped>
.text-top2 {
font-weight: 500;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
.text-top0 {
font-weight: 600;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
</style>

View file

@ -0,0 +1,45 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
ดเด (ไมเก 5 บรรท)
</div>
<q-input
outlined
dense
v-model="text2_1"
class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules
type="textarea"
label="กรอกจุดเด่น"
hide-bottom-space
:row="5"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
งทควรปรบปร (ไมเก 5 บรรท)
</div>
<q-input
outlined
dense
v-model="text2_2"
class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules
type="textarea"
hide-bottom-space
label="กรอกสิ่งที่ควรปรับปรุง"
:row="5"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const text2_1 = ref<string>("");
const text2_2 = ref<string>("");
</script>

View file

@ -0,0 +1,116 @@
<template>
<q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-x-md items-center">
<q-tabs
dense
v-model="tab"
active-class="text-primary text-weight-medium"
indicator-color="grey-1"
class="text-grey-7"
>
<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save1'"
:color="tab !== 'save1' ? 'grey' : 'add'"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tab name="save2" label="บันทึกผลครั้งที่ 2" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save2'"
:color="tab !== 'save2' ? 'grey' : 'add'"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tab name="save3" label="บันทึกผลครั้งที่ 3" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
:color="tab !== 'save3' ? 'grey' : 'add'">
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus">
<q-tooltip> เพมบนทกผลการทดลอง </q-tooltip>
</q-btn>
</div>
</div>
<q-separator />
</div>
</q-header>
<q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="save1">
<Form />
</q-tab-panel>
<q-tab-panel name="save2">
<Form />
</q-tab-panel>
</q-tab-panels>
</q-page-container>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
const Form = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
);
const tab = ref<string>("save1");
</script>

View file

@ -0,0 +1,116 @@
<template>
<q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-x-md items-center">
<q-tabs
dense
v-model="tab"
active-class="text-primary text-weight-medium"
indicator-color="grey-1"
class="text-grey-7"
>
<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save1'"
:color="tab !== 'save1' ? 'grey' : 'add'"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tab name="save2" label="บันทึกผลครั้งที่ 2" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save2'"
:color="tab !== 'save2' ? 'grey' : 'add'"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tab name="save3" label="บันทึกผลครั้งที่ 3" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
:color="tab !== 'save3' ? 'grey' : 'add'">
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus">
<q-tooltip> เพมบนทกผลการทดลอง </q-tooltip>
</q-btn>
</div>
</div>
<q-separator />
</div>
</q-header>
<q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="save1">
<Form />
</q-tab-panel>
<q-tab-panel name="save2">
<Form />
</q-tab-panel>
</q-tab-panels>
</q-page-container>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
const Form = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
);
const tab = ref<string>("save1");
</script>

View file

@ -0,0 +1,116 @@
<template>
<q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-x-md items-center">
<q-tabs
dense
v-model="tab"
active-class="text-primary text-weight-medium"
indicator-color="grey-1"
class="text-grey-7"
>
<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save1'"
:color="tab !== 'save1' ? 'grey' : 'add'"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tab name="save2" label="บันทึกผลครั้งที่ 2" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save2'"
:color="tab !== 'save2' ? 'grey' : 'add'"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tab name="save3" label="บันทึกผลครั้งที่ 3" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
:color="tab !== 'save3' ? 'grey' : 'add'">
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus">
<q-tooltip> เพมบนทกผลการทดลอง </q-tooltip>
</q-btn>
</div>
</div>
<q-separator />
</div>
</q-header>
<q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="save1">
<Form />
</q-tab-panel>
<q-tab-panel name="save2">
<Form />
</q-tab-panel>
</q-tab-panels>
</q-page-container>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
const Form = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
);
const tab = ref<string>("save1");
</script>

View file

@ -21,7 +21,7 @@ const detailOrderReplace = () =>
"@/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue"
);
// ระบบทดลองงาน
// ระบบทดลองงาน
const mainProbation = () =>
import("@/modules/05_placement/components/probation/MainProbation.vue");
@ -33,179 +33,178 @@ const probationFormEvaluation = () =>
const probationWorkAdd = () =>
import("@/modules/05_placement/components/probation/MainDetail.vue");
const probationFormAssign = () =>
import("@/modules/05_placement/components/probation/FormAssign.vue");
const transfer = () =>
import("@/modules/05_placement/components/Transfer/transferMain.vue");
const transferbyId = () =>
import("@/modules/05_placement/components/Transfer/transferRegistry.vue");
const probationFormAssign = () =>
import("@/modules/05_placement/components/probation/FormAssign.vue");
const transfer = () =>
import("@/modules/05_placement/components/Transfer/transferMain.vue");
const transferbyId = () =>
import("@/modules/05_placement/components/Transfer/transferRegistry.vue");
// คำสั่งช่วยราชการ/ส่งตัวกลับ
const RepatriationOrder = () =>
// คำสั่งช่วยราชการ/ส่งตัวกลับ
const RepatriationOrder = () =>
import("@/modules/05_placement/components/RepatriationOrder/List.vue");
const RepatriationOrderAdd = () =>
const RepatriationOrderAdd = () =>
import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
export default [
{
path: "/placement",
name: "placement",
component: PlacementMain,
meta: {
Auth: true,
Key: [6.1],
Role: "placement",
},
export default [
{
path: "/placement",
name: "placement",
component: PlacementMain,
meta: {
Auth: true,
Key: [6.1],
Role: "placement",
},
{
path: "/placement/personal-list/:examId",
name: "placementDetail",
component: PlacementDetail,
meta: {
Auth: true,
Key: [6.1],
Role: "placement",
},
},
{
path: "/placement/personal-list/:examId",
name: "placementDetail",
component: PlacementDetail,
meta: {
Auth: true,
Key: [6.1],
Role: "placement",
},
{
path: "/placement/personal-detail/:personalId",
name: "PlacementPersonalDetail",
component: PlacementPersonalDetail,
meta: {
Auth: true,
Key: [6.1],
Role: "placement",
},
},
{
path: "/placement/personal-detail/:personalId",
name: "PlacementPersonalDetail",
component: PlacementPersonalDetail,
meta: {
Auth: true,
Key: [6.1],
Role: "placement",
},
{
path: "/placement/order",
name: "Orderplacement",
component: MainOrderPlacement,
meta: {
Auth: true,
Key: [6.2],
Role: "placement",
},
},
{
path: "/placement/order",
name: "Orderplacement",
component: MainOrderPlacement,
meta: {
Auth: true,
Key: [6.2],
Role: "placement",
},
{
path: "/placement/order/detail",
name: "OrderplacementDetail",
component: detailOrderReplace,
meta: {
Auth: true,
Key: [6.2],
Role: "placement",
},
},
{
path: "/placement/order/detail",
name: "OrderplacementDetail",
component: detailOrderReplace,
meta: {
Auth: true,
Key: [6.2],
Role: "placement",
},
{
path: "/placement/addOrderPlacement",
name: "addOrderPlacement",
component: addOrderPlacement,
meta: {
Auth: true,
Key: [6.2],
Role: "placement",
},
},
{
path: "/placement/addOrderPlacement",
name: "addOrderPlacement",
component: addOrderPlacement,
meta: {
Auth: true,
Key: [6.2],
Role: "placement",
},
{
path: "/probation",
name: "probation",
component: mainProbation,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
},
{
path: "/probation",
name: "probation",
component: mainProbation,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
{
path: "/probation/detail/:id",
name: "probationDetail",
component: probationDetail,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
},
{
path: "/probation/detail/:id",
name: "probationDetail",
component: probationDetail,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
{
path: "/probation/form",
name: "probationForm",
component: probationFormEvaluation,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
},
{
path: "/probation/detail/:id/:form",
name: "probationForm",
component: probationFormEvaluation,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
{
path: "/probation/work/add",
name: "probationWorkAdd",
component: probationWorkAdd,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
},
{
path: "/probation/work/add",
name: "probationWorkAdd",
component: probationWorkAdd,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
{
path: "/probation/work/:id",
name: "probationWork",
component: probationWorkAdd,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
},
{
path: "/probation/work/:id",
name: "probationWork",
component: probationWorkAdd,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
{
path: "/probation/add",
name: "probationWorkAdd",
component: probationFormAssign,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
},
{
path: "/probation/add",
name: "probationWorkAdd",
component: probationFormAssign,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
{
path: "/transfer",
name: "transfer",
component: transfer,
meta: {
Auth: true,
Key: [6.4],
Role: "placement",
}
},
{
path: "/transfer",
name: "transfer",
component: transfer,
meta: {
Auth: true,
Key: [6.4],
Role: "placement",
},
{
path: "/transfer/:id",
name: "transfer-id",
component: transferbyId,
meta: {
Auth: true,
Key: [6.4],
Role: "placement",
}
},
{
path: "/transfer/:id",
name: "transfer-id",
component: transferbyId,
meta: {
Auth: true,
Key: [6.4],
Role: "placement",
},
{
path: "/repatriation-order",
name: "repatriation-order",
component: RepatriationOrder,
meta: {
Auth: true,
Key: [6.6],
Role: "placement",
},
},
{
path: "/repatriation-order",
name: "repatriation-order",
component: RepatriationOrder,
meta: {
Auth: true,
Key: [6.6],
Role: "placement",
},
{
path: "/repatriation-order/add",
name: "repatriation-order-add",
component: RepatriationOrderAdd,
meta: {
Auth: true,
Key: [6.6],
Role: "placement",
},
},
{
path: "/repatriation-order/add",
name: "repatriation-order-add",
component: RepatriationOrderAdd,
meta: {
Auth: true,
Key: [6.6],
Role: "placement",
},
];
},
];

View file

@ -281,3 +281,17 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
DataMainOrder,
};
});
export const useProbationDataStore = defineStore("probationDataStore", () => {
const ratingColors = ref<string[]>([
"light-blue-3",
"light-blue-6",
"blue",
"blue-9",
"blue-10",
]);
return {
ratingColors,
};
});