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,9 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, defineProps } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* importType
|
||||
|
|
@ -12,9 +13,12 @@ import type {
|
|||
DataOption,
|
||||
FormPositionSelect,
|
||||
} from "@/modules/02_organization/interface/index/Main";
|
||||
import type {
|
||||
DataPosType,
|
||||
DataLevel,
|
||||
} from "@/modules/02_organization/interface/response/Main";
|
||||
import type {
|
||||
OptionType,
|
||||
OptionLevel,
|
||||
OptionExecutive,
|
||||
} from "@/modules/02_organization/interface/response/organizational";
|
||||
|
||||
|
|
@ -33,9 +37,8 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
|
|||
/**
|
||||
* props
|
||||
*/
|
||||
|
||||
const modal = defineModel<boolean>("modalAdd", { required: true });
|
||||
const isEditCheck = defineModel<boolean>("isEdit", { required: true });
|
||||
const modal = defineModel<boolean>("modalAdd", { required: true }); // เปิด,ปิด popup
|
||||
const isEditCheck = defineModel<boolean>("isEdit", { required: true }); // สถานะแก้ไข
|
||||
const props = defineProps({
|
||||
emitSearch: Function,
|
||||
getData: Function,
|
||||
|
|
@ -43,20 +46,20 @@ const props = defineProps({
|
|||
levelOp: Object,
|
||||
});
|
||||
|
||||
const dataLevel = ref<any>();
|
||||
const posExecutive = ref<string>("");
|
||||
const isSpecial = ref<boolean>(false);
|
||||
const shape = ref<string>("false");
|
||||
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
|
||||
const dataLevel = ref<DataPosType[]>([]); // ข้อมูลประเภทตำแหน่ง
|
||||
const posExecutive = ref<string>(""); // ชื่อตำแหน่งทางการบริหาร
|
||||
const isSpecial = ref<boolean>(false); // เฉพาะสายงานที่กำหนด
|
||||
const shape = ref<string>("false"); // ตำแหน่งทางการบริหาร
|
||||
const isDisValidate = ref<boolean>(false);
|
||||
|
||||
const typeOpsMain = ref<DataOption[]>([]);
|
||||
const levelOpsMain = ref<DataOption[]>([]);
|
||||
const executiveOpsMain = ref<DataOption[]>([]);
|
||||
const executiveOps = ref<DataOption[]>([]);
|
||||
const typeOps = ref<DataOption[]>([]);
|
||||
const levelOps = ref<DataOption[]>([]);
|
||||
const typeOpsMain = ref<DataOption[]>([]); //ตัวเลือกประเภทตำแหน่ง
|
||||
const levelOpsMain = ref<DataOption[]>([]); //ตัวเลือกระดับตำแหน่ง
|
||||
const executiveOpsMain = ref<DataOption[]>([]); //ตัวเลือกรายการตำแหน่งทางการบริหาร
|
||||
const typeOps = ref<DataOption[]>([]); //ตัวเลือกประเภทตำแหน่ง
|
||||
const levelOps = ref<DataOption[]>([]); //ตัวเลือกระดับตำแหน่ง
|
||||
const executiveOps = ref<DataOption[]>([]); //ตัวเลือกรายการตำแหน่งทางการบริหาร
|
||||
const shapeOp = ref<DataOption[]>([
|
||||
{
|
||||
id: "false",
|
||||
|
|
@ -67,6 +70,8 @@ const shapeOp = ref<DataOption[]>([
|
|||
name: "เพิ่มใหม่",
|
||||
},
|
||||
]);
|
||||
|
||||
//ฟอร์มข้อมูลตำแหน่ง
|
||||
const formPositionSelect = reactive<FormPositionSelect>({
|
||||
positionId: "",
|
||||
positionName: "",
|
||||
|
|
@ -92,7 +97,7 @@ function validateFormPositionEdit() {
|
|||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่น บันทึกการแก้ไข
|
||||
* ฟังก์ชั่นบันทึกการแก้ไขตำแหน่ง
|
||||
*/
|
||||
function saveSelectEdit() {
|
||||
dialogConfirm(
|
||||
|
|
@ -150,7 +155,7 @@ function saveSelectEdit() {
|
|||
);
|
||||
}
|
||||
/**
|
||||
* ฟังชั่น บันทึก
|
||||
* ฟังชั่นบันทึกการเพิ่มข้อมูลตำแหน่ง
|
||||
*/
|
||||
function onSubmitSelectEdit() {
|
||||
dialogConfirm(
|
||||
|
|
@ -212,11 +217,13 @@ function onSubmitSelectEdit() {
|
|||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่น เครียลฟอร์ม
|
||||
* ฟังชั่นเคลียร์ฟอร์มข้อมูล
|
||||
*
|
||||
* กำหนดค่าฟอร์มข้อมูลเป็นค่า Default
|
||||
*/
|
||||
async function clearFormPositionSelect() {
|
||||
isEditCheck.value = false;
|
||||
isDisValidate.value = await true;
|
||||
isDisValidate.value = true;
|
||||
formPositionSelect.positionId = "";
|
||||
formPositionSelect.positionName = "";
|
||||
formPositionSelect.positionField = "";
|
||||
|
|
@ -227,10 +234,76 @@ async function clearFormPositionSelect() {
|
|||
formPositionSelect.positionArea = "";
|
||||
isSpecial.value = false;
|
||||
setTimeout(async () => {
|
||||
isDisValidate.value = await false;
|
||||
isDisValidate.value = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์เรียกข้อมูลรายการประเภทตำแหน่ง
|
||||
*/
|
||||
async function fetchType() {
|
||||
await http
|
||||
.get(config.API.orgPosType)
|
||||
.then(async (res) => {
|
||||
dataLevel.value = await 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);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันกำหนดตัวเลือกประเภทตำแหน่งตาม id ประเภทตำแหน่ง
|
||||
* @param val id ประเภทตำแหน่ง
|
||||
*/
|
||||
async function updateSelectType(val: string) {
|
||||
// หาระดับตำแหน่ง
|
||||
const listLevel = dataLevel.value.find((e: DataPosType) => e.id === val);
|
||||
levelOpsMain.value =
|
||||
listLevel?.posLevels.map((e: DataLevel) => ({
|
||||
id: e.id,
|
||||
name: e.posLevelName ? e.posLevelName.toString() : "",
|
||||
})) || [];
|
||||
|
||||
levelOps.value = levelOpsMain.value;
|
||||
formPositionSelect.positionLevel = "";
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์เรียกข้อมูลรายการตำแหน่งทางการบริหาร
|
||||
*/
|
||||
async function fetchExecutive() {
|
||||
await http
|
||||
.get(config.API.orgPosExecutive)
|
||||
.then(async (res) => {
|
||||
executiveOpsMain.value = await res.data.result.map(
|
||||
(e: OptionExecutive) => ({
|
||||
id: e.id,
|
||||
name: e.posExecutiveName,
|
||||
})
|
||||
);
|
||||
executiveOps.value = executiveOpsMain.value;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันปิด Popup
|
||||
*
|
||||
* และเรียก clearFormPositionSelect() เพื่อกำหนดฟอร์มข่้อมูลเป็น Default
|
||||
*/
|
||||
function close() {
|
||||
modal.value = false;
|
||||
clearFormPositionSelect();
|
||||
}
|
||||
|
||||
/**
|
||||
* ส่งค่า css ออกไปตามเงื่อนไข
|
||||
* @param val true/false
|
||||
|
|
@ -243,57 +316,11 @@ function inputEdit(val: boolean) {
|
|||
}
|
||||
|
||||
/**
|
||||
* function เลือกประเภทตำแหน่ง
|
||||
* @param val id ประเภทตำแหน่ง
|
||||
* ดูการเปลี่ยนแปลงของ modal.value
|
||||
*
|
||||
* ถ้าเป็น true ทำการเรียกข้อมูลรายการประเภทตำแหน่ง และ ข้อมูลรายการตำแหน่งทางการบริหาร
|
||||
* และถ้ามี props.data จะกำหนด formPositionSelect เป็นตาม props.data
|
||||
*/
|
||||
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;
|
||||
formPositionSelect.positionLevel = "";
|
||||
}
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
clearFormPositionSelect();
|
||||
}
|
||||
|
||||
async function fetchType() {
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
/** function เรียกรายการตำแหน่งทางการบริหาร */
|
||||
function fetchExecutive() {
|
||||
http
|
||||
.get(config.API.orgPosExecutive)
|
||||
.then((res) => {
|
||||
executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
|
||||
id: e.id,
|
||||
name: e.posExecutiveName,
|
||||
}));
|
||||
executiveOps.value = executiveOpsMain.value;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
|
|
@ -303,8 +330,7 @@ watch(
|
|||
hideLoader();
|
||||
if (props.data) {
|
||||
const dataList = props.data;
|
||||
|
||||
updateSelectType(dataList.posTypeId);
|
||||
await updateSelectType(dataList.posTypeId);
|
||||
formPositionSelect.positionId = dataList.id;
|
||||
formPositionSelect.positionName = dataList.positionName;
|
||||
formPositionSelect.positionField = dataList.positionField;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue