hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ui เครื่องราช จัดการคำขอ

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-09-22 15:14:06 +07:00
parent 9aa0708c48
commit 7aa623dfbd
2 changed files with 331 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

374
src/modules/07_insignia/components/2_Manage/Tab1.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, computed, reactive } from "vue"; import { onMounted, ref, computed, reactive } from "vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar, QForm } from "quasar";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import { useInsigniaDataStore } from "@/modules/07_insignia/store"; import { useInsigniaDataStore } from "@/modules/07_insignia/store";
import { useroleUserDataStore } from "@/stores/roleUser"; import { useroleUserDataStore } from "@/stores/roleUser";
@ -13,6 +13,7 @@ import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import btnDownloadFile from "./downloadFile.vue"; import btnDownloadFile from "./downloadFile.vue";
const myForm = ref<QForm>();
const router = useRouter(); const router = useRouter();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
@ -158,35 +159,48 @@ const columns2 = ref<QTableProps["columns"]>([
label: "ลำดับ", label: "ลำดับ",
field: "index", field: "index",
align: "left", align: "left",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
required: true,
label: "เลขประจำตัวประชาชน",
field: "citizenId",
align: "left",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
}, },
{ {
name: "fullname", name: "fullname",
required: true, required: true,
label: "ชื่อ-สกุล", label: "ชื่อ-นามสกุล",
field: "fullname", field: "fullname",
align: "left", align: "left",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
}, },
{ // {
name: "position", // name: "position",
required: true, // required: true,
label: "ตำแหน่งในสายงาน", // label: "ตำแหน่งในสายงาน",
field: "position", // field: "position",
align: "left", // align: "left",
}, // },
{ // {
name: "level", // name: "level",
required: true, // required: true,
label: "ระดับ", // label: "ระดับ",
field: "level", // field: "level",
align: "left", // align: "left",
}, // },
{ // {
name: "organizationOrganization", // name: "organizationOrganization",
required: true, // required: true,
label: "สังกัด", // label: "สังกัด",
field: "organizationOrganization", // field: "organizationOrganization",
align: "left", // align: "left",
}, // },
]); ]);
const rows2 = ref<any[]>([]); const rows2 = ref<any[]>([]);
@ -254,13 +268,12 @@ const changtypeOc = () => {
DataStore.typeOc = organization.value; DataStore.typeOc = organization.value;
}; };
// เพิ่มราชชื่อ // เพิ่มราชชื่อ
const clickmodalAdd = () => { const clickmodalAdd = async () => {
let ocId = DataStore.typeOc ? DataStore.typeOc : DataStore.agency; let ocId = DataStore.typeOc ? DataStore.typeOc : DataStore.agency;
showLoader(); showLoader();
fecthInsignia(); await fecthInsignia();
fecthlistperson(ocId); await fecthlistperson(ocId);
clearForm();
insigniaType.value = "";
}; };
// เรียกรายชื่อข้าราชการตามหน่วยงานที่จะเพิ่ม // เรียกรายชื่อข้าราชการตามหน่วยงานที่จะเพิ่ม
const fecthlistperson = async (id: string) => { const fecthlistperson = async (id: string) => {
@ -282,6 +295,7 @@ const fecthlistperson = async (id: string) => {
.then((res) => { .then((res) => {
let data = res.data.result.map((e: any) => ({ let data = res.data.result.map((e: any) => ({
id: e.id, id: e.id,
citizenId: e.citizenId,
fullname: e.fullname == null ? "-" : e.fullname, fullname: e.fullname == null ? "-" : e.fullname,
position: e.position == null ? "-" : e.position, position: e.position == null ? "-" : e.position,
level: e.positionEmployeeLevel == null ? "-" : e.positionEmployeeLevel, level: e.positionEmployeeLevel == null ? "-" : e.positionEmployeeLevel,
@ -298,17 +312,21 @@ const fecthlistperson = async (id: string) => {
}); });
}; };
// ยืนยันการเพิ่มราชชื่อ // ยืนยันการเพิ่มราชชื่อ
const clickAdd = async (id: string) => { const clickAdd = async () => {
if (insigniaType.value !== "") { dataPerson.id
dialogConfirm( ? await myForm.value!.validate().then((result: boolean) => {
$q, if (result) {
async () => { dialogConfirm(
await addlistperson(id); $q,
}, async () => {
"ยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ", await addlistperson(dataPerson.id);
"ต้องการยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ นี้หรือไม่?" },
); "ยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ",
} else dialogMessageNotify($q, "กรุณาเลือกประเภทเครื่องราชฯ"); "ต้องการยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ นี้หรือไม่?"
);
}
})
: dialogMessageNotify($q, "กรุณาเลือกราชชื่อที่ต้องการเพิ่ม");
}; };
//เพิ่มราชชื่อข้าราชการ //เพิ่มราชชื่อข้าราชการ
const addlistperson = async (id: string) => { const addlistperson = async (id: string) => {
@ -317,6 +335,7 @@ const addlistperson = async (id: string) => {
profileId: id, profileId: id,
insigniaId: insigniaType.value, insigniaId: insigniaType.value,
insigniaPeriodId: props.roundId, insigniaPeriodId: props.roundId,
reason: reason.value,
}; };
await http await http
.post(config.API.insigniaCreate(), data) .post(config.API.insigniaCreate(), data)
@ -497,6 +516,27 @@ const listdelete = async (id: string, reason: string) => {
await closemodelPopupDelete(); await closemodelPopupDelete();
}); });
}; };
const dataPerson = reactive({
id: "",
position: "",
organizationOrganization: "",
level: "",
});
const reason = ref<string>("");
const selectPerson = (person) => {
dataPerson.id = person.id;
dataPerson.position = person.position;
dataPerson.organizationOrganization = person.organizationOrganization;
dataPerson.level = person.level;
};
const clearForm = () => {
dataPerson.id = "";
dataPerson.position = "";
dataPerson.organizationOrganization = "";
dataPerson.level = "";
reason.value = "";
insigniaType.value = "";
};
const insignia = ref<string>(""); const insignia = ref<string>("");
const insigniaOptions = ref<any>([]); const insigniaOptions = ref<any>([]);
@ -531,7 +571,7 @@ const pagination = ref({
rowsPerPage: 10, rowsPerPage: 10,
}); });
const pagination2 = ref({ const pagination2 = ref({
sortBy: "name", sortBy: "fullname",
descending: false, descending: false,
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
@ -863,7 +903,7 @@ const closeModalEdit = () => {
<!-- add --> <!-- add -->
<q-dialog v-model="modalAdd"> <q-dialog v-model="modalAdd">
<q-card style="width: 850px; max-width: 80vw" class="q-pb-md"> <q-card style="width: 800px; max-width: 80vw">
<q-toolbar class="q-py-md"> <q-toolbar class="q-py-md">
<q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title> <q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
@ -877,101 +917,163 @@ const closeModalEdit = () => {
/> />
</q-toolbar> </q-toolbar>
<q-separator /> <q-separator />
<div class="q-pa-md"> <q-card-section class="q-pa-sm bg-grey-1">
<q-toolbar style="padding: 0"> <div class="row col-12 q-col-gutter-sm">
<q-select <div class="col-xs-12 col-sm-7">
v-model="insigniaType" <q-card flat bordered class="fit q-pa-sm">
label="ประเภทเครื่องราชฯ" <q-toolbar style="padding: 0">
dense <q-space />
emit-value <q-input
map-options borderless
:options="insigniaOptions" outlined
option-value="id" dense
option-label="name" debounce="300"
lazy-rules placeholder="ค้นหา"
hide-bottom-space v-model="filterKeyword2"
:readonly="false" >
:borderless="false" <template v-slot:append>
:outlined="true" <q-icon name="search" />
:hide-dropdown-icon="false" </template>
style="min-width: 250px" </q-input>
/> </q-toolbar>
<q-space /> <q-table
<q-input flat
borderless bordered
outlined dense
dense :rows="rows2"
debounce="300" :columns="columns2"
placeholder="ค้นหา" :filter="filterKeyword2"
v-model="filterKeyword2" row-key="fullname"
> class="custom-header-table"
<!-- style="width: 850px; max-width: auto"? --> :pagination-label="paginationLabel2"
<template v-slot:append> v-model:pagination="pagination2"
<q-icon name="search" /> >
</template> <template v-slot:header="props">
</q-input> <q-tr :props="props">
</q-toolbar> <q-th
<q-table v-for="col in props.cols"
flat :key="col.name"
bordered :props="props"
dense >
:rows="rows2" <span class="text-weight-medium">{{ col.label }}</span>
:columns="columns2" </q-th>
:filter="filterKeyword2" </q-tr>
row-key="name" </template>
class="custom-header-table" <template v-slot:body="props">
:pagination-label="paginationLabel2" <q-tr
v-model:pagination="pagination2" :props="props"
> class="cursor-pointer"
<template v-slot:header="props"> :class="{ 'text-primary': props.row.id === dataPerson.id }"
<q-tr :props="props"> @click="selectPerson(props.row)"
<q-th v-for="col in props.cols" :key="col.name" :props="props"> >
<span class="text-weight-medium">{{ col.label }}</span> <q-td style="width: 75px">{{ props.rowIndex + 1 }}</q-td>
</q-th> <q-td style="width: 250px" key="citizenId" :props="props">
<q-th auto-width /> {{ props.row.citizenId }}
</q-tr> </q-td>
</template> <q-td key="fullname" :props="props">
<template v-slot:body="props"> {{ props.row.fullname }}
<q-tr :props="props" class="cursor-pointer"> </q-td>
<q-td>{{ props.rowIndex + 1 }}</q-td> </q-tr>
<!-- <q-td key="order" :props="props"> </template>
{{ props.row.order }} <template v-slot:pagination="scope">
</q-td> --> <q-pagination
<q-td key="fullname" :props="props"> v-model="pagination2.page"
{{ props.row.fullname }} color="primary"
</q-td> :max="scope.pagesNumber"
<q-td key="position" :props="props"> :max-pages="5"
{{ props.row.position }} size="sm"
</q-td> boundary-links
<q-td key="level" :props="props">{{ props.row.level }}</q-td> direction-links
<q-td key="organizationOrganization" :props="props"> ></q-pagination>
{{ props.row.organizationOrganization }} </template>
</q-td> </q-table>
<q-td> </q-card>
<q-btn </div>
outline <div class="col-xs-12 col-sm-5">
:props="props" <q-card flat bordered class="fit q-pa-sm">
label="เพิ่ม" <q-form ref="myForm">
class="text-teal-5" <div class="q-pa-md">
@click="clickAdd(props.row.id)" <div class="row q-gutter-sm">
/> <div class="col-12">
<q-tooltip>เพิ่ม</q-tooltip> <q-input
</q-td> borderless
</q-tr> outlined
</template> dense
<template v-slot:pagination="scope"> label="ตำแหน่งในสายงาน"
<q-pagination placeholder="ตำแหน่งในสายงาน"
v-model="pagination2.page" v-model="dataPerson.position"
color="primary" readonly
:max="scope.pagesNumber" />
:max-pages="5" </div>
size="sm" <div class="col-12">
boundary-links <q-input
direction-links borderless
></q-pagination> outlined
</template> dense
</q-table> label="สังกัด"
</div> placeholder="สังกัด"
v-model="dataPerson.organizationOrganization"
readonly
/>
</div>
<div class="col-12">
<q-input
borderless
outlined
dense
label="ระดับ"
placeholder="ระดับ "
v-model="dataPerson.level"
readonly
/>
</div>
<div class="col-12">
<q-select
v-model="insigniaType"
label="ประเภทเครื่องราชฯ"
dense
emit-value
map-options
:options="insigniaOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
:rules="[
(val) => !!val || `กรุณาเลือกประเภทเครื่องราช`,
]"
/>
</div>
<div class="col-12">
<q-input
type="textarea"
class="full-width inputgreen cursor-pointer"
hide-bottom-space
outlined
dense
lazy-rules
:rules="[(val) => !!val || `กรุณากรอกหมายเหตุ`]"
v-model="reason"
:label="`หมายเหตุ`"
/>
</div>
</div>
</div>
</q-form>
</q-card>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn dense unelevated label="บันทึก" color="public" @click="clickAdd">
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>

95
src/modules/07_insignia/components/2_Manage/listManage.vue
View file

@ -206,7 +206,15 @@ const popupBackToEdit = async () => {
const closeModalPopupBackToEdit = async () => { const closeModalPopupBackToEdit = async () => {
modalPopupBackToEdit.value = false; modalPopupBackToEdit.value = false;
}; };
const modalbackInsignia2Role = ref<boolean>(false);
//แสดง popup ตีกลับ admin
const popupBackToInsignia2Role = async () => {
modalbackInsignia2Role.value = true;
};
//ปิด popup ตีกลับ admin
const closepopupBackToInsignia2Role = async () => {
modalbackInsignia2Role.value = false;
};
// ตีกลับรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st3 และ insignia2Role // ตีกลับรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
const backToEdit = async (reason: string) => { const backToEdit = async (reason: string) => {
dialogConfirm( dialogConfirm(
@ -241,7 +249,6 @@ const backToEdit = async (reason: string) => {
"ต้องการยืนยันการตีกลับใช่หรือไม่?" "ต้องการยืนยันการตีกลับใช่หรือไม่?"
); );
}; };
// อนุมัติรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st3 และ insignia2Role // อนุมัติรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
const directorApproved = async () => { const directorApproved = async () => {
dialogConfirm( dialogConfirm(
@ -271,6 +278,12 @@ const directorApproved = async () => {
"ต้องการยืนยันการอนุมัติใช่หรือไม่?" "ต้องการยืนยันการอนุมัติใช่หรือไม่?"
); );
}; };
// ตีกลับรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st5 และ adminRole
const backToEditinsignia2Role = async () => {
dialogConfirm($q, async () => {
console.log("รอ API");
});
};
// ล็อกข้อมูลรอบการเสนอขอ // ล็อกข้อมูลรอบการเสนอขอ
const requestSendNote = async () => { const requestSendNote = async () => {
var organization = await (DataStore.agency != null var organization = await (DataStore.agency != null
@ -300,6 +313,22 @@ const requestSendNote = async () => {
}); });
}); });
}; };
// อัปโหลดไฟล์
const fileUpload = ref<any>(null);
const uploadFile = async (event: any) => {
dialogConfirm($q, () => {
const selectedFile = event;
const formdata = new FormData();
formdata.append("file", selectedFile);
console.log("uploadFile :รอ API"),
"ยืนยันการอัปโหลดไฟล์",
"ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?";
});
};
// ดาวน์โหลดไฟล์
const downloadFile = async () => {
console.log("downloadFile : รอ API");
};
</script> </script>
<template> <template>
@ -443,6 +472,52 @@ const requestSendNote = async () => {
</q-tab-panels> </q-tab-panels>
<!-- :role-user="roleUser" --> <!-- :role-user="roleUser" -->
<q-toolbar class="q-py-md text-right"> <q-toolbar class="q-py-md text-right">
<q-file
v-if="roleDataStore.insignia1Role"
bg-color="white"
clearable
outlined
dense
v-model="fileUpload"
accept=".pdf"
:style="fileUpload === null ? 'width: 150px' : 'width: auto'"
label="อัปโหลดไฟล์"
>
<template v-slot:prepend>
<q-icon color="light-blue" name="attach_file" />
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
</template>
</q-file>
<q-btn
flat
round
color="light-blue"
icon="upload"
@click="uploadFile(fileUpload)"
v-if="fileUpload !== null"
/>
<q-btn
size="md"
icon="mdi-download"
flat
round
color="primary"
@click="downloadFile"
v-if="roleDataStore.insignia1Role"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn
v-else
color="primary"
icon-right="mdi-download"
label="ดาวน์โหลดไฟล์"
@click="downloadFile"
outline
>
<q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
>
<q-space /> <q-space />
<q-btn <q-btn
v-if=" v-if="
@ -474,6 +549,15 @@ const requestSendNote = async () => {
class="q-px-md q-ml-md" class="q-px-md q-ml-md"
@click="directorApproved" @click="directorApproved"
/> />
<q-btn
v-if="requestStatus == 'st5' && roleDataStore.adminRole"
dense
unelevated
label="ตีกลับ"
color="orange"
class="q-px-md"
@click="popupBackToInsignia2Role"
/>
</q-toolbar> </q-toolbar>
<DialogPopupReason <DialogPopupReason
@ -483,6 +567,13 @@ const requestSendNote = async () => {
:click-close="closeModalPopupBackToEdit" :click-close="closeModalPopupBackToEdit"
:savaForm="backToEdit" :savaForm="backToEdit"
/> />
<DialogPopupReason
:modal="modalbackInsignia2Role"
title="หมายเหตุการตีกลับssss"
label="หมายเหตุ"
:click-close="closepopupBackToInsignia2Role"
:savaForm="backToEditinsignia2Role"
/>
</q-card> </q-card>
</template> </template>