api ผังบัญชีค่าจ้างลูกจ้างประจำ => บัญชีโครงสร้าง
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
20ad3b34e7
commit
94e5e136e6
9 changed files with 648 additions and 107 deletions
|
|
@ -29,5 +29,16 @@ export default {
|
|||
salaryListPerson: `${env.API_URI}/org/profile/salary/gen`,
|
||||
salaryPeriodProfile: `${salary}/period/org/profile`,
|
||||
|
||||
salaryProperty:(id:string)=> `${salaryPeriod}/org/property/${id}`,
|
||||
salaryProperty: (id: string) => `${salaryPeriod}/org/property/${id}`,
|
||||
|
||||
/** รายการเงินเดือนลูกจ้างประจำ*/
|
||||
salaryEmployeeChart: `${salary}/employee`,
|
||||
salaryEmployeeChartByid: (id: string) => `${salary}/employee/${id}`,
|
||||
salaryEmployeeChartCopy: `${salary}/employee/copy`,
|
||||
salaryEmployeeChartFile: (id: string) => `${salary}/file/employee/${id}`,
|
||||
salaryEmployeeChartDelFile: (id: string, fileName: string) =>
|
||||
`${salary}/file/employee/${id}/${fileName}`,
|
||||
|
||||
salaryEmployeeRateList: `${salaryRate}/employee`,
|
||||
salaryEmployeeRateListByid: (id: string) => `${salaryRate}/employee/${id}`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, reactive, watch } from "vue";
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
|
||||
import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
|
||||
|
|
@ -24,6 +26,10 @@ const modal = defineModel<boolean>("modal", { required: true });
|
|||
const props = defineProps({
|
||||
isStatusEdit: { type: Boolean, required: true },
|
||||
data: { type: Object, required: true },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const formData = reactive<FormDataChar>({
|
||||
name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
|
||||
|
|
@ -43,6 +49,29 @@ const ObjectRef: ObjectCharRef = {
|
|||
group: groupRef,
|
||||
};
|
||||
|
||||
function fetchSalaryDetail(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.salaryEmployeeChartByid(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formData.name = data.name;
|
||||
formData.group = data.group;
|
||||
formData.isActive = data.isActive;
|
||||
formData.date = data.date;
|
||||
formData.startDate = data.startDate;
|
||||
formData.endDate = data.endDate;
|
||||
formData.details = data.details;
|
||||
isReadonly.value = data.isActive ? true : false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const isReadonly = ref<boolean>(false);
|
||||
function onClickSubmit() {
|
||||
const hasError = [];
|
||||
|
|
@ -62,8 +91,21 @@ function onClickSubmit() {
|
|||
}
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
console.log(props.isStatusEdit);
|
||||
async function onSubmit() {
|
||||
showLoader();
|
||||
try {
|
||||
const url = !props.isStatusEdit
|
||||
? config.API.salaryEmployeeChart
|
||||
: config.API.salaryEmployeeChartByid(props.data.id);
|
||||
await http[!props.isStatusEdit ? "post" : "put"](url, formData);
|
||||
success($q, "บันทีกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
closeDialog();
|
||||
}
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
|
|
@ -94,16 +136,7 @@ watch(
|
|||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value && props.isStatusEdit) {
|
||||
console.log(props.data);
|
||||
const data = props.data;
|
||||
formData.name = data.name;
|
||||
formData.group = data.group;
|
||||
formData.isActive = data.isActive;
|
||||
formData.date = data.date;
|
||||
formData.startDate = null;
|
||||
formData.endDate = null;
|
||||
formData.details = "";
|
||||
isReadonly.value = data.isActive ? true : false;
|
||||
fetchSalaryDetail(props.data.id);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -112,7 +145,14 @@ watch(
|
|||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 80%">
|
||||
<form @submit.prevent.stop="onClickSubmit">
|
||||
<Header tittle="test" :close="closeDialog" />
|
||||
<Header
|
||||
:tittle="
|
||||
props.isStatusEdit
|
||||
? 'แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ'
|
||||
: 'เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ'
|
||||
"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, reactive, watch } from "vue";
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { ObjectSalaryRateRef } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { ObjectReteRef } from "@/modules/13_salary/interface/index/EmployeeChart";
|
||||
import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";
|
||||
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
|
|
@ -22,7 +23,7 @@ const {
|
|||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
const salaryId = ref<string>(route.params.id.toString());
|
||||
const salaryEmployeeId = ref<string>(route.params.id.toString());
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
|
|
@ -34,6 +35,10 @@ const props = defineProps({
|
|||
type: Object,
|
||||
defult: [],
|
||||
},
|
||||
fetchData: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const formData = reactive<any>({
|
||||
|
|
@ -47,7 +52,7 @@ const salaryNoRef = ref<Object | null>(null);
|
|||
const salaryMonthRef = ref<Object | null>(null);
|
||||
const salaryDayRef = ref<Object | null>(null);
|
||||
|
||||
const ObjectRef: any = {
|
||||
const ObjectRef: ObjectReteRef = {
|
||||
salaryNo: salaryNoRef,
|
||||
salaryMonth: salaryMonthRef,
|
||||
salaryDay: salaryDayRef,
|
||||
|
|
@ -65,7 +70,6 @@ function clearFormData() {
|
|||
}
|
||||
|
||||
function onClickSubmit() {
|
||||
console.log(formData.salaryHalfSpecial);
|
||||
const hasError = [];
|
||||
for (const key in ObjectRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
|
||||
|
|
@ -82,30 +86,57 @@ function onClickSubmit() {
|
|||
}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
closeDialog();
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
const body: FormDataRate = {
|
||||
salaryEmployeeId: !props.isStatusEdit
|
||||
? salaryEmployeeId.value
|
||||
: undefined,
|
||||
step:
|
||||
typeof formData.salaryNo === "number"
|
||||
? formData.salaryNo
|
||||
: Number(formData.salaryNo.replace(/,/g, "")),
|
||||
|
||||
salaryMonth:
|
||||
typeof formData.salaryMonth === "number"
|
||||
? formData.salaryMonth
|
||||
: Number(formData.salaryMonth.replace(/,/g, "")), //*เงินเดือนฐาน
|
||||
|
||||
salaryDay:
|
||||
typeof formData.salaryDay === "number"
|
||||
? formData.salaryDay
|
||||
: Number(formData.salaryDay.replace(/,/g, "")), //0.5 ขั้น
|
||||
};
|
||||
try {
|
||||
const url = !props.isStatusEdit
|
||||
? config.API.salaryEmployeeRateList
|
||||
: config.API.salaryEmployeeRateListByid(props?.data?.id);
|
||||
await http[!props.isStatusEdit ? "post" : "put"](url, body);
|
||||
success($q, "บันทีกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
hideLoader();
|
||||
} finally {
|
||||
closeDialog();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// watch(
|
||||
// () => modal.value,
|
||||
// () => {
|
||||
// if (modal.value && props.typeAction === "edit") {
|
||||
// if (props.data) {
|
||||
// const data = props.data;
|
||||
// formData.salaryId = data.id;
|
||||
// formData.salary = data.salary;
|
||||
// formData.salaryHalf = data.salaryHalf;
|
||||
// formData.salaryHalfSpecial = data.salaryHalfSpecial;
|
||||
// formData.salaryFull = data.salaryFull;
|
||||
// formData.salaryFullSpecial = data.salaryFullSpecial;
|
||||
// formData.salaryFullHalf = data.salaryFullHalf;
|
||||
// formData.salaryFullHalfSpecial = data.salaryFullHalfSpecial;
|
||||
// formData.isNext = data.isNext;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value && props.isStatusEdit) {
|
||||
if (props.data) {
|
||||
const data = props.data;
|
||||
console.log(data);
|
||||
formData.salaryNo = data.step;
|
||||
formData.salaryMonth = data.salaryMonth;
|
||||
formData.salaryDay = data.salaryDay;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,281 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import axios from "axios";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
dialogRemove,
|
||||
} = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
defult: "",
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
defult: false,
|
||||
},
|
||||
});
|
||||
|
||||
const salaryId = ref<string>("");
|
||||
|
||||
const documentFile = ref<any>(null);
|
||||
const itemsDocument = ref<any>([]);
|
||||
|
||||
async function fetchDocumentFile(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.salaryEmployeeChartFile(id))
|
||||
.then((res) => {
|
||||
const list = res.data.map((e: any) => ({ name: e.fileName }));
|
||||
itemsDocument.value = list;
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
if (modal.value) {
|
||||
if (props.id) {
|
||||
salaryId.value = props.id;
|
||||
await fetchDocumentFile(props.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function closeDialog() {
|
||||
modal.value = !modal.value;
|
||||
}
|
||||
|
||||
async function uploadDocumentFile() {
|
||||
const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
|
||||
showLoader();
|
||||
const formData = new FormData();
|
||||
formData.append("file", documentFile.value);
|
||||
const body = {
|
||||
replace: false,
|
||||
fileList: {
|
||||
fileName: fileName,
|
||||
},
|
||||
};
|
||||
await http
|
||||
.post(config.API.salaryEmployeeChartFile(salaryId.value), body)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
const foundKey: any = Object.keys(res.data).find(
|
||||
(key) =>
|
||||
res.data[key]?.fileName !== undefined &&
|
||||
res.data[key]?.fileName !== ""
|
||||
);
|
||||
const link = res.data[foundKey]?.uploadUrl;
|
||||
fileUpLoad(link);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
/**
|
||||
* function อัปโหลดไฟล์
|
||||
* @param url link อัปโหลด
|
||||
*/
|
||||
function fileUpLoad(url: string) {
|
||||
axios
|
||||
.put(url, documentFile.value, {
|
||||
headers: { "Content-Type": documentFile.value?.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.then(() => {
|
||||
success($q, "อัปโหลดไฟล์สำเร็จ");
|
||||
documentFile.value = null;
|
||||
fetchDocumentFile(salaryId.value);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
|
||||
function onClickDeleteFile(fileName: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.salaryEmployeeChartDelFile(salaryId.value, fileName))
|
||||
.then(() => {
|
||||
setTimeout(() => {
|
||||
fetchDocumentFile(salaryId.value);
|
||||
success($q, "ลบไฟล์สำเร็จ");
|
||||
}, 1000);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function onClickDonwload(fileName: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.salaryEmployeeChartDelFile(salaryId.value, fileName))
|
||||
.then((res) => {
|
||||
const data = res.data;
|
||||
downloadFile(data.downloadUrl, data.fileType, fileName);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกไฟล์ PDF
|
||||
* @param url link PDF
|
||||
* @param type ประเภทไฟล์
|
||||
* @param fileName ชือไฟล์
|
||||
*/
|
||||
async function downloadFile(url: string, type: string, fileName: string) {
|
||||
await axios
|
||||
.get(url, {
|
||||
method: "GET",
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
const a = document.createElement("a");
|
||||
a.href = window.URL.createObjectURL(res.data);
|
||||
a.download = fileName;
|
||||
a.click();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 80%">
|
||||
<Header :tittle="`อัปโหลดเอกสารอ้างอิง`" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-md-12">
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<div class="row col-12 q-col-gutter-y-sm">
|
||||
<div class="col-12 row">
|
||||
<div v-if="!props.isActive" class="full-width">
|
||||
<q-file
|
||||
class="col-12"
|
||||
outlined
|
||||
dense
|
||||
v-model="documentFile"
|
||||
label="เอกสารอ้างอิง"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
v-if="documentFile"
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="add"
|
||||
icon="mdi-upload"
|
||||
@click="uploadDocumentFile"
|
||||
><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
|
||||
>
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="itemsDocument.length > 0" class="col-xs-12 row">
|
||||
<q-list class="full-width rounded-borders" bordered separator>
|
||||
<q-item
|
||||
v-for="file in itemsDocument"
|
||||
:key="file.id"
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section>{{ file.name }}</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
size="12px"
|
||||
color="blue"
|
||||
icon="mdi-download-outline"
|
||||
@click="onClickDonwload(file.name)"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div v-if="!props.isActive">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
size="12px"
|
||||
color="red"
|
||||
icon="mdi-delete-outline"
|
||||
@click="onClickDeleteFile(file.name)"
|
||||
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-else>
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,14 +1,22 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
|
||||
import type {
|
||||
ItemsMenu,
|
||||
NewPagination,
|
||||
} from "@/modules/13_salary/interface/index/Main";
|
||||
import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeChart";
|
||||
import type { EmployeeSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue";
|
||||
import DialogEmployeeUpload from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -25,11 +33,12 @@ const {
|
|||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
const formFilter = reactive({
|
||||
const formFilter = reactive<FormFilter>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -70,27 +79,9 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const rows = ref<any>([
|
||||
{
|
||||
id: "1",
|
||||
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
|
||||
group: 1,
|
||||
date: new Date(),
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
|
||||
group: 2,
|
||||
date: new Date(),
|
||||
isActive: false,
|
||||
},
|
||||
]);
|
||||
const rows = ref<EmployeeSalary[]>([]);
|
||||
const visibleColumns = ref<string[]>(["name", "group", "date", "isActive"]);
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
|
||||
/** List Mune*/
|
||||
const itemMenu = ref<ItemsMenu[]>([
|
||||
{
|
||||
|
|
@ -119,18 +110,37 @@ const itemMenu = ref<ItemsMenu[]>([
|
|||
},
|
||||
]);
|
||||
|
||||
function onClickAction(type: string, data: any) {
|
||||
function fetchListChart() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.salaryEmployeeChart +
|
||||
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
|
||||
)
|
||||
.then((res) => {
|
||||
rows.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onClickAction(type: string, data: EmployeeSalary) {
|
||||
switch (type) {
|
||||
case "edit":
|
||||
onEdit(data);
|
||||
break;
|
||||
case "upload":
|
||||
onUpload();
|
||||
onUpload(data.id, data.isActive);
|
||||
break;
|
||||
case "salaryRate":
|
||||
onSalaryRate(data.id);
|
||||
break;
|
||||
case "coppy":
|
||||
case "copy":
|
||||
onCoppy(data.id);
|
||||
break;
|
||||
|
||||
|
|
@ -139,30 +149,83 @@ function onClickAction(type: string, data: any) {
|
|||
}
|
||||
}
|
||||
|
||||
function onEdit(data: any) {
|
||||
function onEdit(data: EmployeeSalary) {
|
||||
modalDialogEmployeeChart.value = true;
|
||||
isStatusEdit.value = true;
|
||||
dataRow.value = data;
|
||||
}
|
||||
|
||||
function onUpload() {}
|
||||
const modalDialogUpload = ref<boolean>(false);
|
||||
const salaryChartId = ref<string>("");
|
||||
const isActive = ref<boolean>(false);
|
||||
function onUpload(id: string, status: boolean) {
|
||||
modalDialogUpload.value = true;
|
||||
salaryChartId.value = id;
|
||||
isActive.value = status;
|
||||
}
|
||||
|
||||
function onSalaryRate(id: string) {
|
||||
router.push(`/salary-employee/rate/${id}`);
|
||||
}
|
||||
|
||||
function onCoppy(id: string) {}
|
||||
function onCoppy(id: string) {
|
||||
http
|
||||
.post(config.API.salaryEmployeeChartCopy, { id: id })
|
||||
.then(() => {
|
||||
fetchListChart();
|
||||
success($q, "คัดลอกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
function onClickDelete(id: string) {
|
||||
dialogRemove($q, () => {});
|
||||
dialogRemove($q, () => {
|
||||
http
|
||||
.delete(config.API.salaryEmployeeChartByid(id))
|
||||
.then(() => {
|
||||
fetchListChart();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const modalDialogEmployeeChart = ref<boolean>(false);
|
||||
const isStatusEdit = ref<boolean>(false);
|
||||
const dataRow = ref<any>();
|
||||
const dataRow = ref<EmployeeSalary>();
|
||||
function onClickAdd() {
|
||||
modalDialogEmployeeChart.value = true;
|
||||
isStatusEdit.value = false;
|
||||
}
|
||||
|
||||
function filterFn() {
|
||||
formFilter.page = 1;
|
||||
fetchListChart();
|
||||
}
|
||||
|
||||
function updatePage(val: number) {
|
||||
formFilter.page = val;
|
||||
fetchListChart();
|
||||
}
|
||||
|
||||
function updatePageSize(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
fetchListChart();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchListChart();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0px">
|
||||
|
|
@ -173,10 +236,10 @@ function onClickAdd() {
|
|||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.pervrnt="filterFn"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
@ -206,9 +269,9 @@ function onClickAdd() {
|
|||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[10, 20, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSize"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -290,11 +353,12 @@ function onClickAdd() {
|
|||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="1"
|
||||
:max="maxPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePage"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
|
|
@ -302,7 +366,14 @@ function onClickAdd() {
|
|||
<DialogEmployeeChart
|
||||
v-model:modal="modalDialogEmployeeChart"
|
||||
:isStatusEdit="isStatusEdit"
|
||||
:data="dataRow"
|
||||
:data="dataRow as EmployeeSalary"
|
||||
:fetchData="fetchListChart"
|
||||
/>
|
||||
|
||||
<DialogEmployeeUpload
|
||||
v-model:modal="modalDialogUpload"
|
||||
:id="salaryChartId"
|
||||
:isActive="isActive"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,4 +4,12 @@ interface ObjectCharRef {
|
|||
|
||||
[key: string]: any;
|
||||
}
|
||||
export type { ObjectCharRef };
|
||||
|
||||
interface ObjectReteRef {
|
||||
salaryNo: object | null;
|
||||
salaryMonth: object | null;
|
||||
salaryDay: object | null;
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
export type { ObjectCharRef, ObjectReteRef };
|
||||
|
|
|
|||
|
|
@ -7,4 +7,18 @@ interface FormDataChar {
|
|||
endDate: Date | null; //วันที่สิ้นสุดบังคับใช้
|
||||
details: string; //คำอธิบาย
|
||||
}
|
||||
export type { FormDataChar };
|
||||
|
||||
interface FormFilter {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
keyword: string;
|
||||
}
|
||||
|
||||
interface FormDataRate {
|
||||
salaryEmployeeId: string | undefined;
|
||||
step: number;
|
||||
salaryMonth: number;
|
||||
salaryDay: number;
|
||||
}
|
||||
|
||||
export type { FormDataChar, FormFilter, FormDataRate };
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
interface EmployeeSalary {
|
||||
date: Date;
|
||||
details: string;
|
||||
endDate: Date;
|
||||
group: number;
|
||||
id: string;
|
||||
isActive: boolean;
|
||||
name: string;
|
||||
startDate: Date;
|
||||
}
|
||||
interface EmployeeRateSalary {
|
||||
id: string;
|
||||
salaryDay: number;
|
||||
salaryMonth: number;
|
||||
step: number;
|
||||
}
|
||||
export type { EmployeeSalary, EmployeeRateSalary };
|
||||
|
|
@ -1,11 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
|
||||
import type {
|
||||
ItemsMenu,
|
||||
NewPagination,
|
||||
} from "@/modules/13_salary/interface/index/Main";
|
||||
import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeChart";
|
||||
import type { EmployeeRateSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
|
||||
|
||||
/** importComponts*/
|
||||
import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue";
|
||||
|
|
@ -14,49 +21,46 @@ import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeCha
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
||||
useCounterMixin();
|
||||
|
||||
const salaryEmployeeId = ref<string>(route.params.id.toString());
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
name: "step",
|
||||
align: "left",
|
||||
label: "ลำดับขั้น",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
field: "step",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "month",
|
||||
name: "salaryMonth",
|
||||
align: "left",
|
||||
label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายเดือน)",
|
||||
sortable: true,
|
||||
field: "month",
|
||||
field: "salaryMonth",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "day",
|
||||
name: "salaryDay",
|
||||
align: "left",
|
||||
label: "อัตราค่าจ้าง/ชั้นวิ่ง (รายวัน)",
|
||||
sortable: true,
|
||||
field: "day",
|
||||
field: "salaryDay",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const rows = ref<any>([
|
||||
{
|
||||
no: "1",
|
||||
month: 100000,
|
||||
day: 5000,
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>(["no", "month", "day"]);
|
||||
const rows = ref<EmployeeRateSalary[]>([]);
|
||||
const visibleColumns = ref<string[]>(["step", "salaryMonth", "salaryDay"]);
|
||||
|
||||
/** List Mune*/
|
||||
const itemMenu = ref<ItemsMenu[]>([
|
||||
|
|
@ -75,26 +79,48 @@ const itemMenu = ref<ItemsMenu[]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const formFilter = reactive({
|
||||
const formFilter = reactive<FormFilter>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
|
||||
function fetchSalalyEmployeeRate() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.salaryEmployeeRateListByid(salaryEmployeeId.value) +
|
||||
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
|
||||
)
|
||||
.then((res) => {
|
||||
rows.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const modalDialogEmployeeRate = ref<boolean>(false);
|
||||
const isStatusEdit = ref<boolean>(false);
|
||||
const dataRow = ref<EmployeeRateSalary>();
|
||||
|
||||
function onClickAction(type: string, data: any) {
|
||||
function onClickAction(type: string, data: EmployeeRateSalary) {
|
||||
switch (type) {
|
||||
case "edit":
|
||||
onEdit();
|
||||
onEdit(data);
|
||||
break;
|
||||
case "delete":
|
||||
onDelete();
|
||||
onDelete(data.id);
|
||||
break;
|
||||
|
||||
default:
|
||||
|
|
@ -102,19 +128,58 @@ function onClickAction(type: string, data: any) {
|
|||
}
|
||||
}
|
||||
|
||||
function onEdit() {
|
||||
function onEdit(data: EmployeeRateSalary) {
|
||||
modalDialogEmployeeRate.value = true;
|
||||
isStatusEdit.value = true;
|
||||
dataRow.value = data;
|
||||
}
|
||||
|
||||
function onDelete() {
|
||||
dialogRemove($q, () => {});
|
||||
function onDelete(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
http
|
||||
.delete(config.API.salaryEmployeeRateListByid(id))
|
||||
.then(() => {
|
||||
fetchSalalyEmployeeRate();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(() => {});
|
||||
});
|
||||
}
|
||||
|
||||
function onClickAdd() {
|
||||
modalDialogEmployeeRate.value = true;
|
||||
isStatusEdit.value = false;
|
||||
}
|
||||
|
||||
function filterFn() {
|
||||
formFilter.page = 1;
|
||||
fetchSalalyEmployeeRate();
|
||||
}
|
||||
|
||||
function updatePage(val: number) {
|
||||
formFilter.page = val;
|
||||
fetchSalalyEmployeeRate();
|
||||
}
|
||||
|
||||
function updatePageSize(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
fetchSalalyEmployeeRate();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchSalalyEmployeeRate();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center">
|
||||
|
|
@ -141,9 +206,9 @@ function onClickAdd() {
|
|||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
@keydown.enter.pervrnt="filterFn"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
|
|
@ -175,9 +240,9 @@ function onClickAdd() {
|
|||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[10, 20, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSize"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -191,10 +256,10 @@ function onClickAdd() {
|
|||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name === 'month'">
|
||||
<div v-if="col.name === 'salaryMonth'">
|
||||
{{ col.value ? col.value.toLocaleString() : "-" }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'day'">
|
||||
<div v-else-if="col.name === 'salaryDay'">
|
||||
{{ col.value ? col.value.toLocaleString() : "-" }}
|
||||
</div>
|
||||
<div v-else>{{ col.value ? col.value : "-" }}</div>
|
||||
|
|
@ -239,11 +304,12 @@ function onClickAdd() {
|
|||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="1"
|
||||
:max="maxPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePage"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
|
|
@ -253,6 +319,8 @@ function onClickAdd() {
|
|||
<DialogEmployeeRate
|
||||
v-model:modal="modalDialogEmployeeRate"
|
||||
:isStatusEdit="isStatusEdit"
|
||||
:fetchData="fetchSalalyEmployeeRate"
|
||||
:data="dataRow as EmployeeRateSalary"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue