Merge branch 'anandadev' into develop
This commit is contained in:
AnandaTon
commit
51cc9e3cee
5 changed files with 820 additions and 44 deletions
|
|
@ -0,0 +1,543 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่งบรรจุ</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="row q-pa-md">
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-select
|
||||
v-model="fiscalyear"
|
||||
label="ปีงบประมาณ"
|
||||
dense
|
||||
clearable
|
||||
emit-value
|
||||
map-options
|
||||
:options="fiscalyearOP"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchfiscalyear"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-6">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
@click="clickAdd"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<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="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
|
||||
<q-card bordered class="col-12 filter-card">
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
|
||||
<q-select
|
||||
v-model="examType"
|
||||
label="ประเภท"
|
||||
dense
|
||||
clearable
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="examTypeOP"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
|
||||
<q-select
|
||||
v-model="examType"
|
||||
label="สถานะ"
|
||||
dense
|
||||
clearable
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="examTypeOP"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchFilterTable"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="UpdataData"
|
||||
:filter="filterKeyword"
|
||||
row-key="Order"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
@click="redirectToPage(props.row.Order)"
|
||||
>
|
||||
<q-td key="Order" :props="props">
|
||||
{{ props.row.Order }}
|
||||
</q-td>
|
||||
<q-td key="OrderNum" :props="props">
|
||||
{{ props.row.OrderNum }}
|
||||
</q-td>
|
||||
<q-td key="OrderDate" :props="props">
|
||||
{{ props.row.OrderDate }}
|
||||
</q-td>
|
||||
<q-td key="OrderBy" :props="props">
|
||||
{{ props.row.OrderBy }}
|
||||
</q-td>
|
||||
<q-td key="Signer" :props="props">
|
||||
{{ props.row.Signer }}
|
||||
</q-td>
|
||||
<q-td key="OrderStatus" :props="props">
|
||||
<q-icon
|
||||
v-if="props.row.OrderStatus == false"
|
||||
name="mdi-close"
|
||||
color="red"
|
||||
class="text-h5"
|
||||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
name="mdi-check"
|
||||
color="positive"
|
||||
class="text-h5"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<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>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, useAttrs } 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 { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||
import router from "@/router";
|
||||
|
||||
const DataStore = usePlacementDataStore();
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { dateText } = mixin;
|
||||
|
||||
// แปลงเวลา ค.ศ ให้เป็น พ.ศ
|
||||
const textDate = (value: Date) => {
|
||||
return dateText(value);
|
||||
};
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "Order",
|
||||
align: "left",
|
||||
label: "คำสั่ง",
|
||||
sortable: true,
|
||||
field: "Order",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "OrderNum",
|
||||
align: "left",
|
||||
label: "เลขที่คำสั่ง",
|
||||
sortable: true,
|
||||
field: "OrderNum",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fiscalYear",
|
||||
align: "left",
|
||||
label: "ปีงบประมาณ",
|
||||
sortable: true,
|
||||
field: "fiscalYear",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "OrderDate",
|
||||
align: "left",
|
||||
label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
|
||||
sortable: true,
|
||||
field: "OrderDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "OrderBy",
|
||||
align: "left",
|
||||
label: "คำสั่งโดย",
|
||||
sortable: true,
|
||||
field: "OrderBy",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "Signer",
|
||||
align: "left",
|
||||
label: "ผู้ลงนาม",
|
||||
sortable: false,
|
||||
field: "Signer",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "OrderStatus",
|
||||
align: "left",
|
||||
label: "สถานะคำสั่ง",
|
||||
sortable: false,
|
||||
field: "OrderStatus",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<FormOrderPlacementMainData[]>([
|
||||
{
|
||||
Order: 1,
|
||||
OrderNum: "1/2565",
|
||||
fiscalYear: 2565,
|
||||
OrderDate: "30 พ.ค. 2565",
|
||||
OrderBy: "สำนักงาน กทม.",
|
||||
Signer: "นาม สมคิด ยอดใจ ",
|
||||
OrderStatus: true,
|
||||
},
|
||||
{
|
||||
Order: 2,
|
||||
OrderNum: "1/2565",
|
||||
fiscalYear: 2565,
|
||||
OrderDate: "30 พ.ค. 2565",
|
||||
OrderBy: "สำนักงาน กทม.",
|
||||
Signer: "นาม สมคิด ยอดใจ ",
|
||||
OrderStatus: true,
|
||||
},
|
||||
{
|
||||
Order: 3,
|
||||
OrderNum: "1/2565",
|
||||
fiscalYear: 2565,
|
||||
OrderDate: "30 พ.ค. 2565",
|
||||
OrderBy: "สำนักงาน กทม.",
|
||||
Signer: "นาม สมคิด ยอดใจ ",
|
||||
OrderStatus: false,
|
||||
},
|
||||
{
|
||||
Order: 4,
|
||||
OrderNum: "1/2564",
|
||||
fiscalYear: 2564,
|
||||
OrderDate: "30 พ.ค. 2564",
|
||||
OrderBy: "สำนักงาน กทม.",
|
||||
Signer: "นาม สมคิด ยอดใจ ",
|
||||
OrderStatus: true,
|
||||
},
|
||||
{
|
||||
Order: 5,
|
||||
OrderNum: "1/2566",
|
||||
fiscalYear: 2566,
|
||||
OrderDate: "30 พ.ค. 2566",
|
||||
OrderBy: "สำนักงาน กทม.",
|
||||
Signer: "นาม สมคิด ยอดใจ ",
|
||||
OrderStatus: true,
|
||||
},
|
||||
]);
|
||||
|
||||
let OriginalData = ref<FormOrderPlacementMainData[]>([]);
|
||||
let UpdataData = ref<FormOrderPlacementMainData[]>([]);
|
||||
|
||||
const OriginalDataFetch = async () => {
|
||||
// API
|
||||
// await http
|
||||
// .get(config.API.// ตัวอย่าง)
|
||||
// .then((res: any) => {
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// });
|
||||
await DataStore.DataMain(rows.value);
|
||||
OriginalData.value = await DataStore.DataMainOrig;
|
||||
UpdataData.value = OriginalData.value;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await OriginalDataFetch();
|
||||
fiscalYearFilter();
|
||||
examTypeFilter();
|
||||
searchFilterTable();
|
||||
});
|
||||
|
||||
// ดูรายการสอบแข่งขัน หน้าต่อไป
|
||||
const redirectToPage = (id?: number) => {
|
||||
// router.push({ name: 'placementDetail'});
|
||||
router.push(`/placement/detail`);
|
||||
};
|
||||
|
||||
const clickDelete = (id: string) => {
|
||||
$q.dialog({
|
||||
title: "ยืนยันการลบข้อมูล",
|
||||
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(async () => {
|
||||
await deleteData(id);
|
||||
})
|
||||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
};
|
||||
|
||||
const clickAdd = () => {
|
||||
router.push({ name: "addOrderReplace" });
|
||||
};
|
||||
|
||||
// เลือกปีงบประมาณ
|
||||
const fiscalyear = ref<number | null>(0);
|
||||
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
const addedfiscalYearValues: number[] = [];
|
||||
const fiscalYearFilter = async () => {
|
||||
// API
|
||||
// await http
|
||||
// .get(config.API.// ตัวอย่าง)
|
||||
// .then((res: any) => {
|
||||
// DataStore.DataMainYearSet(rows.value);
|
||||
// fiscalyearOP.value = DataStore.DataMainYearGet;
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// });
|
||||
for (let data of OriginalData.value) {
|
||||
const year = data.fiscalYear;
|
||||
|
||||
if (fiscalyear.value === null || year > fiscalyear.value) {
|
||||
fiscalyear.value = year;
|
||||
}
|
||||
|
||||
if (!addedfiscalYearValues.includes(year)) {
|
||||
fiscalyearOP.push({ id: year, name: year.toString() });
|
||||
addedfiscalYearValues.push(year);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// เลือกปีงบประมาณตาม 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);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const visibleColumns = ref<string[]>([
|
||||
"Order",
|
||||
"OrderNum",
|
||||
"OrderDate",
|
||||
"OrderBy",
|
||||
"Signer",
|
||||
"OrderStatus",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
|
||||
// ประเภทการสอบ
|
||||
const examType = ref<number | null>(0);
|
||||
const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
const addedexamTypeValues: number[] = [];
|
||||
const examTypeFilter = async () => {
|
||||
for (let data of OriginalData.value) {
|
||||
const examTypeValue = data.examType;
|
||||
if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) {
|
||||
examTypeOP.push({ id: 1, name: "คัดเลือก" });
|
||||
addedexamTypeValues.push(1);
|
||||
} else if (examTypeValue == 2 && !addedexamTypeValues.includes(2)) {
|
||||
examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
|
||||
addedexamTypeValues.push(2);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const searchFilterTable = async () => {
|
||||
// console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
|
||||
await DataStore.DataUpdateMain(
|
||||
examTime.value,
|
||||
examType.value,
|
||||
expiredAccount.value
|
||||
);
|
||||
UpdataData.value = DataStore.DataMainUpdate;
|
||||
};
|
||||
|
||||
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: #ededed;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<!-- page:detail page รายการสอบทั้งหมด -->
|
||||
<template>
|
||||
<q-toolbar class="q-pa-sm text-center">
|
||||
<q-toolbar-title class="text-dark">
|
||||
{{ tittle }}
|
||||
{{ `ครั้งที่${round}/${yearly == null ? "" : yearly + 543}` }}
|
||||
</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
<q-stepper
|
||||
v-model="step"
|
||||
ref="stepper"
|
||||
alternative-labels
|
||||
header-nav
|
||||
animated
|
||||
done-icon="check"
|
||||
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
|
||||
>
|
||||
<q-step
|
||||
:done="step > 2"
|
||||
:disable="stepRaw < 2"
|
||||
:name="2"
|
||||
title="รายละเอียดการออกคำสั่ง"
|
||||
:icon="
|
||||
stepRaw >= 2
|
||||
? stepRaw == 2
|
||||
? 'mdi-pencil'
|
||||
: 'mdi-check-bold'
|
||||
: 'mdi-account'
|
||||
"
|
||||
>
|
||||
<q-card bordered class="q-pa-lg">
|
||||
<q-card-actions
|
||||
v-if="status === 'rejectRegister'"
|
||||
class="q-pa-md q-mb-md text-left row bg-red-2"
|
||||
>
|
||||
<div class="col-12 text-red-12">
|
||||
<li>{{ rejectMessage }}</li>
|
||||
</div>
|
||||
</q-card-actions>
|
||||
<ExamForm :fetchStep="fetchStep" :status="status" />
|
||||
</q-card>
|
||||
</q-step>
|
||||
<q-step
|
||||
:done="step > 3"
|
||||
:disable="stepRaw < 3"
|
||||
:name="3"
|
||||
title="เลือกรายชื่อ"
|
||||
:icon="
|
||||
stepRaw >= 3
|
||||
? stepRaw == 3
|
||||
? 'mdi-pencil'
|
||||
: 'mdi-check-bold'
|
||||
: 'mdi-receipt'
|
||||
"
|
||||
v-if="stepPayment"
|
||||
>
|
||||
<q-card bordered class="q-pa-lg">
|
||||
<ExamPayment :fetchStep="fetchStep" :status="status" />
|
||||
</q-card>
|
||||
</q-step>
|
||||
<q-step
|
||||
:done="step > 4"
|
||||
:disable="stepRaw < 4"
|
||||
:name="4"
|
||||
title="เลือก"
|
||||
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
|
||||
>
|
||||
<q-card bordered class="q-pa-lg">
|
||||
<ExamFinished :fetchStep="fetchStep" :status="status" />
|
||||
</q-card>
|
||||
</q-step>
|
||||
<q-step
|
||||
:done="step > 5"
|
||||
:disable="stepRaw < 5"
|
||||
:name="5"
|
||||
title="รายละเอียดคำสั่งและแนบท้าย"
|
||||
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
|
||||
>
|
||||
<q-card bordered class="q-pa-lg">
|
||||
<ExamFinished :fetchStep="fetchStep" :status="status" />
|
||||
</q-card>
|
||||
</q-step>
|
||||
</q-stepper>
|
||||
<q-dialog :model-value="modalConsend" persistent>
|
||||
<q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
|
||||
<Consendform :ok="consendOk" />
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { modalError, messageError } = mixin;
|
||||
const dataStore = useDataStore();
|
||||
const { loaderPage } = dataStore;
|
||||
const step = ref<number>(1);
|
||||
const stepRaw = ref<number>(1);
|
||||
const tittle = ref<string>("");
|
||||
const route = useRoute();
|
||||
const status = ref<string>("register");
|
||||
const modalConsend = ref<boolean>(false);
|
||||
const stepPayment = ref<boolean>(true);
|
||||
const rejectMessage = ref<string>("");
|
||||
const round = ref<number | null>(null);
|
||||
const yearly = ref<number | null>(null);
|
||||
|
||||
onMounted(async () => {});
|
||||
|
||||
const consenClose = () => {
|
||||
modalConsend.value = false;
|
||||
};
|
||||
|
||||
const consendOk = () => {
|
||||
modalConsend.value = false;
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.q-stepper {
|
||||
box-shadow: none;
|
||||
background: transparent !important;
|
||||
}
|
||||
.q-stepper--horizontal .q-stepper__step-inner {
|
||||
padding: 0px;
|
||||
}
|
||||
.q-stepper__header--alternative-labels .q-stepper__tab {
|
||||
min-height: 0px;
|
||||
padding: 1.5% 0% 1.5% 0%;
|
||||
}
|
||||
.q-stepper__header--border {
|
||||
border-bottom: none;
|
||||
}
|
||||
.q-stepper__dot {
|
||||
min-width: 35px;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.q-stepper__title {
|
||||
width: 100px;
|
||||
}
|
||||
.q-stepper__tab--done .q-stepper__title {
|
||||
color: #62a00b;
|
||||
}
|
||||
.q-stepper__tab--done .q-stepper__dot {
|
||||
color: #95d710;
|
||||
border: 1px solid #62a00b;
|
||||
}
|
||||
|
||||
.q-stepper__tab--active .q-stepper__title {
|
||||
color: #318bae;
|
||||
}
|
||||
.q-stepper__tab--active .q-stepper__dot {
|
||||
color: #1cb4ea;
|
||||
border: 1px solid #218ab393;
|
||||
}
|
||||
|
||||
.q-stepper__tab--disabled .q-stepper__title {
|
||||
color: #92b4c8;
|
||||
}
|
||||
.q-stepper__tab--disabled .q-stepper__dot {
|
||||
background: #def2fc !important;
|
||||
border: 1px solid #92b4c876;
|
||||
}
|
||||
|
||||
.q-stepper__tab--disabled .q-stepper__dot .q-icon {
|
||||
color: #7692a3d0;
|
||||
}
|
||||
.q-stepper--horizontal .q-stepper__line:before,
|
||||
.q-stepper--horizontal .q-stepper__line:after {
|
||||
background: #92b4c847;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,24 @@
|
|||
// ข้อมูลรายการสอบแข่งขัน/คัดเลือก
|
||||
interface FormPlacementMainData {
|
||||
id: number;
|
||||
examRound: string;
|
||||
examOrder: number;
|
||||
fiscalYear: number;
|
||||
numberofCandidates: number;
|
||||
examType: number;
|
||||
accountExpirationDate: string;
|
||||
isExpired?: boolean;
|
||||
id: number;
|
||||
examRound: string;
|
||||
examOrder: number;
|
||||
fiscalYear: number;
|
||||
numberofCandidates: number;
|
||||
examType: number;
|
||||
accountExpirationDate: string;
|
||||
isExpired?: boolean;
|
||||
}
|
||||
|
||||
|
||||
interface FormOrderPlacementMainData {
|
||||
Order: number;
|
||||
OrderNum: string;
|
||||
fiscalYear: number;
|
||||
OrderDate: string;
|
||||
OrderBy: string;
|
||||
Signer: string;
|
||||
OrderStatus: boolean;
|
||||
}
|
||||
|
||||
export type { FormPlacementMainData };
|
||||
export type { FormOrderPlacementMainData };
|
||||
|
|
|
|||
|
|
@ -2,12 +2,16 @@
|
|||
* Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
|
||||
*/
|
||||
|
||||
const MainSorkorcho = () => import("@/modules/05_placement/components/exams_sorkorcho/Main.vue");
|
||||
const PlacementDetail = () => import("@/modules/05_placement/components/pass/Detail.vue");
|
||||
const MainOther = () => import("@/modules/05_placement/components/exams_other/Main.vue");
|
||||
const Placement2Detail = () => import("@/modules/05_placement/components/exams_other/Detail.vue");
|
||||
|
||||
|
||||
const MainSorkorcho = () =>
|
||||
import("@/modules/05_placement/components/exams_sorkorcho/Main.vue");
|
||||
const PlacementDetail = () =>
|
||||
import("@/modules/05_placement/components/pass/Detail.vue");
|
||||
const MainOther = () =>
|
||||
import("@/modules/05_placement/components/exams_other/Main.vue");
|
||||
const Placement2Detail = () =>
|
||||
import("@/modules/05_placement/components/exams_other/Detail.vue");
|
||||
const addOrderReplace = () =>
|
||||
import("@/modules/05_placement/components/OrderReplace/addOrderReplace.vue");
|
||||
export default [
|
||||
{
|
||||
path: "/placement",
|
||||
|
|
@ -49,5 +53,14 @@ export default [
|
|||
Role: "placement",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/placement/addOrderReplace",
|
||||
name: "addOrderReplace",
|
||||
component: addOrderReplace,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [8],
|
||||
Role: "placement",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main"
|
||||
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
|
||||
import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
|
||||
|
||||
export const useProfileDataStore = defineStore("profile", () => {
|
||||
interface profile {
|
||||
|
|
@ -89,65 +90,94 @@ export const usePlacementDataStore = defineStore("placement", () => {
|
|||
const changePlacementColumns = (system: String, val: String[]) => {
|
||||
if (system == "mappingPosition")
|
||||
placementData.value.mappingPosition.columns = val;
|
||||
localStorage.setItem(
|
||||
"placement",
|
||||
JSON.stringify(placementData.value)
|
||||
);
|
||||
localStorage.setItem("placement", JSON.stringify(placementData.value));
|
||||
};
|
||||
|
||||
if (localStorage.getItem("placement") !== null) {
|
||||
placementData.value = JSON.parse(
|
||||
localStorage.getItem("placement") || "{}"
|
||||
);
|
||||
placementData.value = JSON.parse(localStorage.getItem("placement") || "{}");
|
||||
}
|
||||
|
||||
let DataMainYear = ref<object[]>([]) // ข้อมูลจำนวนปี
|
||||
let DataMainOrig = ref<FormPlacementMainData[]>([]) // ข้อมูลหลักดั้งเดิม
|
||||
let DataMainUpdate = ref<FormPlacementMainData[]>([]) // ข้อมูลเปลี่ยนแปลง
|
||||
const DataMainYearSet = (val: FormPlacementMainData[]) => (DataMainYear.value = val)
|
||||
const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val)
|
||||
const DataUpdateMain = (filter_1: number | null, filter_2: number | null, filter_3: boolean) => {
|
||||
let DataMainYear = ref<object[]>([]); // ข้อมูลจำนวนปี
|
||||
let DataMainOrig = ref<FormPlacementMainData[]>([]); // ข้อมูลหลักดั้งเดิม
|
||||
let DataMainUpdate = ref<FormPlacementMainData[]>([]); // ข้อมูลเปลี่ยนแปลง
|
||||
const DataMainYearSet = (val: FormPlacementMainData[]) =>
|
||||
(DataMainYear.value = val);
|
||||
const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
|
||||
const DataUpdateMain = (
|
||||
filter_1: number | null,
|
||||
filter_2: number | null,
|
||||
filter_3: boolean
|
||||
) => {
|
||||
DataMainUpdate.value = [];
|
||||
if (filter_1 === null && filter_2 === 0 && filter_3 === false) {
|
||||
// console.log('case 1');
|
||||
// return DataMainUpdate.value = DataMainOrig.value; อันเก่า
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.isExpired === filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 === null && filter_3 === false) {
|
||||
// console.log('case 1.1');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.isExpired === filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === 0 && filter_3 === false) {
|
||||
// console.log('case 2');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.examOrder === filter_1 && item.isExpired === filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder === filter_1 && item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === null && filter_3 === false) {
|
||||
// console.log('case 2.1');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.examOrder === filter_1 && item.isExpired === filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder === filter_1 && item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 !== 0 && filter_3 === false) {
|
||||
// console.log('case 2.2');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.examOrder === filter_1 && item.examType === filter_2 && item.isExpired === filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) =>
|
||||
item.examOrder === filter_1 &&
|
||||
item.examType === filter_2 &&
|
||||
item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 !== 0 && filter_3 === false) {
|
||||
// console.log('case 3');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.examType === filter_2 && item.isExpired === filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examType === filter_2 && item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 === 0 && filter_3 === true) {
|
||||
// console.log('case 3.1');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.isExpired === filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 === null && filter_3 === true) {
|
||||
// console.log('case 3.2');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.isExpired === filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === 0 && filter_3 === true) {
|
||||
// console.log('case 3.3');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.examOrder == filter_1 && item.isExpired == filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder == filter_1 && item.isExpired == filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === null && filter_3 === true) {
|
||||
// console.log('case 3.4');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.examOrder == filter_1 && item.isExpired == filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder == filter_1 && item.isExpired == filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 !== 0 && filter_3 === true) {
|
||||
// console.log('case 3.5');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.examOrder == filter_1 && item.examType == filter_2 && item.isExpired == filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) =>
|
||||
item.examOrder == filter_1 &&
|
||||
item.examType == filter_2 &&
|
||||
item.isExpired == filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 !== 0 && filter_3 === true) {
|
||||
// console.log('case 3.6');
|
||||
return DataMainUpdate.value = DataMainOrig.value.filter((item) => item.examType == filter_2 && item.isExpired == filter_3);
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examType == filter_2 && item.isExpired == filter_3
|
||||
));
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
placementData,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue