This commit is contained in:
yf
parent
8dd5fb6519
commit
b41184a5de
|
|
@ -310,7 +310,7 @@ import {reactive, watch} from 'vue'
|
|||
import {useMessage} from "@/hooks/web/useMessage";
|
||||
import {DraftDesignDataApi} from "@/api/oms/draftdesigndata";
|
||||
import DraftDesign from "@/components/DraftDesign/index.vue";
|
||||
import {ShapeType} from "@/components/DraftDesign/config";
|
||||
import {getHtml, ShapeType} from "@/components/DraftDesign/config";
|
||||
import {ProductCareItemApi} from "@/api/oms/productcareitem";
|
||||
import {replaceDomain} from "@/utils";
|
||||
import * as FileApi from "@/api/infra/file";
|
||||
|
|
@ -632,8 +632,9 @@ const uploadFile = async (fileName) => {
|
|||
}
|
||||
|
||||
const saveMaxSvg = (svgElement,fileName)=>{
|
||||
const blob = new Blob([svgElement?.parentElement?.innerHTML], { type: 'text/html' });
|
||||
const file = new File([blob], fileName+".html", {type: 'image/png'});
|
||||
const htmlStr = getHtml(`${svgElement?.parentElement?.innerHTML}`);
|
||||
const blob = new Blob([htmlStr], { type: 'text/html' });
|
||||
const file = new File([blob], fileName+".html", {type: 'text/html'});
|
||||
FileApi.updateFile({file: file})
|
||||
.then((res) => {
|
||||
console.log("res"+res)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,308 @@
|
|||
<!-- eslint-disable vue/this-in-template -->
|
||||
<template>
|
||||
<div
|
||||
:id="cellInfo.id"
|
||||
class="node-content"
|
||||
:class="{
|
||||
'node-content-group' : cellInfo.editMode && cellInfo.propGroupId,
|
||||
'node-content-tips' : cellInfo.editMode && !cellInfo.style.shape.href
|
||||
}"
|
||||
:title="cellInfo.propGroupName"
|
||||
v-reSize="changSize">
|
||||
|
||||
<div v-html="svgContent" style=" width: 100%;height: 100%;"></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// 图片
|
||||
import {defineComponent} from 'vue'
|
||||
import {
|
||||
filterUnsafeHtml,
|
||||
mergeDeepObject,
|
||||
nextId,
|
||||
} from "@/components/DraftDesign/utils/FuncUtil";
|
||||
import {
|
||||
configInfo,
|
||||
getBarCodeType,
|
||||
getDraftDesignState,
|
||||
VueCellShapeType
|
||||
} from "@/components/DraftDesign/config";
|
||||
import bwipjs from 'bwip-js';
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ShapeBarcodeNode',
|
||||
computed: {
|
||||
VueCellShapeType() {
|
||||
return VueCellShapeType
|
||||
},
|
||||
minShapeSize() {
|
||||
if (this.cellInfo.style.shape.strokeWidth) {
|
||||
return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
|
||||
}
|
||||
return this.minSize;
|
||||
},
|
||||
svgStyle() {
|
||||
const res = {
|
||||
borderRadius: '',
|
||||
backgroundColor: this.cellInfo.style.shape.fillColor || "",
|
||||
width: `1000px`,
|
||||
height: `1000px`,
|
||||
transform: ''
|
||||
}
|
||||
// const tmp = Math.min(this.sizeWInfo.width, this.sizeWInfo.height) - (this.cellInfo.style.shape.strokeWidth * 2)
|
||||
const w = (Math.max(this.sizeWInfo.width, 0)) / 1000;
|
||||
const h = (Math.max(this.sizeWInfo.height, 0)) / 1000;
|
||||
res.transform = `scaleX(${w}) scaleY(${h})`
|
||||
return res;
|
||||
},
|
||||
|
||||
},
|
||||
// eslint-disable-next-line vue/order-in-components
|
||||
inject: ['getNode'],
|
||||
// eslint-disable-next-line vue/order-in-components
|
||||
data() {
|
||||
return {
|
||||
textElId: nextId(),
|
||||
svgContent: '',
|
||||
cellInfo: {
|
||||
id: '',
|
||||
label: '文字说明',
|
||||
editMode: false,
|
||||
showInput: false,
|
||||
propGroupName: "",
|
||||
propGroupId: null,
|
||||
shape: VueCellShapeType.Rect,
|
||||
style: {
|
||||
shape: {
|
||||
x: 0, // 矩形左上角的 x 坐标
|
||||
y: 0, // 矩形左上角的 y 坐标
|
||||
rx: 0, // 矩形的圆角 x 半径
|
||||
ry: 0, // 矩形的圆角 y 半径
|
||||
fillColor: '', // 填充颜色
|
||||
fillOpacity: '', // 填充颜色的不透明度
|
||||
href: '',
|
||||
opacity: '', // 元素的不透明度
|
||||
strokeDashoffset: '', // 虚线起始偏移量
|
||||
strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
|
||||
strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
|
||||
strokeDasharray: '', // 虚线模式
|
||||
bottom: 0, // 元素的底部位置（用于定位）
|
||||
transform: '', // 应用到元素的变换（如平移、旋转、缩放）
|
||||
clipPath: '', // 应用到元素的裁剪路径
|
||||
filter: '', // 应用到元素的滤镜效果
|
||||
},
|
||||
text: {
|
||||
minWidth: 'max-content',
|
||||
fontSize: 12,
|
||||
minHeight: 'max-content',
|
||||
}
|
||||
}
|
||||
},
|
||||
nodeInfo: {
|
||||
store: {
|
||||
data: {
|
||||
data: {
|
||||
label: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fontSize: 12,
|
||||
hrefBase64: null,
|
||||
targetElement: null,
|
||||
minSize: 2,
|
||||
sizeWInfo: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const node = (this as any).getNode()
|
||||
this.nodeInfo = node
|
||||
|
||||
|
||||
if (node && node.data) {
|
||||
this.setCellInfo(node.data)
|
||||
}
|
||||
node.on('change:data', ({current}) => {
|
||||
|
||||
this.setCellInfo(current)
|
||||
})
|
||||
|
||||
},
|
||||
unmounted() {
|
||||
},
|
||||
methods: {
|
||||
toInt(val, defaultVal = 0) {
|
||||
try {
|
||||
return parseInt(val)
|
||||
} catch (e) {
|
||||
return defaultVal
|
||||
}
|
||||
},
|
||||
safeHtml(val) {
|
||||
if (val) {
|
||||
val = val.replace(/[\n\r]/g, "<br/>")
|
||||
}
|
||||
return filterUnsafeHtml(val)
|
||||
},
|
||||
inputBlur() {
|
||||
// this.cellInfo.showInput = false
|
||||
},
|
||||
inputChange() {
|
||||
if (this.nodeInfo.store && this.nodeInfo.store.data) {
|
||||
// this.nodeInfo.store.data.data.label = this.cellInfo.label
|
||||
this.nodeInfo.store.data.data = {
|
||||
...this.nodeInfo.store.data.data,
|
||||
...this.cellInfo
|
||||
}
|
||||
}
|
||||
},
|
||||
// @ts-ignore
|
||||
setInput(val: boolean) {
|
||||
},
|
||||
changSize(size: any) {
|
||||
if (!size) {
|
||||
return;
|
||||
}
|
||||
this.sizeWInfo.width = size.width;
|
||||
this.sizeWInfo.height = size.height;
|
||||
this.minSize = Math.min(size.height, size.width)
|
||||
let s = size.height + 12;
|
||||
if (s > 60) {
|
||||
s = s + s / 3
|
||||
}
|
||||
if (s < 6) {
|
||||
s = 6
|
||||
} else if (s >= 1000) {
|
||||
s = 1000
|
||||
}
|
||||
this.changeBarcode();
|
||||
console.log("生成");
|
||||
// this.nodeInfo.store.data.size.width = size.width;
|
||||
this.fontSize = s;
|
||||
this.changeFontSize();
|
||||
},
|
||||
changeBarcode(){
|
||||
|
||||
console.log(" this.minSize", this.minSize)
|
||||
this.svgContent = bwipjs.toSVG(this.getBarCodeType("code128"));
|
||||
},
|
||||
getBarCodeType(type){
|
||||
|
||||
return getBarCodeType(type, this.sizeWInfo.height / (2+(this.minSize/30)))
|
||||
},
|
||||
changeFontSize() {
|
||||
// @ts-ignore
|
||||
this.cellInfo.style.text.fontSize = `${this.fontSize}px`
|
||||
},
|
||||
setCellInfo(info: any) {
|
||||
if (!info) {
|
||||
info = {
|
||||
style: {
|
||||
text: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @ts-ignore
|
||||
this.cellInfo = mergeDeepObject({
|
||||
showInput: false,
|
||||
id: nextId(),
|
||||
label: '',
|
||||
shape: VueCellShapeType.Barcode,
|
||||
style: {
|
||||
shape: {
|
||||
x: 0, // 矩形左上角的 x 坐标
|
||||
y: 0, // 矩形左上角的 y 坐标
|
||||
rx: 0, // 矩形的圆角 x 半径
|
||||
ry: 0, // 矩形的圆角 y 半径
|
||||
fillColor: 'rgba(0,0,0,0)', // 填充颜色
|
||||
href: '',
|
||||
label: '图片',
|
||||
fillOpacity: '', // 填充颜色的不透明度
|
||||
opacity: '', // 元素的不透明度
|
||||
strokeDashoffset: '', // 虚线起始偏移量
|
||||
strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
|
||||
strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
|
||||
strokeDasharray: '', // 虚线模式
|
||||
bottom: 0, // 元素的底部位置（用于定位）
|
||||
transform: '', // 应用到元素的变换（如平移、旋转、缩放）
|
||||
clipPath: '', // 应用到元素的裁剪路径
|
||||
filter: '', // 应用到元素的滤镜效果
|
||||
},
|
||||
text: {}
|
||||
}
|
||||
}, info)
|
||||
|
||||
// if(!this.hrefBase64 && this.cellInfo.style.shape.href && this.cellInfo.style.shape.href.indexOf("data:image") < 0){
|
||||
// // DataUri.imageToDataUri(this.cellInfo.style.shape.href,
|
||||
// // function (nu, url) {
|
||||
// // console.log("base64 完成")
|
||||
// // // 第一个参数无效，用的只是第二个参数，但是第一个参数不写不行
|
||||
// // // @ts-ignore
|
||||
// // this.hrefBase64 = url; // 给图片标签赋值
|
||||
// // }
|
||||
//
|
||||
// // );
|
||||
// convertImageToBase64(this.cellInfo.style.shape.href).then((res)=>{
|
||||
// // @ts-ignore 待优化
|
||||
// this.hrefBase64 = res
|
||||
// console.log("base64 完成")
|
||||
// // this.cellInfo.style.shape.href = res
|
||||
// })
|
||||
// }
|
||||
setTimeout(() => {
|
||||
if (this.nodeInfo.store && this.nodeInfo.store.data) {
|
||||
this.nodeInfo.store.data.data = this.cellInfo
|
||||
}
|
||||
}, 300)
|
||||
this.cellInfo.editMode = getDraftDesignState();
|
||||
if (this.cellInfo.editMode && this.cellInfo.propGroupId) {
|
||||
const showRandomGroupColor = configInfo.LK_SHOW_RANDOM_GROUP_COLOR()
|
||||
if (!showRandomGroupColor) {
|
||||
setTimeout(() => {
|
||||
const [type, id] = this.cellInfo.propGroupId.split("_")
|
||||
if (id) {
|
||||
document.getElementById(this.cellInfo.id)?.style.setProperty(
|
||||
"--lk-prop-group-color",
|
||||
`#${id}`
|
||||
);
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
this.changeFontSize();
|
||||
|
||||
// bwipjs.toSVG({
|
||||
// bcid: 'code128', // 条形码类型
|
||||
// text: 'Hello, World!', // 显示文本
|
||||
// width: 200, // 宽度
|
||||
// height: 50, // 高度
|
||||
// }, function(err, svg) {
|
||||
// if (err) throw err;
|
||||
// console.log("生成",svg);
|
||||
// this.svgContent = svg;
|
||||
// });
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.node-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -521,3 +521,58 @@ export const configInfo = {
|
|||
return localStorage.setItem('lk_show_random_group_color', show ? 'true' : '')
|
||||
}
|
||||
}
|
||||
|
||||
export const getHtml = (htmlStr:string)=>{
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>oms稿件预览源文件</title>
|
||||
<style>
|
||||
#printButton {
|
||||
padding: 3px 8px;
|
||||
background-color: #4caf505e;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
z-index: 99999;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#printButton:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
.tips{
|
||||
color: #ff0000;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
z-index: 99999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="tips">
|
||||
*仅供参考
|
||||
</div>
|
||||
${htmlStr}
|
||||
<button id="printButton">存为PDF</button>
|
||||
<script>
|
||||
document.getElementById('printButton').addEventListener('click', function() {
|
||||
document.getElementById('printButton').style.top = '-10000px'
|
||||
window.print();
|
||||
});
|
||||
window.onafterprint = function() {
|
||||
document.getElementById('printButton').style.top = '10px'
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -310,7 +310,7 @@ import {reactive, watch} from 'vue'
|
|||
import {useMessage} from "@/hooks/web/useMessage";
|
||||
import {DraftDesignDataApi} from "@/api/oms/draftdesigndata";
|
||||
import DraftDesign from "@/components/DraftDesign/index.vue";
|
||||
import {ShapeType} from "@/components/DraftDesign/config";
|
||||
import {getHtml, ShapeType} from "@/components/DraftDesign/config";
|
||||
import {ProductCareItemApi} from "@/api/oms/productcareitem";
|
||||
import {replaceDomain} from "@/utils";
|
||||
import * as FileApi from "@/api/infra/file";
|
||||
|
|
@ -632,8 +632,9 @@ const uploadFile = async (fileName) => {
|
|||
}
|
||||
|
||||
const saveMaxSvg = (svgElement,fileName)=>{
|
||||
const blob = new Blob([svgElement?.parentElement?.innerHTML], { type: 'text/html' });
|
||||
const file = new File([blob], fileName+".html", {type: 'image/png'});
|
||||
const htmlStr = getHtml(`${svgElement?.parentElement?.innerHTML}`);
|
||||
const blob = new Blob([htmlStr], { type: 'text/html' });
|
||||
const file = new File([blob], fileName+".html", {type: 'text/html'});
|
||||
FileApi.updateFile({file: file})
|
||||
.then((res) => {
|
||||
console.log("res"+res)
|
||||
|
|
|
|||
|
|
@ -521,3 +521,58 @@ export const configInfo = {
|
|||
return localStorage.setItem('lk_show_random_group_color', show ? 'true' : '')
|
||||
}
|
||||
}
|
||||
|
||||
export const getHtml = (htmlStr:string)=>{
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>oms稿件预览源文件</title>
|
||||
<style>
|
||||
#printButton {
|
||||
padding: 3px 8px;
|
||||
background-color: #4caf505e;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
z-index: 99999;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#printButton:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
.tips{
|
||||
color: #ff0000;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
z-index: 99999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="tips">
|
||||
*仅供参考
|
||||
</div>
|
||||
${htmlStr}
|
||||
<button id="printButton">存为PDF</button>
|
||||
<script>
|
||||
document.getElementById('printButton').addEventListener('click', function() {
|
||||
document.getElementById('printButton').style.top = '-10000px'
|
||||
window.print();
|
||||
});
|
||||
window.onafterprint = function() {
|
||||
document.getElementById('printButton').style.top = '10px'
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
`
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue