api ระบบ รอบการปฏิบัติงาน
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
aeaa8c8df2
commit
48e8037099
7 changed files with 383 additions and 235 deletions
|
|
@ -1,9 +1,9 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>ระบบทรัพยากรบุคคล</title>
|
<title>ระบบทรัพยากรบุคคล</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
6
src/api/09_leave/api.leave.ts
Normal file
6
src/api/09_leave/api.leave.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import env from "../index";
|
||||||
|
const leave = `${env.API_URI}/leave`;
|
||||||
|
export default {
|
||||||
|
roundDutytime: () => `${leave}/duty-time`,
|
||||||
|
roundDutytimeByid: (id: string) => `${leave}/duty-time/${id}`,
|
||||||
|
};
|
||||||
|
|
@ -43,6 +43,9 @@ import message from "./api/00_dashboard/api.message";
|
||||||
/** API reports */
|
/** API reports */
|
||||||
import reports from "./api/reports/api.report";
|
import reports from "./api/reports/api.report";
|
||||||
|
|
||||||
|
/** API ระบบลงเวลา */
|
||||||
|
import leave from "./api/09_leave/api.leave";
|
||||||
|
|
||||||
// environment variables
|
// environment variables
|
||||||
export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
|
export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
|
||||||
export const qualifyDisableExamPanel = import.meta.env
|
export const qualifyDisableExamPanel = import.meta.env
|
||||||
|
|
@ -86,6 +89,9 @@ const API = {
|
||||||
|
|
||||||
//reports
|
//reports
|
||||||
...reports,
|
...reports,
|
||||||
|
|
||||||
|
/**leave */
|
||||||
|
...leave,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,71 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, watchEffect, watch } from "vue";
|
import { ref, reactive, watch } from "vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
/** ImportType */
|
||||||
import type {
|
import type {
|
||||||
dataRowRound,
|
FormData,
|
||||||
MyObjectRoundRef,
|
MyObjectRoundRef,
|
||||||
} from "@/modules/09_leave/interface/response/round";
|
} from "@/modules/09_leave/interface/response/round";
|
||||||
|
|
||||||
|
/** ImportComponents */
|
||||||
import DialogHeader from "@/components/DialogHeader.vue";
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { dialogConfirm } = mixin;
|
const { showLoader, dialogConfirm, success, messageError } = mixin;
|
||||||
|
|
||||||
|
/** propsData จาก RoundMain */
|
||||||
|
const props = defineProps({
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
editCheck: {
|
||||||
|
type: String,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
fetchData: {
|
||||||
|
type: Function,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
closeDialog: {
|
||||||
|
type: Function,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
detailData: {
|
||||||
|
type: Object,
|
||||||
|
require: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Ref INPUT เวลา*/
|
||||||
const amRef = ref<Object | null>(null);
|
const amRef = ref<Object | null>(null);
|
||||||
const amOutRef = ref<Object | null>(null);
|
const amOutRef = ref<Object | null>(null);
|
||||||
const pmRef = ref<Object | null>(null);
|
const pmRef = ref<Object | null>(null);
|
||||||
const pmOutRef = ref<Object | null>(null);
|
const pmOutRef = ref<Object | null>(null);
|
||||||
|
|
||||||
const formData = reactive<dataRowRound>({
|
|
||||||
am: "",
|
|
||||||
amOut: "",
|
|
||||||
pm: "",
|
|
||||||
pmOut: "",
|
|
||||||
note: "",
|
|
||||||
status: false,
|
|
||||||
isDefault: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const objectRound: MyObjectRoundRef = {
|
const objectRound: MyObjectRoundRef = {
|
||||||
am: amRef,
|
startTimeMorning: amRef,
|
||||||
amOut: amOutRef,
|
endTimeMorning: amOutRef,
|
||||||
pm: pmRef,
|
startTimeAfternoon: pmRef,
|
||||||
pmOut: pmOutRef,
|
endTimeAfternoon: pmOutRef,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** Form ข้อมูล */
|
||||||
|
const formData = reactive<FormData>({
|
||||||
|
startTimeMorning: "",
|
||||||
|
endTimeMorning: "",
|
||||||
|
startTimeAfternoon: "",
|
||||||
|
endTimeAfternoon: "",
|
||||||
|
description: "",
|
||||||
|
isDefault: false,
|
||||||
|
isActive: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Function validateForm*/
|
||||||
function validateForm() {
|
function validateForm() {
|
||||||
const hasError = [];
|
const hasError = [];
|
||||||
for (const key in objectRound) {
|
for (const key in objectRound) {
|
||||||
|
|
@ -51,48 +83,82 @@ function validateForm() {
|
||||||
console.log(hasError);
|
console.log(hasError);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Function ยืนยันการบันทึกข้อมูล*/
|
||||||
function onSubmit() {
|
function onSubmit() {
|
||||||
dialogConfirm(
|
dialogConfirm(
|
||||||
$q,
|
$q,
|
||||||
async () => {
|
async () => {
|
||||||
props.closeDialog?.();
|
const dataId = props.detailData?.id;
|
||||||
|
props.editCheck === "add" ? postRoundDuty() : putRoundDuty(dataId);
|
||||||
},
|
},
|
||||||
"ยืนยันการบันทึกข้อมูล",
|
"ยืนยันการบันทึกข้อมูล",
|
||||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
const props = defineProps({
|
|
||||||
modal: Boolean,
|
/** Function สร้างรอบการปฏิบัติงาน*/
|
||||||
editCheck: String,
|
async function postRoundDuty() {
|
||||||
closeDialog: Function,
|
await http
|
||||||
detailData: Object,
|
.post(config.API.roundDutytime(), formData)
|
||||||
});
|
.then(() => {
|
||||||
|
success($q, "บันทึกข้อมูล");
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
props.fetchData?.();
|
||||||
|
props.closeDialog?.();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Functiom แก้ไข้รอบการปฏิบัติงาน*/
|
||||||
|
async function putRoundDuty(id: string) {
|
||||||
|
const data = {
|
||||||
|
description: formData.description,
|
||||||
|
isDefault: formData.isDefault,
|
||||||
|
isActive: formData.isActive,
|
||||||
|
};
|
||||||
|
await http
|
||||||
|
.put(config.API.roundDutytimeByid(id), data)
|
||||||
|
.then(() => {
|
||||||
|
success($q, "บันทึกข้อมูล");
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
props.fetchData?.();
|
||||||
|
props.closeDialog?.();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
if (props.closeDialog) {
|
props.closeDialog?.();
|
||||||
props.closeDialog();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/***/
|
||||||
watch(
|
watch(
|
||||||
() => props.modal,
|
() => props.modal,
|
||||||
(newDetailData, oldDetailData) => {
|
(newDetailData, oldDetailData) => {
|
||||||
if (props.editCheck === "add") {
|
if (props.editCheck === "add") {
|
||||||
formData.am = "";
|
formData.startTimeMorning = "";
|
||||||
formData.amOut = "";
|
formData.endTimeMorning = "";
|
||||||
formData.pm = "";
|
formData.startTimeAfternoon = "";
|
||||||
formData.pmOut = "";
|
formData.endTimeAfternoon = "";
|
||||||
formData.note = "";
|
formData.description = "";
|
||||||
formData.isDefault = false;
|
formData.isDefault = false;
|
||||||
formData.status = false;
|
formData.isActive = false;
|
||||||
} else if(props.editCheck === "edit"){
|
} else if (props.editCheck === "edit") {
|
||||||
if (props.detailData) {
|
if (props.detailData) {
|
||||||
formData.am = props.detailData.am;
|
formData.startTimeMorning = props.detailData.startTimeMorning;
|
||||||
formData.amOut = props.detailData.amOut;
|
formData.endTimeMorning = props.detailData.endTimeMorning;
|
||||||
formData.pm = props.detailData.pm;
|
formData.startTimeAfternoon = props.detailData.startTimeAfternoon;
|
||||||
formData.pmOut = props.detailData.pmOut;
|
formData.endTimeAfternoon = props.detailData.endTimeAfternoon;
|
||||||
formData.note = props.detailData.note;
|
formData.description = props.detailData.description;
|
||||||
formData.isDefault = props.detailData.isDefault;
|
formData.isDefault = props.detailData.isDefault;
|
||||||
formData.status = props.detailData.status;
|
formData.isActive = props.detailData.isActive;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -129,21 +195,23 @@ watch(
|
||||||
dense
|
dense
|
||||||
lazy-rules
|
lazy-rules
|
||||||
borderless
|
borderless
|
||||||
v-model="formData.am"
|
v-model="formData.startTimeMorning"
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
(val) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||||
(val) => {
|
(val) => {
|
||||||
if (val && formData.amOut) {
|
if (val && formData.endTimeMorning) {
|
||||||
if (val > formData.amOut) {
|
if (val > formData.endTimeMorning) {
|
||||||
return 'ต้องน้อยกว่าเวลาออกงาน';
|
return 'ต้องน้อยกว่าเวลาออกงาน';
|
||||||
}
|
}
|
||||||
if (val >= formData.pm && val <= formData.pmOut) {
|
if (
|
||||||
|
val >= formData.startTimeAfternoon &&
|
||||||
|
val <= formData.endTimeAfternoon
|
||||||
|
) {
|
||||||
return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
|
return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
|
||||||
}
|
}
|
||||||
if(val === formData.amOut){
|
if (val === formData.endTimeAfternoon) {
|
||||||
return 'เวลาเข้างานช่วงเช้าต้องไม่ซ้ำกับออกงานเช้า'
|
return 'เวลาเข้างานช่วงเช้าต้องไม่ซ้ำกับออกงานเช้า';
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
|
|
@ -162,21 +230,24 @@ watch(
|
||||||
:readonly="props.editCheck === 'edit'"
|
:readonly="props.editCheck === 'edit'"
|
||||||
:outlined="props.editCheck === 'add'"
|
:outlined="props.editCheck === 'add'"
|
||||||
dense
|
dense
|
||||||
v-model="formData.amOut"
|
v-model="formData.endTimeMorning"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
borderless
|
borderless
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) => !!val || 'กรุณากรอกเวลาออกงาน',
|
(val) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||||
(val) => {
|
(val) => {
|
||||||
if (val && formData.am) {
|
if (val && formData.startTimeMorning) {
|
||||||
if (val < formData.am) {
|
if (val < formData.startTimeMorning) {
|
||||||
return 'ต้องมากกว่าเวลาเข้างาน';
|
return 'ต้องมากกว่าเวลาเข้างาน';
|
||||||
}
|
}
|
||||||
if (val >= formData.pm && val <= formData.pmOut) {
|
if (
|
||||||
|
val >= formData.startTimeAfternoon &&
|
||||||
|
val <= formData.endTimeAfternoon
|
||||||
|
) {
|
||||||
return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
|
return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
|
||||||
}
|
}
|
||||||
if(val === formData.am){
|
if (val === formData.startTimeMorning) {
|
||||||
return 'เวลาออกงานช่วงเช้าต้องไม่ซ้ำกับเข้างานเช้า'
|
return 'เวลาออกงานช่วงเช้าต้องไม่ซ้ำกับเข้างานเช้า';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
|
|
@ -199,15 +270,18 @@ watch(
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
(val) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||||
(val) => {
|
(val) => {
|
||||||
if (val && formData.pmOut) {
|
if (val && formData.endTimeAfternoon) {
|
||||||
if (val > formData.pmOut) {
|
if (val > formData.endTimeAfternoon) {
|
||||||
return 'ต้องน้อยกว่าเวลาออกงาน';
|
return 'ต้องน้อยกว่าเวลาออกงาน';
|
||||||
}
|
}
|
||||||
if (val >= formData.am && val <= formData.amOut) {
|
if (
|
||||||
|
val >= formData.startTimeMorning &&
|
||||||
|
val <= formData.endTimeMorning
|
||||||
|
) {
|
||||||
return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
|
return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
|
||||||
}
|
}
|
||||||
if(val === formData.pmOut){
|
if (val === formData.endTimeAfternoon) {
|
||||||
return 'เวลาเข้างานช่วงบ่ายต้องไม่ซ้ำกับออกงานช่วงบ่าย'
|
return 'เวลาเข้างานช่วงบ่ายต้องไม่ซ้ำกับออกงานช่วงบ่าย';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
|
|
@ -219,7 +293,7 @@ watch(
|
||||||
dense
|
dense
|
||||||
lazy-rules
|
lazy-rules
|
||||||
borderless
|
borderless
|
||||||
v-model="formData.pm"
|
v-model="formData.startTimeAfternoon"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
type="time"
|
type="time"
|
||||||
style="width: 140px"
|
style="width: 140px"
|
||||||
|
|
@ -233,15 +307,18 @@ watch(
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) => !!val || 'กรุณากรอกเวลาออกงาน',
|
(val) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||||
(val) => {
|
(val) => {
|
||||||
if (val && formData.pm) {
|
if (val && formData.startTimeAfternoon) {
|
||||||
if (val < formData.pm) {
|
if (val < formData.startTimeAfternoon) {
|
||||||
return 'ต้องมากกว่าเวลาเข้างาน';
|
return 'ต้องมากกว่าเวลาเข้างาน';
|
||||||
}
|
}
|
||||||
if (val >= formData.am && val <= formData.amOut) {
|
if (
|
||||||
|
val >= formData.startTimeMorning &&
|
||||||
|
val <= formData.endTimeMorning
|
||||||
|
) {
|
||||||
return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
|
return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
|
||||||
}
|
}
|
||||||
if(val === formData.pm){
|
if (val === formData.startTimeAfternoon) {
|
||||||
return 'เวลาออกงานช่วงบ่ายต้องไม่ซ้ำกับเข้างานช่วงบ่าย'
|
return 'เวลาออกงานช่วงบ่ายต้องไม่ซ้ำกับเข้างานช่วงบ่าย';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
|
|
@ -251,7 +328,7 @@ watch(
|
||||||
:readonly="props.editCheck === 'edit'"
|
:readonly="props.editCheck === 'edit'"
|
||||||
:outlined="props.editCheck === 'add'"
|
:outlined="props.editCheck === 'add'"
|
||||||
dense
|
dense
|
||||||
v-model="formData.pmOut"
|
v-model="formData.endTimeAfternoon"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
borderless
|
borderless
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
|
|
@ -264,7 +341,7 @@ watch(
|
||||||
class="col-12 bg-white q-ma-md"
|
class="col-12 bg-white q-ma-md"
|
||||||
outlined
|
outlined
|
||||||
stack-label
|
stack-label
|
||||||
v-model="formData.note"
|
v-model="formData.description"
|
||||||
label="คำอธิบาย"
|
label="คำอธิบาย"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
type="textarea"
|
type="textarea"
|
||||||
|
|
@ -286,7 +363,7 @@ watch(
|
||||||
<div class="row items-center q-my-sm justify-between">
|
<div class="row items-center q-my-sm justify-between">
|
||||||
<p class="q-ma-none">สถานะการใช้งาน</p>
|
<p class="q-ma-none">สถานะการใช้งาน</p>
|
||||||
<label class="toggle-control">
|
<label class="toggle-control">
|
||||||
<input type="checkbox" v-model="formData.status" />
|
<input type="checkbox" v-model="formData.isActive" />
|
||||||
<span class="control"></span>
|
<span class="control"></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,59 @@
|
||||||
interface RoundRows {
|
interface RoundRows {
|
||||||
name: string;
|
name: string;
|
||||||
position: string;
|
position: string;
|
||||||
responsibilities: string;
|
responsibilities: string;
|
||||||
email: string;
|
email: string;
|
||||||
phone: string;
|
phone: string;
|
||||||
}
|
}
|
||||||
interface dataRowRound {
|
interface dataRowRound {
|
||||||
am: string
|
id: string;
|
||||||
amOut: string
|
createdAt: string;
|
||||||
pm: string
|
createdFullName: string;
|
||||||
note:string
|
createdUserId: string;
|
||||||
pmOut: string
|
description: string;
|
||||||
status: boolean
|
endTimeAfternoon: string;
|
||||||
isDefault: boolean
|
endTimeMorning: string;
|
||||||
|
startTimeMorning: string;
|
||||||
|
startTimeAfternoon: string;
|
||||||
|
lastUpdateFullName: string;
|
||||||
|
lastUpdateUserId: string;
|
||||||
|
lastUpdatedAt: string;
|
||||||
|
isActive: boolean;
|
||||||
|
isDefault: boolean;
|
||||||
|
}
|
||||||
|
interface FormData {
|
||||||
|
startTimeMorning: string;
|
||||||
|
endTimeMorning: string;
|
||||||
|
startTimeAfternoon: string;
|
||||||
|
endTimeAfternoon: string;
|
||||||
|
description: string;
|
||||||
|
isDefault: boolean;
|
||||||
|
isActive: boolean;
|
||||||
}
|
}
|
||||||
interface roundShow {
|
interface roundShow {
|
||||||
round: string;
|
id: string;
|
||||||
am: string;
|
round: string;
|
||||||
amOut: string;
|
morningRound: string;
|
||||||
pm: string;
|
afternoonRound: string;
|
||||||
pmOut: string;
|
createdAt: string;
|
||||||
amRound: string;
|
createdFullName: string;
|
||||||
pmRound: string;
|
createdUserId: string;
|
||||||
status: boolean;
|
description: string;
|
||||||
isDefault: boolean;
|
endTimeAfternoon: string;
|
||||||
}
|
endTimeMorning: string;
|
||||||
interface MyObjectRoundRef {
|
startTimeMorning: string;
|
||||||
am: object | null,
|
startTimeAfternoon: string;
|
||||||
amOut: object | null,
|
lastUpdateFullName: string;
|
||||||
pm: object | null,
|
lastUpdateUserId: string;
|
||||||
pmOut: object | null,
|
lastUpdatedAt: string;
|
||||||
[key: string]: any;
|
isActive: boolean;
|
||||||
|
isDefault: boolean;
|
||||||
}
|
}
|
||||||
export type {
|
interface MyObjectRoundRef {
|
||||||
RoundRows,
|
startTimeMorning: object | null;
|
||||||
dataRowRound,
|
endTimeMorning: object | null;
|
||||||
MyObjectRoundRef,
|
startTimeAfternoon: object | null;
|
||||||
roundShow
|
endTimeAfternoon: object | null;
|
||||||
};
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
export type { RoundRows, dataRowRound, FormData, MyObjectRoundRef, roundShow };
|
||||||
|
|
|
||||||
|
|
@ -1,85 +1,96 @@
|
||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import type { dataRowRound,roundShow } from "@/modules/09_leave/interface/response/round.ts";
|
import type {
|
||||||
|
dataRowRound,
|
||||||
|
roundShow,
|
||||||
|
} from "@/modules/09_leave/interface/response/round.ts";
|
||||||
import type { QTableProps } from "quasar";
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
// store ลา >> รอบการปฏิบัติงาน
|
// store ลา >> รอบการปฏิบัติงาน
|
||||||
export const useRoundDataStore = defineStore(
|
export const useRoundDataStore = defineStore("roundWorkStore", () => {
|
||||||
"roundWorkStore",
|
/** ค้นหา คอลัมน์ คอลัมน์ที่แสดง */
|
||||||
() => {
|
const visibleColumns = ref<string[]>([
|
||||||
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
"round",
|
||||||
const visibleColumns = ref<string[]>([
|
"morningRound",
|
||||||
"round",
|
"afternoonRound",
|
||||||
"amRound",
|
"isActive",
|
||||||
"pmRound",
|
]);
|
||||||
"note",
|
|
||||||
"status"
|
|
||||||
]);
|
|
||||||
|
|
||||||
// หัวตาราง
|
/** หัวตาราง */
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "round",
|
name: "round",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "รอบ",
|
label: "รอบ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "round",
|
field: "round",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "amRound",
|
name: "morningRound",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ช่วงเช้า",
|
label: "ช่วงเช้า",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "amRound",
|
field: "morningRound",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "pmRound",
|
name: "afternoonRound",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ช่วงบ่าย",
|
label: "ช่วงบ่าย",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "pmRound",
|
field: "afternoonRound",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "status",
|
name: "isActive",
|
||||||
align: "center",
|
align: "center",
|
||||||
label: "สถานะการใช้งาน",
|
label: "สถานะการใช้งาน",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "status",
|
field: "isActive",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// ข้อมูลในตาราง
|
/** ข้อมูลในตาราง */
|
||||||
const rows = ref<dataRowRound[]>([]);
|
const rows = ref<dataRowRound[]>([]);
|
||||||
function fetchData(data: dataRowRound[]) {
|
/**
|
||||||
let datalist: roundShow[] = data.map((e: dataRowRound) => {
|
* Function รับข้อมูลจาก API map
|
||||||
return {
|
* @param data รับข้อมูลจาก API
|
||||||
round:`${e.am}-${e.pmOut}`,
|
*/
|
||||||
am: e.am,
|
function fetchData(data: dataRowRound[]) {
|
||||||
amOut: e.amOut,
|
let datalist: roundShow[] = data.map((e: dataRowRound) => {
|
||||||
pm: e.pm,
|
return {
|
||||||
pmOut: e.pmOut,
|
id: e.id,
|
||||||
amRound:`${e.am}-${e.amOut}`,
|
round: `${e.startTimeMorning}-${e.endTimeAfternoon}`,
|
||||||
pmRound:`${e.pm}-${e.pmOut}`,
|
morningRound: `${e.startTimeMorning}-${e.endTimeMorning}`,
|
||||||
status: e.status,
|
afternoonRound: `${e.startTimeAfternoon}-${e.endTimeAfternoon}`,
|
||||||
isDefault: e.isDefault,
|
createdAt: e.createdAt,
|
||||||
};
|
createdFullName: e.createdFullName,
|
||||||
|
createdUserId: e.createdUserId,
|
||||||
|
description: e.description,
|
||||||
|
endTimeAfternoon: e.endTimeAfternoon,
|
||||||
|
endTimeMorning: e.endTimeMorning,
|
||||||
|
startTimeMorning: e.startTimeMorning,
|
||||||
|
startTimeAfternoon: e.startTimeAfternoon,
|
||||||
|
lastUpdateFullName: e.lastUpdateFullName,
|
||||||
|
lastUpdateUserId: e.lastUpdateUserId,
|
||||||
|
lastUpdatedAt: e.lastUpdatedAt,
|
||||||
|
isActive: e.isActive,
|
||||||
|
isDefault: e.isDefault,
|
||||||
|
};
|
||||||
});
|
});
|
||||||
rows.value = datalist;
|
rows.value = datalist;
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
visibleColumns,
|
|
||||||
columns,
|
|
||||||
rows,
|
|
||||||
fetchData
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
);
|
|
||||||
|
return {
|
||||||
|
visibleColumns,
|
||||||
|
columns,
|
||||||
|
rows,
|
||||||
|
fetchData,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,29 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, useAttrs, onMounted } from "vue";
|
import { ref, useAttrs, onMounted } from "vue";
|
||||||
|
|
||||||
import router from "@/router";
|
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import DialogForm from "@/modules/09_leave/components/3_WorkTime/DialogForm.vue";
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
/** ImportStores*/
|
||||||
import { useRoundDataStore } from "@/modules/09_leave/stores/RoundStores";
|
import { useRoundDataStore } from "@/modules/09_leave/stores/RoundStores";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
/** ImportComponents*/
|
||||||
|
import DialogForm from "@/modules/09_leave/components/3_WorkTime/DialogForm.vue";
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
const dataStore = useRoundDataStore();
|
const dataStore = useRoundDataStore();
|
||||||
const { fetchData } = dataStore;
|
const { fetchData } = dataStore;
|
||||||
|
const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
|
||||||
const $q = useQuasar(); //ใช้ noti quasar
|
const $q = useQuasar(); //ใช้ noti quasar
|
||||||
|
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
|
||||||
const modal = ref<boolean>(false);
|
const modal = ref<boolean>(false);
|
||||||
const detailData = ref<any>();
|
const detailData = ref<any>();
|
||||||
const editCheck = ref<string>("");
|
const editCheck = ref<string>("");
|
||||||
// ค้นหาในตาราง
|
|
||||||
|
/** ค้นหาข้อมูลใน Table */
|
||||||
const filterKeyword = ref<string>("");
|
const filterKeyword = ref<string>("");
|
||||||
const filterRef = ref<HTMLInputElement | null>(null);
|
const filterRef = ref<HTMLInputElement | null>(null);
|
||||||
const resetFilter = () => {
|
const resetFilter = () => {
|
||||||
|
|
@ -22,19 +33,52 @@ const resetFilter = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const attrs = ref<any>(useAttrs());
|
onMounted(() => {
|
||||||
const paging = ref<boolean>(true);
|
fetchListRoind();
|
||||||
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;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
/** Function get ข้อมูลรายการรอบการปฏิบัติงาน */
|
||||||
|
async function fetchListRoind() {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.roundDutytime())
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
fetchData(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function delete รายการรอบการปฏิบัติงาน
|
||||||
|
* @param id ค่า ID ของ rows
|
||||||
|
*/
|
||||||
|
function onClickDelete(id: string) {
|
||||||
|
dialogRemove($q, async () => {
|
||||||
|
await http
|
||||||
|
.delete(config.API.roundDutytimeByid(id))
|
||||||
|
.then(() => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchListRoind();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param data ข้อมูลรอบการปฏิบัติงาน
|
||||||
|
* @param check action แก้ไข,เพิ่ม
|
||||||
|
*/
|
||||||
function openModal(data: any, check: string) {
|
function openModal(data: any, check: string) {
|
||||||
modal.value = true;
|
modal.value = true;
|
||||||
editCheck.value = check;
|
editCheck.value = check;
|
||||||
|
|
@ -43,45 +87,18 @@ function openModal(data: any, check: string) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Function ปิด popup รายละเอียดและการเพิ่ม*/
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
modal.value = false;
|
modal.value = false;
|
||||||
editCheck.value = "add";
|
editCheck.value = "add";
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
|
||||||
dataStore.fetchData([
|
/** pagination */
|
||||||
{
|
const pagination = ref({
|
||||||
am: "07:30",
|
// sortBy: "desc",
|
||||||
amOut: "12:00",
|
descending: false,
|
||||||
pm: "13:00",
|
page: 1,
|
||||||
pmOut: "15:30",
|
rowsPerPage: 10,
|
||||||
status: true,
|
|
||||||
isDefault: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
am: "08:30",
|
|
||||||
amOut: "12:00",
|
|
||||||
pm: "13:00",
|
|
||||||
pmOut: "15:30",
|
|
||||||
status: false,
|
|
||||||
isDefault: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
am: "09:30",
|
|
||||||
amOut: "12:00",
|
|
||||||
pm: "13:00",
|
|
||||||
pmOut: "15:30",
|
|
||||||
status: true,
|
|
||||||
isDefault: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
am: "10:30",
|
|
||||||
amOut: "12:00",
|
|
||||||
pm: "13:00",
|
|
||||||
pmOut: "15:30",
|
|
||||||
status: true,
|
|
||||||
isDefault: false,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -158,7 +175,6 @@ onMounted(() => {
|
||||||
class="custom-header-table"
|
class="custom-header-table"
|
||||||
v-bind="attrs"
|
v-bind="attrs"
|
||||||
:visible-columns="dataStore.visibleColumns"
|
:visible-columns="dataStore.visibleColumns"
|
||||||
:pagination-label="paginationLabel"
|
|
||||||
v-model:pagination="pagination"
|
v-model:pagination="pagination"
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
|
|
@ -172,6 +188,7 @@ onMounted(() => {
|
||||||
>
|
>
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
</q-th>
|
</q-th>
|
||||||
|
<q-th auto-width></q-th>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:body="props">
|
<template v-slot:body="props">
|
||||||
|
|
@ -192,15 +209,15 @@ onMounted(() => {
|
||||||
:props="props"
|
:props="props"
|
||||||
@click.prevent="openModal(props.row, 'edit')"
|
@click.prevent="openModal(props.row, 'edit')"
|
||||||
>
|
>
|
||||||
<div v-if="col.name === 'status'" class="text-center">
|
<div v-if="col.name === 'isActive'" class="text-center">
|
||||||
<q-icon
|
<q-icon
|
||||||
v-if="props.row.status === true"
|
v-if="props.row.isActive === true"
|
||||||
name="mdi-check"
|
name="mdi-check"
|
||||||
size="sm"
|
size="sm"
|
||||||
color="positive"
|
color="positive"
|
||||||
/>
|
/>
|
||||||
<q-icon
|
<q-icon
|
||||||
v-if="props.row.status === false"
|
v-if="props.row.isActive === false"
|
||||||
name="mdi-close"
|
name="mdi-close"
|
||||||
size="sm"
|
size="sm"
|
||||||
color="grey"
|
color="grey"
|
||||||
|
|
@ -210,6 +227,17 @@ onMounted(() => {
|
||||||
{{ col.value }}
|
{{ col.value }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
|
<q-td>
|
||||||
|
<q-btn
|
||||||
|
v-if="props.row.isActive === false"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="red"
|
||||||
|
icon="delete"
|
||||||
|
@click="onClickDelete(props.row.id)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
</d-table>
|
</d-table>
|
||||||
|
|
@ -220,6 +248,7 @@ onMounted(() => {
|
||||||
:closeDialog="closeDialog"
|
:closeDialog="closeDialog"
|
||||||
:editCheck="editCheck"
|
:editCheck="editCheck"
|
||||||
:detailData="detailData"
|
:detailData="detailData"
|
||||||
|
:fetchData="fetchListRoind"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue