update
This commit is contained in:
parent
46533bbd62
commit
15d3ac574d
128 changed files with 347 additions and 322 deletions
513
src/modules/02_organization/components/DialogFormAgency.vue
Normal file
513
src/modules/02_organization/components/DialogFormAgency.vue
Normal file
|
|
@ -0,0 +1,513 @@
|
|||
<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 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";
|
||||
|
||||
const level = defineModel<number>("orgLevel", { required: true });
|
||||
const actionType = defineModel<string>("actionType", { required: true });
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
require: true,
|
||||
},
|
||||
close: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
fetchDataTree: {
|
||||
type: Function,
|
||||
require: true,
|
||||
default: () => "",
|
||||
},
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
require: true,
|
||||
default: () => "",
|
||||
},
|
||||
dataNode: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
edit: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
|
||||
|
||||
const orgLevelOptionMain = ref<DataOption[]>([
|
||||
{ name: "ระดับสำนัก", id: "DEPARTMENT" },
|
||||
{
|
||||
name: "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง",
|
||||
id: "OFFICE",
|
||||
},
|
||||
{ name: "ระดับส่วน/กลุ่มภารกิจ", id: "DIVISION" },
|
||||
{ name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
|
||||
]);
|
||||
|
||||
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: "",
|
||||
orgCode: "",
|
||||
orgPhoneEx: "",
|
||||
orgPhoneIn: "",
|
||||
orgFax: "",
|
||||
orgLevel: "",
|
||||
orgLevelSub: "",
|
||||
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 {
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
const type = store.checkLevel(level.value);
|
||||
const nameId =
|
||||
level.value === 0
|
||||
? "orgRevisionId"
|
||||
: level.value === 1
|
||||
? "orgRootId"
|
||||
: level.value === 2
|
||||
? "orgChild1Id"
|
||||
: level.value === 3
|
||||
? "orgChild2Id"
|
||||
: "orgChild3Id";
|
||||
|
||||
let rootId: string = "";
|
||||
if (actionType.value === "ADD") {
|
||||
rootId = level.value === 0 ? store.draftId : props.dataNode?.orgTreeId;
|
||||
} else {
|
||||
rootId = level.value === 0 ? store.draftId : props.dataNode?.orgRootId;
|
||||
}
|
||||
|
||||
const body = {
|
||||
["org" + type + "Name"]: formData.orgName,
|
||||
["org" + type + "ShortName"]: formData.orgShortName,
|
||||
["org" + type + "Code"]: formData.orgCode,
|
||||
["org" + type + "PhoneEx"]: formData.orgPhoneEx,
|
||||
["org" + type + "PhoneIn"]: formData.orgPhoneIn,
|
||||
["org" + type + "Fax"]: formData.orgFax,
|
||||
["org" + type + "Rank"]: formData.orgLevel,
|
||||
["org" + type + "RankSub"]: formData.orgLevelSub,
|
||||
[nameId]: rootId,
|
||||
responsibility:
|
||||
formData.responsibility != null ? formData.responsibility : "",
|
||||
};
|
||||
|
||||
if (actionType.value === "ADD") {
|
||||
await http
|
||||
.post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
|
||||
.then(() => {
|
||||
props.fetchDataTree(store.draftId);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
closeClear();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
} else {
|
||||
props.dataNode &&
|
||||
(await http
|
||||
.put(
|
||||
config.API.orgLevelByid(
|
||||
type.toLocaleLowerCase(),
|
||||
props.dataNode.orgTreeId
|
||||
),
|
||||
body
|
||||
)
|
||||
.then(() => {
|
||||
props.fetchDataTree(store.draftId);
|
||||
props.edit?.(
|
||||
props.dataNode?.orgTreeId,
|
||||
type,
|
||||
body,
|
||||
props.dataNode?.orgRootCode
|
||||
);
|
||||
closeClear();
|
||||
props.fetchDataTable(
|
||||
props?.dataNode?.orgTreeId,
|
||||
props?.dataNode?.orgLevel,
|
||||
false
|
||||
);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeClear() {
|
||||
formData.orgName = "";
|
||||
formData.orgShortName = "";
|
||||
formData.orgCode = "";
|
||||
formData.orgPhoneEx = "";
|
||||
formData.orgPhoneIn = "";
|
||||
formData.orgFax = "";
|
||||
formData.orgLevel = "";
|
||||
formData.responsibility = "";
|
||||
props.close?.();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
if (actionType.value === "ADD") {
|
||||
// console.log(props.dataNode);
|
||||
// console.log(level.value);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const tittleName = computed(() => {
|
||||
let name = "";
|
||||
if (actionType.value === "ADD") {
|
||||
name = level.value === 0 ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
|
||||
} else {
|
||||
name = level.value === 0 ? "แก้ไขหน่วยงาน" : "แก้ไขส่วนราชการ";
|
||||
}
|
||||
|
||||
return name;
|
||||
});
|
||||
|
||||
function selectOrgLevele(val: string, status: boolean = true) {
|
||||
formData.orgLevelSub = status ? "" : formData.orgLevelSub;
|
||||
switch (val) {
|
||||
case "DEPARTMENT":
|
||||
orgLevelSubOptionMain.value = [
|
||||
{ name: "สำนัก", id: "BUREAU" },
|
||||
{ name: "สำนักงาน", id: "OFFICE" },
|
||||
{ name: "สำนักงานเขต", id: "DISTRICT" },
|
||||
];
|
||||
break;
|
||||
case "OFFICE":
|
||||
orgLevelSubOptionMain.value = [
|
||||
{ name: "กอง", id: "DIVISION" },
|
||||
{
|
||||
name: "สำนักงาน",
|
||||
id: "OFFICE",
|
||||
},
|
||||
{ name: "ส่วนราชการ", id: "GOVERNMENT" },
|
||||
{ name: "โรงพยาบาล", id: "HOSPITAL" },
|
||||
{ name: "เทียบเท่ากอง", id: "EQUIVALENT" },
|
||||
];
|
||||
|
||||
break;
|
||||
case "DIVISION":
|
||||
orgLevelSubOptionMain.value = [
|
||||
{ name: "ส่วน", id: "SECTION" },
|
||||
{
|
||||
name: "กลุ่มภารกิจ",
|
||||
id: "MISSION",
|
||||
},
|
||||
];
|
||||
|
||||
case "SECTION":
|
||||
orgLevelSubOptionMain.value = [
|
||||
{ name: "ฝ่าย", id: "FACTION" },
|
||||
{
|
||||
name: "กลุ่มงาน",
|
||||
id: "WORK",
|
||||
},
|
||||
{
|
||||
name: "สถานีดับเพลิงและกู้ภัย",
|
||||
id: "FIRESTATION",
|
||||
},
|
||||
{
|
||||
name: "โรงเรียน",
|
||||
id: "SCHOOL",
|
||||
},
|
||||
];
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 60vw">
|
||||
<form @submit.prevent="validateForm">
|
||||
<DialogHeader :tittle="tittleName" :close="closeClear" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.orgName"
|
||||
ref="orgNameRef"
|
||||
dense
|
||||
outlined
|
||||
for="#ocName"
|
||||
:label="level == 0 ? 'ชื่อหน่วยงาน' : 'ชื่อส่วนราชการ'"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${
|
||||
level == 0
|
||||
? 'กรุณากรอกชื่อหน่วยงาน'
|
||||
: 'กรุณากรอกชื่อส่วนราชการ'
|
||||
}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
v-model="formData.orgShortName"
|
||||
:readonly="
|
||||
(actionType === 'ADD' &&
|
||||
props?.dataNode?.orgLevel !== 0 &&
|
||||
level !== 0) ||
|
||||
(actionType === 'EDIT' && props?.dataNode?.orgLevel > 1)
|
||||
"
|
||||
ref="orgShortNameRef"
|
||||
dense
|
||||
outlined
|
||||
for="#shortName"
|
||||
label="อักษรย่อ"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกอักษรย่อ'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
:readonly="
|
||||
(actionType === 'ADD' &&
|
||||
props?.dataNode?.orgLevel !== 0 &&
|
||||
level !== 0) ||
|
||||
(actionType === 'EDIT' && props?.dataNode?.orgLevel > 1)
|
||||
"
|
||||
mask="##"
|
||||
v-model="formData.orgCode"
|
||||
ref="orgCodeRef"
|
||||
dense
|
||||
outlined
|
||||
for="#ocNo"
|
||||
:label="level == 0 ? 'รหัสหน่วยงาน' : 'รหัสส่วนราชการ'"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${
|
||||
level == 0
|
||||
? 'กรุณากรอกรหัสหน่วยงาน'
|
||||
: 'กรุณากรอกรหัสส่วนราชการ'
|
||||
}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-select
|
||||
:readonly="level === 0 || formData.orgLevel === 'DEPARTMENT'"
|
||||
for="#ocLevel"
|
||||
ref="orgLevelRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="formData.orgLevel"
|
||||
@update:model-value="selectOrgLevele"
|
||||
:options="orgLevelOption"
|
||||
:label="
|
||||
level == 0 ? 'ระดับของหน่วยงาน' : 'ระดับของส่วนราชการ'
|
||||
"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
`${
|
||||
level == 0
|
||||
? 'กรุณาเลือกระดับของหน่วยงาน'
|
||||
: 'กรุณาเลือกระดับของส่วนราชการ'
|
||||
}`,
|
||||
]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4" v-if="formData.orgLevel !== ''">
|
||||
<q-select
|
||||
ref="orgLevelSubRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="formData.orgLevelSub"
|
||||
:options="orgLevelSubOptionMain"
|
||||
label="ระดับของส่วนราชการ(ซับ)"
|
||||
:rules="[
|
||||
(val) => !!val || 'กรุณาเลือกระดับของส่วนราชการ (ซับ)',
|
||||
]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.orgPhoneEx"
|
||||
ref="orgPhoneExRef"
|
||||
dense
|
||||
outlined
|
||||
for="#telOut"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.orgPhoneIn"
|
||||
ref="orgPhoneInRef"
|
||||
dense
|
||||
outlined
|
||||
for="#telIn"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อจากภายใน"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.orgFax"
|
||||
ref="orgFaxRef"
|
||||
dense
|
||||
outlined
|
||||
for="#tel"
|
||||
label="หมายเลขโทรสาร"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.responsibility"
|
||||
ref="responsibilityRef"
|
||||
dense
|
||||
outlined
|
||||
for="#tel"
|
||||
label="หน้าที่ความรับผิดชอบ"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
rows="4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn type="submit" :label="`บันทึก`" color="public">
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue