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>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
const { ipcRenderer } = require("electron");
import { grid } from "../data";
import ImgSetting from "./imgSetting.vue";
......@@ -21,6 +21,7 @@ export default {
PrintDialog,
VueDragResizeRotate,
ImgSetting,
PicScrollbarBox,
},
destroyed() {
document.removeEventListener("keyup", this.keyup);
......@@ -214,26 +215,31 @@ export default {
},
productDetail(newValue) {
this.detail = { ...newValue };
if (typeof this.detail.imageAry == "string") {
this.detail.imageAry = JSON.parse(this.detail.imageAry).filter(
(el) => el.title
);
const groupedData = this.detail.imageAry.reduce((acc, obj) => {
const titleKey = obj.title;
if (!acc[titleKey]) {
acc[titleKey] = {
title: titleKey,
viewImgList: [obj],
sourceImgList: [],
};
} else {
acc[titleKey].viewImgList.push(obj);
}
return acc;
}, {});
this.detail.imageAry = Object.values(groupedData);
console.log("imageAry", this.detail.imageAry);
}
this.$nextTick(() => {
if (typeof this.detail.imageAry == "string") {
this.detail.imageAry = JSON.parse(this.detail.imageAry).filter(
(el) => el.title
);
// const groupedData = this.detail.imageAry.reduce((acc, obj) => {
// const titleKey = obj.title;
// if (!acc[titleKey]) {
// acc[titleKey] = {
// title: titleKey,
// viewImgList: [obj],
// sourceImgList: [],
// };
// } else {
// acc[titleKey].viewImgList.push(obj);
// }
// return acc;
// }, {});
// this.detail.imageAry = [
// ...this.detail.imageAry,
// ...this.detail.imageAry,
// ];
console.log("imageAry", this.detail.imageAry);
}
});
},
changeCheckFn(value) {
console.log("check", value);
......@@ -813,6 +819,8 @@ export default {
this.selectIndex = -1;
if (value.length > 0) {
this.selectImgList = value;
console.log(816, this.selectImgList);
this.selectImgIndex = 0;
this.getBackFile(
{ files: [value[0]], size: this.detail.designImageSize || null },
......@@ -853,22 +861,13 @@ export default {
>
<template #content>
<div class="information-content">
<div
<!-- <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-col :span="6">
......@@ -941,8 +940,18 @@ export default {
</el-col>
</el-row>
</el-row> -->
<el-table border :data="detail.imageAry">
<el-table-column label="打印区域" prop="title"></el-table-column>
<!-- <el-table
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">
<template slot-scope="{ row }">
<img class="full-width" :src="row.url" alt="" />
......@@ -961,7 +970,92 @@ export default {
<span>{{ getComputedName(row.title) }}</span>
</template>
</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 class="product-information">
<div class="title">
......@@ -1417,7 +1511,7 @@ img {
width: 100%;
color: black;
display: inline-block; /* 使 span 成为块级元素，这样可以设置宽度 */
max-width: 270px; /* 限制宽度 */
// max-width: 270px; /* 限制宽度 */
word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
white-space: normal; /* 确保正常换行 */
text-align: center;
......@@ -1438,12 +1532,15 @@ img {
.el-checkbox-group {
height: 100%;
// border-top: 1px solid #ececec;
margin-bottom: 25px;
::v-deep .el-checkbox {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
border: 1px solid #ececec;
margin: 5px;
// margin-bottom: 5px;
.el-checkbox__input {
position: absolute;
......@@ -1561,4 +1658,7 @@ img {
outline: none;
}
}
// ::v-deep.el-table thead {
// color: black;
// }
</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