3d添加印花 等

This commit is contained in:
X1627315083
2025-04-16 10:43:54 +08:00
parent fd2e47e783
commit c2288a30b2
51 changed files with 5588 additions and 359 deletions

View File

@@ -68,6 +68,11 @@ export default defineComponent({
default:'' as any,
required:true
},
isSegmentation:{
type:Boolean,
default:false as any,
required:true
},
},
emits:['selectImgItem'],
setup(props,{emit}) {
@@ -86,7 +91,6 @@ export default defineComponent({
currentPage:1,
})
const init = ()=>{
console.log(123)
detailData.designTypeList = props.catecoryList
detailData.designType = detailData.designTypeList[0].value
getLibraryList()
@@ -115,7 +119,9 @@ export default defineComponent({
}
}
let data = JSON.parse(JSON.stringify(file))
data.id = id
if(!props.isSegmentation){
data.id = id
}
emit('selectImgItem',data)
// store.commit('DesignDetailCopy/setNewDetail',data)
}
@@ -263,6 +269,9 @@ export default defineComponent({
width: 100%;
height: calc((34rem - 2rem) / 2);
overflow: hidden;
> img{
width: 100%;
}
}
}
}

View File

@@ -28,10 +28,11 @@
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
<uploadList v-if="!isSegmentation" @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
<uploadSegmentation v-if="isSegmentation" :segmentationType="segmentationType" @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadSegmentation>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
<libraryList @selectImgItem="selectImgItem" :randomId="randomId" :level1Type="level1Type" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
<libraryList :isSegmentation="isSegmentation" @selectImgItem="selectImgItem" :randomId="randomId" :level1Type="level1Type" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
</div>
</div>
</div>
@@ -45,12 +46,14 @@ import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import libraryList from './libraryList.vue'
import uploadList from './uploadList.vue'
import uploadSegmentation from './uploadSegmentation.vue'
import currentList from './currentList.vue'
export default defineComponent({
components:{
currentList,
libraryList,
uploadList,
uploadSegmentation,
},
props:{
catecoryList:{
@@ -62,6 +65,16 @@ export default defineComponent({
default:true,
required:false
},
isSegmentation:{//决定上传的入参,是否需要分割
type:Boolean,
default:false,
required:false
},
segmentationType:{//决定上传的入参,是否需要分割
type:String,
default:'',
required:false
},
type:{
type:String,
default:'' as any,

View File

@@ -13,10 +13,10 @@
<div class="upload_item">
<div class="upload_file_item upload_component">
<a-upload
:action="uploadUrl + '/api/element/upload'"
:action="uploadUrl + (upLoadHttpsUrl?upLoadHttpsUrl:'/api/element/upload')"
list-type="picture-card"
:capture="null"
:multiple="true"
:data="{
...upload,
}"
@@ -64,6 +64,14 @@ export default defineComponent({
default:'' as any,
required:true
},
segmentation:{
type:Object,
default:null as any,
},
upLoadHttpsUrl:{//决定上传的入参,是否需要分割
type:String,
default:'' as any,
},
},
emits:['selectImgItem'],
setup(props,{emit}) {
@@ -72,12 +80,13 @@ export default defineComponent({
const detailData = reactive({
isShowLoading:false,//懒加载,加载中
uploadList:[],
upload:{
isPin: 0,
level1Type: props.level1Type,
gender:store.state.Workspace.probjects.sex ,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
upload:props.segmentation?
props.segmentation:{
isPin: 0,
level1Type: props.level1Type,
gender:store.state.Workspace.probjects.sex ,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token:getCookie("token"),
uploadUrl:getUploadUrl(),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
@@ -124,8 +133,6 @@ export default defineComponent({
let fileList = detailData.uploadList.filter(
(v:any) => v.status === "done"
);
console.log(file);
detailData.uploadList = fileList
// this.selectImgItem(detailData.uploadList[detailData.uploadList.length-1])
}else{

View File

@@ -0,0 +1,201 @@
<template>
<div class="uploadList">
<div class="uploadList_box">
<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
</div>
</div>
<div class="upload_item">
<div class="upload" @click="upload">
<i class="fi fi-br-upload"></i>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import { getCookie } from "@/tool/cookie";
import { message,Upload} from 'ant-design-vue';
import {getUploadUrl} from '@/tool/util'
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
sketchCategory
},
props:{
catecoryList:{
type:Object,
default:()=>[] as any,
required:true
},
level1Type:{
type:String,
default:'' as any,
required:true
},
segmentation:{
type:Object,
default:null as any,
},
segmentationType:{
type:String,
default:'' as any,
},
upLoadHttpsUrl:{//决定上传的入参,是否需要分割
type:String,
default:'' as any,
},
},
emits:['selectImgItem'],
setup(props,{emit}) {
const {t} = useI18n();
const store = useStore();
const detailData = reactive({
isShowLoading:false,//懒加载,加载中
uploadList:[],
upload:props.segmentation?
props.segmentation:{
isPin: 0,
level1Type: props.level1Type,
gender:store.state.Workspace.probjects.sex ,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token:getCookie("token"),
uploadUrl:getUploadUrl(),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
isShowMark:false,
})
const getDetailListData = reactive({
total:0,
pageSize:10,
currentPage:1,
})
const selectImgItem = (file:any)=>{
// let data = JSON.parse(JSON.stringify(file))
// store.commit('DesignDetailCopy/setNewDetail',file)
emit('selectImgItem',file)
}
const upload = ()=>{
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*'; // 只允许选择图片文件
input.multiple = true; // 允许多选
input.addEventListener('change', (event) => {
detailData.isShowMark = true; // 显示加载状态
const files = event?.target?.files;
if (!files || files.length === 0) {
detailData.isShowMark = false;
return;
}
let file = [...Array.from(files)];
let param = new FormData();
param.append('id', '');
param.append('type', props.segmentationType);
file.forEach(image => {
param.append('file', image);
});
let config: any = {
headers: {
'Content-Type': 'multipart/form-data',
'Accept': '*/*'
}
};
Https.axiosPost(Https.httpUrls.imageSegmentation, param, config)
.then((rv: any) => {
detailData.uploadList.unshift(...rv);
detailData.isShowMark = false;
})
.catch(rv => {
detailData.isShowMark = false;
});
});
// 触发文件选择对话框
input.click();
}
return{
...toRefs(detailData),
...toRefs(getDetailListData),
selectImgItem,
upload,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.uploadList{
height: 100%;
display: flex;
flex-direction: column;
> .uploadList_box{
width: 100%;
flex: 1;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
justify-content: space-between;
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
position: relative;
margin-bottom: 2rem;
> img{
cursor: pointer;
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
align-items: center;
justify-content: center;
.upload{
cursor: pointer;
width: calc(6rem * 1.2);
height: calc(6rem * 1.2);
border: calc(0.3rem * 1.2) solid #000;
border-radius: calc(1rem * 1.2);
display: flex;
align-items: center;
justify-content: center;
i{
font-size: 2rem;
display: flex;
color: #000;
}
}
}
}
}
</style>