ข้อมูลตำแหน่งลูกจ้างประจำ

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-03-14 13:25:35 +07:00
parent 26c7a66906
commit c0d0c9232a
12 changed files with 665 additions and 331 deletions

View file

@ -1,53 +1,35 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import type {
DataOption,
FormPositionSelect,
ListMenu,
RowDetailPositions,
} from "@/modules/01_metadataNew/interface/request/position/index";
import type { QTableProps } from "quasar";
import DialogAddPosition from "@/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue";
const editPosition = ref<boolean>(false);
const modalAddPosition = ref<boolean>(false);
const levelOpsMain = ref<DataOption[]>([]);
const dataLevel = ref<any>();
const levelOps = ref<DataOption[]>([]);
import { useCounterMixin } from "@/stores/mixin";
const isSpecial = ref<boolean>(false);
const formPositionSelect = reactive<FormPositionSelect>({
positionId: "",
posTypeId: "",
positionName: "",
positionField: "",
positionType: "",
positionLevel: "",
positionExecutive: "",
positionExecutiveField: "",
positionArea: "",
isSpecial: false,
});
const $q = useQuasar();
const mixin = useCounterMixin();
const {
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
dialogRemove,
} = mixin;
const rows = ref<RowDetailPositions[]>([]);
const listMenu = ref<ListMenu[]>([
{
label: "คัดลอก",
icon: "mdi-content-copy",
type: "copy",
color: "blue-6",
},
{
label: "ลบ",
icon: "delete",
type: "remove",
color: "red",
},
]);
const rowsPositionSelect = ref<RowDetailPositions[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -93,17 +75,22 @@ const visibleColumns = ref<string[]>([
"posLevelName",
]);
const $q = useQuasar();
const rowsPositionSelect = ref<RowDetailPositions[]>([]);
const mixin = useCounterMixin();
const {
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
dialogRemove,
} = mixin;
const editPosition = ref<boolean>(false);
const modalAddPosition = ref<boolean>(false);
const isSpecial = ref<boolean>(false);
const formPositionSelect = reactive<FormPositionSelect>({
positionId: "",
posTypeId: "",
positionName: "",
positionField: "",
positionType: "",
positionLevel: "",
positionExecutive: "",
positionExecutiveField: "",
positionArea: "",
isSpecial: false,
});
/** input ค้นหา */
const searchRef = ref<any>(null);
@ -180,19 +167,19 @@ function addPosition(data: RowDetailPositions) {
function deletePos(id: string) {
dialogRemove($q, () => {
// showLoader();
// http
// .delete(config.API.orgPosPositionById(id))
// .then(() => {
// success($q, "");
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// searchInput();
// hideLoader();
// });
showLoader();
http
.delete(config.API.orgEmployeePosById(id))
.then(() => {
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
searchInput();
hideLoader();
});
});
}
@ -201,19 +188,19 @@ function popupAdd() {
}
async function fetchData() {
// search.value = "";
// showLoader();
// await http
// .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
// .then((res) => {
// rowsPositionSelect.value = res.data.result;
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// hideLoader();
// });
search.value = "";
showLoader();
await http
.get(config.API.orgEmployeePos + `?keyword=&type=ALL`)
.then((res) => {
rowsPositionSelect.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
onMounted(() => {

View file

@ -1,15 +1,26 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { QInput, QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
import dialogHeader from "@/components/DialogHeader.vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const store = usePositionTypeDataStore();
/** importType*/
import type { QTableProps } from "quasar";
import type { ObjectGroupRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
import type { ResGroup } from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
import type { FrmDataGroup } from "@/modules/01_metadataNew/interface/request/positionEmployee";
/** importComponents*/
import dialogHeader from "@/components/DialogHeader.vue";
/** importStore*/
import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
import { useCounterMixin } from "@/stores/mixin";
/** use*/
const $q = useQuasar();
const store = usePositionEmployeeDataStore();
const router = useRouter();
const mixin = useCounterMixin();
const {
@ -20,7 +31,8 @@ const {
showLoader,
hideLoader,
} = mixin;
const columns = [
const columns = ref<QTableProps["columns"]>([
{
name: "posTypeName",
align: "left",
@ -29,8 +41,15 @@ const columns = [
field: "posTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "posTypeShortName",
align: "left",
label: "อักษรย่อกลุ่มงาน",
sortable: true,
field: "posTypeShortName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posTypeRank",
@ -40,71 +59,43 @@ const columns = [
field: "posTypeRank",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdAt",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastUpdateFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
] as const satisfies QTableProps["columns"];
const $q = useQuasar();
const editId = ref<string>("");
const filterKeyword = ref<string>("");
const dialog = ref<boolean>(false);
const posTypeName = ref<string>("");
const posTypeNameRef = ref<QInput | null>(null);
const posTypeShortName = ref<string>("");
const posTypeShortNameRef = ref<QInput | null>(null);
const posTypeRank = ref<number | undefined>();
const posTypeRankRef = ref<QInput | null>(null);
const dialogStatus = ref<string>("");
]);
const visibleColumns = ref<string[]>([
"posTypeName",
"posTypeShortName",
"posTypeRank",
// "createdAt",
// "lastUpdatedAt",
// "lastUpdateFullName",
]);
/** from เพิ่มข้อมูลกลุ่มงาน */
const formDataGroup = reactive<FrmDataGroup>({
posTypeName: "",
posTypeShortName: "",
posTypeRank: null,
});
/** formRef*/
const posTypeNameRef = ref<Object | null>(null);
const posTypeShortNameRef = ref<Object | null>(null);
const posTypeRankRef = ref<Object | null>(null);
const objectGroupRef: ObjectGroupRef = {
posTypeName: posTypeNameRef,
posTypeShortName: posTypeShortNameRef,
posTypeRank: posTypeRankRef,
};
const editId = ref<string>("");
const filterKeyword = ref<string>("");
const dialog = ref<boolean>(false);
const dialogStatus = ref<string>("");
const rows = ref<ResGroup[]>([]);
async function fetchData() {
showLoader();
await http
.get(config.API.orgPosType)
.get(config.API.orgEmployeeType)
.then(async (res) => {
store.save(res.data.result);
rows.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
@ -114,80 +105,91 @@ async function fetchData() {
});
}
async function addData() {
await http
.post(config.API.orgPosType, {
posTypeName: posTypeName.value,
posTypeShortName: posTypeShortName.value,
posTypeRank: posTypeRank.value,
})
.then(() => {
fetchData();
})
.catch((err) => {
messageError($q, err);
async function onClickSubmit() {
const hasError = [];
for (const key in objectGroupRef) {
if (Object.prototype.hasOwnProperty.call(objectGroupRef, key)) {
const property = objectGroupRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
dialogConfirm($q, () => {
submit();
});
}
}
async function editData(id: string) {
await http
.put(config.API.orgPosTypeId(id), {
posTypeName: posTypeName.value,
posTypeShortName: posTypeShortName.value,
posTypeRank: posTypeRank.value,
})
.then(() => {
fetchData();
})
.catch((err) => {
messageError($q, err);
});
async function submit() {
const body: FrmDataGroup = {
posTypeName: formDataGroup.posTypeName,
posTypeShortName: formDataGroup.posTypeShortName,
posTypeRank: Number(formDataGroup.posTypeRank),
};
showLoader();
try {
const url =
dialogStatus.value === "create"
? config.API.orgEmployeeType
: config.API.orgEmployeeTypeById(editId.value);
await http[dialogStatus.value === "create" ? "post" : "put"](url, body);
success($q, "บันทีกข้อมูลสำเร็จ");
fetchData();
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
closeDialog();
}
}
async function deleteData(id: string) {
await http
.delete(config.API.orgPosTypeId(id))
.then(() => {
fetchData();
})
.catch((err) => {
messageError($q, err);
});
function onClickDelete(id: string) {
dialogRemove($q, () => {
showLoader();
http
.delete(config.API.orgEmployeeTypeById(id))
.then(() => {
fetchData();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
onMounted(async () => {
fetchData();
});
function closeDialog() {
dialog.value = false;
function onClickOpenDialogEdit(data: ResGroup) {
dialogStatus.value = "edit";
dialog.value = true;
editId.value = data.id;
formDataGroup.posTypeName = data.posTypeName;
// formDataGroup.posTypeShortName = data.posTypeShortName;
formDataGroup.posTypeRank = data.posTypeRank;
}
function onclickDetail(id: string) {
function onClickDetail(id: string) {
router.push(`/master-data/position-employee/level/${id}`);
}
function validateForm() {
posTypeNameRef.value?.validate();
posTypeRankRef.value?.validate();
onSubmit();
function closeDialog() {
dialog.value = false;
clearFormData();
}
async function onSubmit() {
if (posTypeName.value.length > 0) {
dialogConfirm(
$q,
async () => {
dialogStatus.value === "create" ? addData() : editData(editId.value);
closeDialog();
posTypeName.value = "";
posTypeRank.value = undefined;
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
function clearFormData() {
formDataGroup.posTypeName = "";
formDataGroup.posTypeShortName = "";
formDataGroup.posTypeRank = null;
}
onMounted(() => {
fetchData();
});
</script>
<template>
@ -229,7 +231,7 @@ async function onSubmit() {
<d-table
ref="table"
:columns="columns"
:rows="store.row"
:rows="rows"
:filter="filterKeyword"
row-key="name"
flat
@ -237,6 +239,7 @@ async function onSubmit() {
:paging="true"
dense
class="custom-header-table"
:rows-per-page-options="[10, 20, 50, 100]"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
@ -251,10 +254,10 @@ async function onSubmit() {
<q-tr
:props="props"
class="cursor-pointer"
@click.stop="onclickDetail(props.row.id)"
@click.stop="onClickDetail(props.row.id)"
>
<q-td v-for="col in props.cols" :key="col.id">
{{ col.value }}
{{ col.value ? col.value : "-" }}
</q-td>
<q-td auto-width>
<q-btn
@ -265,16 +268,7 @@ async function onSubmit() {
class="q-mr-xs"
size="12px"
icon="edit"
clickable
@click.stop="
() => {
dialogStatus = 'edit';
dialog = true;
editId = props.row.id;
posTypeName = props.row.posTypeName;
posTypeRank = props.row.posTypeRank;
}
"
@click.stop="onClickOpenDialogEdit(props.row)"
>
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
@ -286,10 +280,7 @@ async function onSubmit() {
size="12px"
icon="mdi-delete"
clickable
@click.stop="
dialogRemove($q, async () => await deleteData(props.row.id))
"
v-close-popup
@click.stop="onClickDelete(props.row.id)"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
@ -300,7 +291,7 @@ async function onSubmit() {
<q-dialog v-model="dialog" class="dialog" persistent>
<q-card style="width: 350px">
<form @submit.prevent="validateForm">
<form @submit.prevent="onClickSubmit">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header
:tittle="
@ -318,7 +309,7 @@ async function onSubmit() {
<q-input
ref="posTypeNameRef"
outlined
v-model="posTypeName"
v-model="formDataGroup.posTypeName"
label="ชื่อกลุ่มงาน"
dense
lazy-rules
@ -332,7 +323,7 @@ async function onSubmit() {
<div class="col-12">
<q-input
ref="posTypeShortNameRef"
v-model="posTypeShortName"
v-model="formDataGroup.posTypeShortName"
dense
outlined
for="#positionShortName"
@ -347,16 +338,16 @@ async function onSubmit() {
<q-input
ref="posTypeRankRef"
outlined
v-model="posTypeRank"
v-model="formDataGroup.posTypeRank"
label="ระดับกลุ่มงาน"
dense
type="number"
lazy-rules
borderless
min="1"
bg-color="white"
:rules="[(val) => val != undefined || 'กรุณากรอกระดับกลุ่มงาน']"
hide-bottom-space
mask="############"
/>
</div>
</q-card-section>
@ -379,72 +370,4 @@ async function onSubmit() {
</q-dialog>
</template>
<style scoped lang="scss">
.border_custom {
border-radius: 6px !important;
border: 1px solid #e1e1e1;
}
$toggle-background-color-on: #06884d;
$toggle-background-color-off: darkgray;
$toggle-control-color: white;
$toggle-width: 40px;
$toggle-height: 25px;
$toggle-gutter: 3px;
$toggle-radius: 50%;
$toggle-control-speed: 0.15s;
$toggle-control-ease: ease-in;
// These are our computed variables
// change at your own risk.
$toggle-radius: $toggle-height / 2;
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
.toggle-control {
display: block;
position: relative;
padding-left: $toggle-width;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
user-select: none;
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
input:checked ~ .control {
background-color: $toggle-background-color-on;
&:after {
left: $toggle-width - $toggle-control-size - $toggle-gutter;
}
}
.control {
position: absolute;
top: -7px;
left: -15px;
height: $toggle-height;
width: $toggle-width;
border-radius: $toggle-radius;
background-color: $toggle-background-color-off;
transition: background-color $toggle-control-speed $toggle-control-ease;
&:after {
content: "";
position: absolute;
left: $toggle-gutter;
top: $toggle-gutter;
width: $toggle-control-size;
height: $toggle-control-size;
border-radius: $toggle-radius;
background: $toggle-control-color;
transition: left $toggle-control-speed $toggle-control-ease;
}
}
}
</style>
<style scoped lang="scss"></style>

View file

@ -1,10 +1,222 @@
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import ListLevelDetail from "@/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue";
import { ref, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
/** importType*/
import type { QTableProps } from "quasar";
import type {
ResGroup,
ResLevel,
} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
import type { ObjectLevelRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
import type { FormDataLevel } from "@/modules/01_metadataNew/interface/request/positionEmployee";
/** importComponts*/
import DialogHeader from "@/components/DialogHeader.vue";
/** importStore*/
import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
import { useCounterMixin } from "@/stores/mixin";
/**use*/
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const posName = ref<string>("");
const posTypeId = ref<string>(route.params.id.toString());
const {
dialogRemove,
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
} = useCounterMixin();
const storeOption = useMainOptionDataStore();
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px; width:0px",
style: "font-size: 14px",
},
{
name: "posLevelName",
align: "left",
label: "ระดับชั้นงาน",
sortable: true,
field: "posLevelName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posTypeName",
align: "left",
label: "กลุ่มงาน",
sortable: true,
field: "posTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posLevelAuthority",
align: "left",
label: "ผู้มีอำนาจสั่งบรรจุ",
sortable: true,
field: "posLevelAuthority",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const rows = ref<any>();
const visibleColumns = ref<string[]>([
"no",
"posLevelName",
"posTypeName",
"posLevelAuthority",
]);
const filter = ref<string>("");
const levelId = ref<string>("");
const formDataLevel = reactive<FormDataLevel>({
posLevelName: null,
posTypeName: "",
commander: "",
});
/** formRef*/
const posLevelNameRef = ref<Object | null>(null);
const commanderRef = ref<Object | null>(null);
const posTypeRankRef = ref<Object | null>(null);
const objectLevelRef: ObjectLevelRef = {
posLevelName: posLevelNameRef,
commander: commanderRef,
};
function fetchPosGroup() {
showLoader();
http
.get(config.API.orgEmployeeType)
.then((res) => {
const data: ResGroup[] = res.data.result;
const group = data.find((e: ResGroup) => e.id === posTypeId.value);
formDataLevel.posTypeName = group?.posTypeName;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function fetchData(id: string) {
showLoader();
http
.get(config.API.orgEmployeelevel)
.then((res) => {
const data: ResLevel[] = res.data.result;
const list = data.filter((e: ResLevel) => e.posTypeId === id);
rows.value = list ? list : [];
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
const isStatusEdit = ref<boolean>(false);
const modalDialog = ref<boolean>(false);
function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
isStatusEdit.value = statusEdit;
modalDialog.value = true;
if (statusEdit) {
levelId.value = data.id;
formDataLevel.posLevelName = data.posLevelName;
formDataLevel.posTypeName = data.posTypeName;
formDataLevel.commander = data.commander;
}
}
function onClickCloseDialog() {
modalDialog.value = false;
formDataLevel.posLevelName = null;
formDataLevel.posTypeName = "";
formDataLevel.commander = "";
}
function onClickSubmit() {
const hasError = [];
for (const key in objectLevelRef) {
if (Object.prototype.hasOwnProperty.call(objectLevelRef, key)) {
const property = objectLevelRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
dialogConfirm($q, () => {
submit();
});
}
}
async function submit() {
const body = {
posLevelName: Number(formDataLevel.posLevelName),
posTypeId: posTypeId.value,
posLevelRank: Number(formDataLevel.posLevelName),
posLevelAuthority: formDataLevel.commander,
};
showLoader();
try {
const url = !isStatusEdit.value
? config.API.orgEmployeelevel
: config.API.orgEmployeelevelById(levelId.value);
await http[!isStatusEdit.value ? "post" : "put"](url, body);
success($q, "บันทีกข้อมูลสำเร็จ");
fetchData(posTypeId.value);
onClickCloseDialog();
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
}
}
function onClickDelete(id: string) {
dialogRemove($q, () => {
http
.delete(config.API.orgEmployeelevelById(id))
.then(() => {
success($q, "ลบข้อมูลสำเร็จ");
fetchData(posTypeId.value);
})
.catch((err) => {
messageError($q, err);
});
});
}
onMounted(() => {
posTypeId.value && fetchData(posTypeId.value);
fetchPosGroup();
});
</script>
<template>
@ -19,12 +231,181 @@ const posName = ref<string>("");
class="q-mr-sm"
@click="router.go(-1)"
/>
รายการระดบชนงาน{{ posName }}
รายการระดบชนงาน{{ formDataLevel.posTypeName }}
</div>
<q-card flat bordered>
<ListLevelDetail v-model:posName="posName" />
<div class="q-pa-md">
<q-toolbar style="padding: 0">
<q-btn
flat
round
color="primary"
icon="add"
@click.stop.pervent="onClickOpenDialog()"
>
<q-tooltip> เพมขอม </q-tooltip>
</q-btn>
<q-space />
<div class="row q-gutter-sm">
<q-input outlined dense v-model="filter" label="ค้นหา"></q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</div>
</q-toolbar>
<d-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filter"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
>
<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-bold">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.id">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="edit"
flat
dense
round
class="q-mr-xs"
size="12px"
icon="edit"
@click.stop.pervent="onClickOpenDialog(true, props.row)"
>
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
<q-btn
color="red"
flat
dense
round
size="12px"
icon="mdi-delete"
@click="onClickDelete(props.row.id)"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
<q-dialog v-model="modalDialog" class="dialog" persistent>
<q-card style="width: 350px">
<form @submit.prevent="onClickSubmit">
<q-card-section class="flex justify-between" style="padding: 0">
<DialogHeader
:tittle="isStatusEdit ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
:close="onClickCloseDialog"
/>
</q-card-section>
<q-separator color="grey-4" />
<q-card-section class="row q-gutter-y-md">
<div class="col-12">
<q-input
outlined
ref="posLevelNameRef"
v-model="formDataLevel.posLevelName"
label="ระดับชั้นงาน"
dense
lazy-rules
borderless
bg-color="white"
hide-bottom-space
mask="#######################################"
:rules="[(val) => !!val || 'กรุณากรอกระดับชั้นงาน']"
/>
</div>
<div class="col-12">
<q-select
ref="commanderRef"
outlined
v-model="formDataLevel.commander"
emit-value
map-options
:options="storeOption.posLevelAuthorityOption"
option-value="label"
label="ผู้มีอำนาจสั่งบรรจุ"
dense
lazy-rules
borderless
bg-color="white"
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
/>
</div>
<div class="col-12">
<q-select
ref="posTypeIdRef"
v-model="formDataLevel.posTypeName"
label="กลุ่มงาน"
outlined
dense
bg-color="white"
options-cover
hide-bottom-space
readonly
/>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn
id="onSubmit"
type="submit"
dense
unelevated
label="บันทึก"
color="public"
class="q-px-md"
>
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</q-card-actions>
</form>
</q-card>
</q-dialog>
</template>
<style scoped></style>

View file

@ -140,34 +140,37 @@ const visibleColumns = ref<string[]>([
// "lastUpdateFullName",
]);
const rows = ref<any>();
async function fetchData() {
// showLoader();
// await http
// .get(config.API.orgPosLevel)
// .then(async (res) => {
// store.save(res.data.result, id.value);
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// hideLoader();
// });
showLoader();
await http
.get(config.API.orgEmployeelevel)
.then(async (res) => {
rows.value = res.data.result;
// store.save(res.data.result, id.value);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
async function addData() {
await http.post(config.API.orgPosLevel, {
await http.post(config.API.orgEmployeelevel, {
posLevelName: posLevelName.value,
// posLevelRank: posLevelRank.value,
posLevelAuthority:
posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
// posLevelAuthority:
// posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
posTypeId: id.value,
posLevelRank: 1,
});
fetchData();
}
async function editData(editId: string) {
await http.put(config.API.orgPosLevelId(editId), {
await http.put(config.API.orgEmployeelevelById(editId), {
posLevelName: posLevelName.value,
// posLevelRank: posLevelRank.value,
posLevelAuthority:
@ -178,7 +181,7 @@ async function editData(editId: string) {
}
async function deleteData(id: string) {
await http.delete(config.API.orgPosLevelId(id));
await http.delete(config.API.orgEmployeelevelById(id));
fetchData();
}
@ -276,7 +279,7 @@ async function fetchName() {
<d-table
ref="table"
:columns="columns"
:rows="store.row"
:rows="rows"
:filter="filterKeyword"
row-key="name"
flat

View file

@ -80,7 +80,7 @@ function saveSelectEdit() {
// posLevelId: formPositionSelect.positionLevel, //*
// };
// await http
// .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
// .put(config.API.orgPosPositionById(orgEmployeePosById.positionId), body)
// .then(() => {
// success($q, "");
// clearFormPositionSelect();
@ -111,7 +111,7 @@ function onSubmitSelectEdit() {
// posLevelId: formPositionSelect.positionLevel, //*
// };
// await http
// .post(config.API.orgPosPosition, body)
// .post(config.API.orgEmployeePos, body)
// .then(() => {
// success($q, "");
// clearFormPositionSelect();

View file

@ -0,0 +1,15 @@
interface ObjectGroupRef {
posTypeName: object | null;
posTypeShortName: object | null;
posTypeRank: object | null;
[key: string]: any;
}
interface ObjectLevelRef {
posLevelName: object | null;
commander: object | null;
[key: string]: any;
}
export type { ObjectGroupRef, ObjectLevelRef };

View file

@ -0,0 +1,13 @@
interface FrmDataGroup {
posTypeName: string;
posTypeShortName: string;
posTypeRank: number | null;
}
interface FormDataLevel {
posLevelName: number | null;
posTypeName: string | undefined;
commander: string;
}
export type { FrmDataGroup, FormDataLevel };

View file

@ -0,0 +1,16 @@
interface ResGroup {
id: string;
posLevels: ResLevel[];
posTypeName: string;
posTypeRank: number;
}
interface ResLevel {
id: string;
posLevelName: number;
posTypeName: string;
posTypeId: string;
commander: string;
}
export type { ResGroup, ResLevel };

View file

@ -1,9 +1,12 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import type {
DataResponse,
DataRow,
} from "../interface/response/position/ListType";
import type { ResGroup } from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
const storeOption = useMainOptionDataStore();
@ -14,25 +17,8 @@ export const usePositionEmployeeDataStore = defineStore(
"positionEmployeeStore",
() => {
const pathLocation = ref<string>("list_position");
const row = ref<DataRow[]>([]);
function save(data: DataResponse[], id: string) {
const list = data.map((e) => ({
...e,
posTypes: undefined,
posTypeId: e.posTypes?.id,
posTypeName: e.posTypes?.posTypeName,
posTypeRank: e.posTypes?.posTypeRank,
createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
posLevelAuthority: e.posLevelAuthority
? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
: "-",
})) satisfies DataRow[];
row.value = list.filter((e) => e.posTypeId === id);
}
return {
save,
row,
pathLocation,
};
}

View file

@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import genReportXLSX from "@/plugins/genreportxlsx";
import DialogInfoCriteria from "@/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue";
/** importType*/
import type { DataOption } from "@/modules/13_salary/interface/index/Main";
@ -17,6 +16,7 @@ import type {
/** importComponents*/
import TableTabType1 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue";
import TableTabType2 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue";
import DialogInfoCriteria from "@/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";

View file

@ -3,8 +3,7 @@ import { onMounted, ref, computed, nextTick } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
/** importType*/
import type {
DataOption,
@ -18,6 +17,8 @@ import type {
/** importComponents*/
import TabGroup from "@/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue";
// import ProcessStep from "@/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue";
// import PageDashBoard from "@/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue";
/** importStore*/
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";