อัพเดตออกคำสั่ง
This commit is contained in:
parent
16ad355f13
commit
7aee41aca4
4 changed files with 1619 additions and 2367 deletions
|
|
@ -1,3 +1,238 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
import type { QForm } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
|
||||
const orderId_params = route.params.orderid;
|
||||
const dialog = ref<boolean>(false);
|
||||
const dialogFileUpload = ref<boolean>(false);
|
||||
const splitterModel = ref<number>(70);
|
||||
const tab = ref<string>("main");
|
||||
|
||||
const order = ref<string>("");
|
||||
const years = ref<number>(new Date().getDate());
|
||||
const date = ref<Date>(new Date());
|
||||
const fileOrder = ref<any>(null);
|
||||
const fileTailer = ref<any>(null);
|
||||
|
||||
const OrderPDF = ref<string>("");
|
||||
const TailerPDF = ref<string>("");
|
||||
const OrderPDFUpload = ref<string>("");
|
||||
const TailerPDFUpload = ref<string>("");
|
||||
const statusOrder = ref<string>();
|
||||
|
||||
const orderId = ref<string>(orderId_params.toString());
|
||||
onMounted(async () => {
|
||||
if (orderId.value) {
|
||||
fetchAttachment(orderId.value);
|
||||
fecthstatusOrder(orderId.value);
|
||||
}
|
||||
});
|
||||
|
||||
const fetchAttachment = async (orderId: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.attachmentOrder(orderId))
|
||||
.then(async (res) => {
|
||||
let response = res.data.result;
|
||||
// console.log(response);
|
||||
order.value = response.orderNo;
|
||||
years.value = Number(response.orderYear);
|
||||
if (response.date !== undefined) {
|
||||
date.value = response.date;
|
||||
}
|
||||
if (response.orderFileUrl !== null) {
|
||||
// OrderPDF.value = response.orderFileUrl;
|
||||
OrderPDFUpload.value = response.orderFileUrl;
|
||||
|
||||
viewPDF(OrderPDF.value);
|
||||
}
|
||||
if (response.attachmentFileUrl !== null) {
|
||||
// TailerPDF.value = response.attachmentFileUrl;
|
||||
TailerPDFUpload.value = response.attachmentFileUrl;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const fecthstatusOrder = async (orderId: string) => {
|
||||
await http
|
||||
.get(config.API.orderReady(orderId))
|
||||
.then((res) => {
|
||||
let status = res.data.result;
|
||||
statusOrder.value = status.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
const viewPDF = async (pdf: string) => {
|
||||
const pdfData = await usePDF(`${pdf}`);
|
||||
showLoader();
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
hideLoader();
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const viewPDFUpload = async (pdf: string) => {
|
||||
const pdfData = await usePDF(`${pdf}`);
|
||||
showLoader();
|
||||
setTimeout(() => {
|
||||
pdfFileUploadSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
hideLoader();
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
watch(tab, () => {
|
||||
// console.log(tab.value);
|
||||
if (tab.value === "main") {
|
||||
viewPDF(OrderPDF.value);
|
||||
}
|
||||
if (tab.value === "second") {
|
||||
viewPDF(TailerPDF.value);
|
||||
}
|
||||
});
|
||||
|
||||
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
|
||||
const pdfFileUploadSrc = ref<PDFDocumentLoadingTask | undefined>();
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const vuePDFRef = ref<any>(null);
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
previous: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
// const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
|
||||
const onchangePage = (val: any) => {
|
||||
// console.log(val);
|
||||
if (vuePDFRef !== null) {
|
||||
vuePDFRef.value.reload();
|
||||
}
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value!.validate().then((success: Boolean) => {
|
||||
if (success) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await putOrderData();
|
||||
await postfileOrder();
|
||||
await postfileTailer();
|
||||
await fetchAttachment(orderId.value);
|
||||
await fecthstatusOrder(orderId.value);
|
||||
},
|
||||
);
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const putOrderData = async () => {
|
||||
const orderData = {
|
||||
orderNo: order.value,
|
||||
orderYear: years.value.toString(),
|
||||
signDate: date.value,
|
||||
};
|
||||
await http
|
||||
.put(config.API.attachmentOrder(orderId.value), orderData)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
|
||||
const postfileOrder = async () => {
|
||||
const formData = new FormData();
|
||||
formData.append("File", fileOrder.value);
|
||||
await http.post(config.API.attachmentOrderId(orderId.value), formData).then(() => {
|
||||
// fileOrder.value = null
|
||||
});
|
||||
};
|
||||
const postfileTailer = async () => {
|
||||
const formData = new FormData();
|
||||
formData.append("File", fileTailer.value);
|
||||
await http.post(config.API.attachmentFileId(orderId.value), formData).then(() => { //fileTailer.value = null
|
||||
});
|
||||
};
|
||||
|
||||
const clickExecute = async (id: string) => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await http
|
||||
.put(config.API.executeOrder(id))
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
},
|
||||
"ยืนยันการออกคำสั่ง",
|
||||
"ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
|
||||
);
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
return (
|
||||
fileOrder.value !== null &&
|
||||
fileOrder.value !== null &&
|
||||
order.value.trim() !== ""
|
||||
);
|
||||
};
|
||||
const 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,
|
||||
};
|
||||
};
|
||||
const setTab = (val: string) => {
|
||||
tab.value = val;
|
||||
page.value = 1;
|
||||
};
|
||||
|
||||
const viewFileUpload = async (url: string) => {
|
||||
pdfFileUploadSrc.value = undefined
|
||||
await viewPDFUpload(url);
|
||||
|
||||
dialogFileUpload.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="min-height: 70vh">
|
||||
|
|
@ -6,7 +241,7 @@
|
|||
<div class="space">
|
||||
<div @click="setTab('main')" :class="getClass(tab == 'main')">
|
||||
<div class="q-pr-sm">คำสั่ง</div>
|
||||
<q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
|
||||
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
|
||||
:color="tab !== 'main' ? 'grey' : 'add'">
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
<q-menu>
|
||||
|
|
@ -25,8 +260,8 @@
|
|||
</div>
|
||||
<div @click="setTab('second')" :class="getClass(tab == 'second')">
|
||||
<div class="q-pr-sm">เอกสารแนบท้าย</div>
|
||||
<q-btn v-show="TailerPDF == ''" size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'"
|
||||
icon="mdi-download" :disable="tab !== 'second'">
|
||||
<q-btn size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download"
|
||||
:disable="tab !== 'second'">
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
|
|
@ -92,8 +327,17 @@
|
|||
<div class="q-gutter-y-md q-mb-md">
|
||||
<div>
|
||||
<label class="text-file">คำสั่ง</label>
|
||||
<div class="text-right">
|
||||
<q-btn size="12px" flat dense color="primary" icon="mdi-eye"
|
||||
@click="viewFileUpload(OrderPDFUpload)">
|
||||
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download" target="_blank">
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-file outlined dense v-model="fileOrder" label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
|
||||
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
|
||||
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
|
|
@ -101,8 +345,18 @@
|
|||
</div>
|
||||
<div>
|
||||
<label class="text-file">เอกสารแนบท้าย</label>
|
||||
<div class="text-right">
|
||||
<q-btn size="12px" flat dense color="primary" icon="mdi-eye"
|
||||
@click="viewFileUpload(TailerPDFUpload)">
|
||||
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download" target="_blank">
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<q-file outlined dense v-model="fileTailer" label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space
|
||||
lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
|
||||
lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
|
|
@ -184,22 +438,10 @@
|
|||
<q-btn unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'" :disable="!validateForm()"
|
||||
@click="save">
|
||||
</q-btn>
|
||||
|
||||
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
|
||||
<q-tooltip>ต่อไป</q-tooltip>
|
||||
</q-btn> -->
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
|
||||
<q-card class="bg-white text-white">
|
||||
<!-- <q-bar>
|
||||
<q-space />
|
||||
|
||||
<q-btn dense flat icon="close" v-close-popup>
|
||||
<q-tooltip>ปิดหน้าต่าง</q-tooltip>
|
||||
</q-btn>
|
||||
</q-bar> -->
|
||||
|
||||
<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 />
|
||||
|
|
@ -238,227 +480,52 @@
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="dialogFileUpload" 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="pdfFileUploadSrc" :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>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
import type { QForm } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
|
||||
const orderId_params = route.params.orderid;
|
||||
const dialog = ref<boolean>(false);
|
||||
const splitterModel = ref<number>(70);
|
||||
const tab = ref<string>("main");
|
||||
|
||||
const order = ref<string>("");
|
||||
const years = ref<number>(new Date().getDate());
|
||||
const date = ref<Date>(new Date());
|
||||
const fileOrder = ref<any>(null);
|
||||
const fileTailer = ref<any>(null);
|
||||
|
||||
const OrderPDF = ref<string>("");
|
||||
const TailerPDF = ref<string>("");
|
||||
const statusOrder = ref<string>();
|
||||
|
||||
const orderId = ref<string>(orderId_params.toString());
|
||||
onMounted(async () => {
|
||||
if (orderId.value) {
|
||||
fetchAttachment(orderId.value);
|
||||
fecthstatusOrder(orderId.value);
|
||||
}
|
||||
|
||||
// const pdfData = usePDF();
|
||||
|
||||
// setTimeout(() => {
|
||||
// pdfSrc.value = pdfData.pdf.value;
|
||||
// numOfPages.value = pdfData.pages.value;
|
||||
// }, 1000);
|
||||
});
|
||||
|
||||
const fetchAttachment = async (orderId: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.attachmentOrder(orderId))
|
||||
.then(async (res) => {
|
||||
let response = res.data.result;
|
||||
// console.log(response);
|
||||
order.value = response.orderNo;
|
||||
years.value = Number(response.orderYear);
|
||||
if (response.date !== undefined) {
|
||||
date.value = response.date;
|
||||
}
|
||||
if (response.orderFileUrl !== null) {
|
||||
OrderPDF.value = response.orderFileUrl;
|
||||
viewPDF(OrderPDF.value);
|
||||
}
|
||||
if (response.attachmentFileUrl !== null) {
|
||||
TailerPDF.value = response.attachmentFileUrl;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const fecthstatusOrder = async (orderId: string) => {
|
||||
await http
|
||||
.get(config.API.orderReady(orderId))
|
||||
.then((res) => {
|
||||
let status = res.data.result;
|
||||
statusOrder.value = status.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
const viewPDF = async (pdf: string) => {
|
||||
const pdfData = await usePDF(`${pdf}`);
|
||||
showLoader();
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
hideLoader();
|
||||
}, 1500);
|
||||
};
|
||||
watch(tab, () => {
|
||||
// console.log(tab.value);
|
||||
if (tab.value === "main") {
|
||||
viewPDF(OrderPDF.value);
|
||||
}
|
||||
if (tab.value === "second") {
|
||||
viewPDF(TailerPDF.value);
|
||||
}
|
||||
});
|
||||
|
||||
// const myEventHandler = (e: any) => {
|
||||
// console.log("e", e.target.innerWidth);
|
||||
// if (vuePDFRef !== null) {
|
||||
// vuePDFRef.value.reload();
|
||||
// }
|
||||
// };
|
||||
|
||||
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const vuePDFRef = ref<any>(null);
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
previous: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
// const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
|
||||
const onchangePage = (val: any) => {
|
||||
// console.log(val);
|
||||
if (vuePDFRef !== null) {
|
||||
vuePDFRef.value.reload();
|
||||
}
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
if (myForm.value !== null) {
|
||||
myForm.value!.validate().then((success: Boolean) => {
|
||||
if (success) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await putOrderData();
|
||||
await postfileOrder();
|
||||
await postfileTailer();
|
||||
await fetchAttachment(orderId.value);
|
||||
await fecthstatusOrder(orderId.value);
|
||||
},
|
||||
);
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const putOrderData = async () => {
|
||||
const orderData = {
|
||||
orderNo: order.value,
|
||||
orderYear: years.value.toString(),
|
||||
signDate: date.value,
|
||||
};
|
||||
await http
|
||||
.put(config.API.attachmentOrder(orderId.value), orderData)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
|
||||
const postfileOrder = async () => {
|
||||
const formData = new FormData();
|
||||
formData.append("File", fileOrder.value);
|
||||
await http.post(config.API.attachmentOrderId(orderId.value), formData);
|
||||
};
|
||||
const postfileTailer = async () => {
|
||||
const formData = new FormData();
|
||||
formData.append("File", fileTailer.value);
|
||||
await http.post(config.API.attachmentFileId(orderId.value), formData);
|
||||
};
|
||||
const clickExecute = async (id: string) => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await http
|
||||
.put(config.API.executeOrder(id))
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
},
|
||||
"ยืนยันการออกคำสั่ง",
|
||||
"ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
|
||||
);
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
return (
|
||||
fileOrder.value !== null &&
|
||||
fileOrder.value !== null &&
|
||||
order.value.trim() !== ""
|
||||
);
|
||||
};
|
||||
const 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,
|
||||
};
|
||||
};
|
||||
const setTab = (val: string) => {
|
||||
tab.value = val;
|
||||
page.value = 1;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.border {
|
||||
border-radius: 10px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue