Refactoring code module 02_organization
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
63b9aafbaf
commit
0f5d772e53
24 changed files with 805 additions and 1033 deletions
|
|
@ -1,20 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type {
|
||||
FormDataAgency,
|
||||
FormAgencyRef,
|
||||
DataOption,
|
||||
} from "@/modules/02_organization/interface/index/Main";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const level = defineModel<number>("orgLevel", { required: true });
|
||||
const actionType = defineModel<string>("actionType", { required: true });
|
||||
const props = defineProps({
|
||||
|
|
@ -46,11 +56,7 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
|
||||
|
||||
//ตัวเลือกระดับส่วนราชการหลัก
|
||||
const orgLevelOptionMain = ref<DataOption[]>([
|
||||
{ name: "ระดับสำนัก", id: "DEPARTMENT" },
|
||||
{
|
||||
|
|
@ -60,18 +66,10 @@ const orgLevelOptionMain = ref<DataOption[]>([
|
|||
{ name: "ระดับส่วน/กลุ่มภารกิจ", id: "DIVISION" },
|
||||
{ name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
|
||||
]);
|
||||
const orgLevelOption = ref<DataOption[]>([]); //ตัวเลือกระดับส่วนราชการ
|
||||
const orgLevelSubOptionMain = ref<DataOption[]>([]); //ตัวเลือกระดับส่วนราชการซับ
|
||||
|
||||
const orgLevelSubOptionMain = ref<DataOption[]>([]);
|
||||
|
||||
const orgLevelOption = ref<DataOption[]>([]);
|
||||
|
||||
const orgNameRef = ref<Object | null>(null);
|
||||
const orgShortNameRef = ref<Object | null>(null);
|
||||
const orgCodeRef = ref<Object | null>(null);
|
||||
|
||||
const orgLevelRef = ref<Object | null>(null);
|
||||
const orgLevelSubRef = ref<Object | null>(null);
|
||||
|
||||
// ฟอร์มข้อมูล
|
||||
const formData = reactive<FormDataAgency>({
|
||||
orgName: "",
|
||||
orgShortName: "",
|
||||
|
|
@ -84,35 +82,11 @@ const formData = reactive<FormDataAgency>({
|
|||
responsibility: "",
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const objectComplaintsRef: FormAgencyRef = {
|
||||
orgName: orgNameRef,
|
||||
orgShortName: orgShortNameRef,
|
||||
orgCode: orgCodeRef,
|
||||
|
||||
orgLevel: orgLevelRef,
|
||||
orgLevelSub: orgLevelSubRef,
|
||||
};
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function validateForm() {
|
||||
const hasError = [];
|
||||
for (const key in objectComplaintsRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
|
||||
const property = objectComplaintsRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
onSubmit();
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
/**
|
||||
* ฟังก์ชันบันทึกข้อมูลส่วนราชการ
|
||||
*
|
||||
* ถ้า actionType.value === "ADD" จะบันทึกการเพิ่มข้อมูลส่วนราชการ ไม่ จะบันทึกการแก้ไขข้อมูลส่วนราชการ
|
||||
**/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
|
|
@ -156,7 +130,7 @@ function onSubmit() {
|
|||
.then(async () => {
|
||||
await props.fetchDataTree(store.draftId);
|
||||
await success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
await closeClear();
|
||||
closeClear();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -189,7 +163,7 @@ function onSubmit() {
|
|||
false
|
||||
);
|
||||
await success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
await closeClear();
|
||||
closeClear();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -202,7 +176,7 @@ function onSubmit() {
|
|||
}
|
||||
|
||||
/**
|
||||
* function เช็ต formdata กลับไปค่าว่าง และปิด popup
|
||||
* ฟังก์ชันเช็ต formdata กลับไปค่าว่าง และปิด popup
|
||||
*/
|
||||
function closeClear() {
|
||||
formData.orgName = "";
|
||||
|
|
@ -217,73 +191,11 @@ function closeClear() {
|
|||
}
|
||||
|
||||
/**
|
||||
* callback function ทำงานเมื่อมีการเปิด popup
|
||||
*/
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
if (actionType.value === "ADD") {
|
||||
if (props.dataNode) {
|
||||
formData.orgCode =
|
||||
props?.dataNode?.orgLevel !== 0
|
||||
? props?.dataNode.orgTreeCode
|
||||
: undefined;
|
||||
formData.orgShortName =
|
||||
props?.dataNode?.orgLevel !== 0
|
||||
? props?.dataNode.orgTreeShortName
|
||||
: undefined;
|
||||
}
|
||||
|
||||
if (level.value === 0) {
|
||||
formData.orgLevel = "DEPARTMENT";
|
||||
orgLevelOption.value = orgLevelOptionMain.value;
|
||||
} else {
|
||||
orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
|
||||
formData.orgLevel = "";
|
||||
}
|
||||
|
||||
formData.orgLevel == "DEPARTMENT" ? selectOrgLevele("DEPARTMENT") : "";
|
||||
} else {
|
||||
if (props.dataNode) {
|
||||
formData.orgName = props.dataNode.orgTreeName;
|
||||
formData.orgShortName = props.dataNode.orgTreeShortName;
|
||||
formData.orgCode = props.dataNode.orgTreeCode;
|
||||
formData.orgPhoneEx = props.dataNode.orgTreePhoneEx;
|
||||
formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
|
||||
formData.orgFax = props.dataNode.orgTreeFax;
|
||||
formData.orgLevel = props.dataNode.orgTreeRank;
|
||||
formData.orgLevelSub = props.dataNode.orgTreeRankSub;
|
||||
formData.responsibility = props.dataNode.responsibility;
|
||||
orgLevelOption.value =
|
||||
props.dataNode.orgTreeRank === "DEPARTMENT"
|
||||
? orgLevelOptionMain.value
|
||||
: orgLevelOptionMain.value.slice(1, 4);
|
||||
selectOrgLevele(formData.orgLevel, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* title ของ popup
|
||||
*/
|
||||
const tittleName = computed(() => {
|
||||
let name = "";
|
||||
if (actionType.value === "ADD") {
|
||||
name = level.value === 0 ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
|
||||
} else {
|
||||
name = level.value === 0 ? "แก้ไขหน่วยงาน" : "แก้ไขส่วนราชการ";
|
||||
}
|
||||
|
||||
return name;
|
||||
});
|
||||
|
||||
/**
|
||||
* function เลือกระดับของส่วนราชการ
|
||||
* @param val
|
||||
* ฟังก์ชันเลือกระดับของส่วนราชการ
|
||||
* @param val ระดับของส่วนราชการ
|
||||
* @param status
|
||||
*
|
||||
* กำหนดตัวเลือกของระดับของส่วนราชการ(ซับ )ตามประเภทระดับของส่วนราชการ
|
||||
*/
|
||||
function selectOrgLevele(val: string, status: boolean = true) {
|
||||
formData.orgLevelSub = status ? "" : formData.orgLevelSub;
|
||||
|
|
@ -338,13 +250,77 @@ function selectOrgLevele(val: string, status: boolean = true) {
|
|||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* กำหนด Title ของ popup จะถูกตั้งตามประเภทการดำเนินการและระดับที่กำหนด
|
||||
*/
|
||||
const tittleName = computed(() => {
|
||||
let name = "";
|
||||
if (actionType.value === "ADD") {
|
||||
name = level.value === 0 ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
|
||||
} else {
|
||||
name = level.value === 0 ? "แก้ไขหน่วยงาน" : "แก้ไขส่วนราชการ";
|
||||
}
|
||||
|
||||
return name;
|
||||
});
|
||||
|
||||
/**
|
||||
* callback function ทำงานเมื่อ props.modal เป็น true
|
||||
*/
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
if (actionType.value === "ADD") {
|
||||
if (props.dataNode) {
|
||||
formData.orgCode =
|
||||
props?.dataNode?.orgLevel !== 0
|
||||
? props?.dataNode.orgTreeCode
|
||||
: undefined;
|
||||
formData.orgShortName =
|
||||
props?.dataNode?.orgLevel !== 0
|
||||
? props?.dataNode.orgTreeShortName
|
||||
: undefined;
|
||||
}
|
||||
|
||||
if (level.value === 0) {
|
||||
formData.orgLevel = "DEPARTMENT";
|
||||
orgLevelOption.value = orgLevelOptionMain.value;
|
||||
} else {
|
||||
orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
|
||||
formData.orgLevel = "";
|
||||
}
|
||||
|
||||
formData.orgLevel == "DEPARTMENT" ? selectOrgLevele("DEPARTMENT") : "";
|
||||
} else {
|
||||
if (props.dataNode) {
|
||||
formData.orgName = props.dataNode.orgTreeName;
|
||||
formData.orgShortName = props.dataNode.orgTreeShortName;
|
||||
formData.orgCode = props.dataNode.orgTreeCode;
|
||||
formData.orgPhoneEx = props.dataNode.orgTreePhoneEx;
|
||||
formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
|
||||
formData.orgFax = props.dataNode.orgTreeFax;
|
||||
formData.orgLevel = props.dataNode.orgTreeRank;
|
||||
formData.orgLevelSub = props.dataNode.orgTreeRankSub;
|
||||
formData.responsibility = props.dataNode.responsibility;
|
||||
orgLevelOption.value =
|
||||
props.dataNode.orgTreeRank === "DEPARTMENT"
|
||||
? orgLevelOptionMain.value
|
||||
: orgLevelOptionMain.value.slice(1, 4);
|
||||
selectOrgLevele(formData.orgLevel, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 60vw">
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader :tittle="tittleName" :close="closeClear" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
|
|
@ -517,7 +493,7 @@ function selectOrgLevele(val: string, status: boolean = true) {
|
|||
<q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue