1582 lines
50 KiB
Vue
1582 lines
50 KiB
Vue
divdiv
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, reactive, computed } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute } from "vue-router";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
import type { QTableProps } from "quasar";
|
|
import type { DataOption } from "@/modules/15_development/interface/index/Main";
|
|
import type {
|
|
FormGroupRelate,
|
|
FormGroupTargetPlannedGoal,
|
|
} from "@/modules/15_development/interface/request/Main";
|
|
import type {
|
|
ResGroup,
|
|
ResLevel,
|
|
ResPlannedGoals,
|
|
ResPeople,
|
|
ResActualGoals,
|
|
} from "@/modules/15_development/interface/response/Main";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
/**
|
|
* use
|
|
*/
|
|
const $q = useQuasar();
|
|
const store = useDevelopmentDataStore();
|
|
const route = useRoute();
|
|
const projectId = ref<string>(route.params.id.toLocaleString());
|
|
const { showLoader, hideLoader, messageError, success, dialogConfirm } =
|
|
useCounterMixin();
|
|
|
|
/**
|
|
* props
|
|
*/
|
|
const props = defineProps({
|
|
prevStep: { type: Function, required: true },
|
|
nextStep: { type: Function, required: true },
|
|
});
|
|
|
|
const checkRoutePermission = ref<boolean>(
|
|
route.name == "developmentDetailPage"
|
|
);
|
|
|
|
const plannedGoals = ref<ResPlannedGoals[]>([]);
|
|
const plannedGoalsData = ref<ResPlannedGoals[]>([]);
|
|
const plannedPeoples = ref<ResPeople[]>([]);
|
|
const actualGoals = ref<ResActualGoals[]>([]);
|
|
const actualPeoples = ref<ResPeople[]>([]);
|
|
const formGroup = ref<any>();
|
|
|
|
const groupTargetData = reactive({
|
|
targetData: [{}],
|
|
});
|
|
|
|
const isEdit = ref<boolean>(false);
|
|
const editId = ref<string>("");
|
|
const modalGroupTarget = ref<boolean>(false);
|
|
const newModalGroupTarget = ref<boolean>(false);
|
|
const modalRelate = ref<boolean>(false);
|
|
const isTarget = ref<string>("");
|
|
|
|
const posTypeOp = ref<DataOption[]>([]);
|
|
const posTypeOpEMP = ref<DataOption[]>([]);
|
|
const posLevelOp = ref<DataOption[]>([]);
|
|
const posTypeMain = ref<ResGroup[]>([]);
|
|
const posTypeMainEMP = ref<ResGroup[]>([]);
|
|
|
|
const levelComputed = computed(() => {
|
|
return formGroupTarget.positions.map((items) => {
|
|
if (
|
|
formGroupTarget.groupTargetSub !== "EMPLOYEE" &&
|
|
formGroupTarget.groupTargetSub !== "EMPLOYEETEMP"
|
|
) {
|
|
return (
|
|
posTypeMain.value.find((v) => items.posType === v.posTypeName)
|
|
?.posLevels || []
|
|
);
|
|
} else {
|
|
const v = posTypeMainEMP.value.find(
|
|
(v) => items.posType === v.posTypeName
|
|
);
|
|
return (
|
|
v?.posLevels.map((e: any) => ({
|
|
id: e.id,
|
|
posLevelName: v.posTypeShortName
|
|
? `${v.posTypeShortName} ${e.posLevelName}`
|
|
: e.posLevelName,
|
|
})) || []
|
|
);
|
|
}
|
|
});
|
|
});
|
|
|
|
const levelOptions = computed(() => {
|
|
if (
|
|
formGroupTarget.groupTargetSub !== "EMPLOYEE" &&
|
|
formGroupTarget.groupTargetSub !== "EMPLOYEETEMP"
|
|
) {
|
|
const found = posTypeMain.value.find(
|
|
(v) => formGroupTarget.posType === v.posTypeName
|
|
);
|
|
return found?.posLevels || [];
|
|
} else {
|
|
const found = posTypeMainEMP.value.find(
|
|
(v) => formGroupTarget.posType === v.posTypeName
|
|
);
|
|
return (
|
|
found?.posLevels.map((item) => ({
|
|
id: item.id,
|
|
posLevelName: found.posTypeShortName
|
|
? `${found.posTypeShortName} ${item.posLevelName}`
|
|
: item.posLevelName,
|
|
})) || []
|
|
);
|
|
}
|
|
});
|
|
|
|
const formGroupTarget = reactive<FormGroupTargetPlannedGoal>({
|
|
groupTarget: "",
|
|
groupTargetSub: "",
|
|
position: "",
|
|
posType: null,
|
|
posLevel: null,
|
|
type: null,
|
|
amount: null,
|
|
positions: [
|
|
{
|
|
posType: "",
|
|
posLevel: "",
|
|
position: "",
|
|
posTypeId: null,
|
|
posLevelId: null,
|
|
posExecutive: "",
|
|
},
|
|
],
|
|
});
|
|
|
|
const formGroupRelate = reactive<FormGroupRelate>({
|
|
relate: "",
|
|
amount: null,
|
|
});
|
|
|
|
/** เพิ่ม object ให้ตัวแปร */
|
|
const addGroupTargetData = async () => {
|
|
formGroupTarget.positions.push({
|
|
posType: "",
|
|
posLevel: "",
|
|
position: "",
|
|
posTypeId: null,
|
|
posLevelId: null,
|
|
posExecutive: "",
|
|
});
|
|
};
|
|
|
|
const peoplesOp = ref<DataOption[]>([
|
|
{ id: "OPERATOR", name: "เจ้าหน้าที่ดําเนินการ" },
|
|
{ id: "LECTURER", name: "วิทยากร" },
|
|
{ id: "OBSERVER", name: "ผู้สังเกตการณ์" },
|
|
]);
|
|
|
|
const groupOp = ref<DataOption[]>([
|
|
{ id: "OFFICER", name: "ข้าราชการกรุงเทพมหานคร" },
|
|
{ id: "PERSONNEL", name: "บุคลากรกรุงเทพมหานคร" },
|
|
{ id: "OUTSIDERS", name: "บุคคลภายนอก" },
|
|
]);
|
|
|
|
const groupSubOp = ref<DataOption[]>([
|
|
{ id: "OFFICER", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
|
|
{ id: "TEACHER", name: "ข้าราชการครู" },
|
|
{ id: "EMPLOYEE", name: "กรุงเทพมหานคร(ลูกจ้างประจำ)" },
|
|
{ id: "EMPLOYEETEMP", name: "กรุงเทพมหานคร(ลูกจ้างชั่วคราว)" },
|
|
{ id: "EDUCATIONAL", name: "บุคลากรทางการศึกษากรุงเทพมหานคร" },
|
|
]);
|
|
|
|
const columnsPlannedGoals = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "groupTarget",
|
|
align: "left",
|
|
label: "กลุ่มเป้าหมาย ",
|
|
sortable: true,
|
|
field: "groupTarget",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (val) => convertNameGoals(val),
|
|
},
|
|
{
|
|
name: "groupTargetSub",
|
|
align: "left",
|
|
label: "กลุ่มเป้าหมายย่อย",
|
|
sortable: true,
|
|
field: "groupTargetSub",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (val) => convertNameSubGoals(val),
|
|
},
|
|
{
|
|
name: "posTypePlannedId",
|
|
align: "left",
|
|
label: "ตำแหน่ง",
|
|
sortable: true,
|
|
field: "posTypePlannedId",
|
|
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: "amount",
|
|
align: "left",
|
|
label: "จำนวน(คน)",
|
|
sortable: true,
|
|
field: "amount",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
]);
|
|
|
|
const columnsActualGoals = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "groupTarget",
|
|
align: "left",
|
|
label: "กลุ่มเป้าหมาย ",
|
|
sortable: true,
|
|
field: "groupTarget",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (val) => convertNameGoals(val),
|
|
},
|
|
{
|
|
name: "groupTargetSub",
|
|
align: "left",
|
|
label: "กลุ่มเป้าหมายย่อย",
|
|
sortable: true,
|
|
field: "groupTargetSub",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (val) => convertNameSubGoals(val),
|
|
},
|
|
{
|
|
name: "posTypeActualId",
|
|
align: "left",
|
|
label: "ตำแหน่ง",
|
|
sortable: true,
|
|
field: "posTypeActualId",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "amount",
|
|
align: "left",
|
|
label: "จำนวน(คน)",
|
|
sortable: true,
|
|
field: "amount",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (val) => Number(val),
|
|
},
|
|
]);
|
|
|
|
const columnsRelated = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "groupTarget",
|
|
align: "left",
|
|
label: "ผู้เกี่ยวข้อง ",
|
|
sortable: true,
|
|
field: "groupTarget",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (val) => convertNamePeoples(val),
|
|
},
|
|
|
|
{
|
|
name: "amount",
|
|
align: "left",
|
|
label: "จำนวน(คน)",
|
|
sortable: true,
|
|
field: "amount",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (val) => Number(val),
|
|
},
|
|
]);
|
|
|
|
/** function เรียกข้อมูลประเภทตำแหน่ง*/
|
|
function fetchType() {
|
|
if (posTypeMain.value.length === 0) {
|
|
http
|
|
.get(config.API.orgPosType)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
posTypeMain.value = data;
|
|
posTypeOp.value = data.map((e: ResGroup) => ({
|
|
id: e.id,
|
|
name: e.posTypeName,
|
|
}));
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
}
|
|
}
|
|
/** function เรียกข้อมูลกลุ่มงานของ ลูกจ้าง*/
|
|
function fetchTypeEMP() {
|
|
if (posTypeMain.value.length === 0) {
|
|
http
|
|
.get(config.API.orgEmployeeType)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
posTypeMainEMP.value = data;
|
|
posTypeOpEMP.value = data.map((e: ResGroup) => ({
|
|
id: e.id,
|
|
name: e.posTypeName,
|
|
}));
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
}
|
|
}
|
|
|
|
/** ดึงข้อมูล */
|
|
async function fetchData(id: string) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.developmentMainTab("tab2", id))
|
|
.then(async (res) => {
|
|
const data = res.data.result;
|
|
actualGoals.value = data.actualGoals;
|
|
actualPeoples.value = data.actualPeoples;
|
|
plannedGoals.value = data.plannedGoals;
|
|
plannedGoalsData.value = data.plannedGoals;
|
|
plannedPeoples.value = data.plannedPeoples;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** เปิด dialog */
|
|
function onClickOpenDialog(type: string, target: string) {
|
|
isTarget.value = target;
|
|
if (type === "group") {
|
|
if (target === "planned") {
|
|
(formGroupTarget.positions = [
|
|
{
|
|
posType: "",
|
|
posLevel: "",
|
|
position: "",
|
|
posTypeId: null,
|
|
posLevelId: null,
|
|
posExecutive: "",
|
|
},
|
|
]),
|
|
(newModalGroupTarget.value = true);
|
|
} else {
|
|
modalGroupTarget.value = true;
|
|
}
|
|
} else {
|
|
modalRelate.value = true;
|
|
}
|
|
}
|
|
|
|
/** เพิ่ม/แก้ไขกลุ่มเป้าหมาย */
|
|
function onSubmitGroup() {
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
if (isTarget.value === "planned") {
|
|
await http
|
|
.put(
|
|
config.API.developmentMainTab(
|
|
isEdit.value ? "tab2_1_edit" : "tab2_1_add",
|
|
isEdit.value ? editId.value : projectId.value
|
|
),
|
|
{
|
|
groupTarget: formGroupTarget.groupTarget,
|
|
groupTargetSub: formGroupTarget.groupTargetSub,
|
|
positions:
|
|
formGroupTarget.groupTarget !== "OUTSIDERS"
|
|
? formGroupTarget.positions.map((v) => ({
|
|
posTypePlanned: v.position ? v.posType : "",
|
|
posLevelPlanned: v.position ? v.posLevel : "",
|
|
position: v.position ? v.position : "",
|
|
posExecutive: v.posExecutive ? v.posExecutive : "",
|
|
}))
|
|
: [],
|
|
type:
|
|
formGroupTarget.groupTarget === "OUTSIDERS"
|
|
? formGroupTarget.type
|
|
: "",
|
|
amount: formGroupTarget.amount,
|
|
}
|
|
)
|
|
.then(() => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
} else {
|
|
await http
|
|
.put(
|
|
config.API.developmentMainTab(
|
|
isEdit.value ? "tab2_3_edit" : "tab2_3_add",
|
|
isEdit.value ? editId.value : projectId.value
|
|
),
|
|
{
|
|
groupTarget: formGroupTarget.groupTarget,
|
|
groupTargetSub: formGroupTarget.groupTargetSub,
|
|
position: formGroupTarget.position,
|
|
posTypeActual: formGroupTarget.posType
|
|
? formGroupTarget.posType
|
|
: null,
|
|
posLevelActual: formGroupTarget.posLevel
|
|
? formGroupTarget.posLevel
|
|
: null,
|
|
type: formGroupTarget.type,
|
|
amount: formGroupTarget.amount,
|
|
}
|
|
)
|
|
.then(() => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
setTimeout(() => {
|
|
fetchData(projectId.value);
|
|
onClickCloseDialog();
|
|
}, 100);
|
|
});
|
|
}
|
|
|
|
/** เพิ่มผู้เกี่ยวข้อง */
|
|
function onSubmitRelate() {
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
if (isTarget.value === "planned") {
|
|
await http
|
|
.put(
|
|
config.API.developmentMainTab(
|
|
isEdit.value ? "tab2_2_edit" : "tab2_2_add",
|
|
isEdit.value ? editId.value : projectId.value
|
|
),
|
|
{
|
|
groupTarget: formGroupRelate.relate,
|
|
amount: formGroupRelate.amount,
|
|
}
|
|
)
|
|
.then(async () => {
|
|
await fetchData(projectId.value);
|
|
onClickCloseDialog();
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
} else {
|
|
await http
|
|
.put(
|
|
config.API.developmentMainTab(
|
|
isEdit.value ? "tab2_4_edit" : "tab2_4_add",
|
|
isEdit.value ? editId.value : projectId.value
|
|
),
|
|
{
|
|
groupTarget: formGroupRelate.relate,
|
|
amount: formGroupRelate.amount,
|
|
}
|
|
)
|
|
.then(async () => {
|
|
await fetchData(projectId.value);
|
|
onClickCloseDialog();
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/** clear form */
|
|
function cleanFormData() {
|
|
formGroupTarget.groupTarget = "";
|
|
formGroupTarget.groupTargetSub = "";
|
|
formGroupTarget.position = "";
|
|
formGroupTarget.posType = null;
|
|
formGroupTarget.posLevel = null;
|
|
formGroupTarget.type = "";
|
|
formGroupTarget.amount = null;
|
|
formGroupRelate.relate = "";
|
|
formGroupRelate.amount = null;
|
|
isEdit.value = false;
|
|
}
|
|
|
|
/** ปิด dialog */
|
|
function onClickCloseDialog() {
|
|
newModalGroupTarget.value = false;
|
|
modalGroupTarget.value = false;
|
|
groupTargetData.targetData = [{}];
|
|
modalRelate.value = false;
|
|
cleanFormData();
|
|
fetchType();
|
|
// fetchData(projectId.value);
|
|
}
|
|
|
|
/**
|
|
* map ช้อมูลตาม option id
|
|
* @param id id
|
|
*/
|
|
function updatePosTypeName(id: string) {
|
|
const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
|
|
posLevelOp.value =
|
|
posLevel?.posLevels.map((e: ResLevel) => ({
|
|
id: e.id,
|
|
name: e.posLevelName.toString(),
|
|
})) ?? [];
|
|
formGroupTarget.posLevel = "";
|
|
}
|
|
|
|
/**
|
|
* กลุ่มเป้าหมาย
|
|
* @param val ข้อมูล กลุ่มเป้าหมาย
|
|
*/
|
|
function updateGroupTarget(val: string) {
|
|
formGroup.value.resetValidation();
|
|
if (val === "OUTSIDERS") {
|
|
formGroupTarget.groupTargetSub = "NONE";
|
|
formGroupTarget.position = "";
|
|
formGroupTarget.posType = null;
|
|
formGroupTarget.posLevel = null;
|
|
} else {
|
|
formGroupTarget.groupTargetSub = "";
|
|
formGroupTarget.posType = "";
|
|
formGroupTarget.posLevel = "";
|
|
formGroupTarget.position = "";
|
|
formGroupTarget.type = "";
|
|
}
|
|
}
|
|
|
|
/** หาชื่อ ตาม id */
|
|
function convertNameGoals(id: string) {
|
|
const data = groupOp.value.find((e: DataOption) => e.id === id);
|
|
return data && data?.name;
|
|
}
|
|
|
|
/** หาชื่อ ตาม id */
|
|
function convertNameSubGoals(id: string) {
|
|
const data = groupSubOp.value.find((e: DataOption) => e.id === id);
|
|
return data && data?.name;
|
|
}
|
|
|
|
/** หาชื่อ ตาม id */
|
|
function convertNamePeoples(id: string) {
|
|
const data = peoplesOp.value.find((e: DataOption) => e.id === id);
|
|
return data && data?.name;
|
|
}
|
|
|
|
/** ลบข้อมูลออกตัวตัวแปร จาก ลำดับ */
|
|
function deleteTargetData(index: any) {
|
|
formGroupTarget.positions.splice(index, 1);
|
|
}
|
|
|
|
function onOpenDialog(data: any) {
|
|
isEdit.value = true;
|
|
isTarget.value = "planned";
|
|
editId.value = data.id;
|
|
formGroupTarget.type = data.type;
|
|
formGroupTarget.groupTarget = data.groupTarget;
|
|
formGroupTarget.groupTargetSub = data.groupTargetSub;
|
|
formGroupTarget.amount = data.amount;
|
|
formGroupTarget.positions = (
|
|
plannedGoalsData.value.find((item: any) => item.id === data.id)?.position ||
|
|
[]
|
|
).map((pos: any) => ({
|
|
posType: pos.posType,
|
|
posLevel: pos.posLevel,
|
|
position: pos.position,
|
|
posTypeId: pos.posTypeId || null,
|
|
posLevelId: pos.posLevelId || null,
|
|
posExecutive: pos.posExecutive,
|
|
}));
|
|
newModalGroupTarget.value = true;
|
|
}
|
|
|
|
/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์ */
|
|
onMounted(() => {
|
|
fetchType();
|
|
fetchTypeEMP();
|
|
fetchData(projectId.value);
|
|
});
|
|
</script>
|
|
<template>
|
|
<!-- CARD เป้าหมายตามแผน -->
|
|
<q-card bordered 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"
|
|
>
|
|
เป้าหมายตามแผน
|
|
<q-btn
|
|
v-if="store.projectStatus !== 'FINISH' && !checkRoutePermission"
|
|
flat
|
|
round
|
|
dense
|
|
icon="add"
|
|
color="primary"
|
|
>
|
|
<q-menu>
|
|
<q-list style="min-width: 100px">
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="
|
|
cleanFormData();
|
|
isEdit = false;
|
|
onClickOpenDialog('group', 'planned');
|
|
"
|
|
>
|
|
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="
|
|
isEdit = false;
|
|
onClickOpenDialog('relate', 'planned');
|
|
"
|
|
>
|
|
<q-item-section>ผู้เกี่ยวข้อง</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
</q-list>
|
|
</q-menu>
|
|
<q-tooltip>เพิ่ม</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row col-12 q-col-gutter-md q-pa-md">
|
|
<div class="col-12">
|
|
<d-table
|
|
for="table"
|
|
:columns="columnsPlannedGoals"
|
|
:rows="plannedGoals"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
hide-pagination
|
|
>
|
|
<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="vertical-top">
|
|
<q-td>
|
|
<q-btn
|
|
v-if="
|
|
store.projectStatus !== 'FINISH' && !checkRoutePermission
|
|
"
|
|
round
|
|
flat
|
|
color="primary"
|
|
icon="mdi-pencil-outline"
|
|
size="14px"
|
|
@click="onOpenDialog(props.row)"
|
|
>
|
|
<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 === 'posTypePlannedId'">
|
|
<div
|
|
v-if="props.row.groupTarget !== 'OUTSIDERS'"
|
|
v-for="row in props.row.position"
|
|
>
|
|
{{ `- ${row.position}`
|
|
}}{{
|
|
row.posType !== null || row.posLevel !== null
|
|
? ` (${row.posType ? row.posType : ""}${
|
|
row.posLevel ? " " + row.posLevel : ""
|
|
})`
|
|
: ""
|
|
}}
|
|
</div>
|
|
<div v-else>
|
|
{{ props.row.type ? `- ${props.row.type}` : "-" }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="col.name === 'posExecutive'">
|
|
<div
|
|
v-if="props.row.groupTarget !== 'OUTSIDERS'"
|
|
v-for="row in props.row.position"
|
|
>
|
|
{{ `${row.posExecutive ? row.posExecutive : "-"}` }}
|
|
</div>
|
|
<div v-if="props.row.position.length == 0">-</div>
|
|
</div>
|
|
<div v-else class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<d-table
|
|
for="table"
|
|
ref="table"
|
|
:columns="columnsRelated"
|
|
:rows="plannedPeoples"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
hide-pagination
|
|
>
|
|
<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">
|
|
<q-td>
|
|
<q-btn
|
|
v-if="
|
|
store.projectStatus !== 'FINISH' && !checkRoutePermission
|
|
"
|
|
round
|
|
flat
|
|
color="primary"
|
|
icon="mdi-pencil-outline"
|
|
size="14px"
|
|
@click="
|
|
() => {
|
|
isEdit = true;
|
|
isTarget = 'planned';
|
|
editId = props.row.id;
|
|
formGroupRelate.relate = props.row.groupTarget;
|
|
formGroupRelate.amount = props.row.amount;
|
|
modalRelate = true;
|
|
}
|
|
"
|
|
>
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</q-td>
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<!--CARD เป้าหมายตามจริง -->
|
|
<q-card
|
|
v-if="store.projectStatus === 'FINISH'"
|
|
bordered
|
|
style="border: 1px solid #d6dee1"
|
|
class="q-mt-md"
|
|
>
|
|
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
|
เป้าหมายตามจริง
|
|
<q-btn
|
|
v-if="!checkRoutePermission"
|
|
flat
|
|
round
|
|
dense
|
|
icon="add"
|
|
color="primary"
|
|
>
|
|
<q-menu>
|
|
<q-list style="min-width: 100px">
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="onClickOpenDialog('group', 'actual')"
|
|
>
|
|
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="onClickOpenDialog('relate', 'actual')"
|
|
>
|
|
<q-item-section>ผู้เกี่ยวข้อง</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
</q-list>
|
|
</q-menu>
|
|
<q-tooltip>เพิ่ม</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row col-12 q-col-gutter-md q-pa-md">
|
|
<div class="col-12">
|
|
<d-table
|
|
for="table"
|
|
ref="table"
|
|
:columns="columnsActualGoals"
|
|
:rows="actualGoals"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
hide-pagination
|
|
>
|
|
<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">
|
|
<q-td>
|
|
<q-btn
|
|
v-if="!checkRoutePermission"
|
|
round
|
|
flat
|
|
color="primary"
|
|
icon="mdi-pencil-outline"
|
|
size="14px"
|
|
@click="
|
|
() => {
|
|
isEdit = true;
|
|
isTarget = 'actual';
|
|
editId = props.row.id;
|
|
formGroupTarget.type = props.row.type;
|
|
formGroupTarget.groupTarget = props.row.groupTarget;
|
|
formGroupTarget.groupTargetSub = props.row.groupTargetSub;
|
|
formGroupTarget.amount = props.row.amount;
|
|
formGroupTarget.position = props.row.position;
|
|
formGroupTarget.posType = props.row.posType;
|
|
formGroupTarget.posLevel = props.row.posLevel;
|
|
|
|
modalGroupTarget = true;
|
|
}
|
|
"
|
|
>
|
|
<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 === 'posTypeActualId'">
|
|
<div v-if="props.row.groupTarget !== 'OUTSIDERS'">
|
|
{{ `- ${props.row.position}`
|
|
}}{{
|
|
props.row.posType !== null || props.row.posLevel !== null
|
|
? ` (${props.row.posType ? props.row.posType : ""}${
|
|
props.row.posLevel ? " " + props.row.posLevel : ""
|
|
})`
|
|
: ""
|
|
}}
|
|
</div>
|
|
<div v-else>
|
|
{{ props.row.type ? props.row.type : "-" }}
|
|
</div>
|
|
</div>
|
|
<div v-else class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
<div v-else class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<d-table
|
|
for="table"
|
|
ref="table"
|
|
:columns="columnsRelated"
|
|
:rows="actualPeoples"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
hide-pagination
|
|
>
|
|
<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">
|
|
<q-td>
|
|
<q-btn
|
|
v-if="!checkRoutePermission"
|
|
round
|
|
flat
|
|
color="primary"
|
|
icon="mdi-pencil-outline"
|
|
size="14px"
|
|
@click="
|
|
() => {
|
|
isEdit = true;
|
|
isTarget = 'actual';
|
|
editId = props.row.id;
|
|
formGroupRelate.relate = props.row.groupTarget;
|
|
formGroupRelate.amount = props.row.amount;
|
|
modalRelate = true;
|
|
}
|
|
"
|
|
>
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</q-td>
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-card v-if="!checkRoutePermission" bordered>
|
|
<div class="text-center q-pa-sm">
|
|
<q-btn
|
|
rounded
|
|
label="ก่อนหน้า"
|
|
icon="mdi-chevron-left"
|
|
id="onSubmit"
|
|
color="public"
|
|
class="q-mr-xs"
|
|
style="width: 120px"
|
|
@click="props.prevStep()"
|
|
>
|
|
</q-btn>
|
|
<q-btn
|
|
rounded
|
|
label="ถัดไป"
|
|
icon-right="mdi-chevron-right"
|
|
id="onSubmit"
|
|
color="public"
|
|
class="q-ml-xs"
|
|
style="width: 120px"
|
|
@click="props.nextStep()"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-dialog v-model="modalGroupTarget" persistent>
|
|
<q-card style="width: 700px">
|
|
<q-form
|
|
ref="formGroup"
|
|
greedy
|
|
@submit.prevent
|
|
@validation-success="onSubmitGroup"
|
|
>
|
|
<DialogHeader
|
|
:tittle="isEdit ? 'แก้ไขกลุ่มเป้าหมาย' : 'เพิ่มกลุ่มเป้าหมาย'"
|
|
:close="onClickCloseDialog"
|
|
/>
|
|
<q-separator />
|
|
<q-card-section class="q-pa-md">
|
|
<div class="row col-12 q-col-gutter-sm">
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
v-model="formGroupTarget.groupTarget"
|
|
:options="groupOp"
|
|
label="กลุ่มเป้าหมาย"
|
|
hide-bottom-space
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
lazy-rules
|
|
class="inputgreen"
|
|
@update:model-value="updateGroupTarget"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-6 col-md-6"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.groupTargetSub"
|
|
:options="
|
|
formGroupTarget.groupTarget === 'OFFICER'
|
|
? groupSubOp.filter(
|
|
(v) =>
|
|
v.id === 'OFFICER' ||
|
|
v.id === 'TEACHER' ||
|
|
v.id === 'EDUCATIONAL'
|
|
)
|
|
: groupSubOp.slice(2, 5)
|
|
"
|
|
label="กลุ่มเป้าหมายย่อย"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
|
|
]"
|
|
@update:model-value="
|
|
formGroupTarget.posType = '';
|
|
formGroupTarget.posLevel = '';
|
|
formGroupTarget.position = '';
|
|
formGroupTarget.type = '';
|
|
formGroup.resetValidation();
|
|
"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="col-xs-6 col-sm-4 col-md-4"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.posType"
|
|
:options="
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? posTypeOp
|
|
: posTypeOpEMP
|
|
"
|
|
option-label="name"
|
|
option-value="name"
|
|
emit-value
|
|
map-options
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? 'กรุณาเลือกตำแหน่งประเภท'
|
|
: 'กรุณาเลือกกลุ่มงาน ' }`,
|
|
]"
|
|
input-class="text-red"
|
|
:label="
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? 'ตำแหน่งประเภท'
|
|
: 'กลุ่มงาน'
|
|
"
|
|
clearable
|
|
@update:model-value="updatePosTypeName"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-4 col-md-4"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.posLevel"
|
|
:options="levelOptions"
|
|
option-label="posLevelName"
|
|
option-value="posLevelName"
|
|
emit-value
|
|
map-options
|
|
input-class="text-red"
|
|
:label="
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? 'ระดับตำแหน่ง'
|
|
: 'ระดับชั้นงาน'
|
|
"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? 'กรุณาเลือกระดับตำแหน่ง'
|
|
: 'กรุณาเลือกระดับชั้นงาน ' }`,
|
|
]"
|
|
clearable
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-4 col-md-4"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.position"
|
|
label="ตำแหน่ง"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกตำแหน่ง'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-6 col-md-8"
|
|
v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
|
|
>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
class="inputgreen"
|
|
hide-bottom-space
|
|
v-model="formGroupTarget.type"
|
|
label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-4">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.amount"
|
|
label="จำนวน(คน)"
|
|
mask="#"
|
|
reverse-fill-mask
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกจำนวน(คน)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<div class="text-right q-pa-sm">
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="บันทึก"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-px-md"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="newModalGroupTarget" persistent>
|
|
<q-card style="min-width: 50%">
|
|
<q-form
|
|
greedy
|
|
ref="formGroup"
|
|
@submit.prevent
|
|
@validation-success="onSubmitGroup"
|
|
>
|
|
<DialogHeader
|
|
:tittle="isEdit ? 'แก้ไขกลุ่มเป้าหมาย' : 'เพิ่มกลุ่มเป้าหมาย'"
|
|
:close="onClickCloseDialog"
|
|
/>
|
|
<q-separator />
|
|
<q-card-section class="q-pa-md">
|
|
<div class="row col-12 q-col-gutter-sm">
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
v-model="formGroupTarget.groupTarget"
|
|
:options="groupOp"
|
|
label="กลุ่มเป้าหมาย"
|
|
hide-bottom-space
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
lazy-rules
|
|
class="inputgreen"
|
|
@update:model-value="(value:any)=>{
|
|
|
|
updateGroupTarget(value),
|
|
(formGroupTarget.positions = [
|
|
{
|
|
posType: '',
|
|
posLevel: '',
|
|
position: '',
|
|
posTypeId: null,
|
|
posLevelId: null,
|
|
posExecutive: '',
|
|
},
|
|
])
|
|
}
|
|
|
|
"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-6 col-md-6"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.groupTargetSub"
|
|
:options="
|
|
formGroupTarget.groupTarget === 'OFFICER'
|
|
? groupSubOp.filter(
|
|
(v) =>
|
|
v.id === 'OFFICER' ||
|
|
v.id === 'TEACHER' ||
|
|
v.id === 'EDUCATIONAL'
|
|
)
|
|
: groupSubOp.slice(2, 5)
|
|
"
|
|
label="กลุ่มเป้าหมายย่อย"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
|
|
]"
|
|
@update:model-value="
|
|
(formGroupTarget.positions = [
|
|
{
|
|
posType: '',
|
|
posLevel: '',
|
|
position: '',
|
|
posTypeId: null,
|
|
posLevelId: null,
|
|
posExecutive: '',
|
|
},
|
|
]),
|
|
formGroup.resetValidation()
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-6 col-md-8"
|
|
v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
|
|
>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
class="inputgreen"
|
|
hide-bottom-space
|
|
v-model="formGroupTarget.type"
|
|
label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-4">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.amount"
|
|
label="จำนวน(คน)"
|
|
mask="#"
|
|
reverse-fill-mask
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกจำนวน(คน)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-12 row items-center"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<div class="text-weight-bold">เพิ่ม</div>
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="primary"
|
|
icon="add"
|
|
size="14px"
|
|
@click="addGroupTargetData()"
|
|
>
|
|
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div
|
|
v-for="(items, index) in formGroupTarget.positions"
|
|
class="col-12 row q-col-gutter-sm"
|
|
>
|
|
<div
|
|
class="col"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="items.posType"
|
|
:options="
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? posTypeOp
|
|
: posTypeOpEMP
|
|
"
|
|
option-label="name"
|
|
option-value="name"
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
lazy-rules
|
|
input-class="text-red"
|
|
:label="
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? 'ตำแหน่งประเภท'
|
|
: 'กลุ่มงาน'
|
|
"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? 'กรุณาเลือกตำแหน่งประเภท'
|
|
: 'กรุณาเลือกกลุ่มงาน ' }`,
|
|
]"
|
|
clearable
|
|
@update:model-value="updatePosTypeName"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="items.posLevel"
|
|
:options="levelComputed[index]"
|
|
option-label="posLevelName"
|
|
option-value="posLevelName"
|
|
emit-value
|
|
map-options
|
|
input-class="text-red"
|
|
:label="
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? 'ระดับตำแหน่ง'
|
|
: 'ระดับชั้นงาน'
|
|
"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
? 'กรุณาเลือกระดับตำแหน่ง'
|
|
: 'กรุณาเลือกระดับชั้นงาน ' }`,
|
|
]"
|
|
clearable
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="items.position"
|
|
label="ตำแหน่ง"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกตำแหน่ง'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="col"
|
|
v-if="
|
|
formGroupTarget.groupTarget !== 'OUTSIDERS' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
|
|
formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
|
|
"
|
|
>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="items.posExecutive"
|
|
label="ตำแหน่งทางการบริหาร"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="col-1"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
style="
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<q-btn
|
|
flat
|
|
dense
|
|
size="12px"
|
|
round
|
|
color="red"
|
|
icon="mdi-delete"
|
|
@click="deleteTargetData(index)"
|
|
>
|
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="modalRelate" persistent>
|
|
<q-card style="width: 400px">
|
|
<q-form greedy @submit.prevent @validation-success="onSubmitRelate">
|
|
<DialogHeader
|
|
:tittle="isEdit ? 'แก้ไขผู้เกี่ยวข้อง' : 'เพิ่มผู้เกี่ยวข้อง'"
|
|
:close="onClickCloseDialog"
|
|
/>
|
|
<q-separator />
|
|
<q-card-section class="q-pa-sm">
|
|
<div class="row col-12 q-col-gutter-sm">
|
|
<div class="col-xs-6 col-sm-12 col-md-12">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="formGroupRelate.relate"
|
|
:options="peoplesOp"
|
|
label="ผู้เกี่ยวข้อง"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-12 col-md-12">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="formGroupRelate.amount"
|
|
label="จำนวน(คน)"
|
|
mask="#"
|
|
reverse-fill-mask
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกจำนวน(คน)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<div class="text-right q-pa-sm">
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="บันทึก"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-px-md"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|