ui command tab 2/3/5

This commit is contained in:
STW_TTTY\stwtt 2024-09-24 10:50:42 +07:00
parent fc9f22ba2b
commit df4cb61671
6 changed files with 396 additions and 62 deletions

View file

@ -10,5 +10,5 @@ export default {
commandAction: (commandId: string, type: string) =>
`${command}/${type}/${commandId}`,
commandSalaryList:(command:string)=>`${commandSalary}/list&commandSysId=${command}`
commandSalaryList:(command:string)=>`${commandSalary}/list?commandSysId=${command}`
};

View file

@ -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

View file

@ -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

View file

@ -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>

View file

@ -12,8 +12,8 @@ interface FormCommand {
}
interface FormDataDetail {
id: string;
status: string;
id?: string;
status?: string;
commandNo: string;
commandYear: number | null;
detailHeader: string;
@ -22,8 +22,17 @@ interface FormDataDetail {
issue: string | null;
commandAffectDate: Date | null;
commandExcecuteDate: Date | null;
commandSysId: string;
commandTypeName: string;
commandSysId?: string;
commandTypeName?: string;
}
export type { FormQuery, FormCommand, FormDataDetail };
interface ListCommandSalaryType {
id: string;
createdAt: Date|null;
lastUpdatedAt: Date|null;
createdFullName: string;
lastUpdateFullName: string;
name: string;
commandSysId: string;
}
export type { FormQuery, FormCommand, FormDataDetail,ListCommandSalaryType };

View file

@ -23,6 +23,7 @@ const router = useRouter();
const route = useRoute();
const commandId = ref<string>(route.params.id.toString()); //ID
const store = useCommandDetail();
const isMomFirst = ref<boolean>(false);
const childDetailRef = ref<InstanceType<typeof Detail> | null>(null); //ref components
const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null); //ref components
@ -31,7 +32,7 @@ const childReceivedCopyRef = ref<InstanceType<typeof ReceivedCopy> | null>(
); //ref components
const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null); //ref components
const tabs = ref<string>("Detail"); //Tab
const tabs = ref<string>("Main"); //Tab
const readonly = ref<boolean>(route.name === "commandViewDetailPage"); //
const isChangeData = ref<boolean>(false); //
// Tab
@ -49,7 +50,7 @@ const tabsManu = ref<ItemTabs[]>([
{ label: "พรีวิวคำสั่ง", name: "Attached" },
]);
const formCommandList = reactive<FormDataDetail>({
let formCommandList = reactive<FormDataDetail>({
id: "",
status: "",
commandTypeName: "",
@ -84,19 +85,7 @@ async function fetchDataCommandList() {
.get(config.API.commandAction(commandId.value, "tab1"))
.then(async (res) => {
const data = await res.data.result;
formCommandList.id = data.id;
formCommandList.status = data.status;
formCommandList.commandTypeName = data.commandTypeName;
formCommandList.commandNo = data.commandNo;
formCommandList.commandYear = data.commandYear;
formCommandList.detailHeader = data.detailHeader;
formCommandList.detailBody = data.detailBody;
formCommandList.detailFooter = data.detailFooter;
formCommandList.issue = data.issue;
formCommandList.commandAffectDate = data.commandAffectDate;
formCommandList.commandExcecuteDate = data.commandExcecuteDate;
formCommandList.commandSysId = data.commandSysId;
formCommandList = data;
isChangeData.value = false;
})
.catch((err) => {
@ -204,7 +193,7 @@ onMounted(async () => {
ref="childListPersonsRef"
v-model:is-change-data="isChangeData"
:on-check-change-data="onCheckChangeData"
:form-command-list="formCommandList"
:command-sys-id="formCommandList.commandSysId as string"
:fetch-data-command-list="fetchDataCommandList"
/>
</q-card>