hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
setthawutttty 2024-02-01 14:32:44 +07:00
commit 5313d78c01
2 changed files with 119 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/modules/02_organizationalNew/components/listView.vue
View file

@ -116,10 +116,16 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
.finally(() => {
setTimeout(() => {
isLoad.value = false;
}, 1500);
}, 500);
});
}
async function filterKeyword() {
reqMaster.page = 1;
action1.value === false &&
fetchDataTable(reqMaster.id, reqMaster.type, false);
}
/**lifecycle Hook*/
onMounted(async () => {
const id =
@ -197,6 +203,7 @@ watch(
v-model:reqMaster="reqMaster"
v-model:totalPage="totalPage"
v-model:posMaster="posMaster"
:filterKeyword="filterKeyword"
/>
<q-banner v-else class="q-pa-lg col-12 text-center">

207
src/modules/02_organizationalNew/components/tableTree.vue
View file

@ -17,6 +17,10 @@ import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosi
/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
const props = defineProps({
filterKeyword: { type: Function, require: true, default: () => {} },
});
const dataSort = ref<Array<any>>([]);
const modalSort = ref<boolean>(false);
const showAllData = ref<boolean>(false);
@ -188,22 +192,6 @@ const columnsExpand = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
]);
const rows = ref<any>([
{
noPosition: "สกง.1",
namePosition: "นักทรัพยากรบุคคล",
typePosition: "ทั่วไป",
levelPositoion: "ชำนาญการ / ?",
isStatus: "ไม่มี",
},
{
noPosition: "สกง.2",
namePosition: "นักทรัพยากรบุคคล",
typePosition: "ทั่วไป",
levelPositoion: "ชำนาญการ / ?",
isStatus: "ไม่มี",
},
]);
const dialogPosition = ref<boolean>(false);
function onClickPosition(type: string) {
@ -281,7 +269,15 @@ function updatePagination(newPagination: NewPagination) {
>
</q-checkbox>
</div>
<div><q-input outlined dense v-model="filter" label="ค้นหา" /></div>
<div>
<q-input
outlined
dense
v-model="reqMaster.keyword"
label="ค้นหา"
@keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
/>
</div>
</div>
</q-toolbar>
</div>
@ -297,9 +293,7 @@ function updatePagination(newPagination: NewPagination) {
bordered
:paging="true"
dense
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:filter="filter"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
@ -376,84 +370,78 @@ function updatePagination(newPagination: NewPagination) {
<q-tr v-show="props.expand" :props="props">
<q-td colspan="100%">
<div class="text-left q-pa-md">
<div class="col-12">
<q-table
:columns="columnsExpand"
:rows="props.row.positions"
row-key="id"
bordered
dense
class="custom-header-table"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width></q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<q-table
flat
:columns="columnsExpand"
:rows="props.row.positions"
row-key="id"
dense
hide-bottom
class="custom-header-table-expand"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<!-- <q-th auto-width></q-th> -->
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td>
<q-btn
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
>
<q-menu>
<q-list
dense
style="min-width: 200px"
v-for="(item, index) in listMenu"
:key="index"
<div v-else>
{{ col.value }}
</div>
</q-td>
<!-- <q-td>
<q-btn
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
>
<q-menu>
<q-list
dense
style="min-width: 200px"
v-for="(item, index) in listMenu"
:key="index"
>
<q-item
clickable
v-close-popup
@click="
item.type === 'VIEWDETIAL'
? onClickViewDetail()
: null
"
>
<q-item
clickable
v-close-popup
@click="
item.type === 'VIEWDETIAL'
? onClickViewDetail()
: null
"
>
<q-item-section avatar>
<q-icon
:color="item.color"
:name="item.icon"
/>
</q-item-section>
<q-item-section>{{
item.label
}}</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
</div>
<q-item-section avatar>
<q-icon :color="item.color" :name="item.icon" />
</q-item-section>
<q-item-section>{{ item.label }}</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td> -->
</q-tr>
</template>
</q-table>
</div>
</q-td>
</q-tr>
@ -485,4 +473,31 @@ function updatePagination(newPagination: NewPagination) {
<DialogSort v-model:sort-position="modalSort"/>
</template>
<style scoped></style>
<style lang="scss" scoped>
.custom-header-table-expand {
height: auto;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: white;
}
.q-table thead tr {
background: white;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>