Merge branch 'develop' into devTee
# Conflicts: # src/interface/request/main/main.ts # src/modules/09_leave/router.ts
This commit is contained in:
setthawutttty
commit
580f8ac565
15 changed files with 930 additions and 307 deletions
|
|
@ -396,12 +396,18 @@ const menuList = readonly<any[]>([
|
|||
},
|
||||
{
|
||||
key: 9.4,
|
||||
label: "ลงเวลากรณีพิเศษ",
|
||||
path: "/special-time",
|
||||
role: "leave",
|
||||
},
|
||||
{
|
||||
key: 9.5,
|
||||
label: "รายการลา",
|
||||
path: "/leave-list",
|
||||
role: "leave",
|
||||
},
|
||||
{
|
||||
key: 9.5,
|
||||
key: 9.6,
|
||||
label: "รายงานสถิติ",
|
||||
path: "/statistics-report",
|
||||
role: "leave",
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
:visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
|
||||
v-model:inputvisibleFilter="status" v-model:optionsFilter="optionsStatus" :nornmalData="true" :paging="true"
|
||||
:titleText="''" :statusPayment="statusPayment" :setSeat="setSeat" :fetchData="fetchDataCom" :history="true"
|
||||
:page-size="page_size" :total="total" :page="page" :changePage="changePage" :max-page="maxPage">
|
||||
:page-size="pageSize" :total="total" :page="page" :changePage="changePage" :max-page="maxPage">
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td auto-width>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<q-td v-for="col in props.cols" :key="col.name" :props="props"
|
||||
@click="viewDetail(props.row.id, props.row.status)">
|
||||
<div v-if="col.name == 'no'" class="table_ellipsis">
|
||||
{{ props.rowIndex + 1 }}
|
||||
{{ ((page-1) * pageSize) + props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'fullname'">
|
||||
<div class="row col-12 items-center">
|
||||
|
|
@ -395,24 +395,24 @@ const fetchDataCom = async () => {
|
|||
|
||||
// paging
|
||||
const page = ref<number>(1)
|
||||
const page_size = ref<number>(25)
|
||||
const pageSize = ref<number>(25)
|
||||
const total = ref<number>(0)
|
||||
const maxPage = ref<number>(1)
|
||||
|
||||
async function changePage(pageVal: number, pageSizeVal: number, loading: boolean = false) {
|
||||
page.value = await pageVal
|
||||
page_size.value = await pageSizeVal
|
||||
pageSize.value = await pageSizeVal
|
||||
fetchData(loading)
|
||||
}
|
||||
|
||||
const fetchData = async (loading: boolean = true) => {
|
||||
loading === true ?? showLoader()
|
||||
await http
|
||||
.get(config.API.candidateOfPeriodExam(status.value, examId.value) + `?page=${page.value}&pageSize=${page_size.value}&keyword=${filter.value}`)
|
||||
.get(config.API.candidateOfPeriodExam(status.value, examId.value) + `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
total.value = data.total
|
||||
maxPage.value = await Math.ceil(data.total / page_size.value)
|
||||
maxPage.value = await Math.ceil(data.total / pageSize.value)
|
||||
rows.value = [];
|
||||
data.data.map((r: any) => {
|
||||
rows.value.push({
|
||||
|
|
|
|||
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>
|
||||
|
|
@ -10,7 +10,6 @@ interface dataRowRound {
|
|||
amOut: string
|
||||
pm: string
|
||||
pmOut: string
|
||||
note: string
|
||||
status: boolean
|
||||
isDefault: boolean
|
||||
}
|
||||
|
|
@ -22,7 +21,6 @@ interface roundShow {
|
|||
pmOut: string;
|
||||
amRound: string;
|
||||
pmRound: string;
|
||||
note: string;
|
||||
status: boolean;
|
||||
isDefault: boolean;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
|
||||
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 ChangeRoundMain = () => import("@/modules/09_leave/views/ChangeRoundMain.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: "/change-round",
|
||||
name: "/change-round",
|
||||
|
|
@ -36,37 +36,55 @@ export default [
|
|||
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,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -45,15 +45,6 @@ export const useRoundDataStore = defineStore(
|
|||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "note",
|
||||
align: "left",
|
||||
label: "คำอธิบาย",
|
||||
sortable: true,
|
||||
field: "note",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "center",
|
||||
|
|
@ -77,7 +68,6 @@ export const useRoundDataStore = defineStore(
|
|||
pmOut: e.pmOut,
|
||||
amRound:`${e.am}-${e.amOut}`,
|
||||
pmRound:`${e.pm}-${e.pmOut}`,
|
||||
note: e.note === '' ? '-':e.note,
|
||||
status: e.status,
|
||||
isDefault: e.isDefault,
|
||||
};
|
||||
|
|
|
|||
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,
|
||||
};
|
||||
});
|
||||
|
|
@ -67,7 +67,7 @@ function changTab() {
|
|||
<q-tab
|
||||
@click="changTab"
|
||||
name="1"
|
||||
label="รายการลาที่อยู่ระหว่างดำเนิดการ"
|
||||
label="รายการลาที่อยู่ระหว่างดำเนินการ"
|
||||
>
|
||||
<q-badge
|
||||
color="grey-4"
|
||||
|
|
|
|||
|
|
@ -3,15 +3,15 @@ import { ref, useAttrs, onMounted } from "vue";
|
|||
|
||||
import router from "@/router";
|
||||
import { useQuasar } from "quasar";
|
||||
import DialogForm from '@/modules/09_leave/components/3_WorkTime/DialogForm.vue'
|
||||
import { useRoundDataStore } from '@/modules/09_leave/stores/RoundStores'
|
||||
import DialogForm from "@/modules/09_leave/components/3_WorkTime/DialogForm.vue";
|
||||
import { useRoundDataStore } from "@/modules/09_leave/stores/RoundStores";
|
||||
const dataStore = useRoundDataStore();
|
||||
const { fetchData } = dataStore;
|
||||
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const modal = ref<boolean>(false)
|
||||
const detailData = ref<any>()
|
||||
const editCheck = ref<string>('')
|
||||
const modal = ref<boolean>(false);
|
||||
const detailData = ref<any>();
|
||||
const editCheck = ref<string>("");
|
||||
// ค้นหาในตาราง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<HTMLInputElement | null>(null);
|
||||
|
|
@ -35,17 +35,17 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
function openModal(data:any,check:string){
|
||||
modal.value = true
|
||||
editCheck.value = check
|
||||
if(check === 'edit'){
|
||||
detailData.value = data
|
||||
}
|
||||
};
|
||||
function openModal(data: any, check: string) {
|
||||
modal.value = true;
|
||||
editCheck.value = check;
|
||||
if (check === "edit") {
|
||||
detailData.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
function closeDialog(){
|
||||
modal.value = false
|
||||
editCheck.value = 'add'
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
editCheck.value = "add";
|
||||
}
|
||||
onMounted(() => {
|
||||
dataStore.fetchData([
|
||||
|
|
@ -54,36 +54,32 @@ onMounted(() => {
|
|||
amOut: "12:00",
|
||||
pm: "13:00",
|
||||
pmOut: "15:30",
|
||||
note: "",
|
||||
status: true,
|
||||
isDefault:true
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
am: "08:30",
|
||||
amOut: "12:00",
|
||||
pm: "13:00",
|
||||
pmOut: "15:30",
|
||||
note: "",
|
||||
status: false,
|
||||
isDefault:false
|
||||
isDefault: false,
|
||||
},
|
||||
{
|
||||
am: "09:30",
|
||||
amOut: "12:00",
|
||||
pm: "13:00",
|
||||
pmOut: "15:30",
|
||||
note: "",
|
||||
status: true,
|
||||
isDefault:false
|
||||
isDefault: false,
|
||||
},
|
||||
{
|
||||
am: "10:30",
|
||||
amOut: "12:00",
|
||||
pm: "13:00",
|
||||
pmOut: "15:30",
|
||||
note: "",
|
||||
status: true,
|
||||
isDefault:false
|
||||
isDefault: false,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
|
@ -97,7 +93,7 @@ onMounted(() => {
|
|||
<div>
|
||||
<q-btn
|
||||
for="#addInvestigatefacts"
|
||||
@click="openModal(null,'add')"
|
||||
@click="openModal(null, 'add')"
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
|
|
@ -172,9 +168,9 @@ onMounted(() => {
|
|||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
style="color: #000000; font-weight: 500;"
|
||||
style="color: #000000; font-weight: 500"
|
||||
>
|
||||
<span class="text-weight-medium ">{{ col.label }}</span>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
@ -182,15 +178,20 @@ onMounted(() => {
|
|||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td auto-width>
|
||||
<q-icon
|
||||
v-if="props.row.isDefault === true"
|
||||
name="mdi-bookmark"
|
||||
size="xs"
|
||||
color="primary"
|
||||
>
|
||||
<q-tooltip>เวลา Default</q-tooltip>
|
||||
v-if="props.row.isDefault === true"
|
||||
name="mdi-bookmark"
|
||||
size="xs"
|
||||
color="primary"
|
||||
>
|
||||
<q-tooltip>เวลา Default</q-tooltip>
|
||||
</q-icon>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click.prevent="openModal(props.row,'edit')">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click.prevent="openModal(props.row, 'edit')"
|
||||
>
|
||||
<div v-if="col.name === 'status'" class="text-center">
|
||||
<q-icon
|
||||
v-if="props.row.status === true"
|
||||
|
|
@ -214,12 +215,12 @@ onMounted(() => {
|
|||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
<DialogForm
|
||||
:modal="modal"
|
||||
:closeDialog="closeDialog"
|
||||
:editCheck="editCheck"
|
||||
:detailData="detailData"
|
||||
/>
|
||||
<DialogForm
|
||||
:modal="modal"
|
||||
:closeDialog="closeDialog"
|
||||
:editCheck="editCheck"
|
||||
:detailData="detailData"
|
||||
/>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.q-table tbody td:before.no-background {
|
||||
|
|
|
|||
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>
|
||||
|
|
@ -17,6 +17,8 @@ const workStore = useWorklistDataStore();
|
|||
const { date2Thai } = mixin;
|
||||
const { fetchList } = workStore;
|
||||
|
||||
const tab = ref("1")
|
||||
|
||||
onMounted(() => {
|
||||
fecthWorkList();
|
||||
});
|
||||
|
|
@ -84,9 +86,38 @@ function fecthWorkList() {
|
|||
รายการลงเวลาปฏิบัติงาน
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md"><ToolBar /> <TableList /></div
|
||||
></q-card>
|
||||
<q-card bordered flat>
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
align="left"
|
||||
inline-label
|
||||
class="rounded-borders"
|
||||
indicator-color="primary"
|
||||
active-bg-color="teal-1"
|
||||
active-class="text-primary"
|
||||
>
|
||||
<q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว"/>
|
||||
<q-tab name="2" label="รายการลงเวลา" />
|
||||
</q-tabs>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel name="1">
|
||||
<!-- <TableList1 /> -->
|
||||
<ToolBar />
|
||||
<TableList />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="2">
|
||||
<!-- <TabList2Vue /> -->
|
||||
<ToolBar />
|
||||
<TableList />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
<!-- </q-card> -->
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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