aida_front/src/component/HomePage/index/model/cloudUploading/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="createCloud">
				<div class="gallery_btn" @click="createClound">Create cloudUploading</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">
						<span v-show="header.value != 'operation'">
							{{ row[header.value] }}
						</span>
						<span v-show="header.value == 'operation'" @click="downloadIamge(row)" style="cursor: pointer;">
							download	
						</span>
					</td>
				</tr>
			</div>
		</div>
		{{ generateList }}
		<createCloud ref="createCloud" :cloudList="generateList[workflowType]"></createCloud>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} 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";
export default defineComponent({
	components:{
		createCloud,
	},
	props:{
		workflowType:{
		    type:String,
			default:'' as any,
			required:true	
		}
	},
	emits:[],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			pageType:'list',
			generateList:{
				seriesDesign:[
					{
						name:'1',
						value:100,
					}
				],
				singleProductDesign:[
					{
						name:'1',
						value:100,
					}
				],
				printDesign:[
					{
						name:'1',
						value:100,
					}
				],
				productDrawingDesign:[
					{
						name:'1',
						value:100,
					}
				],
				printingDesign3D:[
					{
						name:'1',
						value:100,
					}
				],
				sketchDesign:[]
			},
			cloudTiltleList:[
				{
					name:'File name',
					value:'name',
				},{
					name:'File size',
					value:'size',
				},{
					name:'UPloaded by',
					value:'upLoadedBy',
				},{
					name:'Task time',
					value:'taskTime',
				},{
					name:'Operation',
					value:'operation',
				},
			]  as any,
			contentList:[
			{ name: '张三', size: 28, upLoadedBy: '1', taskTime: '123' },
			{ name: '李四', size: 32, upLoadedBy: '2', taskTime: '321' },
			{ name: '王五', size: 25, upLoadedBy: '3', taskTime: '222' }
			]  as any,
		})
		const dataDom = reactive({
			createCloud,
		})
		const createClound = ()=>{
			dataDom.createCloud.init()
		}
		const downloadIamge = (item:any)=>{

		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			createClound,
			downloadIamge,
		}
	},
	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{
				margin-left: auto;
			}
		}
		> .contentList{
			flex: 1;
			overflow: hidden;
			padding-top: 2.5rem;
			> .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);
					text-align: center;
				}
			}
			.content > tr{
				> td{
					text-align: center;
					width: calc(100% / 4);
					line-height: 4.6rem;
					font-size: 2.2rem;
				}
			}
		}
	}
</style>