导出删除数据

src/views/server/employeehosts/index.vue

@@ -43,13 +43,20 @@
             <el-input v-model="queryParams.fllowernumMax" :placeholder="$t('employee.max')" clearable
               @keyup.enter="handleQuery" class="!w-115px" />
           </el-form-item>
-          <el-form-item :label="$t('employee.hostsCountry')" prop="country">
-            <el-select v-model="queryParams.country" :placeholder="$t('employee.placeHostsCountry')" clearable
-              class="!w-240px">
+          <el-form-item :label="t('newHosts.hostsCountry')" prop="region">
+            <el-select v-model="queryParams.region" :placeholder="t('newHosts.placeHostsCountry')" clearable
+              class="!w-240px" @change="changeCountry(queryParams.region)">
               <el-option v-for="dict in getStrDictOptions(DICT_TYPE.COUNTRY_GROUP)" :key="dict.value"
                 :label="$t(dict.label)" :value="dict.value" />
             </el-select>
           </el-form-item>
+          <el-form-item :label="t('newHosts.hostsCountryinfo')" prop="country">
+            <el-select v-model="queryParams.country" :placeholder="t('newHosts.placeHostsCountry')" clearable
+              class="!w-240px">
+              <el-option v-for="dict in countryinfoList" :key="dict.id" :label="dict.countryName"
+                :value="dict.countryName" />
+            </el-select>
+          </el-form-item>
           <el-form-item :label="$t('employee.hostsKind')" prop="hostsKind">
             <el-input v-model="queryParams.hostsKind" :placeholder="$t('employee.placeHostsKind')" clearable
               @keyup.enter="handleQuery" class="!w-240px" />
@@ -155,7 +162,7 @@
     </el-table>
 
     <!-- ✅ 移动端使用卡片列表 -->
-    <div v-else v-infinite-scroll="loadList">
+    <div v-else>
       <div v-for="(item, index) in list" :key="index" class="mobile-card">
         <div class="card-row" style="color:green;">
           <b>{{ $t('employee.hostsId') }}：</b><span @click="openHtml(item, item.hostsId)"
@@ -174,14 +181,16 @@
         <div class="card-row"><b>{{ $t('employee.operationStatus') }}：</b>
           <dict-tag :type="DICT_TYPE.OPERATION_STATE" :value="item.operationStatus" />
         </div>
-        <div class="card-row"><b>{{ $t('employee.createTime') }}：</b>{{ item.createTime }}</div>
-        <div class="card-row"><b>{{ $t('employee.updateTime') }}：</b>{{ item.updateTime }}</div>
+        <div class="card-row"><b>{{ $t('employee.createTime') }}：</b>{{ formatTimestamp(item.createTime) }}</div>
+        <div class="card-row"><b>{{ $t('employee.updateTime') }}：</b>{{ formatTimestamp(item.updateTime) }}</div>
         <div class="card-row action-row">
           <el-button link type="primary" @click="openForm('update', item.id, index)">{{ $t('employee.edit')
           }}</el-button>
         </div>
       </div>
     </div>
+    <MobilePagination v-if="isMobile" :page="queryParams.pageNo" :limit="queryParams.pageSize" :total="total"
+      @update:page="val => queryParams.pageNo = val" @load="loadList" @loadPre="loadpreviousList" />
 
     <!-- ✅ PC 显示分页，移动端隐藏 -->
     <Pagination v-if="!isMobile" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@@ -199,9 +208,10 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { EmployeeHostsApi, EmployeeHostsVO } from '@/api/server/employeehosts'
 import EmployeeHostsForm from './EmployeeHostsForm.vue'
-import { getAllocation } from '@/api/system/user'
+import { getAllocation, getCountry } from '@/api/system/user'
 import { useCache } from '@/hooks/web/useCache'
 import { func } from 'vue-types'
+import MobilePagination from '@/components/MobilePagination.vue'
 
 const { wsCache } = useCache()
 
@@ -216,7 +226,7 @@ const list = ref<EmployeeHostsVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
-  pageSize: 10,
+  pageSize: 20,
   hostsId: undefined,
   hostsLevel: undefined,
   onlineFansMin: undefined,
@@ -230,6 +240,7 @@ const queryParams = reactive({
   invitationType: undefined,
   yesterdayCoins: undefined,
   country: undefined,
+  region: undefined,
   hostsKind: undefined,
   isAssigned: undefined,
   createTime: [],
@@ -247,6 +258,7 @@ let allocationUserList = ref([
 ]) //选中的分配用户
 let selectHostList = ref([]) //选中的主播列表
 let allocationUser = ref() //选中的分配用户
+let countryinfoList = ref([])
 /** 查询列表pc直接赋值 */
 const getList = async () => {
   loading.value = true
@@ -361,13 +373,20 @@ function openHtml(item, id) {
   window.open(`https://www.tiktok.com/@${id}`)
 
 }
-
 const loadList = () => {
   if (queryParams.pageNo < Math.ceil(total.value / queryParams.pageSize)) {
     queryParams.pageNo++
-    getListPhone()
+    getList()
   }
 }
+
+const loadpreviousList = () => {
+  if (queryParams.pageNo > 1) {
+    queryParams.pageNo--
+    getList()
+  }
+}
+
 function formSuccess(data, index) {
   if (isMobile.value) {
     console.log(data, index)
@@ -378,6 +397,19 @@ function formSuccess(data, index) {
 
 }
 
+function formatTimestamp(milliseconds) {
+  const date = new Date(milliseconds); // 直接使用毫秒级时间戳
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+
 //分配按钮操作
 const handleSelectionChange = (val) => {
   selectHostList.value = val
@@ -475,7 +507,13 @@ onMounted(() => {
 
 })
 
+function changeCountry(region) {
+  console.log(region)
+  getCountry(region).then((res) => {
+    countryinfoList.value = res
 
+  })
+}
 // /** 初始化 **/
 // onMounted(() => {
 //   getList()