ปรับ ui Responensive
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
8d0ac4eb7c
commit
93bdc791dc
9 changed files with 266 additions and 80 deletions
|
|
@ -462,7 +462,7 @@ const title = computed(() => {
|
|||
|
||||
<q-card-section class="q-pa-none scroll" style="max-height: 75vh">
|
||||
<div class="col-12 row">
|
||||
<div class="bg-grey-1 q-pa-md col-3 row lineRight">
|
||||
<div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
|
||||
<div class="col-12 fit">
|
||||
<div class="row col-12" v-if="numpage !== 3">
|
||||
<q-checkbox
|
||||
|
|
@ -617,14 +617,14 @@ const title = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9">
|
||||
<div class="col-xs-12 col-md-9">
|
||||
<div class="row q-pa-md q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<span class="text-body2 text-weight-medium"
|
||||
>รายละเอียดตัวชี้วัด</span
|
||||
>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-xs-12 col-6">
|
||||
<q-card bordered class="full-height q-pa-sm">
|
||||
<div class="q-pa-sm q-col-gutter-lg">
|
||||
<div class="col-12 row" v-if="numpage !== 3">
|
||||
|
|
@ -733,7 +733,7 @@ const title = computed(() => {
|
|||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-6 row">
|
||||
<div class="col-xs-12 col-6 row">
|
||||
<div class="row col-12 card-box">
|
||||
<div
|
||||
class="col-12 bg-grey-2 row items-center text-weight-medium"
|
||||
|
|
|
|||
|
|
@ -282,7 +282,7 @@ watch(
|
|||
|
||||
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
|
||||
<div class="row">
|
||||
<div class="bg-grey-1 q-pa-md col-3 row lineRight">
|
||||
<div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
|
||||
<div class="col-12 q-col-gutter-sm fit">
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
|
|
@ -362,13 +362,13 @@ watch(
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9 q-pa-md q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-md-9 q-pa-md q-col-gutter-sm">
|
||||
<span class="text-body2 text-weight-medium"
|
||||
>รายละเอียดสมรรถนะ</span
|
||||
>
|
||||
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-5 row">
|
||||
<div class="col-xs-12 col-md-5 row">
|
||||
<q-card bordered class="fit q-pa-sm no-shadow">
|
||||
<div
|
||||
v-for="(field, index) in Object.keys(fieldDetailLabels)"
|
||||
|
|
@ -442,14 +442,13 @@ watch(
|
|||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<q-table
|
||||
<div class="col-xs-12 col-md-7">
|
||||
<d-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:paging="true"
|
||||
row-key="level"
|
||||
class="custom-table2"
|
||||
virtual-scroll
|
||||
:rows="dataListCapacityDetails"
|
||||
hide-pagination
|
||||
|
|
@ -486,6 +485,32 @@ watch(
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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 = 'description')">
|
||||
<span v-html="col.value"></span
|
||||
></q-item-label>
|
||||
|
||||
<q-item-label v-else>{{
|
||||
col.value ?? "-"
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:no-data="{ icon, message }">
|
||||
<div
|
||||
class="q-pa-md text-weight-bold full-width text-center"
|
||||
|
|
@ -493,7 +518,7 @@ watch(
|
|||
<span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
</d-table>
|
||||
|
||||
<!-- <q-card bordered class="col-12 no-shadow">
|
||||
<div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
divdiv
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
|
@ -79,7 +78,10 @@ watch(
|
|||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 45%">
|
||||
<q-card
|
||||
class="col-12"
|
||||
:style="!$q.screen.gt.xs ? 'width: 100%' : 'width: 45%'"
|
||||
>
|
||||
<DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@ const splitterModel = ref<number>(12);
|
|||
|
||||
<template>
|
||||
<q-splitter
|
||||
v-if="$q.screen.gt.xs"
|
||||
v-model="splitterModel"
|
||||
:horizontal="!$q.screen.gt.xs"
|
||||
disable
|
||||
v-if="$q.screen.gt.xs"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<q-tabs
|
||||
|
|
@ -89,20 +89,38 @@ const splitterModel = ref<number>(12);
|
|||
</q-splitter>
|
||||
|
||||
<q-list bordered class="rounded-borders" v-else>
|
||||
<q-expansion-item expand-separator label="จัดทำข้อตกลง">
|
||||
<Assessment />
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
label="จัดทำข้อตกลง"
|
||||
@click="store.tabMain = '1'"
|
||||
>
|
||||
<Assessment v-if="store.tabMain === '1'" />
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item expand-separator label="รายงานความก้าวหน้า">
|
||||
<Assessment :type="'evaluator'" />
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
label="รายงานความก้าวหน้า"
|
||||
@click="store.tabMain = '2'"
|
||||
:disable="store.tabOpen < 2"
|
||||
>
|
||||
<Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item expand-separator label="รายงานผลสำเร็จของงาน">
|
||||
<Assessment :type="'commander'" />
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
label="รายงานผลสำเร็จของงาน"
|
||||
@click="store.tabMain = '3'"
|
||||
:disable="store.tabOpen < 3"
|
||||
>
|
||||
<Assessment v-if="store.tabMain === '3'" :type="'commander'" />
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item expand-separator label="ไฟล์เอกสาร">
|
||||
<File />
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
label="ไฟล์เอกสาร"
|
||||
@click="store.tabMain = '5'"
|
||||
>
|
||||
<File v-if="store.tabMain === '5'" />
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@ const isEditStep3 = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<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 no-wrap">
|
||||
<div class="col">
|
||||
|
|
@ -285,7 +285,6 @@ const isEditStep3 = computed(() => {
|
|||
bordered
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[20]"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
|
|
@ -331,31 +330,6 @@ const isEditStep3 = computed(() => {
|
|||
</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-slot:tip-1>
|
||||
<q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-2>
|
||||
<q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-3>
|
||||
<q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-4>
|
||||
<q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-5>
|
||||
<q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
|
||||
</template>
|
||||
</q-rating> -->
|
||||
</div>
|
||||
<div v-else-if="col.name === 'achievement'">
|
||||
{{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
|
||||
|
|
@ -431,6 +405,95 @@ const isEditStep3 = computed(() => {
|
|||
</td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<q-card bordered flat>
|
||||
<div class="row justify-end">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="info"
|
||||
color="info"
|
||||
size="14px"
|
||||
@click="onClickView(props.row.id)"
|
||||
>
|
||||
<q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<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>{{ 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"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onAdd(true, props.row.id)"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="delete"
|
||||
color="red"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onDelete(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -237,7 +237,6 @@ onMounted(() => {
|
|||
:paging="true"
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue