push Develop

src/component/Detail/DesignDetailAlter.vue

@@ -1,24 +1,40 @@
 <template>
 	<div class="detail_modal_body_select">
-		<div v-show="(type_ == 1 || type_ == 2) && select == true">
+		<div v-show="(type_ == 1 || type_ == 2 || type_ == 4) && select == true">
 			<div class="detail_uploadLibrary">
 				<div class="switch_type_list">
-				<div
-					@click.stop="open(1)"
-					class="switch_type_item"
-					:class="[openClick == 1 ? 'select_swtich' : '']"
-				>
-					<span>{{ $t('DesignDetailAlter.Upload') }}</span>
+					<div
+						@click.stop="open(1)"
+						class="switch_type_item"
+						:class="[openClick == 1 ? 'select_swtich' : '',]"
+						:style="{cursor:type_==4?'no-drop':''}"
+					>
+						<span>{{ $t('DesignDetailAlter.Upload') }}</span>
+					</div>
+					<div
+						@click.stop="open(2)"
+						class="switch_type_item Guide_1_21"
+						:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
+					>
+						<span>{{ $t('DesignDetailAlter.Library') }}</span>
+					</div>
 				</div>
-				<div
-					@click.stop="open(2)"
-					class="switch_type_item Guide_1_21"
-					:class="[openClick == 2 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
-				>
-					<span>{{ $t('DesignDetailAlter.Library') }}</span>
-				</div>
-			</div>
 				<div v-show="openClick == 2" class="detail_Library">
+					<div class="select_block">
+						<a-select
+							v-model:value="designType"
+							:options="designTypeList"
+							@change="handleChange"
+							:fieldNames="{ label: 'name', value: 'value' }"
+						>
+							<template #suffixIcon
+								><span
+									class="icon iconfont icon-xiala"
+									style="color: #343579"
+								></span
+							></template>
+						</a-select>
+					</div>
 					<div class="content_search_block">
 						<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>
@@ -47,51 +63,7 @@
 									v-show="file?.status === 'done'"
 								>
 									<img :src="file?.url" class="upload_img" />
-									<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
-
-									<!-- <div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
-										<div class="select_img_type">
-											<div
-												class="select_category"
-												@click.stop="showFileCategory(file)"
-											>
-												{{ file.level2Type }}
-												<div
-												v-if="!body"
-													:class="[
-														'icon',
-														'iconfont',
-														'icon-xiala',
-														file.categoryShow
-															? 'icon_rotate'
-															: '',
-													]"
-												>
-												</div>
-											</div>
-											<div
-												v-if="!body"
-												class="category_list"
-												v-show="file.categoryShow"
-											>
-												<div
-													:class="[
-														'category_item',
-														file.level2Type == cate.value
-															? 'select_category_item'
-															: '',
-													]"
-													v-for="(
-														cate, index
-													) in disignTypeList"
-													:key="index"
-													@click.stop="selectFileCategory(file, cate)"
-												>
-													{{ cate.value }}
-												</div>
-											</div>
-										</div>
-									</div> -->
+									<sketchCategory v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
 									<div
 										class="delete_file_block"
 										@click.stop="deleteFile(index)"
@@ -138,7 +110,7 @@
                     <div class="content_img_item" v-for="(file) in clothesList" :key="file.id"  :class="{active:selectCode !== 'Moodboard'}">
                         <div class="content_img_item_block" :class="{active:file?.checked}">
                             <img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
-							<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="clothesList" :item="file" ></sketchCategory>
+							<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="designTypeList" :generateList="clothesList" :item="file" :isSpread="selectCode == 'DesignElements'" :isSetSketchCategory="true" @upTypeSucced='handleChange'></sketchCategory>
                         </div>
                     </div>
 					<div v-show="total > clothesList.length" class="material_content_list_loding" v-observe>
@@ -288,7 +260,7 @@ import { useStore } from "vuex";
 import { LoadingOutlined } from '@ant-design/icons-vue';
 import { message,Upload} from 'ant-design-vue';
 import { Sketch, Chrome} from '@ans1998/vue3-color'
-import {getUploadUrl,rgbToHsv} from '@/tool/util'
+import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
 import DesignDetailEnd from './DesignDetailEnd.vue';
 import { getCookie } from "@/tool/cookie";
 import { openGuide,driverObj__ } from "@/tool/guide";
@@ -321,6 +293,11 @@ export default defineComponent({
 		let apparelList = ref([])
 		let printList = ref([])
 		let selectCode = ref('Sketchboard')
+		let designTypeList = ref([])
+		let printCatecoryList = computed(()=>{
+			return store.state.UserHabit.printType
+		})
+		let designType = ref('')
 		//颜色
 		let selectColor = ref({
 			rgba:{},
@@ -331,6 +308,9 @@ export default defineComponent({
 		let sketchCatecoryList = computed(()=>{
 			return store.state.Workspace.workspacePosition
 		})
+		let designElementsType = computed(()=>{
+			return store.state.UserHabit.designElementsType;
+		})
 		let colorList = ref([{},{},{},{},{},{},{},{},{}])
 		let selectIndex = ref(0)
 		let gradient = ref({
@@ -359,6 +339,7 @@ export default defineComponent({
 		})
 		provide('colorList',colorList)
 		provide('selectIndex',selectIndex)
+		provide('designTypeList',designTypeList)
 		let {t} = useI18n()
         return{
             store,
@@ -375,6 +356,10 @@ export default defineComponent({
 			printList,
 			selectCode,
 
+			designTypeList,
+			printCatecoryList,
+			designType,
+
 			type_,
 			select,
 			selectColor,
@@ -383,6 +368,7 @@ export default defineComponent({
 			driver__,
 			body,
 			sketchCatecoryList,
+			designElementsType,
 			colorList,
 			selectIndex,
 			gradient,
@@ -595,12 +581,22 @@ export default defineComponent({
 				this.selectCode = 'Sketchboard'
 				this.upload.level1Type = 'Sketchboard'
 				this.uploadList = this.apparelList
+				this.designTypeList = this.sketchCatecoryList
+				this.designType = this.designTypeList[0].value
 			}else if (num == 2){
 				this.selectCode = 'Printboard'
 				this.upload.level1Type = 'Printboard'
 				this.uploadList = this.printList
+				this.designTypeList = this.printCatecoryList
+				this.designType = this.designTypeList[0].value
+			}else if (num == 4){
+				this.selectCode = 'DesignElements'
+				this.upload.level1Type = 'DesignElements'
+				this.designTypeList = this.designElementsType
+				this.designType = this.designTypeList[0]?.value
+				this.openClick = 2
 			}
-			if(num == 1 || num == 2){
+			if(num == 1 || num == 2 || num == 4){
 				this.clothesList = []
 				this.getLibraryList()
 			}
@@ -650,6 +646,7 @@ export default defineComponent({
 						(v) => v.status === "done"
 					);
 					this.uploadList = fileList
+					this.selectImgItem(this.uploadList[this.uploadList.length-1])
 					// this.store.commit("clearMoodTemplateId");
 					if(this.selectCode == 'Sketchboard'){
 						this.apparelList = this.uploadList
@@ -706,6 +703,7 @@ export default defineComponent({
 			// DesignDetailEnd.colorList = [{}]
 			DesignDetailEnd.sketchImg={}
 			this.terminate()
+			DesignDetailEnd.clearModal()
 		},
 		// this.getLibraryList('Moodboard')
 		// this.getLibraryList('Printboard')
@@ -721,39 +719,57 @@ export default defineComponent({
             });
 		},
 		selectImgItem(imgData){
+			let DesignDetailEnd = this.$refs.DesignDetailEnd
+			imgData.categoryValue = imgData.level2TypeEnum.value
+			imgData.category = imgData.level2TypeEnum.name
 			if(this.selectCode == 'Sketchboard'){
 				// this.current.id_ = imgData.id
 				// this.current.path = imgData.url
-				let DesignDetailEnd = this.$refs.DesignDetailEnd
 				DesignDetailEnd.setSketchImg(imgData)
 				// DesignDetailEnd.sketchImg.id_ = imgData.id
 				// DesignDetailEnd.sketchImg.path = imgData.url
-			}else{
-				this.current.printObject.path = imgData?.url
-				this.current.printObject.id = imgData?.id
-				this.current.printObject.designType = imgData?.designType
-				this.current.printObject.minIOPath = imgData.minIOPath
-				this.current.printObject.prints = [{
-					minIOPath:imgData.minIOPath,
-					path:imgData?.url,
-					designType: imgData?.designType
-				}]
-				if(this.driver__.driver){
-					nextTick().then(()=>{
-						driverObj__.moveNext();
-					})
-				}
+			}else if(this.selectCode == 'Printboard'){
+				// this.current.printObject.path = imgData?.url
+				// this.current.printObject.id = imgData?.id
+				// this.current.printObject.designType = imgData?.designType
+				// this.current.printObject.minIOPath = imgData.minIOPath
+				// this.current.printObject.prints = [{
+				// 	minIOPath:imgData.minIOPath,
+				// 	path:imgData?.url,
+				// 	designType: imgData?.designType
+				// }]
+				// if(this.driver__.driver){
+				// 	nextTick().then(()=>{
+				// 		driverObj__.moveNext();
+				// 	})
+				// }
+				imgData.path = imgData.url
+				DesignDetailEnd.printsList.push(imgData)
 
 				// console.log(this.current.printObject,imgData); 
+			}else if(this.selectCode == 'DesignElements'){
+				imgData.path = imgData.url
+				DesignDetailEnd.elementsList.push(imgData)
 			}
         },
+		handleChange(){
+			this.currentPage = 1
+			this.clothesList = []
+            this.getLibraryList('')
+		},
 		//请求我的印花&&模型
 		getLibraryList(){
-			let type = this.body?this.current.type:''
+			let level2Type = ''
+			if(this.selectCode == 'Sketchboard' || this.selectCode == 'Printboard' || this.selectCode == 'DesignElements'){
+				level2Type = this.designType
+			}
+			let type = this.body?this.current.type:level2Type
 			let workspace = this.store.state.Workspace.workspace
             let data = {
+                // level1Type:'Printboard',
                 level1Type:this.selectCode,
-                level2Type:this.selectCode == 'Sketchboard'?type:'',
+                // level2Type:'Pattern',
+                level2Type:type,
 				modelSex:workspace?.sex,
                 page:this.currentPage,
                 pictureName:this.searchPictureName,
@@ -783,6 +799,7 @@ export default defineComponent({
 
 		//衣服
 		open(num) {
+			if(num == 1 && this.type_ ==4)return
             this.openClick = num;
 			if(num ==2 ){
 				this.getLibraryList()
@@ -805,7 +822,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('DesignDetailAlter.jsContent4'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 3;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('DesignDetailAlter.jsContent5'));
             }
@@ -905,7 +922,7 @@ export default defineComponent({
 			let hex = this.rgbaToHex(rgba)
             this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
 			// isMoible()  true为移动端
-			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
+			let gradientWidth = document.querySelector('.detail_modal_body_select .color_setting_operate_bg').clientWidth
 			let position = {
 				x:moible?event.touches[0].screenX:event?.x,
 				left:event.target.style.left?event.target.style.left.split('%')[0]:0
@@ -1098,6 +1115,7 @@ export default defineComponent({
 						this.selectColorList = selectColorList
 						// this.getHsvColor(selectColorList)
 						this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
+						img.remove()
 					};
                     
 				
@@ -1136,6 +1154,19 @@ export default defineComponent({
 	
 	}
 	.detail_Library{
+		.select_block{
+			border: calc(0.1rem* 1.2) solid #F1F1F1;
+			// margin-right: calc(2.3rem*1.2);
+			height: 4rem;
+			width: calc(20rem*1.2);
+			margin-bottom: 1rem;
+			.ant-select{
+				width: 90%;
+			}
+			.ant-select:not(.ant-select-customize-input) .ant-select-selector{
+				width: 100%;
+			}
+		}
 		.content_search_block{
                 display: flex;
 				margin-bottom: calc(1rem*1.2);
@@ -1150,7 +1181,7 @@ export default defineComponent({
                     // font-size: 1.6rem*1.2);
 					font-size: calc(1.2rem*1.2);
                     font-weight: 400;
-					height: calc(3rem*1.2);
+					height: 4rem;
 
                     &::placeholder {
                         color: #C2C2C2;