ทะเบียนประวัติ: ปรับCardView
This commit is contained in:
oat_dev
parent
31739639d9
commit
9662fbedd8
4 changed files with 139 additions and 72 deletions
|
|
@ -268,10 +268,10 @@ function closeHistoryDialog() {
|
|||
</template>
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-4 grid-style-transition"
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions align="right">
|
||||
<q-card-actions align="right" class="bg-grey-3">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -293,24 +293,26 @@ function closeHistoryDialog() {
|
|||
</q-card-actions>
|
||||
<q-separator />
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
|
||||
<div
|
||||
:class="`row q-pa-sm`"
|
||||
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
|
||||
v-for="(col, index) in props.cols"
|
||||
:key="col.name"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label
|
||||
caption
|
||||
<div></div>
|
||||
<div class="col label-color">
|
||||
<div>{{ col.label }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="col.name === 'issueDate' || col.name === 'expireDate'"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
</div>
|
||||
|
||||
<q-item-label caption v-else>{{ col.value }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<div v-else>{{ col.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -552,4 +554,12 @@ function closeHistoryDialog() {
|
|||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.bg-color {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: #747474cc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -434,7 +434,7 @@ watch(
|
|||
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions align="right">
|
||||
<q-card-actions align="right" class="bg-grey-3">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -456,28 +456,29 @@ watch(
|
|||
</q-card-actions>
|
||||
<q-separator />
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
|
||||
<div
|
||||
v-for="(col, index) in props.cols"
|
||||
:key="col.name"
|
||||
:style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label
|
||||
caption
|
||||
v-if="
|
||||
col.name === 'startDate' ||
|
||||
col.name === 'endDate' ||
|
||||
col.name === 'graduateDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption v-else>{{ col.value }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-7 label-color">
|
||||
<div>{{ col.label }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
col.name === 'startDate' ||
|
||||
col.name === 'endDate' ||
|
||||
col.name === 'dateOrder'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else>{{ col.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -928,4 +929,12 @@ watch(
|
|||
.borderCard {
|
||||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: #747474cc;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -168,6 +168,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const backgroundColor = "grey-2";
|
||||
const isDate = ref<string>("false");
|
||||
const educationOption = ["ใช่", "ไม่ใช่"];
|
||||
const historyDialog = ref<boolean>(false);
|
||||
|
|
@ -483,32 +484,60 @@ watch(
|
|||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<q-list>
|
||||
<div
|
||||
class="q-pa-md"
|
||||
v-for="(col, index) in props.cols"
|
||||
:key="col.name"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<div>{{ col.label }}</div>
|
||||
<div class="row">
|
||||
<div class="col-3 q-pa-sm label-color">ระดับการศึกษา</div>
|
||||
<div class="col-4 q-pa-sm">{{ props.cols[0].value }}</div>
|
||||
<div class="col-2 q-pa-sm label-color">สถานศึกษา</div>
|
||||
<div class="col-3 q-pa-sm">{{ props.cols[1].value }}</div>
|
||||
<div class="col-12">
|
||||
<div :class="`row bg-color`">
|
||||
<div class="col-3 q-pa-sm label-color">ตั้งแต่</div>
|
||||
<div class="col-4 q-pa-sm">
|
||||
{{ date2Thai(props.cols[2].value) }}
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div
|
||||
v-if="
|
||||
col.name === 'startDate' ||
|
||||
col.name === 'finishDate' ||
|
||||
col.name === 'graduateDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
|
||||
<div v-else>{{ col.value }}</div>
|
||||
<div class="col-2 q-pa-sm label-color">ถึง</div>
|
||||
<div class="col-3 q-pa-sm">
|
||||
{{ date2Thai(props.cols[3].value) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
<div class="col-3 q-pa-sm label-color">วันที่สำเร็จการศึกษา</div>
|
||||
<div class="col-9 q-pa-sm">
|
||||
{{ date2Thai(props.cols[4].value) }}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div :class="`row bg-color`">
|
||||
<div class="col-4 q-pa-sm label-color">
|
||||
เป็นวุฒิการศึกษาในตำแหน่ง
|
||||
</div>
|
||||
<div class="col-3 q-pa-sm">{{ props.cols[5].value }}</div>
|
||||
<div class="col-2 q-pa-sm label-color">วุฒิการศึกษา</div>
|
||||
<div class="col-3 q-pa-sm">{{ props.cols[6].value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 q-pa-sm label-color">สาขาวืชา/ทาง</div>
|
||||
<div class="col-4 q-pa-sm">{{ props.cols[7].value }}</div>
|
||||
<div class="col-2 q-pa-sm label-color">ทุน</div>
|
||||
<div class="col-3 q-pa-sm">{{ props.cols[8].value }}</div>
|
||||
<div class="col-12">
|
||||
<div :class="`row bg-color`">
|
||||
<div class="col-3 q-pa-sm label-color">เกรดเฉลี่ย</div>
|
||||
<div class="col-4 q-pa-sm">{{ props.cols[9].value }}</div>
|
||||
<div class="col-2 q-pa-sm label-color">ประเทศ</div>
|
||||
<div class="col-3 q-pa-sm">{{ props.cols[10].value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 q-pa-sm label-color">ข้อมูลการติดต่อ</div>
|
||||
<div class="col-4 q-pa-sm">{{ props.cols[11].value }}</div>
|
||||
<div class="col-2 q-pa-sm label-color">ระยะเวลา</div>
|
||||
<div class="col-3 q-pa-sm">{{ props.cols[12].value }}</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div :class="`row bg-color`">
|
||||
<div class="col-3 q-pa-sm label-color">ระยะเวลาหลักสูตร</div>
|
||||
<div class="col-4 q-pa-sm">{{ props.cols[13].value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -974,4 +1003,12 @@ watch(
|
|||
.borderCard {
|
||||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: #747474cc;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const rows = [
|
|||
},
|
||||
];
|
||||
const dialog = ref<boolean>(false);
|
||||
|
||||
const backgroundColor = "grey-2";
|
||||
const formFilter = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
|
|
@ -242,10 +242,10 @@ async function onSubmit() {
|
|||
</template>
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions align="right">
|
||||
<q-card-actions align="right" class="bg-grey-3">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -267,16 +267,18 @@ async function onSubmit() {
|
|||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<q-list>
|
||||
<q-item v-for="col in props.cols" :key="col.name">
|
||||
<q-item-section>
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>{{ col.value }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<div class="row">
|
||||
<div class="col q-pa-sm label-color">ด้าน</div>
|
||||
<div class="col q-pa-sm">{{ props.cols[0].value }}</div>
|
||||
<div class="col q-pa-sm label-color">รายละเอียด</div>
|
||||
<div class="col q-pa-sm">{{ props.cols[1].value }}</div>
|
||||
</div>
|
||||
<div :class="`row bg-color`">
|
||||
<div class="col q-pa-sm label-color">หมายเหตุ</div>
|
||||
<div class="col q-pa-sm">{{ props.cols[2].value }}</div>
|
||||
<div class="col q-pa-sm label-color">เอกสารอ้างอิง</div>
|
||||
<div class="col q-pa-sm">{{ props.cols[3].value }}</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -350,6 +352,7 @@ async function onSubmit() {
|
|||
|
||||
<q-dialog v-model="historyDialog" class="dialog" persistent>
|
||||
<q-card style="min-width: 70%" class="bg-white">
|
||||
console.log("🚀 ~ bg-white:", bg-white)
|
||||
<q-form @submit.prevent greedy @validation-success="validateForm">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<dialog-header
|
||||
|
|
@ -427,4 +430,12 @@ async function onSubmit() {
|
|||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.label-color {
|
||||
color: #747474cc;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue