163 lines
4.4 KiB
Vue
163 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useCommandListStore } from "@/modules/18_command/store/ListStore";
|
|
|
|
import type { ItemTabs } 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";
|
|
|
|
const $q = useQuasar();
|
|
const store = useCommandListStore();
|
|
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
|
|
|
const modalAdd = ref<boolean>(false);
|
|
|
|
const tabsManu = ref<ItemTabs[]>([
|
|
{ label: "แบบร่าง", name: "DRAFT" },
|
|
{ label: "รอผู้มีอำนาจ", name: "PENDING" },
|
|
{ label: "รอออกคำสั่ง", name: "WAITING" },
|
|
{ label: "ออกคำสั่งเสร็จสิ้น", name: "REPORTED" },
|
|
{ label: "ยกเลิก", name: "CANCEL" },
|
|
]);
|
|
|
|
const queryParams = reactive<FormQuery>({
|
|
page: 1,
|
|
pageSize: 10,
|
|
year: new Date().getFullYear(),
|
|
keyword: "",
|
|
});
|
|
|
|
async function fetchListCommand() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.commandList, {
|
|
params: { ...queryParams, status: store.tabsMain },
|
|
})
|
|
.then(async (res: ResListCommand) => {
|
|
const data = await res.data.result;
|
|
store.rows = data.data;
|
|
store.total = data.total;
|
|
store.maxPage = Math.ceil(data.total / queryParams.pageSize);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toptitle text-dark col-12 row items-center">รายการคำสั่ง</div>
|
|
|
|
<!-- toolbar -->
|
|
<q-card>
|
|
<q-toolbar class="q-pa-sm">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="queryParams.year"
|
|
:locale="'th'"
|
|
autoApply
|
|
year-picker
|
|
:enableTimePicker="false"
|
|
@update:model-value="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
|
|
flat
|
|
round
|
|
dense
|
|
icon="add"
|
|
color="primary"
|
|
@click.prevent="modalAdd = true"
|
|
/>
|
|
|
|
<q-space />
|
|
<q-input
|
|
dense
|
|
outlined
|
|
v-model="queryParams.keyword"
|
|
label="ค้นหา"
|
|
clearable
|
|
style="width: 300px"
|
|
>
|
|
<template v-slot:append v-if="!queryParams.keyword">
|
|
<q-icon name="search" /> </template
|
|
></q-input>
|
|
</q-toolbar>
|
|
</q-card>
|
|
|
|
<!-- Tabs -->
|
|
<q-card class="q-mt-sm">
|
|
<q-card-section style="padding: 0px">
|
|
<q-separator />
|
|
<q-tabs
|
|
v-model="store.tabsMain"
|
|
inline-label
|
|
align="justify"
|
|
indicator-color="primary"
|
|
active-color="primary bg-teal-1"
|
|
>
|
|
<q-tab
|
|
v-for="(tab, index) in tabsManu"
|
|
:key="index"
|
|
:name="tab.name"
|
|
:label="tab.label"
|
|
/>
|
|
</q-tabs>
|
|
<q-separator />
|
|
|
|
<q-tab-panels v-model="store.tabsMain" animated>
|
|
<q-tab-panel
|
|
v-for="(panel, index) in tabsManu"
|
|
:key="index"
|
|
:name="panel.name"
|
|
>
|
|
<TableList
|
|
:fetch-list="fetchListCommand"
|
|
v-model:page="queryParams.page"
|
|
v-model:pageSize="queryParams.pageSize"
|
|
/>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<DialogFormCommand v-model:modal="modalAdd" :is-copy="false" />
|
|
</template>
|
|
|
|
<style scoped></style>
|