ปรับ layout โครงสร้างอัตรากำลัง

This commit is contained in:
Warunee Tamkoo 2024-02-06 15:00:24 +07:00
parent 67d136c2bb
commit cda9e56239
2 changed files with 73 additions and 63 deletions

View file

@ -126,66 +126,12 @@ watch(
<q-separator />
<q-card-section class="q-pt-none bg-grey-2 q-pa-md">
<div class="row">
<q-card
class="col-12 col-sm-3 scroll q-pa-sm"
style="max-height: 70vh"
>
<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="orgTreeName"
:filter="filterTree"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
v-model:selected="selectedTree"
>
<template v-slot:default-header="prop">
<!--แสดงชอแผนก มพวหนา คลกแลวกาง/ Tree-->
<div
class="row items-center q-px-xs q-pt-xs q-gutter-sm"
@click="updateSelected(prop.node.orgLevel)"
>
<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>
</div>
</template>
</q-tree>
</q-card>
<q-card class="col-12 col-sm-9 q-pa-sm">
<div class="row q-col-gutter-md">
<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>
@ -240,6 +186,70 @@ watch(
</template>
</d-table>
</q-card>
<q-card
bordered
class="col-12 col-sm-4 scroll q-pa-sm"
style="max-height: 70vh"
>
<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="orgTreeName"
:filter="filterTree"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
v-model:selected="selectedTree"
>
<template v-slot:default-header="prop">
<!--แสดงชอแผนก มพวหนา คลกแลวกาง/ Tree-->
<div
class="row items-center q-px-xs q-pt-xs q-gutter-sm"
@click="updateSelected(prop.node.orgLevel)"
>
<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>
</div>
</template>
</q-tree>
</q-card>
</div>
</q-card-section>
<q-separator />

View file

@ -150,7 +150,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "positionIsSelected",
align: "left",
label: "มีคนครองหรือไม่",
label: "คนครอง",
sortable: true,
field: "positionIsSelected",
headerStyle: "font-size: 14px",
@ -429,12 +429,12 @@ function updatePagination(newPagination: NewPagination) {
<q-td>
<q-btn
flat
size="12px"
color="grey-8"
size="14px"
color="primary"
round
dense
@click="props.expand = !props.expand"
:icon="props.expand ? 'mdi-menu-up' : 'mdi-menu-down'"
:icon="props.expand ? 'mdi-menu-down' : 'mdi-menu-right'"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">