fix layout & validate

This commit is contained in:
Warunee Tamkoo 2025-11-03 17:58:25 +07:00
parent f488767307
commit a91a849fea

View file

@ -235,13 +235,13 @@ watch(modal, async (val) => {
</script> </script>
<template> <template>
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card style="min-width: 60%"> <q-card style="min-width: 70%">
<!-- header --> <!-- header -->
<DialogHeader :tittle="titleName" :close="onCloseDialog" /> <DialogHeader :tittle="titleName" :close="onCloseDialog" />
<q-separator /> <q-separator />
<q-card-section :horizontal="$q.screen.gt.xs" class="row"> <q-card-section :horizontal="$q.screen.gt.xs" class="row">
<q-card-section class="col-5"> <q-card-section class="col-4">
<div class="col-12"> <div class="col-12">
<div class="q-gutter-sm"> <div class="q-gutter-sm">
<div class="row q-col-gutter-sm q-pl-sm"> <div class="row q-col-gutter-sm q-pl-sm">
@ -253,7 +253,7 @@ watch(modal, async (val) => {
</q-input> </q-input>
</div> </div>
</div> </div>
<div class="bg-white tree-container q-pa-xs"> <div class="bg-white tree-container-fixed q-pa-xs">
<q-tree <q-tree
class="q-pa-sm q-gutter-sm" class="q-pa-sm q-gutter-sm"
dense dense
@ -268,12 +268,16 @@ watch(modal, async (val) => {
> >
<template v-slot:default-header="prop"> <template v-slot:default-header="prop">
<q-item <q-item
@click.stop="selectedOrg(prop.node)" @click.stop="
formData.accessType !== 'ALL'
? selectedOrg(prop.node)
: null
"
:active="orgId == prop.node.orgTreeId" :active="orgId == prop.node.orgTreeId"
clickable clickable
active-class="my-list-link text-primary text-weight-medium" active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list" class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
:disable="isAPIKey" :disable="isAPIKey || formData.accessType === 'ALL'"
> >
<div> <div>
<div <div
@ -318,7 +322,7 @@ watch(modal, async (val) => {
<q-separator :vertical="$q.screen.gt.xs" /> <q-separator :vertical="$q.screen.gt.xs" />
<q-card-section class="col"> <q-card-section class="col tree-container-fixed">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<!-- /คำอธบาย --> <!-- /คำอธบาย -->
<div class="col-9" v-if="!isAPIKey"> <div class="col-9" v-if="!isAPIKey">
@ -415,6 +419,13 @@ watch(modal, async (val) => {
border-radius: 10px; border-radius: 10px;
} }
.tree-container-fixed {
overflow: auto;
height: 400px;
border: 1px solid #e6e6e7;
border-radius: 10px;
}
.my-list-link { .my-list-link {
color: rgb(118, 168, 222); color: rgb(118, 168, 222);
border-radius: 5px; border-radius: 5px;