<script lang="ts" setup>
|
import { nextTick, reactive, toRefs } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { DownOutlined } from '@ant-design/icons-vue';
|
|
const emit = defineEmits(['register', 'confirm']);
|
|
const aboutNameOptions = [
|
{ id: '@ReportName', fullName: '报表名称' },
|
{ id: '@SheetName', fullName: '工作表名' },
|
];
|
const aboutWorkbookPageNumberOptions = [
|
{ id: '@PageNumbers', fullName: '工作簿页码' },
|
{ id: '@TotalPages', fullName: '工作簿总页数' },
|
];
|
const aboutWorksheetPageNumberOptions = [
|
{ id: '@SheetPageNumbers', fullName: '工作表页码' },
|
{ id: '@SheetTotalPages', fullName: '工作表总页数' },
|
];
|
const aboutDateOptions = [
|
{ id: '@DateA', fullName: 'yyyy-MM-dd' },
|
{ id: '@DateB', fullName: 'MM-dd' },
|
{ id: '@DateC', fullName: 'MM/dd/YYYY' },
|
{ id: '@DateD', fullName: 'MM/dd' },
|
];
|
const aboutTimeOptions = [
|
{ id: '@TimeA', fullName: 'HH:mm:ss' },
|
{ id: '@TimeB', fullName: 'HH:mm' },
|
{ id: '@TimeC', fullName: 'AM/PM HH:mm:ss' },
|
{ id: '@TimeD', fullName: 'AM/PM HH:mm' },
|
];
|
|
const headerMaps = [
|
{ id: 'leftTop', label: '左区域' },
|
{ id: 'centerTop', label: '中间区域' },
|
{ id: 'rightTop', label: '右区域' },
|
];
|
const footerMaps = [
|
{ id: 'leftBottom', label: '左区域' },
|
{ id: 'centerBottom', label: '中间区域' },
|
{ id: 'rightBottom', label: '右区域' },
|
];
|
|
interface State {
|
customValue: any;
|
}
|
|
const state = reactive<State>({
|
customValue: {},
|
});
|
const { customValue } = toRefs(state);
|
|
const [registerModal, { closeModal }] = useModalInner(init);
|
|
function init(data: any) {
|
state.customValue = { ...data };
|
}
|
|
function handleSelectMenu(type: any, field: any) {
|
const oldValue = state.customValue[type];
|
state.customValue[type] = oldValue !== undefined && oldValue !== null && oldValue !== '' ? `${oldValue}${field}` : field;
|
}
|
|
function handleSubmit() {
|
emit('confirm', state.customValue);
|
nextTick(() => closeModal());
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" width="820px" class="jnpf-parameter-modal" @register="registerModal" title="自定义页眉页脚" @ok="handleSubmit" destroy-on-close>
|
<div class="print-page-header-custom-wrap">
|
<div class="title">页眉区域</div>
|
<ul class="main-modules">
|
<li class="single-module" v-for="item in headerMaps" :key="item.id">
|
<div class="module-top-handle">
|
<span class="left-side">{{ item.label }}</span>
|
<span class="right-side">
|
<a-dropdown :trigger="['click']" destroy-popup-on-hide>
|
<a-button type="link">系统变量<DownOutlined /></a-button>
|
<template #overlay>
|
<a-menu class="print-custom-dropdown-menu">
|
<a-menu-item v-for="option in aboutNameOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
<a-menu-divider />
|
<a-menu-item v-for="option in aboutWorkbookPageNumberOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
<a-menu-divider />
|
<a-menu-item v-for="option in aboutWorksheetPageNumberOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
<a-menu-divider />
|
<a-menu-item v-for="option in aboutDateOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
<a-menu-divider />
|
<a-menu-item v-for="option in aboutTimeOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
</span>
|
</div>
|
<div class="module-bottom-handle">
|
<a-textarea v-model:value="customValue[item.id]" placeholder="请输入" :rows="4" />
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="print-page-header-custom-wrap">
|
<div class="title">页脚区域</div>
|
<ul class="main-modules">
|
<li class="single-module" v-for="item in footerMaps" :key="item.id">
|
<div class="module-top-handle">
|
<span class="left-side">{{ item.label }}</span>
|
<span class="right-side">
|
<a-dropdown :trigger="['click']" destroy-popup-on-hide>
|
<a-button type="link">系统变量<DownOutlined /></a-button>
|
<template #overlay>
|
<a-menu class="print-custom-dropdown-menu">
|
<a-menu-item v-for="option in aboutNameOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
<a-menu-divider />
|
<a-menu-item v-for="option in aboutWorkbookPageNumberOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
<a-menu-divider />
|
<a-menu-item v-for="option in aboutWorksheetPageNumberOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
<a-menu-divider />
|
<a-menu-item v-for="option in aboutDateOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
<a-menu-divider />
|
<a-menu-item v-for="option in aboutTimeOptions" :key="option.id" @click="handleSelectMenu(item.id, option.id)">
|
<span class="left-area">{{ option.id }}</span>
|
<span class="right-area">{{ option.fullName }}</span>
|
</a-menu-item>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
</span>
|
</div>
|
<div class="module-bottom-handle">
|
<a-textarea v-model:value="customValue[item.id]" placeholder="请输入" :rows="4" />
|
</div>
|
</li>
|
</ul>
|
</div>
|
</BasicModal>
|
</template>
|
|
<style lang="scss">
|
.print-page-header-custom-wrap {
|
padding: 10px 16px;
|
|
.title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.main-modules {
|
display: flex;
|
justify-content: space-between;
|
|
.single-module {
|
flex: 1;
|
margin-left: 15px;
|
|
&:first-child {
|
margin-left: 0;
|
}
|
}
|
|
.module-top-handle {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.right-side .ant-btn {
|
padding-right: 0;
|
}
|
}
|
}
|
}
|
|
.print-custom-dropdown-menu {
|
.ant-dropdown-menu-title-content {
|
display: flex;
|
justify-content: space-between;
|
|
.left-area {
|
margin-right: 4px;
|
}
|
|
.right-area {
|
color: #aaa;
|
}
|
}
|
}
|
</style>
|
