bugfix: 教育版管理员页面分页器消失

This commit is contained in:
2026-01-15 10:38:53 +08:00
parent 3d202e32c2
commit cc0127f195

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="admin_page"> <div class="admin_page all-user">
<div class="admin_table_search"> <div class="admin_table_search">
<div class="admin_state"> <div class="admin_state">
<div class="admin_state_item"> <div class="admin_state_item">
@@ -8,16 +8,11 @@
style="width: 230px" style="width: 230px"
class="range_picker" class="range_picker"
v-model:value="rangePickerValue" v-model:value="rangePickerValue"
:placeholder="[ :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
> >
<template #suffixIcon> <template #suffixIcon>
<span <span class="icon iconfont range_picker_icon icon-rili"></span>
class="icon iconfont range_picker_icon icon-rili"
></span>
</template> </template>
</a-range-picker> </a-range-picker>
</div> </div>
@@ -79,36 +74,43 @@
<div class="admin_search_item" @click="addhHistoryList"> <div class="admin_search_item" @click="addhHistoryList">
{{ $t('admin.add') }} {{ $t('admin.add') }}
</div> </div>
<div class="admin_search_item" style="width: auto;padding: 0 2rem;" @click="downloadTemplate"> <div
class="admin_search_item"
style="width: auto; padding: 0 2rem"
@click="downloadTemplate"
>
{{ $t('admin.DownloadTemplate') }} {{ $t('admin.DownloadTemplate') }}
</div> </div>
<div class="admin_search_item" style="width: auto;padding: 0 2rem;" @click="uploadTemplate"> <div
class="admin_search_item"
style="width: auto; padding: 0 2rem"
@click="uploadTemplate"
>
{{ $t('admin.UploadTemplate') }} {{ $t('admin.UploadTemplate') }}
</div> </div>
<div class="admin_search_item" style="width: auto;padding: 0 2rem;" @click="ExportAccountData"> <div
class="admin_search_item"
style="width: auto; padding: 0 2rem"
@click="ExportAccountData"
>
{{ $t('admin.ExportAccountData') }} {{ $t('admin.ExportAccountData') }}
</div> </div>
<div class="admin_search_item" style="width: auto;padding: 0 2rem;" @click="deleteList"> <div
class="admin_search_item"
style="width: auto; padding: 0 2rem"
@click="deleteList"
>
{{ $t('admin.Delete') }} {{ $t('admin.Delete') }}
</div> </div>
</div> </div>
<div class="admin_state_list"> <div class="admin_state_list">
<div <div class="admin_state_list_item" @click="lastGeTrialList('year')">
class="admin_state_list_item"
@click="lastGeTrialList('year')"
>
{{ $t('admin.NearlyAYear') }} {{ $t('admin.NearlyAYear') }}
</div> </div>
<div <div class="admin_state_list_item" @click="lastGeTrialList('month')">
class="admin_state_list_item"
@click="lastGeTrialList('month')"
>
{{ $t('admin.LastMonth') }} {{ $t('admin.LastMonth') }}
</div> </div>
<div <div class="admin_state_list_item" @click="lastGeTrialList('week')">
class="admin_state_list_item"
@click="lastGeTrialList('week')"
>
{{ $t('admin.LastWeek') }} {{ $t('admin.LastWeek') }}
</div> </div>
</div> </div>
@@ -123,14 +125,14 @@
rowKey="id" rowKey="id"
:scroll="{ y: historyTableHeight }" :scroll="{ y: historyTableHeight }"
@change="changePage" @change="changePage"
:showSorterTooltip='false' :showSorterTooltip="false"
:pagination="{ :pagination="{
showSizeChanger: true, showSizeChanger: true,
current: currentPage, current: currentPage,
pageSize: pageSize, pageSize: pageSize,
total: total, total: total,
showQuickJumper: true, showQuickJumper: true,
bordered: false, bordered: false
}" }"
> >
<template #bodyCell="{ column, text, record, index }"> <template #bodyCell="{ column, text, record, index }">
@@ -138,14 +140,11 @@
<div <div
class="operate_item" class="operate_item"
@click="setAagree(record)" @click="setAagree(record)"
style="margin-right: 2rem;" style="margin-right: 2rem"
> >
{{ $t('admin.Edit') }} {{ $t('admin.Edit') }}
</div> </div>
<div <div class="operate_item" @click="deleteAagree(record)">
class="operate_item"
@click="deleteAagree(record)"
>
{{ $t('admin.Delete') }} {{ $t('admin.Delete') }}
</div> </div>
<!-- <div <!-- <div
@@ -158,7 +157,10 @@
</template> </template>
</a-table> </a-table>
</div> </div>
<allUserPoerationsVue ref="allUserPoerationsVue" @searchHistoryList="searchHistoryList"></allUserPoerationsVue> <allUserPoerationsVue
ref="allUserPoerationsVue"
@searchHistoryList="searchHistoryList"
></allUserPoerationsVue>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -169,82 +171,82 @@ import {
computed, computed,
reactive, reactive,
toRefs, toRefs,
onMounted, onMounted
} from "vue"; } from 'vue'
import { formatTime } from "@/tool/util"; import { formatTime } from '@/tool/util'
import { useStore } from "vuex"; import { useStore } from 'vuex'
import { Https } from "@/tool/https"; import { Https } from '@/tool/https'
import { Modal,message } from 'ant-design-vue'; import { Modal, message } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import allUserPoerationsVue from "./addAllUser.vue"; import allUserPoerationsVue from './addAllUser.vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
export default defineComponent({ export default defineComponent({
components: {allUserPoerationsVue,}, components: { allUserPoerationsVue },
setup() { setup() {
const store:any = useStore() const store: any = useStore()
const selectedRowKeys = ref([]) as any; const selectedRowKeys = ref([]) as any
const onSelectChange = (changableRowKeys: string[]) => { const onSelectChange = (changableRowKeys: string[]) => {
selectedRowKeys.value = changableRowKeys; selectedRowKeys.value = changableRowKeys
}; }
let filter: any = reactive({ let filter: any = reactive({
dataList: [], dataList: [],
tableLoading: false, tableLoading: false,
allUserList: computed(()=>{ allUserList: computed(() => {
return store.state.adminPage.allUserList return store.state.adminPage.allUserList
}), }),
allCountry:[], allCountry: [],
rowSelection:computed(() => { rowSelection: computed(() => {
return { return {
selectedRowKeys: unref(selectedRowKeys), selectedRowKeys: unref(selectedRowKeys),
onChange: onSelectChange, onChange: onSelectChange
} }
}) })
}); })
const {t} = useI18n() const { t } = useI18n()
let filterData: any = reactive({ let filterData: any = reactive({
rangePickerValue: [], rangePickerValue: [],
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
country: "", country: '',
email: "", email: '',
userType: "", userType: '',
ids: [], ids: [],
occupation: "", occupation: '',
systemUser: "", systemUser: '',
order: "", //'Ascending 升序 Descending 降序' order: '', //'Ascending 升序 Descending 降序'
orderBy:'', orderBy: '',
userName: "", userName: ''
}); })
let renameData: any = ref({}); //修改名字选中的数据 let renameData: any = ref({}) //修改名字选中的数据
const columns: any = computed(() => { const columns: any = computed(() => {
return [ return [
{ {
title: t("admin.UserId"), title: t('admin.UserId'),
align: "center", align: 'center',
dataIndex: "id", dataIndex: 'id',
key: "id", key: 'id',
width:100, width: 100,
fixed: "left", fixed: 'left',
sorter: true, sorter: true
}, },
{ {
title: t("admin.Email"), title: t('admin.Email'),
align: "center", align: 'center',
dataIndex: "userEmail", dataIndex: 'userEmail',
key: "userEmail", key: 'userEmail',
width:200, width: 200,
ellipsis:true ellipsis: true
}, },
{ {
title: t("admin.UserName"), title: t('admin.UserName'),
align: "center", align: 'center',
dataIndex: "userName", dataIndex: 'userName',
key: "userName", key: 'userName',
width:150, width: 150,
ellipsis:true ellipsis: true
// customRender: (record: any) => { // customRender: (record: any) => {
// let time = formatTime( // let time = formatTime(
// record.text / 1000, // record.text / 1000,
@@ -254,112 +256,112 @@ export default defineComponent({
// }, // },
}, },
{ {
title: t("admin.language"), title: t('admin.language'),
align: "center", align: 'center',
dataIndex: "language", dataIndex: 'language',
key: "language", key: 'language',
width:100, width: 100,
ellipsis:true, ellipsis: true,
customRender: (record: any) => { customRender: (record: any) => {
return t(`admin.${record.text}`); return t(`admin.${record.text}`)
}, }
}, },
{ {
title: t("admin.CreateDate"), title: t('admin.CreateDate'),
align: "center", align: 'center',
dataIndex: "createDate", dataIndex: 'createDate',
key: "createDate", key: 'createDate',
width:200, width: 200,
sorter: true, sorter: true
}, },
{ {
title: t("admin.Credits"), title: t('admin.Credits'),
align: "center", align: 'center',
// width: 150, // width: 150,
// minWidth: 100, // minWidth: 100,
// maxWidth: 200, // maxWidth: 200,
// resizable: true, // resizable: true,
dataIndex: "credits", dataIndex: 'credits',
key: "credits", key: 'credits',
width:100, width: 100,
sorter: true, sorter: true
}, },
{ {
title: t("admin.CreditsUsage"), title: t('admin.CreditsUsage'),
align: "center", align: 'center',
dataIndex: "creditsUsage", dataIndex: 'creditsUsage',
key: "creditsUsage", key: 'creditsUsage',
width:150, width: 150,
sorter: true, sorter: true
}, },
{ {
title: t("admin.CreditsUsageLimit"), title: t('admin.CreditsUsageLimit'),
align: "center", align: 'center',
dataIndex: "creditsUsageLimit", dataIndex: 'creditsUsageLimit',
key: "creditsUsageLimit", key: 'creditsUsageLimit',
width:200, width: 200,
sorter: true, sorter: true
}, },
{ {
title: t("admin.Operations"), title: t('admin.Operations'),
key: "operation", key: 'operation',
width:120, width: 120,
align: "center", align: 'center',
fixed: "right", fixed: 'right',
// slots:{customRender:'action'} // slots:{customRender:'action'}
Operations: true, Operations: true
}, }
]; ]
}); })
//改变页码 //改变页码
let changePage = (e: any, filters:any, sorter:any) => { let changePage = (e: any, filters: any, sorter: any) => {
filterData.currentPage = e.current; filterData.currentPage = e.current
filterData.pageSize = e.pageSize; filterData.pageSize = e.pageSize
if(sorter.order){ if (sorter.order) {
if(sorter.columnKey == 'id'){ if (sorter.columnKey == 'id') {
filterData.orderBy = 'id' filterData.orderBy = 'id'
}else if(sorter.columnKey == "createDate"){ } else if (sorter.columnKey == 'createDate') {
filterData.orderBy = 'time' filterData.orderBy = 'time'
}else if(sorter.columnKey == "credits"){ } else if (sorter.columnKey == 'credits') {
filterData.orderBy = 'credits' filterData.orderBy = 'credits'
} }
} }
if(sorter.order){ if (sorter.order) {
filterData.order = sorter.order == "descend" ? "Descending" : "Ascending"; filterData.order = sorter.order == 'descend' ? 'Descending' : 'Ascending'
}else{ } else {
filterData.order = '' filterData.order = ''
} }
gettrialList(); gettrialList()
}; }
//查询列表 //查询列表
let searchHistoryList = () => { let searchHistoryList = () => {
filterData.currentPage = 1; filterData.currentPage = 1
gettrialList(); gettrialList()
}; }
let clearHistoryList = () => { let clearHistoryList = () => {
filterData.rangePickerValue = [], ;(filterData.rangePickerValue = []),
filterData.currentPage = 1, (filterData.currentPage = 1),
filterData.pageSize = 10, (filterData.pageSize = 10),
filterData.total = 0, (filterData.total = 0),
filterData.country = "", (filterData.country = ''),
filterData.email = "", (filterData.email = ''),
filterData.userType = "", (filterData.userType = ''),
filterData.ids = [], (filterData.ids = []),
filterData.occupation = "", (filterData.occupation = ''),
filterData.order = "", //'Ascending 升序 Descending 降序' (filterData.order = ''), //'Ascending 升序 Descending 降序'
filterData.orderBy = "", //'Ascending 升序 Descending 降序' (filterData.orderBy = ''), //'Ascending 升序 Descending 降序'
filterData.systemUser = "", (filterData.systemUser = ''),
filterData.userName = ""; (filterData.userName = '')
}; }
let setHistoryListData = () => { let setHistoryListData = () => {
let startDate: any = filterData.rangePickerValue?.[0] let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0] + " " + "00:00:00" ? filterData.rangePickerValue[0] + ' ' + '00:00:00'
: ""; : ''
let endDate: any = filterData.rangePickerValue?.[1] let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1] + " " + "23:59:59" ? filterData.rangePickerValue[1] + ' ' + '23:59:59'
: ""; : ''
let data = { let data = {
endTime: endDate, endTime: endDate,
startTime: startDate, startTime: startDate,
@@ -374,151 +376,157 @@ export default defineComponent({
order: filterData.order, order: filterData.order,
orderBy: filterData.orderBy, orderBy: filterData.orderBy,
// userName: filterData.userName, // userName: filterData.userName,
userName: filterData.ids, userName: filterData.ids
}
}; return data
return data; }
};
//获取列表 //获取列表
let gettrialList = () => { let gettrialList = () => {
filter.tableLoading = true; filter.tableLoading = true
let data = setHistoryListData(); let data = setHistoryListData()
Https.axiosPost(Https.httpUrls.subAccountList, data).then( Https.axiosPost(Https.httpUrls.subAccountList, data).then((rv: any) => {
(rv: any) => {
if (rv) { if (rv) {
console.log(rv) console.log(rv)
// this.dataList = rv // this.dataList = rv
filter.dataList = rv.content; filter.dataList = rv.content
filterData.total = rv.total; filterData.total = rv.total
filter.tableLoading = false; filter.tableLoading = false
// this.workspaceItem.position = this.singleTypeList[0].label // this.workspaceItem.position = this.singleTypeList[0].label
} }
})
} }
);
};
let lastGeTrialList = (str: string) => { let lastGeTrialList = (str: string) => {
clearHistoryList(); clearHistoryList()
let currentDate = new Date(); let currentDate = new Date()
let currentTimestamp = Math.floor(currentDate.getTime() / 1000); let currentTimestamp = Math.floor(currentDate.getTime() / 1000)
// 计算30天前的时间戳 // 计算30天前的时间戳
let thirtyDaysAgoTimestamp; let thirtyDaysAgoTimestamp
if (str == "year") { if (str == 'year') {
thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60; thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60
} else if (str == "month") { } else if (str == 'month') {
thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60; thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60
} else if (str == "week") { } 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) => { let filterOption = (input: any, option: any) => {
// 使用 option.label 进行搜索 // 使用 option.label 进行搜索
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}; }
let addhHistoryList = () => { let addhHistoryList = () => {
allUserPoerationsVue.value.init({value:'Add',label:t('admin.add')},'') allUserPoerationsVue.value.init({ value: 'Add', label: t('admin.add') }, '')
}; }
let allUserPoerationsVue = ref() let allUserPoerationsVue = ref()
let setAagree = (data:any) =>{ let setAagree = (data: any) => {
allUserPoerationsVue.value.init({value:'Edit',label:t('admin.Edit')},data) allUserPoerationsVue.value.init({ value: 'Edit', label: t('admin.Edit') }, data)
} }
const downloadTemplate = ()=>{ const downloadTemplate = () => {
Https.axiosGet(Https.httpUrls.subAccountImportExcelDownload,{responseType: 'blob',env:{binary:true}}).then((rv:any)=>{ Https.axiosGet(Https.httpUrls.subAccountImportExcelDownload, {
const link = document.createElement('a'); responseType: 'blob',
link.href = rv.url; env: { binary: true }
link.download = 'file.xlsx'; // 设置正确的文件扩展名 }).then((rv: any) => {
document.body.appendChild(link); const link = document.createElement('a')
link.click(); link.href = rv.url
document.body.removeChild(link); link.download = 'file.xlsx' // 设置正确的文件扩展名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
// 释放 URL 对象 // 释放 URL 对象
URL.revokeObjectURL(link.href); URL.revokeObjectURL(link.href)
}) })
} }
const ExportAccountData = ()=>{ const ExportAccountData = () => {
Https.axiosGet(Https.httpUrls.exportAccountsToExcel,{headers:{responseType: 'blob',},env:{binary:true,binaryType:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'}}).then((rv:any)=>{ Https.axiosGet(Https.httpUrls.exportAccountsToExcel, {
const link = document.createElement('a'); headers: { responseType: 'blob' },
link.href = rv.url; env: {
link.download = 'file.xlsx'; // 设置正确的文件扩展名 binary: true,
document.body.appendChild(link); binaryType:
link.click(); 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
document.body.removeChild(link); }
}).then((rv: any) => {
const link = document.createElement('a')
link.href = rv.url
link.download = 'file.xlsx' // 设置正确的文件扩展名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
// 释放 URL 对象 // 释放 URL 对象
URL.revokeObjectURL(link.href); URL.revokeObjectURL(link.href)
}) })
} }
const uploadTemplate = ()=>{ const uploadTemplate = () => {
const fileInput = document.createElement('input'); const fileInput = document.createElement('input')
fileInput.type = 'file'; fileInput.type = 'file'
fileInput.accept = '.xlsx'; // 只接受 .xlsx 文件 fileInput.accept = '.xlsx' // 只接受 .xlsx 文件
fileInput.onchange = (event:any) => { fileInput.onchange = (event: any) => {
const file = event.target.files[0]; // 获取选择的文件 const file = event.target.files[0] // 获取选择的文件
if (file) { if (file) {
let param = new FormData(); let param = new FormData()
param.append('file',file); param.append('file', file)
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }} let config: any = {
Https.axiosPost(Https.httpUrls.subAccountImport,param,config) headers: { 'Content-Type': 'multipart/form-data', 'Accept': '*/*' }
.then((rv:any)=>{
gettrialList();
})
} }
}; Https.axiosPost(Https.httpUrls.subAccountImport, param, config).then(
fileInput.click(); (rv: any) => {
gettrialList()
} }
const confirmDelete = ()=>{ )
}
}
fileInput.click()
}
const confirmDelete = () => {
return new Promise<void>((resolve, reject) => { return new Promise<void>((resolve, reject) => {
Modal.confirm({ Modal.confirm({
title: t('admin.jsDelete'), title: t('admin.jsDelete'),
icon: createVNode(ExclamationCircleOutlined), icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes', okText: 'Yes',
cancelText: 'No', cancelText: 'No',
centered:true, centered: true,
onOk() { onOk() {
resolve(true) resolve(true)
}, },
onCancel(){ onCancel() {
resolve(false) resolve(false)
} }
}); })
}) })
} }
const deleteList = async ()=>{ const deleteList = async () => {
console.log(selectedRowKeys.value) console.log(selectedRowKeys.value)
if(selectedRowKeys.value.length == 0)return if (selectedRowKeys.value.length == 0) return
let boolean:any = await confirmDelete() let boolean: any = await confirmDelete()
if(!boolean){ if (!boolean) {
return return
} }
Https.axiosPost(Https.httpUrls.deleteSubAccount,{deleteIdList:selectedRowKeys.value}) Https.axiosPost(Https.httpUrls.deleteSubAccount, {
.then((rv:any)=>{ deleteIdList: selectedRowKeys.value
gettrialList(); }).then((rv: any) => {
gettrialList()
}) })
} }
const deleteAagree = async (event:any)=>{ const deleteAagree = async (event: any) => {
let boolean:any = await confirmDelete() let boolean: any = await confirmDelete()
if(!boolean){ if (!boolean) {
return return
} }
const value = { const value = {
deleteIdList:[event.id] deleteIdList: [event.id]
} }
Https.axiosPost(Https.httpUrls.deleteSubAccount,value) Https.axiosPost(Https.httpUrls.deleteSubAccount, value).then((rv: any) => {
.then((rv:any)=>{ gettrialList()
gettrialList();
}) })
} }
onMounted(() => { onMounted(() => {
let allCountry: any = sessionStorage.getItem("allCountry"); let allCountry: any = sessionStorage.getItem('allCountry')
if (allCountry) { if (allCountry) {
filter.allCountry = JSON.parse(allCountry); filter.allCountry = JSON.parse(allCountry)
} }
gettrialList(); gettrialList()
}); })
return { return {
...toRefs(filter), ...toRefs(filter),
...toRefs(filterData), ...toRefs(filterData),
@@ -536,23 +544,23 @@ export default defineComponent({
ExportAccountData, ExportAccountData,
uploadTemplate, uploadTemplate,
deleteList, deleteList,
deleteAagree, deleteAagree
}; }
}, },
data() { data() {
return { return {
historyTableHeight: 0, historyTableHeight: 0,
handleResizeColumn: (w: any, col: any) => { handleResizeColumn: (w: any, col: any) => {
col.width = w; col.width = w
}, }
}; }
}, },
mounted() { mounted() {
let historyTable: any = this.$refs.historyTable; let historyTable: any = this.$refs.historyTable
this.historyTableHeight = historyTable.clientHeight - 200; this.historyTableHeight = historyTable.clientHeight - 200
}, },
methods: {}, methods: {}
}); })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.admin_page .admin_table_search .admin_state { .admin_page .admin_table_search .admin_state {
@@ -565,9 +573,16 @@ export default defineComponent({
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 30%; width: 30%;
> .admin_search_item{ > .admin_search_item {
height: 4rem; height: 4rem;
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
.all-user {
.admin_table_content {
:deep(.ant-table-wrapper) {
overflow: hidden ;
}
}
}
</style> </style>