gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

😎优化打印模板设计页面

Browse Source
This commit is contained in:
zuohuaijun 2024-10-27 19:27:56 +08:00
parent 2e64a7f29c
commit d8826fb291
1 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
Web/src/views/system/print/component/hiprint/index.vue
View File

@ -1,7 +1,7 @@
<template>
<el-row :gutter="8" style="margin-bottom: 5px">
<el-row :gutter="8" style="margin-bottom: 10px">
<!-- 流程下拉 模板选择 -->
<el-col :span="4">
<!-- 流程下拉 模板选择 -->
<el-select v-model="mode" showSearch @change="changeMode" :defaultValue="0" option-label-prop="label" class="w100">
<el-option v-for="(opt, idx) in state.modeList" :key="idx" :label="opt.name" :value="idx">
{{ opt.name }}
@ -10,11 +10,12 @@
</el-col>
<el-col :span="20">
<el-select v-model="state.curPaper.type" placeholder="默认纸张" style="width: 120px" @change="setPaper">
<el-option v-for="item in state.paperTypes" :key="item.type" :label="item.type" :value="item.type" />
</el-select>
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
<!-- 纸张设置 -->
<el-button-group style="margin: 0 2px">
<el-button v-for="(value, type) in state.paperTypes" :type="curPaperType === type ? 'primary' : ''" @click="setPaper(type, value)" :key="type">
{{ type }}
</el-button>
<el-button-group>
<el-popover v-model="state.paperPopVisible" placement="bottom" width="300" title="设置纸张宽高(mm)">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px">
<el-input type="number" v-model="state.paperWidth" style="width: 100px; text-align: center" place="宽（mm）"></el-input>~
@ -24,12 +25,13 @@
<el-button type="primary" style="width: 100%" @click="otherPaper">确定</el-button>
</div>
<template #reference>
<el-button :type="'other' == curPaperType ? 'primary' : ''" style="margin: 0 10px">自定义宽高</el-button>
<el-button :type="'other' == curPaperType ? 'primary' : ''">自定义宽高</el-button>
</template>
</el-popover>
</el-button-group>
<el-input-number style="margin-right: 8px" v-model="state.scaleValue" :precision="2" :step="0.1" :min="state.scaleMin" :max="state.scaleMax" @change="changeScale"></el-input-number>
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
<el-input-number style="margin-left: 5px; width: 130px" v-model="state.scaleValue" :precision="2" :step="0.1" :min="state.scaleMin" :max="state.scaleMax" @change="changeScale"></el-input-number>
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
<el-button-group>
<el-tooltip content="左对齐" placement="bottom">
<el-button icon="ele-Back" @click="setElsAlign('left')"> </el-button>
@ -56,21 +58,30 @@
<el-button icon="ele-Switch" @click="setElsAlign('distributeVer')"> </el-button>
</el-tooltip>
</el-button-group>
<!-- 预览/打印 -->
<el-button-group style="margin-left: 8px">
<el-button type="primary" icon="ele-RefreshRight" @click="rotatePaper"> 旋转 </el-button>
<el-button type="primary" icon="ele-View" @click="preView"> 预览 </el-button>
<el-button type="primary" icon="ele-Printer" @click="print"> 直接打印 </el-button>
<el-button type="primary" icon="ele-CircleCheck" @click="viewJson"> 模板JSON </el-button>
<el-button type="danger" icon="ele-Delete" @click="clearPaper"> 清空模板 </el-button>
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
<el-button-group>
<el-tooltip content="旋转" placement="bottom">
<el-button icon="ele-RefreshRight" @click="rotatePaper"></el-button>
</el-tooltip>
<el-tooltip content="预览" placement="bottom">
<el-button icon="ele-View" @click="preView"></el-button>
</el-tooltip>
<el-tooltip content="清空模板" placement="bottom">
<el-button icon="ele-Delete" @click="clearPaper"></el-button>
</el-tooltip>
<el-tooltip content="直接打印" placement="bottom">
<el-button icon="ele-Printer" @click="print"> </el-button>
</el-tooltip>
<el-tooltip content="模板JSON" placement="bottom">
<el-button icon="ele-Coin" @click="viewJson"> </el-button>
</el-tooltip>
</el-button-group>
</el-col>
</el-row>
<el-row :gutter="8">
<el-col :span="4">
<el-card style="height: 100%" shadow="never" :body-style="{ padding: '0px 0 5px 7px' }">
<el-card style="height: 100%" shadow="never">
<el-row>
<el-col :span="24" id="hiprintEpContainer" class="rect-printElement-types hiprintEpContainer"> </el-col>
</el-row>
@ -82,8 +93,8 @@
</el-card>
</el-col>
<el-col :span="6" class="params_setting_container">
<el-tabs type="border-card">
<el-tab-pane label="属性" style="height: auto">
<el-tabs type="border-card" style="height: 100%">
<el-tab-pane label="属性" style="height: 100%">
<el-card shadow="never" :body-style="{ padding: '0px' }">
<el-row class="hinnn-layout-sider">
<div id="PrintElementOptionSetting"></div>
@ -91,8 +102,8 @@
</el-card>
</el-tab-pane>
<el-tab-pane label="测试数据">
<el-input v-model="printDataDemo" type="textarea" style="width: 100%" rows="30" placeholder="对整个文档的完整测试数据"></el-input>
<el-button @click="formatPrintDataDemo()" style="margin-top: 10px; width: 100%" type="success">格式化字符串</el-button>
<el-button @click="formatPrintDataDemo()" style="margin-bottom: 10px; width: 100%">格式化字符串</el-button>
<el-input v-model="printDataDemo" type="textarea" style="width: 100%" :rows="30" placeholder="对整个文档的完整测试数据"></el-input>
</el-tab-pane>
</el-tabs>
</el-col>
@ -103,7 +114,7 @@
</el-drawer>
<!-- 预览 -->
<PrintPreview ref="preViewRef" />
<PrintPreview ref="preViewRef" title="预览" />
</template>
<script lang="ts" setup name="hiprintDesign">
@ -116,6 +127,7 @@ import { hiprint } from 'vue-plugin-hiprint';
import providers from './providers';
import PrintPreview from './preview.vue';
import printDataDefault from './print-data';
import { IPaperType } from './type';
var props = defineProps({
modeIndex: {
@ -136,42 +148,50 @@ const state = reactive({
type: 'A4',
width: 220,
height: 296.6,
},
} as IPaperType,
// 纸张类型
paperTypes: {
A3: {
paperTypes: [
{
type: 'A3',
width: 420,
height: 296.6,
},
A4: {
{
type: 'A4',
width: 210,
height: 296.6,
},
A5: {
{
type: 'A5',
width: 210,
height: 147.6,
},
B3: {
{
type: 'B3',
width: 500,
height: 352.6,
},
B4: {
{
type: 'B4',
width: 250,
height: 352.6,
},
B5: {
{
type: 'B5',
width: 250,
height: 175.6,
},
'4R': {
{
type: '4R',
width: 152,
height: 102,
},
'6R': {
{
type: '6R',
width: 203,
height: 152,
},
},
] as IPaperType[],
scaleValue: 1,
scaleMax: 5,
scaleMin: 0.5,
@ -243,14 +263,15 @@ const changeMode = () => {
* @param type [A3, A4, A5, B3, B4, B5, other]
* @param value {width,height} mm
*/
const setPaper = (type: string, value: { width: number; height: number }) => {
const setPaper = (type: string, value?: { width: number; height: number }) => {
try {
if (Object.keys(state.paperTypes).includes(type)) {
state.curPaper = { type: type, width: value.width, height: value.height };
hiprintTemplate.value.setPaper(value.width, value.height);
const paperType = state.paperTypes.find((x) => x.type == type);
if (paperType) {
state.curPaper = { type: type, width: paperType.width || 0, height: paperType.height || 0 };
hiprintTemplate.value.setPaper(paperType.width, paperType.height);
} else {
state.curPaper = { type: 'other', width: value.width, height: value.height };
hiprintTemplate.value.setPaper(value.width, value.height);
state.curPaper = { type: 'other', width: value?.width || 0, height: value?.height || 0 };
hiprintTemplate.value.setPaper(value?.width, value?.height);
}
} catch (error) {
ElMessage.error(`操作失败: ${error}`);
@ -360,8 +381,8 @@ const initPaper = () => {
var template = hiprintTemplate.value.getJson();
var width = template.panels[0].width;
var height = template.panels[0].height;
state.curPaper = { type: '', width: width, height: height }; // 计算纸张类型和状态
const paperType = state.paperTypes.find((x) => x.width == width && x.height == height);
state.curPaper = { type: paperType?.type || '', width: width, height: height }; // 计算纸张类型和状态
hiprintTemplate.value.setPaper(width, height); // 设置纸张大小
};
@ -393,7 +414,7 @@ defineExpose({ hiprintTemplate, printDataDemo, setPrintDataDemo, initPaper, mode
text-overflow: ellipsis;
color: var(--el-color-primary);
box-shadow: none !important;
border: 1px dashed var(--el-color-primary);
// border: 1px dashed var(--el-color-primary);
}
// 默认图片
@ -408,14 +429,18 @@ defineExpose({ hiprintTemplate, printDataDemo, setPrintDataDemo, initPaper, mode
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
height: 100%;
padding: 2px;
}
:deep(.hiprint-option-item-submitBtn) {
background: var(--el-color-primary);
}
:deep(.hiprint-option-item-deleteBtn) {
background: var(--el-color-danger);
}
:deep(.prop-tabs .prop-tab-items li.active) {
color: var(--el-color-primary);
border-bottom: 2px solid var(--el-color-primary);