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