ปรับ ui Responensive

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-05-27 15:29:13 +07:00
parent 8d0ac4eb7c
commit 93bdc791dc
9 changed files with 266 additions and 80 deletions

View file

@ -266,7 +266,7 @@ onMounted(() => {
<template>
<div v-for="(item, index) in store.competencyType" :key="index">
<q-card bordered style="border-radius: 5px" class="no-shadow">
<q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
<q-card-section class="bg-grey-2 q-py-sm">
<div class="row items-center">
<div class="col">
@ -302,7 +302,7 @@ onMounted(() => {
</div>
</q-card-section>
<q-card-section class="q-pa-sm">
<q-table
<d-table
ref="table"
:columns="columns"
:rows="rows[item.id]"
@ -312,7 +312,6 @@ onMounted(() => {
:paging="true"
dense
hide-pagination
class="custom-table2"
no-data-label="ไม่มีข้อมูล"
:visible-columns="visibleColumns"
>
@ -348,29 +347,7 @@ onMounted(() => {
</q-tooltip>
</q-btn>
</q-btn-group>
<!-- <q-rating
v-model="props.row.point"
max="5"
size="sm"
color="grey"
:color-selected="store.ratingColors"
label="ระดับการประเมินพฤติกรรม"
disable
>
<template
v-for="(i, index) in sortedDataListCriteria"
:key="i.level"
v-slot:[`tip-${index+1}`]
>
<q-tooltip>
<div class="text-body2">
<span v-html="i.description"></span>
</div>
</q-tooltip>
</template>
</q-rating> -->
</div>
<!-- <div v-else>รอ ทำ select</div> -->
</div>
<div v-else-if="col.name == 'summary'">
{{
@ -438,7 +415,105 @@ onMounted(() => {
</q-td>
</q-tr>
</template>
</q-table>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list>
<q-item
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label caption>{{ col.label }}</q-item-label>
<q-item-label v-if="col.name == 'createDate'">
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
<q-item-label v-else-if="col.name == 'point'">
<q-btn-group outline>
<q-btn
v-for="(i, index) in sortedDataListCriteria"
:key="index"
:class="props.row.point == i.level && 'active'"
outline
color="grey-6"
:label="i.level"
>
<q-tooltip>
<div class="text-body2">
<span v-html="i.description"></span>
</div>
</q-tooltip>
</q-btn>
</q-btn-group>
</q-item-label>
<q-item-label v-else-if="col.name == 'summary'">
{{
props.row.point !== 0
? (props.row.point / 5) * props.row.weight
: "-"
}}
</q-item-label>
<q-item-label v-else>{{ col.value ?? "-" }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-separator />
<q-card-actions
align="around"
v-if="
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2'
"
>
<q-btn
flat
round
icon="mdi-developer-board"
color="blue-6"
size="12px"
dense
@click="openPopupProgress(props.row.id)"
>
<q-tooltip>รายงานความกาวหน</q-tooltip>
</q-btn>
<q-btn
flat
round
icon="warning"
color="red-5"
size="12px"
dense
main="problem"
@click="openPopupProblem(props.row.id)"
>
<q-tooltip>รายงานปญหา</q-tooltip>
</q-btn>
</q-card-actions>
<q-card-actions align="around" v-if="isEditStep1">
<q-btn
flat
round
icon="edit"
color="edit"
@click.stop.pervent="onEdit(props.row, item.id)"
>
<q-tooltip>แกไข </q-tooltip>
</q-btn>
<q-btn
flat
round
icon="delete"
color="red"
@click.stop.pervent="onDelete(props.row.id, item.id)"
>
<q-tooltip>ลบขอม </q-tooltip>
</q-btn>
</q-card-actions>
</q-card>
</div>
</template>
</d-table>
</q-card-section>
</q-card>
</div>