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

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

@ -206,7 +206,15 @@ const popupBackToEdit = async () => {
const closeModalPopupBackToEdit = async () => {
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
const backToEdit = async (reason: string) => {
dialogConfirm(
@ -241,7 +249,6 @@ const backToEdit = async (reason: string) => {
"ต้องการยืนยันการตีกลับใช่หรือไม่?"
);
};
// อนุมัติรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
const directorApproved = async () => {
dialogConfirm(
@ -271,6 +278,12 @@ const directorApproved = async () => {
"ต้องการยืนยันการอนุมัติใช่หรือไม่?"
);
};
// ตีกลับรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st5 และ adminRole
const backToEditinsignia2Role = async () => {
dialogConfirm($q, async () => {
console.log("รอ API");
});
};
// ล็อกข้อมูลรอบการเสนอขอ
const requestSendNote = async () => {
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>
<template>
@ -443,6 +472,52 @@ const requestSendNote = async () => {
</q-tab-panels>
<!-- :role-user="roleUser" -->
<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-btn
v-if="
@ -474,6 +549,15 @@ const requestSendNote = async () => {
class="q-px-md q-ml-md"
@click="directorApproved"
/>
<q-btn
v-if="requestStatus == 'st5' && roleDataStore.adminRole"
dense
unelevated
label="ตีกลับ"
color="orange"
class="q-px-md"
@click="popupBackToInsignia2Role"
/>
</q-toolbar>
<DialogPopupReason
@ -483,6 +567,13 @@ const requestSendNote = async () => {
:click-close="closeModalPopupBackToEdit"
:savaForm="backToEdit"
/>
<DialogPopupReason
:modal="modalbackInsignia2Role"
title="หมายเหตุการตีกลับssss"
label="หมายเหตุ"
:click-close="closepopupBackToInsignia2Role"
:savaForm="backToEditinsignia2Role"
/>
</q-card>
</template>