style: 去除底边距

src/component/Administrator/allUser.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="admin_page">
-        <div class="admin_table_search"  :style="{height:isAwayOrUnfold?'7rem':''}">
+		<div class="admin_table_search" :style="{ height: isAwayOrUnfold ? '7rem' : '' }">
 			<div class="admin_state">
 				<div class="admin_state_item">
 					<span>Create Time:</span>
@@ -8,16 +8,11 @@
 						style="width: 250px"
 						class="range_picker"
 						v-model:value="rangePickerValue"
-                        :placeholder="[
-                            $t('HistoryPage.StartDate'),
-                            $t('HistoryPage.EndDate'),
-                        ]"
+						:placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
 						valueFormat="YYYY-MM-DD"
 					>
 						<template #suffixIcon>
-                            <span
-                                class="icon iconfont range_picker_icon icon-rili"
-                            ></span>
+							<span class="icon iconfont range_picker_icon icon-rili"></span>
 						</template>
 					</a-range-picker>
 				</div>
@@ -63,38 +58,50 @@
 						show-search
 					></a-select>
 				</div>
+				<div class="admin_state_item">
+					<span>Orgnization:</span>
+					<a-select
+						v-model:value="organizationId"
+						placeholder="Select the organization"
+						allow-clear
+						style="width: 250px"
+						@popupScroll="handleOrganizationScroll"
+					>
+						<a-select-option
+							v-for="item in organizationOptions"
+							:key="item.id"
+							:value="item.id"
+						>
+							{{ item.name }}
+						</a-select-option>
+					</a-select>
+				</div>
 			</div>
 			<div class="admin_search">
-                <div class="admin_search_item" @click="searchHistoryList" :style="{height:isAwayOrUnfold?'4rem':''}">
+				<div
+					class="admin_search_item"
+					@click="searchHistoryList"
+					:style="{ height: isAwayOrUnfold ? '4rem' : '' }"
+				>
 					Search
 				</div>
-                <div class="admin_search_item" @click="addhHistoryList">
-                    Add
-                </div>
+				<div class="admin_search_item" @click="addhHistoryList">Add</div>
 			</div>
 			<div class="admin_state_list">
-                <div
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('year')"
-                >
+				<div class="admin_state_list_item" @click="lastGeTrialList('year')">
 					Nearly a year
 				</div>
-                <div
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('month')"
-                >
+				<div class="admin_state_list_item" @click="lastGeTrialList('month')">
 					Last month
 				</div>
-                <div
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('week')"
-                >
-                    Last week
+				<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
 			</div>
 		</div>
-        </div>
-		<div class="awayOrUnfold" :class="{active:isAwayOrUnfold}">
-			<span class="icon iconfont menu_icon icon-xiala" @click="()=>isAwayOrUnfold = !isAwayOrUnfold"></span>
+		<div class="awayOrUnfold" :class="{ active: isAwayOrUnfold }">
+			<span
+				class="icon iconfont menu_icon icon-xiala"
+				@click="() => (isAwayOrUnfold = !isAwayOrUnfold)"
+			></span>
 		</div>
 		<div class="admin_table_content" ref="historyTable">
 			<a-table
@@ -104,24 +111,19 @@
 				:data-source="dataList"
 				:scroll="{ y: historyTableHeight }"
 				@change="changePage"
-				:showSorterTooltip='false'
+				:showSorterTooltip="false"
 				:pagination="{
 					showSizeChanger: true,
 					current: currentPage,
 					pageSize: pageSize,
 					total: total,
 					showQuickJumper: true,
-                    bordered: false,
+					bordered: false
 				}"
 			>
 				<template #bodyCell="{ column, text, record, index }">
 					<div class="operate_list" v-if="column?.Operations">
-                        <div
-                            class="operate_item"
-                            @click="setAagree(record)"
-                        >
-                            Edit
-                        </div>
+						<div class="operate_item" @click="setAagree(record)">Edit</div>
 						<!-- <div
 							class="operate_item"
 							@click="deleteGroup(record, index)"
@@ -132,34 +134,29 @@
 				</template>
 			</a-table>
 		</div>
-		<allUserPoerationsVue ref="allUserPoerationsVue" @searchHistoryList="searchHistoryList"></allUserPoerationsVue>
+		<allUserPoerationsVue
+			ref="allUserPoerationsVue"
+			@searchHistoryList="searchHistoryList"
+		/>
 	</div>
 </template>
 <script lang="ts">
-import {
-    defineComponent,
-    ref,
-    createVNode,
-    computed,
-    reactive,
-    toRefs,
-    onMounted,
-} from "vue";
-import { formatTime } from "@/tool/util";
-import { useStore } from "vuex";
-import { Https } from "@/tool/https";
-import allUserPoerationsVue from "./allUserPoerations.vue";
-import SelectUser from '@/component/common/SelectUser.vue'
+import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue"
+import { formatTime } from "@/tool/util"
+import { useStore } from "vuex"
+import { Https } from "@/tool/https"
+import allUserPoerationsVue from "./allUserPoerations.vue"
+import SelectUser from "@/component/common/SelectUser.vue"
 export default defineComponent({
-    components: {allUserPoerationsVue,SelectUser},
+	components: { allUserPoerationsVue, SelectUser },
 	setup() {
-        const store:any = useStore()
+		const store: any = useStore()
 		let filter: any = reactive({
 			dataList: [],
 			tableLoading: false,
-			allCountry:[],
-			isAwayOrUnfold:false
-        });
+			allCountry: [],
+			isAwayOrUnfold: false
+		})
 		let filterData: any = reactive({
 			rangePickerValue: [],
 			currentPage: 1,
@@ -172,40 +169,41 @@ export default defineComponent({
 			occupation: "",
 			systemUser: "",
 			order: "", //'Ascending  升序 Descending 降序'
-			orderBy:'',
+			orderBy: "",
 			userName: "",
-        });
+			organizationId: null
+		})
 		let state: any = ref([
 			{
 				label: "all",
-                value: "",
+				value: ""
 			},
 			{
-				label:'visitor',
-				value:'0',
+				label: "visitor",
+				value: "0"
 			},
 			{
-				label:'yearly',
-				value:'1',
+				label: "yearly",
+				value: "1"
 			},
 			{
-				label:'monthly',
-				value:'2',
+				label: "monthly",
+				value: "2"
 			},
 			{
-				label:'trial',
-				value:'3',
+				label: "trial",
+				value: "3"
 			},
 			{
 				label: "userInEvent",
-                value: "4",
+				value: "4"
 			},
 			{
 				label: "Edu Admin",
-                value: "7",
-            },
-        ]);
-        let renameData: any = ref({}); //修改名字选中的数据
+				value: "7"
+			}
+		])
+		let renameData: any = ref({}) //修改名字选中的数据
 		const columns: any = computed(() => {
 			return [
 				{
@@ -213,25 +211,25 @@ export default defineComponent({
 					align: "center",
 					dataIndex: "id",
 					key: "id",
-					width:100,
+					width: 100,
 					fixed: "left",
-					sorter: true,
+					sorter: true
 				},
 				{
 					title: "Email",
 					align: "center",
 					dataIndex: "userEmail",
 					key: "userEmail",
-					width:200,
-					ellipsis:true
+					width: 200,
+					ellipsis: true
 				},
 				{
 					title: "User Name",
 					align: "center",
 					dataIndex: "userName",
 					key: "userName",
-					width:150,
-					ellipsis:true
+					width: 150,
+					ellipsis: true
 					// customRender: (record: any) => {
 					//     let time = formatTime(
 					//         record.text / 1000,
@@ -245,77 +243,77 @@ export default defineComponent({
 					align: "center",
 					dataIndex: "language",
 					key: "language",
-					width:100,
-					ellipsis:true,
+					width: 100,
+					ellipsis: true
 				},
 				{
 					title: "Valid Start Time",
 					align: "center",
 					dataIndex: "validStartTime",
 					key: "validstartTime",
-					width:200,
-					ellipsis:true,
+					width: 200,
+					ellipsis: true,
 					customRender: (record: any) => {
-						let time = ''
-						if(record.text){
-							time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
+						let time = ""
+						if (record.text) {
+							time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
 						}
 						return time
-                    },
+					}
 				},
 				{
 					title: "Valid End Time",
 					align: "center",
 					dataIndex: "validEndTime",
 					key: "validendTime",
-					width:200,
-					ellipsis:true,
+					width: 200,
+					ellipsis: true,
 					customRender: (record: any) => {
-						let time = ''
-						if(record.text){
-							time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
+						let time = ""
+						if (record.text) {
+							time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
 						}
 						return time
-                    },
+					}
 				},
 				{
 					title: "Country or Region",
 					align: "center",
 					dataIndex: "country",
 					key: "country",
-					width:200,
+					width: 200
 				},
 				{
 					title: "Create Date",
 					align: "center",
 					dataIndex: "createDate",
 					key: "createDate",
-					width:200,
-					sorter: true,
+					width: 200,
+					sorter: true
 				},
 				{
 					title: "Is Beginner",
 					align: "center",
 					dataIndex: "isBeginner",
 					key: "isBeginner",
-					width:80,
-					ellipsis:true,
+					width: 80,
+					ellipsis: true,
 					customRender: (record: any) => {
-                        let str;
+						let str
 						if (record.value == 1) {
-                            str = "Yes";
+							str = "Yes"
 						} else {
-                            str = "No";
+							str = "No"
+						}
+						return str
 					}
-                        return str;
-                    },
 				},
 				{
-                    title: 'Machine Room Ip',
+					title: "Machine Room Ip",
 					align: "center",
 					dataIndex: "browserIdentifiers",
 					key: "browserIdentifiers",
-					width:200,
+					width: 200
 				},
 				{
 					title: "Credits",
@@ -326,11 +324,11 @@ export default defineComponent({
 					// resizable: true,
 					dataIndex: "credits",
 					key: "credits",
-					width:100,
-					sorter: true,
+					width: 100,
+					sorter: true
 				},
 				{
-                    title: 'User Type',
+					title: "User Type",
 					align: "center",
 					// width: 150,
 					// minWidth: 100,
@@ -338,84 +336,84 @@ export default defineComponent({
 					// resizable: true,
 					dataIndex: "systemUser",
 					key: "systemUser",
-					width:100,
+					width: 100,
 					customRender: (record: any) => {
-                        let str;
+						let str
 						if (record.value == 0) {
-                            str = "visitor";
+							str = "visitor"
 						} else if (record.value == 1) {
-                            str = "yearly";
+							str = "yearly"
 						} else if (record.value == 2) {
-                            str = "monthly";
+							str = "monthly"
 						} else if (record.value == 3) {
-                            str = "trial";
+							str = "trial"
 						} else if (record.value == 4) {
-                            str = "userInEvent";
+							str = "userInEvent"
 						} else if (record.value == 7) {
-                            str = "Edu Admin";
+							str = "Edu Admin"
+						}
+						return str
 					}
-                        return str;
-                    },
 				},
 				{
 					title: "Operations",
 					key: "operation",
-					width:120,
+					width: 120,
 					align: "center",
 					fixed: "right",
 					// slots:{customRender:'action'}
-                    Operations: true,
-                },
-            ];
-        });
+					Operations: true
+				}
+			]
+		})
 		//改变页码
-        let changePage = (e: any, filters:any, sorter:any) => {
-            filterData.currentPage = e.current;
-            filterData.pageSize = e.pageSize;
-			if(sorter.order){
-				if(sorter.columnKey == 'id'){
-					filterData.orderBy = 'id'
-				}else if(sorter.columnKey == "createDate"){
-					filterData.orderBy = 'time'
-				}else if(sorter.columnKey == "credits"){
-					filterData.orderBy = 'credits'
+		let changePage = (e: any, filters: any, sorter: any) => {
+			filterData.currentPage = e.current
+			filterData.pageSize = e.pageSize
+			if (sorter.order) {
+				if (sorter.columnKey == "id") {
+					filterData.orderBy = "id"
+				} else if (sorter.columnKey == "createDate") {
+					filterData.orderBy = "time"
+				} else if (sorter.columnKey == "credits") {
+					filterData.orderBy = "credits"
 				}
 			}
-			if(sorter.order){
-				filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
-			}else{
-				filterData.order = ''
+			if (sorter.order) {
+				filterData.order = sorter.order == "descend" ? "Descending" : "Ascending"
+			} else {
+				filterData.order = ""
+			}
+			gettrialList()
 		}
-            gettrialList();
-        };
 
 		//查询列表
 		let searchHistoryList = () => {
-            filterData.currentPage = 1;
-            gettrialList();
-        };
+			filterData.currentPage = 1
+			gettrialList()
+		}
 		let clearHistoryList = () => {
-            filterData.rangePickerValue = [],
-			filterData.currentPage = 1,
-			filterData.pageSize = 10,
-			filterData.total = 0,
-			filterData.country = "",
-			filterData.email = "",
-			filterData.userType = "",
-			filterData.ids = [],
-			filterData.occupation = "",
-			filterData.order = "", //'Ascending  升序 Descending 降序'
-			filterData.orderBy = "", //'Ascending  升序 Descending 降序'
-			filterData.systemUser = "",
-			filterData.userName = "";
-        };
+			;((filterData.rangePickerValue = []),
+				(filterData.currentPage = 1),
+				(filterData.pageSize = 10),
+				(filterData.total = 0),
+				(filterData.country = ""),
+				(filterData.email = ""),
+				(filterData.userType = ""),
+				(filterData.ids = []),
+				(filterData.occupation = ""),
+				(filterData.order = ""), //'Ascending  升序 Descending 降序'
+				(filterData.orderBy = ""), //'Ascending  升序 Descending 降序'
+				(filterData.systemUser = ""),
+				(filterData.userName = ""))
+		}
 		let setHistoryListData = () => {
 			let startDate: any = filterData.rangePickerValue?.[0]
 				? filterData.rangePickerValue[0] + " " + "00:00:00"
-                : "";
+				: ""
 			let endDate: any = filterData.rangePickerValue?.[1]
 				? filterData.rangePickerValue[1] + " " + "23:59:59"
-                : "";
+				: ""
 			let data = {
 				endTime: endDate,
 				startTime: startDate,
@@ -430,63 +428,118 @@ export default defineComponent({
 				order: filterData.order,
 				orderBy: filterData.orderBy,
 				userName: filterData.userName,
-            };
-            return data;
-        };
+				organizationId: filterData.organizationId
+			}
+			return data
+		}
 		//获取列表
 		let gettrialList = () => {
-            filter.tableLoading = true;
-            let data = setHistoryListData();
-            Https.axiosPost(Https.httpUrls.getUserInfo, data).then(
-                (rv: any) => {
+			filter.tableLoading = true
+			let data = setHistoryListData()
+			Https.axiosPost(Https.httpUrls.getUserInfo, data).then((rv: any) => {
 				if (rv) {
 					// this.dataList = rv
-                        filter.dataList = rv.records;
-                        filterData.total = rv.total;
-                        filter.tableLoading = false;
+					filter.dataList = rv.records
+					filterData.total = rv.total
+					filter.tableLoading = false
 
 					// this.workspaceItem.position = this.singleTypeList[0].label
 				}
+			})
 		}
-            );
-        };
 		let lastGeTrialList = (str: string) => {
-            clearHistoryList();
-            let currentDate = new Date();
-            let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
+			clearHistoryList()
+			let currentDate = new Date()
+			let currentTimestamp = Math.floor(currentDate.getTime() / 1000)
 			// 计算30天前的时间戳
-            let thirtyDaysAgoTimestamp;
+			let thirtyDaysAgoTimestamp
 			if (str == "year") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60
 			} else if (str == "month") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60
 			} else if (str == "week") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60
+			}
+			filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp, "YYYY-MM-DD")
+			gettrialList()
 		}
-            filterData.rangePickerValue[0] = formatTime(
-                thirtyDaysAgoTimestamp,
-                "YYYY-MM-DD"
-            );
-            gettrialList();
-        };
 		let filterOption = (input: any, option: any) => {
 			// 使用 option.label 进行搜索
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-        };
+			return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+		}
 		let addhHistoryList = () => {
-			allUserPoerationsVue.value.init('Add','')
-		};
+			allUserPoerationsVue.value.init("Add", "")
+		}
 		let allUserPoerationsVue = ref()
-		let setAagree = (data:any) =>{
-			allUserPoerationsVue.value.init('Edit',data)
+		let setAagree = (data: any) => {
+			allUserPoerationsVue.value.init("Edit", data)
 		}
+
+		const organizationOptions = ref([])
+		const organizationParams = reactive({
+			page: 1,
+			size: 10,
+			total: 0
+		})
+		const organizationLoading = ref(false)
+		const getOrganizationList = async (isLoadMore = false) => {
+			console.log("111111")
+			if (organizationLoading.value) return
+			if (isLoadMore) {
+				const loaded = organizationParams.page * organizationParams.size
+				if (organizationParams.total && loaded >= organizationParams.total) return
+				organizationParams.page += 1
+			} else {
+				organizationParams.page = 1
+				organizationOptions.value = []
+			}
+			organizationLoading.value = true
+			try {
+				const { total, ...requestParams } = organizationParams
+				const rv: any = await Https.axiosPost(
+					Https.httpUrls.queryOrganization,
+					requestParams
+				)
+				if (rv) {
+					const newRecords = rv.records || []
+					// 遍历新数据，如果已存在则覆盖，不存在则追加
+					newRecords.forEach((newOrg: any) => {
+						const newOrgId = String(newOrg.id)
+						const existingIndex = organizationOptions.value.findIndex(
+							(org: any) => String(org.id) === newOrgId
+						)
+						if (existingIndex !== -1) {
+							// 如果已存在，用新数据覆盖旧项
+							organizationOptions.value[existingIndex] = newOrg
+						} else {
+							// 如果不存在，追加到末尾
+							organizationOptions.value.push(newOrg)
+						}
+					})
+					organizationParams.total = rv.total || 0
+				}
+			} finally {
+				organizationLoading.value = false
+			}
+		}
+
+		const handleOrganizationScroll = (e: any) => {
+			const target = e?.target
+			if (!target) return
+			const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 20
+			if (nearBottom) {
+				getOrganizationList(true)
+			}
+		}
+
 		onMounted(() => {
-			let allCountry: any = sessionStorage.getItem("allCountry");
+			let allCountry: any = sessionStorage.getItem("allCountry")
 			if (allCountry) {
-                filter.allCountry = JSON.parse(allCountry);
+				filter.allCountry = JSON.parse(allCountry)
 			}
-            gettrialList();
-        });
+			gettrialList()
+			getOrganizationList()
+		})
 		return {
 			...toRefs(filter),
 			...toRefs(filterData),
@@ -501,29 +554,32 @@ export default defineComponent({
 			filterOption,
 			allUserPoerationsVue,
 			setAagree,
-        };
+			handleOrganizationScroll,
+			getOrganizationList,
+			organizationOptions,
+			organizationParams
+		}
 	},
 	data() {
 		return {
 			historyTableHeight: 0,
 			handleResizeColumn: (w: any, col: any) => {
-                col.width = w;
-            },
-        };
+				col.width = w
+			}
+		}
 	},
 	mounted() {
-        let historyTable: any = this.$refs.historyTable;
-        this.historyTableHeight = historyTable.clientHeight - 200;
+		let historyTable: any = this.$refs.historyTable
+		this.historyTableHeight = historyTable.clientHeight - 200
 	},
-    methods: {},
-});
+	methods: {}
+})
 </script>
 <style lang="less" scoped>
 .admin_page .admin_table_search .admin_state {
 	display: flex;
 	flex-wrap: wrap;
 }
-.admin_page{
-	
+.admin_page {
 }
 </style>