update
This commit is contained in:
parent
46533bbd62
commit
15d3ac574d
128 changed files with 347 additions and 322 deletions
518
src/modules/02_organization/components/DialogAddPosition.vue
Normal file
518
src/modules/02_organization/components/DialogAddPosition.vue
Normal file
|
|
@ -0,0 +1,518 @@
|
|||
<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";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import type {
|
||||
DataOption,
|
||||
FormPositionSelect,
|
||||
} from "@/modules/02_organization/interface/index/Main";
|
||||
import type {
|
||||
OptionType,
|
||||
OptionLevel,
|
||||
OptionExecutive,
|
||||
} from "@/modules/02_organization/interface/response/organizational";
|
||||
|
||||
/**
|
||||
* importComponents
|
||||
*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
|
||||
const modal = defineModel<boolean>("modalAdd", { required: true });
|
||||
const isEditCheck = defineModel<boolean>("isEdit", { required: true });
|
||||
const props = defineProps({
|
||||
emitSearch: Function,
|
||||
getData: Function,
|
||||
data: Object,
|
||||
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 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 shapeOp = ref<DataOption[]>([
|
||||
{
|
||||
id: "false",
|
||||
name: "เลือกจากรายการ",
|
||||
},
|
||||
{
|
||||
id: "true",
|
||||
name: "เพิ่มใหม่",
|
||||
},
|
||||
]);
|
||||
const formPositionSelect = reactive<FormPositionSelect>({
|
||||
positionId: "",
|
||||
positionName: "",
|
||||
positionField: "",
|
||||
positionType: "",
|
||||
positionLevel: "",
|
||||
positionExecutive: "",
|
||||
positionExecutiveField: "",
|
||||
positionArea: "",
|
||||
});
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
|
||||
*/
|
||||
function validateFormPositionEdit() {
|
||||
isDisValidate.value = false;
|
||||
if (isEditCheck.value == true) {
|
||||
saveSelectEdit();
|
||||
} else {
|
||||
onSubmitSelectEdit();
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่น บันทึกการแก้ไข
|
||||
*/
|
||||
function saveSelectEdit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const dataExecutive =
|
||||
shape.value == "false"
|
||||
? formPositionSelect.positionExecutive
|
||||
: posExecutive.value;
|
||||
const url =
|
||||
shape.value == "false"
|
||||
? config.API.orgPosPositionById(formPositionSelect.positionId)
|
||||
: config.API.orgPosPositionExecutive() +
|
||||
`/${formPositionSelect.positionId}`;
|
||||
showLoader();
|
||||
const body =
|
||||
shape.value == "false"
|
||||
? {
|
||||
posDictName: formPositionSelect.positionName,
|
||||
posDictField: formPositionSelect.positionField, //สายงาน
|
||||
posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
|
||||
posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
|
||||
posExecutiveId: dataExecutive ?? "", //ตำแหน่งทางการบริหาร
|
||||
posDictExecutiveField:
|
||||
formPositionSelect.positionExecutiveField ?? "", //ด้านทางการบริหาร
|
||||
posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
|
||||
isSpecial: isSpecial.value,
|
||||
}
|
||||
: {
|
||||
posDictName: formPositionSelect.positionName,
|
||||
posDictField: formPositionSelect.positionField, //สายงาน
|
||||
posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
|
||||
posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
|
||||
posExecutive: dataExecutive ?? "", //ตำแหน่งทางการบริหาร
|
||||
posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
|
||||
posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
|
||||
isSpecial: isSpecial.value,
|
||||
};
|
||||
await http
|
||||
.put(url, body)
|
||||
.then(() => {
|
||||
success($q, "เพิ่มข้อมูลสำเร็จ");
|
||||
|
||||
props.getData?.();
|
||||
close();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการแก้ไขตำแหน่ง",
|
||||
"ต้องการยืนยันแก้ไขตำแหน่งนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
/**
|
||||
* ฟังชั่น บันทึก
|
||||
*/
|
||||
function onSubmitSelectEdit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const dataExecutive =
|
||||
shape.value == "false"
|
||||
? formPositionSelect.positionExecutive
|
||||
: posExecutive.value;
|
||||
const url =
|
||||
shape.value == "false"
|
||||
? config.API.orgPosPosition
|
||||
: config.API.orgPosPositionExecutive();
|
||||
showLoader();
|
||||
|
||||
const body =
|
||||
shape.value == "false"
|
||||
? {
|
||||
posDictName: formPositionSelect.positionName,
|
||||
posDictField: formPositionSelect.positionField, //สายงาน
|
||||
posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
|
||||
posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
|
||||
posExecutiveId: dataExecutive ?? "", //ตำแหน่งทางการบริหาร
|
||||
posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
|
||||
posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
|
||||
isSpecial: isSpecial.value,
|
||||
}
|
||||
: {
|
||||
posDictName: formPositionSelect.positionName,
|
||||
posDictField: formPositionSelect.positionField, //สายงาน
|
||||
posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
|
||||
posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
|
||||
posExecutive: dataExecutive ?? "", //ตำแหน่งทางการบริหาร
|
||||
posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
|
||||
posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
|
||||
isSpecial: isSpecial.value,
|
||||
};
|
||||
|
||||
await http
|
||||
.post(url, body)
|
||||
.then(() => {
|
||||
success($q, "เพิ่มข้อมูลสำเร็จ");
|
||||
|
||||
props.emitSearch?.(formPositionSelect.positionName, "positionName");
|
||||
close();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเพิ่มตำแหน่ง",
|
||||
"ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่น เครียลฟอร์ม
|
||||
*/
|
||||
async function clearFormPositionSelect() {
|
||||
isEditCheck.value = false;
|
||||
isDisValidate.value = await true;
|
||||
formPositionSelect.positionId = "";
|
||||
formPositionSelect.positionName = "";
|
||||
formPositionSelect.positionField = "";
|
||||
formPositionSelect.positionType = "";
|
||||
formPositionSelect.positionLevel = "";
|
||||
formPositionSelect.positionExecutive = "";
|
||||
formPositionSelect.positionExecutiveField = "";
|
||||
formPositionSelect.positionArea = "";
|
||||
isSpecial.value = false;
|
||||
setTimeout(async () => {
|
||||
isDisValidate.value = await false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* ส่งค่า css ออกไปตามเงื่อนไข
|
||||
* @param val true/false
|
||||
*/
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer inputgreen ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
|
||||
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() {
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
/** function เรียกรายการตำแหน่งทางการบริหาร */
|
||||
async function fetchExecutive() {
|
||||
showLoader();
|
||||
await 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);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
if (modal.value === true) {
|
||||
await fetchType();
|
||||
await fetchExecutive();
|
||||
if (props.data) {
|
||||
const dataList = props.data;
|
||||
|
||||
updateSelectType(dataList.posTypeId);
|
||||
formPositionSelect.positionId = dataList.id;
|
||||
formPositionSelect.positionName = dataList.positionName;
|
||||
formPositionSelect.positionField = dataList.positionField;
|
||||
formPositionSelect.positionType = dataList.posTypeId;
|
||||
formPositionSelect.positionLevel = dataList.posLevelId;
|
||||
formPositionSelect.positionExecutive = dataList.posExecutiveId;
|
||||
formPositionSelect.positionExecutiveField =
|
||||
dataList.positionExecutiveField;
|
||||
formPositionSelect.positionArea = dataList.positionArea;
|
||||
isSpecial.value = dataList.isSpecial;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</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">
|
||||
<q-form
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="validateFormPositionEdit"
|
||||
>
|
||||
<!-- @submit.prevent="validateFormPositionEdit" -->
|
||||
<div class="row q-col-gutter-sm col-12 q-pa-sm">
|
||||
<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="
|
||||
!isDisValidate
|
||||
? [(val) => !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`]
|
||||
: []
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
ref="positionAreaRef"
|
||||
v-model="formPositionSelect.positionArea"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#positionArea"
|
||||
label="ด้าน/สาขา"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
ref="positionFieldRef"
|
||||
v-model="formPositionSelect.positionField"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#positionField"
|
||||
label="สายงาน"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="
|
||||
!isDisValidate
|
||||
? [(val) => !!val || `${'กรุณากรอกสายงาน'}`]
|
||||
: []
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-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="
|
||||
!isDisValidate
|
||||
? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
|
||||
: []
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-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="
|
||||
!isDisValidate
|
||||
? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
|
||||
: []
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<q-select
|
||||
ref="positionExecutiveRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
label="ตำแหน่งทางการบริหาร"
|
||||
v-model="shape"
|
||||
:options="shapeOp"
|
||||
emit-value
|
||||
dense
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<q-select
|
||||
v-if="shape == 'false'"
|
||||
ref="positionExecutiveRef"
|
||||
:class="inputEdit(isReadonly)"
|
||||
label="รายการตำแหน่งทางการบริหาร"
|
||||
v-model="formPositionSelect.positionExecutive"
|
||||
:options="executiveOps"
|
||||
emit-value
|
||||
dense
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
clearable
|
||||
/>
|
||||
<q-input
|
||||
v-else
|
||||
ref="positionExecutiveFieldRef"
|
||||
v-model="posExecutive"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#positionExecutiveField"
|
||||
label="ชื่อตำแหน่งทางการบริหาร"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
ref="positionExecutiveFieldRef"
|
||||
v-model="formPositionSelect.positionExecutiveField"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#positionExecutiveField"
|
||||
label="ด้านทางการบริหาร"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-6 self-center">
|
||||
<q-checkbox
|
||||
size="md"
|
||||
v-model="isSpecial"
|
||||
label="เฉพาะสายงานที่กำหนด"
|
||||
/>
|
||||
</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>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
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>
|
||||
186
src/modules/02_organization/components/DialogFormDateTime.vue
Normal file
186
src/modules/02_organization/components/DialogFormDateTime.vue
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type { FormDateTimeRef } from "@/modules/02_organization/interface/index/Main";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const props = defineProps({
|
||||
modal: Boolean,
|
||||
close: Function,
|
||||
fetchActive: {
|
||||
type: Function,
|
||||
require: true,
|
||||
default: () => "Function fetchActive",
|
||||
},
|
||||
});
|
||||
|
||||
const store = useOrganizational();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
date2Thai,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const minDate = computed(() => {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + 1);
|
||||
return date;
|
||||
});
|
||||
const dateTimeRef = ref<Object | null>(null);
|
||||
|
||||
const dateTime = ref<Date | null>();
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const objectRef: FormDateTimeRef = {
|
||||
dateTime: dateTimeRef,
|
||||
};
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function validateForm() {
|
||||
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)) {
|
||||
onSubmit();
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.put(config.API.orgSetDateTime(store.draftId as string), {
|
||||
orgPublishDate: dateTime.value,
|
||||
})
|
||||
.then(async () => {
|
||||
await props.fetchActive();
|
||||
await props.close?.();
|
||||
await success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onClickPublish() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.organizationPublishGet)
|
||||
.then(async () => {
|
||||
await props.fetchActive();
|
||||
await props.close?.();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเผยเเพร่ข้อมูล",
|
||||
"ต้องการยืนยันการเผยเเพร่ข้อมูลนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
dateTime.value = store.orgPublishDate ? store.orgPublishDate : null;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 18vw">
|
||||
<form @submit.prevent="validateForm">
|
||||
<DialogHeader :tittle="`ตั้งเวลาเผยแพร่`" :close="props.close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateTime"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="minDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
for="#dateTime"
|
||||
ref="dateTimeRef"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
dateTime != null ? date2Thai(dateTime) : null
|
||||
"
|
||||
label="วันที่เผยแพร่"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่เผยแพร่'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat color="blue-7" icon="public" @click="onClickPublish()">
|
||||
<q-tooltip>เผยแพร่ข้อมูลทันที</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-btn type="submit" :label="`บันทึก`" color="public" />
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
927
src/modules/02_organization/components/DialogFormPosition.vue
Normal file
927
src/modules/02_organization/components/DialogFormPosition.vue
Normal file
|
|
@ -0,0 +1,927 @@
|
|||
<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 {
|
||||
FormDataPosition,
|
||||
FormPositionRef,
|
||||
DataOption,
|
||||
FormPositionSelect,
|
||||
RowDetailPositions,
|
||||
ListMenu,
|
||||
} from "@/modules/02_organization/interface/index/Main";
|
||||
import type {
|
||||
OptionType,
|
||||
OptionExecutive,
|
||||
} from "@/modules/02_organization/interface/response/organizational";
|
||||
import type { FilterMaster } from "@/modules/02_organization/interface/request/organizational";
|
||||
|
||||
/**
|
||||
* importComponents
|
||||
*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import DialogAddPosition from "@/modules/02_organization/components/DialogAddPosition.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
dialogRemove,
|
||||
dialogMessageNotify,
|
||||
} = mixin;
|
||||
|
||||
/**
|
||||
* 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 isEdit = ref<boolean>(false);
|
||||
const modalAdd = ref<boolean>(false);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const isDisValidate = ref<boolean>(false);
|
||||
const isPosition = ref<boolean>(false);
|
||||
const dataCopy = ref<any>();
|
||||
const search = ref<string>("");
|
||||
const type = ref<string>("positionName");
|
||||
const optionFilter = ref<DataOption[]>([
|
||||
{ id: "positionName", name: "ตำแหน่งในสายงาน" },
|
||||
{ id: "positionField", name: "สายงาน" },
|
||||
{ id: "positionType", name: "ประเภทตำแหน่ง" },
|
||||
{ id: "positionLevel", name: "ระดับตำแหน่ง" },
|
||||
{ id: "positionExecutive", name: "ตำแหน่งทางการบริหาร" },
|
||||
{ id: "positionExecutiveField", name: "ด้านทางการบริหาร" },
|
||||
{ id: "positionArea", name: "ด้าน/สาขา" },
|
||||
]);
|
||||
const typeOpsMain = ref<DataOption[]>([]);
|
||||
const executiveOpsMain = ref<DataOption[]>([]);
|
||||
const executiveOps = ref<DataOption[]>([]);
|
||||
const typeOps = ref<DataOption[]>([]);
|
||||
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: "",
|
||||
reason: "",
|
||||
isDirector: false,
|
||||
isOfficer: false,
|
||||
});
|
||||
|
||||
const formPositionSelect = reactive<FormPositionSelect>({
|
||||
positionId: "",
|
||||
positionName: "",
|
||||
positionField: "",
|
||||
positionType: "",
|
||||
positionLevel: "",
|
||||
positionExecutive: "",
|
||||
positionExecutiveField: "",
|
||||
positionArea: "",
|
||||
});
|
||||
/** 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: "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 visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"positionName",
|
||||
"positionField",
|
||||
"posTypeName",
|
||||
"posLevelName",
|
||||
"posExecutiveName",
|
||||
"positionExecutiveField",
|
||||
"positionArea",
|
||||
]);
|
||||
|
||||
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;
|
||||
formData.reason = data.reason;
|
||||
formData.isDirector = data.isDirector;
|
||||
formData.isOfficer = data.isOfficer;
|
||||
rows.value = data.positions;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const dataLevel = ref<any>();
|
||||
/** 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();
|
||||
});
|
||||
}
|
||||
|
||||
/** function เรียกรายการตำแหน่งทางการบริหาร */
|
||||
async function fetchExecutive() {
|
||||
showLoader();
|
||||
await 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);
|
||||
})
|
||||
.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 () => {
|
||||
const positionsData = rows.value.map((e: any) => ({
|
||||
posDictName: e.positionName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
|
||||
posDictField: e.positionField, //สายงาน
|
||||
posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
|
||||
posLevelId: e.posLevelId, //*ระดับตำแหน่ง
|
||||
posExecutiveId: e.posExecutiveId ? e.posExecutiveId : "", //ตำแหน่งทางการบริหาร
|
||||
posDictExecutiveField: e.positionExecutiveField, //ด้านทางการบริหาร
|
||||
posDictArea: e.positionArea, //ด้าน/สาขา
|
||||
isSpecial: e.isSpecial,
|
||||
positionIsSelected: e.positionIsSelected,
|
||||
}));
|
||||
const body = {
|
||||
posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
|
||||
posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
|
||||
posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
|
||||
reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
|
||||
isDirector: formData.isDirector,
|
||||
isOfficer: formData.isOfficer ? formData.isOfficer : false,
|
||||
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,
|
||||
};
|
||||
|
||||
showLoader();
|
||||
props.actionType === "ADD" || props.actionType === "COPY"
|
||||
? await http
|
||||
.post(config.API.orgPosMaster, body)
|
||||
.then(async () => {
|
||||
await props.fetchDataTable?.(
|
||||
reqMaster.value.id,
|
||||
reqMaster.value.type,
|
||||
false
|
||||
);
|
||||
await props.getSummary?.();
|
||||
await close();
|
||||
await success($q, "เพิ่มข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
})
|
||||
: props.rowId &&
|
||||
(await http
|
||||
.put(config.API.orgPosMasterById(props.rowId), body)
|
||||
.then(async () => {
|
||||
await props.fetchDataTable?.(
|
||||
reqMaster.value.id,
|
||||
reqMaster.value.type,
|
||||
false
|
||||
);
|
||||
await close();
|
||||
await success($q, "แก้ไขข้อมูลสำเร็จ");
|
||||
})
|
||||
.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.orgPosPosition +
|
||||
`?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;
|
||||
console.log(isEdit.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* ส่งค่า 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,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
fetchType();
|
||||
fetchExecutive();
|
||||
|
||||
if (props.actionType === "ADD") {
|
||||
rowsPositionSelect.value = [];
|
||||
search.value = "";
|
||||
rows.value = [];
|
||||
clearFormPositionSelect();
|
||||
formData.prefixNo = "";
|
||||
formData.positionNo = "";
|
||||
formData.suffixNo = "";
|
||||
formData.reason = "";
|
||||
} else {
|
||||
props.rowId && fetchPosition(props.rowId);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
async function addPosition(data: RowDetailPositions) {
|
||||
const isIdExist = await rows.value.some(
|
||||
(item: any) =>
|
||||
item.posExecutiveId == data.posExecutiveId &&
|
||||
item.positionField == data.positionField &&
|
||||
item.posLevelId == data.posLevelId &&
|
||||
item.posTypeId == data.posTypeId &&
|
||||
item.positionArea == data.positionArea &&
|
||||
item.positionExecutiveField == data.positionExecutiveField &&
|
||||
item.positionName == data.positionName &&
|
||||
item.isSpecial == data.isSpecial
|
||||
);
|
||||
|
||||
if (!isIdExist) {
|
||||
rows.value = [...rows.value, data];
|
||||
}
|
||||
}
|
||||
|
||||
function deleteData(id: string) {
|
||||
const dataRow = rows.value;
|
||||
const updatedRows = dataRow.filter((item: any) => item.id !== id);
|
||||
rows.value = updatedRows;
|
||||
}
|
||||
|
||||
function deletePos(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.delete(config.API.orgPosPositionById(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
searchInput();
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function clearFormPositionSelect() {
|
||||
isDisValidate.value = await true;
|
||||
formPositionSelect.positionId = "";
|
||||
formPositionSelect.positionName = "";
|
||||
formPositionSelect.positionField = "";
|
||||
formPositionSelect.positionType = "";
|
||||
formPositionSelect.positionLevel = "";
|
||||
formPositionSelect.positionExecutive = "";
|
||||
formPositionSelect.positionExecutiveField = "";
|
||||
formPositionSelect.positionArea = "";
|
||||
|
||||
setTimeout(async () => {
|
||||
isDisValidate.value = await false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function close() {
|
||||
props.close?.();
|
||||
clearFormPositionSelect();
|
||||
isPosition.value = false;
|
||||
}
|
||||
|
||||
async function emitSearch(keyword: string, typeSelect: string) {
|
||||
search.value = await keyword;
|
||||
type.value = await typeSelect;
|
||||
|
||||
await searchInput();
|
||||
}
|
||||
</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="row col-8 q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.shortName"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
for="#shortName"
|
||||
label="อักษรย่อ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.prefixNo"
|
||||
:class="inputEdit(isReadonly)"
|
||||
ref="prefixNoRef"
|
||||
dense
|
||||
outlined
|
||||
for="#prefixNo"
|
||||
label="Prefix เลขที่ตำเเหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<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-4">
|
||||
<q-input
|
||||
v-model="formData.suffixNo"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#suffixNo"
|
||||
label="Suffix ตำแหน่งเลขที่"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.reason"
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
for="#reason"
|
||||
label="หมายเหตุ"
|
||||
type="textarea"
|
||||
rows="4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="idcard"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<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"
|
||||
style="color: #000000; font-weight: 500"
|
||||
>
|
||||
<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 auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="mdi-delete"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="red"
|
||||
@click="deleteData(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</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-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 class="row col-12 q-mt-sm">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.isDirector"
|
||||
label="ผู้อำนวยการ/หัวหน้า"
|
||||
/>
|
||||
</div>
|
||||
</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), (dataCopy = null))"
|
||||
><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 auto-width></q-th>
|
||||
<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-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<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-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-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</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>
|
||||
<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>
|
||||
228
src/modules/02_organization/components/DialogHistory.vue
Normal file
228
src/modules/02_organization/components/DialogHistory.vue
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
<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 { QTableProps } from "quasar";
|
||||
import type { HistoryPostType } from "@/modules/02_organization/interface/index/Main";
|
||||
|
||||
/**
|
||||
* importComponrnts
|
||||
*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const modal = defineModel<boolean>("history", { required: true });
|
||||
const type = defineModel<number>("type", { required: true });
|
||||
const orgId = defineModel<string>("orgId", { required: true });
|
||||
|
||||
/**
|
||||
* ข้อมุล Table
|
||||
*/
|
||||
const rows = ref<HistoryPostType[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "orgRevisionName",
|
||||
align: "left",
|
||||
label: "ชื่อโครงสร้าง",
|
||||
sortable: true,
|
||||
field: "orgRevisionName",
|
||||
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: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"name",
|
||||
"orgRevisionName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูล ประวัติหน่วยงาน,ประวัติส่วนราชการ
|
||||
*/
|
||||
function postData() {
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.organizationHistoryPostNew, {
|
||||
id: orgId.value,
|
||||
type: type.value,
|
||||
})
|
||||
.then((res) => {
|
||||
const dataList = res.data.result;
|
||||
const dataMap = dataList.map((item: HistoryPostType) => ({
|
||||
id: item.id ? item.id : "-",
|
||||
name: item.name ? item.name : "-",
|
||||
lastUpdatedAt: item.lastUpdatedAt
|
||||
? date2Thai(item.lastUpdatedAt as Date, false, true)
|
||||
: "-",
|
||||
orgRevisionName: item.orgRevisionName ? item.orgRevisionName : "-",
|
||||
}));
|
||||
rows.value = dataMap;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* callback function เมื่อ modal = true เรียกข้อมูล ประวัติหน่วยงาน,ประวัติส่วนราชการ
|
||||
*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value == true) {
|
||||
postData();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 40vw">
|
||||
<DialogHeader
|
||||
:tittle="type == 0 ? `ประวัติหน่วยงาน` : `ประวัติส่วนราชการ`"
|
||||
:close="() => (modal = false)"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="orgRevisionId"
|
||||
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
|
||||
v-if="col.name === 'name'"
|
||||
class="text-weight-medium"
|
||||
>
|
||||
{{ type === 0 ? "ชื่อหน่วยงาน" : "ส่วนราชการ" }}
|
||||
</span>
|
||||
|
||||
<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-if="col.name == 'orgRevisionIsCurrent'">
|
||||
<q-icon
|
||||
:name="
|
||||
props.row.orgRevisionIsCurrent == true
|
||||
? 'mdi-check'
|
||||
: ''
|
||||
"
|
||||
:color="
|
||||
props.row.orgRevisionIsCurrent == true
|
||||
? 'positive'
|
||||
: ''
|
||||
"
|
||||
class="text-h5"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'orgRevisionIsDraft'">
|
||||
<q-icon
|
||||
:name="
|
||||
props.row.orgRevisionIsDraft == true
|
||||
? 'mdi-check'
|
||||
: ''
|
||||
"
|
||||
:color="
|
||||
props.row.orgRevisionIsDraft == true
|
||||
? 'positive'
|
||||
: ''
|
||||
"
|
||||
class="text-h5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
235
src/modules/02_organization/components/DialogHistoryPos.vue
Normal file
235
src/modules/02_organization/components/DialogHistoryPos.vue
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, 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 { HistoryPos } from "@/modules/02_organization/interface/response/organizational";
|
||||
|
||||
/**
|
||||
* import Components
|
||||
*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* import Store
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
/** Use*/
|
||||
const store = useOrganizational();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const props = defineProps({
|
||||
rowId: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* ข้อมูล Table
|
||||
*/
|
||||
const rows = ref<HistoryPos[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
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: "orgShortName",
|
||||
align: "left",
|
||||
label: "อักษรย่อ",
|
||||
sortable: true,
|
||||
field: "orgShortName",
|
||||
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",
|
||||
},
|
||||
{
|
||||
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",
|
||||
format(val, row) {
|
||||
let name = "";
|
||||
if (row.posType && row.position) {
|
||||
name = `${row.posType} (${row.position})`;
|
||||
} else if (row.posType) {
|
||||
name = `${row.posType}`;
|
||||
} else if (row.position) {
|
||||
name = `(${row.position})`;
|
||||
} else name = "-";
|
||||
return name;
|
||||
},
|
||||
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: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
field: "lastUpdatedAt",
|
||||
format(val, row) {
|
||||
return date2Thai(val);
|
||||
},
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลประวัติตำแหน่ง
|
||||
* @param id
|
||||
*/
|
||||
function fetchHistoryPos(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.orgPosHistory(id))
|
||||
.then((res) => {
|
||||
const data: HistoryPos[] = res.data.result;
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* callback function ทำงานเมื่อ modal === true
|
||||
*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
modal.value && props.rowId && fetchHistoryPos(props.rowId);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal">
|
||||
<q-card style="width: 1000px; max-width: 100vw">
|
||||
<Header
|
||||
:tittle="'ประวัติตำแหน่ง'"
|
||||
:close="
|
||||
() => {
|
||||
modal = false;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<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>
|
||||
373
src/modules/02_organization/components/DialogMovePos.vue
Normal file
373
src/modules/02_organization/components/DialogMovePos.vue
Normal file
|
|
@ -0,0 +1,373 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, 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 {
|
||||
OrgTree,
|
||||
PosMaster2,
|
||||
} from "@/modules/02_organization/interface/response/organizational";
|
||||
import type { NewPagination } from "@/modules/02_organization/interface/index/Main";
|
||||
import type {
|
||||
MovePos,
|
||||
FilterMaster,
|
||||
} from "@/modules/02_organization/interface/request/organizational";
|
||||
import type { DataTree } from "@/modules/02_organization/interface/index/organizational";
|
||||
|
||||
/**
|
||||
* importComponents
|
||||
*/
|
||||
import HeaderDialog from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
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[]>([]);
|
||||
|
||||
const pagination = ref({
|
||||
page: reqMaster.value.page,
|
||||
rowsPerPage: reqMaster.value.pageSize,
|
||||
});
|
||||
|
||||
const isDisable = computed(() => {
|
||||
if (selectedTree.value === "" && selectedFilter.value.length === 0) {
|
||||
return true;
|
||||
} else return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* function รีเช็ด filter
|
||||
*/
|
||||
function resetFilter() {
|
||||
filterTree.value = "";
|
||||
filterRef.value.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* function เลือกข้อมูลหน่วยงาน
|
||||
*/
|
||||
function updateSelected(data: DataTree) {
|
||||
levelTree.value = data.orgLevel;
|
||||
selectedTree.value = data.orgTreeId;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ยืนยันการย้ายแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน
|
||||
*/
|
||||
function onClickMovePos() {
|
||||
if (selectedTree.value === "" || selectedTree.value === null) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่จะย้ายไป");
|
||||
} else if (selectedFilter.value.length === 0) {
|
||||
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 = "";
|
||||
pagination.value.rowsPerPage = reqMaster.value.pageSize;
|
||||
|
||||
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 = "";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
reqMaster.value.pageSize = newPagination.rowsPerPage;
|
||||
reqMaster.value.page = 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" full-width persistent>
|
||||
<q-layout
|
||||
view="lHh lpr lFf"
|
||||
container
|
||||
style="height: 90vh"
|
||||
class="bg-white"
|
||||
>
|
||||
<q-header>
|
||||
<q-toolbar>
|
||||
<HeaderDialog :tittle="title" :close="() => (modal = false)" />
|
||||
</q-toolbar>
|
||||
<q-separator color="grey-4" />
|
||||
</q-header>
|
||||
|
||||
<q-page-container>
|
||||
<q-page class="q-pa-md">
|
||||
<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"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
v-model:pagination="pagination"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<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"
|
||||
:max-pages="5"
|
||||
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: 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
|
||||
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-page>
|
||||
</q-page-container>
|
||||
|
||||
<q-footer>
|
||||
<q-separator color="grey-4" />
|
||||
<q-toolbar class="fit row wrap justify-end items-start content-start">
|
||||
<q-btn
|
||||
unelevated
|
||||
label="ย้ายตำแหน่ง"
|
||||
color="public"
|
||||
@click="onClickMovePos"
|
||||
class="q-px-md"
|
||||
:disable="isDisable"
|
||||
>
|
||||
<q-tooltip>ย้ายตำแหน่ง</q-tooltip>
|
||||
</q-btn>
|
||||
</q-toolbar>
|
||||
</q-footer>
|
||||
</q-layout>
|
||||
</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>
|
||||
234
src/modules/02_organization/components/DialogNewStructure.vue
Normal file
234
src/modules/02_organization/components/DialogNewStructure.vue
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
<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 {
|
||||
FormDataNewStructure,
|
||||
FormNewStructureRef,
|
||||
DataOption,
|
||||
HistoryType,
|
||||
} from "@/modules/02_organization/interface/index/Main";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
|
||||
useCounterMixin();
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const modal = defineModel<boolean>("newStructure", { required: true });
|
||||
const status = defineModel<boolean>("status", { required: true });
|
||||
const type = defineModel<string>("type", { default: "NEW" });
|
||||
const props = defineProps({
|
||||
fetchActive: {
|
||||
type: Function,
|
||||
require: true,
|
||||
default: () => "fetchActive function",
|
||||
},
|
||||
});
|
||||
|
||||
const typeOp = ref<DataOption[]>([
|
||||
{
|
||||
id: "NEW",
|
||||
name: "สร้างใหม่",
|
||||
},
|
||||
{
|
||||
id: "ORG",
|
||||
name: "ทำสำเนาเฉพาะโครงสร้าง",
|
||||
},
|
||||
{
|
||||
id: "ORG_POSITION",
|
||||
name: "ทำสำเนาโครงสร้างและตำแหน่ง",
|
||||
},
|
||||
{
|
||||
id: "ORG_POSITION_PERSON",
|
||||
name: "ทำสำเนาโครงสร้าง ตำแหน่ง และคนครอง",
|
||||
},
|
||||
]);
|
||||
|
||||
const orgRevisionNameRef = ref<Object | null>(null);
|
||||
const typeRef = ref<Object | null>(null);
|
||||
const orgRevisionIdRef = ref<Object | null>(null);
|
||||
|
||||
const formData = reactive<FormDataNewStructure>({
|
||||
orgRevisionId: "",
|
||||
orgRevisionName: "",
|
||||
typeDraft: "",
|
||||
});
|
||||
|
||||
/**
|
||||
* maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ
|
||||
*/
|
||||
const objectRef: FormNewStructureRef = {
|
||||
orgRevisionName: orgRevisionNameRef,
|
||||
type: typeRef,
|
||||
orgRevisionId: orgRevisionIdRef,
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
|
||||
*/
|
||||
function validateForm() {
|
||||
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)) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่น บันทึก
|
||||
*/
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => {
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.createOrganization, formData)
|
||||
.then((res) => {
|
||||
status.value = true;
|
||||
store.typeOrganizational = "draft";
|
||||
store.draftId = res.data.result.id;
|
||||
store.statusView = "list";
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.fetchActive();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
modal.value = await false;
|
||||
await close();
|
||||
await hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเพิ่มโครงสร้าง",
|
||||
store.draftId
|
||||
? "คุณมีแบบร่างอยู่หากคุณกดยืนยันระบบจะทำการลบแบบร่างเดิมและสร้างแบบร่างใหม่ ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
|
||||
: "ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่น ปิด popup
|
||||
*/
|
||||
function close() {
|
||||
modal.value = false;
|
||||
formData.orgRevisionId = "";
|
||||
formData.orgRevisionName = "";
|
||||
formData.typeDraft = "";
|
||||
}
|
||||
|
||||
/**
|
||||
* เรียกข้อมูล
|
||||
*/
|
||||
function fetchOrgRevision() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.organizationHistoryNew)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result.filter(
|
||||
(e: HistoryType) => e.orgRevisionIsDraft === false
|
||||
);
|
||||
if (data) {
|
||||
const currentStr = await data.find(
|
||||
(x: any) => x.orgRevisionIsCurrent === true
|
||||
);
|
||||
formData.orgRevisionId = currentStr ? currentStr.orgRevisionId : null;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
modal.value && (formData.typeDraft = type.value);
|
||||
modal.value && type.value !== "NEW" && fetchOrgRevision();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 50vw">
|
||||
<form @submit.prevent="validateForm">
|
||||
<DialogHeader :tittle="`เพิ่มโครงสร้าง`" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
v-model="formData.orgRevisionName"
|
||||
ref="orgRevisionNameRef"
|
||||
dense
|
||||
outlined
|
||||
for="#orgRevisionName"
|
||||
label="ชื่อโครงสร้าง"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อโครงสร้าง'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-select
|
||||
for="#type"
|
||||
ref="typeRef"
|
||||
readonly
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="formData.typeDraft"
|
||||
:options="typeOp"
|
||||
label="ประเภทการโคลน"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทการโคลน'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</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>
|
||||
</template>
|
||||
241
src/modules/02_organization/components/DialogPositionDetail.vue
Normal file
241
src/modules/02_organization/components/DialogPositionDetail.vue
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
/**
|
||||
* import type
|
||||
*/
|
||||
import type { FormDetailPosition } from "@/modules/02_organization/interface/index/organizational";
|
||||
|
||||
/**
|
||||
* importComponents
|
||||
*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
|
||||
/**
|
||||
* 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: "", //*สถานะตำแหน่ง
|
||||
});
|
||||
|
||||
/**
|
||||
* 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
|
||||
: "-";
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</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>
|
||||
761
src/modules/02_organization/components/DialogSelectPerson.vue
Normal file
761
src/modules/02_organization/components/DialogSelectPerson.vue
Normal file
|
|
@ -0,0 +1,761 @@
|
|||
<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/02_organization/interface/index/organizational";
|
||||
import type {
|
||||
DataOption,
|
||||
NewPagination,
|
||||
} from "@/modules/02_organization/interface/index/Main";
|
||||
import type {
|
||||
OptionType,
|
||||
OptionLevel,
|
||||
SelectPerson,
|
||||
TypePos,
|
||||
} from "@/modules/02_organization/interface/response/organizational";
|
||||
|
||||
/**
|
||||
* importCompoonents
|
||||
*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* import*Store
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
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 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 row = ref<Position[]>([]);
|
||||
const rowResult = ref<SeaechResult[]>([]);
|
||||
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",
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* function closePopup
|
||||
*/
|
||||
function close() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลประเภทตำแหน่ง
|
||||
*/
|
||||
function fetchType() {
|
||||
showLoader();
|
||||
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(async () => {
|
||||
await props.fetchDataTable?.(store.treeId, store.level, false);
|
||||
await props.getSummary();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเลือกคนครอง",
|
||||
"ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
const page = ref<number>(1);
|
||||
const pageSize = ref<number>(10);
|
||||
const totalPage = ref<number>(0);
|
||||
const selectedProfile = ref<SeaechResult[]>([]);
|
||||
|
||||
/**
|
||||
* functiuon ค้นหาคนครอง
|
||||
*/
|
||||
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, //นามสกุล ชื่อ สกุล เลขบัตร
|
||||
};
|
||||
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"
|
||||
:visible-columns="visibleColumnsResult"
|
||||
>
|
||||
<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"
|
||||
:max-pages="5"
|
||||
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>
|
||||
159
src/modules/02_organization/components/DialogSortAgency.vue
Normal file
159
src/modules/02_organization/components/DialogSortAgency.vue
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<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 { QTableProps } from "quasar";
|
||||
import type { DataSortAgency } from "@/modules/02_organization/interface/index/organizational";
|
||||
|
||||
/**
|
||||
* importComponents
|
||||
*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
|
||||
useCounterMixin();
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const type = defineModel<number>("type", { required: true });
|
||||
const modal = defineModel<boolean>("sortAgency", { required: true });
|
||||
const modalSort = defineModel<Array<any>>("data", { required: true });
|
||||
const props = defineProps({
|
||||
fetchDataTree: {
|
||||
type: Function,
|
||||
require: true,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
const rows = ref<DataSortAgency[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
required: true,
|
||||
label: "ชื่อ",
|
||||
align: "left",
|
||||
field: "name",
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* fiunction จัดลำดับ
|
||||
* @param from ตำแหน่งปัจุบัน
|
||||
* @param to ตำแหน่งที่จะย้ายไป
|
||||
*/
|
||||
function onDrop(from: number, to: number) {
|
||||
rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* function บันทึกการจัดลำดับ
|
||||
*/
|
||||
function save() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
const data = rows.value;
|
||||
const dataId = data.map((item: DataSortAgency) => item.orgTreeId);
|
||||
http
|
||||
.post(config.API.organizationShortName, {
|
||||
id: data[0].orgLevel === 0 ? data[0].orgRevisionId : data[0].orgRootId,
|
||||
type: data[0].orgLevel,
|
||||
sortId: dataId,
|
||||
})
|
||||
.then(async () => {
|
||||
await props.fetchDataTree(store.draftId);
|
||||
await success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* callback function ทำงานเมื่อ modal = true ทำการเรียกข้อมูลตำแหน่ง
|
||||
*/
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value == true) {
|
||||
rows.value = [];
|
||||
const dataStandant = modalSort.value;
|
||||
const mappedData = dataStandant.map((item: any) => ({
|
||||
name: `${item.orgTreeName} (${item.orgTreeShortName})`,
|
||||
orgRootId: item.orgRootId,
|
||||
orgTreeId: item.orgTreeId,
|
||||
orgLevel: item.orgLevel,
|
||||
orgTreeName: item.orgTreeName,
|
||||
orgTreeShortName: item.orgTreeShortName,
|
||||
orgRevisionId: item.orgRevisionId,
|
||||
}));
|
||||
rows.value = mappedData;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 50vw">
|
||||
<DialogHeader
|
||||
:tittle="`จัดลำดับ${type == 0 ? 'หน่วยงาน' : 'ส่วนราชการ'}`"
|
||||
:close="() => (modal = false)"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section style="max-height: 70vh" class="scroll">
|
||||
<q-table
|
||||
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
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn type="submit" :label="`บันทึก`" color="public" @click="save">
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
189
src/modules/02_organization/components/DialogSortPosition.vue
Normal file
189
src/modules/02_organization/components/DialogSortPosition.vue
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataSortPos } from "@/modules/02_organization/interface/index/organizational";
|
||||
|
||||
/**
|
||||
* importComponents
|
||||
*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
|
||||
useCounterMixin();
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const modal = defineModel<boolean>("sortPosition", { required: true });
|
||||
const props = defineProps({
|
||||
fetchDataTable: Function,
|
||||
});
|
||||
|
||||
/** ข้อมูล Table*/
|
||||
const rows = ref<DataSortPos[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
required: true,
|
||||
label: "ชื่อ",
|
||||
align: "left",
|
||||
field: "name",
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* fiunction จัดลำดับ
|
||||
* @param from ตำแหน่งปัจุบัน
|
||||
* @param to ตำแหน่งที่จะย้ายไป
|
||||
*/
|
||||
function onDrop(from: number, to: number) {
|
||||
rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* function บันทึกการจัดลำดับ
|
||||
*/
|
||||
function save() {
|
||||
dialogConfirm($q, () => {
|
||||
const data = rows.value;
|
||||
const dataId = data.map((item: DataSortPos) => item.id);
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.orgPosSort, {
|
||||
id: store.treeId,
|
||||
type: store.level,
|
||||
sortId: dataId,
|
||||
})
|
||||
.then(async () => {
|
||||
await props.fetchDataTable?.(store.treeId, store.level, false);
|
||||
await success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกรายการข้อมูลตำแหน่ง
|
||||
*/
|
||||
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.posMasterNoPrefix : ""
|
||||
}${item.posMasterNo ? item.posMasterNo : ""}${
|
||||
item.posMasterNoSuffix ? item.posMasterNoSuffix : ""
|
||||
} ${item.fullNameNextHolder ? item.fullNameNextHolder : ""}`,
|
||||
posMasterNoPrefix: item.posMasterNoPrefix,
|
||||
posMasterNo: item.posMasterNo,
|
||||
posMasterNoSuffix: item.posMasterNoSuffix,
|
||||
}));
|
||||
|
||||
rows.value = dataMap;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* callback function ทำงานเมื่อ modal = true ทำการเรียกข้อมูลตำแหน่ง
|
||||
*/
|
||||
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 style="max-height: 70vh" class="scroll">
|
||||
<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-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
147
src/modules/02_organization/components/DialogStructureDetail.vue
Normal file
147
src/modules/02_organization/components/DialogStructureDetail.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<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 DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const store = useOrganizational();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
const modal = defineModel<boolean>("structureDetail", { required: true });
|
||||
const treeId = defineModel<string>("treeId", { required: true });
|
||||
const orgLevel = defineModel<number>("orgLevel", { required: true });
|
||||
|
||||
const formData = reactive<any>({
|
||||
orgName: "",
|
||||
agencyName: "", //*ส่วนราชการ
|
||||
orgType: "", //*ประเภท
|
||||
orgLevel: "", //*ระดับ
|
||||
status: "", //*สถานะ
|
||||
orgPhoneEx: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก
|
||||
orgPhoneIn: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน
|
||||
orgFax: "", //หมายเลขโทรสาร
|
||||
orgShortName: "",
|
||||
});
|
||||
|
||||
async function fetchDetailTree(id: string, type: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgLevelByid(type.toLocaleLowerCase(), id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
const range = data[`org${type}Rank`];
|
||||
formData.orgName = data.orgRootName ? data.orgRootName : "-";
|
||||
formData.agencyName = data.orgName ? data.orgName : "-";
|
||||
formData.orgType = range != "DEPARTMENT" ? "ส่วนราชการ" : "หน่วยงาน";
|
||||
formData.orgLevel = store.convertType(range);
|
||||
formData.status =
|
||||
store.typeOrganizational === "current"
|
||||
? "ปกติ"
|
||||
: store.typeOrganizational === "draft"
|
||||
? "แบบร่าง"
|
||||
: "ยุบเลิก";
|
||||
formData.orgPhoneEx = data[`org${type}PhoneEx`];
|
||||
formData.orgPhoneIn = data[`org${type}PhoneIn`];
|
||||
formData.orgFax = data[`org${type}Fax`];
|
||||
formData.orgShortName = data[`org${type}ShortName`];
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
if (modal.value == true) {
|
||||
const type = await store.checkLevel(orgLevel.value);
|
||||
await fetchDetailTree(treeId.value, type);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card :style="$q.screen.gt.md ? 'min-width: 40vw' : 'min-width: 70vw'">
|
||||
<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>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.orgName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">ส่วนราชการ</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.agencyName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">ประเภท</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.orgType }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">ระดับ</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p>{{ formData.orgLevel }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">สถานะ</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-4 text-bold">เบอร์โทร</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p v-if="formData.orgPhoneEx != ''">
|
||||
{{ `ภายนอก ${formData.orgPhoneEx}` }}
|
||||
</p>
|
||||
<p v-if="formData.orgPhoneIn != ''">
|
||||
{{ `ภายใน ${formData.orgPhoneIn}` }}
|
||||
</p>
|
||||
<p
|
||||
v-show="
|
||||
formData.orgPhoneEx == '' && formData.orgPhoneIn == ''
|
||||
"
|
||||
>
|
||||
-
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm q-mb-xs">
|
||||
<div class="col-4 text-bold">Fax</div>
|
||||
<div class="col-8 text-grey-8">
|
||||
<p v-if="formData.orgFax != ''">{{ formData.orgFax }}</p>
|
||||
<p v-else>-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</template>
|
||||
416
src/modules/02_organization/components/DialogSuccession.vue
Normal file
416
src/modules/02_organization/components/DialogSuccession.vue
Normal file
|
|
@ -0,0 +1,416 @@
|
|||
<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/02_organization/interface/index/Main";
|
||||
import type { DataTree } from "@/modules/02_organization/interface/index/organizational";
|
||||
import type {
|
||||
OrgTree,
|
||||
PosMaster,
|
||||
} from "@/modules/02_organization/interface/response/organizational";
|
||||
import type {
|
||||
FilterMaster,
|
||||
Inherit,
|
||||
} from "@/modules/02_organization/interface/request/organizational";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
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 !== null ? e.orgShortname : "") +
|
||||
(e.posMasterNoPrefix ? e.posMasterNoPrefix : "") +
|
||||
(e.posMasterNo !== null ? e.posMasterNo : "") +
|
||||
(e.posMasterNoSuffix !== null ? e.posMasterNoPrefix : ""),
|
||||
}));
|
||||
|
||||
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">
|
||||
<q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm">
|
||||
<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>
|
||||
315
src/modules/02_organization/components/StructureMain.vue
Normal file
315
src/modules/02_organization/components/StructureMain.vue
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { StructChart } from "structure-chart";
|
||||
import "structure-chart/structure-chart.css";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const store = useOrganizational();
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
const $q = useQuasar(); // show dialog
|
||||
|
||||
// import chartData from '@/assets/structChartData'
|
||||
// const dataSource = ref(chartData)
|
||||
const dataSource = ref(); // ข้อมูล Chart
|
||||
const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
|
||||
const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
|
||||
const chartRef = ref(); // อ้างอิงไปที่ตัว chart
|
||||
const savePNG = () => {
|
||||
chartRef.value.savePNG();
|
||||
};
|
||||
const savePDF = () => {
|
||||
chartRef.value.savePDF();
|
||||
};
|
||||
|
||||
const loader = ref<boolean>(false); // Loader
|
||||
|
||||
onMounted(async () => {
|
||||
const id =
|
||||
store.typeOrganizational === "current"
|
||||
? store.activeId
|
||||
: store.typeOrganizational === "draft"
|
||||
? store.draftId
|
||||
: store.historyId;
|
||||
|
||||
id && (await fetchStructChart(id, "0"));
|
||||
});
|
||||
|
||||
async function fetchStructChart(
|
||||
id: string,
|
||||
type: string,
|
||||
status: boolean = false
|
||||
) {
|
||||
console.log(status);
|
||||
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgStructChart(id, type))
|
||||
.then((res) => {
|
||||
if (res.data.result.length > 0) {
|
||||
const data = res.data.result[0];
|
||||
const struct = [];
|
||||
struct.push({ ...data, officer: [], heads: [] });
|
||||
dataSource.value = struct[0];
|
||||
if (dataSourceLock.value === undefined || status)
|
||||
dataSourceLock.value = dataSource.value;
|
||||
breadcrumbsGen();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* อ่าน Root ของข้อมูลทั้งหมดจาก API ต้องทำเป็นอันดับแรก เพื่อจะได้รู้รากของข้อมูล
|
||||
*/
|
||||
// const fetchTreeRoot = async () => {
|
||||
// showLoader();
|
||||
// let urlRequest = config.API.chartGetTreeRoot;
|
||||
// await http
|
||||
// .get(urlRequest)
|
||||
// .then((response) => {
|
||||
// if (response.data.result.length > 0) {
|
||||
// rootOrgID.value = response.data.result[0].organizationId;
|
||||
// }
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
// };
|
||||
|
||||
/**
|
||||
* อ่านข้อมูล organization id ปัจจุบันจาก API ข้อมูลที่ได้เอามาสร้าง Structure Chart
|
||||
*/
|
||||
// const fetchStructChart = async () => {
|
||||
// showLoader();
|
||||
// let urlRequest = config.API.chartGetStructure(rootOrgID.value);
|
||||
// await http
|
||||
// .get(urlRequest)
|
||||
// .then((response) => {
|
||||
// if (response.data.result.length > 0) {
|
||||
// dataSource.value = response.data.result[0];
|
||||
// if (dataSourceLock.value === undefined)
|
||||
// dataSourceLock.value = dataSource.value;
|
||||
// breadcrumbsGen();
|
||||
// }
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
// };
|
||||
|
||||
/**
|
||||
* เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
|
||||
* @param data
|
||||
*/
|
||||
const refreshChart = async (data: any, type: number) => {
|
||||
console.log(data, type);
|
||||
|
||||
if (data.value === undefined) {
|
||||
fetchStructChart(data, type.toString());
|
||||
rootOrgID.value = data;
|
||||
} else {
|
||||
searchAndReplace(dataSource.value, data.value);
|
||||
}
|
||||
};
|
||||
|
||||
function searchAndReplace(data: any, id: string) {
|
||||
if (data.deptID === id) {
|
||||
fetchStructChart(data.deptID, data.type.toString());
|
||||
rootOrgID.value = data.deptID;
|
||||
} else if (data.children) {
|
||||
for (const child of data.children) {
|
||||
searchAndReplace(child, id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* === กระบวนการสร้าง Path ===
|
||||
*/
|
||||
/**
|
||||
* Recursive เพื่อหา Path ที่ผู้ใช้คลิก
|
||||
* @param id OrgID ของหน่วยงานที่ต้องการหา
|
||||
* @param chart Array ของ Object ของหน่วยงานย่อยใน Tree นั้น ๆ
|
||||
*/
|
||||
const chartTraverse = (id: any, chart: any): any => {
|
||||
let _returnPath = [];
|
||||
for (const child of chart) {
|
||||
if (child.deptID === id) {
|
||||
_returnPath.push({
|
||||
label: child.departmentName,
|
||||
id: child.deptID,
|
||||
type: child.type,
|
||||
});
|
||||
return _returnPath;
|
||||
} else {
|
||||
if (
|
||||
typeof child.children !== "undefined" &&
|
||||
child.children !== null &&
|
||||
child.children.length > 0
|
||||
) {
|
||||
let _result = chartTraverse(id, child.children);
|
||||
if (typeof _result !== "undefined" && _result !== null) {
|
||||
_returnPath.push({
|
||||
label: child.departmentName,
|
||||
id: child.deptID,
|
||||
type: child.type,
|
||||
});
|
||||
return [..._returnPath, ...(_result ?? [])];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const findPath = (id: any) => {
|
||||
let _path = [];
|
||||
_path.push({
|
||||
label: dataSourceLock.value.departmentName,
|
||||
id: dataSourceLock.value.deptID,
|
||||
type: dataSourceLock.value.type,
|
||||
});
|
||||
|
||||
if (dataSourceLock.value.deptID === id) return _path;
|
||||
if (dataSourceLock.value.children.length > 0) {
|
||||
let _returnPath = chartTraverse(id, dataSourceLock.value.children);
|
||||
return [..._path, ...(_returnPath ?? [])];
|
||||
}
|
||||
};
|
||||
|
||||
const theBreadcrumb = ref();
|
||||
/**
|
||||
* สร้าง Path Breadcrumbs
|
||||
*/
|
||||
const breadcrumbsGen = () => {
|
||||
if (rootOrgID.value !== 0) {
|
||||
theBreadcrumb.value = [];
|
||||
const newPath = findPath(rootOrgID.value);
|
||||
theBreadcrumb.value = newPath;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => store.typeOrganizational,
|
||||
async () => {
|
||||
store.historyId = "";
|
||||
const id =
|
||||
store.typeOrganizational === "current"
|
||||
? store.activeId
|
||||
: store.typeOrganizational === "draft"
|
||||
? store.draftId
|
||||
: "";
|
||||
|
||||
id && (await fetchStructChart(id, "0", true));
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.historyId,
|
||||
async () => {
|
||||
store.historyId && (await fetchStructChart(store.historyId, "0", true));
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card flat bordered>
|
||||
<div class="q-pa-sm row wrap items-center">
|
||||
<q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
|
||||
<q-tooltip> ดาวน์โหลด PNG </q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="red-7"
|
||||
@click="savePDF()"
|
||||
icon="mdi-file-pdf-box"
|
||||
>
|
||||
<q-tooltip> ดาวน์โหลด PDF </q-tooltip>
|
||||
</q-btn>
|
||||
<div class="bg-grey-2 q-py-xs q-px-sm rounded-borders">
|
||||
<q-breadcrumbs>
|
||||
<template v-slot:separator>
|
||||
<q-icon size="1.5em" name="chevron_right" color="primary" />
|
||||
</template>
|
||||
<template v-for="link in theBreadcrumb" :key="link.id">
|
||||
<q-breadcrumbs-el
|
||||
:label="link.label"
|
||||
@click="refreshChart(link.id, link.type)"
|
||||
class="breadcrumbs-link"
|
||||
/>
|
||||
</template>
|
||||
</q-breadcrumbs>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
|
||||
<StructChart
|
||||
style="height: 70vh"
|
||||
ref="chartRef"
|
||||
class="struct"
|
||||
:dataSource="dataSource"
|
||||
@onElementClick="refreshChart"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<full-loader :visibility="loader"></full-loader>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.breadcrumbs-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.struct .section-primary .header,
|
||||
.struct .section-secondary .header,
|
||||
.struct .section-tertiary .header {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.struct .section-primary .column-side .side-button,
|
||||
.struct .section-secondary .column-side .side-button,
|
||||
.struct .section-list .column-side .side-button {
|
||||
background-color: #d9d9d96b !important;
|
||||
color: #545459 !important;
|
||||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
font-size: 11px !important;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.struct .section-primary,
|
||||
.section-secondary,
|
||||
.struct .section-list {
|
||||
padding: 6px 15px 6px 15px;
|
||||
}
|
||||
.struct .section-primary .header {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.struct .section-secondary .header {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.struct .subchild-more {
|
||||
background-position: center !important;
|
||||
background-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
629
src/modules/02_organization/components/TreeMain.vue
Normal file
629
src/modules/02_organization/components/TreeMain.vue
Normal file
|
|
@ -0,0 +1,629 @@
|
|||
<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/02_organization/interface/index/Main";
|
||||
import type { OrgTree } from "@/modules/02_organization/interface/response/organizational";
|
||||
import type { DataTree } from "@/modules/02_organization/interface/index/organizational";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogAgency from "@/modules/02_organization/components/DialogFormAgency.vue";
|
||||
import DialogStructureDetail from "@/modules/02_organization/components/DialogStructureDetail.vue";
|
||||
import DialogSortAgency from "@/modules/02_organization/components/DialogSortAgency.vue";
|
||||
import DialogHistory from "@/modules/02_organization/components/DialogHistory.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
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.orgSummary, {
|
||||
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) {
|
||||
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>
|
||||
888
src/modules/02_organization/components/TreeTable.vue
Normal file
888
src/modules/02_organization/components/TreeTable.vue
Normal file
|
|
@ -0,0 +1,888 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } 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/02_organization/interface/index/Main";
|
||||
import type { FilterMaster } from "@/modules/02_organization/interface/request/organizational";
|
||||
import type {
|
||||
PosMaster2,
|
||||
OrgTree,
|
||||
} from "@/modules/02_organization/interface/response/organizational";
|
||||
import type { DataPosition } from "@/modules/02_organization/interface/index/organizational";
|
||||
|
||||
/** importComponents*/
|
||||
import DialogFormPosotion from "@/modules/02_organization/components/DialogFormPosition.vue";
|
||||
import DialogPositionDetail from "@/modules/02_organization/components/DialogPositionDetail.vue";
|
||||
import DialogSort from "@/modules/02_organization/components/DialogSortPosition.vue";
|
||||
import DialogMovePos from "@/modules/02_organization/components/DialogMovePos.vue";
|
||||
import DialogHistoryPos from "@/modules/02_organization/components/DialogHistoryPos.vue";
|
||||
import DialogSelectPerson from "@/modules/02_organization/components/DialogSelectPerson.vue";
|
||||
import DialogSuccession from "@/modules/02_organization/components/DialogSuccession.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useOrganizational();
|
||||
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: "content_copy",
|
||||
type: "COPY",
|
||||
color: "blue-6",
|
||||
},
|
||||
{
|
||||
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;
|
||||
}
|
||||
|
||||
function onClickCopyPosition(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.orgPosMasterById(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.orgDeleteProfile(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.orgSummary, {
|
||||
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.orgReport(val))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
if (data) {
|
||||
genreport(data, name);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
const pagination = ref({
|
||||
page: reqMaster.value.page,
|
||||
rowsPerPage: reqMaster.value.pageSize,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => modalDialogMMove.value,
|
||||
() => {
|
||||
if (!modalDialogMMove.value) {
|
||||
pagination.value.page = 1;
|
||||
pagination.value.rowsPerPage = reqMaster.value.pageSize;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- TOOLBAR -->
|
||||
<div class="col-12">
|
||||
<q-toolbar style="padding: 0">
|
||||
<div v-if="store.typeOrganizational === 'draft'">
|
||||
<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"
|
||||
:paging="true"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width></q-th>
|
||||
<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-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)
|
||||
: item.type === 'COPY'
|
||||
? onClickCopyPosition('COPY', 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-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-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"
|
||||
:max-pages="5"
|
||||
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>
|
||||
355
src/modules/02_organization/components/TreeView.vue
Normal file
355
src/modules/02_organization/components/TreeView.vue
Normal file
|
|
@ -0,0 +1,355 @@
|
|||
<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/02_organization/interface/response/organizational";
|
||||
import type { FilterMaster } from "@/modules/02_organization/interface/request/organizational";
|
||||
|
||||
/** importComponents*/
|
||||
import TreeMain from "@/modules/02_organization/components/TreeMain.vue";
|
||||
import TreeTable from "@/modules/02_organization/components/TreeTable.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const store = useOrganizational();
|
||||
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;
|
||||
isLoad.value = true;
|
||||
}
|
||||
|
||||
await http
|
||||
.post(config.API.orgPosMasterList, reqMaster)
|
||||
.then(async (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 = await store.fetchPosMaster(dataMain);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
posMaster.value = [];
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
isLoad.value = false;
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
/** ดึงข้อมูลสถิติจำนวนด้านบน*/
|
||||
function getSummary() {
|
||||
http
|
||||
.post(config.API.orgSummary, {
|
||||
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>
|
||||
150
src/modules/02_organization/interface/index/Main.ts
Normal file
150
src/modules/02_organization/interface/index/Main.ts
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
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;
|
||||
responsibility: string;
|
||||
}
|
||||
|
||||
interface FormDataPosition {
|
||||
shortName: string;
|
||||
prefixNo: string;
|
||||
positionNo: string;
|
||||
suffixNo: string;
|
||||
reason?: string;
|
||||
isDirector?: boolean;
|
||||
isOfficer?: boolean;
|
||||
}
|
||||
|
||||
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,
|
||||
};
|
||||
127
src/modules/02_organization/interface/index/organizational.ts
Normal file
127
src/modules/02_organization/interface/index/organizational.ts
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
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;
|
||||
}
|
||||
|
||||
interface DataSortPos {
|
||||
id: string;
|
||||
name: string;
|
||||
posMasterNo: number;
|
||||
posMasterNoPrefix: string;
|
||||
posMasterNoSuffix: string;
|
||||
}
|
||||
|
||||
interface DataSortAgency {
|
||||
name: string;
|
||||
orgLevel: number;
|
||||
orgRevisionId: string;
|
||||
orgRootId: string;
|
||||
orgTreeId: string;
|
||||
orgTreeName: string;
|
||||
orgTreeShortName: string;
|
||||
}
|
||||
|
||||
export type {
|
||||
DataPosition,
|
||||
Position,
|
||||
FormDetailPosition,
|
||||
DataTree,
|
||||
SeaechResult,
|
||||
FormPositionFilter,
|
||||
DataSortPos,
|
||||
DataSortAgency,
|
||||
};
|
||||
14
src/modules/02_organization/interface/request/Main.ts
Normal file
14
src/modules/02_organization/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 };
|
||||
17
src/modules/02_organization/interface/response/Main.ts
Normal file
17
src/modules/02_organization/interface/response/Main.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
interface DataPosType {
|
||||
id: string;
|
||||
posLevels: DataLevel[];
|
||||
posTypeName: string;
|
||||
posTypeRank: number;
|
||||
posTypeShortName: string;
|
||||
}
|
||||
|
||||
interface DataLevel {
|
||||
id: string;
|
||||
posLevelName: number;
|
||||
posTypeName: string;
|
||||
posTypeId: string;
|
||||
posLevelAuthority: string;
|
||||
}
|
||||
|
||||
export type { DataPosType };
|
||||
203
src/modules/02_organization/interface/response/organizational.ts
Normal file
203
src/modules/02_organization/interface/response/organizational.ts
Normal file
|
|
@ -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/02_organization/router.ts
Normal file
14
src/modules/02_organization/router.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
const mainPage = () => import("@/modules/02_organization/views/main.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/organization",
|
||||
name: "organizationalNew",
|
||||
component: mainPage,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: "SYS_ORG",
|
||||
Role: "STAFF",
|
||||
},
|
||||
},
|
||||
];
|
||||
0
src/modules/02_organization/store.ts
Normal file
0
src/modules/02_organization/store.ts
Normal file
141
src/modules/02_organization/store/organizational.ts
Normal file
141
src/modules/02_organization/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/02_organization/interface/response/organizational";
|
||||
|
||||
export const useOrganizational = defineStore("organizationalStore", () => {
|
||||
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.posMasterNoPrefix : "") +
|
||||
(e.posMasterNo ? e.posMasterNo : "") +
|
||||
(e.posMasterNoSuffix ? 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,
|
||||
};
|
||||
});
|
||||
165
src/modules/02_organization/views/ExampleSearchTree.vue
Normal file
165
src/modules/02_organization/views/ExampleSearchTree.vue
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { ListMenu } from "@/modules/02_organization/interface/index/Main";
|
||||
import type { OrgTree } from "@/modules/02_organization/interface/response/organizational";
|
||||
|
||||
/** importStore*/
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const store = useOrganizational();
|
||||
const { dialogRemove, showLoader, hideLoader, messageError, success } =
|
||||
useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
|
||||
const filter = ref<string>("");
|
||||
const nodes = ref<Array<any>>([]);
|
||||
const lazy = ref(nodes);
|
||||
const expanded = ref<Array<any>>([]);
|
||||
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
||||
const noData = ref<string>("ไม่มีข้อมูล");
|
||||
const selected = ref("");
|
||||
|
||||
const idVal = ref("");
|
||||
async function fetchDataTree(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgByid(id.toString()))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
nodes.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const breakLoop = ref<boolean>(false);
|
||||
const dataObject = ref([]);
|
||||
async function onSort(orgRootId: string) {
|
||||
if (orgRootId) {
|
||||
idVal.value = "children => " + orgRootId;
|
||||
breakLoop.value = false;
|
||||
|
||||
const targetNodeId = orgRootId;
|
||||
|
||||
for (let index = 0; index < nodes.value.length; index++) {
|
||||
const element = nodes.value[index];
|
||||
searchAndReplace(element, targetNodeId);
|
||||
if (breakLoop.value) break;
|
||||
}
|
||||
} else {
|
||||
idVal.value = "root";
|
||||
}
|
||||
}
|
||||
|
||||
function searchAndReplace(treeNode: any, organizationId: string) {
|
||||
if (treeNode.orgTreeId === organizationId) {
|
||||
dataObject.value = treeNode.children;
|
||||
breakLoop.value = true;
|
||||
} else if (treeNode.children) {
|
||||
for (const child of treeNode.children) {
|
||||
searchAndReplace(child, organizationId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const listAdd = ref<ListMenu[]>([
|
||||
{
|
||||
label: "จัดลำดับ",
|
||||
icon: "filter_list",
|
||||
type: "SORT",
|
||||
color: "green-7",
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchDataTree("a449eac0-93a5-4ccc-8fbc-2974ca8ee61b");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-12 q-py-md q-px-lg">
|
||||
<q-tree
|
||||
class="q-pa-md q-gutter-sm"
|
||||
dense
|
||||
default-expand-all
|
||||
selected-color="primary"
|
||||
:nodes="lazy"
|
||||
node-key="orgTreeId"
|
||||
label-key="orgTreeName"
|
||||
:filter="filter"
|
||||
:no-results-label="notFound"
|
||||
:no-nodes-label="noData"
|
||||
v-model:expanded="expanded"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:default-header="prop">
|
||||
<!-- {{ prop.node.orgTreeName }} -->
|
||||
|
||||
<div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
|
||||
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
>
|
||||
<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="onSort(prop.node.orgRootId)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :color="item.color" :name="item.icon" />
|
||||
</q-item-section>
|
||||
<div>
|
||||
<q-item-section> {{ item.label }}หน่วยงาน </q-item-section>
|
||||
</div>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</template>
|
||||
</q-tree>
|
||||
|
||||
<h5>orgRootId = {{ idVal }}</h5>
|
||||
<div>
|
||||
{{ dataObject }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
362
src/modules/02_organization/views/main.vue
Normal file
362
src/modules/02_organization/views/main.vue
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import type { DataOption } from "@/modules/02_organization/interface/index/Main";
|
||||
import type { OrgRevision } from "@/modules/02_organization/interface/response/organizational";
|
||||
|
||||
/**
|
||||
* importComponents
|
||||
*/
|
||||
import TreeView from "@/modules/02_organization/components/TreeView.vue";
|
||||
import StructureView from "@/modules/02_organization/components/StructureMain.vue";
|
||||
import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
|
||||
import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
const store = useOrganizational();
|
||||
|
||||
/**
|
||||
* ตัวแปร
|
||||
*/
|
||||
const modalNewStructure = ref<boolean>(false); // เพิ่มโครงสร้าง
|
||||
const modalDateTime = ref<boolean>(false); // ตั้งเวลาเผยแพร่
|
||||
const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
|
||||
const typeStructure = ref<string>(""); // ประเภทการเพิ่มโครงสร้าง
|
||||
/** ประวัติโครงสร้าง*/
|
||||
const itemHistory = ref<DataOption[]>([]); // List ประวัติโครงสร้าง
|
||||
const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
|
||||
const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
|
||||
const count = ref<number>(0);
|
||||
|
||||
/**
|
||||
* List เพิ่มโครงสร้าง
|
||||
*/
|
||||
const itemStructure = ref<DataOption[]>([
|
||||
{
|
||||
id: "NEW",
|
||||
name: "สร้างใหม่",
|
||||
},
|
||||
{
|
||||
id: "ORG",
|
||||
name: "ทำสำเนาเฉพาะโครงสร้าง",
|
||||
},
|
||||
{
|
||||
id: "ORG_POSITION",
|
||||
name: "ทำสำเนาโครงสร้างและตำแหน่ง",
|
||||
},
|
||||
{
|
||||
id: "ORG_POSITION_PERSON",
|
||||
name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
|
||||
*/
|
||||
function fetchOrganizationActive() {
|
||||
showLoader();
|
||||
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) {
|
||||
store.typeOrganizational = "draft";
|
||||
} else if (data.draftName === null) {
|
||||
store.typeOrganizational = "current";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลประวัติโครงสร้าง
|
||||
*/
|
||||
function fetchHistory() {
|
||||
http
|
||||
.get(config.API.organizationHistoryNew)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
const filterData = data.filter(
|
||||
(e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
|
||||
);
|
||||
|
||||
itemHistory.value = filterData.map((e: OrgRevision) => ({
|
||||
id: e.orgRevisionId,
|
||||
name: e.orgRevisionName,
|
||||
}));
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup เพิ่มโครงสร้าง
|
||||
* @param type ประเภทการเพิ่มโครงาสร้าง
|
||||
*/
|
||||
function ocClickAddStructure(type: string) {
|
||||
modalNewStructure.value = !modalNewStructure.value;
|
||||
typeStructure.value = type;
|
||||
}
|
||||
|
||||
/**
|
||||
* function openPopup ตั้งเวลาเผยแพร่
|
||||
*/
|
||||
function onClickDateTime() {
|
||||
modalDateTime.value = !modalDateTime.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* function เปิดประวัติโครงสร้าง
|
||||
* @param id id โครงสร้าง
|
||||
* @param name ชื่อโครงสร้าง
|
||||
*/
|
||||
function onClickHistory(id: string, name: string) {
|
||||
historyId.value = id;
|
||||
store.historyId = id;
|
||||
labelHistory.value = name;
|
||||
count.value++;
|
||||
}
|
||||
|
||||
/**
|
||||
* lifecycleHook
|
||||
*/
|
||||
onMounted(async () => {
|
||||
store.typeOrganizational = "current";
|
||||
await fetchOrganizationActive();
|
||||
await fetchHistory();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
โครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<div
|
||||
class="toptitle row items-center"
|
||||
v-if="store.typeOrganizational === 'draft'"
|
||||
>
|
||||
<div
|
||||
v-if="store.isPublic && store.orgPublishDate"
|
||||
class="q-pr-md text-caption"
|
||||
>
|
||||
วันที่เผยแพร่ :
|
||||
<strong>{{ date2Thai(store.orgPublishDate) }}</strong>
|
||||
</div>
|
||||
<q-btn
|
||||
dense
|
||||
class="q-px-md"
|
||||
color="indigo-9"
|
||||
icon="alarm"
|
||||
label="ตั้งเวลาเผยแพร่"
|
||||
@click="onClickDateTime"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat bordered>
|
||||
<div class="q-pa-xl" v-if="!isStatusData">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
style="
|
||||
height: 70vh;
|
||||
border: 1px solid rgb(210, 210, 210);
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="text-center row"
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
style="background-color: #d8f5f2"
|
||||
round
|
||||
color="primary"
|
||||
size="lg"
|
||||
icon="add"
|
||||
@click="ocClickAddStructure('NEW')"
|
||||
>
|
||||
<q-tooltip>เพิ่มโครงสร้าง </q-tooltip>
|
||||
</q-btn>
|
||||
<div class="q-mt-sm">เพิ่มโครงสร้าง</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-card class="my-card">
|
||||
<q-card-section class="q-pa-sm">
|
||||
<q-toolbar class="q-gutter-md items-center" style="padding: 0px">
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
dense
|
||||
class="q-px-md"
|
||||
:outline="store.typeOrganizational === 'current' ? false : true"
|
||||
color="blue"
|
||||
label="ปัจจุบัน"
|
||||
:disable="store.activeId == '' || store.activeId == null"
|
||||
@click="
|
||||
(store.typeOrganizational = 'current'),
|
||||
(labelHistory = 'ประวัติโครงสร้าง')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
dense
|
||||
class="q-px-md"
|
||||
:outline="store.typeOrganizational === 'draft' ? false : true"
|
||||
color="blue"
|
||||
label="แบบร่าง"
|
||||
:disable="store.draftId == '' || store.draftId == null"
|
||||
@click="
|
||||
(store.typeOrganizational = 'draft'),
|
||||
(labelHistory = 'ประวัติโครงสร้าง')
|
||||
"
|
||||
/>
|
||||
<q-btn-dropdown
|
||||
v-if="itemHistory.length !== 0"
|
||||
dense
|
||||
class="q-px-md"
|
||||
color="blue"
|
||||
:label="labelHistory"
|
||||
@click="store.typeOrganizational = 'old'"
|
||||
:outline="store.typeOrganizational === 'old' ? false : true"
|
||||
>
|
||||
<q-list>
|
||||
<q-item
|
||||
dense
|
||||
clickable
|
||||
v-close-popup
|
||||
v-for="(item, index) in itemHistory"
|
||||
:key="index"
|
||||
@click="onClickHistory(item.id, item.name)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</q-btn-group>
|
||||
|
||||
<q-btn-dropdown
|
||||
dense
|
||||
unelevated
|
||||
class="q-px-md"
|
||||
color="green-6"
|
||||
label="เพิ่มโครงสร้าง"
|
||||
>
|
||||
<q-list>
|
||||
<q-item
|
||||
dense
|
||||
clickable
|
||||
v-close-popup
|
||||
v-for="(item, index) in itemStructure"
|
||||
:key="index"
|
||||
@click="ocClickAddStructure(item.id)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-space />
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
:color="store.statusView === 'list' ? 'grey-7' : 'grey-4'"
|
||||
icon="mdi-file-tree"
|
||||
@click="store.statusView = 'list'"
|
||||
/>
|
||||
<q-separator inset vertical />
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="mdi-sitemap"
|
||||
:color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
|
||||
@click="store.statusView = 'tree'"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section style="padding: 0px">
|
||||
<q-tab-panels v-model="store.statusView" animated>
|
||||
<q-tab-panel name="list" style="padding: 0px">
|
||||
<TreeView
|
||||
v-if="store.statusView === 'list'"
|
||||
v-model:historyId="historyId"
|
||||
v-model:count="count"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="tree" style="padding: 0px">
|
||||
<StructureView v-if="store.statusView === 'tree'" />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<!-- เพิ่มโครงสร้าง -->
|
||||
<DialogFormNewStructure
|
||||
v-model:new-structure="modalNewStructure"
|
||||
v-model:status="isStatusData"
|
||||
v-model:type="typeStructure"
|
||||
:fetchActive="fetchOrganizationActive"
|
||||
/>
|
||||
|
||||
<!-- ตั้งเวลาเผยแพร่ -->
|
||||
<DialogDateTime
|
||||
:modal="modalDateTime"
|
||||
:close="onClickDateTime"
|
||||
:fetchActive="fetchOrganizationActive"
|
||||
/>
|
||||
|
||||
<!-- รายละเอียดตำแหน่ง -->
|
||||
<!-- <DialogPositionDetail v-model:position-detail="modalPositionDetail" /> -->
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue