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

ปรับโครงสร้างเมนู, เพิ่มเมนูในทะเบียนประวัติ

Browse source
This commit is contained in:
Warunee Tamkoo 2023-08-10 17:58:18 +07:00
parent 6fbc73300c
commit 054802c8b7
26 changed files with 1337 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

689
src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
View file

@ -1,689 +0,0 @@
<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";
import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
import type {
DataOption,
DataOption1,
} from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
import router from "@/router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, dateText, success } =
mixin;
const DataStore = useOrderPlacementDataStore();
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
// แปลงเวลา ค.ศ ให้เป็น พ.ศ
const textDate = (value: Date) => {
return dateText(value);
};
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: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
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[]>([
// {
// Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
// OrderNum: "1/2565",
// fiscalYear: 2565,
// OrderDate: "30 พ.ค. 2565",
// OrderBy: "สำนักงาน กทม.",
// Signer: "นาม สมคิด ยอดใจ ",
// OrderStatus: "จัดทำร่างคำสั่ง",
// OrderType: "คำสั่งย้าย",
// },
]);
let OriginalData = ref<FormOrderPlacementMainData[]>([]);
let UpdataData = ref<FormOrderPlacementMainData[]>([]);
onMounted(async () => {
await OriginalDataFetch();
fiscalYearFilter();
searchFilterTable();
OrderStatusFilter();
OrderTypeFilter();
});
const OriginalDataFetch = async () => {
await http
.get(config.API.listOrder())
.then((res: any) => {
console.log("list", res);
rows.value = res.data.result.map((e: any) => ({
orderId: e.orderId,
Order: e.orderName,
OrderNum: e.orderNo,
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 () => {
// });
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;
case 'รอผู้มีอำนาจลงนาม':
step = 4;
break;
}
router.push(`/placement/order/detail/${id}?step=${step}`);
};
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
await deleteData(id);
})
.onCancel(() => {})
.onDismiss(() => {});
};
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();
});
};
const clickAdd = () => {
router.push({ name: "Orderplacementadd" });
};
// 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) => {
// 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>("");
const OrderTypeOption = reactive<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
const addedOrderTypeValues: string[] = [];
const OrderTypeFilter = async () => {
await http
.get(config.API.typeOrder())
.then((res) => {
// console.log(res.data);
const response = res.data.result;
OrderTypeOption.push(...response);
})
.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[]>(
DataStore.DataMainOrigOrder
);
const OrderStatusOption = reactive<DataOption1[]>([
{ id: "", name: "ทั้งหมด" },
]);
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;
if (
OrderStatusValue === null ||
parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
) {
OrderStatus.value = OrderStatusValue;
}
if (!addedOrderStatusValues.includes(OrderStatusValue)) {
// console.log(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 = "";
}
console.log(
"Input value changed:",
OrderType.value,
OrderStatus.value,
fiscalyear.value
);
await DataStore.DataUpdateOrder(
OrderType.value,
OrderStatus.value,
fiscalyear.value
);
UpdataData.value = DataStore.DataMainUpdateOrder;
// console.log(UpdataData.value);
};
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>
<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>

173
src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue
View file

@ -1,173 +0,0 @@
<!-- page:detail page รายการสอบทั้งหมด -->
<template>
<q-toolbar class="q-pa-sm text-center">
<q-toolbar-title class="text-dark">
{{ tittle }}
{{ `ครั้งที่${round}/${yearly == null ? "" : yearly + 543}` }}
</q-toolbar-title>
</q-toolbar>
<q-stepper
v-model="step"
ref="stepper"
alternative-labels
header-nav
animated
done-icon="check"
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
>
<q-step
:done="step > 2"
:disable="stepRaw < 2"
:name="2"
title="รายละเอียดการออกคำสั่ง"
:icon="
stepRaw >= 2
? stepRaw == 2
? 'mdi-pencil'
: 'mdi-check-bold'
: 'mdi-account'
"
>
<q-card bordered class="q-pa-lg">
<q-card-actions
v-if="status === 'rejectRegister'"
class="q-pa-md q-mb-md text-left row bg-red-2"
>
<div class="col-12 text-red-12">
<li>{{ rejectMessage }}</li>
</div>
</q-card-actions>
</q-card>
</q-step>
<q-step
:done="step > 3"
:disable="stepRaw < 3"
:name="3"
title="เลือกรายชื่อ"
:icon="
stepRaw >= 3
? stepRaw == 3
? 'mdi-pencil'
: 'mdi-check-bold'
: 'mdi-receipt'
"
v-if="stepPayment"
>
<q-card bordered class="q-pa-lg"> </q-card>
</q-step>
<q-step
:done="step > 4"
:disable="stepRaw < 4"
:name="4"
title="เลือก"
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
>
<q-card bordered class="q-pa-lg"> </q-card>
</q-step>
<q-step
:done="step > 5"
:disable="stepRaw < 5"
:name="5"
title="รายละเอียดคำสั่งและแนบท้าย"
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
>
<q-card bordered class="q-pa-lg"> </q-card>
</q-step>
</q-stepper>
<q-dialog :model-value="modalConsend" persistent>
<q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
<Consendform :ok="consendOk" />
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin();
const { modalError, messageError, showLoader, hideLoader } = mixin;
const step = ref<number>(1);
const stepRaw = ref<number>(1);
const tittle = ref<string>("");
const route = useRoute();
const status = ref<string>("register");
const modalConsend = ref<boolean>(false);
const stepPayment = ref<boolean>(true);
const rejectMessage = ref<string>("");
const round = ref<number | null>(null);
const yearly = ref<number | null>(null);
onMounted(async () => {});
const consenClose = () => {
modalConsend.value = false;
};
const consendOk = () => {
modalConsend.value = false;
};
</script>
<style>
.q-stepper {
box-shadow: none;
background: transparent !important;
}
.q-stepper--horizontal .q-stepper__step-inner {
padding: 0px;
}
.q-stepper__header--alternative-labels .q-stepper__tab {
min-height: 0px;
padding: 1.5% 0% 1.5% 0%;
}
.q-stepper__header--border {
border-bottom: none;
}
.q-stepper__dot {
min-width: 35px;
height: 35px;
width: 35px;
font-size: 20px;
}
.q-stepper__title {
width: 100px;
}
.q-stepper__tab--done .q-stepper__title {
color: #62a00b;
}
.q-stepper__tab--done .q-stepper__dot {
color: #95d710;
border: 1px solid #62a00b;
}
.q-stepper__tab--active .q-stepper__title {
color: #318bae;
}
.q-stepper__tab--active .q-stepper__dot {
color: #1cb4ea;
border: 1px solid #218ab393;
}
.q-stepper__tab--disabled .q-stepper__title {
color: #92b4c8;
}
.q-stepper__tab--disabled .q-stepper__dot {
background: #def2fc !important;
border: 1px solid #92b4c876;
}
.q-stepper__tab--disabled .q-stepper__dot .q-icon {
color: #7692a3d0;
}
.q-stepper--horizontal .q-stepper__line:before,
.q-stepper--horizontal .q-stepper__line:after {
background: #92b4c847;
}
</style>

130
src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
View file

@ -1,130 +0,0 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1), destroyLocalStorage()" />
ออกคำสั่ง
</div>
<q-card flat bordered class="col-12 q-my-sm q-mt-sm">
<q-stepper v-model="step" ref="stepper" color="primary" animated class="step" header-class="bg-grey-1">
<q-step :name="1" title="รายละเอียดการออกคำสั่ง" prefix="1" :done="step > 1" :header-nav="step > 1" />
<q-step :name="2" title="เลือกรายชื่อ" prefix="2" :done="step > 2" :header-nav="step > 2" />
<q-step :name="3" title="เลือกรายชื่อส่งสำเนาคำสั่ง" prefix="3" :done="step > 3" :header-nav="step > 3" />
<q-step :name="4" title="รายละเอียดคำสั่งและแนบท้าย" prefix="4" :done="step > 4" :header-nav="step > 4" />
<template v-slot:message>
<step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
<step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
<step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
<step04 v-if="step === 4" :next="nextStep" :previous="previousStep" />
</template>
</q-stepper>
</q-card>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
import type { QStepper } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const route = useRoute();
const orderId_params = route.params.orderid;
const probationData = useProbationDataStore();
const { stepOrder, setStepOrder } = probationData;
const step01 = defineAsyncComponent(
() =>
import("@/modules/05_placement/components/OrderPlacement/step/step01.vue")
);
const step02 = defineAsyncComponent(
() =>
import("@/modules/05_placement/components/OrderPlacement/step/step02.vue")
);
const step03 = defineAsyncComponent(
() =>
import("@/modules/05_placement/components/OrderPlacement/step/step03.vue")
);
const step04 = defineAsyncComponent(
() =>
import("@/modules/05_placement/components/OrderPlacement/step/step04.vue")
);
const router = useRouter();
const step = ref<number>(0);
const stepper = ref<QStepper>();
const orderId = ref<string>("");
onUnmounted(() => {
destroyLocalStorage();
});
const nextStep = async () => {
stepper.value!.next();
localStorage.setItem("currentStep", step.value.toString());
if (orderId.value) {
await http
.put(config.API.nextStep(orderId.value))
.then((res) => {
console.log(res);
})
.catch((e) => {
console.log(e);
});
}
};
const previousStep = async () => {
stepper.value!.previous();
localStorage.setItem("currentStep", step.value.toString());
if (orderId.value) {
await http
.put(config.API.prevStep(orderId.value))
.then((res) => {
console.log(res);
})
.catch((e) => {
console.log(e);
});
}
};
const destroyLocalStorage = () => {
localStorage.clear();
};
onMounted(() => {
// console.log("route query===>", route.query)
if (route.query.step) {
step.value = Number(route.query.step)
localStorage.setItem("currentStep", step.value.toString());
} else {
const currentStep = localStorage.getItem("currentStep");
if (currentStep) {
step.value = Number(currentStep);
} else {
step.value = 1;
}
}
if (orderId_params !== undefined) {
orderId.value = orderId_params.toString();
// console.log(orderId.value);
}
});
</script>
<style>
.q-stepper--horizontal .q-stepper__step-inner {
padding: 0px;
}
.step .q-stepper__tab--done .q-stepper__title,
.step .q-stepper__tab--active .q-stepper__title {
color: #35473c !important;
font-weight: 500;
}
.step .q-stepper__header--standard-labels .q-stepper__tab {
min-height: 60px;
}
</style>

664
src/modules/05_placement/components/OrderPlacement/step/step01.vue
View file

@ -1,664 +0,0 @@
<template>
<div style="max-height: 68vh; overflow-y: scroll">
<q-form ref="myForm" class="q-pa-md">
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="typeOrder"
:rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
hide-bottom-space
:label="`${'ประเภทคำสั่ง'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="typeOrderOption"
option-value="id"
use-input
input-debounce="0"
/>
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
) " -->
</div>
<div class="col-xs-12 col-md-6">
<!-- :readonly="!edit"
:borderless="!edit" -->
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="nameOrder"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
:label="`${'คำสั่งเรื่อง'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
<div class="col-6">
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="command"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
:label="`${'คำสั่ง'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
type="number"
/>
</div>
<label class="col-1 flex justify-center items-center text-bold"
>/</label
>
<div class="col-5">
<datepicker
v-model="dateYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="clickEditRow"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:model-value="dateYear + 543"
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
:label="`${'พ.ศ.'}`"
dense
outlined
>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="col-xs-5 col-md-3">
<datepicker
menu-class-name="modalfix"
v-model="dateCommand"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
dateCommand != null ? date2Thai(dateCommand) : null
"
:label="`${'วันที่มีผลออกคำสั่ง'}`"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="byOrder"
:rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
hide-bottom-space
:label="`${'คำสั่งโดย'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="byOrderOption"
option-value="id"
use-input
input-debounce="0"
/>
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
) " -->
</div>
<div class="col-xs-12 col-md-6">
<!-- :readonly="!edit"
:borderless="!edit" -->
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="nameCommand"
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
:label="`${'ผู้มีอำนาจลงนาม'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-md-6">
<!-- :readonly="!edit"
:borderless="!edit" -->
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="positionCommand"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
:label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-12">
<q-separator />
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="examRound"
:rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
hide-bottom-space
:label="`${'รอบการสอบ'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="examRoundName"
:options="examRoundOption"
option-value="examRoundValue"
use-input
input-debounce="0"
/>
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
) " -->
</div>
<div class="col-xs-12 col-md-6">
<!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="position"
:rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]" hide-bottom-space
:label="`${'ตำแหน่งรับสมัคร'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
:options="positionOption" option-value="id" use-input input-debounce="0" /> -->
<!-- @filter="(inputValue:string, doneFn:Function) =>
filterSelector(inputValue, doneFn,'positionOption' ) " -->
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="register"
:rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
hide-bottom-space
:label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="registerOption"
option-value="id"
use-input
input-debounce="0"
/>
</div>
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
) " -->
<div class="col-xs-12 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateRegister"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
dateRegister != null ? date2Thai(dateRegister) : null
"
:label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="announce"
:rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
hide-bottom-space
:label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="announceOption"
option-value="id"
use-input
input-debounce="0"
/>
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
) " -->
</div>
<div class="col-xs-12 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateAnnounce"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
dateAnnounce != null ? date2Thai(dateAnnounce) : null
"
:label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</q-form>
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn unelevated label="บันทึก" color="public" @click="submit">
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
<q-tooltip>ย้อนกลับ</q-tooltip>
</q-btn> -->
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type {
DataOption1,
DataOption,
} from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin();
const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
const $q = useQuasar(); //ใช้ noti quasar
const route = useRoute();
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const orderId = route.params.orderid;
const myForm = ref<QForm>();
const editRow = ref<boolean>(false);
const nameOrder = ref<string>("");
const nameCommand = ref<string>("");
const positionCommand = ref<string>("");
const dateYear = ref<number>(new Date().getFullYear());
const command = ref<number>();
const dateCommand = ref<Date>(new Date());
const dateRegister = ref<Date>(new Date());
const dateAnnounce = ref<Date>(new Date());
const typeOrder = ref<number>();
const typeOrderOption = ref<DataOption1[]>([
{ name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const typeOrderOptionFilter = ref<DataOption1[]>([]);
const byOrder = ref<string>("");
const byOrderOption = ref<DataOption1[]>([
{ name: "นายดด นน", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const byOrderOptionFilter = ref<DataOption1[]>([]);
const register = ref<string>("");
const registerOption = ref<DataOption1[]>([
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const registerOptionFilter = ref<DataOption[]>([]);
const announce = ref<string>("");
const announceOption = ref<DataOption1[]>([
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const announceOptionFilter = ref<DataOption[]>([]);
const position = ref<string>("");
const positionOption = ref<DataOption1[]>([
{ name: "ผู้ช่วย", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const positionOptionFilter = ref<DataOption[]>([]);
const examRound = ref<string>("");
const examRoundOption = ref<DataOption1[]>([]);
const testOptionFilter = ref<DataOption[]>([]);
const clickEditRow = () => (editRow.value = true);
// const filterSelector = (val: any, update: Function, filtername: string) => {
// switch (filtername) {
// case "typeOrderOption":
// update(() => {
// typeOrderOption.value = typeOrderOptionFilter.value.filter(
// (v: DataOption) => v.name!.indexOf(val) > -1
// );
// });
// break;
// case "byOrderOption":
// update(() => {
// byOrderOption.value = byOrderOptionFilter.value.filter(
// (v: DataOption) => v.name!.indexOf(val) > -1
// );
// });
// break;
// case "registerOption":
// update(() => {
// registerOption.value = registerOptionFilter.value.filter(
// (v: DataOption) => v.name!.indexOf(val) > -1
// );
// });
// break;
// case "announceOption":
// update(() => {
// announceOption.value = announceOptionFilter.value.filter(
// (v: DataOption) => v.name!.indexOf(val) > -1
// );
// });
// break;
// case "positionOption":
// update(() => {
// positionOption.value = positionOptionFilter.value.filter(
// (v: DataOption) => v.name!.indexOf(val) > -1
// );
// });
// break;
// case "testOption":
// update(() => {
// testOption.value = testOptionFilter.value.filter(
// (v: DataOption) => v.name!.indexOf(val) > -1
// );
// });
// break;
// default:
// break;
// }
// };
onMounted(async () => {
if (orderId) {
await fetchdetailOrder();
} else {
fecthTypeOption();
fecthExamRoundOption();
}
// const data = localStorage.getItem("formData");
// if (data) {
// const parsedData = JSON.parse(data);
// typeOrder.value = parsedData.orderTypeValue;
// nameOrder.value = parsedData.orderTitle;
// command.value = parsedData.orderNo;
// dateYear.value = parsedData.orderYear;
// dateCommand.value = parsedData.orderDate;
// byOrder.value = parsedData.orderBy;
// nameCommand.value = parsedData.signatoryBy;
// positionCommand.value = parsedData.signatoryPosition;
// test.value = parsedData.examRound;
// position.value = parsedData.registerPosition;
// register.value = parsedData.conclusionRegisterNo;
// dateRegister.value = parsedData.conclusionRegisterDate;
// announce.value = parsedData.conclusionResultNo;
// dateAnnounce.value = parsedData.conclusionResultDate;
// }
});
const fetchdetailOrder = async () => {
showLoader();
// console.log(orderId);
let orderIdString = orderId.toString();
await http
.get(config.API.detailOrder(orderIdString))
.then((res: any) => {
const data = res.data.result;
typeOrder.value = data.orderTypeValue;
nameOrder.value = data.orderTitle;
command.value = data.orderNo;
dateYear.value = Number(data.orderYear);
dateCommand.value = data.orderDate;
byOrder.value = data.orderBy;
nameCommand.value = data.signatoryBy;
positionCommand.value = data.signatoryPosition;
examRound.value = data.examRound;
// position.value = data.registerPosition;
register.value = data.conclusionRegisterNo;
dateRegister.value = data.conclusionRegisterDate;
announce.value = data.conclusionResultNo;
dateAnnounce.value = data.conclusionResultDate;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
fecthTypeOption();
fecthExamRoundOption();
});
};
const fecthTypeOption = async () => {
await http
.get(config.API.typeOrder())
.then((res) => {
typeOrderOption.value = res.data.result;
})
.catch((e) => {
messageError($q, e);
});
};
const fecthExamRoundOption = async () => {
await http
.get(config.API.examroundOrder())
.then((res) => {
examRoundOption.value = res.data.result;
console.log(examRoundOption.value);
})
.catch((e) => {});
};
const submit = async () => {
const formdata = {
orderTypeValue: typeOrder.value,
orderTitle: nameOrder.value,
orderNo: Number(command.value),
orderYear: dateYear.value,
orderDate: dateCommand.value,
orderBy: byOrder.value,
signatoryBy: nameCommand.value,
signatoryPosition: positionCommand.value,
examRound: examRound.value,
registerPosition: position.value,
conclusionRegisterNo: register.value,
conclusionRegisterDate: dateRegister.value,
conclusionResultNo: announce.value.toString(),
conclusionResultDate: dateAnnounce.value,
};
await myForm.value!.validate().then((result: boolean) => {
if (result) {
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
}).onOk(async () => {
showLoader();
if (!orderId) {
createListOrder(formdata);
} else {
let orderIdString = orderId.toString();
updateOrder(formdata, orderIdString);
}
});
}
});
};
const createListOrder = async (formData: Object) => {
// console.log(formData);
await http
.post(config.API.createOrder(), formData)
.then((res) => {
const data = res.data.result;
localStorage.setItem("orderId", data.id);
next();
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const updateOrder = async (formData: Object, orderId: string) => {
// console.log(formData);
await http
.put(config.API.detailOrder(orderId), formData)
.then((res) => {
console.log(res);
next();
success($q, "แก้ไขข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<style>
.q-field--with-bottom {
padding-bottom: 0px;
}
</style>

722
src/modules/05_placement/components/OrderPlacement/step/step03.vue
View file

@ -1,722 +0,0 @@
<template>
<div>
<div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
<div class="col-12 row q-py-sm items-center">
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<q-form ref="myForm">
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="idCard"
>
<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">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="idCard" :props="props">
{{ props.row.idCard }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="unit" :props="props">
{{ props.row.unit }}
</q-td>
<q-td key="send" :props="props">
<q-select
:class="getClass(true)"
hide-bottom-space
multiple
:outlined="true"
dense
lazy-rules
v-model="props.row.mutiselect"
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
emit-value
map-options
option-label="name"
:options="optionSelect"
option-value="id"
input-debounce="0"
color="primary"
@update:model-value="() => updateData(props.row)"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-black">
ไม่พบข้อมูลที่ค้นหา
</q-item-section>
</q-item>
</template>
</q-select>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.personalId)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</q-form>
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="เลือกรายชื่อ"
>
</q-btn>
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="saveDataCopyOrder"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
</div>
<q-dialog v-model="modal" persistent full-width>
<q-card>
<DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-sm-5 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input
outlined
dense
v-model="search"
placeholder="ค้นหา"
class="q-mb-sm"
>
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-tree
:nodes="nodesTree"
dense
node-key="id"
v-model:selected="selected"
v-model:expanded="expanded"
no-selection-unset
selected-color="primary"
@update:selected="onSelected"
default-expand-all
/>
</q-scroll-area>
</q-card>
</div>
<div class="col-xs-12 col-sm-7">
<div class="col-12 row q-py-sm items-center">
<q-space />
<div class="items-center" style="display: flex">
<q-input
standout
dense
v-model="filterModal"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filterModal == ''" name="search" />
<q-icon
v-if="filterModal !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumnsModal"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columnsModal"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table
:rows="rowsModal"
:columns="columnsModal"
:visible-columns="visibleColumnsModal"
:filter="filterModal"
row-key="profileId"
selection="multiple"
v-model:selected="selectedModal"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body-selection="scope">
<!-- <q-checkbox
keep-color
color="primary"
dense
:model-value="scope.selected"
@update:model-value="
(val, evt) => {
Object.getOwnPropertyDescriptor(scope, 'selected').set(
val,
evt
);
}
"
/> -->
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<!-- <q-btn
flat
round
color="public"
icon="mdi-content-save-outline"
@click="clickClose"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn> -->
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="saveData"
class="q-px-md"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import type { QInput, QForm } from "quasar";
import type { treeTab } from "@/modules/05_placement/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import type {
ResponseOrganiz,
ResponseCopyOrder,
DataCopyOrder,
} from "@/modules/05_placement/interface/response/Order";
import type { RequestCopyOrder } from "@/modules/05_placement/interface/request/Order";
import { useRoute } from "vue-router";
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
const route = useRoute();
const myForm = ref<QForm | null>(null);
const filterRef = ref<QInput>();
const filter = ref<string>("");
const modal = ref<boolean>(false);
const search = ref<string>("");
const expanded = ref<string[]>([]);
const selected = ref<string>("");
const nodesTree = ref<treeTab[]>([]);
const selectedModal = ref<ResponseOrganiz[]>([]);
const filterModal = ref<string>("");
const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
const columnsModal = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
field: "no",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "idCard",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "idCard",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ชื่อ-สกุล",
field: "name",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
field: "position",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const rowsModal = ref<ResponseOrganiz[]>([]);
const optionSelect = ref<any>([
{ id: 1, name: "อีเมล" },
{ id: 2, name: "กล่องข้อความ" },
]);
const visibleColumns = ref<String[]>([
"no",
"idCard",
"name",
"position",
"unit",
"send",
]);
const columns = ref<QTableProps["columns"]>([
{ name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
{
name: "idCard",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "idCard",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ชื่อ-สกุล",
field: "name",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
field: "position",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "unit",
align: "left",
label: "หน่วยงาน",
field: "unit",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "send",
align: "left",
label: "ช่องทางการส่งสำเนา",
field: "send",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const rows = ref<DataCopyOrder[]>([]);
const editRows = ref<DataCopyOrder[]>([]);
onMounted(async () => {
await conditionId();
});
const listModal = async (id: string) => {
showLoader();
await http
.get(config.API.copyOrderPersonsId(id))
.then((res) => {
const data = res.data.result;
let list: ResponseOrganiz[] = [];
data.map((r: ResponseOrganiz) => {
list.push({
firstName: r.firstName ?? "",
idCard: r.idCard ?? "",
lastName: r.lastName ?? "",
name: r.name ?? "",
position: r.position ?? "",
prefixId: r.prefixId ?? "",
profileId: r.profileId ?? "",
unit: r.unit ?? "",
});
});
rowsModal.value = list;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const conditionId = async () => {
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await getData(id);
}
};
const getData = async (id: string) => {
showLoader();
await http
.get(config.API.copyOrderId(id))
.then((res) => {
const data = res.data.result;
// console.log(data);
let list: DataCopyOrder[] = [];
data.map((r: ResponseCopyOrder) => {
let selectCopyOrder = [];
if (r.emailChannel) {
selectCopyOrder.push(1);
}
if (r.inboxChannel) {
selectCopyOrder.push(2);
}
list.push({
personalId: r.personalId ?? "",
name: r.name ?? "",
idCard: r.idCard ?? "",
position: r.position ?? "",
unit: r.unit ?? "",
send: "",
mutiselect: selectCopyOrder,
});
});
if (editRows.value.length > 0) {
list.map((r: DataCopyOrder) => {
editRows.value.map((e: DataCopyOrder) => {
if (r.personalId == e.personalId) {
r.mutiselect = e.mutiselect;
}
});
});
}
rows.value = list;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const saveData = async () => {
// console.log("select", selectedModal.value);
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
if (id !== null) {
showLoader();
await http
.post(config.API.copyOrderPersonsId(id), selectedModal.value)
.then((res) => {
// const data = res.data.result;
console.log(res);
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await conditionId();
clickClose();
// hideLoader();
});
}
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
filter.value = "";
filterRef.value!.focus();
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const clickClose = async () => {
// if (editRow.value == true) {
// dialogMessage(
// $q,
// "ข้อมูลมีการแก้ไข",
// "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
// "mdi-help-circle-outline",
// "ตกลง",
// "orange",
// () => (modal.value = false),
// undefined
// );
// } else {
modal.value = false;
// next.value = false;
// previous.value = false;
// }
};
const clickAdd = async () => {
await nodeTree();
selected.value = "";
rowsModal.value = [];
selectedModal.value = [];
modal.value = true;
if (myForm.value !== null) {
myForm.value.reset();
}
};
const clickDelete = (id: string) => {
dialogMessage(
$q,
"ยืนยันการลบข้อมูล",
"ต้องการลบข้อมูลนี้ใช่หรือไม่?",
"mdi-help-circle-outline",
"ตกลง",
"red",
() => deleteData(id),
undefined
);
};
const nodeTree = async () => {
showLoader();
await http
.get(config.API.profileOrganizRoot)
.then((res: any) => {
const data = res.data.result;
nodesTree.value = data;
if (data.length > 0) {
expanded.value = [data[0].id];
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const onSelected = async (id: string) => {
await listModal(id);
};
const deleteData = async (id: string) => {
await http
.delete(config.API.copyOrderId(id))
.then((res) => {
// const data = res.data.result;
// console.log(res);
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
// hideLoader();
await conditionId();
});
};
const saveDataCopyOrder = async () => {
if (myForm.value !== null) {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
await fetchSaveCopyOrder();
}
});
}
};
const fetchSaveCopyOrder = async () => {
let list: RequestCopyOrder[] = [];
rows.value.map((r: DataCopyOrder) => {
list.push({
personalId: r.personalId,
emailChannel: r.mutiselect.includes(1),
inboxChannel: r.mutiselect.includes(2),
});
});
showLoader();
await http
.put(config.API.copyOrder, list)
.then((res: any) => {
success($q, "บันทึกข้อมูลสำเร็จ");
next();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const updateData = (row: DataCopyOrder) => {
editRows.value.push(row);
};
</script>
<style lang="scss"></style>

709
src/modules/05_placement/components/OrderPlacement/step/step04.vue
View file

@ -1,709 +0,0 @@
<template>
<div>
<div style="min-height: 70vh">
<q-splitter
v-model="splitterModel"
style="height: 70vh"
@update:model-value="onchangePage"
>
<template v-slot:before>
<div class="space">
<div @click="setTab('main')" :class="getClass(tab == 'main')">
<div class="q-pr-sm">คำสั่ง</div>
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'main'"
:color="tab !== 'main' ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<div @click="setTab('second')" :class="getClass(tab == 'second')">
<div class="q-pr-sm">เอกสารแนบท้าย</div>
<q-btn
size="12px"
flat
dense
:color="tab !== 'second' ? 'grey' : 'add'"
icon="mdi-download"
:disable="tab !== 'second'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section>ไฟล์ .xls</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<q-space />
<q-btn
class="text-dark"
flat
dense
icon="mdi-fullscreen"
color="add"
@click="dialog = true"
/>
</div>
<q-separator style="margin-top: -1px; z-index: 1" />
<q-card bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
</q-card>
</template>
<template v-slot:separator>
<q-avatar
color="primary"
text-color="white"
size="30px"
icon="drag_indicator"
/>
</template>
<template v-slot:after>
<q-form ref="myForm">
<div class="q-pa-md q-gutter-y-md">
<fieldset class="border q-px-lg q-py-md">
<legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
<div class="q-gutter-y-md q-mb-md">
<div>
<label class="text-file">คำสั่ง</label>
<q-file
outlined
dense
v-model="fileOrder"
label="เลือกไฟล์คำสั่ง"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div>
<label class="text-file">เอกสารแนบท้าย</label>
<q-file
outlined
dense
v-model="fileTailer"
label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
</div>
</fieldset>
<fieldset class="border q-px-lg q-py-md">
<legend class="text-header q-px-sm">รายละเอียด</legend>
<div class="q-gutter-y-md q-mb-md">
<div>
<label class="text-file">เลขที่คำสั่ง</label>
<q-input
:outlined="true"
dense
lazy-rules
:readonly="!true"
:borderless="!true"
v-model="order"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
/>
</div>
<div>
<label class="text-file">ปีที่ออกคำสั่ง</label>
<datepicker
menu-class-name="modalfix"
v-model="years"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
outlined
dense
lazy-rules
:model-value="years + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
]"
hide-bottom-space
:label="`${'ปีที่ออกคำสั่ง'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div>
<label class="text-file">วันที่ลงนาม</label>
<datepicker
menu-class-name="modalfix"
v-model="date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
hide-bottom-space
:model-value="date != null ? date2Thai(date) : null"
:label="`${'วันที่มีผลออกคำสั่ง'}`"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</fieldset>
<div class="flex justify-around">
<q-btn
unelevated
label="ออกคำสั่ง"
:color="validateForm() ? 'public' : 'grey'"
:disable="statusOrder == 'N'"
@click="clickExecute(orderId)"
/>
<q-btn
class="text-dark"
unelevated
label="ส่งไปลงนาม"
color="grey"
:disable="statusOrder == 'N'"
/>
</div>
</div>
</q-form>
</template>
</q-splitter>
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="เลือกรายชื่อส่งสำเนา"
>
</q-btn>
<q-btn
unelevated
label="บันทึก"
:color="validateForm() ? 'public' : 'grey'"
:disable="!validateForm()"
@click="save"
>
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
<q-dialog
v-model="dialog"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white text-white">
<!-- <q-bar>
<q-space />
<q-btn dense flat icon="close" v-close-popup>
<q-tooltip>ปิดหน้าต่าง</q-tooltip>
</q-btn>
</q-bar> -->
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF
ref="vuePDFRef"
:pdf="pdfSrc"
:page="page"
fit-parent
:scale="0.1"
/>
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin();
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
const route = useRoute();
const $q = useQuasar();
const orderId_params = route.params.orderid;
const dialog = ref<boolean>(false);
const splitterModel = ref<number>(70);
const tab = ref<string>("main");
const order = ref<string>("");
const years = ref<number>(new Date().getDate());
const date = ref<Date>(new Date());
const fileOrder = ref<any>(null);
const fileTailer = ref<any>(null);
const OrderPDF = ref<string>("");
const TailerPDF = ref<string>("");
const statusOrder = ref<string>();
const orderId = ref<string>(orderId_params.toString());
onMounted(async () => {
if (orderId.value) {
fetchAttachment(orderId.value);
fecthstatusOrder(orderId.value);
}
// const pdfData = usePDF();
// setTimeout(() => {
// pdfSrc.value = pdfData.pdf.value;
// numOfPages.value = pdfData.pages.value;
// }, 1000);
});
const fetchAttachment = async (orderId: string) => {
showLoader();
await http
.get(config.API.attachmentOrder(orderId))
.then(async (res) => {
let response = res.data.result;
console.log(response);
order.value = response.orderNo;
years.value = Number(response.orderYear);
if (response.date !== undefined) {
date.value = response.date;
}
if (response.orderFileUrl !== null) {
OrderPDF.value = response.orderFileUrl;
viewPDF(OrderPDF.value);
}
if (response.attachmentFileUrl !== null) {
TailerPDF.value = response.attachmentFileUrl;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fecthstatusOrder = async (orderId: string) => {
await http
.get(config.API.orderReady(orderId))
.then((res) => {
let status = res.data.result;
statusOrder.value = status.result;
})
.catch((e) => {
console.log(e);
});
};
const viewPDF = async (pdf: string) => {
const pdfData = await usePDF(`${pdf}`);
showLoader();
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
hideLoader();
}, 1500);
};
watch(tab, () => {
console.log(tab.value);
if (tab.value === "main") {
viewPDF(OrderPDF.value);
}
if (tab.value === "second") {
viewPDF(TailerPDF.value);
}
});
// const myEventHandler = (e: any) => {
// console.log("e", e.target.innerWidth);
// if (vuePDFRef !== null) {
// vuePDFRef.value.reload();
// }
// };
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const vuePDFRef = ref<any>(null);
const myForm = ref<QForm | null>(null);
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const onchangePage = (val: any) => {
// console.log(val);
if (vuePDFRef !== null) {
vuePDFRef.value.reload();
}
};
const save = () => {
if (myForm.value !== null) {
myForm.value!.validate().then((success: Boolean) => {
if (success) {
// yay, models are correct
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
await putOrderData();
await postfileOrder();
await postfileTailer();
await fetchAttachment(orderId.value);
await fecthstatusOrder(orderId.value);
})
.onCancel(() => {})
.onDismiss(() => {});
}
});
}
};
const putOrderData = async () => {
const orderData = {
orderNo: order.value,
orderYear: years.value.toString(),
signDate: date.value,
};
await http
.put(config.API.attachmentOrder(orderId.value), orderData)
.then((res) => {
console.log(res);
})
.catch((e) => {
console.log(e);
});
};
const postfileOrder = async () => {
const formData = new FormData();
formData.append("File", fileOrder.value);
await http.post(config.API.attachmentOrderId(orderId.value), formData);
};
const postfileTailer = async () => {
const formData = new FormData();
formData.append("File", fileTailer.value);
await http.post(config.API.attachmentFileId(orderId.value), formData);
};
const clickExecute = async (id: string) => {
$q.dialog({
title: "ยืนยันการออกคำสั่ง",
message: "ต้องการยืนยันการออกคำสั่งข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
await http
.put(config.API.executeOrder(id))
.then((res) => {
console.log(res);
})
.catch((e) => {
messageError($q, e);
});
})
.onCancel(() => {})
.onDismiss(() => {});
};
const validateForm = () => {
return (
fileOrder.value !== null &&
fileOrder.value !== null &&
order.value.trim() !== ""
);
};
const getClass = (val: boolean) => {
return {
"card-header-active q-px-lg q-py-md cursor-pointer": val,
"card-header q-px-lg q-py-md cursor-pointer": !val,
};
};
const setTab = (val: string) => {
tab.value = val;
page.value = 1;
};
</script>
<style lang="scss" scoped>
.border {
border-radius: 10px;
border: 1px solid #e9eaec;
}
.text-header {
color: #34373c;
font-size: 1rem;
font-weight: 300;
}
.text-file {
padding-top: 5px;
color: #34373c;
font-weight: 500;
}
.space {
background-color: #e9eaec61;
display: flex;
z-index: 3;
}
.card-header {
margin-top: 5px;
background-color: transparent;
padding: 2px !important;
border-radius: 10px 10px 0px 0px;
width: 200px;
display: flex;
justify-content: center;
font-weight: normal;
align-items: center;
}
.card-header-active {
margin-top: 5px;
margin-left: -1px;
background-color: white;
padding: 2px !important;
border-radius: 10px 10px 0px 0px;
border: 1px solid #e9eaec;
width: 200px;
display: flex;
justify-content: center;
border-bottom-style: none;
font-weight: 600;
align-items: center;
}
.card-pdf {
border-radius: 10px;
border: 1px solid #e9eaec;
background-color: #e9eaec61;
// height: 60vh;
}
</style>

2
src/modules/05_placement/components/PersonalList/Table.vue
View file

@ -1140,7 +1140,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
label="ส่งรายชื่อ"
@click="savelist"
:disable="checkSelected"
color="public"

2
src/modules/05_placement/components/Receive/receiveMain.vue
View file

@ -625,7 +625,7 @@ const nextPage = (row: any) => {
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
label="ส่งไปออกคำสั่ง"
@click=""
:disable="checkSelected"
color="public"

2
src/modules/05_placement/components/Transfer/transferMain.vue
View file

@ -496,7 +496,7 @@ const getData = async () => {
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
label="ส่งไปออกคำสั่ง"
@click=""
:disable="checkSelected"
color="public"