ออกคำสั่ง === fix filter
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
8ede2c6d09
commit
810115eb41
13 changed files with 227 additions and 2517 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
|
|
@ -13,7 +13,6 @@ import type {
|
|||
DataOption,
|
||||
} from "@/modules/18_command/interface/index/Main";
|
||||
import type { FormQuery } from "@/modules/18_command/interface/request/Main";
|
||||
import type { ResListCommand } from "@/modules/18_command/interface/response/Main";
|
||||
|
||||
import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
|
||||
import TableList from "@/modules/18_command/components/Main/TableMain.vue";
|
||||
|
|
@ -38,7 +37,12 @@ const queryParams = reactive<FormQuery>({
|
|||
keyword: "", //คำค้นหา
|
||||
commandTypeId: "",
|
||||
});
|
||||
const commandOpMain = ref<DataOption[]>([]);
|
||||
const commandOpMain = ref<DataOption[]>([
|
||||
{
|
||||
id: "",
|
||||
name: "ทั้งหมด",
|
||||
},
|
||||
]);
|
||||
const commandOp = ref<DataOption[]>([]);
|
||||
|
||||
const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
|
||||
|
|
@ -47,12 +51,17 @@ const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
|
|||
* ฟังก์ชันดึงข้อมูลรายการคำสั่ง
|
||||
*/
|
||||
async function fetchListCommand() {
|
||||
store.rows = [];
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandList, {
|
||||
params: { ...queryParams, status: store.tabsMain },
|
||||
params: {
|
||||
...queryParams,
|
||||
status: store.tabsMain,
|
||||
keyword: queryParams.keyword.trim(),
|
||||
},
|
||||
})
|
||||
.then(async (res: ResListCommand) => {
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
store.rows = data.data;
|
||||
store.total = data.total;
|
||||
|
|
@ -73,7 +82,6 @@ async function fetchListCommand() {
|
|||
*/
|
||||
function filterSelector(val: string, update: Function) {
|
||||
update(() => {
|
||||
queryParams.commandTypeId = val ? "" : queryParams.commandTypeId;
|
||||
commandOp.value = commandOpMain.value.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
|
|
@ -82,8 +90,10 @@ function filterSelector(val: string, update: Function) {
|
|||
|
||||
onMounted(async () => {
|
||||
const data = await store.fetchCommandType();
|
||||
commandOpMain.value = data ? data : [];
|
||||
commandOp.value = commandOpMain.value;
|
||||
if (data) {
|
||||
commandOpMain.value.push(...data);
|
||||
commandOp.value = commandOpMain.value;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -91,93 +101,120 @@ onMounted(async () => {
|
|||
<div class="toptitle text-dark col-12 row items-center">รายการคำสั่ง</div>
|
||||
|
||||
<!-- toolbar -->
|
||||
<q-card>
|
||||
<q-toolbar class="q-pa-sm q-col-gutter-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="queryParams.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="(queryParams.page = 1), fetchListCommand()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
queryParams.year == null ? null : queryParams.year + 543
|
||||
"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-card class="q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 row">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="queryParams.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="(queryParams.page = 1), fetchListCommand()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
queryParams.year == null ? null : queryParams.year + 543
|
||||
"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-btn
|
||||
v-if="checkPermission($route)?.attrIsCreate"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click.prevent="modalAdd = true"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="checkPermission($route)?.attrIsCreate"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click.prevent="modalAdd = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<q-select
|
||||
clearable
|
||||
@clear="queryParams.page = 1"
|
||||
:class="queryParams.commandTypeId ? 'select_ellipsis3' : ''"
|
||||
v-model="queryParams.commandTypeId"
|
||||
:label="`${'ประเภทคำสั่ง'}`"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="commandOp"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
use-input
|
||||
@update:model-value="(queryParams.page = 1), fetchListCommand()"
|
||||
outlined
|
||||
style="width: 620px"
|
||||
@filter="(inputValue:string,
|
||||
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-input
|
||||
dense
|
||||
outlined
|
||||
v-model="queryParams.keyword"
|
||||
label="ค้นหา"
|
||||
clearable
|
||||
style="width: 300px"
|
||||
@keydown.enter="(queryParams.page = 1), fetchListCommand()"
|
||||
>
|
||||
<template v-slot:append v-if="!queryParams.keyword">
|
||||
<q-icon name="search" /> </template
|
||||
></q-input>
|
||||
</q-toolbar>
|
||||
<div class="col-12 row">
|
||||
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select
|
||||
:clearable="queryParams.commandTypeId !== ''"
|
||||
@clear="
|
||||
(queryParams.page = 1),
|
||||
(queryParams.commandTypeId = ''),
|
||||
(commandOp = commandOpMain)
|
||||
"
|
||||
:class="queryParams.commandTypeId ? 'select_ellipsis3' : ''"
|
||||
v-model="queryParams.commandTypeId"
|
||||
:label="`${'ประเภทคำสั่ง'}`"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="commandOp"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
use-input
|
||||
@update:model-value="(queryParams.page = 1), fetchListCommand()"
|
||||
outlined
|
||||
hide-selected
|
||||
fill-input
|
||||
style="width: 620px"
|
||||
@filter="(inputValue:string,
|
||||
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
|
||||
dense
|
||||
outlined
|
||||
v-model="queryParams.keyword"
|
||||
label="ค้นหา"
|
||||
@keydown.enter="(queryParams.page = 1), fetchListCommand()"
|
||||
>
|
||||
<template v-slot:append> <q-icon name="search" /> </template
|
||||
></q-input>
|
||||
|
||||
<q-select
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
option-value="name"
|
||||
style="min-width: 140px"
|
||||
v-model="store.visibleColumns"
|
||||
:options="store.columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<!-- Tabs -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue