แก้ กด enter tab 3

This commit is contained in:
setthawutttty 2024-10-21 16:41:13 +07:00
parent 26123c1184
commit 7ee6e5413b

View file

@ -199,149 +199,157 @@ onMounted(() => {
</script>
<template>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12 row items-center">
<q-btn
v-if="!store.readonly"
flat
round
color="primary"
@click="modal = true"
icon="mdi-plus"
>
<q-tooltip>เพมขอม</q-tooltip>
</q-btn>
<q-space />
<div class="items-center" style="display: flex">
<!-- นหาขอความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click.prevent="filter = ''"
/>
</template>
</q-input>
<!-- แสดงคอลมนใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
<q-card flat>
<div class="row items-center q-pt-sm q-mr-sm">
<q-btn
v-if="!store.readonly"
flat
round
color="primary"
@click="modal = true"
icon="mdi-plus"
>
<q-tooltip>เพมขอม</q-tooltip>
</q-btn>
<q-space />
<div class="items-center" style="display: flex">
<!-- นหาขอความใน table -->
<q-input
standout
dense
v-model="filter"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click.prevent="filter = ''"
/>
</div>
</div>
<div class="col-12">
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="!store.readonly"
dense
flat
round
color="red"
@click="onDelete(props.row.id)"
icon="mdi-delete"
</template>
</q-input>
<!-- แสดงคอลมนใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<q-card-section class="q-pa-sm">
<div class="row q-col-gutter-sm">
<div class="col-12">
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name === 'send'">
<q-select
:readonly="store.readonly"
:class="store.classInput(!store.readonly)"
hide-bottom-space
multiple
:outlined="true"
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="!store.readonly"
dense
v-model="props.row.sendCC"
:rules="[
flat
round
color="red"
@click="onDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name === 'send'">
<q-select
:readonly="store.readonly"
:class="store.classInput(!store.readonly)"
hide-bottom-space
multiple
:outlined="true"
dense
v-model="props.row.sendCC"
:rules="[
(val:string) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
(val:string) =>
val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
]"
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
emit-value
map-options
option-label="name"
:options="optionSelect"
option-value="id"
input-debounce="0"
color="primary"
@update:model-value="onCheckChangeData()"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-black">
ไมพบขอมลทนหา
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div v-else class="table_ellipsis2">
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
emit-value
map-options
option-label="name"
:options="optionSelect"
option-value="id"
input-debounce="0"
color="primary"
@update:model-value="onCheckChangeData()"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-black">
ไมพบขอมลทนหา
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div v-else class="table_ellipsis2">
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</div>
</q-card-section>
</q-card-section>
<q-separator />
<q-separator />
<q-card-actions align="right" v-if="!store.readonly">
<q-btn
label="บันทึก"
type="submit"
color="public"
:disable="rows.length === 0"
/>
</q-card-actions>
</q-form>
<q-card-actions align="right" v-if="!store.readonly">
<q-btn
label="บันทึก"
type="submit"
color="public"
:disable="rows.length === 0"
/>
</q-card-actions>
</q-form>
</q-card>
<DialogOrgSelectOneStep
v-model:modal="modal"