修复bug
This commit is contained in:
X1627315083
206
src/component/DetailCopy/designDetail.vue
Normal file
206
src/component/DetailCopy/designDetail.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div ref="designDetailModal" class="designDetailModal">
|
||||
<!-- designDetailShow -->
|
||||
<!-- :class="[driver__.driver?'hideEvents':'']" -->
|
||||
<a-modal class="Guide_1_18 generalModel fullScreen"
|
||||
v-model:visible="designDetailShow"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.designDetailModal"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:maskClosable="false"
|
||||
:mask="false"
|
||||
:centered="true"
|
||||
:keyboard="false"
|
||||
:closable="false"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="nav">
|
||||
<div class="back_home">
|
||||
<div class="gallery_btn" @click="closeModal()">
|
||||
<i class="fi fi-rs-house-chimney"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav_list">
|
||||
<div class="nav_item active">
|
||||
<img src="@/assets/images/icon/details_sketch.png" alt="">
|
||||
<div class="detailText">Apparel</div>
|
||||
</div>
|
||||
<div class="nav_item">
|
||||
<img src="@/assets/images/icon/details_print.png" alt="">
|
||||
<div class="detailText">Print</div>
|
||||
</div>
|
||||
<div class="nav_item">
|
||||
<img src="@/assets/images/icon/details_color.png" alt="">
|
||||
<div class="detailText">Color</div>
|
||||
</div>
|
||||
<div class="nav_item">
|
||||
<img src="@/assets/images/icon/details_elements.png" alt="">
|
||||
<div class="detailText">Elements</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<sketchLeft></sketchLeft>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="gallery_btn submit">Submit</div>
|
||||
</div>
|
||||
|
||||
</a-modal>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import sketchLeft from './sketchLeft.vue'
|
||||
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
|
||||
import { useStore } from "vuex";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import addDetails from '@/component/Detail/addDetails.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketchLeft,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
|
||||
let designItemDetail :any = computed(()=>{
|
||||
return store.state.DesignDetailModule.designItemDetail
|
||||
})
|
||||
const userDetail = computed(()=>{
|
||||
return store.state.UserHabit.userDetail
|
||||
})
|
||||
const detailData = reactive({
|
||||
designDetailShow:true,
|
||||
loadingShow:false,
|
||||
})
|
||||
const closeModal = ()=>{
|
||||
detailData.designDetailShow = false
|
||||
}
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
closeModal,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
let beforeunload = () => {
|
||||
window.removeEventListener('beforeunload',beforeunload)
|
||||
}
|
||||
window.addEventListener('beforeunload',beforeunload)
|
||||
// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
|
||||
// this.loadingShow = true
|
||||
// Https.axiosGet(url).then(
|
||||
// async (rv: any) => {
|
||||
// rv.clothes.forEach((item:any)=>{
|
||||
// let a
|
||||
// if(item.layersObject[0].imageCategory.indexOf("back") == -1){
|
||||
// a = item.layersObject[0]
|
||||
// item.layersObject[0] = item.layersObject[1]
|
||||
// item.layersObject[1] = a
|
||||
// }
|
||||
// if(item.printObject.prints == null){
|
||||
// item.printObject.prints = [{}]
|
||||
// }
|
||||
// })
|
||||
// this.store.commit('setDesignItemDetail',rv)
|
||||
// if(rv.others[0].printObject.path == null){
|
||||
// this.body = false
|
||||
// }else{
|
||||
// this.body = true
|
||||
// }
|
||||
// this.setImgSize()
|
||||
// this.generateHighDesignImg = rv.highDesignUrl
|
||||
// this.designShowPrview = 1
|
||||
// this.designDetailShow = true
|
||||
// this.loadingShow = false
|
||||
// }
|
||||
// ).catch(rv=>{
|
||||
// this.loadingShow = false
|
||||
// })
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.detailText){
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.designDetailModal{
|
||||
position: relative;
|
||||
top: -100%;
|
||||
height: 100%;
|
||||
:deep(.ant-modal-wrap){
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
> .item{
|
||||
height: 100%;
|
||||
}
|
||||
> .nav{
|
||||
margin-right: 5rem;
|
||||
> .back_home{
|
||||
width: 9rem;
|
||||
text-align: center;
|
||||
> .gallery_btn{
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
> .nav_list{
|
||||
margin-top: 2.7rem;
|
||||
height: 38rem;
|
||||
width: 9rem;
|
||||
background: #f4f4f4;
|
||||
border-radius: 1.4rem;
|
||||
padding: 1.4rem 0;
|
||||
> .nav_item{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: calc((38rem - 1.4rem * 2) / 4);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
> img{
|
||||
width: 4rem;
|
||||
height: 3.6rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.active{
|
||||
background: #bdbdbd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .submit{
|
||||
margin-left: auto;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
0
src/component/DetailCopy/editSketchPosition.vue
Normal file
0
src/component/DetailCopy/editSketchPosition.vue
Normal file
218
src/component/DetailCopy/libraryList.vue
Normal file
218
src/component/DetailCopy/libraryList.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="libraryList">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<a-select
|
||||
v-model:value="designType"
|
||||
:options="designTypeList"
|
||||
@change="handleChange"
|
||||
style="width:100%"
|
||||
size="large"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="generalModel_state_item">
|
||||
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
<!-- clothesPrint -->
|
||||
</div>
|
||||
<div class="libraryList_box">
|
||||
<div class="content_img_item" v-for="(file) in libraryList" :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)"/>
|
||||
<sketchCategory :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
|
||||
<img src="@/assets/images/homePage/loading.gif" alt="">
|
||||
</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";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketchCategory
|
||||
},
|
||||
props:{
|
||||
catecoryList:{
|
||||
type:Object,
|
||||
default:()=>[] as any,
|
||||
required:true
|
||||
}
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
isShowLoading:false,//懒加载，加载中
|
||||
libraryList:[],
|
||||
designTypeList:[] as any,
|
||||
designType:'',
|
||||
searchPictureName:'',
|
||||
})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const init = ()=>{
|
||||
detailData.designTypeList = props.catecoryList
|
||||
detailData.designType = detailData.designTypeList[0].value
|
||||
getLibraryList()
|
||||
}
|
||||
const selectImgItem = ()=>{
|
||||
|
||||
}
|
||||
const getLibraryList = ()=>{
|
||||
detailData.isShowLoading = true
|
||||
let level2Type = ''
|
||||
let workspace = store.state.Workspace.workspace
|
||||
let data = {
|
||||
level1Type:'Sketchboard',
|
||||
// level2Type:'Pattern',
|
||||
level2Type:detailData.designType,
|
||||
modelSex:workspace?.sex,
|
||||
page:getDetailListData.currentPage,
|
||||
pictureName:detailData.searchPictureName,
|
||||
size:getDetailListData.pageSize+detailData.libraryList.length,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||
(rv) => {
|
||||
rv.content.forEach((vItem:any)=>{
|
||||
props.catecoryList.forEach((item:any) => {
|
||||
if(item.value == vItem.level2Type){
|
||||
vItem.categoryValue = item.value
|
||||
vItem.category = item.name
|
||||
}
|
||||
});
|
||||
})
|
||||
detailData.libraryList = rv.content
|
||||
detailData.isShowLoading = false
|
||||
getDetailListData.total = rv.total
|
||||
}
|
||||
).catch((res)=>{
|
||||
detailData.isShowLoading = false
|
||||
});
|
||||
}
|
||||
const handleChange = ()=>{
|
||||
getDetailListData.currentPage = 1
|
||||
detailData.libraryList = []
|
||||
getLibraryList()
|
||||
}
|
||||
onMounted(()=>{
|
||||
// getLibraryList()
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
init,
|
||||
selectImgItem,
|
||||
getLibraryList,
|
||||
handleChange,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
observe:{
|
||||
mounted (el,binding) {
|
||||
// console.log(binding.instance);
|
||||
let callback = (entries:any, observer:any)=> {
|
||||
entries.forEach((entry:any) => {
|
||||
if (entry.isIntersecting && !this_.isShowLoading) {
|
||||
this_.getLibraryList()
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
const ob = new IntersectionObserver(callback,{
|
||||
root:null,
|
||||
threshold:[.5]
|
||||
})
|
||||
ob.observe(el)
|
||||
// this.currentPage = +=1
|
||||
// this.pageSize = 12
|
||||
// currentPage
|
||||
let this_:any = binding.instance
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.libraryList{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .generalModel_state{
|
||||
width: 100%;
|
||||
> .generalModel_state_item{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
> .search_icon_block{
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
width: calc(6rem - 4px);
|
||||
height: calc(6rem - 4px);
|
||||
color: #fff;
|
||||
background: #000;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .generalModel_state_item:last-child{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
> .libraryList_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{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .material_content_list_loding{
|
||||
width: 100%;
|
||||
height: calc((34rem - 2rem) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
164
src/component/DetailCopy/sketchLeft.vue
Normal file
164
src/component/DetailCopy/sketchLeft.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="sketchLeft">
|
||||
<div class="detailText">Current Print</div>
|
||||
<div class="select_sketch">
|
||||
<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
|
||||
</div>
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click.stop="openUpload()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
|
||||
>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="openLibrary()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
|
||||
>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sketch_content_list">
|
||||
<div class="content_item" v-show="selectTitle == 'upload'">
|
||||
<uploadList :catecoryList="sketchCatecoryList"></uploadList>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'library'">
|
||||
<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import libraryList from './libraryList.vue'
|
||||
import uploadList from './uploadList.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
libraryList,
|
||||
uploadList,
|
||||
sketchCategory,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
selectTitle:'upload',
|
||||
loadingShow:false,
|
||||
isShowLoading:false,//懒加载，加载中
|
||||
sketchCatecoryList:computed(()=>{
|
||||
return store.state.Workspace.workspacePosition
|
||||
})
|
||||
})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const getDetailListDom = reactive({
|
||||
libraryList:null as any,
|
||||
})
|
||||
const openUpload = ()=>{
|
||||
detailData.selectTitle = 'upload'
|
||||
}
|
||||
const openLibrary = ()=>{
|
||||
detailData.selectTitle = 'library'
|
||||
getDetailListDom.libraryList.init()
|
||||
}
|
||||
const selectImgItem = ()=>{
|
||||
|
||||
}
|
||||
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
openUpload,
|
||||
openLibrary,
|
||||
selectImgItem,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sketchLeft{
|
||||
width: 34rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .detailText{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .select_sketch{
|
||||
width: 100%;
|
||||
height: 23.5rem;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
border-radius: .5rem;
|
||||
// border: 1px dashed #202020;
|
||||
border: 1px dashed transparent;
|
||||
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
|
||||
margin-bottom: 3rem;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .switch_type_list{
|
||||
display: flex;
|
||||
margin-bottom: 2.5rem;
|
||||
> .switch_type_item:nth-child(1){
|
||||
margin-right: 6.5rem;
|
||||
}
|
||||
> .switch_type_item{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.4rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -.5rem;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
> .select_swtich {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
> .select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
> .sketch_content_list{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content_item{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
209
src/component/DetailCopy/uploadList.vue
Normal file
209
src/component/DetailCopy/uploadList.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
|
||||
<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)"/>
|
||||
<sketchCategory :disignTypeList="catecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item upload_component">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="uploadList"
|
||||
:before-upload="beforeUpload"
|
||||
:maxCount="8"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => upFileUploadChange(file)"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
v-show="uploadList.length != 8"
|
||||
>
|
||||
<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>
|
||||
</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
|
||||
}
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n();
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
isShowLoading:false,//懒加载，加载中
|
||||
uploadList:[],
|
||||
upload:{
|
||||
isPin: 0,
|
||||
level1Type: 'Sketchboard',
|
||||
gender:store.state.Workspace.workspace.sex,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:getCookie("token"),
|
||||
uploadUrl:getUploadUrl(),
|
||||
})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const selectImgItem = ()=>{
|
||||
|
||||
}
|
||||
const upFileUploadChange = (data:any)=>{
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
if(res.errCode == 0 && props.catecoryList[0]){
|
||||
file.id = res.data.id;
|
||||
file.url = res.data.url;
|
||||
file.resData = res.data;
|
||||
let type
|
||||
if(res.data.level2Type){
|
||||
props.catecoryList.forEach((item:any) => {
|
||||
if(item.value == res.data.level2Type){
|
||||
file.categoryValue = item?.value;
|
||||
type = item.value
|
||||
file.category = item?.name;
|
||||
}
|
||||
});
|
||||
}else{
|
||||
file.categoryValue = props.catecoryList[0].value;
|
||||
type = props.catecoryList[0].value
|
||||
file.category = props.catecoryList[0].name;
|
||||
}
|
||||
file.designType = res.data.designType
|
||||
file.level2Type = type;
|
||||
file.minIOPath = file.resData.minIOPath
|
||||
let fileList = detailData.uploadList.filter(
|
||||
(v) => v.status === "done"
|
||||
);
|
||||
detailData.uploadList = fileList
|
||||
// this.selectImgItem(detailData.uploadList[detailData.uploadList.length-1])
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
} else if (file.status === "error") {
|
||||
bor = false
|
||||
}
|
||||
if(!bor){
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
let index = -1;
|
||||
detailData.uploadList.forEach((ele, index1) => {
|
||||
if (file.uid === ele.uid) {
|
||||
index = index1;
|
||||
}
|
||||
});
|
||||
if (index > -1) {
|
||||
detailData.uploadList.splice(index, 1);
|
||||
}
|
||||
message.warning(res.errMsg);
|
||||
}
|
||||
|
||||
}
|
||||
const beforeUpload = (file:any)=>{
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.info(t('DesignDetailAlter.jsContent4'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(t('DesignDetailAlter.jsContent5'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
|
||||
selectImgItem,
|
||||
beforeUpload,
|
||||
upFileUploadChange,
|
||||
}
|
||||
},
|
||||
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{
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user