标签打印模板相关
This commit is contained in:
yinjinlu-pc\尹金路
@@ -33,7 +33,7 @@
|
||||
<el-table-column label="单位" align="center" prop="unitOfMeasure" />
|
||||
<el-table-column label="生产进度" align="center" width="200px" >
|
||||
<template slot-scope="scope">
|
||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat(((scope.row.quantityProduced/scope.row.quantity*100).toFixed(2)))"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat(((scope.row.quantityProduced/scope.row.quantity*100).toFixed(2)))>100?100:parseFloat(((scope.row.quantityProduced/scope.row.quantity*100).toFixed(2)))"></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="需求日期" align="center" prop="requestDate" width="180">
|
||||
|
||||
7
src/views/mes/md/vendor/index.vue
vendored
7
src/views/mes/md/vendor/index.vue
vendored
@@ -120,7 +120,7 @@
|
||||
icon="el-icon-upload2"
|
||||
size="mini"
|
||||
@click="handleImport"
|
||||
v-hasPermi="['system:user:import']"
|
||||
v-hasPermi="['mes:md:vendor:import']"
|
||||
>导入</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
@@ -605,6 +605,11 @@ export default {
|
||||
this.upload.title = "供应商导入";
|
||||
this.upload.open = true;
|
||||
},
|
||||
/**下载导入模板 */
|
||||
exportTemplate() {
|
||||
this.download('mes/md/vendor/exportTemplate', {
|
||||
}, `vendor_template_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 下载模板操作 */
|
||||
importTemplate() {
|
||||
this.download('mes/md/vendor/importTemplate', {
|
||||
|
||||
351
src/views/print/printerconfig/index.vue
Normal file
351
src/views/print/printerconfig/index.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['print:printerconfig:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['print:printerconfig:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['print:printerconfig:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
<el-table v-loading="loading" :data="printerconfigList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="打印机类型" align="center" prop="printerType">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.mes_printer_type" :value="scope.row.printerType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="打印机名称" align="center" prop="printerName" />
|
||||
<el-table-column label="品牌" align="center" prop="brand" />
|
||||
<el-table-column label="型号" align="center" prop="printerModel" />
|
||||
<el-table-column label="连接类型" align="center" prop="connectionType">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.mes_conn_type" :value="scope.row.connectionType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="打印机IP" align="center" prop="printerIp" />
|
||||
<el-table-column label="打印机端口" align="center" prop="printerPort" />
|
||||
<el-table-column label="客户端SID" align="center" prop="clientSid" />
|
||||
<el-table-column label="客户端IP" align="center" prop="clientIp" />
|
||||
<el-table-column label="客户端端口" align="center" prop="clientPort" />
|
||||
<el-table-column label="启用状态" align="center" prop="enableFlag">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.enableFlag"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="打印机状态" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.mes_printer_status" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['print:printerconfig:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['print:printerconfig:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改打印机配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col span="8">
|
||||
<el-form-item label="打印机类型" prop="printerType">
|
||||
<el-select v-model="form.printerType" placeholder="请选择打印机类型">
|
||||
<el-option
|
||||
v-for="dict in dict.type.mes_printer_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="16">
|
||||
<el-form-item label="打印机名称" prop="printerName">
|
||||
<el-input v-model="form.printerName" placeholder="请输入打印机名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="8">
|
||||
<el-form-item label="品牌" prop="brand">
|
||||
<el-input v-model="form.brand" placeholder="请输入品牌" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="8">
|
||||
<el-form-item label="型号" prop="printerModel">
|
||||
<el-input v-model="form.printerModel" placeholder="请输入型号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="8">
|
||||
<el-form-item label="连接类型">
|
||||
<el-radio-group v-model="form.connectionType">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.mes_conn_type"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="8">
|
||||
<el-form-item label="打印机IP" prop="printerIp">
|
||||
<el-input v-model="form.printerIp" placeholder="请输入打印机IP" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="8">
|
||||
<el-form-item label="打印机端口" prop="printerPort">
|
||||
<el-input v-model="form.printerPort" placeholder="请输入打印机端口" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="8">
|
||||
<el-form-item label="启用状态" prop="enableFlag">
|
||||
<el-input v-model="form.enableFlag" placeholder="请输入启用状态" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="8">
|
||||
<el-form-item label="客户端SID" prop="clientSid">
|
||||
<el-input v-model="form.clientSid" placeholder="请输入打印客户端SID" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="8">
|
||||
<el-form-item label="客户端IP" prop="clientIp">
|
||||
<el-input v-model="form.clientIp" placeholder="请输入打印客户端IP" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="8">
|
||||
<el-form-item label="客户端端口" prop="clientPort">
|
||||
<el-input v-model="form.clientPort" placeholder="请输入打印客户端端口" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="12">
|
||||
<el-form-item label="图片URL" prop="printerUrl">
|
||||
<el-input v-model="form.printerUrl" placeholder="请输入图片URL" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="12">
|
||||
<el-form-item label="打印机状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.mes_printer_status"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listPrinterconfig, getPrinterconfig, delPrinterconfig, addPrinterconfig, updatePrinterconfig } from "@/api/print/printerconfig";
|
||||
|
||||
export default {
|
||||
name: "Printerconfig",
|
||||
dicts: ['mes_printer_status', 'mes_printer_type', 'mes_conn_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 打印机配置表格数据
|
||||
printerconfigList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
printerType: null, printerName: null, brand: null, printerModel: null, connectionType: null, printerUrl: null, printerIp: null, printerPort: null, clientSid: null, clientIp: null, clientPort: null, enableFlag: null, status: null, },
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
printerName: [
|
||||
{ required: true, message: "打印机名称不能为空", trigger: "blur" }
|
||||
], }
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询打印机配置列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listPrinterconfig(this.queryParams).then(response => {
|
||||
this.printerconfigList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
printerId: null, printerType: null, printerName: null, brand: null, printerModel: null, connectionType: "0", printerUrl: null, printerIp: null, printerPort: null, clientSid: null, clientIp: null, clientPort: null, enableFlag: null, status: "0", remark: null, attr1: null, attr2: null, attr3: null, attr4: null, createBy: null, createTime: null, updateBy: null, updateTime: null };
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.printerId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加打印机配置";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const printerId = row.printerId || this.ids
|
||||
getPrinterconfig(printerId).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改打印机配置";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.printerId != null) {
|
||||
updatePrinterconfig(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addPrinterconfig(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const printerIds = row.printerId || this.ids;
|
||||
this.$modal.confirm('是否确认删除打印机配置编号为"' + printerIds + '"的数据项？').then(function() {
|
||||
return delPrinterconfig(printerIds);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('print/printerconfig/export', {
|
||||
...this.queryParams
|
||||
}, `printerconfig_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.printer-card{
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
</style>
|
||||
1
src/views/print/printtemplate/alignBottom.svg
Normal file
1
src/views/print/printtemplate/alignBottom.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712823957090" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7474" xmlns:xlink="http://www.w3.org/1999/xlink" width="228.515625" height="200"><path d="M1170.285714 987.428571a36.571429 36.571429 0 0 0-36.571428-36.571428H36.571429a36.571429 36.571429 0 0 0 0 73.142857h1097.142857a36.571429 36.571429 0 0 0 36.571428-36.571429z m-219.428571-146.285714v-512a36.571429 36.571429 0 0 0-36.571429-36.571428h-219.428571a36.571429 36.571429 0 0 0-36.571429 36.571428v512a36.571429 36.571429 0 0 0 36.571429 36.571429h219.428571a36.571429 36.571429 0 0 0 36.571429-36.571429z m-438.857143 0V36.571429a36.571429 36.571429 0 0 0-36.571429-36.571429h-219.428571a36.571429 36.571429 0 0 0-36.571429 36.571429v804.571428a36.571429 36.571429 0 0 0 36.571429 36.571429h219.428571a36.571429 36.571429 0 0 0 36.571429-36.571429z" fill="#ffffff" p-id="7475"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
38
src/views/print/printtemplate/font-size.js
Normal file
38
src/views/print/printtemplate/font-size.js
Normal file
@@ -0,0 +1,38 @@
|
||||
export default (function () {
|
||||
function t() {
|
||||
this.name = "fontSize"; // 重写的参数 key
|
||||
}
|
||||
// 涉及修改元素样式， 添加一个 css 方法
|
||||
return t.prototype.css = function (t, e) {
|
||||
if (t && t.length) {
|
||||
if (e) return t.css("font-size", e + "pt"), "font-size:" + e + "pt";
|
||||
t[0].style.fontSize = "";
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// 创建 DOM
|
||||
t.prototype.createTarget = function () {
|
||||
let list = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
|
||||
let fontSizeList = '\n <option value="" >默认</option>';
|
||||
list.forEach(function (e) {
|
||||
fontSizeList += '\n <option value="' + e + '">' + e + 'pt</option>';
|
||||
})
|
||||
this.target = $(' <div class="hiprint-option-item">\n <div class="hiprint-option-item-label">\n 字体大小\n </div>\n <div class="hiprint-option-item-field">\n <select class="auto-submit"> </select>\n </div>\n </div>');
|
||||
this.target.find(".auto-submit").append($(fontSizeList));
|
||||
return this.target;
|
||||
},
|
||||
// 获取值
|
||||
t.prototype.getValue = function () {
|
||||
var t = this.target.find("select").val();
|
||||
if (t) return parseFloat(t.toString());
|
||||
},
|
||||
// 设置值
|
||||
t.prototype.setValue = function (t) {
|
||||
t && (this.target.find('option[value="' + t + '"]').length || this.target.find("select").prepend('<option value="' + t + '" >' + t + "</option>"));
|
||||
this.target.find("select").val(t);
|
||||
},
|
||||
// 销毁 DOM
|
||||
t.prototype.destroy = function () {
|
||||
this.target.remove();
|
||||
}, t;
|
||||
}())
|
||||
1025
src/views/print/printtemplate/index.vue
Normal file
1025
src/views/print/printtemplate/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
353
src/views/print/printtemplate/list.vue
Normal file
353
src/views/print/printtemplate/list.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="模板编号" prop="templateCode">
|
||||
<el-input
|
||||
v-model="queryParams.templateCode"
|
||||
placeholder="请输入模板编号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模板名称" prop="templateName">
|
||||
<el-input
|
||||
v-model="queryParams.templateName"
|
||||
placeholder="请输入模板名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模板类型" prop="templateType">
|
||||
<el-select v-model="queryParams.templateType" placeholder="请选择模板类型" clearable>
|
||||
<el-option label="请选择字典生成" value="" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态" prop="enableFlag">
|
||||
<el-input
|
||||
v-model="queryParams.enableFlag"
|
||||
placeholder="请输入启用状态"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['template:template:add']"
|
||||
>新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="6"
|
||||
style="margin-bottom: 10px"
|
||||
:offset="1"
|
||||
>
|
||||
<el-card class="templateCard" >
|
||||
<div @click="handleAdd()" style="text-align: center; margin-top: 90px;">
|
||||
<svg-icon icon-class="add" style="width: 100px; height: 100px;"></svg-icon>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col
|
||||
v-for="item in templateList"
|
||||
:key="item.templateId"
|
||||
:span="6"
|
||||
style="margin-bottom: 10px"
|
||||
:offset="1"
|
||||
>
|
||||
<el-card class="templateCard">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="margin-left: 5px">{{
|
||||
item.templateName
|
||||
}}</span>
|
||||
<div
|
||||
style="display: inline-block; float: right; cursor: pointer"
|
||||
@click="handleDelete(item)"
|
||||
>
|
||||
<el-tooltip effect="dark" content="删除模板" placement="top">
|
||||
<i class="el-icon-delete" style="margin-left: 15px" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div
|
||||
style="display: inline-block; float: right; cursor: pointer"
|
||||
@click="handleEdit(item)"
|
||||
>
|
||||
<el-tooltip effect="dark" content="编辑模板" placement="top">
|
||||
<i class="el-icon-edit-outline" style="margin-left: 15px" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<el-image :src="item.templatePic" fit="fill">
|
||||
</el-image>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 添加或修改打印模板配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="模板编号" prop="templateCode">
|
||||
<el-input v-model="form.templateCode" placeholder="请输入模板编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="80">
|
||||
<el-switch v-model="autoGenFlag"
|
||||
active-color="#13ce66"
|
||||
active-text="自动生成"
|
||||
@change="handleAutoGenChange(autoGenFlag)" v-if="optType != 'view'">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span=12>
|
||||
<el-form-item label="模板名称" prop="templateName">
|
||||
<el-input v-model="form.templateName" placeholder="请输入模板名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="模板类型" prop="templateType">
|
||||
<el-select v-model="form.templateType" placeholder="请选择模板类型">
|
||||
<el-option
|
||||
v-for="dict in dict.type.print_template_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-form-item label="纸张类型" prop="paperType">
|
||||
<el-select v-model="form.paperType" placeholder="请选择纸张类型">
|
||||
<el-option
|
||||
v-for="dict in dict.type.print_paper_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="是否默认" prop="isDefault">
|
||||
<el-radio-group v-model="form.isDefault">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_yes_no"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="启用状态" prop="enableFlag">
|
||||
<el-radio-group v-model="form.enableFlag">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_yes_no"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/print/template";
|
||||
import {genCode} from "@/api/system/autocode/rule"
|
||||
export default {
|
||||
name: "Template",
|
||||
dicts: ['print_template_type','sys_yes_no','print_paper_type'],
|
||||
data() {
|
||||
return {
|
||||
//自动生成编码
|
||||
autoGenFlag:false,
|
||||
optType: undefined,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 打印模板配置表格数据
|
||||
templateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
templateCode: null, templateName: null, templateType: null, templateJson: null, paperType: null, templateWidth: null, templateHeight: null, isDefault: null, enableFlag: null, templatePic: null },
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
templateCode: [
|
||||
{ required: true, message: "模板编号不能为空", trigger: "blur" }
|
||||
],
|
||||
templateName: [
|
||||
{ required: true, message: "模板名称不能为空", trigger: "blur" }
|
||||
], templateType: [
|
||||
{ required: true, message: "模板类型不能为空", trigger: "change" }
|
||||
], paperType: [
|
||||
{ required: true, message: "请选择纸张类型", trigger: "change" }
|
||||
]}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询打印模板配置列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listTemplate(this.queryParams).then(response => {
|
||||
debugger;
|
||||
this.templateList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
templateId: null, templateCode: null, templateName: null, templateType: null, templateJson: null, paperType: null, templatePic: null, templateWidth: 1, templateHeight: 1, isDefault: 'Y', enableFlag: 'Y', remark: null, attr1: null, attr2: null, attr3: null, attr4: null, createBy: null, createTime: null, updateBy: null, updateTime: null, templatePic: null };
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加打印模板";
|
||||
},
|
||||
handleEdit(item){
|
||||
this.$router.push({name: 'printTemplateEdit', params: item});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(item) {
|
||||
const templateIds = item.templateId || this.ids;
|
||||
this.$modal.confirm('是否确认删除打印模板配置编号为"' + templateIds + '"的数据项？').then(function() {
|
||||
return delTemplate(templateIds);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
addTemplate(this.form).then(response => {
|
||||
debugger;
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.form.templateId = response.data.templateId;
|
||||
this.$router.push({name: 'printTemplateEdit', params: this.form});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//自动生成模板编码
|
||||
handleAutoGenChange(autoGenFlag){
|
||||
debugger;
|
||||
if(autoGenFlag){
|
||||
genCode('PRINT_TEMPLATE_CODE').then(response =>{
|
||||
this.form.templateCode = response;
|
||||
});
|
||||
}else{
|
||||
this.form.templateCode = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.cardGroup {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.templateCard {
|
||||
border: solid 1px;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cardHeader {
|
||||
float: right;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
107
src/views/print/printtemplate/panel.js
Normal file
107
src/views/print/printtemplate/panel.js
Normal file
@@ -0,0 +1,107 @@
|
||||
export default {
|
||||
"panels": [{
|
||||
"index": 0,
|
||||
"height": 297,
|
||||
"width": 210,
|
||||
"paperHeader": 0,
|
||||
"paperFooter": 0,
|
||||
// "watermarkOptions": {
|
||||
// "content": "vue-plugin-hiprint",
|
||||
// "rotate": 25,
|
||||
// "timestamp": true,
|
||||
// "format": "YYYY-MM-DD HH:mm"
|
||||
// },
|
||||
"printElements": [{
|
||||
"options": {
|
||||
"left": 175.5,
|
||||
"top": 10.5,
|
||||
"height": 27,
|
||||
"width": 259,
|
||||
"title": "苦糖果标签打印测试",
|
||||
"fontSize": 19,
|
||||
"fontWeight": "600",
|
||||
"textAlign": "center",
|
||||
"lineHeight": 26,
|
||||
"coordinateSync": true,
|
||||
"widthHeightSync": true,
|
||||
"draggable": true,
|
||||
}, "printElementType": {"title": "自定义文本", "type": "text"}
|
||||
}, {
|
||||
"options": {"left": 25.5, "top": 57, "height": 705, "width": 9, "fixed": true, "borderStyle": "dotted"},
|
||||
"printElementType": {"type": "vline"}
|
||||
}, {
|
||||
"options": {"left": 60, "top": 61.5, "height": 48, "width": 87, "src": "", "fit": "contain"},
|
||||
"printElementType": {"title": "图片", "type": "image"}
|
||||
}, {
|
||||
"options": {
|
||||
"left": 60,
|
||||
"top": 285,
|
||||
"height": 56,
|
||||
"width": 511.5,
|
||||
"field": "table",
|
||||
"tableFooterRepeat": "",
|
||||
"fields": [{"text":'id',"field":'id'},{"text":'姓名',"field":'name'},{"text":'性别',"field":'gender'},{"text":'数量',"field":'count'}],
|
||||
"columns": [[{"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}, {
|
||||
"title": "性别",
|
||||
"field": "gender",
|
||||
"width": 85.25,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"checked": false
|
||||
}, {
|
||||
"title": "姓名",
|
||||
"field": "name",
|
||||
"width": 85.25,
|
||||
"align": "center",
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"checked": true,
|
||||
"tableSummary": "count"
|
||||
}, {
|
||||
"title": "数量",
|
||||
"field": "count",
|
||||
"width": 85.25,
|
||||
"align": "center",
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"checked": true,
|
||||
"tableSummary": "sum"
|
||||
}, {
|
||||
"width": 85.25,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"checked": true
|
||||
}, {"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}]]
|
||||
}, "printElementType": {
|
||||
"title": "表格", "type": "table",
|
||||
// editable: true,
|
||||
// columnDisplayEditable: true,//列显示是否能编辑
|
||||
// columnDisplayIndexEditable: true,//列顺序显示是否能编辑
|
||||
// columnTitleEditable: true,//列标题是否能编辑
|
||||
// columnResizable: true, //列宽是否能调整
|
||||
// columnAlignEditable: true,//列对齐是否调整
|
||||
// isEnableEditField: true, //编辑字段
|
||||
// isEnableContextMenu: true, //开启右键菜单 默认true
|
||||
// isEnableInsertRow: true, //插入行
|
||||
// isEnableDeleteRow: true, //删除行
|
||||
// isEnableInsertColumn: true, //插入列
|
||||
// isEnableDeleteColumn: true, //删除列
|
||||
// isEnableMergeCell: true, //合并单元格
|
||||
}
|
||||
}, {
|
||||
"options": {"left": 475.5, "top": 565.5, "height": 100, "width": 100},
|
||||
"printElementType": {"title": "矩形", "type": "rect"}
|
||||
}, {
|
||||
"options": {"left": 60, "top": 574.5, "height": 100, "width": 10},
|
||||
"printElementType": {"title": "竖线", "type": "vline"}
|
||||
}, {
|
||||
"options": {"left": 130.5, "top": 625.5, "height": 10, "width": 277},
|
||||
"printElementType": {"title": "横线", "type": "hline"}
|
||||
}, {
|
||||
"options": {"left": 12, "top": 786, "height": 49, "width": 49},
|
||||
"printElementType": {"title": "html", "type": "html"}
|
||||
}],
|
||||
//"paperNumberLeft": 565.5,
|
||||
//"paperNumberTop": 819
|
||||
}]
|
||||
}
|
||||
140
src/views/print/printtemplate/preview.vue
Normal file
140
src/views/print/printtemplate/preview.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<el-dialog :visible="visible" v-loading="spinning" :maskClosable="false"
|
||||
@cancel="hideModal" :width="80+'vw'">
|
||||
|
||||
<div v-show="isMultiPanel" id="template-preview-printPagination" style="margin: 14px 0 0 10px;"></div>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-card class="card-design">
|
||||
<div id="template-preview"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card>
|
||||
<div id="template-preview-setting"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template slot="title">
|
||||
<div>
|
||||
<div style="margin-right: 20px">模板预览</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<el-button key="close" type="info" @click="hideModal">
|
||||
关闭
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {hiprint} from 'vue-plugin-hiprint';
|
||||
|
||||
let hiprintTemplate;
|
||||
export default {
|
||||
name: "templatePreview",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
spinning: true,
|
||||
waitShowPrinter: false,
|
||||
template: null,
|
||||
isMultiPanel: true,
|
||||
// 模板
|
||||
hiprintTemplate: {},
|
||||
// 数据
|
||||
name: '名称',
|
||||
json: {},
|
||||
printData: {},
|
||||
// 扩展 css
|
||||
extendCss: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideModal() {
|
||||
this.visible = false
|
||||
$("link[media=print]").empty();
|
||||
},
|
||||
show(template) {
|
||||
let that = this;
|
||||
this.visible = true
|
||||
this.spinning = true
|
||||
this.template = template
|
||||
debugger;
|
||||
this.name = template.name
|
||||
this.json = template.json
|
||||
this.printData = template.printData
|
||||
this.extendCss = template.extendCss || "";
|
||||
if (this.extendCss.length > 1) {
|
||||
$(this.extendCss).appendTo($("link[media=print]"));
|
||||
}
|
||||
let isMounted = $('#template-preview').length <= 0 || $('#template-preview-setting').length <= 0;
|
||||
do {
|
||||
setTimeout(() => {
|
||||
$('#template-preview').empty()
|
||||
that.hiprintTemplate = hiprintTemplate = new hiprint.PrintTemplate({
|
||||
template: template.json,
|
||||
settingContainer: '#template-preview-setting',
|
||||
paginationContainer: '#template-preview-printPagination'
|
||||
})
|
||||
hiprintTemplate.design($('#template-preview'))
|
||||
that.isMultiPanel = template.lastJson.panels.length > 1
|
||||
console.log('isMultiPanel', that.isMultiPanel)
|
||||
that.spinning = false
|
||||
}, 200)
|
||||
return
|
||||
} while (isMounted)
|
||||
},
|
||||
print() {
|
||||
let that = this;
|
||||
this.waitShowPrinter = true
|
||||
this.hiprintTemplate.print(this.printData, {}, {
|
||||
callback: () => {
|
||||
this.waitShowPrinter = false
|
||||
},
|
||||
styleHandler: () => {
|
||||
return that.extendCss
|
||||
}
|
||||
})
|
||||
},
|
||||
toPdf() {
|
||||
let that = this;
|
||||
this.hiprintTemplate.toPdf(this.printData, this.name, {
|
||||
styleHandler: () => {
|
||||
return that.extendCss
|
||||
}
|
||||
});
|
||||
},
|
||||
print2() {
|
||||
if (hiprint.hiwebSocket.opened) {
|
||||
let that = this;
|
||||
this.hiprintTemplate.print2(this.printData, {
|
||||
printer: '', title: this.name,
|
||||
styleHandler: () => {
|
||||
return that.extendCss
|
||||
}
|
||||
})
|
||||
} else
|
||||
this.$message.error('请先连接直接打印客户端')
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.card-design {
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/deep/ .ant-modal-body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/deep/ .ant-modal-content {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
52
src/views/print/printtemplate/print-data.js
Normal file
52
src/views/print/printtemplate/print-data.js
Normal file
File diff suppressed because one or more lines are too long
52
src/views/print/printtemplate/printData.js
Normal file
52
src/views/print/printtemplate/printData.js
Normal file
File diff suppressed because one or more lines are too long
31
src/views/print/printtemplate/scale.js
Normal file
31
src/views/print/printtemplate/scale.js
Normal file
@@ -0,0 +1,31 @@
|
||||
export default (function () {
|
||||
function t() {
|
||||
// json模板 options 对应键值 key
|
||||
this.name = "scale";
|
||||
}
|
||||
// 涉及修改元素样式， 添加一个 css 方法
|
||||
// t: 元素对象， e 参数值
|
||||
return t.prototype.css = function (t, e) {
|
||||
if (t && t.length) {
|
||||
if (e) return t.css('transform', 'scale(' + e + ')');
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// 创建 DOM
|
||||
t.prototype.createTarget = function (t, i, e) { // t: 元素对象，i: 元素options, e: 元素printElementType
|
||||
return this.target = $('<div class="hiprint-option-item">\n <div class="hiprint-option-item-label">\n 缩放\n </div>\n <div class="hiprint-option-item-field">\n <input type="number" value="1" step="0.1" min="0.1" max="3" class="auto-submit"/>\n </div>\n </div>'), this.target;
|
||||
},
|
||||
// 获取值
|
||||
t.prototype.getValue = function () {
|
||||
var t = this.target.find("input").val();
|
||||
if (t) return parseFloat(t.toString());
|
||||
},
|
||||
// 设置值
|
||||
t.prototype.setValue = function (t) { // t: options 对应键的值
|
||||
this.target.find("input").val(t);
|
||||
},
|
||||
// 销毁 DOM
|
||||
t.prototype.destroy = function () {
|
||||
this.target.remove();
|
||||
}, t;
|
||||
}())
|
||||
227
src/views/print/printtemplate/templateedit.vue
Normal file
227
src/views/print/printtemplate/templateedit.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="flex-col">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['print:printerconfig:add']"
|
||||
>保存</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['print:printerconfig:edit']"
|
||||
>打印</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['print:printerconfig:remove']"
|
||||
>取消</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="4">
|
||||
<div class="flex-2 left">
|
||||
<div class="flex-row justify-center flex-wrap">
|
||||
<div class="title">基础元素</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.text">
|
||||
<i class="iconfont sv-text" />
|
||||
<span>文本</span>
|
||||
</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.image">
|
||||
<i class="iconfont sv-image" />
|
||||
<span>图片</span>
|
||||
</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.longText">
|
||||
<i class="iconfont sv-longText" />
|
||||
<span>长文</span>
|
||||
</div>
|
||||
<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.html">
|
||||
<i class="iconfont sv-html" />
|
||||
<span>html</span>
|
||||
</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.customText">
|
||||
<i class="iconfont sv-text" />
|
||||
<span>自定义</span>
|
||||
</div>
|
||||
<div class="title">辅助元素</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.hline">
|
||||
<i class="iconfont sv-hline" />
|
||||
<span>横线</span>
|
||||
</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.vline">
|
||||
<i class="iconfont sv-vline" />
|
||||
<span>竖线</span>
|
||||
</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.rect">
|
||||
<i class="iconfont sv-rect" />
|
||||
<span>矩形</span>
|
||||
</div>
|
||||
<div class="ep-draggable-item item" tid="defaultModule.oval">
|
||||
<i class="iconfont sv-oval" />
|
||||
<span>圆形</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col span="16">
|
||||
<div id="hiprint-printTemplate"></div>
|
||||
</el-col>
|
||||
<el-row span="4">
|
||||
<!-- 元素参数的 容器 -->
|
||||
<div id="PrintElementOptionSetting"></div>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
|
||||
export default {
|
||||
name: "start-01",
|
||||
created(){
|
||||
// 初始化 provider
|
||||
hiprint.init({
|
||||
providers: [defaultElementTypeProvider()],
|
||||
});
|
||||
},
|
||||
mounted(){
|
||||
this.buildLeftElement();
|
||||
this.buildDesigner();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 构建左侧可拖拽元素
|
||||
* 注意: 可拖拽元素必须在 hiprint.init() 之后调用
|
||||
* 而且 必须包含 class="ep-draggable-item" 否则无法拖拽进设计器
|
||||
*/
|
||||
buildLeftElement(){
|
||||
// eslint-disable-next-line no-undef
|
||||
hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
|
||||
},
|
||||
/**
|
||||
* 构建设计器
|
||||
* 注意: 必须要在 onMounted 中去构建
|
||||
* 因为都是把元素挂载到对应容器中, 必须要先找到该容器
|
||||
*/
|
||||
buildDesigner(){
|
||||
debugger;
|
||||
let hiprintTemplate;
|
||||
// eslint-disable-next-line no-undef
|
||||
$("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
|
||||
hiprintTemplate = new hiprint.PrintTemplate({
|
||||
settingContainer: "#PrintElementOptionSetting", // 元素参数容器
|
||||
});
|
||||
// 构建 并填充到 容器中
|
||||
// 可以先 console.log($("#hiprint-printTemplate")) 看看是否有该 dom
|
||||
hiprintTemplate.design("#hiprint-printTemplate");
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 重写全局 hiprint 样式 */
|
||||
.hiprint-headerLine,
|
||||
.hiprint-footerLine {
|
||||
border-color: purple !important;
|
||||
}
|
||||
|
||||
.hiprint-headerLine:hover,
|
||||
.hiprint-footerLine:hover {
|
||||
border-top: 3px dashed purple !important;
|
||||
}
|
||||
|
||||
.hiprint-headerLine:hover:before {
|
||||
content: "页眉线";
|
||||
left: calc(50% - 18px);
|
||||
position: relative;
|
||||
background: #ffff;
|
||||
top: -14px;
|
||||
color: purple;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hiprint-footerLine:hover:before {
|
||||
content: "页脚线";
|
||||
left: calc(50% - 18px);
|
||||
position: relative;
|
||||
color: purple;
|
||||
background: #ffff;
|
||||
top: -14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 区域 */
|
||||
.left {
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 24px;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: white;
|
||||
padding: 4px 10px;
|
||||
margin: 10px 8px 4px 8px;
|
||||
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