3d添加印花 等
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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{
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user