133 lines
3.9 KiB
Vue
133 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
|
|
import { useCommandListStore } from "@/modules/18_command/store/ListStore";
|
|
|
|
import TableList from "@/modules/18_command/components/Main/TableMain.vue";
|
|
|
|
const store = useCommandListStore();
|
|
|
|
const year = ref<number>(new Date().getFullYear());
|
|
const searchKeyword = ref<string>("");
|
|
|
|
const tabsManu = ref([
|
|
{ label: "แบบร่าง", name: "list_draft" },
|
|
{ label: "รอผู้มีอำนาจ", name: "list_authority" },
|
|
{ label: "รอออกคำสั่ง", name: "list_orders" },
|
|
{ label: "ออกคำสั่งเสร็จสิ้น", name: "list_completed" },
|
|
{ label: "ยกเลิก", name: "list_cancel" },
|
|
]);
|
|
|
|
onMounted(() => {
|
|
store.rows = [
|
|
{
|
|
id: "1",
|
|
caseFault: null,
|
|
faultLevel: null,
|
|
fiscalYear: "2024",
|
|
fullName: "นายพิชัยยุทธ แสงศรี",
|
|
orderBy: "สำนักงานเขตพระนคร",
|
|
orderById: "32c99b86-c390-45d2-b1aa-7af5ba2de788",
|
|
orderByOrganization: "สำนักงานเขตพระนคร",
|
|
orderDate: "2024-08-23T03:09:00",
|
|
orderId: "08dcc321-17f7-43a8-80ef-40f7822a6e46",
|
|
orderName: "คำสั่งแต่งตั้ง",
|
|
orderNo: "23",
|
|
orderStatusName: "ออกคำสั่งแล้ว",
|
|
orderStatusValue: "e0d7c384-642d-4a01-a2e9-b06180ab466d",
|
|
orderTypeName: "คำสั่งแต่งตั้ง",
|
|
orderTypeValue: "3b3c8fcf-7940-4963-ab48-b8e803ed534d",
|
|
refRaw: null,
|
|
result: null,
|
|
signatoryBy: "นายวิษณุ สุวรรณรัตน์",
|
|
signatoryDate: "2024-08-23T03:09:00",
|
|
signatoryPosition: "ผู้อำนวยการ",
|
|
},
|
|
];
|
|
console.log("mounted");
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toptitle text-dark col-12 row items-center">รายการคำสั่ง</div>
|
|
|
|
<!-- toolbar -->
|
|
<q-card>
|
|
<q-toolbar class="q-pa-sm">
|
|
<datepicker
|
|
class="q-mr-sm"
|
|
menu-class-name="modalfix"
|
|
:model-value="year"
|
|
:locale="'th'"
|
|
autoApply
|
|
year-picker
|
|
:enableTimePicker="false"
|
|
clearable
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
borderless
|
|
:model-value="year == null ? null : year + 543"
|
|
:label="`${'ปีงบประมาณ'}`"
|
|
>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
<q-btn flat round dense icon="add" color="primary" />
|
|
|
|
<q-space />
|
|
<q-input
|
|
dense
|
|
outlined
|
|
v-model="searchKeyword"
|
|
label="ค้นหา"
|
|
clearable
|
|
style="width: 300px"
|
|
>
|
|
<template v-slot:append v-if="!searchKeyword">
|
|
<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 />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped></style>
|