ปรับ responesive

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-05-24 16:57:35 +07:00
parent 8628be8fcf
commit 72ca700702
8 changed files with 342 additions and 282 deletions

View file

@ -1,3 +1,4 @@
div
<script setup lang="ts">
import { ref, reactive, defineProps, watch } from "vue";
import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
@ -96,7 +97,7 @@ function validateForm() {
}
}
if (hasError.every((result) => result === true)) {
onSubmit(formData);
onSubmit(formData);
} else {
console.log("ไม่ผ่าน ");
console.log(hasError);
@ -161,7 +162,7 @@ function onSubmit(data: any) {
</script>
<template>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="col-sm-12 col-md-12 col-xs-12">
<form @submit.prevent="validateForm">
<q-card bordered>
<div class="q-pa-md">
@ -184,10 +185,14 @@ function onSubmit(data: any) {
<q-icon name="mdi-information-outline" size="20px" />
คำอทธรณ/องทกขจะยงไมสมบรณ
จนกวาผทธรณ/องทกขจะ มพแบบฟอรมคำรอง จากระบบ
พรอมเอกสารหลกฐานทงหมดนำสงไปรษณให กพค. หรอนำเอกสารทงหมดไปสงดวยตนเองท 14 อาคารศรลทรพย
พรอมเอกสารหลกฐานทงหมดนำสงไปรษณให กพค.
หรอนำเอกสารทงหมดไปสงดวยตนเองท 14 อาคารศรลทรพย
</q-banner>
</div>
<div class="q-gutter-sm" v-else-if="isReadOnly||formData.status === 'NEW'">
<div
class="q-gutter-sm"
v-else-if="isReadOnly || formData.status === 'NEW'"
>
<q-banner
inline-actions
bordered
@ -202,7 +207,7 @@ function onSubmit(data: any) {
</q-banner>
</div>
<div class="row q-gutter-x-sm">
<div class="col-3">
<div class="col-xs-12 col-md-3">
<q-select
:class="inputEdit(isReadOnly)"
:readonly="isReadOnly"
@ -221,22 +226,20 @@ function onSubmit(data: any) {
hide-bottom-space
/>
</div>
<div class="col-3">
<div class="col-3">
<q-input
:class="inputEdit(isReadOnly)"
:readonly="isReadOnly"
ref="titleRef"
:rules="[
(val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
]"
v-model="formData.title"
dense
outlined
label="เรื่องอุทธรณ์/ร้องทุกข์"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-md-3">
<q-input
:class="inputEdit(isReadOnly)"
:readonly="isReadOnly"
ref="titleRef"
:rules="[
(val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
]"
v-model="formData.title"
dense
outlined
label="เรื่องอุทธรณ์/ร้องทุกข์"
hide-bottom-space
/>
</div>
</div>
<div class="row">

View file

@ -14,7 +14,7 @@ import config from "@/app.config";
import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
const total = ref<number>(0)
const total = ref<number>(0);
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
@ -175,7 +175,7 @@ const getData = async () => {
)
)
.then((res: any) => {
total.value = res.data.result.total
total.value = res.data.result.total;
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
let data = res.data.result.data;
dataStore.fetchAppealComplain(data);
@ -280,7 +280,7 @@ onMounted(async () => {
</div>
</div>
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-2">
<div class="col-xs-12 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="formData.year"
@ -316,7 +316,7 @@ onMounted(async () => {
</datepicker>
</div>
<div class="col-2">
<div class="col-xs-12 col-md-2">
<q-select
v-model="formData.type"
label="ประเภท"
@ -330,7 +330,7 @@ onMounted(async () => {
@update:model-value="dataUpdate"
/>
</div>
<div class="col-2">
<div class="col-xs-12 col-md-2">
<q-select
v-model="formData.status"
label="สถานะ"