fix
This commit is contained in:
X1627315083
@@ -20,7 +20,7 @@
|
||||
<div class="title">{{ $t('exportModel.Color') }}</div>
|
||||
<input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
|
||||
<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
|
||||
<div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
|
||||
<div class="labelHover_show color" v-show="operation == 'color'" @click.stop="">
|
||||
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,14 +97,39 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="label_item" v-if="elementList" v-show="
|
||||
canvasGeneral.operation != 'dashedPencil' &&
|
||||
canvasGeneral.operation != 'dashed'">
|
||||
<div>{{ $t('exportModel.select') }}:</div>
|
||||
<span class="icon iconfont icon-xiala" @click.stop="setOperation('element')" :class="{active: operation == 'element'}"></span>
|
||||
<div class="labelHover_show element" v-show="operation == 'element'" @click.stop="">
|
||||
<div v-for="titleItem,key in elementList" class="elementItem">
|
||||
<div class="titleItem">{{ titleItem?.name }}</div>
|
||||
<div class="titleImgList">
|
||||
<div class="titleImgItem" v-for="imgItem in titleItem?.list">
|
||||
<img :src="imgItem?.url || imgItem?.designOutfitUrl || imgItem?.imgUrl || imgItem?.minioUrl" @click="addImage(imgItem)" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
|
||||
import { defineComponent,ref,reactive,computed,toRefs,inject} from 'vue'
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
components:{},
|
||||
props:{
|
||||
elementList:{
|
||||
type:Object,
|
||||
default:()=>{return {}}
|
||||
}
|
||||
},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
let testModal = ref(true)
|
||||
let canvasGeneral:any = inject('canvasObj')
|
||||
const data = reactive({
|
||||
@@ -121,12 +146,17 @@
|
||||
const closeModal = ()=>{
|
||||
document.removeEventListener('click',setOper)
|
||||
}
|
||||
const addImage = (item:any)=>{
|
||||
if(!item.minioUrl)item.minioUrl = item.imgUrl
|
||||
canvasGeneral.addImage(item)
|
||||
}
|
||||
return {
|
||||
canvasGeneral,
|
||||
...toRefs(data),
|
||||
testModal,
|
||||
setOperation,
|
||||
closeModal,
|
||||
addImage
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -156,13 +186,37 @@
|
||||
border: 1px solid;
|
||||
padding: .5rem 1rem;
|
||||
background: #fff;
|
||||
div{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
&.color{
|
||||
div{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.element{
|
||||
height: auto;
|
||||
max-height: 40rem;
|
||||
overflow-y: auto;
|
||||
>.elementItem{
|
||||
margin-bottom: 1rem;
|
||||
> .titleImgList{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.titleImgItem{
|
||||
width: 50%;
|
||||
padding: 1rem;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input{
|
||||
@@ -170,7 +224,6 @@
|
||||
width: 12rem;
|
||||
}
|
||||
&.wH input{
|
||||
width: 5rem;
|
||||
}
|
||||
.title{
|
||||
margin-right: 1rem;
|
||||
|
||||
@@ -17,10 +17,12 @@
|
||||
import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
component:{},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
let {t} = useI18n()
|
||||
let canvasType = inject('canvasType')
|
||||
let canvasGeneral:any = inject('canvasObj')
|
||||
@@ -33,12 +35,17 @@
|
||||
|
||||
})
|
||||
const createCanvas = (canvasSize:any)=>{
|
||||
data.isPresuppose = false
|
||||
nextTick(()=>{
|
||||
canvasGeneral.canvasInit(data.canvasDom,canvasSize)
|
||||
console.log(canvasGeneral);
|
||||
|
||||
return new Promise(async (resolve,reject)=>{
|
||||
data.isPresuppose = false
|
||||
await nextTick(async ()=>{
|
||||
await canvasGeneral.canvasInit(data.canvasDom,{
|
||||
width:data.canvasDom.offsetWidth,
|
||||
height:data.canvasDom.offsetHeight,
|
||||
})
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
const openMode = (data:any)=>{
|
||||
let {yes,no} = data
|
||||
@@ -95,6 +102,13 @@
|
||||
let canvasSize = {width,height}
|
||||
createCanvas(canvasSize)
|
||||
}
|
||||
const openSetData =async ()=>{
|
||||
let oldCanvas = store.state.HomeStoreModule.canvasData?.canvas
|
||||
if(oldCanvas){
|
||||
await createCanvas({})
|
||||
canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
if(canvasType == 'export'){
|
||||
data.isPresuppose = true
|
||||
@@ -107,6 +121,7 @@
|
||||
canvasGeneral,
|
||||
...toRefs(data),
|
||||
setPresuppose,
|
||||
openSetData,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="generalCanvas">
|
||||
<div class="argument-box">
|
||||
<argument ref="argument" v-if="canvasObj.canvas"></argument>
|
||||
<argument ref="argument" v-if="canvasObj.canvas" :elementList="elementList"></argument>
|
||||
</div>
|
||||
<div class="canvasBox">
|
||||
<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
|
||||
@@ -15,11 +15,16 @@
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; margin-top: 2rem;">
|
||||
<div class="gallery_btn" style="margin: 0 2rem;" @click="setShare">{{ $t('exportModel.Share') }}</div>
|
||||
<div class="gallery_btn" style="margin: 0 2rem;" @click="setExport">{{ $t('exportModel.Export') }}</div>
|
||||
</div>
|
||||
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
|
||||
<!-- <publish ref="publish" @clearPublish="()=>{}"></publish> -->
|
||||
</div>
|
||||
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
|
||||
</template>
|
||||
<script>
|
||||
import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
|
||||
import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted, toRefs,
|
||||
} from "vue";
|
||||
import {message} from 'ant-design-vue'
|
||||
import { Https } from "@/tool/https";
|
||||
@@ -32,6 +37,8 @@ import detail from "./detail.vue"
|
||||
import canvasContent from "./canvasContent.vue"
|
||||
import liquefaction from "@/component/modules/liquefaction.vue";
|
||||
|
||||
import JSZip, { forEach } from "jszip";
|
||||
import publish from "@/component/WorksPage/publish.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@@ -39,26 +46,34 @@ export default defineComponent({
|
||||
argument,
|
||||
detail,
|
||||
canvasContent,
|
||||
liquefaction,
|
||||
liquefaction,publish
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const isShowMark = ref(false)
|
||||
const component = reactive({
|
||||
argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
|
||||
})
|
||||
let liquefaction = ref(null)
|
||||
let liquefactionData = ref()
|
||||
let groupDashed = ref(null)//用来判断是否需要对group添加img
|
||||
let canvasType = 'export'
|
||||
let canvasObj = reactive(new canvasGeneral())
|
||||
let canvasObj = reactive(new canvasGeneral('export'))
|
||||
const dataDom = reactive({
|
||||
argument:null,
|
||||
canvasContent:null,
|
||||
tool:null,
|
||||
detail:null,
|
||||
publish:null,
|
||||
})
|
||||
let data = reactive({
|
||||
elementList:null,
|
||||
showCanvas:false,
|
||||
})
|
||||
provide('canvasType',canvasType)
|
||||
provide('canvasObj',canvasObj)
|
||||
provide('isShowMark',isShowMark)
|
||||
const close = ()=>{
|
||||
component.forEach((item)=>{
|
||||
if(item.value.closeModal)item.value.closeModal()
|
||||
dataDom.forEach((item)=>{
|
||||
if(item.closeModal)item.closeModal()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -100,6 +115,140 @@ export default defineComponent({
|
||||
// canvasObj.updateCanvasState()
|
||||
// });
|
||||
}
|
||||
const getCanvasData = ()=>{
|
||||
if(!canvasObj.canvas)return
|
||||
var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
|
||||
// console.log(JSON.stringify(json));
|
||||
json.objects.forEach(item=>{
|
||||
if(item.type == 'image'){
|
||||
delete item.src
|
||||
}
|
||||
})
|
||||
let canvasExport = {
|
||||
canvas:json,
|
||||
groupList: canvasObj.layer.list
|
||||
}
|
||||
return canvasExport
|
||||
}
|
||||
const openSetData = async ()=>{
|
||||
let arr = store.state.Workspace.projectList
|
||||
let obj = {}
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
const item = arr[index];
|
||||
await new Promise((resolve, reject) => {
|
||||
store.dispatch('getProjectCanvasData',item.value).then((value)=>{
|
||||
const keys = Object.keys(value)[0];
|
||||
if(!value[keys] || value[keys].length == 0){
|
||||
resolve('')
|
||||
return
|
||||
}
|
||||
let rv = {
|
||||
list:value[keys],
|
||||
name:item.name,
|
||||
}
|
||||
obj[keys] = rv
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
data.elementList = obj
|
||||
if(data.showCanvas)return
|
||||
data.showCanvas = true
|
||||
dataDom.canvasContent.openSetData()
|
||||
}
|
||||
let setShare = async ()=>{
|
||||
dataDom.publish.publishMask = true
|
||||
canvasObj.detailSubmit().then((img)=>{
|
||||
let data = {
|
||||
"imgUrl":img,
|
||||
userlikeGroupId:store.state.Workspace.probjects.id,
|
||||
}
|
||||
dataDom.publish.init(data)
|
||||
})
|
||||
|
||||
}
|
||||
//设置导出
|
||||
let setExport = async () => {
|
||||
var imageDataURL = await canvasObj.detailSubmit()
|
||||
let a = document.createElement("a");
|
||||
let img = [];
|
||||
let index = 0;
|
||||
img.push({
|
||||
imgUrl: imageDataURL,
|
||||
name: "collection.png",
|
||||
});
|
||||
let num = 0;
|
||||
console.log(data.elementList)
|
||||
for (let key in data.elementList) {
|
||||
for (let index = 0; index < data.elementList[key].list.length; index++) {
|
||||
const item = data.elementList[key].list[index];
|
||||
let url = item.imgUrl || item.url || item.designOutfitUrl || item.minioUrl
|
||||
let name = url?.split(".").pop().split("?").shift();
|
||||
img.push({imgUrl:url,name:`element${index}.${name}`})
|
||||
}
|
||||
}
|
||||
console.log(img)
|
||||
downImg(img);
|
||||
};
|
||||
let getImgArrayBuffer = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
//通过请求获取文件blob格式
|
||||
let xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open("GET", url, true);
|
||||
xmlhttp.responseType = "blob";
|
||||
xmlhttp.withCredentials = false;
|
||||
xmlhttp.onload = function () {
|
||||
if (this.status == 200) {
|
||||
resolve(this.response);
|
||||
} else {
|
||||
reject(this.status);
|
||||
}
|
||||
};
|
||||
xmlhttp.send();
|
||||
});
|
||||
};
|
||||
let downImg = (imagesParams) => {
|
||||
let zip = new JSZip();
|
||||
let cache = {};
|
||||
let promises = [];
|
||||
for (let item of imagesParams) {
|
||||
const promise = getImgArrayBuffer(item.imgUrl).then((data) => {
|
||||
// 下载文件, 并存成ArrayBuffer对象(blob)
|
||||
zip.file(item.name, data, { binary: true }); // 逐个添加文件
|
||||
cache[item.title] = data;
|
||||
})
|
||||
promises.push(promise);
|
||||
}
|
||||
Promise.all(promises)
|
||||
.then(() => {
|
||||
function downloadBlob(blob, filename) {
|
||||
const link = document.createElement('a');
|
||||
const url = URL.createObjectURL(blob);
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
zip.generateAsync({ type: "blob" }).then((content) => {
|
||||
// 生成二进制流
|
||||
downloadBlob(content,'DesignFiles')
|
||||
// FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
|
||||
isShowMark.value = false;
|
||||
|
||||
});
|
||||
setSubmit()//导出的时候保存
|
||||
initAligningGuidelines(canvas,true)
|
||||
|
||||
})
|
||||
.catch((res) => {
|
||||
// message.warning(t('HomeView.jsContent3'));
|
||||
isShowMark.value = false;
|
||||
initAligningGuidelines(canvas,true)
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
});
|
||||
onBeforeUnmount(()=>{
|
||||
@@ -108,11 +257,17 @@ export default defineComponent({
|
||||
return {
|
||||
isShowMark,
|
||||
liquefaction,
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
canvasObj,
|
||||
close,
|
||||
expoet,
|
||||
toolLiquefaction,
|
||||
submitLiquefaction,
|
||||
getCanvasData,
|
||||
openSetData,
|
||||
setShare,
|
||||
setExport,
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
@@ -145,14 +300,15 @@ export default defineComponent({
|
||||
:deep(i){
|
||||
font-size: 2.5rem;
|
||||
cursor: pointer;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all .3s;
|
||||
margin-bottom: .5rem;
|
||||
padding: 1rem;
|
||||
&.active{
|
||||
border: 1px solid;
|
||||
border-radius: .4rem;
|
||||
|
||||
Reference in New Issue
Block a user