ui ออกคำสั่ง
This commit is contained in:
Thanit Konmek
parent
fb1ab7669a
commit
70fb166d89
10 changed files with 1338 additions and 385 deletions
|
|
@ -1,61 +1,160 @@
|
|||
<template>
|
||||
<div class="q-px-md q-pb-md">
|
||||
<div class="col-12 row q-py-sm" v-if="nornmalData == false">
|
||||
<q-btn size="12px" v-if="!editvisible" flat round :disabled="editvisible"
|
||||
:color="editvisible ? 'grey-7' : 'primary'" @click="clickEdit" icon="mdi-pencil-outline">
|
||||
<q-btn
|
||||
size="12px"
|
||||
v-if="!editvisible"
|
||||
flat
|
||||
round
|
||||
:disabled="editvisible"
|
||||
:color="editvisible ? 'grey-7' : 'primary'"
|
||||
@click="clickEdit"
|
||||
icon="mdi-pencil-outline"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn size="12px" flat round v-if="editvisible" :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'red'"
|
||||
@click="clickCancel" icon="mdi-undo">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
v-if="editvisible"
|
||||
:disabled="!editvisible"
|
||||
:color="!editvisible ? 'grey-7' : 'red'"
|
||||
@click="clickCancel"
|
||||
icon="mdi-undo"
|
||||
>
|
||||
<q-tooltip>ยกเลิก</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="q-px-sm">
|
||||
<q-btn flat round :disabled="editvisible == false" :color="editvisible == false ? 'grey-7' : 'public'"
|
||||
@click="add" icon="mdi-content-save-outline">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
:disabled="editvisible == false"
|
||||
:color="editvisible == false ? 'grey-7' : 'public'"
|
||||
@click="add"
|
||||
icon="mdi-content-save-outline"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<div class="row items-center" style="display: flex" v-if="publicData == false && publicNoBtn == false"></div>
|
||||
<div
|
||||
class="row items-center"
|
||||
style="display: flex"
|
||||
v-if="publicData == false && publicNoBtn == false"
|
||||
></div>
|
||||
|
||||
<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">
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
|
||||
<div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
|
||||
<span class="text-subtitle1">{{ titleText }}</span>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
@click="refresh"
|
||||
icon="mdi-refresh"
|
||||
v-if="props.refreshBtn"
|
||||
>
|
||||
<q-tooltip>อัปเดตข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<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">
|
||||
<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" />
|
||||
<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" />
|
||||
<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" :pagination="initialPagination"
|
||||
:rows-per-page-options="[0]">
|
||||
<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"
|
||||
:pagination="initialPagination"
|
||||
:rows-per-page-options="[0]"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
|
|
@ -132,6 +231,10 @@ const props = defineProps({
|
|||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
refreshBtn: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
add: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
|
|
@ -160,7 +263,13 @@ const props = defineProps({
|
|||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
refresh: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
const refresh = () => props.refresh();
|
||||
const initialPagination = ref<any>({
|
||||
// descending: false,
|
||||
rowsPerPage: props.paging == true ? 25 : 0,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue