no message
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
6b80d6804f
commit
9ce455e100
5 changed files with 752 additions and 200 deletions
|
|
@ -1,44 +1,97 @@
|
|||
<template>
|
||||
<div class="q-px-md q-pb-md">
|
||||
<div class="col-12 row q-py-sm">
|
||||
<q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
|
||||
:model-value="containStatus" color="blue" label="แสดงสถานะบรรจุแล้ว" @update:model-value="updateContain" />
|
||||
<q-toggle
|
||||
v-if="roleAdmin === false"
|
||||
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
|
||||
:model-value="containStatus"
|
||||
color="blue"
|
||||
label="แสดงสถานะบรรจุแล้ว"
|
||||
@update:model-value="updateContain"
|
||||
/>
|
||||
<div>
|
||||
<q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="updateModaladdlist" />
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดง table ใน คอลัมน์ -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
|
||||
debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดง table ใน คอลัมน์ -->
|
||||
<q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
|
||||
multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
|
||||
style="min-width: 150px" class="gt-xs q-ml-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" v-model:pagination="pagination">
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber" :max-pages="5" size="sm"
|
||||
boundary-links direction-links></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width v-if="history == true" />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width v-if="history == true" />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -55,6 +108,7 @@ const props = defineProps({
|
|||
inputvisibleFilter: String,
|
||||
editvisible: Boolean,
|
||||
titleText: String,
|
||||
modaladdlist: Boolean,
|
||||
optionsFilter: {
|
||||
type: Array,
|
||||
defualt: [],
|
||||
|
|
@ -134,7 +188,7 @@ const props = defineProps({
|
|||
default: () => console.log("not function"),
|
||||
},
|
||||
containStatus: Boolean,
|
||||
roleAdmin: Boolean
|
||||
roleAdmin: Boolean,
|
||||
});
|
||||
const pagination = ref({
|
||||
sortBy: "number",
|
||||
|
|
@ -158,7 +212,8 @@ const emit = defineEmits([
|
|||
"update:editvisible",
|
||||
"update:titleText",
|
||||
"update:inputvisibleFilter",
|
||||
"update:containfilter"
|
||||
"update:containfilter",
|
||||
"update-modaladdlist",
|
||||
]);
|
||||
|
||||
const updateInput = (value: any) => {
|
||||
|
|
@ -177,6 +232,9 @@ const resetFilter = () => {
|
|||
emit("update:inputfilter", "");
|
||||
filterRef.value.focus();
|
||||
};
|
||||
const updateModaladdlist = () => {
|
||||
emit("update-modaladdlist", true);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue