<script lang="ts" setup>
|
import { onMounted, reactive, ref, toRefs, unref } from 'vue';
|
|
import JnpfUniverDesign from '@/components/Report/Design/index.vue';
|
import {
|
designMockFloatEchartData,
|
designMockFloatImageData,
|
designMockSnapshotData,
|
mockUpdateFloatEchartOption,
|
mockUpdateFloatImageOption,
|
} from '@/components/Report/Design/mock';
|
import { DefaultWatermarkConfig } from '@/components/Report/Design/univer/utils/define';
|
import JnpfUniverPreview from '@/components/Report/Preview/index.vue';
|
import JnpfUniverPrint from '@/components/Report/Print/index.vue';
|
import { IWorkbookData } from '@univerjs/core';
|
import { Button as AButton } from 'ant-design-vue';
|
|
defineOptions({ name: 'App' });
|
|
const jnpfUniverDesignRef = ref();
|
const jnpfUniverPreviewRef = ref();
|
const jnpfUniverPrintRef = ref();
|
|
const state = reactive<{
|
focusedCell: any;
|
|
focusedFloatEchartId: any;
|
focusedFloatImageId: any;
|
jnpfUniverAPI: any;
|
}>({
|
focusedCell: {
|
startColumn: null,
|
startRow: null,
|
},
|
|
focusedFloatEchartId: null,
|
focusedFloatImageId: null,
|
jnpfUniverAPI: null,
|
});
|
const { focusedCell, focusedFloatEchartId, focusedFloatImageId } = toRefs(state);
|
|
// 创建设计器实例
|
function initCreate() {
|
const { jnpfUniverAPI } = unref(jnpfUniverDesignRef)?.handleCreateDesignUnit(
|
{} || {
|
floatEcharts: {} || designMockFloatEchartData,
|
floatImages: {} || designMockFloatImageData,
|
snapshot: designMockSnapshotData,
|
},
|
);
|
|
state.jnpfUniverAPI = jnpfUniverAPI ?? null;
|
}
|
|
// 缓存悬浮图表的画布id
|
function handleFocusFloatEchart(data: any) {
|
state.focusedFloatEchartId = data.drawingId;
|
}
|
|
// 【模拟】 - 更新悬浮图表的配置
|
function handleUpdateFloatEchart() {
|
unref(jnpfUniverDesignRef)?.updateFloatEchartConfig({
|
drawingId: focusedFloatEchartId.value,
|
|
echartType: 'line',
|
option: mockUpdateFloatEchartOption,
|
});
|
}
|
|
// 缓存悬浮图片的画布id
|
function handleFocusFloatImage(data: any) {
|
state.focusedFloatImageId = data.drawingId;
|
}
|
|
// 【模拟】 - 更新悬浮图片的配置
|
function handleUpdateFloatImage() {
|
unref(jnpfUniverDesignRef)?.updateFloatImageConfig({
|
drawingId: focusedFloatImageId.value,
|
...mockUpdateFloatImageOption,
|
});
|
}
|
|
// 缓存选中单元格的行列坐标
|
function handleChangeCellFromSelection(cellInfo: any) {
|
const { startColumn, startRow } = cellInfo ?? {};
|
|
state.focusedCell = {
|
startColumn,
|
startRow,
|
};
|
}
|
|
// 【模拟】 - 更新静态文本
|
function setCellToText() {
|
const updateCellsData = [
|
{
|
...focusedCell.value,
|
cellData: {
|
custom: {
|
type: 'text',
|
},
|
t: 1,
|
v: '静态文本',
|
},
|
},
|
];
|
|
unref(jnpfUniverDesignRef)?.updateCellsData(updateCellsData);
|
}
|
|
// 【模拟】 - 更新数据集
|
function setCellToDataSource(fillDirection: string) {
|
const updateCellsData = [
|
{
|
...focusedCell.value,
|
cellData: {
|
custom: {
|
fillDirection,
|
leftParentCellCustomColName: '1',
|
leftParentCellCustomRowName: 'A',
|
leftParentCellType: 'custom',
|
topParentCellCustomColName: '1',
|
topParentCellCustomRowName: 'B',
|
topParentCellType: 'custom',
|
type: 'dataSource',
|
},
|
t: 1,
|
v: 'userSex',
|
},
|
},
|
];
|
|
unref(jnpfUniverDesignRef)?.updateCellsData(updateCellsData);
|
}
|
|
// 【模拟】 - 单元格图表
|
function setCellToEchart(echartType: string) {
|
const updateCellsData = [
|
{
|
...focusedCell.value,
|
cellData: {
|
custom: {
|
echartType,
|
type: 'cellEchart',
|
},
|
echartOption: {
|
series: [
|
{
|
data: [120, 200, 150, 80, 70, 110, 130],
|
type: 'bar',
|
},
|
],
|
xAxis: {
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
|
type: 'category',
|
},
|
yAxis: {
|
type: 'value',
|
},
|
},
|
},
|
},
|
];
|
|
unref(jnpfUniverDesignRef)?.updateCellsData(updateCellsData);
|
}
|
|
// 【模拟】 - 二维码
|
function setCellToQrCode() {
|
const updateCellsData = [
|
{
|
...focusedCell.value,
|
cellData: {
|
custom: {
|
type: 'qrCode',
|
},
|
qrCodeOption: {
|
color: {
|
dark: '#000000', // 前景色
|
light: '#f2f3f4', // 背景色
|
},
|
errorCorrectionLevel: 'L',
|
margin: 4,
|
type: 'static', // 这里预留动态
|
},
|
t: 1,
|
v: 'https://www.baidu.com',
|
},
|
},
|
];
|
|
unref(jnpfUniverDesignRef)?.updateCellsData(updateCellsData);
|
}
|
|
// 【模拟】 - 条形码
|
function setCellToJsbarcode() {
|
const updateCellsData = [
|
{
|
...focusedCell.value,
|
cellData: {
|
custom: {
|
type: 'jsbarcode',
|
},
|
jsbarcodeOption: {
|
background: '#f2f3f4', // 设置背景色为浅灰色
|
displayValue: true, // 显示数字
|
font: 'Arial', // 设置字体
|
fontSize: 18, // 设置字体大小
|
format: 'CODE128', // 设置条形码类型为 EAN13
|
lineColor: '#000000', // 设置线条为蓝色
|
margin: 15, // 设置条形码四周边距
|
textAlign: 'center', // 设置文本居中
|
textPosition: 'bottom', // 设置文本在条形码底部
|
type: 'static', // 这里预留动态
|
width: 3, // 设置条形码宽度
|
},
|
t: 1,
|
v: '1234567890',
|
},
|
},
|
];
|
|
unref(jnpfUniverDesignRef)?.updateCellsData(updateCellsData);
|
}
|
|
// 打开页面弹窗去选单元格
|
function openCellByDialogSelect() {
|
unref(jnpfUniverDesignRef)?.getCellFromDialogSelect(focusedCell.value);
|
}
|
|
// 获取弹窗选择的结果
|
function getCellFromDialogSelect(res: any) {
|
console.log(`关联的单元格坐标为：${res}`);
|
}
|
|
// 设置水印
|
function handleSetWatermark() {
|
// 水印配置
|
// x: number;
|
// y: number;
|
// repeat: boolean;
|
// spacingX: number;
|
// spacingY: number;
|
// rotate: number;
|
// opacity: number;
|
// content?: string;
|
// fontSize: number;
|
// color: string;
|
// bold: boolean;
|
// italic: boolean;
|
// direction: 'ltr' | 'rtl' | 'inherit';
|
unref(jnpfUniverDesignRef)?.setWatermark(JSON.parse(JSON.stringify(DefaultWatermarkConfig)));
|
}
|
|
// 清除水印
|
function handleClearWatermark() {
|
unref(jnpfUniverDesignRef)?.clearWatermark();
|
}
|
|
// 执行预览
|
async function handlePreview() {
|
/**
|
* 保存时做的事情
|
*/
|
await unref(jnpfUniverDesignRef)?.setCellEditVisible();
|
const designWorkbookData = unref(jnpfUniverDesignRef)?.getDesignWorkbookData() ?? {};
|
|
/**
|
* 预览时要做的事情
|
* 这里要把floatEcharts， cellEcharts， floatImages的真实数据对接成功
|
*/
|
// @ts-ignore 下面的常量没用到飘红真令人讨厌
|
const { cellEcharts = {}, customs = [], floatEcharts = {}, floatImages = {}, snapshot } = designWorkbookData;
|
const activeSubUnitId = unref(jnpfUniverDesignRef)?.getActiveWorksheetId(); // 获取到当前激活的工作表，这样预览的时候，可以更直观的看到当前设计器更改的内容
|
console.log(snapshot);
|
unref(jnpfUniverPreviewRef)?.handleCreatePreviewUnit({
|
cellEcharts,
|
defaultActiveSheetId: activeSubUnitId,
|
floatEcharts,
|
floatImages,
|
snapshot,
|
});
|
}
|
|
// 执行打印
|
function handlePrint(data: { activeWorksheetId?: string; snapshot: IWorkbookData }) {
|
unref(jnpfUniverPrintRef)?.handleCreatePrintUnit(data);
|
}
|
|
// 销毁实例
|
function handleDispose() {
|
unref(jnpfUniverDesignRef)?.handleDisposeUnit();
|
}
|
|
onMounted(() => {
|
initCreate();
|
});
|
</script>
|
|
<template>
|
<div class="jnpf-univer-module">
|
<!-- 测试按钮，随时可以删除掉 -->
|
<div class="buttons-wrap">
|
<AButton type="primary" style="background: orangered" @click="handlePreview">设计预览</AButton>
|
<AButton type="primary" @click="setCellToText">设置纯文本</AButton>
|
<AButton type="primary" @click="setCellToDataSource('landscape')">设置数据集</AButton>
|
<AButton type="primary" @click="openCellByDialogSelect">选择数据集的父格</AButton>
|
<AButton type="primary" @click="setCellToEchart('line')">设置单元格图表</AButton>
|
<AButton type="primary" @click="setCellToQrCode">设置单元格二维码</AButton>
|
<AButton type="primary" @click="setCellToJsbarcode">设置单元格条形码</AButton>
|
<AButton type="primary" style="background: blueviolet" @click="handleUpdateFloatEchart">更新悬浮图表配置</AButton>
|
<AButton type="primary" style="background: purple" @click="handleUpdateFloatImage">更新悬浮图片配置</AButton>
|
<AButton type="primary" style="background: palevioletred" @click="handleSetWatermark">添加水印</AButton>
|
<AButton type="primary" style="background: green" @click="handleClearWatermark">清除水印</AButton>
|
<AButton @click="handleDispose">销毁工作簿</AButton>
|
</div>
|
|
<!-- 设计器模块-->
|
<JnpfUniverDesign
|
ref="jnpfUniverDesignRef"
|
@change-cell="handleChangeCellFromSelection"
|
@focus-float-echart="handleFocusFloatEchart"
|
@focus-float-image="handleFocusFloatImage"
|
@change-dialog-select-cell="getCellFromDialogSelect"
|
@preview="handlePreview" />
|
<!-- 设计预览模块-->
|
<JnpfUniverPreview ref="jnpfUniverPreviewRef" @print="handlePrint" />
|
<!-- 打印预览模块-->
|
<JnpfUniverPrint ref="jnpfUniverPrintRef" />
|
</div>
|
</template>
|
|
<style>
|
* {
|
padding: 0;
|
margin: 0;
|
}
|
|
html {
|
height: 100%;
|
}
|
|
body {
|
height: calc(100%);
|
}
|
|
#app {
|
height: calc(100%);
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
|
.jnpf-univer-module {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: calc(100%);
|
|
.ant-btn {
|
margin-right: 10px;
|
}
|
}
|
|
.buttons-wrap {
|
display: flex;
|
align-items: center;
|
height: 60px;
|
padding: 0 10px;
|
background: #ddd;
|
}
|
</style>
|
