排版
This commit is contained in:
@@ -18,7 +18,7 @@
|
||||
<div class="input-group mb-3">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">版型</button>
|
||||
<ul class="dropdown-menu">
|
||||
<ul class="dropdown-menu style-menu">
|
||||
<li><span class="dropdown-item">選擇版型</span></li>
|
||||
</ul>
|
||||
<input type="text" id="styleName" class="form-control" aria-label="版型名稱">
|
||||
@@ -159,7 +159,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="form-floating mb-3">
|
||||
<input type="number" id="yPosition" class="form-control form-control-sm mb-2">
|
||||
<label class="small" for="yPosition">Y</label>
|
||||
</div>
|
||||
</div>--%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -185,9 +198,15 @@
|
||||
{ name: "紅1", path: "../../admin/print/html/tablet-2.svg" },
|
||||
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
|
||||
],
|
||||
allStyle: [
|
||||
],
|
||||
tabletElements: [
|
||||
],
|
||||
orientation: "portrait",
|
||||
init() {
|
||||
//$(".tablet-element").draggable({});
|
||||
this.getElements();
|
||||
this.getStyles();
|
||||
this.bindEvents();
|
||||
this.loadConfig();
|
||||
this.bindBackend();
|
||||
@@ -209,7 +228,6 @@
|
||||
$("#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;
|
||||
@@ -220,8 +238,95 @@
|
||||
height: this.paper.height + "mm",
|
||||
});
|
||||
},
|
||||
changeStyle() {//切換版型
|
||||
async getElements() {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async getStyles() {
|
||||
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;
|
||||
if (data.result == "Y") {
|
||||
data.data.forEach(x => {
|
||||
this.allStyle.push(x);
|
||||
$(".style-menu").append("<li><span class='dropdown-item style-item' data-value='" + x.styleID + "'>" + x.name + "</span></li>");
|
||||
});
|
||||
|
||||
this.bindDropdown();
|
||||
}
|
||||
}
|
||||
//}
|
||||
});
|
||||
},
|
||||
bindDropdown() {
|
||||
let self = this;
|
||||
$(".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"));
|
||||
let size = self.allSize.find(x => x.name == style.paperSize);
|
||||
self.paper.width = size.width;
|
||||
self.paper.height = size.height;
|
||||
|
||||
});
|
||||
},
|
||||
async changeStyle(id) {//切換版型，抓回明細
|
||||
let self = this;
|
||||
this.elements.length = 0;
|
||||
let obj = this.elements
|
||||
await axios
|
||||
.post(HTTP_HOST + 'api/tablet/GetStyleDetailData', {})
|
||||
.then(response => {
|
||||
if (response.status == "200") {
|
||||
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 config = {
|
||||
id: el.elementID,
|
||||
type: te.elementType,
|
||||
text: te.sampleContent,
|
||||
x: el.startX, y: el.startY,
|
||||
style: {
|
||||
fontSize: 24,
|
||||
fontFamily: "Kaiti", isVertical : true,
|
||||
letterSpacing : 5, lineHeight : 1.5,
|
||||
visibility: el.isActive
|
||||
},
|
||||
width: el.width,
|
||||
breakLen:el.breakLen
|
||||
};
|
||||
|
||||
obj.push(config)
|
||||
|
||||
})
|
||||
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
changeBg() {
|
||||
let path = this.bg.find(el => el.name == $("#backendInp").val())
|
||||
@@ -243,6 +348,11 @@
|
||||
// 文字變更連動渲染
|
||||
$('#inp-text').on('input', (e) => this.updateActive('text', $(e.target).val()));
|
||||
$('#inp-size').on('input', (e) => this.updateActive('fontSize', $(e.target).val()));
|
||||
$('#width').on('input', (e) => this.updateActive('width', $(e.target).val()))
|
||||
$('#2offset').on('input', (e) => this.updateActive('2offset', $(e.target).val()))
|
||||
$('#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()))
|
||||
$(document).on('mousedown', '.tablet-element', (e) => {
|
||||
e.stopPropagation();
|
||||
this.select($(e.currentTarget).attr('id'));
|
||||
@@ -359,17 +469,24 @@
|
||||
$('#inp-size').val(el.style.fontSize);
|
||||
$('#xPosition').val(el.x);
|
||||
$("#yPosition").val(el.y);
|
||||
$('#TwoOffset').val(el.TwoOffset);
|
||||
$("#ThreeOffset").val(el.ThreeOffset);
|
||||
$("#FourOffset").val(el.FourOffset);
|
||||
$('#2offset').val(el.twoOffset);
|
||||
$("#3offset").val(el.threeOffset);
|
||||
$("#4offset").val(el.fourOffset);
|
||||
$("#breakLen").val(el.breakLen);
|
||||
$("#width").val(el.width);
|
||||
|
||||
//this.render();
|
||||
},
|
||||
|
||||
updateActive(key, val) {
|
||||
const el = this.elements.find(x => x.id === this.activeId);
|
||||
console.log(this.activeId, el)
|
||||
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);
|
||||
else if (key === '2offset') el.twoOffset = parseFloat(val);
|
||||
else if (key === '3offset') el.threeOffset = parseFloat(val);
|
||||
else if (key === '4offset') el.fourOffset = parseFloat(val);
|
||||
else el[key] = val;
|
||||
if (el.type == "roster") {
|
||||
const names = el.text.split('\n').filter(s => s.trim());
|
||||
@@ -468,12 +585,8 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
saveStyle() {
|
||||
let master = {
|
||||
styleID: "", styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
|
||||
backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
|
||||
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val()
|
||||
}
|
||||
async saveStyle() {
|
||||
|
||||
let detail = [
|
||||
|
||||
];
|
||||
@@ -482,11 +595,22 @@
|
||||
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
|
||||
isActive: el.style.visibility,width:el.width
|
||||
});
|
||||
});
|
||||
|
||||
console.log(master,detail);
|
||||
let master = {
|
||||
styleID: "", styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
|
||||
backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
|
||||
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(),
|
||||
detail: detail
|
||||
}
|
||||
console.log(master);
|
||||
await axios
|
||||
.post(HTTP_HOST + 'api/tablet/SavDegignerData', master)
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -23,6 +23,7 @@ public class TabletElement
|
||||
public double? threeOffset { get; set; }
|
||||
public double? fourOffset { get; set; }
|
||||
public int? breakLen { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public class ElementStyle
|
||||
@@ -43,7 +44,12 @@ public partial class admin_item_TabletDesigner :MyWeb.config
|
||||
{
|
||||
|
||||
}
|
||||
[WebMethod]
|
||||
public static string SaveDesigner()
|
||||
{
|
||||
|
||||
return "";
|
||||
}
|
||||
[WebMethod]
|
||||
public static string GetConfig()
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user