step 4 ออกคำสั่ง
This commit is contained in:
parent
27340c9ca8
commit
e8a4294ea1
8 changed files with 236 additions and 769 deletions
|
|
@ -1,113 +1,3 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
|
||||
map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
|
||||
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable" />
|
||||
<div>
|
||||
<q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
<!-- <q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item clickable @click="clickAdd">
|
||||
<q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup disable>
|
||||
<q-item-section
|
||||
>ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
|
||||
>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu> -->
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
|
||||
debounce="300" placeholder="ค้นหา">
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
|
||||
</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" options-cover style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
|
||||
map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
|
||||
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable" />
|
||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
|
||||
map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
|
||||
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" flat bordered
|
||||
:paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel" v-model:pagination="pagination">
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer"
|
||||
@click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
|
||||
<q-td key="Order" :props="props">
|
||||
{{ props.row.Order }}
|
||||
</q-td>
|
||||
<q-td key="OrderNum" :props="props">
|
||||
{{ props.row.OrderNum }}
|
||||
</q-td>
|
||||
<q-td key="OrderType" :props="props">
|
||||
{{ props.row.OrderType }}
|
||||
</q-td>
|
||||
<q-td key="OrderDate" :props="props">
|
||||
{{ props.row.OrderDate }}
|
||||
</q-td>
|
||||
<q-td key="OrderBy" :props="props">
|
||||
{{ props.row.OrderBy }}
|
||||
</q-td>
|
||||
<q-td key="Signer" :props="props">
|
||||
{{ props.row.Signer }}
|
||||
</q-td>
|
||||
<q-td key="OrderStatus" :props="props">
|
||||
{{ props.row.OrderStatus }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn dense size="12px" flat round color="red" @click.stop="clickDelete(props.row.orderId)"
|
||||
icon="mdi-delete">
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
|
||||
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, useAttrs, computed } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
|
@ -240,18 +130,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<FormOrderPlacementMainData[]>([
|
||||
// {
|
||||
// Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||
// OrderNum: "1/2565",
|
||||
// fiscalYear: 2565,
|
||||
// OrderDate: "30 พ.ค. 2565",
|
||||
// OrderBy: "สำนักงาน กทม.",
|
||||
// Signer: "นาม สมคิด ยอดใจ ",
|
||||
// OrderStatus: "จัดทำร่างคำสั่ง",
|
||||
// OrderType: "คำสั่งย้าย",
|
||||
// },
|
||||
]);
|
||||
const rows = ref<FormOrderPlacementMainData[]>([]);
|
||||
|
||||
let OriginalData = ref<FormOrderPlacementMainData[]>([]);
|
||||
let UpdataData = ref<FormOrderPlacementMainData[]>([]);
|
||||
|
|
@ -272,7 +151,7 @@ const OriginalDataFetch = async () => {
|
|||
rows.value = res.data.result.map((e: any) => ({
|
||||
orderId: e.orderId,
|
||||
Order: e.orderName,
|
||||
OrderNum: e.orderNo,
|
||||
OrderNum: `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
|
||||
fiscalYear: Number(e.fiscalYear),
|
||||
OrderDate: date2Thai(e.orderDate),
|
||||
OrderBy: e.orderBy,
|
||||
|
|
@ -334,6 +213,10 @@ const deleteData = async (id: string) => {
|
|||
.finally(async () => {
|
||||
hideLoader();
|
||||
await OriginalDataFetch();
|
||||
fiscalYearFilter();
|
||||
searchFilterTable();
|
||||
OrderStatusFilter();
|
||||
OrderTypeFilter();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -358,38 +241,7 @@ const fiscalYearFilter = async () => {
|
|||
// console.log(res);
|
||||
const response = res.data.result;
|
||||
fiscalyearOP.push(...response);
|
||||
// const maxNumber = fiscalyearOP.reduce((max: any, e: any) => {
|
||||
// return e.id > max ? e.id : max;
|
||||
// }, "");
|
||||
// fiscalyear.value = maxNumber;
|
||||
});
|
||||
// API
|
||||
// await http
|
||||
// .get(config.API.// ตัวอย่าง)
|
||||
// .then((res: any) => {
|
||||
// DataStore.DataMainYearSet(rows.value);
|
||||
// fiscalyearOP.value = DataStore.DataMainYearGet;
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// });
|
||||
// for (let data of OriginalData.value) {
|
||||
// console.log(OriginalData.value);
|
||||
|
||||
// const year = data.fiscalYear;
|
||||
// console.log(year);
|
||||
|
||||
// if (fiscalyear.value === null || year > fiscalyear.value) {
|
||||
// fiscalyear.value = year;
|
||||
// }
|
||||
|
||||
// if (!addedfiscalYearValues.includes(year)) {
|
||||
// fiscalyearOP.push({ id: year, name: year.toString() });
|
||||
// addedfiscalYearValues.push(year);
|
||||
// }
|
||||
// }
|
||||
};
|
||||
|
||||
const OrderType = ref<string>("");
|
||||
|
|
@ -406,41 +258,6 @@ const OrderTypeFilter = async () => {
|
|||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
// API
|
||||
// await http
|
||||
// .get(config.API.// ตัวอย่าง)
|
||||
// .then((res: any) => {
|
||||
// DataStore.DataMainYearSet(rows.value);
|
||||
// fiscalyearOP.value = DataStore.DataMainYearGet;
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// });
|
||||
// for (let data of OriginalData.value) {
|
||||
// const OrderTypeValue = data.OrderType;
|
||||
// console.log(OrderTypeValue);
|
||||
|
||||
// if (OrderTypeValue === null || OrderType > OrderTypeValue) {
|
||||
// OrderTypeValue = OrderType;
|
||||
// }
|
||||
// if (!addedOrderTypeValues.includes(OrderTypeValue)) {
|
||||
// OrderTypeOption.push({
|
||||
// // id: OrderTypeValue ?? 0,
|
||||
// id: OrderTypeOption.length,
|
||||
// name: OrderTypeValue,
|
||||
// });
|
||||
// addedOrderTypeValues.push(OrderTypeValue);
|
||||
// }
|
||||
// if (!addedOrderTypeValues.includes(OrderTypeValue)) {
|
||||
// OrderTypeOption.push({
|
||||
// id: OrderTypeValue,
|
||||
// name: OrderTypeValue.toString(),
|
||||
// });
|
||||
// addedOrderTypeValues.push(OrderTypeValue);
|
||||
// }
|
||||
// }
|
||||
};
|
||||
const OrderStatus = ref<string>("");
|
||||
const OrderStatusText = ref<FormOrderPlacementMainData[]>(
|
||||
|
|
@ -451,18 +268,6 @@ const OrderStatusOption = reactive<DataOption1[]>([
|
|||
]);
|
||||
const addedOrderStatusValues: string[] = [];
|
||||
const OrderStatusFilter = async () => {
|
||||
// API
|
||||
// await http
|
||||
// .get(config.API.// ตัวอย่าง)
|
||||
// .then((res: any) => {
|
||||
// DataStore.DataMainYearSet(rows.value);
|
||||
// fiscalyearOP.value = DataStore.DataMainYearGet;
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// });
|
||||
for (let data of OriginalData.value) {
|
||||
const OrderStatusValue = data.OrderStatus;
|
||||
|
||||
|
|
@ -525,6 +330,104 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
|
||||
map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
|
||||
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable" />
|
||||
<div>
|
||||
<q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
|
||||
debounce="300" placeholder="ค้นหา">
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
|
||||
</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" options-cover style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
|
||||
map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
|
||||
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable" />
|
||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
|
||||
map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
|
||||
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" flat bordered
|
||||
:paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel" v-model:pagination="pagination">
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer"
|
||||
@click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
|
||||
<q-td key="Order" :props="props">
|
||||
{{ props.row.Order }}
|
||||
</q-td>
|
||||
<q-td key="OrderNum" :props="props">
|
||||
{{ props.row.OrderNum }}
|
||||
</q-td>
|
||||
<q-td key="OrderType" :props="props">
|
||||
{{ props.row.OrderType }}
|
||||
</q-td>
|
||||
<q-td key="OrderDate" :props="props">
|
||||
{{ props.row.OrderDate }}
|
||||
</q-td>
|
||||
<q-td key="OrderBy" :props="props">
|
||||
{{ props.row.OrderBy }}
|
||||
</q-td>
|
||||
<q-td key="Signer" :props="props">
|
||||
{{ props.row.Signer }}
|
||||
</q-td>
|
||||
<q-td key="OrderStatus" :props="props">
|
||||
{{ props.row.OrderStatus }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn dense size="12px" flat round color="red" @click.stop="clickDelete(props.row.orderId)"
|
||||
icon="mdi-delete">
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
|
||||
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.filter-card {
|
||||
background-color: #f1f1f1b0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue