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