แก้ UI

This commit is contained in:
STW_TTTY\stwtt 2024-06-26 10:56:44 +07:00
parent 9fb037fc80
commit 7cbbc58218
2 changed files with 95 additions and 80 deletions

View file

@ -586,7 +586,7 @@ function onSubmit() {
:key="index"
:name="item"
>
<div class="column q-col-gutter-sm" style="height: 70vh">
<div class="column q-col-gutter-sm" >
<!-- เลอกเลขทตำแหน -->
<div class="col-7">
<q-card
@ -731,7 +731,7 @@ function onSubmit() {
<div class="col-5">
<q-card
bordered
style="height: 100%; border: 1px solid #d6dee1"
style="min-height: 30vh; border: 1px solid #d6dee1"
>
<div
class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
@ -858,6 +858,14 @@ function onSubmit() {
: col.value
}}
</div>
<div
v-else-if="col.name === 'positionArea'"
class="table_ellipsis"
>
{{
props.row.positionArea ? props.row.positionArea:'-'
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}

View file

@ -243,86 +243,93 @@ watch(
props.DataRow ? `${props.DataRow.currentRound} น.` : ""
}}</span>
</div>
<div class="row q-mt-sm justify-between">
<q-select
v-model="formData.round"
label="รอบที่ต้องการเปลี่ยน"
dense
ref="roundRef"
:rules="[(val) => !!val || 'กรุณาเลือกรอบที่ต้องการเปลี่ยน']"
emit-value
map-options
option-label="name"
:options="roundOp"
option-value="id"
lazy-rules
hide-bottom-space
:borderless="true"
outlined
style="width: 23.5rem"
/>
<div class="row q-mt-sm q-col-gutter-sm">
<div class="col-6">
<q-select
v-model="formData.round"
label="รอบที่ต้องการเปลี่ยน"
dense
ref="roundRef"
:rules="[
(val) => !!val || 'กรุณาเลือกรอบที่ต้องการเปลี่ยน',
]"
emit-value
map-options
option-label="name"
:options="roundOp"
option-value="id"
lazy-rules
hide-bottom-space
:borderless="true"
outlined
style="width: 23.5rem"
/>
</div>
<div class="col-6">
<datepicker
menu-class-name="modalfix"
v-model="formData.effectiveDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:min-date="
dataToday
? new Date(dataToday.getTime() + 24 * 60 * 60 * 1000)
: null
"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
for="inputDatereceive"
outlined
hide-bottom-space
ref="effectiveDateRef"
dense
class="datepicker"
:model-value="
formData.effectiveDate != null
? date2Thai(formData.effectiveDate)
: null
"
label="วันที่ให้มีผล"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ให้มีผล'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<datepicker
menu-class-name="modalfix"
v-model="formData.effectiveDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:min-date="
dataToday
? new Date(dataToday.getTime() + 24 * 60 * 60 * 1000)
: null
"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
for="inputDatereceive"
outlined
ref="effectiveDateRef"
dense
style="width: 23.5rem"
class="datepicker"
:model-value="
formData.effectiveDate != null
? date2Thai(formData.effectiveDate)
: null
"
label="วันที่ให้มีผล"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ให้มีผล'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<div class="col-12">
<q-input
outlined
stack-label
ref="resonRef"
v-model="formData.reson"
label="เหตุผล"
hide-bottom-space
type="textarea"
:rules="[(val) => !!val || `กรุณากรอกเหตุผล`]"
></q-input>
</div>
</div>
<q-input
class="col-12 bg-white"
outlined
stack-label
ref="resonRef"
v-model="formData.reson"
label="เหตุผล"
hide-bottom-space
type="textarea"
:rules="[(val) => !!val || `กรุณากรอกเหตุผล`]"
></q-input>
</div>
</q-card-section>
</div>