aida_front/src/component/home/batchGeneration/index.vue

<template>
	<div class="uploading">
		<div class="title">
			<div class="list">
				<div
					class="titleItem active"
				>
					<span class="detailText">All</span>
				</div>
			</div>
			<div class="searchObject generalModel_state">
				<div class="generalModel_state_item smail" style="margin-right: 1rem;">
					<span>{{$t('batchGeneration.Project')}} :</span>
					<a-select
						v-model:value="projectData"
						show-search
						allowClear
                        size="large"
						:show-arrow="false"
						 :default-active-first-option="false"
						:not-found-content="null"
						:filter-option="false"
						style="width: 16rem"
						:fieldNames="{ label: 'name', value: 'value'}"
						placeholder="Please select"
						:options="objectList"
						@search="getHistoryProjectList"
						@change="handleChange"
					>
					<template #option="{ value: val, label, icon,updateTime }">
						<span :title="updateTime.replace('T', ' ')">{{ label }}</span>
					</template>
					</a-select>
				</div>
			</div>
			<div class="createCloud">
				<div class="gallery_btn" style="margin-right: 2rem;" @click="pagination">{{$t('batchGeneration.Search')}}</div>
				<div class="gallery_btn white" @click="createClound">{{$t('batchGeneration.Create')}}</div>
			</div>
		</div>
		<div class="contentList">
			<div class="title">
				<div class="titleItem" v-for="item in cloudTiltleList" :key="item.value">
					{{ item.name }}
				</div>
			</div>
			<div class="content">
				<tr v-for="(row, index) in contentList" :key="index">
					<td v-for="header in cloudTiltleList" :key="header.value">
						<div v-if="header.value != 'operation' && header.value != 'name'">
							{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
						</div>
						<div v-if="header.value == 'name'">
							<div v-if="row.id == renameId" class="rename">
								<input type="text" v-model="renameText">
								<i class="fi fi-br-check" @click="submitRename(row)"></i>
							</div>
							<div v-else :title="header?.fun?header.fun(row[header.value]) : row[header.value]" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 15rem;">
								{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
							</div>
						</div>
						<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" v-show="header.value == 'operation'" @click="setRename(row)">
							{{$t('batchGeneration.Rename')}}
						</span>
						<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" :style="{opacity:row.status == 1?1:.5}" v-show="header.value == 'operation'" @click="detailIamge(row)">
							{{$t('batchGeneration.Review')}}
						</span>
						<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="deleteRom(row)">
							{{$t('batchGeneration.Delete')}}
						</span>
					</td>
				</tr>
			</div>
			<a-pagination style="text-align: center;" @change="pagination" v-model:current="currentPage" :total="total" show-less-items />
		</div>
		<div class="mark_loading" v-show="loadingShow">
			<a-spin size="large" />
		</div>
		<createCloud ref="createCloud" :cloudList="generateList.seriesDesign" @getContentList="submitGetContentList"></createCloud>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,onMounted,nextTick,createVNode,toRefs, reactive, onBeforeUnmount, inject} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import createCloud from "./createCloud.vue";
import { da } from 'element-plus/es/locale';
import { useRouter,useRoute } from 'vue-router'
export default defineComponent({
	components:{
		createCloud,
	},
	emits:['retrieve'],
	setup(props,{emit}) {
		const {t} = useI18n()
		const store = useStore();
		const router = useRouter()
		const route = useRoute()
		const data = reactive({
			pageType:'list',
			pageSize:10,
			currentPage:1,
			total:0,
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			projectData:null as any,//批量id
			createData:null as any,
			settingGetHistory:inject('settingGetHistory') as any,
			generateList:{
				seriesDesign:[
				{
						label:t('newProjectg.SeriesDesign'),
						// value:'SERIES_DESIGN',
						consumption:0,
						value:'SERIES_DESIGN',
					},{
						label:t('newProjectg.SingleDesign'),
						// value:'SINGLE_DESIGN',
						consumption:0,
						value:'SINGLE_DESIGN',
					},{
						label:t('Header.toolsToProduct'),
						// value:'toProductImage',
						consumption:5,
						value:'TO_PRODUCT_IMAGE',
					},{
						label:t('Header.toolsRelight'),
						// value:'relight',
						consumption:5,
						value:'RELIGHT',
					},{
						label:t('Header.toolsToTransferPose'),
						// value:'poseTransfer',
						consumption:10,
						value:'POSE_TRANSFER',
					},
				],
				singleProductDesign:[
					{
						label:'Design',
						value:'design',
						consumption:0,
					},{
						label:'To Product Image',
						value:'toProductImage',
						consumption:5,
					},
				],
				// printDesign:[
				// 	{
				// 		label:'1',
				// 		value:100,
				// 	}
				// ],
				productDrawingDesign:[
					{
						label:'To Product Image',
						value:'toProductImage',
						consumption:5,
					},{
						label:'Relight',
						value:'relight',
						consumption:5,
					},{
						label:'Transfer Pose',
						value:'poseTransfer',
						consumption:10,
					},
				],
				// printingDesign3D:[
				// 	{
				// 		label:'1',
				// 		value:100,
				// 	}
				// ],
				// sketchDesign:[]
			},
			cloudTiltleList:[
				{
					name:computed(()=>t('batchGeneration.sequence')),
					value:'sequence',
				},
				{
					name:computed(()=>t('batchGeneration.TaskName')),
					value:'name',
				},{
					name:computed(()=>t('batchGeneration.TaskType')),
					value:'buildType',
					fun:(value:any)=>{
						let str = ''
						if(value == 'design')str = 'Design'
						if(value == 'toProductImage')str = 'To Product Image'
						if(value == 'relight')str = 'Relight'
						if(value == 'poseTransfer')str = 'Transfer Pose'
						return str
					}
				},{
					name:computed(()=>t('batchGeneration.QuantityGenerated')),
					value:'nums',
				},
				{
					name:computed(()=>t('batchGeneration.CreationTime')),
					value:'createTime',
					fun:(value:any)=>{
						if(!value)return
						return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0] 
					}
				},
				{
					name:computed(()=>t('batchGeneration.StartTime')),
					value:'startTime',
					fun:(value:any)=>{
						//没开始内容为 - 
						if(!value)return
						return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0] 
					}
				},{
					name:computed(()=>t('batchGeneration.UpdateTime')),
					value:'updateTime',
					fun:(value:any)=>{
						if(!value)return
						return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0] 
					}
				},{
					name:computed(()=>t('batchGeneration.Status')),
					value:'process',
					fun:(value:any)=>{
						if(value == '100.00%'){
							return 'Completed'
						}else{
							return value
						}
					}
				},{
					name:computed(()=>t('batchGeneration.Operation')),
					value:'operation',
				},
			]  as any,
			contentList:[
			]  as any,
			objectList:[],
			isGetContentList:false as any,
			renameId:-1 as any,
			renameText:'',
			loadingShow:false,
		})
		const dataDom = reactive({
			createCloud,
		})
		const getNextSequence = ()=>{
			return new Promise((resolve, reject) => {
				data.loadingShow = true
				Https.axiosGet(Https.httpUrls.getNextSequence).then((rv)=>{
					data.loadingShow = false
					data.isGetContentList = false
					resolve(rv)
				
				}).catch(()=>{
					data.loadingShow = false
					resolve('')
				})
			})
		}
		const createClound = ()=>{
			let obj = {}
			if(data.createData){
				data.generateList.seriesDesign.forEach((item:any)=>{
					if((item.value == data.createData.process)){
						obj = item
					}
				})
			}
			console.log(obj)
			getNextSequence().then((rv)=>{
				dataDom.createCloud.init(data.createData,obj,rv)
			})
		}
		const createData = ()=>{
			store.commit("createProbject");
			store.commit("clearAllData");
			store.commit("clearAllCollection");
			store.commit("setAllBoardDataChoose",{});
			store.commit("clearShowSketchboard",{});
			store.commit("clearAllCollection");
		}
		const detailIamge = (item:any)=>{
			//去除里面的T2025-04-17T13:45:43
			if(item.process == '100.00%' || item.status == 1){
				let value = {
					taskId:item.taskId,
					page:1,
					size:10,
					buildType:item.buildType,
				}
				createData()
				if(item.buildType == 'design'){
					router.push(`/home?history=${item.projectId}&source=batch`)
				}else if(item.buildType == 'toProductImage'){
					router.push(`/home/tools?tools=toProduct&id=${item.projectId}&source=batch`)
				}else if(item.buildType == 'relight'){
					router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
				}else if(item.buildType == 'poseTransfer'){
					router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
				}
				data.isGetContentList = false
				Https.axiosPost(Https.httpUrls.getDesignCloudResult,value).then((rv)=>{
					if(item.buildType == 'design'){
						store.commit('addDesignCollectionList',rv.design)
						router.push(`/home?history=${item.projectId}&source=batch`)
					}else if(item.buildType == 'toProductImage'){
						store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
						router.push(`/home/tools?tools=toProduct&id=${item.projectId}&source=batch`)
					}else if(item.buildType == 'relight'){
						store.commit('setCloudList',{str:'relight',list:rv.relight})
						router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
					}else if(item.buildType == 'poseTransfer'){
						let list = {
							list:rv.poseTransfer,
							str:'add',
							index:-1,
						}
						store.commit("setPoseTransfer", list);
						// store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
						router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
					}
					data.isGetContentList = false
				})
			}
		}
		const pagination = ()=>{
			data.isGetContentList = true
			data.renameId = -1
			getContentList()
		}
		let time = null as any
		const getContentList = ()=>{
			if(data.isGetContentList){
				clearTimeout(time)
				let value = {
					page:data.currentPage,
					size:data.pageSize,
					projectId: data.projectData?.value?data.projectData?.value:'',
				}
				Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
					data.contentList = rv.content
					data.total = rv.total
					let arr = rv.content
					let result = arr.some((item:any) => (item.process !== '100.00%' && item.status !== 1));
					if(!result)data.isGetContentList = false
					time = setTimeout(()=>{
						getContentList()
					},1500)
				})
			}
		}
		let getHistoryTime = null as any
		const getHistoryProjectList = (event:any)=>{
			clearTimeout(getHistoryTime)
			if(!event){
				data.objectList = []
				return
			}
			getHistoryTime = setTimeout(()=>{
				let value = {
					projectName:event,
					page:1,
					size:9999,
					asc:0,
					process:'',
				}
				Https.axiosPost(Https.httpUrls.historyProject,value).then((rv)=>{
					rv.content.forEach((item:any)=>{
						item.value = item.id
						item.label = item.name
					})
					data.objectList = rv.content
				})
			},1000)
		}
		const submitGetContentList = (project:any)=>{
			data.isGetContentList = true
			// if(project){
			// 	data.projectData = project
			// }else{
			// 	data.projectData = null
			// }
			// data.currentPage = 1
			getContentList()
			if(data.settingGetHistory)data.settingGetHistory()
		}
		const handleChange = (event:any,value:any)=>{
			data.createData = value
		}
		const setRename = (item:any)=>{
			data.renameId = item.id
			data.renameText = item.name
		}
		const submitRename = (item:any)=>{
			data.renameId = -1
			data.loadingShow = true
			let value = {
				id:item.id,
				name:data.renameText,
			}
			Https.axiosPost(Https.httpUrls.cloudTaskNameUpdate,value).then((rv)=>{
				data.loadingShow = false
				data.renameText = ''

				data.isGetContentList = true
				getContentList()
			}).catch((err)=>{
				data.loadingShow = false
			})
		}
		const deleteRom = (item:any)=>{
			let value = {
				id:item.id
			}
			Https.axiosPost(Https.httpUrls.cloudTaskDelete,value).then((rv)=>{
				data.loadingShow = false

				data.isGetContentList = true
				getContentList()
			}).catch((err)=>{
				data.loadingShow = false
			})
		}
		onBeforeUnmount(()=>{
			data.isGetContentList = false
		})
		watch(()=>route.query.id,(newValue,oldValue)=>{
			if(route.query?.id){
				data.projectData = {
					value:route.query?.id,
					label:route.query?.name,
				}
				data.createData = {
					label:route.query?.name,
					id:route.query?.id,
					process:route.query?.process
				}
				createClound()
			}
		},{immediate:true})
		onMounted(()=>{
			data.isGetContentList = true
			getContentList()
			// if(route.query?.type == 'creation')dataDom.createCloud.init(data.projectData)
		})
		return{
			...toRefs(dataDom),
			...toRefs(data),
			createClound,
			detailIamge,
			getContentList,
			submitGetContentList,
			handleChange,
			getHistoryProjectList,
			pagination,
			setRename,
			submitRename,
			deleteRom,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.uploading{
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 3rem;
		display: flex;
		flex-direction: column;
		> .title{
			width: 100%;
			display: flex;
			> .list{
				display: flex;
				margin-bottom: 2.5rem;
				> .titleItem:last-child{
					margin-right: 0;
				}
				> .titleItem{
					position: relative;
					cursor: pointer;
					margin-right: 6.5rem;
				}
				> .titleItem::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;
					}
				> .active {
					color: #000;
					font-weight: 600;
				}
				> .active::before {
					width: 100%;
				}
			}	
			> .createCloud{
			}
			> .searchObject{
				margin-left: auto;
				
			}
		}
		> .contentList{
			flex: 1;
			overflow: hidden;
			padding-top: 2.5rem;
			display: flex;
			flex-direction: column;
			> .content tr , > .title{
				display: flex;
				justify-content: space-between;
				padding: 0 1.2rem;
			}
			> .title{
				background: #F7F7F7;
				> .titleItem{
					line-height: 4.6rem;
					font-size: 2rem;
					color: #666666;
					// width: calc(100% / 4);
					width: 20rem;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					text-align: center;
				}
			}
			.content{
				flex: 1;
				overflow: hidden;
				> tr{
					> td{
						text-align: center;
						width: calc(100% / 4);
						line-height: 4.6rem;
						font-size: 1.6rem;
						display: flex;
						align-items: center;
						justify-content: center;
						.rename{
							display: flex;
							align-items: center;
							input{
								height: 100%;
								padding: .8rem;
								width: 12rem;
							}
							> i{
								margin-left: 1rem;
								cursor: pointer;
								width: 3rem;
								height: 3rem;
								background: #000;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #fff;
								border-radius: 2rem;
							}
						}
					}
				}
			}
		}
	}
</style>