r
/
hangtag
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增 稿件源文件下载

This commit is contained in:
yf 2025-01-07 01:07:31 +08:00
parent 89dd0a1c21
commit 8dd5fb6519
16 changed files with 1786 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/saleorder/front/dto/SaleOrderSkuDTO.java
View File

@ -49,10 +49,15 @@ public class SaleOrderSkuDTO implements Serializable {
private Double height;
/**
* 最终稿件 base64编码数据
* 预览稿件
*/
private String previewImage;
/**
* 源文件链接
*/
private String sourceFile;
/**
* 模板类型-字典 product_draft_template_type 1有模板 2无模板 3尺码唛
*/
@ -92,6 +97,7 @@ public class SaleOrderSkuDTO implements Serializable {
this.width = saleOrderSkuDO.getWidth().doubleValue();
this.height = saleOrderSkuDO.getHeight().doubleValue();
this.previewImage = saleOrderSkuDO.getPreviewImage();
this.sourceFile = saleOrderSkuDO.getSourceFile();
this.productTemplateType = saleOrderSkuDO.getProductTemplateType();
this.propInfo = saleOrderSkuDO.getPropInfo();
this.labelSize = saleOrderSkuDO.getLabelSize();

4
hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/dataobject/saleordersku/SaleOrderSkuDO.java
View File

@ -68,6 +68,10 @@ public class SaleOrderSkuDO extends BaseDO {
* 预览图
*/
private String previewImage;
/**
* 设计稿源文件
*/
private String sourceFile;
/**
* 动态属性 json动态属性
*/

1
hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/saleorder/SaleOrderServiceImpl.java
View File

@ -719,6 +719,7 @@ public class SaleOrderServiceImpl implements SaleOrderService {
saleOrderSkuDO.setProductTemplateType(saleOrderSkuDTO.getProductTemplateType());
saleOrderSkuDO.setSpecInfo(JSONUtil.toJsonStr(saleOrderSkuDTO.getSpecInfo()));
saleOrderSkuDO.setRemark(saleOrderSkuDTO.getRemark());
saleOrderSkuDO.setSourceFile(saleOrderSkuDTO.getSourceFile());
saleOrderSkuDO.setId(FuncUtil.getNextId());
skuList.add(saleOrderSkuDO);
}

1
hangtag-ui/hangtag-ui-admin/index.html
View File

@ -15,6 +15,7 @@
content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
/>
<title>%VITE_APP_TITLE%</title>
<script src="/js/dom-to-image.js"></script>
</head>
<body>
<div id="app">

2
hangtag-ui/hangtag-ui-admin/package.json
View File

@ -49,12 +49,12 @@
"axios": "^1.6.8",
"benz-amr-recorder": "^1.1.5",
"bpmn-js-token-simulation": "^0.10.0",
"bwip-js": "^4.5.1",
"camunda-bpmn-moddle": "^7.0.1",
"cropperjs": "^1.6.1",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.10",
"diagram-js": "^12.8.0",
"dom-to-image": "^2.6.0",
"driver.js": "^1.3.1",
"echarts": "^5.5.0",
"echarts-wordcloud": "^2.1.0",

777
hangtag-ui/hangtag-ui-admin/public/js/dom-to-image.js Normal file
View File

@ -0,0 +1,777 @@
(function (global) {
'use strict';
var util = newUtil();
var inliner = newInliner();
var fontFaces = newFontFaces();
var images = newImages();
// Default impl options
var defaultOptions = {
// Default is to fail on error, no placeholder
imagePlaceholder: undefined,
// Default cache bust is false, it will use the cache
cacheBust: false
};
var domtoimage = {
toSvg: toSvg,
toPng: toPng,
toJpeg: toJpeg,
toBlob: toBlob,
toPixelData: toPixelData,
impl: {
fontFaces: fontFaces,
images: images,
util: util,
inliner: inliner,
options: {}
}
};
if (typeof module !== 'undefined')
module.exports = domtoimage;
else
global.domtoimage = domtoimage;
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options
* @param {Function} options.filter - Should return true if passed node should be included in the output
* (excluding node means excluding it's children as well). Not called on the root node.
* @param {String} options.bgcolor - color for the background, any valid CSS color value.
* @param {Number} options.width - width to be applied to node before rendering.
* @param {Number} options.height - height to be applied to node before rendering.
* @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
* @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
defaults to 1.0.
* @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
* @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
* @return {Promise} - A promise that is fulfilled with a SVG image data URL
* */
function toSvg(node, options) {
options = options || {};
copyOptions(options);
return Promise.resolve(node)
.then(function (node) {
return cloneNode(node, options.filter, true);
})
.then(embedFonts)
.then(inlineImages)
.then(applyOptions)
.then(function (clone) {
return makeSvgDataUri(clone,
options.width || util.width(node),
options.height || util.height(node)
);
});
function applyOptions(clone) {
if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
if (options.width) clone.style.width = options.width + 'px';
if (options.height) clone.style.height = options.height + 'px';
if (options.style)
Object.keys(options.style).forEach(function (property) {
clone.style[property] = options.style[property];
});
return clone;
}
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
* */
function toPixelData(node, options) {
return draw(node, options || {})
.then(function (canvas) {
return canvas.getContext('2d').getImageData(
0,
0,
util.width(node),
util.height(node)
).data;
});
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a PNG image data URL
* */
function toPng(node, options) {
return draw(node, options || {})
.then(function (canvas) {
return canvas.toDataURL();
});
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a JPEG image data URL
* */
function toJpeg(node, options) {
options = options || {};
return draw(node, options)
.then(function (canvas) {
return canvas.toDataURL('image/jpeg', options.quality || 1.0);
});
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a PNG image blob
* */
function toBlob(node, options) {
return draw(node, options || {})
.then(util.canvasToBlob);
}
function copyOptions(options) {
// Copy options to impl options for use in impl
if(typeof(options.imagePlaceholder) === 'undefined') {
domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
} else {
domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
}
if(typeof(options.cacheBust) === 'undefined') {
domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
} else {
domtoimage.impl.options.cacheBust = options.cacheBust;
}
}
function draw(domNode, options) {
return toSvg(domNode, options)
.then(util.makeImage)
.then(util.delay(100))
.then(function (image) {
var canvas = newCanvas(domNode);
let context = canvas.getContext('2d');
const ratio = window.devicePixelRatio || 1;
canvas.width *= ratio;
canvas.height *= ratio;
context.scale(ratio, ratio);
context.drawImage(image, 0, 0);
return canvas;
});
function newCanvas(domNode) {
var canvas = document.createElement('canvas');
canvas.width = options.width || util.width(domNode);
canvas.height = options.height || util.height(domNode);
if (options.bgcolor) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = options.bgcolor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
return canvas;
}
}
function cloneNode(node, filter, root) {
if (!root && filter && !filter(node)) return Promise.resolve();
return Promise.resolve(node)
.then(makeNodeCopy)
.then(function (clone) {
return cloneChildren(node, clone, filter);
})
.then(function (clone) {
return processClone(node, clone);
});
function makeNodeCopy(node) {
if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());
return node.cloneNode(false);
}
function cloneChildren(original, clone, filter) {
var children = original.childNodes;
if (children.length === 0) return Promise.resolve(clone);
return cloneChildrenInOrder(clone, util.asArray(children), filter)
.then(function () {
return clone;
});
function cloneChildrenInOrder(parent, children, filter) {
var done = Promise.resolve();
children.forEach(function (child) {
done = done
.then(function () {
return cloneNode(child, filter);
})
.then(function (childClone) {
if (childClone) parent.appendChild(childClone);
});
});
return done;
}
}
function processClone(original, clone) {
if (!(clone instanceof Element)) return clone;
return Promise.resolve()
.then(cloneStyle)
.then(clonePseudoElements)
.then(copyUserInput)
.then(fixSvg)
.then(function () {
return clone;
});
function cloneStyle() {
copyStyle(window.getComputedStyle(original), clone.style);
function copyStyle(source, target) {
if (source.cssText) target.cssText = source.cssText;
else copyProperties(source, target);
function copyProperties(source, target) {
util.asArray(source).forEach(function (name) {
target.setProperty(
name,
source.getPropertyValue(name),
source.getPropertyPriority(name)
);
});
}
}
}
function clonePseudoElements() {
[':before', ':after'].forEach(function (element) {
clonePseudoElement(element);
});
function clonePseudoElement(element) {
var style = window.getComputedStyle(original, element);
var content = style.getPropertyValue('content');
if (content === '' || content === 'none') return;
var className = util.uid();
clone.className = clone.className + ' ' + className;
var styleElement = document.createElement('style');
styleElement.appendChild(formatPseudoElementStyle(className, element, style));
clone.appendChild(styleElement);
function formatPseudoElementStyle(className, element, style) {
var selector = '.' + className + ':' + element;
var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
return document.createTextNode(selector + '{' + cssText + '}');
function formatCssText(style) {
var content = style.getPropertyValue('content');
return style.cssText + ' content: ' + content + ';';
}
function formatCssProperties(style) {
return util.asArray(style)
.map(formatProperty)
.join('; ') + ';';
function formatProperty(name) {
return name + ': ' +
style.getPropertyValue(name) +
(style.getPropertyPriority(name) ? ' !important' : '');
}
}
}
}
}
function copyUserInput() {
if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;
if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);
}
function fixSvg() {
if (!(clone instanceof SVGElement)) return;
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (!(clone instanceof SVGRectElement)) return;
['width', 'height'].forEach(function (attribute) {
var value = clone.getAttribute(attribute);
if (!value) return;
clone.style.setProperty(attribute, value);
});
}
}
}
function embedFonts(node) {
return fontFaces.resolveAll()
.then(function (cssText) {
var styleNode = document.createElement('style');
node.appendChild(styleNode);
styleNode.appendChild(document.createTextNode(cssText));
return node;
});
}
function inlineImages(node) {
return images.inlineAll(node)
.then(function () {
return node;
});
}
function makeSvgDataUri(node, width, height) {
return Promise.resolve(node)
.then(function (node) {
node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
return new XMLSerializer().serializeToString(node);
})
.then(util.escapeXhtml)
.then(function (xhtml) {
return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
})
.then(function (foreignObject) {
return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
foreignObject + '</svg>';
})
.then(function (svg) {
return 'data:image/svg+xml;charset=utf-8,' + svg;
});
}
function newUtil() {
return {
escape: escape,
parseExtension: parseExtension,
mimeType: mimeType,
dataAsUrl: dataAsUrl,
isDataUrl: isDataUrl,
canvasToBlob: canvasToBlob,
resolveUrl: resolveUrl,
getAndEncode: getAndEncode,
uid: uid(),
delay: delay,
asArray: asArray,
escapeXhtml: escapeXhtml,
makeImage: makeImage,
width: width,
height: height
};
function mimes() {
/*
* Only WOFF and EOT mime types for fonts are 'real'
* see http://www.iana.org/assignments/media-types/media-types.xhtml
*/
var WOFF = 'application/font-woff';
var JPEG = 'image/jpeg';
return {
'woff': WOFF,
'woff2': WOFF,
'ttf': 'application/font-truetype',
'eot': 'application/vnd.ms-fontobject',
'png': 'image/png',
'jpg': JPEG,
'jpeg': JPEG,
'gif': 'image/gif',
'tiff': 'image/tiff',
'svg': 'image/svg+xml'
};
}
function parseExtension(url) {
var match = /\.([^\.\/]*?)$/g.exec(url);
if (match) return match[1];
else return '';
}
function mimeType(url) {
var extension = parseExtension(url).toLowerCase();
return mimes()[extension] || '';
}
function isDataUrl(url) {
return url.search(/^(data:)/) !== -1;
}
function toBlob(canvas) {
return new Promise(function (resolve) {
var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
var length = binaryString.length;
var binaryArray = new Uint8Array(length);
for (var i = 0; i < length; i++)
binaryArray[i] = binaryString.charCodeAt(i);
resolve(new Blob([binaryArray], {
type: 'image/png'
}));
});
}
function canvasToBlob(canvas) {
if (canvas.toBlob)
return new Promise(function (resolve) {
canvas.toBlob(resolve);
});
return toBlob(canvas);
}
function resolveUrl(url, baseUrl) {
var doc = document.implementation.createHTMLDocument();
var base = doc.createElement('base');
doc.head.appendChild(base);
var a = doc.createElement('a');
doc.body.appendChild(a);
base.href = baseUrl;
a.href = url;
return a.href;
}
function uid() {
var index = 0;
return function () {
return 'u' + fourRandomChars() + index++;
function fourRandomChars() {
/* see http://stackoverflow.com/a/6248722/2519373 */
return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
}
};
}
function makeImage(uri) {
return new Promise(function (resolve, reject) {
var image = new Image();
image.onload = function () {
resolve(image);
};
image.onerror = reject;
image.src = uri;
});
}
function getAndEncode(url) {
var TIMEOUT = 30000;
if(domtoimage.impl.options.cacheBust) {
// Cache bypass so we dont have CORS issues with cached images
// Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
}
return new Promise(function (resolve) {
var request = new XMLHttpRequest();
request.onreadystatechange = done;
request.ontimeout = timeout;
request.responseType = 'blob';
request.timeout = TIMEOUT;
request.open('GET', url, true);
request.send();
var placeholder;
if(domtoimage.impl.options.imagePlaceholder) {
var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
if(split && split[1]) {
placeholder = split[1];
}
}
function done() {
if (request.readyState !== 4) return;
if (request.status !== 200) {
if(placeholder) {
resolve(placeholder);
} else {
fail('cannot fetch resource: ' + url + ', status: ' + request.status);
}
return;
}
var encoder = new FileReader();
encoder.onloadend = function () {
var content = encoder.result.split(/,/)[1];
resolve(content);
};
encoder.readAsDataURL(request.response);
}
function timeout() {
if(placeholder) {
resolve(placeholder);
} else {
fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url);
}
}
function fail(message) {
console.error(message);
resolve('');
}
});
}
function dataAsUrl(content, type) {
return 'data:' + type + ';base64,' + content;
}
function escape(string) {
return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
}
function delay(ms) {
return function (arg) {
return new Promise(function (resolve) {
setTimeout(function () {
resolve(arg);
}, ms);
});
};
}
function asArray(arrayLike) {
var array = [];
var length = arrayLike.length;
for (var i = 0; i < length; i++) array.push(arrayLike[i]);
return array;
}
function escapeXhtml(string) {
return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
}
function width(node) {
var leftBorder = px(node, 'border-left-width');
var rightBorder = px(node, 'border-right-width');
return node.scrollWidth + leftBorder + rightBorder;
}
function height(node) {
var topBorder = px(node, 'border-top-width');
var bottomBorder = px(node, 'border-bottom-width');
return node.scrollHeight + topBorder + bottomBorder;
}
function px(node, styleProperty) {
var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
return parseFloat(value.replace('px', ''));
}
}
function newInliner() {
var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
return {
inlineAll: inlineAll,
shouldProcess: shouldProcess,
impl: {
readUrls: readUrls,
inline: inline
}
};
function shouldProcess(string) {
return string.search(URL_REGEX) !== -1;
}
function readUrls(string) {
var result = [];
var match;
while ((match = URL_REGEX.exec(string)) !== null) {
result.push(match[1]);
}
return result.filter(function (url) {
return !util.isDataUrl(url);
});
}
function inline(string, url, baseUrl, get) {
return Promise.resolve(url)
.then(function (url) {
return baseUrl ? util.resolveUrl(url, baseUrl) : url;
})
.then(get || util.getAndEncode)
.then(function (data) {
return util.dataAsUrl(data, util.mimeType(url));
})
.then(function (dataUrl) {
return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
});
function urlAsRegex(url) {
return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');
}
}
function inlineAll(string, baseUrl, get) {
if (nothingToInline()) return Promise.resolve(string);
return Promise.resolve(string)
.then(readUrls)
.then(function (urls) {
var done = Promise.resolve(string);
urls.forEach(function (url) {
done = done.then(function (string) {
return inline(string, url, baseUrl, get);
});
});
return done;
});
function nothingToInline() {
return !shouldProcess(string);
}
}
}
function newFontFaces() {
return {
resolveAll: resolveAll,
impl: {
readAll: readAll
}
};
function resolveAll() {
return readAll(document)
.then(function (webFonts) {
return Promise.all(
webFonts.map(function (webFont) {
return webFont.resolve();
})
);
})
.then(function (cssStrings) {
return cssStrings.join('\n');
});
}
function readAll() {
return Promise.resolve(util.asArray(document.styleSheets))
.then(getCssRules)
.then(selectWebFontRules)
.then(function (rules) {
return rules.map(newWebFont);
});
function selectWebFontRules(cssRules) {
return cssRules
.filter(function (rule) {
return rule.type === CSSRule.FONT_FACE_RULE;
})
.filter(function (rule) {
return inliner.shouldProcess(rule.style.getPropertyValue('src'));
});
}
function getCssRules(styleSheets) {
var cssRules = [];
styleSheets.forEach(function (sheet) {
try {
util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
} catch (e) {
console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
}
});
return cssRules;
}
function newWebFont(webFontRule) {
return {
resolve: function resolve() {
var baseUrl = (webFontRule.parentStyleSheet || {}).href;
return inliner.inlineAll(webFontRule.cssText, baseUrl);
},
src: function () {
return webFontRule.style.getPropertyValue('src');
}
};
}
}
}
function newImages() {
return {
inlineAll: inlineAll,
impl: {
newImage: newImage
}
};
function newImage(element) {
return {
inline: inline
};
function inline(get) {
if (util.isDataUrl(element.src)) return Promise.resolve();
return Promise.resolve(element.src)
.then(get || util.getAndEncode)
.then(function (data) {
return util.dataAsUrl(data, util.mimeType(element.src));
})
.then(function (dataUrl) {
return new Promise(function (resolve, reject) {
element.onload = resolve;
element.onerror = reject;
element.src = dataUrl;
});
});
}
}
function inlineAll(node) {
if (!(node instanceof Element)) return Promise.resolve(node);
return inlineBackground(node)
.then(function () {
if (node instanceof HTMLImageElement)
return newImage(node).inline();
else
return Promise.all(
util.asArray(node.childNodes).map(function (child) {
return inlineAll(child);
})
);
});
function inlineBackground(node) {
var background = node.style.getPropertyValue('background');
if (!background) return Promise.resolve(node);
return inliner.inlineAll(background)
.then(function (inlined) {
node.style.setProperty(
'background',
inlined,
node.style.getPropertyPriority('background')
);
})
.then(function () {
return node;
});
}
}
}
})(this);

84
hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
View File

@ -262,10 +262,11 @@
</el-row>
</div>
<div
:class="{ 'hidden-div': that.hideCreate}"
:id="that.svgId"
:style="{
<div>
<div
:class="{ 'hidden-div': that.hideCreate}"
:id="that.svgId"
:style="{
position: that.hideCreate ? 'fixed' : 'relative',
display: `flex`,
flexDirection: `column`,
@ -273,30 +274,30 @@
height: `${previewSize.height}px`,
}">
<div
v-if="that.previewUrl"
:style="{
width: `${that.svgWidth+2}px`,
height: `${that.svgHeight+2}px`,
<div
v-if="that.previewUrl"
class="bg-info"
:style="{
backgroundColor: (that.pageConfig.background && that.pageConfig.background.areaColor) || '',
border: '1px solid #00ff00',
position: `absolute`,
top: `0`,
left: `0`,
}"
>
>
<div>
<div v-if="false" style="color: #ff0000;">w:{{ imageSize.width }}
h:{{ imageSize.height }}
</div>
<span style="color: #ff0000;writing-mode: vertical-rl; text-orientation: upright;">
<div>
<div v-if="false" style="color: #ff0000;">w:{{ imageSize.width }}
h:{{ imageSize.height }}
</div>
<span style="color: #ff0000;writing-mode: vertical-rl; text-orientation: upright;">
*仅供参考
</span>
</div>
</div>
<div
v-if="that.previewUrl" v-html="that.previewUrl">
</div>
</div>
<div
v-if="that.previewUrl" v-html="that.previewUrl">
</div>
</div>
</div>
@ -315,13 +316,18 @@ import {replaceDomain} from "@/utils";
import * as FileApi from "@/api/infra/file";
import {ProductInfoApi} from "@/api/oms/productinfo";
//@ts-ignore
import domtoimage from 'dom-to-image';
// import domtoimage from './dom-to-image.js';
import {GroupTypeEnum} from "@/components/DraftDesign/config/constant";
import {useI18n} from "@/hooks/web/useI18n";
const {t} = useI18n()
const svgSize= computed(() => {
return {
width: that.svgWidth * 10,
height: that.svgHeight * 10,
}
})
const emit = defineEmits(['change', 'initSucceed'])
const draftDesignEditRef = ref()
const that = reactive({
@ -351,6 +357,7 @@ const that = reactive({
changeCount: 0,
previewUrl: "",
previewData: '',
sourceFile: '', // 源文件 html
ingredientInfoList: [],
sizeInfo: null,
brandId: null,
@ -583,12 +590,24 @@ const getIngredientInfoListByType = (type) => {
}
const uploadFile = async (fileName) => {
return new Promise((resolve, reject) => {
let svgElement = document.getElementById(that.svgId);
document.querySelector(`#${that.svgId} .bg-info`).style.width = `${that.svgWidth}px`
document.querySelector(`#${that.svgId} .bg-info`).style.height = `${that.svgHeight}px`
console.log("svgElement?.innerHTML",)
// 创建一个 Blob 对象，用于保存 SVG 文件
saveMaxSvg(svgElement,fileName);
// // 创建一个链接元素来触发下载
// const link = document.createElement('a');
// link.href = URL.createObjectURL(blob);
// link.download = 'graph.html'; // 指定下载文件名
// // 触发点击事件来下载文件
// link.click();
domtoimage.toBlob(svgElement, {
width: that.svgWidth + 5,
height: that.svgHeight + 5,
width: that.svgWidth + 10,
height: that.svgHeight + 10,
type: 'image/png',
scale:4,
quality: 1
}).then((blob) => {
const file = new File([blob], fileName, {type: 'image/png'});
@ -612,6 +631,21 @@ 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'});
FileApi.updateFile({file: file})
.then((res) => {
console.log("res"+res)
if (res.code === 0) {
that.sourceFile = res.data
} else {
}
}).catch((res) => {
})
}
const deleteList = (key, index) => {
const item = cloneDeep(that.propInfo[key])
@ -1310,6 +1344,7 @@ const getPropInfo = () => {
})
// 成功后再获取图片
draftDesignEditRef.value.toSVGData((url) => {
that.previewUrl = url
that.hideCreate = false;
setTimeout(() => {
@ -1323,6 +1358,8 @@ const getPropInfo = () => {
const svgDom = document.querySelector(`#${that.svgId} svg`).getBoundingClientRect()
that.svgHeight = dom.height;
that.svgWidth = dom.width;
console.log("that.svgHeight",that.svgHeight,that.svgWidth)
document.querySelector(`#${that.svgId} svg`).style.left = `${svgDom.left - dom.left}px`;
document.querySelector(`#${that.svgId} svg`).style.top = `${svgDom.top - dom.top}px`;
// that.pageLoading.close()
@ -1348,6 +1385,7 @@ const getPropInfo = () => {
// 设计稿id
draftDesignId: that.draftDesignId,
previewImage: that.previewData,
sourceFile: that.sourceFile,
propInfo: that.propInfo
})
})

26
hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/TextCellNode.vue
View File

@ -104,20 +104,20 @@ export default defineComponent({
// ,&#8203;
if(this.cellInfo.label){
let text = this.cellInfo.label;
text = text.replaceAll('"', "“");
// text = text.replaceAll('"', "“");
text = text.replaceAll(',', ",&#8203;");
text = text.replaceAll('.', ".&#8203;");
text = text.replaceAll(':', ":&#8203;");
text = text.replaceAll('!', "!&#8203;");
text = text.replaceAll('?', "?&#8203;");
text = text.replaceAll("'", "'&#8203;");
text = text.replaceAll('-', "-&#8203;");
text = text.replaceAll('—', "—&#8203;");
text = text.replaceAll('/', "/&#8203;");
text = text.replaceAll('(', "(&#8203;");
text = text.replaceAll(')', ")&#8203;");
text = text.replaceAll('+', "+&#8203;");
text = text.replaceAll('=', "=&#8203;");
// text = text.replaceAll('.', ".&#8203;");
// text = text.replaceAll(':', ":&#8203;");
// text = text.replaceAll('!', "!&#8203;");
// text = text.replaceAll('?', "?&#8203;");
// text = text.replaceAll("'", "'&#8203;");
// text = text.replaceAll('-', "-&#8203;");
// text = text.replaceAll('—', "—&#8203;");
// text = text.replaceAll('/', "/&#8203;");
// text = text.replaceAll('(', "(&#8203;");
// text = text.replaceAll(')', ")&#8203;");
// text = text.replaceAll('+', "+&#8203;");
// text = text.replaceAll('=', "=&#8203;");
return text;
}

1
hangtag-ui/hangtag-ui-front/index.html
View File

@ -14,6 +14,7 @@
content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
/>
<title>%VITE_APP_TITLE%</title>
<script src="/js/dom-to-image.js"></script>
</head>
<body>
<div id="app">

1
hangtag-ui/hangtag-ui-front/package.json
View File

@ -54,7 +54,6 @@
"crypto-js": "^4.2.0",
"dayjs": "^1.11.10",
"diagram-js": "^12.8.0",
"dom-to-image": "^2.6.0",
"driver.js": "^1.3.1",
"echarts": "^5.5.0",
"echarts-wordcloud": "^2.1.0",

777
hangtag-ui/hangtag-ui-front/public/js/dom-to-image.js Normal file
View File

@ -0,0 +1,777 @@
(function (global) {
'use strict';
var util = newUtil();
var inliner = newInliner();
var fontFaces = newFontFaces();
var images = newImages();
// Default impl options
var defaultOptions = {
// Default is to fail on error, no placeholder
imagePlaceholder: undefined,
// Default cache bust is false, it will use the cache
cacheBust: false
};
var domtoimage = {
toSvg: toSvg,
toPng: toPng,
toJpeg: toJpeg,
toBlob: toBlob,
toPixelData: toPixelData,
impl: {
fontFaces: fontFaces,
images: images,
util: util,
inliner: inliner,
options: {}
}
};
if (typeof module !== 'undefined')
module.exports = domtoimage;
else
global.domtoimage = domtoimage;
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options
* @param {Function} options.filter - Should return true if passed node should be included in the output
* (excluding node means excluding it's children as well). Not called on the root node.
* @param {String} options.bgcolor - color for the background, any valid CSS color value.
* @param {Number} options.width - width to be applied to node before rendering.
* @param {Number} options.height - height to be applied to node before rendering.
* @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
* @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
defaults to 1.0.
* @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
* @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
* @return {Promise} - A promise that is fulfilled with a SVG image data URL
* */
function toSvg(node, options) {
options = options || {};
copyOptions(options);
return Promise.resolve(node)
.then(function (node) {
return cloneNode(node, options.filter, true);
})
.then(embedFonts)
.then(inlineImages)
.then(applyOptions)
.then(function (clone) {
return makeSvgDataUri(clone,
options.width || util.width(node),
options.height || util.height(node)
);
});
function applyOptions(clone) {
if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
if (options.width) clone.style.width = options.width + 'px';
if (options.height) clone.style.height = options.height + 'px';
if (options.style)
Object.keys(options.style).forEach(function (property) {
clone.style[property] = options.style[property];
});
return clone;
}
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
* */
function toPixelData(node, options) {
return draw(node, options || {})
.then(function (canvas) {
return canvas.getContext('2d').getImageData(
0,
0,
util.width(node),
util.height(node)
).data;
});
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a PNG image data URL
* */
function toPng(node, options) {
return draw(node, options || {})
.then(function (canvas) {
return canvas.toDataURL();
});
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a JPEG image data URL
* */
function toJpeg(node, options) {
options = options || {};
return draw(node, options)
.then(function (canvas) {
return canvas.toDataURL('image/jpeg', options.quality || 1.0);
});
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a PNG image blob
* */
function toBlob(node, options) {
return draw(node, options || {})
.then(util.canvasToBlob);
}
function copyOptions(options) {
// Copy options to impl options for use in impl
if(typeof(options.imagePlaceholder) === 'undefined') {
domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
} else {
domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
}
if(typeof(options.cacheBust) === 'undefined') {
domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
} else {
domtoimage.impl.options.cacheBust = options.cacheBust;
}
}
function draw(domNode, options) {
return toSvg(domNode, options)
.then(util.makeImage)
.then(util.delay(100))
.then(function (image) {
var canvas = newCanvas(domNode);
let context = canvas.getContext('2d');
const ratio = window.devicePixelRatio || 1;
canvas.width *= ratio;
canvas.height *= ratio;
context.scale(ratio, ratio);
context.drawImage(image, 0, 0);
return canvas;
});
function newCanvas(domNode) {
var canvas = document.createElement('canvas');
canvas.width = options.width || util.width(domNode);
canvas.height = options.height || util.height(domNode);
if (options.bgcolor) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = options.bgcolor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
return canvas;
}
}
function cloneNode(node, filter, root) {
if (!root && filter && !filter(node)) return Promise.resolve();
return Promise.resolve(node)
.then(makeNodeCopy)
.then(function (clone) {
return cloneChildren(node, clone, filter);
})
.then(function (clone) {
return processClone(node, clone);
});
function makeNodeCopy(node) {
if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());
return node.cloneNode(false);
}
function cloneChildren(original, clone, filter) {
var children = original.childNodes;
if (children.length === 0) return Promise.resolve(clone);
return cloneChildrenInOrder(clone, util.asArray(children), filter)
.then(function () {
return clone;
});
function cloneChildrenInOrder(parent, children, filter) {
var done = Promise.resolve();
children.forEach(function (child) {
done = done
.then(function () {
return cloneNode(child, filter);
})
.then(function (childClone) {
if (childClone) parent.appendChild(childClone);
});
});
return done;
}
}
function processClone(original, clone) {
if (!(clone instanceof Element)) return clone;
return Promise.resolve()
.then(cloneStyle)
.then(clonePseudoElements)
.then(copyUserInput)
.then(fixSvg)
.then(function () {
return clone;
});
function cloneStyle() {
copyStyle(window.getComputedStyle(original), clone.style);
function copyStyle(source, target) {
if (source.cssText) target.cssText = source.cssText;
else copyProperties(source, target);
function copyProperties(source, target) {
util.asArray(source).forEach(function (name) {
target.setProperty(
name,
source.getPropertyValue(name),
source.getPropertyPriority(name)
);
});
}
}
}
function clonePseudoElements() {
[':before', ':after'].forEach(function (element) {
clonePseudoElement(element);
});
function clonePseudoElement(element) {
var style = window.getComputedStyle(original, element);
var content = style.getPropertyValue('content');
if (content === '' || content === 'none') return;
var className = util.uid();
clone.className = clone.className + ' ' + className;
var styleElement = document.createElement('style');
styleElement.appendChild(formatPseudoElementStyle(className, element, style));
clone.appendChild(styleElement);
function formatPseudoElementStyle(className, element, style) {
var selector = '.' + className + ':' + element;
var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
return document.createTextNode(selector + '{' + cssText + '}');
function formatCssText(style) {
var content = style.getPropertyValue('content');
return style.cssText + ' content: ' + content + ';';
}
function formatCssProperties(style) {
return util.asArray(style)
.map(formatProperty)
.join('; ') + ';';
function formatProperty(name) {
return name + ': ' +
style.getPropertyValue(name) +
(style.getPropertyPriority(name) ? ' !important' : '');
}
}
}
}
}
function copyUserInput() {
if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;
if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);
}
function fixSvg() {
if (!(clone instanceof SVGElement)) return;
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (!(clone instanceof SVGRectElement)) return;
['width', 'height'].forEach(function (attribute) {
var value = clone.getAttribute(attribute);
if (!value) return;
clone.style.setProperty(attribute, value);
});
}
}
}
function embedFonts(node) {
return fontFaces.resolveAll()
.then(function (cssText) {
var styleNode = document.createElement('style');
node.appendChild(styleNode);
styleNode.appendChild(document.createTextNode(cssText));
return node;
});
}
function inlineImages(node) {
return images.inlineAll(node)
.then(function () {
return node;
});
}
function makeSvgDataUri(node, width, height) {
return Promise.resolve(node)
.then(function (node) {
node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
return new XMLSerializer().serializeToString(node);
})
.then(util.escapeXhtml)
.then(function (xhtml) {
return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
})
.then(function (foreignObject) {
return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
foreignObject + '</svg>';
})
.then(function (svg) {
return 'data:image/svg+xml;charset=utf-8,' + svg;
});
}
function newUtil() {
return {
escape: escape,
parseExtension: parseExtension,
mimeType: mimeType,
dataAsUrl: dataAsUrl,
isDataUrl: isDataUrl,
canvasToBlob: canvasToBlob,
resolveUrl: resolveUrl,
getAndEncode: getAndEncode,
uid: uid(),
delay: delay,
asArray: asArray,
escapeXhtml: escapeXhtml,
makeImage: makeImage,
width: width,
height: height
};
function mimes() {
/*
* Only WOFF and EOT mime types for fonts are 'real'
* see http://www.iana.org/assignments/media-types/media-types.xhtml
*/
var WOFF = 'application/font-woff';
var JPEG = 'image/jpeg';
return {
'woff': WOFF,
'woff2': WOFF,
'ttf': 'application/font-truetype',
'eot': 'application/vnd.ms-fontobject',
'png': 'image/png',
'jpg': JPEG,
'jpeg': JPEG,
'gif': 'image/gif',
'tiff': 'image/tiff',
'svg': 'image/svg+xml'
};
}
function parseExtension(url) {
var match = /\.([^\.\/]*?)$/g.exec(url);
if (match) return match[1];
else return '';
}
function mimeType(url) {
var extension = parseExtension(url).toLowerCase();
return mimes()[extension] || '';
}
function isDataUrl(url) {
return url.search(/^(data:)/) !== -1;
}
function toBlob(canvas) {
return new Promise(function (resolve) {
var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
var length = binaryString.length;
var binaryArray = new Uint8Array(length);
for (var i = 0; i < length; i++)
binaryArray[i] = binaryString.charCodeAt(i);
resolve(new Blob([binaryArray], {
type: 'image/png'
}));
});
}
function canvasToBlob(canvas) {
if (canvas.toBlob)
return new Promise(function (resolve) {
canvas.toBlob(resolve);
});
return toBlob(canvas);
}
function resolveUrl(url, baseUrl) {
var doc = document.implementation.createHTMLDocument();
var base = doc.createElement('base');
doc.head.appendChild(base);
var a = doc.createElement('a');
doc.body.appendChild(a);
base.href = baseUrl;
a.href = url;
return a.href;
}
function uid() {
var index = 0;
return function () {
return 'u' + fourRandomChars() + index++;
function fourRandomChars() {
/* see http://stackoverflow.com/a/6248722/2519373 */
return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
}
};
}
function makeImage(uri) {
return new Promise(function (resolve, reject) {
var image = new Image();
image.onload = function () {
resolve(image);
};
image.onerror = reject;
image.src = uri;
});
}
function getAndEncode(url) {
var TIMEOUT = 30000;
if(domtoimage.impl.options.cacheBust) {
// Cache bypass so we dont have CORS issues with cached images
// Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
}
return new Promise(function (resolve) {
var request = new XMLHttpRequest();
request.onreadystatechange = done;
request.ontimeout = timeout;
request.responseType = 'blob';
request.timeout = TIMEOUT;
request.open('GET', url, true);
request.send();
var placeholder;
if(domtoimage.impl.options.imagePlaceholder) {
var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
if(split && split[1]) {
placeholder = split[1];
}
}
function done() {
if (request.readyState !== 4) return;
if (request.status !== 200) {
if(placeholder) {
resolve(placeholder);
} else {
fail('cannot fetch resource: ' + url + ', status: ' + request.status);
}
return;
}
var encoder = new FileReader();
encoder.onloadend = function () {
var content = encoder.result.split(/,/)[1];
resolve(content);
};
encoder.readAsDataURL(request.response);
}
function timeout() {
if(placeholder) {
resolve(placeholder);
} else {
fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url);
}
}
function fail(message) {
console.error(message);
resolve('');
}
});
}
function dataAsUrl(content, type) {
return 'data:' + type + ';base64,' + content;
}
function escape(string) {
return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
}
function delay(ms) {
return function (arg) {
return new Promise(function (resolve) {
setTimeout(function () {
resolve(arg);
}, ms);
});
};
}
function asArray(arrayLike) {
var array = [];
var length = arrayLike.length;
for (var i = 0; i < length; i++) array.push(arrayLike[i]);
return array;
}
function escapeXhtml(string) {
return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
}
function width(node) {
var leftBorder = px(node, 'border-left-width');
var rightBorder = px(node, 'border-right-width');
return node.scrollWidth + leftBorder + rightBorder;
}
function height(node) {
var topBorder = px(node, 'border-top-width');
var bottomBorder = px(node, 'border-bottom-width');
return node.scrollHeight + topBorder + bottomBorder;
}
function px(node, styleProperty) {
var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
return parseFloat(value.replace('px', ''));
}
}
function newInliner() {
var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
return {
inlineAll: inlineAll,
shouldProcess: shouldProcess,
impl: {
readUrls: readUrls,
inline: inline
}
};
function shouldProcess(string) {
return string.search(URL_REGEX) !== -1;
}
function readUrls(string) {
var result = [];
var match;
while ((match = URL_REGEX.exec(string)) !== null) {
result.push(match[1]);
}
return result.filter(function (url) {
return !util.isDataUrl(url);
});
}
function inline(string, url, baseUrl, get) {
return Promise.resolve(url)
.then(function (url) {
return baseUrl ? util.resolveUrl(url, baseUrl) : url;
})
.then(get || util.getAndEncode)
.then(function (data) {
return util.dataAsUrl(data, util.mimeType(url));
})
.then(function (dataUrl) {
return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
});
function urlAsRegex(url) {
return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');
}
}
function inlineAll(string, baseUrl, get) {
if (nothingToInline()) return Promise.resolve(string);
return Promise.resolve(string)
.then(readUrls)
.then(function (urls) {
var done = Promise.resolve(string);
urls.forEach(function (url) {
done = done.then(function (string) {
return inline(string, url, baseUrl, get);
});
});
return done;
});
function nothingToInline() {
return !shouldProcess(string);
}
}
}
function newFontFaces() {
return {
resolveAll: resolveAll,
impl: {
readAll: readAll
}
};
function resolveAll() {
return readAll(document)
.then(function (webFonts) {
return Promise.all(
webFonts.map(function (webFont) {
return webFont.resolve();
})
);
})
.then(function (cssStrings) {
return cssStrings.join('\n');
});
}
function readAll() {
return Promise.resolve(util.asArray(document.styleSheets))
.then(getCssRules)
.then(selectWebFontRules)
.then(function (rules) {
return rules.map(newWebFont);
});
function selectWebFontRules(cssRules) {
return cssRules
.filter(function (rule) {
return rule.type === CSSRule.FONT_FACE_RULE;
})
.filter(function (rule) {
return inliner.shouldProcess(rule.style.getPropertyValue('src'));
});
}
function getCssRules(styleSheets) {
var cssRules = [];
styleSheets.forEach(function (sheet) {
try {
util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
} catch (e) {
console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
}
});
return cssRules;
}
function newWebFont(webFontRule) {
return {
resolve: function resolve() {
var baseUrl = (webFontRule.parentStyleSheet || {}).href;
return inliner.inlineAll(webFontRule.cssText, baseUrl);
},
src: function () {
return webFontRule.style.getPropertyValue('src');
}
};
}
}
}
function newImages() {
return {
inlineAll: inlineAll,
impl: {
newImage: newImage
}
};
function newImage(element) {
return {
inline: inline
};
function inline(get) {
if (util.isDataUrl(element.src)) return Promise.resolve();
return Promise.resolve(element.src)
.then(get || util.getAndEncode)
.then(function (data) {
return util.dataAsUrl(data, util.mimeType(element.src));
})
.then(function (dataUrl) {
return new Promise(function (resolve, reject) {
element.onload = resolve;
element.onerror = reject;
element.src = dataUrl;
});
});
}
}
function inlineAll(node) {
if (!(node instanceof Element)) return Promise.resolve(node);
return inlineBackground(node)
.then(function () {
if (node instanceof HTMLImageElement)
return newImage(node).inline();
else
return Promise.all(
util.asArray(node.childNodes).map(function (child) {
return inlineAll(child);
})
);
});
function inlineBackground(node) {
var background = node.style.getPropertyValue('background');
if (!background) return Promise.resolve(node);
return inliner.inlineAll(background)
.then(function (inlined) {
node.style.setProperty(
'background',
inlined,
node.style.getPropertyPriority('background')
);
})
.then(function () {
return node;
});
}
}
}
})(this);

84
hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
View File

@ -262,10 +262,11 @@
</el-row>
</div>
<div
:class="{ 'hidden-div': that.hideCreate}"
:id="that.svgId"
:style="{
<div>
<div
:class="{ 'hidden-div': that.hideCreate}"
:id="that.svgId"
:style="{
position: that.hideCreate ? 'fixed' : 'relative',
display: `flex`,
flexDirection: `column`,
@ -273,30 +274,30 @@
height: `${previewSize.height}px`,
}">
<div
v-if="that.previewUrl"
:style="{
width: `${that.svgWidth+2}px`,
height: `${that.svgHeight+2}px`,
<div
v-if="that.previewUrl"
class="bg-info"
:style="{
backgroundColor: (that.pageConfig.background && that.pageConfig.background.areaColor) || '',
border: '1px solid #00ff00',
position: `absolute`,
top: `0`,
left: `0`,
}"
>
>
<div>
<div v-if="false" style="color: #ff0000;">w:{{ imageSize.width }}
h:{{ imageSize.height }}
</div>
<span style="color: #ff0000;writing-mode: vertical-rl; text-orientation: upright;">
<div>
<div v-if="false" style="color: #ff0000;">w:{{ imageSize.width }}
h:{{ imageSize.height }}
</div>
<span style="color: #ff0000;writing-mode: vertical-rl; text-orientation: upright;">
*仅供参考
</span>
</div>
</div>
<div
v-if="that.previewUrl" v-html="that.previewUrl">
</div>
</div>
<div
v-if="that.previewUrl" v-html="that.previewUrl">
</div>
</div>
</div>
@ -315,13 +316,18 @@ import {replaceDomain} from "@/utils";
import * as FileApi from "@/api/infra/file";
import {ProductInfoApi} from "@/api/oms/productinfo";
//@ts-ignore
import domtoimage from 'dom-to-image';
// import domtoimage from './dom-to-image.js';
import {GroupTypeEnum} from "@/components/DraftDesign/config/constant";
import {useI18n} from "@/hooks/web/useI18n";
const {t} = useI18n()
const svgSize= computed(() => {
return {
width: that.svgWidth * 10,
height: that.svgHeight * 10,
}
})
const emit = defineEmits(['change', 'initSucceed'])
const draftDesignEditRef = ref()
const that = reactive({
@ -351,6 +357,7 @@ const that = reactive({
changeCount: 0,
previewUrl: "",
previewData: '',
sourceFile: '', // 源文件 html
ingredientInfoList: [],
sizeInfo: null,
brandId: null,
@ -583,12 +590,24 @@ const getIngredientInfoListByType = (type) => {
}
const uploadFile = async (fileName) => {
return new Promise((resolve, reject) => {
let svgElement = document.getElementById(that.svgId);
document.querySelector(`#${that.svgId} .bg-info`).style.width = `${that.svgWidth}px`
document.querySelector(`#${that.svgId} .bg-info`).style.height = `${that.svgHeight}px`
console.log("svgElement?.innerHTML",)
// 创建一个 Blob 对象，用于保存 SVG 文件
saveMaxSvg(svgElement,fileName);
// // 创建一个链接元素来触发下载
// const link = document.createElement('a');
// link.href = URL.createObjectURL(blob);
// link.download = 'graph.html'; // 指定下载文件名
// // 触发点击事件来下载文件
// link.click();
domtoimage.toBlob(svgElement, {
width: that.svgWidth + 5,
height: that.svgHeight + 5,
width: that.svgWidth + 10,
height: that.svgHeight + 10,
type: 'image/png',
scale:4,
quality: 1
}).then((blob) => {
const file = new File([blob], fileName, {type: 'image/png'});
@ -612,6 +631,21 @@ 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'});
FileApi.updateFile({file: file})
.then((res) => {
console.log("res"+res)
if (res.code === 0) {
that.sourceFile = res.data
} else {
}
}).catch((res) => {
})
}
const deleteList = (key, index) => {
const item = cloneDeep(that.propInfo[key])
@ -1310,6 +1344,7 @@ const getPropInfo = () => {
})
// 成功后再获取图片
draftDesignEditRef.value.toSVGData((url) => {
that.previewUrl = url
that.hideCreate = false;
setTimeout(() => {
@ -1323,6 +1358,8 @@ const getPropInfo = () => {
const svgDom = document.querySelector(`#${that.svgId} svg`).getBoundingClientRect()
that.svgHeight = dom.height;
that.svgWidth = dom.width;
console.log("that.svgHeight",that.svgHeight,that.svgWidth)
document.querySelector(`#${that.svgId} svg`).style.left = `${svgDom.left - dom.left}px`;
document.querySelector(`#${that.svgId} svg`).style.top = `${svgDom.top - dom.top}px`;
// that.pageLoading.close()
@ -1348,6 +1385,7 @@ const getPropInfo = () => {
// 设计稿id
draftDesignId: that.draftDesignId,
previewImage: that.previewData,
sourceFile: that.sourceFile,
propInfo: that.propInfo
})
})

26
hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/TextCellNode.vue
View File

@ -104,20 +104,20 @@ export default defineComponent({
// ,&#8203;
if(this.cellInfo.label){
let text = this.cellInfo.label;
text = text.replaceAll('"', "“");
// text = text.replaceAll('"', "“");
text = text.replaceAll(',', ",&#8203;");
text = text.replaceAll('.', ".&#8203;");
text = text.replaceAll(':', ":&#8203;");
text = text.replaceAll('!', "!&#8203;");
text = text.replaceAll('?', "?&#8203;");
text = text.replaceAll("'", "'&#8203;");
text = text.replaceAll('-', "-&#8203;");
text = text.replaceAll('—', "—&#8203;");
text = text.replaceAll('/', "/&#8203;");
text = text.replaceAll('(', "(&#8203;");
text = text.replaceAll(')', ")&#8203;");
text = text.replaceAll('+', "+&#8203;");
text = text.replaceAll('=', "=&#8203;");
// text = text.replaceAll('.', ".&#8203;");
// text = text.replaceAll(':', ":&#8203;");
// text = text.replaceAll('!', "!&#8203;");
// text = text.replaceAll('?', "?&#8203;");
// text = text.replaceAll("'", "'&#8203;");
// text = text.replaceAll('-', "-&#8203;");
// text = text.replaceAll('—', "—&#8203;");
// text = text.replaceAll('/', "/&#8203;");
// text = text.replaceAll('(', "(&#8203;");
// text = text.replaceAll(')', ")&#8203;");
// text = text.replaceAll('+', "+&#8203;");
// text = text.replaceAll('=', "=&#8203;");
return text;
}

50
hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue
View File

@ -92,7 +92,21 @@ const props = defineProps({
type: Object,
required: true,
default: () => ({
previewImage: ''
productId: "",
orderQty: 1,
propInfo: "",
propOrderByList: [],
draftDesignId: "",
previewImage: "",
sourceFile: "",
draftDesignInfo: {},
specInfo: {}
})
},
product: {
type: Object,
required: true,
default: () => ({
})
},
badge: {
@ -101,12 +115,21 @@ const props = defineProps({
default: ''
}
})
const that = {
productInfo:{},
}
const getLabelName = (item) => {
if (item.shape === ShapeType.vueShapeImage) {
return item.groupName + ":"
}
return item.groupName + ":"
}
watch(()=>props.product,(value, oldValue, onCleanup)=>{
that.productInfo = value
},{
deep: true,
immediate: true
})
const getValue = (item:any) => {
let arr = [];
for (let i = 0; i < item.dataInfo.length; i++) {
@ -149,7 +172,8 @@ const propInfoOrderByList = computed(() => {
const previewUrl = computed(() => {
return formData.value.previewImage || ""
})
const init = ()=>{
const init = (productInfo:any)=>{
}
const submit = (data:any) => {
@ -162,6 +186,7 @@ const submit = (data:any) => {
tmpData.propOrderByList = data.propOrderByList;
tmpData.draftDesignId = data.draftDesignId;
tmpData.previewImage = data.previewImage;
tmpData.sourceFile = data.sourceFile;
tmpData.draftDesignInfo = {...data.draftDesignInfo};
// 将颜色信息保存到规格信息中
tmpData.specInfo = {
@ -182,14 +207,29 @@ const change = () => {
emit("update:productInfo", formData.value)
emit("change", formData.value)
}
const getDownloadName = ()=>{
console.log("getFileName@@",that.productInfo)
if(that.productInfo){
return `${that.productInfo.name}(${that.productInfo.code})`
}
return new Date().getTime();
}
const getFileName = ()=>{
if(formData.value.sourceFile){
return `${getDownloadName()}.html`
}
return `${getDownloadName()}.png`
}
const imagePreview = (imgUrl: string) => {
addDownloadImg(imgUrl,new Date().getTime())
addDownloadImg(formData.value.sourceFile || formData.value.previewImage ,getFileName())
createImageViewer({
zIndex: 9999999,
urlList: [imgUrl]
})
}
const addDownloadImg = (url: string,name = 'img') => {
const addDownloadImg = (url: string,name = 'img.jpg') => {
setTimeout(() => {
let wrapper = document.getElementsByClassName("el-image-viewer__btn el-image-viewer__actions");
if (wrapper.length > 0) {
@ -213,7 +253,7 @@ const addDownloadImg = (url: string,name = 'img') => {
.then((blob) => {
const blobUrl = URL.createObjectURL(blob); // 创建 blob URL
link.href = blobUrl; // 设置下载链接
link.download = name+".jpg"; // 设置下载文件名
link.download = name; // 设置下载文件名
link.click(); // 触发下载
URL.revokeObjectURL(blobUrl); // 释放 blob URL 资源
})

22
hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue
View File

@ -12,6 +12,7 @@
<template v-for="(item,index) in that.tableData" :key="item.key">
<ProductItem1
@change="changeItem"
:product="pInfo"
class="m-2"
ref="productItem1Ref"
@del-item="delItem"
@ -62,6 +63,7 @@ const [that, resetFields] = useResetFields({
productId: '',
listKey: '',
cover: '',
productInfo: {},
templateType: '2', // 1有模板 2无模板 3尺码唛
specInfo: {
specSizeWidth: 0,
@ -95,7 +97,9 @@ const addSku = () => {
productItem3Ref.value.init(that.tableData);
}
}
const pInfo = computed(()=>{
return that.productInfo;
})
const init = (row) => {
that.tableData = row.productSkuList;
@ -111,14 +115,27 @@ const init = (row) => {
specMaterial: res.specMaterial,
mainColor: '',
}
that.productInfo = res;
that.templateType = res.templateType;
console.log("res",res)
that.cover = '';
// 没有设计稿数据 1有模板 2无模板 3尺码唛
if (res.templateType !== '1') {
that.cover = res.cover
}
if (res.templateType === '2') {
if (res.templateType === '1') {
if (that.tableData.length === 0) {
addSku();
}else {
checkList();
}
setTimeout(()=>{
},200)
}else if (res.templateType === '2') {
// 初始化
setTimeout(() => {
console.log("that.tableData@@",that.tableData)
@ -150,7 +167,6 @@ const init = (row) => {
addSku();
}else {
checkList();
}
}
})

5
sql/mysql/20250107/产品信息新增字段.sql Normal file
View File

@ -0,0 +1,5 @@
-- 销售订单sku 源文件下载链接
ALTER TABLE oms_sale_order_sku
ADD COLUMN `source_file` varchar(1024) DEFAULT NULL COMMENT '稿件源文件' AFTER `preview_image`;