ui command tab 2/3/5
This commit is contained in:
STW_TTTY\stwtt
parent
fc9f22ba2b
commit
df4cb61671
6 changed files with 396 additions and 62 deletions
|
|
@ -29,10 +29,7 @@ const props = defineProps({
|
|||
|
||||
const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
|
||||
// ฟอร์มข้อมูล
|
||||
const formData = reactive<FormDataDetail>({
|
||||
id: "",
|
||||
status: "",
|
||||
commandTypeName: "",
|
||||
let formData = reactive<FormDataDetail>({
|
||||
commandNo: "",
|
||||
commandYear: null,
|
||||
detailHeader: "",
|
||||
|
|
@ -41,7 +38,6 @@ const formData = reactive<FormDataDetail>({
|
|||
issue: null,
|
||||
commandAffectDate: null, //วันที่ลงนาม
|
||||
commandExcecuteDate: null, //วันที่คำสั่งมีผล
|
||||
commandSysId: "", // ประเภท คำสั่ง
|
||||
});
|
||||
const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
|
||||
|
||||
|
|
@ -69,14 +65,16 @@ async function onSubmit() {
|
|||
/**
|
||||
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
|
||||
*/
|
||||
watch(
|
||||
() => props.formCommandList,
|
||||
() => {
|
||||
const list = props.formCommandList;
|
||||
console.log("🚀 ~ props.formCommandList:", props.formCommandList)
|
||||
console.log("🚀 ~ onMounted ~ list:", list);
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
formData.commandNo = props.formCommandList.commandNo;
|
||||
formData.commandYear = props.formCommandList.commandYear;
|
||||
formData.detailHeader = props.formCommandList.detailHeader;
|
||||
formData.detailBody = props.formCommandList.detailBody;
|
||||
formData.detailFooter = props.formCommandList.detailFooter;
|
||||
formData.issue = props.formCommandList.issue;
|
||||
formData.commandAffectDate = props.formCommandList.commandAffectDate;
|
||||
formData.commandExcecuteDate = props.formCommandList.commandExcecuteDate;
|
||||
});
|
||||
|
||||
/**
|
||||
* ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
|
||||
|
|
@ -90,7 +88,6 @@ defineExpose({
|
|||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<!-- คำสั่งเลขที่ -->
|
||||
{{ props.formCommandList }}
|
||||
<div class="col-4 row">
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/18_command/interface/index/Main";
|
||||
import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
|
||||
import type { ListCommandSalaryType } from "@/modules/18_command/interface/request/Main";
|
||||
|
||||
import DialogAddPerson from "@/modules/18_command/components/Step/Dialog2_AddPerson.vue";
|
||||
import DialogSalary from "@/modules/18_command/components/Step/Dialog2_Salary.vue";
|
||||
|
|
@ -31,23 +31,10 @@ const isChangeData = defineModel<boolean>("isChangeData", { required: true }); /
|
|||
const props = defineProps({
|
||||
onCheckChangeData: { type: Function, required: true },
|
||||
fetchDataCommandList: { type: Function, required: true },
|
||||
formCommandList: { type: Object, required: true },
|
||||
commandSysId: { type: String, required: true },
|
||||
});
|
||||
|
||||
const formData = reactive<FormDataDetail>({
|
||||
id: "",
|
||||
status: "",
|
||||
commandTypeName: "",
|
||||
commandNo: "",
|
||||
commandYear: null,
|
||||
detailHeader: "",
|
||||
detailBody: "",
|
||||
detailFooter: "",
|
||||
issue: null,
|
||||
commandAffectDate: null, //วันที่ลงนาม
|
||||
commandExcecuteDate: null, //วันที่คำสั่งมีผล
|
||||
commandSysId: "", // ประเภท คำสั่ง
|
||||
});
|
||||
const ListCommandSalary = ref<ListCommandSalaryType[]>([]);
|
||||
|
||||
const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
|
||||
const templatePos = ref<string>("");
|
||||
|
|
@ -142,16 +129,20 @@ function filterSelector(val: string, update: Function, filtername: string) {
|
|||
}
|
||||
}
|
||||
|
||||
function getCommandSalaryList() {
|
||||
function getCommandSalaryList(type: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.commandSalaryList("PLACEMENT"))
|
||||
.get(config.API.commandSalaryList(type))
|
||||
.then((res) => {
|
||||
console.log(res.data.result);
|
||||
const data = res.data.result;
|
||||
ListCommandSalary.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmit() {}
|
||||
|
|
@ -164,11 +155,9 @@ defineExpose({
|
|||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.formCommandList) {
|
||||
const list = props.formCommandList;
|
||||
console.log("🚀 ~ onMounted ~ list:", list);
|
||||
if (props.commandSysId) {
|
||||
getCommandSalaryList(props.commandSysId);
|
||||
}
|
||||
getCommandSalaryList();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -187,7 +176,7 @@ onMounted(() => {
|
|||
v-model="templatePos"
|
||||
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
|
||||
option-label="name"
|
||||
:options="posNoOptions"
|
||||
:options="ListCommandSalary"
|
||||
option-value="name"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
|
|
|
|||
|
|
@ -1,19 +1,369 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import axios from "axios";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReport from "@/plugins/genreport";
|
||||
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
|
||||
const { onCheckChangeData } = defineProps({
|
||||
onCheckChangeData: { type: Function, required: true },
|
||||
});
|
||||
|
||||
const tab = ref<string>("main"); //tab
|
||||
const page = ref<number>(1);
|
||||
const numOfPages = ref<number>(0); //จำนวนหน้า pdf
|
||||
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
|
||||
|
||||
const isAttachment = ref<boolean>(true);
|
||||
const dialog = ref<boolean>(false); // เปิด dialog
|
||||
|
||||
/**
|
||||
* เปลี่ยน tab
|
||||
* @param val ชื่อ tab
|
||||
*/
|
||||
function setTab(val: string) {
|
||||
tab.value = val;
|
||||
page.value = 1;
|
||||
}
|
||||
|
||||
/** ดึง class ตามที่ set ไว้ */
|
||||
function getClass(val: boolean) {
|
||||
return {
|
||||
"card-header-active q-px-lg q-py-md cursor-pointer": val,
|
||||
"card-header q-px-lg q-py-md cursor-pointer": !val,
|
||||
};
|
||||
}
|
||||
function onSubmit() {}
|
||||
|
||||
/** ฟังชั่นจองลอง แสดง pdf */
|
||||
async function genPDf(data: any, type: string = "docx") {
|
||||
showLoader();
|
||||
await axios
|
||||
.post(config.API.reportTemplate + `/${type}`, data, {
|
||||
headers: {
|
||||
accept: "application/pdf",
|
||||
"content-Type": "application/json",
|
||||
},
|
||||
responseType: "blob",
|
||||
})
|
||||
.then(async (res) => {
|
||||
const blob = new Blob([res.data]);
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
|
||||
const pdfData = usePDF(`${objectUrl}`);
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
hideLoader();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(async (e) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นดาวห์โหลดไฟล์
|
||||
* @param type pdf/docx
|
||||
*/
|
||||
async function downloadCover(type: string) {
|
||||
genReport(
|
||||
tab.value == "main" ? data1 : data2,
|
||||
`${
|
||||
tab.value == "main"
|
||||
? "คำสั่ง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
|
||||
: "เอกสารแนบท้าย คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
|
||||
}`,
|
||||
type
|
||||
);
|
||||
}
|
||||
|
||||
/** ข้อมูลจำลอง */
|
||||
const data1 = {
|
||||
template: "C-PM-01",
|
||||
reportName: "docx-report",
|
||||
data: {
|
||||
commandNo: "",
|
||||
commandYear: "๒๕๖๗",
|
||||
issuerOrganizationName: "",
|
||||
conclusionRegisterNo: "test",
|
||||
conclusionRegisterDate: "๒ สิงหาคม ๒๕๖๗",
|
||||
conclusionResultNo: "test",
|
||||
conclusionResultDate: "๓ สิงหาคม ๒๕๖๗",
|
||||
positionList: "",
|
||||
count: "๑",
|
||||
commandAffectDate: "๑ สิงหาคม ๒๕๖๗",
|
||||
authorizedUserFullName: "นายวิษณุ สุวรรณรัตน์",
|
||||
authorizedPosition: "ผู้อำนวยการ",
|
||||
subject: "เรื่อง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
|
||||
},
|
||||
};
|
||||
const data2 = {
|
||||
template: "C-PM-01-attachment",
|
||||
reportName: "docx-report",
|
||||
data: {
|
||||
commandNo: "",
|
||||
commandYear: "๒๕๖๗",
|
||||
issuerOrganizationName: "",
|
||||
commandExcecuteDate: "-",
|
||||
data: [
|
||||
{
|
||||
citizenId: "๒๔๕๙๙๐๐๐๑๙๖๘๐",
|
||||
fullName: "นางสาวบุปผารัตน์ สีลาเหลี่ยม",
|
||||
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
|
||||
positionName: "นักบริหาร",
|
||||
positionLevel: "ต้น",
|
||||
positionType: "บริหาร",
|
||||
positionNumber: "สกก.๒",
|
||||
salary: "๑๒,๐๐๐",
|
||||
appointDate: "๒๓ ส.ค. ๖๗",
|
||||
examNumber: "๑",
|
||||
placementName: "สอบแข่งขันนักคอมพิวเตอร์ ครั้งที่ ๑/๒๕๖๗",
|
||||
seq: "๑",
|
||||
education: "การศึกษาบัณฑิต",
|
||||
remarkHorizontal:
|
||||
"โดยมีเงื่อนไขว่าต้องปฏิบัติงานให้กรุงเทพมหานครเป็นระยะเวลาไม่น้อยกว่า ๕ ปี นับแต่วันที่ได้รับการบรรจุและแต่งตั้ง โดยห้ามโอนไปหน่วยงานหรือส่วนราชการอื่น เว้นเเต่ลาออกจากราชการ",
|
||||
remarkVertical: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
|
||||
*/
|
||||
defineExpose({
|
||||
onSubmit,
|
||||
});
|
||||
|
||||
/** check tab เมื่อมีการเปลี่ยน tab */
|
||||
watch(tab, () => {
|
||||
if (tab.value === "main") {
|
||||
genPDf(data1);
|
||||
}
|
||||
if (tab.value === "second") {
|
||||
genPDf(data2);
|
||||
}
|
||||
});
|
||||
|
||||
/** hook */
|
||||
onMounted(async () => {
|
||||
await genPDf(data1);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>คำสั่งและบัญชีแนบท้าย</div>
|
||||
<div class="space">
|
||||
<div @click="setTab('main')" :class="getClass(tab == 'main')">
|
||||
<div class="q-pr-sm">คำสั่ง</div>
|
||||
</div>
|
||||
|
||||
<div @click="setTab('second')" :class="getClass(tab == 'second')">
|
||||
<div class="q-pr-sm">เอกสารแนบท้าย</div>
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
class="text-dark"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-fullscreen"
|
||||
color="add"
|
||||
@click="dialog = true"
|
||||
/>
|
||||
</div>
|
||||
<q-separator style="margin-top: -1px; z-index: 1" />
|
||||
<div class="q-pa-sm">
|
||||
<div class="q-pa-sm row q-gutter-sm">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="red"
|
||||
icon="mdi-file-pdf"
|
||||
@click="downloadCover('pdf')"
|
||||
>
|
||||
<q-tooltip>ไฟล์ .PDF</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-file-word"
|
||||
@click="downloadCover('docx')"
|
||||
>
|
||||
<q-tooltip>ไฟล์ .docx</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-card bordered class="card-pdf q-mx-sm q-pa-md">
|
||||
<div class="justify-between items-center align-center q-pb-sm row">
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="pdfWidth">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<q-dialog
|
||||
v-model="dialog"
|
||||
persistent
|
||||
:maximized="true"
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<q-card class="bg-white text-white">
|
||||
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
size="12px"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
|
||||
<div class="justify-between items-center align-center q-pb-sm row">
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text text-black">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="pdfWidth">
|
||||
<VuePDF
|
||||
ref="vuePDFRef"
|
||||
:pdf="pdfSrc"
|
||||
:page="page"
|
||||
fit-parent
|
||||
:scale="0.1"
|
||||
/>
|
||||
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
||||
</div>
|
||||
<div class="justify-between items-center align-center q-pt-sm row">
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text text-black">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.space {
|
||||
background-color: #e9eaec61;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.card-header-active {
|
||||
margin-top: 5px;
|
||||
margin-left: -1px;
|
||||
background-color: white;
|
||||
padding: 2px !important;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border: 1px solid #e9eaec;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-bottom-style: none;
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-top: 5px;
|
||||
background-color: transparent;
|
||||
padding: 2px !important;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-pdf {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e9eaec;
|
||||
background-color: #e9eaec61;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue