ข้อมูลการประเมิณ => ปรับ form Dialog

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-06-11 13:16:30 +07:00
parent 6f9a82faa3
commit dafe59cf27
8 changed files with 619 additions and 633 deletions

View file

@ -67,83 +67,90 @@ onMounted(() => {
</script>
<template>
<q-card flat bordered>
<q-card>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<q-card-section class="bg-grey-3 q-pa-sm">
<div class="row text-dark text-body2 text-weight-medium">
<div class="text-center col-8">เกณฑการประเม</div>
<div class="text-center col-4">ระดบคะแนน</div>
</div>
</q-card-section>
<q-card-section class="q-pa-none">
<div v-for="(field, index) in dataLevel" :key="field.id">
<div class="row q-pa-sm">
<div class="col-8 text-left">
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="field.description"
label-slot
borderless
:rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
hide-bottom-space
>
<template #control>
<q-editor
class="full-width"
<q-card-section>
<q-card flat bordered>
<q-card-section class="bg-grey-3">
<div class="row text-dark text-body2 text-weight-medium">
<div class="text-center col-8">เกณฑการประเม</div>
<div class="text-center col-4">ระดบคะแนน</div>
</div>
</q-card-section>
<q-card-section class="q-pa-none">
<div v-for="(field, index) in dataLevel" :key="field.id">
<div class="row q-pa-sm">
<div class="col-8 text-left">
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="field.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="field.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',
}"
/>
</template>
</q-field>
<!-- <q-input
v-model="formScore[field]"
dense
outlined
class="inputgreen"
label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
:rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
hide-bottom-space
/> -->
['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-input
v-model="formScore[field]"
dense
outlined
class="inputgreen"
label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
:rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
hide-bottom-space
/> -->
</div>
<div
class="col-4 text-center text-body1 text-weight-bold self-center"
>
{{ field.level }}
</div>
</div>
<div
class="col-12"
v-if="index !== Object.keys(fieldLabels).length - 1"
>
<q-separator />
</div>
</div>
<div
class="col-4 text-center text-body1 text-weight-bold self-center"
>
{{ field.level }}
</div>
</div>
<div
class="col-12"
v-if="index !== Object.keys(fieldLabels).length - 1"
>
<q-separator />
</div>
</div>
</q-card-section>
</q-card>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-separator />
<q-card-actions align="right">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>