aida_front/src/component/Administrator/allUser.vue

<template>
    <div class="admin_page">
		<div class="admin_table_search">
		</div>

		<div class="allUser_table_content" ref="historyTable">
			<a-table
				:columns="columns"
				:data-source="dataList"
				:scroll="{ y: historyTableHeight}"
				@change="changePage"
				@resizeColumn="handleResizeColumn"
				: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 type { TableColumnsType } from 'ant-design-vue';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
export default defineComponent({
    components: {
    },
    setup() {
        let renameData: any = ref({}); //修改名字选中的数据
        const columns: any = ref<TableColumnsType>([
                {
                    title: 'Email',
                    align: "center",
                    ellipsis: true,
                    width: 50,
					
                    dataIndex: "email",
                    key: "email",
                },
				{
                    title: 'User Id',
                    align: "center",
                    width: 50,
					
                    dataIndex: "id",
                    key: "id",
                },
				{
                    title: 'User Name',
                    align: "center",
                    ellipsis: true,
                    width: 50,
					
                    dataIndex: "userName",
                    key: "userName",
                },
				{
                    title: 'Given Name',
                    align: "center",
                    ellipsis: true,
                    width: 50,
					
                    dataIndex: "givenName",
                    key: "givenName",
                },
                {
                    title: 'Create Time',
                    align: "center",
                    width: 50,
					
                    dataIndex: "createTime",
                    key: "createTime",
                },
				{
                    title: 'Title',
                    align: "center",
                    ellipsis: true,
                    width: 50,
					// 
                    dataIndex: "title",
                    key: "title",
                },
				{
                    title: 'Country',
                    align: "center",
                    width: 50,
                    ellipsis: true,
                    dataIndex: "country",
                    key: "country",
                },
			
            ]
        );
        let dataList: any = ref([]);
        let userInfo: any = {};
        return {
            columns,
            dataList,
            renameData,
            userInfo,
			handleResizeColumn: (w:any, col:any) => {
				col.width = w;
			},
        };
    },
    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 - 200;
        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)=>{
				this.dataList = rv
				
			})	
           
        },
    },
});
</script>
<style lang="less">
.admin_page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // min-width: 1440px;
    position: relative;
	
	.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>