Skip to content

E
electron-printer
Commit 495695bd by zhuzhequan
Options

转为工厂端

parent a7b73f94
Showing with 4998 additions and 5256 deletions
config/env.json 0 → 100644
{
"apiApiHost":"https://factory.jomalls.com/api",
"fileApiUrl":"https://factory.jomalls.com/upload/factory",
"visionUrl":"https://console.jomalls.com"
}
src/background.js
"use strict"; "use strict";
import { ipcMain } from "electron"; import { ipcMain } from "electron";
import { app, protocol, BrowserWindow, screen, globalShortcut } from "electron"; import { app, protocol, BrowserWindow, screen, globalShortcut } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib"; import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import { createServer } from "@/server/index.js"; import { createServer } from "@/server/index.js";
import { autoUpdater } from "electron-updater"; import { autoUpdater } from "electron-updater";
Object.defineProperty(app, "isPackaged", { Object.defineProperty(app, "isPackaged", {
get() { get() {
return true; return true;
} }
}); });
createServer(); createServer();
const isDevelopment = process.env.NODE_ENV !== "production"; const isDevelopment = process.env.NODE_ENV !== "production";
let win; let win;
let newWindow; let newWindow;
protocol.registerSchemesAsPrivileged([ protocol.registerSchemesAsPrivileged([
{ scheme: "app", privileges: { secure: true, standard: true } } { scheme: "app", privileges: { secure: true, standard: true } }
]); ]);
const winURL = const winURL =
process.env.NODE_ENV === "development" process.env.NODE_ENV === "development"
? "http://localhost:8050" ? "http://localhost:8050"
: `file://${__dirname}/index.html`; : `file://${__dirname}/index.html`;
async function createWindow() { async function createWindow() {
win = new BrowserWindow({ win = new BrowserWindow({
width: 1500, width: 1500,
height: 1000, height: 1000,
icon: "./src/assets/logo.jpg", icon: "./src/assets/logo.jpg",
webPreferences: { webPreferences: {
webSecurity: false, webSecurity: false,
nodeIntegration: true nodeIntegration: true
} }
}); });
let newWindow = new BrowserWindow({ let newWindow = new BrowserWindow({
fullscreen: false, fullscreen: false,
width: 1000, width: 1000,
height: 1000, height: 1000,
webPreferences: { webPreferences: {
nodeIntegration: true nodeIntegration: true
//配置预加载脚本文件(preload)，此处起名为preloadOther //配置预加载脚本文件(preload)，此处起名为preloadOther
//p.s.路径为绝对路径 //p.s.路径为绝对路径
// preload: path.join(__dirname, "./preloadOther.js") // 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`);
win.on("closed", () => { win.on("closed", () => {
//这一段放外面的话，如果你电脑没双屏会报错。 //这一段放外面的话，如果你电脑没双屏会报错。
win = null; win = null;
}); });
ipcMain.on("allPrint", () => { ipcMain.on("allPrint", () => {
// 获取到打印机列表 // 获取到打印机列表
const printers = win.webContents.getPrinters(); const printers = win.webContents.getPrinters();
// 把获取的打印机列表发送给渲染进程 // 把获取的打印机列表发送给渲染进程
win.webContents.send("printName", printers); win.webContents.send("printName", printers);
}); });
ipcMain.on("win-subScreen", (data, v) => { ipcMain.on("win-subScreen", (data, v) => {
if (newWindow) newWindow.webContents.send("getProductionNoInfo", v); if (newWindow) newWindow.webContents.send("getProductionNoInfo", v);
}); });
if (process.env.WEBPACK_DEV_SERVER_URL) { if (process.env.WEBPACK_DEV_SERVER_URL) {
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL); await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
if (!process.env.IS_TEST) win.webContents.openDevTools(); if (!process.env.IS_TEST) win.webContents.openDevTools();
} else { } else {
createProtocol("app"); createProtocol("app");
await win.loadURL("app://./index.html"); await win.loadURL("app://./index.html");
} }
ipcMain.on("send-card", (event, obj) => { ipcMain.on("send-card", (event, obj) => {
win.webContents.send("sendWebsockt", obj); win.webContents.send("sendWebsockt", obj);
}); });
win.on("closed", () => { win.on("closed", () => {
win.removeAllListeners(); win && win.removeAllListeners();
win = null; win = null;
newWindow = null; newWindow && newWindow.close()
}); newWindow = null;
});
// 自动更新逻辑开始
autoUpdater.autoDownload = false // 自动更新逻辑开始
autoUpdater.autoInstallOnAppQuit = false; // 应用退出后自动安装 autoUpdater.autoDownload = false
autoUpdater.on("download-progress", progress => { autoUpdater.autoInstallOnAppQuit = false; // 应用退出后自动安装
// 下载进度监听 autoUpdater.on("download-progress", progress => {
if (win.isDestroyed()) return; // 下载进度监听
win.webContents.send("update", { if (win.isDestroyed()) return;
speed: Math.ceil(progress.bytesPerSecond / 1000), // 网速 win.webContents.send("update", {
percent: Math.ceil(progress.percent) // 百分比 speed: Math.ceil(progress.bytesPerSecond / 1000), // 网速
}); percent: Math.ceil(progress.percent) // 百分比
}); });
});
autoUpdater.on("error", err => {
// 下载失败监听 autoUpdater.on("error", err => {
if (win.isDestroyed()) return; // 下载失败监听
win.webContents.send("update-error",err); if (win.isDestroyed()) return;
}); win.webContents.send("update-error",err);
});
autoUpdater.on("update-downloaded", info => {
// 下载完成监听 autoUpdater.on("update-downloaded", info => {
if (win.isDestroyed()) return; // 下载完成监听
console.log(info, "info"); if (win.isDestroyed()) return;
win.webContents.send("downloaded", info); console.log(info, "info");
}); win.webContents.send("downloaded", info);
});
ipcMain.on("install", () => {
// 退出安装 ipcMain.on("install", () => {
autoUpdater.quitAndInstall(); // 退出安装
}); autoUpdater.quitAndInstall();
});
ipcMain.on("toUpdateApp", (data, item) => {
// 去手动下载更新 ipcMain.on("toUpdateApp", (data, item) => {
if (win.isDestroyed()) return; // 去手动下载更新
autoUpdater.setFeedURL({ if (win.isDestroyed()) return;
provider: "generic", autoUpdater.setFeedURL({
url: item.url provider: "generic",
}); url: item.url
autoUpdater.checkForUpdates().then(res=>{ });
console.log(res); autoUpdater.checkForUpdates().then(res=>{
autoUpdater.downloadUpdate() console.log(res);
}) autoUpdater.downloadUpdate()
})
});
} });
}
app.on("activate", async () => {
if (win === null) { app.on("activate", async () => {
await createWindow(); if (win === null) {
} await createWindow();
}); }
});
app.on("ready", async () => {
await createWindow(); app.on("ready", async () => {
globalShortcut.register("F5", () => { await createWindow();
return false; globalShortcut.register("F5", () => {
}); return false;
globalShortcut.register("CommandOrControl+R", () => { });
return false; globalShortcut.register("CommandOrControl+R", () => {
}); return false;
}); });
});
app.on("will-quit", () => {
globalShortcut.unregister("F5"); app.on("will-quit", () => {
globalShortcut.unregister("CommandOrControl+R"); globalShortcut.unregister("F5");
}); globalShortcut.unregister("CommandOrControl+R");
});
if (isDevelopment) {
if (process.platform === "win32") { if (isDevelopment) {
process.on("message", data => { if (process.platform === "win32") {
if (data === "graceful-exit") { process.on("message", data => {
app.quit(); if (data === "graceful-exit") {
} app.quit();
}); }
} else { });
process.on("SIGTERM", () => { } else {
app.quit(); process.on("SIGTERM", () => {
}); app.quit();
} });
} }
}
src/server/entity/function.js
import { downloadImage, toSend, writeProfileXml } from "@/server/utils"; import { downloadImage, toSend, writeProfileXml } from "@/server/utils";
import axios from "axios";
import { returnLogFilePath } from "../utils/log";
var request = require("request"); var request = require("request");
const compressing = require("compressing"); const compressing = require("compressing");
const uuid = require("uuid"); const uuid = require("uuid");
const path = require("path"); const path = require("path");
const fs = require("fs"); const fs = require("fs");
const os = require("os"); const os = require("os");
import axios from "axios"; const { app } = require("electron");
import { returnLogFilePath } from "../utils/log"; let fileEnv, env, visionUrl;
axios.defaults.timeout = 12600000; axios.defaults.timeout = 12600000;
const multiparty = require("multiparty"); const multiparty = require("multiparty");
function readEnv() {
let exePath,configPath
if(process.env.NODE_ENV === "development") {
configPath = path.join(__dirname, "../config/env.json");
}else{
exePath = path.dirname(app.getPath("exe")).replace(/\\/g, "/");
configPath = `${exePath}/config/env.json`;
}
console.log(configPath,__dirname);
fs.readFile(configPath, "utf-8", (err, data) => {
if (err) {
console.error("读取配置文件失败:", err);
return;
}
const config = JSON.parse(data);
fileEnv = config.fileApiUrl;
env = config.apiApiHost;
visionUrl = config.visionUrl;
});
}
readEnv()
export default { export default {
writePrintLog: async (req, res) => { writePrintLog: async (req, res) => {
try { try {
...@@ -33,32 +56,24 @@ export default { ...@@ -33,32 +56,24 @@ export default {
res.json({ code: 500, msg: e }); res.json({ code: 500, msg: e });
} }
}, },
getPodProductionInfo: async (req, res) => { downloadBySubOrderNumber: async (req, res) => {
const token = req.headers["jwt-token"]; const token = req.headers["jwt-token"];
const company = req.headers["company"];
const productionNo = req.body.productionNo;
try { try {
let { data } = await axios.post( let {
`https://${company}/api/podDesignCenter/getPodImageByProduction`, data
{ productionNo }, } = await axios.get(
{ headers: { "jwt-token": token } } `${env}/factory/podJomallOrder/downloadBySubOrderNumber`,
{ params: req.body, headers: { "jwt-token": token } }
); );
console.log(data); console.log(data);
if (data.code === 200 && data.data && data.data.length > 0) { let files = [];
let f = data.data.find(el => !el.productionFile); if (data.code === 200 && data.message) {
if (f) { files = [data.message];
return res.json({ code: 500, msg: "存在地址错误的素材图" }); files = files.map(el => {
} return { url: `${fileEnv}${el}` };
data.data.forEach(el => {
if (!el.productionFile.includes("http")) {
el.productionFile = el.productionFile.replace(
"/data/upload/erp/",
""
);
el.productionFile = `https://${company}/upload/erp${el.productionFile}`;
}
}); });
downloadImage(data.data) console.log(files);
downloadImage(files)
.then(data => { .then(data => {
res.json({ code: 200, data }); res.json({ code: 200, data });
}) })
...@@ -75,11 +90,10 @@ export default { ...@@ -75,11 +90,10 @@ export default {
}, },
findByPodProductionNo: async (req, res) => { findByPodProductionNo: async (req, res) => {
const token = req.headers["jwt-token"]; const token = req.headers["jwt-token"];
const company = req.headers["company"];
const q = req.body; const q = req.body;
try { try {
let { data } = await axios.get( let { data } = await axios.get(
`https://${company}/api/pod/podProductionInfo/findByPodProductionNo`, `${env}/factory/podJomallOrderProduct/getSubOrderBySubOrderNumber`,
{ {
params: q, params: q,
headers: { "jwt-token": token } headers: { "jwt-token": token }
...@@ -101,34 +115,20 @@ export default { ...@@ -101,34 +115,20 @@ export default {
res.json({ code: 500, msg: err }); res.json({ code: 500, msg: err });
} }
}, },
commitApply: async (req, res) => { commitApply: async (req, res) => {},
const company = req.headers["company"];
const q = req.body;
try {
let { data } = await axios.post(
`https://${company}/api/sysDeviceInfo/commitApply`,
q
);
res.send(data);
} catch (err) {
console.log(err);
res.json({ code: 500, msg: err });
}
},
completeDelivery: async (req, res) => { completeDelivery: async (req, res) => {
const token = req.headers["jwt-token"]; const token = req.headers["jwt-token"];
const company = req.headers["company"];
const q = req.body;
try { try {
let { data } = await axios.post( let {
`https://${company}/api/pod/podProductionInfo/completeDelivery`, data
q, } = await axios.post(
{ `${env}/factory/podJomallOrderProduct/completeDelivery`,
headers: { "jwt-token": token } req.body,
} { headers: { "jwt-token": token } }
); );
res.json(data); res.send(data);
} catch (err) { } catch (err) {
console.log(err);
res.json({ code: 500, msg: err }); res.json({ code: 500, msg: err });
} }
}, },
...@@ -232,14 +232,9 @@ export default { ...@@ -232,14 +232,9 @@ export default {
} }
}, },
login: async (req, res) => { login: async (req, res) => {
const { loginName, company, password, deviceId } = req.body;
try { try {
let { data } = await axios.post(`https://${company}/api/sysLogin/login`, { console.log(`${env}/factory/login`);
loginName, let { data } = await axios.post(`${env}/factory/login`, req.body);
password,
deviceId
});
res.send(data); res.send(data);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
...@@ -282,8 +277,7 @@ export default { ...@@ -282,8 +277,7 @@ export default {
let from = path.join(process.cwd(), "./resources/app/css.zip"); let from = path.join(process.cwd(), "./resources/app/css.zip");
let dirName = path.join(process.cwd(), "./resources/app/"); let dirName = path.join(process.cwd(), "./resources/app/");
let stream = fs.createWriteStream(from); let stream = fs.createWriteStream(from);
const company = req.headers["company"]; req.body.url = visionUrl + req.body.url;
req.body.url = "https://" + company + req.body.url;
console.log(req.body.url, "下载zip地址"); console.log(req.body.url, "下载zip地址");
request(req.body.url) request(req.body.url)
.pipe(stream) .pipe(stream)
......
src/server/routes/index.js
import express from "express"; import express from "express";
import fn from "../entity/function.js"; import fn from "../entity/function.js";
let router = express.Router(); let router = express.Router();
// 执行打印命令 // 执行打印命令
router.post("/toPrint", fn.toPrint); router.post("/toPrint", fn.toPrint);
// 打印日志添加 // 打印日志添加
router.post("/writePrintLog", fn.writePrintLog); router.post("/writePrintLog", fn.writePrintLog);
// 登录接口 // 登录接口
router.post("/login", fn.login); router.post("/login", fn.login);
// 获取本地文件返回 // 获取本地文件返回
router.post("/getPngImg", fn.getPngImg); router.post("/getPngImg", fn.getPngImg);
// 上传文件到本地 // 上传文件到本地
router.post("/uploadImage", fn.uploadImage); router.post("/uploadImage", fn.uploadImage);
// 获取公司列表 // 获取公司列表
router.get("/getCompanyList", fn.getCompanyList); router.get("/getCompanyList", fn.getCompanyList);
// 提交授权申请 // 提交授权申请
router.post("/commitApply", fn.commitApply); router.post("/commitApply", fn.commitApply);
// 下载素材到本地 // 下载素材到本地
router.post("/downloadByDesignId", fn.downloadByDesignId); router.post("/downloadByDesignId", fn.downloadByDesignId);
// 获取 生产单号返回素材地址 // 获取 生产单号返回素材地址
router.post("/getPodProductionInfo", fn.getPodProductionInfo); router.post("/downloadBySubOrderNumber", fn.downloadBySubOrderNumber);
// 提交生产完成 // 提交生产完成
router.post("/completeDelivery", fn.completeDelivery); router.post("/completeDelivery", fn.completeDelivery);
// 根据生产单号查询详情 // 根据生产单号查询详情
router.post("/findByPodProductionNo", fn.findByPodProductionNo); router.post("/findByPodProductionNo", fn.findByPodProductionNo);
// 查询版本更新 // 查询版本更新
router.get("/checkUpdate", fn.checkUpdate); router.get("/checkUpdate", fn.checkUpdate);
// 增量更新 // 增量更新
router.post("/incrementalUpdates", fn.incrementalUpdates); router.post("/incrementalUpdates", fn.incrementalUpdates);
export { router as default }; export { router as default };
src/server/utils/index.js
import { exec } from "child_process"; import { exec } from "child_process";
var fs = require("fs"); var fs = require("fs");
var path = require("path"); var path = require("path");
var request = require("request"); var request = require("request");
var uuid = require("uuid"); var uuid = require("uuid");
const compressing = require("compressing"); const compressing = require("compressing");
function zip(from, to) { function zip(from, to) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let dirName = path.join(to, uuid.v4()); let dirName = path.join(to, uuid.v4());
console.log(dirName); console.log(dirName);
if (!fs.existsSync(dirName)) { if (!fs.existsSync(dirName)) {
fs.mkdirSync(dirName); fs.mkdirSync(dirName);
} }
let arr = []; let arr = [];
compressing.zip compressing.zip
.uncompress(from, dirName, { zipFileNameEncoding: "gbk" }) .uncompress(from, dirName, { zipFileNameEncoding: "gbk" })
.then(() => { .then(() => {
console.log("success"); console.log("success");
let data = fs.readdirSync(dirName); let data = fs.readdirSync(dirName);
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
let fileName = uuid.v4() + ".png"; let fileName = uuid.v4() + ".png";
let el = data[i]; let el = data[i];
let file_path = path.join(dirName, el); let file_path = path.join(dirName, el);
console.log(file_path, to); console.log(file_path, to);
fs.renameSync(file_path, path.join(to, fileName)); fs.renameSync(file_path, path.join(to, fileName));
arr.push({ arr.push({
fileName: fileName, fileName: fileName,
productionFile: path.join(to, fileName) designId: data[i].split(".")[0],
}); productionFile: path.join(to, fileName)
} });
}
fs.unlinkSync(from); // 删除压缩包
fs.rmdirSync(dirName); // 删除目录文件 fs.unlinkSync(from); // 删除压缩包
// console.log(arr); fs.rmdirSync(dirName); // 删除目录文件
resolve(arr); // console.log(arr);
}) resolve(arr);
.catch(err => { })
console.log(err); .catch(err => {
reject("压缩包解压失败"); console.log(err);
}); reject("压缩包解压失败");
}); });
} });
}
// 下载素材
export const downloadImage = list => { // 下载素材
return new Promise((resolve, reject) => { export const downloadImage = list => {
try { return new Promise((resolve, reject) => {
let dirPath = path.join(process.cwd(), "./print/Input/"); try {
if (!fs.existsSync(dirPath)) { let dirPath = path.join(process.cwd(), "./print/Input/");
fs.mkdirSync(dirPath); if (!fs.existsSync(dirPath)) {
} fs.mkdirSync(dirPath);
let count = 0; }
for (let i = 0; i < list.length; i++) { let count = 0;
if (list[i].productionFile && list[i].productionFile.includes("http")) { for (let i = 0; i < list.length; i++) {
let fileName = ""; if (list[i].url && list[i].url.includes("http")) {
let type = 2; let fileName = "";
let flag = let type = 2;
[ let flag =
".zip", [
".gzip", ".zip",
".tar", ".gzip",
".taz", ".tar",
".rar", ".taz",
".7z", ".rar",
".gz", ".7z",
".bz2" ".gz",
].filter(el => list[i].productionFile.toLowerCase().includes(el)) ".bz2"
.length > 0; ].filter(el => list[i].url.toLowerCase().includes(el))
if (flag) { .length > 0;
fileName = list[i].productionFile.split("/")[ if (flag) {
list[i].productionFile.split("/").length - 1 fileName = list[i].url.split("/")[
]; list[i].url.split("/").length - 1
type = 1; ];
} else { type = 1;
fileName = uuid.v4() + ".png"; } else {
type = 2; fileName = uuid.v4() + ".png";
} type = 2;
list[i].fileName = fileName; }
list[i].type = type; let p = path.join(process.cwd(), "./print/Input/" + fileName);
let p = path.join(process.cwd(), "./print/Input/" + fileName); let stream = fs.createWriteStream(p);
let stream = fs.createWriteStream(p); request(list[i].url)
request(list[i].productionFile) .pipe(stream)
.pipe(stream) .on("close", async function() {
.on("close", async function() { if (type === 1) {
if (type === 1) { list[i].list = await zip(p, dirPath);
let res_data = await zip(p, dirPath); if (count === list.length - 1) {
res_data.forEach(item => { resolve(list);
item.designId = list[i].designId; }
}); }
list[i].list = res_data; if (count === list.length - 1) {
if (count === list.length - 1) { console.log(list);
resolve(list); resolve(list);
} }
} count++;
if (count === list.length - 1) { });
console.log(list); }
resolve(list); }
} } catch (err) {
count++; console.log(err);
}); reject(err);
} }
} });
} catch (err) { };
console.log(err);
reject(err); // 传递素材给前端
} export const sendImg = (filename = "sample.png") => {
}); let filePath = path.join(process.cwd(), "./print/Input/" + filename);
}; if (!fs.existsSync(filePath)) {
return false;
// 传递素材给前端 }
export const sendImg = (filename = "sample.png") => { let data = fs.readFileSync(filePath);
let filePath = path.join(process.cwd(), "./print/Input/" + filename); data = Buffer.from(data).toString("base64");
if (!fs.existsSync(filePath)) { return "data:" + "png" + ";base64," + data;
return false; };
}
let data = fs.readFileSync(filePath); export const toSend = body => {
data = Buffer.from(data).toString("base64"); return new Promise((resolve, reject) => {
return "data:" + "png" + ";base64," + data; exec(
}; body.cmd,
{ cwd: path.join(process.cwd(), "print"), shell: true },
export const toSend = body => { (err, stdout, stderr) => {
return new Promise((resolve, reject) => { console.log(stdout, 1);
exec( console.log(stderr, 2);
body.cmd, console.log(err, 4);
{ cwd: path.join(process.cwd(), "print"), shell: true }, if (!err) {
(err, stdout, stderr) => { exec(
console.log(stdout, 1); body.print_cmd,
console.log(stderr, 2); { cwd: path.join(process.cwd(), "print"), shell: true },
console.log(err, 4); err2 => {
if (!err) { console.log(err2);
exec( if (!err2) {
body.print_cmd, // 成功后删除 素材图，xml，output文件
{ cwd: path.join(process.cwd(), "print"), shell: true }, // fs.unlinkSync(path.join(process.cwd(), 'print/Input/' + body.fileName))
err2 => { fs.unlinkSync(
console.log(err2); path.join(
if (!err2) { process.cwd(),
// 成功后删除 素材图，xml，output文件 "print/Profile/" +
// fs.unlinkSync(path.join(process.cwd(), 'print/Input/' + body.fileName)) body.fileName.replace(".png", "") +
fs.unlinkSync( ".xml"
path.join( )
process.cwd(), );
"print/Profile/" + fs.unlinkSync(
body.fileName.replace(".png", "") + path.join(
".xml" process.cwd(),
) "print/Output/" +
); body.fileName.replace(".png", "") +
fs.unlinkSync( ".arxp"
path.join( )
process.cwd(), );
"print/Output/" + resolve("操作成功");
body.fileName.replace(".png", "") + } else {
".arxp" reject("打印机参数错误");
) }
); }
resolve("操作成功"); );
} else { } else {
reject("打印机参数错误"); reject("生成arxp文件失败");
} }
} }
); );
} else { });
reject("生成arxp文件失败"); };
}
} export const writeProfileXml = b => {
); try {
}); let p = path.join(process.cwd(), `./print/Profile/${b.byInk}.xml`);
}; let file = fs.readFileSync(p, { encoding: "utf8" });
file = file.replace(
export const writeProfileXml = b => { /<uiCopies>(.*)<\/uiCopies>/i,
try { `<uiCopies>${b.printNum}</uiCopies>`
let p = path.join(process.cwd(), `./print/Profile/${b.byInk}.xml`); );
let file = fs.readFileSync(p, { encoding: "utf8" }); file = file.replace(
file = file.replace( /<byPlatenSize>(.*)<\/byPlatenSize>/i,
/<uiCopies>(.*)<\/uiCopies>/i, `<byPlatenSize>${b.byPlatenSize}</byPlatenSize>`
`<uiCopies>${b.printNum}</uiCopies>` );
); file = file.replace(
file = file.replace( /<bEcoMode>(.*)<\/bEcoMode>/i,
/<byPlatenSize>(.*)<\/byPlatenSize>/i, `<bEcoMode>${b.bEcoMode}</bEcoMode>`
`<byPlatenSize>${b.byPlatenSize}</byPlatenSize>` );
); file = file.replace(
file = file.replace( /<bMaterialBlack>(.*)<\/bMaterialBlack>/i,
/<bEcoMode>(.*)<\/bEcoMode>/i, `<bMaterialBlack>${b.bMaterialBlack}</bMaterialBlack>`
`<bEcoMode>${b.bEcoMode}</bEcoMode>` );
); file = file.replace(
file = file.replace( /<byHighlight>(.*)<\/byHighlight>/i,
/<bMaterialBlack>(.*)<\/bMaterialBlack>/i, `<byHighlight>${b.byHighlight}</byHighlight>`
`<bMaterialBlack>${b.bMaterialBlack}</bMaterialBlack>` );
); file = file.replace(
file = file.replace( /<byMask>(.*)<\/byMask>/i,
/<byHighlight>(.*)<\/byHighlight>/i, `<byMask>${b.byMask}</byMask>`
`<byHighlight>${b.byHighlight}</byHighlight>` );
); file = file.replace(
file = file.replace( /<bTransColor>(.*)<\/bTransColor>/i,
/<byMask>(.*)<\/byMask>/i, `<bTransColor>${b.bTransColor}</bTransColor>`
`<byMask>${b.byMask}</byMask>` );
); file = file.replace(
file = file.replace( /<bPause>(.*)<\/bPause>/i,
/<bTransColor>(.*)<\/bTransColor>/i, `<bPause>${b.bPause}</bPause>`
`<bTransColor>${b.bTransColor}</bTransColor>` );
); file = file.replace(
file = file.replace( /<bDivide>(.*)<\/bDivide>/i,
/<bPause>(.*)<\/bPause>/i, `<bDivide>${b.bDivide}</bDivide>`
`<bPause>${b.bPause}</bPause>` );
); file = file.replace(
file = file.replace( /<byChoke>(.*)<\/byChoke>/i,
/<bDivide>(.*)<\/bDivide>/i, `<byChoke>${b.byChoke}</byChoke>`
`<bDivide>${b.bDivide}</bDivide>` );
); file = file.replace(/<byInk>(.*)<\/byInk>/i, `<byInk>${b.byInk}</byInk>`);
file = file.replace( file = file.replace(
/<byChoke>(.*)<\/byChoke>/i, /<bFastMode>(.*)<\/bFastMode>/i,
`<byChoke>${b.byChoke}</byChoke>` `<bFastMode>${b.bFastMode}</bFastMode>`
); );
file = file.replace(/<byInk>(.*)<\/byInk>/i, `<byInk>${b.byInk}</byInk>`); file = file.replace(
file = file.replace( /<byResolution>(.*)<\/byResolution>/i,
/<bFastMode>(.*)<\/bFastMode>/i, `<byResolution>${1}</byResolution>`
`<bFastMode>${b.bFastMode}</bFastMode>` );
); file = file.replace(
file = file.replace( /<byInkVolume>(.*)<\/byInkVolume>/i,
/<byResolution>(.*)<\/byResolution>/i, `<byInkVolume>${b.byInkVolume}</byInkVolume>`
`<byResolution>${1}</byResolution>` );
); file = file.replace(
file = file.replace( /<byDoublePrint>(.*)<\/byDoublePrint>/i,
/<byInkVolume>(.*)<\/byInkVolume>/i, `<byDoublePrint>${b.byDoublePrint}</byDoublePrint>`
`<byInkVolume>${b.byInkVolume}</byInkVolume>` );
); file = file.replace(
file = file.replace( /<bMultiple>(.*)<\/bMultiple>/i,
/<byDoublePrint>(.*)<\/byDoublePrint>/i, `<bMultiple>${b.bMultiple}</bMultiple>`
`<byDoublePrint>${b.byDoublePrint}</byDoublePrint>` );
); file = file.replace(
file = file.replace( /<bySaturation>(.*)<\/bySaturation>/i,
/<bMultiple>(.*)<\/bMultiple>/i, `<bySaturation>${b.bySaturation}</bySaturation>`
`<bMultiple>${b.bMultiple}</bMultiple>` );
); file = file.replace(
file = file.replace( /<byBrightness>(.*)<\/byBrightness>/i,
/<bySaturation>(.*)<\/bySaturation>/i, `<byBrightness>${b.byBrightness}</byBrightness>`
`<bySaturation>${b.bySaturation}</bySaturation>` );
); file = file.replace(
file = file.replace( /<byContrast>(.*)<\/byContrast>/i,
/<byBrightness>(.*)<\/byBrightness>/i, `<byContrast>${b.byContrast}</byContrast>`
`<byBrightness>${b.byBrightness}</byBrightness>` );
); file = file.replace(
file = file.replace( /<iCyanBalance>(.*)<\/iCyanBalance>/i,
/<byContrast>(.*)<\/byContrast>/i, `<iCyanBalance>${b.iCyanBalance}</iCyanBalance>`
`<byContrast>${b.byContrast}</byContrast>` );
); file = file.replace(
file = file.replace( /<iMagentaBalance>(.*)<\/iMagentaBalance>/i,
/<iCyanBalance>(.*)<\/iCyanBalance>/i, `<iMagentaBalance>${b.iMagentaBalance}</iMagentaBalance>`
`<iCyanBalance>${b.iCyanBalance}</iCyanBalance>` );
); file = file.replace(
file = file.replace( /<iYellowBalance>(.*)<\/iYellowBalance>/i,
/<iMagentaBalance>(.*)<\/iMagentaBalance>/i, `<iYellowBalance>${b.iYellowBalance}</iYellowBalance>`
`<iMagentaBalance>${b.iMagentaBalance}</iMagentaBalance>` );
); file = file.replace(
file = file.replace( /<iBlackBalance>(.*)<\/iBlackBalance>/i,
/<iYellowBalance>(.*)<\/iYellowBalance>/i, `<iBlackBalance>${b.iBlackBalance}</iBlackBalance>`
`<iYellowBalance>${b.iYellowBalance}</iYellowBalance>` );
); file = file.replace(
file = file.replace( /<bUniPrint>(.*)<\/bUniPrint>/i,
/<iBlackBalance>(.*)<\/iBlackBalance>/i, `<bUniPrint>${b.bUniPrint}</bUniPrint>`
`<iBlackBalance>${b.iBlackBalance}</iBlackBalance>` );
); fs.writeFileSync(
file = file.replace( path.join(
/<bUniPrint>(.*)<\/bUniPrint>/i, process.cwd(),
`<bUniPrint>${b.bUniPrint}</bUniPrint>` `./print/Profile/${b.fileName.replace(".png", "")}.xml`
); ),
fs.writeFileSync( file
path.join( );
process.cwd(), } catch (err) {
`./print/Profile/${b.fileName.replace(".png", "")}.xml` console.log(err);
), }
file };
);
} catch (err) {
console.log(err);
}
};
src/server/utils/log.js
const log4js = require("log4js"); const log4js = require("log4js");
const moment = require("moment"); const moment = require("moment");
const fs = require("fs"); const fs = require("fs");
const path = require("path"); const path = require("path");
export function returnLogFilePath() { export function returnLogFilePath() {
const today = moment(new Date()).format("YYYY-MM-DD"); const today = moment(new Date()).format("YYYY-MM-DD");
const low_path = process.cwd(); const low_path = process.cwd();
let log_dir = path.join(low_path, "logs") let log_dir = path.join(low_path, "logs")
if (!fs.existsSync(log_dir)) { if (!fs.existsSync(log_dir)) {
fs.mkdirSync(log_dir) // 创建日志文件夹 fs.mkdirSync(log_dir) // 创建日志文件夹
} }
const dir = path.join(low_path, `/logs/${today}`); const dir = path.join(low_path, `/logs/${today}`);
if (!fs.existsSync(dir)) { if (!fs.existsSync(dir)) {
fs.mkdirSync(dir); fs.mkdirSync(dir);
} }
return path.join(dir, "api.log"); return path.join(dir, "api.log");
} }
//日志对象 //日志对象
const logger = (name) => { const logger = (name) => {
const logFilePath = returnLogFilePath(); const logFilePath = returnLogFilePath();
log4js.configure({ log4js.configure({
appenders: { appenders: {
out: { type: "console" }, //在控制台输出日志 out: { type: "console" }, //在控制台输出日志
cheese: { cheese: {
type: "file", type: "file",
filename: logFilePath, filename: logFilePath,
maxLogSize: 1024 * 1000 * 10 //10M maxLogSize: 1024 * 1000 * 10 //10M
} }
}, },
categories: { categories: {
//需要在控制台输出日志时：appenders: ['cheese', 'out'] //需要在控制台输出日志时：appenders: ['cheese', 'out']
default: { appenders: ["cheese"], level: log4js.levels.DEBUG } default: { appenders: ["cheese"], level: log4js.levels.DEBUG }
} }
}); });
return log4js.getLogger(name); return log4js.getLogger(name);
}; };
//添加日志 //添加日志
const addFormatLog = function(req, res, data) { const addFormatLog = function(req, res, data) {
const now = new Date(); const now = new Date();
const resTime = now - req._startTime; const resTime = now - req._startTime;
const token = req.headers["jwt-token"]; const token = req.headers["jwt-token"];
const company = req.headers["company"]; const {
const { ip,
ip, headers,
headers, method,
method, url,
url, body,
body, httpVersion,
httpVersion, res: { statusCode, _headers }
res: { statusCode, _headers } } = req;
} = req; let logInfo = {
let logInfo = { ip,
ip, host: headers.host,
host: headers.host, resTime,
resTime, method,
method, url,
url, token,
token, body,
company, httpVersion,
body, statusCode,
httpVersion, contentLength: _headers["content-length"],
statusCode, userAgent: headers["user-agent"],
contentLength: _headers["content-length"], data: data[0]
userAgent: headers["user-agent"], };
data: data[0] // ${JSON.stringify(logInfo)}
}; logger("log").info(`
// ${JSON.stringify(logInfo)} 时间：${moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}
logger("log").info(` ip : ${logInfo.ip}
host : ${logInfo.host}
响应时间 : ${logInfo.resTime / 1000} s
时间：${moment(new Date()).format("YYYY-MM-DD HH:mm:ss")} method ：${logInfo.method}
ip : ${logInfo.ip} url ：${logInfo.url}
host : ${logInfo.host} token ：${logInfo.token || ""}
响应时间 : ${logInfo.resTime / 1000} s body ：${JSON.stringify(logInfo.body)}
method ：${logInfo.method} 状态码 ：${logInfo.statusCode}
url ：${logInfo.url} data ：${JSON.stringify(logInfo.data)}
客户 ：${logInfo.company || ""} `
token ：${logInfo.token || ""} );
body ：${JSON.stringify(logInfo.body)}
状态码 ：${logInfo.statusCode} };
data ：${JSON.stringify(logInfo.data)}
//日志中间件
export const logMiddleWare = () => {
` return function(req, res, next) {
); req._startTime = new Date();
}; const oldSend = res.send;
res.send = function() {
//日志中间件 oldSend.apply(res, arguments);
export const logMiddleWare = () => { if (typeof [...arguments][0] === "object") {
return function(req, res, next) { res.once("finish", () => addFormatLog(req, res, arguments));
req._startTime = new Date(); }
};
const oldSend = res.send;
res.send = function() { return next();
oldSend.apply(res, arguments); };
if (typeof [...arguments][0] === "object") { };
res.once("finish", () => addFormatLog(req, res, arguments));
}
};
return next();
};
};
src/utils/axios.js
import axios from "axios"; import axios from "axios";
import Vue from "vue"; import Vue from "vue";
import { Loading } from "element-ui"; import { Loading } from "element-ui";
// create an axios instance // create an axios instance
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;
function startLoading() { function startLoading() {
loading = Loading.service({ loading = Loading.service({
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)"
}); });
} }
function endLoading() { function endLoading() {
loading.close(); loading.close();
} }
// 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");
const company = Vue.prototype.$dataStore.get("company"); if (user) {
if (user) { config.headers["jwt-token"] = user.token;
config.headers["jwt-token"] = user.token; }
config.headers["company"] = company.domain; startLoading();
} return config;
startLoading(); },
return config; error => {
}, endLoading();
error => { // do something with request error
endLoading(); return Promise.reject(error);
// do something with request error }
return Promise.reject(error); );
}
); // Add a response interceptor
service.interceptors.response.use(
// Add a response interceptor /**
service.interceptors.response.use( * If you want to get http information such as headers or status
/** * Please return response => response
* If you want to get http information such as headers or status */
* Please return response => response
*/ /**
* Determine the request status by custom code
/** * Here is just an example
* Determine the request status by custom code * You can also judge the status by HTTP Status Code
* Here is just an example */
* You can also judge the status by HTTP Status Code async response => {
*/ // do something with response data
async response => { const res = response.data;
// do something with response data endLoading();
const res = response.data; if (res.code) {
endLoading(); if (res.code !== 200) {
if (res.code) { if (res.code === 411) {
if (res.code !== 200) { return Promise.resolve(res);
if (res.code === 411) { }
return Promise.resolve(res); if (res.code === 403) {
} Vue.prototype.$dataStore.delete("user");
if (res.code === 403) { Vue.prototype.$message.error({
Vue.prototype.$dataStore.delete("user"); showClose: true,
Vue.prototype.$message.error({ message: res.msg || res.message || "Error"
showClose: true, });
message: res.msg || res.message || "Error" setTimeout(() => {
}); location.reload();
setTimeout(() => { }, 500);
location.reload();
}, 500); return Promise.reject(new Error(res.msg || res.message || "Error"));
}
return Promise.reject(new Error(res.msg || res.message || "Error"));
} // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; // TODO: to re-login
if (res.code === 50008 || res.code === 50012 || res.code === 50014) { }
// TODO: to re-login Vue.prototype.$message.error({
} showClose: true,
Vue.prototype.$message.error({ message: res.msg || res.message || "Error"
showClose: true, });
message: res.msg || res.message || "Error" // reject
}); return Promise.reject(new Error(res.msg || res.message || "Error"));
// reject } else {
return Promise.reject(new Error(res.msg || res.message || "Error")); return Promise.resolve(res);
} else { }
return Promise.resolve(res); }
} return Promise.resolve(res);
} },
return Promise.resolve(res); error => {
}, endLoading();
error => { // do something with response error
endLoading(); return Promise.reject(error);
// do something with response error }
return Promise.reject(error); );
}
); export default service;
export default service;
src/views/design/detail/index.vue
<script> <script>
import {ipcRenderer} from "electron"; import { ipcRenderer } from "electron";
export default { export default {
mounted() { mounted() {
let that = this; let that = this;
ipcRenderer.on('getProductionNoInfo', (event, data) => { ipcRenderer.on("getProductionNoInfo", (event, data) => {
console.log(data, 99622) console.log(data, 99622);
that.trackcodeInput(data) that.trackcodeInput(data);
}) });
}, },
watch: { watch: {},
data() {
}, return {
data() { shipForm: { shipmentType: "1" },
return { logistics: [],
shipForm: {shipmentType: '1'}, placeholderText: "",
logistics: [], sendNum: 0,
placeholderText: '', type: 1,
sendNum: 0, isDownloadImage: false,
type: 1, isAutoSure: false,
isDownloadImage: false, currentStatus: "IN_PRODUCTION",
isAutoSure: false, detail: {
currentStatus: 'IN_PRODUCTION', imgList: []
detail: { },
imgList: [] dialogVisible: false,
}, audios: {
dialogVisible: false, weight_warning: require(`../../../assets/audio/weight_warning.mp3`),
audios: { weight_success: require(`../../../assets/audio/weight_success.mp3`),
weight_warning: require(`../../../assets/audio/weight_warning.mp3`), weight_repeat: require(`../../../assets/audio/weight_repeat.mp3`),
weight_success: require(`../../../assets/audio/weight_success.mp3`), weight_search_error: require(`../../../assets/audio/weight_search_error.mp3`),
weight_repeat: require(`../../../assets/audio/weight_repeat.mp3`), weight_search_success: require(`../../../assets/audio/weight_search_success.mp3`)
weight_search_error: require(`../../../assets/audio/weight_search_error.mp3`), },
weight_search_success: require(`../../../assets/audio/weight_search_success.mp3`) productInfo: {},
}, TrackingNumber: ""
productInfo: {}, };
TrackingNumber: '' },
} methods: {
}, changeStatus() {
methods: { if (!this.detail || Object.keys(this.detail).length <= 1) {
changeStatus() { return this.$message.warning("请扫码生产单号");
if (!this.detail || Object.keys(this.detail).length <= 1) { }
return this.$message.warning('请扫码生产单号') this.$confirm(
} `确定${this.type === 1 ? "生产完成" : "确定发货"}？`,
this.$confirm( "提示",
`确定${this.type === 1 ? '生产完成' : '确定发货'}？`, {
'提示', confirmButtonText: "确定",
{ cancelButtonText: "取消",
confirmButtonText: '确定', type: "warning"
cancelButtonText: '取消', }
type: 'warning' ).then(() => {
} this.setData();
).then(() => { });
this.setData() },
}) async setData() {
}, if (this.detail && this.detail.id) {
async setData() { let url =
if (this.detail && this.detail.id) { this.currentStatus == "IN_PRODUCTION"
let url = ? "pod/podProductionInfo/completeDelivery"
this.currentStatus == 'IN_PRODUCTION' : "pod/podProductionInfo/completeShipment";
? 'pod/podProductionInfo/completeDelivery' try {
: 'pod/podProductionInfo/completeShipment' let data =
try { this.currentStatus == "IN_PRODUCTION"
let data = ? {
this.currentStatus == 'IN_PRODUCTION' id: this.detail.id
? { }
id: this.detail.id : {
} list: [this.detail],
: { ...this.shipForm
list: [this.detail], };
...this.shipForm if (data.list) {
} data.list[0].note =
if (data.list) { data.list[0].note && typeof data.list[0].note === "object"
data.list[0].note = ? JSON.stringify(data.list[0].note)
data.list[0].note && typeof data.list[0].note === 'object' : null;
? JSON.stringify(data.list[0].note) }
: null await post(url, data);
} if (this.type === 2) {
await post(url, data) this.sendNum = this.sendNum + 1;
if (this.type === 2) { }
this.sendNum = this.sendNum + 1 this.playAudio("weight_success");
} this.detail = { imgList: [] };
this.playAudio('weight_success') } catch (e) {
this.detail = {imgList: []} console.error(e);
} catch (e) { this.detail = { imgList: [] };
console.error(e) this.playAudio("weight_search_error");
this.detail = {imgList: []} }
this.playAudio('weight_search_error') }
} },
} downloadAllWe(data, designId) {
}, if (!this.detail || Object.keys(this.detail).length <= 1) {
downloadAllWe(data, designId) { return this.$message.warning("请扫码生产单号");
if (!this.detail || Object.keys(this.detail).length <= 1) { }
return this.$message.warning('请扫码生产单号') let params = {
} productionNo: this.detail.podProductionNo,
let params = { method: "POST"
productionNo: this.detail.podProductionNo, };
method: 'POST' if (data === 1) {
} params = {
if (data === 1) { ...params,
params = { ...{
...params, designId
...{ }
designId };
} } else if (data === 2) {
} params = {
} else if (data === 2) { ...params,
params = { ...{
...params, negativeDesignId: designId
...{ }
negativeDesignId: designId };
} }
}
} downloadFile("podDesignCenter/downloadByDesignId", params)
.then(res => {
downloadFile('podDesignCenter/downloadByDesignId', params) const { data, fileName } = res;
.then((res) => { let url = window.URL.createObjectURL(data);
const {data, fileName} = res // 生成一个a标签
let url = window.URL.createObjectURL(data) let link = document.createElement("a");
// 生成一个a标签 link.style.display = "none";
let link = document.createElement('a') link.href = url;
link.style.display = 'none' // 生成时间戳
link.href = url link.download = fileName;
// 生成时间戳 link.click();
link.download = fileName window.URL.revokeObjectURL(url);
link.click() })
window.URL.revokeObjectURL(url) .catch(err => {
}) console.log(err);
.catch((err) => { });
console.log(err) },
}) playAudio(key, message) {
}, let text = "";
playAudio(key, message) { switch (key) {
let text = '' case "weight_search_success":
switch (key) { text = "";
case 'weight_search_success': break;
text = '' case "weight_search_error":
break text = "请录入生产单号";
case 'weight_search_error': break;
text = '请录入生产单号' case "weight_success":
break text = "";
case 'weight_success': break;
text = '' case "weight_repeat":
break text = "称重复录入";
case 'weight_repeat': break;
text = '称重复录入' default:
break text = "请录入跟踪号或重量";
default: break;
text = '请录入跟踪号或重量' }
break if (message || text) this.$message.warning(message || text);
} let audio = document.createElement("audio");
if (message || text) this.$message.warning(message || text) console.log(key);
let audio = document.createElement('audio') audio.src = this.audios[key];
console.log(key) audio.play();
audio.src = this.audios[key] },
audio.play() async trackcodeInput(data) {
}, // if (this.type === 1) {
async trackcodeInput(data) { // if (this.isAutoSure) {
// await this.setData()
// if (this.type === 1) { // }
// if (this.isAutoSure) { // } else {
// await this.setData() // await this.setData()
// } // }
// } else {
// await this.setData() try {
// } let d = JSON.parse(JSON.stringify(data));
try { if (d.note) {
d.note = JSON.parse(d.note);
let d = JSON.parse(JSON.stringify(data)) } else {
d.note = [];
if (d.note) { }
d.note = JSON.parse(d.note) let arr = [];
} else { if (!d.imageAry) {
d.note = [] arr = [
} { url: d.variantImage, title: "正面", id: d.designId },
let arr = [] { url: d.negativeImage, title: "反面", id: d.negativeDesignId }
if (!d.imageAry) { ].filter(el => el.url);
arr = [ } else {
{url: d.variantImage, title: '正面', id: d.designId}, arr =
{url: d.negativeImage, title: '反面', id: d.negativeDesignId} typeof d.imageAry == "string" ? JSON.parse(d.imageAry) : d.imageAry;
].filter((el) => el.url) arr = arr.concat([
} else { { url: d.negativeImage, title: "反面", id: d.negativeDesignId }
arr = ]);
typeof d.imageAry == 'string' ? JSON.parse(d.imageAry) : d.imageAry }
arr = arr.concat([ const result = [];
{url: d.negativeImage, title: '反面', id: d.negativeDesignId} console.log(arr);
]) arr = arr.filter(el => el.url);
} arr = arr.map(el => {
const result = [] return {
console.log(arr) ...el,
arr = arr.filter((el) => el.url) ...{
arr = arr.map((el) => { url: el.url.includes("http")
return { ? el.url
...el, : window.location.origin + "/upload/erp" + el.url
...{ }
url: el.url.includes('http') };
? el.url });
: window.location.origin + '/upload/erp' + el.url
} for (let i = 0; i < arr.length; i += 2) {
} result.push(arr.slice(i, i + 2));
}) }
d.imgList = result;
for (let i = 0; i < arr.length; i += 2) { console.log(d.imgList, "this.detail.imgList ");
result.push(arr.slice(i, i + 2)) this.detail = d;
} // 自动下载素材
d.imgList = result // if (this.isDownloadImage) {
console.log(d.imgList, 'this.detail.imgList ') // this.downloadAllWe()
this.detail = d // }
// 自动下载素材
// if (this.isDownloadImage) { this.playAudio("weight_search_success");
// this.downloadAllWe() // this.$nextTick(() => {
// } // if (this.$refs.trackingNumberRef) {
// this.$refs.trackingNumberRef.focus()
this.playAudio('weight_search_success') // }
// this.$nextTick(() => { // })
// if (this.$refs.trackingNumberRef) { } catch (e) {
// this.$refs.trackingNumberRef.focus() console.error(e);
// } this.productInfo = {};
// }) this.playAudio("weight_search_error");
this.$nextTick(() => {
} catch (e) { if (this.$refs.trackingNumberRef) {
console.error(e) this.$refs.trackingNumberRef.focus();
this.productInfo = {} }
this.playAudio('weight_search_error') });
this.$nextTick(() => { }
if (this.$refs.trackingNumberRef) { }
this.$refs.trackingNumberRef.focus() }
} };
}) </script>
}
} <template>
} <div class="page">
} <div class="sure-btn" v-if="type === 2">
</script> <el-button @click="changeStatus" size="small" type="success">
{{ type === 1 ? "生产完成" : "确定发货" }}
<template> </el-button>
<div class="page"> </div>
<div class="sure-btn" v-if="type=== 2"> <div class="detail-div">
<el-button @click="changeStatus" size="small" type="success"> <div class="detail-content">
{{ type === 1 ? '生产完成' : '确定发货' }} <div class="left">
</el-button> <div class="left-images">
<el-carousel
</div> v-if="detail.imgList.length > 0"
<div class="detail-div"> style="height: 100%"
<div class="detail-content"> :autoplay="false"
<div class="left"> indicator-position="none"
<div class="left-images"> >
<el-carousel <el-carousel-item
v-if="detail.imgList.length > 0" style="height: 100%"
style="height: 100%" :key="index"
:autoplay="false" v-for="(item, index) in detail.imgList"
indicator-position="none"> >
<el-carousel-item <el-row :gutter="10" style="width: 100%; height: 100%">
style="height: 100%" <el-col
:key="index" style="height: 100%"
v-for="(item, index) in detail.imgList"> v-for="(it, i) in item"
<el-row :gutter="10" style="width: 100%; height: 100%"> :key="i"
<el-col :span="12"
style="height: 100%" >
v-for="(it, i) in item" <div class="left-image">
:key="i" <b v-show="it.title && it.url">
:span="12"> {{ it.title }}
<div class="left-image"> <span
<b v-show="it.title && it.url"> style="
{{ it.title }} text-decoration: underline;
<span cursor: pointer;
style=" color: blue;
text-decoration: underline; "
cursor: pointer; @click="
color: blue; downloadAllWe(
" it.title && it.title === '正面' ? 1 : 2,
@click=" it.id
downloadAllWe( )
it.title && it.title === '正面' ? 1 : 2, "
it.id v-if="it.id"
) >
" （DID：{{ it.id }}）
v-if="it.id"> </span>
（DID：{{ it.id }}） </b>
</span> <img :src="it.url" alt="" />
</b> </div>
<img :src="it.url" alt=""/> </el-col>
</div> </el-row>
</el-col> </el-carousel-item>
</el-row> </el-carousel>
</el-carousel-item> </div>
</el-carousel> </div>
</div> <div class="right">
</div> <!-- <div-->
<div class="right"> <!-- class="input"-->
<!-- <div--> <!-- v-if="!detailData || Object.keys(detailData).length === 0">-->
<!-- class="input"--> <!--&lt;!&ndash; <el-input&ndash;&gt;-->
<!-- v-if="!detailData || Object.keys(detailData).length === 0">--> <!--&lt;!&ndash; v-model="TrackingNumber"&ndash;&gt;-->
<!--&lt;!&ndash; <el-input&ndash;&gt;--> <!--&lt;!&ndash; :placeholder="placeholderText"&ndash;&gt;-->
<!--&lt;!&ndash; v-model="TrackingNumber"&ndash;&gt;--> <!--&lt;!&ndash; style="width: 660px; margin-right: 10px"&ndash;&gt;-->
<!--&lt;!&ndash; :placeholder="placeholderText"&ndash;&gt;--> <!--&lt;!&ndash; clearable&ndash;&gt;-->
<!--&lt;!&ndash; style="width: 660px; margin-right: 10px"&ndash;&gt;--> <!--&lt;!&ndash; ref="trackingNumberRef"&ndash;&gt;-->
<!--&lt;!&ndash; clearable&ndash;&gt;--> <!--&lt;!&ndash; size="medium"&ndash;&gt;-->
<!--&lt;!&ndash; ref="trackingNumberRef"&ndash;&gt;--> <!--&lt;!&ndash; @keyup.enter.native="trackcodeInput()"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash; size="medium"&ndash;&gt;--> <!-- <el-button type="primary" size="medium" @click="trackcodeInput()">-->
<!--&lt;!&ndash; @keyup.enter.native="trackcodeInput()"></el-input>&ndash;&gt;--> <!-- 查询-->
<!-- <el-button type="primary" size="medium" @click="trackcodeInput()">--> <!-- </el-button>-->
<!-- 查询--> <!-- </div>-->
<!-- </el-button>-->
<!-- </div>--> <div class="div-text">
<div class="div-text"> <div class="div-content">
<b>生产单信息</b> <div :title="String(detail?.userMark)" class="div-item">
<div class="div-content"> <span style="font-size: 18px">客户</span>
<div :title="detail.podProductionNo" class="div-item"> <p style="color: red; font-size: 30px">
<span>生产单号</span> {{ detail?.userMark }}
<p>{{ detail.podProductionNo }}</p> </p>
<p </div>
style="margin-left: 5px" <div
v-if="detail.podProductionNo" :title="String(detail?.factoryOrderNumber)"
:style="{ class="div-item"
color: detail.customizedQuantity > 1 ? 'red' : '#67C23A' >
}"> <span style="font-size: 18px">订单号</span>
{{ detail.customizedQuantity > 1 ? '多' : '单' }} <p style="color: red; font-size: 22px">
</p> {{ detail?.factoryOrderNumber }}
</div> </p>
<div :title="detail.podProcessName" class="div-item"> </div>
<span>生产工艺</span> </div>
<p>{{ detail.podProcessName }}</p> </div>
</div> <div class="div-text">
<div :title="detail.baseSku" class="div-item"> <b>生产单信息</b>
<span>基版</span>
<p>{{ detail.baseSku }}</p> <div class="div-content">
</div> <div :title="detail.podProductionNo" class="div-item">
<div :title="detail.supplierItemNo" class="div-item"> <span>生产单号</span>
<span>货号</span> <p>{{ detail.factorySubOrderNumber }}</p>
<p>{{ detail.supplierItemNo }}</p> <p
</div> style="margin-left: 5px"
<div :title="detail.variantSku" class="div-item"> v-if="detail.podProductionNo"
<span>变体SKU</span> :style="{
<p>{{ detail.variantSku }}</p> color: detail.customizedQuantity > 1 ? 'red' : '#67C23A'
</div> }"
<div :title="detail.categoryName" class="div-item"> >
<span>类别</span> {{ detail.customizedQuantity > 1 ? "多" : "单" }}
<p>{{ detail.categoryName }}</p> </p>
</div> </div>
<div :title="detail.color" class="div-item"> <div :title="detail.process" class="div-item">
<span>颜色</span> <span>生产工艺</span>
<p>{{ detail.color }}</p> <p>{{ detail.process }}</p>
</div> </div>
<div :title="detail.size" class="div-item"> <div :title="detail.baseSku" class="div-item">
<span>尺寸</span> <span>基版</span>
<p>{{ detail.size }}</p> <p>{{ detail.baseSku }}</p>
</div> </div>
<div :title="detail.material" class="div-item"> <div :title="detail.supplierItemNo" class="div-item">
<span>材质</span> <span>货号</span>
<p>{{ detail.material }}</p> <p>{{ detail.supplierItemNo }}</p>
</div> </div>
<div :title="detail.batchNo" class="div-item"> <div :title="detail.variantSku" class="div-item">
<span>批次号</span> <span>变体SKU</span>
<p>{{ detail.batchNo }}</p> <p>{{ detail.variantSku }}</p>
</div> </div>
<div <div :title="detail.num" class="div-item">
:title="detail.supplyMerchantCode" <span>数量</span>
v-if="currentStatus !== 'TO_BE_ASSIGN'" <p>{{ detail.num }}</p>
class="div-item"> </div>
<span>供应商编号</span> <div :title="detail.color" class="div-item">
<p>{{ detail.supplyMerchantCode }}</p> <span>颜色</span>
</div> <p>{{ detail.baseSku?detail.baseSku.split("_")[1]:null }}</p>
<div :title="detail.shopNumber" class="div-item"> </div>
<span>店铺单号</span> <div :title="detail.size" class="div-item">
<p>{{ detail.shopNumber }}</p> <span>尺寸</span>
</div> <p>{{ detail.size }}</p>
<div :title="detail.shopShortName" class="div-item"> </div>
<span>店铺简称</span> <div :title="detail.shopNumber" class="div-item">
<p>{{ detail.shopShortName }}</p> <span>店铺单号</span>
</div> <p>{{ detail.shopNumber }}</p>
<div :title="detail.expectDeliveryTime" class="div-item"> </div>
<span>期望交货时间</span>
<p>{{ detail.expectDeliveryTime }}</p> <div :title="detail.expectDeliveryTime" class="div-item">
</div> <span>期望交货时间</span>
<div :title="detail.purchaseUserName" class="div-item"> <p>{{ detail.expectDeliveryTime }}</p>
<span>采购员</span> </div>
<p>{{ detail.purchaseUserName }}</p>
</div> <div :title="detail.productionConfirmTime" class="div-item">
<div :title="detail.productionConfirmTime" class="div-item"> <span>生产确认时间</span>
<span>生产确认时间</span> <p>{{ detail.startStockingTime }}</p>
<p>{{ detail.productionConfirmTime }}</p> </div>
</div> </div>
<div :title="detail.followerName" class="div-item"> </div>
<span>跟单员</span> <div
<p>{{ detail.followerName }}</p> class="form"
</div> style="margin: 15px 0; background: #4168ff; border-radius: 5px"
<div :title="detail.actualDeliveryTime" class="div-item"> v-if="type === 2"
<span>实际交货时间</span> >
<p>{{ detail.actualDeliveryTime }}</p> <el-form
</div> :model="shipForm"
<div :title="detail.storedName" class="div-item"> ref="form"
<span>入库人</span> label-width="80px"
<p>{{ detail.storedName }}</p> :inline="false"
</div> size="small"
<div :title="detail.storedTime" class="div-item"> >
<span>入库时间</span> <el-form-item style="margin-top: 10px" label="发货方式">
<p>{{ detail.storedTime }}</p> <el-select
</div> style="width: 384px"
<div :title="detail.replenishmentNumber" class="div-item"> v-model="shipForm.shipmentType"
<span>补胚数量</span> value-key=""
<p>{{ detail.replenishmentNumber }}</p> placeholder="请选择"
</div> >
<div <el-option label="送货上门" value="1"></el-option>
:title="detail.shipmentType == 1 ? '送货上门' : '快递'" <el-option label="快递" value="2"></el-option>
class="div-item"> </el-select>
<span>发货方式</span> </el-form-item>
<p v-if="detail.shipmentType"> <el-form-item
{{ detail.shipmentType == 1 ? '送货上门' : '快递' }} label="物流方式"
</p> v-if="shipForm.shipmentType == '2'"
</div> >
</div> <el-select
</div> v-model="shipForm.shipmentWay"
<div style="width: 384px"
class="form" placeholder="请选择"
style="margin: 15px 0; background: #4168ff; border-radius: 5px" >
v-if="type === 2"> <el-option
<el-form v-for="(item, index) in logistics"
:model="shipForm" :key="index"
ref="form" :label="item.name"
label-width="80px" :value="item.name"
:inline="false" ></el-option>
size="small"> </el-select>
<el-form-item style="margin-top: 10px" label="发货方式"> </el-form-item>
<el-select <el-form-item
style="width: 384px" label="物流单号"
v-model="shipForm.shipmentType" v-if="shipForm.shipmentType == '2'"
value-key="" >
placeholder="请选择"> <el-input
<el-option label="送货上门" value="1"></el-option> style="width: 384px"
<el-option label="快递" value="2"></el-option> v-model="shipForm.shipmentNumber"
</el-select> placeholder="请输入"
</el-form-item> ></el-input>
<el-form-item </el-form-item>
label="物流方式" <el-form-item
v-if="shipForm.shipmentType == '2'"> label="物流费用"
<el-select v-if="shipForm.shipmentType == '2'"
v-model="shipForm.shipmentWay" >
style="width: 384px" <el-input
placeholder="请选择"> style="width: 384px"
<el-option v-model="shipForm.shipmentFreight"
v-for="(item, index) in logistics" placeholder="请输入"
:key="index" ></el-input>
:label="item.name" </el-form-item>
:value="item.name"></el-option> </el-form>
</el-select> </div>
</el-form-item>
<el-form-item <div
label="物流单号" v-if="type !== 2"
v-if="shipForm.shipmentType == '2'"> class="div-text"
<el-input style="
style="width: 384px" flex: 1;
v-model="shipForm.shipmentNumber" margin-top: 30px;
placeholder="请输入"></el-input> flex-shrink: 0;
</el-form-item> display: flex;
<el-form-item flex-direction: column;
label="物流费用" "
v-if="shipForm.shipmentType == '2'"> >
<el-input <div style="height: 100%" class="div-content" v-if="detail.note">
style="width: 384px" <b style="position: absolute; top: -12px">客户留言信息</b>
v-model="shipForm.shipmentFreight" <div
placeholder="请输入"></el-input> v-for="(item, index) in detail.note"
</el-form-item> :key="index"
</el-form> class="div-item"
</div> >
<!-- <div--> <span>{{ item.prop }}:</span>
<!-- class="btn"--> <p>
<!-- v-if="type !== 2">--> {{ item.value }}
<!-- <div class="btn-sure">--> </p>
<!-- <el-button style="width: 100%; height: 100%; font-size: 18px" size="large" @click="changeStatus"--> </div>
<!-- type="success">--> </div>
<!-- {{ type === 1 ? '生产完成' : '确定发货' }}--> </div>
<!-- </el-button>--> <div
<!-- &lt;!&ndash; <div class="check">&ndash;&gt;--> v-if="type === 2"
<!-- &lt;!&ndash; <el-checkbox v-if="type===1" v-model="isAutoSure">自动完成上一单</el-checkbox>&ndash;&gt;--> class="div-text"
<!-- &lt;!&ndash; </div>&ndash;&gt;--> style="
flex: 1;
<!-- </div>--> flex-shrink: 0;
<!-- &lt;!&ndash; <div class="btn-down">&ndash;&gt;--> display: flex;
<!-- &lt;!&ndash; <div class="check">&ndash;&gt;--> flex-direction: column;
<!-- &lt;!&ndash; <el-checkbox size="large" v-model="isDownloadImage">扫码下载素材</el-checkbox>&ndash;&gt;--> "
<!-- &lt;!&ndash; </div>&ndash;&gt;--> >
<!-- &lt;!&ndash; <el-button&ndash;&gt;--> <div style="height: 100%" class="div-content">
<!-- &lt;!&ndash; size="medium"&ndash;&gt;--> <b style="position: absolute; top: -12px">本次发货数量</b>
<!-- &lt;!&ndash; @click="downloadAllWe"&ndash;&gt;--> <div
<!-- &lt;!&ndash; style="width: 100%; height: 100%; font-size: 18px"&ndash;&gt;--> class="div-item"
<!-- &lt;!&ndash; type="primary">&ndash;&gt;--> style="
<!-- &lt;!&ndash; 下载素材&ndash;&gt;--> display: flex;
<!-- &lt;!&ndash; </el-button>&ndash;&gt;--> align-items: center;
<!-- &lt;!&ndash; </div>&ndash;&gt;--> width: 100%;
height: 100%;
<!-- </div>--> font-size: 40px;
<div justify-content: center;
v-if="type !== 2" "
class="div-text" >
style=" <h2 style="color: red; font-weight: bold">{{ sendNum }}</h2>
flex: 1; </div>
margin-top: 30px; </div>
flex-shrink: 0; </div>
display: flex; </div>
flex-direction: column; </div>
">
<div style="height: 100%" class="div-content" v-if="detail.note"> </div>
<b style="position: absolute; top: -12px">客户留言信息</b> </div>
<div </template>
v-for="(item, index) in detail.note"
:key="index" <style lang="less" scoped>
class="div-item"> ::v-deep {
<span>{{ item.prop }}:</span> .el-dialog__body {
<p> box-sizing: border-box;
{{ item.value }} flex: 1;
</p> flex-shrink: 0;
</div> overflow: hidden;
</div> }
</div> .el-dialog {
<div display: flex;
v-if="type === 2" height: calc(100% - 50px);
class="div-text" margin-top: 50px;
style=" flex-direction: column;
flex: 1; }
flex-shrink: 0; .el-carousel__container {
display: flex; height: 100%;
flex-direction: column; }
"> .el-form-item__label {
<div style="height: 100%" class="div-content"> font-weight: bold;
<b style="position: absolute; top: -12px">本次发货数量</b> color: white;
<div }
class="div-item" .el-dialog__title {
style=" font-weight: bold;
display: flex; font-size: 37px;
align-items: center; color: black;
width: 100%; position: relative;
height: 100%; left: 47%;
font-size: 40px; top: 13px;
justify-content: center; }
"> }
<h2 style="color: red; font-weight: bold">{{ sendNum }}</h2> .sure-btn {
</div> position: absolute;
</div> right: 62px;
</div> top: 14px;
</div> }
</div> .detail-div {
<div display: flex;
class="detail-images" height: 100%;
v-if="detail && Object.keys(detail).length > 1"> flex-direction: column;
<div class="scroll-list"> justify-content: space-between;
<div class="img-title"> .detail-images {
<b>商品信息</b> .scroll-list {
<div class="id"> background: #ececec;
<img src="@/assets/id.png" alt=""/> display: flex;
<span>{{ detail.variantSku.split('_')[0] }}</span> height: 100px;
</div> width: 100%;
</div> padding: 5px;
<div class="scroll-content"> .scroll-content {
<div margin-left: 10px;
class="scroll-item" overflow-x: auto;
v-for="(it, i) in detail.colorImageList" overflow-y: hidden;
:key="i"> flex: 1;
<el-image display: flex;
style="width: 100%; height: 100%" flex-wrap: nowrap;
:src="it" flex-shrink: 0;
:preview-src-list="[it]"></el-image> .scroll-item {
</div> height: 100%;
</div> min-width: 100px;
</div> background: white;
</div> width: 80px;
</div> margin-right: 5px;
</div> }
}
</template> .img-title {
display: flex;
<style lang="less" scoped> flex-direction: column;
::v-deep { justify-content: center;
.el-dialog__body { background: white;
box-sizing: border-box; padding: 10px;
flex: 1; b {
flex-shrink: 0; text-align: center;
overflow: hidden; color: black;
} font-weight: bold;
.el-dialog { font-size: 16px;
display: flex; margin-bottom: 15px;
height: calc(100% - 50px); }
margin-top: 50px; .id {
flex-direction: column; display: flex;
} align-items: center;
.el-carousel__container { padding: 3px 5px;
height: 100%; background: #ececec;
} justify-content: center;
.el-form-item__label { img {
font-weight: bold; width: 15px;
color: white; margin-right: 8px;
} }
.el-dialog__title { }
font-weight: bold; }
font-size: 37px; }
color: black; }
position: relative; .detail-content {
left: 47%; display: flex;
top: 13px; width: 100%;
} flex: 1;
} margin-bottom: 10px;
.sure-btn { flex-shrink: 0;
position: absolute; justify-content: space-between;
right: 62px; }
top: 14px; .right {
} width: 710px;
.detail-div { height: 100%;
display: flex; display: flex;
height: 100%; flex-direction: column;
flex-direction: column; .btn {
justify-content: space-between; margin: 20px 0;
.detail-images { display: flex;
.scroll-list { align-items: center;
background: #ececec; justify-content: space-between;
display: flex; height: 50px;
height: 100px; width: 100%;
width: 100%; }
padding: 5px; .div-text {
.scroll-content { .div-content {
margin-left: 10px; display: flex;
overflow-x: auto; flex-wrap: wrap;
overflow-y: hidden; justify-content: space-between;
flex: 1; align-items: flex-start;
display: flex; padding: 15px 10px;
flex-wrap: nowrap; box-sizing: border-box;
flex-shrink: 0; position: relative;
.scroll-item { border: 1px solid #ececec;
height: 100%; .div-item {
min-width: 100px; width: 50%;
background: white; margin-bottom: 10px;
width: 80px; font-size: 15px;
margin-right: 5px; display: flex;
} align-items: center;
} p {
.img-title { font-weight: 400;
display: flex; color: black;
flex-direction: column; }
justify-content: center; span {
background: white; display: inline-block;
padding: 10px; text-align: right;
b { width: 100px;
text-align: center; &::after {
color: black; content: ":";
font-weight: bold; margin: 0 3px;
font-size: 16px; }
margin-bottom: 15px; }
} }
.id { }
display: flex; b {
align-items: center; position: relative;
padding: 3px 5px; background: white;
background: #ececec; top: 9px;
justify-content: center; left: 13px;
img { padding: 0 10px;
width: 15px; font-size: 18px;
margin-right: 8px; color: black;
} z-index: 3;
} }
} }
} .input {
} display: flex;
.detail-content { align-items: center;
display: flex; margin: 30px 0;
width: 100%; }
flex: 1; }
margin-bottom: 10px; .left {
flex-shrink: 0; flex: 1;
justify-content: space-between; flex-shrink: 0;
} margin-right: 20px;
.right { overflow: hidden;
width: 710px; display: flex;
height: 100%; justify-content: center;
display: flex; align-items: center;
flex-direction: column; .left-image {
.btn { display: flex;
margin: 20px 0; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
justify-content: space-between; img {
height: 50px; height: auto;
width: 100%; width: 100%;
} max-height: 90%;
.div-text { }
.div-content { b {
display: flex; color: black;
flex-wrap: wrap; font-size: 18px;
justify-content: space-between; margin-bottom: 15px;
align-items: flex-start; }
padding: 15px 10px; }
box-sizing: border-box; .left-images {
position: relative; display: flex;
border: 1px solid #ececec; width: 95%;
.div-item { height: 100%;
width: 50%; flex-direction: column;
margin-bottom: 10px; b {
font-size: 15px; color: black;
display: flex; text-align: center;
align-items: center; margin-bottom: 15px;
p { }
font-weight: 400; }
color: black; }
} }
span { .detail-div .right .btn .btn-sure,
display: inline-block; .detail-div .right .btn .btn-down {
text-align: right; width: 100%;
width: 100px; position: relative;
&::after { }
content: ':'; .detail-div .right .btn .btn-sure .check,
margin: 0 3px; .detail-div .right .btn .btn-down .check {
} position: absolute;
} width: 144px;
} height: 100%;
} background: transparent;
b { display: flex;
position: relative; align-items: center;
background: white; justify-content: center;
top: 9px; right: 0;
left: 13px; top: 1px;
padding: 0 10px; }
font-size: 18px; .btn {
color: black; position: relative;
z-index: 3; .check {
} ::v-deep {
} .el-checkbox__inner {
.input { background-color: transparent !important;
display: flex; border-color: white !important;
align-items: center; width: 12px;
margin: 30px 0; height: 12px;
} &::after {
} left: 3px;
.left { }
flex: 1; }
flex-shrink: 0; .el-checkbox__label {
margin-right: 20px; padding-left: 5px;
overflow: hidden; font-size: 12px;
display: flex; color: white !important;
justify-content: center; }
align-items: center; }
.left-image { }
display: flex; }
height: 100%; .page {
flex-direction: column; width: 100%;
justify-content: center; height: 100%;
img { }
height: auto; p {
width: 100%; margin: 0;
max-height: 90%; }
} </style>
b {
color: black;
font-size: 18px;
margin-bottom: 15px;
}
}
.left-images {
display: flex;
width: 95%;
height: 100%;
flex-direction: column;
b {
color: black;
text-align: center;
margin-bottom: 15px;
}
}
}
}
.detail-div .right .btn .btn-sure, .detail-div .right .btn .btn-down {
width: 100%;
position: relative;
}
.detail-div .right .btn .btn-sure .check, .detail-div .right .btn .btn-down .check {
position: absolute;
width: 144px;
height: 100%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
right: 0;
top: 1px;
}
.btn {
position: relative;
.check {
::v-deep {
.el-checkbox__inner {
background-color: transparent !important;
border-color: white !important;
width: 12px;
height: 12px;
&::after {
left: 3px;
}
}
.el-checkbox__label {
padding-left: 5px;
font-size: 12px;
color: white !important;
}
}
}
}
.page {
width: 100%;
height: 100%;
}
p {
margin: 0;
}
</style>
src/views/design/head/index.vue
<script> <script>
import bus from "@/bus"; import bus from "@/bus";
import PrintDialog from "./printDialog.vue"; import PrintDialog from "./printDialog.vue";
import { ipcRenderer } from "electron"; 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";
export default { export default {
components: { PrintDialog, UpdateDialog }, components: { PrintDialog, UpdateDialog },
props: { props: {
user: { user: {
default: { default: {
avatar: "" avatar: "",
}, factory: {}
type: Object },
}, type: Object
company: { }
default: {}, },
type: Object data() {
} return {
}, checkList: [],
data() { cacheList: [
return { {
checkList: [], label: "清除当前登录信息",
cacheList: [ value: "token"
{ },
label: "清除当前登录信息", {
value: "token" label: "登录记录",
}, value: "userList"
{ },
label: "登录记录", {
value: "userList" label: "打印预设",
},{ value: "print-setting"
label: "公司信息", },
value: "company" {
}, { label: "系统设置",
label: "打印预设", value: "setting"
value: "print-setting" }
}, { ],
label: "系统授权信息", selectGridIndex: 0,
value: "deviceId" pkg,
}, { actionIndex: -1,
label: "系统设置", isAutoFinish: false,
value: "setting" cacheVisible: false,
} showPrintDialog: false,
], productionNo: "",
selectGridIndex: 0, setting: {
pkg, gridShow: 1,
actionIndex: -1, gridValue: 0,
isAutoFinish: false, unit: "mm",
cacheVisible: false, language: "cn",
showPrintDialog: false, autoPrint: false,
productionNo: "", gridSpacing: 10
setting: { },
gridShow: 1, imgList: [],
gridValue: 0, detail: null,
unit: "mm", selectBgColor: "#ececec",
language: "cn", predefineColors: [
autoPrint: false, "#ff4500",
gridSpacing: 10 "#ff8c00",
}, "#ffd700",
imgList: [], "#90ee90",
detail: null, "#00ced1",
selectBgColor: "#ececec", "#1e90ff",
predefineColors: [ "#c71585",
"#ff4500", "rgba(255, 69, 0, 0.68)",
"#ff8c00", "rgb(255, 120, 0)",
"#ffd700", "hsv(51, 100, 98)",
"#90ee90", "hsva(120, 40, 94, 0.5)",
"#00ced1", "hsl(181, 100%, 37%)",
"#1e90ff", "hsla(209, 100%, 56%, 0.73)",
"#c71585", "#c7158577"
"rgba(255, 69, 0, 0.68)", ],
"rgb(255, 120, 0)", grid
"hsv(51, 100, 98)", };
"hsva(120, 40, 94, 0.5)", },
"hsl(181, 100%, 37%)", computed: {
"hsla(209, 100%, 56%, 0.73)", actionList() {
"#c7158577" return this.$store.getters.getActionList;
], }
grid },
}; mounted() {
}, console.log(pkg, "pkg");
computed: { this.$nextTick(() => {
avatar() { this.$refs.searchRef.focus();
if (this.user && this.user.avatar && this.company.domain) { });
console.log(this.user, 9); },
console.log(this.company, 8); created() {
let host = this.company.domain; if (this.$dataStore.get("setting")) {
if (host.includes("console")) { this.setting = this.$dataStore.get("setting");
host = host.replace(".jomalls.com", ".joshine.cn"); } else {
} this.$dataStore.set("setting", this.setting);
let avatar = this.user.avatar.includes("http") }
? this.user.avatar },
: `https://${host}/erpimg/${this.user.avatar}`; watch: {
console.log(avatar); setting: {
return avatar; handler() {
} this.$dataStore.set("setting", this.setting);
return ""; bus.$emit("busEmit", { type: "updateSystemSetting" });
}, },
actionList() { deep: true
return this.$store.getters.getActionList; }
} },
}, methods: {
mounted() { checkUpdate() {
console.log(pkg, "pkg"); this.$refs.updateDialog.checkUpdate().then(data => {
this.$nextTick(() => { if (data) {
this.$refs.searchRef.focus(); // 有新版本更新
}); this.$refs.updateDialog.open(data);
}, } else {
created() { this.$message.warning("已是最新版本");
if (this.$dataStore.get("setting")) { }
this.setting = this.$dataStore.get("setting"); });
} else { },
this.$dataStore.set("setting", this.setting); dropdownCommand(v) {
} switch (v) {
}, case "logout":
watch: { this.$confirm("是否退出登录?", "提示", {
setting: { confirmButtonText: "确定",
handler() { cancelButtonText: "取消",
this.$dataStore.set("setting", this.setting); type: "warning"
bus.$emit("busEmit", { type: "updateSystemSetting" }); })
}, .then(() => {
deep: true this.$dataStore.delete("user");
} this.$router.push("/");
}, })
methods: { .catch(() => {});
checkUpdate() { break;
this.$refs.updateDialog.checkUpdate().then(data => {
if (data) { case "cache":
// 有新版本更新 this.checkList = [];
this.$refs.updateDialog.open(data); this.cacheVisible = true;
} else { break;
this.$message.warning("已是最新版本"); }
} },
}); async setData(data) {
}, if (!data) return this.$message.warning("请扫描生产单号");
dropdownCommand(v) { await this.$api.post("/completeDelivery", { id: data.id }).then(() => {});
switch (v) { this.$message.success("操作成功");
case "logout": },
this.$confirm("是否退出登录?", "提示", { async sureData() {
confirmButtonText: "确定", if (!this.detail || Object.keys(this.detail).length <= 1) {
cancelButtonText: "取消", return this.$message.warning("请扫描生产单号");
type: "warning" }
}) this.$confirm(`确定生产完成？`, "提示", {
.then(() => { confirmButtonText: "确定",
this.$dataStore.delete("user"); cancelButtonText: "取消",
this.$router.push("/"); type: "warning"
}) }).then(async () => {
.catch(() => { await this.setData(this.detail);
}); });
break; },
case "company": clearCache() {
this.$confirm("是否切换系统?", "提示", { if (this.checkList.length === 0) {
confirmButtonText: "确定", return this.$message.warning("请选择要清除的数据");
cancelButtonText: "取消", }
type: "warning" this.$confirm("是否确定清除?", "提示", {
}) confirmButtonText: "确定",
.then(() => { cancelButtonText: "取消",
this.$dataStore.delete("company"); type: "warning"
this.$dataStore.delete("user"); })
this.$router.push("/"); .then(() => {
}) for (let k of this.checkList) {
.catch(() => { if (k === "print-setting" || k === "deviceId") {
}); let list = Object.keys(this.$dataStore.store).filter(el =>
break; el.includes(k)
case "cache": );
this.checkList = []; list.forEach(el => {
this.cacheVisible = true; this.$dataStore.delete(el);
break; });
} } else if (k === "token") {
}, this.$dataStore.delete("token");
async setData(data) { this.$dataStore.delete("user");
if (!data) return this.$message.warning("请扫描生产单号"); } else {
await this.$api.post("/completeDelivery", { id: data.id }).then(() => { if (this.$dataStore.get(k)) {
}); this.$dataStore.delete(k);
this.$message.success("成功生产完成"); }
}, }
async sureData() { }
if (!this.detail || Object.keys(this.detail).length <= 1) { window.location.reload();
return this.$message.warning("请扫描生产单号"); })
} .catch(() => {});
this.$confirm(`确定生产完成？`, "提示", { },
confirmButtonText: "确定", async downloadImage() {
cancelButtonText: "取消", if (!this.detail || Object.keys(this.detail).length === 0)
type: "warning" return this.$message.warning("请扫描生产单号");
}).then(async () => { let params = {
await this.setData(this.detail); productionNo: this.detail.factorySubOrderNumber,
}); imgList: this.imgList
}, };
clearCache() {
if (this.checkList.length === 0) { let res = await this.$api.post("/downloadByDesignId", params);
return this.$message.warning("请选择要清除的数据"); this.$message.success(res.msg);
} },
this.$confirm("是否确定清除?", "提示", { async getDataInfo() {
confirmButtonText: "确定", if (
cancelButtonText: "取消", this.detail &&
type: "warning" Object.keys(this.detail).length > 0 &&
}) this.isAutoFinish
.then(() => { ) {
for (let k of this.checkList) { await this.setData(this.detail);
if (k === "print-setting" || k === "deviceId") { }
let list = Object.keys(this.$dataStore.store).filter(el => el.includes(k)); if (this.productionNo === "")
list.forEach(el => { return this.$message.warning("请录入生产单号");
this.$dataStore.delete(el); try {
}); //查找生产单号信息传给第二个显示器
}else if (k === "token" ) { const findByPodProductionNo = await this.$api.post(
this.$dataStore.delete('token'); "/findByPodProductionNo",
this.$dataStore.delete('user'); {
} else { factorySubOrderNumber: this.productionNo
if (this.$dataStore.get(k)) { }
this.$dataStore.delete(k); );
} this.detail = findByPodProductionNo.data;
} console.log(findByPodProductionNo.data, "findByPodProductionNo.data");
} ipcRenderer.send("win-subScreen", findByPodProductionNo.data);
window.location.reload(); // 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示
}) let res = await this.$api.post("/downloadBySubOrderNumber", {
.catch(() => { subOrderNumber: this.productionNo
}); });
}, this.imgList = [];
async downloadImage() { res.data.forEach(el => {
if (!this.detail || Object.keys(this.detail).length === 0) this.imgList = this.imgList.concat(el.list || []);
return this.$message.warning("请扫描生产单号"); });
let params = { this.$dataStore.set("production_no", this.productionNo);
productionNo: this.detail.podProductionNo, if (res.data.length === 0)
imgList: this.imgList return this.$message.warning("未找到素材图！");
}; let arr = [];
res.data.forEach(el => {
let res = await this.$api.post("/downloadByDesignId", params); if (el.list) {
this.$message.success(res.msg); el.list.forEach(it => {
}, arr.push(it);
async getDataInfo() { });
if ( }
this.detail && });
Object.keys(this.detail).length > 0 && console.log(arr, "arr");
this.isAutoFinish res.data = arr.filter(el => el.type !== 1);
) { bus.$emit("busEmit", { type: "sendFile", value: res.data });
await this.setData(this.detail);
} this.productionNo = "";
if (this.productionNo === "")
return this.$message.warning("请录入生产单号"); this.$refs.searchRef.focus();
try { } catch (err) {
//查找生产单号信息传给第二个显示器 this.productionNo = "";
const findByPodProductionNo = await this.$api.post( this.$refs.searchRef.focus();
"/findByPodProductionNo", }
{ },
podProductionNo: this.productionNo, changeActionIndex(t) {
status: "IN_PRODUCTION" let index = this.actionIndex;
} if (t === "+") {
); if (index === this.$store.state.actionList.length - 1) return;
this.detail = findByPodProductionNo.data; this.actionIndex = this.actionIndex + 1;
ipcRenderer.send("win-subScreen", findByPodProductionNo.data); } else {
// 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示 if (index === 0) return;
let res = await this.$api.post("/getPodProductionInfo", { this.actionIndex = this.actionIndex - 1;
productionNo: this.productionNo }
}); console.log(this.actionIndex, 88);
this.$dataStore.set('production_no',this.productionNo) bus.$emit("busEmit", { type: "index", value: this.actionIndex });
if (res.data.length === 0) this.$store.commit("changeActionIndex", this.actionIndex);
return this.$message.warning("未找到素材图！"); },
let arr = []; setDefaultSetting() {
res.data.forEach(el => { this.$store.commit("setDefaultSetting");
arr.push(el); this.setting = {
if (el.list) { gridShow: 1,
el.list.forEach(it => { gridValue: 0,
arr.push({ unit: "mm",
...it, language: "cn",
...{ autoPrint: false,
designId: el.designId gridSpacing: 10
} };
}); this.$message.success("重置应用程序设置成功");
}); },
} settingChange(field, value) {
}); if (value === "inch") {
console.log(arr, "arr"); this.setting.gridSpacing = 1;
res.data = arr.filter(el => el.type !== 1); } else if (value === "mm") {
bus.$emit("busEmit", { type: "sendFile", value: res.data }); this.setting.gridSpacing = 20;
}
this.productionNo = ""; this.$store.commit("updateSystemSetting", { field, value });
},
this.$refs.searchRef.focus();
} catch (err) { setBg() {
this.productionNo = ""; bus.$emit("busEmit", { type: "bg", value: this.selectBgColor });
this.$refs.searchRef.focus(); },
} async uploadImage(f) {
}, let formData = new FormData();
changeActionIndex(t) { formData.append("file", f);
let index = this.actionIndex; let { data } = await this.$api.post("/uploadImage", formData, {
if (t === "+") { headers: {
if (index === this.$store.state.actionList.length - 1) return; "Content-Type": "application/x-www-form-urlencoded"
this.actionIndex = this.actionIndex + 1; }
} else { });
if (index === 0) return; bus.$emit("busEmit", { type: "uploadImage", value: data });
this.actionIndex = this.actionIndex - 1; return false;
} },
console.log(this.actionIndex, 88); command(i) {
bus.$emit("busEmit", { type: "index", value: this.actionIndex }); this.selectGridIndex = i;
this.$store.commit("changeActionIndex", this.actionIndex); this.setting.gridValue = i;
}, this.$store.commit("updateSystemSetting", {
setDefaultSetting() { field: "gridValue",
this.$store.commit("setDefaultSetting"); value: this.grid[i]
this.setting = { });
gridShow: 1, bus.$emit("busEmit", { type: "grid", value: this.grid[i] });
gridValue: 0, }
unit: "mm", }
language: "cn", };
autoPrint: false, </script>
gridSpacing: 10 <style scoped>
}; .page-header {
this.$message.success("重置应用程序设置成功"); background-color: #ececec;
}, display: flex;
settingChange(field, value) { justify-content: space-between;
if (value === "inch") { height: 40px;
this.setting.gridSpacing = 1; padding: 5px;
} else if (value === "mm") { }
this.setting.gridSpacing = 20;
} .left-btn {
this.$store.commit("updateSystemSetting", { field, value }); display: flex;
}, }
</style>
setBg() { <template>
bus.$emit("busEmit", { type: "bg", value: this.selectBgColor }); <div>
}, <div class="page-header">
async uploadImage(f) { <div class="left-btn">
let formData = new FormData(); <!-- <el-tooltip content="文件">-->
formData.append("file", f); <!-- <el-button style="margin-right: 8px" size="small">文件</el-button>-->
let { data } = await this.$api.post("/uploadImage", formData, { <!-- </el-tooltip>-->
headers: {
"Content-Type": "application/x-www-form-urlencoded" <el-dropdown trigger="click" @command="command" :hide-on-click="false">
} <el-button style="height: 100%;margin-right: 0px" size="small"
}); >{{ grid[selectGridIndex].label }}
bus.$emit("busEmit", { type: "uploadImage", value: data }); </el-button>
return false; <el-dropdown-menu slot="dropdown">
}, <el-dropdown-item :command="i" v-for="(it, i) in grid" :key="i">
command(i) { {{ it.label }}
this.selectGridIndex = i; </el-dropdown-item>
this.setting.gridValue = i; </el-dropdown-menu>
this.$store.commit("updateSystemSetting", { </el-dropdown>
field: "gridValue", <!-- <el-tooltip content="字体">-->
value: this.grid[i] <!-- <el-button size="small">-->
}); <!-- <img style="width: 13px;height: 13px" src="@/static/icon/ziti.png" alt="">-->
bus.$emit("busEmit", { type: "grid", value: this.grid[i] }); <!-- </el-button>-->
} <!-- </el-tooltip>-->
} <el-tooltip content="图片">
}; <el-upload
</script> accept=".png"
<style scoped> action=""
.page-header { :show-file-list="false"
background-color: #ececec; multiple
display: flex; :before-upload="uploadImage"
justify-content: space-between; >
height: 40px; <el-button style="height: 100%;margin:0 8px" size="small">
padding: 5px; <i class="el-icon-picture" style="font-size: 15px;"></i>
} </el-button>
</el-upload>
.left-btn { </el-tooltip>
display: flex; <!-- <el-tooltip content="撤销">-->
} <!-- <el-button @click="changeActionIndex('+')"-->
</style> <!-- :disabled="actionList.length===0 || actionIndex<-1 || actionIndex===actionList.length-1 " icon=""-->
<template> <!-- size="small">-->
<div> <!-- <img style="width: 14px;height: 14px" src="@/static/icon/chehuizuo.png" alt="">-->
<div class="page-header"> <!-- </el-button>-->
<div class="left-btn"> <!-- </el-tooltip>-->
<!-- <el-tooltip content="文件">--> <!-- <el-tooltip content="恢复">-->
<!-- <el-button style="margin-right: 8px" size="small">文件</el-button>--> <!-- <el-button @click="changeActionIndex('-')"-->
<!-- </el-tooltip>--> <!-- :disabled="actionList.length===0 || actionIndex<=-1" icon=""-->
<!-- size="small">-->
<el-dropdown trigger="click" @command="command" :hide-on-click="false"> <!-- <img style="width: 14px;height: 14px" src="@/static/icon/chehuiyou.png" alt="">-->
<el-button style="height: 100%;margin-right: 0px" size="small">{{ <!-- </el-button>-->
grid[selectGridIndex].label <!-- </el-tooltip>-->
}} <el-tooltip content="背景色">
</el-button> <el-color-picker
<el-dropdown-menu slot="dropdown"> style="margin-right: 3px"
<el-dropdown-item :command="i" v-for="(it, i) in grid" :key="i"> v-model="selectBgColor"
{{ it.label }} @change="setBg"
</el-dropdown-item> color-format="hex"
</el-dropdown-menu> :predefine="predefineColors"
</el-dropdown> >
<!-- <el-tooltip content="字体">--> </el-color-picker>
<!-- <el-button size="small">--> </el-tooltip>
<!-- <img style="width: 13px;height: 13px" src="@/static/icon/ziti.png" alt="">-->
<!-- </el-button>--> <el-popover
<!-- </el-tooltip>--> width="320"
<el-tooltip content="图片"> :offset="-120"
<el-upload trigger="click"
accept=".png" placement="bottom"
action="" >
:show-file-list="false" <div class="setting-form">
multiple <el-form
:before-upload="uploadImage" :model="setting"
> label-position="left"
<el-button style="height: 100%;margin:0 8px" size="small"> label-width="80px"
<i class="el-icon-picture" style="font-size: 15px;"></i> size="small"
</el-button> >
</el-upload> <el-form-item prop="setting" label="网格显示">
</el-tooltip> <el-select
<!-- <el-tooltip content="撤销">--> @change="e => settingChange('gridShow', e)"
<!-- <el-button @click="changeActionIndex('+')"--> clearable
<!-- :disabled="actionList.length===0 || actionIndex<-1 || actionIndex===actionList.length-1 " icon=""--> v-model="setting.gridShow"
<!-- size="small">--> >
<!-- <img style="width: 14px;height: 14px" src="@/static/icon/chehuizuo.png" alt="">--> <el-option :value="1" label="未缩放的网格"></el-option>
<!-- </el-button>--> <el-option :value="0" label="无"></el-option>
<!-- </el-tooltip>--> </el-select>
<!-- <el-tooltip content="恢复">--> </el-form-item>
<!-- <el-button @click="changeActionIndex('-')"--> <el-form-item prop="gridSpacing" label="单位">
<!-- :disabled="actionList.length===0 || actionIndex<=-1" icon=""--> <el-select
<!-- size="small">--> @change="e => settingChange('unit', e)"
<!-- <img style="width: 14px;height: 14px" src="@/static/icon/chehuiyou.png" alt="">--> clearable
<!-- </el-button>--> v-model="setting.unit"
<!-- </el-tooltip>--> >
<el-tooltip content="背景色"> <el-option value="mm" label="mm"></el-option>
<el-color-picker <el-option value="inch" label="inch"></el-option>
style="margin-right: 3px" </el-select>
v-model="selectBgColor" </el-form-item>
@change="setBg" <el-form-item prop="gridSpacing" label="网格间隔">
color-format="hex" <el-select
:predefine="predefineColors" @change="e => settingChange('gridSpacing', e)"
> clearable
</el-color-picker> v-model="setting.gridSpacing"
</el-tooltip> >
<el-option
<el-popover v-if="setting.unit === 'mm'"
width="320" :value="20"
:offset="-120" :label="`20 ${setting.unit}`"
trigger="click" ></el-option>
placement="bottom" <el-option
> v-if="setting.unit === 'mm'"
<div class="setting-form"> :value="10"
<el-form :label="`10 ${setting.unit}`"
:model="setting" ></el-option>
label-position="left" <el-option
label-width="80px" v-if="setting.unit === 'inch'"
size="small" :value="1"
> :label="`1 ${setting.unit}`"
<el-form-item prop="setting" label="网格显示"> ></el-option>
<el-select <el-option
@change="e => settingChange('gridShow', e)" v-if="setting.unit === 'inch'"
clearable :value="0.5"
v-model="setting.gridShow" :label="`0.5 ${setting.unit}`"
> ></el-option>
<el-option :value="1" label="未缩放的网格"></el-option> </el-select>
<el-option :value="0" label="无"></el-option> </el-form-item>
</el-select> <el-form-item prop="language" label="语言设置">
</el-form-item> <el-select
<el-form-item prop="gridSpacing" label="单位"> @change="e => settingChange('language', e)"
<el-select clearable
@change="e => settingChange('unit', e)" v-model="setting.language"
clearable >
v-model="setting.unit" <el-option value="cn" label="中文"></el-option>
> </el-select>
<el-option value="mm" label="mm"></el-option> </el-form-item>
<el-option value="inch" label="inch"></el-option> <el-form-item prop="language" label="版本号">
</el-select> <b>{{ pkg.version || "" }}</b>
</el-form-item> <el-button
<el-form-item prop="gridSpacing" label="网格间隔"> @click="checkUpdate"
<el-select style="margin-left: 15px"
@change="e => settingChange('gridSpacing', e)" type="text"
clearable >检查更新</el-button
v-model="setting.gridSpacing" >
> </el-form-item>
<el-option
v-if="setting.unit === 'mm'" <!-- <el-form-item label="自动打印模式">-->
:value="20" <!-- <el-switch @change="(e)=>settingChange('autoPrint',e)" v-model="setting.autoPrint"></el-switch>-->
:label="`20 ${setting.unit}`" <!-- </el-form-item>-->
></el-option> </el-form>
<el-option <!-- <div class="form-block">-->
v-if="setting.unit === 'mm'" <!-- <div @click="setDefaultSetting" class="block-item">重置应用程序设置</div>-->
:value="10" <!-- </div>-->
:label="`10 ${setting.unit}`" <!-- <div class="form-block">-->
></el-option> <!-- <div class="block-item">隐私政策</div>-->
<el-option <!-- <div class="block-item">版本信息</div>-->
v-if="setting.unit === 'inch'" <!-- </div>-->
:value="1" </div>
:label="`1 ${setting.unit}`" <el-tooltip slot="reference" content="设置">
></el-option> <el-button style="margin-right: 8px" size="small">
<el-option <img
v-if="setting.unit === 'inch'" style="width: 18px;height: 18px"
:value="0.5" src="@/static/icon/shezhi.png"
:label="`0.5 ${setting.unit}`" alt=""
></el-option> />
</el-select> </el-button>
</el-form-item> </el-tooltip>
<el-form-item prop="language" label="语言设置"> </el-popover>
<el-select <!-- <el-tooltip content="打印">-->
@change="e => settingChange('language', e)" <!-- <el-button @click="showPrintDialog=true" size="small" type="primary">打印</el-button>-->
clearable <!-- </el-tooltip>-->
v-model="setting.language" <!-- <el-tooltip content="添加模板">-->
> <!-- <el-button size="small">添加模板</el-button>-->
<el-option value="cn" label="中文"></el-option> <!-- </el-tooltip>-->
</el-select> </div>
</el-form-item> <div class="center-input">
<el-form-item prop="language" label="版本号"> <el-input
<b>{{ pkg.version || "" }}</b> @keyup.enter.native="getDataInfo"
<el-button @click="checkUpdate" style="margin-left: 15px" type="text">检查更新</el-button> style="width: 40%;"
</el-form-item> size="medium"
placeholder="请扫描生产单号"
<!-- <el-form-item label="自动打印模式">--> ref="searchRef"
<!-- <el-switch @change="(e)=>settingChange('autoPrint',e)" v-model="setting.autoPrint"></el-switch>--> v-model="productionNo"
<!-- </el-form-item>--> ></el-input>
</el-form> <el-button
<!-- <div class="form-block">--> @click="getDataInfo"
<!-- <div @click="setDefaultSetting" class="block-item">重置应用程序设置</div>--> size="medium"
<!-- </div>--> style="margin-left: 10px"
<!-- <div class="form-block">--> type="primary"
<!-- <div class="block-item">隐私政策</div>--> >查询
<!-- <div class="block-item">版本信息</div>--> </el-button>
<!-- </div>--> <div class="sure-btn">
</div> <el-button
<el-tooltip slot="reference" content="设置"> @click="sureData"
<el-button style="margin-right: 8px" size="small"> size="medium"
<img style="margin-left: 10px;width: 100%;"
style="width: 15px;height: 15px" type="success"
src="@/static/icon/shezhi.png" >生产完成
alt="" </el-button>
/> <div class="check">
</el-button> <el-checkbox v-model="isAutoFinish">自动完成上一单</el-checkbox>
</el-tooltip> </div>
</el-popover> </div>
<!-- <el-tooltip content="打印">--> <el-button
<!-- <el-button @click="showPrintDialog=true" size="small" type="primary">打印</el-button>--> @click="downloadImage"
<!-- </el-tooltip>--> size="medium"
<!-- <el-tooltip content="添加模板">--> style="margin-left: 15px"
<!-- <el-button size="small">添加模板</el-button>--> type="primary"
<!-- </el-tooltip>--> >下载素材
</div> </el-button>
<div class="center-input"> </div>
<el-input <div class="right-user">
@keyup.enter.native="getDataInfo" <p v-if="user && user.factory">{{ user.factory.title }}</p>
style="width: 40%;" <el-dropdown @command="dropdownCommand">
size="medium" <div style="margin-right: 20px">
placeholder="请扫描生产单号" <b style="cursor:pointer;">{{ user.account }}</b>
ref="searchRef" <i class="el-icon-arrow-down"></i>
v-model="productionNo" </div>
></el-input>
<el-button <el-dropdown-menu slot="dropdown">
@click="getDataInfo" <el-dropdown-item command="logout">退出登录</el-dropdown-item>
size="medium" <el-dropdown-item command="cache">清除缓存</el-dropdown-item>
style="margin-left: 10px" </el-dropdown-menu>
type="primary" </el-dropdown>
>查询 </div>
</el-button </div>
> <update-dialog ref="updateDialog" />
<div class="sure-btn"> <el-dialog :visible.sync="cacheVisible" title="清除缓存" width="700px">
<el-button <el-checkbox-group
@click="sureData" style="display: flex;flex-direction: column"
size="medium" v-model="checkList"
style="margin-left: 10px;width: 100%;" >
type="success" <el-checkbox
>生产完成 style="margin-bottom: 10px"
</el-button> :label="item.value"
<div class="check"> v-for="(item, i) in cacheList"
<el-checkbox v-model="isAutoFinish">自动完成上一单</el-checkbox> :key="i"
</div> >{{ item.label }}</el-checkbox
</div> >
<el-button </el-checkbox-group>
@click="downloadImage" <template #footer>
size="medium" <el-button @click="cacheVisible = false">取消</el-button>
style="margin-left: 15px" <el-button @click="clearCache" type="primary">清除</el-button>
type="primary" </template>
>下载素材 </el-dialog>
</el-button> </div>
</div> </template>
<div class="right-user">
<p>{{ company.companyName }}</p> <style lang="less" scoped>
<el-avatar :src="avatar"></el-avatar> .right-user {
<el-dropdown @command="dropdownCommand"> display: flex;
<b style="cursor:pointer;">{{ user.employeeName }}</b> align-items: center;
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item command="clear">清除缓存</el-dropdown-item>--> b {
<el-dropdown-item command="company">切换系统</el-dropdown-item> margin: 0 3px;
<el-dropdown-item command="logout">退出登录</el-dropdown-item> display: inline-block;
<el-dropdown-item command="cache">清除缓存</el-dropdown-item> color: black;
</el-dropdown-menu> font-size: 15px;
</el-dropdown> font-weight: bold;
</div> }
</div>
<update-dialog ref="updateDialog" /> p {
<el-dialog :visible.sync="cacheVisible" title="清除缓存" width="700px"> margin: 0 10px;
<el-checkbox-group style="display: flex;flex-direction: column" v-model="checkList"> font-weight: bold;
<el-checkbox style="margin-bottom: 10px" :label="item.value" v-for="(item,i) in cacheList" display: inline-block;
:key="i">{{item.label}}</el-checkbox> font-size: 15px;
</el-checkbox-group> color: #e6a23c;
<template #footer> }
<el-button @click="cacheVisible =false">取消</el-button> }
<el-button @click="clearCache" type="primary">清除</el-button>
</template> .setting-form {
</el-dialog> .el-form {
</div> padding: 10px;
</template> box-sizing: border-box;
}
<style lang="less" scoped> }
.right-user {
display: flex; .form-block {
align-items: center; padding: 15px 0;
border-top: 1px solid #ececec;
b {
margin: 0 10px; &:nth-last-of-type(1) {
display: inline-block; border-bottom: 1px solid #ececec;
color: black; }
font-size: 15px; }
font-weight: bold;
} .block-item {
width: 100%;
p { text-align: left;
margin: 0 10px; cursor: pointer;
font-weight: bold; font-size: 14px;
display: inline-block; padding: 10px 10px;
font-size: 15px;
color: #e6a23c; &:hover {
} background-color: #ececec;
} }
}
.setting-form {
.el-form { .center-input {
padding: 10px; display: flex;
box-sizing: border-box; align-items: center;
} justify-content: center;
} flex: 1;
flex-shrink: 0;
.form-block { overflow: hidden;
padding: 15px 0; padding-left: 100px;
border-top: 1px solid #ececec; }
&:nth-last-of-type(1) { .sure-btn {
border-bottom: 1px solid #ececec; width: 300px;
} position: relative;
} display: flex;
align-items: center;
.block-item { justify-content: center;
width: 100%;
text-align: left; ::v-deep {
cursor: pointer; .el-button {
font-size: 14px; span {
padding: 10px 10px; position: relative;
left: -40px;
&:hover { }
background-color: #ececec; }
} }
} }
.center-input { .check {
display: flex; position: absolute;
align-items: center; right: 10px;
justify-content: center; width: fit-content;
flex: 1; line-height: 36px;
flex-shrink: 0; height: 100%;
overflow: hidden; z-index: 2;
padding-left: 100px; color: white;
} }
::v-deep .el-color-picker__trigger{
.sure-btn { background: white;
width: 300px; width: 41px;
position: relative; }
display: flex; ::v-deep .el-color-picker__color{
align-items: center; border: none !important;
justify-content: center; }
::v-deep { </style>
.el-button {
span {
position: relative;
left: -40px;
}
}
}
}
.check {
position: absolute;
right: 10px;
width: fit-content;
line-height: 36px;
height: 100%;
z-index: 2;
color: white;
}
</style>
src/views/design/head/printDialog.vue
<script> <script>
import fieldDescription from "./fieldDescription"; import fieldDescription from "./fieldDescription";
import { ipcRenderer } from "electron"; import { ipcRenderer } from "electron";
import axios from "axios"; import axios from "axios";
import html2canvas from "html2canvas"; import html2canvas from "html2canvas";
import moment from "moment"; import moment from "moment";
import pkg from "../../../../package.json"; import pkg from "../../../../package.json";
export default { export default {
data() { data() {
return { return {
dialogShow: true, dialogShow: true,
pkg, pkg,
axios, axios,
fieldDescription, fieldDescription,
printerList: [], printerList: [],
printSettingList: [], printSettingList: [],
printSettingVal: 0, printSettingVal: 0,
description: "", description: "",
printSettingSelectLabel: "default", printSettingSelectLabel: "default",
printer: "", printer: "",
settingName: "", settingName: "",
printInkList: [ printInkList: [
{ {
label: "仅彩色油墨" label: "仅彩色油墨"
}, },
{ {
label: "仅白色油墨" label: "仅白色油墨"
}, },
{ {
label: "彩色 + 白色油墨" label: "彩色 + 白色油墨"
}, },
{ {
label: "仅黑色油墨" label: "仅黑色油墨"
} }
], ],
detailShow: false, detailShow: false,
showPopover: false, showPopover: false,
printSetting: { printSetting: {
printer: "", printer: "",
xy: "", xy: "",
byInk: 2, byInk: 2,
byInkVolume: 1, byInkVolume: 1,
byDoublePrint: 3, byDoublePrint: 3,
bEcoMode: false, bEcoMode: false,
bMaterialBlack: false, bMaterialBlack: false,
byHighlight: 5, byHighlight: 5,
printNum: 1, printNum: 1,
bFastMode: false, bFastMode: false,
bUniPrint: false, bUniPrint: false,
bDivide: false, bDivide: false,
bPause: false, bPause: false,
byMask: 3, byMask: 3,
bTransColor: false, bTransColor: false,
byChoke: 2, byChoke: 2,
minWhiteInkType: 0, minWhiteInkType: 0,
bySaturation: 5, bySaturation: 5,
byBrightness: 5, byBrightness: 5,
byContrast: 5, byContrast: 5,
iCyanBalance: 0, iCyanBalance: 0,
iMagentaBalance: 0, iMagentaBalance: 0,
iBlackBalance: 0, iBlackBalance: 0,
iYellowBalance: 0, iYellowBalance: 0,
byMinWhite: 1, byMinWhite: 1,
bMultiple: false bMultiple: false
} }
}; };
}, },
props: { props: {
visible: { visible: {
default: false, default: false,
type: Boolean type: Boolean
}, },
byPlatenSize: { byPlatenSize: {
default: 0, default: 0,
type: Number type: Number
}, },
imgList: { imgList: {
default: () => [], default: () => [],
type: Array type: Array
} }
}, },
mounted() { mounted() {
this.$dataStore.set("default-print-setting", this.printSetting); this.$dataStore.set("default-print-setting", this.printSetting);
this.getPrintSettingList(() => { this.getPrintSettingList(() => {
let select = this.$dataStore.get("print-setting-select"); let select = this.$dataStore.get("print-setting-select");
console.log(this.$dataStore, "select"); console.log(this.$dataStore, "select");
if (select) { if (select) {
this.printSettingSelectLabel = select; this.printSettingSelectLabel = select;
let index = this.printSettingList.findIndex(el => el.label === select); let index = this.printSettingList.findIndex(el => el.label === select);
if (index >= 0) { if (index >= 0) {
this.printSettingVal = index; this.printSettingVal = index;
this.printSetting = JSON.parse( this.printSetting = JSON.parse(
JSON.stringify(this.printSettingList[index].value) JSON.stringify(this.printSettingList[index].value)
); );
} else { } else {
this.printSettingVal = 0; this.printSettingVal = 0;
this.printSetting = JSON.parse( this.printSetting = JSON.parse(
JSON.stringify(this.printSettingList[0].value) JSON.stringify(this.printSettingList[0].value)
); );
} }
} else { } else {
this.printSettingVal = 0; this.printSettingVal = 0;
this.printSetting = JSON.parse( this.printSetting = JSON.parse(
JSON.stringify(this.printSettingList[0].value) JSON.stringify(this.printSettingList[0].value)
); );
} }
}); });
}, },
computed: { computed: {
inkNum() { inkNum() {
return 200 + Number(this.printSetting.byHighlight) * 50 - 50; return 200 + Number(this.printSetting.byHighlight) * 50 - 50;
}, },
defaultTime() { defaultTime() {
if ([6, 7].includes(Number(this.printSetting.byHighlight))) { if ([6, 7].includes(Number(this.printSetting.byHighlight))) {
return "1.25"; return "1.25";
} else if (this.printSetting.byHighlight < 6) { } else if (this.printSetting.byHighlight < 6) {
return "1.00"; return "1.00";
} else { } else {
return "1.5"; return "1.5";
} }
} }
}, },
watch: { watch: {
printSetting: { printSetting: {
handler() { handler() {
this.$dataStore.set("print-setting", this.printSetting); this.$dataStore.set("print-setting", this.printSetting);
}, },
deep: true, deep: true,
immediate: true immediate: true
}, },
visible() { visible() {
this.dialogShow = this.visible; this.dialogShow = this.visible;
} }
}, },
created() { created() {
this.getPrinter(); this.getPrinter();
}, },
methods: { methods: {
delSetting() { delSetting() {
this.$confirm(`确定删除该预设？`, "提示", { this.$confirm(`确定删除该预设？`, "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(() => { }).then(() => {
this.$dataStore.delete( this.$dataStore.delete(
this.printSettingList[this.printSettingVal].label + "-print-setting" this.printSettingList[this.printSettingVal].label + "-print-setting"
); );
this.getPrintSettingList(); this.getPrintSettingList();
this.printSettingVal = 0; this.printSettingVal = 0;
}); });
}, },
getPrintSettingList(callback) { getPrintSettingList(callback) {
let arr = []; let arr = [];
for (let k in this.$dataStore.store) { for (let k in this.$dataStore.store) {
if (k.includes("-print-setting")) { if (k.includes("-print-setting")) {
arr.push({ arr.push({
label: k.replace("-print-setting", ""), label: k.replace("-print-setting", ""),
value: this.$dataStore.get(k) value: this.$dataStore.get(k)
}); });
} }
} }
this.printSettingList = arr; this.printSettingList = arr;
callback && callback(); callback && callback();
}, },
printSettingChange(v) { printSettingChange(v) {
let label = this.printSettingList[v].label; let label = this.printSettingList[v].label;
this.$dataStore.set("print-setting-select", label); this.$dataStore.set("print-setting-select", label);
this.printSetting = JSON.parse( this.printSetting = JSON.parse(
JSON.stringify(this.printSettingList[v].value) JSON.stringify(this.printSettingList[v].value)
); );
}, },
saveSetting() { saveSetting() {
if (this.settingName.trim() === "") { if (this.settingName.trim() === "") {
return this.$message.warning("预设名称不能为空"); return this.$message.warning("预设名称不能为空");
} }
if (this.printSettingList.find(el => el.label === this.settingName)) { if (this.printSettingList.find(el => el.label === this.settingName)) {
return this.$message.warning("预设名称不能重复"); return this.$message.warning("预设名称不能重复");
} }
this.$dataStore.set( this.$dataStore.set(
`${this.settingName}-print-setting`, `${this.settingName}-print-setting`,
this.printSetting this.printSetting
); );
this.showPopover = false; this.showPopover = false;
this.printSettingVal = this.printSettingList.length; this.printSettingVal = this.printSettingList.length;
this.getPrintSettingList(); this.getPrintSettingList();
}, },
openPopover() { openPopover() {
this.showPopover = true; this.showPopover = true;
this.settingName = ""; this.settingName = "";
}, },
singleStr(str) { singleStr(str) {
if (Number(str) >= 0) { if (Number(str) >= 0) {
str = str.toString().replace(".", ""); str = str.toString().replace(".", "");
if (str.length >= 4) { if (str.length >= 4) {
str = str.slice(0, 5); str = str.slice(0, 5);
} else if (str.length === 3) { } else if (str.length === 3) {
str = "0" + str; str = "0" + str;
} else if (str.length === 2) { } else if (str.length === 2) {
str = "00" + str; str = "00" + str;
} else if (str.length === 1) { } else if (str.length === 1) {
str = "000" + str; str = "000" + str;
} }
} else { } else {
str = str str = str
.toString() .toString()
.replace(".", "") .replace(".", "")
.replace("-", ""); .replace("-", "");
if (str.length >= 4) { if (str.length >= 4) {
str = str.slice(0, 5); str = str.slice(0, 5);
} else if (str.length === 3) { } else if (str.length === 3) {
str = "0" + str; str = "0" + str;
} else if (str.length === 2) { } else if (str.length === 2) {
str = "00" + str; str = "00" + str;
} else if (str.length === 1) { } else if (str.length === 1) {
str = "000" + str; str = "000" + str;
} }
str = "-" + str; str = "-" + str;
} }
// 不足四位前面用0补齐 // 不足四位前面用0补齐
console.log(str); console.log(str);
return str; return str;
}, },
dataURLtoBlob(dataurl) { dataURLtoBlob(dataurl) {
var arr = dataurl.split(","); var arr = dataurl.split(",");
//注意base64的最后面中括号和引号是不转译的 //注意base64的最后面中括号和引号是不转译的
var _arr = arr[1].substring(0, arr[1].length - 2); var _arr = arr[1].substring(0, arr[1].length - 2);
var mime = arr[0].match(/:(.*?);/)[1], var mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(_arr), bstr = atob(_arr),
n = bstr.length, n = bstr.length,
u8arr = new Uint8Array(n); u8arr = new Uint8Array(n);
while (n--) { while (n--) {
u8arr[n] = bstr.charCodeAt(n); u8arr[n] = bstr.charCodeAt(n);
} }
return new Blob([u8arr], { return new Blob([u8arr], {
type: mime type: mime
}); });
}, },
moreImageCmd(arr) { moreImageCmd(arr) {
var canvas1 = document.createElement("canvas"); var canvas1 = document.createElement("canvas");
let _canvas = document.getElementsByClassName("sucaitu")[0]; //目标块 let _canvas = document.getElementsByClassName("sucaitu")[0]; //目标块
var bodyW = parseInt(window.getComputedStyle(_canvas).width); var bodyW = parseInt(window.getComputedStyle(_canvas).width);
var bodyH = parseInt(window.getComputedStyle(_canvas).height); var bodyH = parseInt(window.getComputedStyle(_canvas).height);
canvas1.width = bodyW; canvas1.width = bodyW;
canvas1.height = bodyH; canvas1.height = bodyH;
canvas1.style.width = bodyW + "px"; canvas1.style.width = bodyW + "px";
canvas1.style.height = bodyH + "px"; canvas1.style.height = bodyH + "px";
canvas1.style.background = "transparent"; canvas1.style.background = "transparent";
document.documentElement.scrollTop = 0; document.documentElement.scrollTop = 0;
document.body.scrollTop = 0; document.body.scrollTop = 0;
var context = canvas1.getContext("2d"); var context = canvas1.getContext("2d");
// context.scale(2, 2); // context.scale(2, 2);
let that = this; let that = this;
html2canvas(_canvas, { html2canvas(_canvas, {
canvas: canvas1, canvas: canvas1,
backgroundColor: null, backgroundColor: null,
useCORS: true, useCORS: true,
allowTaint: true allowTaint: true
}).then(async function(canvas) { }).then(async function(canvas) {
let dataURL = canvas.toDataURL("image/png"); let dataURL = canvas.toDataURL("image/png");
let pageBlob = that.dataURLtoBlob(dataURL); let pageBlob = that.dataURLtoBlob(dataURL);
let params = new FormData(); let params = new FormData();
let fileOfBlob = new File([pageBlob], new Date().getTime() + ".jpg"); let fileOfBlob = new File([pageBlob], new Date().getTime() + ".jpg");
params.append("file", fileOfBlob); params.append("file", fileOfBlob);
let { data } = await that.$api.post("/uploadImage", params, { let { data } = await that.$api.post("/uploadImage", params, {
headers: { headers: {
"Content-Type": "application/x-www-form-urlencoded" "Content-Type": "application/x-www-form-urlencoded"
} }
}); });
let w_mm = Number((canvas1.width * 0.84183).toFixed(1)); let w_mm = Number((canvas1.width * 0.84183).toFixed(1));
let h_mm = Number((canvas1.height * 0.84183).toFixed(1)); let h_mm = Number((canvas1.height * 0.84183).toFixed(1));
let size = `${that.singleStr(Number(w_mm).toFixed(1))}${that.singleStr( let size = `${that.singleStr(Number(w_mm).toFixed(1))}${that.singleStr(
Number(h_mm).toFixed(1) Number(h_mm).toFixed(1)
)}`; )}`;
await that.sendCmd(data.fileName, size, "00000000", 0); await that.sendCmd(data.fileName, size, "00000000", 0);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载 //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
// document.querySelector(".down").setAttribute('href', canvas.toDataURL()); // document.querySelector(".down").setAttribute('href', canvas.toDataURL());
}); });
}, },
async getPrintCmd() { async getPrintCmd() {
if (this.imgList.length === 0) if (this.imgList.length === 0)
return this.$message.warning("素材不能为空"); return this.$message.warning("素材不能为空");
if (this.imgList.length > 1) { if (this.imgList.length > 1) {
let dom = document.getElementsByClassName("drr"); let dom = document.getElementsByClassName("drr");
for (let i = 0; i < dom.length; i++) { for (let i = 0; i < dom.length; i++) {
dom[i].classList.remove("active"); dom[i].classList.remove("active");
dom[i].classList.add("inactive"); dom[i].classList.add("inactive");
} }
setTimeout(() => { setTimeout(() => {
this.moreImageCmd(this.imgList); this.moreImageCmd(this.imgList);
}, 500); }, 500);
return; return;
} }
let { x, y, r, w, h } = this.imgList[0]; let { x, y, r, w, h } = this.imgList[0];
y = Number(y) - Number(h) / 2; y = Number(y) - Number(h) / 2;
x = Number(x) - Number(w) / 2; x = Number(x) - Number(w) / 2;
let x_mm = Number((x * 0.84183).toFixed(1)); let x_mm = Number((x * 0.84183).toFixed(1));
let w_mm = Number((w * 0.84183).toFixed(1)); let w_mm = Number((w * 0.84183).toFixed(1));
let h_mm = Number((h * 0.84183).toFixed(1)); let h_mm = Number((h * 0.84183).toFixed(1));
let y_mm = Number((y * 0.84183).toFixed(1)); let y_mm = Number((y * 0.84183).toFixed(1));
console.log(x_mm, y_mm); console.log(x_mm, y_mm);
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 = ""; // 位置
let size = ""; // 图像大小 let size = ""; // 图像大小
if (Number(x_mm) < 0 || Number(y_mm) < 0) { if (Number(x_mm) < 0 || Number(y_mm) < 0) {
position = `"${this.singleStr( position = `"${this.singleStr(
Number(x_mm).toFixed(1) Number(x_mm).toFixed(1)
)},${this.singleStr(Number(y_mm).toFixed(1))}"`; )},${this.singleStr(Number(y_mm).toFixed(1))}"`;
} else { } else {
position = `${this.singleStr(x_mm.toFixed(1))}${this.singleStr( position = `${this.singleStr(x_mm.toFixed(1))}${this.singleStr(
y_mm.toFixed(1) y_mm.toFixed(1)
)}`; )}`;
} }
size = `${this.singleStr(Number(w_mm).toFixed(1))}${this.singleStr( size = `${this.singleStr(Number(w_mm).toFixed(1))}${this.singleStr(
Number(h_mm).toFixed(1) Number(h_mm).toFixed(1)
)}`; )}`;
const bigNum = "0031131"; // 图像放大倍数 -R const bigNum = "0031131"; // 图像放大倍数 -R
await this.sendCmd(imgFileName, size, position, r); await this.sendCmd(imgFileName, size, position, r);
}, },
async sendCmd(imgFileName, size, position, r) { async sendCmd(imgFileName, size, position, r) {
const whitePrint = [1, 2].includes(this.printSetting.byInk) ? 1 : 0; // 白色打印 const whitePrint = [1, 2].includes(this.printSetting.byInk) ? 1 : 0; // 白色打印
let cmd = `GTXproCMD.exe print -X "${`Profile\\${imgFileName.replace( let cmd = `GTXproCMD.exe print -X "${`Profile\\${imgFileName.replace(
".png", ".png",
"" ""
)}.xml`}" -I "${"Input\\" + )}.xml`}" -I "${"Input\\" +
imgFileName}" -A "Output\\${imgFileName.replace( imgFileName}" -A "Output\\${imgFileName.replace(
".png", ".png",
"" ""
)}.arxp" -S ${size} -L ${position} -D ${r} -W ${whitePrint}`; )}.arxp" -S ${size} -L ${position} -D ${r} -W ${whitePrint}`;
let print_cmd = `GTXproCMD.exe send -A "Output\\${imgFileName.replace( let print_cmd = `GTXproCMD.exe send -A "Output\\${imgFileName.replace(
".png", ".png",
"" ""
)}.arxp" -P "${this.printer}`; )}.arxp" -P "${this.printer}`;
let data = { let data = {
...this.printSetting, ...this.printSetting,
...{ ...{
byPlatenSize: this.byPlatenSize, byPlatenSize: this.byPlatenSize,
cmd, cmd,
fileName: imgFileName, fileName: imgFileName,
print_cmd print_cmd
} }
}; };
await this.toWritePrintLog(data); await this.toWritePrintLog(data);
let res = await this.$api.post("/toPrint", data); let res = await this.$api.post("/toPrint", data);
this.$message.success(res.msg); this.$message.success(res.msg);
}, },
async toWritePrintLog(send_api_data) { async toWritePrintLog(send_api_data) {
let head_setting = this.$dataStore.get("setting"); let head_setting = this.$dataStore.get("setting");
let position_before_px = this.$dataStore.get("position_before_px"); // 图片的位置信息 px let position_before_px = this.$dataStore.get("position_before_px"); // 图片的位置信息 px
let position_after_px = this.$dataStore.get("position_after_px");// 图片根据单位转换后的px let position_after_px = this.$dataStore.get("position_after_px");// 图片根据单位转换后的px
let position_unit = this.$dataStore.get("position_unit"); // 图片根据单位转换后的px let position_unit = this.$dataStore.get("position_unit"); // 图片根据单位转换后的px
let print_time = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); // 打印的时间 let print_time = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); // 打印的时间
let production_no = this.$dataStore.get("production_no"); // 打印的单号 let production_no = this.$dataStore.get("production_no"); // 打印的单号
let print_setting = JSON.parse(JSON.stringify(this.printSetting)); // 打印的设置 let print_setting = JSON.parse(JSON.stringify(this.printSetting)); // 打印的设置
let version = this.pkg.version let version = this.pkg.version
let data = { let data = {
head_setting, head_setting,
version, version,
print_setting, print_setting,
production_no, production_no,
print_time, print_time,
position_unit, position_unit,
position_after_px, position_after_px,
position_before_px, position_before_px,
send_api_data send_api_data
}; };
await this.$api.post("/writePrintLog", data); await this.$api.post("/writePrintLog", data);
}, },
async getPrinter() { async getPrinter() {
ipcRenderer.send("allPrint"); ipcRenderer.send("allPrint");
ipcRenderer.once("printName", (event, data) => { ipcRenderer.once("printName", (event, data) => {
console.log(data, 996); // data就是返回的打印机数据列表 console.log(data, 996); // data就是返回的打印机数据列表
this.printerList = data; this.printerList = data;
if (this.printerList.length > 0) { if (this.printerList.length > 0) {
this.printer = this.printerList[0].name; this.printer = this.printerList[0].name;
} }
}); });
}, },
setDetailShow() { setDetailShow() {
this.detailShow = !this.detailShow; this.detailShow = !this.detailShow;
} }
} }
}; };
</script> </script>
<template> <template>
<div class="print-div"> <div class="print-div">
<div :class="dialogShow ? 'open-expand' : 'close-expand'"> <div :class="dialogShow ? 'open-expand' : 'close-expand'">
<slot></slot> <slot></slot>
</div> </div>
<div v-show="dialogShow" class="print-content"> <div v-show="dialogShow" class="print-content">
<el-form <el-form
label-width="170px" label-width="170px"
label-position="left" label-position="left"
size="mini" size="mini"
:model="printSetting" :model="printSetting"
> >
<el-form-item label-width="55px" label="打印机"> <el-form-item label-width="55px" label="打印机">
<div class="flex-row"> <div class="flex-row">
<el-select v-model="printer" clearable> <el-select v-model="printer" clearable>
<el-option <el-option
v-for="(it, i) in printerList" v-for="(it, i) in printerList"
:key="i" :key="i"
:label="it.name" :label="it.name"
:value="it.name" :value="it.name"
></el-option> ></el-option>
</el-select> </el-select>
<el-button <el-button
title="刷新" title="刷新"
@click="getPrinter" @click="getPrinter"
style="margin-left: 10px" style="margin-left: 10px"
icon="el-icon-refresh" icon="el-icon-refresh"
></el-button> ></el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label-width="50px" label="预设"> <el-form-item label-width="50px" label="预设">
<div class="flex-row"> <div class="flex-row">
<el-select <el-select
@change="printSettingChange" @change="printSettingChange"
filterable filterable
v-model="printSettingVal" v-model="printSettingVal"
clearable clearable
> >
<el-option <el-option
v-for="(it, i) in printSettingList" v-for="(it, i) in printSettingList"
:key="i" :key="i"
:value="i" :value="i"
:label="it.label" :label="it.label"
></el-option> ></el-option>
</el-select> </el-select>
<div style="margin-left: 15px;display: flex" class="save-btn"> <div style="margin-left: 15px;display: flex" class="save-btn">
<el-popover <el-popover
placement="bottom" placement="bottom"
width="200" width="200"
v-model="showPopover" v-model="showPopover"
trigger="manual" trigger="manual"
> >
<el-button <el-button
style="margin-right: 10px" style="margin-right: 10px"
@click="openPopover" @click="openPopover"
slot="reference" slot="reference"
type="primary" type="primary"
>保存预设 >保存预设
</el-button> </el-button>
<div class="save-setting"> <div class="save-setting">
<el-input <el-input
size="large" size="large"
maxlength="10" maxlength="10"
v-model="settingName" v-model="settingName"
placeholder="预设名称：" placeholder="预设名称："
></el-input> ></el-input>
<div class="save-footer"> <div class="save-footer">
<el-button size="medium" @click="showPopover = false" <el-button size="medium" @click="showPopover = false"
>取消 >取消
</el-button> </el-button>
<el-button <el-button
@click="saveSetting" @click="saveSetting"
:disabled="settingName === ''" :disabled="settingName === ''"
size="medium" size="medium"
type="primary" type="primary"
>保存 >保存
</el-button> </el-button>
</div> </div>
</div> </div>
</el-popover> </el-popover>
<el-button <el-button
:disabled="printSettingVal === 0" :disabled="printSettingVal === 0"
@click="delSetting" @click="delSetting"
type="danger" type="danger"
>删除 >删除
</el-button> </el-button>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<div class="detail-setting"> <div class="detail-setting">
<div class="setting-left"> <div class="setting-left">
<div class="left-block-item"> <div class="left-block-item">
<b class="setting-title">基本设置</b> <b class="setting-title">基本设置</b>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byInk'] || ''"></div> <div v-html="fieldDescription['byInk'] || ''"></div>
</template> </template>
<el-form-item label="油墨选择"> <el-form-item label="油墨选择">
<el-select v-model="printSetting.byInk" clearable> <el-select v-model="printSetting.byInk" clearable>
<el-option <el-option
:label="it.label" :label="it.label"
:value="i" :value="i"
:key="i" :key="i"
v-for="(it, i) in printInkList" v-for="(it, i) in printInkList"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bEcoMode'] || ''"></div> <div v-html="fieldDescription['bEcoMode'] || ''"></div>
</template> </template>
<el-form-item v-if="printSetting.byInk === 2" label="模式"> <el-form-item v-if="printSetting.byInk === 2" label="模式">
<el-select v-model="printSetting.bEcoMode" clearable> <el-select v-model="printSetting.bEcoMode" clearable>
<el-option label="通常" :value="false"></el-option> <el-option label="通常" :value="false"></el-option>
<el-option label="白色油墨削减" :value="true"></el-option> <el-option label="白色油墨削减" :value="true"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bMaterialBlack'] || ''"></div> <div v-html="fieldDescription['bMaterialBlack'] || ''"></div>
</template> </template>
<div v-if="printSetting.byInk === 2"> <div v-if="printSetting.byInk === 2">
<el-form-item label="利用底材的黑色"> <el-form-item label="利用底材的黑色">
<el-switch <el-switch
v-model="printSetting.bMaterialBlack" v-model="printSetting.bMaterialBlack"
></el-switch> ></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bMultiple'] || ''"></div> <div v-html="fieldDescription['bMultiple'] || ''"></div>
</template> </template>
<div v-if="printSetting.byInk !== 1"> <div v-if="printSetting.byInk !== 1">
<el-form-item label="彩色的复合路径打印"> <el-form-item label="彩色的复合路径打印">
<el-switch v-model="printSetting.bMultiple"></el-switch> <el-switch v-model="printSetting.bMultiple"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div <div
class="left-block-item" class="left-block-item"
v-if="[0, 3].includes(printSetting.byInk)" v-if="[0, 3].includes(printSetting.byInk)"
> >
<b class="setting-title">彩色油墨设置</b> <b class="setting-title">彩色油墨设置</b>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byInkVolume'] || ''"></div> <div v-html="fieldDescription['byInkVolume'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="油墨量"> <el-form-item label="油墨量">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="1" :min="1"
:max="10" :max="10"
v-model="printSetting.byInkVolume" v-model="printSetting.byInkVolume"
></el-slider> ></el-slider>
<span>{{ printSetting.byInkVolume }}</span> <span>{{ printSetting.byInkVolume }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byDoublePrint'] || ''"></div> <div v-html="fieldDescription['byDoublePrint'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="2次打印"> <el-form-item label="2次打印">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="0" :min="0"
:max="3" :max="3"
v-model="printSetting.byDoublePrint" v-model="printSetting.byDoublePrint"
></el-slider> ></el-slider>
<span>{{ printSetting.byDoublePrint }}</span> <span>{{ printSetting.byDoublePrint }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div <div
class="left-block-item" class="left-block-item"
v-if="[1, 2].includes(printSetting.byInk)" v-if="[1, 2].includes(printSetting.byInk)"
> >
<b class="setting-title">白色油墨设置</b> <b class="setting-title">白色油墨设置</b>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byHighlight'] || ''"></div> <div v-html="fieldDescription['byHighlight'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="高光"> <el-form-item label="高光">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="1" :min="1"
:max="9" :max="9"
v-model="printSetting.byHighlight" v-model="printSetting.byHighlight"
></el-slider> ></el-slider>
<span>{{ printSetting.byHighlight }}</span> <span>{{ printSetting.byHighlight }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byMask'] || ''"></div> <div v-html="fieldDescription['byMask'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="遮光"> <el-form-item label="遮光">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="1" :min="1"
:max="5" :max="5"
v-model="printSetting.byMask" v-model="printSetting.byMask"
></el-slider> ></el-slider>
<span>{{ printSetting.byMask }}</span> <span>{{ printSetting.byMask }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bFastMode'] || ''"></div> <div v-html="fieldDescription['bFastMode'] || ''"></div>
</template> </template>
<div v-if="[2].includes(printSetting.byInk)"> <div v-if="[2].includes(printSetting.byInk)">
<el-form-item label="白色高速打印"> <el-form-item label="白色高速打印">
<el-switch v-model="printSetting.bFastMode"></el-switch> <el-switch v-model="printSetting.bFastMode"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bDivide'] || ''"></div> <div v-html="fieldDescription['bDivide'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="白色分次打印"> <el-form-item label="白色分次打印">
<el-switch v-model="printSetting.bDivide"></el-switch> <el-switch v-model="printSetting.bDivide"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bPause'] || ''"></div> <div v-html="fieldDescription['bPause'] || ''"></div>
</template> </template>
<div v-if="[2].includes(printSetting.byInk)"> <div v-if="[2].includes(printSetting.byInk)">
<el-form-item label="白色/彩色个别打印"> <el-form-item label="白色/彩色个别打印">
<el-switch v-model="printSetting.bPause"></el-switch> <el-switch v-model="printSetting.bPause"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bTransColor'] || ''"></div> <div v-html="fieldDescription['bTransColor'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="透明色"> <el-form-item label="透明色">
<el-switch v-model="printSetting.bTransColor"></el-switch> <el-switch v-model="printSetting.bTransColor"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byChoke'] || ''"></div> <div v-html="fieldDescription['byChoke'] || ''"></div>
</template> </template>
<div v-if="[2].includes(printSetting.byInk)"> <div v-if="[2].includes(printSetting.byInk)">
<el-form-item label="白色油墨的削减范围"> <el-form-item label="白色油墨的削减范围">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="0" :min="0"
:max="10" :max="10"
v-model="printSetting.byChoke" v-model="printSetting.byChoke"
></el-slider> ></el-slider>
<span>{{ printSetting.byChoke }}</span> <span>{{ printSetting.byChoke }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byMinWhite'] || ''"></div> <div v-html="fieldDescription['byMinWhite'] || ''"></div>
</template> </template>
<div v-if="[2].includes(printSetting.byInk)"> <div v-if="[2].includes(printSetting.byInk)">
<el-form-item label="最小白色油墨量"> <el-form-item label="最小白色油墨量">
<div class="flex-column"> <div class="flex-column">
<el-select v-model="printSetting.minWhiteInkType"> <el-select v-model="printSetting.minWhiteInkType">
<el-option label="通常" :value="0"></el-option> <el-option label="通常" :value="0"></el-option>
<el-option label="特殊" :value="1"></el-option> <el-option label="特殊" :value="1"></el-option>
</el-select> </el-select>
<div class="slider flex-row"> <div class="slider flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="1" :min="1"
:max="printSetting.minWhiteInkType === 1 ? 6 : 3" :max="printSetting.minWhiteInkType === 1 ? 6 : 3"
v-model="printSetting.byMinWhite" v-model="printSetting.byMinWhite"
></el-slider> ></el-slider>
<span>{{ printSetting.byMinWhite }}</span> <span>{{ printSetting.byMinWhite }}</span>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div v-show="detailShow" class="left-block-item"> <div v-show="detailShow" class="left-block-item">
<b class="setting-title">画质设置</b> <b class="setting-title">画质设置</b>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bySaturation'] || ''"></div> <div v-html="fieldDescription['bySaturation'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="饱和度"> <el-form-item label="饱和度">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="0" :min="0"
:max="40" :max="40"
v-model="printSetting.bySaturation" v-model="printSetting.bySaturation"
></el-slider> ></el-slider>
<span>{{ printSetting.bySaturation }}</span> <span>{{ printSetting.bySaturation }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byBrightness'] || ''"></div> <div v-html="fieldDescription['byBrightness'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="亮度"> <el-form-item label="亮度">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="0" :min="0"
:max="40" :max="40"
v-model="printSetting.byBrightness" v-model="printSetting.byBrightness"
></el-slider> ></el-slider>
<span>{{ printSetting.byBrightness }}</span> <span>{{ printSetting.byBrightness }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['byContrast'] || ''"></div> <div v-html="fieldDescription['byContrast'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="对比度"> <el-form-item label="对比度">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="0" :min="0"
:max="40" :max="40"
v-model="printSetting.byContrast" v-model="printSetting.byContrast"
></el-slider> ></el-slider>
<span>{{ printSetting.byContrast }}</span> <span>{{ printSetting.byContrast }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bUniPrint'] || ''"></div> <div v-html="fieldDescription['bUniPrint'] || ''"></div>
</template> </template>
<div v-if="[1].includes(printSetting.byInk)"> <div v-if="[1].includes(printSetting.byInk)">
<el-form-item label="单向打印"> <el-form-item label="单向打印">
<el-switch v-model="printSetting.bUniPrint"></el-switch> <el-switch v-model="printSetting.bUniPrint"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div <div
v-if="detailShow && ![1].includes(printSetting.byInk)" v-if="detailShow && ![1].includes(printSetting.byInk)"
class="left-block-item" class="left-block-item"
> >
<b class="setting-title">彩色平衡</b> <b class="setting-title">彩色平衡</b>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['iCyanBalance'] || ''"></div> <div v-html="fieldDescription['iCyanBalance'] || ''"></div>
</template> </template>
<div v-if="![3].includes(printSetting.byInk)"> <div v-if="![3].includes(printSetting.byInk)">
<el-form-item label="青色"> <el-form-item label="青色">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="-5" :min="-5"
:max="5" :max="5"
v-model="printSetting.iCyanBalance" v-model="printSetting.iCyanBalance"
></el-slider> ></el-slider>
<span>{{ printSetting.iCyanBalance }}</span> <span>{{ printSetting.iCyanBalance }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['iMagentaBalance'] || ''"></div> <div v-html="fieldDescription['iMagentaBalance'] || ''"></div>
</template> </template>
<div v-if="![3].includes(printSetting.byInk)"> <div v-if="![3].includes(printSetting.byInk)">
<el-form-item label="红色"> <el-form-item label="红色">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="-5" :min="-5"
:max="5" :max="5"
v-model="printSetting.iMagentaBalance" v-model="printSetting.iMagentaBalance"
></el-slider> ></el-slider>
<span>{{ printSetting.iMagentaBalance }}</span> <span>{{ printSetting.iMagentaBalance }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['iYellowBalance'] || ''"></div> <div v-html="fieldDescription['iYellowBalance'] || ''"></div>
</template> </template>
<div v-if="![3].includes(printSetting.byInk)"> <div v-if="![3].includes(printSetting.byInk)">
<el-form-item label="黄色"> <el-form-item label="黄色">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="-5" :min="-5"
:max="5" :max="5"
v-model="printSetting.iYellowBalance" v-model="printSetting.iYellowBalance"
></el-slider> ></el-slider>
<span>{{ printSetting.iYellowBalance }}</span> <span>{{ printSetting.iYellowBalance }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['iBlackBalance'] || ''"></div> <div v-html="fieldDescription['iBlackBalance'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="黑色"> <el-form-item label="黑色">
<div class="flex-row"> <div class="flex-row">
<el-slider <el-slider
:step="1" :step="1"
:min="-5" :min="-5"
:max="5" :max="5"
v-model="printSetting.iBlackBalance" v-model="printSetting.iBlackBalance"
></el-slider> ></el-slider>
<span>{{ printSetting.iBlackBalance }}</span> <span>{{ printSetting.iBlackBalance }}</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['bUniPrint'] || ''"></div> <div v-html="fieldDescription['bUniPrint'] || ''"></div>
</template> </template>
<div> <div>
<el-form-item label="单向打印"> <el-form-item label="单向打印">
<el-switch v-model="printSetting.bUniPrint"></el-switch> <el-switch v-model="printSetting.bUniPrint"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<el-button size="small" @click="setDetailShow" <el-button size="small" @click="setDetailShow"
>{{ detailShow ? "关闭详细设置" : "打开详细设置" }}... >{{ detailShow ? "关闭详细设置" : "打开详细设置" }}...
</el-button> </el-button>
</div> </div>
</div> </div>
</el-form> </el-form>
<div class="bottom-info flex-row"> <div class="bottom-info flex-row">
<div class="info"> <div class="info">
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['printTime'] || ''"></div> <div v-html="fieldDescription['printTime'] || ''"></div>
</template> </template>
<div class="info-item"> <div class="info-item">
<span>打印时间</span> <span>打印时间</span>
<b>×{{ defaultTime }}</b> <b>×{{ defaultTime }}</b>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip placement="left" popper-class="my-popper"> <el-tooltip placement="left" popper-class="my-popper">
<template slot="content"> <template slot="content">
<div v-html="fieldDescription['whiteInk'] || ''"></div> <div v-html="fieldDescription['whiteInk'] || ''"></div>
</template> </template>
<div class="info-item"> <div class="info-item">
<span>白色油墨量</span> <span>白色油墨量</span>
<b>{{ inkNum }}%</b> <b>{{ inkNum }}%</b>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="btn"> <div class="btn">
<el-input <el-input
size="small" size="small"
style="width: 100px;" style="width: 100px;"
oninput="value=value.replace(/[^\-?\d]/g,'')" oninput="value=value.replace(/[^\-?\d]/g,'')"
v-model="printSetting.printNum" v-model="printSetting.printNum"
></el-input> ></el-input>
<span>张</span> <span>张</span>
</div> </div>
</div> </div>
<el-button <el-button
@click="getPrintCmd" @click="getPrintCmd"
type="primary" type="primary"
style="width: 100%;height: 50px" style="width: 98%;height: 50px"
>打印 >打印
</el-button> </el-button>
</div> </div>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.flex-row { .flex-row {
display: flex; display: flex;
align-items: center; align-items: center;
display: flex; display: flex;
align-items: center; align-items: center;
span { span {
margin-left: 10px; margin-left: 10px;
} }
.el-slider { .el-slider {
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
margin: 0 10px; margin: 0 10px;
} }
} }
.el-form { .el-form {
height: 84%; height: 87%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 15px; padding-top: 0;
border-top: 1px solid #ececec; border-top: 1px solid #ececec;
} }
.detail-setting { .detail-setting {
border-top: 2px solid transparent; border-top: 2px solid transparent;
display: flex; display: flex;
background-color: #ececec; background-color: #ececec;
align-items: flex-start; align-items: flex-start;
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
overflow: auto; overflow: auto;
} }
.left-block-item { .left-block-item {
.setting-title { .setting-title {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
color: #409eff; color: #409eff;
position: relative; position: relative;
margin-bottom: 30px; margin :15px 0;
margin-top: 30px; display: inline-block;
display: inline-block; left: -15px;
left: -15px; }
} }
}
.setting-right {
.setting-right { box-sizing: border-box;
box-sizing: border-box; padding: 20px;
padding: 20px; width: 50%;
width: 50%; height: 100%;
height: 100%; color: #333;
color: #333; }
}
.setting-left {
.setting-left { width: 100%;
width: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 15px 30px; padding: 15px 30px;
background-color: white; background-color: white;
} }
.fixed-top { .fixed-top {
position: absolute; position: absolute;
word-break: break-all; word-break: break-all;
max-width: 44%; max-width: 44%;
} }
.bottom-info { .bottom-info {
padding: 15px 0; padding: 5px 0;
margin-top: 20px; margin-top: 10px;
font-size: 14px; font-size: 14px;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid #ececec; border-top: 1px solid #ececec;
} }
.info { .info {
width: 62%; width: 62%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.info-item { .info-item {
span { span {
margin-right: 5px; margin-right: 5px;
} }
} }
.save-setting { .save-setting {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.save-footer { .save-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 15px; margin-top: 15px;
} }
.print-div { .print-div {
position: fixed; position: fixed;
box-sizing: border-box; box-sizing: border-box;
right: 0; right: 0;
z-index: 4; z-index: 4;
bottom: 0; bottom: 0;
height: calc(100% - 51px); height: calc(100% - 51px);
.print-content { .print-content {
background: #ececec; background: #ececec;
border-left: 1px solid gray; border-left: 1px solid gray;
height: 100%; height: 100%;
padding: 10px; padding: 10px;
display: flex; display: flex;
width: 430px; width: 430px;
flex-direction: column; flex-direction: column;
} }
} }
.close-expand { .close-expand {
position: fixed; position: fixed;
right: 0; right: 0;
cursor: pointer; cursor: pointer;
top: 50%; top: 50%;
width: 20px; width: 20px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: blueviolet; background-color: blueviolet;
color: white; color: white;
justify-content: center; justify-content: center;
i { i {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
.open-expand { .open-expand {
position: absolute; position: absolute;
left: -20px; left: -20px;
cursor: pointer; cursor: pointer;
top: 50%; top: 50%;
width: 20px; width: 20px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: blueviolet; background-color: blueviolet;
color: white; color: white;
justify-content: center; justify-content: center;
i { i {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
</style> ::v-deep .el-form-item{
<style> margin-bottom: 9px;
.my-popper { }
background: rgba(0, 0, 0, 0.5) !important; </style>
} <style>
</style> .my-popper {
background: rgba(0, 0, 0, 0.5) !important;
}
</style>
src/views/design/index.vue
<script> <script>
import PHead from "./head/index.vue"; import PHead from "./head/index.vue";
import PMain from "./main/index.vue"; import PMain from "./main/index.vue";
import UpdateDialog from "@/views/design/updateDialog.vue"; import UpdateDialog from "@/views/design/updateDialog.vue";
export default { export default {
components: { PHead, PMain, UpdateDialog }, components: { PHead, PMain, UpdateDialog },
data() { data() {
return { return {
user: {}, user: {},
company: {} };
}; },
}, mounted() {
mounted() { this.user = this.$dataStore.get("user");
this.user = this.$dataStore.get("user"); this.$refs.updateDialog.checkUpdate().then(data => {
this.company = this.$dataStore.get("company"); if (data) {
this.$refs.updateDialog.checkUpdate().then(data => { // 有新版本更新
if (data) { this.$refs.updateDialog.open(data);
// 有新版本更新 }
this.$refs.updateDialog.open(data); });
} }
}); };
} </script>
};
</script> <template>
<div class="page">
<template> <p-head :user="user" />
<div class="page"> <p-main />
<p-head :company="company" :user="user" /> <update-dialog ref="updateDialog" />
<p-main /> </div>
<update-dialog ref="updateDialog" /> </template>
</div>
</template> <style scoped>
.page {
<style scoped> width: 100%;
.page { height: 100%;
width: 100%; display: flex;
height: 100%; flex-direction: column;
display: flex; }
flex-direction: column; </style>
}
</style>
\ No newline at end of file
src/views/design/main/imgSetting.vue
<script> <script>
export default { export default {
data() { data() {
return { return {
drawerShow: false, drawerShow: false,
form: { form: {
x: 0, x: 0,
rate: 0, rate: 0,
sx: 0, sx: 0,
zIndex: 0, zIndex: 0,
sh: 0, sh: 0,
sw: 0, sw: 0,
sy: 0, sy: 0,
y: 0, y: 0,
w: 0, w: 0,
h: 0, h: 0,
r: 0 r: 0
} }
}; };
}, },
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() {
if (this.item) { if (this.item) {
let setting = this.$dataStore.get("setting");
let setting = this.$dataStore.get("setting"); this.item.y = (this.item.y - this.item.h / 2);
this.item.y = (this.item.y - this.item.h / 2); this.item.x = (this.item.x - this.item.w / 2);
this.item.x = (this.item.x - this.item.w / 2); this.$dataStore.set("position_before_px", JSON.parse(JSON.stringify(this.item)));
this.$dataStore.set("position_before_px", JSON.parse(JSON.stringify(this.item))); console.log(
console.log( "setting",
"setting", setting
setting )
) let x_mm, w_mm, h_mm, y_mm;
let x_mm, w_mm, h_mm, y_mm; if (setting.unit === "mm") {
if (setting.unit === "mm") { x_mm = Number((this.item.x * 0.84183).toFixed(2));
x_mm = Number((this.item.x * 0.84183).toFixed(2)); w_mm = Number((this.item.w * 0.84183).toFixed(2));
w_mm = Number((this.item.w * 0.84183).toFixed(2)); h_mm = Number((this.item.h * 0.84183).toFixed(2));
h_mm = Number((this.item.h * 0.84183).toFixed(2)); y_mm = Number((this.item.y * 0.84183).toFixed(2));
y_mm = Number((this.item.y * 0.84183).toFixed(2)); } else if (setting.unit === "inch") {
} else if (setting.unit === "inch") { x_mm = Number((this.item.x * 0.84183) / 25.4).toFixed(2);
x_mm = Number((this.item.x * 0.84183) / 25.4).toFixed(2); w_mm = Number((this.item.w * 0.84183) / 25.4).toFixed(2);
w_mm = Number((this.item.w * 0.84183) / 25.4).toFixed(2); h_mm = Number((this.item.h * 0.84183) / 25.4).toFixed(2);
h_mm = Number((this.item.h * 0.84183) / 25.4).toFixed(2); y_mm = Number((this.item.y * 0.84183) / 25.4).toFixed(2);
y_mm = Number((this.item.y * 0.84183) / 25.4).toFixed(2); }
} // return
// return this.form.x = x_mm;
this.form.x = x_mm; this.form.rate = this.item.rate;
this.form.rate = this.item.rate; this.form.y = y_mm;
this.form.y = y_mm; this.form.w = w_mm;
this.form.w = w_mm; this.form.h = h_mm;
this.form.h = h_mm; this.form.zIndex = this.item.zIndex;
this.form.zIndex = this.item.zIndex; this.form.r = this.item.r;
this.form.r = this.item.r; this.$dataStore.set(`position_after_px`, JSON.parse(JSON.stringify(this.form)));
this.$dataStore.set(`position_after_px`, JSON.parse(JSON.stringify(this.form))); }
} },
}, immediate: true,
immediate: true, deep: true
deep: true }
} },
}, methods: {
methods: { 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; }
} 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);
let setting = this.$dataStore.get("setting");
let setting = this.$dataStore.get("setting"); if (setting.unit === "mm") {
if (setting.unit === "mm") { f.x = Number((f.x / 0.84183).toFixed(2));
f.x = Number((f.x / 0.84183).toFixed(2)); f.y = Number((f.y / 0.84183).toFixed(2));
f.y = Number((f.y / 0.84183).toFixed(2)); f.w = Number((f.w / 0.84183).toFixed(2));
f.w = Number((f.w / 0.84183).toFixed(2)); f.h = Number((f.h / 0.84183).toFixed(2));
f.h = Number((f.h / 0.84183).toFixed(2)); } else if (setting.unit === "inch") {
} else if (setting.unit === "inch") { f.x = (Number((f.x / 0.84183) * 25.4).toFixed(2));
f.x = (Number((f.x / 0.84183) * 25.4).toFixed(2)); f.y = (Number((f.y / 0.84183) * 25.4).toFixed(2));
f.y = (Number((f.y / 0.84183) * 25.4).toFixed(2)); f.w = (Number((f.w / 0.84183) * 25.4).toFixed(2));
f.w = (Number((f.w / 0.84183) * 25.4).toFixed(2)); f.h = (Number((f.h / 0.84183) * 25.4).toFixed(2));
f.h = (Number((f.h / 0.84183) * 25.4).toFixed(2)); }
} f.zIndex = Number((f.zIndex));
f.zIndex = Number((f.zIndex)); for (let k in f) {
for (let k in f) { f[k] = Number(f[k]);
f[k] = Number(f[k]); }
} this.$emit("change", f);
this.$emit("change", f); 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.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); if (f && f === "w") {
if (f && f === "w") { this.form.h = this.form.w * this.form.rate;
this.form.h = this.form.w * this.form.rate; }
} 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; }
} this.formChange();
this.formChange(); },
}, reduceValue(f) {
reduceValue(f) { 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); if (f && f === "w") {
if (f && f === "w") { this.form.h = this.form.w * this.form.rate;
this.form.h = this.form.w * this.form.rate; }
} 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; }
} this.formChange();
this.formChange(); }
} }
} };
}; </script>
</script>
<template>
<template> <div class="drawer" :style="{animation:`ltr-drawer-in .3s 1ms`}">
<div class="drawer" :style="{animation:`ltr-drawer-in .3s 1ms`}" v-show="visible"> <div class="title">
<div class="title"> 图片编辑
图片编辑 </div>
</div> <div class="img-form">
<div class="img-form"> <el-form size="small" style="" :model="form" label-position="left" label-width="30px">
<el-form size="small" style="" :model="form" label-position="left" label-width="30px"> <el-row :gutter="20">
<el-row :gutter="20"> <el-col :span="12">
<el-col :span="12"> <el-form-item label="x：" prop="x">
<el-form-item label="x：" prop="x"> <div class="form-content">
<div class="form-content"> <el-input @blur="formChange" v-model="form.x"></el-input>
<el-input @blur="formChange" v-model="form.x"></el-input> <div class="set-value">
<div class="set-value"> <i @click="addValue('x')" class="el-icon-arrow-up"></i>
<i @click="addValue('x')" class="el-icon-arrow-up"></i> <i @click="reduceValue('x')" class="el-icon-arrow-down"></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="12">
<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="12">
<el-col :span="12"> <el-form-item label="w：">
<el-form-item label="w："> <div class="form-content">
<div class="form-content"> <el-input @blur="formChange('w')" v-model="form.w"></el-input>
<el-input @blur="formChange('w')" v-model="form.w"></el-input> <div class="set-value">
<div class="set-value"> <i @click="addValue('w')" class="el-icon-arrow-up"></i>
<i @click="addValue('w')" class="el-icon-arrow-up"></i> <i @click="reduceValue('w')" class="el-icon-arrow-down"></i>
<i @click="reduceValue('w')" class="el-icon-arrow-down"></i> </div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="12">
<el-col :span="12"> <el-form-item label="h：">
<el-form-item label="h："> <div class="form-content">
<div class="form-content"> <el-input @blur="formChange('h')" v-model="form.h"></el-input>
<el-input @blur="formChange('h')" v-model="form.h"></el-input> <div class="set-value">
<div class="set-value"> <i @click="addValue('h')" class="el-icon-arrow-up"></i>
<i @click="addValue('h')" class="el-icon-arrow-up"></i> <i @click="reduceValue('h')" 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="12">
<el-col :span="12"> <el-form-item label="r：">
<el-form-item label="r："> <div class="form-content">
<div class="form-content"> <el-input maxlength="3" @blur="formChange" v-model="form.r">
<el-input maxlength="3" @blur="formChange" v-model="form.r">
</el-input>
</el-input> <div class="set-value">
<div class="set-value"> <i @click="addValue('r')" class="el-icon-arrow-up"></i>
<i @click="addValue('r')" class="el-icon-arrow-up"></i> <i @click="reduceValue('r')" 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="12">
<el-col :span="12"> <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 @blur="formChange" v-model="form.zIndex">
</el-input>
</el-input> <div class="set-value">
<div class="set-value"> <i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
<i @click="addValue('zIndex')" class="el-icon-arrow-up"></i> <i @click="reduceValue('zIndex')" class="el-icon-arrow-down"></i>
<i @click="reduceValue('zIndex')" class="el-icon-arrow-down"></i> </div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="24">
<el-col :span="24"> <el-tooltip content="居中">
<el-tooltip content="居中"> <el-button @click="$emit('ev','center')" size="mini">
<el-button @click="$emit('ev','center')" size="mini"> <img style="width: 13px;height: 13px" src="@/static/icon/juzhong-01.png" alt="">
<img style="width: 13px;height: 13px" src="@/static/icon/juzhong-01.png" alt=""> </el-button>
</el-button> </el-tooltip>
</el-tooltip> <el-tooltip content="垂直居中">
<el-tooltip content="垂直居中"> <el-button @click="$emit('ev','y_center')" size="mini">
<el-button @click="$emit('ev','y_center')" size="mini"> <img style="width: 13px;height: 13px" src="@/static/icon/vertical.png" alt="">
<img style="width: 13px;height: 13px" src="@/static/icon/vertical.png" alt=""> </el-button>
</el-button> </el-tooltip>
</el-tooltip> <el-tooltip content="水平居中">
<el-tooltip content="水平居中"> <el-button @click="$emit('ev','x_center')" size="mini">
<el-button @click="$emit('ev','x_center')" size="mini"> <img style="width: 13px;height: 13px" src="@/static/icon/shuipingjuzhong.png" alt="">
<img style="width: 13px;height: 13px" src="@/static/icon/shuipingjuzhong.png" alt=""> </el-button>
</el-button> </el-tooltip>
</el-tooltip> <el-tooltip content="上移一层">
<el-tooltip content="上移一层"> <el-button @click="$emit('ev','add_index')" size="mini">
<el-button @click="$emit('ev','add_index')" size="mini"> <img style="width: 13px;height: 13px" src="@/static/icon/shangyi.png" alt="">
<img style="width: 13px;height: 13px" src="@/static/icon/shangyi.png" alt=""> </el-button>
</el-button> </el-tooltip>
</el-tooltip> <el-tooltip content="下移一层">
<el-tooltip content="下移一层"> <el-button @click="$emit('ev','reduce_index')" size="mini">
<el-button @click="$emit('ev','reduce_index')" size="mini"> <img style="width: 13px;height: 13px" src="@/static/icon/xiayi.png" alt="">
<img style="width: 13px;height: 13px" src="@/static/icon/xiayi.png" alt=""> </el-button>
</el-button> </el-tooltip>
</el-tooltip> </el-col>
</el-col> </el-row>
</el-row> </el-form>
</el-form> </div>
</div> <slot></slot>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.img-form { .img-form {
padding: 10px; padding: 10px;
} }
::v-deep { ::v-deep {
.el-drawer__header { .el-drawer__header {
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.form-content { .form-content {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.set-value { .set-value {
height: 100%; height: 100%;
margin-left: 6px; margin-left: 6px;
i { i {
width: 20px; width: 20px;
height: 12px; height: 12px;
display: block; display: block;
text-align: center; text-align: center;
line-height: 12px; line-height: 12px;
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
&:hover { &:hover {
border-color: #ececec; border-color: #ececec;
} }
} }
} }
.drawer { .drawer {
width: 300px; width: 300px;
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, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12); box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(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);
//animation: ltr-drawer-in .3s 1ms; display: flex;
.title { flex-direction: column;
padding-bottom: 10px; //animation: ltr-drawer-in .3s 1ms;
border-bottom: 1px solid #ececec; .title {
} padding-bottom: 10px;
} border-bottom: 1px solid #ececec;
}
@keyframes ltr-drawer-in { }
0% {
transform: translate(-100%); @keyframes ltr-drawer-in {
} 0% {
100% { transform: translate(-100%);
transform: translate(0); }
} 100% {
} transform: translate(0);
}
@keyframes ltr-drawer-in { }
0% {
transform: translate(-100%); @keyframes ltr-drawer-in {
} 0% {
100% { transform: translate(-100%);
transform: translate(0); }
} 100% {
} transform: translate(0);
}
@keyframes ltr-drawer-out { }
0% {
transform: translate(0); @keyframes ltr-drawer-out {
} 0% {
100% { transform: translate(0);
transform: translate(-100%); }
} 100% {
} transform: translate(-100%);
}
</style> }
\ No newline at end of file
</style>
src/views/design/main/index.vue
<script> <script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate"; import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
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";
const img = require("../../../assets/bg_tshirt_shadow.png"); const img = require("../../../assets/bg_tshirt_shadow.png");
export default { export default {
components: { components: {
PrintDialog, PrintDialog,
VueDragResizeRotate, VueDragResizeRotate,
ImgSetting ImgSetting
}, },
destroyed() { destroyed() {
document.removeEventListener("keyup", this.keyup); document.removeEventListener("keyup", this.keyup);
document.removeEventListener("dragover", this.dragover); document.removeEventListener("dragover", this.dragover);
document.removeEventListener("drop", this.drop); document.removeEventListener("drop", this.drop);
}, },
computed: { computed: {
gridWH() { gridWH() {
if ( if (
!this.systemSetting || !this.systemSetting ||
!this.grid || !this.grid ||
!this.grid[this.systemSetting.gridValue] !this.grid[this.systemSetting.gridValue]
) )
return { w: 0, h: 0, v: 1 }; return { w: 0, h: 0, v: 1 };
return { return {
w: this.grid[this.systemSetting.gridValue].w, w: this.grid[this.systemSetting.gridValue].w,
v: this.grid[this.systemSetting.gridValue].value, v: this.grid[this.systemSetting.gridValue].value,
h: this.grid[this.systemSetting.gridValue].h h: this.grid[this.systemSetting.gridValue].h
}; };
}, },
gridSpacing() { gridSpacing() {
if (!this.systemSetting) return { w: 0, h: 0 }; if (!this.systemSetting) return { w: 0, h: 0 };
if (this.systemSetting.unit === "mm") { if (this.systemSetting.unit === "mm") {
return { return {
w: this.systemSetting.gridSpacing + "px", w: this.systemSetting.gridSpacing + "px",
h: this.systemSetting.gridSpacing + "px" h: this.systemSetting.gridSpacing + "px"
}; };
} else if (this.systemSetting.unit === "inch") { } else if (this.systemSetting.unit === "inch") {
console.log(this.systemSetting.gridValue); 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: this.systemSetting.gridSpacing * ((w - row + 1) / row) + "px",
h: this.systemSetting.gridSpacing * (h / col) + "px" h: this.systemSetting.gridSpacing * (h / col) + "px"
}; };
} }
}, },
computedGridSize() { computedGridSize() {
const getter = this.systemSetting; const getter = this.systemSetting;
const num = getter.gridSpacing.slice(0, 2); const num = getter.gridSpacing.slice(0, 2);
return 10 + "px"; return 10 + "px";
}, },
returnItem() { returnItem() {
if (this.selectIndex < 0) { if (this.selectIndex < 0) {
this.showImgSetting = false; this.showImgSetting = false;
return null; return null;
} }
let item = this.imgList[this.selectIndex]; let item = this.imgList[this.selectIndex];
if (item) { if (item) {
item = JSON.parse(JSON.stringify(item)); item = JSON.parse(JSON.stringify(item));
item.x = Number(item.x) - Number(item.w); item.x = Number(item.x) - Number(item.w);
item.y = Number(item.y) + Number(item.h) / 2; item.y = Number(item.y) + Number(item.h) / 2;
return JSON.parse(JSON.stringify(this.imgList[this.selectIndex])); return JSON.parse(JSON.stringify(this.imgList[this.selectIndex]));
} }
this.showImgSetting = false; this.showImgSetting = false;
return null; return null;
} }
}, },
data() { data() {
return { return {
actionList: [], actionList: [],
parentWidth: 0, parentWidth: 0,
systemSetting: {}, systemSetting: {},
imgHeight: 0, imgHeight: 0,
selectImgList: [], selectImgList: [],
bus: 0, bus: 0,
grid, grid,
showImgSetting: false, showImgSetting: true,
printDialogShow: true, printDialogShow: true,
parentHeight: 0, parentHeight: 0,
width: 0, width: 0,
selectIndex: -1, selectIndex: -1,
height: 0, height: 0,
x: 0, x: 0,
y: 0, y: 0,
imgList: [], imgList: [],
selectImgIndexList: [], selectImgIndexList: [],
imgHistoryList: [[]], imgHistoryList: [[]],
imgHistoryIndex: 0, imgHistoryIndex: 0,
row: 8, row: 8,
img, img,
col: 7 col: 7
}; };
}, },
watch: { watch: {
imgList: { imgList: {
handler() { handler() {
if (this.imgList.length > 0) { if (this.imgList.length > 0) {
this.$nextTick(() => { this.$nextTick(() => {
let dom = document.getElementsByClassName("drr"); let dom = document.getElementsByClassName("drr");
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 =
dom_i.style.zIndex === "" || !dom_i.style.zIndex dom_i.style.zIndex === "" || !dom_i.style.zIndex
? 0 ? 0
: dom_i.style.zIndex; : dom_i.style.zIndex;
dom[i].addEventListener("click", e => { dom[i].addEventListener("click", e => {
this.selectIndex = i; this.selectIndex = i;
this.selectItem(i); this.selectItem(i);
}); });
}); });
}); });
} }
this.$store.commit("changeImgList", this.imgList); this.$store.commit("changeImgList", this.imgList);
}, },
deep: true, deep: true,
immediate: true immediate: true
}, },
selectIndex() { selectIndex() {
if (this.selectIndex >= 0) { if (this.selectIndex >= 0) {
if (!this.showImgSetting) { if (!this.showImgSetting) {
this.showImgSetting = true; this.showImgSetting = true;
} }
} else { } else {
this.showImgSetting = false; this.showImgSetting = false;
} }
} }
}, },
methods: { methods: {
changePrintDialogShow() { changePrintDialogShow() {
this.printDialogShow = !this.printDialogShow; this.printDialogShow = !this.printDialogShow;
}, },
async drop(e) { async drop(e) {
let that = this; let that = this;
e.stopPropagation(); e.stopPropagation();
//阻止浏览器默认打开文件的操作 //阻止浏览器默认打开文件的操作
e.preventDefault(); e.preventDefault();
console.log(e); console.log(e);
const files = e.dataTransfer.files; const files = e.dataTransfer.files;
if (files.length === 0) return; if (files.length === 0) return;
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
if (files[i].type !== "image/png") { if (files[i].type !== "image/png") {
return that.$message.warning("只能上传png格式文件"); return that.$message.warning("只能上传png格式文件");
} }
let formData = new FormData(); let formData = new FormData();
formData.append("file", files[i]); formData.append("file", files[i]);
let { data } = await that.$api.post("/uploadImage", formData, { let { data } = await that.$api.post("/uploadImage", formData, {
headers: { headers: {
"Content-Type": "application/x-www-form-urlencoded" "Content-Type": "application/x-www-form-urlencoded"
} }
}); });
that.selectImgIndex = 0; that.selectImgIndex = 0;
that.addFile(data, file => { that.addFile(data, file => {
that.imgHistoryList.push(JSON.parse(JSON.stringify(that.imgList))); that.imgHistoryList.push(JSON.parse(JSON.stringify(that.imgList)));
}); });
} }
}, },
dragover(e) { dragover(e) {
e.stopPropagation(); e.stopPropagation();
//阻止浏览器默认打开文件的操作 //阻止浏览器默认打开文件的操作
e.preventDefault(); e.preventDefault();
e.dataTransfer.dropEffect = "copy"; e.dataTransfer.dropEffect = "copy";
}, },
keyup(e) { keyup(e) {
console.log(e); console.log(e);
if (e.keyCode == 90 && e.ctrlKey) { if (e.keyCode == 90 && e.ctrlKey) {
let i = this.imgHistoryList.length - (2 + this.imgHistoryIndex); let i = this.imgHistoryList.length - (2 + this.imgHistoryIndex);
if (this.imgHistoryList[i]) { if (this.imgHistoryList[i]) {
this.imgList = JSON.parse(JSON.stringify(this.imgHistoryList[i])); this.imgList = JSON.parse(JSON.stringify(this.imgHistoryList[i]));
this.imgHistoryIndex = this.imgHistoryIndex + 1; this.imgHistoryIndex = this.imgHistoryIndex + 1;
} }
} }
if (this.selectIndex >= 0) { if (this.selectIndex >= 0) {
if (e.keyCode === 38) { if (e.keyCode === 38) {
//上 //上
this.$set( this.$set(
this.imgList[this.selectIndex], this.imgList[this.selectIndex],
"y", "y",
Number(this.imgList[this.selectIndex].y) - 1 Number(this.imgList[this.selectIndex].y) - 1
); );
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
} }
if (e.keyCode === 40) { if (e.keyCode === 40) {
//下 //下
this.$set( this.$set(
this.imgList[this.selectIndex], this.imgList[this.selectIndex],
"y", "y",
Number(this.imgList[this.selectIndex].y) + 1 Number(this.imgList[this.selectIndex].y) + 1
); );
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
} }
if (e.keyCode === 37) { if (e.keyCode === 37) {
//左 //左
this.$set( this.$set(
this.imgList[this.selectIndex], this.imgList[this.selectIndex],
"x", "x",
Number(this.imgList[this.selectIndex].x) - 1 Number(this.imgList[this.selectIndex].x) - 1
); );
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
} }
if (e.keyCode === 39) { if (e.keyCode === 39) {
//右 //右
this.$set( this.$set(
this.imgList[this.selectIndex], this.imgList[this.selectIndex],
"x", "x",
Number(this.imgList[this.selectIndex].x) + 1 Number(this.imgList[this.selectIndex].x) + 1
); );
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
} }
} }
if (e.keyCode === 8) { if (e.keyCode === 8) {
if (this.selectIndex >= 0) { if (this.selectIndex >= 0) {
this.imgList.splice(this.selectIndex, 1); this.imgList.splice(this.selectIndex, 1);
if (this.imgList.length > 0) { if (this.imgList.length > 0) {
this.selectIndex = 0; this.selectIndex = 0;
} else { } else {
this.selectIndex = -1; this.selectIndex = -1;
} }
} }
} }
}, },
indexChange(v) { indexChange(v) {
console.log(v); console.log(v);
if (this.imgList.length === 0) return; if (this.imgList.length === 0) return;
let index = !this.imgList[this.selectIndex] ? 0 : this.selectIndex; let index = !this.imgList[this.selectIndex] ? 0 : this.selectIndex;
let item = this.$store.state.actionList[v]; let item = this.$store.state.actionList[v];
if (!item) return; if (!item) return;
if (item.t === "drag") { if (item.t === "drag") {
this.$set(this.imgList[index], "x", item.x); this.$set(this.imgList[index], "x", item.x);
this.$set(this.imgList[index], "y", item.y); this.$set(this.imgList[index], "y", item.y);
} else if (item.t === "resize") { } else if (item.t === "resize") {
this.$set(this.imgList[index], "x", item.x); this.$set(this.imgList[index], "x", item.x);
this.$set(this.imgList[index], "y", item.y); this.$set(this.imgList[index], "y", item.y);
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(); console.log();
}, },
getOneMmsPx() { getOneMmsPx() {
// 创建一个1mm宽的元素插入到页面，然后坐等出结果 // 创建一个1mm宽的元素插入到页面，然后坐等出结果
let div = document.createElement("div"); let div = document.createElement("div");
div.id = "mm"; div.id = "mm";
div.style.width = "1mm"; div.style.width = "1mm";
document.querySelector("body").appendChild(div); document.querySelector("body").appendChild(div);
// 原生方法获取浏览器对元素的计算值 // 原生方法获取浏览器对元素的计算值
let mm1 = document.getElementById("mm").getBoundingClientRect(); let mm1 = document.getElementById("mm").getBoundingClientRect();
return mm1.width; return mm1.width;
}, },
selectImg(it, i) { selectImg(it, i) {
// this.selectImgIndexList.push(i) // this.selectImgIndexList.push(i)
// this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList)) let item = this.imgList.find(img=>img.fileName===it.fileName)
this.getBackFile([it], file => { if(item) return
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); // this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
}); this.getBackFile([it], file => {
}, this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
ev(type) { });
if (this.selectIndex < 0) return; },
// if (this.selectIndex === -1) this.selectIndex = 0 ev(type) {
if (!this.imgList[this.selectIndex]) return; if (this.selectIndex < 0) return;
// if (this.selectIndex === -1) this.selectIndex = 0
let w = document.getElementById("line").clientWidth / 2; if (!this.imgList[this.selectIndex]) return;
let h = document.getElementById("line").clientHeight / 2;
let dom = document.getElementsByClassName("drr")[this.selectIndex]; let w = document.getElementById("line").clientWidth / 2;
let z_index = let h = document.getElementById("line").clientHeight / 2;
dom.style.zIndex === "" || !dom.style.zIndex ? 0 : dom.style.zIndex; let dom = document.getElementsByClassName("drr")[this.selectIndex];
switch (type) { let z_index =
case "center": dom.style.zIndex === "" || !dom.style.zIndex ? 0 : dom.style.zIndex;
this.$set(this.imgList[this.selectIndex], "x", Number(w)); switch (type) {
this.$set(this.imgList[this.selectIndex], "y", Number(h)); case "center":
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.$set(this.imgList[this.selectIndex], "x", Number(w));
break; this.$set(this.imgList[this.selectIndex], "y", Number(h));
case "x_center": this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
this.$set(this.imgList[this.selectIndex], "x", Number(w)); break;
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); case "x_center":
break; this.$set(this.imgList[this.selectIndex], "x", Number(w));
case "y_center": this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
this.$set(this.imgList[this.selectIndex], "y", Number(h)); break;
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); case "y_center":
break; this.$set(this.imgList[this.selectIndex], "y", Number(h));
case "add_index": this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
dom.style.zIndex = Number(z_index) + 1; break;
console.log(dom.style.zIndex); case "add_index":
this.$set( dom.style.zIndex = Number(z_index) + 1;
this.imgList[this.selectIndex], console.log(dom.style.zIndex);
"zIndex", this.$set(
this.imgList[this.selectIndex].zIndex + 1 this.imgList[this.selectIndex],
); "zIndex",
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgList[this.selectIndex].zIndex + 1
break; );
case "reduce_index": this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
dom.style.zIndex = Number(z_index) - 1; break;
console.log(dom.style.zIndex); case "reduce_index":
this.$set( dom.style.zIndex = Number(z_index) - 1;
this.imgList[this.selectIndex], console.log(dom.style.zIndex);
"zIndex", this.$set(
this.imgList[this.selectIndex].zIndex - 1 this.imgList[this.selectIndex],
); "zIndex",
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.imgList[this.selectIndex].zIndex - 1
break; );
default: this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
break; break;
} default:
}, break;
formChange(form) { }
// if (this.selectIndex === -1) this.selectIndex = 0 },
if (!this.imgList[this.selectIndex]) return; formChange(form) {
let f = JSON.parse(JSON.stringify(form)); // if (this.selectIndex === -1) this.selectIndex = 0
let x_mm = f.x; if (!this.imgList[this.selectIndex]) return;
let w_mm = f.w; let f = JSON.parse(JSON.stringify(form));
let h_mm = f.h; let x_mm = f.x;
let y_mm = f.y; let w_mm = f.w;
this.$set(this.imgList[this.selectIndex], "x", x_mm); let h_mm = f.h;
this.$set(this.imgList[this.selectIndex], "y", y_mm); let y_mm = f.y;
this.$set(this.imgList[this.selectIndex], "w", w_mm); this.$set(this.imgList[this.selectIndex], "x", x_mm);
this.$set(this.imgList[this.selectIndex], "h", h_mm); this.$set(this.imgList[this.selectIndex], "y", y_mm);
this.$set(this.imgList[this.selectIndex], "r", f.r); this.$set(this.imgList[this.selectIndex], "w", w_mm);
this.$set(this.imgList[this.selectIndex], "zIndex", f.zIndex); this.$set(this.imgList[this.selectIndex], "h", h_mm);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.$set(this.imgList[this.selectIndex], "r", f.r);
}, this.$set(this.imgList[this.selectIndex], "zIndex", f.zIndex);
close() { this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
this.showImgSetting = false; },
}, close() {
onDragDebounce(left, top, item, index) {}, this.showImgSetting = false;
},
dragStop(data, item) { onDragDebounce(left, top, item, index) {},
this.$set(item, "y", data.y);
this.$set(item, "x", data.x); dragStop(data, item) {
// console.log(left, top) this.$set(item, "y", data.y);
// if (!this.imgList[this.selectIndex]) return this.$set(item, "x", data.x);
// this.$set(this.imgList[this.selectIndex], 'x', left) // console.log(left, top)
// this.$set(this.imgList[this.selectIndex], 'y', top) // if (!this.imgList[this.selectIndex]) return
// this.selectIndex = -1 // this.$set(this.imgList[this.selectIndex], 'x', left)
// this.actionList.unshift({ // this.$set(this.imgList[this.selectIndex], 'y', top)
// t: 'drag', // this.selectIndex = -1
// x: left, // this.actionList.unshift({
// y: top // t: 'drag',
// }) // x: left,
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); // y: top
// this.$store.commit('changeActionList', this.actionList) // })
}, this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
resizeStop(data, item) { // this.$store.commit('changeActionList', this.actionList)
// if (this.selectIndex === -1) this.selectIndex = 0 },
console.log("drag", this.selectIndex); resizeStop(data, item) {
if (this.selectIndex < 0) return; // if (this.selectIndex === -1) this.selectIndex = 0
this.$set(item, "y", data.y); console.log("drag", this.selectIndex);
this.$set(item, "w", data.w); if (this.selectIndex < 0) return;
this.$set(item, "h", data.h); this.$set(item, "y", data.y);
this.$set(item, "x", data.x); this.$set(item, "w", data.w);
// console.log(this.selectIndex,'resize',x, y, w, h) this.$set(item, "h", data.h);
this.$set(item, "x", data.x);
// this.actionList.unshift({ // console.log(this.selectIndex,'resize',x, y, w, h)
// t: 'resize',
// x, // this.actionList.unshift({
// y, // t: 'resize',
// w, // x,
// h // y,
// }) // w,
// this.$store.commit('changeActionList', this.actionList) // h
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); // })
}, // this.$store.commit('changeActionList', this.actionList)
resizing(index) {}, this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
rotating(data, item) { },
console.log(data); resizing(index) {},
this.$set(item, "r", data.angle.toFixed(2)); rotating(data, item) {
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); console.log(data);
}, this.$set(item, "r", data.angle.toFixed(2));
outsideClick(e) { this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
if ( },
!( outsideClick(e) {
e.target.className.includes("drr") || if (
e.target.className.includes("sucaitu-img") !(
) e.target.className.includes("drr") ||
) { e.target.className.includes("sucaitu-img")
this.selectIndex = -1; )
this.close(); ) {
} this.selectIndex = -1;
}, this.close();
selectItem(index) { }
let dom = document.getElementsByClassName("drr"); },
for (let i = 0; i < dom.length; i++) { selectItem(index) {
if (index !== i) { let dom = document.getElementsByClassName("drr");
dom[i].classList.remove("active"); for (let i = 0; i < dom.length; i++) {
dom[i].classList.add("inactive"); if (index !== i) {
} dom[i].classList.remove("active");
} dom[i].classList.add("inactive");
this.selectIndex = index; }
}, }
deSelect(index) { this.selectIndex = index;
console.log(index, 222222222); },
this.close(); deSelect(index) {
this.selectIndex = -1; console.log(index, 222222222);
}, this.close();
delImg(index) { this.selectIndex = -1;
console.log(index, "index"); },
this.imgList.splice(index, 1); delImg(index) {
if (this.imgList.length > 0) { console.log(index, "index");
this.selectIndex = 0; this.imgList.splice(index, 1);
this.showImgSetting = true; if (this.imgList.length > 0) {
} else { this.selectIndex = 0;
this.selectIndex = -1; this.showImgSetting = true;
} } else {
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); this.selectIndex = -1;
}, }
fileToBase64(file) { this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
return new Promise((resolve, reject) => { },
// 创建一个新的 FileReader 对象 fileToBase64(file) {
const reader = new FileReader(); return new Promise((resolve, reject) => {
// 读取 File 对象 // 创建一个新的 FileReader 对象
reader.readAsDataURL(file); const reader = new FileReader();
// 加载完成后 // 读取 File 对象
reader.onload = function() { reader.readAsDataURL(file);
// 将读取的数据转换为 base64 编码的字符串 // 加载完成后
const base64String = reader.result; reader.onload = function() {
// 解析为 Promise 对象，并返回 base64 编码的字符串 // 将读取的数据转换为 base64 编码的字符串
resolve(base64String); const base64String = reader.result;
}; // 解析为 Promise 对象，并返回 base64 编码的字符串
resolve(base64String);
// 加载失败时 };
reader.onerror = function() {
reject(new Error("Failed to load file")); // 加载失败时
}; reader.onerror = function() {
}); reject(new Error("Failed to load file"));
}, };
getBackFile(files, callback) { });
console.log(files); },
let that = this; getBackFile(files, callback) {
let bw = document.getElementById("line").clientWidth; console.log(files);
let bh = document.getElementById("line").clientHeight; let that = this;
for (let i = 0; i < files.length; i++) { let bw = document.getElementById("line").clientWidth;
files[i].url = files[i].productionFile; let bh = document.getElementById("line").clientHeight;
that.$nextTick(() => { for (let i = 0; i < files.length; i++) {
that.getImageSize(files[i].url).then(data => { files[i].url = files[i].productionFile;
let w = document.getElementById("line").clientWidth / 2; that.$nextTick(() => {
let rate = data.height / data.width; that.getImageSize(files[i].url).then(data => {
that.imgList.push({ let w = document.getElementById("line").clientWidth / 2;
url: files[i].url, let rate = data.height / data.width;
fileName: files[i].fileName, that.imgList.push({
rate, url: files[i].url,
w: bw * (2 / 3), fileName: files[i].fileName,
zIndex: that.imgList.length, rate,
x: w, w: bw * (2 / 3),
y: (bw * (2 / 3) * rate) / 2, zIndex: that.imgList.length,
h: bw * (2 / 3) * rate, x: w,
r: 0 y: (bw * (2 / 3) * rate) / 2,
}); h: bw * (2 / 3) * rate,
that.selectIndex = that.imgList.length - 1; r: 0
that.showImgSetting = true; });
if (i === files.length - 1) { that.selectIndex = that.imgList.length - 1;
callback && callback(); that.showImgSetting = true;
} if (i === files.length - 1) {
}); callback && callback();
}); }
} });
}, });
addFile(file, callback) { }
let that = this; },
let bw = document.getElementById("line").clientWidth; addFile(file, callback) {
let bh = document.getElementById("line").clientHeight; let that = this;
console.log(bw, bh); let bw = document.getElementById("line").clientWidth;
that.$nextTick(() => { let bh = document.getElementById("line").clientHeight;
that.getImageSize(file.url).then(data => { console.log(bw, bh);
let w = document.getElementById("line").clientWidth / 2; that.$nextTick(() => {
let rate = data.height / data.width; that.getImageSize(file.url).then(data => {
that.imgList.push({ let w = document.getElementById("line").clientWidth / 2;
url: file.url, let rate = data.height / data.width;
w: bw * (2 / 3), that.imgList.push({
rate, url: file.url,
fileName: file.fileName, w: bw * (2 / 3),
zIndex: that.imgList.length, rate,
x: w, fileName: file.fileName,
y: (bw * (2 / 3) * rate) / 2, zIndex: that.imgList.length,
h: bw * (2 / 3) * rate, x: w,
r: 0 y: (bw * (2 / 3) * rate) / 2,
}); h: bw * (2 / 3) * rate,
console.log(that.imgList); r: 0
that.selectIndex = that.imgList.length - 1; });
that.showImgSetting = true; console.log(that.imgList);
callback && callback(file); that.selectIndex = that.imgList.length - 1;
}); that.showImgSetting = true;
}); callback && callback(file);
}, });
listenUpload() { });
let that = this; },
document.getElementById("img").onmousedown = function(e) { listenUpload() {
e.preventDefault(); let that = this;
}; document.getElementById("img").onmousedown = function(e) {
that.parentWidth = document.getElementById("img").clientWidth; e.preventDefault();
that.parentHeight = document.getElementById("img").clientHeight; };
let dp = document.getElementsByClassName("container")[0]; that.parentWidth = document.getElementById("img").clientWidth;
dp.addEventListener("dragover", this.dragover); that.parentHeight = document.getElementById("img").clientHeight;
dp.addEventListener("drop", this.drop); let dp = document.getElementsByClassName("container")[0];
}, dp.addEventListener("dragover", this.dragover);
getImageSize(url) { dp.addEventListener("drop", this.drop);
return new Promise(function(resolve, reject) { },
let image = new Image(); getImageSize(url) {
image.onload = function() { return new Promise(function(resolve, reject) {
resolve({ let image = new Image();
width: image.width, image.onload = function() {
height: image.height resolve({
}); width: image.width,
}; height: image.height
image.onerror = function() { });
reject(new Error("error")); };
}; image.onerror = function() {
image.src = url; reject(new Error("error"));
}); };
}, image.src = url;
});
/** },
* 根据主题颜色修改图片颜色
* @param {[type]} imgUrl 图片url /**
* @param {[type]} color 主题颜色 * 根据主题颜色修改图片颜色
* @param {Function} callback 返回值 返回base64 * @param {[type]} imgUrl 图片url
*/ * @param {[type]} color 主题颜色
changeImageColor(color = "#00ff7f", callback) { * @param {Function} callback 返回值 返回base64
let threshold = 114; //默认颜色阀值 为 114 －>和默认图相关 */
let img = new Image(); changeImageColor(color = "#00ff7f", callback) {
img.src = require("../../../assets/bg_tshirt_shadow.png"); let threshold = 114; //默认颜色阀值 为 114 －>和默认图相关
let newR = parseInt("0x" + color.substr(1, 2)); let img = new Image();
let newG = parseInt("0x" + color.substr(3, 2)); img.src = require("../../../assets/bg_tshirt_shadow.png");
let newB = parseInt("0x" + color.substr(5, 2)); let newR = parseInt("0x" + color.substr(1, 2));
//图片加载后进行处理 let newG = parseInt("0x" + color.substr(3, 2));
img.onload = function() { let newB = parseInt("0x" + color.substr(5, 2));
let width = img.width, //图片加载后进行处理
height = img.height, img.onload = function() {
canvas = document.createElement("canvas"), let width = img.width,
ctx = canvas.getContext("2d"); height = img.height,
canvas.width = width; canvas = document.createElement("canvas"),
canvas.height = height; ctx = canvas.getContext("2d");
// 将源图片复制到画布上 canvas.width = width;
ctx.drawImage(img, 0, 0, width, height); canvas.height = height;
// 获取画布的像素信息 // 将源图片复制到画布上
let imageData = ctx.getImageData(0, 0, width, height), ctx.drawImage(img, 0, 0, width, height);
data = imageData.data; // 获取画布的像素信息
// 对像素集合中的单个像素进行循环，每个像素是由4个通道组成，所以要注意 let imageData = ctx.getImageData(0, 0, width, height),
let i = 0; data = imageData.data;
while (i < data.length) { // 对像素集合中的单个像素进行循环，每个像素是由4个通道组成，所以要注意
let r = data[i++], let i = 0;
g = data[i++], while (i < data.length) {
b = data[i++], let r = data[i++],
a = data[i++]; g = data[i++],
//计算透明度 b = data[i++],
let alp = (255 - r) / (255 - threshold); a = data[i++];
//判断是否透明 //计算透明度
let isTransparent = r == 255 && g == 255 && b == 255 && a == 255; let alp = (255 - r) / (255 - threshold);
if (isTransparent) { //判断是否透明
data[i - 1] = 0; let isTransparent = r == 255 && g == 255 && b == 255 && a == 255;
} else { if (isTransparent) {
data[i - 4] = newR; data[i - 1] = 0;
data[i - 3] = newG; } else {
data[i - 2] = newB; data[i - 4] = newR;
data[i - 1] = a !== 255 ? 255 - a : alp * 255; //处理透明的图片和不透明的图片 data[i - 3] = newG;
} data[i - 2] = newB;
} data[i - 1] = a !== 255 ? 255 - a : alp * 255; //处理透明的图片和不透明的图片
// 将修改后的代码复制回画布中 }
ctx.putImageData(imageData, 0, 0); }
// 图片导出为 png 格式 // 将修改后的代码复制回画布中
let imgType = "png"; ctx.putImageData(imageData, 0, 0);
let imgData = canvas.toDataURL(imgType); // 图片导出为 png 格式
let imgType = "png";
callback && callback(imgData); let imgData = canvas.toDataURL(imgType);
};
return img; callback && callback(imgData);
} };
}, return img;
mounted() { }
this.imgHeight = window.screen.height + "px"; },
this.systemSetting = this.$dataStore.get("setting"); mounted() {
bus.$on("busEmit", v => { this.imgHeight = window.screen.height + "px";
let { type, value } = v; this.systemSetting = this.$dataStore.get("setting");
switch (type) { bus.$on("busEmit", v => {
case "grid": let { type, value } = v;
this.row = value.row; switch (type) {
this.col = value.col; case "grid":
break; this.row = value.row;
case "index": this.col = value.col;
this.indexChange(value); break;
break; case "index":
case "bg": this.indexChange(value);
this.changeImageColor(value, res => { break;
this.img = res; case "bg":
}); this.changeImageColor(value, res => {
break; this.img = res;
case "updateSystemSetting": });
console.log(this.$dataStore); break;
this.systemSetting = this.$dataStore.get("setting"); case "updateSystemSetting":
break; console.log(this.$dataStore);
case "uploadImage": this.systemSetting = this.$dataStore.get("setting");
this.addFile(value, file => { break;
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList))); case "uploadImage":
// this.selectImgList.push(file) this.addFile(value, file => {
// this.selectImgIndex = this.selectImgList.length - 1 this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
}); // this.selectImgList.push(file)
break; // this.selectImgIndex = this.selectImgList.length - 1
case "sendFile": });
this.imgList = []; break;
this.selectIndex = -1; case "sendFile":
if (value.length > 0) { this.imgList = [];
console.log(value); this.selectIndex = -1;
this.selectImgList = value; if (value.length > 0) {
this.selectImgIndex = 0; console.log(value);
this.getBackFile([value[0]], file => { this.selectImgList = value;
this.imgHistoryList.push( this.selectImgIndex = 0;
JSON.parse(JSON.stringify(this.imgList)) this.getBackFile([value[0]], file => {
); this.imgHistoryList.push(
}); JSON.parse(JSON.stringify(this.imgList))
// this.addFile([value[0].file]) );
} });
break; // this.addFile([value[0].file])
default: }
break; break;
} default:
}); break;
}
document.addEventListener("keyup", this.keyup); });
this.$nextTick(() => {
this.listenUpload(); document.addEventListener("keyup", this.keyup);
}); this.$nextTick(() => {
} this.listenUpload();
}; });
</script> }
};
<template> </script>
<div class="page-main">
<div @click="outsideClick" class="main-bg"> <template>
<div class="container"> <div class="page-main">
<div class="select-img" v-if="selectImgList.length > 1"> <div @click="outsideClick" class="main-bg">
<div <div class="container">
@click="selectImg(it, i)" <div :style="{ height: imgHeight }" id="img">
v-for="(it, i) in selectImgList" <div id="line">
:key="i" <div
class="img-item" class="sucaitu"
> :style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
<img style="width: 100px;height: auto;" :src="it.productionFile" /> >
<span>{{ it.designId }}</span> <vue-drag-resize-rotate
</div> :w="item.w"
</div> class-name="my-drag-resize-rotate"
<div :style="{ height: imgHeight }" id="img"> :prevent-deactivation="false"
<div id="line"> :h="item.h"
<div :x="item.x"
class="sucaitu" :z="item.zIndex"
:style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }" :aspectRatio="true"
> :isActive="index === selectIndex"
<vue-drag-resize-rotate :y="item.y"
:w="item.w" v-for="(item, index) in imgList"
class-name="my-drag-resize-rotate" :key="index"
:prevent-deactivation="false" :draggable="true"
:h="item.h" :resizable="true"
:x="item.x" :rotatable="true"
:z="item.zIndex" @dragstop="a => dragStop(a, item)"
:aspectRatio="true" @resizestop="a => resizeStop(a, item)"
:isActive="index === selectIndex" @rotatestop="a => rotating(a, item)"
:y="item.y" :angle="item.r"
v-for="(item, index) in imgList" >
:key="index" <div
:draggable="true" ref="sucaitu-img"
:resizable="true" :class="{ active: index === selectIndex }"
:rotatable="true" :style="{ zIndex: item.zIndex }"
@dragstop="a => dragStop(a, item)" class="sucaitu-img img element"
@resizestop="a => resizeStop(a, item)" >
@rotatestop="a => rotating(a, item)" <img
:angle="item.r" crossOrigin="anonymous"
> :src="item.url"
<div alt=""
ref="sucaitu-img" class="sucaitu-img"
:class="{ active: index === selectIndex }" />
:style="{ zIndex: item.zIndex }" <i
class="sucaitu-img img element" @click="delImg(index)"
> v-if="index === selectIndex"
<img class=" close el-icon-close"
crossOrigin="anonymous" ></i>
:src="item.url" <div
alt="" v-if="index === selectIndex"
class="sucaitu-img" class="control-point control-rotator"
/> ></div>
<i </div>
@click="delImg(index)" </vue-drag-resize-rotate>
v-if="index === selectIndex" </div>
class=" close el-icon-close" <div
></i> v-if="systemSetting.gridShow === 1"
<div :style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
v-if="index === selectIndex" class="grid"
class="control-point control-rotator" >
></div> <div
</div> :style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }"
</vue-drag-resize-rotate> class="grid-row"
</div> v-for="it in 100"
<div :key="it"
v-if="systemSetting.gridShow === 1" >
:style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }" <div
class="grid" :style="{ width: gridSpacing.w, height: gridSpacing.h }"
> class="grid-col"
<div v-for="it in 100"
:style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }" :key="it"
class="grid-row" ></div>
v-for="it in 100" </div>
:key="it" </div>
> </div>
<div <img class="template-img" draggable="false" :src="img" alt="" />
:style="{ width: gridSpacing.w, height: gridSpacing.h }" </div>
class="grid-col"
v-for="it in 100" <print-dialog
:key="it" :visible="printDialogShow"
></div> :imgList="imgList"
</div> :byPlatenSize="gridWH.v"
</div> >
</div> <i
<img class="template-img" draggable="false" :src="img" alt="" /> @click="changePrintDialogShow"
</div> :class="
!printDialogShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right'
<print-dialog "
:visible="printDialogShow" ></i>
:imgList="imgList" </print-dialog>
:byPlatenSize="gridWH.v" </div>
> </div>
<i <img-setting
@click="changePrintDialogShow" @ev="ev"
:class=" @change="formChange"
!printDialogShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right' :item="returnItem"
" @close="close"
></i>
</print-dialog> >
</div> <div class="select-img" v-if="selectImgList.length">
</div> <div
<img-setting @click="selectImg(it, i)"
@ev="ev" v-for="(it, i) in selectImgList"
@change="formChange" :key="i"
:item="returnItem" class="img-item"
@close="close" >
:visible="showImgSetting" <img style="width: 140px;height: auto;" :src="it.productionFile" />
> <span>{{ it.designId }}</span>
</img-setting> </div>
</div> </div>
</template> </img-setting>
</div>
<style lang="less" scoped> </template>
.page-main {
flex: 1; <style lang="less" scoped>
flex-shrink: 0; .page-main {
overflow: hidden; flex: 1;
box-sizing: border-box; flex-shrink: 0;
} overflow: hidden;
box-sizing: border-box;
.main-bg { }
height: 100%;
display: flex; .main-bg {
align-items: center; height: 100%;
justify-content: center; display: flex;
} align-items: center;
justify-content: center;
#line { }
position: absolute;
z-index: 2; #line {
} position: absolute;
z-index: 2;
.grid { }
border: 1px solid gray;
overflow: hidden; .grid {
border: 1px solid gray;
.grid-row { overflow: hidden;
.grid-col {
display: inline-block; .grid-row {
border: 1px solid gray; .grid-col {
border-right: none; display: inline-block;
border-bottom: none; border: 1px solid gray;
} border-right: none;
} border-bottom: none;
} }
}
.grid-row { }
width: 100%;
overflow: hidden; .grid-row {
height: 10px; width: 100%;
line-height: 10px; overflow: hidden;
white-space: nowrap; height: 10px;
line-height: 10px;
&:nth-of-type(1) { white-space: nowrap;
.grid-col {
border-top: none !important; &:nth-of-type(1) {
} .grid-col {
} border-top: none !important;
}
&:nth-last-of-type(1) { }
.grid-col {
border-bottom: none !important; &:nth-last-of-type(1) {
} .grid-col {
} border-bottom: none !important;
}
.grid-col { }
&:nth-of-type(1) {
border-left: none !important; .grid-col {
} &:nth-of-type(1) {
} border-left: none !important;
} }
}
#img { }
position: absolute;
z-index: 1; #img {
left: 130px; position: absolute;
height: 100%; z-index: 1;
display: flex; left: 130px;
align-items: center; height: 100%;
justify-content: center; display: flex;
width: auto; align-items: center;
justify-content: center;
img { width: auto;
pointer-events: none;
width: auto; img {
height: 100%; pointer-events: none;
} width: auto;
} height: 100%;
}
.container { }
display: flex;
width: 100%; .container {
height: 100%; display: flex;
justify-content: center; width: 100%;
align-items: center; height: 100%;
position: relative; justify-content: center;
} align-items: center;
position: relative;
.sucaitu { }
position: absolute;
z-index: 0; .sucaitu {
width: 100%; position: absolute;
//display: flex; z-index: 0;
//justify-content: center; width: 100%;
//align-items: center; //display: flex;
height: 100%; //justify-content: center;
//align-items: center;
img { height: 100%;
width: 100%;
height: 100%; img {
} width: 100%;
height: 100%;
.close { }
position: absolute;
top: -11px; .close {
right: -12px; position: absolute;
color: white; top: -11px;
z-index: 1000; right: -12px;
width: 20px; color: white;
cursor: pointer; z-index: 1000;
height: 20px; width: 20px;
background: red; cursor: pointer;
border-radius: 50%; height: 20px;
display: flex; background: red;
align-items: center; border-radius: 50%;
justify-content: center; display: flex;
} align-items: center;
justify-content: center;
.img { }
height: fit-content;
width: 100%; .img {
height: 100%; height: fit-content;
cursor: move; width: 100%;
border: 1px dashed transparent; height: 100%;
} cursor: move;
} border: 1px dashed transparent;
}
.select-img { }
border-color: #409eff;
width: 120px; .select-img {
z-index: 5; border: 1px solid #ececec;
overflow: auto; width: 100%;
background-color: gray; overflow: auto;
height: calc(100% - 72px); height: calc(100% - 251px);
padding: 10px; padding: 10px;
position: fixed; box-sizing: border-box;
box-sizing: border-box; }
left: 0;
bottom: 0; img {
border-right: 1px solid #ececec; user-select: none;
} user-drag: none;
}
img {
user-select: none; ::v-deep .active,
user-drag: none; .active {
} border-color: #66b1ff !important;
}
::v-deep .active,
.active { .select-img-index {
border-color: #66b1ff !important; box-sizing: border-box;
} border-color: #409eff !important;
}
.select-img-index {
box-sizing: border-box; .img-item {
border-color: #409eff !important; padding: 5px;
} display: flex;
cursor: pointer;
.img-item { margin-bottom: 20px;
padding: 5px; border: 2px dashed transparent;
display: flex; flex-direction: column;
cursor: pointer; align-items: center;
margin-bottom: 20px; justify-content: center;
border: 2px dashed transparent;
flex-direction: column; span {
align-items: center; font-size: 14px;
justify-content: center; margin: 5px 0;
color: black;
span { }
margin: 5px 0; }
color: white;
} .sucaitu-img {
} position: relative;
}
.sucaitu-img { </style>
position: relative; <style>
} .el-upload {
</style> height: 100%;
<style> }
.el-upload {
height: 100%; .drr-stick {
} z-index: 9999;
}
.drr-stick {
z-index: 9999; .drr-stick-tr {
} z-index: -1 !important;
}
.drr-stick-tr {
z-index: -1 !important; .my-drag-resize-rotate {
} border-color: transparent;
}
.my-drag-resize-rotate {
border-color: transparent; .handle-rot::before,
} .handle-rot::after {
display: none;
.handle-rot::before, }
.handle-rot::after { </style>
display: none;
}
</style>
src/views/design/updateDialog.vue
<script> <script>
import { ipcRenderer } from "electron"; import { ipcRenderer } from "electron";
import pkg from "../../../package.json"; import pkg from "../../../package.json";
import axios from "@/utils/axios"; import axios from "@/utils/axios";
export default { export default {
data() { data() {
return { return {
visible: false, visible: false,
version: pkg.version, version: pkg.version,
downloaded: false, downloaded: false,
percent: 0, percent: 0,
loading: false, loading: false,
speed: 0, speed: 0,
item: {} item: {}
}; };
}, },
created() { created() {
let that = this; let that = this;
ipcRenderer.on("update", (event, data) => { ipcRenderer.on("update", (event, data) => {
console.log("下載進度", data); console.log("下載進度", data);
if (!that.loading) that.loading = true; if (!that.loading) that.loading = true;
that.percent = data.percent; that.percent = data.percent;
that.speed = data.speed; that.speed = data.speed;
}); });
ipcRenderer.on("update-error", (event, data) => { ipcRenderer.on("update-error", (event, data) => {
console.log(data); console.log(data);
that.$message.error(`安装包下载失败`); that.$message.error(`安装包下载失败`);
that.loading = false; that.loading = false;
}); });
ipcRenderer.on("downloaded", () => { ipcRenderer.on("downloaded", () => {
that.loading = false; that.loading = false;
that.download(); that.download();
}); });
}, },
methods: { methods: {
async checkUpdate() { async checkUpdate() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
axios axios
.get(`/checkUpdate?version=${this.version}`) .get(`/checkUpdate?version=${this.version}`)
.then(res => { .then(res => {
resolve(res.data); resolve(res.data);
}) })
.catch(err => { .catch(err => {
reject(err); reject(err);
}); });
} catch (err) { } catch (err) {
reject(err); reject(err);
} }
}); });
}, },
download() { download() {
this.$confirm("新版本已下载，是否立即安装？", "提示", { this.$confirm("新版本已下载，是否立即安装？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
showCancelButton: this.item.forcedUpdate === 0, showCancelButton: this.item.forcedUpdate === 0,
showClose: this.item.forcedUpdate === 0, showClose: this.item.forcedUpdate === 0,
type: "success" type: "success"
}) })
.then(() => { .then(() => {
ipcRenderer.send("install"); ipcRenderer.send("install");
this.visible = false; this.visible = false;
}) })
.catch(() => {}); .catch(() => {});
}, },
incrementalUpdates() { incrementalUpdates() {
this.$confirm("新版本已下载，是否刷新页面", "提示", { this.$confirm("新版本已下载，是否刷新页面", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
showCancelButton: this.item.forcedUpdate === 0, showCancelButton: this.item.forcedUpdate === 0,
showClose: this.item.forcedUpdate === 0, showClose: this.item.forcedUpdate === 0,
cancelButtonText: "取消", cancelButtonText: "取消",
type: "success" type: "success"
}) })
.then(() => { .then(() => {
window.location.reload(); window.location.reload();
}) })
.catch(() => {}); .catch(() => {});
}, },
async toUpdate(type) { async toUpdate(type) {
if (type === 1) { if (type === 1) {
this.visible = false; this.visible = false;
if (this.loading) return; if (this.loading) return;
} else { } else {
this.loading = true; this.loading = true;
} }
if (!this.item.fileList || this.item.fileList.length === 0) { if (!this.item.fileList || this.item.fileList.length === 0) {
return this.$message.warning("缺少更新文件"); return this.$message.warning("缺少更新文件");
} }
console.log("开始下载"); console.log("开始下载");
if (this.item.fullUpdate) { if (this.item.fullUpdate) {
// 全量更新 // 全量更新
const domain = "https://" + this.$dataStore.get("company").domain; const domain = "https://console.jomalls.com";
this.item.url = this.item.url =
domain + this.item.fileList[0].versionPath.replace("/data", ""); domain + this.item.fileList[0].versionPath.replace("/data", "");
console.log(this.item.url); console.log(this.item.url);
ipcRenderer.send("toUpdateApp", this.item); ipcRenderer.send("toUpdateApp", this.item);
} else { } else {
try { try {
this.loading = false; this.loading = false;
await this.$api.post("/incrementalUpdates", { await this.$api.post("/incrementalUpdates", {
url: this.item.fileList[0].fileUrl.replace("/data", "") url: this.item.fileList[0].fileUrl.replace("/data", "")
}); });
this.incrementalUpdates(); this.incrementalUpdates();
} catch (e) { } catch (e) {
// this.$message.warning("更新失败"); // this.$message.warning("更新失败");
} }
} }
}, },
open(data) { open(data) {
this.item = data; this.item = data;
this.visible = true; this.visible = true;
} }
} }
}; };
</script> </script>
<template> <template>
<el-dialog <el-dialog
:show-close="item.forcedUpdate === 0" :show-close="item.forcedUpdate === 0"
destroy-on-close destroy-on-close
:close-on-press-escape="false" :close-on-press-escape="false"
:close-on-click-modal="false" :close-on-click-modal="false"
width="500px" width="500px"
:title="item.title" :title="item.title"
:visible.sync="visible" :visible.sync="visible"
> >
<pre>{{ item.content }}</pre> <pre>{{ item.content }}</pre>
<!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="percent"></el-progress>--> <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="percent"></el-progress>-->
<template slot="footer"> <template slot="footer">
<el-button <el-button
@click="visible = false" @click="visible = false"
v-if="item.forcedUpdate === 0" v-if="item.forcedUpdate === 0"
size="small" size="small"
>关闭 >关闭
</el-button> </el-button>
<!-- <el-button @click="toUpdate(1)" size="small" type="warning"--> <!-- <el-button @click="toUpdate(1)" size="small" type="warning"-->
<!-- >后台更新--> <!-- >后台更新-->
<!-- </el-button--> <!-- </el-button-->
<!-- >--> <!-- >-->
<el-button <el-button
@click="toUpdate(2)" @click="toUpdate(2)"
size="small" size="small"
type="primary" type="primary"
:loading="loading" :loading="loading"
> >
{{ loading ? `正在下载中（${percent}%）` : "确定更新" }} {{ loading ? `正在下载中（${percent}%）` : "确定更新" }}
</el-button> </el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<style scoped lang="less"></style> <style scoped lang="less"></style>
src/views/login/index.vue
<script> <script>
export default { export default {
data() { data() {
return { return {
rules: { rules: {
company: [ factoryCode: [
{ validator:this.validatePass, message: "请检查客户名称", required: true, trigger: "blur" }, { message: "请输入工厂编码", required: true, trigger: "blur" }
], ],
loginName: [ account: [{ message: "请输入账号", required: true, trigger: "blur" }],
{ message: "请输入用户名", required: true, trigger: "blur" }, password: [{ message: "请输入密码", required: true, trigger: "blur" }]
], },
password: [{ message: "请输入密码", required: true, trigger: "blur" }], userList: [],
}, authorityVisible: false,
companyList: [],
userList: [], remember: true,
company: null, authorityForm: {},
authorityVisible: false, form: {
factoryCode: "",
remember: true, account: "",
authorityForm: {}, password: ""
form: { }
loginName: "", };
user: "", },
company: "", created() {
password: "", this.userList = this.$dataStore.get('userList') || []
}, },
}; mounted() {
}, document.addEventListener("keyup", this.keyUp);
created() { },
// this.len = Object.keys(this.$dataStore.store).length beforeDestroy() {
console.log(this.$dataStore, "this.$dataStore"); document.removeEventListener("keyup", this.keyUp);
// this.$dataStore.set('console_deviceId_Zhe Wang','920d79c4748c2a3c4111fb878ffe44a2') },
this.company = this.$dataStore.get("company"); methods: {
this.userList = this.$dataStore.get("userList") || []; keyUp(e) {
if (this.company) { if (e.keyCode === 13) {
this.form.company = this.company.domain.replace('.jomalls.com',''); this.login();
} }
},
// if (user) {
// return this.$router.push('/design') async login() {
// } this.$refs.formRef.validate(async valid => {
this.getCompanyList(); if (valid) {
}, let f = JSON.parse(JSON.stringify(this.form));
mounted() { let { data } = await this.$api.post("/login", f);
document.addEventListener("keyup", this.keyUp); this.$dataStore.set("user", { ...data.sysUser,...{token:data.token} });
}, console.log(this.$dataStore);
beforeDestroy() { if (this.remember) {
document.removeEventListener("keyup", this.keyUp); let userList = this.$dataStore.get("userList");
},
methods: { if (userList) {
keyUp(e) { if (
console.log(e); !userList.find(
if (e.keyCode === 13) { el =>
this.login(); el.account === f.account && el.factoryCode === f.factoryCode
} )
}, ) {
submitAuthority() { userList.push(f);
this.$refs.authorityForm.validate((v) => { }
if (v) { } else {
this.$api userList = [f];
.post( }
"/commitApply", this.$dataStore.set("userList", userList);
{ }
...this.authorityForm,
...this.form, await this.$router.push("/design");
}, }
{ });
headers: { },
company: this.form.company +'.jomalls.com', userChange(v) {
}, this.form.account = this.userList[v].account;
} this.form.factoryCode = this.userList[v].factoryCode;
) this.form.password = this.userList[v].password;
.then((res) => { }
if (res.code === 200) { }
this.authorityVisible = false; };
this.$message.success("申请提交成功"); </script>
this.$dataStore.set(
this.form.company + "_deviceId_" + this.form.loginName, <template>
res.data.id <div class="login">
); <div class="form-content">
} <el-form ref="formRef" :rules="rules" size="small" :model="form">
}); <el-form-item v-if="userList.length > 0">
} <el-select
}); @change="userChange"
}, filterable
validatePass(rule, value, callback) { style="width: 100%"
if (!value || value === "") { placeholder="登录记录"
return callback(new Error("请输入客户（例如demo)")); v-model="form.user"
} clearable
let item = this.companyList.find( >
(item) => item.domain.replace(".jomalls.com", "") === value <template slot="prefix">
); <i class="el-icon-monitor"></i>
if (item) { </template>
return callback(); <el-option
} else { v-for="(it, i) in userList"
return callback(new Error("未查找到该客户")); :key="i"
} :label="`${it.account}(${it.factoryCode})`"
}, :value="i"
async login() { ></el-option>
// if (this.form.auth) { </el-select>
// this.$dataStore.set(this.form.auth.split(",")[0], this.form.auth.split(",")[1]); </el-form-item>
// console.log("存储成功"); <el-form-item prop="factoryCode">
// console.log(this.$dataStore.store); <el-input
// placeholder="工厂编码"
// } prefix-icon="el-icon-s-shop"
this.$refs.formRef.validate(async (valid) => { v-model="form.factoryCode"
if (valid) { clearable
let f = JSON.parse(JSON.stringify(this.form)); ></el-input>
</el-form-item>
if (!f.deviceId) { <el-form-item prop="account">
f.deviceId = this.$dataStore.get( <el-input
f.company + "_deviceId_" + this.form.loginName placeholder="账号"
); prefix-icon="el-icon-user"
} v-model="form.account"
if(f.company){ clearable
f.company = f.company.includes('.jomalls.com')?f.company:f.company+'.jomalls.com' ></el-input>
} </el-form-item>
if (!f.deviceId) delete f.deviceId; <el-form-item prop="password">
let { data, code, message } = await this.$api.post("/login", f); <el-input
if (code === 411) { placeholder="密码"
this.authorityVisible = true; show-password
this.authorityForm = {}; prefix-icon="el-icon-lock"
return this.$message.error(message); type="password"
} v-model="form.password"
data = { clearable
...data.sysUser, ></el-input>
...{ </el-form-item>
token: data.token, <div class="check">
}, <el-checkbox v-model="remember">记住账号</el-checkbox>
}; </div>
delete data.sysMenus; <el-form-item>
delete data.sysUser; <div style="display: flex; justify-content: center">
let item = this.companyList.find((item) => item.domain === f.company); <el-button
console.log(item, 111222); @keyup.enter.native="login"
this.$dataStore.set("user", data); @click="login"
this.$dataStore.set("company", item); type="primary"
console.log( this.$dataStore); style="width: 60%"
if (this.remember) { >登录</el-button
let userList = this.$dataStore.get("userList"); >
</div>
if (userList) { </el-form-item>
if ( </el-form>
!userList.find( </div>
(el) => </div>
el.loginName === f.loginName && el.company === f.company </template>
)
) { <style lang="less" scoped>
userList.push(f); .check {
} display: flex;
} else { justify-content: flex-end;
userList = [f]; margin-bottom: 15px;
} }
this.$dataStore.set("userList", userList);
} .login {
width: 100%;
await this.$router.push("/design"); height: 100%;
} background-image: url("../../assets/logo-bg.jpg");
}); background-size: 100% 100%;
}, display: flex;
userChange(v) { align-items: center;
if (v === "") { justify-content: center;
this.form.deviceId = ""; }
return;
} .form-content {
console.log(this.userList, v); width: 300px;
this.form.company = this.userList[v].company.replace('.jomalls.com',''); padding-top: 50px;
this.form.loginName = this.userList[v].loginName; }
this.form.password = this.userList[v].password;
this.form.deviceId = this.userList[v].deviceId; .el-icon-monitor {
}, position: relative;
async getCompanyList() { left: 6px;
let { data } = await this.$api.get("/getCompanyList"); }
this.companyList = data.records; </style>
},
},
};
</script>
<template>
<div class="login">
<div class="form-content">
<el-form ref="formRef" :rules="rules" size="small" :model="form">
<el-form-item v-if="userList.length > 0">
<el-select
@change="userChange"
filterable
style="width: 100%"
placeholder="登录记录"
v-model="form.user"
clearable
>
<template slot="prefix">
<i class="el-icon-monitor"></i>
</template>
<el-option
v-for="(it, i) in userList"
:key="i"
:label="`${it.loginName}(${it.company.split('.')[0]})`"
:value="i"
></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="!company" prop="company">
<!-- <el-select prefix-icon="el-icon-monitor" v-model="form.company">-->
<!-- <el-option v-for="(it,i) in companyList" :key="i" :label="it.companyName" :value="it.domain.replace('.jomalls.com','')"></el-option>-->
<!-- </el-select>-->
<el-input placeholder="客户（例如demo）" prefix-icon="el-icon-monitor" v-model="form.company"
clearable>
<template #append>
.jomalls.com
</template>
</el-input>
<!-- <el-select-->
<!-- filterable-->
<!-- style="width: 100%"-->
<!-- placeholder="系统"-->
<!-- v-model="form.company"-->
<!-- clearable-->
<!-- >-->
<!-- <template slot="prefix">-->
<!-- <i class="el-icon-monitor"></i>-->
<!-- </template>-->
<!-- <el-option-->
<!-- v-for="(it, i) in companyList"-->
<!-- :key="i"-->
<!-- :label="it.companyName"-->
<!-- :value="it.domain"-->
<!-- ></el-option>-->
<!-- </el-select>-->
</el-form-item>
<el-form-item prop="loginName">
<el-input
placeholder="用户名"
prefix-icon="el-icon-user"
v-model="form.loginName"
clearable
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
placeholder="密码"
show-password
prefix-icon="el-icon-lock"
type="password"
v-model="form.password"
clearable
></el-input>
</el-form-item>
<!-- <el-form-item v-if="len===0" prop="授权信息">-->
<!-- <el-input placeholder="授权信息" prefix-icon="el-icon-lock" v-model="form.auth"-->
<!-- clearable></el-input>-->
<!-- </el-form-item>-->
<div class="check">
<el-checkbox v-model="remember">记住账号</el-checkbox>
</div>
<el-form-item>
<div style="display: flex; justify-content: center">
<el-button
@keyup.enter.native="login"
@click="login"
type="primary"
style="width: 60%"
>登录</el-button
>
</div>
</el-form-item>
</el-form>
</div>
<el-dialog
:close-on-click-modal="false"
title="权限申请"
:visible.sync="authorityVisible"
top="15%"
width="400px"
>
<el-form
:model="authorityForm"
size="mini"
ref="authorityForm"
label-width="80px"
>
<el-form-item label="设备名称" prop="deviceName" required>
<el-input v-model="authorityForm.deviceName"></el-input>
</el-form-item>
<el-form-item label="授权类型" prop="authType" required>
<el-radio v-model="authorityForm.authType" label="1">
一次授权
</el-radio>
<el-radio v-model="authorityForm.authType" label="2">
永久授权
</el-radio>
</el-form-item>
</el-form>
<span slot="footer">
<el-button size="mini" @click="authorityVisible = false">
取 消
</el-button>
<el-button size="mini" type="primary" @click="submitAuthority">
提交
</el-button>
</span>
</el-dialog>
</div>
</template>
<style lang="less" scoped>
.check {
display: flex;
justify-content: flex-end;
margin-bottom: 15px;
}
.login {
width: 100%;
height: 100%;
background-image: url("../../assets/logo-bg.jpg");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.form-content {
width: 300px;
padding-top: 50px;
}
.el-icon-monitor {
position: relative;
left: 6px;
}
</style>
\ No newline at end of file
vue.config.js
const path = require("path"); const path = require("path");
module.exports = { module.exports = {
// 基本路径 // 基本路径
publicPath: process.env.NODE_ENV === "production" ? "" : "/", publicPath: process.env.NODE_ENV === "production" ? "" : "/",
// 输出文件目录 // 输出文件目录
outputDir: process.env.NODE_ENV === "production" ? "dist" : "devdist", outputDir: process.env.NODE_ENV === "production" ? "dist" : "devdist",
// eslint-loader 是否在保存的时候检查 // eslint-loader 是否在保存的时候检查
lintOnSave: false, lintOnSave: false,
/** vue3.0内置了webpack所有东西， /** vue3.0内置了webpack所有东西，
* webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md * webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
**/ **/
chainWebpack: config => { chainWebpack: config => {
const svgRule = config.module.rule("svg"); const svgRule = config.module.rule("svg");
svgRule.uses.clear(); svgRule.uses.clear();
svgRule svgRule
.use("svg-sprite-loader") .use("svg-sprite-loader")
.loader("svg-sprite-loader") .loader("svg-sprite-loader")
.options({ .options({
symbolId: "icon-[name]", symbolId: "icon-[name]",
include: ["./src/icons"] include: ["./src/icons"]
}); });
config.module config.module
.rule("pug") .rule("pug")
.test(/\.pug$/) .test(/\.pug$/)
.use("pug-html-loader") .use("pug-html-loader")
.loader("pug-html-loader") .loader("pug-html-loader")
.end(); .end();
}, },
configureWebpack: config => { configureWebpack: config => {
config.resolve = { config.resolve = {
// 配置解析别名 // 配置解析别名
extensions: [".js", ".json", ".vue"], // 自动添加文件名后缀 extensions: [".js", ".json", ".vue"], // 自动添加文件名后缀
alias: { alias: {
vue: "vue/dist/vue.js", vue: "vue/dist/vue.js",
"@": path.resolve(__dirname, "./src"), "@": path.resolve(__dirname, "./src"),
"@c": path.resolve(__dirname, "./src/components") "@c": path.resolve(__dirname, "./src/components")
} }
}; };
}, },
// 生产环境是否生成 sourceMap 文件 // 生产环境是否生成 sourceMap 文件
productionSourceMap: false, productionSourceMap: false,
// css相关配置 // css相关配置
css: { css: {
// 是否使用css分离插件 ExtractTextPlugin // 是否使用css分离插件 ExtractTextPlugin
extract: true, extract: true,
// 开启 CSS source maps? // 开启 CSS source maps?
sourceMap: false, sourceMap: false,
// css预设器配置项 // css预设器配置项
loaderOptions: { loaderOptions: {
sass: { sass: {
prependData: `@import "./src/styles/main.css";` prependData: `@import "./src/styles/main.css";`
} }
}, },
// 启用 CSS modules for all css / pre-processor files. // 启用 CSS modules for all css / pre-processor files.
requireModuleExtension: true // 是否开启支持‘foo.module.css’样式 requireModuleExtension: true // 是否开启支持‘foo.module.css’样式
}, },
// use thread-loader for babel & TS in production build // use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores // enabled by default if the machine has more than 1 cores
parallel: require("os").cpus().length > 1, parallel: require("os").cpus().length > 1,
/** /**
* PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa * PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
*/ */
pwa: {}, pwa: {},
// webpack-dev-server 相关配置 // webpack-dev-server 相关配置
devServer: { devServer: {
open: false, // 编译完成是否打开网页 open: false, // 编译完成是否打开网页
host: "0.0.0.0", // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问 host: "0.0.0.0", // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
port: 8050, // 访问端口 port: 8050, // 访问端口
https: false, // 编译失败时刷新页面 https: false, // 编译失败时刷新页面
hot: true, // 开启热加载 hot: true, // 开启热加载
hotOnly: false, hotOnly: false,
proxy: { proxy: {
// 配置跨域 // 配置跨域
"/devApi": { "/devApi": {
//要访问的跨域的api的域名 //要访问的跨域的api的域名
target: "http://localhost:3000", target: "http://localhost:3000",
ws: true, ws: true,
changOrigin: true, changOrigin: true,
pathRewrite: { pathRewrite: {
"^/devApi": "" "^/devApi": ""
} }
} }
}, },
overlay: { overlay: {
// 全屏模式下是否显示脚本错误 // 全屏模式下是否显示脚本错误
warnings: true, warnings: true,
errors: true errors: true
}, },
before: app => {} before: app => {}
}, },
/** /**
* 第三方插件配置 * 第三方插件配置
*/ */
pluginOptions: { pluginOptions: {
electronBuilder: { electronBuilder: {
builderOptions: { builderOptions: {
asar: false, asar: false,
extraResources: [ extraResources: [
{ {
from: "./print/", from: "./print/",
to: "../print" to: "../print"
}, },
{ {
from: "./logs/", from: "./logs/",
to: "../logs" to: "../logs"
} },
] {
} from: "./config/",
} to: "../config"
} }
}; ]
}
}
}
};
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