hrms-mgt/src/modules/11_discipline/components/4_Order/MainPage.vue

113 lines
3.7 KiB
Vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import type { DataList, DataListRes } from "../../interface/response/order";
import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
import tableOrder from "@/modules/11_discipline/components/4_Order/TableOrder.vue";
const router = useRouter();
const OrderStore = useOrderStore();
const { fetchOrder } = OrderStore; // function จาก stores
const filterTable = ref<string>("");
/** เรียกรายการคำสั่ง จาก API */
async function fetchListOrder() {
const listData: DataListRes[] = [
{
subject: "ทุจริตในหน้าที่",
ordernumber: "1/2556",
dateOrder: new Date("2023-12-01"),
orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
signer: "นางศิรินภา คงน้อย",
statusorder: "เสร็จสิ้นแล้ว",
},
{
subject: "ทุจริตในหน้าที่",
ordernumber: "4/2556",
dateOrder: new Date("2023-12-01"),
orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
signer: "นางศิรินภา คงน้อย",
statusorder: "เสร็จสิ้นแล้ว",
},
{
subject: "ทุจริตในหน้าที่",
ordernumber: "2/2556",
dateOrder: new Date("2023-12-01"),
orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
signer: "นางศิรินภา คงน้อย",
statusorder: "เสร็จสิ้นแล้ว",
},
];
await fetchOrder(listData); // ส่งข้อมูลไปยัง stores
}
/** redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย */
function redirectToPageadd() {
router.push(`/discipline-order/add`);
}
/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(async () => {
await fetchListOrder();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการออกคำสงลงโทษทางว
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
for="buttonAddDisciplineOrder"
flat
size="12px"
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
>
<q-tooltip>เพมรายการออกคำสงลงโทษทางว </q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
for="inputFilterTable"
dense
outlined
v-model="filterTable"
label="ค้นหา"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
for="selectVisibleColumns"
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="OrderStore.columns"
option-value="name"
options-cover
/>
</div>
<div class="col-12">
<tableOrder :filterTable="filterTable" />
</div>
</q-card>
</template>
<style scoped></style>