Skip to content

E
electron-printer
Commit 53cd059f by linjinhong
Options

更改右边栏配置

parent f197473e
Showing with 272 additions and 186 deletions
src/background.js
...@@ -36,6 +36,7 @@ async function createWindow() { ...@@ -36,6 +36,7 @@ async function createWindow() {
nodeIntegration: true, nodeIntegration: true,
}, },
}); });
// let newWindow = new BrowserWindow({ // let newWindow = new BrowserWindow({
// fullscreen: false, // fullscreen: false,
// width: 1000, // width: 1000,
...@@ -166,6 +167,7 @@ async function createWindow() { ...@@ -166,6 +167,7 @@ async function createWindow() {
}); });
}); });
}); });
win.on("resize", () => { win.on("resize", () => {
const { width, height } = win.getBounds(); const { width, height } = win.getBounds();
win.webContents.send("window-size", { width, height }); win.webContents.send("window-size", { width, height });
...@@ -186,7 +188,8 @@ app.on("activate", async () => { ...@@ -186,7 +188,8 @@ app.on("activate", async () => {
app.on("ready", async () => { app.on("ready", async () => {
await createWindow(); await createWindow();
// 获取当前窗口的尺寸 // 获取当前窗口的尺寸
const { width, height } = win.getBounds();
win.webContents.send("window-size", { width, height });
globalShortcut.register("F5", () => { globalShortcut.register("F5", () => {
return false; return false;
}); });
......
src/views/design/head/index.vue
...@@ -259,8 +259,6 @@ export default { ...@@ -259,8 +259,6 @@ export default {
}, 500); }, 500);
} }
} else { } else {
console.log(260, res.data);
bus.$emit("busEmit", { bus.$emit("busEmit", {
type: "sendFile", type: "sendFile",
value: res.data, value: res.data,
......
src/views/design/main/imgSetting.vue
...@@ -105,6 +105,9 @@ export default { ...@@ -105,6 +105,9 @@ export default {
this.$dataStore.set("position_unit", JSON.parse(JSON.stringify(f))); this.$dataStore.set("position_unit", JSON.parse(JSON.stringify(f)));
}, },
addValue(f) { addValue(f) {
if (!(this.item != null && !this.isPreView)) {
return;
}
if (!this.form[f]) this.$set(this.form, f, 0); if (!this.form[f]) this.$set(this.form, f, 0);
let nw = Number(this.form[f]) + 1; let nw = Number(this.form[f]) + 1;
this.$set(this.form, f, nw); this.$set(this.form, f, nw);
...@@ -117,6 +120,12 @@ export default { ...@@ -117,6 +120,12 @@ export default {
this.formChange(); this.formChange();
}, },
reduceValue(f) { reduceValue(f) {
console.log(this.item);
console.log(this.isPreView);
if (!(this.item != null && !this.isPreView)) {
return;
}
if (!this.form[f]) this.$set(this.form, f, 0); if (!this.form[f]) this.$set(this.form, f, 0);
let nw = Number(this.form[f]) - 1; let nw = Number(this.form[f]) - 1;
this.$set(this.form, f, nw); this.$set(this.form, f, nw);
...@@ -126,6 +135,9 @@ export default { ...@@ -126,6 +135,9 @@ export default {
if (f && f === "h") { if (f && f === "h") {
this.form.w = this.form.h * this.form.rate; this.form.w = this.form.h * this.form.rate;
} }
if (f && f === "zIndex") {
if (this.form[f] < 0) this.$set(this.form, f, 0);
}
this.formChange(); this.formChange();
}, },
}, },
...@@ -133,146 +145,149 @@ export default { ...@@ -133,146 +145,149 @@ export default {
</script> </script>
<template> <template>
<div class="drawer"> <el-scrollbar>
<div class="img-form"> <div class="drawer">
<div class="title"> <div class="img-form">
图片编辑（单位：{{ $dataStore.get("setting").unit }}） <div class="title">
</div> 图片编辑（单位：{{ $dataStore.get("setting").unit }}）
<el-form </div>
size="small" <el-form
:disabled="!(item && !isPreView)" size="small"
style="" :disabled="!(item && !isPreView)"
:model="form" style=""
label-position="left" :model="form"
label-width="30px" label-position="left"
> label-width="30px"
<el-row :gutter="10"> >
<el-col :span="8"> <el-row :gutter="10">
<el-form-item label="x：" prop="x"> <el-col :span="8">
<div class="form-content"> <el-form-item label="x：" prop="x">
<el-input @blur="formChange" v-model="form.x"></el-input> <div class="form-content">
<div class="set-value"> <el-input @blur="formChange" v-model="form.x"></el-input>
<i @click="addValue('x')" class="el-icon-arrow-up"></i> <div class="set-value">
<i @click="reduceValue('x')" class="el-icon-arrow-down"></i> <i @click="addValue('x')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('x')" class="el-icon-arrow-down"></i>
</div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="8">
<el-col :span="8"> <el-form-item label="y：">
<el-form-item label="y："> <div class="form-content">
<div class="form-content"> <el-input @blur="formChange" v-model="form.y"></el-input>
<el-input @blur="formChange" v-model="form.y"></el-input> <div class="set-value">
<div class="set-value"> <i @click="addValue('y')" class="el-icon-arrow-up"></i>
<i @click="addValue('y')" class="el-icon-arrow-up"></i> <i @click="reduceValue('y')" class="el-icon-arrow-down"></i>
<i @click="reduceValue('y')" class="el-icon-arrow-down"></i> </div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="8">
<el-col :span="8"> <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="8">
<el-col :span="8"> <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="8">
<el-col :span="8"> <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="8"> <el-col :span="8">
<el-form-item label="z："> <el-form-item label="z：">
<div class="form-content"> <div class="form-content">
<el-input @blur="formChange" v-model="form.zIndex"> </el-input> <el-input @blur="formChange" v-model="form.zIndex">
<div class="set-value"> </el-input>
<i @click="addValue('zIndex')" class="el-icon-arrow-up"></i> <div class="set-value">
<i <i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
@click="reduceValue('zIndex')" <i
class="el-icon-arrow-down" @click="reduceValue('zIndex')"
></i> class="el-icon-arrow-down"
></i>
</div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col
<el-col :span="24"
:span="24" style="display: flex;justify-content: space-between;padding:0 30px;"
style="display: flex;justify-content: space-between;padding:0 30px;" >
> <el-tooltip content="居中">
<el-tooltip content="居中"> <el-button @click="$emit('ev', 'center')" class="btn">
<el-button @click="$emit('ev', 'center')" class="btn"> <img
<img style="width: 13px;height: 13px"
style="width: 13px;height: 13px" src="@/static/icon/juzhong-01.png"
src="@/static/icon/juzhong-01.png" alt=""
alt="" />
/> </el-button>
</el-button> </el-tooltip>
</el-tooltip> <el-tooltip content="垂直居中">
<el-tooltip content="垂直居中"> <el-button @click="$emit('ev', 'y_center')" class="btn">
<el-button @click="$emit('ev', 'y_center')" class="btn"> <img
<img style="width: 13px;height: 13px"
style="width: 13px;height: 13px" src="@/static/icon/vertical.png"
src="@/static/icon/vertical.png" alt=""
alt="" />
/> </el-button>
</el-button> </el-tooltip>
</el-tooltip> <el-tooltip content="水平居中">
<el-tooltip content="水平居中"> <el-button @click="$emit('ev', 'x_center')" class="btn">
<el-button @click="$emit('ev', 'x_center')" class="btn"> <img
<img style="width: 13px;height: 13px"
style="width: 13px;height: 13px" src="@/static/icon/shuipingjuzhong.png"
src="@/static/icon/shuipingjuzhong.png" alt=""
alt="" />
/> </el-button>
</el-button> </el-tooltip>
</el-tooltip> <el-tooltip content="上移一层">
<el-tooltip content="上移一层"> <el-button @click="$emit('ev', 'add_index')" class="btn">
<el-button @click="$emit('ev', 'add_index')" class="btn"> <img
<img style="width: 13px;height: 13px"
style="width: 13px;height: 13px" src="@/static/icon/shangyi.png"
src="@/static/icon/shangyi.png" alt=""
alt="" />
/> </el-button>
</el-button> </el-tooltip>
</el-tooltip> <el-tooltip content="下移一层">
<el-tooltip content="下移一层"> <el-button @click="$emit('ev', 'reduce_index')" class="btn">
<el-button @click="$emit('ev', 'reduce_index')" class="btn"> <img
<img style="width: 13px;height: 13px"
style="width: 13px;height: 13px" src="@/static/icon/xiayi.png"
src="@/static/icon/xiayi.png" alt=""
alt="" />
/> </el-button>
</el-button> </el-tooltip>
</el-tooltip> </el-col>
</el-col> </el-row>
</el-row> </el-form>
</el-form> </div>
<slot name="content"></slot>
</div> </div>
<slot name="content"></slot> </el-scrollbar>
</div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -320,12 +335,12 @@ export default { ...@@ -320,12 +335,12 @@ export default {
padding: 10px; padding: 10px;
// z-index: 99; // z-index: 99;
background: white; background: white;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), // box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12); // 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
// left: 0; // left: 0;
// position: fixed; // position: fixed;
border-right: 1px solid #ececec; border-right: 1px solid #ececec;
height: calc(100vh - 50px); // height: calc(100vh - 50px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
//animation: ltr-drawer-in .3s 1ms; //animation: ltr-drawer-in .3s 1ms;
...@@ -344,6 +359,13 @@ export default { ...@@ -344,6 +359,13 @@ export default {
width: 60px; width: 60px;
border-color: #c0c4cc; border-color: #c0c4cc;
} }
::v-deep.el-scrollbar {
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
.el-scrollbar__wrap {
overflow-x: hidden;
}
}
@keyframes ltr-drawer-in { @keyframes ltr-drawer-in {
0% { 0% {
......
src/views/design/main/index.vue
<script> <script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate"; import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
const { ipcRenderer } = require("electron"); const { ipcRenderer } = require("electron");
import { grid } from "../data"; import { grid } from "../data";
import ImgSetting from "./imgSetting.vue"; import ImgSetting from "./imgSetting.vue";
...@@ -35,6 +36,7 @@ export default { ...@@ -35,6 +36,7 @@ export default {
proportion = 1.7; proportion = 1.7;
} else if (height > 900 && height <= 1000) { } else if (height > 900 && height <= 1000) {
proportion = 1.5; proportion = 1.5;
this.PreViewGrid.h;
} else { } else {
proportion = 1; proportion = 1;
} }
...@@ -51,15 +53,6 @@ export default { ...@@ -51,15 +53,6 @@ export default {
!this.grid[this.systemSetting.gridValue] !this.grid[this.systemSetting.gridValue]
) )
return { w: 0, h: 0, v: 1 }; 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 { 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,
...@@ -67,7 +60,6 @@ export default { ...@@ -67,7 +60,6 @@ export default {
}; };
}, },
gridSpacing() { gridSpacing() {
console.log(61, this.systemSetting);
const { unit, gridSpacing } = this.systemSetting; const { unit, gridSpacing } = this.systemSetting;
if (!this.systemSetting || !Object.keys(this.systemSetting).length) if (!this.systemSetting || !Object.keys(this.systemSetting).length)
return { w: 0, h: 0 }; return { w: 0, h: 0 };
...@@ -147,6 +139,14 @@ export default { ...@@ -147,6 +139,14 @@ export default {
selectImgList: [], selectImgList: [],
bus: 0, bus: 0,
grid, grid,
PreViewGrid: {
label: "16×18",
value: 1,
row: 16,
col: 18,
h: 540,
w: 480,
},
showImgSetting: true, showImgSetting: true,
printDialogShow: true, printDialogShow: true,
parentHeight: 0, parentHeight: 0,
...@@ -156,6 +156,7 @@ export default { ...@@ -156,6 +156,7 @@ export default {
x: 0, x: 0,
y: 0, y: 0,
imgList: [], imgList: [],
viewImgList: [],
selectImgIndexList: [], selectImgIndexList: [],
isView: false, isView: false,
imgHistoryList: [[]], imgHistoryList: [[]],
...@@ -173,6 +174,8 @@ export default { ...@@ -173,6 +174,8 @@ export default {
if (this.imgList.length > 0) { if (this.imgList.length > 0) {
this.$nextTick(() => { this.$nextTick(() => {
let dom = document.getElementsByClassName("drr"); let dom = document.getElementsByClassName("drr");
console.log("dom", dom);
this.imgList.forEach((el, i) => { this.imgList.forEach((el, i) => {
let dom_i = document.getElementsByClassName("drr")[i]; let dom_i = document.getElementsByClassName("drr")[i];
dom_i.style.zIndex = dom_i.style.zIndex =
...@@ -719,12 +722,14 @@ export default { ...@@ -719,12 +722,14 @@ export default {
if (currentElement.closest(".container")) { if (currentElement.closest(".container")) {
// 如果点击的元素不是 boxShaow，执行方法 // 如果点击的元素不是 boxShaow，执行方法
if (!currentElement.closest(".boxShaow") && !this.isView) { if (!currentElement.closest(".boxShaow") && !this.isView) {
this.isView = !this.isView; this.isView = true;
console.log(723, this.isView); console.log(723, this.isView);
this.$store.commit("setIsPreView", this.isView);
} }
} }
if (currentElement.closest(".drawer")) {
this.isView = false;
}
this.$store.commit("setIsPreView", this.isView);
}, },
}, },
mounted() { mounted() {
...@@ -750,8 +755,6 @@ export default { ...@@ -750,8 +755,6 @@ export default {
break; break;
case "updateSystemSetting": case "updateSystemSetting":
this.systemSetting = this.$dataStore.get("setting"); this.systemSetting = this.$dataStore.get("setting");
console.log(6684, this.systemSetting);
break; break;
case "uploadImage": case "uploadImage":
this.addFile(value, () => { this.addFile(value, () => {
...@@ -762,7 +765,6 @@ export default { ...@@ -762,7 +765,6 @@ export default {
this.imgList = []; this.imgList = [];
this.selectIndex = -1; this.selectIndex = -1;
if (value.length > 0) { if (value.length > 0) {
console.log(111, value);
this.selectImgList = value; this.selectImgList = value;
this.selectImgIndex = 0; this.selectImgIndex = 0;
this.getBackFile({ files: [value[0]], size }, (file) => { this.getBackFile({ files: [value[0]], size }, (file) => {
...@@ -800,10 +802,24 @@ export default { ...@@ -800,10 +802,24 @@ export default {
@close="close" @close="close"
> >
<template #content> <template #content>
<!-- <div class="information-content"> <div class="information-content">
<div class="title"> <div
素材信息 style="display: flex;justify-content: space-between;flex-wrap: nowrap;"
>
<div class="title" style="flex: 1;">
素材信息
</div>
<div>
<el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
>
</div>
</div> </div>
<el-row class="main"> <el-row class="main">
<el-col :span="6"> <el-col :span="6">
<div class="text-center">打印区域</div> <div class="text-center">打印区域</div>
...@@ -818,16 +834,48 @@ export default { ...@@ -818,16 +834,48 @@ export default {
</el-col> </el-col>
<el-row class="border-row"> <el-row class="border-row">
<el-col :span="6" class="text-center">A面</el-col> <el-col
<el-col :span="9" class="border-col"> :span="6"
class="text-center"
style="align-items: stretch;flex-grow: 1"
>A面</el-col
>
<el-col
:span="9"
class="border-col"
style="align-items: stretch;flex-grow: 1"
>
<div class="img"> <div class="img">
<img class="full-width" src="#" alt="" /> <img class="full-width" src="#" alt="" />
</div> </div>
</el-col> </el-col>
<el-col :span="9"> <div class="boxLine"></div>
<div class="img" v-for="(it, i) in selectImgList" :key="i"> <el-col
<img class="full-width" :src="it.productionFile" alt="" /> :span="9"
</div> style="overflow: hidden;align-items: stretch;flex-grow: 1"
>
<el-checkbox-group
v-if="selectImgList.length"
v-model="checkList"
>
<el-checkbox
:label="selectImgList[0]"
:class="{
imgchecked: checkList.includes(selectImgList[0]),
}"
>
<div
class="img-item"
@click.stop.prevent="selectImg(selectImgList[0], 0)"
>
<img
style="width: 140px"
:src="selectImgList[0].productionFile"
/>
<span>{{ selectImgList[0].designId }}</span>
</div>
</el-checkbox>
</el-checkbox-group>
</el-col> </el-col>
</el-row> </el-row>
...@@ -838,10 +886,29 @@ export default { ...@@ -838,10 +886,29 @@ export default {
<img class="full-width" src="#" alt="" /> <img class="full-width" src="#" alt="" />
</div> </div>
</el-col> </el-col>
<el-col :span="9"> <el-col :span="9" style="overflow: hidden;">
<div class="img" v-for="(it, i) in selectImgList" :key="i"> <el-checkbox-group
<img class="full-width" :src="it.productionFile" alt="" /> v-if="selectImgList.length > 1"
</div> v-model="checkList"
>
<el-checkbox
:label="selectImgList[1]"
:class="{
imgchecked: checkList.includes(selectImgList[1]),
}"
>
<div
class="img-item"
@click.stop.prevent="selectImg(selectImgList[1], 1)"
>
<img
style="width: 140px"
:src="selectImgList[1].productionFile"
/>
<span>{{ selectImgList[1].designId }}</span>
</div>
</el-checkbox>
</el-checkbox-group>
</el-col> </el-col>
</el-row> </el-row>
</el-row> </el-row>
...@@ -936,8 +1003,8 @@ export default { ...@@ -936,8 +1003,8 @@ export default {
<div>{{ detail.startStockingTime }}</div> <div>{{ detail.startStockingTime }}</div>
</div> </div>
</div> </div>
</div> --> </div>
<div <!-- <div
class="select-img" class="select-img"
v-if="selectImgList.length && $store.state.desktopDevice === 1" v-if="selectImgList.length && $store.state.desktopDevice === 1"
> >
...@@ -961,16 +1028,16 @@ export default { ...@@ -961,16 +1028,16 @@ export default {
</div> </div>
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
<!-- <div <div
@click="selectImg(it, i)" @click="selectImg(it, i)"
v-for="(it, i) in selectImgList" v-for="(it, i) in selectImgList"
:key="i" :key="i"
class="img-item" class="img-item"
> >
<img style="width: 140px;height: auto;" :src="it.productionFile" /> <img style="width: 140px;height: auto;" :src="it.productionFile" />
<span>{{ it.designId }}</span> <span>{{ it.designId }}</span>
</div>
</div> --> </div> -->
</div>
</template> </template>
</img-setting> </img-setting>
<div <div
...@@ -979,12 +1046,6 @@ export default { ...@@ -979,12 +1046,6 @@ export default {
:style="{ 'background-color': !isView ? '#77797a' : '#fff' }" :style="{ 'background-color': !isView ? '#77797a' : '#fff' }"
> >
<div class="container"> <div class="container">
<!-- <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 v-if="isView" id="img" style="background-color: #fff; ">
<div <div
id="line" id="line"
...@@ -1300,7 +1361,7 @@ img { ...@@ -1300,7 +1361,7 @@ img {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box;
span { span {
font-size: 14px; font-size: 14px;
margin: 5px 0; margin: 5px 0;
...@@ -1352,6 +1413,7 @@ img { ...@@ -1352,6 +1413,7 @@ img {
} }
.imgchecked { .imgchecked {
border: 1px solid #409eff; border: 1px solid #409eff;
box-sizing: border-box;
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -1382,7 +1444,7 @@ img { ...@@ -1382,7 +1444,7 @@ img {
.main { .main {
margin: 5px; margin: 5px;
border: 1px solid #ececec; border: 1px solid #ececec;
height: 100%;
.effectPic { .effectPic {
.img { .img {
width: 100%; width: 100%;
...@@ -1423,6 +1485,7 @@ img { ...@@ -1423,6 +1485,7 @@ img {
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%;
align-items: center; align-items: center;
} }
.full-width { .full-width {
......
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