Skip to content

E
electron-printer
Commit 62524fd1 by linjinhong
Options

修改效果图和素材图样式

parent 4ebb7b1e
Showing with 219 additions and 38 deletions
src/components/PicScrollbarBox.vue 0 → 100644
<template>
<div>
<div style="display: flex;justify-content: space-between;">
<div class="title">
{{ boxTitle }}
</div>
<slot name="titleRight"></slot>
<!-- <el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
> -->
</div>
<el-scrollbar class="scrollbarBox">
<slot v-if="$slots.mainContent" name="mainContent"></slot>
<!-- <el-checkbox-group
v-if="imglist.length"
v-model="checkList"
style="display: flex;flex-wrap:nowrap"
>
<el-checkbox
v-for="img in imglist"
:key="img.designId"
:class="{
imgchecked: checkList.includes(img),
}"
:label="img"
>
<div class="img-item" @click.stop.prevent="selectImg(img)">
<img style="width: 140px" :src="img.productionFile" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox></el-checkbox-group
> -->
<el-empty v-else :description="emptyTitle"></el-empty>
</el-scrollbar>
</div>
</template>
<script>
export default {
name: "PicScrollbarBox",
props: {
boxTitle: {
type: String,
default: null,
},
emptyTitle: {
type: String,
default: null,
},
imglist: {
type: String,
default: null,
},
},
data() {
return {};
},
methods: {},
mounted() {},
};
</script>
<style lang="less" scoped>
.title {
padding: 10px;
font-size: 20px;
font-weight: 700;
}
.el-scrollbar {
overflow-y: hidden;
:v-deep.el-scrollbar__wrap {
margin-bottom: 0 !important;
}
}
.el-empty {
padding-top: 0;
padding-bottom: 25px;
}
</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 PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
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";
...@@ -21,6 +21,7 @@ export default { ...@@ -21,6 +21,7 @@ export default {
PrintDialog, PrintDialog,
VueDragResizeRotate, VueDragResizeRotate,
ImgSetting, ImgSetting,
PicScrollbarBox,
}, },
destroyed() { destroyed() {
document.removeEventListener("keyup", this.keyup); document.removeEventListener("keyup", this.keyup);
...@@ -214,26 +215,31 @@ export default { ...@@ -214,26 +215,31 @@ export default {
}, },
productDetail(newValue) { productDetail(newValue) {
this.detail = { ...newValue }; this.detail = { ...newValue };
if (typeof this.detail.imageAry == "string") { this.$nextTick(() => {
this.detail.imageAry = JSON.parse(this.detail.imageAry).filter( if (typeof this.detail.imageAry == "string") {
(el) => el.title this.detail.imageAry = JSON.parse(this.detail.imageAry).filter(
); (el) => el.title
const groupedData = this.detail.imageAry.reduce((acc, obj) => { );
const titleKey = obj.title; // const groupedData = this.detail.imageAry.reduce((acc, obj) => {
if (!acc[titleKey]) { // const titleKey = obj.title;
acc[titleKey] = { // if (!acc[titleKey]) {
title: titleKey, // acc[titleKey] = {
viewImgList: [obj], // title: titleKey,
sourceImgList: [], // viewImgList: [obj],
}; // sourceImgList: [],
} else { // };
acc[titleKey].viewImgList.push(obj); // } else {
} // acc[titleKey].viewImgList.push(obj);
return acc; // }
}, {}); // return acc;
this.detail.imageAry = Object.values(groupedData); // }, {});
console.log("imageAry", this.detail.imageAry); // this.detail.imageAry = [
} // ...this.detail.imageAry,
// ...this.detail.imageAry,
// ];
console.log("imageAry", this.detail.imageAry);
}
});
}, },
changeCheckFn(value) { changeCheckFn(value) {
console.log("check", value); console.log("check", value);
...@@ -813,6 +819,8 @@ export default { ...@@ -813,6 +819,8 @@ export default {
this.selectIndex = -1; this.selectIndex = -1;
if (value.length > 0) { if (value.length > 0) {
this.selectImgList = value; this.selectImgList = value;
console.log(816, this.selectImgList);
this.selectImgIndex = 0; this.selectImgIndex = 0;
this.getBackFile( this.getBackFile(
{ files: [value[0]], size: this.detail.designImageSize || null }, { files: [value[0]], size: this.detail.designImageSize || null },
...@@ -853,22 +861,13 @@ export default { ...@@ -853,22 +861,13 @@ export default {
> >
<template #content> <template #content>
<div class="information-content"> <div class="information-content">
<div <!-- <div
style="display: flex;justify-content: space-between;flex-wrap: nowrap;" style="display: flex;justify-content: space-between;flex-wrap: nowrap;"
> >
<div class="title" style="flex: 1;"> <div class="title" style="flex: 1;">
素材信息 效果图
</div>
<div>
<el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
>
</div> </div>
</div> </div> -->
<!-- <el-row class="main"> <!-- <el-row class="main">
<el-col :span="6"> <el-col :span="6">
...@@ -941,8 +940,18 @@ export default { ...@@ -941,8 +940,18 @@ export default {
</el-col> </el-col>
</el-row> </el-row>
</el-row> --> </el-row> -->
<el-table border :data="detail.imageAry"> <!-- <el-table
<el-table-column label="打印区域" prop="title"></el-table-column> style="margin: 5px;width: auto;"
border
:data="detail.imageAry"
:header-cell-style="{ 'text-align': 'center' }"
>
<el-table-column
label="打印区域"
prop="title"
align="center"
width="100px"
></el-table-column>
<el-table-column label="效果图" prop="title"> <el-table-column label="效果图" prop="title">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<img class="full-width" :src="row.url" alt="" /> <img class="full-width" :src="row.url" alt="" />
...@@ -961,7 +970,92 @@ export default { ...@@ -961,7 +970,92 @@ export default {
<span>{{ getComputedName(row.title) }}</span> <span>{{ getComputedName(row.title) }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table> -->
<PicScrollbarBox
boxTitle="效果图"
emptyTitle="效果图为空"
style="border-bottom: 1px solid #ececec;"
>
<template #mainContent v-if="detail.imageAry?.length">
<div style="display: flex;flex-wrap: nowrap;width: 100%;">
<div
v-for="(img, index) in detail.imageAry"
:key="index"
class="img-item"
>
<img width="200px" :src="img.url" />
</div>
</div>
</template>
</PicScrollbarBox>
<PicScrollbarBox boxTitle="素材图" emptyTitle="素材图为空">
<template #titleRight>
<el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
>
</template>
<template #mainContent>
<el-checkbox-group
v-if="selectImgList.length"
v-model="checkList"
style="display: flex;flex-wrap:nowrap"
>
<el-checkbox
v-for="img in selectImgList"
:key="img.designId"
:class="{
imgchecked: checkList.includes(img),
}"
:label="img"
>
<div class="img-item" @click.stop.prevent="selectImg(img)">
<img :src="img.productionFile" style="width: 100%;" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox></el-checkbox-group
>
</template>
</PicScrollbarBox>
<!-- <div>
<div style="display: flex;justify-content: space-between;">
<div class="title">
素材图
</div>
<el-button
type="primary"
size="small"
style="margin: 10px;"
@click="cutImgFn"
>裁切</el-button
>
</div>
<el-scrollbar class="scrollbarBox">
<el-checkbox-group
v-if="selectImgList.length"
v-model="checkList"
style="display: flex;flex-wrap:nowrap"
>
<el-checkbox
v-for="img in selectImgList"
:key="img.designId"
:class="{
imgchecked: checkList.includes(img),
}"
:label="img"
>
<div class="img-item" @click.stop.prevent="selectImg(img)">
<img style="width: 140px" :src="img.productionFile" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox></el-checkbox-group
>
<el-empty v-else description="没有素材"></el-empty>
</el-scrollbar>
</div> -->
</div> </div>
<div class="product-information"> <div class="product-information">
<div class="title"> <div class="title">
...@@ -1417,7 +1511,7 @@ img { ...@@ -1417,7 +1511,7 @@ img {
width: 100%; width: 100%;
color: black; color: black;
display: inline-block; /* 使 span 成为块级元素，这样可以设置宽度 */ display: inline-block; /* 使 span 成为块级元素，这样可以设置宽度 */
max-width: 270px; /* 限制宽度 */ // max-width: 270px; /* 限制宽度 */
word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */ word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
white-space: normal; /* 确保正常换行 */ white-space: normal; /* 确保正常换行 */
text-align: center; text-align: center;
...@@ -1438,12 +1532,15 @@ img { ...@@ -1438,12 +1532,15 @@ img {
.el-checkbox-group { .el-checkbox-group {
height: 100%; height: 100%;
// border-top: 1px solid #ececec;
margin-bottom: 25px;
::v-deep .el-checkbox { ::v-deep .el-checkbox {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #ececec;
margin: 5px;
// margin-bottom: 5px; // margin-bottom: 5px;
.el-checkbox__input { .el-checkbox__input {
position: absolute; position: absolute;
...@@ -1561,4 +1658,7 @@ img { ...@@ -1561,4 +1658,7 @@ img {
outline: none; outline: none;
} }
} }
// ::v-deep.el-table thead {
// color: black;
// }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment