<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { onMounted, reactive } from 'vue';
|
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { getTableList } from '#/api/extend/table';
|
import { $t } from '#/locales';
|
import { useBaseStore } from '#/store';
|
import { onlineUtils } from '#/utils/jnpf';
|
import { buildListPrintDocument } from '#/views/common/dynamicModel/list/helpers/listPrint';
|
|
defineOptions({ name: 'ExtendTableDemoPrintTable' });
|
|
interface State {
|
industryTypeList: any[];
|
list: any[];
|
}
|
|
const state = reactive<State>({
|
industryTypeList: [],
|
list: [],
|
});
|
const baseStore = useBaseStore();
|
const columns: BasicColumn[] = [
|
{ title: '项目名称', dataIndex: 'projectName', width: 200 },
|
{ title: '项目编码', dataIndex: 'projectCode', width: 160 },
|
{ title: '项目类型', dataIndex: 'projectType', width: 120 },
|
{ title: '项目阶段', dataIndex: 'projectPhase', width: 120 },
|
{ title: '客户名称', dataIndex: 'customerName', width: 200 },
|
{ title: '费用金额', dataIndex: 'costAmount', width: 100 },
|
{ title: '已用金额', dataIndex: 'tunesAmount', width: 100 },
|
{ title: '预计收入', dataIndex: 'projectedIncome', width: 100 },
|
];
|
const [registerTable] = useVxeTable({
|
api: getTableList,
|
columns,
|
useSearchForm: true,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
],
|
},
|
afterFetch: (data) => {
|
state.list = data;
|
state.list.map((o) => {
|
const item = state.industryTypeList.find((j) => j.id == o.projectType);
|
o.projectType = item && item.fullName ? item.fullName : '';
|
for (const key in o) {
|
o[key] = o[key] ? o[key] : '';
|
}
|
return o;
|
});
|
return data;
|
},
|
});
|
async function handlePrint() {
|
const printColumns = columns
|
.filter((column) => column.dataIndex)
|
.map((column) => ({ field: column.dataIndex!, title: String(column.title || ''), width: Number(column.width) || undefined }));
|
const html = buildListPrintDocument({
|
columns: printColumns,
|
direction: 'landscape',
|
pageSize: Math.max(1, state.list.length),
|
pages: [{ pageNumber: 1, rows: state.list }],
|
paperType: 'A3',
|
title: '表格打印',
|
total: state.list.length,
|
});
|
await onlineUtils.hiprint({ clientOptions: { title: '表格打印' }, html });
|
}
|
async function init() {
|
state.industryTypeList = (await baseStore.getDictionaryData('IndustryType')) as any[];
|
}
|
|
onMounted(() => init());
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button pre-icon="icon-ym icon-ym-report-icon-preview-print" type="primary" @click="handlePrint()">打印</a-button>
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
</div>
|
</template>
|
