รายการโครงการ

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-10 10:31:41 +07:00
parent 62bb318858
commit ec36ffe6ba
9 changed files with 211 additions and 38 deletions

View file

@ -11,7 +11,7 @@ const formData = reactive<FormCompetency>({
competencyType: "",
competencyName: "",
definition: "",
level_1: "",
level_1: ["", "", "", "", "", ""],
level_2: "",
level_3: "",
level_4: "",
@ -42,8 +42,27 @@ const competencyTypeOp = ref<DataOption[]>([
},
]);
const itemsFormCard = ref<any>([
{
id: "",
name: "",
},
]);
function ocClickAdd() {
if (itemsFormCard.value.length !== 6) {
const data = {
id: "",
name: "",
};
itemsFormCard.value.push(data);
}
}
/** บันทึก */
function onSubmit() {}
function onSubmit() {
console.log(formData);
}
</script>
<template>
@ -102,36 +121,151 @@ function onSubmit() {}
</div>
<div class="col-12">
<q-card flat bordered>
<q-item-section class="bg-grey-4">
<q-card-section class="bg-grey-4">
<div
class="row items-center text-dark text-body2 text-weight-medium"
>
<div class="col-3 text-center">
<span>ระดบสมรรถนะ</span>
<div class="col-3">
<div class="row items-center">
<div class="col-1">
<q-btn
dense
flat
round
color="primary"
icon="add"
@click="ocClickAdd"
>
<q-tooltip>เพ</q-tooltip></q-btn
>
</div>
<div class="col-11 text-center">
<span>ระดบสมรรถนะ</span>
</div>
</div>
</div>
<div class="col-9">
<div class="col-4">
<span>คำอธบายระด/พฤตกรรมทคาดหว/พฤตกรรมยอย</span>
</div>
</div>
</q-item-section>
<q-separator />
<q-item-section>
<div class="row q-pa-sm">
</q-card-section>
<q-card-section>
<div
class="row q-pa-sm"
v-for="(items, index) in itemsFormCard"
key="index"
>
<div
class="col-3 text-center self-center text-body1 text-weight-medium"
>
<span>1</span>
<span>{{ index + 1 }}</span>
</div>
<div class="col-9">
<q-input
<!-- <q-input
v-model="formData.level_1"
label="คำอธิบาย"
dense
outlined
/> -->
<q-editor
v-model="formData.level_1[index]"
:dense="$q.screen.lt.md"
:toolbar="[
[
{
label: $q.lang.editor.align,
icon: $q.iconSet.editor.align,
fixedLabel: true,
list: 'only-icons',
options: ['left', 'center', 'right', 'justify'],
},
{
label: $q.lang.editor.align,
icon: $q.iconSet.editor.align,
fixedLabel: true,
options: ['left', 'center', 'right', 'justify'],
},
],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['token', 'hr', 'link', 'custom_btn'],
['print', 'fullscreen'],
[
{
label: $q.lang.editor.formatting,
icon: $q.iconSet.editor.formatting,
list: 'no-icons',
options: [
'p',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'code',
],
},
{
label: $q.lang.editor.fontSize,
icon: $q.iconSet.editor.fontSize,
fixedLabel: true,
fixedIcon: true,
list: 'no-icons',
options: [
'size-1',
'size-2',
'size-3',
'size-4',
'size-5',
'size-6',
'size-7',
],
},
{
label: $q.lang.editor.defaultFont,
icon: $q.iconSet.editor.font,
fixedIcon: true,
list: 'no-icons',
options: [
'default_font',
'arial',
'arial_black',
'comic_sans',
'courier_new',
'impact',
'lucida_grande',
'times_new_roman',
'verdana',
],
},
'removeFormat',
],
['quote', 'unordered', 'ordered', 'outdent', 'indent'],
['undo', 'redo'],
['viewsource'],
]"
: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',
}"
/>
</div>
</div>
</q-item-section>
</q-card-section>
</q-card>
</div>