Skip to content

P
PrintVue
提交 0cd56cf6 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

初次上传

上级
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1289 行增加 和 0 行删除
.gitignore 0 → 100644
浏览文件 @ 0cd56cf6
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
/.vscode
/yarn.lock
/pnpm-lock.yaml
/package-lock.json
/lib
\ No newline at end of file
README.md 0 → 100644
浏览文件 @ 0cd56cf6
# Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support For `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
index.html 0 → 100644
浏览文件 @ 0cd56cf6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
package.json 0 → 100644
浏览文件 @ 0cd56cf6
{
"name": "print-vue",
"version": "1.0.0",
"type": "module",
"main": "./dist/PrintVue.umd.cjs",
"module": "./dist/PrintVue.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": "./dist/PrintVue.js",
"require": "./dist/PrintVue.umd.cjs"
}
},
"publishConfig": {
"registry": "http://192.168.1.42:8081/repository/vue/",
"access": "public"
},
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"files": [
"package.json",
"README.md",
"LICENSE",
"dist"
],
"dependencies": {
"@types/node": "^18.11.18",
"element-plus": "^2.2.28",
"axios": "^0.24.0",
"jquery": "^3.7.0",
"vue": "^3.2.45",
"vue-router": "^4.1.6",
"vuex": "^4.1.0",
"vue-plugin-hiprint": "^0.0.52"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"sass": "^1.57.1",
"terser": "^5.16.3",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vite-plugin-dts": "1.4.1",
"vue-tsc": "^1.0.11"
},
"license": "ISC"
}
src/App.vue 0 → 100644
浏览文件 @ 0cd56cf6
<template>
<index />
</template>
<script setup lang="ts">
import index from './printTemplate/index.vue';
</script>
<style scoped>
</style>
src/hooks/use-paper.ts 0 → 100644
浏览文件 @ 0cd56cf6
import { reactive, computed, toRefs } from "vue";
import { getHiprintPrintTemplate } from "../utils/template-helper";
/**
* vue3 组合式函数
* 把一些逻辑抽离出来，方便复用
* 返回 使用方 可用的方法和数据
*/
export function usePaper(key: any) {
// 数据
const state = reactive({
curPaper: {
type: "custom",
width: 70,
height: 50,
},
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,
},
custom: {
width: 70,
height: 50,
}
},
// 自定义纸张
paperPopVisible: false,
paperWidth: "220",
paperHeight: "80",
});
// 计算属性
const curPaperType = computed(() => {
let type = "other";
let types: any = state.paperTypes;
for (const key in types) {
let item = types[key];
let { width, height } = state.curPaper;
if (item.width === width && item.height === height) {
type = key;
}
}
return type;
});
const tp = () => {
return getHiprintPrintTemplate(key);
};
// 方法
const showPaperPop = () => {
state.paperPopVisible = true;
};
const hidePaperPop = () => {
state.paperPopVisible = false;
};
const setPaper = (type: string, value: any) => {
try {
if (Object.keys(state.paperTypes).includes(type)) {
state.curPaper = { type: type, width: value.width, height: value.height };
tp().setPaper(value.width, value.height);
} else {
state.curPaper = { type: "other", width: value.width, height: value.height };
tp().setPaper(value.width, value.height);
}
} catch (error) {
alert(`操作失败: ${error}`);
}
};
const setPaperOther = () => {
let value: any = {};
value.width = state.paperWidth;
value.height = state.paperHeight;
hidePaperPop()
setPaper("other", value);
};
// 暴露给使用方
return {
...toRefs(state),
curPaperType,
showPaperPop,
hidePaperPop,
setPaper,
setPaperOther,
};
}
src/hooks/use-zoom.ts 0 → 100644
浏览文件 @ 0cd56cf6
import { reactive, toRefs } from "vue";
import { getHiprintPrintTemplate } from "../utils/template-helper";
/**
* vue3 组合式函数
* 把一些逻辑抽离出来，方便复用
* 返回 使用方 可用的方法和数据
*/
export function useZoom(key: any) {
// 数据
const state = reactive({
scaleValue: 1,
scaleMax: 5,
scaleMin: 0.5,
});
// 获取 template
const tp = () => {
return getHiprintPrintTemplate(key);
};
// 方法
const changeScale = (big: any) => {
let scaleValue = state.scaleValue;
if (big) {
scaleValue += 0.1;
if (scaleValue > state.scaleMax) scaleValue = 5;
} else {
scaleValue -= 0.1;
if (scaleValue < state.scaleMin) scaleValue = 0.5;
}
if (tp()) {
// scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
tp().zoom(scaleValue);
state.scaleValue = scaleValue;
}
};
// 暴露给使用方
return {
...toRefs(state),
changeScale,
};
}
\ No newline at end of file
src/index.ts 0 → 100644
浏览文件 @ 0cd56cf6
import type { App } from 'vue'
import 'element-plus/dist/index.css'
import PrintTemplate from './printTemplate/index.vue'
const components = [
PrintTemplate
]
components.forEach(
component =>
(component.install = (app: App) => {
app.component(component.name, component)
})
)
const install = (app: App) => {
components.forEach(component => app.component(component.name, component))
}
export {
install,
PrintTemplate
}
\ No newline at end of file
src/main.ts 0 → 100644
浏览文件 @ 0cd56cf6
import { createApp } from 'vue'
import App from './App.vue'
import element from 'element-plus'
// import './style.css'
import 'element-plus/dist/index.css'
import { disAutoConnect } from 'vue-plugin-hiprint'
// 关闭打印插件的客服端连接
disAutoConnect(); // 取消自动连接
const app = createApp(App)
app.use(element)
app.mount('#app')
src/printTemplate/components/json-view.vue 0 → 100644
浏览文件 @ 0cd56cf6
<template>
<el-dialog v-model="state.visible" @close="hideModal" width="40%">
<div v-loading="state.spinning" style="min-height: 100px">
<el-input type="textarea" :rows="20" v-model:value="state.jsonOut" />
</div>
<template #title>
<el-row>
<el-col :span="20">
<div style="margin-right: 20px">JSON</div>
<el-switch active-text="tid模式" inactive-text="默认" v-model="state.tidMode" @change="onModeChange"
style="margin-right: 30px;" />
<el-switch active-text="美化" inactive-text="压缩" v-model="state.beautify" @change="onModeChange" />
</el-col>
<el-col :span="4">
<el-button key="close" type="info" @click="hideModal">
关闭
</el-button>
</el-col>
</el-row>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
const state = reactive({
visible: false,
spinning: true,
jsonOut: "",
tidMode: false,
beautify: false,
template: null as any
});
const hideModal = () => {
state.visible = false
}
const show = (hiprintTemplate?: any) => {
state.visible = true
state.spinning = true
if (hiprintTemplate)
state.template = hiprintTemplate
console.log(state.template);
setTimeout(() => {
let json = state.tidMode ? state.template.getJsonTid() : state.template.getJson();
let beautify = state.beautify ? 2 : 0;
state.jsonOut = JSON.stringify(json, null, beautify);
state.spinning = false
}, 500)
}
const onModeChange = () => {
show();
}
defineExpose({
show
})
</script>
<style scoped>
.el-dialog__body {
padding: 0px;
}
.el-dialog__footer {
margin-bottom: 24px;
}
</style>
src/printTemplate/components/preview.vue 0 → 100644
浏览文件 @ 0cd56cf6
<template>
<el-dialog v-model="visible" @close="hideModal" :width="width + 'mm'">
<div v-loading="spinning" style="min-height: 100px; display: flex; justify-content: center; align-items: center;">
<div class="container-preview"></div>
</div>
<template #title>
<el-space>
<div style="margin-right: 20px">打印预览</div>
<el-button :loading="waitShowPrinter" type="primary" icon="print" @click.stop="print">打印</el-button>
<el-button type="primary" icon="el-icon-printer" @click.stop="toPdf">pdf</el-button>
</el-space>
</template>
<template #footer>
<el-button key="close" type="info" @click="hideModal">
关闭
</el-button>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import $ from 'jquery'
const visible = ref(false);
const spinning = ref(true);
const waitShowPrinter = ref(false);
const width = ref(0);
const hiprintTemplate: any = ref();
const printData: any = ref();
const hideModal = () => {
visible.value = false;
};
const print = () => {
waitShowPrinter.value = true;
hiprintTemplate.value.print(printData.value, {}, {
callback: () => {
waitShowPrinter.value = false;
},
});
};
const toPdf = () => {
hiprintTemplate.value.toPdf(printData.value, "打印预览pdf");
};
const show = (hiprintTemplates: any, printDatas: any, widths: any = "210") => {
visible.value = true;
spinning.value = true;
width.value = hiprintTemplates?.editingPanel?.width ?? widths;
hiprintTemplate.value = hiprintTemplates
printData.value = printDatas
setTimeout(() => {
const templateHtml = hiprintTemplate.value.getHtml(printData.value);
$(".container-preview").empty();
$(".container-preview").html(templateHtml)
spinning.value = false;
}, 300);
};
defineExpose({
show
})
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
padding: 0px;
}
:deep(.el-dialog__wrapper) {
margin-bottom: 24px;
}
</style>
\ No newline at end of file
src/printTemplate/components/printDrawer.vue 0 → 100644
浏览文件 @ 0cd56cf6
差异被折叠。
src/printTemplate/index.scss 0 → 100644
浏览文件 @ 0cd56cf6
.flex-col {
display: flex;
flex-direction: column;
}
.justify-center {
justify-content: center;
}
.flex-row {
display: flex;
}
.align-center {
align-items: center;
}
.ml-10 {
margin-left: 10px;
}
.circle-10 {
border-radius: 10px !important;
}
.app-containter {
padding: 10px;
.header {
margin: 10px 0;
align-items: center;
}
.main {
flex: 1;
max-height: 650px;
.flex-2 {
flex: 2;
}
.flex-5 {
flex: 5;
}
.left {
background: white;
border-radius: 4px;
border: 1px solid #d9d9d9;
// box-shadow: 2px 2px 2px 0px rgb(0 0 0 / 20%);
overflow: auto;
// padding: 0 10px;
}
.label ul {
position: relative;
overflow: hidden;
padding: 0 10px 10px;
margin: 0;
& li {
font-size: 12px;
display: block;
width: 48%;
line-height: 26px;
position: relative;
float: left;
left: 0;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
margin: 1%;
border: 1px solid #f4f6fc;
}
}
.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;
}
.center {
box-sizing: border-box;
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;
}
}
}
:deep(.el-card__body) {
padding: 10px;
}
:deep(.container) > ul {
list-style: none;
display: flex;
flex-direction: column;
padding-left: 10px;
li {
font-size: 12px;
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
li {
box-sizing: border-box;
font-size: 12px;
display: block;
width: 48%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 1%;
border: 1px solid #f4f6fc;
background: #f4f6fc;
padding: 6px 0;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
.input-group {
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
:deep(.el-input__wrapper) {
border-radius: 0;
}
}
src/printTemplate/index.vue 0 → 100644
浏览文件 @ 0cd56cf6
<template>
<div style="padding: 10px;">
<el-button type="primary" icon="plus" size="small" @click="show" style="margin-bottom: 10px;">
新增
</el-button>
<el-table :data="tableData" style="width: 7 0%" border>
<el-table-column fixed prop="date" label="Date" width="150" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="state" label="State" width="120" />
<el-table-column prop="city" label="City" width="120" />
<el-table-column prop="address" label="Address" width="600" />
<el-table-column prop="zip" label="Zip" width="120" />
<el-table-column fixed="right" label="Operations" width="120">
<template #default>
<el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
<el-button link type="primary" size="small">Edit</el-button>
</template>
</el-table-column>
</el-table>
<indexVue v-model="showDrawer" ref="printRef" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import indexVue from './components/printDrawer.vue';
const showDrawer = ref(false)
const printRef = ref()
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home',
},
{
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office',
},
{
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home',
},
{
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office',
},
]
const handleClick = () => {
console.log('click')
}
const show = () => {
showDrawer.value = true
printRef.value.mounted()
}
</script>
src/printTemplate/ts/font-size.ts 0 → 100644
浏览文件 @ 0cd56cf6
export default class FontSizeOption {
name: string;
constructor() {
this.name = "fontSize";
}
// 涉及修改元素样式， 添加一个 css 方法
css(target: HTMLSelectElement, size: string | null): string | null {
if (target) {
if (size) {
target.style.fontSize = size + "pt";
return "font-size:" + size + "pt";
} else {
target.style.fontSize = "";
}
}
return null;
}
// 创建 DOM
createTarget(): HTMLElement {
const 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((e) => {
fontSizeList += '\n<option value="' + e + '">' + e + 'pt</option>';
});
const target = document.createElement("div");
target.classList.add("hiprint-option-item");
target.innerHTML =
'<div class="hiprint-option-item-label">\n字体大小\n</div>\n<div class="hiprint-option-item-field">\n<select class="auto-submit">\n' +
fontSizeList +
'\n</select>\n</div>\n';
return target;
}
// 获取值
getValue(target: HTMLElement): number | undefined {
const select = target.querySelector("select");
if (select) {
const size = select.value;
if (size) {
return parseFloat(size);
}
}
return undefined;
}
// 设置值
setValue(target: HTMLElement, size: number | undefined): void {
const select = target.querySelector("select");
if (size && select) {
const option = select.querySelector(`option[value="${size}"]`);
if (!option) {
select.insertAdjacentHTML("afterbegin", `<option value="${size}" >${size}</option>`);
}
select.value = size.toString();
} else if (select) {
select.value = "";
}
}
// 销毁 DOM
destroy(target: HTMLElement): void {
target.remove();
}
}
src/printTemplate/ts/provider1.ts 0 → 100644
浏览文件 @ 0cd56cf6
import { hiprint } from "vue-plugin-hiprint";
export const provider1 = function (options: any) {
console.log(options);
var addElementTypes = function (context: any) {
context.removePrintElementTypes("providerModule1");
context.addPrintElementTypes("providerModule1", [
new hiprint.PrintElementTypeGroup("常规", [
options.config,
{
tid: "providerModule1.header",
title: "单据表头",
data: "单据表头",
type: "text",
options: {
testData: "单据表头",
height: 17,
fontSize: 16.5,
fontWeight: "700",
textAlign: "center",
hideTitle: true,
},
},
{
tid: "providerModule1.type",
title: "单据类型",
data: "单据类型",
type: "text",
options: {
testData: "单据类型",
height: 16,
fontSize: 15,
fontWeight: "700",
textAlign: "center",
hideTitle: true,
},
},
{
tid: "providerModule1.order",
title: "订单编号",
data: "XS888888888",
type: "text",
options: {
field: "order",
testData: "XS888888888",
height: 16,
fontSize: 6.75,
fontWeight: "700",
textAlign: "left",
textContentVerticalAlign: "middle",
},
},
{
tid: "providerModule1.date",
title: "业务日期",
data: "2020-01-01",
type: "text",
options: {
field: "date",
testData: "2020-01-01",
height: 16,
fontSize: 6.75,
fontWeight: "700",
textAlign: "left",
textContentVerticalAlign: "middle",
},
},
{
tid: "providerModule1.barcode",
title: "条形码",
data: "XS888888888",
type: "text",
options: {
field: "barcode",
testData: "XS888888888",
height: 32,
fontSize: 12,
lineHeight: 18,
textAlign: "left",
textType: "barcode",
},
},
{
tid: "providerModule1.qrcode",
title: "二维码",
data: "XS888888888",
type: "text",
options: {
field: "qrcode",
testData: "XS888888888",
height: 32,
fontSize: 12,
lineHeight: 18,
textType: "qrcode",
},
},
{
tid: "providerModule1.platform",
title: "平台名称",
data: "平台名称",
type: "text",
options: {
field: "platform",
testData: "平台名称",
height: 17,
fontSize: 16.5,
fontWeight: "700",
textAlign: "center",
hideTitle: true,
},
},
{ tid: "providerModule1.image", title: "Logo", data: "", type: "image" },
]),
new hiprint.PrintElementTypeGroup("客户", [
{
tid: "providerModule1.khname",
title: "客户名称",
data: "高级客户",
type: "text",
options: {
field: "name",
testData: "高级客户",
height: 16,
fontSize: 6.75,
fontWeight: "700",
textAlign: "left",
textContentVerticalAlign: "middle",
},
},
{
tid: "providerModule1.tel",
title: "客户电话",
data: "18888888888",
type: "text",
options: {
field: "tel",
testData: "18888888888",
height: 16,
fontSize: 6.75,
fontWeight: "700",
textAlign: "left",
textContentVerticalAlign: "middle",
},
},
]),
]);
};
return {
addElementTypes: addElementTypes,
};
};
src/printTemplate/ts/provider2.ts 0 → 100644
浏览文件 @ 0cd56cf6
import { hiprint } from "vue-plugin-hiprint";
export const provider2 = function (options: any) {
console.log(options);
var addElementTypes = function (context: any) {
context.removePrintElementTypes("providerModule2");
context.addPrintElementTypes("providerModule2", [
new hiprint.PrintElementTypeGroup("表格/其他", [
{
tid: "providerModule2.table",
title: "订单数据",
type: "table",
options: {
field: "table",
fields: [
{ text: "名称", field: "NAME" },
{ text: "数量", field: "SL" },
{ text: "规格", field: "GG" },
{ text: "条码", field: "TM" },
{ text: "单价", field: "DJ" },
{ text: "金额", field: "JE" },
{ text: "备注", field: "DETAIL" },
],
},
columns: [
[
{ title: "名称", align: "center", field: "NAME", width: 100 },
{ title: "数量", align: "center", field: "SL", width: 100 },
{ title: "条码", align: "center", field: "TM", width: 100 },
{ title: "规格", align: "center", field: "GG", width: 100 },
{ title: "单价", align: "center", field: "DJ", width: 100 },
{ title: "金额", align: "center", field: "JE", width: 100 },
{ title: "备注", align: "center", field: "DETAIL", width: 100 },
],
],
footerFormatter: function (options: any, rows: any, data: any, currentPageGridRowsData: any) {
console.log(currentPageGridRowsData);
if (data && data["totalCap"]) {
return `<td style="padding:0 10px" colspan="100">${"应收金额大写: " + data["totalCap"]}</td>`;
}
return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>';
},
},
{ tid: "providerModule2.customText", title: "文本", customText: "自定义文本", custom: true, type: "text" },
{
tid: "providerModule2.longText",
title: "长文本",
type: "longText",
options: {
field: "test.longText",
width: 200,
testData: "长文本分页/不分页测试",
},
},
]),
new hiprint.PrintElementTypeGroup("辅助", [
{
tid: "providerModule2.hline",
title: "横线",
type: "hline",
},
{
tid: "providerModule2.vline",
title: "竖线",
type: "vline",
},
{
tid: "providerModule2.rect",
title: "矩形",
type: "rect",
},
{
tid: "providerModule2.oval",
title: "椭圆",
type: "oval",
},
]),
]);
};
return {
addElementTypes: addElementTypes,
};
};
src/printTemplate/ts/scale.ts 0 → 100644
浏览文件 @ 0cd56cf6
export default class ScaleOption {
name: string;
target!: HTMLElement;
constructor() {
// json 模板 options 对应键值 key
this.name = 'scale';
}
// 涉及修改元素样式， 添加一个 css 方法
// t: 元素对象， e 参数值
css(target: HTMLElement, value: string | null): string | null {
if (target) {
if (value) {
target.style.transform = 'scale(' + value + ')';
return target.style.transform;
}
}
return null;
}
// 创建 DOM
createTarget(element: HTMLElement, options: any, printElementType: string): HTMLElement {
// element: 元素对象，options: 元素 options, printElementType: 元素的打印类型
this.target = document.createElement('div');
this.target.classList.add('hiprint-option-item');
this.target.innerHTML =
'<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>';
return this.target;
}
// 获取值
getValue(): number | undefined {
const input = this.target.querySelector('input');
if (input) {
const value = input.getAttribute('value');
if (value) {
return parseFloat(value);
}
}
return undefined;
}
// 设置值
setValue(value: number | undefined): void {
const input = this.target.querySelector('input');
if (input) {
input.setAttribute('value', value?.toString() || '');
}
}
// 销毁 DOM
destroy(): void {
this.target.remove();
}
}
src/printTemplate/ts/template.ts 0 → 100644
浏览文件 @ 0cd56cf6
export default {
"panels": [
{
"name": null,
"height": 50,
"width": 70,
"paperHeader": 0,
"paperFooter": 141.73228346456693,
"printElements": [
{
"options": {
"left": 10.5,
"top": 7.5,
"height": 32,
"width": 120,
"field": "barcode",
"testData": "XS888888888",
"fontSize": 12,
"lineHeight": 18,
"textAlign": "left",
"textType": "barcode",
"title": "条形码"
},
"printElementType": {
"title": "条形码",
"type": "text"
}
},
{
"options": {
"left": 10.5,
"top": 58.5,
"height": 16,
"width": 120,
"field": "date",
"testData": "2020-01-01",
"fontSize": 6.75,
"fontWeight": "700",
"textAlign": "left",
"textContentVerticalAlign": "middle",
"title": "业务日期"
},
"printElementType": {
"title": "业务日期",
"type": "text"
}
},
{
"options": {
"left": 10.5,
"top": 75,
"height": 16,
"width": 120,
"field": "tel",
"testData": "18888888888",
"fontSize": 6.75,
"fontWeight": "700",
"textAlign": "left",
"textContentVerticalAlign": "middle",
"title": "客户电话"
},
"printElementType": {
"title": "客户电话",
"type": "text"
}
},
{
"options": {
"left": 10.5,
"top": 94.5,
"height": 16,
"width": 120,
"field": "tel",
"testData": "18888888888",
"fontSize": 6.75,
"fontWeight": "700",
"textAlign": "left",
"textContentVerticalAlign": "middle",
"title": "客户电话"
},
"printElementType": {
"title": "客户电话",
"type": "text"
}
},
{
"options": {
"left": 105,
"top": 111,
"height": 21,
"width": 84,
"field": "qrcode",
"testData": "XS888888888",
"fontSize": 12,
"lineHeight": 18,
"textType": "qrcode",
"title": "二维码",
"right": 189.7478485107422,
"bottom": 132.74147415161133,
"vCenter": 147.7478485107422,
"hCenter": 122.24147415161133
},
"printElementType": {
"title": "二维码",
"type": "text"
}
}
],
"paperNumberLeft": 168,
"paperNumberTop": 123,
"paperNumberDisabled": true,
"watermarkOptions": {
"content": "",
"fillStyle": "rgba(184, 184, 184, 0.3)",
"fontSize": "14px",
"rotate": 25,
"width": 200,
"height": 200,
"timestamp": false,
"format": "YYYY-MM-DD HH:mm"
}
}
]
}
\ No newline at end of file
src/types/index.d.ts 0 → 100644
浏览文件 @ 0cd56cf6
declare module 'jquery';
declare module 'vue-plugin-hiprint';
\ No newline at end of file
src/utils/template-helper.ts 0 → 100644
浏览文件 @ 0cd56cf6
import { hiprint } from "vue-plugin-hiprint";
const templateMap = {} as any;
export function newHiprintPrintTemplate(key: any, options: any) {
let template = new hiprint.PrintTemplate(options);
templateMap[key] = template;
return template;
}
export function getHiprintPrintTemplate(key: any) {
return templateMap[key];
}
src/vite-env.d.ts 0 → 100644
浏览文件 @ 0cd56cf6
/// <reference types="vite/client" />
tsconfig.json 0 → 100644
浏览文件 @ 0cd56cf6
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json 0 → 100644
浏览文件 @ 0cd56cf6
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
vite.config.ts 0 → 100644
浏览文件 @ 0cd56cf6
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue' // 处理vue文件
import dts from 'vite-plugin-dts' //生成类库的声明文件.d.ts
const input = resolve('src') // 入口文件
const output = resolve('dist') // 输出文件
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
dts({
include: ['src/**/*'],
exclude: ['node_modules/**'],
})
],
resolve: {
alias: [
{
find: '~',
replacement: resolve('src'),
},
],
},
server: {
host: '0.0.0.0',
port: 3008,
strictPort: true, // 端口被占用直接退出
https: false, // 默认用http方式
open: true, // 在开发服务器启动时自动在浏览器中打开应用程序
proxy: {
'/lowcodeplatform-system': {
target: 'http://192.168.1.41',
// target: 'http://192.168.0.8:8089',
}
},
hmr: {
overlay: true, // 屏蔽服务器报错
},
},
// 打包
build: {
// 打包输出目录
outDir: output,
minify: 'terser',
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
lib: {
entry: resolve(input, 'index.ts'),
name: 'PrintVue',
// 构建生成的文件名，与package.json中配置一致
fileName: 'PrintVue',
},
rollupOptions: {
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue',
'element-plus': 'ElementPlus',
axios: 'axios',
vuex: 'vuex',
'vue-router': 'vue-router',
"jquery": 'jquery',
'vue-plugin-hiprint': 'vue-plugin-hiprint'
},
},
// 打包过滤掉第三方库
external: [
'vue',
'element-plus',
'axios',
'vuex',
'vue-router',
'jquery',
'vue-plugin-hiprint'
],
},
},
})
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论