Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into me

This commit is contained in:
Thanit Konmek 2023-08-04 14:53:06 +07:00
commit cb2379a231
17 changed files with 3153 additions and 774 deletions

View file

@ -1,6 +1,7 @@
import env from "../index";
const placement = `${env.API_PLACEMENT_URI}/placement`;
const orgTree = `${env.API_URI_ORG_TREE}`;
const order = `${env.API_PLACEMENT_URI}`;
export default {
MainDetail: (year: number) => `${placement}/exam/${year}`,
@ -47,7 +48,14 @@ export default {
// position
placementPosition: () => `${placement}/position/use`,
// putPositiom
putPosition: (id:any) => `${placement}/position/${id}`,
putPosition: (id: any) => `${placement}/position/${id}`,
// clear Position
clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
clearPosition: (personalId: string) => `${placement}/position/clear/${personalId}`,
// order
yearOptionsOrder: () => `${order}/order/fiscal-year`,
listOrder: () => `${order}/order`,
detailOrder:(orderId:string) => `${order}/order/${orderId}`,
typeOrder: () => `${order}/order/order-type`,
examroundOrder: () => `${order}/order/detail/exam-round`,
};

View file

@ -291,20 +291,20 @@ const menuList = readonly<any[]>([
role: "insignia",
},
{
label: "จัดทำรายชื่อข้าราชการสามัญ",
path: "insigniaNameList",
label: "จัดการคำขอ",
path: "insigniaManage",
role: "insignia",
},
{
label: "อนุมัติรายชื่อข้าราชการสามัญ",
path: "insigniaNameApprove",
role: "insignia",
},
{
label: "บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์",
label: "บันทึกผลการได้รับพระราช...",
path: "insigniaRecord",
role: "insignia",
},
{
label: "จัดสรรเครื่องราชฯ",
path: "insigniaAllocate",
role: "insignia",
},
{
label: "รายงาน",
path: "insigniaReport",

View file

@ -97,7 +97,7 @@
map-options
option-label="name"
:options="OrderTypeOption"
option-value="id"
option-value="name"
lazy-rules
hide-bottom-space
:readonly="false"
@ -115,7 +115,7 @@
map-options
option-label="name"
:options="OrderStatusOption"
option-value="id"
option-value="name"
lazy-rules
hide-bottom-space
:readonly="false"
@ -153,54 +153,30 @@
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
key="Order"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-tr
:props="props"
class="cursor-pointer"
@click="redirectToPage(props.row.orderId)"
>
<q-td key="Order" :props="props">
{{ props.row.Order }}
</q-td>
<q-td
key="OrderNum"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-td key="OrderNum" :props="props">
{{ props.row.OrderNum }}
</q-td>
<q-td
key="OrderType"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-td key="OrderType" :props="props">
{{ props.row.OrderType }}
</q-td>
<q-td
key="OrderDate"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-td key="OrderDate" :props="props">
{{ props.row.OrderDate }}
</q-td>
<q-td
key="OrderBy"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-td key="OrderBy" :props="props">
{{ props.row.OrderBy }}
</q-td>
<q-td
key="Signer"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-td key="Signer" :props="props">
{{ props.row.Signer }}
</q-td>
<q-td
key="OrderStatus"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-td key="OrderStatus" :props="props">
{{ props.row.OrderStatus }}
</q-td>
<q-td auto-width>
@ -210,7 +186,7 @@
flat
round
color="red"
@click="clickDelete(props.row.id)"
@click.stop="clickDelete(props.row.orderId)"
icon="mdi-delete"
>
<q-tooltip>ลบขอม</q-tooltip>
@ -241,14 +217,23 @@
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 } from "@/modules/05_placement/interface/index/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,
@ -256,9 +241,6 @@ const pagination = ref({
rowsPerPage: 10,
});
const mixin = useCounterMixin();
const { dateText } = mixin;
// . .
const textDate = (value: Date) => {
return dateText(value);
@ -364,146 +346,17 @@ const columns = ref<QTableProps["columns"]>([
// ()
const rows = ref<FormOrderPlacementMainData[]>([
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "จัดทำร่างคำสั่ง",
OrderType: "คำสั่งย้าย",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "จัดทำร่างคำสั่ง",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "บัญชีแนบท้าย",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "บัญชีแนบท้าย",
OrderType: "คำสั่งย้าย",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ส่งสำเนาคำสั่ง",
OrderType: "คำสั่งย้าย",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ส่งสำเนาคำสั่ง",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "รอลงนาม",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2565",
fiscalYear: 2565,
OrderDate: "30 พ.ค. 2565",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งย้าย",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2564",
fiscalYear: 2564,
OrderDate: "30 พ.ค. 2564",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งแต่งตั้ง",
},
{
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
OrderNum: "1/2566",
fiscalYear: 2566,
OrderDate: "30 พ.ค. 2566",
OrderBy: "สำนักงาน กทม.",
Signer: "นาม สมคิด ยอดใจ ",
OrderStatus: "ออกคำสั่งแล้ว",
OrderType: "คำสั่งแต่งตั้ง",
},
// {
// Order: "",
// OrderNum: "1/2565",
// fiscalYear: 2565,
// OrderDate: "30 .. 2565",
// OrderBy: " .",
// Signer: " ",
// OrderStatus: "",
// OrderType: "",
// },
]);
// const OrderStatusOption = [
// "",
// "",
// "",
// "",
// ];
let OriginalData = ref<FormOrderPlacementMainData[]>([]);
let UpdataData = ref<FormOrderPlacementMainData[]>([]);
@ -517,14 +370,27 @@ onMounted(async () => {
});
const OriginalDataFetch = async () => {
// API
// await http
// .get(config.API.// )
// .then((res: any) => {
// })
// .catch((e: any) => {
// messageError($q, e);
// })
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: "นาม สมคิด ยอดใจ ",
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);
@ -533,9 +399,8 @@ const OriginalDataFetch = async () => {
};
//
const redirectToPage = () => {
// router.push({ name: "placementDetail" });
router.push(`/placement/order/detail`);
const redirectToPage = (id?: string) => {
router.push(`/placement/order/detail/${id}`);
};
const clickDelete = (id: string) => {
@ -549,30 +414,30 @@ const clickDelete = (id: string) => {
persistent: true,
})
.onOk(async () => {
// await deleteData(id);
await deleteData(id);
})
.onCancel(() => {})
.onDismiss(() => {});
};
// const deleteData = async (id: string) => {
// showLoader();
// await http
// .delete(config.API.orderReplace(id))
// .then((res) => {
// success($q, "");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// await fetchData();
// });
// };
const deleteData = async (id: string) => {
showLoader();
await http
.delete(config.API.detailOrder(id))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
await OriginalDataFetch();
});
};
const clickAdd = () => {
router.push({ name: "OrderplacementDetail" });
router.push({ name: "Orderplacementadd" });
};
// const viewDetail = (id: string, status: string) => {
@ -588,6 +453,15 @@ 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.// )
@ -600,25 +474,37 @@ const fiscalYearFilter = async () => {
// })
// .finally(async () => {
// });
for (let data of OriginalData.value) {
const year = data.fiscalYear;
console.log(year);
// for (let data of OriginalData.value) {
// console.log(OriginalData.value);
if (fiscalyear.value === null || year > fiscalyear.value) {
fiscalyear.value = year;
}
// const year = data.fiscalYear;
// console.log(year);
if (!addedfiscalYearValues.includes(year)) {
fiscalyearOP.push({ id: year, name: year.toString() });
addedfiscalYearValues.push(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<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
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.// )
@ -631,35 +517,37 @@ const OrderTypeFilter = async () => {
// })
// .finally(async () => {
// });
for (let data of OriginalData.value) {
const OrderTypeValue = data.OrderType;
console.log(OrderTypeValue);
// 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);
// }
}
// 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<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
const OrderStatusOption = reactive<DataOption1[]>([
{ id: "", name: "ทั้งหมด" },
]);
const addedOrderStatusValues: string[] = [];
const OrderStatusFilter = async () => {
// API
@ -676,7 +564,6 @@ const OrderStatusFilter = async () => {
// });
for (let data of OriginalData.value) {
const OrderStatusValue = data.OrderStatus;
console.log(OrderStatusValue);
if (
OrderStatusValue === null ||
@ -686,31 +573,17 @@ const OrderStatusFilter = async () => {
}
if (!addedOrderStatusValues.includes(OrderStatusValue)) {
// console.log(OrderStatusValue);
OrderStatusOption.push({
// id: OrderStatusValue,
id: OrderStatusOption.length,
id: OrderStatusOption.length.toString(),
name: OrderStatusValue,
});
addedOrderStatusValues.push(OrderStatusValue);
}
}
};
// API
const searchfiscalyear = () => {
console.log("Input value changed:", fiscalyear.value);
// API
// await http
// .get(config.API.// )
// .then((res: any) => {
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
};
//
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
@ -722,16 +595,27 @@ const resetFilter = () => {
const attrs = ref<any>(useAttrs());
const searchFilterTable = async () => {
// console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
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);
};
// UpdataData.value = DataStore.DataMainUpdate;
// console.log("Input value changed:", OrderStatus.value, OrderType.value);
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {

View file

@ -8,7 +8,7 @@
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
@click="router.go(-1), destroyLocalStorage()"
/>
ออกคำส
</div>
@ -61,7 +61,7 @@
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, defineAsyncComponent } from "vue";
import { ref, defineAsyncComponent, onMounted } from "vue";
import type { QStepper } from "quasar";
const step01 = defineAsyncComponent(
@ -87,11 +87,22 @@ const stepper = ref<QStepper>();
const nextStep = () => {
stepper.value!.next();
localStorage.setItem("currentStep", step.value.toString());
};
const previousStep = () => {
stepper.value!.previous();
localStorage.setItem("currentStep", step.value.toString());
};
const destroyLocalStorage = () => {
localStorage.clear();
};
onMounted(() => {
const currentStep = localStorage.getItem("currentStep");
if (currentStep) {
step.value = Number(currentStep);
}
});
</script>
<style>
.q-stepper--horizontal .q-stepper__step-inner {

View file

@ -95,7 +95,17 @@ export default [
},
},
{
path: "/placement/order/detail",
path: "/placement/order/add",
name: "Orderplacementadd",
component: detailOrderReplace,
meta: {
Auth: true,
Key: [6.9],
Role: "placement",
},
},
{
path: "/placement/order/detail/:orderid",
name: "OrderplacementDetail",
component: detailOrderReplace,
meta: {

View file

@ -229,6 +229,8 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
) => {
DataMainUpdateOrder.value = [];
if (filter_1 === "" && filter_2 === "" && filterYear === 0) {
DataMainUpdateOrder.value = DataMainOrigOrder.value;
} else if (filter_1 !== "" && filter_2 === "" && filterYear === 0) {
@ -267,6 +269,8 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
item.OrderStatus === filter_2 &&
item.fiscalYear === filterYear
);
} else if (filter_1 == "ทั้งหมด" && filter_2 == "ทั้งหมด" && filterYear !== null) {
DataMainUpdateOrder.value = DataMainOrigOrder.value;
}
};

View file

@ -110,6 +110,20 @@
class="text-h5"
/>
</q-td>
<q-td key="statusRoyal" :props="props">
<q-icon
v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
name="mdi-timer-sand"
color="orange"
class="text-h5"
/>
<q-icon
v-else
name="mdi-check"
color="positive"
class="text-h5"
/>
</q-td>
<q-td auto-width>
<q-btn
dense
@ -178,6 +192,7 @@ const visibleColumns = ref<string[]>([
"startDate",
"endDate",
"status",
"statusRoyal",
]); //
//
@ -227,6 +242,15 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "statusRoyal",
align: "center",
label: "สถานะราชกิจจานุเบกษา",
sortable: true,
field: "institution",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ()
@ -237,6 +261,7 @@ const rows = ref<FormProprsalsRound[]>([
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
statusRoyal: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
@ -244,6 +269,7 @@ const rows = ref<FormProprsalsRound[]>([
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
statusRoyal: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
@ -251,6 +277,7 @@ const rows = ref<FormProprsalsRound[]>([
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
statusRoyal: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
@ -258,6 +285,7 @@ const rows = ref<FormProprsalsRound[]>([
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "ยังไม่ได้เสนอ",
statusRoyal: "ยังไม่ได้เสนอ",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
@ -265,6 +293,7 @@ const rows = ref<FormProprsalsRound[]>([
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
statusRoyal: "ยังไม่ได้เสนอ",
},
]);

View file

@ -0,0 +1,43 @@
<script setup lang="ts">
const sizeCard = (val: number) => {
if (val === 5) {
return "width:15%;";
}
};
const props = defineProps({
color: {
type: String,
default: "",
},
label: {
type: String,
default: "",
},
amount: {
type: Number,
default: 0,
},
});
</script>
<template>
<div
:style="$q.screen.lt.md ? '' : sizeCard(5)"
:class="$q.screen.lt.sm ? 'col-4' : ''"
>
<div
class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm"
>
<div class="col-12 row items-center q-pa-sm">
<div
class="col-12 text-h5 text-weight-bold"
:style="{ color: props.color }"
>
{{ props.amount }}
</div>
<div class="col-12 text-dark ellipsis">
{{ props.label }}
</div>
</div>
</div>
</div>
</template>

View file

@ -0,0 +1,715 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
รายชอขาราชการสามญฯ ทธนขอพระราชทานเครองราชยสรยาภรณ
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop
:amount="stat.total"
label="หน่วยงานทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.sendName"
label="หน่วยงานที่ส่งรายชื่อเเล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.nonSend"
label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
color="#2EA0FF"
/>
<cardTop
:amount="stat.personSend"
label="จำนวนคนที่ยื่นขอ"
color="#4154B3"
/>
</div>
</div>
</div>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row col-12">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
active-class="bg-teal-1"
indicator-color="primary"
align="left"
>
<q-tab name="haveInsignia" label="ผู้ที่ได้รับพระราชทานเครื่องราชฯ" />
<q-tab name="rightInsignia" label="ผู้ที่มีสิทธ์ที่จะไม่ยื่นขอ" />
<q-tab name="nonInsignia" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
</q-tabs>
</div>
<q-separator />
<div class="col-12 row q-pa-md">
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<q-select
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
/>
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพ</q-tooltip>
</q-btn>
<q-btn size="md" icon="mdi-download" flat round color="primary">
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<!-- <q-menu>
<q-list style="min-width: 100px">
<q-item clickable @click="clickAdd">
<q-item-section>ขรก.กทม.สาม</q-item-section>
</q-item>
<q-item clickable @click="clickAdd">
<q-item-section>กจางประจำ</q-item-section>
</q-item>
</q-list>
</q-menu> -->
</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-pt-sm">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="name"
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-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="nextPage(props.row)"
>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="citizenId" :props="props">
{{ props.row.citizenId }}
</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="level" :props="props">
{{ props.row.level }}
</q-td>
<q-td key="salary" :props="props">
{{ props.row.salary }}
</q-td>
<q-td key="organization" :props="props">
{{ props.row.organization }}
</q-td>
<q-td key="insigniaType" :props="props">
{{ props.row.insigniaType }}
</q-td>
<q-td key="insigniaSend" :props="props">
{{ props.row.insigniaSend }}
</q-td>
<q-td key="insigniaLevel" :props="props">
{{ props.row.insigniaLevel }}
</q-td>
<q-td key="dateSend" :props="props">
{{ props.row.dateSend }}
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="blue"
@click="clickNote(props.row.id)"
icon="mdi-alert-circle-outline"
>
<q-tooltip>หมายเหต</q-tooltip>
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
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="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</div>
</q-card>
<q-dialog v-model="addNote" persistent>
<q-card style="min-width: 350px">
<DialogHeader tittle="หมายเหตุ " :close="clickClose" />
<q-card-section class="q-pt-none">
<q-input
dense
type="textarea"
label="กรอกหมายเหตุ"
v-model="Note"
autofocus
@keyup.enter="addNote = false"
/>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" @click="saveNote" color="public" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref, useAttrs, reactive, watch } from "vue";
import type { QTableProps } from "quasar";
import type {
FormMainProbation,
FormMainProbation2,
} from "@/modules/05_placement/interface/request/Main";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import type { resMain } from "@/modules/06_retirement/interface/response/Main";
const yearOptions = reactive<any[]>([]);
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
const Note = ref<string>("");
const addNote = ref<boolean>(false);
const saveWriteNote = ref<any[]>([]);
const mixin = useCounterMixin();
const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
mixin;
const router = useRouter();
const $q = useQuasar(); // noti quasar
const modal = ref<boolean>(false);
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"no",
"citizenId",
"name",
"position",
"level",
"salary",
"organization",
"insigniaType",
"insigniaSend",
"insigniaLevel",
"dateSend",
]); //
//
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขบัตรประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "อันดับ/ระดับ",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
sortable: true,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaType",
align: "left",
label: "ประเภทเครื่องราชฯ ปัจจุบัน",
sortable: true,
field: "insigniaType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaSend",
align: "left",
label: "ประเภทเครื่องราชฯ ที่ยื่นขอ",
sortable: true,
field: "insigniaSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaLevel",
align: "left",
label: "ชั้นเครื่องราชฯ",
sortable: true,
field: "insigniaLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateSend",
align: "left",
label: "วันที่ยื่นขอ",
sortable: true,
field: "dateSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ()
const rows = ref<any[]>([
{
no: "1",
citizenId: "1xxxxxxxxxx",
name: "นายใจดี ยอดใจ ",
position: "นักวิชาการพัสดุ",
level: "1",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "2",
citizenId: "1xxxxxxxxxx",
name: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "3",
citizenId: "1xxxxxxxxxx",
name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "4",
citizenId: "1xxxxxxxxxx",
name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
]);
// ()
const currentYear = new Date().getFullYear();
const tab = ref<any>("haveInsignia");
const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
// 2
const columns2 = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "retireNumber",
align: "left",
label: "จำนวนผู้เกษียณ",
sortable: true,
field: "total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ()
const rows2 = ref<FormMainProbation2[]>([
{
no: "1",
name: "นายใจดี ยอดใจ ",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
no: "2",
name: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
no: "3",
name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร",
},
{
no: "4",
name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร",
},
{
no: "5",
name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร",
},
]);
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickNote = () => {
addNote.value = true;
};
const clickAdd = () => {
// modal.value = true;
$q.dialog({
title: "เพิ่มประกาศ",
message: "เลือกประกาศที่ต้องการเพิ่มข้อมูล",
options: {
type: "radio",
model: "opt1",
// inline: true
items: [
{ label: "ประกาศเพิ่มผู้เกษียณ", value: "ADD" },
{ label: "ประกาศแก้ไขข้อมูลผู้เกษียน", value: "EDIT" },
{ label: "ประกาศยกเลิกผู้เกษียณ", value: "REMOVE" },
],
},
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk((data) => {
console.log("option===>", data);
router.push(`/retirement/list/${type.value}/${currentYear}`);
})
.onCancel(() => {})
.onDismiss(() => {});
/* $q.dialog({
title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
router.push(`/retirement/list/${type.value}/${currentYear}`);
})
.onCancel(() => {})
.onDismiss(() => {}); */
};
const clickClose = async () => {
addNote.value = false;
};
const organization = ref<string>();
const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
const stat = ref<any>({
total: 0,
sendName: 0,
nonSend: 0,
personSend: 0,
disclaim: 0,
});
const saveNote = async () => {
if (saveWriteNote.value.length == 0) {
dialogMessage(
$q,
"ไม่สามารถบันทึกข้อมูลได้",
"กรุณาเพิ่มหมายเหตุ",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
return;
} else {
await saveTextNote();
}
};
const saveTextNote = async () => {};
//
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
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;
};
const nextPage = (prop: any) => {
// console.log(prop.id);
router.push(`/retirement/listretire/${prop.id}/${type.value}`);
};
</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>

View file

@ -0,0 +1,678 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
รายชอทดสรรเครองราชอสรยาภรณ {{ name }} {{ organization }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop
:amount="stat.total"
label="จำนวนเครื่องราช ฯ ทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.sendInsig"
label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.remainInsig"
label="จำนวนเครื่องราช ฯ คงเหลือ"
color="#2EA0FF"
/>
</div>
</div>
</div>
</q-card>
<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">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<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-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
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-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="citizenId" :props="props">
{{ props.row.citizenId }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="organization" :props="props">
{{ props.row.organization }}
</q-td>
<q-td key="positionType" :props="props">
{{ props.row.positionType }}
</q-td>
<q-td key="positionAdmin" :props="props">
{{ props.row.positionAdmin }}
</q-td>
<q-td key="positionLine" :props="props">
{{ props.row.positionLine }}
</q-td>
<q-td key="positionNum" :props="props">
{{ props.row.positionNum }}
</q-td>
<q-td key="status" :props="props">
{{ props.row.status }}
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="blue"
icon="mdi-alert-circle-outline"
>
<q-tooltip>หมายเหต</q-tooltip>
</q-btn>
</q-td>
<q-td>
<q-btn
label="คืนแล้ว"
@click="clickNote(props.row.id)"
color="blue"
/>
</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>
<q-dialog v-model="modal" persistent>
<q-card style="width: 900px; max-width: 80vw">
<q-form ref="myForm">
<DialogHeader tittle="เพิ่มรายชื่อ " :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-md q-col-gutter-sm">
<q-input
class="col-12"
standout
dense
v-model="filterKeyword2"
ref="filterRef2"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter2"
/>
</template>
</q-input>
<div class="col-12">
<q-table
ref="table2"
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns2"
: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">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
dense
class="q-px-md"
outline
color="primary"
v-close-popup
label="เพิ่ม"
>
</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>
</q-card-section>
</q-form>
</q-card>
</q-dialog>
<q-dialog v-model="addNote" persistent>
<q-card style="min-width: 350px">
<DialogHeader tittle="คืนเครื่องราชฯ " :close="clickCloseNote" />
<q-card-section class="q-pt-none">
<q-input
dense
type="textarea"
v-model="Note"
label="กรอกเหตุผลที่ต้องการคืนเครื่องราชฯ "
autofocus
@keyup.enter="addNote = false"
/>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" @click="saveNote" color="public" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
const mixin = useCounterMixin();
const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
mixin;
const name = ref<string>("");
const $q = useQuasar(); // noti quasar
const modal = ref<boolean>(false);
const saveWriteNote = ref<any[]>([]);
const addNote = ref<boolean>(false);
const clickNote = () => {
addNote.value = true;
};
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const stat = ref<any>({
total: 3,
sendInsig: 2,
remainInsig: 1,
});
const visibleColumns = ref<string[]>([
"no",
"citizenId",
"name",
"organization",
"positionType",
"positionAdmin",
"positionLine",
"positionNum",
"status",
]); //
//
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "สังกัด",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionType",
align: "left",
label: "ตำแหน่งประเภท",
sortable: true,
field: "positionType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionAdmin",
align: "left",
label: "ตำแหน่งทางการบริหาร",
sortable: true,
field: "positionAdmin",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLine",
align: "left",
label: "ตำแหน่งในสายงาน/ระดับ",
sortable: true,
field: "positionLine",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionNum",
align: "left",
label: "ตำแหน่ง เลขที่",
sortable: true,
field: "positionNum",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ()
const rows = ref<any[]>([
{
no: "1",
citizenId: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
organization: "ฝ่ายบริหารงานทั่วไป",
positionType: "บริหาร",
positionAdmin: "บริหาร",
positionLine: "ชำนาญการพิเศษ",
positionNum: "ลกก.3",
status: "ยังมีชีวิต",
},
{
no: "2",
citizenId: "1XXXXXXXXXXXX",
name: "นางสาวภาพรรณ ลออ",
organization: "ฝ่ายบริหารงานทั่วไป",
positionType: "บริหาร",
positionAdmin: "จัดการงานทั่วไป",
positionLine: "ชำนาญงาน",
positionNum: "กบห.2",
status: "ยังมีชีวิต",
},
{
no: "3",
citizenId: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
organization: "ฝ่ายบริหารงานทั่วไป",
positionType: "บริหาร",
positionAdmin: "บริหาร",
positionLine: "ชำนาญการพิเศษ",
positionNum: "ลกก.3",
status: "ยังมีชีวิต",
},
]);
const visibleColumns2 = ref<string[]>([
"no",
"name",
"position",
"level",
"institution",
]);
// 2
const columns2 = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-สกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "ระดับ",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "institution",
align: "left",
label: "สังกัด",
sortable: true,
field: "institution",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// 2 ()
const rows2 = ref<any[]>([
{
no: "1",
name: "นายใจดี ยอดใจ ",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
no: "2",
name: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
no: "3",
name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร",
},
{
no: "4",
name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร",
},
{
no: "5",
name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร",
},
]);
// 2
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickClose = async () => {
modal.value = false;
};
const clickCloseNote = async () => {
addNote.value = false;
};
const clickAdd = () => {
modal.value = true;
};
const saveNote = async () => {
if (saveWriteNote.value.length == 0) {
dialogMessage(
$q,
"ไม่สามารถบันทึกข้อมูลได้",
"กรุณาเพิ่มหมายเหตุ",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
return;
} else {
await saveTextNote();
}
};
const saveTextNote = async () => {};
const redirectToPage = (id?: string) => {
router.push({ name: "allocateDetail" });
};
//
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
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>

View file

@ -0,0 +1,77 @@
<template>
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle 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)"
/>
<div>เพมรายการเครองราชอสรยาภรณ</div>
</div>
<div class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12 row">
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input class="col-2" dense outlined v-model="year" label="ปี" />
<q-input
class="col-8"
dense
outlined
v-model="typeInsig"
label="ประเภทเครื่องราชอิสริยาภรณ์"
/>
<q-input
class="col-2"
dense
outlined
v-model="total"
label="จำนวน"
/>
</div>
</div>
</div>
<q-separator />
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
@click="router.go(-1)"
/>
</div>
</q-card>
</div>
</div>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const router = useRouter();
const $q = useQuasar();
const dateStart = ref<any>(new Date());
const dateEnd = ref<any>(new Date());
const total = ref<any>("");
const typeInsig = ref<string>("");
const year = ref<string>("");
const datelast = ref<string>("");
const routeName = router.currentRoute.value.name;
</script>

View file

@ -0,0 +1,353 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
หนวยงานจดสรรเครองราชอสรยาภรณ {{ name }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop
:amount="stat.total"
label="จำนวนเครื่องราช ฯ ทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.sendInsig"
label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.remainInsig"
label="จำนวนเครื่องราช ฯ คงเหลือ"
color="#2EA0FF"
/>
</div>
</div>
</div>
</q-card>
<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">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<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-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
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-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="organization" :props="props">
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.organization }}
</q-td>
<q-td key="totalInsignia" :props="props">
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.totalInsignia }}
</q-td>
<q-td key="allocate" :props="props">
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.allocate }}
</q-td>
<q-td key="remain" :props="props">
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.remain }}
</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>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useQuasar } from "quasar";
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
const name = ref<string>("");
const $q = useQuasar(); // noti quasar
const modal = ref<boolean>(false);
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const stat = ref<any>({
total: 10,
sendInsig: 9,
remainInsig: 1,
});
const visibleColumns = ref<string[]>([
"no",
"organization",
"totalInsignia",
"allocate",
"remain",
]); //
//
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "totalInsignia",
align: "left",
label: "จำนวนครื่องราช ฯ ที่ได้รับ",
sortable: true,
field: "totalInsignia",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "allocate",
align: "left",
label: "จัดสรรให้ข้าราชการแล้ว",
sortable: true,
field: "allocate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "remain",
align: "left",
label: "คงเหลือ",
sortable: true,
field: "remain",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ()
const rows = ref<any[]>([
{
no: "1",
organization: "โครงสร้างและอัตรากำลัง",
totalInsignia: "3",
allocate: 3,
remain: 0,
},
{
no: "2",
organization: "การเรียนรู้มหานคร",
totalInsignia: "3",
allocate: 0,
remain: 0,
},
{
no: "3",
organization: "สารสนเทศทรัพยากรบุคคล",
totalInsignia: "2",
allocate: 2,
remain: 0,
},
{
no: "4",
organization: "วินัยและเสริมสร้างจริยธรรม",
totalInsignia: "1",
allocate: 1,
remain: 0,
},
]);
// 2
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = () => {
router.push({ name: "allocateDetailAdd" });
};
// const redirectToPage = (id?: string) => {
// router.push({ name: "allocateDetail" });
// };
//
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
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>

View file

@ -0,0 +1,359 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
ดสรรเครองราชอสรยาภรณ
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<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-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
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-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
key="no"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.rowIndex + 1 }}
</q-td>
<q-td
key="year"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.year }}
</q-td>
<q-td
key="insignia"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.insignia }}
</q-td>
<q-td
key="total"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.total }}
</q-td>
<q-td
key="done"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.done }}
</q-td>
<q-td
key="remain"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.remain }}
</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>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useQuasar } from "quasar";
import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
const $q = useQuasar(); // noti quasar
const modal = ref<boolean>(false);
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"no",
"year",
"insignia",
"total",
"done",
"remain",
]); //
//
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "year",
align: "left",
label: "ปี",
sortable: true,
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insignia",
align: "left",
label: "เครื่องราชอิสริยาภรณ์",
sortable: true,
field: "insignia",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "total",
align: "left",
label: "จำนวนทั้งหมด",
sortable: true,
field: "total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "done",
align: "left",
label: "จัดสรรแล้ว",
sortable: true,
field: "done",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "remain",
align: "left",
label: "คงเหลือ",
sortable: true,
field: "remain",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ()
const rows = ref<FormProprsalsRound[]>([
{
no: "1",
year: "2566",
insignia: "เบญจมาภรณ์มงกุฎไทย",
total: 10,
done: 9,
remain: 1,
},
{
round: "2",
year: "2566",
insignia: "จัตุรถาภรณ์มงกุฎไทย",
total: 20,
done: 18,
remain: 2,
},
{
round: "3",
year: "2566",
insignia: "ทวีติยาภรณ์มงกุฎไทย",
total: 15,
done: 10,
remain: 5,
},
{
round: "4",
year: "2566",
insignia: "เหรียญเงินช้างเผือก",
total: 5,
done: 5,
remain: 0,
},
]);
// 2
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = () => {
router.push({ name: "allocateAdd" });
};
const redirectToPage = (id?: string) => {
router.push({ name: "allocateDetail" });
};
//
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
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>

View file

@ -0,0 +1,27 @@
<template>
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold">{{
tittle
}}</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="close"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
</template>
<script setup lang="ts">
const props = defineProps({
tittle: String,
close: {
type: Function,
default: () => console.log("not function"),
},
});
const close = async () => {
props.close();
};
</script>

View file

@ -22,10 +22,11 @@
>
<q-tab name="hight" label="ขั้นสายสะพาน" />
<q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
<q-tab name="medal" label="เหรียญบำเหน็จบำนาญ" />
</q-tabs>
<q-separator />
<div class="q-py-md q-px-lg">
<div>
<!-- <div>
<label class="q-mr-sm">รอบ</label>
<q-btn
flat
@ -36,10 +37,84 @@
:class="getArrow(arrow)"
@click="clickRound"
/>
</div>
</div> -->
<Transition>
<div v-if="arrow" class="bg-base rounded-borders q-pa-md">
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
<!-- <div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="issue"
:label="`${'ฉบับ'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="book"
:label="`${'เล่มที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="volume"
:label="`${'เล่ม'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="section"
:label="`${'ตอนที่'}`"
hide-bottom-space
/>
</div> -->
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="government"
label="ราชกิจจานุเบกษา"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="document"
label="เอกสารประกอบ"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-6 col-md-2">
<datepicker
menu-class-name="modalfix"
@ -116,79 +191,8 @@
</template>
</datepicker>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="issue"
:label="`${'ฉบับ'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="book"
:label="`${'เล่มที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="volume"
:label="`${'เล่ม'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="section"
:label="`${'ตอนที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="government"
label="ราชกิจจานุเบกษา"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="document"
label="เอกสารประกอบ"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-xs-12 col-md-6 justify-end">
<q-btn label="บันทึก" @click="save" color="public" />
</div>
</div>
</div>

View file

@ -14,7 +14,16 @@ const insigniaProposals = () =>
import("@/modules/07_insignia/components/1_Proposals/listProposals.vue");
const roundAdd = () =>
import("@/modules/07_insignia/components/1_Proposals/addProposals.vue");
const listMange = () =>
import("@/modules/07_insignia/components/2_Manage/listManage.vue");
const listAllocate = () =>
import("@/modules/07_insignia/components/4_Allocate/listAllocate.vue");
const allocateAdd = () =>
import("@/modules/07_insignia/components/4_Allocate/allocateAdd.vue");
const allocateDetail = () =>
import("@/modules/07_insignia/components/4_Allocate/detail.vue");
const allocateDetailAdd = () =>
import("@/modules/07_insignia/components/4_Allocate/addDetail.vue");
export default [
{
path: "/insignia",
@ -87,4 +96,54 @@ export default [
Role: "insignia",
},
},
{
path: "/insignia/manage/list-manage",
name: "insigniaManage",
component: listMange,
meta: {
Auth: true,
Key: [8.6],
Role: "insignia",
},
},
{
path: "/insignia/allocate/list-allocate",
name: "insigniaAllocate",
component: listAllocate,
meta: {
Auth: true,
Key: [8.7],
Role: "insignia",
},
},
{
path: "/insignia/allocate/allocate-add",
name: "allocateAdd",
component: allocateAdd,
meta: {
Auth: true,
Key: [8.8],
Role: "insignia",
},
},
{
path: "/insignia/allocate/detail",
name: "allocateDetail",
component: allocateDetail,
meta: {
Auth: true,
Key: [8.9],
Role: "insignia",
},
},
{
path: "/insignia/allocate/detail-add",
name: "allocateDetailAdd",
component: allocateDetailAdd,
meta: {
Auth: true,
Key: [8.9],
Role: "insignia",
},
},
];