เพิ่ม ui ลงเวลากรณีพิเศษ
This commit is contained in:
AnandaTon
parent
fefbb8a7ab
commit
8a472f23f7
9 changed files with 853 additions and 258 deletions
246
src/modules/09_leave/components/4_specialTime/Table.vue
Normal file
246
src/modules/09_leave/components/4_specialTime/Table.vue
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
<template>
|
||||
<div class="q-pb-sm row q-col-gutter-sm">
|
||||
<!-- -->
|
||||
<div class="q-gutter-sm" v-if="nornmalData == true">
|
||||
<datepicker
|
||||
v-model="selectedDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
month-picker
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:model-value="monthYearThai(dateMonth)"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
style="width: 130px"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<q-space />
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
class="col-xs-12 col-sm-3 col-md-2 gt-xs"
|
||||
>
|
||||
<template> </template>
|
||||
</q-select>
|
||||
</div>
|
||||
<d-table
|
||||
ref="table"
|
||||
flat
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
: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" v-html="col.label" />
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
<q-th auto-width />
|
||||
<q-th auto-width v-if="nornmalData == true" />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</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>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
import type { Pagination } from "@/modules/04_registry/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { hideLoader, monthYear2Thai } = mixin;
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const paging = ref<boolean>(true);
|
||||
const pagination = ref({
|
||||
// sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
const table = ref<any>(null);
|
||||
const filterRef = ref<any>(null);
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
count: Number,
|
||||
pass: Number,
|
||||
notpass: Number,
|
||||
|
||||
inputfilter: String,
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
editvisible: Boolean,
|
||||
add: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
validate: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
nornmalData: {
|
||||
type: Boolean,
|
||||
defualt: true,
|
||||
},
|
||||
conclude: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
"update:inputfilter",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
]);
|
||||
const updateInput = (value: string | number | null) => {
|
||||
emit("update:inputfilter", value);
|
||||
};
|
||||
const updateVisible = (value: []) => {
|
||||
emit("update:inputvisible", value);
|
||||
};
|
||||
|
||||
const checkAdd = () => {
|
||||
props.add();
|
||||
};
|
||||
const selectedDate = ref<string>("");
|
||||
|
||||
const dateMonth = ref<any>({
|
||||
month: new Date().getMonth(),
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
console.log(dateMonth);
|
||||
|
||||
const monthYearThai = (val: any) => {
|
||||
if (val == null) return "";
|
||||
else return monthYear2Thai(val.month, val.year);
|
||||
};
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
emit("update:inputfilter", "");
|
||||
filterRef.value.focus();
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
|
||||
.custom-table2 {
|
||||
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;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
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>
|
||||
|
|
@ -1,61 +1,71 @@
|
|||
|
||||
const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue")
|
||||
const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue");
|
||||
const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
|
||||
const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
|
||||
const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
|
||||
const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue")
|
||||
const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue");
|
||||
const leaveDetail = () =>
|
||||
import("@/modules//09_leave/components/2_Leave/DetailLeave.vue");
|
||||
const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue");
|
||||
const SpecialTimeMain = () =>
|
||||
import("@/modules/09_leave/views/SpecialTimeMain.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/round-time",
|
||||
name: "/round-time",
|
||||
component: RoundMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
{
|
||||
path: "/round-time",
|
||||
name: "/round-time",
|
||||
component: RoundMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
{
|
||||
path: "/work-list",
|
||||
name: "/work-list",
|
||||
component: workMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/work-list",
|
||||
name: "/work-list",
|
||||
component: workMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
{
|
||||
path: "/leave-list",
|
||||
name: "/leave-list",
|
||||
component: leaveMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/special-time",
|
||||
name: "/special-time",
|
||||
component: SpecialTimeMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
{
|
||||
path: "/leave/detail/:id",
|
||||
name: "/leave/detail",
|
||||
component: leaveDetail,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/leave-list",
|
||||
name: "/leave-list",
|
||||
component: leaveMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
{
|
||||
path: "/statistics-report",
|
||||
name: "/statistics-report",
|
||||
component: reportMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/leave/detail/:id",
|
||||
name: "/leave/detail",
|
||||
component: leaveDetail,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/statistics-report",
|
||||
name: "/statistics-report",
|
||||
component: reportMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -2,186 +2,195 @@ import { defineStore } from "pinia";
|
|||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main"
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataRows } from "@/modules/09_leave/interface/response/leave"
|
||||
|
||||
import type { DataRows } from "@/modules/09_leave/interface/response/leave";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, showLoader, hideLoader } = mixin;
|
||||
export const useLeavelistDataStore = defineStore("leave", () => {
|
||||
//TABMENU
|
||||
const tab = ref<string>("1");
|
||||
const amounttab1 = ref<number>(0)
|
||||
const amounttab2 = ref<number>(0)
|
||||
//TABMENU
|
||||
const tab = ref<string>("1");
|
||||
const amounttab1 = ref<number>(0);
|
||||
const amounttab2 = ref<number>(0);
|
||||
//ข้อมูลในตาราง
|
||||
const mainData = ref<any>([]);
|
||||
const rows = ref<DataRows[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([]);
|
||||
const visibleColumns = ref<string[]>([]);
|
||||
const loadTable = ref<boolean>(false);
|
||||
async function fetchList(data: DataRows[]) {
|
||||
let datalist = data.map((e: DataRows) => ({
|
||||
leaveType: e.leaveType,
|
||||
name: e.name,
|
||||
Date: e.Date,
|
||||
status: convertSatatus(e.status),
|
||||
}));
|
||||
tab.value !== "1"
|
||||
? (mainData.value = datalist)
|
||||
: (mainData.value = datalist.filter(
|
||||
(e) => e.status === "อยู่ระหว่างกำเนินการ"
|
||||
));
|
||||
const filteramounttab1 = datalist.filter(
|
||||
(e) => e.status === "อยู่ระหว่างกำเนินการ"
|
||||
);
|
||||
amounttab1.value = filteramounttab1.length;
|
||||
amounttab2.value = datalist.length;
|
||||
await fetchOption();
|
||||
await searchDataFn(selectType.value, selectStatus.value);
|
||||
}
|
||||
//filter table
|
||||
const selectYear = ref<string>("all");
|
||||
const selectType = ref<string>("all");
|
||||
const selectStatus = ref<string>("all");
|
||||
const optionYear = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
|
||||
const optionType = ref<DataOption[]>([]);
|
||||
const optionStatus = ref<DataOption[]>([]);
|
||||
const optionTypeMain = ref<DataOption[]>([]);
|
||||
const optionStatusMain = ref<DataOption[]>([]);
|
||||
const filterTable = ref<string>("");
|
||||
function searchDataFn(type: string, status: string) {
|
||||
// selectYear.value = selectYear.value || "all"
|
||||
type = type || "all";
|
||||
status = status || "all";
|
||||
// showLoader()
|
||||
loadTable.value = true;
|
||||
if (selectYear.value == "all" && type == "all" && status == "all") {
|
||||
rows.value = mainData.value;
|
||||
} else if (selectYear.value !== "all" && type == "all" && status == "all") {
|
||||
console.log("ค้นหาจากปี");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากประเภท");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type);
|
||||
} else if (selectYear.value == "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.status === status);
|
||||
} else if (
|
||||
selectYear.value !== "all" &&
|
||||
type !== "all" &&
|
||||
status == "all"
|
||||
) {
|
||||
console.log("ค้นหาจากปีและประเภท");
|
||||
} else if (
|
||||
selectYear.value !== "all" &&
|
||||
type == "all" &&
|
||||
status !== "all"
|
||||
) {
|
||||
console.log("ค้นหาจากปีและสถานะ");
|
||||
} else if (
|
||||
selectYear.value == "all" &&
|
||||
type !== "all" &&
|
||||
status !== "all"
|
||||
) {
|
||||
console.log("ค้นหาจากประเภทและสถานะ");
|
||||
rows.value = mainData.value.filter(
|
||||
(e: any) => e.leaveType === type && e.status === status
|
||||
);
|
||||
} else console.log("ค้นหาจากทั้งหมด");
|
||||
setTimeout(function () {
|
||||
loadTable.value = false;
|
||||
}, 500);
|
||||
}
|
||||
function clearFilter() {
|
||||
selectYear.value = "all";
|
||||
selectType.value = "all";
|
||||
selectStatus.value = "all";
|
||||
filterTable.value = "";
|
||||
}
|
||||
|
||||
function fetchOption() {
|
||||
let data = [];
|
||||
data = mainData.value;
|
||||
const double_leaveType = [
|
||||
...new Set(data.map((item: any) => item.leaveType)),
|
||||
];
|
||||
// หา optionType
|
||||
optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_leaveType.length; i++) {
|
||||
const type = double_leaveType[i - 1];
|
||||
if (typeof type === "string") {
|
||||
const listtype: DataOption = {
|
||||
id: type,
|
||||
name: type,
|
||||
};
|
||||
optionTypeMain.value.push(listtype);
|
||||
optionType.value = optionTypeMain.value;
|
||||
}
|
||||
}
|
||||
// หา optionStatus
|
||||
const double_status = [...new Set(data.map((item: any) => item.status))];
|
||||
optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_status.length; i++) {
|
||||
const status = double_status[i - 1];
|
||||
if (typeof status === "string") {
|
||||
const liststatus: DataOption = {
|
||||
id: status,
|
||||
name: status,
|
||||
};
|
||||
optionStatusMain.value.push(liststatus);
|
||||
optionStatus.value = optionStatusMain.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
// filter option
|
||||
function filterOption(val: string, update: any, type: string) {
|
||||
let data: DataOption[] = [];
|
||||
let filter: DataOption[] = [];
|
||||
if (type == "type") {
|
||||
data = optionTypeMain.value;
|
||||
} else if (type == "status") {
|
||||
data = optionStatusMain.value;
|
||||
}
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
filter = data;
|
||||
});
|
||||
} else {
|
||||
update(() => {
|
||||
filter = data.filter((e) => e.name.search(val) !== -1);
|
||||
});
|
||||
}
|
||||
if (filter) {
|
||||
if (type == "type") {
|
||||
optionType.value = filter;
|
||||
} else if (type == "status") {
|
||||
optionStatus.value = filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// convertSatatus
|
||||
function convertSatatus(val: string) {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "ใหม่";
|
||||
case "2":
|
||||
return "อยู่ระหว่างกำเนินการ";
|
||||
case "3":
|
||||
return "อนุมัติ";
|
||||
}
|
||||
}
|
||||
return {
|
||||
tab,
|
||||
amounttab1,
|
||||
amounttab2,
|
||||
//ข้อมูลในตาราง
|
||||
const mainData = ref<any>([])
|
||||
const rows = ref<DataRows[]>([])
|
||||
const columns = ref<QTableProps["columns"]>([]);
|
||||
const visibleColumns = ref<string[]>([]);
|
||||
const loadTable = ref<boolean>(false)
|
||||
async function fetchList(data: DataRows[]) {
|
||||
let datalist = data.map((e: DataRows) => ({
|
||||
leaveType: e.leaveType,
|
||||
name: e.name,
|
||||
Date: e.Date,
|
||||
status: convertSatatus(e.status)
|
||||
}))
|
||||
tab.value !== "1" ? mainData.value = datalist : mainData.value = datalist.filter((e) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
const filteramounttab1 = datalist.filter((e) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
amounttab1.value = filteramounttab1.length
|
||||
amounttab2.value = datalist.length
|
||||
await fetchOption()
|
||||
await searchDataFn(selectType.value, selectStatus.value)
|
||||
rows,
|
||||
fetchList,
|
||||
loadTable,
|
||||
columns,
|
||||
visibleColumns,
|
||||
|
||||
|
||||
}
|
||||
//filter table
|
||||
const selectYear = ref<string>('all')
|
||||
const selectType = ref<string>('all')
|
||||
const selectStatus = ref<string>('all')
|
||||
const optionYear = ref<DataOption[]>([{ id: "all", name: 'ทั้งหมด' }])
|
||||
const optionType = ref<DataOption[]>([])
|
||||
const optionStatus = ref<DataOption[]>([])
|
||||
const optionTypeMain = ref<DataOption[]>([])
|
||||
const optionStatusMain = ref<DataOption[]>([])
|
||||
const filterTable = ref<string>('')
|
||||
function searchDataFn(type: string, status: string) {
|
||||
// selectYear.value = selectYear.value || "all"
|
||||
type = type || "all"
|
||||
status = status || "all"
|
||||
// showLoader()
|
||||
loadTable.value = true
|
||||
if (selectYear.value == "all" && type == "all" && status == "all") {
|
||||
rows.value = mainData.value
|
||||
} else if (selectYear.value !== "all" && type == "all" && status == "all") {
|
||||
console.log("ค้นหาจากปี");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากประเภท");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type)
|
||||
} else if (selectYear.value == "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.status === status)
|
||||
} else if (selectYear.value !== "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากปีและประเภท");
|
||||
} else if (selectYear.value !== "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากปีและสถานะ");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status !== "all") {
|
||||
console.log("ค้นหาจากประเภทและสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type && e.status === status)
|
||||
} else (console.log("ค้นหาจากทั้งหมด"))
|
||||
setTimeout(function () {
|
||||
loadTable.value = false
|
||||
}, 500);
|
||||
|
||||
}
|
||||
function clearFilter() {
|
||||
selectYear.value = "all"
|
||||
selectType.value = "all"
|
||||
selectStatus.value = "all"
|
||||
filterTable.value = ''
|
||||
}
|
||||
|
||||
function fetchOption() {
|
||||
let data = []
|
||||
data = mainData.value
|
||||
const double_leaveType = [
|
||||
...new Set(data.map((item: any) => item.leaveType)),
|
||||
];
|
||||
// หา optionType
|
||||
optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_leaveType.length; i++) {
|
||||
const type = double_leaveType[i - 1];
|
||||
if (typeof type === 'string') {
|
||||
const listtype: DataOption = {
|
||||
id: type,
|
||||
name: type,
|
||||
};
|
||||
optionTypeMain.value.push(listtype)
|
||||
optionType.value = optionTypeMain.value
|
||||
}
|
||||
}
|
||||
// หา optionStatus
|
||||
const double_status = [
|
||||
...new Set(data.map((item: any) => item.status)),
|
||||
];
|
||||
optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_status.length; i++) {
|
||||
const status = double_status[i - 1];
|
||||
if (typeof status === 'string') {
|
||||
const liststatus: DataOption = {
|
||||
id: status,
|
||||
name: status,
|
||||
};
|
||||
optionStatusMain.value.push(liststatus);
|
||||
optionStatus.value = optionStatusMain.value
|
||||
}
|
||||
}
|
||||
}
|
||||
// filter option
|
||||
function filterOption(val: string, update: any, type: string) {
|
||||
let data: DataOption[] = []
|
||||
let filter: DataOption[] = []
|
||||
if (type == "type") {
|
||||
data = optionTypeMain.value
|
||||
} else if (type == "status") {
|
||||
data = optionStatusMain.value
|
||||
}
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
filter = data;
|
||||
});
|
||||
} else {
|
||||
update(() => {
|
||||
filter = data.filter(
|
||||
(e) => e.name.search(val) !== -1
|
||||
);
|
||||
});
|
||||
}
|
||||
if (filter) {
|
||||
if (type == "type") {
|
||||
optionType.value = filter
|
||||
} else if (type == "status") {
|
||||
optionStatus.value = filter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// convertSatatus
|
||||
function convertSatatus(val: string) {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "ใหม่"
|
||||
case "2":
|
||||
return "อยู่ระหว่างกำเนินการ"
|
||||
case "3":
|
||||
return "อนุมัติ"
|
||||
}
|
||||
}
|
||||
return {
|
||||
tab,
|
||||
amounttab1,
|
||||
amounttab2,
|
||||
//ข้อมูลในตาราง
|
||||
rows,
|
||||
fetchList,
|
||||
loadTable,
|
||||
columns,
|
||||
visibleColumns,
|
||||
|
||||
//filter table
|
||||
filterTable,
|
||||
selectYear,
|
||||
selectType,
|
||||
selectStatus,
|
||||
optionYear,
|
||||
optionType,
|
||||
optionStatus,
|
||||
clearFilter,
|
||||
searchDataFn,
|
||||
filterOption,
|
||||
|
||||
|
||||
};
|
||||
})
|
||||
filterTable,
|
||||
selectYear,
|
||||
selectType,
|
||||
selectStatus,
|
||||
optionYear,
|
||||
optionType,
|
||||
optionStatus,
|
||||
clearFilter,
|
||||
searchDataFn,
|
||||
filterOption,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
104
src/modules/09_leave/stores/SpecialTimeStore.ts
Normal file
104
src/modules/09_leave/stores/SpecialTimeStore.ts
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
investigateDisDataRowType,
|
||||
DataOption,
|
||||
} from "@/modules/11_discipline/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
||||
const rows = ref<any[]>([]);
|
||||
async function fecthList(data: any[]) {
|
||||
let datalist: any[] = data.map((e: any) => ({
|
||||
fullname: e.fullname,
|
||||
date: date2Thai(new Date(e.date)),
|
||||
dateFix: date2Thai(new Date(e.dateFix)),
|
||||
type: e.type,
|
||||
reason: e.reason,
|
||||
}));
|
||||
rows.value = datalist;
|
||||
}
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"fullname",
|
||||
"date",
|
||||
"dateFix",
|
||||
"type",
|
||||
"reason",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "center",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullname",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "fullname",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "วันที่กรอก",
|
||||
sortable: true,
|
||||
field: "date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "dateFix",
|
||||
align: "left",
|
||||
label: "วันที่ขอแก้ไข",
|
||||
sortable: true,
|
||||
field: "dateFix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
align: "left",
|
||||
label: "ประเภท",
|
||||
sortable: true,
|
||||
field: "type",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "reason",
|
||||
align: "left",
|
||||
label: "เหตุผล",
|
||||
sortable: true,
|
||||
field: "reason",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
return {
|
||||
fecthList,
|
||||
rows,
|
||||
visibleColumns,
|
||||
columns,
|
||||
};
|
||||
});
|
||||
150
src/modules/09_leave/views/SpecialTimeMain.vue
Normal file
150
src/modules/09_leave/views/SpecialTimeMain.vue
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, useAttrs } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
|
||||
import Table from "@/modules/09_leave/components/4_specialTime/Table.vue";
|
||||
import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
|
||||
import DialogReason from "@/components/Dialogs/PopupReason.vue";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const dataSpecialTime = useSpecialTimeStore();
|
||||
const { fecthList } = dataSpecialTime;
|
||||
const $q = useQuasar(); // show dialog
|
||||
const mixin = useCounterMixin();
|
||||
const router = useRouter();
|
||||
const { hideLoader, monthYear2Thai } = mixin;
|
||||
const filter = ref<string>(""); //search data table
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const modalUnapprove = ref(false);
|
||||
const pagination = ref({
|
||||
// sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const dialogTitle = ref<string>("");
|
||||
const dialogDesc = ref<string>("");
|
||||
const name = ref("");
|
||||
const unapprove = async (fullname: string) => {
|
||||
dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
|
||||
name.value = fullname;
|
||||
modalUnapprove.value = true;
|
||||
};
|
||||
const closeReason = () => {
|
||||
modalUnapprove.value = false;
|
||||
};
|
||||
const clickSave = () => {
|
||||
modalUnapprove.value = false;
|
||||
};
|
||||
// ค้นหาในตาราง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<HTMLInputElement | null>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
if (filterRef.value) {
|
||||
filterRef.value.focus();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
fecthList([
|
||||
{
|
||||
fullname: "นางสาวณัฐกา ชมสิน",
|
||||
date: "2023-10-30",
|
||||
dateFix: "2023-10-30",
|
||||
type: "Checkin",
|
||||
reason: "ลืม",
|
||||
unapprove: "1",
|
||||
approve: "0",
|
||||
},
|
||||
{
|
||||
fullname: "นางสาวรัชภรณ์ ภักดี",
|
||||
date: "2023-10-30",
|
||||
dateFix: "2023-10-30",
|
||||
type: "Checkin",
|
||||
reason: "ลืม",
|
||||
unapprove: "1",
|
||||
approve: "0",
|
||||
},
|
||||
{
|
||||
fullname: "นางสาวภาพรรณ ลออ",
|
||||
date: "2023-10-30",
|
||||
dateFix: "2023-10-30",
|
||||
type: "Checkin",
|
||||
reason: "ลืม",
|
||||
unapprove: "1",
|
||||
approve: "0",
|
||||
},
|
||||
]);
|
||||
await hideLoader();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการลงเวลากรณีพิเศษ
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
|
||||
<div>
|
||||
<Table
|
||||
style="max-height: 80vh"
|
||||
:rows="dataSpecialTime.rows"
|
||||
:columns="dataSpecialTime.columns"
|
||||
:filter="filter"
|
||||
:visible-columns="dataSpecialTime.visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="dataSpecialTime.visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:nornmalData="true"
|
||||
:paging="true"
|
||||
:titleText="''"
|
||||
>
|
||||
<template #columns="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-th auto-width />
|
||||
<q-th auto-width />
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
color="orange"
|
||||
class="q-px-md"
|
||||
dense
|
||||
unelevated
|
||||
@click="unapprove(props.row.fullname)"
|
||||
>ไม่อนุมัติ</q-btn
|
||||
>
|
||||
<span>{{ props.row.unapprove }}</span>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn color="primary" class="q-px-md" dense unelevated
|
||||
>อนุมัติ</q-btn
|
||||
>
|
||||
<span>{{ props.row.approve }}</span>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</q-card>
|
||||
<DialogReason
|
||||
:modal="modalUnapprove"
|
||||
:title="dialogTitle"
|
||||
:desc="dialogDesc"
|
||||
:click-close="closeReason"
|
||||
label="เหตุผล"
|
||||
:savaForm="clickSave"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -34,13 +34,13 @@ const formData = reactive<FormData>({
|
|||
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
formData.prefix = props.data.prefix
|
||||
formData.firstname = props.data.firstname
|
||||
formData.lastname = props.data.lastname
|
||||
formData.position = props.data.position
|
||||
formData.phone = props.data.phone
|
||||
formData.responsibilities = props.data.responsibilities
|
||||
formData.email = props.data.email
|
||||
formData.prefix = props.data.prefix;
|
||||
formData.firstname = props.data.firstname;
|
||||
formData.lastname = props.data.lastname;
|
||||
formData.position = props.data.position;
|
||||
formData.phone = props.data.phone;
|
||||
formData.responsibilities = props.data.responsibilities;
|
||||
formData.email = props.data.email;
|
||||
});
|
||||
|
||||
// เพิ่มบุคลากร
|
||||
|
|
@ -93,50 +93,120 @@ function onValidate() {
|
|||
<label>ค้นหาบุคคลากรที่อยู่ในระบบ</label>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input dense outlined v-model="idCard" label="รหัสบัตรประชาชน" ref="idCardRef" for="idCardRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="idCard"
|
||||
label="รหัสบัตรประชาชน"
|
||||
ref="idCardRef"
|
||||
for="idCardRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-btn unelevated dense color="primary" class="q-px-md q-py-sm" @click="addEmployee" label="เพิ่มบุคลากร"
|
||||
id="addCustomer" />
|
||||
<q-btn
|
||||
unelevated
|
||||
dense
|
||||
color="primary"
|
||||
class="q-px-md q-py-sm"
|
||||
@click="addEmployee"
|
||||
label="เพิ่มบุคลากร"
|
||||
id="addCustomer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-px-md q-col-gutter-sm">
|
||||
<div class="col-3">
|
||||
<q-input dense outlined v-model="formData.prefix" label="คำนำหน้า" ref="prefixRef" for="prefixRef"
|
||||
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.prefix"
|
||||
label="คำนำหน้า"
|
||||
ref="prefixRef"
|
||||
for="prefixRef"
|
||||
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input dense outlined v-model="formData.firstname" label="ชื่อ" ref="firstnameRef" for="firstnameRef"
|
||||
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.firstname"
|
||||
label="ชื่อ"
|
||||
ref="firstnameRef"
|
||||
for="firstnameRef"
|
||||
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input dense outlined v-model="formData.lastname" label="นามสกุล" ref="lastnameRef" for="lastnameRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.lastname"
|
||||
label="นามสกุล"
|
||||
ref="lastnameRef"
|
||||
for="lastnameRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input dense outlined v-model="formData.position" label="ตำแหน่ง" ref="positionRef" for="positionRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.position"
|
||||
label="ตำแหน่ง"
|
||||
ref="positionRef"
|
||||
for="positionRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input dense outlined v-model="formData.phone" label="เบอร์โทร" ref="phoneRef" for="phoneRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.phone"
|
||||
label="เบอร์โทร"
|
||||
ref="phoneRef"
|
||||
for="phoneRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input dense outlined v-model="formData.responsibilities" label="หน้าที่" ref="responsibilitiesRef"
|
||||
for="responsibilitiesRef" :rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.responsibilities"
|
||||
label="หน้าที่"
|
||||
ref="responsibilitiesRef"
|
||||
for="responsibilitiesRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input dense outlined v-model="formData.email" label="อีเมล" ref="emailRef" for="emailRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.email"
|
||||
label="อีเมล"
|
||||
ref="emailRef"
|
||||
for="emailRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn type="submit" flat round color="public" icon="mdi-content-save-outline" id="formSubmit">
|
||||
<q-btn
|
||||
type="submit"
|
||||
flat
|
||||
round
|
||||
color="public"
|
||||
icon="mdi-content-save-outline"
|
||||
id="formSubmit"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ interface investigateDisDataRowType {
|
|||
interrogated: string;
|
||||
fault: string | undefined;
|
||||
penaltyLevel: string | undefined;
|
||||
caseFault: string | undefined;
|
||||
dateInvestigate: string | undefined;
|
||||
caseFault: string;
|
||||
dateInvestigate: string | null;
|
||||
status: string | undefined;
|
||||
active: string | undefined;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,4 +43,4 @@ interface disciplinaryRef {
|
|||
[key: string]: any;
|
||||
}
|
||||
|
||||
export type { FormData, disciplinaryRef };
|
||||
export type { FormData, disciplinaryRef, investigateDisDataRowType };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue