ทดลองงาน

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-11-29 18:16:49 +07:00
parent 346397d589
commit e6cff6dece
6 changed files with 260 additions and 270 deletions

View file

@ -133,6 +133,7 @@ function convertText(val: string) {
watchEffect(() => {
if (props.modal === true) {
selected.value = [];
filterKeyword.value = "";
}
});
</script>
@ -142,95 +143,94 @@ watchEffect(() => {
<q-card style="width: 1200px; max-width: 80vw">
<DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
<q-separator />
<q-card-section class="q-pt-none">
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
:model-value="filterKeyword"
@update:model-value="updateInput"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="Reset"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
:visible-columns="visibleColumns"
selection="single"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
<q-card-section>
<div class="row col-12 q-col-gutter-sm">
<div class="row col-12">
<q-space />
<q-input
borderless
outlined
dense
v-model="scope.selected"
debounce="300"
placeholder="ค้นหา"
v-model="filterKeyword"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
class="q-ml-sm"
/>
</template>
</div>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<div class="col-12">
<d-table
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
:visible-columns="visibleColumns"
selection="single"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
v-model="scope.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? convertText(props.row.status) : "-" }}
</div>
</template>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name == 'status'">
{{
props.row.status ? convertText(props.row.status) : "-"
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">