API คนครอง

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-02-08 18:06:14 +07:00
parent 21e1249d4c
commit b853b4e7d6
3 changed files with 167 additions and 136 deletions

View file

@ -37,6 +37,6 @@ export default {
/**ครองตำแหน่ง */ /**ครองตำแหน่ง */
orgSearchProfile: `${orgProfile}/search`, orgSearchProfile: `${orgProfile}/search`,
orgProfile: `${orgProfile}`, orgProfile: `${orgPos}/profile`,
orgDeleteProfile: (id: string) => `${orgProfile}/delete/${id}`, orgDeleteProfile: (id: string) => `${orgPos}/profile/delete/${id}`,
}; };

View file

@ -10,7 +10,10 @@ import { useCounterMixin } from "@/stores/mixin";
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational"; import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import type { Position } from "@/modules/02_organizationalNew/interface/index/organizational"; import type { Position } from "@/modules/02_organizationalNew/interface/index/organizational";
import type { DataOption } from "@/modules/02_organizationalNew/interface/index/Main"; import type {
DataOption,
NewPagination,
} from "@/modules/02_organizationalNew/interface/index/Main";
import type { import type {
OptionType, OptionType,
OptionExecutive, OptionExecutive,
@ -41,13 +44,19 @@ const levelOpsMain = ref<DataOption[]>([]);
const typeOps = ref<DataOption[]>([]); const typeOps = ref<DataOption[]>([]);
const levelOps = ref<DataOption[]>([]); const levelOps = ref<DataOption[]>([]);
const dataLevel = ref<any>(); const dataLevel = ref<any>();
const selected = ref<string[]>([]); const selected = ref<Position[]>([]);
const isSit = ref<boolean>(false); const isSit = ref<boolean>(false);
const executiveOps = ref<DataOption[]>([]); const executiveOps = ref<DataOption[]>([]);
const store = useOrganizational(); const store = useOrganizational();
const $q = useQuasar(); const $q = useQuasar();
const { dialogConfirm, showLoader, success, hideLoader, messageError } = const {
useCounterMixin(); dialogConfirm,
showLoader,
success,
hideLoader,
messageError,
dialogMessageNotify,
} = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
// const modal = ref<boolean>(true); // const modal = ref<boolean>(true);
@ -58,6 +67,10 @@ const props = defineProps({
require: true, require: true,
}, },
dataDetailPos: { type: Object, require: true }, dataDetailPos: { type: Object, require: true },
fetchDataTable: {
type: Function,
required: true,
},
}); });
const row = ref<Position[]>([]); const row = ref<Position[]>([]);
const rowResult = ref<SeaechResult[]>([]); const rowResult = ref<SeaechResult[]>([]);
@ -319,20 +332,13 @@ function updateSelectType(val: string) {
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */ /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function validateForm() { function validateForm() {
// const hasError = []; if (selected.value.length === 0) {
// for (const key in objectRef) { dialogMessageNotify($q, "กรุณาเลือกรายการตำแหน่ง");
// if (Object.prototype.hasOwnProperty.call(objectRef, key)) { } else if (selectedProfile.value.length === 0) {
// const property = objectRef[key]; dialogMessageNotify($q, "กรุณาเลือกคนครอง");
// if (property.value && typeof property.value.validate === "function") { } else {
// const isValid = property.value.validate(); onSubmit();
// hasError.push(isValid); }
// }
// }
// }
// if (hasError.every((result) => result === true)) {
onSubmit();
// } else {
// }
} }
/** ฟังชั่น บันทึก */ /** ฟังชั่น บันทึก */
@ -340,26 +346,32 @@ function onSubmit() {
dialogConfirm( dialogConfirm(
$q, $q,
() => { () => {
console.log("ตำแหน่ง==>", selected.value); // console.log("==>", selected.value[0]?.id);
console.log("ทับที่==>", isSit); // console.log("==>", selectedProfile.value[0]?.id);
// showLoader(); // console.log("==>", isSit.value);
// http // console.log(props.dataDetailPos);
// .post(config.API.createOrganization, formData)
// .then((res) => { const body = {
// status.value = true; posMaster: props.dataDetailPos?.id, //*id
// store.typeOrganizational = "draft"; position: selected.value[0]?.id, //*id
// store.draftId = res.data.result.id; profileId: selectedProfile.value[0]?.id, //*id profile
// success($q, ""); isSit: isSit.value, //*
// // props.fetchActive?.(); };
// }) showLoader();
// .catch((err) => { http
// messageError($q, err); .post(config.API.orgProfile, body)
// }) .then(() => {
// .finally(async () => { props.fetchDataTable?.(store.treeId, store.level, false);
// modal.value = await false; success($q, "บันทึกข้อมูลสำเร็จ");
// await close(); })
// await hideLoader(); .catch((err) => {
// }); messageError($q, err);
})
.finally(async () => {
modal.value = await false;
close();
hideLoader();
});
}, },
"ยืนยันการเลือกคนครอง", "ยืนยันการเลือกคนครอง",
"ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?" "ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?"
@ -368,7 +380,9 @@ function onSubmit() {
/** เมื่อ enter ให้ทำการ ค้นหาข้อมูล */ /** เมื่อ enter ให้ทำการ ค้นหาข้อมูล */
const page = ref<number>(1); const page = ref<number>(1);
const pageSize = ref<number>(20); const pageSize = ref<number>(10);
const totalPage = ref<number>(0);
const selectedProfile = ref<SeaechResult[]>([]);
async function searchData() { async function searchData() {
showLoader(); showLoader();
console.log(formData); console.log(formData);
@ -384,6 +398,7 @@ async function searchData() {
.post(config.API.orgSearchProfile, reqBody) .post(config.API.orgSearchProfile, reqBody)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
totalPage.value = Math.ceil(res.data.result.total / pageSize.value);
const list = res.data.result.data.map((e: any) => ({ const list = res.data.result.data.map((e: any) => ({
id: e.id, id: e.id,
citizenId: e.citizenId, citizenId: e.citizenId,
@ -402,25 +417,6 @@ async function searchData() {
hideLoader(); hideLoader();
}); });
// const data = [
// {
// id: "test1",
// citizenId: "test1",
// name: "test1",
// posTypeName: "test1",
// positionName: "test1",
// posLevelName: "test1",
// },
// {
// id: "test2",
// citizenId: "test2",
// name: "test2",
// posTypeName: "test2",
// positionName: "test2",
// posLevelName: "test2",
// },
// ];
// rowResult.value = data; // rowResult.value = data;
// props.fetchListDisciplinary?.(); // props.fetchListDisciplinary?.();
} }
@ -429,6 +425,15 @@ function clearPosition() {
formData.positionType = ""; formData.positionType = "";
formData.positionLevel = ""; formData.positionLevel = "";
} }
watch([() => page.value, () => pageSize.value], () => {
searchData();
});
function updatePagination(newPagination: NewPagination) {
pageSize.value = newPagination.rowsPerPage;
page.value = 1;
}
</script> </script>
<template> <template>
@ -461,70 +466,66 @@ function clearPosition() {
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="row q-col-gutter-sm q-pa-sm"> <div class="q-pa-sm col-12">
<div class="col-12"> <d-table
<d-table flat
flat :columns="columns"
:columns="columns" :rows="row"
:rows="row" row-key="id"
row-key="id" dense
dense hide-pagination
hide-pagination class="custom-header-table"
class="custom-header-table" selection="single"
selection="single" v-model:selected="selected"
v-model:selected="selected" >
> <template v-slot:header-selection="scope">
<template v-slot:header-selection="scope"> <q-checkbox
<q-checkbox keep-color
keep-color color="primary"
color="primary" dense
dense v-model="scope.checkBox"
v-model="scope.checkBox" />
/> </template>
</template> <template v-slot:header="props">
<template v-slot:header="props"> <q-tr :props="props">
<q-tr :props="props"> <q-th class="text-center"> </q-th>
<q-th class="text-center"> </q-th>
<q-th <q-th
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :props="props"
> >
<span class="text-weight-medium">{{ <span class="text-weight-medium">{{ col.label }}</span>
col.label </q-th>
}}</span> </q-tr>
</q-th> </template>
</q-tr> <template v-slot:body="props">
</template> <q-tr :props="props" class="cursor-pointer">
<template v-slot:body="props"> <q-td class="text-center">
<q-tr :props="props" class="cursor-pointer"> <q-checkbox
<td class="text-center"> keep-color
<q-checkbox color="primary"
keep-color dense
color="primary" v-model="props.selected"
dense />
v-model="props.selected" </q-td>
/>
</td>
<q-td <q-td
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :props="props"
> >
<div v-if="col.name == 'no'"> <div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</div> </div>
<div v-else> <div v-else>
{{ col.value }} {{ col.value }}
</div> </div>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
</d-table> </d-table>
</div>
</div> </div>
</q-card> </q-card>
@ -653,16 +654,22 @@ function clearPosition() {
/> />
<div class="col-12"> <div class="col-12">
<d-table <d-table
ref="table"
flat flat
:columns="columnsResult" :columns="columnsResult"
:rows="rowResult" :rows="rowResult"
row-key="id" row-key="id"
dense dense
hide-pagination
class="custom-header-table" class="custom-header-table"
:paging="true"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
selection="single"
v-model:selected="selectedProfile"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th auto-width />
<q-th <q-th
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
@ -676,6 +683,14 @@ function clearPosition() {
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td <q-td
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
@ -691,6 +706,17 @@ function clearPosition() {
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
<template v-slot:pagination="scope">
<q-pagination
v-model="page"
active-color="primary"
color="dark"
:max="totalPage"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table> </d-table>
</div> </div>
</div> </div>

View file

@ -322,23 +322,27 @@ function openSelectPerson(data: DataPosition[]) {
} }
/** ลบคนครอง */ /** ลบคนครอง */
function removePerson(data: DataPosition[]) { function removePerson(id: string) {
dialogRemove( dialogRemove(
$q, $q,
async () => { async () => {
showLoader(); showLoader();
// await http await http
// .delete(config.API.orgPosMasterById(id)) .post(config.API.orgDeleteProfile(id))
// .then(() => { .then(() => {
// success($q, ""); success($q, "ลบข้อมูลสำเร็จ");
// props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false); props.fetchDataTable?.(
// }) reqMaster.value.id,
// .catch((err) => { reqMaster.value.type,
// messageError($q, err); false
// }) );
// .finally(() => { })
hideLoader(); .catch((err) => {
// }); messageError($q, err);
})
.finally(() => {
hideLoader();
});
}, },
"ยืนยันการลบคนครอง", "ยืนยันการลบคนครอง",
"ต้องการยืนยันการลบคนครองนี้ใช่หรือไม่?" "ต้องการยืนยันการลบคนครองนี้ใช่หรือไม่?"
@ -520,7 +524,7 @@ function removePerson(data: DataPosition[]) {
" "
clickable clickable
v-close-popup v-close-popup
@click="removePerson(props.row)" @click="removePerson(props.row.id)"
> >
<q-item-section> <q-item-section>
<div class="row items-center"> <div class="row items-center">
@ -678,6 +682,7 @@ function removePerson(data: DataPosition[]) {
<DialogSelectPerson <DialogSelectPerson
v-model:modal="modalSelectPerson" v-model:modal="modalSelectPerson"
:dataDetailPos="dataDetailPos" :dataDetailPos="dataDetailPos"
:fetchDataTable="props.fetchDataTable"
/> />
</template> </template>