接入画布
This commit is contained in:
X1627315083
@@ -24,7 +24,6 @@
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="list" v-show="libraryOrModel == 'model'" v-if="maskShow">
|
||||
<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
|
||||
@@ -38,9 +37,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="list printList" v-show="libraryOrModel == 'print'">
|
||||
<div v-for="item in printList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setMaterial(item)">
|
||||
<img :src="item.url || item.imgUrl" alt="">
|
||||
</div>
|
||||
<selectPrint ref="selectPrint" @setPrint="setPrint"></selectPrint>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model" v-show="selectModel.id != -1">
|
||||
@@ -57,7 +54,7 @@
|
||||
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
|
||||
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
|
||||
</div>
|
||||
<threeBox v-if="imgOrThree" ref="threeBox"></threeBox>
|
||||
<threeBox v-if="imgOrThree" @saveProject="saveProject" ref="threeBox"></threeBox>
|
||||
</div>
|
||||
<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>
|
||||
<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>
|
||||
@@ -81,17 +78,19 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, watch} from 'vue'
|
||||
import { defineComponent,computed,ref,inject,nextTick,onMounted,toRefs, reactive, watch, onBeforeMount} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import threeBox from "./three.vue"
|
||||
import download from "./download.vue"
|
||||
import {getMinioUrl} from '@/tool/util'
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import selectPrint from './selectPrint.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
threeBox,download,scaleImage
|
||||
threeBox,download,scaleImage,selectPrint
|
||||
},
|
||||
props:{
|
||||
},
|
||||
@@ -109,7 +108,6 @@ export default defineComponent({
|
||||
modelList:[] as any,
|
||||
sex:'Female',
|
||||
sexList:computed(()=>store.state.UserHabit.sex.value),
|
||||
printList:computed(()=>store.state.UploadFilesModule.allBoardData.printboardFiles),
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
isShowLoading:false,
|
||||
@@ -126,8 +124,11 @@ export default defineComponent({
|
||||
data.isNoData = false
|
||||
data.isShowMark = false
|
||||
}
|
||||
const setSelectModel = (item:any)=>{
|
||||
const createProbject:any = inject('createProbject')
|
||||
const setSelectModel = async (item:any)=>{
|
||||
if(!data.selectObject.id)await createProbject()
|
||||
data.isShowMark = true
|
||||
if(!item.threeDSimpleId)return
|
||||
const value = {
|
||||
threeDSimpleId:item.threeDSimpleId,
|
||||
}
|
||||
@@ -140,9 +141,10 @@ export default defineComponent({
|
||||
// dataDom.threeBox.openSetData()
|
||||
// }
|
||||
let stateData = {
|
||||
threeDsimpleId:item.id
|
||||
threeDSimpleId:item.id
|
||||
}
|
||||
store.commit('setPatternMaking3D',stateData)
|
||||
saveProject()
|
||||
}).catch((err:any)=>{
|
||||
data.isShowMark = false
|
||||
})
|
||||
@@ -154,7 +156,7 @@ export default defineComponent({
|
||||
})
|
||||
const openSetData = ()=>{
|
||||
nextTick(()=>{
|
||||
let id = store.state.HomeStoreModule.patternMaking3D.threeDsimpleId
|
||||
let id = store.state.HomeStoreModule.patternMaking3D.threeDSimpleId
|
||||
if(id && data.selectModel.id == -1)setSelectModel({threeDSimpleId:id})
|
||||
})
|
||||
setTimeout(()=>{
|
||||
@@ -203,14 +205,46 @@ export default defineComponent({
|
||||
// if(str == 'print' && data.selectModel.id == -1)return
|
||||
data.libraryOrModel = str
|
||||
}
|
||||
const setMaterial = (item:any)=>{
|
||||
dataDom.threeBox.addMaterial(item)
|
||||
}
|
||||
|
||||
const openScaleImage = ()=>{
|
||||
let scaleImage:any = dataDom.scaleImage
|
||||
scaleImage.isLike = false
|
||||
scaleImage.init([{imgUrl:data.selectModel.threeDPatternLayoutUrl}],0)
|
||||
}
|
||||
const setPrint = async (item:any)=>{
|
||||
if(dataDom.threeBox){
|
||||
if(!data.selectObject.id)await createProbject()
|
||||
dataDom.threeBox.addMaterial(item)
|
||||
const stateData = {
|
||||
printMinioUrl:getMinioUrl(item.imgUrl || item.url)
|
||||
}
|
||||
store.commit('setPatternMaking3D',stateData)
|
||||
saveProject()
|
||||
}
|
||||
|
||||
}
|
||||
let saveTime = null as any
|
||||
const saveProject = ()=>{
|
||||
clearTimeout(saveTime)
|
||||
saveTime = setTimeout(()=>{
|
||||
let value:any = {
|
||||
projectId:data.selectObject.id,
|
||||
}
|
||||
store.dispatch('setModularData',{type:'patternMaking3D'})
|
||||
const str = 'patternMaking3D'
|
||||
store.dispatch('getProjectData',str).then((data)=>{
|
||||
if(!data[str])return
|
||||
value[str] = data[str]
|
||||
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
|
||||
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
||||
})
|
||||
})
|
||||
},2000)
|
||||
|
||||
}
|
||||
onMounted(()=>{
|
||||
openSetData()
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
@@ -221,8 +255,8 @@ export default defineComponent({
|
||||
setImgOrThree,
|
||||
openDown,
|
||||
setLibraryOrModel,
|
||||
setMaterial,
|
||||
openScaleImage
|
||||
openScaleImage,
|
||||
setPrint,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
@@ -320,14 +354,7 @@ export default defineComponent({
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
&.printList{
|
||||
> .modelItem{
|
||||
aspect-ratio: 1 / 1;
|
||||
>img{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .modelItem{
|
||||
width: calc(100% / 4 - 1rem);
|
||||
margin: .5rem;
|
||||
|
||||
700
src/component/home/tools/patternMaking3D/selectPrint.vue
Normal file
700
src/component/home/tools/patternMaking3D/selectPrint.vue
Normal file
@@ -0,0 +1,700 @@
|
||||
<template>
|
||||
<div class="printboard_upload_modal">
|
||||
|
||||
<div class="printboard_left_upload">
|
||||
<div class="left_upload_header">
|
||||
<div class="upload_header_item">
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
|
||||
</div>
|
||||
<div
|
||||
|
||||
class="switch_type_item Guide_1_2_1"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
|
||||
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
||||
<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span> </div>
|
||||
<ul v-show="openMenu">
|
||||
<li
|
||||
v-for="item,index in printCatecoryList"
|
||||
class="printModel_item"
|
||||
@click.stop="setSceneList(item)"
|
||||
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
|
||||
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
|
||||
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
|
||||
>{{ item.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 1" class="printboard_body">
|
||||
<div class="upload_img_body">
|
||||
<div class="upload_item">
|
||||
<div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
|
||||
<div class="upload_file_img_block">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'" @click="setSetchboardGenerate(file.resData)">
|
||||
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
|
||||
<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
|
||||
|
||||
<div class="delete_like_file_block" @click.stop="deleteFile(file)">
|
||||
<span
|
||||
class="icon iconfont icon-shanchu"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="pin_block" v-show="file?.status === 'done'">
|
||||
<a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="printboardList.length < 16">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
:capture="null"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeUpload"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="fileList"
|
||||
:customRequest="function(){}"
|
||||
:maxCount="16 - printboardList.length+fileList.length"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="fileUploadChange"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
v-show="printboardList.length < 16"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Material v-show="openClick == 2"
|
||||
ref="Material"
|
||||
msg="Printboard"
|
||||
@setLibrary = setSetchboardGenerate
|
||||
@confirmSelect="confirmSelect"
|
||||
:disignTypeList="printCatecoryList"
|
||||
></Material>
|
||||
<Generate v-show="openClick == 3" ref="Generate" @setLibrary = setSetchboardGenerate :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
|
||||
</div>
|
||||
<!-- 取消请求 -->
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message,Upload} from 'ant-design-vue';
|
||||
import Cropper from '@/component/HomePage/Cropper.vue'
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import GO from "@/tool/GO";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import axios from 'axios'
|
||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Cropper,
|
||||
Material,
|
||||
Generate,
|
||||
scaleImage,
|
||||
generalMenu,
|
||||
sketchCategory,
|
||||
},
|
||||
emits: ['setPrint'],
|
||||
setup(){
|
||||
let store:any =useStore()
|
||||
let fileList:any = ref([]),//选中的文件id数据
|
||||
printImgList:any = ref([]), //print的印花图片
|
||||
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
|
||||
let openClick: any = ref(1);
|
||||
let {t} = useI18n()
|
||||
let isTest = ref()
|
||||
let userInfo:any = {}
|
||||
let workspace:any = ref({})
|
||||
let scene = ref({
|
||||
name:'Pattern',
|
||||
value:'Pattern'
|
||||
})
|
||||
let openMenu = ref(false)
|
||||
let printCatecoryList:any = computed(()=>{
|
||||
return store.state.UserHabit.printType
|
||||
})
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
moodBoards,
|
||||
openClick,
|
||||
t,
|
||||
isTest,
|
||||
userInfo,
|
||||
workspace,
|
||||
scene,
|
||||
openMenu,
|
||||
printCatecoryList,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
watch:{
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
swtich_type:'upload',
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem*1.2)',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload:{
|
||||
isPin:0,
|
||||
gender:'',
|
||||
level1Type:'Printboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
store:useStore(),
|
||||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||||
currentFileNum:0, //当前上传的文件数
|
||||
isUpload:false,
|
||||
printboardList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.printboard
|
||||
}),
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
isUseGenerate:true
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
let userInfo:any = getCookie("userInfo")
|
||||
this.userInfo = JSON.parse(userInfo);
|
||||
this.token = getCookie('token') || ''
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl()
|
||||
this.workspace = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
setSetchboardGenerate(item:any){
|
||||
this.$emit('setPrint',item)
|
||||
},
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
let material:any = this.$refs.Material
|
||||
if(num == 2){
|
||||
material.init('Printboard')
|
||||
}
|
||||
if(num == 3){
|
||||
this.scene = this.printCatecoryList[0]
|
||||
}
|
||||
},
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
|
||||
// let res = JSON.parse(data?.xhr?.response);
|
||||
file.id_ = GO.id++
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Printboard'
|
||||
};
|
||||
file.pin = false;
|
||||
// file.id = res.data.id?res.data.id:""
|
||||
let Cropper:any = this.$refs.Cropper
|
||||
if(this.currentFileNum === 1){
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = (e:any) => {
|
||||
let data_new;
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
} else {
|
||||
data_new = e.target.result;
|
||||
}
|
||||
Cropper.getOptionImg(data_new)
|
||||
|
||||
|
||||
};
|
||||
// 转化为base64
|
||||
// reader.readAsDataURL(file)
|
||||
// 转化为blob
|
||||
reader.readAsArrayBuffer(file.originFileObj);
|
||||
this.cropperFileData = file
|
||||
Cropper.changeShowModal(true)
|
||||
}else{
|
||||
this.customRequest(file)
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any,fileList:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.info(this.t('PrintboardUpload.jsContent1'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(this.t('PrintboardUpload.jsContent2'));
|
||||
}
|
||||
if(isJpgOrPng && isLt2M){
|
||||
this.currentFileNum = fileList.length
|
||||
}else{
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
deleteFile(item:any){
|
||||
// this.fileList.splice(item, 1)
|
||||
// this.store.commit('setPrintboardFile',this.fileList)
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.printboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
})
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setPrintboardFile", this.fileList);
|
||||
}
|
||||
},
|
||||
likeFile(item:any,str:string){
|
||||
if(str == 'like'){
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
level1Type:"Printboard",
|
||||
level2Type: item.categoryValue,
|
||||
gender:this.workspace.sexEnum.value,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
||||
(rv) => {
|
||||
item.like = true
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}else{
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
|
||||
(rv) => {
|
||||
item.like = false
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
customRequest(data:any){
|
||||
let new_data = {
|
||||
...this.upload,
|
||||
file:data.originFileObj
|
||||
}
|
||||
let fileUid = data.uid
|
||||
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
for(let file of this.fileList){
|
||||
if(fileUid === file.uid){
|
||||
file.status = 'done'
|
||||
file.imgUrl = rv.url
|
||||
file.pin = false
|
||||
file.id = rv.id
|
||||
file.category = this.printCatecoryList[0].name
|
||||
file.categoryValue = this.printCatecoryList[0].value
|
||||
file.resData = rv
|
||||
|
||||
}
|
||||
}
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setPrintboardFile',fileList)
|
||||
}
|
||||
}
|
||||
).catch((res)=>{
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(fileUid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
closeCropper(type:any){
|
||||
if(this.isUpload){
|
||||
return
|
||||
}
|
||||
if(type == 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(this.cropperFileData.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
}
|
||||
let Cropper:any = this.$refs.Cropper
|
||||
Cropper.closeCropper()
|
||||
|
||||
},
|
||||
|
||||
deletUploadFile(){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(this.cropperFileData.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
handleCropperSuccess(event:any){
|
||||
let {file, fileData} =event
|
||||
let new_data = {
|
||||
...this.upload,
|
||||
file:file
|
||||
}
|
||||
if(this.isUpload){
|
||||
return
|
||||
}
|
||||
this.isUpload = true
|
||||
const hide = message.loading('loading', 0);
|
||||
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
for(let file of this.fileList){
|
||||
if(fileData.uid === file.uid){
|
||||
file.status = 'done'
|
||||
file.imgUrl = rv.url
|
||||
file.id = rv.id
|
||||
file.resData = rv
|
||||
file.category = this.printCatecoryList[0].name
|
||||
file.categoryValue = this.printCatecoryList[0].value
|
||||
}
|
||||
}
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
|
||||
this.isUpload = false
|
||||
this.closeCropper('success')
|
||||
this.cropperFileData = {name:'',uid:''}
|
||||
// this.store.commit('setPrintboardFile',fileList)
|
||||
hide()
|
||||
}
|
||||
).catch(res=>{
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(fileData.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
this.cropperFileData = {name:'',uid:''}
|
||||
this.isUpload = false
|
||||
this.closeCropper('error')
|
||||
hide()
|
||||
});
|
||||
},
|
||||
|
||||
recollection(){
|
||||
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
material:[] as any,
|
||||
moodboard:[] as any,
|
||||
}
|
||||
arr.forEach((v:any)=>{
|
||||
v.pin = v.pin == 1?true:false
|
||||
this.printCatecoryList.forEach((item:any) => {
|
||||
if(v.level2Type == item.value){
|
||||
v.category=item.name
|
||||
v.categoryValue=item.value
|
||||
}
|
||||
});
|
||||
if(v.type_.type1 == 'generate'){
|
||||
setboard.generate.push(v)
|
||||
}else if(v.type_.type1 == 'material'){
|
||||
setboard.material.push(v)
|
||||
}else{
|
||||
setboard.moodboard.push(v)
|
||||
}
|
||||
})
|
||||
this.store.commit("setPrintboardGenerateFiles", setboard.generate);
|
||||
this.store.commit("setPrintboardMaterialFiles", setboard.material);
|
||||
this.store.commit("setPrintboardFile", setboard.moodboard);
|
||||
this.fileList = setboard.moodboard
|
||||
// this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
// this.store.commit('setGeneratePrintFile',this.printImgList)
|
||||
|
||||
},
|
||||
|
||||
confirmSelect(event:any){
|
||||
for(let item of event){
|
||||
let data = {
|
||||
imgUrl:item.url,
|
||||
resData:item,
|
||||
pin:false,
|
||||
id:item.id,
|
||||
status:'done',
|
||||
}
|
||||
if(this.fileList.length == 15){
|
||||
message.warning(this.t('PrintboardUpload.jsContent3'))
|
||||
break
|
||||
}
|
||||
this.fileList.push(data)
|
||||
}
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
|
||||
},
|
||||
scaleImage(index:any){
|
||||
let scaleImage:any = this.$refs.scaleImage
|
||||
scaleImage.isLike = false
|
||||
scaleImage.init(this.printboardList,index)
|
||||
},
|
||||
setSceneList(data:any){
|
||||
if(this.scene.value === data.value) return
|
||||
this.scene = data
|
||||
let generate:any = this.$refs.Generate
|
||||
generate.sketchboardList = []
|
||||
generate.searchPictureName = ''
|
||||
this.openMenu = false
|
||||
},
|
||||
openPrintModel(){
|
||||
if(this.openMenu)return
|
||||
document.addEventListener('click',this.removePrintModel)
|
||||
this.openMenu = true
|
||||
},
|
||||
removePrintModel(){
|
||||
this.openMenu = false
|
||||
document.removeEventListener('click',this.removePrintModel)
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.printboard_upload_modal{
|
||||
// padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.printboard_left_upload{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 0 2rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
border-radius: calc(0.8rem*1.2);
|
||||
line-height: calc(4rem*1.2);
|
||||
font-size: var(--aida-fsize1-8);
|
||||
// margin-right: 2.2rem*1.2);
|
||||
margin-right: calc(8rem*1.2);
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.3rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: calc(.6rem*1.2);
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
// font-weight: 900;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.switch_icon {
|
||||
font-size: calc(1.8rem*1.2);
|
||||
margin-right: calc(0.8rem*1.2);
|
||||
}
|
||||
}
|
||||
.printMenu{
|
||||
margin-right: 0;
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
margin-left: 2rem;
|
||||
>div{
|
||||
width: 14rem;
|
||||
font-size: var(--aida-fsize1-6);
|
||||
border: 0;
|
||||
i{
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.forbidden{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
ul{
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
.switch_type_item:nth-child(3){
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.printboard_body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: calc(100% - 5rem*1.2));
|
||||
flex: 1;
|
||||
padding-top: calc(2.5rem*1.2);
|
||||
height: calc(30rem*1.2);
|
||||
overflow-x: hidden;
|
||||
&.printboard_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body{
|
||||
height: calc(100% - 3rem*1.2);
|
||||
overflow-y: auto;
|
||||
margin-bottom: calc(1rem*1.2);
|
||||
&.upload_img_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
||||
// margin: 0 2rem*1.2) 2rem*1.2) 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
img{
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.upload_file_img_block{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.upload_component{
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -63,7 +63,7 @@ export default defineComponent({
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:[],
|
||||
emits:['saveProject'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
@@ -265,7 +265,7 @@ export default defineComponent({
|
||||
texture.anisotropy = 32; // 提高纹理清晰度
|
||||
data.group?.traverse((child:any) => {
|
||||
if (child.isMesh) {
|
||||
console.log(child.name)
|
||||
// console.log(child.name)
|
||||
// 5. 创建新材质（根据需求选择材质类型）
|
||||
const textureWidth = texture.image.width;
|
||||
const textureHeight = texture.image.height;
|
||||
@@ -420,7 +420,7 @@ export default defineComponent({
|
||||
const modeUrl = await getModelUrl(value)
|
||||
await setModel(modeUrl)
|
||||
let patternMaking3D = store.state.HomeStoreModule.patternMaking3D
|
||||
if(patternMaking3D.printMinioUrl)await addMaterial({url:patternMaking3D.printMinioUrl})
|
||||
if(patternMaking3D.url)await addMaterial({url:patternMaking3D.url})
|
||||
data.load.state = false
|
||||
}
|
||||
const changeRepeat = (e:any)=>{
|
||||
@@ -437,6 +437,7 @@ export default defineComponent({
|
||||
y:data.repeat.y,
|
||||
}
|
||||
store.commit('setPatternMaking3D',value)
|
||||
emit('saveProject')
|
||||
},1000)
|
||||
}
|
||||
const setLock = ()=>{
|
||||
|
||||
Reference in New Issue
Block a user