页面调整

src/component/home/tools/toProduct/index.vue

@@ -6,13 +6,13 @@
 				<div class="modal_title_text_intro"></div>
 			</div> -->
 			<div class="productImg_content_bottom">
-				<div class="productImg_left" :class="{active:button.left}">
+				<div class="productImg_left generalModel_state" :class="{active:button.left}">
 					<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
 						<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
 					</div> -->
-					<div class="selectImg">
+					<div class="selectImg" style="margin-bottom:2rem">
 						<div class="head">
-							<div class="text">{{$t('ProductImg.SelectCollection')}}</div>
+							<div class="text">{{source == 'design'?$t('ProductImg.DesignSelectCollection'):productimgMenu.value == 'ToProductImage'?$t('ProductImg.SelectCollection'):$t('ProductImg.SelectCollectionRelight')}}</div>
 						</div>
 						<div class="imgBox" v-mousewheel>
 							<!-- <div class="item" :class="[item?.isChecked?'active':'']" v-for="item in selectList[productimgMenu.value]" @click="setGenerate(item)">
@@ -28,7 +28,7 @@
 									<div :class="{active:item.isChecked}">
 										<i class="fi fi-br-check"></i>
 									</div>
-									<div @click.stop="setUploadDelete(item,index)">
+									<div @click.stop="setUploadDelete(item,index)" v-if="source != 'design'">
 										<i class="fi fi-rr-trash icon_delete"></i>
 									</div>
 								</div>
@@ -61,30 +61,31 @@
 							</div>
 						</div>
 					</div>
-					<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
+					<div v-show="productimgMenu.value == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.Similarity')}}</span>
 					</div>
-					<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_similarity">
+					<div v-show="productimgMenu.value == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_similarity">
 						<a-slider class="system_silder"
 							v-model:value="similarity"
 							@afterChange="setSimilarity"
 							:tooltipVisible="false"
 							:step="5"
+							:max="70"
 						>
 						</a-slider>
-						<input type="number" readonly v-model="similarity">
+						<input style="margin-left: 2rem;"  type="number" readonly v-model="similarity">
 					</div>
 					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.SelectionFunction')}}</span>
 					</div>
-					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
-						<a-select  style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
+					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction generalModel_state_item">
+						<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
 					</div>
 					<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.RelightDirection')}}</span>
 					</div>
-					<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
-						<a-select  style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
+					<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction generalModel_state_item">
+						<a-select size="large" style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
 					</div>
 					<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.Highlight')}}</span>
@@ -98,7 +99,7 @@
 							:step="0.1"
 						>
 						</a-slider>
-						<input type="number" readonly v-model="brightenValue">
+						<input style="margin-left: 2rem;" type="number" readonly v-model="brightenValue">
 					</div>
 					<div class="input_border productImg_content_item_generate">
 						<div class="input_box">
@@ -111,6 +112,7 @@
 								/> -->
 								<textarea 
 									class="textarea"  
+									ref="textarea"
 									@input="ifMaximumLength" 
 									:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
 									@keydown.enter.prevent="getPrductimg()"
@@ -119,6 +121,9 @@
 							</div>
 						</div>
 					</div>
+					<div class="selectText" v-show="productimgMenu.value == 'ToProductImage' && speedData.value == 'flux'">
+						<div :title="$t('poseTransfer.hint')" @click="()=>{searchName[productimgMenu.value] = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
+					</div>
 					<div class="productImg_content_item_generate_btn input_border">
 						<div class="generage_btn_box ">
 							<div v-show="!isProductimg" class="generage_btn started_btn">
@@ -143,7 +148,7 @@
 					<div class="productImg_right_item_box generalScroll">
 						<div class="content_header_left">
 							<i class="fi fi-rs-comments"></i><span class="content_header_des">
-								{{ $t('ProductImg.SelectedDesign') }}
+								{{source == 'design'?$t('ProductImg.DesignSelectedDesign'):$t('ProductImg.SelectedDesign')}}
 							</span>
 						</div>
 						<div class="content">
@@ -163,11 +168,11 @@
 					<div class="productImg_right_item_box right generalScroll">
 						<div class="content_header_left">
 							<i class="fi fi-rs-comments"></i><span class="content_header_des">
-								{{ $t('ProductImg.productImageDrafts') }}
+								{{source == 'design'?$t('ProductImg.DesignproductImageDrafts'):$t('ProductImg.productImageDrafts')}}
 							</span>
 						</div>
 						<div class="content">
-							<generalDrag ref="generalDragRight" :type="productimgMenu.value" :isCopy="!isDesignPage" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
+							<generalDrag ref="generalDragRight" :type="productimgMenu.value" :isCopy="!isDesignPage" @setBtn="generateSetBtn" :list="generateList[productimgMenu.value]" :showMark="isShowMark"></generalDrag>
 						</div>
 					</div>
 				</div>
@@ -217,6 +222,10 @@ export default defineComponent({
 				return {}
 			}
 		},
+		source:{
+			type:String,
+			default:'',
+		},
 		productimgMenu:{
 			type:Object,
 			default:()=>{
@@ -252,11 +261,14 @@ export default defineComponent({
 			remProductimg:false,//是否出现取消按钮
 			isProductimg:false,//开始生成
 			selectProductimgList:[],
-			generateList:[],
+			generateList:{
+				ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList.list),
+				Relight:computed(()=>store.state.HomeStoreModule.relightList.list),
+			},
 			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 			likeList:{
-				ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList),
-				Relight:computed(()=>store.state.HomeStoreModule.relightList),
+				ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList.likedList),
+				Relight:computed(()=>store.state.HomeStoreModule.relightList.likedList),
 			} as any,
 			similarity:30,
 			brightenValue:1,
@@ -265,6 +277,7 @@ export default defineComponent({
 				left:false,
 				right:false,
 			},
+			textarea:null as any,
 		})
 		let speed = reactive({
 			speedList:[
@@ -288,17 +301,14 @@ export default defineComponent({
 				value:'flux',
 			},
 		})
-		//watch立即执行一次
-		watch(()=>productImgData.selectObject.id,(newVal,oldVal)=>{
-			createProbject.generateList = []
-		},{immediate: true })
-		watch(() => route.query.id,
-			(query:any, oldQuery:any) => {
-				if(oldQuery && query != oldQuery){
-					productImgData.generateList = []
-				}
-			},
-		);
+	
+		// watch(() => route.query.id,
+		// 	(query:any, oldQuery:any) => {
+		// 		if(oldQuery && query != oldQuery){
+		// 			productImgData.generateList = []
+		// 		}
+		// 	},
+		// );
 		watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
 			if(props.isDesignPage)return
 			productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
@@ -360,11 +370,11 @@ export default defineComponent({
 			let arr = store.state.UploadFilesModule.cloudList
 			if(props.productimgMenu.value == 'ToProductImage'){
 				let list = JSON.parse(JSON.stringify(arr.toProduct)) || []
-				productImgData.generateList.unshift(...list)
+				productImgData.generateList[props.productimgMenu.value].unshift(...list)
 				store.commit('clearCloudList','ToProductImage')
 			}else if(props.productimgMenu.value ==  'Relight'){
 				let list = JSON.parse(JSON.stringify(arr.relight)) || []
-				productImgData.generateList.unshift(...list)
+				productImgData.generateList[props.productimgMenu.value].unshift(...list)
 				store.commit('clearCloudList','relight')
 			}
 
@@ -383,7 +393,7 @@ export default defineComponent({
 						item.imgUrl = item.url
 					});
 					let value = {
-							list: rv,
+							likedList: rv,
 							str:'add',
 							index:-1,
 						}
@@ -466,6 +476,7 @@ export default defineComponent({
 			})
 		}
 		let likeFile = (item:any,str:any,index:any) =>{
+			console.log(item)
 			let url
 			let data = {
 				toProductImageResultId:[item.id],
@@ -480,8 +491,10 @@ export default defineComponent({
 			Https.axiosPost(url, data).then(
 				(rv) => {
 					if(str == 'like'){
+						if(rv?.sort)item.oldSort = rv.sort
+						if(rv?.id)item.userLikeSortId = rv.id
 						let value = {
-							list:[item],
+							likedList:[item],
 							str:'add',
 							index:-1,
 						}
@@ -490,14 +503,14 @@ export default defineComponent({
 						}else{
 							store.commit("setRelightList", value);
 						}
-						productImgData.generateList.splice(index,1)
+						productImgData.generateList[props.productimgMenu.value].splice(index,1)
 					}else{
 						let value = {
-							list:[item],
+							likedList:[item],
 							str:'splice',
 							index:index,
 						}
-						productImgData.generateList.push(item)
+						productImgData.generateList[props.productimgMenu.value].push(item)
 						if(props.productimgMenu.value == 'ToProductImage'){
 							store.commit("setToProductImage", value);
 						}else{
@@ -524,17 +537,20 @@ export default defineComponent({
 				"taskId": "",
 				"toProductImageRecordId": 0,
 				"url": "",
+				parentId:null,
 			}
 			if(productImgData.fileList[props.productimgMenu.value]){
 				productImgData.fileList[props.productimgMenu.value].forEach((item:any)=>{
+					console.log(item)
 					if(item.isChecked){
 						if(item.resultType == 'Design'){
 							obj.elementId = item.designOutfitId
 							obj.elementType = 'DesignOutfit'
 						}else{
 							obj.elementId = item.id
-							obj.elementType = item.type || 'ProductElement'
+							obj.elementType = item.resultType || 'ProductElement'
 						}
+						obj.parentId = item?.parentId || item?.userLikeSortId,
 						selectArr.push(JSON.parse(JSON.stringify(obj)))
 					}
 				})
@@ -553,6 +569,8 @@ export default defineComponent({
 				direction:RelightDirection.value,
 				brightenValue:productImgData.brightenValue,
 				imageStrength:(100 - imageStrength)/100,
+				
+				isDefaultLike:false,//表示是否生成就like
 			}
 			productImgData.isProductimg = true
 			// remPrductimgTime = setTimeout(()=>{
@@ -571,7 +589,7 @@ export default defineComponent({
 					rv.forEach((item:any)=>{
 					  arr.push(item.taskId)  
 					})
-					productImgData.generateList.unshift(...rv)
+					productImgData.generateList[props.productimgMenu.value].unshift(...rv)
 					setPrductimg(arr)
                 }
             ).catch(res=>{
@@ -621,17 +639,14 @@ export default defineComponent({
 							rv.forEach((element:any) => {
 								if(element.status == 'Success'){
 									element.imgUrl = element.url
-									// if(!productImgData.generateList[props.productimgMenu.value]){
-									// 	productImgData.generateList[props.productimgMenu.value] = []										
-									// }
-									let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
-									productImgData.generateList[index] = element
+									let index = productImgData.generateList[props.productimgMenu.value].findIndex((obj:any) => obj.taskId === element.taskId);
+									productImgData.generateList[props.productimgMenu.value][index] = element
 									// productImgData.generateList[props.productimgMenu.value].unshift(element)
 									data = data.filter((item:any) => item !== element.taskId);
 								}else if(element.status == 'Fail'){
 									message.info(t('ProductImg.jsContent3'))
-									let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
-									productImgData.generateList.splice(index,1)
+									let index = productImgData.generateList[props.productimgMenu.value].findIndex((obj:any) => obj.taskId === element.taskId);
+									productImgData.generateList[props.productimgMenu.value].splice(index,1)
 									data = data.filter((item:any) => item !== element.taskId);
 								}
 							});
@@ -648,7 +663,7 @@ export default defineComponent({
 						}
 					}
 				).catch(res=>{
-					productImgData.generateList.filter((item:any)=>item.status == 'Success')
+					productImgData.generateList[props.productimgMenu.value].filter((item:any)=>item.status == 'Success')
 					clearInterval(prductimgTime)
 					clearInterval(remPrductimgTime)
 					productImgData.isProductimg = false
@@ -671,10 +686,10 @@ export default defineComponent({
 				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
 					(rv) => {
 						generateProceedList = []
-						productImgData.generateList = productImgData.generateList.filter((item:any)=>item.status == 'Success')
+						productImgData.generateList[props.productimgMenu.value] = productImgData.generateList[props.productimgMenu.value].filter((item:any)=>item.status == 'Success')
 					}
 				).catch(res=>{
-					productImgData.generateList = productImgData.generateList.filter((item:any)=>item.status == 'Success')
+					productImgData.generateList[props.productimgMenu.value] = productImgData.generateList[props.productimgMenu.value].filter((item:any)=>item.status == 'Success')
 				});
 			}
 		}
@@ -747,13 +762,24 @@ export default defineComponent({
 		}
 		const generateSetBtn = (id:any,str:string)=>{
 			if(str == 'delete'){
-				productImgData.generateList = productImgData.generateList.filter((v:any) => v.id != id);
+				let type = 'ToProductImage'
+				if(props.productimgMenu.value == 'Relight')type = 'Relight'
+				let value = {
+					type,
+					id,
+					projectId:productImgData.selectObject.id
+				}
+				Https.axiosGet(Https.httpUrls.historyDeleteResult,{params:value}).then(()=>{
+					let index = productImgData.generateList[props.productimgMenu.value].findIndex((v:any) => v.id == id)
+					productImgData.generateList[props.productimgMenu.value].splice(index,1)
+				})
+				// productImgData.generateList[props.productimgMenu.value] = productImgData.generateList[props.productimgMenu.value].filter((v:any) => v.id != id);
 			}else{
-				productImgData.generateList.forEach((item:any,index:number)=>{
+				productImgData.generateList[props.productimgMenu.value].forEach((item:any,index:number)=>{
 					if(item.id == id){
 						let selectStr = ''
 						str == 'zoom'?selectStr = 'zoom':selectStr ='like'
-						setLikeZoom(item,str,index,productImgData.generateList)
+						setLikeZoom(item,str,index,productImgData.generateList[props.productimgMenu.value])
 					}
 				})
 			}
@@ -778,8 +804,9 @@ export default defineComponent({
 				setItemPosition()
 			})
 		}
-		const ifMaximumLength = (event:any)=>{
-			let textarea = event.target as HTMLTextAreaElement;
+		const ifMaximumLength = async ()=>{
+			await nextTick()
+			let textarea = productImgData.textarea;
 			const scrollTop = textarea.scrollTop;
 			// 2. 计算单行高度
 			const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
@@ -803,6 +830,28 @@ export default defineComponent({
 			speed.speedState = false
 			document.removeEventListener('click',openSpeed)
 		}
+			//watch立即执行一次
+		watch(()=>productImgData.selectObject.id,(newVal,oldVal)=>{
+			createProbject.generateList = []
+			let list = []
+			if(props?.productimgMenu.value == "ToProductImage"){
+				list = store.state.HomeStoreModule.toProductImageList.list || []
+			}else{
+				list = store.state.HomeStoreModule.relightList.list || []
+			}
+			let taskIdList = list.filter((item:any)=>!item?.url)
+			if(taskIdList.length > 0){
+				let arr:any = []
+				taskIdList.forEach((item:any)=>{
+					arr.push(item.taskId)  
+				})
+				productImgData.isProductimg = true
+				productImgData.remProductimg = true
+				productImgData.isShowMark = false
+				console.log(taskIdList)
+				setPrductimg(arr)
+			}
+		},{immediate: true })
         return {
 			upload,
 			driver__,
@@ -1103,6 +1152,8 @@ export default defineComponent({
     flex-direction: column;
 	padding-right: 3.8rem;
 	width: 39rem;
+	align-items: stretch;
+	flex-wrap: nowrap;
 	&.active{
 			width: 0;
 			padding: 0;
@@ -1154,19 +1205,29 @@ export default defineComponent({
 	}
 	.productImg_content_item_Direction{
 		padding-bottom: 1rem;
-		:deep(.ant-select){
+		margin-right: 0;
+		margin-bottom: 1rem;
+	}
+	.selectText{
+		margin-bottom: 2rem;
+		display: flex;
+		width: 100%;
+		> div{
+			background: #efeff1;
+			width: 100%;
 			font-size: 1.6rem;
-			.ant-select-selector::after{
-				line-height: 1;
+			margin-right: 1.2rem;
+			border-radius: 1.6rem;
+			cursor: pointer;
+			padding: 1.2rem;
+			white-space: nowrap; /* 文本不换行 */
+			overflow: hidden; /* 溢出部分隐藏 */
+			text-overflow: ellipsis; /* 显示省略号 */
+			&:hover{
+				background: #f5f5f5;
 			}
-			.ant-select-selector .ant-select-selection-item{
-				line-height: 1;
-			}
-			.ant-select-selector{
-				height: auto;
-				padding: 1rem 1rem;
-				box-shadow: none !important;
-				border: calc(0.1rem* 1.2) solid #F1F1F1;
+			&:first-child{
+				margin-right: 0;
 			}
 		}
 	}
@@ -1265,6 +1326,6 @@ export default defineComponent({
 
 }
 .designPage{
-	padding-left: 4rem;
+	margin-right: 4rem;
 }
 </style>