Skip to content

E
electron-printer
Commit f197473e by linjinhong
Options

更改兄弟打印机编辑模式和预览模式 并取消第二窗口 将生产单信息添加至左边栏

parent 11276510
Showing with 631 additions and 214 deletions
.gitignore
......@@ -25,7 +25,7 @@ yarn-error.log*
/dist_electron
# 排除 print/Input 目录下的 .bat 文件
!/print/Input/*.bat
/print/Input/*.png
print/Profile/*
/logs
\ No newline at end of file
src/background.js
......@@ -36,22 +36,22 @@ async function createWindow() {
nodeIntegration: true,
},
});
let newWindow = new BrowserWindow({
fullscreen: false,
width: 1000,
height: 1000,
webPreferences: {
nodeIntegration: true,
//配置预加载脚本文件(preload)，此处起名为preloadOther
//p.s.路径为绝对路径
// preload: path.join(__dirname, "./preloadOther.js")
},
});
// let newWindow = new BrowserWindow({
// fullscreen: false,
// width: 1000,
// height: 1000,
// webPreferences: {
// nodeIntegration: true,
// //配置预加载脚本文件(preload)，此处起名为preloadOther
// //p.s.路径为绝对路径
// // preload: path.join(__dirname, "./preloadOther.js")
// },
// });
console.log(winURL + "#" + `/design-detail`);
//指定副屏幕打开的网页
await newWindow.loadURL(winURL + "#" + `/design-detail`);
newWindow.reload();
// //指定副屏幕打开的网页
// await newWindow.loadURL(winURL + "#" + `/design-detail`);
// newWindow.reload();
// win.on("closed", () => {
// //这一段放外面的话，如果你电脑没双屏会报错。
// win = null;
......@@ -90,11 +90,11 @@ async function createWindow() {
win.removeAllListeners();
win = null;
}
// 确保 newWindow 还未销毁，才执行关闭操作
if (newWindow && !newWindow.isDestroyed()) {
newWindow.close();
newWindow = null;
}
// // 确保 newWindow 还未销毁，才执行关闭操作
// if (newWindow && !newWindow.isDestroyed()) {
// newWindow.close();
// newWindow = null;
// }
});
// 自动更新逻辑开始
......@@ -166,6 +166,15 @@ async function createWindow() {
});
});
});
win.on("resize", () => {
const { width, height } = win.getBounds();
win.webContents.send("window-size", { width, height });
});
// 监听窗口的 reload 事件
win.webContents.on("did-finish-load", () => {
const { width, height } = win.getBounds();
win.webContents.send("window-size", { width, height });
});
}
app.on("activate", async () => {
......@@ -176,6 +185,8 @@ app.on("activate", async () => {
app.on("ready", async () => {
await createWindow();
// 获取当前窗口的尺寸
globalShortcut.register("F5", () => {
return false;
});
......
src/store/index.js
......@@ -13,7 +13,10 @@ export default new Vuex.Store({
state: {
actionList: [],
imgList: [],
productDetail: {},
desktopDevice: 1, //1是兄弟，2是其他
WHproportion: 1, //宽高比例
isPreView: false, //宽高比例
actionIndex: -1,
systemSetting: {
gridShow: 1,
......@@ -43,6 +46,15 @@ export default new Vuex.Store({
changeDesktopDevice(state, value) {
state.desktopDevice = value;
},
setProductDetail(state, value) {
state.productDetail = value;
},
setWHproportion(state, value) {
state.WHproportion = value;
},
setIsPreView(state, value) {
state.isPreView = value;
},
},
getters: {
systemSetting(state) {
......
src/utils/axios.js
......@@ -6,7 +6,7 @@ import { Loading } from "element-ui";
const service = axios.create({
baseURL: "http://localhost:3000", // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 50000000 // request timeout
timeout: 50000000, // request timeout
});
let loading;
......@@ -15,7 +15,7 @@ function startLoading() {
lock: true,
text: "拼命加载中...",
spinner: "el-icon-loading",
background: "rgba(0,0,0,.7)"
background: "rgba(0,0,0,.7)",
});
}
......@@ -25,7 +25,7 @@ function endLoading() {
// Add a request interceptor
service.interceptors.request.use(
config => {
(config) => {
console.log(Vue.prototype.$dataStore);
const user = Vue.prototype.$dataStore.get("user");
if (user) {
......@@ -34,7 +34,7 @@ service.interceptors.request.use(
startLoading();
return config;
},
error => {
(error) => {
endLoading();
// do something with request error
return Promise.reject(error);
......@@ -53,7 +53,7 @@ service.interceptors.response.use(
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
async response => {
async (response) => {
// do something with response data
const res = response.data;
endLoading();
......@@ -66,7 +66,7 @@ service.interceptors.response.use(
Vue.prototype.$dataStore.delete("user");
Vue.prototype.$message.error({
showClose: true,
message: res.msg || res.message || "Error"
message: res.msg || res.message || "Error",
});
setTimeout(() => {
location.reload();
......@@ -81,7 +81,7 @@ service.interceptors.response.use(
}
Vue.prototype.$message.error({
showClose: true,
message: res.msg || res.message || "Error"
message: res.msg || res.message || "Error",
});
// reject
return Promise.reject(new Error(res.msg || res.message || "Error"));
......@@ -91,7 +91,7 @@ service.interceptors.response.use(
}
return Promise.resolve(res);
},
error => {
(error) => {
endLoading();
// do something with response error
return Promise.reject(error);
......@@ -99,3 +99,4 @@ service.interceptors.response.use(
);
export default service;
export { startLoading, endLoading };
src/views/design/data.js
......@@ -22,13 +22,15 @@ export const grid = [
value: 1,
row: 16,
col: 18,
h: 542,
w: 482
}
// h: 540,
// w: 480,
h: 0,
w: 0,
},
// {
// label: '16×21',
// label: '16×21',#77797a
// value: 0,
// col: 16,
// row: 21
// }
];
\ No newline at end of file
];
src/views/design/head/index.vue
......@@ -216,6 +216,9 @@ export default {
}
);
this.detail = findByPodProductionNo.data;
console.log(219, this.detail);
this.$store.commit("setProductDetail", findByPodProductionNo.data);
ipcRenderer.send("win-subScreen", findByPodProductionNo.data);
// 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示
......@@ -223,7 +226,6 @@ export default {
this.detail.id,
this.$store.state.desktopDevice,
]);
console.log("res111", res);
this.imgList = [];
res.data.forEach((el) => {
this.imgList = this.imgList.concat(el.list || []);
......@@ -240,7 +242,6 @@ export default {
});
}
});
console.log(arr, "arr");
res.data = arr.filter((el) => el.type !== 1);
// 延迟后强制激活窗口
......
src/views/design/head/printDialog.vue
......@@ -6,6 +6,7 @@ import html2canvas from "html2canvas";
import moment from "moment";
import pkg from "../../../../package.json";
import { pxToUnit } from "../../../utils/index";
import { mapState } from "vuex";
export default {
data() {
......@@ -123,6 +124,7 @@ export default {
return "1.5";
}
},
...mapState(["WHproportion"]),
},
watch: {
printSetting: {
......@@ -300,11 +302,11 @@ export default {
const relativeY = imageRect.top - lineRect.top;
console.log(dom_id);
// 获取图片的宽高
let w = image.clientWidth; // 图片宽
let h = image.clientHeight; // 图片高
let w = image.clientWidth / this.WHproportion; // 图片宽
let h = image.clientHeight / this.WHproportion; // 图片高
console.log(w, h, "w,h");
const x = relativeX;
const y = relativeY;
const x = relativeX / this.WHproportion;
const y = relativeY / this.WHproportion;
const r = this.imgList[0].r;
console.log(w, h);
const x_mm = this.pxToUnit(x, "mm");
......@@ -372,16 +374,11 @@ export default {
h = this.numberToStr4(h);
console.log("print", w, h);
if (w > 4100 || h > 4500) {
if (w > 4200 || h > 4700) {
return this.$message.warning(
"打印图片素材宽度不能超过410mm,长度不能超过450mm"
);
}
// console.log(x, "x");
// console.log(y, "y");
// console.log(w, "w");
// console.log(h, "h");
r = Number(r).toFixed(0);
const imgFileName = this.imgList[0].fileName;
let position = ""; // 位置
......
src/views/design/main/imgSetting.vue
<script>
import { pxToUnit, unitToPx } from "@/utils";
import { mapState } from "vuex";
export default {
data() {
......@@ -20,7 +21,9 @@ export default {
},
};
},
computed: {
...mapState(["isPreView"]),
},
props: {
visible: {
type: Boolean,
......@@ -130,21 +133,21 @@ export default {
</script>
<template>
<div class="drawer" :style="{ animation: `ltr-drawer-in .3s 1ms` }">
<div class="title">
图片编辑（单位：{{ $dataStore.get("setting").unit }}）
</div>
<div class="drawer">
<div class="img-form">
<div class="title">
图片编辑（单位：{{ $dataStore.get("setting").unit }}）
</div>
<el-form
size="small"
:disabled="!item"
:disabled="!(item && !isPreView)"
style=""
:model="form"
label-position="left"
label-width="30px"
>
<el-row :gutter="20">
<el-col :span="12">
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="x：" prop="x">
<div class="form-content">
<el-input @blur="formChange" v-model="form.x"></el-input>
......@@ -155,7 +158,7 @@ export default {
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="8">
<el-form-item label="y：">
<div class="form-content">
<el-input @blur="formChange" v-model="form.y"></el-input>
......@@ -166,7 +169,19 @@ export default {
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="8">
<el-form-item label="r：">
<div class="form-content">
<el-input maxlength="3" @blur="formChange" v-model="form.r">
</el-input>
<div class="set-value">
<i @click="addValue('r')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('r')" class="el-icon-arrow-down"></i>
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="w：">
<div class="form-content">
<el-input @blur="formChange('w')" v-model="form.w"></el-input>
......@@ -177,7 +192,7 @@ export default {
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="8">
<el-form-item label="h：">
<div class="form-content">
<el-input @blur="formChange('h')" v-model="form.h"></el-input>
......@@ -188,19 +203,8 @@ export default {
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="r：">
<div class="form-content">
<el-input maxlength="3" @blur="formChange" v-model="form.r">
</el-input>
<div class="set-value">
<i @click="addValue('r')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('r')" class="el-icon-arrow-down"></i>
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="8">
<el-form-item label="z：">
<div class="form-content">
<el-input @blur="formChange" v-model="form.zIndex"> </el-input>
......@@ -214,9 +218,12 @@ export default {
</div>
</el-form-item>
</el-col>
<el-col :span="24">
<el-col
:span="24"
style="display: flex;justify-content: space-between;padding:0 30px;"
>
<el-tooltip content="居中">
<el-button @click="$emit('ev', 'center')" size="mini">
<el-button @click="$emit('ev', 'center')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/juzhong-01.png"
......@@ -225,7 +232,7 @@ export default {
</el-button>
</el-tooltip>
<el-tooltip content="垂直居中">
<el-button @click="$emit('ev', 'y_center')" size="mini">
<el-button @click="$emit('ev', 'y_center')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/vertical.png"
......@@ -234,7 +241,7 @@ export default {
</el-button>
</el-tooltip>
<el-tooltip content="水平居中">
<el-button @click="$emit('ev', 'x_center')" size="mini">
<el-button @click="$emit('ev', 'x_center')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/shuipingjuzhong.png"
......@@ -243,7 +250,7 @@ export default {
</el-button>
</el-tooltip>
<el-tooltip content="上移一层">
<el-button @click="$emit('ev', 'add_index')" size="mini">
<el-button @click="$emit('ev', 'add_index')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/shangyi.png"
......@@ -252,7 +259,7 @@ export default {
</el-button>
</el-tooltip>
<el-tooltip content="下移一层">
<el-button @click="$emit('ev', 'reduce_index')" size="mini">
<el-button @click="$emit('ev', 'reduce_index')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/xiayi.png"
......@@ -264,13 +271,14 @@ export default {
</el-row>
</el-form>
</div>
<slot></slot>
<slot name="content"></slot>
</div>
</template>
<style lang="less" scoped>
.img-form {
padding: 10px;
border: 1px solid #ececec;
}
::v-deep {
......@@ -288,7 +296,7 @@ export default {
.set-value {
height: 100%;
margin-left: 6px;
// margin-left: 6px;
i {
width: 20px;
......@@ -306,26 +314,36 @@ export default {
}
.drawer {
width: 300px;
bottom: 0;
top: 50px;
width: 400px;
// bottom: 0;
// top: 50px;
padding: 10px;
z-index: 99;
// z-index: 99;
background: white;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
left: 0;
position: fixed;
// left: 0;
// position: fixed;
border-right: 1px solid #ececec;
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
//animation: ltr-drawer-in .3s 1ms;
position: relative;
z-index: 1;
.title {
padding-bottom: 10px;
border-bottom: 1px solid #ececec;
// font-weight: 600;
font-size: 18px;
margin-bottom: 8px;
// border-bottom: 1px solid #ececec;
}
}
.btn {
height: 40px;
width: 60px;
border-color: #c0c4cc;
}
@keyframes ltr-drawer-in {
0% {
......
src/views/design/main/index.vue
<script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
const { ipcRenderer } = require("electron");
import { grid } from "../data";
import ImgSetting from "./imgSetting.vue";
import bus from "@/bus";
import PrintDialog from "@/views/design/head/printDialog.vue";
import { mmToPx } from "@/utils";
import { raw } from "express";
// import { raw } from "express";
const path = require("path");
const fs = require("fs");
const uuid = require("uuid");
import { startLoading, endLoading } from "@/utils/axios.js";
import { mapState } from "vuex";
const img = require("../../../assets/bg_tshirt_shadow.png");
export default {
components: {
PrintDialog,
......@@ -23,7 +26,23 @@ export default {
document.removeEventListener("dragover", this.dragover);
document.removeEventListener("drop", this.drop);
},
created() {
ipcRenderer.on("window-size", (event, size) => {
const { width, height } = size;
console.log(`接收到窗口尺寸：${width}x${height}`);
let proportion;
if (height > 1000) {
proportion = 1.7;
} else if (height > 900 && height <= 1000) {
proportion = 1.5;
} else {
proportion = 1;
}
this.$store.commit("setWHproportion", proportion);
this.grid[0].h = 540 * proportion;
this.grid[0].w = 480 * proportion;
});
},
computed: {
gridWH() {
if (
......@@ -32,6 +51,15 @@ export default {
!this.grid[this.systemSetting.gridValue]
)
return { w: 0, h: 0, v: 1 };
console.log(35, this.grid);
console.log(
1111111,
this.grid[this.systemSetting.gridValue].w,
this.grid[this.systemSetting.gridValue].value,
this.grid[this.systemSetting.gridValue].h
);
return {
w: this.grid[this.systemSetting.gridValue].w,
v: this.grid[this.systemSetting.gridValue].value,
......@@ -39,24 +67,48 @@ export default {
};
},
gridSpacing() {
console.log(61, this.systemSetting);
const { unit, gridSpacing } = this.systemSetting;
if (!this.systemSetting || !Object.keys(this.systemSetting).length)
return { w: 0, h: 0 };
if (this.systemSetting.unit === "mm") {
if (unit === "mm") {
return {
w: this.systemSetting.gridSpacing + "px",
h: this.systemSetting.gridSpacing + "px",
w: gridSpacing + "px",
h: gridSpacing + "px",
};
} else if (this.systemSetting.unit === "inch") {
console.log(this.systemSetting.gridValue);
} else if (unit === "inch") {
let w = this.grid[this.systemSetting.gridValue].w;
let row = this.grid[this.systemSetting.gridValue].row;
let col = this.grid[this.systemSetting.gridValue].col;
let h = this.grid[this.systemSetting.gridValue].h;
return {
w: this.systemSetting.gridSpacing * ((w - row + 1) / row) + "px",
h: this.systemSetting.gridSpacing * (h / col) + "px",
// w: gridSpacing * ((w - row + 1) / row) + "px",
w: gridSpacing * (w / row) + "px",
h: gridSpacing * (h / col) + "px",
};
}
return { w: "480px", h: "540px" };
},
viewGridSpacing() {
const { unit, gridSpacing } = this.systemSetting;
if (!this.systemSetting || !Object.keys(this.systemSetting).length)
return { w: 0, h: 0 };
if (unit === "mm") {
return {
w: gridSpacing + "px",
h: gridSpacing + "px",
};
} else if (unit === "inch") {
let w = 480;
let row = 16;
let col = 18;
let h = 540;
return {
w: gridSpacing * (w / row) + "px",
h: gridSpacing * (h / col) + "px",
};
}
return { w: "480px", h: "540px" };
},
computedGridSize() {
const getter = this.systemSetting;
......@@ -80,7 +132,7 @@ export default {
return null;
},
...mapState(["desktopDevice"]),
...mapState(["desktopDevice", "productDetail", "WHproportion"]),
},
data() {
return {
......@@ -88,7 +140,9 @@ export default {
checkList: [],
oldImgList: [],
parentWidth: 0,
backColor: "#77797a",
systemSetting: {},
detail: {},
imgHeight: 0,
selectImgList: [],
bus: 0,
......@@ -103,6 +157,7 @@ export default {
y: 0,
imgList: [],
selectImgIndexList: [],
isView: false,
imgHistoryList: [[]],
imgHistoryIndex: 0,
row: 8,
......@@ -112,7 +167,9 @@ export default {
},
watch: {
imgList: {
handler() {
handler(newValue) {
console.log(169, newValue);
if (this.imgList.length > 0) {
this.$nextTick(() => {
let dom = document.getElementsByClassName("drr");
......@@ -151,6 +208,15 @@ export default {
this.selectImgIndex = 0;
}
},
productDetail(newValue) {
this.detail = { ...newValue };
if (typeof this.detail.imageAry == "string") {
this.detail.imageAry = JSON.parse(this.detail.imageAry).filter(
(el) => !el.title
);
}
console.log(161, this.detail);
},
},
methods: {
changePrintDialogShow() {
......@@ -263,7 +329,6 @@ export default {
this.$set(this.imgList[index], "w", item.w);
this.$set(this.imgList[index], "h", item.h);
}
console.log();
},
getOneMmsPx() {
// 创建一个1mm宽的元素插入到页面，然后坐等出结果
......@@ -507,15 +572,15 @@ export default {
});
},
listenUpload() {
let that = this;
document.getElementById("img").onmousedown = function(e) {
e.preventDefault();
};
that.parentWidth = document.getElementById("img").clientWidth;
that.parentHeight = document.getElementById("img").clientHeight;
let dp = document.getElementsByClassName("container")[0];
dp.addEventListener("dragover", this.dragover);
dp.addEventListener("drop", this.drop);
// let that = this;
// document.getElementById("img").onmousedown = function(e) {
// e.preventDefault();
// };
// that.parentWidth = document.getElementById("img").clientWidth;
// that.parentHeight = document.getElementById("img").clientHeight;
// let dp = document.getElementsByClassName("container")[0];
// dp.addEventListener("dragover", this.dragover);
// dp.addEventListener("drop", this.drop);
},
getImageSize(url) {
return new Promise(function(resolve, reject) {
......@@ -643,10 +708,29 @@ export default {
console.error("错误", error);
}
},
startLoading,
endLoading,
handleClick(event) {
// 获取点击的元素
let currentElement = event.target;
// 确保点击的元素在包含 container 类名的元素内
if (currentElement.closest(".container")) {
// 如果点击的元素不是 boxShaow，执行方法
if (!currentElement.closest(".boxShaow") && !this.isView) {
this.isView = !this.isView;
console.log(723, this.isView);
this.$store.commit("setIsPreView", this.isView);
}
}
},
},
mounted() {
this.imgHeight = window.screen.height + "px";
this.systemSetting = this.$dataStore.get("setting");
bus.$on("busEmit", (v) => {
let { type, value, size } = v;
switch (type) {
......@@ -659,12 +743,15 @@ export default {
break;
case "bg":
this.changeImageColor(value, (res) => {
console.log(7777);
this.img = res;
});
break;
case "updateSystemSetting":
console.log(this.$dataStore);
this.systemSetting = this.$dataStore.get("setting");
console.log(6684, this.systemSetting);
break;
case "uploadImage":
this.addFile(value, () => {
......@@ -695,45 +782,241 @@ export default {
this.$nextTick(() => {
this.listenUpload();
});
document.addEventListener("click", this.handleClick);
},
beforeDestroy() {
// 销毁组件时移除事件监听器
document.removeEventListener("click", this.handleClick);
},
};
</script>
<template>
<div class="page-main">
<div @click="outsideClick" class="main-bg">
<img-setting
@ev="ev"
@change="formChange"
:item="returnItem"
@close="close"
>
<template #content>
<!-- <div class="information-content">
<div class="title">
素材信息
</div>
<el-row class="main">
<el-col :span="6">
<div class="text-center">打印区域</div>
</el-col>
<el-col :span="9" class="effectPic border-col">
<div class="pic-title">效果图</div>
</el-col>
<el-col :span="9">
<div class="pic-title">素材图</div>
</el-col>
<el-row class="border-row">
<el-col :span="6" class="text-center">A面</el-col>
<el-col :span="9" class="border-col">
<div class="img">
<img class="full-width" src="#" alt="" />
</div>
</el-col>
<el-col :span="9">
<div class="img" v-for="(it, i) in selectImgList" :key="i">
<img class="full-width" :src="it.productionFile" alt="" />
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6" class="text-center">B面</el-col>
<el-col :span="9" class="border-col">
<div class="img">
<img class="full-width" src="#" alt="" />
</div>
</el-col>
<el-col :span="9">
<div class="img" v-for="(it, i) in selectImgList" :key="i">
<img class="full-width" :src="it.productionFile" alt="" />
</div>
</el-col>
</el-row>
</el-row>
</div>
<div class="product-information">
<div class="title">
生产单信息
</div>
<div class="div-content">
<div :title="detail.podProductionNo" class="div-item">
<div class="item-label">生产单号：</div>
<div class="item-value">
{{ detail.factorySubOrderNumber }}
<div
style="margin-left: 5px"
v-if="detail.podProductionNo"
:style="{
color: detail.customizedQuantity > 1 ? 'red' : '#67C23A',
}"
>
{{ detail.customizedQuantity > 1 ? "多" : "单" }}
</div>
</div>
</div>
<div :title="detail.factorySubOrderNumber" class="div-item">
<div class="item-label">工厂单号：</div>
<div class="item-value">{{ detail.factorySubOrderNumber }}</div>
</div>
<div :title="detail.processName" class="div-item">
<div class="item-label">生产工艺：</div>
<div class="item-value">{{ detail.processName }}</div>
</div>
<div :title="detail.baseSku" class="div-item">
<div class="item-label">基版：</div>
<div class="item-value">{{ detail.baseSku }}</div>
</div>
<div :title="detail.size" class="div-item">
<div class="item-label">尺寸：</div>
<div class="item-value">{{ detail.size }}</div>
</div>
<div :title="detail.variantSku" class="div-item">
<div class="item-label">变体SKU：</div>
<div class="item-value">{{ detail.variantSku }}</div>
</div>
<div :title="detail.num" class="div-item">
<div class="item-label">数量：</div>
<div class="item-value">{{ detail.num }}</div>
</div>
<div :title="detail.supplierItemNo" class="div-item">
<div class="item-label">货号：</div>
<div class="item-value">{{ detail.supplierItemNo }}</div>
</div>
<div :title="detail.color" class="div-item">
<div class="item-label">颜色：</div>
<div class="item-value">
{{ detail.baseSku ? detail.baseSku.split("_")[1] : null }}
</div>
</div>
<div :title="detail.factoryCode" class="div-item">
<div class="item-label">工厂：</div>
<div class="item-value">{{ detail.factoryCode }}</div>
</div>
<div
:title="detail.shopNumber"
class="div-item"
style="flex: 100%;"
>
<div>
店铺单号：
</div>
<div>
{{ detail.shopNumber }}
</div>
</div>
<div
:title="detail.createTime"
class="div-item"
style="flex: 100%;"
>
<div>创建时间：</div>
<div>{{ detail.createTime }}</div>
</div>
<div
:title="detail.startStockingTime"
class="div-item"
style="flex: 100%;"
>
<div>
生产确认时间：
</div>
<div>{{ detail.startStockingTime }}</div>
</div>
</div>
</div> -->
<div
class="select-img"
v-if="selectImgList.length && $store.state.desktopDevice === 1"
>
<el-button
type="primary"
size="small"
style="margin-bottom: 10px;"
@click="cutImgFn"
>裁切</el-button
>
<el-checkbox-group v-model="checkList">
<el-checkbox
v-for="(it, i) in selectImgList"
:key="i"
:label="it"
:class="{ imgchecked: checkList.includes(it) }"
>
<div class="img-item" @click.stop.prevent="selectImg(it, i)">
<img style="width: 140px" :src="it.productionFile" />
<span>{{ it.designId }}</span>
</div>
</el-checkbox>
</el-checkbox-group>
<!-- <div
@click="selectImg(it, i)"
v-for="(it, i) in selectImgList"
:key="i"
class="img-item"
>
<img style="width: 140px;height: auto;" :src="it.productionFile" />
<span>{{ it.designId }}</span>
</div> -->
</div>
</template>
</img-setting>
<div
@click="outsideClick"
class="main-bg"
:style="{ 'background-color': !isView ? '#77797a' : '#fff' }"
>
<div class="container">
<div :style="{ height: imgHeight }" id="img">
<div id="line">
<!-- <el-button
style="position: absolute;top: 0;left: 50%;z-index: 99;"
size="langer"
@click="changePic"
>切换视图</el-button
> -->
<div v-if="isView" id="img" style="background-color: #fff; ">
<div
id="line"
style="left: 26%;top: 57%;background-color: transparent;overflow: hidden;cursor: none;"
>
<div
class="sucaitu"
:style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
class="sucaitu vieWsucaitu"
:style="{ width: '100%', height: '100%' }"
>
<vue-drag-resize-rotate
:w="item.w"
:w="item.w / WHproportion"
class-name="my-drag-resize-rotate"
:prevent-deactivation="false"
:h="item.h"
:x="item.x"
:z="item.zIndex"
:aspectRatio="true"
:isActive="index === selectIndex"
:y="item.y"
:h="item.h / WHproportion"
:x="item.x / WHproportion"
:z="item.zIndex / WHproportion"
:aspectRatio="false"
:isActive="false"
:y="item.y / WHproportion"
v-for="(item, index) in imgList"
:key="index"
:draggable="true"
:resizable="true"
:rotatable="true"
@dragstop="(a) => dragStop(a, item)"
@resizestop="(a) => resizeStop(a, item)"
@rotatestop="(a) => rotating(a, item)"
:angle="item.r"
:draggable="false"
:resizable="false"
:rotatable="false"
:angle="item.r / WHproportion"
style="pointer-events: auto;cursor: default"
>
<div
ref="sucaitu-img"
:class="{ active: index === selectIndex }"
:style="{ zIndex: item.zIndex }"
class="sucaitu-img img element"
style="cursor: default"
>
<img
crossOrigin="anonymous"
......@@ -743,104 +1026,114 @@ export default {
style="width: 100%;height: 100%"
class="sucaitu-img"
/>
<i
@click="delImg(index)"
v-if="index === selectIndex"
class=" close el-icon-close"
></i>
<div
v-if="index === selectIndex"
class="control-point control-rotator"
></div>
</div>
</vue-drag-resize-rotate>
</div>
<div
:class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
:style="{
width: gridWH.w + 'px',
height: gridWH.h + 'px',
width: 480 + 'px',
height: 540 + 'px',
}"
class="grid"
style="border-style:dashed"
></div>
</div>
<img class="template-img" draggable="false" :src="img" alt="" />
</div>
<div v-else id="line" class="boxShaow">
<!-- <div
class="sucaitu"
:style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
> -->
<div class="sucaitu" :style="{ width: '100%', height: '100%' }">
<vue-drag-resize-rotate
:w="item.w"
class-name="my-drag-resize-rotate"
:prevent-deactivation="false"
:h="item.h"
:x="item.x"
:z="item.zIndex"
:aspectRatio="true"
:isActive="index === selectIndex"
:y="item.y"
v-for="(item, index) in imgList"
:key="index"
:draggable="true"
:resizable="true"
:rotatable="true"
@dragstop="(a) => dragStop(a, item)"
@resizestop="(a) => resizeStop(a, item)"
@rotatestop="(a) => rotating(a, item)"
:angle="item.r"
>
<div
:style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }"
class="grid-row"
v-for="it in 100"
:key="it"
ref="sucaitu-img"
:class="{ active: index === selectIndex }"
:style="{ zIndex: item.zIndex }"
class="sucaitu-img img element"
>
<img
crossOrigin="anonymous"
:src="item.url"
:id="item.fileName + '_' + index"
alt=""
style="width: 100%;height: 100%"
class="sucaitu-img"
/>
<i
@click="delImg(index)"
v-if="index === selectIndex"
class=" close el-icon-close"
></i>
<div
:style="{ width: gridSpacing.w, height: gridSpacing.h }"
class="grid-col"
v-for="it in 100"
:key="it"
v-if="index === selectIndex"
class="control-point control-rotator"
></div>
</div>
</vue-drag-resize-rotate>
</div>
<div
:class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
:style="{
width: gridWH.w + 'px',
height: gridWH.h + 'px',
}"
class="grid"
>
<div
:style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }"
class="grid-row"
v-for="it in 100"
:key="it"
>
<div
:style="{ width: gridSpacing.w, height: gridSpacing.h }"
class="grid-col"
v-for="it in 100"
:key="it"
></div>
</div>
</div>
<img class="template-img" draggable="false" :src="img" alt="" />
</div>
<print-dialog
:visible="printDialogShow"
:imgList="imgList"
:byPlatenSize="gridWH.v"
>
<i
@click="changePrintDialogShow"
:class="
!printDialogShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right'
"
></i>
</print-dialog>
</div>
</div>
<img-setting
@ev="ev"
@change="formChange"
:item="returnItem"
@close="close"
<print-dialog
:visible="printDialogShow"
:imgList="imgList"
:byPlatenSize="gridWH.v"
>
<div
class="select-img"
v-if="selectImgList.length && $store.state.desktopDevice === 1"
>
<el-button
type="primary"
size="small"
style="margin-bottom: 10px;"
@click="cutImgFn"
>裁切</el-button
>
<el-checkbox-group v-model="checkList">
<el-checkbox
v-for="(it, i) in selectImgList"
:key="i"
:label="it"
:class="{ imgchecked: checkList.includes(it) }"
>
<div class="img-item" @click.stop.prevent="selectImg(it, i)">
<img style="width: 140px" :src="it.productionFile" />
<span>{{ it.designId }}</span>
</div>
</el-checkbox>
</el-checkbox-group>
<!-- <div
@click="selectImg(it, i)"
v-for="(it, i) in selectImgList"
:key="i"
class="img-item"
>
<img style="width: 140px;height: auto;" :src="it.productionFile" />
<span>{{ it.designId }}</span>
</div> -->
</div>
</img-setting>
<i
@click="changePrintDialogShow"
:class="!printDialogShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
></i>
</print-dialog>
</div>
</template>
<style lang="less" scoped>
.page-main {
display: flex;
flex: 1;
flex-shrink: 0;
overflow: hidden;
......@@ -848,15 +1141,22 @@ export default {
}
.main-bg {
height: 100%;
flex: 1;
// height: 100%;
display: flex;
align-items: center;
justify-content: center;
// align-items: center;
// justify-content: center;
}
#line {
position: absolute;
z-index: 2;
// z-index: 2;
left: 10%;
top: 50%;
transform: translate(0, -50%);
background-color: #f0f2f6;
}
.grid {
......@@ -865,6 +1165,8 @@ export default {
.grid-row {
.grid-col {
box-sizing: border-box;
display: inline-block;
border: 1px solid gray;
border-right: none;
......@@ -900,15 +1202,16 @@ export default {
}
#img {
position: absolute;
z-index: 1;
left: 130px;
// position: absolute;
// z-index: 1;
// left: 130px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: auto;
// width: auto;
position: absolute;
left: 5%;
img {
pointer-events: none;
width: auto;
......@@ -920,14 +1223,14 @@ export default {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
// justify-content: center;
// align-items: center;
position: relative;
}
.sucaitu {
position: absolute;
z-index: 0;
// position: absolute;
// z-index: 0;
width: 100%;
//display: flex;
//justify-content: center;
......@@ -1051,7 +1354,7 @@ img {
border: 1px solid #409eff;
}
</style>
<style>
<style lang="less" scoped>
.el-upload {
height: 100%;
}
......@@ -1072,4 +1375,76 @@ img {
.handle-rot::after {
display: none;
}
.information-content {
border: 1px solid #ececec;
border-top: none;
.main {
margin: 5px;
border: 1px solid #ececec;
.effectPic {
.img {
width: 100%;
}
}
}
.pic-title {
text-align: center;
}
}
.product-information {
border: 1px solid #ececec;
border-top: none;
.div-content {
padding: 10px;
display: flex;
flex-wrap: wrap;
.div-item {
display: flex;
flex: 50%;
font-size: 12px;
margin-bottom: 10px;
.item-label {
flex: 1;
text-align: right;
}
.item-value {
flex: 36%;
}
}
}
}
.title {
padding: 10px;
}
.border-row {
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
display: flex;
width: 100%;
align-items: center;
}
.full-width {
width: 100%;
}
.text-center {
text-align: center;
}
.border-col {
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.boxShaow {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.14),
0 0 20px rgba(0, 0, 0, 0.12);
}
.vieWsucaitu {
.active::before {
display: none;
}
::v-deep .drr:hover:before {
outline: none;
}
}
</style>
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