yiming/17168ERP
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

..

Browse Source
This commit is contained in:
minom
2026-03-09 18:09:32 +08:00
parent 50b24a7282
commit bfd07ebe90
5 changed files with 215 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
web/admin/item/TabletDesigner.aspx
View File

@@ -8,6 +8,7 @@
@import "css/tablet-design.css";
@import "css/floating.css";
</style>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
@@ -23,26 +24,7 @@
</ul>
<input type="text" id="styleName" class="form-control" aria-label="版型名稱">
</div>
<%--<div class="row">
<div class="col-6">
<select class="form-select" id="styleID" aria-label="版型名稱">
<option selected>選擇版型</option>
</select>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="styleName" class="form-control form-control-sm mb-2"/>
<label for="styleName" style="color:black">版型名稱</label>
</div>
</div>
</div>--%>
<%--<div class="form-floating mb-3">
<select class="form-select form-select-sm mb-2 " onchange="Designer.changeStyle()" id="styleName">
<option value="">請選擇</option>
</select>
<label for="styleName" style="color:black">版型名稱</label>
</div>--%>
<div class="form-floating mb-3">
<select class="form-select form-select-sm mb-2 " onchange="Designer.changePaper()" id="paperSize">
<option value="">請選擇</option>
@@ -159,20 +141,34 @@
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-6">
<div class="form-floating mb-3">
<input type="number" id="width" class="form-control form-control-sm mb-2">
<label class="small" for="width">寬度</label>
</div>
</div>
<%-- <div class="col-6">
<div class="col-6">
<div class="form-floating mb-3">
<input type="number" id="yPosition" class="form-control form-control-sm mb-2">
<label class="small" for="yPosition">Y</label>
<input type="number" id="height" class="form-control form-control-sm mb-2">
<label class="small" for="height">高度</label>
</div>
</div>--%>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-floating mb-3">
<input type="number" id="textWidth" class="form-control form-control-sm mb-2">
<label class="small" for="textWidth">文字寬度</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="number" id="textHeight" class="form-control form-control-sm mb-2">
<label class="small" for="textHeight">文字高度</label>
</div>
</div>
</div>
</div>
</div>
@@ -221,15 +217,12 @@
},
changeOrientation() {
this.orientation = (this.orientation === "portrait" ? "land" : "portrait");
console.log(this.orientation);
$("#paperOrientation").empty();
let ori = this.orientation == "portrait" ? "直向" : "橫向";
console.log(this.orientation, ori)
$("#paperOrientation").html("<span>" + ori + "</span>");
let paperSize = $("#paperSize").val()
let size = this.allSize.find(x => x.name == paperSize)
console.log(paperSize, size);
this.paper.width = this.orientation == "portrait" ? size.width : size.height;
this.paper.height = this.orientation == "portrait" ? size.height : size.width;
$(".tablet-paper").css({
@@ -239,17 +232,17 @@
});
},
async getElements() {
let self=this
await axios
.post(HTTP_HOST + 'api/tablet/GetTabletElement', {})
.then(response => {
console.log(response);
//if (response.result=="Y") {
if (response.status == "200") {
let data = response.data;
if (data.result == "Y") {
data.data.forEach(x => {
this.tabletElements.push(x);
}
self.tabletElements.push(x);
});
}
}
});
@@ -258,7 +251,6 @@
await axios
.post(HTTP_HOST + 'api/tablet/GetStyleData', {})
.then(response => {
console.log(response);
//if (response.result=="Y") {
if (response.status == "200") {
let data = response.data;
@@ -279,7 +271,6 @@
$(".style-menu li").on("click", function (e) {
$(".style-menu li").removeClass('active');
$(this).addClass('active');
console.log(e.target.textContent, $(this));
$("#styleName").val(e.target.textContent);
self.changeStyle(e.target.getAttribute("data-value"));
let style = self.allStyle.find(x => x.styleID == e.target.getAttribute("data-value"));
@@ -293,6 +284,16 @@
let self = this;
this.elements.length = 0;
let obj = this.elements
let s=this.allStyle.find(x=>x.styleID==id)
$("#paperSize").val(s.paperSize);
$("#backendInp").val(s.backendImg);
$("#printSize").val(s.printSize);
$("#printMode").val(s.printMode);
$("#perPage").val(s.printPageCount);
console.log("s:",s);
let img = this.bg.find(x => x.name == s.backendImg);
console.log(img);
$(".tablet-paper").css({ 'background-image': 'url(' + img.path + ')', 'background-size': '100% 100%' })
await axios
.post(HTTP_HOST + 'api/tablet/GetStyleDetailData', {})
.then(response => {
@@ -300,10 +301,13 @@
let data = response.data;
if (data.result == "Y") {
let details = data.data;
$(".tablet-paper").empty()
details.forEach(el => {
let te=self.tabletElements.find(x=>x.elementID==el.elementID);
let te = self.tabletElements.find(x => {
return x.elementID == el.elementID
});
console.log("details:",el,te);
let config = {
id: el.elementID,
type: te.elementType,
@@ -313,10 +317,14 @@
fontSize: 24,
fontFamily: "Kaiti", isVertical : true,
letterSpacing : 5, lineHeight : 1.5,
visibility: el.isActive
visibility: te.isActive
},
width: el.width,
breakLen:el.breakLen
height: el.height,
textWidth: el.textWidth,
textHeight:el.textHeight,
breakLen: el.breakLen,
backendInp: el.backendImg
};
obj.push(config)
@@ -353,6 +361,10 @@
$('#3offset').on('input', (e) => this.updateActive('3offset', $(e.target).val()))
$('#4offset').on('input', (e) => this.updateActive('4offset', $(e.target).val()))
$('#breakLen').on('input', (e) => this.updateActive('breakLen', $(e.target).val()))
$('#width').on('input', (e) => this.updateActive('width', $(e.target).val()))
$('#height').on('input', (e) => this.updateActive('height', $(e.target).val()))
$('#textWidth').on('input', (e) => this.updateActive('textWidth', $(e.target).val()))
$('#textHeight').on('input', (e) => this.updateActive('textHeight', $(e.target).val()))
$(document).on('mousedown', '.tablet-element', (e) => {
e.stopPropagation();
this.select($(e.currentTarget).attr('id'));
@@ -409,16 +421,64 @@
else if (el.id === 'address') {
html = el.text.replace(/(\d+)/g, '<span class="tate-chu-yoko">$1</span>');
}
else if (el.id === 'title1') {
//html = "<div class='name-list'>";
//console.log(slice);
//slice.forEach(x => {
// html=html+"<span>"+x+"</span>"
//});
//html = html + "</div>";
html = this.renderNameList(slice,el);
console.log(html);
}
else {
html = el.text;
}
return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
.css({
position: "absolute", left: this.getPosInMm(el.x) + "mm", top: this.getPosInMm(el.y) + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
})
.html(html);
},
renderNameList(names,el) {
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
display: "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
margin: "auto",
width: `${el.width}px`,
height: `${el.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": "BiauKai",
"letter-spacing": "0.1em",
"column-gap": "1px",
"row-gap": "1px",
"align-items": "center",
});
console.log("nameList:", $namelist)
let self = this;
names.forEach(n => {
$namelist.append(self.renderNameSpan(n,el))
})
return $namelist;
},
renderNameSpan(name,el) {
return $(`<span>${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
width: `${el.textWidth}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "40px",
"margin-left": "5px",
"text-justify": "inter-character",
});
},
// 品字佈局邏輯：一上二下
renderRoster(names, el) {
@@ -453,8 +513,6 @@
const el = self.elements.find(x => x.id === id);
el.x = self.getPosInMm(ui.position.left);
el.y = self.getPosInMm(ui.position.top);
console.log(id, el)
//console.log(id,ui.position.left, ui.position.top,ui.offset.left,ui.offset.top);
$(`.tablet-element[id="${id}"]`).css({ left: el.x + "mm", top: el.y + "mm" });
}
@@ -474,13 +532,15 @@
$("#4offset").val(el.fourOffset);
$("#breakLen").val(el.breakLen);
$("#width").val(el.width);
$("#height").val(el.height);
$("#textWidth").val(el.textWidth);
$("#textHeight").val(el.textHeight);
//this.render();
},
updateActive(key, val) {
const el = this.elements.find(x => x.id === this.activeId);
console.log("updateActive:",this.activeId, el,key,val)
if (key === 'fontSize') el.style.fontSize = parseFloat(val);
else if (key === 'width') el.width = parseFloat(val);
else if (key === 'breakLen') el.breakLen = parseInt(val);
@@ -502,6 +562,18 @@
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
}).html(html);
} else if (this.activeId === "title1") {
let slice = el.text.split('\n').filter(s => s.trim());
//html = "<div class='name-list'>";
//console.log(slice);
//slice.forEach(x => {
// html = html + "<span>" + x + "</span>"
//});
//html = html + "</div>";
html = this.renderNameList(slice, el);
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
}).html(html);
} else {
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
@@ -510,11 +582,8 @@
//this.render();
},
displayItem(id) {
console.log(id);
let el = this.elements.find(x => x.id === id);
console.log("before:", el);
el.style.visibility = el.style.visibility === "hidden" ? "" : "hidden";
console.log("after:", el, el.x, el.y);
$("#" + id).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
})
@@ -541,7 +610,7 @@
//this.render();
},
addElement() {
console.log("QQQ");
//console.log("QQQ");
},
wrapImageInSvg(imageBase64) {
// 建立一個簡單的 SVG 字串，將圖片鋪滿
@@ -562,10 +631,9 @@
},
bindBackend() {
$("#backendInp").on('change', function (e) {
console.log($("#backendInp"))
const input = e.target;
if (input.files && input.files[0]) {
console.log("file:", input.files[0]);
const file = input.files[0];
// 1. 先讀取檔案轉成 Base64
@@ -575,7 +643,6 @@
// 2. 將 Base64 PNG 包裝成 SVG
//const svgDataUri = this.wrapImageInSvg(base64Image);
console.log(base64Image)
// 3. 設定到底圖
//this.service.setBackground(svgDataUri);
$(".tablet-paper").css({ 'background-image': 'url(' + base64Image + ')', 'background-size': '100% 100%' })
@@ -595,7 +662,7 @@
detail.push({
elementID: el.id, startX: el.x, startY: el.y, fontSize: el.style.fontSize, fontFamily: el.style.fontFamily,
breakLen: el.breakLen, twoOffset: el.twoOffset, threeOffset: el.threeOffset, fourOffset: el.fourOffset,
isActive: el.style.visibility,width:el.width
isActive: el.style.visibility,width:el.width,height:el.height,textWidth:el.textWidth,textHeight:el.textHeight
});
});