updated command template

This commit is contained in:
Warunee Tamkoo 2024-09-17 14:01:53 +07:00
parent 1267b04af3
commit de61513d9d
6 changed files with 211 additions and 143 deletions

View file

@ -44,9 +44,9 @@ const onSave = () => {
showLoader();
http
.put(config.API.commandType + `/text/${commandId.value}`, {
detailHeader: textHeader.value,
detailBody: textBody.value,
detailFooter: textFooter.value,
detailHeader: textHeader.value ?? "",
detailBody: textBody.value ?? "",
detailFooter: textFooter.value ?? "",
})
.then(async () => {
await fetchDataTemplate(commandId.value);

View file

@ -7,23 +7,16 @@ import config from "@/app.config";
import axios from "axios";
import { useCounterMixin } from "@/stores/mixin";
import genReport from "@/plugins/genreport";
import type { DataTemplateDetail } from "@/modules/05_command/interface/response/Main";
import http from "@/plugins/http";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
dialogConfirm,
success,
showLoader,
hideLoader,
dialogRemove,
messageError,
} = mixin;
const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
const idOrder = defineModel<string>("idOrder", { required: true }); // tab
const commandId = defineModel<string>("commandId", { required: true }); // id
const type = defineModel<string>("type", { required: true }); // tab
//
const dataTemplateDetail = defineModel<DataTemplateDetail>(
"dataTemplateDetail",
{
@ -31,77 +24,63 @@ const dataTemplateDetail = defineModel<DataTemplateDetail>(
}
);
const documentFile = ref<File | null>(null); // file
const isLoadPDF = ref<boolean>(false);
/** download file */
async function downloadFile() {
showLoader();
const body = {
template: "command_test",
reportName: "docx-report",
data: {
issue: ".....", //
title: "....", //
commandNo: "....",
commandYear: ".....",
commandTitle: dataTemplateDetail.value.name, //name
detailHeader: dataTemplateDetail.value.detailHeader,
detailBody: dataTemplateDetail.value.detailBody,
detailFooter: dataTemplateDetail.value.detailFooter,
commandDate: "๑ สิงหาคม ๒๕๖๗",
name: "นายสมชาย ใจดี",
position: "ผู้อำนวยการเขตพระนคร",
},
};
await genReport(body, `คำสั่ง`);
}
/** uplaod file */
function clickUpload(file: File | null) {
const dataFile = file;
}
const documentFile = ref<File | null>(null); // file
const isLoadPDF = ref<boolean>(false); // Loading display pdf
/** page PDF */
const pdfSrc = ref<any>();
const page = ref<number>(1);
const numOfPages = ref<number>(0);
const pdfSrc = ref<any>(null); // PDF path display
const page = ref<number>(1); //
const numOfPages = ref<number>(0); // PDF
const splitterModel = ref(14);
const typeFile = ref<string>(type.value === "cover" ? "docx" : "xlsx"); // cover=docx attachment=xlsx
// next page PDF
function nextPage() {
if (page.value < numOfPages.value) {
page.value++;
}
}
// back page PDF
function backPage() {
if (page.value !== 1) {
page.value--;
}
}
const { fetchDataTemplate } = defineProps({
fetchDataTemplate: {
type: Function,
required: true,
},
});
/**
* งก fillin อมลคำสงและแสดงตวอยาง Template คำสงในหน UI
* @param dataTemple รายละเอยดคำส
*/
async function fetchDocumentTemplate(dataTemple: DataTemplateDetail) {
showLoader();
const reportName = await `${dataTemplateDetail.value.code}_${type.value}`;
const body = {
template: "command_test",
reportName: "docx-report",
template: reportName,
reportName: `${typeFile.value}-report`,
data: {
issue: ".....", //
title: "....", //
commandNo: "....",
commandYear: ".....",
commandTitle: dataTemple.name, //name
issue: "............", //
title: "......", //
commandNo: "......",
commandYear: "......",
commandTitle: dataTemple.name,
detailHeader: dataTemple.detailHeader,
detailBody: dataTemple.detailBody,
detailFooter: dataTemple.detailFooter,
commandDate: "๑ สิงหาคม ๒๕๖๗",
name: "นายสมชาย ใจดี",
position: "ผู้อำนวยการเขตพระนคร",
commandDate: "..................",
name: "....................................",
position: "ผู้อำนวยการสำนัก/เขต",
},
};
await axios
.post(config.API.reportTemplate + `/docx/html`, body, {
.post(config.API.reportTemplate + `/${typeFile.value}`, body, {
headers: {
accept: "application/pdf",
"content-Type": "application/json",
@ -112,23 +91,124 @@ async function fetchDocumentTemplate(dataTemple: DataTemplateDetail) {
isLoadPDF.value = false;
const blob = new Blob([res.data]);
const objectUrl = URL.createObjectURL(blob);
const pdfData = await usePDF(`${objectUrl}`);
// PDF
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
isLoadPDF.value = true;
hideLoader();
}, 1500);
})
.catch(async (e) => {
messageError($q, e);
})
.finally(() => {
.catch((e) => {
// Template
messageError($q, "", "ไม่พบข้อมูล Template");
isLoadPDF.value = false;
hideLoader();
});
}
/**
* งชนอปโหลดไฟล Template คำส/ญชแนบทาย
*/
async function uploadTemplate() {
dialogConfirm(
$q,
async () => {
showLoader();
const reportName = await `${dataTemplateDetail.value.code}_${type.value}`;
await axios
.post(
config.API.reportTemplate +
`/${typeFile.value}/upload?report_name=${reportName}`,
documentFile.value,
{
headers: {
accept: documentFile.value?.type,
"content-Type": "application/octet-stream",
},
}
)
.then(async (res) => {
// update /
await updateReportName(reportName);
success($q, "อัปโหลดไฟล์สำเร็จ");
hideLoader();
// Template UI
fetchDocumentTemplate(dataTemplateDetail.value);
fetchDataTemplate(commandId.value);
})
.catch(async (e) => {
messageError($q, e);
})
.finally(() => {
documentFile.value = null;
});
},
"ยืนยันการอัปโหลดไฟล์ต้นแบบ",
"คุณต้องการอัปโหลดไฟล์ต้นแบบนี้ใช่หรือไม่?"
);
}
/**
* งกนดาวนโหลดไฟล Template คำส/ญชแนบทาย
*/
async function downloadTemplate() {
const check = await (type.value == "cover"
? dataTemplateDetail.value.fileCover
: dataTemplateDetail.value.fileAttachment);
await axios
.post(
config.API.reportTemplate + `/${typeFile.value}/download`,
{
template: check,
},
{
headers: {
accept: "application/pdf",
"content-Type": "application/json",
},
responseType: "blob",
}
)
.then(async (res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `${dataTemplateDetail.value.code}_${type.value}.${typeFile.value}`;
a.click();
hideLoader();
})
.catch(async (e) => {
messageError($q, e);
hideLoader();
});
}
/**
* งกนแกไขชอไฟลคำส/ญชแนบทาย
* @param name อไฟล
*/
async function updateReportName(name: string) {
await http
.put(config.API.commandType + `/${type.value}/${commandId.value}`, {
name: name,
})
.then(async (res) => {
hideLoader();
})
.catch(async (e) => {
messageError($q, e);
});
}
// working on click command list
watch(dataTemplateDetail, () => {
fetchDocumentTemplate(dataTemplateDetail.value);
});
// working on change tab
onMounted(() => {
fetchDocumentTemplate(dataTemplateDetail.value);
});
@ -146,9 +226,9 @@ defineExpose({
outlined
dense
v-model="documentFile"
:label="`ไฟล์ต้นแบบ${type == 'order' ? 'คำสั่ง' : 'บัญชีแนบท้าย'}`"
:label="`ไฟล์ต้นแบบ${type == 'cover' ? 'คำสั่ง' : 'บัญชีแนบท้าย'}`"
hide-bottom-space
:accept="type == 'order' ? '.docx' : '.pdf'"
:accept="`.${type == 'cover' ? 'docx' : 'xlsx'}`"
clearable
>
<template v-slot:prepend>
@ -163,8 +243,8 @@ defineExpose({
dense
color="blue"
icon="mdi-upload"
@click="clickUpload(documentFile)"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
@click="uploadTemplate()"
><q-tooltip>ปโหลดไฟลนแบบ</q-tooltip></q-btn
>
<q-btn
flat
@ -172,9 +252,9 @@ defineExpose({
dense
color="primary"
icon="mdi-download"
@click="downloadFile()"
@click="downloadTemplate()"
>
<q-tooltip>ดาวนโหลด Template คำส</q-tooltip>
<q-tooltip>ดาวนโหลดไฟลนแบบ</q-tooltip>
</q-btn>
</template>
</q-file>

View file

@ -15,6 +15,8 @@ interface DataTemplateDetail {
detailHeader: string;
detailBody: string;
detailFooter: string;
fileCover?: string;
fileAttachment?: string;
isActive: boolean;
commandSysId: string;
}

View file

@ -2,7 +2,7 @@ import { defineStore } from "pinia";
import { ref } from "vue";
export const useDataStore = defineStore("commandStore", () => {
const currentTab = ref<string>("order");
const currentTab = ref<string>("cover");
const toolbarOptions = ref([
["left", "center", "right", "justify"],
["token", "bold", "italic", "underline", "subscript", "superscript"],

View file

@ -25,14 +25,7 @@ import TemplateDetail from "@/modules/05_command/components/FormTemplate.vue";
const $q = useQuasar();
const mixin = useCounterMixin();
const store = useDataStore();
const {
dialogConfirm,
success,
showLoader,
hideLoader,
dialogRemove,
messageError,
} = mixin;
const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
const childTemplateDetailRef = ref<InstanceType<typeof TemplateDetail> | null>(
null
@ -55,11 +48,11 @@ const activeOptions = ref<ActiveOptions[]>([
// Tabs
const tabs = ref<Tabs[]>([
{
value: "order",
value: "cover",
label: "คำสั่ง",
},
{
value: "account",
value: "attachment",
label: "บัญชีแนบท้าย",
},
{
@ -71,8 +64,8 @@ const tabs = ref<Tabs[]>([
const dataCategory = ref<DateOption[]>([]); //
const categoryOP = ref<DateOption[]>([]); // options
const idOrder = ref<string>(""); // Id
const activeOrderId = ref<string>(""); // Id
const commandId = ref<string>(""); // Id
const activeCommandId = ref<string>(""); // Id
const name = ref<string>(""); //
const category = ref<string>(""); //
const listOrder = ref<ListOrder[]>([]); // list
@ -140,7 +133,7 @@ function fetchCommandSys() {
* @param val สถานะ true/false
*/
function searchByStatus() {
activeOrderId.value = "";
activeCommandId.value = "";
page.value = 1;
pageSize.value = 13;
fetchCommandType();
@ -151,7 +144,7 @@ function searchByStatus() {
* @param data อมลคำส
*/
function onDialogEdit(data: ListOrder) {
idOrder.value = data.id;
commandId.value = data.id;
name.value = data.name;
status.value = data.isActive;
category.value = data.commandSysId;
@ -184,7 +177,7 @@ function onDialogEdit(data: ListOrder) {
* dialog
*/
function closeDialog() {
idOrder.value = "";
commandId.value = "";
isEdit.value = false;
dialogFormCommand.value = false;
name.value = "";
@ -199,7 +192,7 @@ function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
await http
.put(config.API.commandType + `/${idOrder.value}`, {
.put(config.API.commandType + `/${commandId.value}`, {
name: name.value,
commandSysId: category.value,
isActive: status.value,
@ -222,7 +215,7 @@ function onSubmit() {
* เก id list คำสงทเลอก เพอใช class
*/
function selectInbox(data: ListOrder) {
activeOrderId.value = data.id;
activeCommandId.value = data.id;
fetchDataCommandTypeId(data.id);
}
@ -239,7 +232,7 @@ async function fetchDataCommandTypeId(id: string) {
dataTemplateDetail.value = data;
await Promise.all([
childTemplateDetailRef?.value?.fetchData(data),
childPageOrderRef?.value?.fetchDocumentTemplate(data),
// childPageOrderRef?.value?.fetchDocumentTemplate(data),
]);
})
.catch((err) => {
@ -310,15 +303,11 @@ onMounted(async () => {
</div>
<q-separator />
<q-card-section class="q-pa-sm">
<q-list
v-for="(item, index) in listOrder"
:key="item.id"
class="q-pr-sm"
>
<q-list v-for="(item, index) in listOrder" bordered :key="item.id">
<q-item
clickable
v-ripple
:active="activeOrderId === item.id"
:active="activeCommandId === item.id"
active-class="my-menu_link"
@click="selectInbox(item)"
>
@ -329,13 +318,14 @@ onMounted(async () => {
</q-item-section>
<q-item-section side center @click.stop>
<q-icon
name="mdi-dots-vertical"
name="edit"
class="q-pa-none q-ml-xs"
color="grey-13"
color="edit"
flat
dense
>
<q-menu transition-show="jump-down" transition-hide="jump-up">
@click="onDialogEdit(item)"
/>
<!-- <q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 160px">
<q-item
clickable
@ -352,7 +342,7 @@ onMounted(async () => {
<q-item-section>แกไข</q-item-section>
</q-item>
<q-separator />
<!-- <q-item
<q-item
clickable
v-close-popup
@click="onDelete(item.id)"
@ -365,35 +355,18 @@ onMounted(async () => {
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item> -->
<q-separator />
</q-list> </q-menu
></q-icon>
</q-item>
</q-list>
</q-menu> -->
<!-- </q-icon> -->
</q-item-section>
</q-item>
<q-separator v-if="listOrder.length !== index + 1" />
</q-list>
<div
class="full-width row flex-center text-accent q-gutter-sm"
v-if="listOrder.length === 0"
class="full-width row flex-center text-accent q-gutter-sm"
>
<span
><div
style="
height: 76vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
"
class="text-grey-5"
>
<q-icon name="search" size="4rem" />
<span>{{ "ไม่พบข้อมูล" }}</span>
</div>
</span>
<div class="text-grey-5">ไมพบขอม</div>
</div>
</q-card-section>
<q-separator />
@ -415,7 +388,7 @@ onMounted(async () => {
</div>
<div class="col-8">
<q-card bordered style="height: 100%">
<div v-if="activeOrderId !== ''">
<div v-if="activeCommandId !== ''">
<q-tabs
dense
v-model="store.currentTab"
@ -436,20 +409,22 @@ onMounted(async () => {
</q-tabs>
<q-separator />
<q-tab-panels v-model="store.currentTab" animated>
<q-tab-panel name="order">
<q-tab-panel name="cover">
<PageOrder
ref="childPageOrderRef"
v-model:type="store.currentTab"
v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
:id-order="activeOrderId"
:command-id="activeCommandId"
:fetch-data-template="fetchDataCommandTypeId"
/>
</q-tab-panel>
<q-tab-panel name="account">
<q-tab-panel name="attachment">
<PageOrder
ref="childPageOrderRef"
v-model:type="store.currentTab"
v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
:id-order="activeOrderId"
:command-id="activeCommandId"
:fetch-data-template="fetchDataCommandTypeId"
/>
</q-tab-panel>
<q-tab-panel name="template">
@ -457,7 +432,7 @@ onMounted(async () => {
ref="childTemplateDetailRef"
v-model:type="store.currentTab"
v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
:command-id="activeOrderId"
:command-id="activeCommandId"
:fetch-data-template="fetchDataCommandTypeId"
/>
</q-tab-panel>
@ -483,7 +458,7 @@ onMounted(async () => {
</div>
<q-dialog v-model="dialogFormCommand" persistent>
<q-card class="col-12" style="min-width: 30%">
<q-card class="col-12" style="width: 40vw">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header
:tittle="isEdit ? 'แก้ไขคำสั่ง' : 'เพิ่มคำสั่ง'"

View file

@ -439,18 +439,29 @@ export const useCounterMixin = defineStore("mixin", () => {
}
}
} else {
console.log("errror===>", e);
q.dialog({
component: CustomComponent,
componentProps: {
title: `พบข้อผิดพลาด`,
message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
icon: "warning",
color: "red",
onlycancel: true,
},
});
if (msg === "") {
q.dialog({
component: CustomComponent,
componentProps: {
title: `พบข้อผิดพลาด`,
message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
icon: "warning",
color: "red",
onlycancel: true,
},
});
} else {
q.dialog({
component: CustomComponent,
componentProps: {
title: `พบข้อผิดพลาด`,
message: msg,
icon: "warning",
color: "red",
onlycancel: true,
},
});
}
}
};