合并画布代码

src/component/home/batchGeneration/createCloud.vue

@@ -24,7 +24,7 @@
 			</div>
 		</div>
 		<div class="modal_title_text">
-			<div>Create Cloud Generation Tasks</div>
+			<div>Create Batch Generation Tasks</div>
 		</div>
 		<div class="allUserPoeration_center admin_page">
 			<div class="admin_state_item">
@@ -52,12 +52,24 @@
 					placeholder="Please select"
 					:options="objectList"
 					@search="getHistoryProjectList"
+					@change="changeProject"
 				>
 				<template #option="{ value: val, label, icon,updateTime }">
 					<span :title="updateTime.replace('T', ' ')">{{ label }}</span>
 				</template>
 				</a-select>
 			</div>
+			<div class="admin_state_item">
+				<span>Name <span>*</span></span>
+				<input
+					v-model="porjectName"
+					:placeholder="placeholder"
+					@focus="focus"
+					@blur="blur"
+					type="text"
+					style="width: 200px"
+				/>
+			</div>
 			<div class="admin_state_item" v-show="buildType">
 				<span>Quantity <span>*</span></span>
 				<input
@@ -72,14 +84,17 @@
 			 <div v-show="buildType == 'TO_PRODUCT_IMAGE'" class="admin_state_item ">
 				<span>{{$t('ProductImg.Similarity')}}</span>
 				<div class="sliderAndImput" style="width: 200px">
-					<a-slider class="system_silder"
+					<!-- <a-slider class="system_silder"
 						v-model:value="similarity"
 						range
 						:step="5"
-						
 					>
-					</a-slider>
-					<!-- <input type="number" readonly v-model="similarity"> -->
+					</a-slider> -->
+					<div style="display: flex;">
+						<input type="number" readonly v-model="similarity[0]">
+						<div style="margin: 0 1rem;">-</div>
+						<input type="number" readonly v-model="similarity[1]">
+					</div>
 				</div>
 			</div>
 			 <div v-show="buildType == 'RELIGHT'" class="admin_state_item ">
@@ -117,12 +132,18 @@
 				</div>
 			</div> -->
 			<div class="productImg_content_item_imgBox generalScroll upload_item" v-if="buildType && buildType != 'SERIES_DESIGN' && buildType != 'SINGLE_DESIGN'" v-mousewheel>
+				<div class="content_item_imgBox_itemImg" v-for="item in uploadElement" :key="item">
+					<div
+						class="imgBox"
+						@click="()=>item.isChecked = !item.isChecked"
+					>
+						<img :class="[item?.isChecked?'active':'']" :src="item?.url" class="upload_img"/>
+						<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+					</div>
+				</div>
 				<div class="content_item_imgBox_itemImg" v-for="(file, index) in fileList" :key="file">
-					<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
-						<a-spin
-							:indicator="indicator"
-							tip="Uploading..."
-						/>
+					<div class="upload_file_item_content" v-show="file?.status === 'uploading'"  style="display: flex;align-items: center;">
+						<a-spin size="large" />
 					</div>
 					<div
 						class="imgBox"
@@ -217,9 +238,10 @@ export default defineComponent({
 			exhibitionImgList:[],//选择的图片
 			projectData:null,//批量id
 			objectList:[],
+			porjectName:'',//任务名字
 			//toProduct
 			generateText:'',//输入的内容
-			similarity:[30,60],
+			similarity:[20,40],
 			brightenValue:1,//亮度
 			relightDirection:'Right Light',//打光方向
 			relightDirectionList:[
@@ -238,13 +260,43 @@ export default defineComponent({
 				}
 			],
 			fileList:[],
+			uploadElement:[],
+			placeholder:'',
 		})
+		const getUploadElement = ()=>{
+			operations.loadingShow = true
+			let value = {
+				id:operationsData.projectData,
+				moduleList:['uploadElement']
+			}
+			operationsData.placeholder = 'Batch_' + setPlaceholder()
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				operationsData.uploadElement = rv.uploadElement
+				operations.loadingShow = false
+			}).catch((err)=>{
+				operations.loadingShow = false
+			})
+		}
 		let init = (projectData,buildType)=>{
 			operations.operationsModal = true
-			if(projectData?.id)operationsData.projectData = {label:projectData.name,value:projectData.id}
-			
+			clearData()
+			if(projectData?.id){
+				operationsData.projectData = {label:projectData.name,value:projectData.id}
+				getUploadElement()
+			}
 			if(buildType.value)operationsData.buildType = buildType
 		}
+		const clearData = ()=>{
+			operationsData.porjectName = ''
+			operationsData.generateText = ''
+			operationsData.similarity = [20,40]
+			operationsData.brightenValue = 1
+			operationsData.fileList = []
+			operationsData.uploadElement = []
+		}
+		const changeProject = ()=>{
+			getUploadElement()
+		}
 		const changeBuildType = ()=>{
 			// operationsData.exhibitionImgList = []
 			operationsData.projectData = null
@@ -255,15 +307,20 @@ export default defineComponent({
 			})
 			getHistoryProjectList()
 		}
-		const getGenerateCloudImgList = ()=>{
+		const getGenerateCloudImgList = (type)=>{
 			let list = []
-			if(operationsData.buildType == 'SINGLE_DESIGN'|| operationsData.buildType == 'SERIES_DESIGN')return list
-			let selectList = operationsData.fileList.filter((item)=>item.isChecked)
+			if(type == 'SINGLE_DESIGN'|| type == 'SERIES_DESIGN')return list
+			let selectList = []
+			let fileList = operationsData.fileList.filter((item)=>item.isChecked)
+			let uploadElement = operationsData.uploadElement.filter((item)=>item.isChecked)
+			if(fileList)selectList.push(...fileList)
+			if(uploadElement)selectList.push(...uploadElement)
+			
 			selectList.forEach((item)=>{
 				let obj = {
 					
 				}
-				if(operationsData.buildType == 'POSE_TRANSFER'){
+				if(type == 'POSE_TRANSFER'){
 					obj = {
 						poseId:1,
 						productImage:getMinioUrl(item.imgUrl)
@@ -271,7 +328,7 @@ export default defineComponent({
 				}else{
 					obj = {
 						elementId:item.id,
-						elementType:item.type
+						elementType:item.type||'ProductElement'
 					}
 				}
 				list.push(obj)
@@ -337,10 +394,11 @@ export default defineComponent({
 				"buildType": buildTypeCorresponding[operationsData.buildType],
 				nums: operationsData.numberOfImages,
 				projectId: operationsData.projectData,
+				name:operationsData.porjectName || operationsData.projectData,
 				//productimg
 				toProductImage:{
 					prompt:operationsData.generateText,//输入的内容
-					toProductImageVOList:(operationsData.buildType == 'TO_PRODUCT_IMAGE' || operationsData.buildType == 'RELIGHT')?getGenerateCloudImgList():[],//选择的图片
+					toProductImageVOList:getGenerateCloudImgList(operationsData.buildType),//选择的图片
 					// toProductImageVOList:getPorductImg(),//选择的图片
 					projectId: operationsData.projectData,
 					direction:operationsData.relightDirection,//打光方向
@@ -351,7 +409,7 @@ export default defineComponent({
 				},
 				//poseTransform
 				// poseTransform:getPoseTransformData(),
-				poseTransform:operationsData.buildType == 'POSE_TRANSFER'?getGenerateCloudImgList():[],
+				poseTransform:operationsData.buildType == 'POSE_TRANSFER'?getGenerateCloudImgList('POSE_TRANSFER'):[],
 				private: operationsData.projectData,
 				ToProductImageDTO: operationsData.projectData,
 			}
@@ -375,7 +433,7 @@ export default defineComponent({
 				// if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
 			}
 			if(operationsData.buildType == 'DESIGN' && !operationsData.projectData)return message.warning('Please select a project')
-			if(!data.buildType || !data.nums || (operationsData.buildType == 'DESIGN' && !operationsData.projectData))return message.warning('Please check the input box marked with *')
+			if(!data.buildType || !data.nums || !data.name || (operationsData.buildType == 'DESIGN' && !operationsData.projectData))return message.warning('Please check the input box marked with *')
 			operations.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designCloud, data).then(
 			(rv) => {
@@ -458,11 +516,25 @@ export default defineComponent({
 				bor = false
             }
         }
+		const setPlaceholder = ()=>{
+			if(!operationsData.projectData)return ''
+			let index = operationsData.objectList.findIndex(item => item.id === operationsData.projectData)
+			return operationsData.objectList[index].name
+		}
+		const focus = ()=>{
+			if(operationsData.porjectName)return
+			operationsData.porjectName = operationsData.placeholder
+		}
+		const blur = ()=>{
+			if(operationsData.porjectName != operationsData.placeholder)return
+			operationsData.porjectName = ''
+		}
         return {
             ...toRefs(operations),
             ...toRefs(operationsData),
 			cancelDsign,
 			init,
+			changeProject,
 			focus,
 			blur,
 			setOk,
@@ -658,13 +730,17 @@ export default defineComponent({
 					// border-radius: 1.6rem;
 					flex: 1;
 				}
-				> input{
-					border-radius: 1.6rem;
-					width: 4rem;
-					margin-left: 1rem;
-					height: 100%;
-					border-radius: 1rem;
+				>div{
+					input{
+						border-radius: 1.6rem;
+						width: 5rem;
+						padding: 4px 11px 4px;
+						margin-left: 1rem;
+						height: 100%;
+						text-align: center;
+					}
 				}
+				
 			}
 		}
 	}