Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
033c666acc
72 changed files with 13774 additions and 3895 deletions
|
|
@ -3,6 +3,7 @@ import env from "../index";
|
|||
const organization = `${env.API_URI}/org`;
|
||||
const orgPos = `${env.API_URI}/org/pos`;
|
||||
const orgProfile = `${env.API_URI}/org/profile`;
|
||||
const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
|
||||
|
||||
export default {
|
||||
/** โครงสร้างอัตรากำลัง*/
|
||||
|
|
@ -60,4 +61,20 @@ export default {
|
|||
activeOrganizationRoot: `${organization}/active/root`,
|
||||
activeOrganizationRootById: (id: string) =>
|
||||
`${organization}/active/root/${id}`,
|
||||
|
||||
/** ข้อมูลตำแหน่งลูกจ้างประจำ*/
|
||||
orgEmployeePos: `${orgEmployeePos}/position`,
|
||||
orgEmployeePosById: (id: string) => `${orgEmployeePos}/position/${id}`,
|
||||
orgEmployeeType: `${orgEmployeePos}/type`,
|
||||
orgEmployeeTypeById: (id: string) => `${orgEmployeePos}/type/${id}`,
|
||||
orgEmployeelevel: `${orgEmployeePos}/level`,
|
||||
orgEmployeelevelById: (id: string) => `${orgEmployeePos}/level/${id}`,
|
||||
|
||||
/** อัตรากำลังลูกจ้างประจำ*/
|
||||
orgSummaryEmp: `${orgEmployeePos}/summary`,
|
||||
orgReportEmp: (report: string) => `${orgEmployeePos}/report/${report}`,
|
||||
orgDeleteProfileEmp: (id: string) => `${orgEmployeePos}/profile/delete/${id}`,
|
||||
orgPosMasterByIdEmp: (id: string) => `${orgEmployeePos}/master/${id}`,
|
||||
orgPosMasterListEmp: `${orgEmployeePos}/master/list`,
|
||||
orgPosMasterEmp: `${orgEmployeePos}/master`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
import env from "../index";
|
||||
const insignia = `${env.API_URI}/metadata/insignia/`;
|
||||
const insigniaType = `${env.API_URI}/metadata/insignia-type/`;
|
||||
const insigniaOrg = `${env.API_URI}/org/insignia/insignia/`;
|
||||
const insigniaTypeOrg = `${env.API_URI}/org/insignia/insignia-type/`;
|
||||
|
||||
export default {
|
||||
/**
|
||||
|
|
@ -36,4 +38,11 @@ export default {
|
|||
insigniaTypeNewId: (id: string) => `${insigniaType}${id}`,
|
||||
insigniaNewId: (id: string) => `${insignia}${id}`,
|
||||
insigniaSort: (id: string) => `${insignia}sort/${id}`,
|
||||
|
||||
insigniaOrg,
|
||||
insigniaTypeOrg,
|
||||
insigniaTypeNewOrg: `${insigniaOrg}`,
|
||||
insigniaTypeNewIdOrg: (id: string) => `${insigniaOrg}${id}`,
|
||||
insigniaNewIdOrg: (id: string) => `${insigniaOrg}${id}`,
|
||||
insigniaSortOrg: (id: string) => `${insigniaOrg}sort/${id}`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -131,6 +131,14 @@ const menuList = readonly<any[]>([
|
|||
// },
|
||||
// ],
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
icon: "o_groups",
|
||||
activeIcon: "groups",
|
||||
label: "อัตรากำลังลูกจ้างประจำฯ",
|
||||
path: "positionEmployee",
|
||||
role: "positionEmployee",
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
icon: "o_contact_page",
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ function validateForm() {
|
|||
async function fetchData(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.insigniaTypeNewId(id))
|
||||
.get(config.API.insigniaTypeNewIdOrg(id))
|
||||
.then(async (res) => {
|
||||
insigniaTypeId.value = res.data.result.name;
|
||||
store.fetchData(res.data.result.insignias, res.data.result.name);
|
||||
|
|
@ -206,7 +206,7 @@ async function onSubmit() {
|
|||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.insignia, {
|
||||
await http.post(config.API.insigniaOrg, {
|
||||
name: name.value,
|
||||
isActive: isActive.value,
|
||||
shortName: shortName.value,
|
||||
|
|
@ -217,7 +217,7 @@ async function addData() {
|
|||
}
|
||||
|
||||
async function editData(idData: string) {
|
||||
await http.put(config.API.insigniaNewId(idData), {
|
||||
await http.put(config.API.insigniaNewIdOrg(idData), {
|
||||
name: name.value,
|
||||
isActive: isActive.value,
|
||||
shortName: shortName.value,
|
||||
|
|
@ -228,7 +228,7 @@ async function editData(idData: string) {
|
|||
}
|
||||
|
||||
async function deleteData(idData: string) {
|
||||
await http.delete(config.API.insigniaNewId(idData));
|
||||
await http.delete(config.API.insigniaNewIdOrg(idData));
|
||||
fetchData(id.value);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const visibleColumns = ref<string[]>([
|
|||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.insigniaTypeNew)
|
||||
.get(config.API.insigniaTypeNewOrg)
|
||||
.then(async (res) => {
|
||||
store.fetchData(res.data.result);
|
||||
})
|
||||
|
|
@ -125,7 +125,7 @@ function onclickDetail(id: string) {
|
|||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.insigniaType, {
|
||||
await http.post(config.API.insigniaTypeOrg, {
|
||||
name: name.value,
|
||||
isActive: isActive.value,
|
||||
});
|
||||
|
|
@ -133,7 +133,7 @@ async function addData() {
|
|||
}
|
||||
|
||||
async function editData(id: string) {
|
||||
await http.put(config.API.insigniaTypeNewId(id), {
|
||||
await http.put(config.API.insigniaTypeNewIdOrg(id), {
|
||||
name: name.value,
|
||||
isActive: isActive.value,
|
||||
});
|
||||
|
|
@ -141,7 +141,7 @@ async function editData(id: string) {
|
|||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.insigniaTypeNewId(id));
|
||||
await http.delete(config.API.insigniaTypeNewIdOrg(id));
|
||||
fetchData();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,12 +64,11 @@ async function save() {
|
|||
const dataPost = await rows.value.map((obj: any) => {
|
||||
return obj.id;
|
||||
});
|
||||
console.log("post data===> ", dataPost);
|
||||
modal.value = false;
|
||||
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.insigniaSort(id.value), { id: dataPost })
|
||||
.put(config.API.insigniaSortOrg(id.value), { id: dataPost })
|
||||
.then(() => {
|
||||
store.row = rows.value;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,53 +1,44 @@
|
|||
<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";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
ObjectPosRef,
|
||||
FormQuery,
|
||||
} from "@/modules/01_metadataNew/interface/index/positionEmployee";
|
||||
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";
|
||||
import type {
|
||||
ResGroup,
|
||||
ResLevel,
|
||||
ResPossition,
|
||||
} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
|
||||
|
||||
const editPosition = ref<boolean>(false);
|
||||
const modalAddPosition = ref<boolean>(false);
|
||||
const levelOpsMain = ref<DataOption[]>([]);
|
||||
const dataLevel = ref<any>();
|
||||
const levelOps = ref<DataOption[]>([]);
|
||||
/**importComponets*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const isSpecial = ref<boolean>(false);
|
||||
const formPositionSelect = reactive<FormPositionSelect>({
|
||||
positionId: "",
|
||||
posTypeId: "",
|
||||
positionName: "",
|
||||
positionField: "",
|
||||
positionType: "",
|
||||
positionLevel: "",
|
||||
positionExecutive: "",
|
||||
positionExecutiveField: "",
|
||||
positionArea: "",
|
||||
isSpecial: false,
|
||||
});
|
||||
/**importStore*/
|
||||
import { useCounterMixin } from "@/stores/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",
|
||||
},
|
||||
]);
|
||||
/**use*/
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
|
||||
const rows = ref<ResPossition[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -59,11 +50,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionName",
|
||||
name: "posDictName",
|
||||
align: "left",
|
||||
label: "ชื่อตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "positionName",
|
||||
field: "posDictName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -88,136 +79,177 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"positionName",
|
||||
"posDictName",
|
||||
"posTypeName",
|
||||
"posLevelName",
|
||||
]);
|
||||
|
||||
const $q = useQuasar();
|
||||
const rowsPositionSelect = ref<RowDetailPositions[]>([]);
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const formQuery = reactive<FormQuery>({
|
||||
type: "positionName",
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
/** input ค้นหา */
|
||||
const searchRef = ref<any>(null);
|
||||
const search = ref<string>("");
|
||||
const type = ref<string>("positionName");
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const optionFilter = ref<DataOption[]>([
|
||||
{ id: "positionName", name: "ชื่อตำแหน่ง" },
|
||||
{ id: "positionType", name: "กลุ่มงาน" },
|
||||
{ id: "positionLevel", name: "ระดับชั้นงาน" },
|
||||
]);
|
||||
|
||||
/**
|
||||
* คัดลอกข้อมูล
|
||||
* @param data ข้อมูลตำแหน่ง
|
||||
*/
|
||||
function copyDetiail(data: RowDetailPositions) {
|
||||
formPositionSelect.positionId = data.id;
|
||||
formPositionSelect.posTypeId = data.posTypeId;
|
||||
formPositionSelect.positionName = data.positionName;
|
||||
formPositionSelect.positionType = data.posTypeId;
|
||||
formPositionSelect.positionLevel = data.posLevelId;
|
||||
modalAddPosition.value = true;
|
||||
}
|
||||
/**
|
||||
* แก้ไขข้อมูล
|
||||
* @param data ข้อมูลตำแหน่ง
|
||||
*/
|
||||
function editDetiail(data: RowDetailPositions) {
|
||||
formPositionSelect.positionId = data.id;
|
||||
formPositionSelect.posTypeId = data.posTypeId;
|
||||
formPositionSelect.positionName = data.positionName;
|
||||
formPositionSelect.positionType = data.posTypeId;
|
||||
formPositionSelect.positionLevel = data.posLevelId;
|
||||
modalAddPosition.value = true;
|
||||
editPosition.value = true;
|
||||
}
|
||||
const modalDialog = ref<boolean>(false);
|
||||
const isStatusEdit = ref<boolean>(false);
|
||||
const posId = ref<string>("");
|
||||
const formDataPos = reactive({
|
||||
posName: "",
|
||||
posTypeName: "",
|
||||
posLevelName: "",
|
||||
});
|
||||
const posNameRef = ref<object | null>(null);
|
||||
const posTypeNameRef = ref<object | null>(null);
|
||||
const posLevelNameRef = ref<object | null>(null);
|
||||
const objectRef: ObjectPosRef = {
|
||||
posName: posNameRef,
|
||||
posTypeName: posTypeNameRef,
|
||||
posLevelName: posLevelNameRef,
|
||||
};
|
||||
|
||||
/**
|
||||
* ส่งค่า css ออกไปตามเงื่อนไข
|
||||
* @param val true/false
|
||||
*/
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
|
||||
async function searchInput() {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(
|
||||
// config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
|
||||
// )
|
||||
// .then((res) => {
|
||||
// rowsPositionSelect.value = res.data.result;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
function addPosition(data: RowDetailPositions) {
|
||||
const isIdExist = rows.value.some((item: any) => item.id === data.id);
|
||||
|
||||
if (!isIdExist) {
|
||||
rows.value = [data, ...rows.value];
|
||||
}
|
||||
}
|
||||
const posTypeMain = ref<ResGroup[]>([]);
|
||||
const posTypeOp = ref<DataOption[]>([]);
|
||||
const posLevelOp = ref<DataOption[]>([]);
|
||||
|
||||
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, "ลบข้อมูลสำเร็จ");
|
||||
fetchData();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function popupAdd() {
|
||||
modalAddPosition.value = true;
|
||||
async function onClickOpenDialog(typeEdit: boolean = false, data: any = []) {
|
||||
modalDialog.value = true;
|
||||
isStatusEdit.value = typeEdit;
|
||||
await fetchType();
|
||||
updatePosTypeName(data.posTypeId);
|
||||
if (data) {
|
||||
posId.value = data.id;
|
||||
setTimeout(() => {
|
||||
formDataPos.posName = data.posDictName;
|
||||
formDataPos.posTypeName = data.posTypeId;
|
||||
formDataPos.posLevelName = data.posLevelId;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
// });
|
||||
async function fetchData(statusFetch: boolean = false) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.orgEmployeePos +
|
||||
`?keyword=${formQuery.keyword}&type=${
|
||||
statusFetch ? "" : formQuery.type
|
||||
}`
|
||||
)
|
||||
.then((res) => {
|
||||
rows.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchType() {
|
||||
if (posTypeMain.value.length === 0) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgEmployeeType)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
posTypeMain.value = data;
|
||||
posTypeOp.value = data.map((e: ResGroup) => ({
|
||||
id: e.id,
|
||||
name: e.posTypeName,
|
||||
}));
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function onClickSubmit() {
|
||||
const hasError = [];
|
||||
for (const key in objectRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
|
||||
const property = objectRef[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 = {
|
||||
posDictName: formDataPos.posName,
|
||||
posTypeId: formDataPos.posTypeName,
|
||||
posLevelId: formDataPos.posLevelName,
|
||||
};
|
||||
showLoader();
|
||||
try {
|
||||
const url = !isStatusEdit.value
|
||||
? config.API.orgEmployeePos
|
||||
: config.API.orgEmployeePosById(posId.value);
|
||||
await http[!isStatusEdit.value ? "post" : "put"](url, body);
|
||||
success($q, "บันทีกข้อมูลสำเร็จ");
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
closeDialog();
|
||||
}
|
||||
}
|
||||
|
||||
function updatePosTypeName(id: string) {
|
||||
const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
|
||||
posLevelOp.value =
|
||||
posLevel?.posLevels.map((e: ResLevel) => ({
|
||||
id: e.id,
|
||||
name: e.posLevelName.toString(),
|
||||
})) ?? [];
|
||||
formDataPos.posLevelName = "";
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
modalDialog.value = false;
|
||||
formDataPos.posName = "";
|
||||
formDataPos.posTypeName = "";
|
||||
formDataPos.posLevelName = "";
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
fetchData(true);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -231,7 +263,7 @@ onMounted(() => {
|
|||
round
|
||||
color="primary"
|
||||
icon="mdi-plus"
|
||||
@click="popupAdd()"
|
||||
@click="onClickOpenDialog()"
|
||||
><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
|
|
@ -240,7 +272,7 @@ onMounted(() => {
|
|||
<div class="col-md-4">
|
||||
<q-select
|
||||
label="ค้นหาจาก"
|
||||
v-model="type"
|
||||
v-model="formQuery.type"
|
||||
:options="optionFilter"
|
||||
emit-value
|
||||
dense
|
||||
|
|
@ -254,19 +286,19 @@ onMounted(() => {
|
|||
<div class="col-md-6">
|
||||
<q-input
|
||||
ref="searchRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="search"
|
||||
v-model="formQuery.keyword"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
label="คำค้น"
|
||||
hide-bottom-space
|
||||
@keydown.enter="fetchData()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="search"
|
||||
v-if="formQuery.keyword"
|
||||
name="cancel"
|
||||
@click="fetchData()"
|
||||
@click="(formQuery.keyword = ''), fetchData()"
|
||||
class="cursor-pointer"
|
||||
></q-icon>
|
||||
</template>
|
||||
|
|
@ -279,7 +311,7 @@ onMounted(() => {
|
|||
icon="search"
|
||||
label="ค้นหา"
|
||||
class="full-width"
|
||||
@click="searchInput()"
|
||||
@click="fetchData()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -289,7 +321,7 @@ onMounted(() => {
|
|||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rowsPositionSelect"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -313,24 +345,11 @@ onMounted(() => {
|
|||
</template>
|
||||
<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"
|
||||
@click="addPosition(props.row)"
|
||||
>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posLevelName'">
|
||||
{{
|
||||
props.row.posLevelName
|
||||
? props.row.isSpecial == true
|
||||
? `${props.row.posLevelName} (ฉ)`
|
||||
: props.row.posLevelName
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
|
|
@ -347,7 +366,7 @@ onMounted(() => {
|
|||
clickable
|
||||
@click.stop="
|
||||
() => {
|
||||
copyDetiail(props.row);
|
||||
onClickOpenDialog(false, props.row);
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
@ -361,7 +380,7 @@ onMounted(() => {
|
|||
size="12px"
|
||||
icon="mdi-pencil"
|
||||
clickable
|
||||
@click.stop="editDetiail(props.row)"
|
||||
@click.stop="onClickOpenDialog(true, props.row)"
|
||||
v-close-popup
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
|
|
@ -384,10 +403,80 @@ onMounted(() => {
|
|||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
<DialogAddPosition
|
||||
v-model:add-position="modalAddPosition"
|
||||
v-model:form-data="formPositionSelect"
|
||||
v-model:edit-check="editPosition"
|
||||
:get-data="searchInput"
|
||||
/>
|
||||
|
||||
<q-dialog v-model="modalDialog" class="dialog" persistent>
|
||||
<q-card style="width: 350px">
|
||||
<form @submit.prevent="onClickSubmit">
|
||||
<DialogHeader
|
||||
:tittle="`${
|
||||
isStatusEdit
|
||||
? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
|
||||
: 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
|
||||
}`"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm col-12">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
ref="posNameRef"
|
||||
v-model="formDataPos.posName"
|
||||
dense
|
||||
outlined
|
||||
for="#positionName"
|
||||
label="ชื่อตำแหน่ง"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<q-select
|
||||
ref="posTypeNameRef"
|
||||
label="กลุ่มงาน"
|
||||
v-model="formDataPos.posTypeName"
|
||||
:options="posTypeOp"
|
||||
emit-value
|
||||
dense
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
|
||||
@update:model-value="updatePosTypeName"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<q-select
|
||||
ref="posLevelNameRef"
|
||||
label="ระดับชั้นงาน"
|
||||
v-model="formDataPos.posLevelName"
|
||||
:disable="formDataPos.posTypeName === ''"
|
||||
:options="posLevelOp"
|
||||
emit-value
|
||||
dense
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn type="submit" :label="`บันทึก`" color="public" />
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,231 @@
|
|||
<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 titleName = ref<string | null>("");
|
||||
const formDataLevel = reactive<FormDataLevel>({
|
||||
posLevelName: null,
|
||||
posTypeName: "",
|
||||
posLevelAuthority: "",
|
||||
});
|
||||
|
||||
/** formRef*/
|
||||
const posLevelNameRef = ref<Object | null>(null);
|
||||
const commanderRef = ref<Object | null>(null);
|
||||
const objectLevelRef: ObjectLevelRef = {
|
||||
posLevelName: posLevelNameRef,
|
||||
posLevelAuthority: 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);
|
||||
|
||||
titleName.value = group?.posTypeName ?? null;
|
||||
})
|
||||
.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.posLevelAuthority = data.posLevelAuthority;
|
||||
} else {
|
||||
formDataLevel.posTypeName = titleName.value ? titleName.value : "";
|
||||
}
|
||||
}
|
||||
|
||||
function onClickCloseDialog() {
|
||||
modalDialog.value = false;
|
||||
formDataLevel.posLevelName = null;
|
||||
formDataLevel.posTypeName = "";
|
||||
formDataLevel.posLevelAuthority = "";
|
||||
}
|
||||
|
||||
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.posLevelAuthority,
|
||||
};
|
||||
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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function convertPosLevelAuthority(val: string) {
|
||||
const result = storeOption.posLevelAuthorityOption.find((e) => e.id === val);
|
||||
return result?.label;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
posTypeId.value && fetchData(posTypeId.value);
|
||||
fetchPosGroup();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -19,12 +240,184 @@ const posName = ref<string>("");
|
|||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
รายการระดับชั้นงาน{{ posName }}
|
||||
รายการระดับชั้นงาน{{ titleName }}
|
||||
</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-if="col.name === 'posLevelAuthority'">
|
||||
{{ col.value ? convertPosLevelAuthority(col.value) : "-" }}
|
||||
</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.posLevelAuthority"
|
||||
emit-value
|
||||
map-options
|
||||
:options="storeOption.posLevelAuthorityOption"
|
||||
option-value="id"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,513 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { QInput, QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
|
||||
import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
|
||||
import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
|
||||
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
const store = usePositionEmployeeDataStore();
|
||||
const storeName = usePositionTypeDataStore();
|
||||
const storeOption = useMainOptionDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
const posName = defineModel<string>("posName", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
|
||||
mixin;
|
||||
const $q = useQuasar();
|
||||
const 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",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "posTypeName",
|
||||
align: "left",
|
||||
label: "กลุ่มงาน",
|
||||
sortable: true,
|
||||
field: "posTypeName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
// {
|
||||
// name: "posLevelRank",
|
||||
// align: "left",
|
||||
// label: "ระดับของระดับตำแหน่ง",
|
||||
// sortable: true,
|
||||
// field: "posLevelRank",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
{
|
||||
name: "posLevelAuthority",
|
||||
align: "left",
|
||||
label: "ผู้มีอำนาจสั่งบรรจุ",
|
||||
sortable: true,
|
||||
field: "posLevelAuthority",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "center",
|
||||
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: "center",
|
||||
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 route = useRoute();
|
||||
const id = ref<string>(route.params.id.toString());
|
||||
const filterKeyword = ref<string>("");
|
||||
const dialog = ref<boolean>(false);
|
||||
const dialogStatus = ref<string>("");
|
||||
const editId = ref<string>("");
|
||||
const posLevelName = ref<string>("");
|
||||
// const posLevelRank = ref<number>();
|
||||
const posLevelAuthority = ref<string>("");
|
||||
// const posTypeId = ref<null>();
|
||||
const posLevelNameRef = ref<QInput | null>(null);
|
||||
// const posLevelRankRef = ref<QInput | null>(null);
|
||||
const posTypeIdRef = ref<QInput | null>(null);
|
||||
// const name = ref<string>("");
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"posTypeName",
|
||||
"posLevelName",
|
||||
// "posLevelRank",
|
||||
"posLevelAuthority",
|
||||
// "createdAt",
|
||||
// "lastUpdatedAt",
|
||||
// "lastUpdateFullName",
|
||||
]);
|
||||
|
||||
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();
|
||||
// });
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgPosLevel, {
|
||||
posLevelName: posLevelName.value,
|
||||
// posLevelRank: posLevelRank.value,
|
||||
posLevelAuthority:
|
||||
posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
|
||||
posTypeId: id.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function editData(editId: string) {
|
||||
await http.put(config.API.orgPosLevelId(editId), {
|
||||
posLevelName: posLevelName.value,
|
||||
// posLevelRank: posLevelRank.value,
|
||||
posLevelAuthority:
|
||||
posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
|
||||
posTypeId: id.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgPosLevelId(id));
|
||||
fetchData();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
fetchName();
|
||||
storeName.row.forEach((e) => {
|
||||
if (e.id === id.value) {
|
||||
posName.value = e.posTypeName ? e.posTypeName : "";
|
||||
}
|
||||
});
|
||||
fetchData();
|
||||
});
|
||||
|
||||
function closeDialog() {
|
||||
dialog.value = false;
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
posLevelNameRef.value?.validate();
|
||||
// posLevelRankRef.value?.validate();
|
||||
posTypeIdRef.value?.validate();
|
||||
onSubmit();
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
if (posLevelName.value.length > 0) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
dialogStatus.value === "create" ? addData() : editData(editId.value);
|
||||
closeDialog();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchName() {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.orgPosType)
|
||||
// .then(async (res) => {
|
||||
// storeName.save(res.data.result);
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click.stop="
|
||||
() => {
|
||||
dialogStatus = 'create';
|
||||
dialog = true;
|
||||
posLevelName = '';
|
||||
// posLevelRank = undefined;
|
||||
posLevelAuthority = '';
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<q-input outlined dense v-model="filterKeyword" 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="store.row"
|
||||
:filter="filterKeyword"
|
||||
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"
|
||||
clickable
|
||||
@click.stop="
|
||||
() => {
|
||||
dialogStatus = 'edit';
|
||||
dialog = true;
|
||||
editId = props.row.id;
|
||||
posLevelName = props.row.posLevelName;
|
||||
// posLevelRank = props.row.posLevelRank;
|
||||
posLevelAuthority = props.row.posLevelAuthority;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
color="red"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
dialogRemove($q, async () => await deleteData(props.row.id))
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="dialog" class="dialog" persistent>
|
||||
<q-card style="width: 350px">
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<dialog-header
|
||||
:tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
</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="posLevelName"
|
||||
label="ระดับชั้นงาน"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => val.length > 0 || 'กรุณากรอกระดับชั้นงาน']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12">
|
||||
<q-input
|
||||
ref="posLevelRankRef"
|
||||
outlined
|
||||
v-model="posLevelRank"
|
||||
label="ระดับ"
|
||||
dense
|
||||
type="number"
|
||||
lazy-rules
|
||||
borderless
|
||||
min="1"
|
||||
bg-color="white"
|
||||
:rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
outlined
|
||||
v-model="posLevelAuthority"
|
||||
emit-value
|
||||
map-options
|
||||
:options="storeOption.posLevelAuthorityOption"
|
||||
option-value="label"
|
||||
label="ผู้มีอำนาจสั่งบรรจุ"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
ref="posTypeIdRef"
|
||||
v-model="posName"
|
||||
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>
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -1,286 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, defineProps } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
// import type { QTableProps } from "quasar";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type {
|
||||
DataOption,
|
||||
FormPositionEmployeeSelectDialog,
|
||||
FormPositionEmployeeSelectRef,
|
||||
OptionType,
|
||||
OptionLevel,
|
||||
} from "@/modules/01_metadataNew/interface/request/position/index";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
const levelOps = ref<DataOption[]>([]);
|
||||
const levelOpsMain = ref<DataOption[]>([]);
|
||||
const typeOps = ref<DataOption[]>([]);
|
||||
const typeOpsMain = ref<DataOption[]>([]);
|
||||
const dataLevel = ref<any>();
|
||||
const formPositionSelect = reactive<FormPositionEmployeeSelectDialog>({
|
||||
positionId: "",
|
||||
positionName: "",
|
||||
positionType: "",
|
||||
positionLevel: "",
|
||||
});
|
||||
const $q = useQuasar();
|
||||
const isSpecial = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
getData: Function,
|
||||
});
|
||||
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
|
||||
useCounterMixin();
|
||||
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const modal = defineModel<boolean>("addPosition", { required: true });
|
||||
const formData = defineModel<any>("formData", { required: true });
|
||||
const editCheck = defineModel<boolean>("editCheck", { required: true });
|
||||
|
||||
const positionNameRef = ref<Object | null>(null);
|
||||
const positionTypeRef = ref<Object | null>(null);
|
||||
const positionLevelRef = ref<Object | null>(null);
|
||||
|
||||
const objectPositionSelectRef: FormPositionEmployeeSelectRef = {
|
||||
positionName: positionNameRef,
|
||||
positionType: positionTypeRef,
|
||||
positionLevel: positionLevelRef,
|
||||
};
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function validateFormPositionEdit() {
|
||||
const hasError = [];
|
||||
for (const key in objectPositionSelectRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
|
||||
const property = objectPositionSelectRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
if (editCheck.value == true) {
|
||||
saveSelectEdit();
|
||||
} else {
|
||||
onSubmitSelectEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function saveSelectEdit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
// showLoader();
|
||||
// const body = {
|
||||
// posDictName: formPositionSelect.positionName,
|
||||
// posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
|
||||
// posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
|
||||
// };
|
||||
// await http
|
||||
// .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
|
||||
// .then(() => {
|
||||
// success($q, "เพิ่มข้อมูลสำเร็จ");
|
||||
// clearFormPositionSelect();
|
||||
// modal.value = false;
|
||||
// editCheck.value = false;
|
||||
// props.getData?.();
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
},
|
||||
"ยืนยันการเพิ่มตำแหน่ง",
|
||||
"ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmitSelectEdit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
// showLoader();
|
||||
// const body = {
|
||||
// posDictName: formPositionSelect.positionName,
|
||||
// posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
|
||||
// posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
|
||||
// };
|
||||
// await http
|
||||
// .post(config.API.orgPosPosition, body)
|
||||
// .then(() => {
|
||||
// success($q, "เพิ่มข้อมูลสำเร็จ");
|
||||
// clearFormPositionSelect();
|
||||
// modal.value = false;
|
||||
// editCheck.value = false;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
},
|
||||
"ยืนยันการเพิ่มตำแหน่ง",
|
||||
"ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
async function clearFormPositionSelect() {
|
||||
formPositionSelect.positionId = "";
|
||||
formPositionSelect.positionName = "";
|
||||
formPositionSelect.positionType = "";
|
||||
formPositionSelect.positionLevel = "";
|
||||
}
|
||||
|
||||
/**
|
||||
* ส่งค่า css ออกไปตามเงื่อนไข
|
||||
* @param val true/false
|
||||
*/
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
|
||||
/** function เรียกรายการประเภทตำแหน่ง */
|
||||
async function fetchType() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgPosType)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
dataLevel.value = data;
|
||||
typeOpsMain.value = data.map((e: OptionType) => ({
|
||||
id: e.id,
|
||||
name: e.posTypeName,
|
||||
}));
|
||||
typeOps.value = typeOpsMain.value;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value == true) {
|
||||
fetchType();
|
||||
if (formData.value) {
|
||||
const dataList = formData.value;
|
||||
setTimeout(() => {
|
||||
updateSelectType(dataList.posTypeId);
|
||||
}, 1000);
|
||||
formPositionSelect.positionId = dataList.positionId;
|
||||
formPositionSelect.positionName = dataList.positionName;
|
||||
formPositionSelect.positionType = dataList.positionType;
|
||||
formPositionSelect.positionLevel = dataList.positionLevel;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function updateSelectType(val: string) {
|
||||
const listLevel = dataLevel.value.find((e: any) => e.id === val);
|
||||
levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
|
||||
id: e.id,
|
||||
name: e.posLevelName,
|
||||
}));
|
||||
levelOps.value = levelOpsMain.value;
|
||||
}
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
editCheck.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 50vw">
|
||||
<form @submit.prevent="validateFormPositionEdit">
|
||||
<DialogHeader
|
||||
:tittle="`${
|
||||
editCheck
|
||||
? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
|
||||
: 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
|
||||
}`"
|
||||
:close="close"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm col-12">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
ref="positionNameRef"
|
||||
v-model="formPositionSelect.positionName"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#positionName"
|
||||
label="ชื่อตำแหน่ง"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<q-select
|
||||
ref="positionTypeRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
label="กลุ่มงาน"
|
||||
v-model="formPositionSelect.positionType"
|
||||
:options="typeOps"
|
||||
emit-value
|
||||
dense
|
||||
@update:model-value="updateSelectType"
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<q-select
|
||||
ref="positionLevelRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
label="ระดับชั้นงาน"
|
||||
v-model="formPositionSelect.positionLevel"
|
||||
:disable="formPositionSelect.positionType === ''"
|
||||
:options="levelOps"
|
||||
emit-value
|
||||
dense
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn type="submit" :label="`บันทึก`" color="public" />
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
interface ObjectGroupRef {
|
||||
posTypeName: object | null;
|
||||
posTypeShortName: object | null;
|
||||
posTypeRank: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface ObjectLevelRef {
|
||||
posLevelName: object | null;
|
||||
posLevelAuthority: object | null;
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface ObjectPosRef {
|
||||
posName: object | null;
|
||||
posTypeName: object | null;
|
||||
posLevelName: object | null;
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface FormQuery {
|
||||
type: string;
|
||||
keyword: string;
|
||||
}
|
||||
|
||||
export type { ObjectGroupRef, ObjectLevelRef, ObjectPosRef, FormQuery };
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
interface FrmDataGroup {
|
||||
posTypeName: string;
|
||||
posTypeShortName: string;
|
||||
posTypeRank: number | null;
|
||||
}
|
||||
|
||||
interface FormDataLevel {
|
||||
posLevelName: number | null;
|
||||
posTypeName: string | undefined;
|
||||
posLevelAuthority: string;
|
||||
}
|
||||
|
||||
export type { FrmDataGroup, FormDataLevel };
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
interface ResGroup {
|
||||
id: string;
|
||||
posLevels: ResLevel[];
|
||||
posTypeName: string;
|
||||
posTypeRank: number;
|
||||
posTypeShortName: string;
|
||||
}
|
||||
|
||||
interface ResLevel {
|
||||
id: string;
|
||||
posLevelName: number;
|
||||
posTypeName: string;
|
||||
posTypeId: string;
|
||||
posLevelAuthority: string;
|
||||
}
|
||||
|
||||
interface ResPossition {
|
||||
id: string;
|
||||
posDictName: string;
|
||||
posLevelId: string;
|
||||
posLevelName: number;
|
||||
posTypeId: string;
|
||||
posTypeName: string;
|
||||
}
|
||||
|
||||
export type { ResGroup, ResLevel, ResPossition };
|
||||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -337,7 +337,7 @@ function closeHistoryDialog() {
|
|||
label="ชื่อใบอนุญาต"
|
||||
bg-color="white"
|
||||
dense
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่นใบอนุญาต'}`]"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -349,7 +349,7 @@ function closeHistoryDialog() {
|
|||
bg-color="white"
|
||||
dense
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกชื่อหน่วยงานผู้ออกใบอนุญาต'}`,
|
||||
(val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
|
@ -394,9 +394,9 @@ function closeHistoryDialog() {
|
|||
: ''
|
||||
"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
|
||||
]"
|
||||
:label="`${'วัน/เดือน/ปี ที่ออกใบอนุญาต'}`"
|
||||
:label="`${'วันที่ออกใบอนุญาต'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -428,7 +428,6 @@ function closeHistoryDialog() {
|
|||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
|
|
@ -437,7 +436,7 @@ function closeHistoryDialog() {
|
|||
? date2Thai(profesLicenseData.expireDate)
|
||||
: ''
|
||||
"
|
||||
:label="`${'วัน/เดือน/ปี ที่หมดอายุ'}`"
|
||||
:label="`${'วันที่หมดอายุ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
|
|||
|
|
@ -645,10 +645,10 @@ watch(
|
|||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกวัน/เดือน/ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
|
||||
`${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
|
||||
:label="`${'วันที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -683,11 +683,10 @@ watch(
|
|||
:model-value="date2Thai(trainData.endDate)"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกวัน/เดือน/ปี ที่จบการฝึกอบรม/ดูงาน'}`,
|
||||
!!val || `${'กรุณาเลือกวันที่จบการฝึกอบรม/ดูงาน'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'วัน/เดือน/ปี ที่จบการฝึกอบรม/ดูงาน'}`"
|
||||
:label="`${'วันที่จบการฝึกอบรม/ดูงาน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
|
|||
|
|
@ -48,9 +48,9 @@ const page = ref<string>();
|
|||
const dateAnnounce = ref<Date | null | string>(null);
|
||||
const refCommandNo = ref<string>();
|
||||
const refCommandDate = ref<Date | null | string>();
|
||||
const editRow = ref<boolean>(false);
|
||||
const note = ref<string>();
|
||||
|
||||
const editRow = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const edit = ref<boolean>(false);
|
||||
const modal = ref<boolean>(false);
|
||||
|
|
@ -534,7 +534,7 @@ const clickClose = async () => {
|
|||
ok: "ยืนยัน",
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
// modal.value = false;
|
||||
modal.value = false;
|
||||
// next.value = false;
|
||||
// previous.value = false;
|
||||
});
|
||||
|
|
@ -554,6 +554,10 @@ function onSubmit() {
|
|||
});
|
||||
}
|
||||
|
||||
function selectData(props: any) {
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "insigniaOptions":
|
||||
|
|
@ -685,6 +689,7 @@ onMounted(async () => {
|
|||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
dense
|
||||
v-model="modelView"
|
||||
toggle-color="grey-4"
|
||||
class="no-shadow toggle-borderd"
|
||||
|
|
@ -696,7 +701,7 @@ onMounted(async () => {
|
|||
<template v-slot:table>
|
||||
<q-icon
|
||||
name="format_list_bulleted"
|
||||
size="sm"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
|
|
@ -705,7 +710,7 @@ onMounted(async () => {
|
|||
<template v-slot:card>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="sm"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
|
|
@ -714,159 +719,134 @@ onMounted(async () => {
|
|||
</q-btn-toggle>
|
||||
</q-toolbar>
|
||||
|
||||
<div>
|
||||
<q-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
v-bind="attrs"
|
||||
class="custom-header-table"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:grid="modelView === 'card'"
|
||||
:rows-per-page-options="[0]"
|
||||
:pagination="initialPagination"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
v-bind="attrs"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:grid="modelView === 'card'"
|
||||
:pagination="initialPagination"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props" v-if="modelView === 'table'">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
class="cursor-pointer"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
<template v-slot:body="props" v-if="modelView === 'table'">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
class="cursor-pointer"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="selectData(props)"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
col.name == 'receiveDate' ||
|
||||
col.name == 'dateAnnounce' ||
|
||||
col.name == 'refCommandDate'
|
||||
"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
col.name == 'receiveDate' ||
|
||||
col.name == 'dateAnnounce' ||
|
||||
col.name == 'refCommandDate'
|
||||
"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ col.value == null ? "-" : date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'year'" class="table_ellipsis">
|
||||
{{ col.value + 543 }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
{{ col.value == null ? "-" : date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'year'" class="table_ellipsis">
|
||||
{{ col.value + 543 }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
color="info"
|
||||
icon="mdi-history"
|
||||
@click="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
@click.stop.prevent="onClickOpenDialog()"
|
||||
>
|
||||
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
color="info"
|
||||
icon="mdi-history"
|
||||
@click="clickHistory(props.row)"
|
||||
@click.stop.prevent="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<div>
|
||||
<q-item
|
||||
v-for="(col, index) in props.cols.filter(
|
||||
(col) => col.name !== 'desc'
|
||||
)"
|
||||
:key="col.name"
|
||||
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
|
||||
>
|
||||
<q-item-section class="text-grey-6">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
@click.stop.prevent="onClickOpenDialog()"
|
||||
>
|
||||
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="info"
|
||||
icon="mdi-history"
|
||||
@click.stop.prevent="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<div>
|
||||
<q-item
|
||||
v-for="(col, index) in props.cols.filter(
|
||||
(col) => col.name !== 'desc'
|
||||
)"
|
||||
:key="col.name"
|
||||
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
|
||||
>
|
||||
<q-item-section class="text-grey-6" v-if="index <= 7">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-dark" v-if="index <= 7">
|
||||
<q-item-label
|
||||
v-if="
|
||||
col.name == 'receiveDate' ||
|
||||
col.name == 'dateAnnounce' ||
|
||||
col.name == 'refCommandDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else-if="col.name == 'year'">
|
||||
{{ col.value + 543 }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-grey-6" v-if="index > 7">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-dark" v-if="index > 7">
|
||||
<q-item-label
|
||||
v-if="
|
||||
col.name == 'receiveDate' ||
|
||||
col.name == 'dateAnnounce' ||
|
||||
col.name == 'refCommandDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else-if="col.name == 'year'">
|
||||
{{ col.value + 543 }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
<q-item-section class="text-dark">
|
||||
<q-item-label
|
||||
v-if="
|
||||
col.name == 'receiveDate' ||
|
||||
col.name == 'dateAnnounce' ||
|
||||
col.name == 'refCommandDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else-if="col.name == 'year'">
|
||||
{{ col.value + 543 }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
|
|
@ -923,6 +903,7 @@ onMounted(async () => {
|
|||
menu-class-name="modalfix"
|
||||
v-model="receiveDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -942,9 +923,9 @@ onMounted(async () => {
|
|||
? date2Thai(receiveDate as Date)
|
||||
: null
|
||||
"
|
||||
:label="`${'วัน/เดือน/ปี ที่วันที่ได้รับ'}`"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
|
||||
]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
|
|
@ -1085,7 +1066,7 @@ onMounted(async () => {
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
:model-value="date2Thai(dateAnnounce as Date)"
|
||||
:label="`${'วัน/เดือน/ปี ที่ประกาศในราชกิจจาฯ'}`"
|
||||
:label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
|
||||
|
|
@ -1160,13 +1141,6 @@ onMounted(async () => {
|
|||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="refCommandDate && edit" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="refCommandDate = null"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,756 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
Columns,
|
||||
} from "@/modules/04_registryNew/interface/request/DeclarationHonor";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
DataOptionInsignia,
|
||||
InsigniaOps,
|
||||
Pagination,
|
||||
} from "@/modules/04_registryNew/interface/index/Main";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
convertDate,
|
||||
convertDateDisplay,
|
||||
} = mixin;
|
||||
|
||||
const isDate = ref<string | null>("false");
|
||||
const issuer = ref<string>();
|
||||
const detail = ref<string>();
|
||||
const issueDate = ref<number>();
|
||||
const issueDate2 = ref<Date>();
|
||||
const refCommandNo = ref<string>();
|
||||
const refCommandDate = ref<Date | null>();
|
||||
|
||||
const editRow = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const edit = ref<boolean>(false);
|
||||
const modal = ref<boolean>(false);
|
||||
const modelView = ref<string>("table");
|
||||
const filterSearch = ref("");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const rowsHistory = ref<RequestItemsObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขประกาศเกียรติคุณ");
|
||||
|
||||
// mock data
|
||||
const rows = ref<any[]>([
|
||||
{
|
||||
id: "08dc2c84-4ef1-463e-8004-a6018ccaea19",
|
||||
issuer: "",
|
||||
detail: "ประกาศเกียรติคุณ ชั้น 2",
|
||||
isDate: false,
|
||||
issueDate: new Date("2019-01-01T00:00:00").getFullYear(),
|
||||
issueDate2: new Date("2019-01-01T00:00:00"),
|
||||
refCommandNo: "",
|
||||
refCommandDate: null,
|
||||
createdAt: new Date("2024-02-13T18:09:55.151412"),
|
||||
createdFullName: "สาวิตรี ศรีสมัย",
|
||||
},
|
||||
{
|
||||
id: "08dc2c84-4ef1-463e-8004-a6018ccaea19",
|
||||
issuer: "",
|
||||
detail: "ประกาศเกียรติคุณ ชั้น 2",
|
||||
isDate: true,
|
||||
issueDate: new Date("2015-12-05T00:00:00").getFullYear(),
|
||||
issueDate2: new Date("2015-12-05T00:00:00"),
|
||||
refCommandNo: "",
|
||||
refCommandDate: null,
|
||||
createdAt: new Date("2024-02-13T18:10:37.425739"),
|
||||
createdFullName: "สาวิตรี ศรีสมัย",
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "issueDate",
|
||||
align: "left",
|
||||
label: "วันที่ได้รับ",
|
||||
sortable: true,
|
||||
field: "issueDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "issuer",
|
||||
align: "left",
|
||||
label: "ผู้มีอำนาจลงนาม",
|
||||
sortable: true,
|
||||
field: "issuer",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "detail",
|
||||
align: "left",
|
||||
label: "รายละเอียด",
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "refCommandNo",
|
||||
align: "left",
|
||||
label: "เลขที่คำสั่ง",
|
||||
sortable: true,
|
||||
field: "refCommandNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "refCommandDate",
|
||||
align: "left",
|
||||
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||
sortable: true,
|
||||
field: "refCommandDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "issueDate",
|
||||
align: "left",
|
||||
label: "วันที่ได้รับ",
|
||||
sortable: true,
|
||||
field: "issueDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "issuer",
|
||||
align: "left",
|
||||
label: "ผู้มีอำนาจลงนาม",
|
||||
sortable: true,
|
||||
field: "issuer",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "detail",
|
||||
align: "left",
|
||||
label: "รายละเอียด",
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "refCommandNo",
|
||||
align: "left",
|
||||
label: "เลขที่คำสั่ง",
|
||||
sortable: true,
|
||||
field: "refCommandNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "refCommandDate",
|
||||
align: "left",
|
||||
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||
sortable: true,
|
||||
field: "refCommandDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
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" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"issuer",
|
||||
"detail",
|
||||
"issueDate",
|
||||
"refCommandNo",
|
||||
"refCommandDate",
|
||||
]);
|
||||
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"issuer",
|
||||
"detail",
|
||||
"issueDate",
|
||||
"refCommandNo",
|
||||
"refCommandDate",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
const clickClose = async () => {
|
||||
if (editRow.value == true) {
|
||||
$q.dialog({
|
||||
title: `ข้อมูลมีการแก้ไข`,
|
||||
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||
cancel: "ยกเลิก",
|
||||
ok: "ยืนยัน",
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
modal.value = false;
|
||||
// next.value = false;
|
||||
// previous.value = false;
|
||||
});
|
||||
} else {
|
||||
modal.value = false;
|
||||
// next.value = false;
|
||||
// previous.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
// await saveData();
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectData(props: any) {
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
async function clickHistory(row: RequestItemsObject) {
|
||||
modalHistory.value = true;
|
||||
// tittleHistory.value =
|
||||
// props.profileType == "employee"
|
||||
// ? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
|
||||
// : "ประวัติแก้ไขประกาศเกียรติคุณ";
|
||||
// modalHistory.value = true;
|
||||
// filterHistory.value = "";
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.profileHonorHisId(row.id))
|
||||
// .then((res) => {
|
||||
// let data = res.data.result;
|
||||
// rowsHistory.value = [];
|
||||
// data.map((e: any) => {
|
||||
// rowsHistory.value.push({
|
||||
// id: e.id,
|
||||
// issuer: e.issuer,
|
||||
// detail: e.detail,
|
||||
// issueDate: new Date(e.issueDate).getFullYear(),
|
||||
// issueDate2: new Date(e.issueDate),
|
||||
// refCommandNo: e.refCommandNo,
|
||||
// refCommandDate:
|
||||
// e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
||||
// createdAt: new Date(e.createdAt),
|
||||
// createdFullName: e.createdFullName,
|
||||
// });
|
||||
// });
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>ประกาศเกียรติคุณ</div>
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="ค้นหา"
|
||||
class="q-mr-sm"
|
||||
v-model="filterSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-if="modelView === 'table'"
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-cover
|
||||
options-dense
|
||||
class="q-mr-sm"
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
dense
|
||||
v-model="modelView"
|
||||
toggle-color="grey-4"
|
||||
class="no-shadow toggle-borderd"
|
||||
:options="[
|
||||
{ value: 'table', slot: 'table' },
|
||||
{ value: 'card', slot: 'card' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:table>
|
||||
<q-icon
|
||||
name="format_list_bulleted"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:card>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
v-bind="attrs"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:grid="modelView === 'card'"
|
||||
:pagination="initialPagination"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props" v-if="modelView === 'table'">
|
||||
<q-tr :props="props">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
@click="selectData(props)"
|
||||
>
|
||||
<div v-if="col.name == 'issueDate'" class="table_ellipsis">
|
||||
{{
|
||||
props.row.isDate == true
|
||||
? date2Thai(props.row.issueDate2)
|
||||
: col.value + 543
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'refCommandDate'" class="table_ellipsis">
|
||||
{{
|
||||
props.row.refCommandDate
|
||||
? date2Thai(props.row.refCommandDate)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-history"
|
||||
@click="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
@click.stop.prevent="onClickOpenDialog()"
|
||||
>
|
||||
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="info"
|
||||
icon="mdi-history"
|
||||
@click.stop.prevent="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<div>
|
||||
<q-item
|
||||
v-for="(col, index) in props.cols.filter(
|
||||
(col) => col.name !== 'desc'
|
||||
)"
|
||||
:key="col.name"
|
||||
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
|
||||
>
|
||||
<q-item-section class="col-7 text-grey-6">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-dark">
|
||||
<q-item-label v-if="col.name == 'issueDate'">
|
||||
{{
|
||||
props.row.isDate == true
|
||||
? date2Thai(props.row.issueDate2)
|
||||
: col.value + 543
|
||||
}}
|
||||
</q-item-label>
|
||||
<q-item-label v-else-if="col.name == 'refCommandDate'">
|
||||
{{
|
||||
props.row.refCommandDate
|
||||
? date2Thai(props.row.refCommandDate)
|
||||
: "-"
|
||||
}}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form greedy ref="myForm" @submit="onSubmit">
|
||||
<DialogHeader tittle="ประกาศเกียรติคุณ" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
|
||||
<q-radio
|
||||
v-model="isDate"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="false"
|
||||
label="ปี"
|
||||
dense
|
||||
/>
|
||||
<q-radio
|
||||
v-model="isDate"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="true"
|
||||
label="วัน/เดือน/ปี"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
autoApply
|
||||
year-picker
|
||||
v-model="issueDate"
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
v-if="isDate === 'false'"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:model-value="issueDate ? issueDate + 543 : ''"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกปีที่ได้รับ'}`,
|
||||
]"
|
||||
:label="`${'ปีที่ได้รับ'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="issueDate2"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
v-else
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
for="inputDatereceive"
|
||||
ref="dateReceivedRef"
|
||||
hide-bottom-space
|
||||
:model-value="date2Thai(issueDate2 as Date)"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
|
||||
]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="issuer"
|
||||
:label="`${'ผู้มีอำนาจลงนาม'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="detail"
|
||||
:label="`${'รายละเอียด'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="refCommandNo"
|
||||
:label="`${'เลขที่คำสั่ง'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="mdi-file" class="cursor-pointer" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="refCommandDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
clearable
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
refCommandDate == null ? null : date2Thai(refCommandDate)
|
||||
"
|
||||
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
|
||||
@clear="refCommandDate = null"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<div class="text-right q-pa-sm">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
color="public"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="
|
||||
col.name == 'issueDate' ||
|
||||
col.name == 'createdAt' ||
|
||||
col.name == 'refCommandDate'
|
||||
"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,771 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch, useAttrs } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
DataProps,
|
||||
} from "@/modules/04_registryNew/interface/request/ResultsPerformance";
|
||||
|
||||
const $q = useQuasar();
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
convertDate,
|
||||
convertDateDisplay,
|
||||
} = mixin;
|
||||
|
||||
const id = ref<string>("");
|
||||
const name = ref<string>();
|
||||
const point1Total = ref<number>(0);
|
||||
const point1 = ref<number>(0);
|
||||
const point2Total = ref<number>(0);
|
||||
const point2 = ref<number>(0);
|
||||
const pointSumTotal = ref<number>(0);
|
||||
const pointSum = ref<number>(0);
|
||||
const date = ref<Date>();
|
||||
|
||||
const editRow = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const edit = ref<boolean>(false);
|
||||
const modal = ref<boolean>(false);
|
||||
const modelView = ref<string>("table");
|
||||
const filterSearch = ref("");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const rowsHistory = ref<RequestItemsObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ");
|
||||
|
||||
const rows = ref<RequestItemsObject[]>([
|
||||
{
|
||||
id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
|
||||
point1Total: 100.0,
|
||||
point1: 100.0,
|
||||
point2Total: 100.0,
|
||||
point2: 100.0,
|
||||
pointSumTotal: 100.0,
|
||||
pointSum: 100.0,
|
||||
name: "",
|
||||
date: new Date("2022-05-18T00:00:00"),
|
||||
createdFullName: "สาวิตรี ศรีสมัย",
|
||||
createdAt: new Date("2024-02-13T18:11:09.032485"),
|
||||
},
|
||||
{
|
||||
id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
|
||||
point1Total: 100.0,
|
||||
point1: 100.0,
|
||||
point2Total: 100.0,
|
||||
point2: 100.0,
|
||||
pointSumTotal: 100.0,
|
||||
pointSum: 100.0,
|
||||
name: "",
|
||||
date: new Date("2021-09-25T00:00:00"),
|
||||
createdFullName: "สาวิตรี ศรีสมัย",
|
||||
createdAt: new Date("2024-02-13T18:11:35.602659"),
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "วันที่ได้รับ",
|
||||
sortable: true,
|
||||
field: "date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point1Total",
|
||||
align: "left",
|
||||
label: "ส่วนที่1 (คะแนน)",
|
||||
sortable: true,
|
||||
field: "point1Total",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point1",
|
||||
align: "left",
|
||||
label: "ผลประเมินส่วนที่1 (คะแนน)",
|
||||
sortable: true,
|
||||
field: "point1",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point2Total",
|
||||
align: "left",
|
||||
label: "ส่วนที่2 (คะแนน)",
|
||||
sortable: true,
|
||||
field: "point2Total",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point2",
|
||||
align: "left",
|
||||
label: "ผลประเมินส่วนที่2 (คะแนน)",
|
||||
sortable: true,
|
||||
field: "point2",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "pointSumTotal",
|
||||
align: "left",
|
||||
label: "ผลรวม (คะแนน)",
|
||||
sortable: true,
|
||||
field: "pointSumTotal",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "pointSum",
|
||||
align: "left",
|
||||
label: "ผลประเมินรวม (คะแนน)",
|
||||
sortable: true,
|
||||
field: "pointSum",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ผลประเมิน",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "point1Total",
|
||||
align: "left",
|
||||
label: "ส่วนที่1 (คะแนน)",
|
||||
sortable: true,
|
||||
field: "point1Total",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point1",
|
||||
align: "left",
|
||||
label: "ผลประเมินส่วนที่1 (คะแนน)",
|
||||
sortable: true,
|
||||
field: "point1",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point2Total",
|
||||
align: "left",
|
||||
label: "ส่วนที่2 (คะแนน)",
|
||||
sortable: true,
|
||||
field: "point2Total",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point2",
|
||||
align: "left",
|
||||
label: "ผลประเมินส่วนที่2 (คะแนน)",
|
||||
sortable: true,
|
||||
field: "point2",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "pointSumTotal",
|
||||
align: "left",
|
||||
label: "ผลรวม (คะแนน)",
|
||||
sortable: true,
|
||||
field: "pointSumTotal",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "pointSum",
|
||||
align: "left",
|
||||
label: "ผลประเมินรวม (คะแนน)",
|
||||
sortable: true,
|
||||
field: "pointSum",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ผลประเมิน",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
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" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"point1Total",
|
||||
"point1",
|
||||
"point2Total",
|
||||
"point2",
|
||||
"pointSumTotal",
|
||||
"pointSum",
|
||||
"name",
|
||||
"date",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"point1Total",
|
||||
"point1",
|
||||
"point2Total",
|
||||
"point2",
|
||||
"pointSumTotal",
|
||||
"pointSum",
|
||||
"name",
|
||||
"date",
|
||||
]);
|
||||
|
||||
function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
const clickClose = async () => {
|
||||
if (editRow.value == true) {
|
||||
$q.dialog({
|
||||
title: `ข้อมูลมีการแก้ไข`,
|
||||
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||
cancel: "ยกเลิก",
|
||||
ok: "ยืนยัน",
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
modal.value = false;
|
||||
// next.value = false;
|
||||
// previous.value = false;
|
||||
});
|
||||
} else {
|
||||
modal.value = false;
|
||||
// next.value = false;
|
||||
// previous.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
// await saveData();
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectData(props: any) {
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
const clickHistory = async (row: RequestItemsObject) => {
|
||||
modalHistory.value = true;
|
||||
// tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
|
||||
// filterHistory.value = "";
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.profileAssessmentHisId(row.id))
|
||||
// .then((res) => {
|
||||
// let data = res.data.result;
|
||||
// rowsHistory.value = [];
|
||||
// data.map((e: ResponseObject) => {
|
||||
// rowsHistory.value.push({
|
||||
// id: e.id,
|
||||
// name: e.name,
|
||||
// point1Total: e.point1Total,
|
||||
// point1: e.point1,
|
||||
// point2Total: e.point2Total,
|
||||
// point2: e.point2,
|
||||
// pointSumTotal: e.pointSumTotal,
|
||||
// pointSum: e.pointSum,
|
||||
// date: new Date(e.date),
|
||||
// createdAt: new Date(e.createdAt),
|
||||
// createdFullName: e.createdFullName,
|
||||
// });
|
||||
// });
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
};
|
||||
|
||||
function textRangePoint(val: number | undefined) {
|
||||
if (val == undefined) val = -1;
|
||||
if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
|
||||
if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
|
||||
if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
|
||||
if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
|
||||
if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
|
||||
else return "";
|
||||
}
|
||||
|
||||
function textPoint(val: number | undefined) {
|
||||
if (val == undefined) val = -1;
|
||||
if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
|
||||
if (val >= 60 && val <= 69) return "พอใช้";
|
||||
if (val >= 70 && val <= 79) return "ดี";
|
||||
if (val >= 80 && val <= 89) return "ดีมาก";
|
||||
if (val >= 90 && val <= 100) return "ดีเด่น";
|
||||
else return "-";
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div>ผลการประเมินการปฏิบัติราชการ</div>
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="ค้นหา"
|
||||
class="q-mr-sm"
|
||||
v-model="filterSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-if="modelView === 'table'"
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-cover
|
||||
options-dense
|
||||
class="q-mr-sm"
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
dense
|
||||
v-model="modelView"
|
||||
toggle-color="grey-4"
|
||||
class="no-shadow toggle-borderd"
|
||||
:options="[
|
||||
{ value: 'table', slot: 'table' },
|
||||
{ value: 'card', slot: 'card' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:table>
|
||||
<q-icon
|
||||
name="format_list_bulleted"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:card>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
v-bind="attrs"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:grid="modelView === 'card'"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props" v-if="modelView === 'table'">
|
||||
<q-tr :props="props">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="selectData(props)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<div v-if="col.name == 'date'" class="table_ellipsis">
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'name'" class="table_ellipsis">
|
||||
{{ textPoint(props.row.pointSum) }}
|
||||
{{ textRangePoint(props.row.pointSum) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-history"
|
||||
@click="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions class="bg-grey-3" align="right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
@click.stop.prevent="onClickOpenDialog()"
|
||||
>
|
||||
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="info"
|
||||
icon="mdi-history"
|
||||
@click="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<div>
|
||||
<q-item
|
||||
v-for="(col, index) in props.cols.filter(
|
||||
(col) => col.name !== 'desc'
|
||||
)"
|
||||
:key="col.name"
|
||||
:class="index % 2 !== 0 ? 'bg-grey-1' : ''"
|
||||
>
|
||||
<q-item-section class="text-grey-6">
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section class="text-dark">
|
||||
<q-item-label v-if="col.name == 'date'">
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else-if="col.name == 'name'">
|
||||
{{ textPoint(props.row.pointSum) }}
|
||||
{{ textRangePoint(props.row.pointSum) }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form greedy ref="myForm" @submit="onSubmit">
|
||||
<DialogHeader tittle="ประกาศเกียรติคุณ" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="date"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
for="inputDatereceive"
|
||||
ref="dateReceivedRef"
|
||||
hide-bottom-space
|
||||
:model-value="date2Thai(date as Date)"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
type="number"
|
||||
class="inputgreen"
|
||||
v-model="point1Total"
|
||||
input-class="text-right "
|
||||
:label="`${'ส่วนที่1 (คะแนน)'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
type="number"
|
||||
class="inputgreen"
|
||||
v-model="point1"
|
||||
input-class="text-right"
|
||||
:label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
|
||||
]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
type="number"
|
||||
class="inputgreen"
|
||||
v-model="point2Total"
|
||||
input-class="text-right"
|
||||
:label="`${'ส่วนที่2 (คะแนน)'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
type="number"
|
||||
class="inputgreen"
|
||||
v-model="point2"
|
||||
input-class="text-right"
|
||||
:label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
|
||||
]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
type="number"
|
||||
class="inputgreen"
|
||||
v-model="pointSumTotal"
|
||||
input-class="text-right"
|
||||
:label="`${'ผลรวม (คะแนน)'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
type="number"
|
||||
v-model="pointSum"
|
||||
class="inputgreen"
|
||||
input-class="text-right"
|
||||
:label="`${'ผลประเมินรวม (คะแนน)'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
|
||||
]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-subtitle2 col-12 row items-center">
|
||||
<q-space></q-space>
|
||||
ผลการประเมิน:
|
||||
<div class="text-bold items-center q-px-sm">
|
||||
{{ textPoint(pointSum) }}
|
||||
</div>
|
||||
{{ textRangePoint(pointSum) }}
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<div class="text-right q-pa-sm">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
color="public"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name == 'date' || col.name == 'createdAt'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'name'" class="table_ellipsis">
|
||||
{{ textPoint(props.row.pointSum) }}
|
||||
{{ textRangePoint(props.row.pointSum) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -275,106 +275,94 @@ onMounted(async () => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row justify-end items-center">
|
||||
<div class="toptitle row">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
debounce="300"
|
||||
ref="filterRef"
|
||||
v-model="filterSearch"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" v-if="filterSearch == ''" />
|
||||
<q-icon
|
||||
name="clear"
|
||||
v-if="filterSearch !== ''"
|
||||
@click="filterSearch = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
option-value="name"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
class="q-ml-sm"
|
||||
style="min-width: 150px"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-table
|
||||
flat
|
||||
<q-toolbar style="padding: 0px" class="text-primary row justify-end">
|
||||
<q-input
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
v-bind="attrs"
|
||||
class="custom-header-table"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:rows-per-page-options="[0]"
|
||||
:pagination="initialPagination"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
outlined
|
||||
label="ค้นหา"
|
||||
class="q-mr-sm"
|
||||
v-model="filterSearch"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||
<div v-if="col.name == 'status'" class="table_ellipsis">
|
||||
{{ typeChangeName(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="props.row.file != null"
|
||||
color="green"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-file-document-outline"
|
||||
@click="openFile(props.row.file)"
|
||||
/>
|
||||
<q-btn
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-history"
|
||||
@click="clickHistory(props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
<q-select
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-cover
|
||||
options-dense
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
v-bind="attrs"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:rows-per-page-options="[0]"
|
||||
:pagination="initialPagination"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ 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.name">
|
||||
<div v-if="col.name == 'status'" class="table_ellipsis">
|
||||
{{ typeChangeName(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="props.row.file != null"
|
||||
color="green"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-file-document-outline"
|
||||
@click="openFile(props.row.file)"
|
||||
/>
|
||||
<q-btn
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-history"
|
||||
@click="clickHistory(props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
|
|
|
|||
|
|
@ -492,7 +492,7 @@ async function selectProvince(e: string | null, name: string) {
|
|||
myForm.value.resetValidation();
|
||||
await fetchDistrict(e, name);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function selectDistrict(e: string | null, name: string) {
|
||||
if (e != null) {
|
||||
|
|
@ -506,7 +506,7 @@ async function selectDistrict(e: string | null, name: string) {
|
|||
myForm.value.resetValidation();
|
||||
await fetchSubDistrict(e, name);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function selectSubDistrict(e: string | null, name: string) {
|
||||
if (e != null) {
|
||||
|
|
@ -520,7 +520,7 @@ function selectSubDistrict(e: string | null, name: string) {
|
|||
addressData.value.codec = namecode;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function getNewData() {
|
||||
await fetchData();
|
||||
|
|
@ -640,7 +640,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<q-card bordered class="my-card bg-grey-1 q-pa-md">
|
||||
<q-card class="my-card bg-grey-1 q-pa-md">
|
||||
<div :class="$q.screen.gt.xs ? 'row' : 'column'">
|
||||
<!-- column 1 -->
|
||||
<div class="col-md-6 col-12 row">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const fatherData = reactive({
|
|||
job: "ตำรวจ",
|
||||
});
|
||||
const motherData = reactive({
|
||||
isHaveInfo: 0,
|
||||
isHaveInfo: 1,
|
||||
isDead: 0,
|
||||
citizenId: "1-1345-67891-01-2",
|
||||
prefix: "นาง",
|
||||
|
|
@ -155,12 +155,12 @@ function deleteChildren(items: any) {
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="fatherData.isHaveInfo">
|
||||
<div class="col-12 row q-pb-sm q-pt-md">
|
||||
<div class="col-12 row q-pb-sm">
|
||||
<div class="q-mr-md text-weight-bold text-primary text-subtitle1">
|
||||
• บิดา
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-grey-1 q-gutter-md q-mb-lg">
|
||||
<q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
|
||||
<div class="row items-center">
|
||||
<div class="col-2">
|
||||
<div>เลขบัตรประจำตัวประชาชน</div>
|
||||
|
|
@ -204,7 +204,7 @@ function deleteChildren(items: any) {
|
|||
<div v-else>ถึงแก่กรรม</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-if="motherData.isHaveInfo">
|
||||
<div class="col-12 row q-pb-sm q-pt-md">
|
||||
|
|
@ -212,7 +212,7 @@ function deleteChildren(items: any) {
|
|||
• มารดา
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-grey-1 q-gutter-md q-mb-lg">
|
||||
<q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
|
||||
<div class="row items-center">
|
||||
<div class="col-2">
|
||||
<div>เลขบัตรประจำตัวประชาชน</div>
|
||||
|
|
@ -256,7 +256,7 @@ function deleteChildren(items: any) {
|
|||
<div v-else>ถึงแก่กรรม</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-if="spouseData.isHave">
|
||||
<div class="col-12 row q-pb-sm q-pt-md">
|
||||
|
|
@ -264,7 +264,7 @@ function deleteChildren(items: any) {
|
|||
• คู่สมรส
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-grey-1 q-gutter-md q-mb-lg">
|
||||
<q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
|
||||
<div class="row items-center">
|
||||
<div class="col-2">
|
||||
<div>เลขบัตรประจำตัวประชาชน</div>
|
||||
|
|
@ -308,7 +308,7 @@ function deleteChildren(items: any) {
|
|||
<div v-else>ถึงแก่กรรม</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-if="childrenData.childrens[0] !== undefined">
|
||||
<div class="col-12 row q-pb-sm q-pt-md">
|
||||
|
|
@ -320,7 +320,7 @@ function deleteChildren(items: any) {
|
|||
<div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
|
||||
<div class="text-medium">บุตรคนที่ : {{ index + 1 }}</div>
|
||||
</div>
|
||||
<div class="bg-grey-1 q-gutter-md q-mb-lg">
|
||||
<q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
|
||||
<div class="row items-center">
|
||||
<div class="col-2">
|
||||
<div>เลขบัตรประจำตัวประชาชน</div>
|
||||
|
|
@ -364,7 +364,7 @@ function deleteChildren(items: any) {
|
|||
<div v-else>ถึงแก่กรรม</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -405,7 +405,7 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-card-section class="bg-grey-1">
|
||||
<q-card bordered class="bg-grey-1 q-pa-md">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col">
|
||||
<q-input
|
||||
|
|
@ -470,9 +470,9 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-gutter-md">
|
||||
<div>สถานภาพการมีชีวิต</div>
|
||||
<div class>
|
||||
<div class="row">
|
||||
<div class="q-mr-sm">สถานภาพการมีชีวิต</div>
|
||||
<div>
|
||||
<q-radio
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="q-mr-sm"
|
||||
|
|
@ -496,7 +496,7 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<div class="col-12 row q-pb-sm q-pt-md q-mt-md">
|
||||
<div
|
||||
class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
|
||||
|
|
@ -524,7 +524,7 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-card-section class="bg-grey-1">
|
||||
<q-card bordered class="bg-grey-1 q-pa-md">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col">
|
||||
<q-input
|
||||
|
|
@ -573,7 +573,7 @@ function deleteChildren(items: any) {
|
|||
dense
|
||||
bg-color="white"
|
||||
lazy-rules
|
||||
v-model="motherData.lastName"
|
||||
v-model="fatherData.lastName"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
|
||||
label="นามสกุล"
|
||||
/>
|
||||
|
|
@ -589,9 +589,9 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-gutter-md">
|
||||
<div>สถานภาพการมีชีวิต</div>
|
||||
<div class="">
|
||||
<div class="row">
|
||||
<div class="q-mr-sm">สถานภาพการมีชีวิต</div>
|
||||
<div>
|
||||
<q-radio
|
||||
:disable="!motherData.isHaveInfo"
|
||||
class="q-mr-sm"
|
||||
|
|
@ -599,7 +599,7 @@ function deleteChildren(items: any) {
|
|||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
:val="1"
|
||||
label="ยังมีชัวิตอยู่"
|
||||
label="ยังมีชีวิตอยู่"
|
||||
dense
|
||||
:color="!motherData.isHaveInfo ? 'grey' : 'primary'"
|
||||
/>
|
||||
|
|
@ -615,7 +615,7 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<div class="col-12 row q-pb-sm q-pt-md q-mt-md">
|
||||
<div
|
||||
class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
|
||||
|
|
@ -643,7 +643,7 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-card-section class="bg-grey-1">
|
||||
<q-card bordered class="bg-grey-1 q-pa-md">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col">
|
||||
<q-input
|
||||
|
|
@ -708,9 +708,9 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-gutter-md">
|
||||
<div>สถานภาพการมีชีวิต</div>
|
||||
<div class="">
|
||||
<div class="row">
|
||||
<div class="q-mr-sm">สถานภาพการมีชีวิต</div>
|
||||
<div>
|
||||
<q-radio
|
||||
:disable="!spouseData.isHave"
|
||||
class="q-mr-sm"
|
||||
|
|
@ -718,7 +718,7 @@ function deleteChildren(items: any) {
|
|||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
:val="1"
|
||||
label="ยังมีชัวิตอยู่"
|
||||
label="ยังมีชีวิตอยู่"
|
||||
dense
|
||||
:color="!spouseData.isHave ? 'grey' : 'primary'"
|
||||
/>
|
||||
|
|
@ -728,13 +728,13 @@ function deleteChildren(items: any) {
|
|||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
:val="0"
|
||||
:color="!spouseData.isHave ? 'grey' : 'red'"
|
||||
:color="!motherData.isHaveInfo ? 'grey' : 'red'"
|
||||
label="ถึงแก่กรรม"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<div class="col-12 row q-pb-sm q-pt-md items-center">
|
||||
<div
|
||||
class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
|
||||
|
|
@ -757,8 +757,8 @@ function deleteChildren(items: any) {
|
|||
<div class="text-medium q-pl-md">บุตรคนที่ : {{ index + 1 }}</div>
|
||||
</div>
|
||||
<div class="row items-center">
|
||||
<q-card-section class="bg-grey-1 col-11 q-pb-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-card bordered class="bg-grey-1 q-pa-md col-11 q-mb-lg">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
|
|
@ -815,31 +815,33 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-gutter-md">
|
||||
<div>สถานภาพการมีชีวิต</div>
|
||||
<div class="">
|
||||
<div class="row">
|
||||
<div class="q-mr-sm">สถานภาพการมีชีวิต</div>
|
||||
<div>
|
||||
<q-radio
|
||||
:disable="!spouseData.isHave"
|
||||
class="q-mr-sm"
|
||||
v-model="items.isDead"
|
||||
v-model="spouseData.isDead"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
:val="1"
|
||||
label="ยังมีชัวิตอยู่"
|
||||
label="ยังมีชีวิตอยู่"
|
||||
dense
|
||||
color="primary"
|
||||
:color="!spouseData.isHave ? 'grey' : 'primary'"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="items.isDead"
|
||||
:disable="!spouseData.isHave"
|
||||
v-model="spouseData.isDead"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
:val="0"
|
||||
color="red"
|
||||
:color="!motherData.isHaveInfo ? 'grey' : 'red'"
|
||||
label="ถึงแก่กรรม"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<div class="col-1">
|
||||
<div class="row justify-center">
|
||||
<q-btn
|
||||
|
|
@ -858,8 +860,8 @@ function deleteChildren(items: any) {
|
|||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-separator />
|
||||
<q-card-actions class="q-mt-md" align="right">
|
||||
<q-btn
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
|
|
|
|||
|
|
@ -696,7 +696,7 @@ watch(
|
|||
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
|
||||
:label="`${'วันที่เริ่มต้นศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -733,7 +733,7 @@ watch(
|
|||
(val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
|
||||
:label="`${'วันที่จบการศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
interface gDataProps {
|
||||
row: RequestItemsObject;
|
||||
rowIndex: number;
|
||||
}
|
||||
|
||||
//ข้อมูล
|
||||
interface RequestItemsObject {
|
||||
id: string;
|
||||
issuer: string;
|
||||
detail: string;
|
||||
issueDate: number | null;
|
||||
issueDate2: Date;
|
||||
refCommandNo: string;
|
||||
refCommandDate: Date | null | string;
|
||||
createdFullName: string;
|
||||
createdAt: Date;
|
||||
isDate: string;
|
||||
}
|
||||
|
||||
//columns
|
||||
interface Columns {
|
||||
[index: number]: {
|
||||
name: String;
|
||||
align: String;
|
||||
label: String;
|
||||
sortable: Boolean;
|
||||
field: String;
|
||||
headerStyle: String;
|
||||
style: String;
|
||||
};
|
||||
}
|
||||
|
||||
export type { RequestItemsObject, Columns };
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
interface DataProps {
|
||||
row: RequestItemsObject;
|
||||
rowIndex: number;
|
||||
}
|
||||
|
||||
//ข้อมูล
|
||||
interface RequestItemsObject {
|
||||
id: string;
|
||||
point1Total: number;
|
||||
point1: number;
|
||||
point2Total: number;
|
||||
point2: number;
|
||||
pointSumTotal: number;
|
||||
pointSum: number;
|
||||
name: string;
|
||||
date: Date;
|
||||
createdFullName: string;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
//columns
|
||||
interface Columns {
|
||||
[index: number]: {
|
||||
name: String;
|
||||
align: String;
|
||||
label: String;
|
||||
sortable: Boolean;
|
||||
field: String;
|
||||
headerStyle: String;
|
||||
style: String;
|
||||
};
|
||||
}
|
||||
|
||||
export type { RequestItemsObject, Columns, DataProps };
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
//ข้อมูล
|
||||
interface ResponseObject {
|
||||
id: string;
|
||||
issuer: string;
|
||||
detail: string;
|
||||
issueDate: number;
|
||||
issueDate2: Date;
|
||||
refCommandNo: string;
|
||||
refCommandDate: Date | null;
|
||||
createdFullName: string;
|
||||
createdAt: Date;
|
||||
isDate: string;
|
||||
}
|
||||
|
||||
export type { ResponseObject };
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
//ข้อมูล
|
||||
interface ResponseObject {
|
||||
id: string;
|
||||
point1Total: number;
|
||||
point1: number;
|
||||
point2Total: number;
|
||||
point2: number;
|
||||
pointSumTotal: number;
|
||||
pointSum: number;
|
||||
name: string;
|
||||
date: Date;
|
||||
createdFullName: string;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export type { ResponseObject };
|
||||
|
|
@ -41,6 +41,7 @@ const itemsMenu = ref<DataOption[]>([
|
|||
]);
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = ".jpg,.png,.tif,.pic";
|
||||
|
||||
function selectFile() {
|
||||
input.click();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<template>
|
||||
<q-card class="q-pa-sm"> แสดง dashboard สำหรับ สกจ. </q-card>
|
||||
|
||||
</template>
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
|
||||
import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryEmployeeListSDataStore();
|
||||
const { messageError, showLoader, hideLoader, dialogConfirm, success } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
/** Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ประเภทตำเเหน่ง",
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำเเหน่ง",
|
||||
sortable: true,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const rows = ref<DataPerson[]>([]);
|
||||
|
||||
/** ข้อมูุลค้นหา*/
|
||||
const formFilter = reactive<DataFilterPerson>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
rootId: "",
|
||||
year: 0,
|
||||
period: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** function close popup*/
|
||||
function closeModal() {
|
||||
modal.value = false;
|
||||
formFilter.page = 1;
|
||||
formFilter.keyword = "";
|
||||
}
|
||||
|
||||
/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
|
||||
function fetchListPerson() {
|
||||
showLoader();
|
||||
formFilter.rootId = store.rootId;
|
||||
formFilter.period = store.roundMainCode;
|
||||
formFilter.year = store.roundYear;
|
||||
http
|
||||
.post(config.API.salaryListPerson, formFilter)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
closeModal();
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
|
||||
* @param data ข้อมูลคนที่เพิ่ม
|
||||
*/
|
||||
function onClickAddPerson(data: DataPerson) {
|
||||
const body: DataPersonReq = {
|
||||
id: store.groupId,
|
||||
type: store.tabType,
|
||||
...data,
|
||||
};
|
||||
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => {
|
||||
http
|
||||
.post(config.API.salaryPeriodProfile, body)
|
||||
.then(() => {
|
||||
props.fetchData?.();
|
||||
success($q, "เพื่มรายชื่อสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเพิ่มรายชื่อ",
|
||||
"ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** function updatePage*/
|
||||
async function updatePagePagination() {
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/** function updatePageSize*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูลตาม keyword*/
|
||||
function searchData() {
|
||||
formFilter.page = 1;
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
fetchListPerson();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="max-width: 100vw">
|
||||
<Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
v-model="formFilter.keyword"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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 === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
label="เพิ่ม"
|
||||
@click="onClickAddPerson(props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<!-- <q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions> -->
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, success, messageError } = mixin;
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const amount = defineModel<number | null>("amount", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const props = defineProps({
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
const amountRef = ref<any>();
|
||||
|
||||
/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (amountRef.value.validate()) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
amount.value = null;
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
if (amount.value !== null) {
|
||||
const amountString: string = amount.value.toString();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
amount:
|
||||
typeof amount.value === "number"
|
||||
? amount.value
|
||||
: Number(amountString.replace(/,/g, "")),
|
||||
};
|
||||
http
|
||||
.post(config.API.salaryPeriod() + `/change/amount`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 30%">
|
||||
<Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-input
|
||||
ref="amountRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="amount"
|
||||
label="เงินเดือนฐาน"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const separator = ref<any>("cell");
|
||||
/** ปิด Dialog */
|
||||
function closeDialog() {
|
||||
modal.value = !modal.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" full-width>
|
||||
<Header
|
||||
tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="q-pa-md">
|
||||
<q-markup-table
|
||||
:separator="separator"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ</th>
|
||||
<th class="text-center">หนึ่งขั้น</th>
|
||||
<th class="text-center">ครึ่งขั้น</th>
|
||||
<th class="text-center">ไม่ได้รับการเลื่อนขั้น</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ข้อ1 -->
|
||||
<tr>
|
||||
<td class="text-left">1. ผลการประเมินผลการปฎิบัติราชการ</td>
|
||||
<td class="text-center">
|
||||
ผลการประเมินผลในระดับดีเด่น<br />(90-100%)
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ2 -->
|
||||
<tr>
|
||||
<td class="text-left">
|
||||
2. ระยะเวลาการปฎิบัติราชการในรอบครึ่งปี
|
||||
</td>
|
||||
<td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
|
||||
<td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
|
||||
<td class="text-center">
|
||||
น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา ฝึกอบรมดูงาน)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ3 -->
|
||||
<tr>
|
||||
<td class="text-left">3. การลงโทษทางวินัย</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ4 -->
|
||||
<tr>
|
||||
<td class="text-left">4. พักราชการ</td>
|
||||
<td class="text-center">ไม่ถูกสั่งพักราชการ</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ5 -->
|
||||
<tr>
|
||||
<td class="text-left">5. ขาดราชการ</td>
|
||||
<td class="text-center">ไม่ขาดราชการ</td>
|
||||
<td class="text-center">ไม่ขาดราชการ</td>
|
||||
<td class="text-center">ไม่ขาดราชการ</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ6 -->
|
||||
<tr class="vertical-top">
|
||||
<td class="text-left">6. วันลา</td>
|
||||
<td class="text-left">
|
||||
<p class="q-mb-none txt-under">
|
||||
ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5 ครั้ง
|
||||
</p>
|
||||
<p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
|
||||
<p class="text-bold q-mb-none">ยกเว้น</p>
|
||||
<p class="q-mb-none">
|
||||
- ลาอุปสมบท
|
||||
<br />
|
||||
- ลาคลอดบุตร (ไม่เกิน 90 วัน)
|
||||
<br />
|
||||
* กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
|
||||
รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
|
||||
</p>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<p class="txt-under q-mb-none">
|
||||
ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
|
||||
</p>
|
||||
<p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
|
||||
<p class="text-bold q-mb-none">ยกเว้น</p>
|
||||
<p class="q-mb-none">
|
||||
- ลาอุปสมบท
|
||||
<br />
|
||||
- ลาคลอดบุตร (ไม่เกิน 90 วัน)
|
||||
<br />
|
||||
* กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
|
||||
รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
|
||||
</p>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<p class="txt-under q-mb-none">
|
||||
ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
|
||||
</p>
|
||||
<p>(นับเฉพาะการลาป่วยลากิจ)</p>
|
||||
<br />
|
||||
<br />
|
||||
<p class="q-mb-none">
|
||||
* กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
|
||||
รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</q-markup-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.txt-under {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.q-table th {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, defineModel, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryEmployeeListSDataStore();
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const props = defineProps({
|
||||
group: { type: String },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
/** ตัวแปร*/
|
||||
const group = ref<string>("");
|
||||
const groupRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (groupRef.value.validate()) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
group.value = "";
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
groupId: group.value,
|
||||
};
|
||||
http
|
||||
.post(config.API.salaryPeriod() + `/change/group`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
close();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
group.value =
|
||||
props.group === "กลุ่ม1" ? store.groupOp[1].id : store.groupOp[0].id;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 30%">
|
||||
<Header :tittle="`ย้ายกลุ่ม`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-select
|
||||
ref="groupRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="group"
|
||||
label="กลุ่ม"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="store.groupOp.filter((e) => e.name !== props.group)"
|
||||
:rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryEmployeeListSDataStore();
|
||||
const {
|
||||
dialogConfirm,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
|
||||
/**porps*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const props = defineProps({
|
||||
typeLevel: { type: String, required: true },
|
||||
isReserve: { type: Boolean, required: true },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
const type = ref<string>("");
|
||||
const typeRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
|
||||
const isReserve = ref<boolean>(false); // สำรองหรือไม่
|
||||
|
||||
const typeRangeOps = computed(() => {
|
||||
return store.roundMainCode == "OCT"
|
||||
? [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
{ id: "FULLHAFT", name: "1.5 ขั้น" },
|
||||
]
|
||||
: [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
];
|
||||
});
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (typeRef.value.validate()) {
|
||||
// if (
|
||||
// store.roundMainCode === "APR" &&
|
||||
// store.remaining === 0 &&
|
||||
// type.value === "FULL"
|
||||
// ) {
|
||||
// dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
|
||||
// } else {
|
||||
onSubmit();
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
type.value = "";
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
type: type.value,
|
||||
isReserve: isReserve.value,
|
||||
};
|
||||
http
|
||||
.post(config.API.salaryPeriod() + `/change/type`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
type.value = props.typeLevel == 'PENDING' ? "" : props.typeLevel;
|
||||
isReserve.value = props.isReserve;
|
||||
isChange.value = false;
|
||||
}
|
||||
);
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 30%">
|
||||
<Header :tittle="`ย้ายขั้น`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-select
|
||||
ref="typeRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="type"
|
||||
label="เลื่อนขั้น"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="typeRangeOps"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
@update:model-value="isChange = true"
|
||||
/>
|
||||
<!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
|
||||
|
||||
<q-checkbox
|
||||
v-if="type === 'FULL'"
|
||||
keep-color
|
||||
label="สำรอง"
|
||||
dense
|
||||
v-model="isReserve"
|
||||
@update:model-value="isChange = true"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
:disabled="!isChange"
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryEmployeeListSDataStore();
|
||||
const {
|
||||
dialogConfirm,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
|
||||
/**porps*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("id", { required: true });
|
||||
const props = defineProps({
|
||||
isPunish: { type: Boolean, required: true },
|
||||
isSuspension: { type: Boolean, required: true },
|
||||
isAbsent: { type: Boolean, required: true },
|
||||
isLeave: { type: Boolean, required: true },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
const type = ref<string>("");
|
||||
const typeRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
|
||||
const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
|
||||
const isSuspension = ref<boolean>(false); // สำรองหรือไม่
|
||||
const isAbsent = ref<boolean>(false); // สำรองหรือไม่
|
||||
const isLeave = ref<boolean>(false); // สำรองหรือไม่
|
||||
|
||||
const typeRangeOps = computed(() => {
|
||||
return store.roundMainCode == "OCT"
|
||||
? [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
{ id: "FULLHAFT", name: "1.5 ขั้น" },
|
||||
]
|
||||
: [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
];
|
||||
});
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
onSubmit();
|
||||
}
|
||||
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
type.value = "";
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
isPunish: isPunish.value,
|
||||
isSuspension: isSuspension.value,
|
||||
isAbsent: isAbsent.value,
|
||||
isLeave: isLeave.value,
|
||||
};
|
||||
http
|
||||
.put(config.API.salaryProperty(profileId.value), body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
isPunish.value = props.isPunish;
|
||||
isSuspension.value = props.isSuspension;
|
||||
isAbsent.value = props.isAbsent;
|
||||
isLeave.value = props.isLeave;
|
||||
}
|
||||
);
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 20%">
|
||||
<Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm column">
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="ไม่ถูกลงโทษทางวินัย"
|
||||
dense
|
||||
v-model="isPunish"
|
||||
/>
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="ไม่ถูกพักราชการ"
|
||||
dense
|
||||
v-model="isSuspension"
|
||||
/>
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="ไม่ขาดราชการ"
|
||||
dense
|
||||
v-model="isAbsent"
|
||||
/>
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="วันลาไม่เกิน"
|
||||
dense
|
||||
v-model="isLeave"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
|
||||
|
||||
const sendStep = ref<number>(1);
|
||||
const fileUpload = ref<any>(null);
|
||||
const document = ref<string>("");
|
||||
/**
|
||||
* function อัปโหลดไฟล์เจ้าหน้าที่
|
||||
* @param event file
|
||||
*/
|
||||
async function uploadFile(event: any) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const selectedFile = event;
|
||||
const formdata = new FormData();
|
||||
formdata.append("Document", selectedFile);
|
||||
// await http
|
||||
// .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
|
||||
// .then(async () => {
|
||||
// await fecthInsigniaByOc(
|
||||
// round.value,
|
||||
// DataStore.agency,
|
||||
// "officer",
|
||||
// tab.value
|
||||
// );
|
||||
// success($q, "อัปโหลดไฟล์สำเร็จ");
|
||||
// fileUpload.value = null;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// }),
|
||||
},
|
||||
"ยืนยันการอัปโหลดไฟล์",
|
||||
"ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
function saveReccommend() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
sendStep.value = sendStep.value + 1;
|
||||
modalRecommend.value = false;
|
||||
},
|
||||
"ยืนยันการ" + titleRecommend.value,
|
||||
"ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
function sendToDirector(msg: string) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
sendStep.value = sendStep.value == 3 ? 6 : sendStep.value + 1;
|
||||
},
|
||||
"ยืนยันการ" + msg,
|
||||
"ต้องการยืนยันการ" + msg + "หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
const modalRecommend = ref<boolean>(false);
|
||||
const titleRecommend = ref<string>("");
|
||||
function sendAndRecommend(title: string) {
|
||||
modalRecommend.value = true;
|
||||
titleRecommend.value = title;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<q-toolbar>
|
||||
<q-file
|
||||
v-if="sendStep == 1"
|
||||
bg-color="white"
|
||||
clearable
|
||||
outlined
|
||||
dense
|
||||
v-model="fileUpload"
|
||||
accept=".pdf"
|
||||
label="อัปโหลดไฟล์"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon color="light-blue" name="attach_file" />
|
||||
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
color="light-blue"
|
||||
icon="upload"
|
||||
@click="uploadFile(fileUpload)"
|
||||
v-if="fileUpload !== null"
|
||||
/>
|
||||
<div v-if="document">
|
||||
<q-btn
|
||||
dense
|
||||
color="primary"
|
||||
icon-right="mdi-download"
|
||||
label="ดาวน์โหลดไฟล์"
|
||||
outline
|
||||
:href="document"
|
||||
target="_blank"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
|
||||
<q-toolbar-title>
|
||||
<!-- Toolbar -->
|
||||
</q-toolbar-title>
|
||||
<div>
|
||||
<!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
|
||||
<q-btn
|
||||
v-if="sendStep == 1"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
|
||||
@click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
|
||||
<q-btn
|
||||
v-if="sendStep == 2"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ยืนยันและส่งเอกสารให้ สกจ."
|
||||
@click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.')"
|
||||
/>
|
||||
|
||||
<!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
|
||||
<q-btn
|
||||
v-if="sendStep == 3"
|
||||
unelevated
|
||||
color="green"
|
||||
label="ยืนยันการตรวจสอบ"
|
||||
@click="sendToDirector('ยืนยันการตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
|
||||
<q-btn
|
||||
v-if="sendStep == 3"
|
||||
class="q-ml-sm"
|
||||
unelevated
|
||||
color="warning"
|
||||
label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
|
||||
@click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
|
||||
<q-btn
|
||||
v-if="sendStep == 4"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
|
||||
@click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-if="sendStep > 4"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ส่งไปออกคำสั่ง"
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
<DialogPopupReason
|
||||
v-model:modal="modalRecommend"
|
||||
:title="titleRecommend"
|
||||
label="คำแนะนำ"
|
||||
:savaForm="saveReccommend"
|
||||
textReport=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
492
src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
Normal file
492
src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
Normal file
|
|
@ -0,0 +1,492 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
|
||||
/** importType*/
|
||||
import type { DataOption } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
import type {
|
||||
DataPeriodLatest,
|
||||
DataPeriod,
|
||||
} from "@/modules/13_salary/interface/response/SalaryList";
|
||||
|
||||
/** 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";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryEmployeeListSDataStore();
|
||||
const { messageError, showLoader, hideLoader } = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const props = defineProps({
|
||||
periodLatest: { type: Object as () => DataPeriodLatest, require: true },
|
||||
});
|
||||
|
||||
const total = ref<number>();
|
||||
const splitterModel = ref<number>(13);
|
||||
const rows = ref<DataPeriod[]>([]);
|
||||
|
||||
/** itemsTab กลุ่ม*/
|
||||
const itemsTabGroup = ref([
|
||||
{
|
||||
lable: "กลุ่ม 1",
|
||||
name: "group1",
|
||||
},
|
||||
{
|
||||
lable: "กลุ่ม 2",
|
||||
name: "group2",
|
||||
},
|
||||
]);
|
||||
|
||||
/** itemsTab ขั้น*/
|
||||
const itemsTabType = computed(() => {
|
||||
return store.roundMainCode === "OCT"
|
||||
? [
|
||||
{
|
||||
lable: "รายชื่อคนครอง",
|
||||
name: "tab1",
|
||||
type: "PENDING",
|
||||
},
|
||||
{
|
||||
lable: "รายชื่อผู้เกษียณอายุราชการ",
|
||||
name: "tab5",
|
||||
type: "RETIRE",
|
||||
},
|
||||
{
|
||||
lable: "1 ขั้น",
|
||||
name: "tab2",
|
||||
type: "FULL",
|
||||
},
|
||||
{
|
||||
lable: "0.5 ขั้น",
|
||||
name: "tab3",
|
||||
type: "HAFT",
|
||||
},
|
||||
{
|
||||
lable: "1.5 ขั้น",
|
||||
name: "tab4",
|
||||
type: "FULLHAFT",
|
||||
},
|
||||
{
|
||||
lable: "ไม่ได้เลื่อน",
|
||||
name: "tab4",
|
||||
type: "NONE",
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
lable: "รายชื่อคนครอง",
|
||||
name: "tab1",
|
||||
type: "PENDING",
|
||||
},
|
||||
{
|
||||
lable: "1 ขั้น",
|
||||
name: "tab2",
|
||||
type: "FULL",
|
||||
},
|
||||
{
|
||||
lable: "0.5 ขั้น",
|
||||
name: "tab3",
|
||||
type: "HAFT",
|
||||
},
|
||||
{
|
||||
lable: "ไม่ได้เลื่อน",
|
||||
name: "tab4",
|
||||
type: "NONE",
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
/** itemsCard*/
|
||||
const itemsCard = ref([
|
||||
{
|
||||
lable: "จำนวนคนทั้งหมด",
|
||||
name: "group1",
|
||||
color: "secondary",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "15% ของจำนวนคน",
|
||||
name: "group2",
|
||||
color: "light-blue-4",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "เลือกไปแล้ว",
|
||||
name: "group2",
|
||||
color: "primary",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "คงเหลือโควตา",
|
||||
name: "group2",
|
||||
color: "indigo-6",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "สำรอง",
|
||||
name: "group2",
|
||||
color: "red-6",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "จำนวนเงินคนครองปัจจุบัน",
|
||||
name: "group1",
|
||||
color: "secondary",
|
||||
total: 0,
|
||||
},
|
||||
|
||||
{
|
||||
lable: "วงเงิน 6%",
|
||||
name: "group2",
|
||||
color: "light-blue-4",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "ยอดเงินที่ใช้ไป",
|
||||
name: "group2",
|
||||
color: "primary",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "วงเงิน 6%-ยอดเงินที่ใช้ไป",
|
||||
name: "group2",
|
||||
color: "indigo-6",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "ใช้ไปเท่าไหร่",
|
||||
name: "group2",
|
||||
color: "blue-6",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "เหลือเท่าไหร่",
|
||||
name: "group2",
|
||||
color: "green-6",
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
lable: "สำรอง",
|
||||
name: "group2",
|
||||
color: "red-6",
|
||||
total: 0,
|
||||
},
|
||||
]);
|
||||
|
||||
/** ข้อมูลค้นหารายชื่อคยขึ้นเงินเดือน*/
|
||||
const formFilter = reactive<DataFilter>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
type: store.tabType,
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลจำนวนโควต้า
|
||||
* @param id กลุ่ม
|
||||
*/
|
||||
function fetchDataQuota(id: string) {
|
||||
// showLoader();
|
||||
http
|
||||
.get(config.API.salaryListPeriodQuota(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
store.remaining = data.remaining;
|
||||
itemsCard.value[0].total = data.total;
|
||||
itemsCard.value[1].total = data.fifteenPercent;
|
||||
itemsCard.value[2].total = data.chosen;
|
||||
itemsCard.value[3].total = data.remaining;
|
||||
itemsCard.value[4].total = data.totalBackup;
|
||||
|
||||
itemsCard.value[5].total = data.currentAmount;
|
||||
itemsCard.value[6].total = data.sixPercentAmount;
|
||||
itemsCard.value[7].total = data.spentAmount;
|
||||
itemsCard.value[8].total = data.sixPercentSpentAmount;
|
||||
itemsCard.value[9].total = data.useAmount;
|
||||
itemsCard.value[10].total = data.remainingAmount;
|
||||
|
||||
itemsCard.value[11].total = data.totalBackup;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลรายชื่อ
|
||||
* @param id กลุ่ม
|
||||
*/
|
||||
function fetchDataPeriod(id: string) {
|
||||
rows.value = [];
|
||||
const formData = {
|
||||
page: formFilter.page.toString(),
|
||||
pageSize: formFilter.pageSize.toString(),
|
||||
keyword: formFilter.keyword,
|
||||
type: store.tabType === "RETIRE" ? "" : store.tabType,
|
||||
isRetire: store.tabType === "RETIRE" ? true : null,
|
||||
};
|
||||
|
||||
http
|
||||
.put(config.API.salaryListPeriodORG(id), formData)
|
||||
.then((res) => {
|
||||
rows.value = res.data.result.data;
|
||||
total.value = res.data.result.total;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**function เปลี่ยนกลุ่ม*/
|
||||
function changeTabGroup() {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = 10;
|
||||
formFilter.keyword = "";
|
||||
store.tabType = "PENDING";
|
||||
props.periodLatest &&
|
||||
store.fetchPeriodLatest(props?.periodLatest, store.tabGroup);
|
||||
store.groupId && fetchDataQuota(store.groupId);
|
||||
store.groupId && fetchDataPeriod(store.groupId);
|
||||
splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
|
||||
}
|
||||
|
||||
/**function เปลี่ยนขั้น*/
|
||||
function changeTabType() {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = 10;
|
||||
formFilter.keyword = "";
|
||||
store.groupId && fetchDataPeriod(store.groupId);
|
||||
}
|
||||
|
||||
/** function เรียกข้อมูลรายชื่ออีกครั้ง*/
|
||||
function fetchDataPeriodNew() {
|
||||
store.groupId && fetchDataPeriod(store.groupId);
|
||||
store.groupId && fetchDataQuota(store.groupId);
|
||||
}
|
||||
|
||||
function onClickDownload(data: DataOption) {
|
||||
console.log(data);
|
||||
// showLoader();
|
||||
// http
|
||||
// .get(config.API.salaryReportByid(salaryId.value))
|
||||
// .then((res) => {
|
||||
// const dataList = res.data.result;
|
||||
// genReportXLSX(dataList, "อัตราเงินเดือน");
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
const modalDialogInfoCriteria = ref<boolean>(false);
|
||||
onMounted(async () => {
|
||||
await fetchDataQuota(store.groupId);
|
||||
await fetchDataPeriod(store.groupId);
|
||||
splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Tab กลุ่ม -->
|
||||
<!-- <q-tabs
|
||||
v-model="store.tabGroup"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="primary"
|
||||
active-class="bg-teal-1"
|
||||
indicator-color="primary"
|
||||
align="left"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in itemsTabGroup"
|
||||
:key="index"
|
||||
@click="changeTabGroup"
|
||||
>
|
||||
<q-tab :name="item.name" :label="item.lable" />
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
icon="info"
|
||||
class="q-mr-sm"
|
||||
label="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
|
||||
@click="() => (modalDialogInfoCriteria = true)"
|
||||
/>
|
||||
</q-tabs> -->
|
||||
<!-- <q-separator /> -->
|
||||
<q-tab-panels v-model="store.tabGroup" animated class="bg-grey-1">
|
||||
<q-tab-panel
|
||||
style="padding: 0px"
|
||||
v-for="(item, index) in itemsTabGroup"
|
||||
:key="index"
|
||||
:name="item.name"
|
||||
>
|
||||
<!-- Card โควต้า -->
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div
|
||||
:class="`row col-12 ${
|
||||
store.roundMainCode === 'APR' ? `q-col-gutter-md` : `q-gutter-md`
|
||||
} items-start`"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in store.roundMainCode === 'APR'
|
||||
? itemsCard.slice(0, 5)
|
||||
: store.roundMainCode === 'OCT'
|
||||
? itemsCard.slice(5, 12)
|
||||
: itemsCard"
|
||||
:key="index"
|
||||
:class="
|
||||
store.roundMainCode === 'APR'
|
||||
? 'col-6 col-sm-4 col-md-3 col-lg-2'
|
||||
: 'col-3'
|
||||
"
|
||||
>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="col">
|
||||
<div class="">{{ item.lable }}</div>
|
||||
</div>
|
||||
|
||||
<div :class="`text-${item.color} text-bold`">
|
||||
{{ item.total ? item.total.toLocaleString() : 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="row col justify-end self-center">
|
||||
<q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="(item, index) in store.roundMainCode === 'APR'
|
||||
? store.itemDownloadApr
|
||||
: store.roundMainCode === 'OCT'
|
||||
? store.itemDownloadOct
|
||||
: []"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onClickDownload(item)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
<!-- <q-btn color="blue-5" icon="download" label="ดาวน์โหลด" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
|
||||
<!-- Tab ขั้น -->
|
||||
<q-card flat bordered>
|
||||
<q-splitter v-model="splitterModel" disable>
|
||||
<template v-slot:before>
|
||||
<q-tabs
|
||||
v-model="store.tabType"
|
||||
vertical
|
||||
dense
|
||||
class="text-grey-black"
|
||||
active-color="blue-5"
|
||||
active-class="bg-blue-1"
|
||||
indicator-color="blue-5"
|
||||
align="left"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in itemsTabType"
|
||||
:key="index"
|
||||
class="row"
|
||||
:style="
|
||||
store.roundMainCode === 'OCT'
|
||||
? index === 1
|
||||
? 'border-bottom: 1px solid #c8d3db;'
|
||||
: ''
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<q-tab
|
||||
class="col-12"
|
||||
style="justify-content: left"
|
||||
:name="item.type"
|
||||
:label="item.lable"
|
||||
@click="changeTabType()"
|
||||
/>
|
||||
</div>
|
||||
</q-tabs>
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-tab-panels
|
||||
v-model="store.tabType"
|
||||
animated
|
||||
swipeable
|
||||
vertical
|
||||
transition-prev="jump-up"
|
||||
transition-next="jump-up"
|
||||
>
|
||||
<q-tab-panel
|
||||
class="q-pa-md"
|
||||
v-for="(item, index) in itemsTabType"
|
||||
:key="index"
|
||||
:name="item.type"
|
||||
>
|
||||
<TableTabType1
|
||||
v-if="index === 0"
|
||||
:rows="rows"
|
||||
v-model:maxPage="maxPage"
|
||||
v-model:formFilter="formFilter"
|
||||
:fetchDataTable="fetchDataPeriodNew"
|
||||
:total="total"
|
||||
/>
|
||||
<TableTabType2
|
||||
v-else
|
||||
:rows="rows"
|
||||
v-model:maxPage="maxPage"
|
||||
v-model:formFilter="formFilter"
|
||||
:fetchDataTable="fetchDataPeriodNew"
|
||||
:total="total"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</q-card>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
||||
<DialogInfoCriteria v-model:modal="modalDialogInfoCriteria" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-card {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.q-tabs--vertical .q-tab {
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,493 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAddPerson from "@/modules/13_salary/components/SalaryEmployeeLists//DialogAddPerson.vue";
|
||||
import DialogFormEdit from "@/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue";
|
||||
import DialogMoveGroup from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue";
|
||||
import DialogMoveLevel from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryEmployeeListSDataStore();
|
||||
const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
||||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const props = defineProps({
|
||||
rows: { type: Array },
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posNo",
|
||||
align: "left",
|
||||
label: "ตำแหน่งเลขที่",
|
||||
sortable: true,
|
||||
field: "posNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ตำแหน่งประเภท",
|
||||
sortable: false,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
sortable: false,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posExecutive",
|
||||
align: "left",
|
||||
label: "ตำแหน่งทางการบริหาร",
|
||||
sortable: false,
|
||||
field: "posExecutive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "amount",
|
||||
align: "left",
|
||||
label: "เงินเดือนฐาน",
|
||||
sortable: false,
|
||||
field: "amount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "amountUse",
|
||||
align: "left",
|
||||
label: "จำนวนเงินที่ใช้เลื่อน",
|
||||
sortable: false,
|
||||
field: "amountUse",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "positionSalaryAmount",
|
||||
align: "left",
|
||||
label: "เงินเดือนหลังเลื่อน",
|
||||
sortable: false,
|
||||
field: "positionSalaryAmount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "isRetired",
|
||||
align: "center",
|
||||
label: "เกษียณอายุ",
|
||||
sortable: false,
|
||||
field: "isRetired",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"posNo",
|
||||
"fullName",
|
||||
"position",
|
||||
"posType",
|
||||
"posLevel",
|
||||
"posExecutive",
|
||||
"amount",
|
||||
"amountUse",
|
||||
"positionSalaryAmount",
|
||||
"isRetired",
|
||||
]);
|
||||
|
||||
/** modalDialog*/
|
||||
const modalDialogAddPerson = ref<boolean>(false);
|
||||
const modalDialogForm = ref<boolean>(false);
|
||||
const modalDialogMoveGroup = ref<boolean>(false);
|
||||
const modalDialogMoveLeve = ref<boolean>(false);
|
||||
|
||||
const profileId = ref<string>("");
|
||||
const amount = ref<number>(0);
|
||||
|
||||
/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
|
||||
function onClickAddPerson() {
|
||||
modalDialogAddPerson.value = !modalDialogAddPerson.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup แก้ไขเงินเดือน
|
||||
* @param id profileId
|
||||
* @param amountSalary จำนวนเงินเดือน
|
||||
*
|
||||
*/
|
||||
function onClickEdit(id: string, amountSalary: number) {
|
||||
profileId.value = id;
|
||||
amount.value = amountSalary;
|
||||
modalDialogForm.value = !modalDialogForm.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup ย้ายกลุ่ม
|
||||
* @param id profileId
|
||||
*
|
||||
*/
|
||||
function onClickMovieGroup(id: string) {
|
||||
profileId.value = id;
|
||||
modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
|
||||
}
|
||||
|
||||
const typeLevel = ref<string>("");
|
||||
const isReserve = ref<boolean>(false);
|
||||
/**
|
||||
* function openPopup ย้ายกขั้น
|
||||
* @param id profileId
|
||||
*
|
||||
*/
|
||||
function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
|
||||
profileId.value = id;
|
||||
modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
|
||||
typeLevel.value = typeVal;
|
||||
isReserve.value = isReserveVal;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยืนยันการลบรายชื่อ
|
||||
* @param id profileId
|
||||
*/
|
||||
function onClickDelete(id: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.salaryListPeriodProfileById(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
props.fetchDataTable?.();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** function updatePageTable*/
|
||||
function updatePagePagination() {
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** function updatePageSizeTable*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.value.page = 1;
|
||||
formFilter.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูล Table*/
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0px">
|
||||
<q-btn
|
||||
v-if="!store.isClosedRound"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
@click="onClickAddPerson"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
for="#select"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
|
||||
/>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
|
||||
:rows="props.rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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"
|
||||
:class="
|
||||
store.tabType !== 'RETIRE'
|
||||
? props.row.isNext == true
|
||||
? 'text-red'
|
||||
: ''
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1 +
|
||||
(store.tabType == "FULL" && props.row.isReserve == true
|
||||
? " (สำรอง)"
|
||||
: "")
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posNo'">
|
||||
{{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'amount'">
|
||||
{{
|
||||
props.row.amount !== null ? props.row.amount.toLocaleString() : ""
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'amountUse'">
|
||||
{{
|
||||
props.row.amountUse !== null
|
||||
? props.row.amountUse.toLocaleString()
|
||||
: ""
|
||||
}}
|
||||
{{
|
||||
props.row.amountSpecial > 0
|
||||
? `(${props.row.amountSpecial.toLocaleString()})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'positionSalaryAmount'">
|
||||
{{
|
||||
props.row.positionSalaryAmount !== null
|
||||
? props.row.positionSalaryAmount.toLocaleString()
|
||||
: ""
|
||||
}}
|
||||
{{
|
||||
props.row.amountSpecial > 0
|
||||
? `(${props.row.amountSpecial.toLocaleString()})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="
|
||||
col.name === 'isRetired' && store.roundMainCode === 'OCT'
|
||||
"
|
||||
>
|
||||
<q-icon
|
||||
name="check"
|
||||
color="primary"
|
||||
size="24px"
|
||||
v-if="props.row.isRetired"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
v-if="!store.isClosedRound"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
size="12px"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list dense style="min-width: 150px">
|
||||
<q-item
|
||||
v-for="(item, index) in store.itemMenu.filter((x:any)=>x.type != 'properties')"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
item.type === 'edit'
|
||||
? onClickEdit(props.row.id, props.row.amount)
|
||||
: item.type === 'moveGroup'
|
||||
? onClickMovieGroup(props.row.id)
|
||||
: item.type === 'moveLevel'
|
||||
? onClickMoveLevel(
|
||||
props.row.id,
|
||||
props.row.type,
|
||||
props.row.isReserve
|
||||
)
|
||||
: item.type === 'delete'
|
||||
? onClickDelete(props.row.id)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<q-icon
|
||||
:color="item.color"
|
||||
size="17px"
|
||||
:name="item.icon"
|
||||
/>
|
||||
<div class="q-pl-md">{{ item.label }}</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ props.total }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<DialogAddPerson
|
||||
v-model:modal="modalDialogAddPerson"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
|
||||
<DialogFormEdit
|
||||
v-model:modal="modalDialogForm"
|
||||
v-model:profileId="profileId"
|
||||
v-model:amount="amount"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveGroup
|
||||
v-model:modal="modalDialogMoveGroup"
|
||||
v-model:profileId="profileId"
|
||||
:group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveLevel
|
||||
:typeLevel="typeLevel"
|
||||
:isReserve="isReserve"
|
||||
v-model:modal="modalDialogMoveLeve"
|
||||
v-model:profileId="profileId"
|
||||
:fetchData="props.fetchDataTable"
|
||||
:type="store.tabType"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,589 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAddPerson from "@/modules/13_salary/components/SalaryEmployeeLists//DialogAddPerson.vue";
|
||||
import DialogFormEdit from "@/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue";
|
||||
import DialogMoveGroup from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue";
|
||||
import DialogMoveLevel from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue";
|
||||
import DialogProperties from "@/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryEmployeeListSDataStore();
|
||||
const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
||||
useCounterMixin();
|
||||
|
||||
/** Props*/
|
||||
const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
||||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const props = defineProps({
|
||||
rows: { type: Array },
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
},
|
||||
maxPage: {
|
||||
type: Number,
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ตำแหน่งประเภท",
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posExecutive",
|
||||
align: "left",
|
||||
label: "ตำแหน่งทางการบริหาร",
|
||||
sortable: true,
|
||||
field: "posExecutive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
field: "position",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
field: "posLevel",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "amount",
|
||||
align: "left",
|
||||
label: "เงินเดือน",
|
||||
field: "amount",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organization",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "organization",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "result",
|
||||
align: "center",
|
||||
label: "ผลการประเมินฯ",
|
||||
sortable: false,
|
||||
field: "result",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "duration",
|
||||
align: "center",
|
||||
label: "ระยะเวลาการปฏิบัติราชการในรอบครึ่งปี",
|
||||
sortable: false,
|
||||
field: "duration",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "isPunish",
|
||||
align: "center",
|
||||
label: "ไม่ถูกลงโทษทางวินัย",
|
||||
sortable: false,
|
||||
field: "isPunish",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "isSuspension",
|
||||
align: "center",
|
||||
label: "ไม่ถูกพักราชการ",
|
||||
sortable: false,
|
||||
field: "isSuspension",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "isAbsent",
|
||||
align: "center",
|
||||
label: "ไม่ขาดราชการ",
|
||||
sortable: false,
|
||||
field: "isAbsent",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "isLeave",
|
||||
align: "center",
|
||||
label: "วันลาไม่เกิน",
|
||||
sortable: false,
|
||||
field: "isLeave",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"fullName",
|
||||
"posType",
|
||||
"posExecutive",
|
||||
"position",
|
||||
"posLevel",
|
||||
"amount",
|
||||
"organization",
|
||||
"result",
|
||||
"duration",
|
||||
"isPunish",
|
||||
"isSuspension",
|
||||
"isAbsent",
|
||||
"isLeave",
|
||||
]);
|
||||
|
||||
/** modalDialog*/
|
||||
const modalDialogAddPerson = ref<boolean>(false);
|
||||
const modalDialogForm = ref<boolean>(false);
|
||||
const modalDialogMoveGroup = ref<boolean>(false);
|
||||
const modalDialogMoveLeve = ref<boolean>(false);
|
||||
const modalDialogProperties = ref<boolean>(false);
|
||||
|
||||
/** ตัวแปร*/
|
||||
const profileId = ref<string>("");
|
||||
const amount = ref<number>(0);
|
||||
const isPunish = ref<boolean>(false)
|
||||
const isSuspension = ref<boolean>(false)
|
||||
const isAbsent = ref<boolean>(false)
|
||||
const isLeave = ref<boolean>(false)
|
||||
/**
|
||||
* function ยืนยันการลบรายชื่อ
|
||||
* @param id profileId
|
||||
*/
|
||||
function onClickDelete(id: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.salaryListPeriodProfileById(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
props.fetchDataTable?.();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
|
||||
function onClickAddPerson() {
|
||||
modalDialogAddPerson.value = !modalDialogAddPerson.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup แก้ไขเงินเดือน
|
||||
* @param id profileId
|
||||
* @param amountSalary จำนวนเงินเดือน
|
||||
*
|
||||
*/
|
||||
function onClickEdit(id: string, amountSalary: number) {
|
||||
profileId.value = id;
|
||||
amount.value = amountSalary;
|
||||
modalDialogForm.value = !modalDialogForm.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup ย้ายกลุ่ม
|
||||
* @param id profileId
|
||||
*
|
||||
*/
|
||||
function onClickMovieGroup(id: string) {
|
||||
profileId.value = id;
|
||||
modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
|
||||
}
|
||||
|
||||
const typeLevel = ref<string>("");
|
||||
const isReserve = ref<boolean>(false);
|
||||
/**
|
||||
* function openPopup ย้ายกขั้น
|
||||
* @param id profileId
|
||||
*
|
||||
*/
|
||||
function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
|
||||
profileId.value = id;
|
||||
modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
|
||||
typeLevel.value = typeVal;
|
||||
isReserve.value = isReserveVal;
|
||||
}
|
||||
|
||||
/** function updatePageTable*/
|
||||
function updatePagePagination() {
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** function updatePageSizeTable*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.value.page = 1;
|
||||
formFilter.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูล Table*/
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
function onProperties(data:any){
|
||||
console.log(data)
|
||||
modalDialogProperties.value = true
|
||||
profileId.value = data.id
|
||||
isPunish.value = data.isPunish
|
||||
isSuspension.value = data.isSuspension
|
||||
isAbsent.value = data.isAbsent
|
||||
isLeave.value = data.isLeave
|
||||
}
|
||||
/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0px">
|
||||
<q-btn v-if="!store.isClosedRound" flat round dense icon="add" @click="onClickAddPerson">
|
||||
<q-tooltip>เพิ่ม </q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
for="#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"
|
||||
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="props.rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ 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 in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'organization'" class="table_ellipsis">
|
||||
<div
|
||||
v-if="
|
||||
props.row.child4 === null &&
|
||||
props.row.child3 === null &&
|
||||
props.row.child2 === null &&
|
||||
props.row.child1 === null &&
|
||||
props.row.root === null
|
||||
"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
{{
|
||||
`${props.row.child4 ? props.row.child4 + "/" : ""}${
|
||||
props.row.child3 ? props.row.child3 + "/" : ""
|
||||
}${props.row.child2 ? props.row.child2 + "-" : ""}${
|
||||
props.row.child1 ? props.row.child1 + "/" : ""
|
||||
}${props.row.root ? props.row.root : ""}`
|
||||
}}
|
||||
</div>
|
||||
<!-- <div v-else-if="col.name === 'isResult'">
|
||||
<q-checkbox
|
||||
disable
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="props.row.isResult"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'isDuration'">
|
||||
<q-checkbox
|
||||
disable
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="props.row.isDuration"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'isPunish'">
|
||||
<q-checkbox
|
||||
disable
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="props.row.isPunish"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'isRetired'">
|
||||
<q-checkbox
|
||||
disable
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="props.row.isRetired"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'isRetired2'">
|
||||
<q-checkbox
|
||||
disable
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="props.row.isRetired2"
|
||||
false
|
||||
/>
|
||||
</div> -->
|
||||
<div v-else-if="col.name == 'isPunish'">
|
||||
<q-icon
|
||||
v-if="props.row.isPunish !== null"
|
||||
:name="props.row.isPunish ? 'done' : 'close'"
|
||||
:color="props.row.isPunish ? 'primary' : 'red'"
|
||||
size="24px"
|
||||
/>
|
||||
<div v-else-if="props.row.isPunish == null">
|
||||
{{ props.row.isPunish == null ? '-':''}}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'isSuspension'">
|
||||
<q-icon
|
||||
v-if="props.row.isSuspension !== null"
|
||||
:name="props.row.isSuspension ? 'done' : 'close'"
|
||||
:color="props.row.isSuspension ? 'primary' : 'red'"
|
||||
size="24px"
|
||||
/>
|
||||
<div v-else-if="props.row.isSuspension == null">
|
||||
{{ props.row.isSuspension == null ? '-':''}}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'isAbsent'">
|
||||
<q-icon
|
||||
v-if="props.row.isAbsent !== null"
|
||||
:name="props.row.isAbsent ? 'done' : 'close'"
|
||||
:color="props.row.isAbsent ? 'primary' : 'red'"
|
||||
size="24px"
|
||||
/>
|
||||
<div v-else-if="props.row.isAbsent == null">
|
||||
{{ props.row.isAbsent == null ? '-':''}}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'amount'">
|
||||
{{Number(props.row.amount).toLocaleString()}}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'isLeave'">
|
||||
<q-icon
|
||||
v-if="props.row.isLeave !== null"
|
||||
:name="props.row.isLeave ? 'done' : 'close'"
|
||||
:color="props.row.isLeave ? 'primary' : 'red'"
|
||||
size="24px"
|
||||
/>
|
||||
<div v-else-if="props.row.isLeave == null">
|
||||
{{ props.row.isLeave == null ? '-':''}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
v-if="!store.isClosedRound"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
size="12px"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list dense style="min-width: 150px">
|
||||
<q-item
|
||||
v-for="(item, index) in store.itemMenu"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
item.type === 'edit'
|
||||
? onClickEdit(props.row.id, props.row.amount)
|
||||
: item.type === 'moveGroup'
|
||||
? onClickMovieGroup(props.row.id)
|
||||
: item.type === 'moveLevel'
|
||||
? onClickMoveLevel(
|
||||
props.row.id,
|
||||
props.row.type,
|
||||
props.row.isReserve
|
||||
)
|
||||
: item.type === 'delete'
|
||||
? onClickDelete(props.row.id)
|
||||
: item.type === 'properties'
|
||||
? onProperties(props.row)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<q-icon
|
||||
:color="item.color"
|
||||
size="17px"
|
||||
:name="item.icon"
|
||||
/>
|
||||
<div class="q-pl-md">{{ item.label }}</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ props.total }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<DialogAddPerson
|
||||
v-model:modal="modalDialogAddPerson"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
|
||||
<DialogFormEdit
|
||||
v-model:modal="modalDialogForm"
|
||||
v-model:profileId="profileId"
|
||||
v-model:amount="amount"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveGroup
|
||||
v-model:modal="modalDialogMoveGroup"
|
||||
v-model:profileId="profileId"
|
||||
:group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveLevel
|
||||
:typeLevel="typeLevel"
|
||||
:isReserve="isReserve"
|
||||
v-model:modal="modalDialogMoveLeve"
|
||||
v-model:profileId="profileId"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogProperties
|
||||
v-model:modal="modalDialogProperties"
|
||||
v-model:id="profileId"
|
||||
:is-punish="isPunish"
|
||||
:is-suspension="isSuspension"
|
||||
:is-absent="isAbsent"
|
||||
:is-leave="isLeave"
|
||||
:fetch-data="props.fetchDataTable"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<template>
|
||||
<q-card class="q-pa-sm"> แสดง dashboard สำหรับ สกจ. </q-card>
|
||||
|
||||
</template>
|
||||
<template>
|
||||
<q-card class="q-pa-sm"> แสดง dashboard สำหรับ สกจ. </q-card>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,316 +1,316 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
|
||||
import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const { messageError, showLoader, hideLoader, dialogConfirm, success } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
/** Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ประเภทตำเเหน่ง",
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำเเหน่ง",
|
||||
sortable: true,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const rows = ref<DataPerson[]>([]);
|
||||
|
||||
/** ข้อมูุลค้นหา*/
|
||||
const formFilter = reactive<DataFilterPerson>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
rootId: "",
|
||||
year: 0,
|
||||
period: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** function close popup*/
|
||||
function closeModal() {
|
||||
modal.value = false;
|
||||
formFilter.page = 1;
|
||||
formFilter.keyword = "";
|
||||
}
|
||||
|
||||
/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
|
||||
function fetchListPerson() {
|
||||
showLoader();
|
||||
formFilter.rootId = store.rootId;
|
||||
formFilter.period = store.roundMainCode;
|
||||
formFilter.year = store.roundYear;
|
||||
http
|
||||
.post(config.API.salaryListPerson, formFilter)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
closeModal();
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
|
||||
* @param data ข้อมูลคนที่เพิ่ม
|
||||
*/
|
||||
function onClickAddPerson(data: DataPerson) {
|
||||
const body: DataPersonReq = {
|
||||
id: store.groupId,
|
||||
type: store.tabType,
|
||||
...data,
|
||||
};
|
||||
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => {
|
||||
http
|
||||
.post(config.API.salaryPeriodProfile, body)
|
||||
.then(() => {
|
||||
props.fetchData?.();
|
||||
success($q, "เพื่มรายชื่อสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเพิ่มรายชื่อ",
|
||||
"ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** function updatePage*/
|
||||
async function updatePagePagination() {
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/** function updatePageSize*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูลตาม keyword*/
|
||||
function searchData() {
|
||||
formFilter.page = 1;
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
fetchListPerson();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="max-width: 100vw">
|
||||
<Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
v-model="formFilter.keyword"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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 === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
label="เพิ่ม"
|
||||
@click="onClickAddPerson(props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<!-- <q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions> -->
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
|
||||
import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const { messageError, showLoader, hideLoader, dialogConfirm, success } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
/** Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ประเภทตำเเหน่ง",
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำเเหน่ง",
|
||||
sortable: true,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const rows = ref<DataPerson[]>([]);
|
||||
|
||||
/** ข้อมูุลค้นหา*/
|
||||
const formFilter = reactive<DataFilterPerson>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
rootId: "",
|
||||
year: 0,
|
||||
period: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** function close popup*/
|
||||
function closeModal() {
|
||||
modal.value = false;
|
||||
formFilter.page = 1;
|
||||
formFilter.keyword = "";
|
||||
}
|
||||
|
||||
/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
|
||||
function fetchListPerson() {
|
||||
showLoader();
|
||||
formFilter.rootId = store.rootId;
|
||||
formFilter.period = store.roundMainCode;
|
||||
formFilter.year = store.roundYear;
|
||||
http
|
||||
.post(config.API.salaryListPerson, formFilter)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
closeModal();
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
|
||||
* @param data ข้อมูลคนที่เพิ่ม
|
||||
*/
|
||||
function onClickAddPerson(data: DataPerson) {
|
||||
const body: DataPersonReq = {
|
||||
id: store.groupId,
|
||||
type: store.tabType,
|
||||
...data,
|
||||
};
|
||||
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => {
|
||||
http
|
||||
.post(config.API.salaryPeriodProfile, body)
|
||||
.then(() => {
|
||||
props.fetchData?.();
|
||||
success($q, "เพื่มรายชื่อสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเพิ่มรายชื่อ",
|
||||
"ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** function updatePage*/
|
||||
async function updatePagePagination() {
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/** function updatePageSize*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูลตาม keyword*/
|
||||
function searchData() {
|
||||
formFilter.page = 1;
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
fetchListPerson();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="max-width: 100vw">
|
||||
<Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
v-model="formFilter.keyword"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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 === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
label="เพิ่ม"
|
||||
@click="onClickAddPerson(props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<!-- <q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions> -->
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,112 +1,112 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, success, messageError } = mixin;
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const amount = defineModel<number | null>("amount", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const props = defineProps({
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
const amountRef = ref<any>();
|
||||
|
||||
/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (amountRef.value.validate()) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
amount.value = null;
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
if (amount.value !== null) {
|
||||
const amountString: string = amount.value.toString();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
amount:
|
||||
typeof amount.value === "number"
|
||||
? amount.value
|
||||
: Number(amountString.replace(/,/g, "")),
|
||||
};
|
||||
http
|
||||
.post(config.API.salaryPeriod() + `/change/amount`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 30%">
|
||||
<Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-input
|
||||
ref="amountRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="amount"
|
||||
label="เงินเดือนฐาน"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, success, messageError } = mixin;
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const amount = defineModel<number | null>("amount", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const props = defineProps({
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
const amountRef = ref<any>();
|
||||
|
||||
/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (amountRef.value.validate()) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
amount.value = null;
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
if (amount.value !== null) {
|
||||
const amountString: string = amount.value.toString();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
amount:
|
||||
typeof amount.value === "number"
|
||||
? amount.value
|
||||
: Number(amountString.replace(/,/g, "")),
|
||||
};
|
||||
http
|
||||
.post(config.API.salaryPeriod() + `/change/amount`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 30%">
|
||||
<Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-input
|
||||
ref="amountRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="amount"
|
||||
label="เงินเดือนฐาน"
|
||||
mask="###,###,###,###"
|
||||
reverse-fill-mask
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,160 +1,160 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const separator = ref<any>("cell");
|
||||
/** ปิด Dialog */
|
||||
function closeDialog() {
|
||||
modal.value = !modal.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" full-width>
|
||||
<Header
|
||||
tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="q-pa-md">
|
||||
<q-markup-table
|
||||
:separator="separator"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ</th>
|
||||
<th class="text-center">หนึ่งขั้น</th>
|
||||
<th class="text-center">ครึ่งขั้น</th>
|
||||
<th class="text-center">ไม่ได้รับการเลื่อนขั้น</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ข้อ1 -->
|
||||
<tr>
|
||||
<td class="text-left">1. ผลการประเมินผลการปฎิบัติราชการ</td>
|
||||
<td class="text-center">
|
||||
ผลการประเมินผลในระดับดีเด่น<br />(90-100%)
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ2 -->
|
||||
<tr>
|
||||
<td class="text-left">
|
||||
2. ระยะเวลาการปฎิบัติราชการในรอบครึ่งปี
|
||||
</td>
|
||||
<td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
|
||||
<td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
|
||||
<td class="text-center">
|
||||
น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา ฝึกอบรมดูงาน)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ3 -->
|
||||
<tr>
|
||||
<td class="text-left">3. การลงโทษทางวินัย</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ4 -->
|
||||
<tr>
|
||||
<td class="text-left">4. พักราชการ</td>
|
||||
<td class="text-center">ไม่ถูกสั่งพักราชการ</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ5 -->
|
||||
<tr>
|
||||
<td class="text-left">5. ขาดราชการ</td>
|
||||
<td class="text-center">ไม่ขาดราชการ</td>
|
||||
<td class="text-center">ไม่ขาดราชการ</td>
|
||||
<td class="text-center">ไม่ขาดราชการ</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ6 -->
|
||||
<tr class="vertical-top">
|
||||
<td class="text-left">6. วันลา</td>
|
||||
<td class="text-left">
|
||||
<p class="q-mb-none txt-under">
|
||||
ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5 ครั้ง
|
||||
</p>
|
||||
<p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
|
||||
<p class="text-bold q-mb-none">ยกเว้น</p>
|
||||
<p class="q-mb-none">
|
||||
- ลาอุปสมบท
|
||||
<br />
|
||||
- ลาคลอดบุตร (ไม่เกิน 90 วัน)
|
||||
<br />
|
||||
* กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
|
||||
รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
|
||||
</p>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<p class="txt-under q-mb-none">
|
||||
ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
|
||||
</p>
|
||||
<p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
|
||||
<p class="text-bold q-mb-none">ยกเว้น</p>
|
||||
<p class="q-mb-none">
|
||||
- ลาอุปสมบท
|
||||
<br />
|
||||
- ลาคลอดบุตร (ไม่เกิน 90 วัน)
|
||||
<br />
|
||||
* กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
|
||||
รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
|
||||
</p>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<p class="txt-under q-mb-none">
|
||||
ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
|
||||
</p>
|
||||
<p>(นับเฉพาะการลาป่วยลากิจ)</p>
|
||||
<br />
|
||||
<br />
|
||||
<p class="q-mb-none">
|
||||
* กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
|
||||
รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</q-markup-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.txt-under {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.q-table th {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const separator = ref<any>("cell");
|
||||
/** ปิด Dialog */
|
||||
function closeDialog() {
|
||||
modal.value = !modal.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" full-width>
|
||||
<Header
|
||||
tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="q-pa-md">
|
||||
<q-markup-table
|
||||
:separator="separator"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ</th>
|
||||
<th class="text-center">หนึ่งขั้น</th>
|
||||
<th class="text-center">ครึ่งขั้น</th>
|
||||
<th class="text-center">ไม่ได้รับการเลื่อนขั้น</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ข้อ1 -->
|
||||
<tr>
|
||||
<td class="text-left">1. ผลการประเมินผลการปฎิบัติราชการ</td>
|
||||
<td class="text-center">
|
||||
ผลการประเมินผลในระดับดีเด่น<br />(90-100%)
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ2 -->
|
||||
<tr>
|
||||
<td class="text-left">
|
||||
2. ระยะเวลาการปฎิบัติราชการในรอบครึ่งปี
|
||||
</td>
|
||||
<td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
|
||||
<td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
|
||||
<td class="text-center">
|
||||
น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา ฝึกอบรมดูงาน)
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ3 -->
|
||||
<tr>
|
||||
<td class="text-left">3. การลงโทษทางวินัย</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ4 -->
|
||||
<tr>
|
||||
<td class="text-left">4. พักราชการ</td>
|
||||
<td class="text-center">ไม่ถูกสั่งพักราชการ</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
|
||||
</td>
|
||||
<td class="text-center">
|
||||
ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ5 -->
|
||||
<tr>
|
||||
<td class="text-left">5. ขาดราชการ</td>
|
||||
<td class="text-center">ไม่ขาดราชการ</td>
|
||||
<td class="text-center">ไม่ขาดราชการ</td>
|
||||
<td class="text-center">ไม่ขาดราชการ</td>
|
||||
</tr>
|
||||
|
||||
<!-- ข้อ6 -->
|
||||
<tr class="vertical-top">
|
||||
<td class="text-left">6. วันลา</td>
|
||||
<td class="text-left">
|
||||
<p class="q-mb-none txt-under">
|
||||
ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5 ครั้ง
|
||||
</p>
|
||||
<p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
|
||||
<p class="text-bold q-mb-none">ยกเว้น</p>
|
||||
<p class="q-mb-none">
|
||||
- ลาอุปสมบท
|
||||
<br />
|
||||
- ลาคลอดบุตร (ไม่เกิน 90 วัน)
|
||||
<br />
|
||||
* กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
|
||||
รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
|
||||
</p>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<p class="txt-under q-mb-none">
|
||||
ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
|
||||
</p>
|
||||
<p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
|
||||
<p class="text-bold q-mb-none">ยกเว้น</p>
|
||||
<p class="q-mb-none">
|
||||
- ลาอุปสมบท
|
||||
<br />
|
||||
- ลาคลอดบุตร (ไม่เกิน 90 วัน)
|
||||
<br />
|
||||
* กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
|
||||
รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
|
||||
</p>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<p class="txt-under q-mb-none">
|
||||
ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
|
||||
</p>
|
||||
<p>(นับเฉพาะการลาป่วยลากิจ)</p>
|
||||
<br />
|
||||
<br />
|
||||
<p class="q-mb-none">
|
||||
* กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
|
||||
รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</q-markup-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.txt-under {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.q-table th {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,135 +1,135 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, defineModel, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const props = defineProps({
|
||||
group: { type: String },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
/** ตัวแปร*/
|
||||
const group = ref<string>("");
|
||||
const groupRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (groupRef.value.validate()) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
group.value = "";
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
groupId: group.value,
|
||||
};
|
||||
http
|
||||
.post(config.API.salaryPeriod() + `/change/group`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
close();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
group.value =
|
||||
props.group === "กลุ่ม1" ? store.groupOp[1].id : store.groupOp[0].id;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 30%">
|
||||
<Header :tittle="`ย้ายกลุ่ม`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-select
|
||||
ref="groupRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="group"
|
||||
label="กลุ่ม"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="store.groupOp.filter((e) => e.name !== props.group)"
|
||||
:rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { ref, defineModel, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const props = defineProps({
|
||||
group: { type: String },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
/** ตัวแปร*/
|
||||
const group = ref<string>("");
|
||||
const groupRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (groupRef.value.validate()) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
group.value = "";
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
groupId: group.value,
|
||||
};
|
||||
http
|
||||
.post(config.API.salaryPeriod() + `/change/group`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
close();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
group.value =
|
||||
props.group === "กลุ่ม1" ? store.groupOp[1].id : store.groupOp[0].id;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 30%">
|
||||
<Header :tittle="`ย้ายกลุ่ม`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-select
|
||||
ref="groupRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="group"
|
||||
label="กลุ่ม"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="store.groupOp.filter((e) => e.name !== props.group)"
|
||||
:rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,178 +1,178 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const {
|
||||
dialogConfirm,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
|
||||
/**porps*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const props = defineProps({
|
||||
typeLevel: { type: String, required: true },
|
||||
isReserve: { type: Boolean, required: true },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
const type = ref<string>("");
|
||||
const typeRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
|
||||
const isReserve = ref<boolean>(false); // สำรองหรือไม่
|
||||
|
||||
const typeRangeOps = computed(() => {
|
||||
return store.roundMainCode == "OCT"
|
||||
? [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
{ id: "FULLHAFT", name: "1.5 ขั้น" },
|
||||
]
|
||||
: [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
];
|
||||
});
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (typeRef.value.validate()) {
|
||||
// if (
|
||||
// store.roundMainCode === "APR" &&
|
||||
// store.remaining === 0 &&
|
||||
// type.value === "FULL"
|
||||
// ) {
|
||||
// dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
|
||||
// } else {
|
||||
onSubmit();
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
type.value = "";
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
type: type.value,
|
||||
isReserve: isReserve.value,
|
||||
};
|
||||
http
|
||||
.post(config.API.salaryPeriod() + `/change/type`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
type.value = props.typeLevel == 'PENDING' ? "" : props.typeLevel;
|
||||
isReserve.value = props.isReserve;
|
||||
isChange.value = false;
|
||||
}
|
||||
);
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 30%">
|
||||
<Header :tittle="`ย้ายขั้น`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-select
|
||||
ref="typeRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="type"
|
||||
label="เลื่อนขั้น"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="typeRangeOps"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
@update:model-value="isChange = true"
|
||||
/>
|
||||
<!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
|
||||
|
||||
<q-checkbox
|
||||
v-if="type === 'FULL'"
|
||||
keep-color
|
||||
label="สำรอง"
|
||||
dense
|
||||
v-model="isReserve"
|
||||
@update:model-value="isChange = true"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
:disabled="!isChange"
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const {
|
||||
dialogConfirm,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
|
||||
/**porps*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const props = defineProps({
|
||||
typeLevel: { type: String, required: true },
|
||||
isReserve: { type: Boolean, required: true },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
const type = ref<string>("");
|
||||
const typeRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
|
||||
const isReserve = ref<boolean>(false); // สำรองหรือไม่
|
||||
|
||||
const typeRangeOps = computed(() => {
|
||||
return store.roundMainCode == "OCT"
|
||||
? [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
{ id: "FULLHAFT", name: "1.5 ขั้น" },
|
||||
]
|
||||
: [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
];
|
||||
});
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
if (typeRef.value.validate()) {
|
||||
// if (
|
||||
// store.roundMainCode === "APR" &&
|
||||
// store.remaining === 0 &&
|
||||
// type.value === "FULL"
|
||||
// ) {
|
||||
// dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
|
||||
// } else {
|
||||
onSubmit();
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
type.value = "";
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
profileId: profileId.value,
|
||||
type: type.value,
|
||||
isReserve: isReserve.value,
|
||||
};
|
||||
http
|
||||
.post(config.API.salaryPeriod() + `/change/type`, body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
type.value = props.typeLevel == 'PENDING' ? "" : props.typeLevel;
|
||||
isReserve.value = props.isReserve;
|
||||
isChange.value = false;
|
||||
}
|
||||
);
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 30%">
|
||||
<Header :tittle="`ย้ายขั้น`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm">
|
||||
<q-select
|
||||
ref="typeRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="type"
|
||||
label="เลื่อนขั้น"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="typeRangeOps"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
@update:model-value="isChange = true"
|
||||
/>
|
||||
<!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
|
||||
|
||||
<q-checkbox
|
||||
v-if="type === 'FULL'"
|
||||
keep-color
|
||||
label="สำรอง"
|
||||
dense
|
||||
v-model="isReserve"
|
||||
@update:model-value="isChange = true"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
:disabled="!isChange"
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,176 +1,176 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const {
|
||||
dialogConfirm,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
|
||||
/**porps*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("id", { required: true });
|
||||
const props = defineProps({
|
||||
isPunish: { type: Boolean, required: true },
|
||||
isSuspension: { type: Boolean, required: true },
|
||||
isAbsent: { type: Boolean, required: true },
|
||||
isLeave: { type: Boolean, required: true },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
const type = ref<string>("");
|
||||
const typeRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
|
||||
const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
|
||||
const isSuspension = ref<boolean>(false); // สำรองหรือไม่
|
||||
const isAbsent = ref<boolean>(false); // สำรองหรือไม่
|
||||
const isLeave = ref<boolean>(false); // สำรองหรือไม่
|
||||
|
||||
const typeRangeOps = computed(() => {
|
||||
return store.roundMainCode == "OCT"
|
||||
? [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
{ id: "FULLHAFT", name: "1.5 ขั้น" },
|
||||
]
|
||||
: [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
];
|
||||
});
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
onSubmit();
|
||||
}
|
||||
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
type.value = "";
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
isPunish: isPunish.value,
|
||||
isSuspension: isSuspension.value,
|
||||
isAbsent: isAbsent.value,
|
||||
isLeave: isLeave.value,
|
||||
};
|
||||
http
|
||||
.put(config.API.salaryProperty(profileId.value), body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
isPunish.value = props.isPunish;
|
||||
isSuspension.value = props.isSuspension;
|
||||
isAbsent.value = props.isAbsent;
|
||||
isLeave.value = props.isLeave;
|
||||
}
|
||||
);
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 20%">
|
||||
<Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm column">
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="ไม่ถูกลงโทษทางวินัย"
|
||||
dense
|
||||
v-model="isPunish"
|
||||
/>
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="ไม่ถูกพักราชการ"
|
||||
dense
|
||||
v-model="isSuspension"
|
||||
/>
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="ไม่ขาดราชการ"
|
||||
dense
|
||||
v-model="isAbsent"
|
||||
/>
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="วันลาไม่เกิน"
|
||||
dense
|
||||
v-model="isLeave"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const {
|
||||
dialogConfirm,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
|
||||
/**porps*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const profileId = defineModel<string>("id", { required: true });
|
||||
const props = defineProps({
|
||||
isPunish: { type: Boolean, required: true },
|
||||
isSuspension: { type: Boolean, required: true },
|
||||
isAbsent: { type: Boolean, required: true },
|
||||
isLeave: { type: Boolean, required: true },
|
||||
fetchData: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
|
||||
const type = ref<string>("");
|
||||
const typeRef = ref<any>(null);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
|
||||
const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
|
||||
const isSuspension = ref<boolean>(false); // สำรองหรือไม่
|
||||
const isAbsent = ref<boolean>(false); // สำรองหรือไม่
|
||||
const isLeave = ref<boolean>(false); // สำรองหรือไม่
|
||||
|
||||
const typeRangeOps = computed(() => {
|
||||
return store.roundMainCode == "OCT"
|
||||
? [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
{ id: "FULLHAFT", name: "1.5 ขั้น" },
|
||||
]
|
||||
: [
|
||||
{ id: "NONE", name: "ไม่ได้เลื่อน" },
|
||||
{ id: "HAFT", name: "0.5 ขั้น" },
|
||||
{ id: "FULL", name: "1 ขั้น" },
|
||||
];
|
||||
});
|
||||
|
||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||
function validateForm() {
|
||||
onSubmit();
|
||||
}
|
||||
|
||||
|
||||
/** function ปืด Popup */
|
||||
function close() {
|
||||
modal.value = false;
|
||||
type.value = "";
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
isPunish: isPunish.value,
|
||||
isSuspension: isSuspension.value,
|
||||
isAbsent: isAbsent.value,
|
||||
isLeave: isLeave.value,
|
||||
};
|
||||
http
|
||||
.put(config.API.salaryProperty(profileId.value), body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchData?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
close();
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
isPunish.value = props.isPunish;
|
||||
isSuspension.value = props.isSuspension;
|
||||
isAbsent.value = props.isAbsent;
|
||||
isLeave.value = props.isLeave;
|
||||
}
|
||||
);
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 20%">
|
||||
<Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="q-gutter-y-sm column">
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="ไม่ถูกลงโทษทางวินัย"
|
||||
dense
|
||||
v-model="isPunish"
|
||||
/>
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="ไม่ถูกพักราชการ"
|
||||
dense
|
||||
v-model="isSuspension"
|
||||
/>
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="ไม่ขาดราชการ"
|
||||
dense
|
||||
v-model="isAbsent"
|
||||
/>
|
||||
<q-checkbox
|
||||
toggle-indeterminate
|
||||
keep-color
|
||||
label="วันลาไม่เกิน"
|
||||
dense
|
||||
v-model="isLeave"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,190 +1,190 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
|
||||
|
||||
const sendStep = ref<number>(1);
|
||||
const fileUpload = ref<any>(null);
|
||||
const document = ref<string>("");
|
||||
/**
|
||||
* function อัปโหลดไฟล์เจ้าหน้าที่
|
||||
* @param event file
|
||||
*/
|
||||
async function uploadFile(event: any) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const selectedFile = event;
|
||||
const formdata = new FormData();
|
||||
formdata.append("Document", selectedFile);
|
||||
// await http
|
||||
// .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
|
||||
// .then(async () => {
|
||||
// await fecthInsigniaByOc(
|
||||
// round.value,
|
||||
// DataStore.agency,
|
||||
// "officer",
|
||||
// tab.value
|
||||
// );
|
||||
// success($q, "อัปโหลดไฟล์สำเร็จ");
|
||||
// fileUpload.value = null;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// }),
|
||||
},
|
||||
"ยืนยันการอัปโหลดไฟล์",
|
||||
"ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
function saveReccommend() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
sendStep.value = sendStep.value + 1;
|
||||
modalRecommend.value = false;
|
||||
},
|
||||
"ยืนยันการ" + titleRecommend.value,
|
||||
"ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
function sendToDirector(msg: string) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
sendStep.value = sendStep.value == 3 ? 6 : sendStep.value + 1;
|
||||
},
|
||||
"ยืนยันการ" + msg,
|
||||
"ต้องการยืนยันการ" + msg + "หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
const modalRecommend = ref<boolean>(false);
|
||||
const titleRecommend = ref<string>("");
|
||||
function sendAndRecommend(title: string) {
|
||||
modalRecommend.value = true;
|
||||
titleRecommend.value = title;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<q-toolbar>
|
||||
<q-file
|
||||
v-if="sendStep == 1"
|
||||
bg-color="white"
|
||||
clearable
|
||||
outlined
|
||||
dense
|
||||
v-model="fileUpload"
|
||||
accept=".pdf"
|
||||
label="อัปโหลดไฟล์"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon color="light-blue" name="attach_file" />
|
||||
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
color="light-blue"
|
||||
icon="upload"
|
||||
@click="uploadFile(fileUpload)"
|
||||
v-if="fileUpload !== null"
|
||||
/>
|
||||
<div v-if="document">
|
||||
<q-btn
|
||||
dense
|
||||
color="primary"
|
||||
icon-right="mdi-download"
|
||||
label="ดาวน์โหลดไฟล์"
|
||||
outline
|
||||
:href="document"
|
||||
target="_blank"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
|
||||
<q-toolbar-title>
|
||||
<!-- Toolbar -->
|
||||
</q-toolbar-title>
|
||||
<div>
|
||||
<!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
|
||||
<q-btn
|
||||
v-if="sendStep == 1"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
|
||||
@click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
|
||||
<q-btn
|
||||
v-if="sendStep == 2"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ยืนยันและส่งเอกสารให้ สกจ."
|
||||
@click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.')"
|
||||
/>
|
||||
|
||||
<!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
|
||||
<q-btn
|
||||
v-if="sendStep == 3"
|
||||
unelevated
|
||||
color="green"
|
||||
label="ยืนยันการตรวจสอบ"
|
||||
@click="sendToDirector('ยืนยันการตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
|
||||
<q-btn
|
||||
v-if="sendStep == 3"
|
||||
class="q-ml-sm"
|
||||
unelevated
|
||||
color="warning"
|
||||
label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
|
||||
@click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
|
||||
<q-btn
|
||||
v-if="sendStep == 4"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
|
||||
@click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-if="sendStep > 4"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ส่งไปออกคำสั่ง"
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
<DialogPopupReason
|
||||
v-model:modal="modalRecommend"
|
||||
:title="titleRecommend"
|
||||
label="คำแนะนำ"
|
||||
:savaForm="saveReccommend"
|
||||
textReport=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
|
||||
|
||||
const sendStep = ref<number>(1);
|
||||
const fileUpload = ref<any>(null);
|
||||
const document = ref<string>("");
|
||||
/**
|
||||
* function อัปโหลดไฟล์เจ้าหน้าที่
|
||||
* @param event file
|
||||
*/
|
||||
async function uploadFile(event: any) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const selectedFile = event;
|
||||
const formdata = new FormData();
|
||||
formdata.append("Document", selectedFile);
|
||||
// await http
|
||||
// .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
|
||||
// .then(async () => {
|
||||
// await fecthInsigniaByOc(
|
||||
// round.value,
|
||||
// DataStore.agency,
|
||||
// "officer",
|
||||
// tab.value
|
||||
// );
|
||||
// success($q, "อัปโหลดไฟล์สำเร็จ");
|
||||
// fileUpload.value = null;
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// }),
|
||||
},
|
||||
"ยืนยันการอัปโหลดไฟล์",
|
||||
"ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
function saveReccommend() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
sendStep.value = sendStep.value + 1;
|
||||
modalRecommend.value = false;
|
||||
},
|
||||
"ยืนยันการ" + titleRecommend.value,
|
||||
"ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
function sendToDirector(msg: string) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
sendStep.value = sendStep.value == 3 ? 6 : sendStep.value + 1;
|
||||
},
|
||||
"ยืนยันการ" + msg,
|
||||
"ต้องการยืนยันการ" + msg + "หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
const modalRecommend = ref<boolean>(false);
|
||||
const titleRecommend = ref<string>("");
|
||||
function sendAndRecommend(title: string) {
|
||||
modalRecommend.value = true;
|
||||
titleRecommend.value = title;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<q-toolbar>
|
||||
<q-file
|
||||
v-if="sendStep == 1"
|
||||
bg-color="white"
|
||||
clearable
|
||||
outlined
|
||||
dense
|
||||
v-model="fileUpload"
|
||||
accept=".pdf"
|
||||
label="อัปโหลดไฟล์"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon color="light-blue" name="attach_file" />
|
||||
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
color="light-blue"
|
||||
icon="upload"
|
||||
@click="uploadFile(fileUpload)"
|
||||
v-if="fileUpload !== null"
|
||||
/>
|
||||
<div v-if="document">
|
||||
<q-btn
|
||||
dense
|
||||
color="primary"
|
||||
icon-right="mdi-download"
|
||||
label="ดาวน์โหลดไฟล์"
|
||||
outline
|
||||
:href="document"
|
||||
target="_blank"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
|
||||
<q-toolbar-title>
|
||||
<!-- Toolbar -->
|
||||
</q-toolbar-title>
|
||||
<div>
|
||||
<!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
|
||||
<q-btn
|
||||
v-if="sendStep == 1"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
|
||||
@click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
|
||||
<q-btn
|
||||
v-if="sendStep == 2"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ยืนยันและส่งเอกสารให้ สกจ."
|
||||
@click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.')"
|
||||
/>
|
||||
|
||||
<!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
|
||||
<q-btn
|
||||
v-if="sendStep == 3"
|
||||
unelevated
|
||||
color="green"
|
||||
label="ยืนยันการตรวจสอบ"
|
||||
@click="sendToDirector('ยืนยันการตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
|
||||
<q-btn
|
||||
v-if="sendStep == 3"
|
||||
class="q-ml-sm"
|
||||
unelevated
|
||||
color="warning"
|
||||
label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
|
||||
@click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
|
||||
<q-btn
|
||||
v-if="sendStep == 4"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
|
||||
@click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-if="sendStep > 4"
|
||||
unelevated
|
||||
color="public"
|
||||
label="ส่งไปออกคำสั่ง"
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
<DialogPopupReason
|
||||
v-model:modal="modalRecommend"
|
||||
:title="titleRecommend"
|
||||
label="คำแนะนำ"
|
||||
:savaForm="saveReccommend"
|
||||
textReport=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,493 +1,493 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
|
||||
import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
|
||||
import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
|
||||
import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
||||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const props = defineProps({
|
||||
rows: { type: Array },
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posNo",
|
||||
align: "left",
|
||||
label: "ตำแหน่งเลขที่",
|
||||
sortable: true,
|
||||
field: "posNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ตำแหน่งประเภท",
|
||||
sortable: false,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
sortable: false,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posExecutive",
|
||||
align: "left",
|
||||
label: "ตำแหน่งทางการบริหาร",
|
||||
sortable: false,
|
||||
field: "posExecutive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "amount",
|
||||
align: "left",
|
||||
label: "เงินเดือนฐาน",
|
||||
sortable: false,
|
||||
field: "amount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "amountUse",
|
||||
align: "left",
|
||||
label: "จำนวนเงินที่ใช้เลื่อน",
|
||||
sortable: false,
|
||||
field: "amountUse",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "positionSalaryAmount",
|
||||
align: "left",
|
||||
label: "เงินเดือนหลังเลื่อน",
|
||||
sortable: false,
|
||||
field: "positionSalaryAmount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "isRetired",
|
||||
align: "center",
|
||||
label: "เกษียณอายุ",
|
||||
sortable: false,
|
||||
field: "isRetired",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"posNo",
|
||||
"fullName",
|
||||
"position",
|
||||
"posType",
|
||||
"posLevel",
|
||||
"posExecutive",
|
||||
"amount",
|
||||
"amountUse",
|
||||
"positionSalaryAmount",
|
||||
"isRetired",
|
||||
]);
|
||||
|
||||
/** modalDialog*/
|
||||
const modalDialogAddPerson = ref<boolean>(false);
|
||||
const modalDialogForm = ref<boolean>(false);
|
||||
const modalDialogMoveGroup = ref<boolean>(false);
|
||||
const modalDialogMoveLeve = ref<boolean>(false);
|
||||
|
||||
const profileId = ref<string>("");
|
||||
const amount = ref<number>(0);
|
||||
|
||||
/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
|
||||
function onClickAddPerson() {
|
||||
modalDialogAddPerson.value = !modalDialogAddPerson.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup แก้ไขเงินเดือน
|
||||
* @param id profileId
|
||||
* @param amountSalary จำนวนเงินเดือน
|
||||
*
|
||||
*/
|
||||
function onClickEdit(id: string, amountSalary: number) {
|
||||
profileId.value = id;
|
||||
amount.value = amountSalary;
|
||||
modalDialogForm.value = !modalDialogForm.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup ย้ายกลุ่ม
|
||||
* @param id profileId
|
||||
*
|
||||
*/
|
||||
function onClickMovieGroup(id: string) {
|
||||
profileId.value = id;
|
||||
modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
|
||||
}
|
||||
|
||||
const typeLevel = ref<string>("");
|
||||
const isReserve = ref<boolean>(false);
|
||||
/**
|
||||
* function openPopup ย้ายกขั้น
|
||||
* @param id profileId
|
||||
*
|
||||
*/
|
||||
function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
|
||||
profileId.value = id;
|
||||
modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
|
||||
typeLevel.value = typeVal;
|
||||
isReserve.value = isReserveVal;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยืนยันการลบรายชื่อ
|
||||
* @param id profileId
|
||||
*/
|
||||
function onClickDelete(id: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.salaryListPeriodProfileById(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
props.fetchDataTable?.();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** function updatePageTable*/
|
||||
function updatePagePagination() {
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** function updatePageSizeTable*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.value.page = 1;
|
||||
formFilter.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูล Table*/
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0px">
|
||||
<q-btn
|
||||
v-if="!store.isClosedRound"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
@click="onClickAddPerson"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
for="#select"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
|
||||
/>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
|
||||
:rows="props.rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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"
|
||||
:class="
|
||||
store.tabType !== 'RETIRE'
|
||||
? props.row.isNext == true
|
||||
? 'text-red'
|
||||
: ''
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1 +
|
||||
(store.tabType == "FULL" && props.row.isReserve == true
|
||||
? " (สำรอง)"
|
||||
: "")
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posNo'">
|
||||
{{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'amount'">
|
||||
{{
|
||||
props.row.amount !== null ? props.row.amount.toLocaleString() : ""
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'amountUse'">
|
||||
{{
|
||||
props.row.amountUse !== null
|
||||
? props.row.amountUse.toLocaleString()
|
||||
: ""
|
||||
}}
|
||||
{{
|
||||
props.row.amountSpecial > 0
|
||||
? `(${props.row.amountSpecial.toLocaleString()})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'positionSalaryAmount'">
|
||||
{{
|
||||
props.row.positionSalaryAmount !== null
|
||||
? props.row.positionSalaryAmount.toLocaleString()
|
||||
: ""
|
||||
}}
|
||||
{{
|
||||
props.row.amountSpecial > 0
|
||||
? `(${props.row.amountSpecial.toLocaleString()})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="
|
||||
col.name === 'isRetired' && store.roundMainCode === 'OCT'
|
||||
"
|
||||
>
|
||||
<q-icon
|
||||
name="check"
|
||||
color="primary"
|
||||
size="24px"
|
||||
v-if="props.row.isRetired"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
v-if="!store.isClosedRound"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
size="12px"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list dense style="min-width: 150px">
|
||||
<q-item
|
||||
v-for="(item, index) in store.itemMenu.filter((x:any)=>x.type != 'properties')"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
item.type === 'edit'
|
||||
? onClickEdit(props.row.id, props.row.amount)
|
||||
: item.type === 'moveGroup'
|
||||
? onClickMovieGroup(props.row.id)
|
||||
: item.type === 'moveLevel'
|
||||
? onClickMoveLevel(
|
||||
props.row.id,
|
||||
props.row.type,
|
||||
props.row.isReserve
|
||||
)
|
||||
: item.type === 'delete'
|
||||
? onClickDelete(props.row.id)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<q-icon
|
||||
:color="item.color"
|
||||
size="17px"
|
||||
:name="item.icon"
|
||||
/>
|
||||
<div class="q-pl-md">{{ item.label }}</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ props.total }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<DialogAddPerson
|
||||
v-model:modal="modalDialogAddPerson"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
|
||||
<DialogFormEdit
|
||||
v-model:modal="modalDialogForm"
|
||||
v-model:profileId="profileId"
|
||||
v-model:amount="amount"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveGroup
|
||||
v-model:modal="modalDialogMoveGroup"
|
||||
v-model:profileId="profileId"
|
||||
:group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveLevel
|
||||
:typeLevel="typeLevel"
|
||||
:isReserve="isReserve"
|
||||
v-model:modal="modalDialogMoveLeve"
|
||||
v-model:profileId="profileId"
|
||||
:fetchData="props.fetchDataTable"
|
||||
:type="store.tabType"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
|
||||
import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
|
||||
import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
|
||||
import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useSalaryListSDataStore();
|
||||
const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
||||
useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const formFilter = defineModel<DataFilter>("formFilter", { required: true });
|
||||
const maxPage = defineModel<Number>("maxPage", { required: true });
|
||||
const props = defineProps({
|
||||
rows: { type: Array },
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posNo",
|
||||
align: "left",
|
||||
label: "ตำแหน่งเลขที่",
|
||||
sortable: true,
|
||||
field: "posNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "fullName",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ตำแหน่งประเภท",
|
||||
sortable: false,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
sortable: false,
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posExecutive",
|
||||
align: "left",
|
||||
label: "ตำแหน่งทางการบริหาร",
|
||||
sortable: false,
|
||||
field: "posExecutive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "amount",
|
||||
align: "left",
|
||||
label: "เงินเดือนฐาน",
|
||||
sortable: false,
|
||||
field: "amount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "amountUse",
|
||||
align: "left",
|
||||
label: "จำนวนเงินที่ใช้เลื่อน",
|
||||
sortable: false,
|
||||
field: "amountUse",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "positionSalaryAmount",
|
||||
align: "left",
|
||||
label: "เงินเดือนหลังเลื่อน",
|
||||
sortable: false,
|
||||
field: "positionSalaryAmount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "isRetired",
|
||||
align: "center",
|
||||
label: "เกษียณอายุ",
|
||||
sortable: false,
|
||||
field: "isRetired",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"posNo",
|
||||
"fullName",
|
||||
"position",
|
||||
"posType",
|
||||
"posLevel",
|
||||
"posExecutive",
|
||||
"amount",
|
||||
"amountUse",
|
||||
"positionSalaryAmount",
|
||||
"isRetired",
|
||||
]);
|
||||
|
||||
/** modalDialog*/
|
||||
const modalDialogAddPerson = ref<boolean>(false);
|
||||
const modalDialogForm = ref<boolean>(false);
|
||||
const modalDialogMoveGroup = ref<boolean>(false);
|
||||
const modalDialogMoveLeve = ref<boolean>(false);
|
||||
|
||||
const profileId = ref<string>("");
|
||||
const amount = ref<number>(0);
|
||||
|
||||
/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
|
||||
function onClickAddPerson() {
|
||||
modalDialogAddPerson.value = !modalDialogAddPerson.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup แก้ไขเงินเดือน
|
||||
* @param id profileId
|
||||
* @param amountSalary จำนวนเงินเดือน
|
||||
*
|
||||
*/
|
||||
function onClickEdit(id: string, amountSalary: number) {
|
||||
profileId.value = id;
|
||||
amount.value = amountSalary;
|
||||
modalDialogForm.value = !modalDialogForm.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup ย้ายกลุ่ม
|
||||
* @param id profileId
|
||||
*
|
||||
*/
|
||||
function onClickMovieGroup(id: string) {
|
||||
profileId.value = id;
|
||||
modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
|
||||
}
|
||||
|
||||
const typeLevel = ref<string>("");
|
||||
const isReserve = ref<boolean>(false);
|
||||
/**
|
||||
* function openPopup ย้ายกขั้น
|
||||
* @param id profileId
|
||||
*
|
||||
*/
|
||||
function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
|
||||
profileId.value = id;
|
||||
modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
|
||||
typeLevel.value = typeVal;
|
||||
isReserve.value = isReserveVal;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยืนยันการลบรายชื่อ
|
||||
* @param id profileId
|
||||
*/
|
||||
function onClickDelete(id: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.salaryListPeriodProfileById(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
props.fetchDataTable?.();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** function updatePageTable*/
|
||||
function updatePagePagination() {
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** function updatePageSizeTable*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.value.page = 1;
|
||||
formFilter.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูล Table*/
|
||||
function searchData() {
|
||||
formFilter.value.page = 1;
|
||||
props.fetchDataTable?.();
|
||||
}
|
||||
|
||||
/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
|
||||
watch(
|
||||
() => formFilter.value.pageSize,
|
||||
() => {
|
||||
updatePagePagination();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0px">
|
||||
<q-btn
|
||||
v-if="!store.isClosedRound"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
@click="onClickAddPerson"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
v-model="formFilter.keyword"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="searchData"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
for="#select"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
|
||||
/>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
|
||||
:rows="props.rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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"
|
||||
:class="
|
||||
store.tabType !== 'RETIRE'
|
||||
? props.row.isNext == true
|
||||
? 'text-red'
|
||||
: ''
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1 +
|
||||
(store.tabType == "FULL" && props.row.isReserve == true
|
||||
? " (สำรอง)"
|
||||
: "")
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posNo'">
|
||||
{{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'fullName'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'amount'">
|
||||
{{
|
||||
props.row.amount !== null ? props.row.amount.toLocaleString() : ""
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'amountUse'">
|
||||
{{
|
||||
props.row.amountUse !== null
|
||||
? props.row.amountUse.toLocaleString()
|
||||
: ""
|
||||
}}
|
||||
{{
|
||||
props.row.amountSpecial > 0
|
||||
? `(${props.row.amountSpecial.toLocaleString()})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'positionSalaryAmount'">
|
||||
{{
|
||||
props.row.positionSalaryAmount !== null
|
||||
? props.row.positionSalaryAmount.toLocaleString()
|
||||
: ""
|
||||
}}
|
||||
{{
|
||||
props.row.amountSpecial > 0
|
||||
? `(${props.row.amountSpecial.toLocaleString()})`
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="
|
||||
col.name === 'isRetired' && store.roundMainCode === 'OCT'
|
||||
"
|
||||
>
|
||||
<q-icon
|
||||
name="check"
|
||||
color="primary"
|
||||
size="24px"
|
||||
v-if="props.row.isRetired"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
v-if="!store.isClosedRound"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
size="12px"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list dense style="min-width: 150px">
|
||||
<q-item
|
||||
v-for="(item, index) in store.itemMenu.filter((x:any)=>x.type != 'properties')"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
item.type === 'edit'
|
||||
? onClickEdit(props.row.id, props.row.amount)
|
||||
: item.type === 'moveGroup'
|
||||
? onClickMovieGroup(props.row.id)
|
||||
: item.type === 'moveLevel'
|
||||
? onClickMoveLevel(
|
||||
props.row.id,
|
||||
props.row.type,
|
||||
props.row.isReserve
|
||||
)
|
||||
: item.type === 'delete'
|
||||
? onClickDelete(props.row.id)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<q-icon
|
||||
:color="item.color"
|
||||
size="17px"
|
||||
:name="item.icon"
|
||||
/>
|
||||
<div class="q-pl-md">{{ item.label }}</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ props.total }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePagePagination()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<DialogAddPerson
|
||||
v-model:modal="modalDialogAddPerson"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
|
||||
<DialogFormEdit
|
||||
v-model:modal="modalDialogForm"
|
||||
v-model:profileId="profileId"
|
||||
v-model:amount="amount"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveGroup
|
||||
v-model:modal="modalDialogMoveGroup"
|
||||
v-model:profileId="profileId"
|
||||
:group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
|
||||
:fetchData="props.fetchDataTable"
|
||||
/>
|
||||
<DialogMoveLevel
|
||||
:typeLevel="typeLevel"
|
||||
:isReserve="isReserve"
|
||||
v-model:modal="modalDialogMoveLeve"
|
||||
v-model:profileId="profileId"
|
||||
:fetchData="props.fetchDataTable"
|
||||
:type="store.tabType"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
159
src/modules/13_salary/store/SalaryEmployeeListsStore.ts
Normal file
159
src/modules/13_salary/store/SalaryEmployeeListsStore.ts
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
ItemsMenu,
|
||||
DataOption,
|
||||
} from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
|
||||
|
||||
export const useSalaryEmployeeListSDataStore = defineStore("salaryEmployeeListStore", () => {
|
||||
const tabGroup = ref<string>("group1");
|
||||
const tabType = ref<string>("PENDING");
|
||||
const groupOp = ref<DataOption[]>([
|
||||
{ id: "", name: "กลุ่ม1" },
|
||||
{ id: "", name: "กลุ่ม2" },
|
||||
]);
|
||||
|
||||
const remaining = ref<number>(0);
|
||||
|
||||
const groupId = ref<string>("");
|
||||
const rootId = ref<string>("");
|
||||
const roundMainCode = ref<string>("");
|
||||
const roundYear = ref<number>(0);
|
||||
const roundCode = ref<string>("");
|
||||
const isClosedRound = ref<boolean>(false); // การปิดรอบ
|
||||
/** List Menu*/
|
||||
const itemMenu = ref<ItemsMenu[]>([
|
||||
{
|
||||
label: "แก้ไขเงินเดือน",
|
||||
icon: "edit",
|
||||
color: "edit",
|
||||
type: "edit",
|
||||
},
|
||||
{
|
||||
label: "ย้ายกลุ่ม",
|
||||
icon: "mdi-account-arrow-right-outline",
|
||||
color: "indigo-6",
|
||||
type: "moveGroup",
|
||||
},
|
||||
{
|
||||
label: "ย้ายขั้น",
|
||||
icon: "mdi-swap-vertical-bold",
|
||||
color: "green-6",
|
||||
type: "moveLevel",
|
||||
},
|
||||
{
|
||||
label: "แก้ไขคุณสมบัติ",
|
||||
icon: "mdi-format-list-checks",
|
||||
color: "blue-6",
|
||||
type: "properties",
|
||||
},
|
||||
{
|
||||
label: "ลบ",
|
||||
icon: "delete",
|
||||
color: "red",
|
||||
type: "delete",
|
||||
},
|
||||
]);
|
||||
|
||||
/** List Download รายงานของรอบเมษายน*/
|
||||
const itemDownloadApr = ref<DataOption[]>([
|
||||
{
|
||||
id: "gov1-01",
|
||||
name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 มีนาคม",
|
||||
},
|
||||
{
|
||||
id: "gov1-02",
|
||||
name: "บัญชีการคำนวณโควตาเลื่อนเงินเดือน รอบเมษายน",
|
||||
},
|
||||
{
|
||||
id: "gov1-03",
|
||||
name: "รายชื่อข้าราชการที่ได้รับการเสนอขอเลื่อนหนึ่งขั้น",
|
||||
},
|
||||
{
|
||||
id: "gov1-04",
|
||||
name: "แบบ 1 กท รอบเมษายน",
|
||||
},
|
||||
{
|
||||
id: "gov1-05",
|
||||
name: "แบบ 2 กท รอบเมษายน",
|
||||
},
|
||||
{
|
||||
id: "gov1-06",
|
||||
name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก.",
|
||||
},
|
||||
{
|
||||
id: "gov1-07",
|
||||
name: "คำสั่งเลื่อนเงินเดือน รอบเมษายน",
|
||||
},
|
||||
{
|
||||
id: "gov1-08",
|
||||
name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน",
|
||||
},
|
||||
]);
|
||||
|
||||
/** List Download รายงานของรอบตุลาคม*/
|
||||
const itemDownloadOct = ref<DataOption[]>([
|
||||
{
|
||||
id: "gov2-01",
|
||||
name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 กันยายน",
|
||||
},
|
||||
{
|
||||
id: "gov2-02",
|
||||
name: "บัญชีการคำนวณวงเงินเลื่อนเงินเดือน รอบตุลาคม",
|
||||
},
|
||||
{
|
||||
id: "gov2-03",
|
||||
name: "รายชื่อข้าราชการผู้ที่ได้รับการเสนอขอเลื่อนเงินเดือนทั้งปีสองขั้น",
|
||||
},
|
||||
{
|
||||
id: "gov2-04",
|
||||
name: "แบบ 1 กท รอบตุลาคม",
|
||||
},
|
||||
{
|
||||
id: "gov2-05",
|
||||
name: "แบบ 2 กท รอบตุลาคม",
|
||||
},
|
||||
{
|
||||
id: "gov2-06",
|
||||
name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก. ",
|
||||
},
|
||||
{
|
||||
id: "gov2-07",
|
||||
name: "คำสั่งเลื่อนเงินเดือนข้าราชการเกษียณ",
|
||||
},
|
||||
{
|
||||
id: "gov2-08",
|
||||
name: "คำสั่งเลื่อนเงินเดือน รอบตุลาคม",
|
||||
},
|
||||
{
|
||||
id: "gov2-09",
|
||||
name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อนเงินเดือน รอบตุลาคม",
|
||||
},
|
||||
]);
|
||||
|
||||
function fetchPeriodLatest(data: DataPeriodLatest, type: string) {
|
||||
groupId.value = type === "group1" ? data.group1id : data.group2id;
|
||||
roundCode.value = data.period;
|
||||
groupOp.value[0].id = data.group1id;
|
||||
groupOp.value[1].id = data.group2id;
|
||||
}
|
||||
return {
|
||||
tabGroup,
|
||||
tabType,
|
||||
itemMenu,
|
||||
itemDownloadOct,
|
||||
itemDownloadApr,
|
||||
groupId,
|
||||
fetchPeriodLatest,
|
||||
rootId,
|
||||
roundCode,
|
||||
groupOp,
|
||||
roundMainCode,
|
||||
remaining,
|
||||
isClosedRound,
|
||||
roundYear,
|
||||
};
|
||||
});
|
||||
|
|
@ -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,
|
||||
|
|
@ -17,7 +16,9 @@ import type {
|
|||
} from "@/modules/13_salary/interface/response/SalaryList";
|
||||
|
||||
/** importComponents*/
|
||||
import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
|
||||
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 { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||
|
|
|
|||
235
src/modules/16_positionEmployee/components/DialogAddPosition.vue
Normal file
235
src/modules/16_positionEmployee/components/DialogAddPosition.vue
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, defineProps } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
ResGroup,
|
||||
ResLevel,
|
||||
} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
|
||||
import type { ObjectPosRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
|
||||
import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
|
||||
|
||||
import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const isSpecial = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
emitSearch: Function,
|
||||
getData: Function,
|
||||
data: Object,
|
||||
levelOp: Object,
|
||||
});
|
||||
const modal = defineModel<boolean>("modalAdd", { required: true });
|
||||
const isEditCheck = defineModel<boolean>("isEdit", { required: true });
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
|
||||
|
||||
const isDisValidate = ref<boolean>(false);
|
||||
const formDataPos = reactive({
|
||||
posName: "",
|
||||
posTypeName: "",
|
||||
posLevelName: "",
|
||||
});
|
||||
|
||||
const posNameRef = ref<object | null>(null);
|
||||
const posTypeNameRef = ref<object | null>(null);
|
||||
const posLevelNameRef = ref<object | null>(null);
|
||||
const objectRef: ObjectPosRef = {
|
||||
posName: posNameRef,
|
||||
posTypeName: posTypeNameRef,
|
||||
posLevelName: posLevelNameRef,
|
||||
};
|
||||
const posTypeMain = ref<ResGroup[]>([]);
|
||||
const posTypeOp = ref<DataOption[]>([]);
|
||||
const posLevelOp = ref<DataOption[]>([]);
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function validateFormPositionEdit() {
|
||||
isDisValidate.value = false;
|
||||
const hasError = [];
|
||||
for (const key in objectRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
|
||||
const property = objectRef[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 = {
|
||||
posDictName: formDataPos.posName,
|
||||
posTypeId: formDataPos.posTypeName,
|
||||
posLevelId: formDataPos.posLevelName,
|
||||
};
|
||||
showLoader();
|
||||
try {
|
||||
const url = !isEditCheck.value
|
||||
? config.API.orgEmployeePos
|
||||
: config.API.orgEmployeePosById(props?.data?.id);
|
||||
await http[!isEditCheck.value ? "post" : "put"](url, body);
|
||||
success($q, "บันทีกข้อมูลสำเร็จ");
|
||||
props.emitSearch?.(formDataPos.posName, "positionName");
|
||||
close();
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
async function clearFormPositionSelect() {
|
||||
isEditCheck.value = false;
|
||||
isDisValidate.value = true;
|
||||
formDataPos.posName = "";
|
||||
formDataPos.posTypeName = "";
|
||||
formDataPos.posLevelName = "";
|
||||
isSpecial.value = false;
|
||||
setTimeout(() => {
|
||||
isDisValidate.value = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
clearFormPositionSelect();
|
||||
}
|
||||
|
||||
async function fetchType() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgEmployeeType)
|
||||
.then((res) => {
|
||||
posTypeMain.value = res.data.result;
|
||||
posTypeOp.value = res.data.result.map((e: OptionType) => ({
|
||||
id: e.id,
|
||||
name: e.posTypeName,
|
||||
}));
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function updatePosTypeName(id: string) {
|
||||
const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
|
||||
posLevelOp.value =
|
||||
posLevel?.posLevels.map((e: ResLevel) => ({
|
||||
id: e.id,
|
||||
name: e.posLevelName.toString(),
|
||||
})) ?? [];
|
||||
formDataPos.posLevelName = "";
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
if (modal.value === true) {
|
||||
await fetchType();
|
||||
|
||||
if (props.data) {
|
||||
const dataList = props.data;
|
||||
updatePosTypeName(dataList.posTypeId);
|
||||
|
||||
formDataPos.posName = dataList.posDictName;
|
||||
formDataPos.posTypeName = dataList.posTypeId;
|
||||
formDataPos.posLevelName = dataList.posLevelId;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 50vw">
|
||||
<DialogHeader
|
||||
:tittle="`${isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`}`"
|
||||
:close="close"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pa-none">
|
||||
<form @submit.prevent="validateFormPositionEdit">
|
||||
<div class="row q-col-gutter-sm col-12 q-pa-md">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
ref="posNameRef"
|
||||
v-model="formDataPos.posName"
|
||||
dense
|
||||
outlined
|
||||
for="#positionName"
|
||||
label="ชื่อตำแหน่ง"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<q-select
|
||||
ref="posTypeNameRef"
|
||||
label="กลุ่มงาน"
|
||||
v-model="formDataPos.posTypeName"
|
||||
:options="posTypeOp"
|
||||
emit-value
|
||||
dense
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
|
||||
@update:model-value="updatePosTypeName"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<q-select
|
||||
ref="posLevelNameRef"
|
||||
label="ระดับชั้นงาน"
|
||||
v-model="formDataPos.posLevelName"
|
||||
:disable="formDataPos.posTypeName === ''"
|
||||
:options="posLevelOp"
|
||||
emit-value
|
||||
dense
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-card-actions align="right" class="bg-white text-teal q-pa-sm">
|
||||
<q-btn
|
||||
type="submit"
|
||||
:label="`${isEditCheck ? 'แก้ไขตำแหน่ง' : 'เพิ่มตำแหน่ง'}`"
|
||||
color="public"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,701 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
FormDataPosition,
|
||||
FormPositionRef,
|
||||
DataOption,
|
||||
FormPositionSelect,
|
||||
RowDetailPositions,
|
||||
FormPositionSelectRef,
|
||||
ListMenu,
|
||||
} from "@/modules/16_positionEmployee/interface/index/Main";
|
||||
import type {
|
||||
OptionType,
|
||||
OptionLevel,
|
||||
OptionExecutive,
|
||||
DataPosition,
|
||||
} from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const props = defineProps({
|
||||
modal: Boolean,
|
||||
close: Function,
|
||||
orgLevel: Number,
|
||||
treeId: String,
|
||||
actionType: String,
|
||||
rowId: { type: String, default: "" },
|
||||
fetchDataTable: Function,
|
||||
getSummary: Function,
|
||||
shortName: { type: String, required: true },
|
||||
});
|
||||
|
||||
const isEdit = ref<boolean>(false);
|
||||
const modalAdd = ref<boolean>(false);
|
||||
const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const isDisValidate = ref<boolean>(false);
|
||||
const isPosition = ref<boolean>(false);
|
||||
|
||||
const dataCopy = ref<any>();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
dialogRemove,
|
||||
dialogMessageNotify,
|
||||
} = mixin;
|
||||
|
||||
const search = ref<string>("");
|
||||
const type = ref<string>("positionName");
|
||||
const optionFilter = ref<DataOption[]>([
|
||||
{ id: "positionName", name: "ชื่อตำแหน่ง" },
|
||||
{ id: "positionType", name: "กลุ่มงาน" },
|
||||
{ id: "positionLevel", name: "ระดับชั้นงาน" },
|
||||
]);
|
||||
|
||||
const listMenu = ref<ListMenu[]>([
|
||||
{
|
||||
label: "คัดลอก",
|
||||
icon: "mdi-content-copy",
|
||||
type: "copy",
|
||||
color: "blue-6",
|
||||
},
|
||||
{
|
||||
label: "แก้ไข",
|
||||
icon: "mdi-pencil",
|
||||
type: "edit",
|
||||
color: "edit",
|
||||
},
|
||||
{
|
||||
label: "ลบ",
|
||||
icon: "delete",
|
||||
type: "remove",
|
||||
color: "red",
|
||||
},
|
||||
]);
|
||||
|
||||
const rows = ref<RowDetailPositions[]>([]);
|
||||
const rowsPositionSelect = ref<RowDetailPositions[]>([]);
|
||||
|
||||
const prefixNoRef = ref<Object | null>(null);
|
||||
const positionNoRef = ref<Object | null>(null);
|
||||
|
||||
const formData = reactive<FormDataPosition>({
|
||||
shortName: props.shortName,
|
||||
prefixNo: "",
|
||||
positionNo: "",
|
||||
suffixNo: "",
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const objectPositionRef: FormPositionRef = {
|
||||
prefixNo: prefixNoRef,
|
||||
positionNo: positionNoRef,
|
||||
};
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posDictName",
|
||||
align: "left",
|
||||
label: "ชื่อตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posDictName",
|
||||
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: "posLevelName",
|
||||
align: "left",
|
||||
label: "ระดับชั้นงาน",
|
||||
sortable: true,
|
||||
field: "posLevelName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"posDictName",
|
||||
"posTypeName",
|
||||
"posLevelName",
|
||||
]);
|
||||
|
||||
async function fetchPosition(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgPosPositionById(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formData.prefixNo = data.posMasterNoPrefix;
|
||||
formData.positionNo = data.posMasterNo;
|
||||
formData.suffixNo = data.posMasterNoSuffix;
|
||||
rows.value = data.positions;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function validateForm() {
|
||||
const hasError = [];
|
||||
for (const key in objectPositionRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
|
||||
const property = objectPositionRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
if (rows.value.length == 0) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
|
||||
} else {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
const positionsData = rows.value.map((e: any) => ({
|
||||
posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
|
||||
posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
|
||||
posLevelId: e.posLevelId, //*ระดับตำแหน่ง
|
||||
}));
|
||||
const body = {
|
||||
posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
|
||||
posMasterNo: Number(formData.positionNo), //*เลขที่ตำแหน่ง เป็นตัวเลข
|
||||
posMasterNoSuffix: formData.suffixNo, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
|
||||
orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
|
||||
orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
|
||||
orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
|
||||
orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
|
||||
orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
|
||||
positions: positionsData,
|
||||
// succession: succession.value,
|
||||
};
|
||||
try {
|
||||
const url =
|
||||
props.actionType === "ADD"
|
||||
? config.API.orgPosMasterEmp
|
||||
: config.API.orgPosMasterByIdEmp(props.rowId);
|
||||
await http[props.actionType === "ADD" ? "post" : "put"](url, body);
|
||||
success($q, "บันทีกข้อมูลสำเร็จ");
|
||||
props.getSummary?.();
|
||||
props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
|
||||
close();
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** input ค้นหา */
|
||||
const searchRef = ref<any>(null);
|
||||
async function searchInput() {
|
||||
searchRef.value.validate();
|
||||
if (!searchRef.value.hasError) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.orgEmployeePos +
|
||||
`?keyword=${search.value}&type=${type.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
rowsPositionSelect.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* คัดลอกข้อมูล
|
||||
* @param data ข้อมูลตำแหน่ง
|
||||
*/
|
||||
function copyDetiail(data: RowDetailPositions) {
|
||||
modalAdd.value = true;
|
||||
dataCopy.value = data;
|
||||
}
|
||||
/**
|
||||
* แก้ไขข้อมูล
|
||||
* @param data ข้อมูลตำแหน่ง
|
||||
*/
|
||||
function editDetiail(data: RowDetailPositions) {
|
||||
isEdit.value = true;
|
||||
modalAdd.value = true;
|
||||
dataCopy.value = data;
|
||||
}
|
||||
|
||||
/**
|
||||
* ส่งค่า css ออกไปตามเงื่อนไข
|
||||
* @param val true/false
|
||||
*/
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
function addPosition(data: RowDetailPositions) {
|
||||
rows.value = [];
|
||||
rows.value.push(data);
|
||||
}
|
||||
|
||||
function deletePos(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.delete(config.API.orgEmployeePosById(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
searchInput();
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function clearFormPositionSelect() {
|
||||
isDisValidate.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
isDisValidate.value = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function close() {
|
||||
props.close?.();
|
||||
isPosition.value = false;
|
||||
}
|
||||
|
||||
async function emitSearch(keyword: string, typeSelect: string) {
|
||||
search.value = await keyword;
|
||||
type.value = await typeSelect;
|
||||
|
||||
await searchInput();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
if (props.actionType === "ADD") {
|
||||
rowsPositionSelect.value = [];
|
||||
search.value = "";
|
||||
rows.value = [];
|
||||
clearFormPositionSelect();
|
||||
formData.prefixNo = "";
|
||||
formData.positionNo = "";
|
||||
formData.suffixNo = "";
|
||||
} else {
|
||||
props.rowId && fetchPosition(props.rowId);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 80vw">
|
||||
<DialogHeader
|
||||
:tittle="
|
||||
props.actionType === 'ADD' ? 'เพิ่มอัตรากำลัง' : 'แก้ไขอัตรากำลัง'
|
||||
"
|
||||
:close="close"
|
||||
/>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-card-section class="q-pa-sm fixed-height">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12" style="border: 1px solid #d6dee1">
|
||||
<div
|
||||
class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
||||
>
|
||||
ข้อมูลอัตรากำลัง
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row q-col-gutter-sm col-12 q-pa-sm">
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
v-model="formData.shortName"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
for="#shortName"
|
||||
label="อักษรย่อ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
v-model="formData.prefixNo"
|
||||
:class="inputEdit(isReadonly)"
|
||||
ref="prefixNoRef"
|
||||
dense
|
||||
outlined
|
||||
for="#prefixNo"
|
||||
label="Prefix เลขที่ตำเเหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
v-model="formData.positionNo"
|
||||
:class="inputEdit(isReadonly)"
|
||||
ref="positionNoRef"
|
||||
dense
|
||||
outlined
|
||||
for="#positionNo"
|
||||
label="เลขที่ตำแหน่ง"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
|
||||
mask="########################"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
v-model="formData.suffixNo"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#suffixNo"
|
||||
label="Suffix เลขที่ตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
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"
|
||||
style="color: #000000; font-weight: 500"
|
||||
>
|
||||
<span class="text-weight-medium">{{
|
||||
col.label
|
||||
}}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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 == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posExecutiveName'">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="col.name === 'positionExecutiveField'"
|
||||
>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posLevelName'">
|
||||
{{
|
||||
props.row.posLevelName
|
||||
? props.row.isSpecial == true
|
||||
? `${props.row.posLevelName} (ฉ)`
|
||||
: props.row.posLevelName
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'positionArea'">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions class="bg-white q-pa-xs">
|
||||
<q-btn
|
||||
:icon="!isPosition ? 'mdi-menu-right' : 'mdi-menu-down'"
|
||||
flat
|
||||
color="teal"
|
||||
class="q-ml-sm"
|
||||
label="เพิ่มตำแหน่ง"
|
||||
@click="isPosition = !isPosition"
|
||||
><q-tooltip>{{
|
||||
!isPosition
|
||||
? "คลิกเพื่อแสดงส่วนของการเพิ่มตำแหน่ง"
|
||||
: "ปิดหน้าต่างการเพิ่มตำแหน่ง"
|
||||
}}</q-tooltip></q-btn
|
||||
>
|
||||
<q-space />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isPosition" class="row q-col-gutter-sm q-mt-sm">
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12" style="border: 1px solid #d6dee1">
|
||||
<div
|
||||
class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
||||
>
|
||||
เลือกตำแหน่งที่ต้องการเพิ่ม
|
||||
<q-btn
|
||||
icon="mdi-plus"
|
||||
flat
|
||||
round
|
||||
color="teal"
|
||||
@click="() => (modalAdd = true)"
|
||||
><q-tooltip>สร้างตำแหน่ง</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-sm items-start">
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<q-select
|
||||
label="ค้นหาจาก"
|
||||
v-model="type"
|
||||
:options="optionFilter"
|
||||
emit-value
|
||||
dense
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
ref="searchRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
v-model="search"
|
||||
outlined
|
||||
clearable
|
||||
dense
|
||||
lazy-rules
|
||||
label="คำค้น"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
|
||||
@keydown.enter.prevent="searchInput()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="search"
|
||||
label="ค้นหา"
|
||||
class="full-width q-pa-sm"
|
||||
@click="searchInput()"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width q-mt-sm">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rowsPositionSelect"
|
||||
row-key="id"
|
||||
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"
|
||||
style="color: #000000; font-weight: 500"
|
||||
>
|
||||
<span class="text-weight-medium">{{
|
||||
col.label
|
||||
}}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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"
|
||||
@click="addPosition(props.row)"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posExecutiveName'">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="col.name === 'positionExecutiveField'"
|
||||
>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posLevelName'">
|
||||
{{
|
||||
props.row.posLevelName
|
||||
? props.row.isSpecial == true
|
||||
? `${props.row.posLevelName} (ฉ)`
|
||||
: props.row.posLevelName
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div v-else-if="col.name === 'positionArea'">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
>
|
||||
<q-menu anchor="bottom middle" self="top middle">
|
||||
<q-list
|
||||
dense
|
||||
v-for="(item, index) in listMenu"
|
||||
:key="index"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
item.type === 'copy'
|
||||
? copyDetiail(props.row)
|
||||
: item.type === 'edit'
|
||||
? editDetiail(props.row)
|
||||
: deletePos(props.row.id)
|
||||
"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
:color="item.color"
|
||||
:name="item.icon"
|
||||
size="sm"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{
|
||||
item.label
|
||||
}}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn type="submit" :label="`บันทึก`" color="public" />
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<DialogAddPosition
|
||||
v-model:modalAdd="modalAdd"
|
||||
:emitSearch="emitSearch"
|
||||
:data="dataCopy"
|
||||
v-model:is-edit="isEdit"
|
||||
:get-data="searchInput"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fixed-height {
|
||||
overflow-y: auto;
|
||||
height: 80vh;
|
||||
}
|
||||
</style>
|
||||
168
src/modules/16_positionEmployee/components/DialogHistoryPos.vue
Normal file
168
src/modules/16_positionEmployee/components/DialogHistoryPos.vue
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { HistoryPos } from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
const store = usePositionEmp();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "orgShortName",
|
||||
align: "left",
|
||||
label: "อักษรย่อ",
|
||||
sortable: true,
|
||||
field: "orgShortName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
field: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posMasterNoPrefix",
|
||||
align: "left",
|
||||
label: " Prefix เลขที่ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posMasterNoPrefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posMasterNo",
|
||||
align: "left",
|
||||
label: "เลขที่ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posMasterNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posMasterNoSuffix",
|
||||
align: "left",
|
||||
label: "Suffix เลขที่ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posMasterNoSuffix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const rows = ref<any>();
|
||||
|
||||
const props = defineProps({
|
||||
rowId: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
async function fetchHistoryPos(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgPosHistory(id))
|
||||
.then((res) => {
|
||||
const data: HistoryPos[] = res.data.result;
|
||||
const list = data.map((e: HistoryPos) => ({
|
||||
...e,
|
||||
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
|
||||
posMasterNoPrefix: e.posMasterNoPrefix ?? "-",
|
||||
posMasterNo: e.posMasterNo ?? "-",
|
||||
posMasterNoSuffix: e.posMasterNoSuffix ?? "-",
|
||||
}));
|
||||
rows.value = list;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
modal.value && props.rowId && fetchHistoryPos(props.rowId);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal">
|
||||
<q-card style="width: 700px; max-width: 80vw">
|
||||
<Header
|
||||
:tittle="'ประวัติตำแหน่ง'"
|
||||
:close="
|
||||
() => {
|
||||
modal = false;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pt-none q-pa-sm">
|
||||
<d-table
|
||||
flat
|
||||
bordered
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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 == 'no'">
|
||||
{{
|
||||
store.typeOrganizational === "current"
|
||||
? props.rowIndex + 1
|
||||
: props.rowIndex + 1 == 1
|
||||
? "1 (แบบร่าง)"
|
||||
: props.rowIndex + 1 == 2
|
||||
? "2 (ปัจจุบัน)"
|
||||
: props.rowIndex + 1
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
318
src/modules/16_positionEmployee/components/DialogMovePos.vue
Normal file
318
src/modules/16_positionEmployee/components/DialogMovePos.vue
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
OrgTree,
|
||||
PosMaster2,
|
||||
} from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
import type {
|
||||
MovePos,
|
||||
FilterMaster,
|
||||
} from "@/modules/16_positionEmployee/interface/request/organizational";
|
||||
import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
|
||||
|
||||
import HeaderDialog from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = usePositionEmp();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
|
||||
const totalPage = defineModel<number>("totalPage", { required: true });
|
||||
const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
|
||||
const columns = defineModel<QTableProps[]>("columns", {});
|
||||
const rows = defineModel<PosMaster2[]>("rows", { required: true });
|
||||
|
||||
const props = defineProps({
|
||||
fetchDataTree: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
rowId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
mainTree: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const title = ref<string>("ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน");
|
||||
const filterTree = ref<string>("");
|
||||
const filterRef = ref();
|
||||
const selectedTree = ref<string>("");
|
||||
const levelTree = ref<number>(0);
|
||||
|
||||
const filterTable = ref<string>("");
|
||||
const selectedFilter = ref<PosMaster2[]>([]);
|
||||
|
||||
function resetFilter() {
|
||||
filterTree.value = "";
|
||||
filterRef.value.focus();
|
||||
}
|
||||
|
||||
function updateSelected(data: DataTree) {
|
||||
levelTree.value = data.orgLevel;
|
||||
selectedTree.value = data.orgTreeId;
|
||||
}
|
||||
|
||||
const isDisable = computed(() => {
|
||||
if (selectedTree.value === "" && selectedFilter.value.length === 0) {
|
||||
return true;
|
||||
} else return false;
|
||||
});
|
||||
|
||||
function onClickMovePos() {
|
||||
if (selectedTree.value === "" || selectedTree.value === null) {
|
||||
console.log("เลือกหน่วยงาน");
|
||||
dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่จะย้ายไป");
|
||||
} else if (selectedFilter.value.length === 0) {
|
||||
console.log("เลือกตำแห่นง");
|
||||
dialogMessageNotify($q, "กรุณาเลือกตำแห่นงที่จะย้าย");
|
||||
} else {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const position = selectedFilter.value.map((e: PosMaster2) => e.id);
|
||||
const body: MovePos = {
|
||||
id: selectedTree.value,
|
||||
type: levelTree.value,
|
||||
positionMaster: position,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.orgPosMove, body)
|
||||
.then(() => {
|
||||
props.fetchDataTree?.(store.draftId);
|
||||
modal.value = false;
|
||||
success($q, "ย้ายตำแหน่งสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการย้ายตำแหน่ง",
|
||||
"ต้องการยืนยันการย้ายตำแหน่งนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
reqMaster.value.page = 1;
|
||||
filterTree.value = "";
|
||||
|
||||
title.value = `ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน ${props.mainTree.orgName}`;
|
||||
if (modal.value && props.type === "SINGER") {
|
||||
const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
|
||||
selectedFilter.value = data;
|
||||
selectedTree.value = "";
|
||||
} else {
|
||||
selectedFilter.value = [];
|
||||
selectedTree.value = "";
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" full-width persistent>
|
||||
<q-card>
|
||||
<HeaderDialog :tittle="title" :close="() => (modal = false)" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pt-none bg-grey-2 q-pa-sm">
|
||||
<div class="row">
|
||||
<q-card bordered class="col-12 col-sm-8 q-pa-sm">
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||
>เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
|
||||
>
|
||||
<q-space />
|
||||
|
||||
<div>
|
||||
<q-input outlined dense v-model="filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
flat
|
||||
bordered
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:filter="filterTable"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
selection="multiple"
|
||||
v-model:selected="selectedFilter"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</q-td>
|
||||
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{
|
||||
(reqMaster.page - 1) * Number(reqMaster.pageSize) +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="reqMaster.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="totalPage"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
bordered
|
||||
class="col-12 col-sm-4 scroll q-pa-sm"
|
||||
style="height: 750px"
|
||||
>
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||
>เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
|
||||
>
|
||||
</q-toolbar>
|
||||
|
||||
<q-input
|
||||
ref="filterRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="filterTree"
|
||||
label="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filterTree !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-tree
|
||||
class="q-pa-md q-gutter-sm"
|
||||
dense
|
||||
default-expand-all
|
||||
selected-color="primary"
|
||||
:nodes="nodeTree"
|
||||
node-key="orgTreeId"
|
||||
label-key="labelName"
|
||||
:filter="filterTree"
|
||||
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
||||
no-nodes-label="ไม่มีข้อมูล"
|
||||
>
|
||||
<template v-slot:default-header="prop">
|
||||
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
:active="selectedTree == prop.node.orgTreeId"
|
||||
@click.stop="updateSelected(prop.node)"
|
||||
active-class="my-list-link text-primary text-weight-medium"
|
||||
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||
>
|
||||
<div>
|
||||
<div class="text-weight-medium">
|
||||
{{ prop.node.orgTreeName }}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
|
||||
{{
|
||||
prop.node.orgTreeShortName == null
|
||||
? null
|
||||
: prop.node.orgTreeShortName
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-tree>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
unelevated
|
||||
label="ย้ายตำแหน่ง"
|
||||
color="public"
|
||||
@click="onClickMovePos"
|
||||
class="q-px-md"
|
||||
:disable="isDisable"
|
||||
>
|
||||
<q-tooltip>ย้ายตำแหน่ง</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-list-link {
|
||||
color: rgb(118, 168, 222);
|
||||
border-radius: 5px;
|
||||
background: #a3d3fb48 !important;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(175, 185, 196, 0.217);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** import type*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
FormDetailPosition,
|
||||
Position,
|
||||
} from "@/modules/16_positionEmployee/interface/index/organizational";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
|
||||
/**use*/
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const store = usePositionEmp();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
/**Props*/
|
||||
const modal = defineModel<boolean>("positionDetail", { required: true });
|
||||
const prosp = defineProps({
|
||||
dataDetailPos: { type: Object, require: true },
|
||||
});
|
||||
|
||||
/** formData*/
|
||||
const formData = reactive<FormDetailPosition>({
|
||||
positionNo: "", //*เลขที่ตำแหน่ง
|
||||
positionType: "", //*ตำแหน่งประเภท
|
||||
positionPathSide: "", //*ตำแหน่งในสายงาน
|
||||
positionLine: "", //*สายงาน
|
||||
positionSide: "", //*ด้าน/สาขา
|
||||
positionLevel: "", //*ระดับตำแหน่ง
|
||||
positionExecutive: "", //*ตำแหน่งทางการบริหาร
|
||||
positionExecutiveSide: "", //*ด้านทางการบริหาร
|
||||
status: "", //*สถานะตำแหน่ง
|
||||
});
|
||||
|
||||
// const columns = ref<QTableProps["columns"]>([
|
||||
// {
|
||||
// name: "no",
|
||||
// align: "left",
|
||||
// label: "ลำดับ",
|
||||
// sortable: false,
|
||||
// field: "no",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "positionName",
|
||||
// align: "left",
|
||||
// label: "ตำแหน่งในสายงาน",
|
||||
// sortable: true,
|
||||
// field: "positionName",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "positionField",
|
||||
// align: "left",
|
||||
// label: "สายงาน",
|
||||
// sortable: true,
|
||||
// field: "positionField",
|
||||
// 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: "posLevelName",
|
||||
// align: "left",
|
||||
// label: "ระดับตำแหน่ง",
|
||||
// sortable: true,
|
||||
// field: "posLevelName",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "posExecutiveName",
|
||||
// align: "left",
|
||||
// label: "ตำแหน่งทางการบริหาร",
|
||||
// sortable: true,
|
||||
// field: "posExecutiveName",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "positionExecutiveField",
|
||||
// align: "left",
|
||||
// label: "ด้านทางการบริหาร",
|
||||
// sortable: true,
|
||||
// field: "positionExecutiveField",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "positionArea",
|
||||
// align: "left",
|
||||
// label: "ด้าน/สาขา",
|
||||
// sortable: true,
|
||||
// field: "positionArea",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// ]);
|
||||
// const row = ref<Position[]>([]);
|
||||
|
||||
/** function ปิด popup*/
|
||||
function close() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
/** callblack function ทำเมื่อเปิด popup set เลขที่ตำแหน่ง และสถานะตำแหน่ง */
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value == true) {
|
||||
if (prosp.dataDetailPos) {
|
||||
formData.positionNo = prosp.dataDetailPos.posMasterNo;
|
||||
formData.status =
|
||||
store.typeOrganizational === "current"
|
||||
? "ปกติ"
|
||||
: store.typeOrganizational === "draft"
|
||||
? "แบบร่าง"
|
||||
: "ยุบเลิก";
|
||||
formData.positionType = prosp.dataDetailPos.posTypeName;
|
||||
formData.positionPathSide = prosp.dataDetailPos.positionName;
|
||||
formData.positionLine = prosp.dataDetailPos.positionField;
|
||||
formData.positionSide = prosp.dataDetailPos.positionArea
|
||||
? prosp.dataDetailPos.positionArea
|
||||
: "-";
|
||||
formData.positionLevel = prosp.dataDetailPos.posLevelName;
|
||||
formData.positionExecutive = prosp.dataDetailPos.posExecutiveName
|
||||
? prosp.dataDetailPos.posExecutiveName
|
||||
: "-";
|
||||
formData.positionExecutiveSide = prosp.dataDetailPos
|
||||
.positionExecutiveField
|
||||
? prosp.dataDetailPos.positionExecutiveField
|
||||
: "-";
|
||||
|
||||
// row.value = prosp.dataDetailPos.positions.map((e: Position) => ({
|
||||
// ...e,
|
||||
// positionName: e.positionName ? e.positionName : "-",
|
||||
// positionField: e.positionField ? e.positionField : "-",
|
||||
// posTypeName: e.posTypeName ? e.posTypeName : "-",
|
||||
// posLevelName: e.posLevelName ? e.posLevelName : "-",
|
||||
// posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
|
||||
// positionExecutiveField: e.positionExecutiveField
|
||||
// ? e.positionExecutiveField
|
||||
// : "-",
|
||||
// positionArea: e.positionArea ? e.positionArea : "-",
|
||||
// }));
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card :style="$q.screen.gt.md ? 'min-width: 40vw' : 'min-width: 80vw'">
|
||||
<DialogHeader :tittle="`รายละเอียดตำแหน่ง`" :close="close" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="q-px-md">
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">
|
||||
<div>
|
||||
<p>เลขที่ตำแหน่ง</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.positionNo }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">
|
||||
<div>
|
||||
<p>ตำแหน่งประเภท</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.positionType }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">
|
||||
<div>
|
||||
<p>ตำแหน่งในสายงาน</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.positionPathSide }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">
|
||||
<div>
|
||||
<p>สายงาน</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.positionLine }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">
|
||||
<div>
|
||||
<p>ด้าน/สาขา</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.positionSide }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">
|
||||
<div>
|
||||
<p>ระดับตำแหน่ง</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.positionLevel }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">
|
||||
<div>
|
||||
<p>ตำแหน่งทางการบริหาร</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.positionExecutive }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">
|
||||
<div>
|
||||
<p>ด้านทางการบริหาร</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.positionExecutiveSide }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">
|
||||
<div>
|
||||
<p>สถานะตำแหน่ง</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.status }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
flat
|
||||
:columns="columns"
|
||||
:rows="row"
|
||||
row-key="id"
|
||||
dense
|
||||
hide-bottom
|
||||
class="custom-header-table-expand"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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 == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,726 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
Position,
|
||||
SeaechResult,
|
||||
FormPositionFilter,
|
||||
} from "@/modules/16_positionEmployee/interface/index/organizational";
|
||||
import type {
|
||||
DataOption,
|
||||
NewPagination,
|
||||
} from "@/modules/16_positionEmployee/interface/index/Main";
|
||||
import type {
|
||||
OptionType,
|
||||
OptionLevel,
|
||||
SelectPerson,
|
||||
TypePos,
|
||||
} from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
|
||||
/** importCompoonents*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/** import*Store*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = usePositionEmp();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
success,
|
||||
hideLoader,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
fetchActive: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
getSummary: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
dataDetailPos: { type: Object, require: true },
|
||||
});
|
||||
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const isDisValidate = ref<boolean>(false);
|
||||
const typeOpsMain = ref<DataOption[]>([]);
|
||||
const levelOpsMain = ref<DataOption[]>([]);
|
||||
const typeOps = ref<DataOption[]>([]);
|
||||
const levelOps = ref<DataOption[]>([]);
|
||||
const dataLevel = ref<TypePos[]>([]);
|
||||
const selected = ref<Position[]>([]);
|
||||
const isSit = ref<boolean>(false);
|
||||
|
||||
const formData = reactive<FormPositionFilter>({
|
||||
positionNo: "", //*เลขที่ตำแหน่ง
|
||||
positionType: "", //*เลขที่ตำแหน่ง
|
||||
positionLevel: "", //*เลขที่ตำแหน่ง
|
||||
personal: "", //*เลขที่ตำแหน่ง
|
||||
position: "", //*เลขที่ตำแหน่ง
|
||||
status: "",
|
||||
});
|
||||
|
||||
/** Table*/
|
||||
const visibleColumnsResult = ref<String[]>([
|
||||
"no",
|
||||
"citizenId",
|
||||
"name",
|
||||
"posTypeName",
|
||||
"posLevelName",
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "positionName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionField",
|
||||
align: "left",
|
||||
label: "สายงาน",
|
||||
sortable: true,
|
||||
field: "positionField",
|
||||
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: "posLevelName",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posLevelName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posExecutiveName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งทางการบริหาร",
|
||||
sortable: true,
|
||||
field: "posExecutiveName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionExecutiveField",
|
||||
align: "left",
|
||||
label: "ด้านทางการบริหาร",
|
||||
sortable: true,
|
||||
field: "positionExecutiveField",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionArea",
|
||||
align: "left",
|
||||
label: "ด้าน/สาขา",
|
||||
sortable: true,
|
||||
field: "positionArea",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columnsResult = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขบัตรประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
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: "positionName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "positionName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevelName",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posLevelName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const row = ref<Position[]>([]);
|
||||
const rowResult = ref<SeaechResult[]>([]);
|
||||
|
||||
/** function closePopup*/
|
||||
function close() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
/** function เรียกข้อมูลประเภทตำแหน่ง*/
|
||||
async function fetchType() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgPosType)
|
||||
.then((res) => {
|
||||
dataLevel.value = res.data.result;
|
||||
typeOpsMain.value = res.data.result.map((e: OptionType) => ({
|
||||
id: e.id,
|
||||
name: e.posTypeName,
|
||||
}));
|
||||
typeOps.value = typeOpsMain.value;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ส่งค่า css ออกไปตามเงื่อนไข
|
||||
* @param val true/false
|
||||
*/
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
|
||||
/** function เรียกข้แมูลระดับตำแหน่ง*/
|
||||
function updateSelectType(val: string) {
|
||||
const listLevel: any = dataLevel.value.find((e: TypePos) => e.id === val);
|
||||
levelOpsMain.value = listLevel?.posLevels.map((e: OptionLevel) => ({
|
||||
id: e.id,
|
||||
name: e.posLevelName,
|
||||
}));
|
||||
levelOps.value = levelOpsMain.value;
|
||||
formData.positionLevel = "";
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function validateForm() {
|
||||
if (selected.value.length === 0) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกรายการตำแหน่ง");
|
||||
} else if (selectedProfile.value.length === 0) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกคนครอง");
|
||||
} else {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** function ยืนยันการบันทึกข้อมูล */
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => {
|
||||
const body = {
|
||||
posMaster: props.dataDetailPos?.id, //*id อัตรากำลัง
|
||||
position: selected.value[0]?.id, //*id ตำแหน่ง
|
||||
profileId: selectedProfile.value[0]?.id, //*id profile
|
||||
isSit: isSit.value, //*นั่งทับที่ไหม
|
||||
};
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.orgProfile, body)
|
||||
.then(() => {
|
||||
props.fetchDataTable?.(store.treeId, store.level, false);
|
||||
props.getSummary();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
modal.value = await false;
|
||||
close();
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเลือกคนครอง",
|
||||
"ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
const page = ref<number>(1);
|
||||
const pageSize = ref<number>(10);
|
||||
const totalPage = ref<number>(0);
|
||||
const selectedProfile = ref<SeaechResult[]>([]);
|
||||
/** functiuon ค้นหาคนครอง */
|
||||
async function searchData() {
|
||||
showLoader();
|
||||
const reqBody = {
|
||||
posTypeId: formData.positionType, // id ประเภทตำแหน่ง
|
||||
posLevelId: formData.positionLevel, // id ระดับตำแหน่ง
|
||||
position: formData.position, // ตำแหน่ง
|
||||
page: page.value, //*หน้า
|
||||
pageSize: pageSize.value, //*จำนวนแถวต่อหน้า
|
||||
keyword: formData.personal, //นามสกุล ชื่อ สกุล เลขบัตร
|
||||
};
|
||||
await http
|
||||
.post(config.API.orgSearchProfile, reqBody)
|
||||
.then((res) => {
|
||||
totalPage.value = Math.ceil(res.data.result.total / pageSize.value);
|
||||
const list = res.data.result.data.map((e: SelectPerson) => ({
|
||||
id: e.id,
|
||||
citizenId: e.citizenId,
|
||||
name: `${e.prefix + e.firstName + " " + e.lastName}`,
|
||||
posTypeName: e.posType ?? "-",
|
||||
positionName: e.position ?? "-",
|
||||
posLevelName: e.posLevel ?? "-",
|
||||
}));
|
||||
rowResult.value = list;
|
||||
})
|
||||
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** function update PageSize*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
pageSize.value = newPagination.rowsPerPage;
|
||||
page.value = 1;
|
||||
}
|
||||
|
||||
/** function เคลียร์Form*/
|
||||
function clearForm() {
|
||||
formData.positionType = "";
|
||||
formData.positionLevel = "";
|
||||
formData.personal = "";
|
||||
formData.position = "";
|
||||
row.value = [];
|
||||
rowResult.value = [];
|
||||
selected.value = [];
|
||||
selectedProfile.value = [];
|
||||
isSit.value = false;
|
||||
}
|
||||
|
||||
/** function เคลียร์ตำแหน่ง*/
|
||||
function clearPosition() {
|
||||
formData.positionType = "";
|
||||
formData.positionLevel = "";
|
||||
}
|
||||
|
||||
/** callback function ทำงานเมื่อเปิด popup*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
if (modal.value == true) {
|
||||
await clearForm();
|
||||
await fetchType();
|
||||
|
||||
if (props.dataDetailPos) {
|
||||
formData.positionNo = props.dataDetailPos.posMasterNo;
|
||||
formData.status =
|
||||
store.typeOrganizational === "current"
|
||||
? "ปกติ"
|
||||
: store.typeOrganizational === "draft"
|
||||
? "แบบร่าง"
|
||||
: "ยุบเลิก";
|
||||
row.value = props.dataDetailPos.positions.map((e: Position) => ({
|
||||
...e,
|
||||
positionName: e.positionName ? e.positionName : "-",
|
||||
positionField: e.positionField ? e.positionField : "-",
|
||||
posTypeName: e.posTypeName ? e.posTypeName : "-",
|
||||
posLevelName: e.posLevelName ? e.posLevelName : "-",
|
||||
posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
|
||||
positionExecutiveField: e.positionExecutiveField
|
||||
? e.positionExecutiveField
|
||||
: "-",
|
||||
positionArea: e.positionArea ? e.positionArea : "-",
|
||||
}));
|
||||
if (row.value.length === 1) {
|
||||
selected.value.push(row.value[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/** callback function ทำงานการค้นหาข้อมุลคนครองเมื่อมีการ update Pagination*/
|
||||
watch([() => page.value, () => pageSize.value], () => {
|
||||
searchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 80vw">
|
||||
<form @submit.prevent="validateForm">
|
||||
<DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="fixed-height">
|
||||
<div class="q-px-md">
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="text-bold text-body1">
|
||||
<p>เลขที่ตำแหน่ง</p>
|
||||
</div>
|
||||
<div class="text-grey-8 q-ml-sm text-body1">
|
||||
<p>{{ formData.positionNo }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
bordered
|
||||
class="row col-12"
|
||||
style="border: 1px solid #d6dee1"
|
||||
>
|
||||
<div
|
||||
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
||||
>
|
||||
รายการตำแหน่ง
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
|
||||
<div class="q-pa-sm col-12">
|
||||
<d-table
|
||||
flat
|
||||
:columns="columns"
|
||||
:rows="row"
|
||||
row-key="id"
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-header-table"
|
||||
selection="single"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.checkBox"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th class="text-center"> </q-th>
|
||||
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td class="text-center">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</q-td>
|
||||
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
bordered
|
||||
class="row col-12 q-mt-sm"
|
||||
style="border: 1px solid #d6dee1"
|
||||
>
|
||||
<div
|
||||
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
||||
>
|
||||
ค้นหาคนครอง
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm q-pa-sm">
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
ref="positionExecutiveFieldRef"
|
||||
v-model="formData.personal"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#search"
|
||||
label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
ref="positionRef"
|
||||
v-model="formData.position"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#position"
|
||||
label="ตำแหน่งในสายงาน"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
ref="positionTypeRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
label="ประเภทตำแหน่ง"
|
||||
v-model="formData.positionType"
|
||||
:options="typeOps"
|
||||
emit-value
|
||||
dense
|
||||
@update:model-value="updateSelectType"
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
><template v-if="formData.positionType" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="clearPosition()"
|
||||
class="cursor-pointer"
|
||||
/> </template
|
||||
></q-select>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
ref="positionLevelRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
label="ระดับตำแหน่ง"
|
||||
v-model="formData.positionLevel"
|
||||
:disable="formData.positionType == ''"
|
||||
:options="levelOps"
|
||||
emit-value
|
||||
dense
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-if="formData.positionLevel" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="formData.positionLevel = ''"
|
||||
class="cursor-pointer"
|
||||
/> </template
|
||||
></q-select>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-btn
|
||||
label="ค้นหา"
|
||||
color="teal-5"
|
||||
class="full-height"
|
||||
icon="search"
|
||||
@click="searchData"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-select
|
||||
for="#select"
|
||||
v-model="visibleColumnsResult"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columnsResult"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
/>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
flat
|
||||
:columns="columnsResult"
|
||||
:rows="rowResult"
|
||||
row-key="id"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:paging="true"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
selection="single"
|
||||
v-model:selected="selectedProfile"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width />
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{
|
||||
col.label
|
||||
}}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{
|
||||
(page - 1) * Number(pageSize) +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="totalPage"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="isSit"
|
||||
label="ทับที่"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn type="submit" :label="`ยืนยัน`" color="public" />
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fixed-height {
|
||||
overflow-y: auto;
|
||||
height: 80vh;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = usePositionEmp();
|
||||
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
|
||||
useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("sortPosition", { required: true });
|
||||
const rows = ref<any>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
required: true,
|
||||
label: "ชื่อ",
|
||||
align: "left",
|
||||
field: "name",
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
fetchDataTable: Function,
|
||||
});
|
||||
|
||||
function onDrop(from: any, to: any) {
|
||||
onDropRow(from, to);
|
||||
}
|
||||
|
||||
function onDropRow(from: any, to: any) {
|
||||
rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
|
||||
}
|
||||
|
||||
function save() {
|
||||
dialogConfirm($q, () => {
|
||||
const data = rows.value;
|
||||
const dataId = data.map((item: any) => item.id);
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.orgPosSort, {
|
||||
id: store.treeId,
|
||||
type: store.level,
|
||||
sortId: dataId,
|
||||
})
|
||||
.then((res) => {
|
||||
modal.value = false;
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchDataTable?.(store.treeId, store.level, false);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.orgPosMasterList, {
|
||||
id: store.treeId,
|
||||
type: store.level,
|
||||
isAll: false,
|
||||
page: 1,
|
||||
pageSize: 100,
|
||||
keyword: "",
|
||||
revisionId: store.draftId,
|
||||
})
|
||||
.then((res) => {
|
||||
const dataList = res.data.result.data;
|
||||
const dataMap = dataList.map((item: any) => ({
|
||||
id: item.id,
|
||||
name: `${item.orgShortname}${item.posMasterNoPrefix}${item.posMasterNo}${item.posMasterNoSuffix}`,
|
||||
posMasterNoPrefix: item.posMasterNoPrefix,
|
||||
posMasterNo: item.posMasterNo,
|
||||
posMasterNoSuffix: item.posMasterNoSuffix,
|
||||
}));
|
||||
rows.value = dataMap;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value == true) {
|
||||
getData();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 50vw">
|
||||
<DialogHeader
|
||||
:tittle="`จัดลำดับตำแหน่ง`"
|
||||
:close="() => (modal = false)"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<q-table
|
||||
v-if="rows.length > 0"
|
||||
v-draggable-table="{
|
||||
options: {
|
||||
mode: 'row',
|
||||
onlyBody: true,
|
||||
dragHandler: 'th,td',
|
||||
},
|
||||
onDrop,
|
||||
}"
|
||||
flat
|
||||
bordered
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:rows-per-page-options="[100]"
|
||||
row-key="orgTreeId"
|
||||
hide-bottom
|
||||
hide-pagination
|
||||
hide-header
|
||||
/>
|
||||
<div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
:disable="rows.length === 0"
|
||||
type="submit"
|
||||
:label="`บันทึก`"
|
||||
color="public"
|
||||
@click="save"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
413
src/modules/16_positionEmployee/components/DialogSuccession.vue
Normal file
413
src/modules/16_positionEmployee/components/DialogSuccession.vue
Normal file
|
|
@ -0,0 +1,413 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { NewPagination } from "@/modules/16_positionEmployee/interface/index/Main";
|
||||
import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
|
||||
import type {
|
||||
OrgTree,
|
||||
PosMaster,
|
||||
} from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
import type {
|
||||
FilterMaster,
|
||||
Inherit,
|
||||
} from "@/modules/16_positionEmployee/interface/request/organizational";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = usePositionEmp();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
rowId: { type: String, default: "" },
|
||||
});
|
||||
|
||||
/*************************** Tree ***********************************/
|
||||
const filterTree = ref<string>("");
|
||||
const nodeTree = ref<OrgTree[]>([]);
|
||||
const selectedTree = ref<string>("");
|
||||
const filterRef = ref();
|
||||
const levelTree = ref<number>(0);
|
||||
|
||||
/** function เรียกข้อมูล Tree แบบ ปัจจุบัน*/
|
||||
async function fetchTree() {
|
||||
showLoader();
|
||||
const id: string = store.activeId ? store.activeId?.toString() : "";
|
||||
await http
|
||||
.get(config.API.orgByid(id))
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
nodeTree.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** resetFilterTree*/
|
||||
function resetFilter() {
|
||||
filterTree.value = "";
|
||||
filterRef.value.focus();
|
||||
}
|
||||
|
||||
/** function เลือกหน่วยงาน*/
|
||||
async function updateSelected(data: DataTree) {
|
||||
levelTree.value = data.orgLevel;
|
||||
selectedTree.value = data.orgTreeId;
|
||||
reqMaster.id = await data.orgTreeId;
|
||||
reqMaster.type = await data.orgLevel;
|
||||
await fetchTable();
|
||||
}
|
||||
|
||||
/*************************** TABLE ***********************************/
|
||||
/** columns*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posMasterNo",
|
||||
align: "left",
|
||||
label: "เลขที่ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posMasterNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const rows = ref<PosMaster[]>([]);
|
||||
const reqMaster = reactive<FilterMaster>({
|
||||
id: "",
|
||||
type: 0,
|
||||
isAll: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
revisionId: store.activeId,
|
||||
});
|
||||
const totalRow = ref<number>(0);
|
||||
const selectedPos = ref<PosMaster[]>([]);
|
||||
|
||||
/** function เรียกข้อมูล Table Position*/
|
||||
async function fetchTable() {
|
||||
selectedPos.value = [];
|
||||
await http
|
||||
.post(config.API.orgPosMasterList, reqMaster)
|
||||
.then((res) => {
|
||||
totalRow.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
|
||||
const data = res.data.result.data;
|
||||
const list = data.map((e: PosMaster) => ({
|
||||
...e,
|
||||
posMasterNo:
|
||||
e.orgShortname +
|
||||
e.posMasterNoPrefix +
|
||||
e.posMasterNo +
|
||||
e.posMasterNoSuffix,
|
||||
}));
|
||||
rows.value = list;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
reqMaster.pageSize = newPagination.rowsPerPage;
|
||||
reqMaster.page = 1;
|
||||
}
|
||||
|
||||
/** funcion ค้นหาข้อมูลใน Table*/
|
||||
async function filterKeyword() {
|
||||
reqMaster.page = 1;
|
||||
fetchTable();
|
||||
}
|
||||
|
||||
/** function ยืนยันกาสืบทอดตำแหน่ง */
|
||||
function onClickConfirm() {
|
||||
if (selectedPos.value.length === 0) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกตำแหน่งสืบทอด");
|
||||
} else {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
console.log(props.rowId, selectedPos.value[0].id);
|
||||
const body: Inherit = {
|
||||
draftPositionId: props.rowId,
|
||||
publishPositionId: selectedPos.value[0].id,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.orgPosDNA, body)
|
||||
.then(() => {
|
||||
success($q, "การสืบทอดตำแหน่งสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการสืบทอดตำแหน่ง",
|
||||
"ต้องการยืนยันการสืบทอดตำแหน่งนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/** callblck function ทำการ fetch ข้อมูล tree เมื่อเปิด popup*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
modal.value ? await fetchTree() : clearForm();
|
||||
}
|
||||
);
|
||||
|
||||
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
|
||||
watch([() => reqMaster.page, () => reqMaster.pageSize], async () => {
|
||||
await fetchTable();
|
||||
});
|
||||
|
||||
/** function clear ข้อมูล*/
|
||||
function clearForm() {
|
||||
nodeTree.value = [];
|
||||
rows.value = [];
|
||||
selectedTree.value = "";
|
||||
reqMaster.id = "";
|
||||
reqMaster.type = 0;
|
||||
reqMaster.isAll = false;
|
||||
reqMaster.page = 1;
|
||||
reqMaster.pageSize = 10;
|
||||
reqMaster.keyword = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" full-width persistent>
|
||||
<q-card>
|
||||
<Header
|
||||
:tittle="'เลือกตำแหน่งที่ต้องการสืบทอดจากโครงสร้างปัจจุบัน'"
|
||||
:close="
|
||||
() => {
|
||||
modal = false;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pt-none q-pa-sm bg-grey-2">
|
||||
<div class="row">
|
||||
<q-card
|
||||
bordered
|
||||
class="col-12 col-sm-4 scroll q-pa-sm"
|
||||
style="height: 75vh"
|
||||
>
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||
>เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
|
||||
>
|
||||
</q-toolbar>
|
||||
|
||||
<q-input
|
||||
ref="filterRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="filterTree"
|
||||
label="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filterTree !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-tree
|
||||
class="q-pa-md q-gutter-sm"
|
||||
dense
|
||||
default-expand-all
|
||||
selected-color="primary"
|
||||
:nodes="nodeTree"
|
||||
node-key="orgTreeId"
|
||||
label-key="labelName"
|
||||
:filter="filterTree"
|
||||
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
||||
no-nodes-label="ไม่มีข้อมูล"
|
||||
>
|
||||
<template v-slot:default-header="prop">
|
||||
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
:active="selectedTree == prop.node.orgTreeId"
|
||||
@click.stop="updateSelected(prop.node)"
|
||||
active-class="my-list-link text-primary text-weight-medium"
|
||||
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||
>
|
||||
<div>
|
||||
<div class="text-weight-medium">
|
||||
{{ prop.node.orgTreeName }}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
|
||||
{{
|
||||
prop.node.orgTreeShortName == null
|
||||
? null
|
||||
: prop.node.orgTreeShortName
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-tree>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered class="col-12 col-sm-8 q-pa-sm">
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||
>เลือกตำแหน่งที่ต้องการสืบทอด</q-toolbar-title
|
||||
>
|
||||
<q-space />
|
||||
|
||||
<div>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="reqMaster.keyword"
|
||||
label="ค้นหา"
|
||||
@keyup.enter="filterKeyword"
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
flat
|
||||
bordered
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
ref="table"
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
selection="single"
|
||||
v-model:selected="selectedPos"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width></q-th>
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</q-td>
|
||||
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="reqMaster.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="totalRow"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-list-link {
|
||||
color: rgb(118, 168, 222);
|
||||
border-radius: 5px;
|
||||
background: #a3d3fb48 !important;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(175, 185, 196, 0.217);
|
||||
}
|
||||
</style>
|
||||
625
src/modules/16_positionEmployee/components/TreeMain.vue
Normal file
625
src/modules/16_positionEmployee/components/TreeMain.vue
Normal file
|
|
@ -0,0 +1,625 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type { ListMenu } from "@/modules/16_positionEmployee/interface/index/Main";
|
||||
import type { OrgTree } from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
|
||||
|
||||
/** importStore*/
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = usePositionEmp();
|
||||
const {
|
||||
dialogRemove,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
date2Thai,
|
||||
} = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
|
||||
const nodeId = defineModel<string>("nodeId", { required: true });
|
||||
const shortName = defineModel<string>("shortName", { required: true });
|
||||
const props = defineProps({
|
||||
fetchDataTree: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
/** ListMenuTree*/
|
||||
const listAdd = ref<ListMenu[]>([
|
||||
{
|
||||
label: "เพิ่ม",
|
||||
icon: "add",
|
||||
type: "ADD",
|
||||
color: "primary",
|
||||
},
|
||||
{
|
||||
label: "แก้ไข",
|
||||
icon: "edit",
|
||||
type: "EDIT",
|
||||
color: "edit",
|
||||
},
|
||||
{
|
||||
label: "ลบ",
|
||||
icon: "delete",
|
||||
type: "DEL",
|
||||
color: "red",
|
||||
},
|
||||
|
||||
{
|
||||
label: "ประวัติ",
|
||||
icon: "history",
|
||||
type: "HISTORY",
|
||||
color: "purple",
|
||||
},
|
||||
{
|
||||
label: "จัดลำดับ",
|
||||
icon: "mdi-sort",
|
||||
type: "SORT",
|
||||
color: "blue-6",
|
||||
},
|
||||
{
|
||||
label: "ดูรายละเอียด",
|
||||
icon: "mdi-eye",
|
||||
type: "DETAIL",
|
||||
color: "blue-9",
|
||||
},
|
||||
]);
|
||||
|
||||
const filter = ref<string>("");
|
||||
const nodes = ref<Array<OrgTree>>([]);
|
||||
const dataSort = ref<Array<any>>([]);
|
||||
const lazy = ref(nodes);
|
||||
const expanded = ref<Array<any>>([]);
|
||||
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
||||
const noData = ref<string>("ไม่มีข้อมูล");
|
||||
const orgLevel = ref<number>(0);
|
||||
const type = ref<number>(0);
|
||||
const orgId = ref<string>("");
|
||||
|
||||
/**
|
||||
* funtion เลือกข้อมูล Tree
|
||||
* @param data ข่อมูล Tree
|
||||
*/
|
||||
function updateSelected(data: DataTree) {
|
||||
shortName.value = data.orgTreeShortName;
|
||||
|
||||
if (!store.treeId || store.treeId != data.orgTreeId) {
|
||||
store.treeId = data.orgTreeId;
|
||||
store.level = data.orgLevel;
|
||||
|
||||
nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
|
||||
|
||||
data.orgTreeId &&
|
||||
props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
|
||||
/** ดึงข้อมูลสถิติจำนวนด้านบน*/
|
||||
http
|
||||
.post(config.API.orgSummaryEmp, {
|
||||
id: data.orgTreeId, //*Id node
|
||||
type: data.orgLevel, //*ประเภทnode
|
||||
isNode: false, //*นับทั้ง node ไหม
|
||||
})
|
||||
.then(async (res: any) => {
|
||||
const data = await res.data.result;
|
||||
if (data) {
|
||||
store.getSumPosition({
|
||||
totalPosition: data.totalPosition,
|
||||
totalPositionCurrentUse: data.totalPositionCurrentUse,
|
||||
totalPositionCurrentVacant: data.totalPositionCurrentVacant,
|
||||
totalPositionNextUse: data.totalPositionNextUse,
|
||||
totalPositionNextVacant: data.totalPositionNextVacant,
|
||||
totalRootPosition: data.totalPosition,
|
||||
totalRootPositionCurrentUse: data.totalPositionCurrentUse,
|
||||
totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
|
||||
totalRootPositionNextUse: data.totalPositionNextUse,
|
||||
totalRootPositionNextVacant: data.totalPositionNextVacant,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const breakLoop = ref<boolean>(false);
|
||||
|
||||
/**
|
||||
* function แก้ไขโครสร้าง
|
||||
* @param id ID โครงสร้าง
|
||||
* @param type ละดับโครงสร้าง
|
||||
* @param data ข้อมูลโครงสร้าง
|
||||
* @param orgRootCode
|
||||
*/
|
||||
async function edit(id: string, type: string, data: any, orgRootCode: string) {
|
||||
breakLoop.value = false;
|
||||
const targetNodeId = id;
|
||||
|
||||
for (let index = 0; index < nodes.value.length; index++) {
|
||||
const element = nodes.value[index];
|
||||
|
||||
searchAndReplace(element, targetNodeId, data, type, orgRootCode);
|
||||
|
||||
if (breakLoop.value) break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function แก้ไขโครสร้าง
|
||||
* @param treeNode
|
||||
* @param organizationId ID โครงสร้าง
|
||||
* @param data ข้อมูลโครงสร้าง
|
||||
* @param type ละดับโครงสร้าง
|
||||
* @param orgRootCode
|
||||
*/
|
||||
function searchAndReplace(
|
||||
treeNode: any,
|
||||
organizationId: string,
|
||||
data: any,
|
||||
type: string,
|
||||
orgRootCode: string
|
||||
) {
|
||||
if (treeNode.orgTreeId === organizationId) {
|
||||
let newData = {
|
||||
...treeNode,
|
||||
orgTreeName: data[`org${type}Name`],
|
||||
orgTreeShortName: data[`org${type}ShortName`],
|
||||
orgCode:
|
||||
data.orgRootRank == "DEPARTMENT"
|
||||
? data[`org${type}Code`] + "00"
|
||||
: orgRootCode + data[`org${type}Code`],
|
||||
orgTreeCode: data[`org${type}Code`],
|
||||
orgTreePhoneEx: data[`org${type}PhoneEx`],
|
||||
orgTreePhoneIn: data[`org${type}PhoneIn`],
|
||||
orgTreeFax: data[`org${type}Fax`],
|
||||
orgTreeRank: data[`org${type}Rank`],
|
||||
};
|
||||
|
||||
Object.assign(treeNode, newData);
|
||||
breakLoop.value = true;
|
||||
} else if (treeNode.children) {
|
||||
for (const child of treeNode.children) {
|
||||
searchAndReplace(child, organizationId, data, type, orgRootCode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function ลบข้อมูลโครงสร้าง
|
||||
* @param rootId RootID
|
||||
* @param treeId TreeID
|
||||
*/
|
||||
async function deleteUpdate(rootId: string, treeId: string) {
|
||||
breakLoop.value = false;
|
||||
if (rootId) {
|
||||
for (let index = 0; index < nodes.value.length; index++) {
|
||||
const element = nodes.value[index];
|
||||
deleteNode(element, rootId, treeId);
|
||||
|
||||
if (breakLoop.value) break;
|
||||
}
|
||||
} else {
|
||||
nodes.value = nodes.value.filter((x: any) => x.orgTreeId != treeId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function ลบข้อมูลโครงสร้าง
|
||||
* @param treeNode ข้อมูล Tree
|
||||
* @param rootId RootID
|
||||
* @param treeId TreeID
|
||||
*/
|
||||
function deleteNode(treeNode: any, rootId: string, treeId: string): boolean {
|
||||
if (treeNode.orgTreeId === rootId) {
|
||||
const childrenNew = treeNode.children.filter(
|
||||
(x: any) => x.orgTreeId != treeId
|
||||
);
|
||||
let newData = {
|
||||
...treeNode,
|
||||
children: childrenNew,
|
||||
};
|
||||
Object.assign(treeNode, newData);
|
||||
|
||||
breakLoop.value = true;
|
||||
} else if (treeNode.children) {
|
||||
for (const child of treeNode.children) {
|
||||
deleteNode(child, rootId, treeId);
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const modalSortAgency = ref<boolean>(false);
|
||||
const dialogAgency = ref<boolean>(false);
|
||||
const actionType = ref<string>("");
|
||||
const dataNode = ref<any>();
|
||||
const treeId = ref<string>("");
|
||||
|
||||
/**
|
||||
* funcion openPopup เพิ่มหน่วยงาน
|
||||
* @param level ระดับโครงสร้าง
|
||||
* @param node ข้อมูล โครงสร้าง
|
||||
*/
|
||||
function onClickAgency(level: number, node: OrgTree | {}) {
|
||||
dialogAgency.value = !dialogAgency.value;
|
||||
orgLevel.value = level;
|
||||
dataNode.value = node;
|
||||
actionType.value = "ADD";
|
||||
}
|
||||
|
||||
const dialogDetail = ref<boolean>(false);
|
||||
/**
|
||||
* funtion ดูรายละเอียดโครงสร้าง
|
||||
* @param id ID โครงสร้าง
|
||||
* @param level ระดับโครงสร้าง
|
||||
*/
|
||||
function onClickDetail(id: string, level: number) {
|
||||
showLoader();
|
||||
treeId.value = id;
|
||||
dialogDetail.value = !dialogDetail.value;
|
||||
orgLevel.value = level;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup แก้ไขข้อมูลโครงสร้าง
|
||||
* @param node ข้อมูล โครงสร้าง
|
||||
*/
|
||||
async function onClickEdit(node: OrgTree) {
|
||||
console.log(node);
|
||||
|
||||
dialogAgency.value = !dialogAgency.value;
|
||||
actionType.value = "EDIT";
|
||||
orgLevel.value = node.orgLevel;
|
||||
dataNode.value = node;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยื่นยันการลบโครงสร้าง
|
||||
* @param type ระดับโครงสร้าง
|
||||
* @param id ID โครงสร้าง
|
||||
* @param rootId RootID
|
||||
*/
|
||||
async function onClickDel(type: number, id: string, rootId: string) {
|
||||
const level = store.checkLevel(type);
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.orgLevelByid(level.toLocaleLowerCase(), id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
deleteUpdate(rootId, id);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function การจัดลำดับโครงสร้าง
|
||||
* @param id ID โครงสร้าง
|
||||
* @param level ระดับโครงสร้าง
|
||||
*/
|
||||
async function onClickSort(id: string, level: number) {
|
||||
type.value = level;
|
||||
modalSortAgency.value = true;
|
||||
if (id) {
|
||||
breakLoop.value = false;
|
||||
const orgId = id;
|
||||
for (let index = 0; index < nodes.value.length; index++) {
|
||||
const data = nodes.value[index];
|
||||
searchAndReplace(data, orgId);
|
||||
if (breakLoop.value) break;
|
||||
}
|
||||
} else {
|
||||
const dataList = nodes.value;
|
||||
const dataMap = dataList.map((item: any) => ({
|
||||
orgTreeId: item.orgTreeId,
|
||||
orgLevel: item.orgLevel,
|
||||
orgTreeName: item.orgTreeName,
|
||||
orgTreeShortName: item.orgTreeShortName,
|
||||
orgRevisionId: item.orgRevisionId,
|
||||
}));
|
||||
|
||||
dataSort.value = dataMap;
|
||||
}
|
||||
|
||||
function searchAndReplace(data: any, id: string) {
|
||||
if (data.orgTreeId === id) {
|
||||
dataSort.value = data.children;
|
||||
breakLoop.value = true;
|
||||
} else if (data.children) {
|
||||
for (const child of data.children) {
|
||||
searchAndReplace(child, id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function ดูประวัดโครงสร้าง
|
||||
* @param level ระดับโครงสร้าง
|
||||
* @param id ID โครงสร้าง
|
||||
*/
|
||||
function onClickHistory(level: number, id: string) {
|
||||
type.value = level;
|
||||
orgId.value = id;
|
||||
modalHistory.value = true;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => nodeTEST.value,
|
||||
() => {
|
||||
nodes.value = nodeTEST.value;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-12 q-py-sm q-px-sm">
|
||||
<div class="q-gutter-sm">
|
||||
<div class="row q-col-gutter-sm q-pl-sm">
|
||||
<div class="col-2" v-if="store.typeOrganizational === 'draft'">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="onClickAgency(0, {})"
|
||||
>
|
||||
<q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
:class="store.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
|
||||
>
|
||||
<q-input dense outlined v-model="filter" label="ค้นหา">
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/>
|
||||
<q-icon name="search" color="grey-5" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white tree-container q-pa-xs">
|
||||
<q-tree
|
||||
class="q-pa-sm q-gutter-sm"
|
||||
dense
|
||||
default-expand-all
|
||||
:nodes="lazy"
|
||||
node-key="orgTreeId"
|
||||
label-key="labelName"
|
||||
:filter="filter"
|
||||
:no-results-label="notFound"
|
||||
:no-nodes-label="noData"
|
||||
v-model:expanded="expanded"
|
||||
>
|
||||
<template v-slot:default-header="prop">
|
||||
<q-item
|
||||
clickable
|
||||
:active="nodeId == prop.node.orgTreeId"
|
||||
@click.stop="updateSelected(prop.node)"
|
||||
active-class="my-list-link text-primary text-weight-medium"
|
||||
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||
>
|
||||
<div>
|
||||
<div class="text-weight-medium">
|
||||
{{ prop.node.orgTreeName }}
|
||||
</div>
|
||||
<div class="text-weight-light text-grey-8">
|
||||
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
|
||||
{{
|
||||
prop.node.orgTreeShortName == null
|
||||
? null
|
||||
: prop.node.orgTreeShortName
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
v-if="store.typeOrganizational === 'draft'"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-ml-xs"
|
||||
color="grey-13"
|
||||
size="12px"
|
||||
round
|
||||
>
|
||||
<q-menu>
|
||||
<q-list
|
||||
dense
|
||||
v-for="(item, index) in prop.node.orgLevel === 4
|
||||
? listAdd.slice(1, 6)
|
||||
: listAdd"
|
||||
:key="index"
|
||||
style="min-width: 100px"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
item.type === 'EDIT'
|
||||
? onClickEdit(prop.node)
|
||||
: item.type === 'ADD'
|
||||
? onClickAgency(prop.node.orgLevel + 1, prop.node)
|
||||
: item.type === 'DETAIL'
|
||||
? onClickDetail(
|
||||
prop.node.orgTreeId,
|
||||
prop.node.orgLevel
|
||||
)
|
||||
: item.type === 'DEL'
|
||||
? onClickDel(
|
||||
prop.node.orgLevel,
|
||||
prop.node.orgTreeId,
|
||||
prop.node.orgRootId
|
||||
)
|
||||
: item.type === 'SORT'
|
||||
? onClickSort(prop.node.orgRootId, prop.node.orgLevel)
|
||||
: item.type === 'HISTORY'
|
||||
? onClickHistory(
|
||||
prop.node.orgLevel,
|
||||
prop.node.orgTreeId
|
||||
)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<q-item-section avatar style="min-width: 20px">
|
||||
<q-icon
|
||||
size="17px"
|
||||
:color="item.color"
|
||||
:name="item.icon"
|
||||
/>
|
||||
</q-item-section>
|
||||
<div v-if="prop.node.orgLevel === 0">
|
||||
<q-item-section
|
||||
v-if="
|
||||
item.type === 'EDIT' ||
|
||||
item.type === 'DEL' ||
|
||||
item.type === 'HISTORY' ||
|
||||
item.type === 'SORT'
|
||||
"
|
||||
>
|
||||
{{ item.label }}หน่วยงาน
|
||||
</q-item-section>
|
||||
<q-item-section v-else-if="item.type === 'ADD'">
|
||||
{{ item.label }}ส่วนราชการ
|
||||
</q-item-section>
|
||||
<q-item-section v-else>
|
||||
{{ item.label }}
|
||||
</q-item-section>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<q-item-section
|
||||
v-if="
|
||||
item.type === 'ADD' ||
|
||||
item.type === 'EDIT' ||
|
||||
item.type === 'DEL' ||
|
||||
item.type === 'HISTORY' ||
|
||||
item.type === 'SORT'
|
||||
"
|
||||
>{{ item.label }}ส่วนราชการ</q-item-section
|
||||
>
|
||||
<q-item-section v-else>{{ item.label }}</q-item-section>
|
||||
</div>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
v-else
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
size="12px"
|
||||
round
|
||||
>
|
||||
<q-menu>
|
||||
<q-list
|
||||
dense
|
||||
v-for="(item, index) in listAdd.slice(5, 6)"
|
||||
:key="index"
|
||||
style="min-width: 100px"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
|
||||
"
|
||||
>
|
||||
<q-item-section avatar style="min-width: 20px">
|
||||
<q-icon
|
||||
size="17px"
|
||||
:color="item.color"
|
||||
:name="item.icon"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ item.label }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- เพิ่มหน่วยงาน -->
|
||||
<DialogAgency
|
||||
:modal="dialogAgency"
|
||||
:close="onClickAgency"
|
||||
v-model:orgLevel="orgLevel"
|
||||
:fetchDataTree="props.fetchDataTree"
|
||||
:fetchDataTable="props.fetchDataTable"
|
||||
v-model:actionType="actionType"
|
||||
:dataNode="dataNode"
|
||||
:edit="edit"
|
||||
/>
|
||||
|
||||
<!-- รายละเอียดโครงสร้าง -->
|
||||
<DialogStructureDetail
|
||||
v-model:structure-detail="dialogDetail"
|
||||
v-model:treeId="treeId"
|
||||
v-model:orgLevel="orgLevel"
|
||||
/>
|
||||
|
||||
<DialogSortAgency
|
||||
v-model:sort-agency="modalSortAgency"
|
||||
v-model:data="dataSort"
|
||||
:fetchDataTree="props.fetchDataTree"
|
||||
v-model:type="type"
|
||||
/>
|
||||
<DialogHistory
|
||||
v-model:history="modalHistory"
|
||||
v-model:type="type"
|
||||
v-model:org-id="orgId"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tree-container {
|
||||
overflow: auto;
|
||||
height: 73vh;
|
||||
border: 1px solid #e6e6e7;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.my-list-link {
|
||||
color: rgb(118, 168, 222);
|
||||
border-radius: 5px;
|
||||
background: #a3d3fb48 !important;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(175, 185, 196, 0.217);
|
||||
}
|
||||
</style>
|
||||
853
src/modules/16_positionEmployee/components/TreeTable.vue
Normal file
853
src/modules/16_positionEmployee/components/TreeTable.vue
Normal file
|
|
@ -0,0 +1,853 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
import genreport from "@/plugins/genreportxlsx";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
ListMenu,
|
||||
NewPagination,
|
||||
} from "@/modules/16_positionEmployee/interface/index/Main";
|
||||
import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
|
||||
import type {
|
||||
PosMaster2,
|
||||
OrgTree,
|
||||
} from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
import type { DataPosition } from "@/modules/16_positionEmployee/interface/index/organizational";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogFormPosotion from "@/modules/16_positionEmployee/components/DialogFormPosition.vue";
|
||||
import DialogPositionDetail from "@/modules/16_positionEmployee/components/DialogPositionDetail.vue";
|
||||
import DialogSort from "@/modules/16_positionEmployee/components/DialogSortPosition.vue";
|
||||
import DialogMovePos from "@/modules/16_positionEmployee/components/DialogMovePos.vue";
|
||||
import DialogHistoryPos from "@/modules/16_positionEmployee/components/DialogHistoryPos.vue";
|
||||
import DialogSelectPerson from "@/modules/16_positionEmployee/components/DialogSelectPerson.vue";
|
||||
import DialogSuccession from "@/modules/16_positionEmployee/components/DialogSuccession.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = usePositionEmp();
|
||||
const { showLoader, hideLoader, messageError, success, dialogRemove } =
|
||||
useCounterMixin();
|
||||
|
||||
/** prosp*/
|
||||
const nodeTree = defineModel<any>("nodeTree", { required: true });
|
||||
const orgLevel = defineModel<number>("orgLevel", { required: true });
|
||||
const treeId = defineModel<string>("treeId", { required: true });
|
||||
const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
|
||||
const totalPage = defineModel<number>("totalPage", { required: true });
|
||||
const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
|
||||
// const shortName = defineModel<string>("shortName", { required: true });
|
||||
const props = defineProps({
|
||||
filterKeyword: { type: Function, require: true, default: () => {} },
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
require: true,
|
||||
default: () => {},
|
||||
},
|
||||
shortName: { type: String, required: true },
|
||||
fetchDataTree: {
|
||||
type: Function,
|
||||
require: true,
|
||||
default: () => {},
|
||||
},
|
||||
mainTree: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
const modalSelectPerson = ref<boolean>(false);
|
||||
const rowId = ref<string>("");
|
||||
const actionType = ref<string>("");
|
||||
/** ListMenu Table*/
|
||||
const listMenu = ref<ListMenu[]>([
|
||||
{
|
||||
label: "แก้ไข",
|
||||
icon: "edit",
|
||||
type: "EDIT",
|
||||
color: "edit",
|
||||
},
|
||||
{
|
||||
label: "ลบ",
|
||||
icon: "delete",
|
||||
type: "DEL",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
label: "ย้ายตำแหน่ง",
|
||||
icon: "mdi-cursor-move",
|
||||
type: "MOVE",
|
||||
color: "blue-10",
|
||||
},
|
||||
{
|
||||
label: "สืบทอดตำแหน่ง",
|
||||
icon: "mdi-account-multiple-outline",
|
||||
type: "INHERIT",
|
||||
color: "deep-orange",
|
||||
},
|
||||
{
|
||||
label: "ประวัติตำแหน่ง",
|
||||
icon: "history",
|
||||
type: "HISTORY",
|
||||
color: "deep-purple",
|
||||
},
|
||||
]);
|
||||
const document = ref<any>([
|
||||
{
|
||||
name: "บัญชี 1",
|
||||
val: "report1",
|
||||
},
|
||||
{
|
||||
name: "บัญชี 2",
|
||||
val: "report2",
|
||||
},
|
||||
{
|
||||
name: "บัญชี 3",
|
||||
val: "report3",
|
||||
},
|
||||
]);
|
||||
|
||||
/** columns*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posMasterNo",
|
||||
align: "left",
|
||||
label: "เลขที่ตำแหน่ง",
|
||||
sortable: false,
|
||||
field: "posMasterNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
field: "positionName",
|
||||
sortable: false,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posTypeName",
|
||||
align: "left",
|
||||
label: "ประเภทตำแหน่ง",
|
||||
sortable: false,
|
||||
field: "posTypeName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posLevelName",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
sortable: false,
|
||||
field: "posLevelName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionIsSelected",
|
||||
align: "left",
|
||||
label: "คนครอง",
|
||||
sortable: false,
|
||||
field: "positionIsSelected",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const columnsExpand = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "positionName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionField",
|
||||
align: "left",
|
||||
label: "สายงาน",
|
||||
sortable: true,
|
||||
field: "positionField",
|
||||
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: "posLevelName",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posLevelName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posExecutiveName",
|
||||
align: "left",
|
||||
label: "ตำแหน่งทางการบริหาร",
|
||||
sortable: true,
|
||||
field: "posExecutiveName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionExecutiveField",
|
||||
align: "left",
|
||||
label: "ด้านทางการบริหาร",
|
||||
sortable: true,
|
||||
field: "positionExecutiveField",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionArea",
|
||||
align: "left",
|
||||
label: "ด้าน/สาขา",
|
||||
sortable: true,
|
||||
field: "positionArea",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const dialogPosition = ref<boolean>(false);
|
||||
/**
|
||||
* function openPopup เพิ่มอัตรากำลัง
|
||||
* @param type ประเภท
|
||||
* @param id id
|
||||
*/
|
||||
function onClickPosition(type: string, id: string) {
|
||||
rowId.value = id ? id : "";
|
||||
actionType.value = type;
|
||||
dialogPosition.value = !dialogPosition.value;
|
||||
}
|
||||
|
||||
const dialogDetail = ref<boolean>(false);
|
||||
const dataDetailPos = ref<DataPosition[]>([]);
|
||||
/**
|
||||
* function ดูรายละเอียดประวัติตำแหน่ง
|
||||
* @param data ข้อมูล ประวัติตำแหน่ง
|
||||
*/
|
||||
function onClickViewDetail(data: DataPosition[]) {
|
||||
dialogDetail.value = !dialogDetail.value;
|
||||
dataDetailPos.value = data;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยืนยันการลบตำแหน่ง
|
||||
* @param id id ตำแหน่ง
|
||||
*/
|
||||
function onClickDelete(id: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.orgPosMasterByIdEmp(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
|
||||
getSummary();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const modalSort = ref<boolean>(false);
|
||||
/** fdunction จัดลำดับตำแหน่ง */
|
||||
function onClickSort() {
|
||||
modalSort.value = true;
|
||||
}
|
||||
|
||||
const modalDialogMMove = ref<boolean>(false);
|
||||
const typeMove = ref<string>("");
|
||||
/**
|
||||
* function openPopup ย้ายตำแหน่ง
|
||||
* @param id ID ตำแหน่ง
|
||||
* @param type ประเภท [ALL,SINGER]
|
||||
*/
|
||||
function onClickMovePos(id: string, type: string) {
|
||||
modalDialogMMove.value = !modalDialogMMove.value;
|
||||
typeMove.value = type;
|
||||
rowId.value = id;
|
||||
}
|
||||
|
||||
const modalDialogHistoryPos = ref<boolean>(false);
|
||||
/**
|
||||
* function ดูประวัติตำแหน่ง
|
||||
* @param id ID ตำแหน่ง
|
||||
*/
|
||||
function onClickHistoryPos(id: string) {
|
||||
modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
|
||||
rowId.value = id;
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
reqMaster.value.pageSize = newPagination.rowsPerPage;
|
||||
reqMaster.value.page = 1;
|
||||
}
|
||||
|
||||
/** function openPopup เลือกตนครอง*/
|
||||
function openSelectPerson(data: DataPosition[]) {
|
||||
modalSelectPerson.value = true;
|
||||
dataDetailPos.value = data;
|
||||
}
|
||||
|
||||
/** ลบคนครอง */
|
||||
function removePerson(id: string) {
|
||||
dialogRemove(
|
||||
$q,
|
||||
async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.orgDeleteProfileEmp(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
props.fetchDataTable?.(
|
||||
reqMaster.value.id,
|
||||
reqMaster.value.type,
|
||||
false
|
||||
);
|
||||
getSummary();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการลบคนครอง",
|
||||
"ต้องการยืนยันการลบคนครองนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
const modalDialogSuccession = ref<boolean>(false);
|
||||
/** function openPopup สืบทอดตำแหน่ง*/
|
||||
function onClickInherit(id: string) {
|
||||
modalDialogSuccession.value = !modalDialogSuccession.value;
|
||||
rowId.value = id;
|
||||
}
|
||||
|
||||
/** ดึงข้อมูลสถิติจำนวนด้านบน*/
|
||||
function getSummary() {
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.orgSummaryEmp, {
|
||||
id: reqMaster.value.id, //*Id node
|
||||
type: reqMaster.value.type, //*ประเภทnode
|
||||
isNode: reqMaster.value.isAll, //*นับทั้ง node ไหม
|
||||
})
|
||||
.then(async (res: any) => {
|
||||
const data = await res.data.result;
|
||||
|
||||
store.getSumPosition({
|
||||
totalPosition: data.totalPosition,
|
||||
totalPositionCurrentUse: data.totalPositionCurrentUse,
|
||||
totalPositionCurrentVacant: data.totalPositionCurrentVacant,
|
||||
totalPositionNextUse: data.totalPositionNextUse,
|
||||
totalPositionNextVacant: data.totalPositionNextVacant,
|
||||
totalRootPosition: data.totalPosition,
|
||||
totalRootPositionCurrentUse: data.totalPositionCurrentUse,
|
||||
totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
|
||||
totalRootPositionNextUse: data.totalPositionNextUse,
|
||||
totalRootPositionNextVacant: data.totalPositionNextVacant,
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
// messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** function DownloadReport*/
|
||||
async function onClickDownloadReport(val: string, name: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgReportEmp(val))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
if (data) {
|
||||
genreport(data, name);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- TOOLBAR -->
|
||||
<div class="col-12">
|
||||
<q-toolbar style="padding: 0">
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="onClickPosition('ADD', '')"
|
||||
>
|
||||
<q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="blue"
|
||||
icon="mdi-sort"
|
||||
@click="onClickSort()"
|
||||
>
|
||||
<q-tooltip>จัดลำดับ</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="blue-10"
|
||||
icon="mdi-cursor-move"
|
||||
@click="onClickMovePos('', 'All')"
|
||||
>
|
||||
<q-tooltip>ย้ายตำแหน่ง</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
v-if="store.typeOrganizational === 'draft'"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="deep-purple"
|
||||
icon="save_alt"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list
|
||||
dense
|
||||
style="min-width: 100px"
|
||||
v-for="(item, index) in document"
|
||||
:key="index"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click.stop="onClickDownloadReport(item.val, item.name)"
|
||||
>
|
||||
<q-item-section>{{ item.name }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="row q-gutter-md">
|
||||
<div>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
v-model="reqMaster.isAll"
|
||||
label="แสดงตำแหน่งทั้งหมด"
|
||||
color="primary"
|
||||
>
|
||||
<q-tooltip
|
||||
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
|
||||
>
|
||||
</q-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="reqMaster.keyword"
|
||||
label="ค้นหา"
|
||||
@keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" color="grey-5" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
|
||||
<!-- TABLE -->
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="posMaster"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
class="tableTb"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width></q-th>
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td>
|
||||
<q-btn
|
||||
flat
|
||||
size="14px"
|
||||
color="primary"
|
||||
round
|
||||
dense
|
||||
@click="props.expand = !props.expand"
|
||||
:icon="props.expand ? 'mdi-menu-down' : 'mdi-menu-right'"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{
|
||||
(reqMaster.page - 1) * Number(reqMaster.pageSize) +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posMasterNo'">
|
||||
{{ props.row.isSit ? col.value + " " + "(ทับที่)" : col.value }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'posLevelName'">
|
||||
{{
|
||||
props.row.posLevelName
|
||||
? props.row.isSpecial == true
|
||||
? `${props.row.posLevelName} (ฉ)`
|
||||
: props.row.posLevelName
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
size="12px"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list dense style="min-width: 150px">
|
||||
<!-- เลือกคนครอง -->
|
||||
<q-item
|
||||
v-if="
|
||||
props.row.positionIsSelected == 'ว่าง' &&
|
||||
store.typeOrganizational === 'draft'
|
||||
"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="openSelectPerson(props.row)"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<q-icon
|
||||
color="secondary"
|
||||
size="17px"
|
||||
name="mdi-account"
|
||||
/>
|
||||
<div class="q-pl-md">เลือกคนครอง</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-else-if="
|
||||
props.row.positionIsSelected != 'ว่าง' &&
|
||||
store.typeOrganizational === 'draft'
|
||||
"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="removePerson(props.row.id)"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<q-icon
|
||||
color="red"
|
||||
size="17px"
|
||||
name="mdi-account-remove"
|
||||
/>
|
||||
<div class="q-pl-md">ลบคนครอง</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-for="(item, index) in store.typeOrganizational === 'draft'
|
||||
? listMenu
|
||||
: listMenu.filter((e) => e.type === 'HISTORY')"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
item.type === 'EDIT'
|
||||
? onClickPosition('EDIT', props.row.id)
|
||||
: item.type === 'DEL'
|
||||
? onClickDelete(props.row.id)
|
||||
: item.type === 'MOVE'
|
||||
? onClickMovePos(props.row.id, 'SINGER')
|
||||
: item.type === 'HISTORY'
|
||||
? onClickHistoryPos(props.row.id)
|
||||
: item.type === 'INHERIT'
|
||||
? onClickInherit(props.row.id)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<q-icon
|
||||
:color="item.color"
|
||||
size="17px"
|
||||
:name="item.icon"
|
||||
/>
|
||||
<div class="q-pl-md">{{ item.label }}</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-if="props.row.positionIsSelected != 'ว่าง'"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onClickViewDetail(props.row)"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<q-icon color="blue" size="17px" name="mdi-eye" />
|
||||
<div class="q-pl-md">ดูรายละเอียด</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
||||
<q-tr v-show="props.expand" :props="props">
|
||||
<q-td colspan="100%" class="bg-grey-1">
|
||||
<q-card flat bordered class="text-left q-ma-sm">
|
||||
<d-table
|
||||
flat
|
||||
:columns="columnsExpand"
|
||||
:rows="props.row.positions"
|
||||
table-class="text-grey-9"
|
||||
row-key="id"
|
||||
dense
|
||||
hide-bottom
|
||||
bordered
|
||||
separator="vertical"
|
||||
class="custom-header-table-expand"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props" class="bg-grey-2">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="q-px-sm text-body2 text-black">{{
|
||||
col.label
|
||||
}}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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 == 'no'" class="text-body2">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name === 'posExecutiveName'"
|
||||
class="text-body2"
|
||||
>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="col.name === 'positionExecutiveField'"
|
||||
class="text-body2"
|
||||
>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="col.name === 'positionArea'"
|
||||
class="text-body2"
|
||||
>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
|
||||
<div v-else class="text-body2">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="reqMaster.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="totalPage"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
|
||||
<!-- รายละเอียดตำแหน่ง -->
|
||||
<DialogPositionDetail
|
||||
v-model:position-detail="dialogDetail"
|
||||
:dataDetailPos="dataDetailPos"
|
||||
/>
|
||||
|
||||
<!-- อัตรากำลัง -->
|
||||
<DialogFormPosotion
|
||||
:modal="dialogPosition"
|
||||
:shortName="shortName"
|
||||
:close="onClickPosition"
|
||||
:orgLevel="orgLevel"
|
||||
:treeId="treeId"
|
||||
:actionType="actionType"
|
||||
:rowId="rowId"
|
||||
v-model:reqMaster="reqMaster"
|
||||
:fetchDataTable="props.fetchDataTable"
|
||||
:getSummary="getSummary"
|
||||
/>
|
||||
|
||||
<!-- จัดลำดับ -->
|
||||
<DialogSort
|
||||
v-model:sort-position="modalSort"
|
||||
:fetchDataTable="props.fetchDataTable"
|
||||
/>
|
||||
|
||||
<!-- ย้ายตำแหน่ง -->
|
||||
<DialogMovePos
|
||||
v-model:modal="modalDialogMMove"
|
||||
v-model:nodeTree="nodeTree"
|
||||
v-model:columns="columns as QTableProps[]"
|
||||
v-model:rows="posMaster"
|
||||
v-model:totalPage="totalPage"
|
||||
v-model:reqMaster="reqMaster"
|
||||
:fetchDataTree="props.fetchDataTree"
|
||||
:type="typeMove"
|
||||
:rowId="rowId"
|
||||
:mainTree="props.mainTree ? props.mainTree : []"
|
||||
/>
|
||||
|
||||
<!-- ประวัติตำแหน่ง -->
|
||||
<DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
|
||||
|
||||
<!-- เลือกคนครอง -->
|
||||
<DialogSelectPerson
|
||||
v-model:modal="modalSelectPerson"
|
||||
:dataDetailPos="dataDetailPos"
|
||||
:fetchDataTable="props.fetchDataTable"
|
||||
:getSummary="getSummary"
|
||||
/>
|
||||
|
||||
<!-- สืบทอดตำแหน่ง -->
|
||||
<DialogSuccession v-model:modal="modalDialogSuccession" :rowId="rowId" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-header-table-expand {
|
||||
height: auto;
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
358
src/modules/16_positionEmployee/components/TreeView.vue
Normal file
358
src/modules/16_positionEmployee/components/TreeView.vue
Normal file
|
|
@ -0,0 +1,358 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
OrgTree,
|
||||
PosMaster,
|
||||
Position,
|
||||
PosMaster2,
|
||||
} from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
|
||||
|
||||
/** importComponents*/
|
||||
import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
|
||||
import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const store = usePositionEmp();
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
|
||||
const count = defineModel<number>("count", { required: true });
|
||||
|
||||
const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
|
||||
const nodeId = ref<string>(""); // id ของ Tree
|
||||
const orgLevel = ref<number>(0); // levelTree
|
||||
const isLoad = ref<boolean>(false); // loadTable
|
||||
const isLoadTree = ref<boolean>(false); // loadTable
|
||||
const mainTree = ref<OrgTree>();
|
||||
|
||||
const selected = ref<string>("");
|
||||
|
||||
const reqMaster = reactive<FilterMaster>({
|
||||
id: "",
|
||||
type: 0,
|
||||
isAll: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
revisionId: "",
|
||||
});
|
||||
const totalPage = ref<number>(1);
|
||||
const action1 = ref<boolean>(false);
|
||||
const posMaster = ref<PosMaster2[]>([]);
|
||||
const shortName = ref<string>("");
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลของ Tree
|
||||
* @param id id โครงสร้าง
|
||||
*/
|
||||
async function fetchDataTree(id: string) {
|
||||
isLoadTree.value = false;
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgByid(id.toString()))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
nodeTree.value = data;
|
||||
selected.value = "";
|
||||
nodeId.value = "";
|
||||
store.treeId = "";
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch ข้อรายการตำแหน่ง
|
||||
* @param id idTree
|
||||
* @param level levelTree
|
||||
*/
|
||||
async function fetchDataTable(id: string, level: number, action: boolean) {
|
||||
searchAndReplaceOrgName(nodeTree.value, id);
|
||||
|
||||
orgLevel.value = level;
|
||||
reqMaster.id = id;
|
||||
reqMaster.type = level;
|
||||
action1.value = action;
|
||||
if (action) {
|
||||
setTimeout(() => {
|
||||
action1.value = false;
|
||||
}, 1000);
|
||||
reqMaster.isAll = false;
|
||||
reqMaster.page = 1;
|
||||
reqMaster.pageSize = 10;
|
||||
reqMaster.keyword = "";
|
||||
reqMaster.revisionId =
|
||||
store.typeOrganizational == "draft"
|
||||
? store.draftId
|
||||
: store.typeOrganizational == "current"
|
||||
? store.activeId
|
||||
: store.historyId;
|
||||
}
|
||||
|
||||
if (action === true) {
|
||||
isLoad.value = true;
|
||||
}
|
||||
await http
|
||||
.post(config.API.orgPosMasterListEmp, reqMaster)
|
||||
.then((res) => {
|
||||
posMaster.value = [];
|
||||
const dataMain: PosMaster[] = [];
|
||||
totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
|
||||
res.data.result.data.forEach((e: PosMaster) => {
|
||||
const p = e.positions;
|
||||
if (p.length !== 0) {
|
||||
const a = p.find((el: Position) => el.positionIsSelected === true);
|
||||
const { id, ...rest } = a ? a : p[0];
|
||||
const test = { ...e, ...rest };
|
||||
dataMain.push(test);
|
||||
}
|
||||
});
|
||||
posMaster.value = store.fetchPosMaster(dataMain);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
posMaster.value = [];
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
isLoad.value = false;
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
/** ดึงข้อมูลสถิติจำนวนด้านบน*/
|
||||
function getSummary() {
|
||||
http
|
||||
.post(config.API.orgSummaryEmp, {
|
||||
id: reqMaster.id, //*Id node
|
||||
type: reqMaster.type, //*ประเภทnode
|
||||
isNode: reqMaster.isAll, //*นับทั้ง node ไหม
|
||||
})
|
||||
.then(async (res: any) => {
|
||||
const data = await res.data.result;
|
||||
store.getSumPosition({
|
||||
totalPosition: data.totalPosition,
|
||||
totalPositionCurrentUse: data.totalPositionCurrentUse,
|
||||
totalPositionCurrentVacant: data.totalPositionCurrentVacant,
|
||||
totalPositionNextUse: data.totalPositionNextUse,
|
||||
totalPositionNextVacant: data.totalPositionNextVacant,
|
||||
totalRootPosition: data.totalPosition,
|
||||
totalRootPositionCurrentUse: data.totalPositionCurrentUse,
|
||||
totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
|
||||
totalRootPositionNextUse: data.totalPositionNextUse,
|
||||
totalRootPositionNextVacant: data.totalPositionNextVacant,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** funcion ค้นหาข้อมูลใน Table*/
|
||||
async function filterKeyword() {
|
||||
reqMaster.page = 1;
|
||||
action1.value === false &&
|
||||
fetchDataTable(reqMaster.id, reqMaster.type, false);
|
||||
}
|
||||
|
||||
function searchAndReplaceOrgName(data: any, targetId: string) {
|
||||
for (const child of data) {
|
||||
if (child.orgTreeId === targetId) {
|
||||
mainTree.value = child;
|
||||
|
||||
return true; // Found the targetId in this level
|
||||
}
|
||||
if (child.children && searchAndReplaceOrgName(child.children, targetId)) {
|
||||
return true; // Found the targetId in the nested children
|
||||
}
|
||||
}
|
||||
return false; // Not found in this branch
|
||||
}
|
||||
|
||||
/**lifecycle Hook*/
|
||||
onMounted(async () => {
|
||||
const id =
|
||||
store.typeOrganizational === "current"
|
||||
? store.activeId
|
||||
: store.typeOrganizational === "draft"
|
||||
? store.draftId
|
||||
: historyId.value;
|
||||
id && (await fetchDataTree(id));
|
||||
});
|
||||
|
||||
/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
|
||||
watch(
|
||||
() => count.value,
|
||||
() => {
|
||||
fetchDataTree(historyId.value);
|
||||
}
|
||||
);
|
||||
|
||||
/** callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
|
||||
watch(
|
||||
() => store.typeOrganizational,
|
||||
() => {
|
||||
const id =
|
||||
store.typeOrganizational === "current" ? store.activeId : store.draftId;
|
||||
id && store.typeOrganizational !== "old" && fetchDataTree(id);
|
||||
nodeId.value = "";
|
||||
store.treeId = "";
|
||||
}
|
||||
);
|
||||
|
||||
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
|
||||
watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
|
||||
action1.value === false &&
|
||||
fetchDataTable(reqMaster.id, reqMaster.type, false);
|
||||
});
|
||||
|
||||
/** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
|
||||
watch(
|
||||
() => reqMaster.isAll,
|
||||
() => {
|
||||
getSummary();
|
||||
if (reqMaster.page !== 1) {
|
||||
reqMaster.page = 1;
|
||||
} else {
|
||||
fetchDataTable(reqMaster.id, reqMaster.type, false);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.draftId,
|
||||
() => {
|
||||
store.draftId && fetchDataTree(store.draftId?.toString());
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12 row caedNone">
|
||||
<div class="col-xs-12 col-sm-3 row">
|
||||
<div class="col-12 row no-wrap bg-grey-1">
|
||||
<TreeMain
|
||||
v-model:nodeTree="nodeTree"
|
||||
v-model:shortName="shortName"
|
||||
v-model:nodeId="nodeId"
|
||||
:fetchDataTree="fetchDataTree"
|
||||
:fetchDataTable="fetchDataTable"
|
||||
/>
|
||||
|
||||
<div class="col-12 row">
|
||||
<q-separator :vertical="!$q.screen.lt.md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-9 q-pa-md row">
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="row col-12 justify-center"
|
||||
v-if="isLoad"
|
||||
style="height: 550px"
|
||||
>
|
||||
<div class="col-2">
|
||||
<q-spinner color="primary" size="3em" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="col-12 row">
|
||||
<div class="col-12" v-if="nodeId !== ''">
|
||||
<!-- summary -->
|
||||
<q-card
|
||||
bordered
|
||||
v-if="nodeId"
|
||||
class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
|
||||
>
|
||||
<div class="row col q-pa-sm item">
|
||||
<div class="ellipsis">ตำแหน่งทั้งหมด</div>
|
||||
<q-space />
|
||||
<q-badge
|
||||
color="secondary"
|
||||
:label="
|
||||
reqMaster.isAll
|
||||
? store.sumPosition.total
|
||||
: store.sumPosition.totalRoot
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="row col q-pa-sm item">
|
||||
<div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
|
||||
<q-space />
|
||||
<q-badge
|
||||
color="primary"
|
||||
:label="
|
||||
reqMaster.isAll
|
||||
? store.sumPosition.use
|
||||
: store.sumPosition.useRoot
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="row col q-pa-sm item">
|
||||
<div class="ellipsis">ตำแหน่งว่าง</div>
|
||||
<q-space />
|
||||
<q-badge
|
||||
color="red"
|
||||
:label="
|
||||
reqMaster.isAll
|
||||
? store.sumPosition.vacant
|
||||
: store.sumPosition.vacantRoot
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<TreeTable
|
||||
v-if="nodeId !== ''"
|
||||
v-model:nodeTree="nodeTree"
|
||||
v-model:orgLevel="orgLevel"
|
||||
v-model:treeId="nodeId"
|
||||
v-model:reqMaster="reqMaster"
|
||||
v-model:totalPage="totalPage"
|
||||
v-model:posMaster="posMaster"
|
||||
:shortName="shortName"
|
||||
:mainTree="mainTree"
|
||||
:fetchDataTable="fetchDataTable"
|
||||
:filterKeyword="filterKeyword"
|
||||
:fetchDataTree="fetchDataTree"
|
||||
/>
|
||||
</div>
|
||||
<div class="row col-12 items-center" v-else>
|
||||
<q-banner class="q-pa-lg col-12 text-center">
|
||||
<q-icon
|
||||
name="mdi-hand-pointing-left"
|
||||
size="lg"
|
||||
color="primary"
|
||||
/>
|
||||
<p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.list-summary .item {
|
||||
border: 1px solid rgb(231, 231, 231);
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
146
src/modules/16_positionEmployee/interface/index/Main.ts
Normal file
146
src/modules/16_positionEmployee/interface/index/Main.ts
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
interface Pagination {
|
||||
rowsPerPage: number;
|
||||
}
|
||||
|
||||
interface DataOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface ListMenu {
|
||||
label: string;
|
||||
icon: string;
|
||||
type: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface FormDataAgency {
|
||||
orgName: string;
|
||||
orgShortName: string;
|
||||
orgCode: string;
|
||||
orgPhoneEx: string;
|
||||
orgPhoneIn: string;
|
||||
orgFax: string;
|
||||
orgLevel: string;
|
||||
orgLevelSub: string;
|
||||
}
|
||||
|
||||
interface FormDataPosition {
|
||||
shortName: string;
|
||||
prefixNo: string;
|
||||
positionNo: string;
|
||||
suffixNo: string;
|
||||
}
|
||||
|
||||
interface FormDataNewStructure {
|
||||
orgRevisionId: string;
|
||||
orgRevisionName: string;
|
||||
typeDraft: string;
|
||||
}
|
||||
|
||||
interface FormAgencyRef {
|
||||
orgName: object | null;
|
||||
orgShortName: object | null;
|
||||
orgCode: object | null;
|
||||
// orgPhoneEx: object | null;
|
||||
// orgPhoneIn: object | null;
|
||||
// orgFax: object | null;
|
||||
orgLevel: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface FormPositionRef {
|
||||
prefixNo: object | null;
|
||||
positionNo: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface FormDateTimeRef {
|
||||
dateTime: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface FormNewStructureRef {
|
||||
orgRevisionName: object | null;
|
||||
orgRevisionId: object | null;
|
||||
type: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface HistoryType {
|
||||
orgRevisionId: string;
|
||||
orgRevisionName: string;
|
||||
orgRevisionIsCurrent: boolean;
|
||||
orgRevisionIsDraft: boolean;
|
||||
orgRevisionCreatedAt: Date | string;
|
||||
}
|
||||
interface HistoryPostType {
|
||||
id: string;
|
||||
name: string;
|
||||
lastUpdatedAt: Date;
|
||||
orgRevisionName: string;
|
||||
}
|
||||
|
||||
interface FormPositionSelect {
|
||||
positionId: string;
|
||||
positionName: string;
|
||||
positionField: string;
|
||||
positionType: string;
|
||||
positionLevel: string;
|
||||
positionExecutive: string;
|
||||
positionExecutiveField: string;
|
||||
positionArea: string;
|
||||
}
|
||||
|
||||
interface FormPositionSelectRef {
|
||||
positionName: object | null;
|
||||
positionField: object | null;
|
||||
positionType: object | null;
|
||||
positionLevel: object | null;
|
||||
positionExecutive: object | null;
|
||||
positionExecutiveField: object | null;
|
||||
positionArea: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface RowDetailPositions {
|
||||
id: string;
|
||||
positionId: string;
|
||||
positionName: string;
|
||||
positionField: string;
|
||||
positionType: string;
|
||||
positionLevel: string;
|
||||
positionExecutive: string;
|
||||
positionExecutiveField: string;
|
||||
positionArea: string;
|
||||
posTypeId: string;
|
||||
posLevelId: string;
|
||||
posExecutiveId: string;
|
||||
isSpecial: boolean;
|
||||
}
|
||||
|
||||
interface NewPagination {
|
||||
descending: boolean;
|
||||
page: number;
|
||||
rowsPerPage: number;
|
||||
sortBy: string;
|
||||
}
|
||||
|
||||
export type {
|
||||
Pagination,
|
||||
DataOption,
|
||||
FormDataAgency,
|
||||
FormDataPosition,
|
||||
FormAgencyRef,
|
||||
FormPositionRef,
|
||||
FormDateTimeRef,
|
||||
FormDataNewStructure,
|
||||
FormNewStructureRef,
|
||||
HistoryType,
|
||||
ListMenu,
|
||||
FormPositionSelect,
|
||||
RowDetailPositions,
|
||||
HistoryPostType,
|
||||
FormPositionSelectRef,
|
||||
NewPagination,
|
||||
};
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
interface DataPosition {
|
||||
id: string;
|
||||
orgRootId: string;
|
||||
orgChild1Id: string | null;
|
||||
orgChild2Id: string | null;
|
||||
orgChild3Id: string | null;
|
||||
orgChild4Id: string | null;
|
||||
posMasterNoPrefix: string;
|
||||
posMasterNo: string;
|
||||
posMasterNoSuffix: string;
|
||||
orgShortname: string;
|
||||
positions: Position[];
|
||||
positionName: string;
|
||||
positionField: string;
|
||||
posTypeId: string;
|
||||
posTypeName: string;
|
||||
posLevelId: string;
|
||||
posLevelName: string;
|
||||
posExecutiveId: string;
|
||||
posExecutiveName: string;
|
||||
positionExecutiveField: string;
|
||||
positionArea: string;
|
||||
positionIsSelected: string | boolean;
|
||||
}
|
||||
|
||||
interface Position {
|
||||
id: string;
|
||||
positionName: string;
|
||||
positionField: string;
|
||||
posTypeId: string;
|
||||
posTypeName: string;
|
||||
posLevelId: string;
|
||||
posLevelName: string;
|
||||
posExecutiveId: string;
|
||||
posExecutiveName: string;
|
||||
positionExecutiveField: string;
|
||||
positionArea: string;
|
||||
positionIsSelected: boolean;
|
||||
}
|
||||
|
||||
interface FormDetailPosition {
|
||||
positionNo: string;
|
||||
positionType: string;
|
||||
positionPathSide: string;
|
||||
positionLine: string;
|
||||
positionSide: string;
|
||||
positionLevel: string;
|
||||
positionExecutive: string;
|
||||
positionExecutiveSide: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface DataTree {
|
||||
orgTreeId: string;
|
||||
orgRootId?: string;
|
||||
orgLevel: number;
|
||||
orgName: string;
|
||||
orgTreeName: string;
|
||||
orgTreeShortName: string;
|
||||
orgTreeCode: string;
|
||||
orgCode: string;
|
||||
orgTreeRank: string;
|
||||
orgTreeOrder: number;
|
||||
orgRootCode?: string;
|
||||
orgTreePhoneEx: string;
|
||||
orgTreePhoneIn: string;
|
||||
orgTreeFax: string;
|
||||
orgRevisionId: string;
|
||||
orgRootName: string;
|
||||
totalPosition: number;
|
||||
totalPositionCurrentUse: number;
|
||||
totalPositionCurrentVacant: number;
|
||||
totalPositionNextUse: number;
|
||||
totalPositionNextVacant: number;
|
||||
totalRootPosition: number;
|
||||
totalRootPositionCurrentUse: number;
|
||||
totalRootPositionCurrentVacant: number;
|
||||
totalRootPositionNextUse: number;
|
||||
totalRootPositionNextVacant: number;
|
||||
|
||||
children?: DataTree[];
|
||||
}
|
||||
|
||||
interface SeaechResult {
|
||||
id: string;
|
||||
citizenId: string;
|
||||
name: string;
|
||||
posTypeName: string;
|
||||
posLevelName: string;
|
||||
}
|
||||
interface FormPositionFilter {
|
||||
positionNo: string;
|
||||
positionType: string;
|
||||
positionLevel: string;
|
||||
personal: string;
|
||||
position: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export type {
|
||||
DataPosition,
|
||||
Position,
|
||||
FormDetailPosition,
|
||||
DataTree,
|
||||
SeaechResult,
|
||||
FormPositionFilter,
|
||||
};
|
||||
14
src/modules/16_positionEmployee/interface/request/Main.ts
Normal file
14
src/modules/16_positionEmployee/interface/request/Main.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
interface DataSumCalendarObject {
|
||||
id: number;
|
||||
monthFull: String;
|
||||
count: number;
|
||||
color: String;
|
||||
}
|
||||
|
||||
interface DataListsObject {
|
||||
id: number;
|
||||
count: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export type { DataSumCalendarObject, DataListsObject };
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
interface FilterMaster {
|
||||
id: string; //*Id node
|
||||
type: number; //*ประเภทnode
|
||||
isAll: boolean; //*(true->ทั้งหมด, false->ในระดับตัวเอง)
|
||||
page: number; //*หน้า
|
||||
pageSize: number; //*จำนวนแถวต่อหน้า
|
||||
keyword: string; //ข้อความที่ต้องการค้นหา
|
||||
revisionId?: string
|
||||
}
|
||||
interface MovePos {
|
||||
id: string;
|
||||
type: number;
|
||||
positionMaster: string[];
|
||||
}
|
||||
|
||||
interface Inherit {
|
||||
draftPositionId: string;
|
||||
publishPositionId: string;
|
||||
}
|
||||
|
||||
export type { FilterMaster, MovePos, Inherit };
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
interface DataActive {
|
||||
activeId: string;
|
||||
activeName: string;
|
||||
draftId: string;
|
||||
draftName: string;
|
||||
isPublic: boolean;
|
||||
orgPublishDate: Date | null;
|
||||
}
|
||||
|
||||
interface SumPosition {
|
||||
totalPosition: number;
|
||||
totalPositionCurrentUse: number;
|
||||
totalPositionCurrentVacant: number;
|
||||
totalPositionNextUse: number;
|
||||
totalPositionNextVacant: number;
|
||||
totalRootPosition: number;
|
||||
totalRootPositionCurrentUse: number;
|
||||
totalRootPositionCurrentVacant: number;
|
||||
totalRootPositionNextUse: number;
|
||||
totalRootPositionNextVacant: number;
|
||||
}
|
||||
|
||||
interface OrgTree {
|
||||
orgTreeId: string;
|
||||
orgRootId: string;
|
||||
orgLevel: number;
|
||||
orgTreeName: string;
|
||||
orgTreeShortName: string;
|
||||
orgTreeCode: string;
|
||||
orgCode: string;
|
||||
orgTreeRank: string;
|
||||
orgTreeOrder: number | null;
|
||||
orgRootCode: string;
|
||||
orgTreePhoneEx: string;
|
||||
orgTreePhoneIn: string;
|
||||
orgTreeFax: string;
|
||||
orgRevisionId: string;
|
||||
children: OrgTree[];
|
||||
}
|
||||
|
||||
interface OrgRevision {
|
||||
orgRevisionCreatedAt: string | null;
|
||||
orgRevisionId: string;
|
||||
orgRevisionIsCurrent: boolean;
|
||||
orgRevisionIsDraft: boolean;
|
||||
orgRevisionName: string;
|
||||
}
|
||||
|
||||
interface OptionType {
|
||||
id: string;
|
||||
posTypeName: string;
|
||||
}
|
||||
|
||||
interface OptionLevel {
|
||||
id: string;
|
||||
posLevelName: string;
|
||||
}
|
||||
|
||||
interface OptionExecutive {
|
||||
id: string;
|
||||
posExecutiveName: string;
|
||||
}
|
||||
|
||||
interface DataPosition {
|
||||
id: string;
|
||||
posExecutiveId: string;
|
||||
posExecutiveName: string;
|
||||
posLevelId: string;
|
||||
posLevelName: string;
|
||||
posTypeId: string;
|
||||
posTypeName: string;
|
||||
positionArea: string;
|
||||
positionExecutiveField: string;
|
||||
positionField: string;
|
||||
positionIsSelected: boolean;
|
||||
positionName: string;
|
||||
}
|
||||
|
||||
interface Position {
|
||||
id: string; // id ตำแหน่ง
|
||||
positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
|
||||
positionField: string; // สายงาน
|
||||
posTypeId: string; // ประเภทตำแหน่ง
|
||||
posTypeName: string; // ประเภทตำแหน่ง
|
||||
posLevelId: string; // ระดับตำแหน่ง
|
||||
posLevelName: string; // ระดับตำแหน่ง
|
||||
posExecutiveId: string; // ตำแหน่งทางการบริหาร
|
||||
posExecutiveName: string; // ตำแหน่งทางการบริหาร
|
||||
positionExecutiveField: string; // ด้านทางการบริหาร
|
||||
positionArea: string; // ด้าน/สาขา
|
||||
positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
|
||||
}
|
||||
|
||||
interface PosMaster {
|
||||
id: string; // id อัตรากำลัง posmaster
|
||||
orgShortname: string; // อักษรย่อตำแหน่ง
|
||||
posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
|
||||
posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
|
||||
posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
|
||||
positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
|
||||
positionField: string; // สายงาน
|
||||
posTypeId: string; // ประเภทตำแหน่ง
|
||||
posTypeName: string; // ประเภทตำแหน่ง
|
||||
posLevelId: string; // ระดับตำแหน่ง
|
||||
posLevelName: string; // ระดับตำแหน่ง
|
||||
posExecutiveId: string; // ตำแหน่งทางการบริหาร
|
||||
posExecutiveName: string; // ตำแหน่งทางการบริหาร
|
||||
positionExecutiveField: string; // ด้านทางการบริหาร
|
||||
positionArea: string; // ด้าน/สาขา
|
||||
positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
|
||||
fullNameCurrentHolder: string | null;
|
||||
fullNameNextHolder: string | null;
|
||||
positions: Position[]; // ตำแหน่ง
|
||||
isSit: boolean;
|
||||
profilePosition: string;
|
||||
profilePostype: string;
|
||||
profilePoslevel: string;
|
||||
}
|
||||
interface Position2 {
|
||||
id: string; // id ตำแหน่ง
|
||||
positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
|
||||
positionField: string; // สายงาน
|
||||
posTypeId: string; // ประเภทตำแหน่ง
|
||||
posTypeName: string; // ประเภทตำแหน่ง
|
||||
posLevelId: string; // ระดับตำแหน่ง
|
||||
posLevelName: string; // ระดับตำแหน่ง
|
||||
posExecutiveId: string; // ตำแหน่งทางการบริหาร
|
||||
posExecutiveName: string; // ตำแหน่งทางการบริหาร
|
||||
positionExecutiveField: string; // ด้านทางการบริหาร
|
||||
positionArea: string; // ด้าน/สาขา
|
||||
positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
|
||||
}
|
||||
|
||||
interface PosMaster2 {
|
||||
id: string; // id อัตรากำลัง posmaster
|
||||
orgShortname: string; // อักษรย่อตำแหน่ง
|
||||
posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
|
||||
posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
|
||||
posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
|
||||
positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
|
||||
positionField: string; // สายงาน
|
||||
posTypeId: string; // ประเภทตำแหน่ง
|
||||
posTypeName: string; // ประเภทตำแหน่ง
|
||||
posLevelId: string; // ระดับตำแหน่ง
|
||||
posLevelName: string; // ระดับตำแหน่ง
|
||||
posExecutiveId: string; // ตำแหน่งทางการบริหาร
|
||||
posExecutiveName: string; // ตำแหน่งทางการบริหาร
|
||||
positionExecutiveField: string; // ด้านทางการบริหาร
|
||||
positionArea: string; // ด้าน/สาขา
|
||||
positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
|
||||
positions: Position[]; // ตำแหน่ง
|
||||
}
|
||||
|
||||
interface HistoryPos {
|
||||
id: string; //id node
|
||||
orgShotName: string; //ชื่อย่อส่วนราชการ
|
||||
lastUpdatedAt: Date; //วันที่แก้ไข
|
||||
posMasterNoPrefix: string; //Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
|
||||
posMasterNo: number; //เลขที่ตำแหน่ง เป็นตัวเลข
|
||||
posMasterNoSuffix: string; //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
|
||||
}
|
||||
|
||||
interface SelectPerson {
|
||||
citizenId: string;
|
||||
firstName: string;
|
||||
id: string;
|
||||
lastName: string;
|
||||
posLevel: string;
|
||||
posType: string;
|
||||
position: string;
|
||||
prefix: string;
|
||||
}
|
||||
|
||||
interface PosLevels {
|
||||
id: string;
|
||||
posLevelAuthority: null;
|
||||
posLevelName: string;
|
||||
posLevelRank: number;
|
||||
}
|
||||
interface TypePos {
|
||||
id: string;
|
||||
PosLevels: PosLevels[];
|
||||
posTypeName: string;
|
||||
posTypeRank: number;
|
||||
}
|
||||
|
||||
export type {
|
||||
DataActive,
|
||||
OrgTree,
|
||||
OrgRevision,
|
||||
OptionType,
|
||||
OptionLevel,
|
||||
OptionExecutive,
|
||||
DataPosition,
|
||||
PosMaster,
|
||||
PosMaster2,
|
||||
Position,
|
||||
Position2,
|
||||
SumPosition,
|
||||
HistoryPos,
|
||||
SelectPerson,
|
||||
TypePos,
|
||||
};
|
||||
14
src/modules/16_positionEmployee/router.ts
Normal file
14
src/modules/16_positionEmployee/router.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
const mainPage = () => import("@/modules/16_positionEmployee/views/main.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/position-employee",
|
||||
name: "positionEmployee",
|
||||
component: mainPage,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [1],
|
||||
Role: "positionEmployee",
|
||||
},
|
||||
},
|
||||
];
|
||||
141
src/modules/16_positionEmployee/store/organizational.ts
Normal file
141
src/modules/16_positionEmployee/store/organizational.ts
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { reactive, ref } from "vue";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
DataActive,
|
||||
SumPosition,
|
||||
PosMaster,
|
||||
} from "@/modules/16_positionEmployee/interface/response/organizational";
|
||||
|
||||
export const usePositionEmp = defineStore("positionEmpStore", () => {
|
||||
const typeOrganizational = ref<string>("current");
|
||||
const statusView = ref<string>("list");
|
||||
|
||||
const dataActive = ref<DataActive>();
|
||||
const activeId = ref<string>();
|
||||
const draftId = ref<string>();
|
||||
const historyId = ref<string>();
|
||||
const treeId = ref<string>();
|
||||
const level = ref<number>();
|
||||
const isPublic = ref<boolean>(false);
|
||||
const orgPublishDate = ref<Date | null>(null);
|
||||
const sumPosition = reactive({
|
||||
total: 0,
|
||||
use: 0,
|
||||
vacant: 0,
|
||||
totalRoot: 0,
|
||||
useRoot: 0,
|
||||
vacantRoot: 0,
|
||||
});
|
||||
|
||||
function getSumPosition(data: SumPosition) {
|
||||
sumPosition.total = data.totalPosition;
|
||||
sumPosition.totalRoot = data.totalRootPosition ? data.totalRootPosition : 0;
|
||||
|
||||
if (typeOrganizational.value == "draft") {
|
||||
sumPosition.use = data.totalPositionNextUse;
|
||||
sumPosition.useRoot = data.totalRootPositionNextUse
|
||||
? data.totalRootPositionNextUse
|
||||
: 0;
|
||||
|
||||
sumPosition.vacant = data.totalPositionNextVacant;
|
||||
sumPosition.vacantRoot = data.totalRootPositionNextVacant
|
||||
? data.totalRootPositionNextVacant
|
||||
: 0;
|
||||
} else {
|
||||
sumPosition.use = data.totalPositionCurrentUse;
|
||||
sumPosition.useRoot = data.totalRootPositionCurrentUse
|
||||
? data.totalRootPositionCurrentUse
|
||||
: 0;
|
||||
|
||||
sumPosition.vacant = data.totalPositionCurrentVacant;
|
||||
sumPosition.vacantRoot = data.totalRootPositionCurrentVacant
|
||||
? data.totalRootPositionCurrentVacant
|
||||
: 0;
|
||||
}
|
||||
}
|
||||
|
||||
function fetchDataActive(data: DataActive) {
|
||||
activeId.value = data.activeId;
|
||||
draftId.value = data.draftId;
|
||||
dataActive.value = data;
|
||||
isPublic.value = data.isPublic;
|
||||
orgPublishDate.value = data.orgPublishDate;
|
||||
}
|
||||
|
||||
function fetchPosMaster(data: PosMaster[]) {
|
||||
const newPosMaster = data.map((e: PosMaster) => ({
|
||||
...e,
|
||||
positionIsSelected:
|
||||
typeOrganizational.value === "draft" && e.fullNameNextHolder !== null
|
||||
? e.fullNameNextHolder
|
||||
: typeOrganizational.value !== "draft" &&
|
||||
e.fullNameCurrentHolder !== null
|
||||
? e.fullNameCurrentHolder
|
||||
: "ว่าง",
|
||||
posMasterNo:
|
||||
e.orgShortname +
|
||||
e.posMasterNoPrefix +
|
||||
e.posMasterNo +
|
||||
e.posMasterNoSuffix,
|
||||
positionName: e.isSit ? e.profilePosition : e.positionName,
|
||||
posTypeName: e.isSit ? e.profilePostype : e.posTypeName,
|
||||
posLevelName: e.isSit ? e.profilePoslevel : e.posLevelName,
|
||||
posExecutiveName: e.posExecutiveName,
|
||||
isSit: e.isSit,
|
||||
}));
|
||||
|
||||
return newPosMaster;
|
||||
}
|
||||
|
||||
function checkLevel(type: number) {
|
||||
switch (type) {
|
||||
case 0:
|
||||
return "Root";
|
||||
case 1:
|
||||
return "Child1";
|
||||
case 2:
|
||||
return "Child2";
|
||||
case 3:
|
||||
return "Child3";
|
||||
default:
|
||||
return "Child4";
|
||||
}
|
||||
}
|
||||
|
||||
function convertType(type: string) {
|
||||
switch (type) {
|
||||
case "DEPARTMENT":
|
||||
return "ระดับสำนัก";
|
||||
case "OFFICE":
|
||||
return "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง";
|
||||
case "DIVISION":
|
||||
return "ระดับส่วน/กลุ่มภารกิจ";
|
||||
case "SECTION":
|
||||
return "ระดับฝ่าย/กลุ่มงาน";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
typeOrganizational,
|
||||
statusView,
|
||||
|
||||
//
|
||||
fetchDataActive,
|
||||
checkLevel,
|
||||
convertType,
|
||||
draftId,
|
||||
activeId,
|
||||
historyId,
|
||||
treeId,
|
||||
level,
|
||||
isPublic,
|
||||
orgPublishDate,
|
||||
fetchPosMaster,
|
||||
sumPosition,
|
||||
getSumPosition,
|
||||
};
|
||||
});
|
||||
82
src/modules/16_positionEmployee/views/main.vue
Normal file
82
src/modules/16_positionEmployee/views/main.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importComponents*/
|
||||
import TreeView from "@/modules/16_positionEmployee/components/TreeView.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
const store = usePositionEmp();
|
||||
|
||||
/** สถานะ*/
|
||||
const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
|
||||
|
||||
/** ประวัติโครงสร้าง*/
|
||||
const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
|
||||
const count = ref<number>(0);
|
||||
|
||||
/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
|
||||
async function fetchOrganizationActive() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.activeOrganization)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
if (data) {
|
||||
store.fetchDataActive(data);
|
||||
if (data.activeName === null && data.draftName === null) {
|
||||
isStatusData.value = false;
|
||||
} else {
|
||||
isStatusData.value = true;
|
||||
if (isStatusData.value) {
|
||||
if (data.activeName === null) {
|
||||
// ishasActive.value = true;
|
||||
store.typeOrganizational = "draft";
|
||||
} else if (data.draftName === null) {
|
||||
// ishasDraft.value = true;
|
||||
store.typeOrganizational = "current";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** lifecycleHook */
|
||||
onMounted(async () => {
|
||||
store.typeOrganizational = "current";
|
||||
await fetchOrganizationActive();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row items-center">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
อัตรากำลังลูกจ้างประจำฯ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat bordered>
|
||||
<q-card class="my-card">
|
||||
<q-card-section style="padding: 0px">
|
||||
<TreeView v-model:historyId="historyId" v-model:count="count" />
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -8,6 +8,7 @@ import ModuleMetadata from "@/modules/01_metadata/router";
|
|||
import ModuleMetadataNew from "@/modules/01_metadataNew/router";
|
||||
import ModuleOrganizational from "@/modules/02_organizational/router";
|
||||
import ModuleOrganizationalNew from "@/modules/02_organizationalNew/router";
|
||||
import ModulePositionEmployee from "@/modules/16_positionEmployee/router";
|
||||
import ModuleRecruiting from "@/modules/03_recruiting/router";
|
||||
import ModuleRecruitingNew from "@/modules/04_registryNew/router";
|
||||
import ModuleRegistry from "@/modules/04_registry/router";
|
||||
|
|
@ -49,6 +50,7 @@ const router = createRouter({
|
|||
...ModuleMetadataNew,
|
||||
...ModuleOrganizational,
|
||||
...ModuleOrganizationalNew,
|
||||
...ModulePositionEmployee,
|
||||
...ModuleRecruiting,
|
||||
...ModuleRecruitingNew,
|
||||
...ModuleRegistry,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue