hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ req field ของระบบประเมิน เมนูสมรรถนะ

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-04-17 18:02:33 +07:00
parent c5b68d0691
commit 8cd59c8ec6
6 changed files with 400 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/modules/14_KPI/components/competency/Forms/01_FormMain.vue
View file

@ -1,6 +1,21 @@
div
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, success, messageError } = mixin;
const router = useRouter();
const store = useKPIDataStore();
const formData = reactive({
competencyType: "",
competencyName: "",
@ -27,7 +42,27 @@ function ocClickAdd() {
}
function onSubmit() {
console.log(formData);
dialogConfirm($q, () => {
const body = {
competencyType: store.competencyType,
competencyName: formData.competencyName,
definition: formData.definition,
levels: formData.levels,
evaluation: formData.evaluation,
};
// showLoader()
// http
// .put(config.API.???,body)
// .then((res)=>{
// success($q,'บันทึกสำเร็จ')
// router.push(`/KPI-competency`)
// }).catch((e)=>{
// messageError($q,e)
// }).finally(()=>{
// hideLoader()
// })
console.log(body);
});
}
</script>
@ -97,33 +132,46 @@ function onSubmit() {
<span>{{ items.level }}</span>
</div>
<div class="col-9">
<q-editor
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.levels[index].description"
:dense="$q.screen.lt.md"
min-height="5rem"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
label-slot
borderless
:rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
hide-bottom-space
>
<template #control>
<q-editor
class="full-width"
v-model="formData.levels[index].description"
:dense="$q.screen.lt.md"
min-height="5rem"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</template>
</q-field>
</div>
</div>
</q-card-section>
@ -136,8 +184,6 @@ function onSubmit() {
dense
type="textarea"
outlined
:rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
hide-bottom-space
/>
</div>
<div class="col-12"><q-separator /></div>

115
src/modules/14_KPI/components/competency/Forms/02_FormGroup.vue
View file

@ -1,5 +1,18 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, success, messageError } = mixin;
const router = useRouter;
const store = useKPIDataStore();
interface DetailLevelType {
level_01: any;
@ -40,7 +53,31 @@ const formData = reactive<FormGroup>({
});
function onSubmit() {
console.log(formData);
dialogConfirm($q, () => {
const body = {
competencyType: store.competencyType,
competencyName: formData.definition,
definition: formData.definition,
levels1: formScore.score1,
levels2: formScore.score2,
levels3: formScore.score3,
levels4: formScore.score4,
levels5: formScore.score5,
evaluation: formData.evaluation,
};
// showLoader()
// http
// .put(config.API.???,body)
// .then((res)=>{
// success($q,'บันทึกสำเร็จ')
// router.push(`/KPI-competency`)
// }).catch((e)=>{
// messageError($q,e)
// }).finally(()=>{
// hideLoader()
// })
console.log(body);
});
}
</script>
@ -48,7 +85,14 @@ function onSubmit() {
<q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-input label="ชื่อสมรรถนะ" outlined v-model="formData.name" dense />
<q-input
label="ชื่อสมรรถนะ"
outlined
v-model="formData.name"
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
hide-bottom-space
/>
</div>
<div class="col-12">
<q-input
@ -57,6 +101,8 @@ function onSubmit() {
v-model="formData.definition"
dense
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
hide-bottom-space
/>
</div>
<div class="col-12">
@ -79,33 +125,46 @@ function onSubmit() {
{{ fieldLabels[field as keyof typeof fieldLabels] }}
</div>
<div class="col-8 text-left">
<q-editor
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formScore[field]"
:dense="$q.screen.lt.md"
min-height="5rem"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
label-slot
borderless
:rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
hide-bottom-space
>
<template #control>
<q-editor
class="full-width"
v-model="formScore[field]"
:dense="$q.screen.lt.md"
min-height="5rem"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</template>
</q-field>
</div>
</div>
<div
@ -125,8 +184,6 @@ function onSubmit() {
dense
type="textarea"
outlined
:rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
hide-bottom-space
/>
</div>
<div class="col-12"><q-separator /></div>

160
src/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue
View file

@ -1,15 +1,19 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
useCounterMixin();
const router = useRouter
const store = useKPIDataStore();
const formData = reactive({
competencyType: "",
competencyName: "",
@ -76,10 +80,30 @@ function updateSelectType(val: string, index: number) {
formData.form[index].posLevel = "";
}
function onSubmit() {
dialogConfirm($q, () => {
console.log(formData);
});
const body = {
competencyType:store.competencyType,
competencyName:formData.competencyName,
definition:formData.definition,
postype:formData.form,
evaluation:formData.evaluation,
}
// showLoader()
// http
// .put(config.API.???,body)
// .then((res)=>{
// success($q,'บันทึกสำเร็จ')
// router.push(`/KPI-competency`)
// }).catch((e)=>{
// messageError($q,e)
// }).finally(()=>{
// hideLoader()
// })
console.log(body)
})
}
onMounted(() => {
@ -184,60 +208,86 @@ onMounted(() => {
/>
</div>
<div class="col-6">
<q-editor
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.form[index].description"
:dense="$q.screen.lt.md"
min-height="5rem"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
label-slot
borderless
:rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
hide-bottom-space
>
<template #control>
<q-editor
class="full-width"
v-model="formData.form[index].description"
:dense="$q.screen.lt.md"
min-height="5rem"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
<q-editor
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</template>
</q-field>
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.form[index].description2"
:dense="$q.screen.lt.md"
min-height="5rem"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
label-slot
borderless
:rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
hide-bottom-space
>
<template #control>
<q-editor
class="full-width"
v-model="formData.form[index].description2"
:dense="$q.screen.lt.md"
min-height="5rem"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</template>
</q-field>
</div>
<div class="col-12"><q-separator /></div>
</div>
@ -251,8 +301,6 @@ onMounted(() => {
dense
type="textarea"
outlined
:rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
hide-bottom-space
/>
</div>
<div class="col-12"><q-separator /></div>

97
src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -22,6 +24,7 @@ const {
date2Thai,
} = mixin;
const store = useKPIDataStore();
const formData = reactive({
competencyType: "",
competencyName: "",
@ -31,8 +34,31 @@ const formData = reactive({
level3: "",
evaluation: "",
});
async function onSubmit() {
dialogConfirm($q, async () => {});
function onSubmit() {
dialogConfirm($q, () => {
const body = {
competencyType: store.competencyType,
competencyName: formData.competencyName,
definition: formData.definition,
levels1: formData.level1,
levels2: formData.level2,
levels3: formData.level3,
evaluation: formData.evaluation,
};
// showLoader()
// http
// .put(config.API.???,body)
// .then((res)=>{
// success($q,'บันทึกสำเร็จ')
// router.push(`/KPI-competency`)
// }).catch((e)=>{
// messageError($q,e)
// }).finally(()=>{
// hideLoader()
// })
console.log(body);
});
}
</script>
@ -51,34 +77,47 @@ async function onSubmit() {
</div>
<q-card-section class="col-12 q-px-none">
<div>
<q-editor
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.definition"
:dense="$q.screen.lt.md"
min-height="7rem"
placeholder="คำจำกัดความ"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
label-slot
borderless
:rules="[(val) => !!val || 'กรุณากรอกคำจำกัดความ']"
hide-bottom-space
>
<template #control>
<q-editor
class="full-width"
v-model="formData.definition"
:dense="$q.screen.lt.md"
min-height="7rem"
placeholder="คำจำกัดความ"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</template>
</q-field>
</div>
</q-card-section>
<div class="col-12">

95
src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
View file

@ -2,8 +2,9 @@
import { ref, reactive } from "vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -21,7 +22,7 @@ const {
success,
date2Thai,
} = mixin;
const store = useKPIDataStore();
const formData = reactive({
competencyType: "",
competencyName: "",
@ -31,8 +32,29 @@ const formData = reactive({
evaluation: "",
});
async function onSubmit() {
dialogConfirm($q, async () => {});
function onSubmit() {
dialogConfirm($q, () => {
const body = {
competencyType: store.competencyType,
competencyName: formData.competencyName,
definition: formData.definition,
levels1: formData.level1,
levels2: formData.level2,
evaluation: formData.evaluation,
};
// showLoader()
// http
// .put(config.API.???,body)
// .then((res)=>{
// success($q,'บันทึกสำเร็จ')
// router.push(`/KPI-competency`)
// }).catch((e)=>{
// messageError($q,e)
// }).finally(()=>{
// hideLoader()
// })
console.log(body);
});
}
</script>
@ -51,34 +73,47 @@ async function onSubmit() {
</div>
<q-card-section class="col-12 q-px-none">
<div>
<q-editor
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.definition"
:dense="$q.screen.lt.md"
min-height="7rem"
placeholder="คำจำกัดความ"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
label-slot
borderless
:rules="[(val) => !!val || 'กรุณากรอกคำจำกัดความ']"
hide-bottom-space
>
<template #control>
<q-editor
class="full-width"
v-model="formData.definition"
:dense="$q.screen.lt.md"
min-height="7rem"
placeholder="คำจำกัดความ"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</template>
</q-field>
</div>
</q-card-section>
<div class="col-12">

3
src/style/quasar-variables.sass
View file

@ -136,6 +136,9 @@ $muti-tab: #87d4cc
.q-tree
color: #c8d3db
.q_field_p_none .q-field__control-container
padding-top: 0 !important
.input-alert .q-field--outlined .q-field__control
border: 1px solid red !important
background-color: rgb(255, 216, 216)