- <%--
設計工具箱
--%>
+
+
+
+
+
+ 存檔
+
+
+
+
+
+
+ ➖
+
+
+
+
+
+ ➕
+
+
+ {{ scaleSize }}%
+
+
型版屬性
@@ -457,6 +603,8 @@
vuetify: new Vuetify(vuetify_options),
data() {
return {
+ zoomScale: 0.5,
+ scaleSize: 50,
snackbar: {
show: false,
text: "",
@@ -516,7 +664,26 @@
mounted() {
this.init()
},
+ watch: {
+ zoomScale: {
+ handler() {
+ this.scaleSize =Math.floor( Number(this.zoomScale)*100)
+ $(".tablet-paper").css({ transform: `scale(${this.zoomScale})` });
+ },
+ deep: true,
+ }
+ },
methods: {
+ minusZoomScalee() {
+ this.zoomScale = Number(this.zoomScale) -0.05
+ //this.scaleSize = this.scaleSize - 5
+ //$(".tablet-paper").css({ transform:`scale(${this.zoomScale})` });
+ },
+ plusZoomScalee() {
+ this.zoomScale = Number(this.zoomScale) + 0.05
+ //this.scaleSize = this.scaleSize + 5
+ //$(".tablet-paper").css({ transform: `scale(${this.zoomScale})` });
+ },
onTabsResize(e) {
//console.log(e)
// 當畫面變動時，呼叫 Vuetify 內部的呼叫方法重新計算寬度
@@ -745,11 +912,15 @@
let size = this.allSize.find(x => x.name == paperSize)
this.paper.width = this.orientation == "portrait" ? size.width : size.height;
this.paper.height = this.orientation == "portrait" ? size.height : size.width;
+
+
$(".tablet-paper").css({
"background-color": "white",
width: this.paper.width + "mm",
height: this.paper.height + "mm",
"background-repeat": "no-repeat!important",
+ transform: `scale(${this.zoomScale})`, /* 縮小為 50% (改為 0.8 就是 80%，依此類推) */
+ "transform-origin": "top left", /* 確保縮放的基準點在左上角，防止縮放後位移 */
});
},
async getPaperSize() {
@@ -778,6 +949,7 @@
},
async getElements() {
let self = this
+ self.tabletElements.length=0
await axios
.post(HTTP_HOST + 'api/tablet/GetTabletElement', {})
.then(response => {
@@ -795,7 +967,7 @@
},
async getStyles() {
let self = this
- self.allSize.length = 0
+ self.allStyle.length = 0
// $(".style-menu").html("")
await axios
.post(HTTP_HOST + 'api/tablet/GetStyleData', {})
@@ -841,11 +1013,19 @@
});
},
async changeStyle(id) {//切換版型，抓回明細
+ if (this.allSize.length === 0) {
+ this.snackbar.text = "請先至少設定一種尺寸"
+ this.snackbar.show = true
+ return
+ }
let self = this;
this.elements.length = 0;
let obj = this.elements
let s = this.allStyle.find(x => x.styleID == id)
let size = this.allSize.find(x => x.id == s.paperSize)
+ if (size == null || size == undefined) {
+ size = this.allSize[0]
+ }
this.paper.width = size.width;
this.paper.height = size.height;
this.rosterLimit = s.rosterLimit;
@@ -865,10 +1045,18 @@
//$("#perpage").val(s.printPageCount);
//$("#rosterLimit").val(s.rosterLimit);
let img = this.bg.find(x => x.name == s.backendImg);
+ //let scaleSize = 1
+ //let documentHeight = document.documentElement.scrollHeight;
+ //if ((Number(this.paper.height) / 0.265) >= (Number(documentHeight) * 0.8)) {
+ // scaleSize = (Number(documentHeight) * 0.8)/(Number(this.paper.height) / 0.265)
+ //}
+ console.log(scaleSize)
$(".tablet-paper").css({
'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%',
width: (size ? size.width : self.paper.width) + "mm",
height: (size ? size.height : self.paper.height) + "mm",
+ transform: `scale(${this.zoomScale})`, /* 縮小為 50% (改為 0.8 就是 80%，依此類推) */
+ "transform-origin": "top left", /* 確保縮放的基準點在左上角，防止縮放後位移 */
})
await axios
.post(HTTP_HOST + 'api/tablet/GetStyleDetailData', { styleID: id })
@@ -944,10 +1132,17 @@
// console.log("paperSize:", paperSize);
$("#sizeDiv").attr("style", "display:none;");
let size = this.allSize.find(x => x.id == paperSize)
+ //let scaleSize = 1
+ //let documentHeight = document.documentElement.scrollHeight;
+ //if ((Number(size.height) / 0.265) >= (Number(documentHeight) * 0.8)) {
+ // scaleSize = (Number(documentHeight) * 0.8) / (Number(size.height) / 0.265)
+ //}
$(".tablet-paper").css({
"background-color": "white",
width: (size ? size.width : self.paper.width) + "mm",
height: (size ? size.height : self.paper.height) + "mm",
+ transform: `scale(${this.zoomScale})`, /* 縮小為 50% (改為 0.8 就是 80%，依此類推) */
+ "transform-origin": "top left", /* 確保縮放的基準點在左上角，防止縮放後位移 */
});
}
},
@@ -962,6 +1157,7 @@
return false
}
let ps = { paperSize: paperSize }
+ self.removeDialog=false
await axios
.post(HTTP_HOST + 'api/tablet/DelPaperSize', ps)
.then(response => {
@@ -991,6 +1187,7 @@
let self = this;
let sID = this.removeStyleID;
//console.log("styleID:", sID);
+ self.removeDialog = false;
if (sID == "000001" || sID == null || sID == undefined) {
this.snackbar.text = "請選擇要刪除的版型"
this.snackbar.show = true
@@ -1004,6 +1201,7 @@
$("#toast_body").html(`${response.data.message}`)
self.toast.show();
if (response.data.result == "Y") {
+
self.getStyles()
}
}
@@ -1035,7 +1233,7 @@
self.toast.show();
self.getPaperSize()
//$("#paperSize").val("")
- self.paperSize=""
+ self.paperSize = self.allSize.length>0?self.allSize[0].id:""
self.changePaper()
self.paperDialog = false
self.newPaper.paperName = ""
@@ -1092,6 +1290,11 @@
let style = this.allStyle.find(x => x.styleID == this.styleID);
let size = this.allSize.find(x => x.id == style.paperSize);
+ //let scaleSize = 1
+ //let documentHeight = document.documentElement.scrollHeight;
+ //if ((Number(size.height) / 0.265) >= (Number(documentHeight) * 0.8)) {
+ // scaleSize = (Number(documentHeight) * 0.8) / (Number(size.height) / 0.265)
+ //}
//console.log(this.paper, size);
//for (let p = 0; p < pages; p++) {
// const $paper = $('')
@@ -1100,7 +1303,9 @@
"background-color": "white",
width: (size ? size.width : this.paper.width) + 'mm',
height: (size ? size.height : this.paper.height) + 'mm',
- position: "absolute"
+ position: "absolute",
+ transform: `scale(${this.zoomScale})`, /* 縮小為 50% (改為 0.8 就是 80%，依此類推) */
+ "transform-origin": "top left", /* 確保縮放的基準點在左上角，防止縮放後位移 */
});
//const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit);
//const roster = this.elements.find(e => e.id === this.styleID);
@@ -1541,6 +1746,11 @@
if (sID == "000001") {
this.styleID = ""
}
+ if (this.styleName === "新增版型") {
+ this.snackbar.text = "請輸入新的版型名稱"
+ this.snackbar.show = true
+ return
+ }
let master = {
styleID: this.styleID, styleName: this.styleName, paperSize: this.paperSize,//$("#paperSize").val(),
backendImg: this.backendInp, printSize: this.printSize, printMode: this.printMode,
diff --git a/web/admin/print/tablet_edit/editorNewOne.html b/web/admin/print/tablet_edit/editorNewOne.html
index 0c0dc8b..8f74017 100644
--- a/web/admin/print/tablet_edit/editorNewOne.html
+++ b/web/admin/print/tablet_edit/editorNewOne.html
@@ -22,8 +22,10 @@
}
.work_space {
- min-height: 80vh;
- min-width: 80vw;
+ min-height: 40vh;
+ min-width: 70vw;
+ max-width: 90vw;
+ max-height: 50vh;
}
body {
@@ -39,8 +41,8 @@
-
-
+
+
版型設定:
@@ -52,13 +54,34 @@
+
+
+
+ ➖
+
+
+
+
+
+ ➕
+
+
+
+
+
+