aida_front/src/component/Administrator/allUser.vue

<template>
    <div class="allUser_page">
		<div class="allUser_table_search">
		</div>

		<div class="allUser_table_content" ref="historyTable">
			<a-table
				:columns="columns"
				:data-source="dataList"
				:scroll="{ y: historyTableHeight}"
				@change="changePage"
				:pagination="{
					showSizeChanger: true,
					current: currentPage,
					pageSize: pageSize,
					total: total,
					showQuickJumper: true,
					bordered: false,
				}"
			>
				<!-- <template
					#bodyCell="{ column, text, record, index }"
				>
					
				</template> -->
			</a-table>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed } from "vue";
import { Https } from "@/tool/https";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
export default defineComponent({
    components: {
    },
    setup() {
        let renameData: any = ref({}); //修改名字选中的数据
        const columns: any = computed(() => {
            return [
                {
                    title: 'Email',
                    align: "center",
                    ellipsis: true,
                    width: 30,
                    dataIndex: "email",
                    key: "email",
					fixed: 'left',
                },
				{
                    title: 'User Id',
                    align: "center",
                    width: 30,
                    dataIndex: "id",
                    key: "id",
                },
				{
                    title: 'User Name',
                    align: "center",
                    ellipsis: true,
                    width: 30,
                    dataIndex: "userName",
                    key: "userName",
                },
				{
                    title: 'Given Name',
                    align: "center",
                    ellipsis: true,
                    width: 30,
                    dataIndex: "givenName",
                    key: "givenName",
                },
                {
                    title: 'Create Time',
                    align: "center",
                    width: 30,
                    dataIndex: "createTime",
                    key: "createTime",
                },
				{
                    title: 'Title',
                    align: "center",
                    ellipsis: true,
                    width: 30,
                    dataIndex: "title",
                    key: "title",
                },
				{
                    title: 'Country',
                    align: "center",
                    ellipsis: true,
                    width: 30,
                    dataIndex: "country",
                    key: "country",
					fixed: 'right',
                },
			
            ];
        });
        let dataList: any = ref([]);
        let userInfo: any = {};
        return {
            columns,
            dataList,
            renameData,
            userInfo,
        };
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            historyTableHeight: 0,
            newCollectionName: "",
            renameVisivle: false, //修改名字弹窗
            collectionName: "", //选中的名字
            searchCollectionName: "",
        };
    },
    mounted() {
        let historyTable: any = this.$refs.historyTable;
        this.historyTableHeight = historyTable.clientHeight - 130;
        this.gettrialList();
		let userInfo:any = getCookie("userInfo")
        this.userInfo = JSON.parse(userInfo);
    },
    methods: {
        //改变页码
        changePage(e: any) {
            this.currentPage = e.current;
            this.pageSize = e.pageSize;
            // this.gettrialList();
        },
		//查询列表
		searchHistoryList() {
            this.currentPage = 1;
            this.gettrialList();
        },

		//获取列表
        gettrialList() {
			Https.axiosGet(Https.httpUrls.inquiryGetTrial).then((rv)=>{
				console.log(rv);
				this.dataList = rv
				
			})	
           
        },
    },
});
</script>
<style lang="less">
.allUser_page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // min-width: 1440px;
    position: relative;
	
	.allUser_table_search {
		display: flex;
		margin-top: 2rem;
		padding: 2rem 3.5rem 5rem 2.8rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
		.allUser_search{
			width: 40%;
			.allUser_search_item{
				background: #343579;
				border-color: #343579;
				height: 4rem;
				padding: .64rem 1.5rem;
				font-size: 1.6rem;
				border-radius: 2px;
				display: inline-block;
				color: #fff;
				cursor: pointer;
			}
		}
		.allUser_state {
			position: relative;
			cursor: pointer;
			width: 60%;
			.allUser_state_item{
				margin-right: 2rem;
				margin-bottom: 2rem;
				display: flex;
				align-items: center;
				>span{
					font-size: 1.6rem;
					font-weight: 400;
					color: #030303;
					margin-right: 15px;
					flex-shrink: 0;
					display: block;
					min-width: 13rem;
					text-align: right;
				}
			}
			.allUser_current{
				background: #fff;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.header_user_content {
				position: absolute;
				border: 2px solid;
				border-radius: 1rem;
				overflow: hidden;
				top: 0;
				transform: translateY(6rem);
				z-index: 2;
				display: none;
				margin-left: -2rem;
				.username{
					padding: 0 2rem;
					color: #000;
				}
				.username:hover{
					background: #e1e1e1;
				}
				&.active{
					display: block;
				}
			}
		}
	}

	.allUser_table_content {
		margin-top: 2.6rem;
		width: 100%;
		height: calc(100% - 13.7rem);
		padding-bottom: 3rem;
		background: #fff;
		border-radius: 2rem;
		overflow: hidden;
		.ant-table {
			background: transparent;
		}

		.ant-table-body {
			overflow-y: auto !important;
			-ms-overflow-style: none;
			overflow: -moz-scrollbars-none;

			&::-webkit-scrollbar {
				width: 0 !important;
			}
		}
		.ant-table-thead > tr > th {
			background: #ffffff00;
			border-bottom: none;
			backdrop-filter: blur(1rem);
		}

		.ant-table-tbody > tr > td {
			border: none;
			background: transparent;
			// color: #fff;
		}
		.ant-table-tbody > tr {
			&:hover > td {
				background: #ffffff3a;
			}
		}
		.ant-table-pagination-right {
			padding-right: 3.5rem;
		}
		.operate_list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 1rem;

			.operate_item {
				font-size: 1.4rem;
				font-family: Roboto;
				font-weight: 400;
				color: #343579;
				cursor: pointer;
			}
		}
	}
}
</style>