ปรับ layout โครงสร้าง

This commit is contained in:
Warunee Tamkoo 2024-04-19 15:51:40 +07:00
parent 644005a6fe
commit 670f25cb1a
2 changed files with 361 additions and 330 deletions

View file

@ -154,176 +154,192 @@ const pagination = ref({
rowsPerPage: reqMaster.value.pageSize,
});
</script>
<template>
<q-dialog v-model="modal" full-width persistent>
<q-card>
<HeaderDialog :tittle="title" :close="() => (modal = false)" />
<q-separator />
<q-layout
view="lHh lpr lFf"
container
style="height: 90vh"
class="bg-white"
>
<q-header>
<q-toolbar>
<HeaderDialog :tittle="title" :close="() => (modal = false)" />
</q-toolbar>
<q-separator color="grey-4" />
</q-header>
<q-card-section class="q-pt-none bg-grey-2 q-pa-sm">
<div class="row">
<q-card bordered class="col-12 col-sm-8 q-pa-sm">
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกตำแหนงทองการยาย</q-toolbar-title
>
<q-space />
<div>
<q-input outlined dense v-model="filterTable" label="ค้นหา" />
</div>
</q-toolbar>
<d-table
flat
bordered
:rows="rows"
:columns="columns"
row-key="id"
:filter="filterTable"
no-data-label="ไม่มีข้อมูล"
selection="multiple"
v-model:selected="selectedFilter"
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
@update:pagination="updatePagination"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{
(reqMaster.page - 1) * Number(reqMaster.pageSize) +
props.rowIndex +
1
}}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="reqMaster.page"
active-color="primary"
color="dark"
:max="totalPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</q-card>
<q-card
bordered
class="col-12 col-sm-4 scroll q-pa-sm"
style="height: 750px"
>
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกหนวยงาน/วนราชการปลายทาง</q-toolbar-title
>
</q-toolbar>
<q-input
ref="filterRef"
dense
outlined
v-model="filterTree"
label="ค้นหา"
>
<template v-slot:append>
<q-icon
v-if="filterTree !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-tree
class="q-pa-md q-gutter-sm"
dense
default-expand-all
selected-color="primary"
:nodes="nodeTree"
node-key="orgTreeId"
label-key="labelName"
:filter="filterTree"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
>
<template v-slot:default-header="prop">
<!--แสดงชอแผนก มพวหนา คลกแลวกาง/ Tree-->
<q-item
clickable
:active="selectedTree == prop.node.orgTreeId"
@click.stop="updateSelected(prop.node)"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
<q-page-container>
<q-page class="q-pa-md">
<div class="row">
<q-card bordered class="col-12 col-sm-8 q-pa-sm">
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกตำแหนงทองการยาย</q-toolbar-title
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
<div class="text-weight-light">
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</template>
</q-tree>
</q-card>
</div>
</q-card-section>
<q-separator />
<q-space />
<q-card-actions align="right">
<q-btn
unelevated
label="ย้ายตำแหน่ง"
color="public"
@click="onClickMovePos"
class="q-px-md"
:disable="isDisable"
>
<q-tooltip>ายตำแหน</q-tooltip>
</q-btn>
</q-card-actions>
</q-card>
<div>
<q-input outlined dense v-model="filterTable" label="ค้นหา" />
</div>
</q-toolbar>
<d-table
flat
bordered
:rows="rows"
:columns="columns"
row-key="id"
:filter="filterTable"
no-data-label="ไม่มีข้อมูล"
selection="multiple"
v-model:selected="selectedFilter"
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
@update:pagination="updatePagination"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{
(reqMaster.page - 1) * Number(reqMaster.pageSize) +
props.rowIndex +
1
}}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="reqMaster.page"
active-color="primary"
color="dark"
:max="totalPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</q-card>
<q-card
bordered
class="col-12 col-sm-4 scroll q-pa-sm"
style="height: 75vh"
>
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกหนวยงาน/วนราชการปลายทาง</q-toolbar-title
>
</q-toolbar>
<q-input
ref="filterRef"
dense
outlined
v-model="filterTree"
label="ค้นหา"
>
<template v-slot:append>
<q-icon
v-if="filterTree !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-tree
class="q-pa-md q-gutter-sm"
dense
default-expand-all
selected-color="primary"
:nodes="nodeTree"
node-key="orgTreeId"
label-key="labelName"
:filter="filterTree"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
>
<template v-slot:default-header="prop">
<!--แสดงชอแผนก มพวหนา คลกแลวกาง/ Tree-->
<q-item
clickable
:active="selectedTree == prop.node.orgTreeId"
@click.stop="updateSelected(prop.node)"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
<div class="text-weight-light">
{{
prop.node.orgCode == null ? null : prop.node.orgCode
}}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</template>
</q-tree>
</q-card>
</div>
</q-page>
</q-page-container>
<q-footer>
<q-separator color="grey-4" />
<q-toolbar class="fit row wrap justify-end items-start content-start">
<q-btn
unelevated
label="ย้ายตำแหน่ง"
color="public"
@click="onClickMovePos"
class="q-px-md"
:disable="isDisable"
>
<q-tooltip>ายตำแหน</q-tooltip>
</q-btn>
</q-toolbar>
</q-footer>
</q-layout>
</q-dialog>
</template>

View file

@ -153,174 +153,189 @@ watch(
</script>
<template>
<q-dialog v-model="modal" full-width persistent>
<q-card>
<HeaderDialog :tittle="title" :close="() => (modal = false)" />
<q-separator />
<q-layout
view="lHh lpr lFf"
container
style="height: 90vh"
class="bg-white"
>
<q-header>
<q-toolbar>
<HeaderDialog :tittle="title" :close="() => (modal = false)" />
</q-toolbar>
<q-separator color="grey-4" />
</q-header>
<q-card-section class="q-pt-none bg-grey-2 q-pa-sm">
<div class="row">
<q-card bordered class="col-12 col-sm-8 q-pa-sm">
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกตำแหนงทองการยาย</q-toolbar-title
>
<q-space />
<div>
<q-input outlined dense v-model="filterTable" label="ค้นหา" />
</div>
</q-toolbar>
<d-table
flat
bordered
:rows="rows"
:columns="columns"
row-key="id"
:filter="filterTable"
no-data-label="ไม่มีข้อมูล"
selection="multiple"
v-model:selected="selectedFilter"
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
@update:pagination="updatePagination"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{
(reqMaster.page - 1) * Number(reqMaster.pageSize) +
props.rowIndex +
1
}}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="reqMaster.page"
active-color="primary"
color="dark"
:max="totalPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</q-card>
<q-card
bordered
class="col-12 col-sm-4 scroll q-pa-sm"
style="height: 750px"
>
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกหนวยงาน/วนราชการปลายทาง</q-toolbar-title
>
</q-toolbar>
<q-input
ref="filterRef"
dense
outlined
v-model="filterTree"
label="ค้นหา"
>
<template v-slot:append>
<q-icon
v-if="filterTree !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-tree
class="q-pa-md q-gutter-sm"
dense
default-expand-all
selected-color="primary"
:nodes="nodeTree"
node-key="orgTreeId"
label-key="labelName"
:filter="filterTree"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
>
<template v-slot:default-header="prop">
<!--แสดงชอแผนก มพวหนา คลกแลวกาง/ Tree-->
<q-item
clickable
:active="selectedTree == prop.node.orgTreeId"
@click.stop="updateSelected(prop.node)"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
<q-page-container>
<q-page class="q-pa-md">
<div class="row">
<q-card bordered class="col-12 col-sm-8 q-pa-sm">
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกตำแหนงทองการยาย</q-toolbar-title
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
<div class="text-weight-light">
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</template>
</q-tree>
</q-card>
</div>
</q-card-section>
<q-separator />
<q-space />
<q-card-actions align="right">
<q-btn
unelevated
label="ย้ายตำแหน่ง"
color="public"
@click="onClickMovePos"
class="q-px-md"
:disable="isDisable"
>
<q-tooltip>ายตำแหน</q-tooltip>
</q-btn>
</q-card-actions>
</q-card>
<div>
<q-input outlined dense v-model="filterTable" label="ค้นหา" />
</div>
</q-toolbar>
<d-table
flat
bordered
:rows="rows"
:columns="columns"
row-key="id"
:filter="filterTable"
no-data-label="ไม่มีข้อมูล"
selection="multiple"
v-model:selected="selectedFilter"
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
@update:pagination="updatePagination"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{
(reqMaster.page - 1) * Number(reqMaster.pageSize) +
props.rowIndex +
1
}}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="reqMaster.page"
active-color="primary"
color="dark"
:max="totalPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</q-card>
<q-card
bordered
class="col-12 col-sm-4 scroll q-pa-sm"
style="height: 75vh"
>
<q-toolbar style="padding: 0">
<q-toolbar-title class="text-subtitle2 text-bold"
>เลอกหนวยงาน/วนราชการปลายทาง</q-toolbar-title
>
</q-toolbar>
<q-input
ref="filterRef"
dense
outlined
v-model="filterTree"
label="ค้นหา"
>
<template v-slot:append>
<q-icon
v-if="filterTree !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-tree
class="q-pa-md q-gutter-sm"
dense
default-expand-all
selected-color="primary"
:nodes="nodeTree"
node-key="orgTreeId"
label-key="labelName"
:filter="filterTree"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
>
<template v-slot:default-header="prop">
<!--แสดงชอแผนก มพวหนา คลกแลวกาง/ Tree-->
<q-item
clickable
:active="selectedTree == prop.node.orgTreeId"
@click.stop="updateSelected(prop.node)"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
<div class="text-weight-light">
{{
prop.node.orgCode == null ? null : prop.node.orgCode
}}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</template>
</q-tree>
</q-card>
</div>
</q-page>
</q-page-container>
<q-footer>
<q-separator color="grey-4" />
<q-toolbar class="fit row wrap justify-end items-start content-start">
<q-btn
unelevated
label="ย้ายตำแหน่ง"
color="public"
@click="onClickMovePos"
class="q-px-md"
:disable="isDisable"
>
<q-tooltip>ายตำแหน</q-tooltip>
</q-btn>
</q-toolbar>
</q-footer>
</q-layout>
</q-dialog>
</template>