<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { useModal } from '@jnpf/ui/modal';
|
|
import HeaderFooterCustomModal from './HeaderFooterCustomModal.vue';
|
|
const props = defineProps(['formState', 'configOptions', 'sheetsOption', 'activeSheetFreeze']);
|
const [registerHeaderFooterCustomModal, { openModal: openHeaderFooterCustomModal }] = useModal();
|
|
interface State {
|
hasXFreeze: boolean;
|
hasYFreeze: boolean;
|
}
|
const state = reactive<State>({
|
hasXFreeze: false,
|
hasYFreeze: false,
|
});
|
const { hasXFreeze, hasYFreeze } = toRefs(state);
|
|
const headerFooterTypeOptions = [
|
{ id: 'default', fullName: '默认' },
|
{ id: 'custom', fullName: '自定义' },
|
];
|
|
function handleChangedPrintAreaType() {
|
if (props.formState.printArea === 'currentSheet') {
|
const { xSplit = 0, ySplit = 0 } = props.activeSheetFreeze ?? {}; // xSplit表示列冻结了
|
|
state.hasXFreeze = ySplit > 0;
|
state.hasYFreeze = xSplit > 0;
|
|
props.formState.xFreeze = state.hasYFreeze;
|
props.formState.yFreeze = state.hasXFreeze;
|
} else {
|
state.hasXFreeze = true;
|
state.hasYFreeze = true;
|
|
if (props.formState.xFreeze) {
|
props.formState.xFreeze = false;
|
}
|
|
if (props.formState.yFreeze) {
|
props.formState.yFreeze = false;
|
}
|
}
|
}
|
|
function handleOpenHeaderFooterCustom() {
|
openHeaderFooterCustomModal(true, props.formState.customHeaderFooterValue);
|
}
|
|
function onHeaderFooterCustomConfirm(data: any) {
|
props.formState.customHeaderFooterValue = { ...data };
|
}
|
|
defineExpose({
|
handleChangedPrintAreaType,
|
});
|
</script>
|
|
<template>
|
<a-form class="print-config-form" layout="vertical" :model="formState" :colon="false">
|
<a-form-item label="选择" name="partSheets" v-if="formState.printArea === 'partSheets'">
|
<jnpf-select v-model:value="formState.partSheets" multiple :options="sheetsOption" />
|
</a-form-item>
|
<a-form-item label="纸张类型" name="paperType">
|
<jnpf-select v-model:value="formState.paperType" :options="configOptions.paperTypeOptions" />
|
</a-form-item>
|
<a-form-item label="纸张方向" name="direction">
|
<jnpf-radio v-model:value="formState.direction" :options="configOptions.printDirectionOptions" option-type="button" button-style="solid" />
|
</a-form-item>
|
<a-form-item label="页面缩放" name="printScale">
|
<jnpf-select v-model:value="formState.printScale" :options="configOptions.printScaleOptions" />
|
</a-form-item>
|
<a-form-item label="上下对齐" name="vAlign">
|
<jnpf-radio v-model:value="formState.vAlign" :options="configOptions.printVAlignOptions" option-type="button" button-style="solid" />
|
</a-form-item>
|
<a-form-item label="左右对齐" name="hAlign">
|
<jnpf-radio v-model:value="formState.hAlign" :options="configOptions.printHAlignOptions" option-type="button" button-style="solid" />
|
</a-form-item>
|
<a-form-item label="网格线" name="gridlines">
|
<a-switch v-model:checked="formState.gridlines" />
|
</a-form-item>
|
<a-form-item label="页眉页脚">
|
<jnpf-radio v-model:value="formState.headerFooterType" :options="headerFooterTypeOptions" option-type="button" button-style="solid" />
|
</a-form-item>
|
<template v-if="formState.headerFooterType === 'default'">
|
<a-form-item label="页码" name="pageNumber">
|
<a-switch v-model:checked="formState.pageNumber" />
|
</a-form-item>
|
<a-form-item label="报表名称" name="workbookTitle">
|
<a-switch v-model:checked="formState.workbookTitle" />
|
</a-form-item>
|
<a-form-item label="工作表名" name="WorksheetTitle">
|
<a-switch v-model:checked="formState.worksheetTitle" />
|
</a-form-item>
|
<a-form-item label="当前日期" name="printDate">
|
<a-switch v-model:checked="formState.printDate" />
|
</a-form-item>
|
<a-form-item label="当前时间" name="printTime">
|
<a-switch v-model:checked="formState.printTime" />
|
</a-form-item>
|
</template>
|
<template v-else>
|
<a-form-item label="自定义页眉页脚">
|
<a-button block @click="handleOpenHeaderFooterCustom">自定义配置</a-button>
|
</a-form-item>
|
</template>
|
<a-form-item>
|
<template #label>
|
重复冻结行<BasicHelp text="无冻结/无冻结行时，打印不显示重复的冻结区域；反之，允许配置在打印预览/打印时是否显示重复的冻结区域" />
|
</template>
|
<a-switch v-model:checked="formState.yFreeze" :disabled="!hasXFreeze" />
|
</a-form-item>
|
<a-form-item>
|
<template #label>
|
重复冻结列<BasicHelp text="无冻结/无冻结列时，打印不显示重复的冻结区域；反之，允许配置在打印预览/打印时是否显示重复的冻结区域" />
|
</template>
|
<a-switch v-model:checked="formState.xFreeze" :disabled="!hasYFreeze" />
|
</a-form-item>
|
</a-form>
|
<HeaderFooterCustomModal @register="registerHeaderFooterCustomModal" @confirm="onHeaderFooterCustomConfirm" />
|
</template>
|
|
<style lang="scss">
|
.print-config-form {
|
padding: 10px;
|
background: var(--component-background);
|
}
|
</style>
|
