Merge branch 'nice' into develop

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-11-29 18:17:04 +07:00
commit 92f545ef8f
7 changed files with 286 additions and 273 deletions

View file

@ -166,7 +166,6 @@ const columns = ref<QTableProps["columns"]>([
*/ */
function filterSelector(val: string, update: Function) { function filterSelector(val: string, update: Function) {
update(() => { update(() => {
commandType.value = val ? "" : commandType.value;
commandOp.value = listCommand.value.filter( commandOp.value = listCommand.value.filter(
(v: any) => v.name.indexOf(val) > -1 (v: any) => v.name.indexOf(val) > -1
); );
@ -200,7 +199,7 @@ async function getList() {
config.API.probationPersonalList() + config.API.probationPersonalList() +
`?status=${commandType.value == "C-PM-11" ? 2 : 3}&page=${ `?status=${commandType.value == "C-PM-11" ? 2 : 3}&page=${
pagination.value.page pagination.value.page
}&pageSize=${pagination.value.rowsPerPage}` }&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}`
) )
.then(async (res) => { .then(async (res) => {
const data = await res.data.result.data; const data = await res.data.result.data;
@ -260,144 +259,150 @@ watch(
<DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" /> <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
<q-separator /> <q-separator />
<q-card-section> <q-card-section>
<div class="row q-mb-sm" style="padding: 0"> <div class="row col-12 q-col-gutter-sm">
<q-select <div class="row col-12 q-col-gutter-sm">
v-model="commandType" <q-select
dense v-model="commandType"
outlined
label="ประเภทคำสั่ง"
:options="commandOp"
option-label="name"
option-value="code"
emit-value
class="inputgreen"
map-options
use-input
style="width: 350px; max-width: auto"
@update:model-value="getList()"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn
) "
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไมอม </q-item-section>
</q-item>
</template></q-select
>
<q-space />
<q-input
borderless
outlined
dense
debounce="300"
v-model="filter"
placeholder="ค้นหา"
style="width: 200px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</div>
<d-table
:columns="columns"
:rows="rows"
:filter="filter"
row-key="personal_id"
:visible-columns="visibleColumns"
selection="single"
v-model:selected="selected"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense dense
:disable="commandType" outlined
v-model="scope.selected" label="ประเภทคำสั่ง"
:options="commandOp"
option-label="name"
option-value="code"
emit-value
map-options
use-input
hide-selected
fill-input
style="width: 620px; max-width: auto"
@update:model-value="(pagination.page = 1), getList()"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn
) "
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template></q-select
>
<q-space />
<q-input
borderless
outlined
dense
debounce="300"
v-model="filter"
placeholder="ค้นหา"
style="width: 200px; max-width: auto"
@keydown.enter="(pagination.page = 1), getList()"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/> />
</template> </div>
<template v-slot:body="props">
<q-tr :props="props"> <div class="col-12">
<q-td> <d-table
:columns="columns"
:rows="rows"
row-key="personal_id"
:visible-columns="visibleColumns"
selection="single"
v-model:selected="selected"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header-selection="scope">
<q-checkbox <q-checkbox
keep-color keep-color
color="primary" color="primary"
dense dense
:disable="commandType" :disable="commandType"
v-model="props.selected" v-model="scope.selected"
/> />
</q-td> </template>
<q-td v-for="col in props.cols" :key="col.name" :props="props"> <template v-slot:body="props">
<div v-if="col.name == 'no'"> <q-tr :props="props">
{{ <q-td>
(pagination.page - 1) * pagination.rowsPerPage + <q-checkbox
props.rowIndex + keep-color
1 color="primary"
}} dense
</div> :disable="commandType"
<div v-else-if="col.name == 'order_number'"> v-model="props.selected"
{{ />
props.row.order_number </q-td>
? props.row.order_number != "xx/2566" <q-td
? props.row.order_number v-for="col in props.cols"
: "-" :key="col.name"
: "-" :props="props"
}} >
</div> <div v-if="col.name == 'no'">
<div v-else-if="col.name == 'probation_status'"> {{
{{ (pagination.page - 1) * pagination.rowsPerPage +
props.row.probation_status props.rowIndex +
? store.statusProbationMain(props.row.probation_status) 1
: "-" }}
}} </div>
</div> <div v-else-if="col.name == 'order_number'">
{{
props.row.order_number
? props.row.order_number != "xx/2566"
? props.row.order_number
: "-"
: "-"
}}
</div>
<div v-else-if="col.name == 'probation_status'">
{{
props.row.probation_status
? store.statusProbationMain(
props.row.probation_status
)
: "-"
}}
</div>
<div v-else> <div v-else>
{{ col.value ? col.value : "-" }} {{ col.value ? col.value : "-" }}
</div> </div>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
<template v-slot:pagination="scope"> <template v-slot:pagination="scope">
งหมด {{ total }} รายการ งหมด {{ total }} รายการ
<q-pagination <q-pagination
v-model="pagination.page" v-model="pagination.page"
active-color="primary" active-color="primary"
color="dark" color="dark"
:max="Number(totalList)" :max="Number(totalList)"
size="sm" size="sm"
boundary-links boundary-links
direction-links direction-links
:max-pages="5" :max-pages="5"
@update:model-value="getList" @update:model-value="getList"
></q-pagination> ></q-pagination>
</template> </template>
</d-table> </d-table>
</div>
</div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-actions align="right"> <q-card-actions align="right">

View file

@ -133,6 +133,7 @@ function convertText(val: string) {
watchEffect(() => { watchEffect(() => {
if (props.modal === true) { if (props.modal === true) {
selected.value = []; selected.value = [];
filterKeyword.value = "";
} }
}); });
</script> </script>
@ -142,95 +143,94 @@ watchEffect(() => {
<q-card style="width: 1200px; max-width: 80vw"> <q-card style="width: 1200px; max-width: 80vw">
<DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" /> <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
<q-separator /> <q-separator />
<q-card-section class="q-pt-none"> <q-card-section>
<div class="row justify-end"> <div class="row col-12 q-col-gutter-sm">
<div class="col-5"> <div class="row col-12">
<q-toolbar style="padding: 0"> <q-space />
<q-input <q-input
borderless borderless
outlined outlined
dense
debounce="300"
:model-value="filterKeyword"
@update:model-value="updateInput"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="Reset"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
:visible-columns="visibleColumns"
selection="single"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense dense
v-model="scope.selected" debounce="300"
placeholder="ค้นหา"
v-model="filterKeyword"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
class="q-ml-sm"
/> />
</template> </div>
<template v-slot:body="props"> <div class="col-12">
<q-tr :props="props" class="cursor-pointer"> <d-table
<q-td> :columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
:visible-columns="visibleColumns"
selection="single"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox <q-checkbox
keep-color keep-color
color="primary" color="primary"
dense dense
v-model="props.selected" v-model="scope.selected"
/> />
</q-td> </template>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? convertText(props.row.status) : "-" }}
</div>
<div v-else> <template v-slot:body="props">
{{ col.value ? col.value : "-" }} <q-tr :props="props" class="cursor-pointer">
</div> <q-td>
</q-td> <q-checkbox
</q-tr> keep-color
</template> color="primary"
</d-table> 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'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name == 'status'">
{{
props.row.status ? convertText(props.row.status) : "-"
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-card-section> </q-card-section>
<q-card-actions align="right" class="bg-white text-teal"> <q-card-actions align="right" class="bg-white text-teal">

View file

@ -434,6 +434,8 @@ watch(
() => modal.value, () => modal.value,
() => { () => {
if (modal.value) { if (modal.value) {
filterKeyword.value = "";
optionsTypeMain.value = optionsType.value; optionsTypeMain.value = optionsType.value;
const optionData = optionsType.value; const optionData = optionsType.value;
const caregiverCount = rows.value.filter( const caregiverCount = rows.value.filter(
@ -611,23 +613,24 @@ onMounted(async () => {
<q-separator /> <q-separator />
<q-card-section> <q-card-section>
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-2">
<q-select
v-model="member"
outlined
dense
label="บทบาท"
:options="optionsTypeMain"
option-value="id"
option-label="value"
map-options
emit-value
@update:model-value="selected = []"
>
</q-select>
</div>
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col-2"> <!-- <div class="col-2"></div> -->
<q-select
v-model="member"
outlined
dense
label="บทบาท"
:options="optionsTypeMain"
option-value="id"
option-label="value"
map-options
emit-value
@update:model-value="selected = []"
>
</q-select>
</div>
<q-checkbox <q-checkbox
keep-color keep-color
v-model="isDirector" v-model="isDirector"
@ -656,16 +659,10 @@ onMounted(async () => {
outlined outlined
debounce="300" debounce="300"
placeholder="ค้นหา" placeholder="ค้นหา"
@keydown.enter.prevent="getPerson()" @keydown.enter.prevent="(pagination.page = 1), getPerson()"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" /> <q-icon name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter()"
/>
</template> </template>
</q-input> </q-input>

View file

@ -158,6 +158,7 @@ onMounted(async () => {
await getData(); await getData();
}); });
</script> </script>
<template> <template>
<q-card flat class="q-pa-sm"> <q-card flat class="q-pa-sm">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
@ -188,13 +189,7 @@ onMounted(async () => {
placeholder="ค้นหา" placeholder="ค้นหา"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" /> <q-icon name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template> </template>
</q-input> </q-input>
@ -209,7 +204,6 @@ onMounted(async () => {
map-options map-options
:options="columns" :options="columns"
option-value="name" option-value="name"
style="min-width: 140px" style="min-width: 140px"
class="col-xs-12 col-sm-3 col-md-2" class="col-xs-12 col-sm-3 col-md-2"
/> />
@ -254,28 +248,26 @@ onMounted(async () => {
</q-btn> </q-btn>
<q-btn <q-btn
v-if=" v-if="
props.row.status == 'PENDING' &&
checkPermission($route)?.attrIsUpdate && checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet checkPermission($route)?.attrIsGet
" "
flat flat
:disable="props.row.status !== 'PENDING'"
:color="props.row.status !== 'PENDING' ? 'grey-5' : 'edit'"
dense dense
round round
color="edit"
icon="edit" icon="edit"
@click="onNextPage(props.row.id, true)" @click="onNextPage(props.row.id, true)"
> >
<q-tooltip>แกไขขอม</q-tooltip> <q-tooltip>แกไขขอม</q-tooltip>
</q-btn> </q-btn>
<q-btn <q-btn
v-if=" v-if="checkPermission($route)?.attrIsDelete"
props.row.status == 'PENDING' && :disable="props.row.status !== 'PENDING'"
checkPermission($route)?.attrIsDelete :color="props.row.status !== 'PENDING' ? 'grey-5' : 'red'"
"
flat flat
dense dense
round round
color="red"
icon="delete" icon="delete"
@click="onDelete(props.row.id)" @click="onDelete(props.row.id)"
> >

View file

@ -144,7 +144,7 @@ const columns = ref<QTableProps["columns"]>([
}, },
{ {
name: "order_number", name: "order_number",
align: "center", align: "left",
label: "เลขที่คําสั่งบรรจุแต่งตั้ง", label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
sortable: true, sortable: true,
field: "order_number", field: "order_number",
@ -244,7 +244,11 @@ async function getpersonalList() {
await http await http
.get( .get(
config.API.probationPersonalList() + config.API.probationPersonalList() +
`?status=${fillter.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filterKeyword.value}` `?status=${!fillter.value ? "" : fillter.value}&page=${
pagination.value.page
}&pageSize=${pagination.value.rowsPerPage}&keyword=${
filterKeyword.value
}`
) )
.then(async (res) => { .then(async (res) => {
const data = await res.data.result.data; const data = await res.data.result.data;
@ -402,11 +406,10 @@ function paginationLabel2(start: string, end: string, total: string) {
* @param val าทนหา * @param val าทนหา
* @param update fn * @param update fn
*/ */
function filterFn(val: string, update: any) { function filterFn(val: string, update: Function) {
if (val == "") { if (val == "") {
update(() => { update(() => {
Opfillter2.value = Opfillter.value; Opfillter2.value = Opfillter.value;
fillter.value = undefined;
}); });
} else { } else {
update(() => { update(() => {
@ -460,6 +463,7 @@ function closeAdd() {
} }
function getSearchMain() { function getSearchMain() {
rows.value = [];
pagination.value.page = 1; pagination.value.page = 1;
getpersonalList(); getpersonalList();
} }
@ -504,7 +508,12 @@ onMounted(async () => {
@update:model-value="getSearchMain()" @update:model-value="getSearchMain()"
@filter="filterFn" @filter="filterFn"
use-input use-input
hide-selected
fill-input
behavior="menu" behavior="menu"
style="width: 400px"
:clearable="fillter !== ''"
@clear="fillter = ''"
> >
<template v-slot:no-option> <template v-slot:no-option>
<q-item> <q-item>
@ -551,18 +560,11 @@ onMounted(async () => {
v-model="filterKeyword" v-model="filterKeyword"
ref="filterRef" ref="filterRef"
outlined outlined
debounce="300"
placeholder="ค้นหา" placeholder="ค้นหา"
@keydown.enter.prevent="getSearchMain()" @keydown.enter.prevent="getSearchMain()"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" /> <q-icon name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template> </template>
</q-input> </q-input>
@ -658,7 +660,7 @@ onMounted(async () => {
}} }}
</div> </div>
<div v-else class="table_ellipsis"> <div v-else class="table_ellipsis2">
{{ col.value ? col.value : "-" }} {{ col.value ? col.value : "-" }}
</div> </div>
</q-td> </q-td>

View file

@ -298,7 +298,7 @@ onMounted(async () => {
class="q-mr-sm" class="q-mr-sm"
@click="router.push(`/probation/`)" @click="router.push(`/probation/`)"
/> />
รายละเอยดงานทไดบมอบหมายของ{{ name }} รายละเอยดงานทไดบมอบหมาย {{ name }}
</div> </div>
<q-card bordered class="row col-12 text-dark"> <q-card bordered class="row col-12 text-dark">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"> <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
@ -401,13 +401,7 @@ onMounted(async () => {
placeholder="ค้นหา" placeholder="ค้นหา"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" /> <q-icon name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template> </template>
</q-input> </q-input>

View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted, computed } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
@ -184,6 +184,28 @@ function resetFilter() {
onMounted(async () => { onMounted(async () => {
await fetchData(); await fetchData();
}); });
const filter = ref("");
const filterAndApply = () => {
const searchText = filter.value.trim().toLowerCase();
if (!searchText) {
rows.value = dataTransfer.value; //
return;
}
rows.value = dataTransfer.value.filter((row: any) => {
return columns.value?.some((col: any) => {
const rawValue = row[col.field];
const formattedValue = col.format
? col.format(rawValue, row) // `format`
: rawValue;
return String(formattedValue).toLowerCase().includes(searchText);
});
});
};
</script> </script>
<template> <template>
@ -208,11 +230,12 @@ onMounted(async () => {
class="col-xs-12 col-sm-3 col-md-2" class="col-xs-12 col-sm-3 col-md-2"
standout standout
dense dense
v-model="filterMain" v-model="filter"
ref="filterRef" ref="filterRef"
outlined outlined
debounce="300" debounce="300"
placeholder="ค้นหา" placeholder="ค้นหา"
@keyup.enter="filterAndApply"
> >
<template v-slot:append> <template v-slot:append>
<q-icon name="search" /> <q-icon name="search" />
@ -242,10 +265,10 @@ onMounted(async () => {
</div> </div>
<div class="col-12 q-pt-sm"> <div class="col-12 q-pt-sm">
<!-- :filter="filterMain" -->
<d-table <d-table
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
:filter="filterMain"
row-key="id" row-key="id"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
> >