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

Merge branch 'develop' into warunee-dev

Browse source
This commit is contained in:
Warunee Tamkoo 2023-08-04 15:12:33 +07:00
commit 56ebfb89c7
24 changed files with 3319 additions and 1016 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/api/05_placement/api.placement.ts
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,16 @@ 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`,
createOrder: () => `${order}/order/detail`,
listOrder: () => `${order}/order`,
detailOrder:(orderId:string) => `${order}/order/detail/${orderId}`,
deleteOrder:(orderId:string) => `${order}/order/${orderId}`,
typeOrder: () => `${order}/order/order-type`,
examroundOrder: () => `${order}/order/detail/exam-round`,
};

160
src/components/information/Image.vue
View file

@ -66,9 +66,9 @@
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
{{ props.fullName }}
{{ fullname }}
</div>
<div>{{ props.position }}</div>
<div>{{ position }}</div>
</div>
</div>
<q-space />
@ -164,22 +164,14 @@
</q-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const props = defineProps({
fullName: {
type: String,
default: "ชื่อ สกุล",
required: true,
},
position: {
type: String,
default: "ตำแหน่ง",
required: true,
},
fetchData: {
type: Function,
default: () => console.log("not function"),
@ -200,15 +192,33 @@ const props = defineProps({
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
const {
date2Thai,
dateToISO,
messageError,
dialogMessage,
success,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const router = useRouter();
const fullname = ref<string>("");
const position = ref<string>("");
const imageUrl = ref<any>(null);
const inputImage = ref<any>(null);
const dialogImage = ref<boolean>(false);
const images = ref<any>([]);
const activeImage = ref<any | null>(null);
const profileId = ref<string>("");
const dialogImage = ref<boolean>(false);
const images = ref<any>([]);
onMounted(async () => {
await fetchData();
});
const closeImage = () => {
dialogImage.value = false;
@ -218,7 +228,7 @@ const clickImage = async () => {
// ***************************************************************************************************
// ****************** fetch data รูปภาพทั้งหมด ******************
// ***************************************************************************************************
await fetchAvatarHistory();
dialogImage.value = true;
};
@ -227,14 +237,18 @@ const uploadImage = async (e: any) => {
if (input.length > 0) {
const formData = new FormData();
formData.append("FileData", input[0]);
await props.fetchUpload(profileId.value, formData).then(async () => {
await props.fetchData();
closeImage();
});
// ***************************************************************************************************
// ****************** ต้องทำ function props รับ formData กลับ ******************
// ****************** finally ทำการ fetch data,dialogImage.value = false ******************
// ***************************************************************************************************
showLoader();
await http
.post(config.API.profileAvatarId(route.params.id.toString()), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
dialogImage.value = false;
});
return;
}
};
@ -253,7 +267,20 @@ const selectAvatarHistory = async () => {
);
return;
}
await props.fetchSave(profileId.value);
showLoader();
await http
.put(config.API.profileAvatarId(route.params.id.toString()), {
avatar: activeImage.value.avatarId,
})
.then((res) => {
dialogImage.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
// ***************************************************************************************************
// ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ******************
// ***************************************************************************************************
@ -283,14 +310,77 @@ const deletePhoto = async (id: string) => {
};
const fetchDataDelete = async (id: string) => {
await props.fetchDelete(id).then(async () => {
await props.fetchData();
await clickImage();
});
// ***************************************************************************************************
// ****************** fetch delete รูปภาพ ******************
// ****************** finally ทำการ fetch data,clickImage() ******************
// ***************************************************************************************************
showLoader();
await http
.delete(config.API.profileAvatarHistoryId(id))
.then((res) => {
success($q, "ลบรูปภาพสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await clickImage();
// dialogImage.value = false;
});
};
const fetchData = async () => {
showLoader();
await http
.get(config.API.profileAvatarId(route.params.id.toString()))
.then((res) => {
const data = res.data.result;
// console.log(data);
fullname.value = data.fullname;
imageUrl.value = data.avatar;
position.value = data.position;
// profileType.value = data.profileType;
// employeeClass.value =
// data.employeeClass == null ? "" : data.employeeClass;
// const reason = reasonOptions.value.filter(
// (r: DataOption) => r.id == data.leaveReason
// );
// if (reason.length > 0) {
// leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
// } else {
// leaveReason.value = "";
// }
// reasonStatus.value = reason.length > 0 ? true : false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fetchAvatarHistory = async () => {
showLoader();
await http
.get(config.API.profileAvatarHistoryId(route.params.id.toString()))
.then((res) => {
const data = res.data.result;
console.log(data);
images.value = [];
data.map((e: any) => {
images.value.push({
id: e.id,
avatar: e.avatar,
avatarId: e.avatarId,
createdDate: new Date(e.createdDate),
isActive: e.isActive,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const imageClass = (n: any) => {

16
src/interface/request/main/main.ts
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",

14
src/modules/02_organizational/views/ManageReport2.vue
View file

@ -115,11 +115,14 @@ import http from "@/plugins/http";
import config from "@/app.config";
import type { treeTab } from "@/modules/04_registry/interface/index/Main";
import type { ResponseTree } from "@/modules/02_organizational/interface/response/Mapping";
import { useDataStore } from "@/stores/data";
const dataStore = useDataStore();
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const { selectedReport2, expandedReport2, changeTreeReport2 } = dataStore;
const { date2Thai, success, dateToISO, modalError, showLoader, hideLoader } =
mixin;
const filter = ref<string>(""); //search data table
@ -279,14 +282,9 @@ const nodeTree = async () => {
const data = res.data.result;
nodesTree.value = data;
if (data.length > 0) {
selected.value =
dataStore.selectedReport2 == ""
? data[0].id
: dataStore.selectedReport2;
selected.value = selectedReport2 == "" ? data[0].id : selectedReport2;
expanded.value =
dataStore.expandedReport2.length == 0
? [data[0].id]
: dataStore.expandedReport2;
expandedReport2.length == 0 ? [data[0].id] : expandedReport2;
}
})
.catch((e: any) => {})
@ -301,7 +299,7 @@ const onSelected = async (id: string) => {
};
const clickTree = () => {
dataStore.changeTreeReport2(expanded.value, selected.value);
changeTreeReport2(expanded.value, selected.value);
};
const onHistory = async () => {

15
src/modules/04_registry/views/Main.vue
View file

@ -144,11 +144,13 @@ import ProfileTable from "@/modules/04_registry/components/TableProfile.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
// import { jsontoexcel } from "vue-table-to-excel";
import { useDataStore } from "@/stores/data";
const dataStore = useDataStore();
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const { changeTreeRegister, selectedRegister, expandedRegister } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
@ -1162,7 +1164,7 @@ const onSelected = async (id: string) => {
};
const clickTree = () => {
dataStore.changeTreeRegister(expanded.value, selected.value);
changeTreeRegister(expanded.value, selected.value);
};
const nodeTree = async () => {
@ -1173,14 +1175,9 @@ const nodeTree = async () => {
const data = res.data.result;
nodesTree.value = data;
if (data.length > 0) {
selected.value =
dataStore.selectedRegister == ""
? data[0].id
: dataStore.selectedRegister;
selected.value = selectedRegister == "" ? data[0].id : selectedRegister;
expanded.value =
dataStore.expandedRegister.length == 0
? [data[0].id]
: dataStore.expandedRegister;
expandedRegister.length == 0 ? [data[0].id] : expandedRegister;
}
})
.catch((e: any) => {

416
src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
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.OrderType)"
>
<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 = (id?: number) => {
// 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.deleteOrder(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) => {

15
src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
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 {

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

@ -1,394 +1,212 @@
<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 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"
<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>
<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 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>
<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>
<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
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="test"
:rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
hide-bottom-space
:label="`${'รอบการสอบ'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="testOption"
option-value="id"
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"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
) "
/>
</div>
<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 :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
:label="`${'พ.ศ.'}`" dense outlined>
</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"
><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
<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-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
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 http from "@/plugins/http";
import { useQuasar } from "quasar";
import config from "@/app.config";
import { useRoute } from "vue-router";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
const $q = useQuasar(); //ใช้ noti quasar
const route = useRoute();
const props = defineProps({
next: {
@ -402,6 +220,7 @@ const props = defineProps({
});
const next = () => props.next();
const previous = () => props.previous();
const orderId = route.params.orderid;
const myForm = ref<QForm>();
@ -411,98 +230,225 @@ const nameOrder = ref<string>("");
const nameCommand = ref<string>("");
const positionCommand = ref<string>("");
const dateYear = ref<number>(new Date().getFullYear());
const command = ref<string>("");
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<string>("");
const typeOrderOption = ref<DataOption[]>([]);
const typeOrderOptionFilter = ref<DataOption[]>([]);
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<DataOption[]>([]);
const byOrderOptionFilter = ref<DataOption[]>([]);
const byOrderOption = ref<DataOption1[]>([
{ name: "นายดด นน", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const byOrderOptionFilter = ref<DataOption1[]>([]);
const register = ref<string>("");
const registerOption = ref<DataOption[]>([]);
const registerOption = ref<DataOption1[]>([
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const registerOptionFilter = ref<DataOption[]>([]);
const announce = ref<string>("");
const announceOption = ref<DataOption[]>([]);
const announceOption = ref<DataOption1[]>([
{ name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const announceOptionFilter = ref<DataOption[]>([]);
const position = ref<string>("");
const positionOption = ref<DataOption[]>([]);
const positionOption = ref<DataOption1[]>([
{ name: "ผู้ช่วย", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const positionOptionFilter = ref<DataOption[]>([]);
const test = ref<string>("");
const testOption = 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;
// 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 "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 "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;
// 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 () => {
next();
// await myForm.value!.validate().then((result: boolean) => {
// if (result) {
// next();
// }
// });
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();
createListOrder(formdata);
});
}
});
};
const createListOrder = async (formData: Object) => {
console.log(formData);
await http
.post(config.API.createOrder(), formData)
.then((res) => {
console.log(res);
next();
})
.catch((e) => {
console.log(e);
})
.finally(() => {
hideLoader();
});
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่

10
src/modules/05_placement/components/Receive/receiveDetail.vue
View file

@ -5,7 +5,12 @@
<Information v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="government" name="16" class="row col-12 q-mt-md">
<Government v-model:statusEdit="statusEdit" :statusAdd="false" />
<Government
v-model:statusEdit="statusEdit"
:statusAdd="false"
profileType="test"
employeeClass="test"
/>
</div>
<div id="address" name="17" class="row col-12 q-mt-md">
<Address v-model:statusEdit="statusEdit" :statusAdd="false" />
@ -14,7 +19,7 @@
<Family v-model:statusEdit="statusEdit" :statusAdd="false" />
</div>
<div id="certicate" name="15" class="row col-12 q-mt-md">
<Certicate v-model:statusEdit="statusEdit" />
<Certicate v-model:statusEdit="statusEdit" profileType="test" />
</div>
<div id="education" name="2" class="row col-12 q-mt-md">
<EducationVue v-model:statusEdit="statusEdit" />
@ -70,6 +75,7 @@
</template>
<script setup lang="ts">
import { ref } from "vue";
import Image from "@/components/information/Image.vue";
import Information from "@/components/information/Information.vue";
import Government from "@/components/information/Government.vue";

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

@ -282,10 +282,10 @@ const columns2 = ref<QTableProps["columns"]>([
},
]);
const openModalTree = (pid: string) => {
modalTree.value = true;
personalId.value = pid;
const openModalTree = (id: string) => {
personalId.value = id;
personal.value = [];
modalTree.value = true;
};
const closeModalTree = async () => {
@ -293,8 +293,10 @@ const closeModalTree = async () => {
modalTree.value = false;
};
const nextPage = (id: string) => {
router.push(`/receive/${id}`);
const nextPage = (row: any) => {
router.push({
path: `/receive/${row.personalId}`,
});
};
</script>
<template>
@ -367,57 +369,42 @@ const nextPage = (id: string) => {
<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"
@click="nextPage(props.row.personalId)"
>
<q-td key="no" :props="props" @click="nextPage(props.row)">
{{ props.rowIndex + 1 }}
</q-td>
<q-td
key="fullname"
:props="props"
@click="nextPage(props.row.personalId)"
@click="nextPage(props.row)"
>
{{ props.row.fullname }}
</q-td>
<q-td
key="position"
:props="props"
@click="nextPage(props.row.personalId)"
@click="nextPage(props.row)"
>
{{ props.row.position }}
</q-td>
<q-td
key="positionLevel"
:props="props"
@click="nextPage(props.row.personalId)"
@click="nextPage(props.row)"
>
{{ props.row.positionLevel }}
</q-td>
<q-td
key="oc"
:props="props"
@click="nextPage(props.row.personalId)"
>
<q-td key="oc" :props="props" @click="nextPage(props.row)">
{{ props.row.oc }}
</q-td>
<q-td
key="agency"
:props="props"
@click="nextPage(props.row.personalId)"
>
<q-td key="agency" :props="props" @click="nextPage(props.row)">
{{ props.row.agency }}
</q-td>
<q-td
key="status"
:props="props"
@click="nextPage(props.row.personalId)"
>
<q-td key="status" :props="props" @click="nextPage(props.row)">
{{ props.row.status }}
</q-td>
<q-td auto-width>

12
src/modules/05_placement/router.ts
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: {

4
src/modules/05_placement/store.ts
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;
}
};

29
src/modules/07_insignia/components/1_Proposals/listProposals.vue
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: "ยังไม่ได้เสนอ",
},
]);

43
src/modules/07_insignia/components/2_Manage/StatCard.vue Normal file
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>

715
src/modules/07_insignia/components/2_Manage/listManage.vue Normal file
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>

678
src/modules/07_insignia/components/4_Allocate/addDetail.vue Normal file
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>

77
src/modules/07_insignia/components/4_Allocate/allocateAdd.vue Normal file
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>

353
src/modules/07_insignia/components/4_Allocate/detail.vue Normal file
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>

359
src/modules/07_insignia/components/4_Allocate/listAllocate.vue Normal file
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>

27
src/modules/07_insignia/components/DialogHeader.vue Normal file
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>

154
src/modules/07_insignia/components/RecordInsignia.vue
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>

61
src/modules/07_insignia/router.ts
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",
},
},
];

10
src/modules/08_registryEmployee/request/Main.ts
View file

@ -16,10 +16,14 @@ interface FormRegistryEmployee {
dateAppoint: String | null;
dateStart: String | null;
createdAt: String | null;
// salaryDate: String | null;
// salaryDate: String | null;
isLeave: String;
// leaveReason: string;
// leaveReason: string;
leaveDateOrder: String | null;
draftPositionEmployee: String | null;
draftOrganizationOrganization: String | null;
newAgency: String | null;
currentAgency: String | null;
}
interface ResponseEmployeeTemp {
id: string;
@ -43,5 +47,7 @@ interface ResponseEmployeeTemp {
isLeave: boolean;
leaveReason: string;
leaveDateOrder: Date | null;
draftPositionEmployee: String | null;
draftOrganizationOrganization: String | null;
}
export type { ResponseEmployeeTemp, FormRegistryEmployee };

294
src/modules/08_registryEmployee/views/Main.vue
View file

@ -56,18 +56,12 @@
</div>
</div>
<div class="col-12 q-pt-sm">
<q-table
flat
bordered
dense
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumnsEmployeeTemp"
:filter="filter"
row-key="id"
class="custom-header-table"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -90,6 +84,53 @@
{{ props.row.fullname }}
</q-td>
<q-td
key="newAgency"
:props="props"
@click="redirectToPage(props.row.id)"
>
<div
class="col-12"
v-if="
props.row.draftOrganizationOrganization == null &&
props.row.draftPositionEmployee == null
"
>
<div class="text-weight-medium">
{{ "-" }}
</div>
</div>
<div class="col-12" v-else>
<div class="text-weight-medium">
{{ props.row.draftOrganizationOrganization ?? "-" }}
</div>
<div class="text-weight-light">
{{ props.row.draftPositionEmployee ?? "-" }}
</div>
</div>
</q-td>
<q-td
key="currentAgency"
:props="props"
@click="redirectToPage(props.row.id)"
>
<div
class="col-12"
v-if="props.row.oc == null && props.row.position == null"
>
<div class="text-weight-medium">
{{ "-" }}
</div>
</div>
<div class="col-12" v-else>
<div class="text-weight-medium">
{{ props.row.oc ?? "-" }}
</div>
<div class="text-weight-light">
{{ props.row.position ?? "-" }}
</div>
</div>
</q-td>
<!-- <q-td
key="positionEmployeePosition"
:props="props"
@click="redirectToPage(props.row.id)"
@ -119,7 +160,7 @@
</q-td>
<q-td key="oc" :props="props" @click="redirectToPage(props.row.id)">
{{ props.row.oc }}
</q-td>
</q-td> -->
<q-td
key="amount"
:props="props"
@ -250,19 +291,7 @@
</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>
</d-table>
</div>
</q-card>
<q-dialog v-model="modal" persistent>
@ -416,18 +445,6 @@
</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>
</d-table>
</q-card-section>
@ -439,7 +456,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, useAttrs } from "vue";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QInput, QForm, QTableProps } from "quasar";
@ -502,13 +519,6 @@ const columnsModal = [
},
];
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumnsOrder = ref<String[]>([
"no",
"fullname",
@ -548,9 +558,11 @@ visibleColumnsEmployeeTemp.value = [
"salaryDate",
"age",
"amount",
"isLeave",
"leaveDateOrder",
"newAgency",
"currentAgency",
];
// "isLeave",
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -575,13 +587,12 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "positionEmployeePosition",
name: "newAgency",
align: "left",
label: "ตำแหน่ง",
label: "หน่วยงานที่รับการบรรจุ",
sortable: true,
field: "positionEmployeePosition",
field: "newAgency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -591,25 +602,11 @@ const columns = ref<QTableProps["columns"]>([
}),
},
{
name: "positionEmployeePositionSide",
name: "currentAgency",
align: "left",
label: "ด้านของตำแหน่ง",
label: "หน่วยงานปัจจุบัน",
sortable: true,
field: "positionEmployeePositionSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "positionLine",
align: "left",
label: "สายงาน",
sortable: true,
field: "positionLine",
field: "currentAgency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -619,34 +616,77 @@ const columns = ref<QTableProps["columns"]>([
}),
},
{
name: "positionEmployeeGroup",
align: "left",
label: "กลุ่มงาน",
sortable: true,
field: "positionEmployeeGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "oc",
align: "left",
label: "สังกัด",
sortable: true,
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
// {
// name: "positionEmployeePosition",
// align: "left",
// label: "ตำแหน่ง",
// sortable: true,
// field: "positionEmployeePosition",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, {
// numeric: true,
// sensitivity: "base",
// }),
// },
// {
// name: "positionEmployeePositionSide",
// align: "left",
// label: "ด้านของตำแหน่ง",
// sortable: true,
// field: "positionEmployeePositionSide",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, {
// numeric: true,
// sensitivity: "base",
// }),
// },
// {
// name: "positionLine",
// align: "left",
// label: "สายงาน",
// sortable: true,
// field: "positionLine",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, {
// numeric: true,
// sensitivity: "base",
// }),
// },
// {
// name: "positionEmployeeGroup",
// align: "left",
// label: "กลุ่มงาน",
// sortable: true,
// field: "positionEmployeeGroup",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, {
// numeric: true,
// sensitivity: "base",
// }),
// },
// {
// name: "oc",
// align: "left",
// label: "สังกัด",
// sortable: true,
// field: "oc",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, {
// numeric: true,
// sensitivity: "base",
// }),
// },
{
name: "amount",
align: "left",
@ -751,17 +791,17 @@ const columns = ref<QTableProps["columns"]>([
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "isLeave",
align: "left",
label: "สถานะ",
sortable: true,
field: "isLeave",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
// {
// name: "isLeave",
// align: "left",
// label: "สถานะ",
// sortable: true,
// field: "isLeave",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// // sort: (a: string, b: string) =>
// // a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "leaveDateOrder",
align: "left",
@ -1204,7 +1244,6 @@ const getPosition = async (id: string) => {
hideLoader();
});
};
const attrs = ref<any>(useAttrs());
const clickAddOrder = () => {
modaladdOrder.value = true;
@ -1307,13 +1346,6 @@ const next = (id: string) => {
router.push(`/registryEmployee/${id}`);
};
const paginationLabel = (start: number, end: number, total: number) => {
// if (props.paging == true)
// return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
// else
return start + "-" + end + " ใน " + total;
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
filter.value = "";
@ -1462,6 +1494,10 @@ const showEmployeeTemp = async () => {
e.leaveDateOrder == null
? null
: date2Thai(new Date(e.leaveDateOrder)),
newAgency: "",
currentAgency: "",
draftPositionEmployee: e.draftPositionEmployee,
draftOrganizationOrganization: e.draftOrganizationOrganization,
});
});
})
@ -1522,6 +1558,10 @@ const showEmployeeTempOrder = async () => {
e.leaveDateOrder == null
? null
: date2Thai(new Date(e.leaveDateOrder)),
newAgency: "",
currentAgency: "",
draftPositionEmployee: e.draftPositionEmployee,
draftOrganizationOrganization: e.draftOrganizationOrganization,
});
});
})
@ -1530,7 +1570,7 @@ const showEmployeeTempOrder = async () => {
})
.finally(() => {
hideLoader();
console.log(rowsOrder);
// console.log(rowsOrder);
});
};
@ -1540,34 +1580,4 @@ const onSelected = async (id: string) => {
const deleteData = async (id: string) => {};
</script>
<style lang="scss">
.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>
<style lang="scss"></style>