Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into me
# Conflicts: # src/api/06_retirement/api.retirement.ts # src/modules/05_placement/router.ts
This commit is contained in:
Thanit Konmek
commit
b4ac343685
32 changed files with 5263 additions and 1871 deletions
|
|
@ -1,741 +0,0 @@
|
|||
div
|
||||
<template>
|
||||
<div>
|
||||
<div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
|
||||
<div class="col-12 row q-pb-sm items-center">
|
||||
<q-btn flat round color="primary" @click="refresh" icon="mdi-plus">
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
>
|
||||
<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-th auto-width />
|
||||
<q-th auto-width />
|
||||
<q-th auto-width />
|
||||
</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"
|
||||
@click="selectModal(props.row)"
|
||||
>{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
|
||||
>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
:color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
|
||||
:disable="props.rowIndex + 1 == 1"
|
||||
@click="upDown(props)"
|
||||
icon="mdi-arrow-up-bold"
|
||||
>
|
||||
<!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
:color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
|
||||
:disable="rows.length == props.rowIndex + 1"
|
||||
@click="upDown(props, false)"
|
||||
icon="mdi-arrow-down-bold"
|
||||
>
|
||||
<!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
@click="dialogDeleteData(props.row.personalId)"
|
||||
icon="mdi-delete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||
<q-btn
|
||||
dense
|
||||
outline
|
||||
color="primary"
|
||||
icon="chevron_left"
|
||||
@click="previous"
|
||||
class="q-pr-md"
|
||||
label="กรอกรายละเอียด"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="save"
|
||||
class="q-px-md"
|
||||
><!-- icon="mdi-content-save-outline"
|
||||
<q-tooltip>บันทึก</q-tooltip> -->
|
||||
</q-btn>
|
||||
<!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
|
||||
<q-tooltip>ต่อไป</q-tooltip>
|
||||
</q-btn> -->
|
||||
</div>
|
||||
</div>
|
||||
<!--********************************** เงินเดือน ********************************** -->
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 50vw; max-width: 50vw">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader :tittle="titleName" :close="modalOpenClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-sm bg-grey-1">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-xs-12">
|
||||
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="modalData.salaryAmount"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
|
||||
:label="`${'เงินเดือน'}`"
|
||||
type="number"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="modalData.positionSalaryAmount"
|
||||
:label="`${'เงินประจำตำแหน่ง'}`"
|
||||
type="number"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<!-- :rules="[
|
||||
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
|
||||
]" -->
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="modalData.mouthSalaryAmount"
|
||||
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
|
||||
type="number"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<!-- :rules="[
|
||||
(val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
|
||||
]" -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="saveModal"
|
||||
class="q-px-md"
|
||||
><!-- icon="mdi-content-save-outline"
|
||||
<q-tooltip>บันทึก</q-tooltip> -->
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<!--********************************** รายชื่อ ********************************** -->
|
||||
<q-dialog v-model="modalAdd" persistent>
|
||||
<q-card style="width: 50vw; max-width: 50vw">
|
||||
<q-form ref="myFormAdd">
|
||||
<DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-sm bg-grey-1">
|
||||
<d-table
|
||||
:rows="rows2"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</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"
|
||||
>{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
|
||||
>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="saveModalAdd"
|
||||
class="q-px-md"
|
||||
><!-- icon="mdi-content-save-outline"
|
||||
<q-tooltip>บันทึก</q-tooltip> -->
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QInput } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { QTableProps, QForm } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
||||
import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
previous: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
|
||||
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
|
||||
const modalData = ref<any>({
|
||||
salaryAmount: 0,
|
||||
positionSalaryAmount: 0,
|
||||
mouthSalaryAmount: 0,
|
||||
});
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const myFormAdd = ref<QForm | null>(null);
|
||||
const modal = ref<boolean>(false);
|
||||
const modalAdd = ref<boolean>(false);
|
||||
const titleName = ref<string>("");
|
||||
const filterRef = ref<QInput>();
|
||||
const filter = ref<string>("");
|
||||
const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
field: "no",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "idCard",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
field: "idCard",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ-สกุล",
|
||||
field: "name",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "education",
|
||||
align: "left",
|
||||
label: "วุฒิการศึกษาในการออกคำสั่ง",
|
||||
field: "education",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const rows = ref<ResponseData[]>([]);
|
||||
const rows2 = ref<ResponseData[]>([]);
|
||||
const selected = ref<ResponseData[]>([]);
|
||||
|
||||
onMounted(async () => {
|
||||
await conditionData();
|
||||
});
|
||||
|
||||
const conditionData = async () => {
|
||||
const id = route.params.orderid
|
||||
? route.params.orderid.toString()
|
||||
: localStorage.getItem("orderId")
|
||||
? localStorage.getItem("orderId")
|
||||
: null;
|
||||
if (id !== null) {
|
||||
await getData(id);
|
||||
}
|
||||
};
|
||||
|
||||
const getData = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.personsselectedOrder(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
console.log(data);
|
||||
let list: ResponseData[] = [];
|
||||
data.map((r: ResponseData) => {
|
||||
list.push({
|
||||
education: r.education ?? "",
|
||||
idCard: r.idCard ?? "",
|
||||
name: r.name ?? "",
|
||||
personalId: r.personalId ?? "",
|
||||
selectStatus: r.selectStatus !== null ? r.selectStatus : false,
|
||||
sequence: r.sequence !== null ? r.sequence : 0,
|
||||
refRecordId: r.refRecordId,
|
||||
});
|
||||
});
|
||||
// console.log("list", list);
|
||||
rows.value = list;
|
||||
selected.value = rows.value;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
// const saveSalary = async (id: string) => {
|
||||
// await http
|
||||
// .put(config.API.salaryOrder(id))
|
||||
// .then((res) => {
|
||||
// // const data = res.data.result;
|
||||
// // console.log(res);
|
||||
// success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
// };
|
||||
|
||||
const dialogDeleteData = async (id: string) => {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ยืนยันการลบข้อมูล",
|
||||
"ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||
"mdi-help-circle-outline",
|
||||
"ตกลง",
|
||||
"red",
|
||||
() => deleteData(id),
|
||||
undefined
|
||||
);
|
||||
};
|
||||
|
||||
const deleteData = async (id: string) => {
|
||||
await http
|
||||
.delete(config.API.personsOrder(id))
|
||||
.then((res) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(res);
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
await conditionData();
|
||||
});
|
||||
};
|
||||
|
||||
const swapUp = async (id: string) => {
|
||||
// id = personalId
|
||||
await http
|
||||
.put(config.API.swapUpOrder(id))
|
||||
.then((res) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(res);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await conditionData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const swapDown = async (id: string) => {
|
||||
// id = personalId
|
||||
await http
|
||||
.put(config.API.swapDownOrder(id))
|
||||
.then((res) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(res);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await conditionData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const upDown = async (value: any, up: boolean = true) => {
|
||||
const indexCurrent = value.rowIndex;
|
||||
if (up) {
|
||||
await swapUp(value.row.personalId);
|
||||
// rows.value[indexCurrent] = rows.value[indexCurrent - 1];
|
||||
// rows.value[indexCurrent - 1] = value.row;
|
||||
} else {
|
||||
await swapDown(value.row.personalId);
|
||||
// rows.value[indexCurrent] = rows.value[indexCurrent + 1];
|
||||
// rows.value[indexCurrent + 1] = value.row;
|
||||
}
|
||||
};
|
||||
|
||||
const saveModal = () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
putSalary(modalData.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const personalId = ref<string>("");
|
||||
const selectModal = (e: any) => {
|
||||
console.log(e);
|
||||
titleName.value = e.name;
|
||||
personalId.value = e.personalId;
|
||||
// modalData.value = {
|
||||
// salaryAmount: 0,
|
||||
// positionSalaryAmount: 0,
|
||||
// mouthSalaryAmount: 0,
|
||||
// };
|
||||
|
||||
modalOpenClose(e.personalId);
|
||||
};
|
||||
|
||||
const modalOpenClose = async (personalId: string) => {
|
||||
modal.value = !modal.value;
|
||||
if (!modal.value) {
|
||||
titleName.value = "";
|
||||
}
|
||||
if (modal.value == true) {
|
||||
await fetchSalary(personalId);
|
||||
}
|
||||
};
|
||||
const fetchSalary = async (personalId: string) => {
|
||||
console.log(personalId);
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.salaryOrder(personalId))
|
||||
.then((res: any) => {
|
||||
console.log(res);
|
||||
let salary = res.data.result;
|
||||
modalData.value = {
|
||||
salaryAmount: salary.salaryAmount,
|
||||
positionSalaryAmount: salary.positionSalaryAmount,
|
||||
mouthSalaryAmount: salary.monthSalaryAmount,
|
||||
};
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const putSalary = async (salary: any) => {
|
||||
modalData.value = {
|
||||
salaryAmount: Number(salary.salaryAmount),
|
||||
positionSalaryAmount: Number(salary.positionSalaryAmount),
|
||||
monthSalaryAmount: Number(salary.mouthSalaryAmount),
|
||||
};
|
||||
$q.dialog({
|
||||
title: "ยืนยันการบันทึกข้อมูล",
|
||||
message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
await http
|
||||
.put(config.API.salaryOrder(personalId.value), modalData.value)
|
||||
.then((res: any) => {
|
||||
console.log(res);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await conditionData();
|
||||
modal.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const modalAddChange = async () => {
|
||||
modalAdd.value = !modalAdd.value;
|
||||
if (modalAdd.value == true) {
|
||||
const id = route.params.orderid
|
||||
? route.params.orderid.toString()
|
||||
: localStorage.getItem("orderId")
|
||||
? localStorage.getItem("orderId")
|
||||
: null;
|
||||
if (id !== null) {
|
||||
await fetchaddlist(id);
|
||||
}
|
||||
} else await conditionData();
|
||||
};
|
||||
const fetchaddlist = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.personsOrder(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
console.log(data);
|
||||
let list = [];
|
||||
list = data.map((r: ResponseData) => ({
|
||||
education: r.education ?? "",
|
||||
idCard: r.idCard ?? "",
|
||||
name: r.name ?? "",
|
||||
personalId: r.personalId ?? "",
|
||||
selectStatus: r.selectStatus !== null ? r.selectStatus : false,
|
||||
sequence: r.sequence !== null ? r.sequence : 0,
|
||||
refRecordId: r.refRecordId,
|
||||
}));
|
||||
rows2.value = list;
|
||||
selected.value = rows.value;
|
||||
// rows2.value = list.filter((e: any) => e.selectStatus === false);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const saveModalAdd = () => {
|
||||
if (myFormAdd.value !== null) {
|
||||
myFormAdd.value.validate().then(async (result: boolean) => {
|
||||
if (result && selected.value.length !== 0) {
|
||||
$q.dialog({
|
||||
title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
|
||||
message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
let data = [];
|
||||
data.push(...selected.value.map((e: any) => e.refRecordId));
|
||||
// console.log(data);
|
||||
addlist(data);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const addlist = async (data: Object) => {
|
||||
const id = route.params.orderid
|
||||
? route.params.orderid.toString()
|
||||
: localStorage.getItem("orderId")
|
||||
? localStorage.getItem("orderId")
|
||||
: null;
|
||||
if (id !== null) {
|
||||
await http
|
||||
.post(config.API.personsOrder(id), data)
|
||||
.then(() => {
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
})
|
||||
.catch((e: any) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
modalAddChange();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const click = (e: any) => {
|
||||
console.log(e);
|
||||
console.log(rows.value.length);
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
if (selected.value.length > 0) {
|
||||
$q.dialog({
|
||||
title: "ยืนยันการบันทึกข้อมูล",
|
||||
message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
next();
|
||||
});
|
||||
} else {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ข้อความแจ้งเตือน",
|
||||
"กรุณาเลือกรายชื่อ",
|
||||
"warning",
|
||||
undefined,
|
||||
"orange",
|
||||
undefined,
|
||||
undefined,
|
||||
true
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const selectData = (row: any) => {};
|
||||
|
||||
const refresh = async () => {
|
||||
// await conditionData();
|
||||
modalAddChange();
|
||||
selected.value = [];
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
filter.value = "";
|
||||
filterRef.value!.focus();
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -256,7 +256,7 @@ const getTable = async () => {
|
|||
(e: any) =>
|
||||
e.draft == "รอส่งตัว" &&
|
||||
e.positionNumber !== null &&
|
||||
e.statusName == " เตรียมบรรจุ"
|
||||
e.statusName == "เตรียมบรรจุ"
|
||||
);
|
||||
console.log(rowsFilter.value);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,610 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useTransferDataStore } from "@/modules/05_placement/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
const transferStore = useTransferDataStore();
|
||||
const { statusText } = transferStore;
|
||||
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
|
||||
import type { officerType } from "@/modules/05_placement/interface/response/officer";
|
||||
|
||||
const selected = ref<officerType[]>([]);
|
||||
const checkSelected = computed(() => {
|
||||
if (selected.value.length === 0) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
dialogMessage,
|
||||
|
||||
|
||||
} = mixin;
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"fullname",
|
||||
"position",
|
||||
"positionLevel",
|
||||
"organizationPositionOld",
|
||||
"organization",
|
||||
"statusText",
|
||||
"btn",
|
||||
]);
|
||||
const visibleColumns2 = ref<string[]>([
|
||||
"no",
|
||||
"fullname",
|
||||
"position",
|
||||
"positionLevel",
|
||||
"organizationPositionOld",
|
||||
"organization",
|
||||
"statusText",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterKeyword2 = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterKeyword2.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
// const nextPage = (id:string) => {
|
||||
// router.push("/retirement/resign/"+id);
|
||||
// };
|
||||
const rows = ref<officerType[]>([]);
|
||||
const rows2 = ref<any>([
|
||||
{
|
||||
personalId: "0a846508-4932-40de-9a9e-5b519492217c",
|
||||
fullname: "นางสาวอย พชช",
|
||||
position: "นักบริหาร",
|
||||
positionLevel: "ต้น",
|
||||
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
|
||||
agency: "กลุ่มงานกุมารเวชกรรม",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
{
|
||||
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
|
||||
fullname: "นางสาววญ สพ",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
positionLevel: "ปฏิบัติการ",
|
||||
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||
agency: "กลุ่มงานข้อมูลเมือง",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
{
|
||||
personalId: "08db721d-adf2-4842-8056-1abb1539356e",
|
||||
fullname: "นางสาววญ สพ",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
positionLevel: "ปฏิบัติการ",
|
||||
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||
agency: "กลุ่มงานข้อมูลเมือง",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
{
|
||||
personalId: "08db721d-adff-47b0-8762-41cd5c991001",
|
||||
fullname: "นางสาววญ สพ",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
positionLevel: "ปฏิบัติการ",
|
||||
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||
agency: "กลุ่มงานข้อมูลเมือง",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
{
|
||||
personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
|
||||
fullname: "นางสาววญ สพ",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
positionLevel: "ปฏิบัติการ",
|
||||
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||
agency: "กลุ่มงานข้อมูลเมือง",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
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: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionLevel",
|
||||
align: "left",
|
||||
label: "ระดับ",
|
||||
sortable: true,
|
||||
field: "positionLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organizationPositionOld",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "organizationPositionOld",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organization",
|
||||
align: "left",
|
||||
label: "หน่วยงานที่ขอโอนไป",
|
||||
sortable: true,
|
||||
field: "organization",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "statusText",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "statusText",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "btn",
|
||||
align: "left",
|
||||
label: "",
|
||||
sortable: true,
|
||||
field: "btn",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columns2 = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
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: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionLevel",
|
||||
align: "left",
|
||||
label: "ระดับ",
|
||||
sortable: true,
|
||||
field: "positionLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organizationPositionOld",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "organizationPositionOld",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organization",
|
||||
align: "left",
|
||||
label: "หน่วยงานที่ขอโอนไป",
|
||||
sortable: true,
|
||||
field: "organization",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "statusText",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "statusText",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
//--------------(ปุ่มลบ)----------------//
|
||||
|
||||
const openDetail = (id:string) => {
|
||||
router.push(`/repatriate/detail/${id}`)
|
||||
}
|
||||
const openModal = () => (modal.value = true);
|
||||
const closeModal = () => (modal.value = false);
|
||||
const openModalOrder = () => {
|
||||
openModal();
|
||||
const row = rows.value.filter(
|
||||
(item: officerType) =>
|
||||
item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
|
||||
);
|
||||
rows2.value = row;
|
||||
};
|
||||
const getData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.repatriationMain())
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
console.log("data==>", data);
|
||||
rows.value = data.map((item: officerType) => ({
|
||||
id: item.id,
|
||||
fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
|
||||
position: item.position,
|
||||
posNo: item.posNo,
|
||||
positionLevel: item.positionLevel,
|
||||
createdAt: date2Thai(item.createdAt),
|
||||
organization: item.organization,
|
||||
reason: item.reason,
|
||||
status: item.status,
|
||||
statusText:statusText(item.status),
|
||||
date: item.date,
|
||||
salary: item.salary,
|
||||
positionTypeOld: item.positionTypeOld,
|
||||
positionLevelOld: item.positionLevelOld,
|
||||
positionNumberOld: item.positionNumberOld,
|
||||
organizationPositionOld: item.organizationPositionOld,
|
||||
isActive: item.isActive,
|
||||
})
|
||||
);
|
||||
console.log(rows.value )
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const saveOrder = async () => {
|
||||
const id = selected.value.map((item) => item.id);
|
||||
const body = {
|
||||
id,
|
||||
};
|
||||
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.repatriationMainReport(), body)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "ส่งไปออกคำสั่งส่งตัวกลับสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const deleteData = async (id:string) => {
|
||||
await http
|
||||
.delete(config.API.repatriationMainDelete(id))
|
||||
.then((res)=>{
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
console.log(res)
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const clickDelete = async (name:string,id:string) => {
|
||||
dialogMessage(
|
||||
$q,
|
||||
`ลบข้อมูลของ ${name}`,
|
||||
`ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||
"delete",
|
||||
"ยืนยัน",
|
||||
"red",
|
||||
async () => await deleteData(id)
|
||||
,
|
||||
async () => await getData()
|
||||
|
||||
);
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">รายการส่งตัวกลับ</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<q-separator />
|
||||
<div class="row q-pa-md">
|
||||
<div class="col-12">
|
||||
<div class="row col-12">
|
||||
<q-btn
|
||||
@click="openModalOrder"
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
icon="mdi-account-arrow-right"
|
||||
>
|
||||
<q-tooltip>ส่งไปออกคำสั่งส่งตัวกลับ</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-space />
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-pt-sm">
|
||||
<d-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
: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">
|
||||
<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 key="no" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.row.fullname }}
|
||||
</q-td>
|
||||
<q-td key="position" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.row.position }}
|
||||
</q-td>
|
||||
<q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.row.positionLevel }}
|
||||
</q-td>
|
||||
<q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organizationPositionOld }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="organization" :props="props" @click="openDetail(props.row.id)">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organization }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="statusText" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.row.statusText }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
icon="delete"
|
||||
size="14px"
|
||||
color="red-7"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
@click="clickDelete(props.row.fullname,props.row.id)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modal">
|
||||
<q-card style="width: 1200px; max-width: 80vw">
|
||||
<DialogHeader title="ส่งไปออกคำสั่งส่งตัวกลับ" :close="closeModal" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pt-none">
|
||||
<div class="row justify-end">
|
||||
<div class="col-5">
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-input
|
||||
borderless
|
||||
outlined
|
||||
dense
|
||||
debounce="300"
|
||||
v-model="filterKeyword2"
|
||||
placeholder="ค้นหา"
|
||||
style="width: 850px; max-width: auto"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword2 == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword2 !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumns2"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns2"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
:columns="columns2"
|
||||
:rows="rows2"
|
||||
:filter="filterKeyword2"
|
||||
row-key="personalId"
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns2"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
<!-- <template v-slot:body-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 key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="fullname" :props="props">
|
||||
{{ props.row.fullname }}
|
||||
</q-td>
|
||||
<q-td key="position" :props="props">
|
||||
{{ props.row.position }}
|
||||
</q-td>
|
||||
<q-td key="positionLevel" :props="props">
|
||||
{{ props.row.positionLevel }}
|
||||
</q-td>
|
||||
<q-td key="organizationPositionOld" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organizationPositionOld }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="organization" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organization }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="statusText" :props="props">
|
||||
{{ props.row.statusText }}
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
label="ส่งไปออกคำสั่ง"
|
||||
@click="saveOrder"
|
||||
:disable="checkSelected"
|
||||
color="public"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -0,0 +1,508 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
รายละเอียดการส่งตัวกลับ {{ fullname }}
|
||||
</div>
|
||||
<q-card bordered class="row col-12 text-dark">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
outline
|
||||
color="blue"
|
||||
dense
|
||||
icon-right="mdi-open-in-new"
|
||||
class="q-px-sm"
|
||||
label="ดูข้อมูลทะเบียนประวัติ"
|
||||
@click="router.push(`/registry/${personId}`)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-3 col-sm-2 col-md-1 row">
|
||||
<q-img src="@/assets/avatar_user.jpg" />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12 q-pl-md">
|
||||
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ positionTypeOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">ระดับ</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ positionLevelOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">สังกัด</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ organizationPositionOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="q-gutter-sm" v-if="!edit">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
dense
|
||||
icon-right="mdi-file-edit-outline"
|
||||
class="q-px-sm"
|
||||
label="แก้ไข"
|
||||
style="width: 80px"
|
||||
@click="edit = !edit"
|
||||
/>
|
||||
</div>
|
||||
<div class="q-gutter-sm" v-else>
|
||||
<q-btn
|
||||
outline
|
||||
color="public"
|
||||
dense
|
||||
class="q-px-sm"
|
||||
label="บันทึก"
|
||||
style="width: 80px"
|
||||
@click="conditionSave"
|
||||
/>
|
||||
<q-btn
|
||||
outline
|
||||
color="red"
|
||||
dense
|
||||
class="q-px-sm"
|
||||
label="ยกเลิก"
|
||||
style="width: 80px"
|
||||
@click="edit = !edit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<q-form ref="myForm">
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-12 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-grey">
|
||||
ตำแหน่งและหน่วยงานเดิม
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="organizationPositionOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่ง/สังกัด'}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionTypeOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่งประเภท'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionLevelOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ระดับ'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="posNo"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'เลขที่'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="salary"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'เงินเดือน'}`"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-xs-6 col-sm-6 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="organization"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'โอนไปสังกัด'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 row items-center">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date !== null ? date2Thai(date) : null"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตั้งแต่วัน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="reason"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'หมายเหตุ '}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
|
||||
import type { QTableProps, QForm } from "quasar";
|
||||
// import type {
|
||||
// TypeFile,
|
||||
// ResponseDataDetail,
|
||||
// } from "@/modules/05_placement/interface/response/Transfer";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const edit = ref<boolean>(false);
|
||||
const personId = route.params.id as string;
|
||||
const {
|
||||
date2Thai,
|
||||
dialogMessage,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const roleAdmin = ref<boolean>(false);
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const name = ref<string>("นายสมคิด ยอดใจ");
|
||||
const level = ref<string>("ชำนาญการพิเศษ");
|
||||
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
|
||||
const fullname = ref<string>("");
|
||||
const id = ref<string>("");
|
||||
const prefix = ref<string>("");
|
||||
const firstName = ref<string>("");
|
||||
const lastName = ref<string>("");
|
||||
const position = ref<string>("");
|
||||
const posNo = ref<string>("");
|
||||
const positionLevel = ref<string>("");
|
||||
const createdAt = ref<string>("");
|
||||
const organization = ref<string>("");
|
||||
const reason = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
const date = ref<Date | null>(null);
|
||||
const salary = ref<string>("");
|
||||
const positionTypeOld = ref<string>("");
|
||||
const positionLevelOld = ref<string>("");
|
||||
const positionNumberOld = ref<string>("");
|
||||
const organizationPositionOld = ref<string>("");
|
||||
const isActive = ref<string>("");
|
||||
// const responseData = ref<ResponseDataDetail>({
|
||||
// createdAt: new Date(),
|
||||
// date: new Date(),
|
||||
// id: "",
|
||||
// organization: "",
|
||||
// organizationPositionOld: "",
|
||||
// positionLevelOld: "",
|
||||
// positionNumberOld: "",
|
||||
// positionTypeOld: "",
|
||||
// reason: "",
|
||||
// salary: 0,
|
||||
// status: "",
|
||||
// });
|
||||
|
||||
// const rows = ref<TypeFile[]>([]);
|
||||
// const columns = ref<QTableProps["columns"]>([
|
||||
// {
|
||||
// name: "no",
|
||||
// align: "left",
|
||||
// label: "ลำดับ",
|
||||
// sortable: true,
|
||||
// field: "no",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "fileName",
|
||||
// align: "left",
|
||||
// label: "ชื่อไฟล์",
|
||||
// sortable: true,
|
||||
// field: "fileName",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "btnMicrosoft",
|
||||
// align: "right",
|
||||
// label: "ปุ่ม",
|
||||
// sortable: true,
|
||||
// field: "btnMicrosoft",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// ]);
|
||||
|
||||
const getData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.repatriationDetail(personId))
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
|
||||
(id.value = data.id);
|
||||
prefix.value = data.prefix;
|
||||
firstName.value = data.firstName;
|
||||
lastName.value = data.lastName;
|
||||
position.value = data.position;
|
||||
posNo.value = data.posNo;
|
||||
positionLevel.value = data.positionLevel;
|
||||
createdAt.value = data.createdAt;
|
||||
organization.value = data.organization;
|
||||
reason.value = data.reason;
|
||||
status.value = data.status;
|
||||
date.value = data.date;
|
||||
salary.value = data.salary;
|
||||
positionTypeOld.value = data.positionTypeOld;
|
||||
positionLevelOld.value = data.positionLevelOld;
|
||||
positionNumberOld.value = data.positionNumberOld;
|
||||
organizationPositionOld.value = data.organizationPositionOld;
|
||||
isActive.value = data.isActive;
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
//
|
||||
const conditionSave = async () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value.validate().then((success: any) => {
|
||||
if (success) {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
|
||||
"mdi-help-circle-outline",
|
||||
"ตกลง",
|
||||
"public",
|
||||
async () => await saveData(),
|
||||
undefined
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const saveData = async () => {
|
||||
const body = {
|
||||
organization: organization.value,
|
||||
reason: reason.value,
|
||||
organizationPositionOld: organizationPositionOld.value,
|
||||
date: date.value,
|
||||
positionTypeOld: positionTypeOld.value,
|
||||
positionLevelOld: positionLevelOld.value,
|
||||
positionNumberOld: posNo.value,
|
||||
amountOld: salary.value,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.transferId(personId.toString()), body)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||
edit.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
// const confirmMessage = async () => {
|
||||
// dialogMessage(
|
||||
// $q,
|
||||
// "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
|
||||
// "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
|
||||
// "mdi-help-circle-outline",
|
||||
// "ยืนยัน",
|
||||
// "primary",
|
||||
// () => sendConfirm(),
|
||||
// undefined
|
||||
// );
|
||||
// };
|
||||
// const sendConfirm = async () => {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.transferConfirmId(personId.toString()))
|
||||
// .then((res: any) => {
|
||||
// // const data = res.data.result;
|
||||
// // console.log(data);
|
||||
// success($q, "ส่งคำร้องข้อมูลสำเร็จ");
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// await getData();
|
||||
// hideLoader();
|
||||
// });
|
||||
// };
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.q-img {
|
||||
border-radius: 5px;
|
||||
height: 70px;
|
||||
}
|
||||
.text-top {
|
||||
color: gray;
|
||||
font-weight: 400;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.text-detail {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,507 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
รายละเอียดการช่วยราชการ {{ fullname }}
|
||||
</div>
|
||||
<q-card bordered class="row col-12 text-dark">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
outline
|
||||
color="blue"
|
||||
dense
|
||||
icon-right="mdi-open-in-new"
|
||||
class="q-px-sm"
|
||||
label="ดูข้อมูลทะเบียนประวัติ"
|
||||
@click="router.push(`/registry/${personId}`)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-3 col-sm-2 col-md-1 row">
|
||||
<q-img src="@/assets/avatar_user.jpg" />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12 q-pl-md">
|
||||
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ positionTypeOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">ระดับ</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ positionLevelOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="col-12 text-top">สังกัด</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ organizationPositionOld }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="q-gutter-sm" v-if="!edit">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
dense
|
||||
icon-right="mdi-file-edit-outline"
|
||||
class="q-px-sm"
|
||||
label="แก้ไข"
|
||||
style="width: 80px"
|
||||
@click="edit = !edit"
|
||||
/>
|
||||
</div>
|
||||
<div class="q-gutter-sm" v-else>
|
||||
<q-btn
|
||||
outline
|
||||
color="public"
|
||||
dense
|
||||
class="q-px-sm"
|
||||
label="บันทึก"
|
||||
style="width: 80px"
|
||||
@click="conditionSave"
|
||||
/>
|
||||
<q-btn
|
||||
outline
|
||||
color="red"
|
||||
dense
|
||||
class="q-px-sm"
|
||||
label="ยกเลิก"
|
||||
style="width: 80px"
|
||||
@click="edit = !edit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<q-form ref="myForm">
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-12 row items-center">
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-grey">
|
||||
ตำแหน่งและหน่วยงานเดิม
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="organizationPositionOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่ง/สังกัด'}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionTypeOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตำแหน่งประเภท'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionLevelOld"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ระดับ'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="posNo"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'เลขที่'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="salary"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'เงินเดือน'}`"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-xs-6 col-sm-6 row items-center">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="organization"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'โอนไปสังกัด'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 row items-center">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
:readonly="!edit"
|
||||
v-model="date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:borderless="!edit"
|
||||
:model-value="date !== null ? date2Thai(date) : null"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'ตั้งแต่วัน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
edit
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="reason"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'หมายเหตุ '}`"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
|
||||
import type { QTableProps, QForm } from "quasar";
|
||||
// import type {
|
||||
// TypeFile,
|
||||
// ResponseDataDetail,
|
||||
// } from "@/modules/05_placement/interface/response/Transfer";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const edit = ref<boolean>(false);
|
||||
const personId = route.params.id as string;
|
||||
const {
|
||||
date2Thai,
|
||||
dialogMessage,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const roleAdmin = ref<boolean>(false);
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const name = ref<string>("นายสมคิด ยอดใจ");
|
||||
const level = ref<string>("ชำนาญการพิเศษ");
|
||||
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
|
||||
const fullname = ref<string>("");
|
||||
const id = ref<string>("");
|
||||
const prefix = ref<string>("");
|
||||
const firstName = ref<string>("");
|
||||
const lastName = ref<string>("");
|
||||
const position = ref<string>("");
|
||||
const posNo = ref<string>("");
|
||||
const positionLevel = ref<string>("");
|
||||
const createdAt = ref<string>("");
|
||||
const organization = ref<string>("");
|
||||
const reason = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
const date = ref<Date | null>(null);
|
||||
const salary = ref<string>("");
|
||||
const positionTypeOld = ref<string>("");
|
||||
const positionLevelOld = ref<string>("");
|
||||
const positionNumberOld = ref<string>("");
|
||||
const organizationPositionOld = ref<string>("");
|
||||
const isActive = ref<string>("");
|
||||
// const responseData = ref<ResponseDataDetail>({
|
||||
// createdAt: new Date(),
|
||||
// date: new Date(),
|
||||
// id: "",
|
||||
// organization: "",
|
||||
// organizationPositionOld: "",
|
||||
// positionLevelOld: "",
|
||||
// positionNumberOld: "",
|
||||
// positionTypeOld: "",
|
||||
// reason: "",
|
||||
// salary: 0,
|
||||
// status: "",
|
||||
// });
|
||||
|
||||
// const rows = ref<TypeFile[]>([]);
|
||||
// const columns = ref<QTableProps["columns"]>([
|
||||
// {
|
||||
// name: "no",
|
||||
// align: "left",
|
||||
// label: "ลำดับ",
|
||||
// sortable: true,
|
||||
// field: "no",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "fileName",
|
||||
// align: "left",
|
||||
// label: "ชื่อไฟล์",
|
||||
// sortable: true,
|
||||
// field: "fileName",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "btnMicrosoft",
|
||||
// align: "right",
|
||||
// label: "ปุ่ม",
|
||||
// sortable: true,
|
||||
// field: "btnMicrosoft",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// ]);
|
||||
|
||||
const getData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.officerDetail(personId))
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
|
||||
(id.value = data.id);
|
||||
prefix.value = data.prefix;
|
||||
firstName.value = data.firstName;
|
||||
lastName.value = data.lastName;
|
||||
position.value = data.position;
|
||||
posNo.value = data.posNo;
|
||||
positionLevel.value = data.positionLevel;
|
||||
createdAt.value = data.createdAt;
|
||||
organization.value = data.organization;
|
||||
reason.value = data.reason;
|
||||
status.value = data.status;
|
||||
date.value = data.date;
|
||||
salary.value = data.salary;
|
||||
positionTypeOld.value = data.positionTypeOld;
|
||||
positionLevelOld.value = data.positionLevelOld;
|
||||
positionNumberOld.value = data.positionNumberOld;
|
||||
organizationPositionOld.value = data.organizationPositionOld;
|
||||
isActive.value = data.isActive;
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
//
|
||||
const conditionSave = async () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value.validate().then((success: any) => {
|
||||
if (success) {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
||||
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
|
||||
"mdi-help-circle-outline",
|
||||
"ตกลง",
|
||||
"public",
|
||||
async () => await saveData(),
|
||||
undefined
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const saveData = async () => {
|
||||
const body = {
|
||||
organization: organization.value,
|
||||
reason: reason.value,
|
||||
organizationPositionOld: organizationPositionOld.value,
|
||||
date: date.value,
|
||||
positionTypeOld: positionTypeOld.value,
|
||||
positionLevelOld: positionLevelOld.value,
|
||||
positionNumberOld: posNo.value,
|
||||
amountOld: salary.value,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.transferId(personId.toString()), body)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
||||
edit.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
// const confirmMessage = async () => {
|
||||
// dialogMessage(
|
||||
// $q,
|
||||
// "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
|
||||
// "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
|
||||
// "mdi-help-circle-outline",
|
||||
// "ยืนยัน",
|
||||
// "primary",
|
||||
// () => sendConfirm(),
|
||||
// undefined
|
||||
// );
|
||||
// };
|
||||
// const sendConfirm = async () => {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.transferConfirmId(personId.toString()))
|
||||
// .then((res: any) => {
|
||||
// // const data = res.data.result;
|
||||
// // console.log(data);
|
||||
// success($q, "ส่งคำร้องข้อมูลสำเร็จ");
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// await getData();
|
||||
// hideLoader();
|
||||
// });
|
||||
// };
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.q-img {
|
||||
border-radius: 5px;
|
||||
height: 70px;
|
||||
}
|
||||
.text-top {
|
||||
color: gray;
|
||||
font-weight: 400;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.text-detail {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
610
src/modules/05_placement/components/helpgovernment/mainHelp.vue
Normal file
610
src/modules/05_placement/components/helpgovernment/mainHelp.vue
Normal file
|
|
@ -0,0 +1,610 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useTransferDataStore } from "@/modules/05_placement/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
const transferStore = useTransferDataStore();
|
||||
const { statusText } = transferStore;
|
||||
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
|
||||
import type { officerType } from "@/modules/05_placement/interface/response/officer";
|
||||
|
||||
const selected = ref<officerType[]>([]);
|
||||
const checkSelected = computed(() => {
|
||||
if (selected.value.length === 0) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
dialogMessage,
|
||||
|
||||
|
||||
} = mixin;
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"fullname",
|
||||
"position",
|
||||
"positionLevel",
|
||||
"organizationPositionOld",
|
||||
"organization",
|
||||
"statusText",
|
||||
"btn",
|
||||
]);
|
||||
const visibleColumns2 = ref<string[]>([
|
||||
"no",
|
||||
"fullname",
|
||||
"position",
|
||||
"positionLevel",
|
||||
"organizationPositionOld",
|
||||
"organization",
|
||||
"statusText",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterKeyword2 = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterKeyword2.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
// const nextPage = (id:string) => {
|
||||
// router.push("/retirement/resign/"+id);
|
||||
// };
|
||||
const rows = ref<officerType[]>([]);
|
||||
const rows2 = ref<any>([
|
||||
{
|
||||
personalId: "0a846508-4932-40de-9a9e-5b519492217c",
|
||||
fullname: "นางสาวอย พชช",
|
||||
position: "นักบริหาร",
|
||||
positionLevel: "ต้น",
|
||||
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
|
||||
agency: "กลุ่มงานกุมารเวชกรรม",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
{
|
||||
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
|
||||
fullname: "นางสาววญ สพ",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
positionLevel: "ปฏิบัติการ",
|
||||
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||
agency: "กลุ่มงานข้อมูลเมือง",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
{
|
||||
personalId: "08db721d-adf2-4842-8056-1abb1539356e",
|
||||
fullname: "นางสาววญ สพ",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
positionLevel: "ปฏิบัติการ",
|
||||
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||
agency: "กลุ่มงานข้อมูลเมือง",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
{
|
||||
personalId: "08db721d-adff-47b0-8762-41cd5c991001",
|
||||
fullname: "นางสาววญ สพ",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
positionLevel: "ปฏิบัติการ",
|
||||
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||
agency: "กลุ่มงานข้อมูลเมือง",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
{
|
||||
personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
|
||||
fullname: "นางสาววญ สพ",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
positionLevel: "ปฏิบัติการ",
|
||||
oc: "กลุ่มงานช่วยนักบริหาร",
|
||||
agency: "กลุ่มงานข้อมูลเมือง",
|
||||
status: "รออนุมัติ",
|
||||
},
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
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: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionLevel",
|
||||
align: "left",
|
||||
label: "ระดับ",
|
||||
sortable: true,
|
||||
field: "positionLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organizationPositionOld",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "organizationPositionOld",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organization",
|
||||
align: "left",
|
||||
label: "หน่วยงานที่ขอโอนไป",
|
||||
sortable: true,
|
||||
field: "organization",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "statusText",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "statusText",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "btn",
|
||||
align: "left",
|
||||
label: "",
|
||||
sortable: true,
|
||||
field: "btn",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columns2 = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
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: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionLevel",
|
||||
align: "left",
|
||||
label: "ระดับ",
|
||||
sortable: true,
|
||||
field: "positionLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organizationPositionOld",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "organizationPositionOld",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organization",
|
||||
align: "left",
|
||||
label: "หน่วยงานที่ขอโอนไป",
|
||||
sortable: true,
|
||||
field: "organization",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "statusText",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "statusText",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
//--------------(ปุ่มลบ)----------------//
|
||||
|
||||
const openDetail = (id:string) => {
|
||||
router.push(`/help-government/detail/${id}`)
|
||||
}
|
||||
const openModal = () => (modal.value = true);
|
||||
const closeModal = () => (modal.value = false);
|
||||
const openModalOrder = () => {
|
||||
openModal();
|
||||
const row = rows.value.filter(
|
||||
(item: officerType) =>
|
||||
item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
|
||||
);
|
||||
rows2.value = row;
|
||||
};
|
||||
const getData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.officerMain())
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
console.log("data==>", data);
|
||||
rows.value = data.map((item: officerType) => ({
|
||||
id: item.id,
|
||||
fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
|
||||
position: item.position,
|
||||
posNo: item.posNo,
|
||||
positionLevel: item.positionLevel,
|
||||
createdAt: date2Thai(item.createdAt),
|
||||
organization: item.organization,
|
||||
reason: item.reason,
|
||||
status: item.status,
|
||||
statusText:statusText(item.status),
|
||||
date: item.date,
|
||||
salary: item.salary,
|
||||
positionTypeOld: item.positionTypeOld,
|
||||
positionLevelOld: item.positionLevelOld,
|
||||
positionNumberOld: item.positionNumberOld,
|
||||
organizationPositionOld: item.organizationPositionOld,
|
||||
isActive: item.isActive,
|
||||
})
|
||||
);
|
||||
console.log(rows.value )
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const saveOrder = async () => {
|
||||
const id = selected.value.map((item) => item.id);
|
||||
const body = {
|
||||
id,
|
||||
};
|
||||
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.officerMainReport(), body)
|
||||
.then((res: any) => {
|
||||
// const data = res.data.result;
|
||||
// console.log(data);
|
||||
success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
|
||||
closeModal();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const deleteData = async (id:string) => {
|
||||
await http
|
||||
.delete(config.API.officerMainDelete(id))
|
||||
.then((res)=>{
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
console.log(res)
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const clickDelete = async (name:string,id:string) => {
|
||||
dialogMessage(
|
||||
$q,
|
||||
`ลบข้อมูลของ ${name}`,
|
||||
`ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||
"delete",
|
||||
"ยืนยัน",
|
||||
"red",
|
||||
async () => await deleteData(id)
|
||||
,
|
||||
async () => await getData()
|
||||
|
||||
);
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">รายการช่วยราชการ</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<q-separator />
|
||||
<div class="row q-pa-md">
|
||||
<div class="col-12">
|
||||
<div class="row col-12">
|
||||
<q-btn
|
||||
@click="openModalOrder"
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
icon="mdi-account-arrow-right"
|
||||
>
|
||||
<q-tooltip>ส่งไปออกคำสั่งช่วยราชการ</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-space />
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-pt-sm">
|
||||
<d-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
: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">
|
||||
<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 key="no" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.row.fullname }}
|
||||
</q-td>
|
||||
<q-td key="position" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.row.position }}
|
||||
</q-td>
|
||||
<q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.row.positionLevel }}
|
||||
</q-td>
|
||||
<q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organizationPositionOld }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="organization" :props="props" @click="openDetail(props.row.id)">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organization }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="statusText" :props="props" @click="openDetail(props.row.id)">
|
||||
{{ props.row.statusText }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
icon="delete"
|
||||
size="14px"
|
||||
color="red-7"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
@click="clickDelete(props.row.fullname,props.row.id)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modal">
|
||||
<q-card style="width: 1200px; max-width: 80vw">
|
||||
<DialogHeader title="ส่งไปออกคำสั่งช่วยราชการ" :close="closeModal" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pt-none">
|
||||
<div class="row justify-end">
|
||||
<div class="col-5">
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-input
|
||||
borderless
|
||||
outlined
|
||||
dense
|
||||
debounce="300"
|
||||
v-model="filterKeyword2"
|
||||
placeholder="ค้นหา"
|
||||
style="width: 850px; max-width: auto"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterKeyword2 == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterKeyword2 !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumns2"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns2"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
:columns="columns2"
|
||||
:rows="rows2"
|
||||
:filter="filterKeyword2"
|
||||
row-key="personalId"
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns2"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
<!-- <template v-slot:body-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 key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="fullname" :props="props">
|
||||
{{ props.row.fullname }}
|
||||
</q-td>
|
||||
<q-td key="position" :props="props">
|
||||
{{ props.row.position }}
|
||||
</q-td>
|
||||
<q-td key="positionLevel" :props="props">
|
||||
{{ props.row.positionLevel }}
|
||||
</q-td>
|
||||
<q-td key="organizationPositionOld" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organizationPositionOld }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="organization" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ props.row.organization }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td key="statusText" :props="props">
|
||||
{{ props.row.statusText }}
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
label="ส่งไปออกคำสั่ง"
|
||||
@click="saveOrder"
|
||||
:disable="checkSelected"
|
||||
color="public"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -1,12 +1,40 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, defineAsyncComponent } from "vue";
|
||||
import { ref, defineAsyncComponent, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useProbationDataStore } from "@/modules/05_placement/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const probationStore = useProbationDataStore();
|
||||
const { ratingColors } = probationStore;
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
notifyError,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
dateToISO,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const assignId = ref<string>(route.params.form.toString());
|
||||
|
||||
const person = ref<any>([]);
|
||||
const assign = ref<any>([]);
|
||||
const evaluate_no = ref<string>("");
|
||||
const start_date = ref<Date>(new Date());
|
||||
const date_finish = ref<Date>(new Date());
|
||||
const commander = ref<any>([]);
|
||||
const round = ref<any>();
|
||||
const status = ref<boolean>(true);
|
||||
|
||||
const props = defineProps({
|
||||
tab: String,
|
||||
});
|
||||
|
||||
const list2_1 = [
|
||||
{ id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
|
||||
|
|
@ -53,14 +81,104 @@ const list2_3 = [
|
|||
label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
|
||||
},
|
||||
];
|
||||
onMounted(async () => {
|
||||
fecthAssign(assignId.value);
|
||||
if (props.tab !== undefined) {
|
||||
round.value = props.tab.charAt(4);
|
||||
fetchEvaluate(assignId.value, round.value);
|
||||
}
|
||||
// console.log(round.value);
|
||||
// console.log(assignId.value);
|
||||
});
|
||||
const fecthAssign = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.evaluateCreate(id))
|
||||
.then((res: any) => {
|
||||
// console.log(res);
|
||||
person.value = res.data.data.person;
|
||||
assign.value = res.data.data.assign;
|
||||
commander.value = res.data.data.commander;
|
||||
option.value.push(commander.value);
|
||||
Autherise.value = commander.value.name;
|
||||
evaluate_no.value = res.data.data.evaluate_no;
|
||||
start_date.value = res.data.data.start_date;
|
||||
date_finish.value = res.data.data.end_date;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const fetchEvaluate = async (id: string, round: string) => {
|
||||
// showLoader();
|
||||
await http
|
||||
.get(config.API.evaluatecommader(id, round))
|
||||
.then((res: any) => {
|
||||
// console.log(res);
|
||||
let data = res.data.data.evaluate;
|
||||
console.log(data);
|
||||
start_date.value = data.date_start;
|
||||
date_finish.value = data.date_finish;
|
||||
knowledge_level.value = data.knowledge_level;
|
||||
skill_level.value = data.skill_level;
|
||||
competency_level.value = data.competency_level;
|
||||
learn_level.value = data.learn_level;
|
||||
apply_level.value = data.apply_level;
|
||||
success_level.value = data.success_level;
|
||||
achievement_other.value.text = data.achievement_other_desc;
|
||||
achievement_other.value.level = data.achievement_other_level;
|
||||
conduct_level.value[0] = data.conduct1_level;
|
||||
conduct_level.value[1] = data.conduct2_level;
|
||||
conduct_level.value[2] = data.conduct3_level;
|
||||
conduct_level.value[3] = data.conduct4_level;
|
||||
moral_level.value[0] = data.moral1_level;
|
||||
moral_level.value[1] = data.moral2_level;
|
||||
moral_level.value[2] = data.moral3_level;
|
||||
discipline_level.value[0] = data.discipline1_level;
|
||||
discipline_level.value[1] = data.discipline2_level;
|
||||
discipline_level.value[2] = data.discipline3_level;
|
||||
discipline_level.value[3] = data.discipline4_level;
|
||||
discipline_level.value[4] = data.discipline5_level;
|
||||
behavio_orther.value.text = data.behavior_other_desc;
|
||||
behavio_orther.value.level = data.behavior_other_level;
|
||||
behavio_strength_desc.value = data.behavior_strength_desc;
|
||||
behavior_improve_desc.value = data.behavior_improve_desc;
|
||||
orientation.value = data.orientation.toString();
|
||||
self_learning.value = data.self_learning.toString();
|
||||
training_seminar.value = data.training_seminar.toString();
|
||||
other_training.value = data.other_training.toString();
|
||||
if (
|
||||
data.achievement_other_desc !== "" &&
|
||||
data.achievement_other_level !== null
|
||||
) {
|
||||
etc.value = true;
|
||||
}
|
||||
if (
|
||||
data.behavior_other_desc !== "" &&
|
||||
data.behavior_other_level !== null
|
||||
) {
|
||||
etc2.value = true;
|
||||
}
|
||||
status.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
console.log(e);
|
||||
})
|
||||
.finally(() => {
|
||||
// hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, notifyError } = mixin;
|
||||
const dateToday = ref<Date>(new Date("10-10-2023"));
|
||||
const dateEnd = ref<Date>(new Date("12-10-2023"));
|
||||
const period = ref<number>(1);
|
||||
// const dateToday = ref<Date>(new Date("10-10-2023"));
|
||||
// const dateEnd = ref<Date>(new Date("12-10-2023"));
|
||||
// const period = ref<number>(1);
|
||||
const Autherise = ref<any>(null);
|
||||
const dateAutherise = ref<any>(new Date());
|
||||
const option = ref<any>([]);
|
||||
|
||||
// part 1
|
||||
const knowledge_level = ref<number>(0);
|
||||
|
|
@ -80,7 +198,7 @@ const behavio_orther = ref<any>({ text: "", level: 0 });
|
|||
const behavio_strength_desc = ref<string>("");
|
||||
const behavior_improve_desc = ref<string>("");
|
||||
// part 3
|
||||
const orientation = ref<num>(null);
|
||||
const orientation = ref<any>(null);
|
||||
const self_learning = ref<any>(null);
|
||||
const training_seminar = ref<any>(null);
|
||||
const other_training = ref<any>(null);
|
||||
|
|
@ -136,6 +254,9 @@ const savaForm = () => {
|
|||
};
|
||||
const putformData = () => {
|
||||
const data = {
|
||||
evaluate_no: evaluate_no.value,
|
||||
start_date: start_date.value,
|
||||
date_finish: date_finish.value,
|
||||
knowledge_level: knowledge_level.value,
|
||||
skill_level: skill_level.value,
|
||||
competency_level: competency_level.value,
|
||||
|
|
@ -155,13 +276,14 @@ const putformData = () => {
|
|||
discipline3_level: discipline_level.value[2],
|
||||
discipline4_level: discipline_level.value[3],
|
||||
discipline5_level: discipline_level.value[4],
|
||||
behavio_orther: behavio_orther.value,
|
||||
behavio_strength_desc: behavio_strength_desc.value,
|
||||
behavior_orther: behavio_orther.value,
|
||||
behavior_strength_desc: behavio_strength_desc.value,
|
||||
behavior_improve_desc: behavior_improve_desc.value,
|
||||
orientation: Number(orientation.value),
|
||||
self_learning: Number(self_learning.value),
|
||||
training_seminar: Number(training_seminar.value),
|
||||
other_training: Number(other_training.value),
|
||||
commander_dated: dateToISO(dateAutherise.value),
|
||||
};
|
||||
$q.dialog({
|
||||
title: "ยืนยันการบันทึกข้อมูล",
|
||||
|
|
@ -174,6 +296,15 @@ const putformData = () => {
|
|||
})
|
||||
.onOk(async () => {
|
||||
console.log("บันทึกข้อมูล", data);
|
||||
await http
|
||||
.post(config.API.createformCommader(assignId.value), data)
|
||||
.then((res: any) => {
|
||||
console.log(res);
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
})
|
||||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
|
|
@ -182,21 +313,28 @@ const putformData = () => {
|
|||
|
||||
<template>
|
||||
<div class="row col-12 q-gutter-lg no-margin">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||||
วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
|
||||
<span class="text-black q-px-sm">{{
|
||||
date2Thai(assign.date_start)
|
||||
}}</span>
|
||||
ถึงวันที
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
|
||||
<span class="text-black q-px-sm">{{
|
||||
date2Thai(assign.date_finish)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||||
<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
|
||||
<span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
|
||||
ระหว่างวันที่
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
|
||||
<span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
|
||||
ถึงวันที่
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
|
||||
<span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md">
|
||||
<q-separator size="3px" color="grey-2" />
|
||||
|
|
@ -891,9 +1029,7 @@ const putformData = () => {
|
|||
<!-- Footer -->
|
||||
<div class="row col-12 q-gutter-lg no-margin">
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 text-top2 row items-center">
|
||||
ผู้บังคับบัญชา
|
||||
</div>
|
||||
<div class="col-12 text-top2 row items-center">ผู้บังคับบัญชา</div>
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-8"
|
||||
|
|
@ -902,6 +1038,7 @@ const putformData = () => {
|
|||
outlined
|
||||
:options="option"
|
||||
label="ผู้บังคับบัญชา"
|
||||
disable
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker
|
||||
|
|
@ -948,7 +1085,7 @@ const putformData = () => {
|
|||
<!-- <Footer /> -->
|
||||
<q-toolbar class="text-primary">
|
||||
<q-space />
|
||||
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
|
||||
<q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,133 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, defineAsyncComponent, computed } from "vue";
|
||||
import { ref, defineAsyncComponent, computed, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useProbationDataStore } from "@/modules/05_placement/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const probationStore = useProbationDataStore();
|
||||
const { ratingColors } = probationStore;
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
notifyError,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dateToISO,
|
||||
success,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const assignId = ref<string>(route.params.form.toString());
|
||||
|
||||
// const person = ref<any>([]);
|
||||
const assign = ref<any>([]);
|
||||
const evaluate_no = ref<string>("");
|
||||
const start_date = ref<Date>(new Date());
|
||||
const date_finish = ref<Date>(new Date());
|
||||
const status = ref<boolean>(true);
|
||||
const chairman = ref<any>([]);
|
||||
const commander = ref<any>([]);
|
||||
const mentors = ref<any>([{ name: "" }, { name: "" }]);
|
||||
|
||||
const round = ref<any>();
|
||||
|
||||
const props = defineProps({
|
||||
tab: String,
|
||||
});
|
||||
onMounted(() => {
|
||||
console.log(props);
|
||||
console.log(assignId.value);
|
||||
fecthAssign(assignId.value);
|
||||
if (props.tab !== undefined) {
|
||||
round.value = props.tab.charAt(4);
|
||||
fetchEvaluate(assignId.value, round.value);
|
||||
}
|
||||
});
|
||||
const fecthAssign = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.evaluateChairman(id))
|
||||
.then((res: any) => {
|
||||
console.log(res);
|
||||
assign.value = res.data.data.assign;
|
||||
evaluate_no.value = res.data.data.evaluate_no;
|
||||
start_date.value = res.data.data.start_date;
|
||||
date_finish.value = res.data.data.end_date;
|
||||
chairman.value = res.data.data.chairman;
|
||||
commander.value = res.data.data.commander;
|
||||
mentors.value = res.data.data.mentors;
|
||||
console.log(mentors.value[0].name);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const fetchEvaluate = async (id: string, round: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.evaluateRoundChairman(id, round))
|
||||
.then((res: any) => {
|
||||
let data = res.data.data.evaluate;
|
||||
console.log(data);
|
||||
start_date.value = data.date_start;
|
||||
date_finish.value = data.date_finish;
|
||||
learn_level.value = data.knowledge_level;
|
||||
apply_level.value = data.apply_level;
|
||||
success_level.value = data.success_level;
|
||||
achievement_other.value.text = data.achievement_other_desc;
|
||||
achievement_other.value.level = data.achievement_other_level;
|
||||
conduct_level.value[0] = data.conduct1_level;
|
||||
conduct_level.value[1] = data.conduct2_level;
|
||||
conduct_level.value[2] = data.conduct3_level;
|
||||
conduct_level.value[3] = data.conduct4_level;
|
||||
moral_level.value[0] = data.moral1_level;
|
||||
moral_level.value[1] = data.moral2_level;
|
||||
moral_level.value[2] = data.moral3_level;
|
||||
discipline_level.value[0] = data.discipline1_level;
|
||||
discipline_level.value[1] = data.discipline2_level;
|
||||
discipline_level.value[2] = data.discipline3_level;
|
||||
discipline_level.value[3] = data.discipline4_level;
|
||||
discipline_level.value[4] = data.discipline5_level;
|
||||
behavio_orther.value.text = data.behavior_other_desc;
|
||||
behavio_orther.value.level = data.behavior_other_level;
|
||||
orientation.value = data.develop_orientation_score;
|
||||
self_learning.value = data.develop_self_learning_score;
|
||||
training_seminar.value = data.develop_training_seminar_score;
|
||||
other_training.value = data.develop_other_training_score;
|
||||
orientation_percent.value = data.develop_orientation_percent;
|
||||
self_learning_percent.value = data.develop_self_learning_percent;
|
||||
training_seminar_percent.value = data.develop_training_seminar_percent;
|
||||
other_training_percent.value = data.develop_other_training_percent;
|
||||
|
||||
if (
|
||||
data.achievement_other_desc !== "" &&
|
||||
data.achievement_other_level !== null
|
||||
) {
|
||||
etc.value = true;
|
||||
}
|
||||
if (
|
||||
data.behavior_other_desc !== "" &&
|
||||
data.behavior_other_level !== null
|
||||
) {
|
||||
etc2.value = true;
|
||||
}
|
||||
|
||||
status.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const list2_1 = [
|
||||
{ id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
|
||||
|
|
@ -54,8 +175,6 @@ const list2_3 = [
|
|||
},
|
||||
];
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, notifyError } = mixin;
|
||||
const dateToday = ref<Date>(new Date("10-10-2023"));
|
||||
const dateEnd = ref<Date>(new Date("12-10-2023"));
|
||||
const period = ref<number>(1);
|
||||
|
|
@ -73,14 +192,23 @@ const etc2 = ref<any>(false); // checkBox 2.4
|
|||
const behavio_orther = ref<any>({ text: "", level: 0 });
|
||||
|
||||
// part 3
|
||||
const orientation = ref<number>(null);
|
||||
const self_learning = ref<number>(null);
|
||||
const training_seminar = ref<number>(null);
|
||||
const other_training = ref<number>(null);
|
||||
const orientation = ref<number>(0);
|
||||
const self_learning = ref<number>(0);
|
||||
const training_seminar = ref<number>(0);
|
||||
const other_training = ref<number>(0);
|
||||
const orientation_percent = ref<number>(0);
|
||||
const self_learning_percent = ref<number>(0);
|
||||
const training_seminar_percent = ref<number>(0);
|
||||
const other_training_percent = ref<number>(0);
|
||||
const develop_result = ref<any>();
|
||||
const develop_result_option = ref<any>([
|
||||
{ name: "ไม่ผ่านการทดลองงาน", value: 0 },
|
||||
{ name: "ผ่านการทดลองงาน", value: 1 },
|
||||
]);
|
||||
// footer
|
||||
const Autherise = ref<any>(null);
|
||||
const dateAutherise = ref<any>(new Date());
|
||||
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
|
||||
// const option = ref<any>([]);
|
||||
|
||||
// score
|
||||
const score1 = computed(() => {
|
||||
|
|
@ -98,6 +226,22 @@ const score1 = computed(() => {
|
|||
}
|
||||
return learn_level.value + apply_level.value + success_level.value;
|
||||
});
|
||||
const achievement_score_total: any = computed(() => {
|
||||
if (
|
||||
etc.value === true &&
|
||||
achievement_other.value.text !== undefined &&
|
||||
achievement_other.value.level !== undefined
|
||||
) {
|
||||
return 20;
|
||||
}
|
||||
return 15;
|
||||
});
|
||||
const achievement_result: any = computed(() => {
|
||||
if (percent_score1.value > 60) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
const score2 = computed(() => {
|
||||
let sum_conduct = conduct_level.value.reduce(
|
||||
(sum: number, level: number) => sum + level,
|
||||
|
|
@ -121,7 +265,22 @@ const score2 = computed(() => {
|
|||
);
|
||||
} else return sum_conduct + sum_moral + sum_discipline;
|
||||
});
|
||||
const percent_score1: number = computed(() => {
|
||||
const behavior_score_total: any = computed(() => {
|
||||
if (
|
||||
etc2.value === true &&
|
||||
behavio_orther.value.text !== undefined &&
|
||||
behavio_orther.value.level !== undefined
|
||||
) {
|
||||
return 65;
|
||||
} else return 60;
|
||||
});
|
||||
const behavior_result: any = computed(() => {
|
||||
if (percent_score2.value > 60) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
const percent_score1: any = computed(() => {
|
||||
let num = 0;
|
||||
if (etc.value === true) {
|
||||
num = 20;
|
||||
|
|
@ -129,7 +288,7 @@ const percent_score1: number = computed(() => {
|
|||
let percent1 = (score1.value / num) * 100;
|
||||
return percent1.toFixed(2);
|
||||
});
|
||||
const percent_score2: number = computed(() => {
|
||||
const percent_score2: any = computed(() => {
|
||||
let num = 0;
|
||||
if (etc2.value === true) {
|
||||
num = 65;
|
||||
|
|
@ -149,6 +308,14 @@ const score4 = computed(() => {
|
|||
Number(other_training.value)
|
||||
);
|
||||
});
|
||||
const score5 = computed(() => {
|
||||
return (
|
||||
Number(orientation_percent.value) +
|
||||
Number(self_learning_percent.value) +
|
||||
Number(training_seminar_percent.value) +
|
||||
Number(other_training_percent.value)
|
||||
);
|
||||
});
|
||||
|
||||
const savaForm = () => {
|
||||
let hasError = false;
|
||||
|
|
@ -185,7 +352,10 @@ const savaForm = () => {
|
|||
};
|
||||
const putformData = () => {
|
||||
const data = {
|
||||
learn_level: learn_level.value,
|
||||
evaluate_no: evaluate_no.value,
|
||||
start_date: start_date.value,
|
||||
date_finish: date_finish.value,
|
||||
knowledge_level: learn_level.value,
|
||||
apply_level: apply_level.value,
|
||||
success_level: success_level.value,
|
||||
achievement_other: achievement_other.value,
|
||||
|
|
@ -201,13 +371,27 @@ const putformData = () => {
|
|||
discipline3_level: discipline_level.value[2],
|
||||
discipline4_level: discipline_level.value[3],
|
||||
discipline5_level: discipline_level.value[4],
|
||||
behavio_orther: behavio_orther.value,
|
||||
orientation: Number(orientation.value),
|
||||
self_learning: Number(self_learning.value),
|
||||
training_seminar: Number(training_seminar.value),
|
||||
other_training: Number(other_training.value),
|
||||
total_experiment: Number(score1.value),
|
||||
total_behavior: Number(score2.value),
|
||||
behavior_orther: behavio_orther.value,
|
||||
develop_orientation_score: Number(orientation.value),
|
||||
develop_self_learning_score: Number(self_learning.value),
|
||||
develop_training_seminar_score: Number(training_seminar.value),
|
||||
develop_other_training_score: Number(other_training.value),
|
||||
develop_orientation_percent: Number(orientation_percent.value),
|
||||
develop_self_learning_percent: Number(self_learning_percent.value),
|
||||
develop_training_seminar_percent: Number(training_seminar_percent.value),
|
||||
develop_other_training_percent: Number(other_training_percent.value),
|
||||
achievement_score: Number(score1.value),
|
||||
achievement_percent: Number(percent_score1.value),
|
||||
achievement_score_total: Number(achievement_score_total.value),
|
||||
achievement_result: Number(achievement_result.value),
|
||||
behavior_score: Number(score2.value),
|
||||
behavior_percent: Number(percent_score2.value),
|
||||
behavior_score_total: Number(behavior_score_total.value),
|
||||
behavior_result: Number(behavior_result.value),
|
||||
sum_score: Number(score1.value) + Number(score2.value),
|
||||
sum_percent: Number(percent_score1.value) + Number(percent_score2.value),
|
||||
chairman_dated: dateToISO(dateAutherise.value),
|
||||
develop_result: develop_result.value,
|
||||
};
|
||||
$q.dialog({
|
||||
title: "ยืนยันการบันทึกข้อมูล",
|
||||
|
|
@ -220,6 +404,19 @@ const putformData = () => {
|
|||
})
|
||||
.onOk(async () => {
|
||||
console.log("บันทึกข้อมูล", data);
|
||||
await http
|
||||
.post(config.API.createformChairman(assignId.value), data)
|
||||
.then((res: any) => {
|
||||
console.log(res);
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
})
|
||||
.catch((e: any) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
fetchEvaluate(assignId.value, round.value);
|
||||
});
|
||||
})
|
||||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
|
|
@ -228,21 +425,28 @@ const putformData = () => {
|
|||
|
||||
<template>
|
||||
<div class="row col-12 q-gutter-lg no-margin">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div>แบบประเมินผล (คณะกรรมการ)</div>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||||
วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
|
||||
<span class="text-black q-px-sm">{{
|
||||
date2Thai(assign.date_start)
|
||||
}}</span>
|
||||
ถึงวันที
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
|
||||
<span class="text-black q-px-sm">{{
|
||||
date2Thai(assign.date_finish)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||||
<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
|
||||
<span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
|
||||
ระหว่างวันที่
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
|
||||
<span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
|
||||
ถึงวันที่
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
|
||||
<span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md">
|
||||
<q-separator size="3px" color="grey-2" />
|
||||
|
|
@ -829,7 +1033,7 @@ const putformData = () => {
|
|||
<q-input dense type="number" v-model="orientation" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input dense type="number" v-model="text" />
|
||||
<q-input dense type="number" v-model="orientation_percent" />
|
||||
</div>
|
||||
</div>
|
||||
<q-separator class="q-my-xs" />
|
||||
|
|
@ -839,7 +1043,7 @@ const putformData = () => {
|
|||
<q-input dense type="number" v-model="self_learning" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input dense type="number" v-model="text" />
|
||||
<q-input dense type="number" v-model="self_learning_percent" />
|
||||
</div>
|
||||
</div>
|
||||
<q-separator class="q-my-xs" />
|
||||
|
|
@ -849,7 +1053,7 @@ const putformData = () => {
|
|||
<q-input dense type="number" v-model="training_seminar" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input dense type="number" v-model="text" />
|
||||
<q-input dense type="number" v-model="training_seminar_percent" />
|
||||
</div>
|
||||
</div>
|
||||
<q-separator class="q-my-xs" />
|
||||
|
|
@ -861,7 +1065,7 @@ const putformData = () => {
|
|||
<q-input dense type="number" v-model="other_training" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input dense type="number" v-model="text" />
|
||||
<q-input dense type="number" v-model="other_training_percent" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <q-list dense>
|
||||
|
|
@ -969,13 +1173,36 @@ const putformData = () => {
|
|||
<div class="row q-gutter-md">
|
||||
<div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
|
||||
<div class="col">{{ score4 }}</div>
|
||||
<div class="col">ร้อยละ</div>
|
||||
<div class="col">{{ score5 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12 q-gutter-lg no-margin">
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
<!-- <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar> -->
|
||||
สรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
class="col-xs-12"
|
||||
dense
|
||||
v-model="develop_result"
|
||||
outlined
|
||||
:options="develop_result_option"
|
||||
option-label="name"
|
||||
option-value="value"
|
||||
label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
|
||||
map-options
|
||||
emit-value
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- <Footer /> -->
|
||||
<div class="row col-12 q-gutter-lg no-margin">
|
||||
|
|
@ -987,10 +1214,10 @@ const putformData = () => {
|
|||
<q-select
|
||||
class="col-xs-12 col-sm-8"
|
||||
dense
|
||||
v-model="Autherise"
|
||||
v-model="commander.name"
|
||||
outlined
|
||||
:options="option"
|
||||
label="ผู้บังคับบัญชา"
|
||||
disable
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker
|
||||
|
|
@ -1036,10 +1263,10 @@ const putformData = () => {
|
|||
<q-select
|
||||
class="col-xs-12 col-sm-8"
|
||||
dense
|
||||
v-model="Autherise"
|
||||
v-model="mentors[0].name"
|
||||
outlined
|
||||
:options="option"
|
||||
label="ผู้บังคับบัญชา"
|
||||
disable
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker
|
||||
|
|
@ -1085,10 +1312,10 @@ const putformData = () => {
|
|||
<q-select
|
||||
class="col-xs-12 col-sm-8"
|
||||
dense
|
||||
v-model="Autherise"
|
||||
v-model="mentors[1].name"
|
||||
outlined
|
||||
:options="option"
|
||||
label="ผู้บังคับบัญชา"
|
||||
disable
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker
|
||||
|
|
@ -1135,17 +1362,15 @@ const putformData = () => {
|
|||
|
||||
<div class="row col-12 q-gutter-lg no-margin">
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 text-top2 row items-center">
|
||||
คณะกรรมการ
|
||||
</div>
|
||||
<div class="col-12 text-top2 row items-center">คณะกรรมการ</div>
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-8"
|
||||
dense
|
||||
v-model="Autherise"
|
||||
v-model="chairman.name"
|
||||
outlined
|
||||
:options="option"
|
||||
label="คณะกรรมการ"
|
||||
disable
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker
|
||||
|
|
@ -1192,7 +1417,7 @@ const putformData = () => {
|
|||
|
||||
<q-toolbar class="text-primary">
|
||||
<q-space />
|
||||
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
|
||||
<q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,107 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const myForm = ref<QForm>();
|
||||
const edit = ref<boolean>(false);
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, notifyError } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
notifyError,
|
||||
messageError,
|
||||
success,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const assignId = ref<string>(route.params.form.toString());
|
||||
|
||||
const assign = ref<any>([]);
|
||||
const mentors = ref<any>([]);
|
||||
const commander = ref<any>([]);
|
||||
const status = ref<boolean>(true);
|
||||
const evaluate = ref<any>([]);
|
||||
|
||||
onMounted(() => {
|
||||
fecthAssign(assignId.value);
|
||||
fecthResult(assignId.value);
|
||||
});
|
||||
const fecthAssign = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.evaluateReportcreate(id))
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
assign.value = res.data.data.assign;
|
||||
mentors.value = res.data.data.mentors;
|
||||
date_start.value = assign.value.date_start;
|
||||
date_finish.value = assign.value.date_finish;
|
||||
|
||||
director_id.value = res.data.data.commander.name;
|
||||
director_id2.value = mentors.value[0].name;
|
||||
director_id3.value = mentors.value[1].name;
|
||||
|
||||
commander.value.push(res.data.data.commander);
|
||||
optionDirector.value = mentors.value;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const date_start = ref<Date>(new Date());
|
||||
const date_finish = ref<Date>();
|
||||
const develop = ref<number>();
|
||||
const result = ref<number>();
|
||||
const reson = ref<string>("");
|
||||
const chairman_dated = ref<string>("");
|
||||
const director1_dated = ref<any>("");
|
||||
const director2_dated = ref<any>("");
|
||||
const fecthResult = async (id: string) => {
|
||||
await http
|
||||
.get(config.API.evaluateReport(id))
|
||||
.then((res: any) => {
|
||||
let data = res.data.data.evaluate;
|
||||
console.log(data);
|
||||
date_start.value = data.date_start;
|
||||
date_finish.value = data.date_finish;
|
||||
develop.value = Number(data.develop_complete);
|
||||
result.value = Number(data.pass_result);
|
||||
reson.value = data.reson;
|
||||
chairman_dated.value = data.chairman_dated;
|
||||
director1_dated.value = data.director1_dated;
|
||||
director2_dated.value = data.director2_dated;
|
||||
status.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
|
||||
// part new
|
||||
const date_start = ref<Date>(new Date("10-10-2023"));
|
||||
const date_finish = ref<Date>();
|
||||
const reson = ref<string>("");
|
||||
|
||||
const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
|
||||
const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
|
||||
const options = [
|
||||
{ value: 1, label: "พัฒนาครบ 3 ส่วน" },
|
||||
{ value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
|
||||
];
|
||||
const optionsResult = [
|
||||
{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
|
||||
{ value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
|
||||
];
|
||||
|
||||
const director_id = ref<any>(null);
|
||||
const director_dated = ref<any>();
|
||||
|
||||
const director_id2 = ref<any>(null);
|
||||
const director_dated2 = ref<any>();
|
||||
const director_id3 = ref<any>(null);
|
||||
const director_dated3 = ref<any>();
|
||||
const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
|
||||
const optionDirector = ref<any>([]);
|
||||
|
||||
const savaForm = async () => {
|
||||
await myForm.value!.validate().then((result: boolean) => {
|
||||
|
|
@ -41,40 +117,56 @@ const savaForm = async () => {
|
|||
})
|
||||
.onOk(async () => {
|
||||
postData();
|
||||
|
||||
})
|
||||
.onCancel(() => { })
|
||||
.onDismiss(() => { });
|
||||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const postData = async () => {
|
||||
const data = await {
|
||||
date_start: date_start.value,
|
||||
start_date: date_start.value,
|
||||
date_finish: date_finish.value,
|
||||
director_id: director_id.value,
|
||||
director_dated: director_dated.value,
|
||||
director_id2: director_id2.value,
|
||||
director_dated2: director_dated2.value,
|
||||
director_id3: director_id3.value,
|
||||
director_dated3: director_dated3.value,
|
||||
}
|
||||
develop_complete: develop.value,
|
||||
pass_result: result.value,
|
||||
reson: reson.value,
|
||||
chairman_dated: chairman_dated.value,
|
||||
director1_dated: director1_dated.value,
|
||||
director2_dated: director2_dated.value,
|
||||
};
|
||||
|
||||
console.log("postData===>", data)
|
||||
console.log("postData===>", data);
|
||||
await http
|
||||
.post(config.API.createformReport(assignId.value), data)
|
||||
.then(() => {
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
})
|
||||
.catch((e: any) => {
|
||||
console.log(e);
|
||||
messageError($q, e);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12 q-mr-md">
|
||||
<q-form ref="myForm">
|
||||
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div>แบบรายงานการประเมินฯ</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
|
||||
:enableTimePicker="false" week-start="0">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date_start"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
|
|
@ -82,12 +174,22 @@ const postData = async () => {
|
|||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
|
||||
" :label="`${'ระหว่างวันที่'}`" :rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่'}`,
|
||||
]">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
date_start != null ? date2Thai(date_start) : null
|
||||
"
|
||||
:label="`${'ระหว่างวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -95,8 +197,15 @@ const postData = async () => {
|
|||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
|
||||
:enableTimePicker="false" week-start="0">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date_finish"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
|
|
@ -104,12 +213,22 @@ const postData = async () => {
|
|||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
|
||||
" :label="`${'ถึงวันที่'}`" :rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่'}`,
|
||||
]">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
date_finish != null ? date2Thai(date_finish) : null
|
||||
"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -121,24 +240,63 @@ const postData = async () => {
|
|||
|
||||
<div class="col-12 row q-mt-xs">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-select :rules="[(val) => !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
|
||||
:options="options" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined v-model="develop"
|
||||
label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
|
||||
<q-select
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
|
||||
]"
|
||||
hide-bottom-space
|
||||
:options="options"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
borderless
|
||||
emit-value
|
||||
map-options
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
v-model="develop"
|
||||
label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row q-mt-lg">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-select :rules="[(val) => !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
|
||||
:options="optionsResult" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined
|
||||
v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
|
||||
|
||||
<q-select
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
|
||||
]"
|
||||
hide-bottom-space
|
||||
:options="optionsResult"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
borderless
|
||||
emit-value
|
||||
map-options
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
outlined
|
||||
v-model="result"
|
||||
label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-mt-lg">
|
||||
<div class="col-12">
|
||||
<q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
|
||||
v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
:readonly="edit"
|
||||
dense
|
||||
borderless
|
||||
:outlined="!edit"
|
||||
class="bg-white"
|
||||
type="textarea"
|
||||
v-model="reson"
|
||||
label="เหตุผล"
|
||||
:rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -152,11 +310,26 @@ const postData = async () => {
|
|||
ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
|
||||
label="" />
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-8"
|
||||
dense
|
||||
v-model="director_id"
|
||||
outlined
|
||||
:options="commander"
|
||||
label=""
|
||||
option-label="name"
|
||||
disable
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
|
||||
:enableTimePicker="false" week-start="0">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="chairman_dated"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
|
|
@ -164,10 +337,22 @@ const postData = async () => {
|
|||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated != null ? date2Thai(director_dated) : null
|
||||
" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker col-3"
|
||||
:model-value="
|
||||
chairman_dated != null ? date2Thai(chairman_dated) : null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -182,11 +367,25 @@ const postData = async () => {
|
|||
ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
|
||||
label="" />
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-8"
|
||||
dense
|
||||
v-model="director_id2"
|
||||
outlined
|
||||
:options="optionDirector"
|
||||
label=""
|
||||
option-label="name"
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
|
||||
:enableTimePicker="false" week-start="0">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="director1_dated"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
|
|
@ -194,10 +393,24 @@ const postData = async () => {
|
|||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : null
|
||||
" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker col-3"
|
||||
:model-value="
|
||||
director1_dated != null
|
||||
? date2Thai(director1_dated)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -212,11 +425,25 @@ const postData = async () => {
|
|||
ผู้มีอำนาจสั่งบรรจุตามมาตรา 52
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
|
||||
label="" />
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-8"
|
||||
dense
|
||||
v-model="director_id3"
|
||||
outlined
|
||||
:options="optionDirector"
|
||||
label=""
|
||||
option-label="name"
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
|
||||
:enableTimePicker="false" week-start="0">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="director2_dated"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
|
|
@ -224,10 +451,24 @@ const postData = async () => {
|
|||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : null
|
||||
" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="full-width datepicker col-3"
|
||||
:model-value="
|
||||
director2_dated != null
|
||||
? date2Thai(director2_dated)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -240,7 +481,12 @@ const postData = async () => {
|
|||
|
||||
<q-toolbar class="text-primary">
|
||||
<q-space />
|
||||
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
|
||||
<q-btn
|
||||
label="บันทึก"
|
||||
color="secondary"
|
||||
@click="savaForm"
|
||||
v-if="status"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</q-form>
|
||||
</div>
|
||||
|
|
@ -266,4 +512,4 @@ const postData = async () => {
|
|||
.q-card {
|
||||
box-shadow: 0px 0px 0px 0px !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,127 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, defineAsyncComponent } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useProbationDataStore } from "@/modules/05_placement/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { formatDate } from "@fullcalendar/core";
|
||||
// import { formatDate } from "@fullcalendar/core";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const probationStore = useProbationDataStore();
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
notifyError,
|
||||
dateToISO,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const { ratingColors } = probationStore;
|
||||
const assignId = ref<string>(route.params.form.toString());
|
||||
|
||||
const person = ref<any>([]);
|
||||
const assign = ref<any>([]);
|
||||
const evaluate_no = ref<string>("");
|
||||
const start_date = ref<Date>(new Date());
|
||||
const date_finish = ref<Date>(new Date());
|
||||
const status = ref<boolean>(true);
|
||||
const round = ref<any>();
|
||||
|
||||
const props = defineProps({
|
||||
tab: String,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
console.log(props.tab);
|
||||
await fecthFormdata(assignId.value);
|
||||
if (props.tab !== undefined) {
|
||||
round.value = props.tab.charAt(4);
|
||||
await fecthFormRound(assignId.value, round.value);
|
||||
}
|
||||
});
|
||||
const fecthFormdata = async (id: string) => {
|
||||
await http
|
||||
.get(config.API.formevaluateRecord(id))
|
||||
.then((res: any) => {
|
||||
// console.log(res);
|
||||
evaluate_no.value = res.data.data.evaluate_no;
|
||||
start_date.value = res.data.data.start_date;
|
||||
date_finish.value = res.data.data.end_date;
|
||||
|
||||
person.value = res.data.data.person;
|
||||
assign.value = res.data.data.assign;
|
||||
option.value.push(res.data.data.director);
|
||||
Autherise.value = res.data.data.director.name;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
const fecthFormRound = async (id: string, no: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.formevaluateround(id, no))
|
||||
.then((res: any) => {
|
||||
console.log(res);
|
||||
let data = res.data.data.evaluate;
|
||||
start_date.value = data.date_start;
|
||||
date_finish.value = data.date_finish;
|
||||
knowledge_level.value = data.knowledge_level;
|
||||
skill_level.value = data.skill_level;
|
||||
competency_level.value = data.competency_level;
|
||||
learn_level.value = data.learn_level;
|
||||
apply_level.value = data.apply_level;
|
||||
achievement_other.value.text = data.achievement_other_desc;
|
||||
achievement_other.value.level = data.achievement_other_level;
|
||||
achievement_strength_desc.value = data.achievement_strength_desc;
|
||||
achievement_improve_desc.value = data.achievement_improve_desc;
|
||||
conduct_level.value[0] = data.conduct1_level;
|
||||
conduct_level.value[1] = data.conduct2_level;
|
||||
conduct_level.value[2] = data.conduct3_level;
|
||||
conduct_level.value[3] = data.conduct4_level;
|
||||
moral_level.value[0] = data.moral1_level;
|
||||
moral_level.value[1] = data.moral2_level;
|
||||
moral_level.value[2] = data.moral3_level;
|
||||
discipline_level.value[0] = data.discipline1_level;
|
||||
discipline_level.value[1] = data.discipline2_level;
|
||||
discipline_level.value[2] = data.discipline3_level;
|
||||
discipline_level.value[3] = data.discipline4_level;
|
||||
discipline_level.value[4] = data.discipline5_level;
|
||||
behavio_orther.value.text = data.behavior_other_desc;
|
||||
behavio_orther.value.level = data.behavior_other_level;
|
||||
behavior_strength_desc.value = data.behavior_strength_desc;
|
||||
behavior_improve_desc.value = data.behavior_improve_desc;
|
||||
orientation.value = data.orientation.toString();
|
||||
self_learning.value = data.self_learning.toString();
|
||||
training_seminar.value = data.training_seminar.toString();
|
||||
other_training.value = data.other_training.toString();
|
||||
if (
|
||||
data.achievement_other_desc !== "" &&
|
||||
data.achievement_other_level !== null
|
||||
) {
|
||||
etc.value = true;
|
||||
}
|
||||
if (
|
||||
data.behavior_other_desc !== "" &&
|
||||
data.behavior_other_level !== null
|
||||
) {
|
||||
etc2.value = true;
|
||||
}
|
||||
status.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const list1_1 = [
|
||||
{ id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
|
||||
|
|
@ -69,10 +182,8 @@ const list2_3 = [
|
|||
label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
|
||||
},
|
||||
];
|
||||
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
|
||||
const option = ref<any>([]);
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, success, notifyError } = mixin;
|
||||
const dateToday = ref<Date>(new Date("10-10-2023"));
|
||||
const dateEnd = ref<Date>(new Date("12-10-2023"));
|
||||
const period = ref<number>(1);
|
||||
|
|
@ -112,10 +223,10 @@ const etc2 = ref<any>(false); // checkBox 2.4
|
|||
const behavio_orther = ref<any>({ text: "", level: 0 });
|
||||
// const etc_text2 = ref<string>("");
|
||||
// const ext_value2 = ref<number>(0);
|
||||
const behavio_strength_desc = ref<string>("");
|
||||
const behavior_strength_desc = ref<string>("");
|
||||
const behavior_improve_desc = ref<string>("");
|
||||
// part 3
|
||||
const orientation = ref<nu>(null);
|
||||
const orientation = ref<any>(null);
|
||||
const self_learning = ref<any>(null);
|
||||
const training_seminar = ref<any>(null);
|
||||
const other_training = ref<any>(null);
|
||||
|
|
@ -166,13 +277,13 @@ const savaForm = () => {
|
|||
competency_level.value === 0 ||
|
||||
learn_level.value === 0 ||
|
||||
apply_level.value === 0 ||
|
||||
success_level.value === 0 ||
|
||||
// success_level.value === 0 ||
|
||||
achievement_strength_desc.value === "" ||
|
||||
achievement_improve_desc.value === "" ||
|
||||
conduct_level.value.length < 4 ||
|
||||
moral_level.value.length < 3 ||
|
||||
discipline_level.value.length < 5 ||
|
||||
behavio_strength_desc.value === "" ||
|
||||
behavior_strength_desc.value === "" ||
|
||||
behavior_improve_desc.value === "" ||
|
||||
orientation.value === null ||
|
||||
self_learning.value === null ||
|
||||
|
|
@ -200,6 +311,9 @@ const savaForm = () => {
|
|||
};
|
||||
const putformData = () => {
|
||||
const data = {
|
||||
evaluate_no: evaluate_no.value,
|
||||
start_date: start_date.value,
|
||||
date_finish: date_finish.value,
|
||||
evaluate_expenct_level: evaluate_expenct_level.value,
|
||||
evaluate_ouptut: evaluate_ouptut.value,
|
||||
knowledge_level: knowledge_level.value,
|
||||
|
|
@ -207,7 +321,7 @@ const putformData = () => {
|
|||
competency_level: competency_level.value,
|
||||
learn_level: learn_level.value,
|
||||
apply_level: apply_level.value,
|
||||
success_level: success_level.value,
|
||||
// success_level: success_level.value,
|
||||
achievement_other: achievement_other.value,
|
||||
// achievement_other_desc: etc_text.value,
|
||||
// achievement_other_level: ext_value.value,
|
||||
|
|
@ -228,13 +342,13 @@ const putformData = () => {
|
|||
// behavio_orther_desc: etc_text2.value,
|
||||
// behavio_orther_level: ext_value2.value,
|
||||
behavio_orther: behavio_orther.value,
|
||||
behavio_strength_desc: behavio_strength_desc.value,
|
||||
behavior_strength_desc: behavior_strength_desc.value,
|
||||
behavior_improve_desc: behavior_improve_desc.value,
|
||||
orientation: Number(orientation.value),
|
||||
self_learning: Number(self_learning.value),
|
||||
training_seminar: Number(training_seminar.value),
|
||||
other_training: Number(other_training.value),
|
||||
|
||||
assessor_dated: dateToISO(dateAutherise.value),
|
||||
// commander_dated: dateAutherise.value,
|
||||
};
|
||||
$q.dialog({
|
||||
|
|
@ -248,29 +362,48 @@ const putformData = () => {
|
|||
})
|
||||
.onOk(async () => {
|
||||
console.log("บันทึกข้อมูล", data);
|
||||
saveformdata(data);
|
||||
})
|
||||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
};
|
||||
const saveformdata = async (data: any) => {
|
||||
await http
|
||||
.post(config.API.createformevaluate(assignId.value), data)
|
||||
.then((res: any) => {
|
||||
console.log(res);
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12 q-gutter-lg no-margin">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div>แบบบันทึกผล</div>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||||
วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
|
||||
<span class="text-black q-px-sm">{{
|
||||
date2Thai(assign.date_start)
|
||||
}}</span>
|
||||
ถึงวันที
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
|
||||
<span class="text-black q-px-sm">{{
|
||||
date2Thai(assign.date_finish)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||||
<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
|
||||
<span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
|
||||
ระหว่างวันที่
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
|
||||
<span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
|
||||
ถึงวันที่
|
||||
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
|
||||
<span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md">
|
||||
<q-separator size="3px" color="grey-2" />
|
||||
|
|
@ -590,7 +723,7 @@ const putformData = () => {
|
|||
</q-list>
|
||||
</q-card>
|
||||
|
||||
<q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
|
||||
<!-- <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
|
||||
<q-list dense>
|
||||
<q-item dense tag="label" v-ripple>
|
||||
<q-item-section>
|
||||
|
|
@ -627,7 +760,7 @@ const putformData = () => {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
|
||||
<q-list dense>
|
||||
|
|
@ -635,7 +768,7 @@ const putformData = () => {
|
|||
<q-item-section>
|
||||
<q-item-label>
|
||||
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||||
1.8 อื่นๆ
|
||||
1.7 อื่นๆ
|
||||
<q-checkbox
|
||||
class="q-ml-sm"
|
||||
dense
|
||||
|
|
@ -965,7 +1098,7 @@ const putformData = () => {
|
|||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="behavio_strength_desc"
|
||||
v-model="behavior_strength_desc"
|
||||
class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
|
||||
lazy-rules
|
||||
type="textarea"
|
||||
|
|
@ -1129,6 +1262,8 @@ const putformData = () => {
|
|||
outlined
|
||||
:options="option"
|
||||
label="ผู้บังคับบัญชา"
|
||||
option-label="name"
|
||||
disable
|
||||
/>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<datepicker
|
||||
|
|
@ -1174,7 +1309,7 @@ const putformData = () => {
|
|||
</div>
|
||||
<q-toolbar class="text-primary">
|
||||
<q-space />
|
||||
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
|
||||
<q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,23 +1,43 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
const tabHead = ref<string>("save1");
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const tabHead = ref<string>("save1");
|
||||
const props = defineProps({
|
||||
changeTab: {
|
||||
type: Function,
|
||||
default() {
|
||||
return 'Default function'
|
||||
}
|
||||
}
|
||||
})
|
||||
return "Default function";
|
||||
},
|
||||
},
|
||||
activeTab: String,
|
||||
});
|
||||
onMounted(() => {
|
||||
console.log(props);
|
||||
});
|
||||
|
||||
watch(tabHead, () => {
|
||||
props.changeTab(tabHead.value)
|
||||
console.log(props);
|
||||
|
||||
props.changeTab(tabHead.value);
|
||||
});
|
||||
const nextPage = () => {
|
||||
if (props.activeTab) {
|
||||
router.push(
|
||||
"/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885"
|
||||
);
|
||||
}
|
||||
|
||||
// const url =
|
||||
// "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885";
|
||||
// window.open(url, "_blank");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-header class="bg-grey-1">
|
||||
<q-header class="bg-grey-1">
|
||||
<div class="bg-grey-1">
|
||||
<div class="col-12 row q-gutter-x-md items-center">
|
||||
<q-tabs
|
||||
|
|
@ -103,7 +123,7 @@ watch(tabHead, () => {
|
|||
</q-btn> -->
|
||||
</q-tabs>
|
||||
<div>
|
||||
<q-btn color="blue" flat dense icon="mdi-plus">
|
||||
<q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
|
||||
<q-tooltip> เพิ่ม </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
|
@ -111,5 +131,4 @@ watch(tabHead, () => {
|
|||
<q-separator />
|
||||
</div>
|
||||
</q-header>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,152 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, defineAsyncComponent } from "vue";
|
||||
import { ref, defineAsyncComponent, watch, onMounted } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, success } = mixin;
|
||||
const assignId = ref<string>(route.params.form.toString());
|
||||
|
||||
const evaluate = ref<any>([]);
|
||||
const tabHead = ref<string>("save1");
|
||||
const tabs = ref<any>([]);
|
||||
const tab = ref<string>("save1");
|
||||
const activeTab = ref<string>("tab2");
|
||||
|
||||
const props = defineProps({
|
||||
activeTab: String,
|
||||
});
|
||||
onMounted(() => {
|
||||
console.log(props.activeTab);
|
||||
// fecthAssign(assignId.value);
|
||||
});
|
||||
watch(props, () => {
|
||||
console.log(props);
|
||||
});
|
||||
// const fecthAssign = async (id: string) => {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.formevaluate(id))
|
||||
// .then((res: any) => {
|
||||
// evaluate.value = res.data.data.evaluate;
|
||||
// tabs.value = evaluate.value;
|
||||
|
||||
// console.log(tabs.value);
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// console.log(e);
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
// };
|
||||
|
||||
const changeTab = (tabVal: string) => {
|
||||
tab.value = tabVal
|
||||
}
|
||||
console.log(tabVal);
|
||||
tab.value = tabVal;
|
||||
};
|
||||
const nextPage = () => {
|
||||
const newTabLabel = tabs.value.length + 1;
|
||||
tabs.value.push({ no: newTabLabel });
|
||||
};
|
||||
|
||||
const Header = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
|
||||
() =>
|
||||
import(
|
||||
"@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
|
||||
)
|
||||
);
|
||||
const FormSaveResult = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
|
||||
)
|
||||
</script>
|
||||
() =>
|
||||
import(
|
||||
"@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :change-tab="changeTab" />
|
||||
<Header :change-tab="changeTab" :activeTab="activeTab" />
|
||||
<!-- <q-header class="bg-grey-1">
|
||||
<div class="bg-grey-1">
|
||||
<div class="col-12 row q-gutter-xs-md items-center">
|
||||
<q-tabs
|
||||
dense
|
||||
v-model="tabHead"
|
||||
active-class="text-primary text-weight-medium"
|
||||
indicator-color="grey-1"
|
||||
class="text-grey-7"
|
||||
>
|
||||
<q-tab
|
||||
v-for="tabData in tabs"
|
||||
:key="tabData.no"
|
||||
:name="tabData.no"
|
||||
:label="'ครั้งที่' + tabData.no"
|
||||
@click="changeTab('save' + tabData.no)"
|
||||
>
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-download"
|
||||
:disable="tabHead !== tabData.no"
|
||||
:color="tabHead !== tabData.no ? 'grey' : 'add'"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section avatar
|
||||
><q-icon color="red" name="mdi-file-pdf"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section avatar
|
||||
><q-icon color="blue" name="mdi-file-word"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .docx</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
<div>
|
||||
<q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
|
||||
<q-tooltip> เพิ่ม </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
</div>
|
||||
</q-header> -->
|
||||
<!-- <q-page-container>
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel
|
||||
v-for="tabName in tabs"
|
||||
:key="tabName"
|
||||
:name="'save' + tabName.no"
|
||||
>
|
||||
<FormSaveResult :tab="tab" />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-page-container> -->
|
||||
|
||||
<q-page-container>
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel name="save1">
|
||||
<FormSaveResult />
|
||||
<FormSaveResult :tab="tab" />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="save2">
|
||||
<FormSaveResult />
|
||||
<FormSaveResult :tab="tab" />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-page-container>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ const FormEvaluate = defineAsyncComponent(
|
|||
<q-page-container>
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel name="save1">
|
||||
<FormEvaluate />
|
||||
<FormEvaluate :tab="tab" />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="save2">
|
||||
<FormEvaluate />
|
||||
<FormEvaluate :tab="tab"/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-page-container>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,21 @@
|
|||
import { ref, defineAsyncComponent } from "vue";
|
||||
const tab = ref<string>("save1");
|
||||
const changeTab = (tabVal: string) => {
|
||||
tab.value = tabVal
|
||||
}
|
||||
tab.value = tabVal;
|
||||
};
|
||||
const Header = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
|
||||
() =>
|
||||
import(
|
||||
"@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
|
||||
)
|
||||
);
|
||||
const FormEvaluateScore = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue")
|
||||
)
|
||||
</script>
|
||||
() =>
|
||||
import(
|
||||
"@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue"
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :change-tab="changeTab" />
|
||||
|
|
@ -18,12 +24,12 @@ const FormEvaluateScore = defineAsyncComponent(
|
|||
<q-page-container>
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel name="save1">
|
||||
<FormEvaluateScore />
|
||||
<FormEvaluateScore :tab="tab" />
|
||||
</q-tab-panel>
|
||||
|
||||
<!-- <q-tab-panel name="save2">
|
||||
<FormEvaluateScore />
|
||||
</q-tab-panel> -->
|
||||
<q-tab-panel name="save2">
|
||||
<FormEvaluateScore :tab="tab" />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-page-container>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const activeTab = ref<string>("tab1");
|
|||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="tab2">
|
||||
<TabsTemplate1 />
|
||||
<TabsTemplate1 :activeTab="activeTab"/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="tab3">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue