style(placement):layout
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
f258a9fcfe
commit
a65e6645bc
6 changed files with 755 additions and 677 deletions
|
|
@ -260,217 +260,236 @@ watch(
|
|||
<DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-mb-sm" style="padding: 0">
|
||||
<q-select
|
||||
v-model="commandType"
|
||||
dense
|
||||
outlined
|
||||
label="ประเภทคำสั่ง"
|
||||
:options="commandOp"
|
||||
option-label="name"
|
||||
option-value="code"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
style="width: 350px; max-width: auto"
|
||||
@update:model-value="filterSelectOrder"
|
||||
@filter="(inputValue:any,
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm items-end">
|
||||
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
v-model="commandType"
|
||||
dense
|
||||
outlined
|
||||
label="ประเภทคำสั่ง"
|
||||
:options="commandOp"
|
||||
option-label="name"
|
||||
option-value="code"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
@update:model-value="filterSelectOrder"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn
|
||||
) "
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
<q-space />
|
||||
<q-input
|
||||
borderless
|
||||
outlined
|
||||
dense
|
||||
v-model="filter"
|
||||
placeholder="ค้นหา"
|
||||
style="width: 200px; max-width: auto"
|
||||
@keydown.enter.prevent="onSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
<!-- <q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/> -->
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-4"></div>
|
||||
|
||||
<d-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
:visible-columns="visibleColumns"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
:disable="commandType"
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td>
|
||||
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-8 col-md-7 col-lg-7">
|
||||
<q-input
|
||||
borderless
|
||||
outlined
|
||||
dense
|
||||
v-model="filter"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="onSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-4 col-md-5 col-lg-5">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
:visible-columns="visibleColumns"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
:disable="commandType"
|
||||
v-model="props.selected"
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<template v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="col.name === 'fullName'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
<q-item v-ripple style="padding: 0">
|
||||
<q-item-section avatar>
|
||||
<q-avatar size="30px" color="grey-4">
|
||||
<q-img
|
||||
:src="props.row.avatar"
|
||||
class="photo-profile"
|
||||
v-if="props.row.avatar"
|
||||
/>
|
||||
<q-img :src="avatar" class="photo-profile" v-else/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<div class="text-weight-medium">{{ props.row.name }}</div>
|
||||
<div class="text-weight-light">
|
||||
{{ props.row.idCard }}
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'examNumber'">
|
||||
<div class="text-weight-medium">
|
||||
{{
|
||||
props.row.examNumber !== null ? props.row.examNumber : "-"
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'organizationName'">
|
||||
<div
|
||||
v-if="
|
||||
props.row.orgName !== null ||
|
||||
props.row.positionPath !== null
|
||||
"
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
:disable="commandType"
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<div class="col-4">
|
||||
<template v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="col.name === 'fullName'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
<q-item v-ripple style="padding: 0">
|
||||
<q-item-section avatar>
|
||||
<q-avatar size="30px" color="grey-4">
|
||||
<q-img
|
||||
:src="props.row.avatar"
|
||||
class="photo-profile"
|
||||
v-if="props.row.avatar"
|
||||
/>
|
||||
<q-img :src="avatar" class="photo-profile" v-else />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.name }}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{ props.row.idCard }}
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'examNumber'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.root !== null ? props.row.root : "-" }}
|
||||
{{
|
||||
props.row.rootShortName !== null
|
||||
? `(${props.row.rootShortName})`
|
||||
: ""
|
||||
props.row.examNumber !== null
|
||||
? props.row.examNumber
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'organizationName'">
|
||||
<div
|
||||
v-if="
|
||||
props.row.orgName !== null ||
|
||||
props.row.positionPath !== null
|
||||
"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.root !== null ? props.row.root : "-" }}
|
||||
{{
|
||||
props.row.rootShortName !== null
|
||||
? `(${props.row.rootShortName})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{
|
||||
props.row.nodeName !== null
|
||||
? props.row.nodeName
|
||||
: ""
|
||||
}}
|
||||
{{
|
||||
props.row.nodeShortName !== null
|
||||
? `(${props.row.nodeShortName}${props.row.posMasterNo})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'positionCandidate'">
|
||||
<div
|
||||
class="text-weight-medium"
|
||||
v-if="props.row.positionCandidate == null"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="text-weight-medium" v-else>
|
||||
{{ props.row.positionCandidate }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'reportingDate'">
|
||||
<div class="text-weight-medium">
|
||||
{{
|
||||
props.row.nodeName !== null ? props.row.nodeName : ""
|
||||
}}
|
||||
{{
|
||||
props.row.nodeShortName !== null
|
||||
? `(${props.row.nodeShortName}${props.row.posMasterNo})`
|
||||
: ""
|
||||
props.row.reportingDate !== null
|
||||
? dateText(props.row.reportingDate)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else>
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'bmaOfficer'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.bmaOfficer }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'positionCandidate'">
|
||||
<div
|
||||
class="text-weight-medium"
|
||||
v-if="props.row.positionCandidate == null"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="text-weight-medium" v-else>
|
||||
{{ props.row.positionCandidate }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'draft'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.draft }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'reportingDate'">
|
||||
<div class="text-weight-medium">
|
||||
{{
|
||||
props.row.reportingDate !== null
|
||||
? dateText(props.row.reportingDate)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'bmaOfficer'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.bmaOfficer }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'draft'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.draft }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'statusName'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.statusName }}
|
||||
</div>
|
||||
</template>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
<template v-else-if="col.name === 'statusName'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.statusName }}
|
||||
</div>
|
||||
</template>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-none">
|
||||
<AddTablePosition :statCard="getStat" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1447,188 +1447,201 @@ onMounted(async () => {
|
|||
:close="clickCloseSendModal"
|
||||
/>
|
||||
<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="200"
|
||||
v-model="filterlistAdd"
|
||||
placeholder="ค้นหา"
|
||||
style="width: 850px; max-width: auto"
|
||||
@keydown.enter.prevent="onSearchAdd"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumnslist"
|
||||
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>
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm items-end">
|
||||
<div class="col-xs-0 col-sm-0 col-md-4 col-lg-5"></div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-7">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-md-8 col-lg-7">
|
||||
<q-input
|
||||
borderless
|
||||
outlined
|
||||
dense
|
||||
v-model="filterlistAdd"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="onSearchAdd"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:rows="rowsFilter"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
class="custom-header-table"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
:pagination-label="paginationLabel"
|
||||
:visible-columns="visibleColumnslist"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
<div class="col-xs-12 col-md-4 col-lg-5">
|
||||
<q-select
|
||||
v-model="visibleColumnslist"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td>
|
||||
:rows="rowsFilter"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
class="custom-header-table"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
:pagination-label="paginationLabel"
|
||||
:visible-columns="visibleColumnslist"
|
||||
>
|
||||
<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"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<template v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="col.name === 'fullName'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
<q-item v-ripple style="padding: 0">
|
||||
<q-item-section avatar>
|
||||
<q-avatar size="30px" color="grey-4">
|
||||
<q-img
|
||||
:src="props.row.avatar"
|
||||
class="photo-profile"
|
||||
v-if="props.row.avatar"
|
||||
/>
|
||||
<q-img :src="avatar" class="photo-profile" v-else/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<div class="text-weight-medium">{{ props.row.name }}</div>
|
||||
<div class="text-weight-light">
|
||||
{{ props.row.idCard }}
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'examNumber'">
|
||||
<div class="text-weight-medium">
|
||||
{{
|
||||
props.row.examNumber !== null ? props.row.examNumber : "-"
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.name === 'organizationName'">
|
||||
<div
|
||||
v-if="
|
||||
props.row.orgName !== null ||
|
||||
props.row.positionPath !== null
|
||||
"
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<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"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<div class="col-4">
|
||||
<template v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="col.name === 'fullName'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
<q-item v-ripple style="padding: 0">
|
||||
<q-item-section avatar>
|
||||
<q-avatar size="30px" color="grey-4">
|
||||
<q-img
|
||||
:src="props.row.avatar"
|
||||
class="photo-profile"
|
||||
v-if="props.row.avatar"
|
||||
/>
|
||||
<q-img :src="avatar" class="photo-profile" v-else />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.name }}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{ props.row.idCard }}
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'examNumber'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.root !== null ? props.row.root : "-" }}
|
||||
{{
|
||||
props.row.rootShortName !== null
|
||||
? `(${props.row.rootShortName})`
|
||||
: ""
|
||||
props.row.examNumber !== null
|
||||
? props.row.examNumber
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{
|
||||
props.row.nodeName !== null ? props.row.nodeName : ""
|
||||
}}
|
||||
{{
|
||||
props.row.nodeShortName !== null
|
||||
? `(${props.row.nodeShortName}${props.row.posMasterNo})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else>
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'positionCandidate'">
|
||||
<div
|
||||
class="text-weight-medium"
|
||||
v-if="props.row.positionCandidate == null"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="text-weight-medium" v-else>
|
||||
{{ props.row.positionCandidate }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'reportingDate'">
|
||||
<div class="text-weight-medium">
|
||||
{{
|
||||
props.row.reportingDate !== null
|
||||
? dateText(props.row.reportingDate)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'bmaOfficer'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.bmaOfficer }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'draft'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.draft }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'statusName'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.statusName }}
|
||||
</div>
|
||||
</template>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
<template v-else-if="col.name === 'organizationName'">
|
||||
<div
|
||||
v-if="
|
||||
props.row.orgName !== null ||
|
||||
props.row.positionPath !== null
|
||||
"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.root !== null ? props.row.root : "-" }}
|
||||
{{
|
||||
props.row.rootShortName !== null
|
||||
? `(${props.row.rootShortName})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{
|
||||
props.row.nodeName !== null
|
||||
? props.row.nodeName
|
||||
: ""
|
||||
}}
|
||||
{{
|
||||
props.row.nodeShortName !== null
|
||||
? `(${props.row.nodeShortName}${props.row.posMasterNo})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'positionCandidate'">
|
||||
<div
|
||||
class="text-weight-medium"
|
||||
v-if="props.row.positionCandidate == null"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="text-weight-medium" v-else>
|
||||
{{ props.row.positionCandidate }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'reportingDate'">
|
||||
<div class="text-weight-medium">
|
||||
{{
|
||||
props.row.reportingDate !== null
|
||||
? dateText(props.row.reportingDate)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'bmaOfficer'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.bmaOfficer }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'draft'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.draft }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="col.name === 'statusName'">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.statusName }}
|
||||
</div>
|
||||
</template>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions
|
||||
|
|
|
|||
|
|
@ -205,166 +205,187 @@ function filterSelector(val: string, update: Function) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-px-md q-pb-md">
|
||||
<div class="col-12 row q-py-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="bmaOfficer"
|
||||
:options="bmaOfficerOption"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานภาพ"
|
||||
:clearable="bmaOfficer !== ''"
|
||||
style="width: 200px"
|
||||
@update:model-value="onUpdateNewRows"
|
||||
@clear="bmaOfficer = ''"
|
||||
>
|
||||
</q-select>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="positionCandidate"
|
||||
:options="positionCandidateOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ตำแหน่งที่สอบ"
|
||||
style="width: 250px"
|
||||
hide-selected
|
||||
fill-input
|
||||
use-input
|
||||
:clearable="positionCandidate !== ''"
|
||||
@clear="
|
||||
(positionCandidate = ''),
|
||||
(positionCandidateOptions = positionCandidateData || []),
|
||||
onUpdateNewRows()
|
||||
"
|
||||
@update:model-value="onUpdateNewRows"
|
||||
@filter="(inputValue:string,
|
||||
<div class="q-pa-md q-gutter-sm row">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm items-end">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-4">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="bmaOfficer"
|
||||
:options="bmaOfficerOption"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานภาพ"
|
||||
:clearable="bmaOfficer !== ''"
|
||||
@update:model-value="onUpdateNewRows"
|
||||
@clear="bmaOfficer = ''"
|
||||
>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-6">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="positionCandidate"
|
||||
:options="positionCandidateOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ตำแหน่งที่สอบ"
|
||||
hide-selected
|
||||
fill-input
|
||||
use-input
|
||||
:clearable="positionCandidate !== ''"
|
||||
@clear="
|
||||
(positionCandidate = ''),
|
||||
(positionCandidateOptions = positionCandidateData || []),
|
||||
onUpdateNewRows()
|
||||
"
|
||||
@update:model-value="onUpdateNewRows"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn
|
||||
) "
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-account-arrow-right"
|
||||
@click="updateModaladdlist"
|
||||
v-if="displayAdd && checkPermission($route)?.attrIsUpdate"
|
||||
>
|
||||
<q-tooltip>ส่งรายชื่อไปยังหน่วยงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div
|
||||
class="col"
|
||||
v-if="displayAdd && checkPermission($route)?.attrIsUpdate"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-account-arrow-right"
|
||||
@click="updateModaladdlist"
|
||||
>
|
||||
<q-tooltip>ส่งรายชื่อไปยังหน่วยงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
v-if="
|
||||
checkPermission($route)?.attrIsUpdate &&
|
||||
checkPermissionList(['COMMAND']) &&
|
||||
checkPermissionCreate('COMMAND')
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-account-arrow-right"
|
||||
@click="openModalOrder()"
|
||||
>
|
||||
<q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
v-if="
|
||||
checkPermission($route)?.attrIsUpdate &&
|
||||
checkPermissionList(['COMMAND']) &&
|
||||
checkPermissionCreate('COMMAND')
|
||||
"
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-account-arrow-right"
|
||||
@click="openModalOrder()"
|
||||
>
|
||||
<q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="col-xs-0 col-sm-0 col-md-0 col-lg-2"></div>
|
||||
|
||||
<q-space />
|
||||
|
||||
<div class="items-center" style="display: flex">
|
||||
<q-toggle
|
||||
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
|
||||
:model-value="containStatus"
|
||||
color="blue"
|
||||
label="แสดงสถานะบรรจุแล้ว"
|
||||
@update:model-value="updateContain"
|
||||
/>
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
@keydown.enter.prevent="onUpdateNewRows"
|
||||
>
|
||||
<template v-slot:append> </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: 140px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-4 col-md-4">
|
||||
<q-toggle
|
||||
class="toggle-expired-account"
|
||||
:model-value="containStatus"
|
||||
color="blue"
|
||||
label="แสดงสถานะบรรจุแล้ว"
|
||||
@update:model-value="updateContain"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5 col-md-5">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="onUpdateNewRows"
|
||||
>
|
||||
<template v-slot:append> </template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<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
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
ทั้งหมด {{ attrs.rows.length.toLocaleString() }} รายการ
|
||||
<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 auto-width v-if="history == true" />
|
||||
<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 #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
<div class="col-12">
|
||||
<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">
|
||||
ทั้งหมด {{ attrs.rows.length.toLocaleString() }} รายการ
|
||||
<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 auto-width v-if="history == true" />
|
||||
<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 #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -189,40 +189,49 @@ watch(
|
|||
<q-separator />
|
||||
<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="filter"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="onSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
<!-- <q-icon
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-xs items-end">
|
||||
<div class="col-xs-0 col-sm-4 col-md-6 col-lg-8"></div>
|
||||
|
||||
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-7">
|
||||
<q-input
|
||||
borderless
|
||||
outlined
|
||||
dense
|
||||
v-model="filter"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="onSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
<!-- <q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/> -->
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumns2"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns2"
|
||||
option-value="name"
|
||||
style="min-width: 140px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-5">
|
||||
<q-select
|
||||
v-model="visibleColumns2"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns2"
|
||||
option-value="name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
|
|
|
|||
|
|
@ -385,147 +385,163 @@ onMounted(() => {
|
|||
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row col-12">
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="searchYear"
|
||||
label="ปีงบประมาณ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="yearOptionsFn"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="filterYear"
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
@filter="filterFnYear"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="onSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
class="q-ml-sm"
|
||||
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"
|
||||
/>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-xs items-end">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-8 col-md-6">
|
||||
<q-select
|
||||
v-model="searchYear"
|
||||
label="ปีงบประมาณ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="yearOptionsFn"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="filterYear"
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
@filter="filterFnYear"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-0 col-sm-1 col-md-3 col-lg-5"></div>
|
||||
<div class="col-xs-12 col-sm-5 col-md-3 col-lg-4">
|
||||
<div class="row q-col-gutter-xs">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-7">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="onSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-5">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="examTime"
|
||||
label="ครั้งที่"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="examTimeOP2"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-selected
|
||||
fill-input
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="filterFnexamTime"
|
||||
:clearable="examTime !== 'all' && examTime !== 'ทั้งหมด'"
|
||||
@clear="(examTime = 'ทั้งหมด'), searchFilterTable()"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<div class="col-xs-12 col-sm-4 col-md-2">
|
||||
<q-select
|
||||
v-model="examTime"
|
||||
label="ครั้งที่"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="examTimeOP2"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-selected
|
||||
fill-input
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="filterFnexamTime"
|
||||
:clearable="examTime !== 'all' && examTime !== 'ทั้งหมด'"
|
||||
@clear="(examTime = 'ทั้งหมด'), searchFilterTable()"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-3"
|
||||
v-model="examType"
|
||||
label="ประเภทการสอบ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="examTypeOP2"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="filterFnExamtype"
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
:clearable="examType !== 'all' && examType !== 'ทั้งหมด'"
|
||||
@clear="
|
||||
(examTimeOP2 = examTimeOP),
|
||||
(examType = 'ทั้งหมด'),
|
||||
searchFilterTable()
|
||||
"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<div class="col-xs-12 col-sm-4 col-md-3">
|
||||
<q-select
|
||||
v-model="examType"
|
||||
label="ประเภทการสอบ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="examTypeOP2"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="filterFnExamtype"
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
:clearable="examType !== 'all' && examType !== 'ทั้งหมด'"
|
||||
@clear="
|
||||
(examTimeOP2 = examTimeOP),
|
||||
(examType = 'ทั้งหมด'),
|
||||
searchFilterTable()
|
||||
"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<q-toggle
|
||||
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
|
||||
v-model="expiredAccount"
|
||||
color="blue"
|
||||
label="แสดงบัญชีหมดอายุ"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4 col-md-5">
|
||||
<q-toggle
|
||||
class="toggle-expired-account"
|
||||
v-model="expiredAccount"
|
||||
color="blue"
|
||||
label="แสดงบัญชีหมดอายุ"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue