add 工单打印模板
This commit is contained in:
周俊杰
@@ -37,6 +37,17 @@ public class TemplateController {
|
||||
return new ResponseEntity<>(HttpStatus.OK);
|
||||
}
|
||||
|
||||
@GetMapping("/getTemplateList")
|
||||
@Log("前端打印模板名称下拉选列表")
|
||||
public ResponseEntity<Object> getTemplateList() {
|
||||
return new ResponseEntity<>(templateService.getTemplateList(), HttpStatus.OK);
|
||||
}
|
||||
|
||||
@GetMapping("/getTicketList")
|
||||
@Log("前端模板需要关联的工单下拉选列表")
|
||||
public ResponseEntity<Object> getTicketList() {
|
||||
return new ResponseEntity<>(templateService.getTicketList(), HttpStatus.OK);
|
||||
}
|
||||
|
||||
@GetMapping("/id")
|
||||
@Log("根据id查询模板")
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
package org.nl.system.service.template;
|
||||
|
||||
import com.alibaba.fastjson.JSONArray;
|
||||
import com.baomidou.mybatisplus.core.metadata.IPage;
|
||||
import com.baomidou.mybatisplus.extension.service.IService;
|
||||
import org.nl.common.domain.query.PageQuery;
|
||||
@@ -15,6 +16,19 @@ public interface TemplateService extends IService<Template> {
|
||||
|
||||
Template selectById(String id);
|
||||
|
||||
/**
|
||||
* 前端打印模板名称下拉选列表
|
||||
*
|
||||
* @return
|
||||
*/
|
||||
JSONArray getTemplateList();
|
||||
|
||||
/**
|
||||
*前端模板需要关联的工单下拉选列表
|
||||
*
|
||||
* @return
|
||||
*/
|
||||
JSONArray getTicketList();
|
||||
|
||||
IPage<Template> query(Map param, PageQuery page);
|
||||
|
||||
|
||||
@@ -13,7 +13,6 @@ import lombok.EqualsAndHashCode;
|
||||
@TableName("acs_template")
|
||||
public class Template {
|
||||
|
||||
|
||||
/**
|
||||
* 模板id
|
||||
*/
|
||||
@@ -58,4 +57,8 @@ public class Template {
|
||||
* 是否删除
|
||||
*/
|
||||
private String is_delete;
|
||||
/**
|
||||
* 工单号
|
||||
*/
|
||||
private String ticket_code;
|
||||
}
|
||||
|
||||
@@ -4,4 +4,5 @@ import com.baomidou.mybatisplus.core.mapper.BaseMapper;
|
||||
import org.nl.system.service.template.dto.Template;
|
||||
|
||||
public interface TemplateMapper extends BaseMapper<Template> {
|
||||
Template selectByName(String name);
|
||||
}
|
||||
|
||||
@@ -6,23 +6,28 @@ import cn.hutool.core.util.ObjectUtil;
|
||||
import cn.hutool.core.util.RandomUtil;
|
||||
import cn.hutool.core.util.StrUtil;
|
||||
import com.alibaba.fastjson.JSON;
|
||||
import com.alibaba.fastjson.JSONArray;
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
|
||||
import com.baomidou.mybatisplus.core.metadata.IPage;
|
||||
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
|
||||
import com.baomidou.mybatisplus.extension.conditions.query.LambdaQueryChainWrapper;
|
||||
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
|
||||
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
|
||||
import org.nl.acs.device.domain.Device;
|
||||
import org.nl.common.domain.query.PageQuery;
|
||||
import org.nl.common.utils.SecurityUtils;
|
||||
import org.nl.system.service.template.TemplateService;
|
||||
import org.nl.system.service.template.dto.Template;
|
||||
import org.nl.system.service.template.dto.mapper.TemplateMapper;
|
||||
import org.nl.system.service.tickets.dto.Tickets;
|
||||
import org.nl.system.service.tickets.dto.mapper.TicketsMapper;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
@Service
|
||||
@@ -31,20 +36,24 @@ public class TemplateServiceImpl extends ServiceImpl<TemplateMapper, Template> i
|
||||
|
||||
@Autowired
|
||||
private TemplateMapper templateMapper;
|
||||
@Autowired
|
||||
private TicketsMapper ticketsMapper;
|
||||
|
||||
@Override
|
||||
public void addTemplate(Map map) {
|
||||
String template_name =(String) map.get("template_name");
|
||||
String panels1 = CollUtil.toList(map.get("panels")).get(0).toString();
|
||||
String replace = panels1.replace("=", ":").substring(1, panels1.length() - 1);
|
||||
Map panels=new HashMap();
|
||||
panels.put("panels",map.get("panels"));
|
||||
// String replace = panels1.replace("=", ":").substring(1, panels1.length() - 1);
|
||||
Template template = new Template();
|
||||
template.setTemplate_id(RandomUtil.randomNumbers(16));
|
||||
template.setTemplate_name(template_name);
|
||||
template.setTemplate(replace);
|
||||
template.setTemplate(JSON.toJSONString(panels));
|
||||
template.setCreate_by(SecurityUtils.getCurrentUsername());
|
||||
template.setCreate_time(DateUtil.now());
|
||||
template.setUpdate_by(SecurityUtils.getCurrentUsername());
|
||||
template.setUpdate_time(DateUtil.now());
|
||||
template.setIs_delete("1");
|
||||
templateMapper.insert(template);
|
||||
}
|
||||
|
||||
@@ -61,12 +70,49 @@ public class TemplateServiceImpl extends ServiceImpl<TemplateMapper, Template> i
|
||||
return template;
|
||||
}
|
||||
|
||||
@Override
|
||||
public JSONArray getTicketList() {
|
||||
//设备基础信息表【acs_device】
|
||||
// JSONArray arr = WQLObject.getWQLObject("acs_device").query("is_delete= '0' AND is_active= '1' AND device_type = 'conveyor'").getResultJSONArray(0);
|
||||
List<Tickets> getTicketList = new LambdaQueryChainWrapper<>(ticketsMapper)
|
||||
.apply("is_delete= '1'")
|
||||
.list();
|
||||
JSONArray arr = JSONArray.parseArray(JSON.toJSONString(getTicketList));
|
||||
JSONArray result = new JSONArray();
|
||||
for (int i = 0; i < arr.size(); i++) {
|
||||
JSONObject obj = arr.getJSONObject(i);
|
||||
JSONObject json = new JSONObject();
|
||||
json.put("ticket_code", obj.getString("ticket_code"));
|
||||
result.add(json);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@Override
|
||||
public JSONArray getTemplateList() {
|
||||
//设备基础信息表【acs_device】
|
||||
// JSONArray arr = WQLObject.getWQLObject("acs_device").query("is_delete= '0' AND is_active= '1' AND device_type = 'conveyor'").getResultJSONArray(0);
|
||||
List<Template> getTemplateList = new LambdaQueryChainWrapper<>(templateMapper)
|
||||
.apply("is_delete= '1'")
|
||||
.list();
|
||||
JSONArray arr = JSONArray.parseArray(JSON.toJSONString(getTemplateList));
|
||||
JSONArray result = new JSONArray();
|
||||
for (int i = 0; i < arr.size(); i++) {
|
||||
JSONObject obj = arr.getJSONObject(i);
|
||||
JSONObject json = new JSONObject();
|
||||
json.put("template_id", obj.getString("template_id"));
|
||||
json.put("template_name", obj.getString("template_name"));
|
||||
result.add(json);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
@Override
|
||||
public IPage<Template> query(Map param, PageQuery page) {
|
||||
QueryWrapper<Template> wrapper = new QueryWrapper<>();
|
||||
wrapper.like(ObjectUtil.isNotEmpty(param.get("template_name")),"template_name",param.get("template_name"))
|
||||
.eq(ObjectUtil.isNotEmpty(param.get("template_status")),"template_status",1)
|
||||
.orderByAsc("create_time");
|
||||
wrapper.eq("is_delete", 1);
|
||||
Page<Template> templatePage = this.page(new Page<>(page.getPage() + 1, page.getSize()), wrapper);
|
||||
return templatePage;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function savePdf(data) {
|
||||
export function create(data) {
|
||||
return request({
|
||||
url: 'api/template',
|
||||
method: 'post',
|
||||
@@ -22,5 +22,17 @@ export function del(ids) {
|
||||
data: ids
|
||||
})
|
||||
}
|
||||
export function getTemplateList() {
|
||||
return request({
|
||||
url: 'api/template/getTemplateList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
export function getTicketList() {
|
||||
return request({
|
||||
url: 'api/template/getTicketList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export default { savePdf, see }
|
||||
export default { create, see, del, getTemplateList, getTicketList }
|
||||
@@ -151,6 +151,7 @@ export default {
|
||||
template.see(id).then((data) => {
|
||||
console.log('====================', data.printElements)
|
||||
this.printElements = JSON.parse(data.printElements)
|
||||
console.log(this.printElements)
|
||||
// 确保 data 对象中的 printElements 是数组
|
||||
if (Array.isArray(this.printElements)) {
|
||||
this.isModalVisible = true
|
||||
|
||||
@@ -1,77 +1,236 @@
|
||||
<template>
|
||||
<div class="flex-col">
|
||||
<div class="flex-row justify-center" style="margin-bottom: 10px">
|
||||
<button class="secondary circle-10" @click.stop="print">
|
||||
<i class="iconfont sv-printer" />
|
||||
浏览器打印
|
||||
</button>
|
||||
<!-- <button class="secondary circle-10 ml-10" @click.stop="getHtml">
|
||||
<i class="iconfont sv-preview" />
|
||||
预览
|
||||
</button> -->
|
||||
<el-button type="primary" @click="PreviewData"> 导出 </el-button>
|
||||
<el-button type="primary" @click="addTable"> 保存 </el-button>
|
||||
<div>
|
||||
<el-radio-group v-model="radio1" @input="setPaper">
|
||||
<el-radio-button
|
||||
v-for="(value,type) in paperTypes"
|
||||
:key="type"
|
||||
:label="type"
|
||||
name="name"
|
||||
/>
|
||||
</el-radio-group>
|
||||
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="400"
|
||||
title="置纸张宽高(mm)"
|
||||
trigger="click"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="paperWidth"
|
||||
:controls="false"
|
||||
:min="1"
|
||||
:max="10000"
|
||||
label="描述文字"
|
||||
@change="otherPaper"
|
||||
/>
|
||||
<el-input-number
|
||||
v-model="paperHeight"
|
||||
:controls="false"
|
||||
:min="1"
|
||||
:max="10000"
|
||||
label="描述文字"
|
||||
@change="otherPaper"
|
||||
/>
|
||||
<el-button slot="reference">自定义纸张1</el-button>
|
||||
</el-popover>
|
||||
<!--
|
||||
<el-select
|
||||
v-model="templateId"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="模板名称"
|
||||
:remote-method="getTemplateList"
|
||||
@change="getTemplateById"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in templateList"
|
||||
:key="item.templateId"
|
||||
:label="item.templateName"
|
||||
:value="item.templateId"
|
||||
/>
|
||||
</el-select> -->
|
||||
<el-select
|
||||
v-model="templateId"
|
||||
filterable
|
||||
placeholder="请选择模板"
|
||||
style="width: 150px;"
|
||||
@change="getTemplateById"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in templateList"
|
||||
:key="item.template_name"
|
||||
:label="item.template_name"
|
||||
:value="item.template_id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="ticketId"
|
||||
filterable
|
||||
placeholder="请选择模板需要关联的工单"
|
||||
style="width: 200px;"
|
||||
@change="getTemplateList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in ticketList"
|
||||
:key="item.ticket_code"
|
||||
:label="item.ticket_code"
|
||||
:value="item.ticket_code"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" icon="el-icon-printer" @click="print"> 浏览器打印</el-button>
|
||||
<el-button type="primary" @click="preview"> 预览</el-button>
|
||||
<el-button type="primary" @click="PreviewData"> 导出</el-button>
|
||||
<el-button type="primary" @click="addTable"> 保存</el-button>
|
||||
<el-button type="primary" @click="clear"> 清空</el-button>
|
||||
<!-- <button class="warning circle-10 ml-10" @click.stop="print2">
|
||||
直接打印(需要连接客户端)
|
||||
<i class="iconfont sv-printer" />
|
||||
</button> -->
|
||||
</div>
|
||||
<div class="flex-row" style="height: 87vh">
|
||||
<div class="flex-2 left">
|
||||
<div class="flex-row justify-center flex-wrap">
|
||||
<div class="title">基础元素</div>
|
||||
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="4">
|
||||
<div>
|
||||
<div class="title" style="font-weight: bold;">基础元素</div>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.text">
|
||||
<i class="iconfont sv-text" />
|
||||
<span>文本</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.image">
|
||||
<i class="iconfont sv-image" />
|
||||
<span>图片</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.longText">
|
||||
<i class="iconfont sv-longText" />
|
||||
<span>长文</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.table">
|
||||
<i class="iconfont sv-table" />
|
||||
<span>表格</span>
|
||||
</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.qrcode">
|
||||
<i class="iconfont sv-qrcode" />
|
||||
<span>html</span>
|
||||
</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.barcode">
|
||||
<i class="iconfont sv-barcode" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.emptyTable">
|
||||
<i class="iconfont sv-table" />
|
||||
<span>空白表格</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.customText">
|
||||
<i class="iconfont sv-text" />
|
||||
<span>自定义</span>
|
||||
</div>
|
||||
<div class="title">辅助元素</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="title" style="font-weight: bold;">辅助元素</div>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.hline">
|
||||
<i class="iconfont sv-hline" />
|
||||
<span>横线</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.vline">
|
||||
<i class="iconfont sv-vline" />
|
||||
<span>竖线</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.rect">
|
||||
<i class="iconfont sv-rect" />
|
||||
<span>矩形</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.oval">
|
||||
<i class="iconfont sv-oval" />
|
||||
<span>圆形</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.barcode">
|
||||
<i class="iconfont sv-barcode" />
|
||||
<span>条形码</span>
|
||||
</div>
|
||||
<div class="flex-5 center">
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="ep-draggable-item item" tid="defaultModule.qrcode">
|
||||
<i class="iconfont sv-qrcode" />
|
||||
<span>二维码</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="16" style="margin-top: 15px;">
|
||||
<!-- 设计器的 容器 -->
|
||||
<div id="hiprint-printTemplate" />
|
||||
</div>
|
||||
<div class="flex-2 right">
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<!-- 元素参数的 容器 -->
|
||||
<div id="PrintElementOptionSetting" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div>
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="formDias" title="模板" width="550px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
|
||||
@@ -89,10 +248,13 @@
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="formDias=false">{{ $t('task.select.Cancel') }}</el-button>
|
||||
<el-button :disabled="isDisabled" type="primary" @click="editBtn">{{ $t('task.select.Confirm') }}</el-button>
|
||||
<el-button :disabled="isDisabled" type="primary" @click="create">{{ $t('task.select.Confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<Preview ref="preView" :preview-show.sync="previewShow" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -100,6 +262,7 @@
|
||||
import $ from 'jquery'
|
||||
import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
|
||||
import template from '@/api/acs/order/template'
|
||||
import Preview from '@/views/acs/order/preview.vue'
|
||||
|
||||
// 初始化 provider
|
||||
hiprint.init({
|
||||
@@ -107,12 +270,56 @@ hiprint.init({
|
||||
})
|
||||
export default {
|
||||
name: 'Hrprint',
|
||||
components: { Preview },
|
||||
data() {
|
||||
return {
|
||||
previewShow: false,
|
||||
radio1:null,
|
||||
ticketList: [],
|
||||
templateList: [],
|
||||
ticketId: null,
|
||||
templateId: null,
|
||||
templateLoading: false,
|
||||
curPaper: {
|
||||
type: 'A4',
|
||||
width: 210,
|
||||
height: 296.6
|
||||
},
|
||||
|
||||
paperTypes: {
|
||||
'A3': {
|
||||
width: 420,
|
||||
height: 296.6
|
||||
},
|
||||
'A4': {
|
||||
width: 210,
|
||||
height: 296.6
|
||||
},
|
||||
'A5': {
|
||||
width: 210,
|
||||
height: 147.6
|
||||
},
|
||||
'B3': {
|
||||
width: 500,
|
||||
height: 352.6
|
||||
},
|
||||
'B4': {
|
||||
width: 250,
|
||||
height: 352.6
|
||||
},
|
||||
'B5': {
|
||||
width: 250,
|
||||
height: 175.6
|
||||
}
|
||||
},
|
||||
|
||||
formDias: false,
|
||||
hiprintTemplate: null, // 声明 hiprintTemplate 以便在 buildDesigner 中使用
|
||||
printResults: [],
|
||||
isDisabled: false,
|
||||
paperWidth: 220,
|
||||
paperHeight: 80,
|
||||
|
||||
form: {
|
||||
template_name: '',
|
||||
template_status: '',
|
||||
@@ -133,11 +340,35 @@ export default {
|
||||
this.buildDesigner()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
template.getTemplateList().then(data => {
|
||||
this.templateList = data
|
||||
})
|
||||
template.getTicketList().then(data => {
|
||||
this.ticketList = data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
addTable() {
|
||||
this.formDias = true
|
||||
this.isDisabled = false
|
||||
},
|
||||
clear() {
|
||||
this.hiprintTemplate.clear()
|
||||
},
|
||||
preview() {
|
||||
this.previewShow = true
|
||||
/* const str = '{ "panels": [{ "index": 0, "height": 30, "width": 50, "paperHeader": 0, "paperFooter": 82.5, "printElements": [{ "options": { "left": 7.5, "top": 9, "height": 15, "width": 127.5, "field": "product", "testData": "加多老吉茶 100889", "hideTitle": true }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 120, "top": 27, "height": 33, "width": 13.5, "field": "ptype", "testData": "酒水222", "hideTitle": true }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 7.5, "top": 28.5, "height": 30, "width": 105, "field": "code", "testData": "100889", "textAlign": "center", "textType": "barcode" }, "printElementType": { "title": "文本", "type": "text" } }], "paperNumberLeft": 111, "paperNumberTop": 63, "paperNumberDisabled": true }] }'
|
||||
|
||||
const hiprintTemplate = new hiprint.PrintTemplate({
|
||||
template: JSON.parse(str)
|
||||
})
|
||||
hiprintTemplate.design('#hiprint-printTemplate')
|
||||
|
||||
const printData = { product: '测试数量', ptype: '测试酒水', code: '100889' }*/
|
||||
const printData = { dd: '测试数量' }
|
||||
this.$refs.preView.show(this.hiprintTemplate, printData)
|
||||
},
|
||||
/**
|
||||
* 构建左侧可拖拽元素
|
||||
* 注意: 可拖拽元素必须在 hiprint.init() 之后调用
|
||||
@@ -161,13 +392,48 @@ export default {
|
||||
this.hiprintTemplate = new hiprint.PrintTemplate({
|
||||
settingContainer: '#PrintElementOptionSetting' // 元素参数容器
|
||||
})
|
||||
this.hiprintTemplate.addPrintPanel({ width: 200, height: 300, paperFooter: 340, paperHeader: 10 });
|
||||
// 构建 并填充到 容器中
|
||||
this.hiprintTemplate.design('#hiprint-printTemplate')
|
||||
//
|
||||
this.hiprintTemplate_.add
|
||||
}
|
||||
},
|
||||
// 根据搜索获取模板列表
|
||||
getTemplateById() {
|
||||
// if (hiprintTemplate) {
|
||||
template.see(this.templateId).then(res => {
|
||||
try {
|
||||
this.hiprintTemplate.update(JSON.parse(res.template))
|
||||
} catch (e) {
|
||||
this.$message.error(`更新失败: ${e}`)
|
||||
}
|
||||
})
|
||||
// }
|
||||
},
|
||||
|
||||
otherPaper() {
|
||||
this.hiprintTemplate.setPaper(this.paperWidth, this.paperHeight)
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置纸张大小
|
||||
* @param type [A3, A4, A5, B3, B4, B5, other]
|
||||
* @param value {width,height} mm
|
||||
*/
|
||||
setPaper(type) {
|
||||
try {
|
||||
// debugger
|
||||
if (Object.keys(this.paperTypes).includes(type)) {
|
||||
// this.curPaper = {type: type, width: value.width, height: value.height}
|
||||
const value = this.paperTypes[type]
|
||||
this.hiprintTemplate.setPaper(value.width, value.height)
|
||||
} else {
|
||||
this.curPaper = { type: 'other', width: value.width, height: value.height }
|
||||
this.hiprintTemplate.setPaper(value.width, value.height)
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error(`操作失败: ${error}`)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 浏览器打印
|
||||
*/
|
||||
@@ -189,6 +455,7 @@ export default {
|
||||
// 调用浏览器打印
|
||||
if (this.hiprintTemplate) {
|
||||
console.log('准备打印，参数：', { printData, options, ext })
|
||||
debugger
|
||||
this.hiprintTemplate.print(printData, options, ext)
|
||||
}
|
||||
},
|
||||
@@ -228,14 +495,15 @@ export default {
|
||||
console.error('PDF 生成失败:', error)
|
||||
})
|
||||
},
|
||||
editBtn() {
|
||||
create() {
|
||||
// console.log('保存数据', this.hiprintTemplate.getJson())
|
||||
this.isDisabled = true
|
||||
// debugger
|
||||
this.form = {
|
||||
...this.form, // 保留原有属性
|
||||
...this.hiprintTemplate.getJson() // 赋值新属性
|
||||
}
|
||||
template.savePdf(this.form).then((data) => {
|
||||
template.create(JSON.stringify(this.form)).then((data) => {
|
||||
this.formDias = false
|
||||
// 设置定时器，等待一定时间后再次允许请求
|
||||
setTimeout(() => {
|
||||
@@ -247,26 +515,22 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/* 字体样式 */
|
||||
@import "../../../assets/css/iconfont.css";
|
||||
|
||||
/* 定义全局样式 */
|
||||
/* 在 main.js 入库文件引入 */
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
|
||||
/*::-webkit-scrollbar-thumb {
|
||||
background: purple;
|
||||
border-radius: 2px;
|
||||
background-image: -webkit-linear-gradient(
|
||||
@@ -279,7 +543,8 @@ body {
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}*/
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: purple;
|
||||
}
|
||||
@@ -288,146 +553,25 @@ body {
|
||||
.flex-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
-ms-flex-direction: column; /* 旧版 IE */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.flex-2 {
|
||||
-ms-flex: 2;
|
||||
flex: 2;
|
||||
}
|
||||
.flex-3 {
|
||||
-ms-flex: 3;
|
||||
flex: 3;
|
||||
}
|
||||
.flex-4 {
|
||||
-ms-flex: 4;
|
||||
flex: 4;
|
||||
}
|
||||
.flex-5 {
|
||||
-ms-flex: 5;
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
.ml-10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mt-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* button 样式 为了好看点 */
|
||||
button {
|
||||
padding: 10px;
|
||||
min-width: 40px;
|
||||
color: white;
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
border-width: 0;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
button i {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.circle,
|
||||
.circle-4 {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.circle-10 {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
/* 按钮颜色 */
|
||||
.primary {
|
||||
background: purple;
|
||||
}
|
||||
.info {
|
||||
color: #000;
|
||||
background: none;
|
||||
}
|
||||
.info:hover {
|
||||
color: purple;
|
||||
border-color: purple;
|
||||
}
|
||||
.secondary {
|
||||
background: #1976d2;
|
||||
}
|
||||
.warning {
|
||||
background: #d32f2f;
|
||||
}
|
||||
|
||||
/* modal */
|
||||
.modal {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.modal .mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
height: 100%;
|
||||
background-color: #00000073;
|
||||
}
|
||||
.modal .wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
overflow: auto;
|
||||
background-color: #00000073;
|
||||
outline: 0;
|
||||
}
|
||||
.modal .wrap .box {
|
||||
position: relative;
|
||||
margin: 10% auto;
|
||||
width: 40%;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.modal-box__header {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
.modal-box__footer {
|
||||
text-align: end;
|
||||
}
|
||||
.modal-box__footer button {
|
||||
min-width: 100px;
|
||||
}
|
||||
.modal-box__footer button:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* 重写全局 hiprint 样式 */
|
||||
.hiprint-headerLine,
|
||||
.hiprint-footerLine {
|
||||
@@ -458,32 +602,7 @@ button i {
|
||||
top: -14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
/* 区域 */
|
||||
.left {
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 10px 0;
|
||||
box-shadow: 2px 2px 2px 0px rgba(181, 16, 181, 0.2);
|
||||
overflow: auto;
|
||||
}
|
||||
.center {
|
||||
margin: 0 10px;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
|
||||
overflow: auto;
|
||||
}
|
||||
.right {
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 10px 0;
|
||||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 左侧拖拽元素样式 */
|
||||
.title {
|
||||
font-size: 16px;
|
||||
@@ -491,6 +610,7 @@ button i {
|
||||
width: 100%;
|
||||
margin: 10px 0 0 24px;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -498,15 +618,18 @@ button i {
|
||||
background: white;
|
||||
padding: 4px 10px;
|
||||
margin: 10px 8px 4px 8px;
|
||||
width: 38%;
|
||||
/*width: 38%;*/
|
||||
min-height: 60px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
|
||||
}
|
||||
|
||||
.item .iconfont {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.item span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user