任务列表页面

src/component/HomePage/TaskPage.vue

@@ -7,8 +7,30 @@
 		placement="right"
 		@after-visible-change="afterVisibleChange"
 	>
+		<template #extra>
+			<div class="button_second" @click="openTaskDetailPage">Detailed Task</div>
+		</template>
 		<div class="task_content">
 			<div class="task_content_item" v-for="item in taskList">
+				<img v-if="item.state !== 'success'" src="@/assets/images/homePage/loading.gif" alt="">
+				<img v-else :src="item.inputParam.images" alt="">
+				<div class="task_content_item_text">
+					<div class="task_content_item_text_left modal_title_text">
+						<div class="task_content_item_text_left_titile">{{ item.title }}</div>
+						<div class="task_content_item_text_left_into modal_title_text_intro">{{ item.createDate }}</div>
+					</div>
+					<div class="task_content_item_text_right modal_title_text">
+						<div class="task_content_item_text_left_titile">{{ item.status }}</div>
+					</div>
+				</div>
+			</div>
+			<div class="task_content_more" v-show="taskListMore.length == 0" @click="setTaskListMore">
+				点击查看更多
+			</div>
+			<div class="task_content_select" v-show="taskListMore.length > 0">
+				<a-select :visibleChange="visibleChange()" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Please select" :getPopupContainer="getPopupContainer" allowClear show-search></a-select>
+			</div>
+			<div class="task_content_item" v-for="item in taskListMore" v-show="taskListMore.length > 0">
 				<img v-if="item.state === '执行中' || item.state === '失败'" src="@/assets/images/homePage/loading.gif" alt="">
 				<img v-else :src="item.url" alt="">
 				<div class="task_content_item_text">
@@ -21,10 +43,11 @@
 					</div>
 				</div>
 			</div>
-			<div class="task_content_more">
-				点击查看更多
+			<div v-show="total > taskListMore?.length && total != 0 && taskListMore.length > 0" class="task_content_more" v-observe>
+				<img src="@/assets/images/homePage/loading.gif" alt="">
 			</div>
 		</div>
+		<TaskDetailPage ref="TaskDetailPage"></TaskDetailPage>
 	</a-drawer>
 </template>
 <script lang="ts">
@@ -32,12 +55,11 @@ import { message, Upload } from "ant-design-vue";
 import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
-import GO from "@/tool/GO";
 // import { forEach } from "jszip";
-import scaleImage from "@/component/HomePage/scaleImage.vue";
+import TaskDetailPage from "@/component/HomePage/TaskDetailPage.vue";
 export default defineComponent({
 	components: {
-		scaleImage,	
+		TaskDetailPage,	
 	},
     props: ["msg",'sketchCatecoryList'],
     setup() {
@@ -45,41 +67,64 @@ export default defineComponent({
         const store = useStore();
        	let visible = ref<boolean>(false);
 		let taskList = ref([
-			{
-				title:'111111111111',
-				state:'执行中',
-				url:'@/assets/images/homePage/loading.gif',
-				time:'2024-3-18'
-			},{
-				title:'111111111111',
-				state:'已完成',
-				url:'./image/texture/texture0.webp',
-				time:'2024-3-18'
-			},{
-				title:'111111111111',
-				state:'失败',
-				url:'@/assets/images/homePage/loading.gif',
-				time:'2024-3-18'
-			},{
-				title:'111111111111',
-				state:'执行中',
-				url:'@/assets/images/homePage/loading.gif',
-				time:'2024-3-18'
-			},
+		
 		])
+		let taskListMore:any = ref([])
+		let state:any = ref([
+			{
+				label:'Income',
+				value:'income',
+			},
+			{
+				label:'Expend',
+				value:'expend',
+			}
+		])
+		let currentState = ref({
+			value:'income',
+		})
         return {
 			store,
 			visible,
 			taskList,
+			taskListMore,
+			state,
+			currentState,
         };
     },
     data(prop) {
         return {
+			currentPage: 1,
+            pageSize: 10,
+            total: 99,
 		}
     },
 	
     mounted() {
     },
+	directives:{
+		observe:{
+			mounted (el,binding) {
+				// console.log(binding.instance);
+				const ob = new IntersectionObserver(callback,{
+					root:null,
+					threshold:[0.1]
+				})
+				ob.observe(el)
+				// this.currentPage = 1
+				// this.pageSize = 12
+				let this_:any = binding.instance
+				function callback(entries:any, observer:any) {
+					entries.forEach((entry:any) => {
+						if (entry.isIntersecting) {
+							this_.getTaskList()
+						} else {
+						}
+					});
+				}
+			},
+		},
+	},
 	watch:{
 		// newWindowState:{
 		// 	handler(newVal,oldVal){
@@ -92,11 +137,55 @@ export default defineComponent({
 		
 	},
     methods: {
+		getPopupContainer(){
+			let dom = document.querySelector('.task_page .task_content_select')
+			return dom
+		},
         init(){
 			this.visible = true
+			Https.axiosGet(Https.httpUrls.getTasksList).then((rv)=>{
+
+				this.taskList = this.sort(rv)
+			})
+		},
+		sort(arr:any){
+			arr.sort((a:any, b:any) => {
+				var a_num = Date.parse(a.createDate);
+				var b_num = b.style.zIndex;
+				return a_num - b_num;
+			});
+			return arr
 		},
 		afterVisibleChange(bool:any){
+			if(!bool){
+				this.taskListMore = []
+			}
 			console.log(bool);
+		},
+		setTaskListMore(){
+			// this.taskListMore = this.taskList
+			
+			this.taskListMore.push(...this.taskList,...this.taskList)
+		},
+		openTaskDetailPage(){
+			let taskDetailPage:any = this.$refs.TaskDetailPage
+			this.visible = false
+			taskDetailPage.init()
+		},
+		visibleChange(){
+			this.pageSize = 10
+			this.currentPage = 1
+			this.total = 0
+		},
+		getTaskList(){
+			let data = {
+				size:this.pageSize,
+                page: this.currentPage,
+				aaa:this.currentState,
+			}
+			console.log(123123);
+			this.currentPage += 1
+			Https.axiosGet()
 		}
     },
 });
@@ -174,8 +263,17 @@ export default defineComponent({
 			line-height: 5rem;
 			text-align: center;
 			cursor: pointer;
+			img{
+				width: 100%;
+				height: 5rem;
+				object-fit: contain;
+			}
+		}
+		.task_content_select{
+			>div{
+				width: 100%;
+			}
 		}
-
 	}
 }