hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into dev-tee

Browse source
This commit is contained in:
setthawutttty 2023-09-22 10:06:25 +07:00
commit c42400e57c
10 changed files with 566 additions and 598 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
View file

@ -469,7 +469,7 @@
</div>
<div class="col-12 q-mt-lg" v-if="announcementExam">
<div class="text-bold text-subtitle2 q-pb-md">
เลือกวีธีการชำระเงิน
เลือกวิธีการชำระเงิน
</div>
<div class="row col-12 q-gutter-y-md q-mb-md">
<q-list dense bordered class="col-12 rounded-borders">
@ -479,6 +479,7 @@
val="payment1"
color="blue"
class="q-mr-md"
:disable="fee <= 0"
/>
<q-item-section avatar>
<q-avatar size="28px">
@ -500,6 +501,7 @@
val="payment2"
color="blue"
class="q-mr-md"
:disable="fee <= 0"
/>
<q-item-section avatar>
<q-icon name="mdi-cash" color="positive" size="33px" />
@ -1129,14 +1131,20 @@ const columnsPosition = ref<QTableProps["columns"]>([
},
]);
watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
watch(organizationShortName, (count: any, prevCount: any) => {
organizationNameOptions.value = [];
});
watch(organizationName, (count: DataOption, prevCount: DataOption) => {
watch(organizationName, (count: any, prevCount: any) => {
positionPathOptions.value = [];
});
watch(fee, (count: any, prevCount: any) => {
if (fee.value <= 0) {
pay.value = "";
}
});
onMounted(async () => {
hideLoader();
if (route.params.id != undefined) {

1
src/modules/07_insignia/components/2_Manage/Tab1.vue
View file

@ -830,6 +830,7 @@ const closeModalEdit = () => {
</q-menu>
</q-btn>
</q-td>
<q-td v-else auto-width></q-td>
<q-td
auto-width
v-if="props.row.insigniaSend == 'เหรียญจักรพรรดิมาลา'"

7
src/modules/07_insignia/components/2_Manage/downloadFile.vue
View file

@ -37,7 +37,10 @@ const downloadDocument = async (type: string) => {
})
.then(async (res) => {
if (download) {
downloadFile(res, `ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา.${type}`);
downloadFile(
res,
`ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา.${type}`
);
}
})
.catch((e) => {
@ -91,4 +94,4 @@ const downloadFile = (response: any, filename: string) => {
</q-list>
</q-menu>
</q-btn>
</template>
</template>

41
src/modules/07_insignia/components/5_Borrow/DialogForm.vue
View file

@ -126,18 +126,17 @@ const fetchOrgList = async () => {
id: e.organizationId,
name: e.organizationName,
}));
if (props.action == "editData") {
OrgList.value = [
{
id: "00000000-0000-0000-0000-000000000000",
name: "สำนักนายกรัฐมนตรี",
},
...orgArr,
];
} else {
OrgList.value = orgArr;
}
// if (props.action == "editData") {
// OrgList.value = [
// {
// id: "00000000-0000-0000-0000-000000000000",
// name: "สำนักนายกรัฐมนตรี",
// },
// ...orgArr,
// ];
// } else {
OrgList.value = orgArr;
// }
})
.catch((err) => {
messageError($q, err);
@ -160,7 +159,6 @@ const fetchOrgList = async () => {
// });
// };
// บันทึกข้อมูลการยืม-คืน
const clickSave = async () => {
await myForm.value!.validate().then((result: boolean) => {
@ -236,12 +234,12 @@ const closeDialog = () => {
// reset วันที่ยืม
const clearReceiveDate = () => {
receivedate.value = null;
}
};
// reset วันที่คืน
const clearReturnDate = () => {
returndate.value = null;
}
};
</script>
<template>
@ -279,7 +277,9 @@ const clearReturnDate = () => {
@update:model-value="fecthlistInsignia()"
/>
</div>
<div class="col-12 q-mt-md text-weight-bold text-grey-7">ข้อมูลผู้ยืม</div>
<div class="col-12 q-mt-md text-weight-bold text-grey-7">
ข้อมูลผู้ยืม
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:disable="roundNo == ''"
@ -312,7 +312,11 @@ const clearReturnDate = () => {
borderless
v-model="fullName"
:label="`${'ชื่อ-นามสกุล'}`"
:rules="[(val) => !!val || 'ชื่อ-นามสกุลต้องไม่ว่าง กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง']"
:rules="[
(val) =>
!!val ||
'ชื่อ-นามสกุลต้องไม่ว่าง กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง',
]"
/>
</div>
@ -398,8 +402,7 @@ const clearReturnDate = () => {
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
v-if="props.action === 'editData'"
>
<div class="col-12 text-weight-bold text-grey-7">
<div class="col-12 text-weight-bold text-grey-7">
รายละเอียดการคืนเครื่องราชฯ
</div>
<div class="col-xs-12 col-sm-6">

2
src/modules/07_insignia/storeResult.ts
View file

@ -27,7 +27,7 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
insigniaOp.value = [{ name: "ทั้งหมด", id: "" }]
insigniaOp2.value = []
data.forEach((e: any) => {
insigniaOp.value.push({ name: e.name, id: e.id })
insigniaOp.value.push({ name: e.name, id: e.id, insigniaType: e.insigniaType.id })
});
data.forEach((e: any) => {
insigniaOp2.value.push({ name: e.name, id: e.id })

8
src/modules/07_insignia/views/ResultPage.vue
View file

@ -34,6 +34,7 @@ const profileType = ref<string>("");
const fileResult = ref<any>(null);
const fileinvoice = ref<any>(null);
const loadView = ref<boolean>(false);
const insigniaTypeOption = ref<any>([]);
onMounted(async () => {
await fecthRound();
@ -264,6 +265,11 @@ const columns = ref<QTableProps["columns"]>([
watch(tab, () => {
if (tab.value !== "doc") {
fecthlistInsignia();
console.log(DataStore.insigniaOp);
insigniaTypeOption.value = DataStore.insigniaOp.filter(
(e: any) => e.insigniaType == tab.value || e.name == "ทั้งหมด"
);
}
});
watch(modal, () => {
@ -555,7 +561,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
emit-value
map-options
option-label="name"
:options="DataStore.insigniaOp"
:options="insigniaTypeOption"
option-value="id"
:readonly="false"
:borderless="false"

566
src/modules/10_order/components/Main.vue
View file

@ -1,566 +0,0 @@
<script setup lang="ts">
import { onMounted, reactive, ref, useAttrs, computed } from "vue";
import type { QTableProps } from "quasar";
import type { FormOrderPlacementMainData } from "@/modules/10_order/interface/request/Main";
import type {
DataOption,
DataOption1,
} from "@/modules/10_order/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useOrderPlacementDataStore } from "@/modules/10_order/store";
import router from "@/router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import PopupHistory from "./PopupHistory.vue";
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const DataStore = useOrderPlacementDataStore();
const pagination = ref({
// sortBy: "OrderDate,OrderType",
descending: true,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"Order",
"OrderType",
"OrderNum",
"OrderDate",
"OrderBy",
"Signer",
"OrderStatus",
]);
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "Order",
align: "left",
label: "คำสั่ง",
sortable: true,
field: "Order",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderNum",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "OrderNum",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "OrderType",
align: "left",
label: "ประเภท",
sortable: false,
field: "OrderType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderDate",
align: "left",
label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
sortable: true,
field: "OrderDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a, b) => parseInt(a) - parseInt(b),
},
{
name: "OrderBy",
align: "left",
label: "คำสั่งโดย",
sortable: true,
field: "OrderBy",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "Signer",
align: "left",
label: "ผู้ลงนาม",
sortable: false,
field: "Signer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderStatus",
align: "center",
label: "สถานะคำสั่ง",
sortable: false,
field: "OrderStatus",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "fiscalYear",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "fiscalYear",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<FormOrderPlacementMainData[]>([]);
let OriginalData = ref<FormOrderPlacementMainData[]>([]);
let UpdataData = ref<FormOrderPlacementMainData[]>([]);
onMounted(async () => {
await OriginalDataFetch();
fiscalYearFilter();
searchFilterTable();
OrderStatusFilter();
OrderTypeFilter();
});
const OriginalDataFetch = async () => {
showLoader();
await http
.get(config.API.listOrder())
.then((res: any) => {
rows.value = res.data.result.map((e: any) => ({
orderId: e.orderId,
Order: e.orderName,
OrderNum:
e.orderNo == "" ? "-" : `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
fiscalYear: Number(e.fiscalYear),
OrderDate: date2Thai(e.orderDate),
OrderBy: e.orderBy,
Signer: e.signatoryBy,
OrderStatus: e.orderStatusName,
orderStatusValue: e.orderStatusValue,
OrderType: e.orderTypeName,
orderTypeValue: e.orderTypeValue,
}));
})
.catch((e: any) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
await DataStore.DataMainOrder(rows.value);
OriginalData.value = await DataStore.DataMainOrigOrder;
UpdataData.value = OriginalData.value;
};
// ดูรายการหน้าต่อไป
const redirectToPage = (id?: string, status?: string) => {
let step = 1;
switch (status) {
case "จัดทำร่างคำสั่ง":
step = 1;
break;
case "บัญชีแนบท้าย":
step = 2;
break;
case "เลือกผู้ได้รับสำเนาคำสั่ง":
step = 3;
break;
default:
step = 4;
break;
}
router.push(`/order/detail/${id}?step=${step}`);
};
// const clickDelete = (id: string) => {
// dialogRemove(
// $q,
// () => deleteData(id),
// );
// };
// const deleteData = async (id: string) => {
// showLoader();
// await http
// .delete(config.API.deleteOrder(id))
// .then((res) => {
// success($q, "ลบข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// await OriginalDataFetch();
// fiscalYearFilter();
// searchFilterTable();
// OrderStatusFilter();
// OrderTypeFilter();
// });
// };
const clickAdd = () => {
router.push({ name: "OrderAdd" });
};
// const viewDetail = (id: string, status: string) => {
// if (status == "checkPayment") {
// router.push(`${route.fullPath}/payment/${id}`);
// } else {
// router.push(`${route.fullPath}/profile/${id}`);
// }
// };
// เลือกปีงบประมาณ
const fiscalyear = ref<number | null>(0);
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedfiscalYearValues: number[] = [];
const fiscalYearFilter = async () => {
await http.get(config.API.yearOptionsOrder()).then((res) => {
const response = res.data.result;
fiscalyearOP.push(...response);
});
};
const OrderType = ref<string>("");
const OrderTypeOption = reactive<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
const addedOrderTypeValues: string[] = [];
const OrderTypeFilter = async () => {
await http
.get(config.API.typeOrder())
.then((res) => {
const response = res.data.result;
OrderTypeOption.push(...response);
})
.catch((e) => {
messageError($q, e);
});
};
const OrderStatus = ref<string>("");
const OrderStatusText = ref<FormOrderPlacementMainData[]>(
DataStore.DataMainOrigOrder
);
const OrderStatusOption = reactive<DataOption1[]>([
{ id: "", name: "ทั้งหมด" },
]);
const addedOrderStatusValues: string[] = [];
const OrderStatusFilter = async () => {
for (let data of OriginalData.value) {
const OrderStatusValue = data.OrderStatus;
if (
OrderStatusValue === null ||
parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
) {
OrderStatus.value = OrderStatusValue;
}
if (!addedOrderStatusValues.includes(OrderStatusValue)) {
OrderStatusOption.push({
// id: OrderStatusValue,
id: OrderStatusOption.length.toString(),
name: OrderStatusValue,
});
addedOrderStatusValues.push(OrderStatusValue);
}
}
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const attrs = ref<any>(useAttrs());
const searchFilterTable = async () => {
if (OrderType.value == "ทั้งหมด") {
OrderType.value = "";
}
if (OrderStatus.value == "ทั้งหมด") {
OrderStatus.value = "";
}
await DataStore.DataUpdateOrder(
OrderType.value,
OrderStatus.value,
fiscalyear.value
);
UpdataData.value = DataStore.DataMainUpdateOrder;
};
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</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-"
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">
<div class="col-xs-12 col-sm-3 col-md-4">
<q-select
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"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select
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-space />
<div><PopupHistory :OrderTypeOption="OrderTypeOption" /></div>
</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;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

4
src/modules/10_order/components/step/step04.vue
View file

@ -562,7 +562,7 @@ const viewFileUpload = async (url: string) => {
@click="viewFileUpload(OrderPDFUpload)">
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
<q-btn type="a" :href="OrderPDFUpload" download="คำสั่ง.pdf" size="12px" flat dense color="red" icon="mdi-download"
target="_blank">
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
</q-btn>
@ -590,7 +590,7 @@ const viewFileUpload = async (url: string) => {
@click="viewFileUpload(TailerPDFUpload)">
<q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
<q-btn type="a" :href="TailerPDFUpload" download="เอกสารแนบท้าย.pdf" size="12px" flat dense color="red" icon="mdi-download"
target="_blank">
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
</q-btn>

2
src/modules/10_order/router.ts
View file

@ -1,4 +1,4 @@
const MainOrder = () => import("@/modules/10_order/components/Main.vue");
const MainOrder = () => import("@/modules/10_order/views/Main.vue");
const DetailPage = () => import("@/modules/10_order/components/Detail.vue");
export default [

519
src/modules/10_order/views/Main.vue
View file

@ -1,7 +1,520 @@
<script setup lang="ts">
import { onMounted, reactive, ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import type { FormOrderPlacementMainData } from "@/modules/10_order/interface/request/Main";
import type {
DataOption,
DataOption1,
} from "@/modules/10_order/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useOrderPlacementDataStore } from "@/modules/10_order/store";
import router from "@/router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import PopupHistory from "@/modules/10_order/components/PopupHistory.vue";
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const DataStore = useOrderPlacementDataStore();
const pagination = ref({
descending: true,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"Order",
"OrderNum",
"OrderType",
"OrderDate",
"OrderBy",
"Signer",
"OrderStatus",
]);
// คอลัมน์ของตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "Order",
align: "left",
label: "คำสั่ง",
sortable: true,
field: "Order",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderNum",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "OrderNum",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "OrderType",
align: "left",
label: "ประเภท",
sortable: false,
field: "OrderType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderDate",
align: "left",
label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
sortable: true,
field: "OrderDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a, b) => parseInt(a) - parseInt(b),
},
{
name: "OrderBy",
align: "left",
label: "คำสั่งโดย",
sortable: true,
field: "OrderBy",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "Signer",
align: "left",
label: "ผู้ลงนาม",
sortable: true,
field: "Signer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "OrderStatus",
align: "center",
label: "สถานะคำสั่ง",
sortable: true,
field: "OrderStatus",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
onMounted(async () => {
await OriginalDataFetch();
fiscalYearFilter();
searchFilterTable();
OrderStatusFilter();
OrderTypeFilter();
});
// ข้อมูลตาราง
const rows = ref<FormOrderPlacementMainData[]>([]);
let OriginalData = ref<FormOrderPlacementMainData[]>([]);
let UpdataData = ref<FormOrderPlacementMainData[]>([]);
const OriginalDataFetch = async () => {
showLoader();
await http
.get(config.API.listOrder())
.then((res: any) => {
rows.value = res.data.result.map((e: any) => ({
orderId: e.orderId,
Order: e.orderName,
OrderNum:
e.orderNo == "" ? "-" : `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
fiscalYear: Number(e.fiscalYear),
OrderDate: date2Thai(e.orderDate),
OrderBy: e.orderBy,
Signer: e.signatoryBy,
OrderStatus: e.orderStatusName,
orderStatusValue: e.orderStatusValue,
OrderType: e.orderTypeName,
orderTypeValue: e.orderTypeValue,
}));
})
.catch((e: any) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
await DataStore.DataMainOrder(rows.value);
OriginalData.value = await DataStore.DataMainOrigOrder;
UpdataData.value = OriginalData.value;
};
// redirect ไปยัง step ปัจจุบัน
const redirectToPage = (id?: string, status?: string) => {
let step = 1;
switch (status) {
case "จัดทำร่างคำสั่ง":
step = 1;
break;
case "บัญชีแนบท้าย":
step = 2;
break;
case "เลือกผู้ได้รับสำเนาคำสั่ง":
step = 3;
break;
default:
step = 4;
break;
}
router.push(`/order/detail/${id}?step=${step}`);
};
// สร้างคำสั่งใหม่
const clickAdd = () => {
router.push({ name: "OrderAdd" });
};
// รายการข้อมูลปีงบประมาณ
const fiscalyear = ref<number | null>(0);
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const fiscalYearFilter = async () => {
await http.get(config.API.yearOptionsOrder()).then((res) => {
const response = res.data.result;
fiscalyearOP.push(...response);
});
};
// รายการข้อมูลประเภทคำสั่ง
const OrderType = ref<string>("");
const OrderTypeOption = reactive<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
const OrderTypeFilter = async () => {
await http
.get(config.API.typeOrder())
.then((res) => {
const response = res.data.result;
OrderTypeOption.push(...response);
})
.catch((e) => {
messageError($q, e);
});
};
// รายการข้อมูลสถานะคำสั่ง
const OrderStatus = ref<string>("");
const OrderStatusOption = reactive<DataOption1[]>([
{ id: "", name: "ทั้งหมด" },
]);
const addedOrderStatusValues: string[] = [];
const OrderStatusFilter = async () => {
for (let data of OriginalData.value) {
const OrderStatusValue = data.OrderStatus;
if (
OrderStatusValue === null ||
parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
) {
OrderStatus.value = OrderStatusValue;
}
if (!addedOrderStatusValues.includes(OrderStatusValue)) {
OrderStatusOption.push({
// id: OrderStatusValue,
id: OrderStatusOption.length.toString(),
name: OrderStatusValue,
});
addedOrderStatusValues.push(OrderStatusValue);
}
}
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const attrs = ref<any>(useAttrs());
const searchFilterTable = async () => {
if (OrderType.value == "ทั้งหมด") {
OrderType.value = "";
}
if (OrderStatus.value == "ทั้งหมด") {
OrderStatus.value = "";
}
// ส่งไป filter รายการข้อมูลตามเงื่อนไข
await DataStore.DataUpdateOrder(
OrderType.value,
OrderStatus.value,
fiscalyear.value
);
UpdataData.value = DataStore.DataMainUpdateOrder;
};
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
คำสั่ง
<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-"
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">
<div class="col-xs-12 col-sm-3 col-md-4">
<q-select
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"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select
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-space />
<div><PopupHistory :OrderTypeOption="OrderTypeOption" /></div>
</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>
</template>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>