ปรับ ui หน้า โครงสร้างอัตรากำลัง
This commit is contained in:
Tanyalak
parent
8794346196
commit
47d68933b4
4 changed files with 89 additions and 53 deletions
|
|
@ -183,10 +183,10 @@ watch(
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-12 col-sm-9 q-pa-md">
|
<div class="col-xs-12 col-sm-9 q-pa-md row">
|
||||||
<div class="col-12 row items-center">
|
<div class="col-12 row">
|
||||||
<div
|
<div
|
||||||
class="row col-12 justify-center items-center"
|
class="row col-12 justify-center"
|
||||||
v-if="isLoad"
|
v-if="isLoad"
|
||||||
style="height: 550px"
|
style="height: 550px"
|
||||||
>
|
>
|
||||||
|
|
@ -195,28 +195,30 @@ watch(
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="col-12 row items-center">
|
<div v-else class="col-12 row">
|
||||||
|
<div class="col-12" v-if="nodeId !== ''">
|
||||||
<!-- summary -->
|
<!-- summary -->
|
||||||
<div
|
<q-card
|
||||||
|
bordered
|
||||||
v-if="nodeId"
|
v-if="nodeId"
|
||||||
class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1"
|
class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
|
||||||
>
|
>
|
||||||
<div class="row col q-pa-sm item">
|
<div class="row col q-pa-sm item">
|
||||||
<div class="ellipsis">ตำแหน่งทั้งหมด</div>
|
<div class="ellipsis">ตำแหน่งทั้งหมด</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-badge color="secondary" :label="store.sumPosition.total" />
|
<q-badge color="secondary" :label="store.sumPosition.total" />
|
||||||
</div>
|
</div>
|
||||||
<div class="row col q-pa-sm item bg-grey-1">
|
<div class="row col q-pa-sm item">
|
||||||
<div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
|
<div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-badge color="primary" :label="store.sumPosition.use" />
|
<q-badge color="primary" :label="store.sumPosition.use" />
|
||||||
</div>
|
</div>
|
||||||
<div class="row col q-pa-sm item bg-grey-1">
|
<div class="row col q-pa-sm item">
|
||||||
<div class="ellipsis">ตำแหน่งว่าง</div>
|
<div class="ellipsis">ตำแหน่งว่าง</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-badge color="red" :label="store.sumPosition.vacant" />
|
<q-badge color="red" :label="store.sumPosition.vacant" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</q-card>
|
||||||
|
|
||||||
<TableView
|
<TableView
|
||||||
v-if="nodeId !== ''"
|
v-if="nodeId !== ''"
|
||||||
|
|
@ -230,11 +232,13 @@ watch(
|
||||||
:filterKeyword="filterKeyword"
|
:filterKeyword="filterKeyword"
|
||||||
:fetchDataTree="fetchDataTree"
|
:fetchDataTree="fetchDataTree"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
<q-banner v-else class="q-pa-lg col-12 text-center">
|
<div class="row col-12 items-center" v-else>
|
||||||
<q-icon name="mdi-hand-pointing-left" size="lg" color="primary" />
|
<q-banner class="q-pa-lg col-12 text-center">
|
||||||
<p>กรุณาเลือกโครงสร้าง</p>
|
<q-icon name="mdi-hand-pointing-left" size="lg" color="primary" />
|
||||||
</q-banner>
|
<p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
|
||||||
|
</q-banner>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -304,7 +304,7 @@ onMounted(async () => {});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12 q-py-md q-px-sm">
|
<div class="col-12 q-py-sm q-px-sm">
|
||||||
<div class="q-gutter-sm">
|
<div class="q-gutter-sm">
|
||||||
<div class="row q-col-gutter-sm q-pl-sm">
|
<div class="row q-col-gutter-sm q-pl-sm">
|
||||||
<div class="col-2" v-if="store.typeOrganizational === 'draft'">
|
<div class="col-2" v-if="store.typeOrganizational === 'draft'">
|
||||||
|
|
@ -328,7 +328,6 @@ onMounted(async () => {});
|
||||||
outlined
|
outlined
|
||||||
v-model="filter"
|
v-model="filter"
|
||||||
label="ค้นหา"
|
label="ค้นหา"
|
||||||
class="bg-white"
|
|
||||||
>
|
>
|
||||||
<template v-slot:append>
|
<template v-slot:append>
|
||||||
<q-icon
|
<q-icon
|
||||||
|
|
@ -337,13 +336,14 @@ onMounted(async () => {});
|
||||||
class="cursor-pointer"
|
class="cursor-pointer"
|
||||||
@click="filter = ''"
|
@click="filter = ''"
|
||||||
/>
|
/>
|
||||||
|
<q-icon name="search" color="grey-5" />
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-white tree-container">
|
<div class="bg-white tree-container">
|
||||||
<q-tree
|
<q-tree
|
||||||
class="q-pa-md q-gutter-sm"
|
class="q-pa-sm q-gutter-sm"
|
||||||
dense
|
dense
|
||||||
default-expand-all
|
default-expand-all
|
||||||
selected-color="primary"
|
selected-color="primary"
|
||||||
|
|
@ -368,7 +368,7 @@ onMounted(async () => {});
|
||||||
<div class="text-weight-medium">
|
<div class="text-weight-medium">
|
||||||
{{ prop.node.orgTreeName }}
|
{{ prop.node.orgTreeName }}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-weight-light">
|
<div class="text-weight-light text-grey-8">
|
||||||
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
|
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
|
||||||
{{
|
{{
|
||||||
prop.node.orgTreeShortName == null
|
prop.node.orgTreeShortName == null
|
||||||
|
|
@ -385,8 +385,10 @@ onMounted(async () => {});
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
icon="mdi-dots-vertical"
|
icon="mdi-dots-vertical"
|
||||||
class="q-pa-none q-ml-xs"
|
class="q-ml-xs"
|
||||||
color="grey-13"
|
color="grey-13"
|
||||||
|
size="12px"
|
||||||
|
round
|
||||||
>
|
>
|
||||||
<q-menu>
|
<q-menu>
|
||||||
<q-list
|
<q-list
|
||||||
|
|
@ -423,8 +425,8 @@ onMounted(async () => {});
|
||||||
: null
|
: null
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<q-item-section avatar>
|
<q-item-section avatar style="min-width:20px;">
|
||||||
<q-icon :color="item.color" :name="item.icon" />
|
<q-icon size="17px" :color="item.color" :name="item.icon" />
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<div v-if="prop.node.orgLevel === 0">
|
<div v-if="prop.node.orgLevel === 0">
|
||||||
<q-item-section
|
<q-item-section
|
||||||
|
|
@ -468,6 +470,8 @@ onMounted(async () => {});
|
||||||
icon="mdi-dots-vertical"
|
icon="mdi-dots-vertical"
|
||||||
class="q-pa-none q-ml-xs"
|
class="q-pa-none q-ml-xs"
|
||||||
color="grey-13"
|
color="grey-13"
|
||||||
|
size="12px"
|
||||||
|
round
|
||||||
>
|
>
|
||||||
<q-menu>
|
<q-menu>
|
||||||
<q-list
|
<q-list
|
||||||
|
|
@ -483,8 +487,8 @@ onMounted(async () => {});
|
||||||
onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
|
onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<q-item-section avatar>
|
<q-item-section avatar style="min-width:20px;">
|
||||||
<q-icon :color="item.color" :name="item.icon" />
|
<q-icon size="17px" :color="item.color" :name="item.icon" />
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section>{{ item.label }}</q-item-section>
|
<q-item-section>{{ item.label }}</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
|
@ -532,7 +536,7 @@ onMounted(async () => {});
|
||||||
.tree-container {
|
.tree-container {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
border: 1px solid rgb(210, 210, 210);
|
border: 1px solid #E6E6E7;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -317,7 +317,7 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
flat
|
flat
|
||||||
round
|
round
|
||||||
dense
|
dense
|
||||||
color="positive"
|
color="blue-10"
|
||||||
icon="mdi-cursor-move"
|
icon="mdi-cursor-move"
|
||||||
@click="onClickMovePos('', 'All')"
|
@click="onClickMovePos('', 'All')"
|
||||||
>
|
>
|
||||||
|
|
@ -325,7 +325,7 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-btn flat round dense color="blue-10" icon="save_alt">
|
<q-btn flat round dense color="deep-purple" icon="save_alt">
|
||||||
<q-menu>
|
<q-menu>
|
||||||
<q-list
|
<q-list
|
||||||
dense
|
dense
|
||||||
|
|
@ -361,7 +361,11 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
v-model="reqMaster.keyword"
|
v-model="reqMaster.keyword"
|
||||||
label="ค้นหา"
|
label="ค้นหา"
|
||||||
@keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
|
@keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
|
||||||
/>
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="search" color="grey-5" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
|
|
@ -380,6 +384,7 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
dense
|
dense
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
@update:pagination="updatePagination"
|
@update:pagination="updatePagination"
|
||||||
|
class="tableTb"
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
|
|
@ -394,12 +399,13 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td>
|
<q-td>
|
||||||
<q-btn
|
<q-btn
|
||||||
size="sm"
|
flat
|
||||||
color="primary"
|
size="12px"
|
||||||
|
color="grey-8"
|
||||||
round
|
round
|
||||||
dense
|
dense
|
||||||
@click="props.expand = !props.expand"
|
@click="props.expand = !props.expand"
|
||||||
:icon="props.expand ? 'remove' : 'add'"
|
:icon="props.expand ? 'mdi-menu-up' : 'mdi-menu-down'"
|
||||||
/>
|
/>
|
||||||
</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">
|
||||||
|
|
@ -422,11 +428,12 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
icon="mdi-dots-vertical"
|
icon="mdi-dots-vertical"
|
||||||
class="q-pa-none q-ml-xs"
|
class="q-pa-none q-ml-xs"
|
||||||
color="grey-13"
|
color="grey-13"
|
||||||
|
size="12px"
|
||||||
>
|
>
|
||||||
<q-menu>
|
<q-menu>
|
||||||
<q-list
|
<q-list
|
||||||
dense
|
dense
|
||||||
style="min-width: 200px"
|
style="min-width: 150px"
|
||||||
v-for="(item, index) in stroe.typeOrganizational === 'draft'
|
v-for="(item, index) in stroe.typeOrganizational === 'draft'
|
||||||
? listMenu
|
? listMenu
|
||||||
: listMenu.filter(
|
: listMenu.filter(
|
||||||
|
|
@ -451,10 +458,12 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
: null
|
: null
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<q-item-section avatar>
|
<q-item-section>
|
||||||
<q-icon :color="item.color" :name="item.icon" />
|
<div class="row items-center">
|
||||||
|
<q-icon :color="item.color" size="17px" :name="item.icon" />
|
||||||
|
<div class="q-pl-md">{{ item.label }}</div>
|
||||||
|
</div>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section>{{ item.label }}</q-item-section>
|
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-menu>
|
</q-menu>
|
||||||
|
|
@ -463,25 +472,28 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
</q-tr>
|
</q-tr>
|
||||||
|
|
||||||
<q-tr v-show="props.expand" :props="props">
|
<q-tr v-show="props.expand" :props="props">
|
||||||
<q-td colspan="100%">
|
<q-td colspan="100%" class="bg-grey-1">
|
||||||
<div class="text-left q-pa-md">
|
<q-card flat bordered class="text-left q-ma-sm">
|
||||||
<q-table
|
<q-table
|
||||||
flat
|
flat
|
||||||
:columns="columnsExpand"
|
:columns="columnsExpand"
|
||||||
:rows="props.row.positions"
|
:rows="props.row.positions"
|
||||||
|
table-class="text-grey-9"
|
||||||
row-key="id"
|
row-key="id"
|
||||||
dense
|
dense
|
||||||
hide-bottom
|
hide-bottom
|
||||||
|
bordered
|
||||||
|
separator="vertical"
|
||||||
class="custom-header-table-expand"
|
class="custom-header-table-expand"
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props" class=" bg-grey-2">
|
||||||
<q-th
|
<q-th
|
||||||
v-for="col in props.cols"
|
v-for="col in props.cols"
|
||||||
:key="col.name"
|
:key="col.name"
|
||||||
:props="props"
|
:props="props"
|
||||||
>
|
>
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<span class="q-px-sm text-body2 text-black">{{ col.label }}</span>
|
||||||
</q-th>
|
</q-th>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -491,19 +503,20 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
v-for="col in props.cols"
|
v-for="col in props.cols"
|
||||||
:key="col.name"
|
:key="col.name"
|
||||||
:props="props"
|
:props="props"
|
||||||
|
|
||||||
>
|
>
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'" class=" text-body2 ">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else>
|
<div v-else class=" text-body2">
|
||||||
{{ col.value }}
|
{{ col.value }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
</q-table>
|
</q-table>
|
||||||
</div>
|
</q-card>
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -584,6 +597,12 @@ function updatePagination(newPagination: NewPagination) {
|
||||||
}
|
}
|
||||||
.q-table thead tr:first-child th {
|
.q-table thead tr:first-child th {
|
||||||
top: 0;
|
top: 0;
|
||||||
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.q-table th:last-child, .q-table td:last-child{
|
||||||
|
padding: 0px !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -133,19 +133,21 @@ onMounted(async () => {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="row">
|
<div class="row items-center">
|
||||||
<div class="toptitle text-dark row items-center">โครงสร้างอัตรากำลัง</div>
|
<div class="toptitle text-dark row items-center q-py-xs">โครงสร้างอัตรากำลัง</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
|
|
||||||
<div class="toptitle row" v-if="store.typeOrganizational === 'draft'">
|
<div class="toptitle row items-center" v-if="store.typeOrganizational === 'draft'">
|
||||||
<div
|
<div
|
||||||
v-if="store.isPublic && store.orgPublishDate"
|
v-if="store.isPublic && store.orgPublishDate"
|
||||||
class="q-pt-sm q-pr-sm text-caption"
|
class=" q-pr-md text-caption"
|
||||||
>
|
>
|
||||||
วันที่เผยแพร่
|
วันที่เผยแพร่ :
|
||||||
{{ date2Thai(store.orgPublishDate) }}
|
<strong>{{ date2Thai(store.orgPublishDate) }}</strong>
|
||||||
</div>
|
</div>
|
||||||
<q-btn
|
<q-btn
|
||||||
|
dense
|
||||||
|
class="q-px-md"
|
||||||
color="indigo-9"
|
color="indigo-9"
|
||||||
icon="alarm"
|
icon="alarm"
|
||||||
label="ตั้งเวลาเผยแพร่"
|
label="ตั้งเวลาเผยแพร่"
|
||||||
|
|
@ -194,10 +196,12 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<q-card class="my-card">
|
<q-card class="my-card">
|
||||||
<q-card-section>
|
<q-card-section class="q-pa-sm">
|
||||||
<q-toolbar class="q-gutter-md" style="padding: 0px">
|
<q-toolbar class="q-gutter-md items-center" style="padding: 0px">
|
||||||
<q-btn-group outline>
|
<q-btn-group outline>
|
||||||
<q-btn
|
<q-btn
|
||||||
|
dense
|
||||||
|
class="q-px-md"
|
||||||
:outline="store.typeOrganizational === 'current' ? false : true"
|
:outline="store.typeOrganizational === 'current' ? false : true"
|
||||||
color="blue"
|
color="blue"
|
||||||
label="ปัจจุบัน"
|
label="ปัจจุบัน"
|
||||||
|
|
@ -208,6 +212,8 @@ onMounted(async () => {
|
||||||
:disable="ishasActive"
|
:disable="ishasActive"
|
||||||
/>
|
/>
|
||||||
<q-btn
|
<q-btn
|
||||||
|
dense
|
||||||
|
class="q-px-md"
|
||||||
:outline="store.typeOrganizational === 'draft' ? false : true"
|
:outline="store.typeOrganizational === 'draft' ? false : true"
|
||||||
color="blue"
|
color="blue"
|
||||||
label="แบบร่าง"
|
label="แบบร่าง"
|
||||||
|
|
@ -218,6 +224,8 @@ onMounted(async () => {
|
||||||
:disable="ishasDraft"
|
:disable="ishasDraft"
|
||||||
/>
|
/>
|
||||||
<q-btn-dropdown
|
<q-btn-dropdown
|
||||||
|
dense
|
||||||
|
class="q-px-md"
|
||||||
color="blue"
|
color="blue"
|
||||||
:label="labelHistory"
|
:label="labelHistory"
|
||||||
@click="store.typeOrganizational = 'old'"
|
@click="store.typeOrganizational = 'old'"
|
||||||
|
|
@ -240,7 +248,7 @@ onMounted(async () => {
|
||||||
</q-btn-dropdown>
|
</q-btn-dropdown>
|
||||||
</q-btn-group>
|
</q-btn-group>
|
||||||
|
|
||||||
<q-btn-dropdown color="green" label="เพิ่มโครงสร้าง">
|
<q-btn-dropdown dense unelevated class="q-px-md" color="green-6" label="เพิ่มโครงสร้าง">
|
||||||
<q-list>
|
<q-list>
|
||||||
<q-item
|
<q-item
|
||||||
dense
|
dense
|
||||||
|
|
@ -263,14 +271,15 @@ onMounted(async () => {
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
round
|
dense
|
||||||
:color="store.statusView === 'list' ? 'grey-7' : 'grey-4'"
|
:color="store.statusView === 'list' ? 'grey-7' : 'grey-4'"
|
||||||
icon="list"
|
icon="mdi-file-tree"
|
||||||
@click="store.statusView = 'list'"
|
@click="store.statusView = 'list'"
|
||||||
/>
|
/>
|
||||||
|
<q-separator inset vertical/>
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
round
|
dense
|
||||||
icon="mdi-sitemap"
|
icon="mdi-sitemap"
|
||||||
:color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
|
:color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
|
||||||
@click="store.statusView = 'tree'"
|
@click="store.statusView = 'tree'"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue