Skip to content

E
electron-printer
Commit e5f73622 by linjinhong
Options

抽离组件准备

parent 0bc2b635
Showing with 152 additions and 143 deletions
src/components/vueDrag.vue 0 → 100644
<template>
<div
id="line"
style="left: 22%;top: 57%;background-color: transparent;overflow: hidden;cursor: none;"
>
<div class="sucaitu vieWsucaitu" :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
ref="sucaitu-img"
:style="{ zIndex: item.zIndex }"
class="sucaitu-img img element"
style="cursor: default"
>
<img
crossOrigin="anonymous"
:src="item.url"
:id="item.fileName + '_' + index"
alt=""
style="width: 100%;height: 100%"
class="sucaitu-img"
/>
</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>
</div>
</template>
<script>
export default {
props: {},
data() {
return {};
},
methods: {
dragStop(data, item) {
this.$set(item, "y", data.y);
this.$set(item, "x", data.x);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
},
resizeStop(data, item) {
if (this.selectIndex < 0 && this.imgList.length) this.selectIndex = 0;
this.$set(item, "y", data.y);
this.$set(item, "w", data.w);
this.$set(item, "h", data.h);
this.$set(item, "x", data.x);
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
},
rotating(data, item) {
console.log(data);
this.$set(item, "r", data.angle.toFixed(2));
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
},
},
mounted() {},
};
</script>
<style lang="less">
.no-border-grid {
border-color: transparent !important;
* {
border-color: transparent !important;
}
}
#line {
position: absolute;
left: 5%;
top: 50%;
transform: translate(0, -50%);
background-color: #f0f2f6;
}
</style>
src/views/design/main/index.vue
......@@ -136,18 +136,7 @@ export default {
systemSetting: {},
detail: {},
imgHeight: 0,
selectImgList: [
// {
// url: "file:///D:work/electron-printer/print/Input/1.png",
// productionFile: "file:///D:work/electron-printer/print/Input/1.png",
// designId: "1",
// },
// {
// url: "file:///D:work/electron-printer/print/Input/2.png",
// productionFile: "file:///D:work/electron-printer/print/Input/2.png",
// designId: "2",
// },
],
selectImgList: [],
bus: 0,
grid,
PreViewGrid: {
......@@ -894,88 +883,34 @@ export default {
:span="9"
style="overflow: hidden;align-items: stretch;flex-grow: 1"
>
<!-- <el-checkbox-group
v-if="item.sourceImgList?.length"
v-model="checkList"
>
<el-checkbox
v-for="(img, i) in item.sourceImgList"
:key="i"
:label="img"
:class="{
imgchecked: checkList.includes(img),
}"
>
<div class="img-item" @click.stop.prevent="selectImg(img, 0)">
<img style="width: 140px" :src="img.productionFile" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox>
</el-checkbox-group> -->
<el-carousel
v-if="item.sourceImgList?.length"
height="170px"
v-if="selectImgList?.length"
height="220px"
:autoplay="false"
indicator-position="none"
style="width: 100%;"
>
<el-carousel-item
v-for="(img, i) in item.sourceImgList"
:key="i"
>
<el-checkbox @change="changeCheckFn">
<img class="full-width" :src="img.url" alt=""
/></el-checkbox>
<el-carousel-item v-for="(img, i) in selectImgList" :key="i">
<el-checkbox-group v-model="checkList">
<el-checkbox
:class="{
imgchecked: checkList.includes(img),
}"
:label="img"
>
<div
class="img-item"
@click.stop.prevent="selectImg(img, 0)"
>
<img style="width: 140px" :src="img.productionFile" />
<span>{{ img.designId }}</span>
</div>
</el-checkbox></el-checkbox-group
>
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>
<!-- <el-row class="border-row">
<el-col :span="6" class="text-center"><div>B面</div></el-col>
<el-col :span="9" class="border-col text-center">
<el-carousel
v-if="detail.BimageAry?.length"
height="170px"
:autoplay="false"
indicator-position="none"
style="width: 100%;"
>
<el-carousel-item
v-for="(item, index) in detail.BimageAry"
:key="index"
>
<img class="full-width" :src="item.url" alt="" />
</el-carousel-item>
</el-carousel>
<div v-else>&nbsp;</div>
</el-col>
<el-col :span="9" style="overflow: hidden;">
<el-checkbox-group
v-if="selectImgList.length > 1"
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-row> -->
</el-row>
</div>
<div class="product-information">
......@@ -1069,40 +1004,6 @@ export default {
</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
......@@ -1250,7 +1151,7 @@ export default {
</div>
</div>
</div>
<!-- <div style="width: 100%;height: 100%;background-color:#77797a "></div> -->
<img
class="template-img"
draggable="false"
......@@ -1476,34 +1377,30 @@ img {
}
}
.el-checkbox {
border: 1px solid transparent;
width: 100%;
margin: 0;
// margin-bottom: 5px;
::v-deep .el-checkbox__input {
position: absolute;
top: 5px;
left: 5px;
}
::v-deep .el-checkbox__label {
.el-checkbox-group {
height: 100%;
::v-deep .el-checkbox {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
// margin-bottom: 5px;
.el-checkbox__input {
position: absolute;
top: 5px;
left: 5px;
}
.el-checkbox__label {
width: 100%;
padding: 0;
height: 100%;
}
}
// .img-item {
// width: 100%;
// height: 100%;
// .img {
// width: 100%;
// height: 100%;
// }
// }
}
.imgchecked {
border: 1px solid #409eff;
box-sizing: border-box;
}
</style>
<style lang="less" scoped>
......
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