<script lang="ts" setup>
|
import { nextTick, reactive, toRefs, watch } from 'vue';
|
|
import { Form as AForm, FormItem as AFormItem, RadioGroup as ARadioGroup, Select as ASelect, Switch as ASwitch } from 'ant-design-vue';
|
import { debounce } from 'lodash-es';
|
|
import {
|
jnpfPaperPaddingTypeOptions,
|
jnpfPaperTypeOptions,
|
jnpfPrintAreaOptions,
|
jnpfPrintDirectionOptions,
|
jnpfPrintHAlignOptions,
|
jnpfPrintScaleOptions,
|
jnpfPrintVAlignOptions,
|
} from '../../Design/univer/utils/define';
|
|
const props = defineProps(['defaultPrintConfig', 'sheetFreezeStatus']);
|
|
const emits = defineEmits(['change']);
|
|
interface State {
|
formData: Record<string, any>;
|
}
|
const state = reactive<State>({
|
formData: {},
|
});
|
const { formData } = toRefs(state);
|
|
let isInitialized = false; // 标志位，确保 `watch` 仅在初始化后触发
|
|
// radio数据转化下格式
|
function getRadioGroupOptions(data: any[] = []) {
|
return data?.map((item: any) => {
|
return { label: item.fullName, value: item.id };
|
});
|
}
|
|
watch(
|
() => props.sheetFreezeStatus,
|
val => {
|
const updatePrintConfig = {
|
...props.defaultPrintConfig,
|
xFreeze: val?.colHasFreeze,
|
yFreeze: val?.rowHasFreeze,
|
};
|
|
state.formData = JSON.parse(JSON.stringify(updatePrintConfig));
|
|
nextTick(() => {
|
isInitialized = true;
|
});
|
},
|
);
|
|
// 防抖后的触发方法
|
const emitChangeDebounced = debounce((val: any) => {
|
emits('change', val);
|
}, 300);
|
|
// 监听更改
|
watch(
|
() => state.formData,
|
val => {
|
if (isInitialized) {
|
emitChangeDebounced(val);
|
}
|
},
|
{ deep: true, flush: 'post' },
|
);
|
</script>
|
|
<template>
|
<div class="print-render-form-content">
|
<AForm layout="vertical">
|
<AFormItem label="打印范围">
|
<ASelect v-model:value="formData.printArea" :options="jnpfPrintAreaOptions" :field-names="{ label: 'fullName', value: 'id' }" />
|
</AFormItem>
|
</AForm>
|
<AForm layout="vertical">
|
<AFormItem label="纸张类型">
|
<ASelect v-model:value="formData.paperType" :options="jnpfPaperTypeOptions" :field-names="{ label: 'fullName', value: 'id' }" />
|
</AFormItem>
|
</AForm>
|
<AForm layout="vertical">
|
<AFormItem label="纸张边距">
|
<ASelect v-model:value="formData.padding" :options="jnpfPaperPaddingTypeOptions" :field-names="{ label: 'fullName', value: 'id' }" />
|
</AFormItem>
|
</AForm>
|
<AForm layout="vertical">
|
<AFormItem label="纸张方向">
|
<ARadioGroup v-model:value="formData.direction" :options="getRadioGroupOptions(jnpfPrintDirectionOptions)" option-type="button" button-style="solid" />
|
</AFormItem>
|
</AForm>
|
<AForm layout="vertical">
|
<AFormItem label="页面缩放">
|
<ASelect v-model:value="formData.printScale" :options="jnpfPrintScaleOptions" :field-names="{ label: 'fullName', value: 'id' }" />
|
</AFormItem>
|
</AForm>
|
<AForm layout="vertical">
|
<AFormItem label="左右对齐">
|
<ARadioGroup v-model:value="formData.hAlign" :options="getRadioGroupOptions(jnpfPrintHAlignOptions)" option-type="button" button-style="solid" />
|
</AFormItem>
|
</AForm>
|
<AForm layout="vertical">
|
<AFormItem label="上下对齐">
|
<ARadioGroup v-model:value="formData.vAlign" :options="getRadioGroupOptions(jnpfPrintVAlignOptions)" option-type="button" button-style="solid" />
|
</AFormItem>
|
</AForm>
|
<AForm layout="vertical">
|
<AFormItem label="网格线">
|
<ASwitch v-model:checked="formData.gridlines" />
|
</AFormItem>
|
</AForm>
|
<AForm layout="vertical" style="display: flex">
|
<div style="flex: 1">
|
<AFormItem label="报表名称">
|
<ASwitch v-model:checked="formData.workbookTitle" />
|
</AFormItem>
|
</div>
|
<div style="flex: 1">
|
<AFormItem label="工作本名称">
|
<ASwitch v-model:checked="formData.worksheetTitle" />
|
</AFormItem>
|
</div>
|
</AForm>
|
<AForm layout="vertical" style="display: flex">
|
<div style="flex: 1">
|
<AFormItem label="当前日期">
|
<ASwitch v-model:checked="formData.printDate" />
|
</AFormItem>
|
</div>
|
<div style="flex: 1">
|
<AFormItem label="当前时间">
|
<ASwitch v-model:checked="formData.printTime" />
|
</AFormItem>
|
</div>
|
</AForm>
|
<AForm layout="vertical">
|
<AFormItem label="页码">
|
<ASwitch v-model:checked="formData.pageNumber" />
|
</AFormItem>
|
</AForm>
|
<AForm layout="vertical" style="display: flex">
|
<div style="flex: 1">
|
<AFormItem label="重复冻结行">
|
<ASwitch v-model:checked="formData.yFreeze" :disabled="!sheetFreezeStatus.rowHasFreeze" />
|
</AFormItem>
|
</div>
|
<div style="flex: 1">
|
<AFormItem label="重复冻结列">
|
<ASwitch v-model:checked="formData.xFreeze" :disabled="!sheetFreezeStatus.colHasFreeze" />
|
</AFormItem>
|
</div>
|
</AForm>
|
</div>
|
</template>
|
|
<style lang="scss">
|
.print-render-form-content {
|
box-sizing: border-box;
|
width: 290px;
|
height: calc(100%);
|
padding: 10px;
|
margin-left: 16px;
|
overflow: hidden auto;
|
background: #fff;
|
|
.ant-form-item-label {
|
padding-bottom: 2px;
|
}
|
|
.ant-form-item {
|
margin-bottom: 9px;
|
}
|
}
|
</style>
|
