ปรับ layout โครงสร้างอัตรากำลัง
This commit is contained in:
parent
67d136c2bb
commit
cda9e56239
2 changed files with 73 additions and 63 deletions
|
|
@ -126,66 +126,12 @@ watch(
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
<q-card-section class="q-pt-none bg-grey-2 q-pa-md">
|
<q-card-section class="q-pt-none bg-grey-2 q-pa-md">
|
||||||
<div class="row">
|
<div class="row q-col-gutter-md">
|
||||||
<q-card
|
<q-card bordered class="col-12 col-sm-8 q-pa-sm">
|
||||||
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">
|
|
||||||
<q-toolbar style="padding: 0">
|
<q-toolbar style="padding: 0">
|
||||||
|
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||||
|
>เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
|
||||||
|
>
|
||||||
<q-space />
|
<q-space />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -240,6 +186,70 @@ watch(
|
||||||
</template>
|
</template>
|
||||||
</d-table>
|
</d-table>
|
||||||
</q-card>
|
</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>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
|
||||||
|
|
@ -150,7 +150,7 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "positionIsSelected",
|
name: "positionIsSelected",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "มีคนครองหรือไม่",
|
label: "คนครอง",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "positionIsSelected",
|
field: "positionIsSelected",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
|
|
@ -429,12 +429,12 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
<q-td>
|
<q-td>
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
size="12px"
|
size="14px"
|
||||||
color="grey-8"
|
color="primary"
|
||||||
round
|
round
|
||||||
dense
|
dense
|
||||||
@click="props.expand = !props.expand"
|
@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>
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue