API รายการคำสั่งและ Template
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
5625fa06f4
commit
1794218a8f
6 changed files with 391 additions and 260 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import env from "../index";
|
||||
const order = `${env.API_URI}/order`;
|
||||
const order = `${env.API_URI}/org`;
|
||||
|
||||
export default {
|
||||
commandType: `${order}/order-type`,
|
||||
commandType: `${order}/commandType`,
|
||||
commandSysList: `${order}/commandSys/list`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,71 +1,73 @@
|
|||
<script setup lang="ts">
|
||||
import { watch, ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useDataStore } from "@/modules/05_command/stores/main";
|
||||
|
||||
import type { DataTemplateDetail } from "@/modules/05_command/interface/response/Main";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
success,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogRemove,
|
||||
messageError,
|
||||
} = mixin;
|
||||
const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
|
||||
const store = useDataStore();
|
||||
|
||||
const commandId = defineModel<string>("commandId", { required: true });
|
||||
const type = defineModel<string>("type", { required: true });
|
||||
const dataTemplateDetail = defineModel<DataTemplateDetail>(
|
||||
"dataTemplateDetail",
|
||||
{
|
||||
required: true,
|
||||
}
|
||||
);
|
||||
const { fetchDataTemplate } = defineProps({
|
||||
fetchDataTemplate: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const textHeader = ref<string>("");
|
||||
const textBody = ref<string>("");
|
||||
const textFooter = ref<string>("");
|
||||
|
||||
const fetchData = async () => {
|
||||
textHeader.value = "";
|
||||
textBody.value = "";
|
||||
textFooter.value = "";
|
||||
};
|
||||
|
||||
const onSave = () => {
|
||||
console.log("textHeader===>", textHeader.value);
|
||||
console.log("textBody===>", textBody.value);
|
||||
console.log("textFooter===>", textFooter.value);
|
||||
};
|
||||
|
||||
function clearFormat(type: string) {
|
||||
switch (type) {
|
||||
case "textHeader":
|
||||
textHeader.value = textHeader.value.replace(/<\/?[^>]+(>|$)/g, "");
|
||||
break;
|
||||
case "textBody":
|
||||
textBody.value = textBody.value.replace(/<\/?[^>]+(>|$)/g, "");
|
||||
break;
|
||||
case "textFooter":
|
||||
textFooter.value = textFooter.value.replace(/<\/?[^>]+(>|$)/g, "");
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
function fetchData(data: DataTemplateDetail) {
|
||||
textHeader.value = data.detailHeader;
|
||||
textBody.value = data.detailBody;
|
||||
textFooter.value = data.detailFooter;
|
||||
}
|
||||
|
||||
const handleInput = (event: any, type: string) => {
|
||||
if (event.inputType === "insertFromPaste") {
|
||||
clearFormat(type);
|
||||
}
|
||||
const onSave = () => {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.put(config.API.commandType + `/text/${commandId.value}`, {
|
||||
detailHeader: textHeader.value,
|
||||
detailBody: textBody.value,
|
||||
detailFooter: textFooter.value,
|
||||
})
|
||||
.then(async () => {
|
||||
await fetchDataTemplate(commandId.value);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => commandId.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue && newValue !== oldValue) {
|
||||
fetchData();
|
||||
}
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
fetchData(dataTemplateDetail.value);
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
fetchData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -83,24 +85,6 @@ watch(
|
|||
v-model="textHeader"
|
||||
label="เนื้อหาคำสั่งส่วนต้น"
|
||||
/>
|
||||
<!-- <q-label>เนื้อหาคำสั่งส่วนต้น</q-label>
|
||||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="textHeader"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
class="full-width"
|
||||
v-model="textHeader"
|
||||
min-height="5rem"
|
||||
:toolbar="store.toolbarOptions"
|
||||
@input="(e:any) => handleInput(e, 'textHeader')"
|
||||
/>
|
||||
</template>
|
||||
</q-field> -->
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
|
|
@ -114,25 +98,6 @@ watch(
|
|||
v-model="textBody"
|
||||
label="เนื้อหาคำสั่งส่วนกลาง"
|
||||
/>
|
||||
|
||||
<!-- <q-label>เนื้อหาคำสั่งส่วนกลาง</q-label>
|
||||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="textBody"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
class="full-width"
|
||||
v-model="textBody"
|
||||
min-height="5rem"
|
||||
:toolbar="store.toolbarOptions"
|
||||
@input="(e:any) => handleInput(e, 'textBody')"
|
||||
/>
|
||||
</template>
|
||||
</q-field> -->
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
|
|
@ -146,24 +111,6 @@ watch(
|
|||
v-model="textFooter"
|
||||
label="เนื้อหาคำสั่งส่วนท้าย"
|
||||
/>
|
||||
<!-- <q-label>เนื้อหาคำสั่งส่วนท้าย</q-label>
|
||||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="textFooter"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
class="full-width"
|
||||
v-model="textFooter"
|
||||
min-height="5rem"
|
||||
:toolbar="store.toolbarOptions"
|
||||
@input="(e:any) => handleInput(e, 'textFooter')"
|
||||
/>
|
||||
</template>
|
||||
</q-field> -->
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
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";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
|
|
@ -22,31 +24,38 @@ const {
|
|||
|
||||
const idOrder = defineModel<string>("idOrder", { required: true }); // แยก tab
|
||||
const type = defineModel<string>("type", { required: true }); // แยก tab
|
||||
const dataTemplateDetail = defineModel<DataTemplateDetail>(
|
||||
"dataTemplateDetail",
|
||||
{
|
||||
required: true,
|
||||
}
|
||||
);
|
||||
|
||||
const documentFile = ref<File | null>(null); // file
|
||||
const isLoadPDF = ref<boolean>(false);
|
||||
|
||||
/** download file */
|
||||
async function downloadFile() {
|
||||
showLoader();
|
||||
const data = await {
|
||||
const body = {
|
||||
template: "command_test",
|
||||
reportName: "docx-report",
|
||||
data: {
|
||||
title: "สำนักงานเขตพระนคร",
|
||||
commandNo: "๑๒",
|
||||
commandYear: "๒๕๖๗",
|
||||
commandTitle: "ย้ายข้าราชการ",
|
||||
detailHeader: "",
|
||||
detailBody:
|
||||
"อาศัยอำนาจตามความในมาตรา ๔๔ และมาตรา ๕๒ (๔) แห่งพระราชบัญญัติระเบียบข้าราชการ-กรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. ๒๕๕๔ ประกอบกับมาตรา ๖๒ และมาตรา ๖๓ แห่งพระราชบัญญัติระเบียบข้าราชการพลเรือน พ.ศ. ๒๕๕๑ มาตรา ๑๔ แห่งพระราชกฤษฎีกาการจ่าย-เงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ. ๒๕๓๕ มติ ก.ก. ครั้งที่ ๕/๒๕๕๔",
|
||||
detailFooter:
|
||||
"เมื่อวันที่ ๒๑ กรกฎาคม ๒๕๕๔ และมติ ก.ก. ครั้งที่ ๖/๒๕๕๔ เมื่อวันที่ ๑๘ สิงหาคม ๒๕๕๔ ให้ย้ายข้าราชการ จำนวน ๑ ราย ดังบัญชีรายละเอียดแนบท้ายนี้",
|
||||
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(data, `คำสั่ง`);
|
||||
|
||||
await genReport(body, `คำสั่ง`);
|
||||
}
|
||||
|
||||
/** uplaod file */
|
||||
|
|
@ -71,25 +80,20 @@ function backPage() {
|
|||
}
|
||||
}
|
||||
|
||||
function replaceAllTag(html: string) {
|
||||
return html.replace("div", "p");
|
||||
}
|
||||
|
||||
async function fetchDocumentTemplate() {
|
||||
async function fetchDocumentTemplate(dataTemple: DataTemplateDetail) {
|
||||
showLoader();
|
||||
const data = await {
|
||||
const body = {
|
||||
template: "command_test",
|
||||
reportName: "docx-report",
|
||||
data: {
|
||||
title: "สำนักงานเขตพระนคร",
|
||||
commandNo: "๑๒",
|
||||
commandYear: "๒๕๖๗",
|
||||
commandTitle: "ย้ายข้าราชการ",
|
||||
detailHeader: "",
|
||||
detailBody:
|
||||
"อาศัยอำนาจตามความในมาตรา ๔๔ และมาตรา ๕๒ (๔) แห่งพระราชบัญญัติระเบียบข้าราชการ-กรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. ๒๕๕๔ ประกอบกับมาตรา ๖๒ และมาตรา ๖๓ แห่งพระราชบัญญัติระเบียบข้าราชการพลเรือน พ.ศ. ๒๕๕๑ มาตรา ๑๔ แห่งพระราชกฤษฎีกาการจ่าย-เงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ. ๒๕๓๕ มติ ก.ก. ครั้งที่ ๕/๒๕๕๔",
|
||||
detailFooter:
|
||||
"เมื่อวันที่ ๒๑ กรกฎาคม ๒๕๕๔ และมติ ก.ก. ครั้งที่ ๖/๒๕๕๔ เมื่อวันที่ ๑๘ สิงหาคม ๒๕๕๔ ให้ย้ายข้าราชการ จำนวน ๑ ราย ดังบัญชีรายละเอียดแนบท้ายนี้",
|
||||
issue: ".....", //
|
||||
title: "....", //
|
||||
commandNo: "....",
|
||||
commandYear: ".....",
|
||||
commandTitle: dataTemple.name, //name
|
||||
detailHeader: dataTemple.detailHeader,
|
||||
detailBody: dataTemple.detailBody,
|
||||
detailFooter: dataTemple.detailFooter,
|
||||
commandDate: "๑ สิงหาคม ๒๕๖๗",
|
||||
name: "นายสมชาย ใจดี",
|
||||
position: "ผู้อำนวยการเขตพระนคร",
|
||||
|
|
@ -97,7 +101,7 @@ async function fetchDocumentTemplate() {
|
|||
};
|
||||
|
||||
await axios
|
||||
.post(config.API.reportTemplate + `/docx/html`, data, {
|
||||
.post(config.API.reportTemplate + `/docx/html`, body, {
|
||||
headers: {
|
||||
accept: "application/pdf",
|
||||
"content-Type": "application/json",
|
||||
|
|
@ -105,32 +109,33 @@ async function fetchDocumentTemplate() {
|
|||
responseType: "blob",
|
||||
})
|
||||
.then(async (res) => {
|
||||
isLoadPDF.value = false;
|
||||
const blob = new Blob([res.data]);
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
|
||||
const pdfData = await usePDF(`${objectUrl}`);
|
||||
showLoader();
|
||||
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
hideLoader();
|
||||
isLoadPDF.value = true;
|
||||
}, 1500);
|
||||
})
|
||||
.catch(async (e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => idOrder.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue && newValue !== oldValue) {
|
||||
fetchDocumentTemplate();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
onMounted(() => {
|
||||
fetchDocumentTemplate(dataTemplateDetail.value);
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
fetchDocumentTemplate,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -222,7 +227,31 @@ watch(
|
|||
</template>
|
||||
<template v-slot:after>
|
||||
<div class="q-pa-md">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
<VuePDF
|
||||
v-if="isLoadPDF"
|
||||
ref="vuePDFRef"
|
||||
:pdf="pdfSrc"
|
||||
:page="page"
|
||||
fit-parent
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="full-width row flex-center text-accent q-gutter-sm"
|
||||
>
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 40vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<q-spinner color="primary" size="3em" />
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,9 @@ interface ListOrder {
|
|||
id: string;
|
||||
commandCode: string;
|
||||
name: string;
|
||||
status: boolean;
|
||||
isActive: boolean;
|
||||
category?: string;
|
||||
commandSysId: string;
|
||||
}
|
||||
|
||||
interface ListTemplateSalary {
|
||||
|
|
|
|||
|
|
@ -1 +1,22 @@
|
|||
export type {};
|
||||
interface DataCommandSys {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
lastUpdatedAt: string;
|
||||
createdFullName: string;
|
||||
lastUpdateFullName: string;
|
||||
sysName: string;
|
||||
sysDescription: string;
|
||||
}
|
||||
|
||||
interface DataTemplateDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string;
|
||||
detailHeader: string;
|
||||
detailBody: string;
|
||||
detailFooter: string;
|
||||
isActive: boolean;
|
||||
commandSysId: string;
|
||||
}
|
||||
|
||||
export type { DataCommandSys, DataTemplateDetail };
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@ import type {
|
|||
Tabs,
|
||||
DateOption,
|
||||
} from "@/modules/05_command/interface/index/Main";
|
||||
import type {
|
||||
DataCommandSys,
|
||||
DataTemplateDetail,
|
||||
} from "@/modules/05_command/interface/response/Main";
|
||||
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
import PageOrder from "@/modules/05_command/components/ViewPdf.vue";
|
||||
|
|
@ -30,7 +34,12 @@ const {
|
|||
messageError,
|
||||
} = mixin;
|
||||
|
||||
const isActive = ref<string>(""); // สถานะของรายการคำสั่ง
|
||||
const childTemplateDetailRef = ref<InstanceType<typeof TemplateDetail> | null>(
|
||||
null
|
||||
); //ref components ข้อความต้นแบบ
|
||||
const childPageOrderRef = ref<InstanceType<typeof PageOrder> | null>(null); //ref components คำสั่ง
|
||||
|
||||
const isActive = ref<boolean>(true); // สถานะของรายการคำสั่ง
|
||||
// options สถานะการใช้งาน
|
||||
const activeOptions = ref<ActiveOptions[]>([
|
||||
{
|
||||
|
|
@ -70,20 +79,73 @@ const listOrder = ref<ListOrder[]>([]); // list คำสั่ง
|
|||
const status = ref<boolean>(false); // สถานะ
|
||||
const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
|
||||
const dialogFormCommand = ref<boolean>(false); // model คำสั่ง
|
||||
const dataTemplateDetail = ref<DataTemplateDetail>();
|
||||
|
||||
const page = ref<number>(1); // หน้า
|
||||
const pageSize = ref<number>(13); // จำนวนข้อมูล
|
||||
const maxPage = ref<number>(0); // จำนวนหน้า
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นดึงรายการประเภทคำสั่ง
|
||||
*/
|
||||
async function fetchCommandType() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandType + `/admin`, {
|
||||
params: {
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
isActive: isActive.value,
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
listOrder.value = data.commandTypes;
|
||||
maxPage.value = Math.ceil(data.total / pageSize.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลรายการหมวดหมู่
|
||||
*/
|
||||
function fetchCommandSys() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.commandSysList)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
const option = data.map((e: DataCommandSys) => ({
|
||||
id: e.id,
|
||||
name: e.sysName,
|
||||
}));
|
||||
dataCategory.value = option;
|
||||
categoryOP.value = option;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นค้นหาคำสั่ง ตามสถานะ
|
||||
* @param val สถานะ true/false
|
||||
*/
|
||||
function searchByStatus(val: string) {
|
||||
console.log(val);
|
||||
function searchByStatus() {
|
||||
activeOrderId.value = "";
|
||||
page.value = 1;
|
||||
pageSize.value = 13;
|
||||
fetchCommandType();
|
||||
}
|
||||
|
||||
/** เปิด dialog */
|
||||
function onDialogAdd() {
|
||||
isEdit.value = false;
|
||||
dialogFormCommand.value = true;
|
||||
}
|
||||
/**
|
||||
* เปิด dialog Edit
|
||||
* @param data ข้อมูลคำสั่ง
|
||||
|
|
@ -91,8 +153,8 @@ function onDialogAdd() {
|
|||
function onDialogEdit(data: ListOrder) {
|
||||
idOrder.value = data.id;
|
||||
name.value = data.name;
|
||||
status.value = data.status;
|
||||
|
||||
status.value = data.isActive;
|
||||
category.value = data.commandSysId;
|
||||
isEdit.value = true;
|
||||
dialogFormCommand.value = true;
|
||||
}
|
||||
|
|
@ -103,52 +165,82 @@ function onDialogEdit(data: ListOrder) {
|
|||
*/
|
||||
function onDelete(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
// http
|
||||
// .delete(config.API.)
|
||||
// .then((res) => {})
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {});
|
||||
showLoader();
|
||||
http
|
||||
.delete(config.API.commandType + `/${id}`)
|
||||
.then(async () => {
|
||||
await fetchCommandType();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** ปิด dialog */
|
||||
/**
|
||||
* ปิด dialog
|
||||
*/
|
||||
function closeDialog() {
|
||||
idOrder.value = "";
|
||||
isEdit.value = false;
|
||||
dialogFormCommand.value = false;
|
||||
name.value = "";
|
||||
status.value = false;
|
||||
}
|
||||
|
||||
/** บันทึกข้อมูล dialog */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {});
|
||||
}
|
||||
|
||||
/** เก็บ id list คำสั่งที่เลือก เพื่อใช้ class */
|
||||
function selectInbox(data: ListOrder) {
|
||||
activeOrderId.value = data.id;
|
||||
category.value = "";
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นดึงรายการประเภทคำสั่ง
|
||||
* บันทึกข้อมูลการแก้ไขคำสั่ง
|
||||
*/
|
||||
async function fetchOrderType() {
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.commandType + `/${idOrder.value}`, {
|
||||
name: name.value,
|
||||
commandSysId: category.value,
|
||||
isActive: status.value,
|
||||
})
|
||||
.then(async () => {
|
||||
await fetchCommandType();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
closeDialog();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* เก็บ id list คำสั่งที่เลือก เพื่อใช้ class
|
||||
*/
|
||||
function selectInbox(data: ListOrder) {
|
||||
activeOrderId.value = data.id;
|
||||
fetchDataCommandTypeId(data.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลรายละเอียดคำสั่ง
|
||||
* @param id คำสั่ง
|
||||
*/
|
||||
async function fetchDataCommandTypeId(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandType)
|
||||
.get(config.API.commandType + `/${id}`)
|
||||
.then(async (res) => {
|
||||
listOrder.value = res.data.result.map((item: any) => {
|
||||
return {
|
||||
name: item.name,
|
||||
category: item.category,
|
||||
commandCode: item.commandCode,
|
||||
id: item.id,
|
||||
status: true,
|
||||
};
|
||||
});
|
||||
const data = res.data.result;
|
||||
dataTemplateDetail.value = data;
|
||||
await Promise.all([
|
||||
childTemplateDetailRef?.value?.fetchData(data),
|
||||
childPageOrderRef?.value?.fetchDocumentTemplate(data),
|
||||
]);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -167,14 +259,14 @@ function filterSelector(val: string, update: Function) {
|
|||
update(() => {
|
||||
category.value = val ? "" : category.value;
|
||||
categoryOP.value = dataCategory.value.filter(
|
||||
(v: any) => v.name.indexOf(val) > -1
|
||||
(v: DateOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/** เริ่มเมื่อโหลดหน้านี้*/
|
||||
onMounted(() => {
|
||||
fetchOrderType();
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchCommandType(), fetchCommandSys()]);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -182,11 +274,12 @@ onMounted(() => {
|
|||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการคำสั่งและ Template
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm">
|
||||
|
||||
<div class="row q-col-gutter-sm" style="height: 85vh; display: flex">
|
||||
<div class="col-4">
|
||||
<q-card bordered style="height: 100%">
|
||||
<q-card bordered style="min-height: 100%">
|
||||
<div class="row items-center q-pa-sm">
|
||||
<div class="col-2">
|
||||
<!-- <div class="col-2">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
|
|
@ -197,7 +290,7 @@ onMounted(() => {
|
|||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div> -->
|
||||
<q-space />
|
||||
<div class="col-12 col-md-6">
|
||||
<q-select
|
||||
|
|
@ -210,82 +303,114 @@ onMounted(() => {
|
|||
option-label="label"
|
||||
option-value="value"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="searchByStatus"
|
||||
></q-select>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-sm">
|
||||
<q-scroll-area style="height: 70vh" class="scrollStyle">
|
||||
<q-list
|
||||
v-for="(item, index) in listOrder"
|
||||
:key="item.id"
|
||||
class="q-pr-sm"
|
||||
<q-list
|
||||
v-for="(item, index) in listOrder"
|
||||
:key="item.id"
|
||||
class="q-pr-sm"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="activeOrderId === item.id"
|
||||
active-class="my-menu_link"
|
||||
@click="selectInbox(item)"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="activeOrderId === item.id"
|
||||
active-class="my-menu_link"
|
||||
@click="selectInbox(item)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
{{ item.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side center @click.stop>
|
||||
<q-icon
|
||||
name="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
flat
|
||||
dense
|
||||
>
|
||||
<q-menu
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
>
|
||||
<q-list dense style="min-width: 160px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onDialogEdit(item)"
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
{{ item.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side center @click.stop>
|
||||
<q-icon
|
||||
name="mdi-dots-vertical"
|
||||
class="q-pa-none q-ml-xs"
|
||||
color="grey-13"
|
||||
flat
|
||||
dense
|
||||
>
|
||||
<q-menu transition-show="jump-down" transition-hide="jump-up">
|
||||
<q-list dense style="min-width: 160px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onDialogEdit(item)"
|
||||
>
|
||||
<q-item-section
|
||||
style="min-width: 0px"
|
||||
avatar
|
||||
class="q-py-sm"
|
||||
>
|
||||
<q-item-section
|
||||
style="min-width: 0px"
|
||||
avatar
|
||||
class="q-py-sm"
|
||||
>
|
||||
<q-icon color="edit" size="xs" name="mdi-pencil" />
|
||||
</q-item-section>
|
||||
<q-item-section>แก้ไข</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onDelete(item.id)"
|
||||
<q-icon color="edit" size="xs" name="mdi-pencil" />
|
||||
</q-item-section>
|
||||
<q-item-section>แก้ไข</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onDelete(item.id)"
|
||||
>
|
||||
<q-item-section
|
||||
style="min-width: 0px"
|
||||
avatar
|
||||
class="q-py-sm"
|
||||
>
|
||||
<q-item-section
|
||||
style="min-width: 0px"
|
||||
avatar
|
||||
class="q-py-sm"
|
||||
>
|
||||
<q-icon color="red" size="xs" name="mdi-delete" />
|
||||
</q-item-section>
|
||||
<q-item-section>ลบ</q-item-section>
|
||||
</q-item>
|
||||
<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-section>
|
||||
</q-item>
|
||||
<q-separator v-if="listOrder.length !== index + 1" />
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
<q-separator />
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="around" v-if="listOrder.length > 0">
|
||||
<q-pagination
|
||||
class="q-pa-sm"
|
||||
v-model="page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="maxPage"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchCommandType"
|
||||
></q-pagination>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
|
|
@ -313,20 +438,27 @@ onMounted(() => {
|
|||
<q-tab-panels v-model="store.currentTab" animated>
|
||||
<q-tab-panel name="order">
|
||||
<PageOrder
|
||||
ref="childPageOrderRef"
|
||||
v-model:type="store.currentTab"
|
||||
v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
|
||||
:id-order="activeOrderId"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="account">
|
||||
<PageOrder
|
||||
ref="childPageOrderRef"
|
||||
v-model:type="store.currentTab"
|
||||
v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
|
||||
:id-order="activeOrderId"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="template">
|
||||
<TemplateDetail
|
||||
ref="childTemplateDetailRef"
|
||||
v-model:type="store.currentTab"
|
||||
v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
|
||||
:command-id="activeOrderId"
|
||||
:fetch-data-template="fetchDataCommandTypeId"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue