report salary
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
d26d9069b5
commit
2283614925
3 changed files with 639 additions and 8 deletions
|
|
@ -52,6 +52,8 @@ interface DataStructureTree {
|
||||||
totalRootPositionNextUse: number;
|
totalRootPositionNextUse: number;
|
||||||
totalRootPositionNextVacant: number;
|
totalRootPositionNextVacant: number;
|
||||||
children: DataStructureTree[];
|
children: DataStructureTree[];
|
||||||
|
orgRootCode: string;
|
||||||
|
orgRootShortName: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DataStrategy {
|
interface DataStrategy {
|
||||||
|
|
|
||||||
|
|
@ -72,12 +72,18 @@ interface ProbationReportType {
|
||||||
evaluate_date: Date;
|
evaluate_date: Date;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FileType{
|
interface FileType {
|
||||||
path:string
|
path: string;
|
||||||
pathname:string
|
pathname: string;
|
||||||
fileName:string
|
fileName: string;
|
||||||
title:string
|
title: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface DataOption {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
export type {
|
export type {
|
||||||
ListDataText,
|
ListDataText,
|
||||||
DataSurvey,
|
DataSurvey,
|
||||||
|
|
@ -85,5 +91,6 @@ export type {
|
||||||
AppointTopicMain,
|
AppointTopicMain,
|
||||||
AppointTopic,
|
AppointTopic,
|
||||||
ProbationReportType,
|
ProbationReportType,
|
||||||
FileType
|
FileType,
|
||||||
|
DataOption,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,629 @@
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, computed } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
import { checkPermission } from "@/utils/permissions";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
|
||||||
|
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
|
||||||
|
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
|
||||||
|
import type { DataStructureTree } from "@/interface/main";
|
||||||
|
import type { DataOption } from "@/modules/21_report/interface/Main";
|
||||||
|
|
||||||
|
import LoadView from "@/components/LoadView.vue";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useSalaryListSDataStore();
|
||||||
|
const storeEmp = useSalaryEmployeeListSDataStore();
|
||||||
|
|
||||||
|
const { messageError, showLoader, hideLoader } = useCounterMixin();
|
||||||
|
|
||||||
|
const year = ref<number>(new Date().getFullYear());
|
||||||
|
const isLoadFilePdf = ref<boolean>(false);
|
||||||
|
const employeeClass = ref<string>("officer");
|
||||||
|
const employeeClassOption = ref<DataOption[]>([
|
||||||
|
{ id: "officer", name: "ข้าราชการ กทม. สามัญ" },
|
||||||
|
{ id: "employee", name: "ลูกจ้างประจำ กทม." },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const isRound = ref<boolean>(false);
|
||||||
|
|
||||||
|
const round = ref<any>("");
|
||||||
|
const roundOptions = ref<any[]>([]);
|
||||||
|
|
||||||
|
const group = ref<string>("GROUP1");
|
||||||
|
const groupOptions = ref<DataOption[]>([
|
||||||
|
{ id: "GROUP1", name: "กลุ่ม 1" },
|
||||||
|
{ id: "GROUP2", name: "กลุ่ม 2" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const report = ref<string>("");
|
||||||
|
const reportOption = computed(() => {
|
||||||
|
const storeData = employeeClass.value === "officer" ? store : storeEmp;
|
||||||
|
|
||||||
|
if (round.value.shortCode === "APR") {
|
||||||
|
return storeData.itemDownloadApr.filter((e) => e.type !== "pdf");
|
||||||
|
} else if (round.value.shortCode === "OCT") {
|
||||||
|
return storeData.itemDownloadOct.filter((e) => e.type !== "pdf");
|
||||||
|
}
|
||||||
|
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
|
||||||
|
const numOfPages = ref<number>(0);
|
||||||
|
const page = ref<number>(1);
|
||||||
|
const pdfSrc = ref<any>();
|
||||||
|
|
||||||
|
const filterTree = ref<string>("");
|
||||||
|
const nodeId = ref<string>("");
|
||||||
|
const nodeName = ref<string>("");
|
||||||
|
const node = ref<DataStructureTree[]>([]);
|
||||||
|
|
||||||
|
const detailReport = ref<any>();
|
||||||
|
|
||||||
|
/** ฟังก์ชันเรียกข้อมูลรอบการขึ้นเงินเดือน*/
|
||||||
|
async function fetchDataRound() {
|
||||||
|
isRound.value = false;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(
|
||||||
|
config.API.salaryPeriodActive(year.value.toString()) +
|
||||||
|
`?page=${1}&pageSize=${50}&keyword=&year=0`
|
||||||
|
)
|
||||||
|
.then(async (res) => {
|
||||||
|
const data = await res.data.result.data;
|
||||||
|
if (data.length > 0) {
|
||||||
|
isRound.value = true;
|
||||||
|
roundOptions.value = await data.map((e: any) => ({
|
||||||
|
...e,
|
||||||
|
shortCode: e.period,
|
||||||
|
name:
|
||||||
|
e.period === "OCT"
|
||||||
|
? "รอบตุลาคม "
|
||||||
|
: e.period === "SPECIAL"
|
||||||
|
? "รอบพิเศษ "
|
||||||
|
: "รอบเมษายน ",
|
||||||
|
}));
|
||||||
|
round.value = roundOptions.value[0];
|
||||||
|
await fetchDataOrg(roundOptions.value[0].revisionId);
|
||||||
|
} else {
|
||||||
|
isRound.value = false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchDataOrg(revisionId: string) {
|
||||||
|
if (revisionId) {
|
||||||
|
await http
|
||||||
|
.get(config.API.activeOrganizationRootById(revisionId))
|
||||||
|
.then(async (res) => {
|
||||||
|
const data = res.data.result.map((item: DataStructureTree) => ({
|
||||||
|
...item,
|
||||||
|
children: null,
|
||||||
|
labelName: `${item.orgRootName} ${item.orgRootCode} ${item.orgRootShortName}`,
|
||||||
|
}));
|
||||||
|
node.value = data;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เลือกหน่วยงาน
|
||||||
|
* @param id id หน่วยงาน
|
||||||
|
* @param level ระดับหน่วยงาน
|
||||||
|
*/
|
||||||
|
function onSelectedNode(id: string, name: string) {
|
||||||
|
if (id !== nodeId.value) {
|
||||||
|
nodeId.value = id;
|
||||||
|
nodeName.value = name;
|
||||||
|
fetchReportPDF();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onChangeYear() {
|
||||||
|
fetchDataRound();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchReportPDF() {
|
||||||
|
if (
|
||||||
|
employeeClass.value &&
|
||||||
|
round.value &&
|
||||||
|
group.value &&
|
||||||
|
report.value &&
|
||||||
|
nodeId.value
|
||||||
|
) {
|
||||||
|
fetchDataReportUnified(report.value, employeeClass.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchDataReportUnified(
|
||||||
|
reportCode: string,
|
||||||
|
employeeClass: string,
|
||||||
|
type: string = "xlsx"
|
||||||
|
) {
|
||||||
|
isLoadFilePdf.value = true;
|
||||||
|
const isHalfYearReport = (id: string) =>
|
||||||
|
["go1", "go2", "go2-01", "emp-08", "emp2-08"].includes(id);
|
||||||
|
|
||||||
|
if (isHalfYearReport(reportCode)) {
|
||||||
|
const formData: any = {
|
||||||
|
type: "HAFT",
|
||||||
|
startDate:
|
||||||
|
reportCode === "go1" || reportCode === "emp-08"
|
||||||
|
? `${round.value?.year - 1}-10-01`
|
||||||
|
: `${round.value?.year}-04-01`,
|
||||||
|
endDate:
|
||||||
|
reportCode === "go1" || reportCode === "emp-08"
|
||||||
|
? `${round.value?.year}-03-31`
|
||||||
|
: `${round.value?.year}-09-30`,
|
||||||
|
nodeId: nodeId.value,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (reportCode === "go2-01") {
|
||||||
|
formData.isRetirement = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const pathApi =
|
||||||
|
employeeClass === "officer"
|
||||||
|
? reportCode === "go2-01"
|
||||||
|
? config.API.leaveReportLeavedayRetire()
|
||||||
|
: config.API.leaveReportLeaveday("officer")
|
||||||
|
: config.API.leaveReportLeaveday("employee");
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await http.post(pathApi, formData);
|
||||||
|
const dataList = res.data.result;
|
||||||
|
await fetchDocumentTemplate(dataList);
|
||||||
|
// await genReportXLSX(dataList, data.name);
|
||||||
|
} catch (e) {
|
||||||
|
messageError($q, e);
|
||||||
|
} finally {
|
||||||
|
hideLoader();
|
||||||
|
isLoadFilePdf.value = false;
|
||||||
|
}
|
||||||
|
} else if (nodeId.value && round.value) {
|
||||||
|
const url = config.API.salaryReportListsByid(
|
||||||
|
reportCode,
|
||||||
|
nodeId.value,
|
||||||
|
round.value.id
|
||||||
|
);
|
||||||
|
const isGovernmentId = [
|
||||||
|
"gov-01",
|
||||||
|
"gov-03",
|
||||||
|
"gov-04",
|
||||||
|
"gov-04-01",
|
||||||
|
"gov-05",
|
||||||
|
"gov-05-01",
|
||||||
|
"gov-07",
|
||||||
|
"gov-07-01",
|
||||||
|
"gov-08",
|
||||||
|
].includes(reportCode);
|
||||||
|
const finalUrl = isGovernmentId ? `${url}/${group.value}` : url;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await http.get(finalUrl);
|
||||||
|
const dataList = res.data.result;
|
||||||
|
// await genReportXLSX(dataList, data.name, type);
|
||||||
|
await fetchDocumentTemplate(dataList);
|
||||||
|
} catch (e) {
|
||||||
|
messageError($q, e);
|
||||||
|
} finally {
|
||||||
|
hideLoader();
|
||||||
|
isLoadFilePdf.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เรียกไฟล์ PDF
|
||||||
|
* @param data ข้อมูลบัญชีวันลา
|
||||||
|
*/
|
||||||
|
async function fetchDocumentTemplate(data: any) {
|
||||||
|
detailReport.value = data;
|
||||||
|
await axios
|
||||||
|
.post(`${config.API.reportTemplate}/xlsx`, 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;
|
||||||
|
}, 1500);
|
||||||
|
})
|
||||||
|
.catch(async (e) => {
|
||||||
|
messageError($q, JSON.parse(await e.response.data.text()));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDownloadFile(type: string) {
|
||||||
|
const name = reportOption.value.find((e) => e.id === report.value)?.name;
|
||||||
|
genReportXLSX(detailReport.value, `${name}_${nodeName.value}`, type);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** กลับหน้าก่อนหน้าของรายงาน */
|
||||||
|
function backPage() {
|
||||||
|
if (page.value !== 1) {
|
||||||
|
page.value--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ไปหน้าต่อไปของรายงาน */
|
||||||
|
function nextPage() {
|
||||||
|
if (page.value < numOfPages.value) {
|
||||||
|
page.value++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchDataRound();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="toptitle text-dark col-12 row items-center">รายงานเงินเดือน</div>
|
<div class="toptitle text-dark col-12 row items-center">รายงานเงินเดือน</div>
|
||||||
|
|
||||||
|
<div class="q-pa-sm q-gutter-sm">
|
||||||
|
<q-card flat bordered class="col-12">
|
||||||
|
<div class="row q-col-gutter-sm q-pa-sm">
|
||||||
|
<div class="row col-12">
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="employeeClass"
|
||||||
|
:options="employeeClassOption"
|
||||||
|
label="สภานภาพ"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
bg-color="white"
|
||||||
|
@update:model-value="(report = ''), fetchReportPDF"
|
||||||
|
>
|
||||||
|
</q-select>
|
||||||
|
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
:loading="isLoadFilePdf"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="primary"
|
||||||
|
icon="download"
|
||||||
|
:disable="report === '' || nodeId === ''"
|
||||||
|
v-if="checkPermission($route)?.attrIsGet"
|
||||||
|
>
|
||||||
|
<q-menu>
|
||||||
|
<q-list style="min-width: 150px">
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click.stop.pervent="onDownloadFile('pdf')"
|
||||||
|
>
|
||||||
|
<q-item-section avatar
|
||||||
|
><q-icon color="red" name="mdi-file-pdf"
|
||||||
|
/></q-item-section>
|
||||||
|
<q-item-section>ไฟล์ .pdf</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click.stop.pervent="onDownloadFile('xlsx')"
|
||||||
|
>
|
||||||
|
<q-item-section avatar
|
||||||
|
><q-icon color="green" name="mdi-file-excel"
|
||||||
|
/></q-item-section>
|
||||||
|
<q-item-section>ไฟล์ .xlsx</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row col-12">
|
||||||
|
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||||
|
<div class="row col-12 q-col-gutter-sm items-center">
|
||||||
|
<div class="row col-md-8 col-sx-12 q-col-gutter-sm">
|
||||||
|
<div class="col-md-3 col-xs-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="year"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
year-picker
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:model-value="onChangeYear"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:model-value="
|
||||||
|
year === 0 ? 'ทั้งหมด' : Number(year) + 543
|
||||||
|
"
|
||||||
|
:label="`${'ปีงบประมาณ'}`"
|
||||||
|
bg-color="white"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-xs-6">
|
||||||
|
<q-select
|
||||||
|
v-model="round"
|
||||||
|
label="รอบการขึ้นเงินเดือน"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
:options="roundOptions"
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
@update:model-value="(report = ''), fetchReportPDF"
|
||||||
|
>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="col-md-3 col-xs-6"
|
||||||
|
v-if="employeeClass === 'officer'"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
v-model="group"
|
||||||
|
label="กลุ่ม"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
:options="groupOptions"
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
@update:model-value="fetchReportPDF"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row q-col-gutter-sm col-md-12">
|
||||||
|
<div class="col-md-4 col-xs-12">
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="report"
|
||||||
|
:options="reportOption"
|
||||||
|
label="รายงาน"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
class="bg-white"
|
||||||
|
@update:model-value="fetchReportPDF"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-card flat bordered class="col-12" v-if="isRound">
|
||||||
|
<q-card-section :horizontal="$q.screen.gt.sm">
|
||||||
|
<q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm">
|
||||||
|
<div class="col">
|
||||||
|
<q-input dense outlined v-model="filterTree" label="ค้นหา">
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="search" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white tree-container q-pa-xs">
|
||||||
|
<q-tree
|
||||||
|
dense
|
||||||
|
:nodes="node"
|
||||||
|
node-key="id"
|
||||||
|
label-key="labelName"
|
||||||
|
:filter="filterTree.trim()"
|
||||||
|
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
||||||
|
no-nodes-label="ไม่มีข้อมูล"
|
||||||
|
>
|
||||||
|
<template v-slot:default-header="prop">
|
||||||
|
<q-item
|
||||||
|
@click.stop="
|
||||||
|
onSelectedNode(prop.node.id, prop.node.orgRootName)
|
||||||
|
"
|
||||||
|
:active="nodeId === prop.node.id"
|
||||||
|
clickable
|
||||||
|
active-class="my-list-link text-primary text-weight-medium"
|
||||||
|
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="text-weight-medium">
|
||||||
|
{{ prop.node.orgRootName }}
|
||||||
|
</div>
|
||||||
|
<div class="text-weight-light text-grey-8">
|
||||||
|
{{
|
||||||
|
prop.node.orgRootCode == null
|
||||||
|
? null
|
||||||
|
: prop.node.orgRootCode
|
||||||
|
}}
|
||||||
|
{{
|
||||||
|
prop.node.orgRootShortName == null
|
||||||
|
? null
|
||||||
|
: prop.node.orgRootShortName
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-tree>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator :vertical="$q.screen.gt.xs" />
|
||||||
|
|
||||||
|
<q-card-section class="col-lg-9 col-md-8 col-xs-12 scroll">
|
||||||
|
<q-splitter
|
||||||
|
horizontal
|
||||||
|
style="
|
||||||
|
height: 63vh;
|
||||||
|
border: 1px solid rgb(210, 210, 210);
|
||||||
|
border-radius: 5px;
|
||||||
|
"
|
||||||
|
before-class="overflow-hidden disable"
|
||||||
|
separator-class="bg-white disabled"
|
||||||
|
>
|
||||||
|
<template v-slot:before>
|
||||||
|
<div class="q-px-sm">
|
||||||
|
<div class="row items-start items-center">
|
||||||
|
<div class="col">
|
||||||
|
<q-btn
|
||||||
|
padding="xs"
|
||||||
|
icon="mdi-chevron-left"
|
||||||
|
color="grey-2"
|
||||||
|
text-color="grey-5"
|
||||||
|
size="md"
|
||||||
|
class="my-auto"
|
||||||
|
@click="backPage"
|
||||||
|
:disable="page == 1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-auto">
|
||||||
|
<div class="q-pa-md flex">
|
||||||
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col text-right">
|
||||||
|
<q-btn
|
||||||
|
padding="xs"
|
||||||
|
icon="mdi-chevron-right"
|
||||||
|
color="grey-2"
|
||||||
|
text-color="grey-5"
|
||||||
|
size="md"
|
||||||
|
@click="nextPage"
|
||||||
|
:disable="page === numOfPages"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:after>
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<LoadView v-if="isLoadFilePdf" />
|
||||||
|
<VuePDF
|
||||||
|
v-else
|
||||||
|
ref="vuePDFRef"
|
||||||
|
:pdf="pdfSrc"
|
||||||
|
:page="page"
|
||||||
|
fit-parent
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:default>
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<div class="row items-start items-center">
|
||||||
|
<div class="col">
|
||||||
|
<q-btn
|
||||||
|
padding="xs"
|
||||||
|
icon="mdi-chevron-left"
|
||||||
|
color="grey-2"
|
||||||
|
text-color="grey-5"
|
||||||
|
size="md"
|
||||||
|
class="my-auto"
|
||||||
|
@click="backPage"
|
||||||
|
:disable="page == 1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-auto">
|
||||||
|
<div class="q-pa-md flex">
|
||||||
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col text-right">
|
||||||
|
<q-btn
|
||||||
|
padding="xs"
|
||||||
|
icon="mdi-chevron-right"
|
||||||
|
color="grey-2"
|
||||||
|
text-color="grey-5"
|
||||||
|
size="md"
|
||||||
|
@click="nextPage"
|
||||||
|
:disable="page === numOfPages"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-splitter>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-card flat bordered class="col-12" v-else>
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<q-banner inline-actions rounded class="bg-grey-1 text-center">
|
||||||
|
ไม่มีข้อมูล
|
||||||
|
</q-banner>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style lang="scss" scope>
|
||||||
|
.q-item.hover-green:hover {
|
||||||
|
background-color: #d5f1ee57;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.q-item.hover-green {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-container {
|
||||||
|
overflow: auto;
|
||||||
|
height: 58vh;
|
||||||
|
border: 1px solid #e6e6e7;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.my-list-link {
|
||||||
|
color: rgb(118, 168, 222);
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #a3d3fb48 !important;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 1px solid rgba(175, 185, 196, 0.217);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue