Skip to content

E
electron-printer
Commit f487e64e by zhuzhequan
Options

添加自动打印逻辑

parents 259b924d ee10b4cf
Showing with 1034 additions and 365 deletions
.gitignore
...@@ -25,7 +25,7 @@ yarn-error.log* ...@@ -25,7 +25,7 @@ yarn-error.log*
/dist_electron /dist_electron
# 排除 print/Input 目录下的 .bat 文件 # 排除 print/Input 目录下的 .bat 文件
!/print/Input/*.bat /print/Input/*.png
print/Profile/* print/Profile/*
/logs /logs
\ No newline at end of file
config/env.json
{ {
"apiApiHost":"http://10.168.31.142:8060/api", "apiApiHost":"http://10.168.31.142:8060/api",
"fileApiUrl":"http://10.168.31.142:80/upload/factory", "fileApiUrl":"http://10.168.31.142:80/upload/factory",
"visionUrl":"https://console.jomalls.com" "visionUrl":"https://console.jomalls.com"
} }
......
logs/2025-04-28/api.log
...@@ -250,3 +250,51 @@ ...@@ -250,3 +250,51 @@
状态码 ：200 状态码 ：200
data ：{"code":200,"data":false,"message":"操作成功"} data ：{"code":200,"data":false,"message":"操作成功"}
[2025-04-28T17:02:14.737] [INFO] log -
时间：2025-04-28 17:02:14
ip : ::1
host : localhost:3000
响应时间 : 0.236 s
method ：GET
url ：/checkUpdate?version=1.0.8
token ：eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzeXNVc2VyIjp7ImlkIjo0NiwiYWNjb3VudCI6IjEyMzQ1NiIsInBhc3N3b3JkIjoiZTEwYWRjMzk0OWJhNTlhYmJlNTZlMDU3ZjIwZjg4M2UiLCJzdXBwZXJNYXJrIjoxLCJmYWN0b3J5SWQiOjMzLCJmYWN0b3J5Q29kZSI6IlQzNCIsInN0YXR1cyI6MSwiZmFjdG9yeSI6eyJpZCI6MzMsImJpYW5tYSI6IlQzNCIsInRpdGxlIjoiVDM0NjYiLCJ0eXBlSWQiOjE2LCJuYW1lIjoiMTIzIiwibW9iaWxlIjoiMTIzNDU2IiwiZ29vZHNOdW1iZXIiOjg0LCJhdXRob3JpemVOdW1iZXIiOjAsInN0YXR1cyI6MX19LCJleHAiOjE3NDU4OTM0NjB9.-zK0EZjr3Q2wIykEgls8SFjgU9aQwmw3tKTQ0r1ZGIrivuy7bJdBCMRn29oPTwXkFmRJjpneYi3pLTZErXjCSA
body ：{}
状态码 ：304
data ：{"code":200,"data":false,"message":"操作成功"}
[2025-04-28T17:03:37.996] [INFO] log -
时间：2025-04-28 17:03:37
ip : ::1
host : localhost:3000
响应时间 : 0.284 s
method ：GET
url ：/checkUpdate?version=1.0.8
token ：eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzeXNVc2VyIjp7ImlkIjo0NiwiYWNjb3VudCI6IjEyMzQ1NiIsInBhc3N3b3JkIjoiZTEwYWRjMzk0OWJhNTlhYmJlNTZlMDU3ZjIwZjg4M2UiLCJzdXBwZXJNYXJrIjoxLCJmYWN0b3J5SWQiOjMzLCJmYWN0b3J5Q29kZSI6IlQzNCIsInN0YXR1cyI6MSwiZmFjdG9yeSI6eyJpZCI6MzMsImJpYW5tYSI6IlQzNCIsInRpdGxlIjoiVDM0NjYiLCJ0eXBlSWQiOjE2LCJuYW1lIjoiMTIzIiwibW9iaWxlIjoiMTIzNDU2IiwiZ29vZHNOdW1iZXIiOjg0LCJhdXRob3JpemVOdW1iZXIiOjAsInN0YXR1cyI6MX19LCJleHAiOjE3NDU4OTM0NjB9.-zK0EZjr3Q2wIykEgls8SFjgU9aQwmw3tKTQ0r1ZGIrivuy7bJdBCMRn29oPTwXkFmRJjpneYi3pLTZErXjCSA
body ：{}
状态码 ：304
data ：{"code":200,"data":false,"message":"操作成功"}
[2025-04-28T17:03:52.329] [INFO] log -
时间：2025-04-28 17:03:52
ip : ::1
host : localhost:3000
响应时间 : 0.167 s
method ：GET
url ：/checkUpdate?version=1.0.8
token ：eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzeXNVc2VyIjp7ImlkIjo0NiwiYWNjb3VudCI6IjEyMzQ1NiIsInBhc3N3b3JkIjoiZTEwYWRjMzk0OWJhNTlhYmJlNTZlMDU3ZjIwZjg4M2UiLCJzdXBwZXJNYXJrIjoxLCJmYWN0b3J5SWQiOjMzLCJmYWN0b3J5Q29kZSI6IlQzNCIsInN0YXR1cyI6MSwiZmFjdG9yeSI6eyJpZCI6MzMsImJpYW5tYSI6IlQzNCIsInRpdGxlIjoiVDM0NjYiLCJ0eXBlSWQiOjE2LCJuYW1lIjoiMTIzIiwibW9iaWxlIjoiMTIzNDU2IiwiZ29vZHNOdW1iZXIiOjg0LCJhdXRob3JpemVOdW1iZXIiOjAsInN0YXR1cyI6MX19LCJleHAiOjE3NDU4OTM0NjB9.-zK0EZjr3Q2wIykEgls8SFjgU9aQwmw3tKTQ0r1ZGIrivuy7bJdBCMRn29oPTwXkFmRJjpneYi3pLTZErXjCSA
body ：{}
状态码 ：304
data ：{"code":200,"data":false,"message":"操作成功"}
[2025-04-28T17:04:15.177] [INFO] log -
时间：2025-04-28 17:04:15
ip : ::1
host : localhost:3000
响应时间 : 0.166 s
method ：GET
url ：/checkUpdate?version=1.0.8
token ：eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzeXNVc2VyIjp7ImlkIjo0NiwiYWNjb3VudCI6IjEyMzQ1NiIsInBhc3N3b3JkIjoiZTEwYWRjMzk0OWJhNTlhYmJlNTZlMDU3ZjIwZjg4M2UiLCJzdXBwZXJNYXJrIjoxLCJmYWN0b3J5SWQiOjMzLCJmYWN0b3J5Q29kZSI6IlQzNCIsInN0YXR1cyI6MSwiZmFjdG9yeSI6eyJpZCI6MzMsImJpYW5tYSI6IlQzNCIsInRpdGxlIjoiVDM0NjYiLCJ0eXBlSWQiOjE2LCJuYW1lIjoiMTIzIiwibW9iaWxlIjoiMTIzNDU2IiwiZ29vZHNOdW1iZXIiOjg0LCJhdXRob3JpemVOdW1iZXIiOjAsInN0YXR1cyI6MX19LCJleHAiOjE3NDU4OTM0NjB9.-zK0EZjr3Q2wIykEgls8SFjgU9aQwmw3tKTQ0r1ZGIrivuy7bJdBCMRn29oPTwXkFmRJjpneYi3pLTZErXjCSA
body ：{}
状态码 ：304
data ：{"code":200,"data":false,"message":"操作成功"}
src/background.js
...@@ -36,22 +36,23 @@ async function createWindow() { ...@@ -36,22 +36,23 @@ async function createWindow() {
nodeIntegration: true, nodeIntegration: true,
}, },
}); });
let newWindow = new BrowserWindow({
fullscreen: false, // let newWindow = new BrowserWindow({
width: 1000, // fullscreen: false,
height: 1000, // width: 1000,
webPreferences: { // height: 1000,
nodeIntegration: true, // webPreferences: {
//配置预加载脚本文件(preload)，此处起名为preloadOther // nodeIntegration: true,
//p.s.路径为绝对路径 // //配置预加载脚本文件(preload)，此处起名为preloadOther
// preload: path.join(__dirname, "./preloadOther.js") // //p.s.路径为绝对路径
}, // // preload: path.join(__dirname, "./preloadOther.js")
}); // },
// });
console.log(winURL + "#" + `/design-detail`); console.log(winURL + "#" + `/design-detail`);
//指定副屏幕打开的网页 // //指定副屏幕打开的网页
await newWindow.loadURL(winURL + "#" + `/design-detail`); // await newWindow.loadURL(winURL + "#" + `/design-detail`);
newWindow.reload(); // newWindow.reload();
// win.on("closed", () => { // win.on("closed", () => {
// //这一段放外面的话，如果你电脑没双屏会报错。 // //这一段放外面的话，如果你电脑没双屏会报错。
// win = null; // win = null;
...@@ -90,11 +91,11 @@ async function createWindow() { ...@@ -90,11 +91,11 @@ async function createWindow() {
win.removeAllListeners(); win.removeAllListeners();
win = null; win = null;
} }
// 确保 newWindow 还未销毁，才执行关闭操作 // // 确保 newWindow 还未销毁，才执行关闭操作
if (newWindow && !newWindow.isDestroyed()) { // if (newWindow && !newWindow.isDestroyed()) {
newWindow.close(); // newWindow.close();
newWindow = null; // newWindow = null;
} // }
}); });
// 自动更新逻辑开始 // 自动更新逻辑开始
...@@ -166,6 +167,16 @@ async function createWindow() { ...@@ -166,6 +167,16 @@ async function createWindow() {
}); });
}); });
}); });
win.on("resize", () => {
const { width, height } = win.getBounds();
win.webContents.send("window-size", { width, height });
});
// 监听窗口的 reload 事件
win.webContents.on("did-finish-load", () => {
const { width, height } = win.getBounds();
win.webContents.send("window-size", { width, height });
});
} }
app.on("activate", async () => { app.on("activate", async () => {
...@@ -176,6 +187,9 @@ app.on("activate", async () => { ...@@ -176,6 +187,9 @@ app.on("activate", async () => {
app.on("ready", async () => { app.on("ready", async () => {
await createWindow(); await createWindow();
// 获取当前窗口的尺寸
const { width, height } = win.getBounds();
win.webContents.send("window-size", { width, height });
globalShortcut.register("F5", () => { globalShortcut.register("F5", () => {
return false; return false;
}); });
......
src/server/entity/function.js
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
data, data,
} = await axios.post( } = await axios.post(
`${env}/factory/podJomallOrder/downloadByProduction`, `${env}/factory/podJomallOrder/downloadByProduction`,
params, [req.body[0]],
{ headers: { "jwt-token": token } } { headers: { "jwt-token": token } }
); );
let files = []; let files = [];
...@@ -86,8 +86,8 @@ export default { ...@@ -86,8 +86,8 @@ export default {
files = files.map((el) => { files = files.map((el) => {
return { url: `${fileEnv}${el}` }; return { url: `${fileEnv}${el}` };
}); });
console.log(89, files); // res.json({ code: 200, data: "" });
// return;
if (req.body[1] === 1) { if (req.body[1] === 1) {
downloadImage(files) downloadImage(files)
.then((data) => { .then((data) => {
......
src/store/index.js
...@@ -13,7 +13,10 @@ export default new Vuex.Store({ ...@@ -13,7 +13,10 @@ export default new Vuex.Store({
state: { state: {
actionList: [], actionList: [],
imgList: [], imgList: [],
productDetail: {},
desktopDevice: 1, //1是兄弟，2是其他 desktopDevice: 1, //1是兄弟，2是其他
WHproportion: 1, //宽高比例
isPreView: false, //宽高比例
actionIndex: -1, actionIndex: -1,
systemSetting: { systemSetting: {
gridShow: 1, gridShow: 1,
...@@ -43,6 +46,15 @@ export default new Vuex.Store({ ...@@ -43,6 +46,15 @@ export default new Vuex.Store({
changeDesktopDevice(state, value) { changeDesktopDevice(state, value) {
state.desktopDevice = value; state.desktopDevice = value;
}, },
setProductDetail(state, value) {
state.productDetail = value;
},
setWHproportion(state, value) {
state.WHproportion = value;
},
setIsPreView(state, value) {
state.isPreView = value;
},
}, },
getters: { getters: {
systemSetting(state) { systemSetting(state) {
......
src/utils/axios.js
...@@ -6,7 +6,7 @@ import { Loading } from "element-ui"; ...@@ -6,7 +6,7 @@ import { Loading } from "element-ui";
const service = axios.create({ const service = axios.create({
baseURL: "http://localhost:3000", // url = base url + request url baseURL: "http://localhost:3000", // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests // withCredentials: true, // send cookies when cross-domain requests
timeout: 50000000 // request timeout timeout: 50000000, // request timeout
}); });
let loading; let loading;
...@@ -15,7 +15,7 @@ function startLoading() { ...@@ -15,7 +15,7 @@ function startLoading() {
lock: true, lock: true,
text: "拼命加载中...", text: "拼命加载中...",
spinner: "el-icon-loading", spinner: "el-icon-loading",
background: "rgba(0,0,0,.7)" background: "rgba(0,0,0,.7)",
}); });
} }
...@@ -25,7 +25,7 @@ function endLoading() { ...@@ -25,7 +25,7 @@ function endLoading() {
// Add a request interceptor // Add a request interceptor
service.interceptors.request.use( service.interceptors.request.use(
config => { (config) => {
console.log(Vue.prototype.$dataStore); console.log(Vue.prototype.$dataStore);
const user = Vue.prototype.$dataStore.get("user"); const user = Vue.prototype.$dataStore.get("user");
if (user) { if (user) {
...@@ -34,7 +34,7 @@ service.interceptors.request.use( ...@@ -34,7 +34,7 @@ service.interceptors.request.use(
startLoading(); startLoading();
return config; return config;
}, },
error => { (error) => {
endLoading(); endLoading();
// do something with request error // do something with request error
return Promise.reject(error); return Promise.reject(error);
...@@ -53,7 +53,7 @@ service.interceptors.response.use( ...@@ -53,7 +53,7 @@ service.interceptors.response.use(
* Here is just an example * Here is just an example
* You can also judge the status by HTTP Status Code * You can also judge the status by HTTP Status Code
*/ */
async response => { async (response) => {
// do something with response data // do something with response data
const res = response.data; const res = response.data;
endLoading(); endLoading();
...@@ -66,7 +66,7 @@ service.interceptors.response.use( ...@@ -66,7 +66,7 @@ service.interceptors.response.use(
Vue.prototype.$dataStore.delete("user"); Vue.prototype.$dataStore.delete("user");
Vue.prototype.$message.error({ Vue.prototype.$message.error({
showClose: true, showClose: true,
message: res.msg || res.message || "Error" message: res.msg || res.message || "Error",
}); });
setTimeout(() => { setTimeout(() => {
location.reload(); location.reload();
...@@ -81,7 +81,7 @@ service.interceptors.response.use( ...@@ -81,7 +81,7 @@ service.interceptors.response.use(
} }
Vue.prototype.$message.error({ Vue.prototype.$message.error({
showClose: true, showClose: true,
message: res.msg || res.message || "Error" message: res.msg || res.message || "Error",
}); });
// reject // reject
return Promise.reject(new Error(res.msg || res.message || "Error")); return Promise.reject(new Error(res.msg || res.message || "Error"));
...@@ -91,7 +91,7 @@ service.interceptors.response.use( ...@@ -91,7 +91,7 @@ service.interceptors.response.use(
} }
return Promise.resolve(res); return Promise.resolve(res);
}, },
error => { (error) => {
endLoading(); endLoading();
// do something with response error // do something with response error
return Promise.reject(error); return Promise.reject(error);
...@@ -99,3 +99,4 @@ service.interceptors.response.use( ...@@ -99,3 +99,4 @@ service.interceptors.response.use(
); );
export default service; export default service;
export { startLoading, endLoading };
src/views/design/data.js
...@@ -22,13 +22,15 @@ export const grid = [ ...@@ -22,13 +22,15 @@ export const grid = [
value: 1, value: 1,
row: 16, row: 16,
col: 18, col: 18,
h: 542, // h: 540,
w: 482 // w: 480,
} h: 0,
w: 0,
},
// { // {
// label: '16×21', // label: '16×21',#77797a
// value: 0, // value: 0,
// col: 16, // col: 16,
// row: 21 // row: 21
// } // }
]; ];
\ No newline at end of file
src/views/design/head/index.vue
...@@ -5,8 +5,10 @@ import { ipcRenderer } from "electron"; ...@@ -5,8 +5,10 @@ import { ipcRenderer } from "electron";
import { grid } from "../data"; import { grid } from "../data";
import pkg from "../../../../package.json"; import pkg from "../../../../package.json";
import UpdateDialog from "@/views/design/updateDialog.vue"; import UpdateDialog from "@/views/design/updateDialog.vue";
// import path from "path"; // 引入 path 模块 import path from "path"; // 引入 path 模块
import store from "@/store/index.js"; import store from "@/store/index.js";
const uuid = require("uuid");
const fs = require("fs");
export default { export default {
components: { PrintDialog, UpdateDialog }, components: { PrintDialog, UpdateDialog },
...@@ -23,6 +25,7 @@ export default { ...@@ -23,6 +25,7 @@ export default {
return { return {
checkList: [], checkList: [],
desktopDevice: 1, desktopDevice: 1,
checked: false,
cacheList: [ cacheList: [
{ {
label: "清除当前登录信息", label: "清除当前登录信息",
...@@ -216,6 +219,9 @@ export default { ...@@ -216,6 +219,9 @@ export default {
} }
); );
this.detail = findByPodProductionNo.data; this.detail = findByPodProductionNo.data;
console.log(219, this.detail);
this.$store.commit("setProductDetail", findByPodProductionNo.data);
ipcRenderer.send("win-subScreen", findByPodProductionNo.data); ipcRenderer.send("win-subScreen", findByPodProductionNo.data);
// 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示 // 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示
...@@ -223,7 +229,6 @@ export default { ...@@ -223,7 +229,6 @@ export default {
this.detail.id, this.detail.id,
this.$store.state.desktopDevice, this.$store.state.desktopDevice,
]); ]);
console.log("res111", res);
this.imgList = []; this.imgList = [];
res.data.forEach((el) => { res.data.forEach((el) => {
this.imgList = this.imgList.concat(el.list || []); this.imgList = this.imgList.concat(el.list || []);
...@@ -240,9 +245,13 @@ export default { ...@@ -240,9 +245,13 @@ export default {
}); });
} }
}); });
console.log(arr, "arr");
res.data = arr.filter((el) => el.type !== 1); res.data = arr.filter((el) => el.type !== 1);
let newImgList;
if (this.checked) {
newImgList = await this.cutImgFn(res.data);
} else {
newImgList = res.data;
}
// 延迟后强制激活窗口 // 延迟后强制激活窗口
if (this.desktopDevice !== 1) { if (this.desktopDevice !== 1) {
if (this.imgList.length) { if (this.imgList.length) {
...@@ -261,7 +270,7 @@ export default { ...@@ -261,7 +270,7 @@ export default {
console.log(260, res.data); console.log(260, res.data);
let obj = { let obj = {
type: "sendFile", type: "sendFile",
value: res.data, value: newImgList,
} }
if(this.detail.mssWidth && this.detail.mssHeight){ if(this.detail.mssWidth && this.detail.mssHeight){
obj.size = { width: this.detail.mssWidth, height: this.detail.mssHeight } obj.size = { width: this.detail.mssWidth, height: this.detail.mssHeight }
...@@ -356,6 +365,48 @@ export default { ...@@ -356,6 +365,48 @@ export default {
this.$store.commit("changeImgList", []); this.$store.commit("changeImgList", []);
console.log(347, store.state.desktopDevice); console.log(347, store.state.desktopDevice);
}, },
async cutImgFn(arr) {
if (!arr.length) return;
try {
const processQueue = await Promise.all(
arr.map(async (el) => {
try {
const outputDir = path.dirname(el.productionFile);
const outputFileName = `${uuid.v4()}.png`;
const outputPath = path.join(outputDir, outputFileName);
const params = {
inputPath: el.productionFile,
outputPath: outputPath,
};
const res = await this.$api.post("/processImage", params);
fs.unlinkSync(el.productionFile);
return {
fileName: outputFileName,
productionFile: res.msg[0]?.outputPath,
designId: el.designId,
};
} catch (error) {
console.error(`处理失败: ${el.productionFile}`, error);
}
})
);
// 等待所有异步操作完成
await new Promise((resolve) => setTimeout(resolve, 100));
const newMap = new Map(processQueue.map((el) => [el.designId, el]));
processQueue.forEach((el) => {
if (newMap.has(el.designId)) {
el.fileName = newMap.get(el.designId).fileName;
el.productionFile = newMap.get(el.designId).productionFile;
}
});
console.log("processQueue", processQueue);
return processQueue;
} catch (error) {
console.error("错误", error);
return [];
}
},
}, },
}; };
</script> </script>
...@@ -596,6 +647,9 @@ export default { ...@@ -596,6 +647,9 @@ export default {
<el-checkbox v-model="isAutoFinish">自动完成上一单</el-checkbox> <el-checkbox v-model="isAutoFinish">自动完成上一单</el-checkbox>
</div> </div>
</div> </div>
<div style="margin-left: 10px;">
<el-checkbox v-model="checked">自动裁切素材</el-checkbox>
</div>
<el-button <el-button
@click="downloadImage" @click="downloadImage"
size="medium" size="medium"
......
src/views/design/head/printDialog.vue
...@@ -6,6 +6,7 @@ import html2canvas from "html2canvas"; ...@@ -6,6 +6,7 @@ import html2canvas from "html2canvas";
import moment from "moment"; import moment from "moment";
import pkg from "../../../../package.json"; import pkg from "../../../../package.json";
import { pxToUnit } from "../../../utils/index"; import { pxToUnit } from "../../../utils/index";
import { mapState } from "vuex";
export default { export default {
data() { data() {
...@@ -123,6 +124,7 @@ export default { ...@@ -123,6 +124,7 @@ export default {
return "1.5"; return "1.5";
} }
}, },
...mapState(["WHproportion"]),
}, },
watch: { watch: {
printSetting: { printSetting: {
...@@ -300,11 +302,11 @@ export default { ...@@ -300,11 +302,11 @@ export default {
const relativeY = imageRect.top - lineRect.top; const relativeY = imageRect.top - lineRect.top;
console.log(dom_id); console.log(dom_id);
// 获取图片的宽高 // 获取图片的宽高
let w = image.clientWidth; // 图片宽 let w = image.clientWidth / this.WHproportion; // 图片宽
let h = image.clientHeight; // 图片高 let h = image.clientHeight / this.WHproportion; // 图片高
console.log(w, h, "w,h"); console.log(w, h, "w,h");
const x = relativeX; const x = relativeX / this.WHproportion;
const y = relativeY; const y = relativeY / this.WHproportion;
const r = this.imgList[0].r; const r = this.imgList[0].r;
console.log(w, h); console.log(w, h);
const x_mm = this.pxToUnit(x, "mm"); const x_mm = this.pxToUnit(x, "mm");
...@@ -370,12 +372,13 @@ export default { ...@@ -370,12 +372,13 @@ export default {
y = this.numberToStr4(y); y = this.numberToStr4(y);
w = this.numberToStr4(w); w = this.numberToStr4(w);
h = this.numberToStr4(h); h = this.numberToStr4(h);
console.log("print", x, y, w, h); console.log("print", w, h);
// console.log(x, "x"); if (w > 4200 || h > 4700) {
// console.log(y, "y"); return this.$message.warning(
// console.log(w, "w"); "打印图片素材宽度不能超过410mm,长度不能超过450mm"
// console.log(h, "h"); );
}
r = Number(r).toFixed(0); r = Number(r).toFixed(0);
const imgFileName = this.imgList[0].fileName; const imgFileName = this.imgList[0].fileName;
let position = ""; // 位置 let position = ""; // 位置
......
src/views/design/main/imgSetting.vue
<script> <script>
import { pxToUnit, unitToPx } from "@/utils"; import { pxToUnit, unitToPx } from "@/utils";
import { mapState } from "vuex";
export default { export default {
data() { data() {
...@@ -16,27 +17,29 @@ export default { ...@@ -16,27 +17,29 @@ export default {
y: 0, y: 0,
w: 0, w: 0,
h: 0, h: 0,
r: 0 r: 0,
} },
}; };
}, },
computed: {
...mapState(["isPreView"]),
},
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
item: { item: {
type: Object, type: Object,
default: () => {} default: () => {},
} },
}, },
watch: { watch: {
visible: { visible: {
handler() { handler() {
this.drawerShow = this.visible; this.drawerShow = this.visible;
}, },
immediate: true immediate: true,
}, },
item: { item: {
handler() { handler() {
...@@ -71,8 +74,8 @@ export default { ...@@ -71,8 +74,8 @@ export default {
} }
}, },
immediate: true, immediate: true,
deep: true deep: true,
} },
}, },
methods: { methods: {
pxToUnit, pxToUnit,
...@@ -80,13 +83,12 @@ export default { ...@@ -80,13 +83,12 @@ export default {
formChange(t) { formChange(t) {
if (t && t === "w") { if (t && t === "w") {
this.form.h = this.form.w * this.form.rate; this.form.h = this.form.w * this.form.rate;
} }
if (t && t === "h") { if (t && t === "h") {
this.form.w = this.form.h * this.form.rate; this.form.w = this.form.h * this.form.rate;
} }
this.form.h = this.form.h? Math.abs(this.form.h):this.form.h this.form.h = this.form.h ? Math.abs(this.form.h) : this.form.h;
this.form.w = this.form.w? Math.abs(this.form.w):this.form.w this.form.w = this.form.w ? Math.abs(this.form.w) : this.form.w;
let f = JSON.parse(JSON.stringify(this.form)); let f = JSON.parse(JSON.stringify(this.form));
f.y = Number(f.y) + Number(f.h) / 2; f.y = Number(f.y) + Number(f.h) / 2;
f.x = Number(f.x) + Number(f.w) / 2; f.x = Number(f.x) + Number(f.w) / 2;
...@@ -103,6 +105,9 @@ export default { ...@@ -103,6 +105,9 @@ export default {
this.$dataStore.set("position_unit", JSON.parse(JSON.stringify(f))); this.$dataStore.set("position_unit", JSON.parse(JSON.stringify(f)));
}, },
addValue(f) { addValue(f) {
if (!(this.item != null && !this.isPreView)) {
return;
}
if (!this.form[f]) this.$set(this.form, f, 0); if (!this.form[f]) this.$set(this.form, f, 0);
let nw = Number(this.form[f]) + 1; let nw = Number(this.form[f]) + 1;
this.$set(this.form, f, nw); this.$set(this.form, f, nw);
...@@ -115,6 +120,12 @@ export default { ...@@ -115,6 +120,12 @@ export default {
this.formChange(); this.formChange();
}, },
reduceValue(f) { reduceValue(f) {
console.log(this.item);
console.log(this.isPreView);
if (!(this.item != null && !this.isPreView)) {
return;
}
if (!this.form[f]) this.$set(this.form, f, 0); if (!this.form[f]) this.$set(this.form, f, 0);
let nw = Number(this.form[f]) - 1; let nw = Number(this.form[f]) - 1;
this.$set(this.form, f, nw); this.$set(this.form, f, nw);
...@@ -124,154 +135,165 @@ export default { ...@@ -124,154 +135,165 @@ export default {
if (f && f === "h") { if (f && f === "h") {
this.form.w = this.form.h * this.form.rate; this.form.w = this.form.h * this.form.rate;
} }
if (f && f === "zIndex") {
if (this.form[f] < 0) this.$set(this.form, f, 0);
}
this.formChange(); this.formChange();
} },
} },
}; };
</script> </script>
<template> <template>
<div class="drawer" :style="{ animation: `ltr-drawer-in .3s 1ms` }"> <el-scrollbar class="scrollbarDrawer">
<div class="title"> <div class="drawer">
图片编辑 <div class="img-form">
</div> <div class="title">
<div class="img-form"> 图片编辑（单位：{{ $dataStore.get("setting").unit }}）
<el-form </div>
size="small" <el-form
:disabled="!item" size="small"
style="" :disabled="!(item && !isPreView)"
:model="form" style=""
label-position="left" :model="form"
label-width="30px" label-position="left"
> label-width="30px"
<el-row :gutter="20"> >
<el-col :span="12"> <el-row :gutter="10">
<el-form-item label="x：" prop="x"> <el-col :span="8">
<div class="form-content"> <el-form-item label="x：" prop="x">
<el-input @blur="formChange" v-model="form.x"></el-input> <div class="form-content">
<div class="set-value"> <el-input @blur="formChange" v-model="form.x"></el-input>
<i @click="addValue('x')" class="el-icon-arrow-up"></i> <div class="set-value">
<i @click="reduceValue('x')" class="el-icon-arrow-down"></i> <i @click="addValue('x')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('x')" class="el-icon-arrow-down"></i>
</div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="8">
<el-col :span="12"> <el-form-item label="y：">
<el-form-item label="y："> <div class="form-content">
<div class="form-content"> <el-input @blur="formChange" v-model="form.y"></el-input>
<el-input @blur="formChange" v-model="form.y"></el-input> <div class="set-value">
<div class="set-value"> <i @click="addValue('y')" class="el-icon-arrow-up"></i>
<i @click="addValue('y')" class="el-icon-arrow-up"></i> <i @click="reduceValue('y')" class="el-icon-arrow-down"></i>
<i @click="reduceValue('y')" class="el-icon-arrow-down"></i> </div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="8">
<el-col :span="12"> <el-form-item label="r：">
<el-form-item label="w："> <div class="form-content">
<div class="form-content"> <el-input maxlength="3" @blur="formChange" v-model="form.r">
<el-input @blur="formChange('w')" v-model="form.w"></el-input> </el-input>
<div class="set-value"> <div class="set-value">
<i @click="addValue('w')" class="el-icon-arrow-up"></i> <i @click="addValue('r')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('w')" class="el-icon-arrow-down"></i> <i @click="reduceValue('r')" class="el-icon-arrow-down"></i>
</div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="8">
<el-col :span="12"> <el-form-item label="w：">
<el-form-item label="h："> <div class="form-content">
<div class="form-content"> <el-input @blur="formChange('w')" v-model="form.w"></el-input>
<el-input @blur="formChange('h')" v-model="form.h"></el-input> <div class="set-value">
<div class="set-value"> <i @click="addValue('w')" class="el-icon-arrow-up"></i>
<i @click="addValue('h')" class="el-icon-arrow-up"></i> <i @click="reduceValue('w')" class="el-icon-arrow-down"></i>
<i @click="reduceValue('h')" class="el-icon-arrow-down"></i> </div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="8">
<el-col :span="12"> <el-form-item label="h：">
<el-form-item label="r："> <div class="form-content">
<div class="form-content"> <el-input @blur="formChange('h')" v-model="form.h"></el-input>
<el-input maxlength="3" @blur="formChange" v-model="form.r"> <div class="set-value">
</el-input> <i @click="addValue('h')" class="el-icon-arrow-up"></i>
<div class="set-value"> <i @click="reduceValue('h')" class="el-icon-arrow-down"></i>
<i @click="addValue('r')" class="el-icon-arrow-up"></i> </div>
<i @click="reduceValue('r')" class="el-icon-arrow-down"></i>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="z："> <el-form-item label="z：">
<div class="form-content"> <div class="form-content">
<el-input @blur="formChange" v-model="form.zIndex"> </el-input> <el-input @blur="formChange" v-model="form.zIndex">
<div class="set-value"> </el-input>
<i @click="addValue('zIndex')" class="el-icon-arrow-up"></i> <div class="set-value">
<i <i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
@click="reduceValue('zIndex')" <i
class="el-icon-arrow-down" @click="reduceValue('zIndex')"
></i> class="el-icon-arrow-down"
></i>
</div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col
<el-col :span="24"> :span="24"
<el-tooltip content="居中"> style="display: flex;justify-content: space-between;padding:0 30px;"
<el-button @click="$emit('ev', 'center')" size="mini"> >
<img <el-tooltip content="居中">
style="width: 13px;height: 13px" <el-button @click="$emit('ev', 'center')" class="btn">
src="@/static/icon/juzhong-01.png" <img
alt="" style="width: 13px;height: 13px"
/> src="@/static/icon/juzhong-01.png"
</el-button> alt=""
</el-tooltip> />
<el-tooltip content="垂直居中"> </el-button>
<el-button @click="$emit('ev', 'y_center')" size="mini"> </el-tooltip>
<img <el-tooltip content="垂直居中">
style="width: 13px;height: 13px" <el-button @click="$emit('ev', 'y_center')" class="btn">
src="@/static/icon/vertical.png" <img
alt="" style="width: 13px;height: 13px"
/> src="@/static/icon/vertical.png"
</el-button> alt=""
</el-tooltip> />
<el-tooltip content="水平居中"> </el-button>
<el-button @click="$emit('ev', 'x_center')" size="mini"> </el-tooltip>
<img <el-tooltip content="水平居中">
style="width: 13px;height: 13px" <el-button @click="$emit('ev', 'x_center')" class="btn">
src="@/static/icon/shuipingjuzhong.png" <img
alt="" style="width: 13px;height: 13px"
/> src="@/static/icon/shuipingjuzhong.png"
</el-button> alt=""
</el-tooltip> />
<el-tooltip content="上移一层"> </el-button>
<el-button @click="$emit('ev', 'add_index')" size="mini"> </el-tooltip>
<img <el-tooltip content="上移一层">
style="width: 13px;height: 13px" <el-button @click="$emit('ev', 'add_index')" class="btn">
src="@/static/icon/shangyi.png" <img
alt="" style="width: 13px;height: 13px"
/> src="@/static/icon/shangyi.png"
</el-button> alt=""
</el-tooltip> />
<el-tooltip content="下移一层"> </el-button>
<el-button @click="$emit('ev', 'reduce_index')" size="mini"> </el-tooltip>
<img <el-tooltip content="下移一层">
style="width: 13px;height: 13px" <el-button @click="$emit('ev', 'reduce_index')" class="btn">
src="@/static/icon/xiayi.png" <img
alt="" style="width: 13px;height: 13px"
/> src="@/static/icon/xiayi.png"
</el-button> alt=""
</el-tooltip> />
</el-col> </el-button>
</el-row> </el-tooltip>
</el-form> </el-col>
</el-row>
</el-form>
</div>
<slot name="content"></slot>
</div> </div>
<slot></slot> </el-scrollbar>
</div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.img-form { .img-form {
padding: 10px; padding: 10px;
border: 1px solid #ececec;
} }
::v-deep { ::v-deep {
...@@ -289,7 +311,7 @@ export default { ...@@ -289,7 +311,7 @@ export default {
.set-value { .set-value {
height: 100%; height: 100%;
margin-left: 6px; // margin-left: 6px;
i { i {
width: 20px; width: 20px;
...@@ -307,24 +329,41 @@ export default { ...@@ -307,24 +329,41 @@ export default {
} }
.drawer { .drawer {
width: 300px; width: 438px;
bottom: 0; // bottom: 0;
top: 50px; // top: 50px;
padding: 10px; padding: 10px;
z-index: 99; // z-index: 99;
background: white; background: white;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), // box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12); // 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
left: 0; // left: 0;
position: fixed; // position: fixed;
border-right: 1px solid #ececec; border-right: 1px solid #ececec;
height: calc(100vh - 50px); // height: calc(100vh - 50px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
//animation: ltr-drawer-in .3s 1ms; //animation: ltr-drawer-in .3s 1ms;
position: relative;
z-index: 1;
.title { .title {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #ececec; font-weight: 700;
font-size: 20px;
margin-bottom: 8px;
// border-bottom: 1px solid #ececec;
}
}
.btn {
height: 40px;
width: 60px;
border-color: #c0c4cc;
}
::v-deep.el-scrollbar {
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
.el-scrollbar__wrap {
overflow-x: hidden;
} }
} }
......
src/views/design/main/index.vue
<script> <script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate"; import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
const { ipcRenderer } = require("electron");
import { grid } from "../data"; import { grid } from "../data";
import ImgSetting from "./imgSetting.vue"; import ImgSetting from "./imgSetting.vue";
import bus from "@/bus"; import bus from "@/bus";
import PrintDialog from "@/views/design/head/printDialog.vue"; import PrintDialog from "@/views/design/head/printDialog.vue";
import { mmToPx } from "@/utils"; import { mmToPx } from "@/utils";
import { raw } from "express"; // import { raw } from "express";
const path = require("path"); const path = require("path");
const fs = require("fs"); const fs = require("fs");
const uuid = require("uuid"); const uuid = require("uuid");
import { startLoading, endLoading } from "@/utils/axios.js";
import { mapState } from "vuex"; import { mapState } from "vuex";
const img = require("../../../assets/bg_tshirt_shadow.png"); const img = require("../../../assets/bg_tshirt_shadow.png");
export default { export default {
components: { components: {
PrintDialog, PrintDialog,
...@@ -23,7 +27,24 @@ export default { ...@@ -23,7 +27,24 @@ export default {
document.removeEventListener("dragover", this.dragover); document.removeEventListener("dragover", this.dragover);
document.removeEventListener("drop", this.drop); document.removeEventListener("drop", this.drop);
}, },
created() {
ipcRenderer.on("window-size", (event, size) => {
const { width, height } = size;
console.log(`接收到窗口尺寸：${width}x${height}`);
let proportion;
if (height > 1000) {
proportion = 1.7;
} else if (height > 900 && height <= 1000) {
proportion = 1.5;
this.PreViewGrid.h;
} else {
proportion = 1;
}
this.$store.commit("setWHproportion", proportion);
this.grid[0].h = 540 * proportion;
this.grid[0].w = 480 * proportion;
});
},
computed: { computed: {
gridWH() { gridWH() {
if ( if (
...@@ -39,24 +60,47 @@ export default { ...@@ -39,24 +60,47 @@ export default {
}; };
}, },
gridSpacing() { gridSpacing() {
const { unit, gridSpacing } = this.systemSetting;
if (!this.systemSetting || !Object.keys(this.systemSetting).length) if (!this.systemSetting || !Object.keys(this.systemSetting).length)
return { w: 0, h: 0 }; return { w: 0, h: 0 };
if (this.systemSetting.unit === "mm") { if (unit === "mm") {
return { return {
w: this.systemSetting.gridSpacing + "px", w: gridSpacing + "px",
h: this.systemSetting.gridSpacing + "px", h: gridSpacing + "px",
}; };
} else if (this.systemSetting.unit === "inch") { } else if (unit === "inch") {
console.log(this.systemSetting.gridValue);
let w = this.grid[this.systemSetting.gridValue].w; let w = this.grid[this.systemSetting.gridValue].w;
let row = this.grid[this.systemSetting.gridValue].row; let row = this.grid[this.systemSetting.gridValue].row;
let col = this.grid[this.systemSetting.gridValue].col; let col = this.grid[this.systemSetting.gridValue].col;
let h = this.grid[this.systemSetting.gridValue].h; let h = this.grid[this.systemSetting.gridValue].h;
return { return {
w: this.systemSetting.gridSpacing * ((w - row + 1) / row) + "px", // w: gridSpacing * ((w - row + 1) / row) + "px",
h: this.systemSetting.gridSpacing * (h / col) + "px", w: gridSpacing * (w / row) + "px",
h: gridSpacing * (h / col) + "px",
}; };
} }
return { w: "480px", h: "540px" };
},
viewGridSpacing() {
const { unit, gridSpacing } = this.systemSetting;
if (!this.systemSetting || !Object.keys(this.systemSetting).length)
return { w: 0, h: 0 };
if (unit === "mm") {
return {
w: gridSpacing + "px",
h: gridSpacing + "px",
};
} else if (unit === "inch") {
let w = 480;
let row = 16;
let col = 18;
let h = 540;
return {
w: gridSpacing * (w / row) + "px",
h: gridSpacing * (h / col) + "px",
};
}
return { w: "480px", h: "540px" };
}, },
computedGridSize() { computedGridSize() {
const getter = this.systemSetting; const getter = this.systemSetting;
...@@ -80,7 +124,7 @@ export default { ...@@ -80,7 +124,7 @@ export default {
return null; return null;
}, },
...mapState(["desktopDevice"]), ...mapState(["desktopDevice", "productDetail", "WHproportion"]),
}, },
data() { data() {
return { return {
...@@ -89,11 +133,32 @@ export default { ...@@ -89,11 +133,32 @@ export default {
oldImgList: [], oldImgList: [],
hasSize:false, hasSize:false,
parentWidth: 0, parentWidth: 0,
backColor: "#77797a",
systemSetting: {}, systemSetting: {},
detail: {},
imgHeight: 0, imgHeight: 0,
selectImgList: [], selectImgList: [
// {
// url: "file:///D:work/electron-printer/print/Input/1.png",
// productionFile: "file:///D:work/electron-printer/print/Input/1.png",
// designId: "1",
// },
// {
// url: "file:///D:work/electron-printer/print/Input/2.png",
// productionFile: "file:///D:work/electron-printer/print/Input/2.png",
// designId: "2",
// },
],
bus: 0, bus: 0,
grid, grid,
PreViewGrid: {
label: "16×18",
value: 1,
row: 16,
col: 18,
h: 540,
w: 480,
},
showImgSetting: true, showImgSetting: true,
printDialogShow: true, printDialogShow: true,
parentHeight: 0, parentHeight: 0,
...@@ -103,7 +168,9 @@ export default { ...@@ -103,7 +168,9 @@ export default {
x: 0, x: 0,
y: 0, y: 0,
imgList: [], imgList: [],
viewImgList: [],
selectImgIndexList: [], selectImgIndexList: [],
isView: false,
imgHistoryList: [[]], imgHistoryList: [[]],
imgHistoryIndex: 0, imgHistoryIndex: 0,
row: 8, row: 8,
...@@ -113,10 +180,14 @@ export default { ...@@ -113,10 +180,14 @@ export default {
}, },
watch: { watch: {
imgList: { imgList: {
handler() { handler(newValue) {
console.log(169, newValue);
if (this.imgList.length > 0) { if (this.imgList.length > 0) {
this.$nextTick(() => { this.$nextTick(() => {
let dom = document.getElementsByClassName("drr"); let dom = document.getElementsByClassName("drr");
console.log("dom", dom);
this.imgList.forEach((el, i) => { this.imgList.forEach((el, i) => {
let dom_i = document.getElementsByClassName("drr")[i]; let dom_i = document.getElementsByClassName("drr")[i];
dom_i.style.zIndex = dom_i.style.zIndex =
...@@ -152,6 +223,25 @@ export default { ...@@ -152,6 +223,25 @@ export default {
this.selectImgIndex = 0; this.selectImgIndex = 0;
} }
}, },
productDetail(newValue) {
this.detail = { ...newValue };
if (typeof this.detail.imageAry == "string") {
this.detail.imageAry = JSON.parse(this.detail.imageAry).map((el) => {
if (!el.title) el.title = 1;
return el;
});
const otherArr = this.detail.imageAry.filter((el) => el.title == 1);
this.detail.AimageAry = [
...this.detail.imageAry.filter((el) => el.title === "正"),
...otherArr,
];
this.detail.BimageAry = [
...this.detail.imageAry.filter((el) => el.title === "反"),
...otherArr,
];
}
console.log("detail", this.detail);
},
}, },
methods: { methods: {
changePrintDialogShow() { changePrintDialogShow() {
...@@ -264,7 +354,6 @@ export default { ...@@ -264,7 +354,6 @@ export default {
this.$set(this.imgList[index], "w", item.w); this.$set(this.imgList[index], "w", item.w);
this.$set(this.imgList[index], "h", item.h); this.$set(this.imgList[index], "h", item.h);
} }
console.log();
}, },
getOneMmsPx() { getOneMmsPx() {
// 创建一个1mm宽的元素插入到页面，然后坐等出结果 // 创建一个1mm宽的元素插入到页面，然后坐等出结果
...@@ -500,7 +589,7 @@ export default { ...@@ -500,7 +589,7 @@ export default {
h: bw * (2 / 3) * rate, h: bw * (2 / 3) * rate,
r: 0, r: 0,
}); });
console.log(that.imgList); console.log(570, that.imgList);
that.selectIndex = that.imgList.length - 1; that.selectIndex = that.imgList.length - 1;
that.showImgSetting = true; that.showImgSetting = true;
callback && callback(file); callback && callback(file);
...@@ -508,15 +597,15 @@ export default { ...@@ -508,15 +597,15 @@ export default {
}); });
}, },
listenUpload() { listenUpload() {
let that = this; // let that = this;
document.getElementById("img").onmousedown = function(e) { // document.getElementById("img").onmousedown = function(e) {
e.preventDefault(); // e.preventDefault();
}; // };
that.parentWidth = document.getElementById("img").clientWidth; // that.parentWidth = document.getElementById("img").clientWidth;
that.parentHeight = document.getElementById("img").clientHeight; // that.parentHeight = document.getElementById("img").clientHeight;
let dp = document.getElementsByClassName("container")[0]; // let dp = document.getElementsByClassName("container")[0];
dp.addEventListener("dragover", this.dragover); // dp.addEventListener("dragover", this.dragover);
dp.addEventListener("drop", this.drop); // dp.addEventListener("drop", this.drop);
}, },
getImageSize(url) { getImageSize(url) {
return new Promise(function(resolve, reject) { return new Promise(function(resolve, reject) {
...@@ -592,6 +681,7 @@ export default { ...@@ -592,6 +681,7 @@ export default {
}, },
async cutImgFn() { async cutImgFn() {
if (!this.checkList?.length) return;
try { try {
const processQueue = await Promise.all( const processQueue = await Promise.all(
this.checkList.map(async (el) => { this.checkList.map(async (el) => {
...@@ -644,10 +734,31 @@ export default { ...@@ -644,10 +734,31 @@ export default {
console.error("错误", error); console.error("错误", error);
} }
}, },
startLoading,
endLoading,
handleClick(event) {
// 获取点击的元素
let currentElement = event.target;
// 确保点击的元素在包含 container 类名的元素内
if (currentElement.closest(".container")) {
// 如果点击的元素不是 boxShaow，执行方法
if (!currentElement.closest(".boxShaow") && !this.isView) {
this.isView = true;
console.log(723, this.isView);
}
}
if (currentElement.closest(".scrollbarDrawer")) {
this.isView = false;
}
this.$store.commit("setIsPreView", this.isView);
},
}, },
mounted() { mounted() {
this.imgHeight = window.screen.height + "px"; this.imgHeight = window.screen.height + "px";
this.systemSetting = this.$dataStore.get("setting"); this.systemSetting = this.$dataStore.get("setting");
bus.$on("busEmit", (v) => { bus.$on("busEmit", (v) => {
let { type, value, size } = v; let { type, value, size } = v;
switch (type) { switch (type) {
...@@ -664,7 +775,6 @@ export default { ...@@ -664,7 +775,6 @@ export default {
}); });
break; break;
case "updateSystemSetting": case "updateSystemSetting":
console.log(this.$dataStore);
this.systemSetting = this.$dataStore.get("setting"); this.systemSetting = this.$dataStore.get("setting");
break; break;
case "uploadImage": case "uploadImage":
...@@ -681,7 +791,6 @@ export default { ...@@ -681,7 +791,6 @@ export default {
this.imgList = []; this.imgList = [];
this.selectIndex = -1; this.selectIndex = -1;
if (value.length > 0) { if (value.length > 0) {
console.log(111, value);
this.selectImgList = value; this.selectImgList = value;
this.selectImgIndex = 0; this.selectImgIndex = 0;
this.getBackFile({ files: [value[0]], size }, (file) => { this.getBackFile({ files: [value[0]], size }, (file) => {
...@@ -701,152 +810,447 @@ export default { ...@@ -701,152 +810,447 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.listenUpload(); this.listenUpload();
}); });
document.addEventListener("click", this.handleClick);
},
beforeDestroy() {
// 销毁组件时移除事件监听器
document.removeEventListener("click", this.handleClick);
}, },
}; };
</script> </script>
<template> <template>
<div class="page-main"> <div class="page-main">
<div @click="outsideClick" class="main-bg"> <img-setting
<div class="container"> @ev="ev"
<div :style="{ height: imgHeight }" id="img"> @change="formChange"
<div id="line"> :item="returnItem"
<div @close="close"
class="sucaitu" >
:style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }" <template #content>
> <div class="information-content">
<vue-drag-resize-rotate <div
:w="item.w" style="display: flex;justify-content: space-between;flex-wrap: nowrap;"
class-name="my-drag-resize-rotate" >
:prevent-deactivation="false" <div class="title" style="flex: 1;">
:h="item.h" 素材信息
:x="item.x" </div>
:z="item.zIndex" <div>
:aspectRatio="true" <el-button
:isActive="index === selectIndex" type="primary"
:y="item.y" size="small"
v-for="(item, index) in imgList" style="margin: 10px;"
:key="index" @click="cutImgFn"
:draggable="true" >裁切</el-button
:resizable="true"
:rotatable="true"
@dragstop="(a) => dragStop(a, item)"
@resizestop="(a) => resizeStop(a, item)"
@rotatestop="(a) => rotating(a, item)"
:angle="item.r"
> >
</div>
</div>
<el-row class="main">
<el-col :span="6">
<div class="text-center">打印区域</div>
</el-col>
<el-col :span="9" class="effectPic border-col">
<div class="pic-title">效果图</div>
</el-col>
<el-col :span="9">
<div class="pic-title">素材图</div>
</el-col>
<el-row class="border-row">
<el-col :span="6" class="text-center"><div>A面</div></el-col>
<el-col :span="9" class="border-col text-center">
<el-carousel
v-if="detail.AimageAry?.length"
height="170px"
:autoplay="false"
indicator-position="none"
style="width: 100%;"
>
<el-carousel-item
v-for="(item, index) in detail.AimageAry"
:key="index"
>
<img class="full-width" :src="item.url" alt="" />
</el-carousel-item>
</el-carousel>
<div v-else>&nbsp;</div>
</el-col>
<el-col
:span="9"
style="overflow: hidden;align-items: stretch;flex-grow: 1"
>
<el-checkbox-group
v-if="selectImgList.length"
v-model="checkList"
>
<el-checkbox
:label="selectImgList[0]"
:class="{
imgchecked: checkList.includes(selectImgList[0]),
}"
>
<div
class="img-item"
@click.stop.prevent="selectImg(selectImgList[0], 0)"
>
<img
style="width: 140px"
:src="selectImgList[0].productionFile"
/>
<span>{{ selectImgList[0].designId }}</span>
</div>
</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
<el-row class="border-row">
<el-col :span="6" class="text-center"><div>B面</div></el-col>
<el-col :span="9" class="border-col text-center">
<el-carousel
v-if="detail.BimageAry?.length"
height="170px"
:autoplay="false"
indicator-position="none"
style="width: 100%;"
>
<el-carousel-item
v-for="(item, index) in detail.BimageAry"
:key="index"
>
<img class="full-width" :src="item.url" alt="" />
</el-carousel-item>
</el-carousel>
<div v-else>&nbsp;</div>
</el-col>
<el-col :span="9" style="overflow: hidden;">
<el-checkbox-group
v-if="selectImgList.length > 1"
v-model="checkList"
>
<el-checkbox
:label="selectImgList[1]"
:class="{
imgchecked: checkList.includes(selectImgList[1]),
}"
>
<div
class="img-item"
@click.stop.prevent="selectImg(selectImgList[1], 1)"
>
<img
style="width: 140px"
:src="selectImgList[1].productionFile"
/>
<span>{{ selectImgList[1].designId }}</span>
</div>
</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
</el-row>
</div>
<div class="product-information">
<div class="title">
生产单信息
</div>
<div class="div-content">
<div :title="detail.podProductionNo" class="div-item">
<div class="item-label">生产单号：</div>
<div class="item-value">
{{ detail.factorySubOrderNumber }}
<div <div
ref="sucaitu-img" style="margin-left: 5px"
:class="{ active: index === selectIndex }" v-if="detail.podProductionNo"
:style="{ zIndex: item.zIndex }" :style="{
class="sucaitu-img img element" color: detail.customizedQuantity > 1 ? 'red' : '#67C23A',
}"
> >
<img {{ detail.customizedQuantity > 1 ? "多" : "单" }}
crossOrigin="anonymous"
:src="item.url"
:id="item.fileName + '_' + index"
alt=""
style="width: 100%;height: 100%"
class="sucaitu-img"
/>
<i
@click="delImg(index)"
v-if="index === selectIndex"
class=" close el-icon-close"
></i>
<div
v-if="index === selectIndex"
class="control-point control-rotator"
></div>
</div> </div>
</vue-drag-resize-rotate> </div>
</div>
<div :title="detail.factorySubOrderNumber" class="div-item">
<div class="item-label">工厂单号：</div>
<div class="item-value">{{ detail.factorySubOrderNumber }}</div>
</div>
<div :title="detail.processName" class="div-item">
<div class="item-label">生产工艺：</div>
<div class="item-value">{{ detail.processName }}</div>
</div>
<div :title="detail.baseSku" class="div-item">
<div class="item-label">基版：</div>
<div class="item-value">{{ detail.baseSku }}</div>
</div>
<div :title="detail.size" class="div-item">
<div class="item-label">尺寸：</div>
<div class="item-value">{{ detail.size }}</div>
</div>
<div :title="detail.variantSku" class="div-item">
<div class="item-label">变体SKU：</div>
<div class="item-value">{{ detail.variantSku }}</div>
</div> </div>
<div :title="detail.num" class="div-item">
<div class="item-label">数量：</div>
<div class="item-value">{{ detail.num }}</div>
</div>
<div :title="detail.supplierItemNo" class="div-item">
<div class="item-label">货号：</div>
<div class="item-value">{{ detail.supplierItemNo }}</div>
</div>
<div :title="detail.color" class="div-item">
<div class="item-label">颜色：</div>
<div class="item-value">
{{ detail.baseSku ? detail.baseSku.split("_")[1] : null }}
</div>
</div>
<div :title="detail.factoryCode" class="div-item">
<div class="item-label">工厂：</div>
<div class="item-value">{{ detail.factoryCode }}</div>
</div>
<div
:title="detail.shopNumber"
class="div-item"
style="flex: 100%;"
>
<div>
店铺单号：
</div>
<div>
{{ detail.shopNumber }}
</div>
</div>
<div
:title="detail.createTime"
class="div-item"
style="flex: 100%;"
>
<div>创建时间：</div>
<div>{{ detail.createTime }}</div>
</div>
<div
:title="detail.startStockingTime"
class="div-item"
style="flex: 100%;"
>
<div>
生产确认时间：
</div>
<div>{{ detail.startStockingTime }}</div>
</div>
</div>
</div>
<!-- <div
class="select-img"
v-if="selectImgList.length && $store.state.desktopDevice === 1"
>
<el-button
type="primary"
size="small"
style="margin-bottom: 10px;"
@click="cutImgFn"
>裁切</el-button
>
<el-checkbox-group v-model="checkList">
<el-checkbox
v-for="(it, i) in selectImgList"
:key="i"
:label="it"
:class="{ imgchecked: checkList.includes(it) }"
>
<div class="img-item" @click.stop.prevent="selectImg(it, i)">
<img style="width: 140px" :src="it.productionFile" />
<span>{{ it.designId }}</span>
</div>
</el-checkbox>
</el-checkbox-group>
<div
@click="selectImg(it, i)"
v-for="(it, i) in selectImgList"
:key="i"
class="img-item"
>
<img style="width: 140px;height: auto;" :src="it.productionFile" />
<span>{{ it.designId }}</span>
</div>
</div> -->
</template>
</img-setting>
<div
@click="outsideClick"
class="main-bg"
:style="{ 'background-color': !isView ? '#77797a' : '#fff' }"
>
<div class="container">
<div style="width: 100%;height: 100%; ">
<div v-if="isView" id="img">
<div <div
:class="{ 'no-border-grid': systemSetting.gridShow !== 1 }" id="line"
:style="{ style="left: 22%;top: 57%;background-color: transparent;overflow: hidden;cursor: none;"
width: gridWH.w + 'px',
height: gridWH.h + 'px',
}"
class="grid"
> >
<div <div
:style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }" class="sucaitu vieWsucaitu"
class="grid-row" :style="{ width: '100%', height: '100%' }"
v-for="it in 100" >
:key="it" <vue-drag-resize-rotate
:w="item.w / WHproportion"
class-name="my-drag-resize-rotate"
:prevent-deactivation="false"
:h="item.h / WHproportion"
:x="item.x / WHproportion"
:z="item.zIndex / WHproportion"
:aspectRatio="false"
:isActive="false"
:y="item.y / WHproportion"
v-for="(item, index) in imgList"
:key="index"
:draggable="false"
:resizable="false"
:rotatable="false"
:angle="item.r / WHproportion"
style="pointer-events: auto;cursor: default"
>
<div
ref="sucaitu-img"
:style="{ zIndex: item.zIndex }"
class="sucaitu-img img element"
style="cursor: default"
>
<img
crossOrigin="anonymous"
:src="item.url"
:id="item.fileName + '_' + index"
alt=""
style="width: 100%;height: 100%"
class="sucaitu-img"
/>
</div>
</vue-drag-resize-rotate>
</div>
<div
:class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
:style="{
width: 480 + 'px',
height: 540 + 'px',
}"
class="grid"
style="border-style:dashed"
></div>
</div>
<div style="width: 1040px;height: 100%;"></div>
<!-- <img class="template-img" draggable="false" :src="img" alt="" /> -->
</div>
<div
v-else
style="width: 100%;height: 100%;background-color:#77797a "
>
<div id="line" class="boxShaow">
<!-- <div
class="sucaitu"
:style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
> -->
<div class="sucaitu" :style="{ width: '100%', height: '100%' }">
<vue-drag-resize-rotate
:w="item.w"
class-name="my-drag-resize-rotate"
:prevent-deactivation="false"
:h="item.h"
:x="item.x"
:z="item.zIndex"
:aspectRatio="true"
:isActive="index === selectIndex"
:y="item.y"
v-for="(item, index) in imgList"
:key="index"
:draggable="true"
:resizable="true"
:rotatable="true"
@dragstop="(a) => dragStop(a, item)"
@resizestop="(a) => resizeStop(a, item)"
@rotatestop="(a) => rotating(a, item)"
:angle="item.r"
>
<div
ref="sucaitu-img"
:class="{ active: index === selectIndex }"
:style="{ zIndex: item.zIndex }"
class="sucaitu-img img element"
>
<img
crossOrigin="anonymous"
:src="item.url"
:id="item.fileName + '_' + index"
alt=""
style="width: 100%;height: 100%"
class="sucaitu-img"
/>
<i
@click="delImg(index)"
v-if="index === selectIndex"
class=" close el-icon-close"
></i>
<div
v-if="index === selectIndex"
class="control-point control-rotator"
></div>
</div>
</vue-drag-resize-rotate>
</div>
<div
:class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
:style="{
width: gridWH.w + 'px',
height: gridWH.h + 'px',
}"
class="grid"
> >
<div <div
:style="{ width: gridSpacing.w, height: gridSpacing.h }" :style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }"
class="grid-col" class="grid-row"
v-for="it in 100" v-for="it in 100"
:key="it" :key="it"
></div> >
<div
:style="{ width: gridSpacing.w, height: gridSpacing.h }"
class="grid-col"
v-for="it in 100"
:key="it"
></div>
</div>
</div> </div>
</div> </div>
</div> </div>
<img class="template-img" draggable="false" :src="img" alt="" />
<div class="print-tip" v-if="imgList.length"> <div class="print-tip" v-if="imgList.length">
<b style="color: green" v-if="hasSize ">该生产单无需拖动设计，直接打印</b> <b style="color: green" v-if="hasSize ">该生产单无需拖动设计，直接打印</b>
<b style="color: red" v-else>该生产单需要拖动设计打印</b> <b style="color: red" v-else>该生产单需要拖动设计打印</b>
</div> </div>
</div> </div>
<!-- <div style="width: 100%;height: 100%;background-color:#77797a "></div> -->
<print-dialog <img
:visible="printDialogShow" class="template-img"
:imgList="imgList" draggable="false"
:byPlatenSize="gridWH.v" :src="img"
> alt=""
<i style="position: absolute;width: 1000px;left: 3%;height: 100%;"
@click="changePrintDialogShow" :style="{ 'z-index': isView ? '0' : '-1' }"
:class=" />
!printDialogShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right'
"
></i>
</print-dialog>
</div> </div>
</div> </div>
<img-setting <print-dialog
@ev="ev" :visible="printDialogShow"
@change="formChange" :imgList="imgList"
:item="returnItem" :byPlatenSize="gridWH.v"
@close="close"
> >
<div <i
class="select-img" @click="changePrintDialogShow"
v-if="selectImgList.length && $store.state.desktopDevice === 1" :class="!printDialogShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
> ></i>
<el-button </print-dialog>
type="primary"
size="small"
style="margin-bottom: 10px;"
@click="cutImgFn"
>裁切</el-button
>
<el-checkbox-group v-model="checkList">
<el-checkbox
v-for="(it, i) in selectImgList"
:key="i"
:label="it"
:class="{ imgchecked: checkList.includes(it) }"
>
<div class="img-item" @click.stop.prevent="selectImg(it, i)">
<img style="width: 140px" :src="it.productionFile" />
<span>{{ it.designId }}</span>
</div>
</el-checkbox>
</el-checkbox-group>
<!-- <div
@click="selectImg(it, i)"
v-for="(it, i) in selectImgList"
:key="i"
class="img-item"
>
<img style="width: 140px;height: auto;" :src="it.productionFile" />
<span>{{ it.designId }}</span>
</div> -->
</div>
</img-setting>
</div> </div>
</template> </template>
...@@ -858,6 +1262,7 @@ export default { ...@@ -858,6 +1262,7 @@ export default {
left: 35%; left: 35%;
} }
.page-main { .page-main {
display: flex;
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
...@@ -865,15 +1270,22 @@ export default { ...@@ -865,15 +1270,22 @@ export default {
} }
.main-bg { .main-bg {
height: 100%; flex: 1;
// height: 100%;
display: flex; display: flex;
align-items: center;
justify-content: center; // align-items: center;
// justify-content: center;
} }
#line { #line {
position: absolute; position: absolute;
z-index: 2; // z-index: 2;
left: 5%;
top: 50%;
transform: translate(0, -50%);
background-color: #f0f2f6;
} }
.grid { .grid {
...@@ -882,6 +1294,8 @@ export default { ...@@ -882,6 +1294,8 @@ export default {
.grid-row { .grid-row {
.grid-col { .grid-col {
box-sizing: border-box;
display: inline-block; display: inline-block;
border: 1px solid gray; border: 1px solid gray;
border-right: none; border-right: none;
...@@ -917,15 +1331,16 @@ export default { ...@@ -917,15 +1331,16 @@ export default {
} }
#img { #img {
position: absolute; // position: absolute;
z-index: 1; // z-index: 1;
left: 130px; // left: 130px;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: auto; // width: auto;
position: absolute;
left: 5%;
img { img {
pointer-events: none; pointer-events: none;
width: auto; width: auto;
...@@ -937,15 +1352,15 @@ export default { ...@@ -937,15 +1352,15 @@ export default {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
position: relative; position: relative;
} }
.sucaitu { .sucaitu {
position: absolute; // position: absolute;
z-index: 0; // z-index: 0;
width: 100%; width: 100%;
//display: flex; //display: flex;
//justify-content: center; //justify-content: center;
...@@ -1008,18 +1423,20 @@ img { ...@@ -1008,18 +1423,20 @@ img {
} }
.img-item { .img-item {
// height: 150px;
padding: 5px; padding: 5px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
margin-bottom: 20px; // margin-bottom: 20px;
border: 2px dashed transparent; border: 2px dashed transparent;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box;
span { span {
font-size: 14px; font-size: 14px;
margin: 5px 0; // margin: 5px 0;
width: 100%;
color: black; color: black;
display: inline-block; /* 使 span 成为块级元素，这样可以设置宽度 */ display: inline-block; /* 使 span 成为块级元素，这样可以设置宽度 */
max-width: 270px; /* 限制宽度 */ max-width: 270px; /* 限制宽度 */
...@@ -1046,7 +1463,7 @@ img { ...@@ -1046,7 +1463,7 @@ img {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: 5px; // margin-bottom: 5px;
::v-deep .el-checkbox__input { ::v-deep .el-checkbox__input {
position: absolute; position: absolute;
top: 5px; top: 5px;
...@@ -1068,9 +1485,10 @@ img { ...@@ -1068,9 +1485,10 @@ img {
} }
.imgchecked { .imgchecked {
border: 1px solid #409eff; border: 1px solid #409eff;
box-sizing: border-box;
} }
</style> </style>
<style> <style lang="less" scoped>
.el-upload { .el-upload {
height: 100%; height: 100%;
} }
...@@ -1091,4 +1509,82 @@ img { ...@@ -1091,4 +1509,82 @@ img {
.handle-rot::after { .handle-rot::after {
display: none; display: none;
} }
.information-content {
border: 1px solid #ececec;
border-top: none;
.main {
margin: 5px;
border: 1px solid #ececec;
height: 100%;
.effectPic {
.img {
width: 100%;
}
}
}
.pic-title {
text-align: center;
}
}
.product-information {
border: 1px solid #ececec;
border-top: none;
.div-content {
padding: 10px;
display: flex;
flex-wrap: wrap;
.div-item {
display: flex;
flex: 50%;
font-size: 12px;
margin-bottom: 10px;
.item-label {
flex: 1;
text-align: right;
}
.item-value {
flex: 36%;
}
}
}
}
.title {
padding: 10px;
font-size: 20px;
font-weight: 700;
}
.border-row {
border-top: 1px solid #ececec;
// border-bottom: 1px solid #ececec;
display: flex;
width: 100%;
height: 100%;
// align-items: center;
}
.full-width {
width: 100%;
}
.text-center {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.border-col {
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.boxShaow {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.14),
0 0 20px rgba(0, 0, 0, 0.12);
}
.vieWsucaitu {
.active::before {
display: none;
}
::v-deep .drr:hover:before {
outline: none;
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment