รายงานโครงสร้างและกรอบอัตรากำลัง
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
37e254be2e
commit
2609b825dd
2 changed files with 584 additions and 1 deletions
577
src/modules/21_report/components/01_org/MainReport.vue
Normal file
577
src/modules/21_report/components/01_org/MainReport.vue
Normal file
|
|
@ -0,0 +1,577 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, reactive, ref, watch } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import axios from "axios";
|
||||||
|
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { checkPermission } from "@/utils/permissions";
|
||||||
|
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
||||||
|
|
||||||
|
import type { DataDocument } from "@/modules/02_organization/interface/index/Main";
|
||||||
|
import type { DataOption } from "@/modules/21_report/interface/Main";
|
||||||
|
|
||||||
|
import LoadView from "@/components/LoadView.vue";
|
||||||
|
/** use */
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useOrganizational(); // store โครงสร้างหน่วยงาน
|
||||||
|
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||||
|
|
||||||
|
const historyId = defineModel<string>("historyId", {
|
||||||
|
required: true,
|
||||||
|
}); // ID ประวัติโครงสร้างหน่วยงาน
|
||||||
|
const count = defineModel<number>("count", { required: true });
|
||||||
|
|
||||||
|
//หน่วยงาน
|
||||||
|
const organizationId = ref<string>(""); // ID หน่วยงาน
|
||||||
|
const organizationOpsMain = ref<DataOption[]>([]); // หน่วยงานทั้งหมด
|
||||||
|
const organizationOps = ref<DataOption[]>([]); // หน่วยงานที่เลือก
|
||||||
|
|
||||||
|
//Report
|
||||||
|
const isLoadPDF = ref<boolean>(false); // โหลดไฟล์ PDF
|
||||||
|
const detailReport = ref<any>(undefined); // รายละเอียดรายงาน
|
||||||
|
|
||||||
|
//View
|
||||||
|
const splitterModel = ref<number>(14); // ค่าตัวแบ่ง
|
||||||
|
const numOfPages = ref<number>(0); // จำนวนหน้าของรายงาน
|
||||||
|
const page = ref<number>(1); // หน้าเริ่มต้น
|
||||||
|
const pdfSrc = ref<any>(undefined); // ไฟล์ PDF
|
||||||
|
|
||||||
|
const reportVal = ref<string>(""); // ค่ารายงานที่เลือก
|
||||||
|
const baseDocument = ref<DataDocument[]>([
|
||||||
|
{
|
||||||
|
name: "บัญชี 2",
|
||||||
|
val: "report2",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "รายงานสรุปจำนวนกรอบอัตรากำลังของข้าราชการกรุงเทพมหานครสามัญ",
|
||||||
|
val: "report4",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const documentOptions = ref<DataDocument[]>(baseDocument.value);
|
||||||
|
|
||||||
|
const summary = reactive({
|
||||||
|
totalPosition: 0, // ตำแหน่งทั้งหมด
|
||||||
|
totalPositionCurrentUse: 0, // ตำแหน่งที่มีคนครอง
|
||||||
|
totalPositionCurrentVacant: 0, // ตำแหน่งว่าง
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันดึงข้อมูลโครงสร้างหน่วยงาน
|
||||||
|
* @param id id โครงสร้าง
|
||||||
|
*/
|
||||||
|
async function fetchDataOrg(id: string) {
|
||||||
|
await http
|
||||||
|
.get(config.API.orgByid(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
organizationOpsMain.value = data.data.map((v: any) => {
|
||||||
|
return {
|
||||||
|
name: v.orgRootName,
|
||||||
|
id: v.orgTreeId,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
organizationOps.value = organizationOpsMain.value;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันดึงข้อมูลสถิติ
|
||||||
|
* @param data ขอมูลโครงสร้าง
|
||||||
|
*/
|
||||||
|
async function fetchSummary() {
|
||||||
|
await http
|
||||||
|
.post(config.API.orgSummary, {
|
||||||
|
id: organizationId.value, //*Id node
|
||||||
|
type: 0, //*ประเภทnode
|
||||||
|
isNode: true, //*นับทั้ง node ไหม
|
||||||
|
})
|
||||||
|
.then(async (res: any) => {
|
||||||
|
const data = await res.data.result;
|
||||||
|
summary.totalPosition = data.totalPosition;
|
||||||
|
summary.totalPositionCurrentUse = data.totalPositionCurrentUse;
|
||||||
|
summary.totalPositionCurrentVacant = data.totalPositionCurrentVacant;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชัน DownloadReport
|
||||||
|
* @param list รายงานที่ต้องการดาวน์โหลด
|
||||||
|
*/
|
||||||
|
async function getReport(list: string) {
|
||||||
|
const listFind = baseDocument.value.find(
|
||||||
|
(item: DataDocument) => item.val == list
|
||||||
|
)?.val;
|
||||||
|
const newReport = listFind === "report2" ? "report2-history" : listFind;
|
||||||
|
pdfSrc.value = undefined;
|
||||||
|
page.value = 1;
|
||||||
|
isLoadPDF.value = true;
|
||||||
|
if (newReport) {
|
||||||
|
await http
|
||||||
|
.get(config.API.orgReport(newReport) + `/${organizationId.value}`)
|
||||||
|
.then(async (res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
detailReport.value = data;
|
||||||
|
await fetchDocumentTemplate(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
isLoadPDF.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันเรียกไฟล์ PDF
|
||||||
|
* @param data ข้อมูลบัญชีวันลา
|
||||||
|
*/
|
||||||
|
async function fetchDocumentTemplate(data: any) {
|
||||||
|
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()));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSearchReport() {
|
||||||
|
showLoader();
|
||||||
|
try {
|
||||||
|
fetchSummary();
|
||||||
|
getReport(reportVal.value);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error showing loader:", error);
|
||||||
|
} finally {
|
||||||
|
hideLoader();
|
||||||
|
}
|
||||||
|
// Implement search functionality here
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันค้นหาคำใน select
|
||||||
|
* @param val คำค้นหา
|
||||||
|
* @param update function
|
||||||
|
* @param type ประเภท select
|
||||||
|
*/
|
||||||
|
function filterSelector(val: string, update: Function, type: string) {
|
||||||
|
switch (type) {
|
||||||
|
case "organization":
|
||||||
|
update(() => {
|
||||||
|
organizationOps.value = organizationOpsMain.value.filter(
|
||||||
|
(v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "report":
|
||||||
|
update(() => {
|
||||||
|
documentOptions.value = baseDocument.value.filter(
|
||||||
|
(v: DataDocument) => v.name.toLowerCase().indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ล้างตัวกรอง */
|
||||||
|
function clearFilter() {
|
||||||
|
pdfSrc.value = undefined;
|
||||||
|
detailReport.value = undefined;
|
||||||
|
numOfPages.value = 0; // จำนวนหน้าของรายงาน
|
||||||
|
organizationId.value = "";
|
||||||
|
reportVal.value = "";
|
||||||
|
summary.totalPosition = 0;
|
||||||
|
summary.totalPositionCurrentUse = 0;
|
||||||
|
summary.totalPositionCurrentVacant = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** กลับหน้าก่อนหน้าของรายงาน */
|
||||||
|
function backPage() {
|
||||||
|
if (page.value !== 1) {
|
||||||
|
page.value--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ไปหน้าต่อไปของรายงาน */
|
||||||
|
function nextPage() {
|
||||||
|
if (page.value < numOfPages.value) {
|
||||||
|
page.value++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** callback function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนแปลง activeId */
|
||||||
|
watch(
|
||||||
|
() => store.activeId,
|
||||||
|
() => {
|
||||||
|
store.activeId && fetchDataOrg(store.activeId?.toString());
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
|
||||||
|
watch(
|
||||||
|
() => count.value,
|
||||||
|
() => {
|
||||||
|
clearFilter();
|
||||||
|
organizationOpsMain.value = [];
|
||||||
|
organizationOps.value = [];
|
||||||
|
fetchDataOrg(historyId.value);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => store.typeOrganizational,
|
||||||
|
() => {
|
||||||
|
clearFilter();
|
||||||
|
organizationOpsMain.value = [];
|
||||||
|
organizationOps.value = [];
|
||||||
|
store.activeId && fetchDataOrg(store.activeId?.toString());
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* lifecycle Hook ทำเมือ่ Components ถูกเรียกใช้งาน
|
||||||
|
* ุ และดึงช้อมูลโครงสร้างตาม ID ของประเภทโครงสร้าง ปัจจุบัน,แบบร่าง
|
||||||
|
*/
|
||||||
|
onMounted(async () => {
|
||||||
|
const id =
|
||||||
|
store.typeOrganizational === "current" ? store.activeId : historyId.value;
|
||||||
|
|
||||||
|
id && (await fetchDataOrg(id));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSearchReport">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div class="col-12">
|
||||||
|
<q-card class="q-pa-sm">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div class="col">
|
||||||
|
<q-card flat bordered>
|
||||||
|
<q-card-section
|
||||||
|
bordered
|
||||||
|
class="bg-primary text-subtitle2 text-white q-pa-sm row items-center"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-filter" class="q-mr-xs" />
|
||||||
|
ตัวกรอง
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
size="12px"
|
||||||
|
class="q-px-sm"
|
||||||
|
rounded
|
||||||
|
flat
|
||||||
|
label="ล้างทั้งหมด"
|
||||||
|
@click.stop.prevent="clearFilter"
|
||||||
|
/>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section class="q-pa-none">
|
||||||
|
<div class="col-12 q-pb-xs q-px-sm">
|
||||||
|
<q-select
|
||||||
|
class="bg-white"
|
||||||
|
dense
|
||||||
|
borderless
|
||||||
|
hide-selected
|
||||||
|
fill-input
|
||||||
|
hide-bottom-space
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
v-model="organizationId"
|
||||||
|
:options="organizationOps"
|
||||||
|
label="หน่วยงาน"
|
||||||
|
use-input
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn,'organization' )"
|
||||||
|
>
|
||||||
|
<template v-slot:no-option>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section class="text-grey">
|
||||||
|
ไม่มีข้อมูล
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
<div class="col-12 q-pb-xs q-px-sm">
|
||||||
|
<q-select
|
||||||
|
class="bg-white"
|
||||||
|
dense
|
||||||
|
borderless
|
||||||
|
hide-selected
|
||||||
|
fill-input
|
||||||
|
hide-bottom-space
|
||||||
|
option-label="name"
|
||||||
|
option-value="val"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
v-model="reportVal"
|
||||||
|
:options="documentOptions"
|
||||||
|
label="รายงาน"
|
||||||
|
use-input
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn,'report' )"
|
||||||
|
>
|
||||||
|
<template v-slot:no-option>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section class="text-grey">
|
||||||
|
ไม่มีข้อมูล
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
class="q-px-md"
|
||||||
|
label="ค้นหา"
|
||||||
|
unelevated
|
||||||
|
color="public"
|
||||||
|
type="submit"
|
||||||
|
:disable="organizationId === ''"
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xs-12">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="col-12">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
|
||||||
|
>
|
||||||
|
<div class="row col q-pa-sm item">
|
||||||
|
<div class="ellipsis">ตำแหน่งทั้งหมด</div>
|
||||||
|
<q-space />
|
||||||
|
<q-badge
|
||||||
|
color="secondary"
|
||||||
|
:label="summary.totalPosition"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row col q-pa-sm item">
|
||||||
|
<div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
|
||||||
|
<q-space />
|
||||||
|
<q-badge
|
||||||
|
color="primary"
|
||||||
|
:label="summary.totalPositionCurrentUse"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row col q-pa-sm item">
|
||||||
|
<div class="ellipsis">ตำแหน่งว่าง</div>
|
||||||
|
<q-space />
|
||||||
|
<q-badge
|
||||||
|
color="red"
|
||||||
|
:label="summary.totalPositionCurrentVacant"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row col item">
|
||||||
|
<div class="row col-12">
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
:loading="isLoadPDF"
|
||||||
|
:disable="!detailReport"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="primary"
|
||||||
|
icon="download"
|
||||||
|
v-if="checkPermission($route)?.attrIsGet"
|
||||||
|
>
|
||||||
|
<q-menu>
|
||||||
|
<q-list style="min-width: 150px">
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click.stop.prevent="
|
||||||
|
genReportXLSX(
|
||||||
|
detailReport,
|
||||||
|
`${
|
||||||
|
baseDocument.find(
|
||||||
|
(e) => e.val === reportVal
|
||||||
|
)?.name
|
||||||
|
}`,
|
||||||
|
'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.prevent="
|
||||||
|
genReportXLSX(
|
||||||
|
detailReport,
|
||||||
|
`${
|
||||||
|
baseDocument.find(
|
||||||
|
(e) => e.val === reportVal
|
||||||
|
)?.name
|
||||||
|
}`
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-splitter
|
||||||
|
class="q-mt-xs"
|
||||||
|
v-model="splitterModel"
|
||||||
|
disable
|
||||||
|
horizontal
|
||||||
|
style="
|
||||||
|
height: 75vh;
|
||||||
|
border: 1px solid rgb(210, 210, 210);
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 100%;
|
||||||
|
"
|
||||||
|
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="isLoadPDF" />
|
||||||
|
<VuePDF
|
||||||
|
v-else-if="!isLoadPDF && pdfSrc"
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.list-summary .item {
|
||||||
|
border: 1px solid rgb(231, 231, 231);
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -13,6 +13,7 @@ import type { DataOrgRevision } from "@/modules/02_organization/interface/index/
|
||||||
import type { OrgRevision } from "@/modules/02_organization/interface/response/organizational";
|
import type { OrgRevision } from "@/modules/02_organization/interface/response/organizational";
|
||||||
|
|
||||||
/** importComponents*/
|
/** importComponents*/
|
||||||
|
import MainReport from "@/modules/21_report/components/01_org/MainReport.vue";
|
||||||
import TreeView from "@/modules/21_report/components/01_org/Main.vue";
|
import TreeView from "@/modules/21_report/components/01_org/Main.vue";
|
||||||
import StructureView from "@/modules/02_organization/components/StructureMain.vue";
|
import StructureView from "@/modules/02_organization/components/StructureMain.vue";
|
||||||
import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
|
import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
|
||||||
|
|
@ -177,11 +178,16 @@ onMounted(async () => {
|
||||||
<q-card-section style="padding: 0px">
|
<q-card-section style="padding: 0px">
|
||||||
<q-tab-panels v-model="store.statusView" animated>
|
<q-tab-panels v-model="store.statusView" animated>
|
||||||
<q-tab-panel name="list" style="padding: 0px">
|
<q-tab-panel name="list" style="padding: 0px">
|
||||||
<TreeView
|
<MainReport
|
||||||
v-if="store.statusView === 'list'"
|
v-if="store.statusView === 'list'"
|
||||||
v-model:historyId="historyId"
|
v-model:historyId="historyId"
|
||||||
v-model:count="count"
|
v-model:count="count"
|
||||||
/>
|
/>
|
||||||
|
<!-- <TreeView
|
||||||
|
v-if="store.statusView === 'list'"
|
||||||
|
v-model:historyId="historyId"
|
||||||
|
v-model:count="count"
|
||||||
|
/> -->
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
||||||
<q-tab-panel name="tree" style="padding: 0px">
|
<q-tab-panel name="tree" style="padding: 0px">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue