Merge branch 'develop' into devTee
This commit is contained in:
STW_TTTY\stwtt
commit
fb1e158861
9 changed files with 828 additions and 109 deletions
|
|
@ -1,10 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { ref, reactive, watch, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -22,6 +24,7 @@ const {
|
|||
dialogConfirm,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
date2Thai,
|
||||
} = mixin;
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
|
@ -35,6 +38,20 @@ const search = ref<string>("");
|
|||
const listCheckID = ref<string | null>(null);
|
||||
const listTarget = ref<any>([]);
|
||||
|
||||
const formFilter = reactive<any>({
|
||||
isAll: false,
|
||||
keyword: "",
|
||||
node: 0,
|
||||
nodeId: "",
|
||||
period: "",
|
||||
year: null,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
const formDetail = reactive<any>({
|
||||
orgRevisionId: "",
|
||||
id: "",
|
||||
|
|
@ -60,20 +77,28 @@ const formDetail = reactive<any>({
|
|||
strategyId: "",
|
||||
strategyName: "",
|
||||
documentInfoEvidence: "",
|
||||
date: null,
|
||||
});
|
||||
|
||||
function fetchIndicators() {
|
||||
const nodeId = store.dataProfile.nodeId;
|
||||
const node = store.dataProfile.node;
|
||||
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
/** Option รอบการประเมิน*/
|
||||
const roundOp = ref<DataOptions[]>([
|
||||
{ id: "APR", name: "รอบเมษายน" },
|
||||
{ id: "OCT", name: "รอบตุลาคม" },
|
||||
]);
|
||||
|
||||
function fetchListPlan() {
|
||||
formFilter.nodeId = store.dataProfile.nodeId;
|
||||
formFilter.node = store.dataProfile.node;
|
||||
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
|
||||
// const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.kpiPlan +
|
||||
`?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&nodeId=${nodeId}&node=${node}&keyword=${""}`
|
||||
)
|
||||
.post(config.API.kpiPlan + `/search`, formFilter)
|
||||
.then((res) => {
|
||||
listTarget.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -83,7 +108,7 @@ function fetchIndicators() {
|
|||
});
|
||||
}
|
||||
|
||||
function fetchIndicatorsByid(id: string) {
|
||||
function fetchListPlanByid(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievement("planned") + `/${id}`)
|
||||
|
|
@ -94,6 +119,17 @@ function fetchIndicatorsByid(id: string) {
|
|||
formDetail.weight = data.weight;
|
||||
formDetail.meaning = data.meaning;
|
||||
formDetail.formula = data.formula;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
formDetail.documentInfoEvidence = data.documentInfoEvidence;
|
||||
if (data.startDate && data.endDate) {
|
||||
formDetail.date = [];
|
||||
formDetail.date[0] = data.startDate;
|
||||
formDetail.date[1] = data.endDate;
|
||||
}
|
||||
clickList(data.kpiPlanId, true);
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -105,15 +141,22 @@ function fetchIndicatorsByid(id: string) {
|
|||
}
|
||||
|
||||
function fetchListRole() {
|
||||
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
const position = store.dataProfile.position;
|
||||
// const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
// const position = store.dataProfile.position;
|
||||
formFilter.nodeId = store.dataProfile.nodeId;
|
||||
formFilter.node = store.dataProfile.node;
|
||||
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
|
||||
formFilter.position = store.dataProfile.position;
|
||||
|
||||
http
|
||||
.get(
|
||||
config.API.kpiRole +
|
||||
`?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&position=${position}`
|
||||
)
|
||||
.post(config.API.kpiRole + `/search`, formFilter)
|
||||
.then((res) => {
|
||||
listTarget.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
|
|
@ -131,6 +174,17 @@ function fetchRoleByid(id: string) {
|
|||
formDetail.weight = data.weight;
|
||||
formDetail.meaning = data.meaning;
|
||||
formDetail.formula = data.formula;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
formDetail.documentInfoEvidence = data.documentInfoEvidence;
|
||||
if (data.startDate && data.endDate) {
|
||||
formDetail.date = [];
|
||||
formDetail.date[0] = data.startDate;
|
||||
formDetail.date[1] = data.endDate;
|
||||
}
|
||||
clickList(data.kpiRoleId, true);
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -141,9 +195,76 @@ function fetchRoleByid(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
function fetchListSpecial() {
|
||||
formFilter.nodeId = store.dataProfile.nodeId;
|
||||
formFilter.node = store.dataProfile.node;
|
||||
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
|
||||
|
||||
const body = {
|
||||
keyword: formFilter.keyword,
|
||||
period: formFilter.period,
|
||||
year: formFilter.year,
|
||||
pageSize: formFilter.pageSize,
|
||||
page: formFilter.page,
|
||||
};
|
||||
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.kpiSpecial + `/search`, body)
|
||||
.then((res) => {
|
||||
listTarget.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fetchspecialByid(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievement("special") + `/${id}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formDetail.including = data.including;
|
||||
formDetail.includingName = data.includingName;
|
||||
formDetail.target = data.target;
|
||||
formDetail.unit = data.unit;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
formDetail.weight = data.weight;
|
||||
formDetail.formula = data.formula;
|
||||
formDetail.meaning = data.meaning;
|
||||
formDetail.documentInfoEvidence = data.documentInfoEvidence;
|
||||
if (data.startDate && data.endDate) {
|
||||
formDetail.date = [];
|
||||
formDetail.date[0] = data.startDate;
|
||||
formDetail.date[1] = data.endDate;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function clickList(id: string, isData: boolean = false) {
|
||||
showLoader();
|
||||
const url = numpage.value === 1 ? config.API.kpiPlan : config.API.kpiRole;
|
||||
const url =
|
||||
numpage.value === 1
|
||||
? config.API.kpiPlan
|
||||
: numpage.value === 2
|
||||
? config.API.kpiRole
|
||||
: config.API.kpiSpecial;
|
||||
http
|
||||
.get(`${url}/${id}`)
|
||||
.then((res) => {
|
||||
|
|
@ -155,6 +276,11 @@ function clickList(id: string, isData: boolean = false) {
|
|||
formDetail.weight = data.weight;
|
||||
formDetail.meaning = data.meaning;
|
||||
formDetail.formula = data.formula;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
}
|
||||
formDetail.orgRevisionId = data.corgRevisionId;
|
||||
formDetail.id = data.id;
|
||||
|
|
@ -163,11 +289,6 @@ function clickList(id: string, isData: boolean = false) {
|
|||
formDetail.kpiPeriodId = data.kpiPeriodId;
|
||||
formDetail.includingName = data.includingName;
|
||||
formDetail.including = data.including;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
formDetail.node = data.node;
|
||||
formDetail.nodeId = data.nodeId;
|
||||
formDetail.nodeName = data.nodeName;
|
||||
|
|
@ -209,14 +330,25 @@ function closeDialog() {
|
|||
formDetail.nodeId = "";
|
||||
formDetail.strategy = "";
|
||||
formDetail.strategyId = "";
|
||||
formDetail.documentInfoEvidence = "";
|
||||
formDetail.date = null;
|
||||
|
||||
formFilter.isAll = false;
|
||||
formFilter.keyword = "";
|
||||
formFilter.node = 0;
|
||||
formFilter.nodeId = "";
|
||||
formFilter.period = "";
|
||||
formFilter.year = null;
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = 20;
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (!listCheckID.value) {
|
||||
if (!listCheckID.value && numpage.value !== 3) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
|
||||
} else {
|
||||
dialogConfirm($q, async () => {
|
||||
// showLoader();
|
||||
showLoader();
|
||||
|
||||
const formBody = {
|
||||
target: formDetail.target,
|
||||
|
|
@ -227,6 +359,23 @@ function onSubmit() {
|
|||
kpiUserEvaluationId: store.dataEvaluation.id,
|
||||
kpiPlanId: numpage.value === 1 ? listCheckID.value : undefined,
|
||||
kpiRoleId: numpage.value === 2 ? listCheckID.value : undefined,
|
||||
achievement1: formDetail.achievement1,
|
||||
achievement2: formDetail.achievement2,
|
||||
achievement3: formDetail.achievement3,
|
||||
achievement4: formDetail.achievement4,
|
||||
achievement5: formDetail.achievement5,
|
||||
documentInfoEvidence: formDetail.documentInfoEvidence,
|
||||
startDate: formDetail.date ? formDetail.date[0] : undefined,
|
||||
endDate: formDetail.date ? formDetail.date[1] : undefined,
|
||||
including: numpage.value === 3 ? formDetail.including : undefined,
|
||||
includingName:
|
||||
numpage.value === 3 ? formDetail.includingName : undefined,
|
||||
period:
|
||||
numpage.value === 3 ? store.dataEvaluation.durationKPI : undefined,
|
||||
year:
|
||||
numpage.value === 3
|
||||
? store.dataEvaluation.year.toString()
|
||||
: undefined,
|
||||
};
|
||||
try {
|
||||
const urlPlanned = isStatusEdit.value
|
||||
|
|
@ -237,68 +386,172 @@ function onSubmit() {
|
|||
? config.API.kpiAchievement("role") + `/${kpiUserPlannedId.value}`
|
||||
: config.API.kpiAchievement("role");
|
||||
|
||||
const url = numpage.value === 1 ? urlPlanned : urlRole;
|
||||
const urlSpecial = isStatusEdit.value
|
||||
? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
|
||||
: config.API.kpiAchievement("special");
|
||||
|
||||
const url =
|
||||
numpage.value === 1
|
||||
? urlPlanned
|
||||
: numpage.value === 2
|
||||
? urlRole
|
||||
: urlSpecial;
|
||||
const method = isStatusEdit.value ? "put" : "post";
|
||||
await http[method](url, formBody);
|
||||
closeDialog();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
closeDialog();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function fetchNewList() {
|
||||
formFilter.page = 1;
|
||||
numpage.value === 1
|
||||
? fetchListPlan()
|
||||
: numpage.value === 2
|
||||
? fetchListRole()
|
||||
: fetchListSpecial();
|
||||
}
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
if (numpage.value === 1) {
|
||||
fetchIndicators();
|
||||
isStatusEdit.value && fetchIndicatorsByid(kpiUserPlannedId.value);
|
||||
fetchListPlan();
|
||||
isStatusEdit.value && fetchListPlanByid(kpiUserPlannedId.value);
|
||||
} else if (numpage.value === 2) {
|
||||
fetchListRole();
|
||||
isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
|
||||
} else if (numpage.value === 3) {
|
||||
fetchListSpecial();
|
||||
isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const title = computed(() => {
|
||||
let name = "";
|
||||
if (numpage.value === 1) {
|
||||
name = isStatusEdit.value
|
||||
? "แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี"
|
||||
: "เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี";
|
||||
} else if (numpage.value === 2) {
|
||||
name = isStatusEdit.value
|
||||
? "แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ"
|
||||
: "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
|
||||
} else if (numpage.value === 3) {
|
||||
name = isStatusEdit.value
|
||||
? "แก้ไขตัวชี้วัดที่ได้รับมอบหมาย"
|
||||
: "เพิ่มตัวชี้วัดที่ได้รับมอบหมาย";
|
||||
}
|
||||
return name;
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 100%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
:tittle="
|
||||
numpage == 1
|
||||
? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
|
||||
: 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
|
||||
"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<DialogHeader :tittle="title" :close="closeDialog" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pa-none scroll" style="max-height: 75vh">
|
||||
<div class="col-12 row">
|
||||
<div class="bg-grey-1 q-pa-md col-3 row lineRight">
|
||||
<div class="col-12 fit">
|
||||
<div class="col-12">
|
||||
<div class="row col-12" v-if="numpage !== 3">
|
||||
<q-checkbox
|
||||
v-model="formFilter.isAll"
|
||||
label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
|
||||
@update:model-value="fetchNewList()"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm col-12">
|
||||
<div class="col-5">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formFilter.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="fetchNewList()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="
|
||||
formFilter.year === null || formFilter.year === ''
|
||||
? null
|
||||
: Number(formFilter.year) + 543
|
||||
"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="formFilter.year"
|
||||
name="cancel"
|
||||
class="cursor-pointer"
|
||||
@click.stop.prevent="
|
||||
(formFilter.year = null), fetchNewList()
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.period"
|
||||
:options="roundOp"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
input-class="text-red"
|
||||
label="รอบการประเมิน"
|
||||
clearable
|
||||
@update:model-value="fetchNewList()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-mt-sm">
|
||||
<q-input
|
||||
v-model="search"
|
||||
v-model="formFilter.keyword"
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
class="inputgreen"
|
||||
@keydown.enter.prevent="fetchNewList()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="search == ''" name="search" />
|
||||
<q-icon v-if="formFilter.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="search !== ''"
|
||||
v-if="formFilter.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="search = ''"
|
||||
@click="(formFilter.keyword = ''), fetchNewList()"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -335,6 +588,30 @@ watch(
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-separator />
|
||||
<div
|
||||
class="q-pa-lg flex justify-end"
|
||||
v-if="totalList !== 0"
|
||||
>
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="
|
||||
numpage === 1
|
||||
? fetchListPlan()
|
||||
: numpage === 2
|
||||
? fetchListRole()
|
||||
: fetchListSpecial()
|
||||
"
|
||||
></q-pagination>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -350,7 +627,7 @@ watch(
|
|||
<div class="col-6">
|
||||
<q-card bordered class="full-height q-pa-sm">
|
||||
<div class="q-pa-sm q-col-gutter-lg">
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 row" v-if="numpage !== 3">
|
||||
<div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
|
||||
<div class="col-8">{{ formDetail.nodeName }}</div>
|
||||
</div>
|
||||
|
|
@ -361,11 +638,43 @@ watch(
|
|||
|
||||
<div class="col-12 row">
|
||||
<div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
|
||||
<div class="col-8">{{ formDetail.including }}</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
v-if="numpage === 3"
|
||||
outlined
|
||||
v-model="formDetail.including"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<div v-else>{{ formDetail.including }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
|
||||
<div class="col-8">{{ formDetail.includingName }}</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
v-if="numpage === 3"
|
||||
outlined
|
||||
v-model="formDetail.includingName"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div v-else>{{ formDetail.includingName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
|
||||
|
|
@ -380,6 +689,7 @@ watch(
|
|||
(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -395,6 +705,7 @@ watch(
|
|||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
reverse-fill-mask
|
||||
/>
|
||||
|
|
@ -414,6 +725,7 @@ watch(
|
|||
!!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
mask="###"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -429,34 +741,84 @@ watch(
|
|||
<div class="col-6 text-center">ระดับคะแนน</div>
|
||||
<div class="col-6 text-center">ผลสำเร็จของงาน</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">5</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement5 }}
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
v-model="formDetail.achievement5"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">4</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement4 }}
|
||||
<q-input
|
||||
v-model="formDetail.achievement4"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">3</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement3 }}
|
||||
<q-input
|
||||
v-model="formDetail.achievement3"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">2</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement2 }}
|
||||
<q-input
|
||||
v-model="formDetail.achievement2"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">1</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement1 }}
|
||||
<q-input
|
||||
v-model="formDetail.achievement1"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -471,6 +833,7 @@ watch(
|
|||
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -484,6 +847,7 @@ watch(
|
|||
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -497,8 +861,57 @@ watch(
|
|||
:rules="[(val:string) => !!val || `${'กรุณากรอกข้อมูลเอกสารหลักฐาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<datepicker
|
||||
v-model="formDetail.date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
range
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
formDetail.date
|
||||
? `${date2Thai(formDetail.date[0])} - ${date2Thai(
|
||||
formDetail.date[1]
|
||||
)}`
|
||||
: null
|
||||
"
|
||||
:label="`${'ช่วงเวลาเริ่มต้น-สิ้นสุด'}`"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="formDetail.date !== null"
|
||||
name="cancel"
|
||||
class="cursor-pointer"
|
||||
@click="formDetail.date = null"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue