ปรับ Eva
This commit is contained in:
parent
965304339d
commit
6813d496e8
8 changed files with 317 additions and 92 deletions
|
|
@ -73,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const row = ref<any>();
|
||||
const row = ref<any[]>([]);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลประวัติการประเมิน
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
div
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted } from "vue";
|
||||
import { reactive, onMounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
|
|
@ -7,6 +8,7 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";
|
||||
import { useEvaluateStore } from "@/modules/06_evaluate/store";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
|
|
@ -16,10 +18,12 @@ import type {
|
|||
|
||||
/** importComponents*/
|
||||
import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
|
||||
import HeaderDialog from "@/components/DialogHeader.vue";
|
||||
|
||||
/** use*/
|
||||
const mixin = useCounterMixin();
|
||||
const store = useEvaluateDetailStore();
|
||||
const storeEva = useEvaluateStore();
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
|
||||
|
|
@ -140,7 +144,10 @@ async function fetchDataAllDetail() {
|
|||
});
|
||||
|
||||
http.get(config.API.dataUserPerformance).then((res) => {
|
||||
formDetail.assessments = res.data.result;
|
||||
formDetail.assessments = res.data.result.map((e: any) => ({
|
||||
...e,
|
||||
isAdd: false,
|
||||
}));
|
||||
});
|
||||
|
||||
http.get(config.API.dataUserPortfolio).then((res) => {
|
||||
|
|
@ -217,6 +224,70 @@ function getData() {
|
|||
});
|
||||
}
|
||||
|
||||
/** ผลงานที่เคยเสนอขอ*/
|
||||
const modalPerformance = ref<boolean>(false);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const isIndex = ref<number>();
|
||||
const formPerformance = reactive<any>({
|
||||
year: null,
|
||||
type: "",
|
||||
subject: "",
|
||||
evaluationResult: "",
|
||||
});
|
||||
const typeOptions = ref<string[]>([
|
||||
"ประเมินชำนาญการ",
|
||||
"ประเมินชำนาญการพิเศษ",
|
||||
"ประเมินเชี่ยวชาญ",
|
||||
]);
|
||||
|
||||
const resultOptions = ref<any[]>([
|
||||
{ label: "ผ่าน", value: "ผ่าน" },
|
||||
{ label: "ไม่ผ่าน", value: "ไม่ผ่าน" },
|
||||
]);
|
||||
|
||||
function onOpenDialogPerformance(
|
||||
stetusEdit: boolean = false,
|
||||
index: number | null = null
|
||||
) {
|
||||
if (stetusEdit && index) {
|
||||
isIndex.value = index;
|
||||
const data = formDetail.assessments[index];
|
||||
formPerformance.year = data.year ? Number(data.year) - 543 : null;
|
||||
formPerformance.type = data.type;
|
||||
formPerformance.subject = data.subject;
|
||||
formPerformance.evaluationResult = data.evaluationResult;
|
||||
}
|
||||
isEdit.value = stetusEdit;
|
||||
modalPerformance.value = true;
|
||||
}
|
||||
|
||||
function onCloseDialogPerformance() {
|
||||
modalPerformance.value = false;
|
||||
formPerformance.year = null;
|
||||
formPerformance.type = "";
|
||||
formPerformance.subject = "";
|
||||
formPerformance.evaluationResult = "";
|
||||
}
|
||||
|
||||
function onSubmitPerformance() {
|
||||
const body = {
|
||||
...formPerformance,
|
||||
year: formPerformance.year ? Number(formPerformance.year) + 543 : null,
|
||||
isAdd: true,
|
||||
};
|
||||
|
||||
if (isEdit.value && isIndex.value) {
|
||||
formDetail.assessments[isIndex.value] = body;
|
||||
} else {
|
||||
formDetail.assessments.push(body);
|
||||
}
|
||||
onCloseDialogPerformance();
|
||||
}
|
||||
|
||||
function onDeletePerformance(index: number) {
|
||||
formDetail.assessments.splice(index, 1);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
showLoader();
|
||||
|
|
@ -575,18 +646,178 @@ onMounted(async () => {
|
|||
|
||||
<q-card class="col-12 cardSp1" bordered>
|
||||
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
||||
<span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
|
||||
<span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี) </span>
|
||||
<q-btn
|
||||
v-if="storeEva.currentStep === 1"
|
||||
class="q-ml-sm"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click.stop="onOpenDialogPerformance(false)"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-10">
|
||||
<TableData
|
||||
:columns="columnAssessments"
|
||||
:row="formDetail.assessments"
|
||||
/>
|
||||
<div class="q-pa-sm row col-12">
|
||||
<d-table
|
||||
flat
|
||||
bordered
|
||||
:columns="columnAssessments"
|
||||
:rows="formDetail.assessments"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
virtual-scroll
|
||||
class="row col-12"
|
||||
:style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props" class="bg-grey-2">
|
||||
<q-th auto-widt v-if="storeEva.currentStep === 1" />
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-body2 text-black">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td auto-widt v-if="storeEva.currentStep === 1">
|
||||
<q-btn
|
||||
v-if="props.row.isAdd"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="edit"
|
||||
icon="edit"
|
||||
@Click.stop.prevent="
|
||||
onOpenDialogPerformance(true, props.rowIndex)
|
||||
"
|
||||
>
|
||||
<q-tooltip>แก้ไข</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
v-if="props.row.isAdd"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="red"
|
||||
icon="delete"
|
||||
@click.stop.pervent="onDeletePerformance(props.rowIndex)"
|
||||
>
|
||||
<q-tooltip>ลบ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div>
|
||||
{{ !col.value ? "-" : col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modalPerformance" persistent>
|
||||
<q-card style="min-width: 35%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitPerformance">
|
||||
<HeaderDialog
|
||||
:tittle="'ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)'"
|
||||
:close="onCloseDialogPerformance"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formPerformance.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="
|
||||
!formPerformance.year
|
||||
? null
|
||||
: Number(formPerformance.year) + 543
|
||||
"
|
||||
:label="`${'ปี พ.ศ.'}`"
|
||||
:rules="[(val:string) => !!val || 'กรุณาเลือกปี พ.ศ.']"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
label="ระดับตอนที่ยืนขอ"
|
||||
hide-bottom-space
|
||||
v-model="formPerformance.type"
|
||||
:options="typeOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formPerformance.subject"
|
||||
label="เรื่อง/ชื่อเรื่อง"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-option-group
|
||||
:options="resultOptions"
|
||||
type="radio"
|
||||
v-model="formPerformance.evaluationResult"
|
||||
inline
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="public" type="submit" />
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue