Refactoring code module 16_positionEmployee
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
4678ead38e
commit
94109a6f15
10 changed files with 527 additions and 600 deletions
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
|
|
@ -10,37 +12,15 @@ import config from "@/app.config";
|
|||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
FormDataPosition,
|
||||
FormPositionRef,
|
||||
DataOption,
|
||||
RowDetailPositions,
|
||||
ListMenu,
|
||||
} from "@/modules/16_positionEmployee/interface/index/Main";
|
||||
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 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 {
|
||||
|
|
@ -53,7 +33,28 @@ const {
|
|||
dialogMessageNotify,
|
||||
} = mixin;
|
||||
|
||||
const search = ref<string>("");
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
|
||||
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 modalAdd = ref<boolean>(false); //เพิ่มข้อมูลตำแหน่ง
|
||||
const isEdit = ref<boolean>(false); //แก้ไขข้อมูล
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const isPosition = ref<boolean>(false); //แสดงเลือกตำแหน่งที่ต้องการเพิ่ม
|
||||
const dataCopy = ref<RowDetailPositions>(); //ข้อมูลตำแหน่งที่ต้องการคัดลอก
|
||||
const search = ref<string>(""); //คำค้นหา
|
||||
const type = ref<string>("positionName");
|
||||
const optionFilter = ref<DataOption[]>([
|
||||
{ id: "positionName", name: "ชื่อตำแหน่ง" },
|
||||
|
|
@ -82,11 +83,8 @@ const listMenu = ref<ListMenu[]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const rows = ref<RowDetailPositions[]>([]);
|
||||
const rowsPositionSelect = ref<RowDetailPositions[]>([]);
|
||||
|
||||
const prefixNoRef = ref<Object | null>(null);
|
||||
const positionNoRef = ref<Object | null>(null);
|
||||
const rows = ref<RowDetailPositions[]>([]); //รายกานข้อมูลอัตรากำลัง
|
||||
const rowsPositionSelect = ref<RowDetailPositions[]>([]); //รายการตำแหน่ง
|
||||
|
||||
const formData = reactive<FormDataPosition>({
|
||||
shortName: props.shortName,
|
||||
|
|
@ -96,12 +94,6 @@ const formData = reactive<FormDataPosition>({
|
|||
reason: "",
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const objectPositionRef: FormPositionRef = {
|
||||
prefixNo: prefixNoRef,
|
||||
positionNo: positionNoRef,
|
||||
};
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -171,75 +163,59 @@ async function fetchPosition(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
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 หลังตำแหน่งเลขที่ เช่น ช.
|
||||
reason: formData.reason, //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,
|
||||
isDirector: false,
|
||||
isOfficer: false,
|
||||
|
||||
// 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);
|
||||
await props.getSummary?.();
|
||||
await props.fetchDataTable?.(
|
||||
reqMaster.value.id,
|
||||
reqMaster.value.type,
|
||||
false
|
||||
);
|
||||
await success($q, "บันทีกข้อมูลสำเร็จ");
|
||||
close();
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
if (rows.value.length == 0) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
|
||||
} else {
|
||||
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 หลังตำแหน่งเลขที่ เช่น ช.
|
||||
reason: formData.reason, //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,
|
||||
isDirector: false,
|
||||
};
|
||||
try {
|
||||
const url =
|
||||
props.actionType === "ADD"
|
||||
? config.API.orgPosMasterEmp
|
||||
: config.API.orgPosMasterByIdEmp(props.rowId);
|
||||
await http[props.actionType === "ADD" ? "post" : "put"](url, body);
|
||||
await props.getSummary?.();
|
||||
await props.fetchDataTable?.(
|
||||
reqMaster.value.id,
|
||||
reqMaster.value.type,
|
||||
false
|
||||
);
|
||||
await success($q, "บันทีกข้อมูลสำเร็จ");
|
||||
close();
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** input ค้นหา */
|
||||
/**
|
||||
* ฟังก์ชันค้นหาข้อมูลตำแหน่ง
|
||||
*/
|
||||
const searchRef = ref<any>(null);
|
||||
async function searchInput() {
|
||||
searchRef.value.validate();
|
||||
|
|
@ -281,20 +257,18 @@ function editDetiail(data: RowDetailPositions) {
|
|||
}
|
||||
|
||||
/**
|
||||
* ส่งค่า css ออกไปตามเงื่อนไข
|
||||
* @param val true/false
|
||||
* ฟังก์ชันเลือกตำแหน่ง
|
||||
* @param data ตำแหน่งที่เลือก
|
||||
*/
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชัยลบตำแหน่ง
|
||||
* @param id คำแหน่งีที่เลือก
|
||||
*/
|
||||
function deletePos(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
showLoader();
|
||||
|
|
@ -313,27 +287,36 @@ function deletePos(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
function clearFormPositionSelect() {
|
||||
isDisValidate.value = true;
|
||||
search.value = "";
|
||||
type.value = "positionName";
|
||||
|
||||
setTimeout(() => {
|
||||
isDisValidate.value = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันปืด Popup
|
||||
*/
|
||||
function close() {
|
||||
props.close?.();
|
||||
isPosition.value = false;
|
||||
clearFormPositionSelect();
|
||||
search.value = "";
|
||||
type.value = "positionName";
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันค้นหาตำแหน่ง
|
||||
* @param keyword คำค้นหา
|
||||
* @param typeSelect ค้นหาจาก
|
||||
*/
|
||||
async function emitSearch(keyword: string, typeSelect: string) {
|
||||
search.value = keyword;
|
||||
type.value = typeSelect;
|
||||
await searchInput();
|
||||
}
|
||||
/**
|
||||
* ส่งค่า css ออกไปตามเงื่อนไข
|
||||
* @param val true/false
|
||||
*/
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
|
|
@ -343,7 +326,6 @@ watch(
|
|||
rowsPositionSelect.value = [];
|
||||
search.value = "";
|
||||
rows.value = [];
|
||||
clearFormPositionSelect();
|
||||
formData.prefixNo = "";
|
||||
formData.positionNo = "";
|
||||
formData.suffixNo = "";
|
||||
|
|
@ -358,7 +340,7 @@ watch(
|
|||
() => modalAdd.value,
|
||||
() => {
|
||||
if (!modalAdd.value) {
|
||||
dataCopy.value = [];
|
||||
dataCopy.value = undefined;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -374,7 +356,7 @@ watch(
|
|||
:close="close"
|
||||
/>
|
||||
<q-separator />
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<q-card-section class="q-pa-sm fixed-height">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
|
|
@ -725,15 +707,17 @@ watch(
|
|||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- เพิ่มตำแหน่ง -->
|
||||
<DialogAddPosition
|
||||
v-model:modalAdd="modalAdd"
|
||||
:emitSearch="emitSearch"
|
||||
:data="dataCopy"
|
||||
v-model:is-edit="isEdit"
|
||||
:get-data="searchInput"
|
||||
:emit-search="emitSearch"
|
||||
:data="dataCopy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue