✨ feat: 新增店铺详情表格切换

src/views/shop-information/api.ts

@@ -35,7 +35,6 @@ export function getShopDetailOverview(query: any) {
   });
 }
 
-
 export function getCurrentInfo(query: any) {
   return request({
     url: apiPrefix + 'current/',
@@ -43,3 +42,19 @@ export function getCurrentInfo(query: any) {
     params: query,
   });
 }
+
+export function getHistoryInfo(query: any) {
+  return request({
+    url: apiPrefix + 'past/',
+    method: 'GET',
+    params: query,
+  });
+}
+
+export function getComputerInfo(query: any) {
+  return request({
+    url: apiPrefix + 'computer/',
+    method: 'GET',
+    params: query,
+  });
+}

src/views/shop-information/components/PlatformDetail.vue

@@ -18,7 +18,6 @@ const route = useRoute();
 const platform = route.query.platform;
 const platformOverview: any = ref([]);
 const overviewLoading = ref();
-// const selectedTab = ref('1');
 const { tableOptions, handlePageChange } = usePagination(fetchPlatformDetail);
 const platformTableData = ref([]);
 const gridOptions: any = reactive({
@@ -64,13 +63,6 @@ async function fetchPlatformDetail() {
   await useTableData(api.getTableData, query, gridOptions)
 }
 
-function pageChange({ pageSize, currentPage }: any) {
-  gridOptions.pagerConfig.limit = pageSize;
-  gridOptions.pagerConfig.page = currentPage;
-  fetchPlatformDetail();
-}
-
-
 async function fetchPlatformDetailOverview() {
   const res = await useResponse({ platform }, api.getPlatformDetailOverview, overviewLoading);
   platformOverview.value = res.data;

src/views/shop-information/components/ShopDetail.vue

@@ -8,17 +8,17 @@
 import { Picture as IconPicture, RefreshLeft, Timer, Monitor } from '@element-plus/icons-vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '/@/views/shop-information/api';
-import { shopCurrentColumns } from '/@/views/shop-information/useColumns';
-
+import { computerColumns, historyColumns, shopCurrentColumns } from '/@/views/shop-information/useColumns';
+import { useTableData } from '/@/utils/useTableData';
+import { usePagination } from '/@/utils/usePagination';
 
 
 const route = useRoute();
 const platformNumber = route.query.platformNumber;
 const shopOverview: any = ref([]);
-const overviewLoading = ref();
+const overviewLoading = ref(false);
 const selectedTab = ref('1');
-
-const currentInfoData = ref([]);
+const { tableOptions, handlePageChange } = usePagination(handleTabChange);
 const gridOptions: any = reactive({
   border: false,
   round: true,
@@ -38,9 +38,9 @@ const gridOptions: any = reactive({
     resizable: true
   },
   pagerConfig: {
-    total: 0,
-    page: 1,
-    limit: 10
+    total: tableOptions.value.total,
+    page: tableOptions.value.page,
+    limit: tableOptions.value.limit
   },
   loading: false,
   loadingConfig: {
@@ -48,13 +48,12 @@ const gridOptions: any = reactive({
     text: '正在拼命加载中...'
   },
   columns: shopCurrentColumns,
-  data: currentInfoData
+  data: tableOptions.value.data
 });
 
-
 onBeforeMount(() => {
   fetchShopDetailOverview();
-  fetchCurrentInfo();
+  handleTabChange(selectedTab.value);
 });
 
 async function fetchShopDetailOverview() {
@@ -62,29 +61,24 @@ async function fetchShopDetailOverview() {
   shopOverview.value = res.data;
 }
 
-async function fetchCurrentInfo() {
+async function handleTabChange(tabValue: any) {
+  gridOptions.pagerConfig.page = 1;
+  gridOptions.pagerConfig.limit = 10;
   const query = {
     platformNumber,
     page: gridOptions.pagerConfig.page,
     limit: gridOptions.pagerConfig.limit
   };
-  const res = await useResponse(query, api.getCurrentInfo, gridOptions);
-  gridOptions.pagerConfig.total = res.total;
-  gridOptions.pagerConfig.page = res.page;
-  gridOptions.pagerConfig.limit = res.limit;
-  currentInfoData.value = res.data;
-}
-
-function pageChange({ pageSize, currentPage }: any) {
-  gridOptions.pagerConfig.limit = pageSize;
-  gridOptions.pagerConfig.page = currentPage;
-  fetchCurrentInfo();
-}
-
-function handleTabChange(tabValue: any) {
-  console.log("(PlatformDetail.vue: 82)=> tabValue", tabValue);
-  if (tabValue === '2') {
-    const query = {};
+  switch (tabValue) {
+    case '1':
+      gridOptions.columns = shopCurrentColumns;
+      await useTableData(api.getCurrentInfo, query, gridOptions); break  
+    case '2':
+      gridOptions.columns = historyColumns;
+      await useTableData(api.getHistoryInfo, query, gridOptions); break
+    case '3': 
+      gridOptions.columns = computerColumns;
+      await useTableData(api.getComputerInfo, query, gridOptions); break
   }
 }
 </script>
@@ -164,41 +158,39 @@ function handleTabChange(tabValue: any) {
     <el-card body-style="padding-top: 10px" class="mt-2.5" shadow="hover" style="border: none">
       <vxe-grid v-bind="gridOptions">
         <template #toolbar_buttons>
-          <el-radio-group v-model="selectedTab" @change="handleTabChange">
+          <el-radio-group v-model="selectedTab" @change="handleTabChange(selectedTab)">
             <el-radio-button label="当前信息" value="1">
               <template #default>
-                <el-icon style="top: 2px;"><Timer /></el-icon>
+                <el-icon style="top: 2px;">
+                  <Timer/>
+                </el-icon>
                 当前信息
               </template>
             </el-radio-button>
             <el-radio-button label="历史记录" value="2">
               <template #default>
-                <el-icon style="top: 2px;"><RefreshLeft /></el-icon>
+                <el-icon style="top: 2px;">
+                  <RefreshLeft/>
+                </el-icon>
                 历史记录
               </template>
             </el-radio-button>
             <el-radio-button label="电脑信息" value="3">
               <template #default>
-                <el-icon style="top: 2px;"><Monitor /></el-icon>
+                <el-icon style="top: 2px;">
+                  <Monitor/>
+                </el-icon>
                 电脑信息
               </template>
             </el-radio-button>
           </el-radio-group>
         </template>
-        <!--<template #platformNumber="{ row }">-->
-        <!--  <el-button link style="font-weight: 700" type="primary" @click="handleNavigate(row)">-->
-        <!--    <el-icon>-->
-        <!--      <Link/>-->
-        <!--    </el-icon>-->
-        <!--    {{ row.platformNumber ? row.platformNumber : '&#45;&#45;' }}-->
-        <!--  </el-button>-->
-        <!--</template>-->
         <template #pager>
           <vxe-pager
               v-model:currentPage="gridOptions.pagerConfig.page"
               v-model:pageSize="gridOptions.pagerConfig.limit"
               :total="gridOptions.pagerConfig.total"
-              @page-change="pageChange"
+              @page-change="handlePageChange"
           >
           </vxe-pager>
         </template>

src/views/shop-information/useColumns.tsx

@@ -6,7 +6,7 @@ const countryInfoStore = useCountryInfoStore();
 export const platformColumns = [
   { type: 'seq', width: 50, align: 'center', fixed: 'left' },
   {
-    field: 'operatorName', title: '运营', width: 'auto', align: 'center',  fixed: 'left',
+    field: 'operatorName', title: '运营', minWidth: 'auto', align: 'center',  fixed: 'left',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.operatorName ? row.operatorName : '--' }</span>;
@@ -14,17 +14,17 @@ export const platformColumns = [
     }
   },
   {
-    field: 'platformNumber', title: '平台编号', width: 'auto', align: 'center', slots: { default: 'platformNumber' }
+    field: 'platformNumber', title: '平台编号', minWidth: 'auto', align: 'center', slots: { default: 'platformNumber' }
   },
   {
-    field: 'platformName', title: '平台名称', width: 'auto', align: 'center', slots: {
+    field: 'platformName', title: '平台名称', minWidth: 'auto', align: 'center', slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' } style={{color: '#303133'}}>{ row.platformName ? row.platformName : '--' }</span>;
       }
     }
   },
   {
-    field: 'country', title: '国家', width: 'auto', align: 'center',
+    field: 'country', title: '国家', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         const country = countryInfoStore.countries.find(c => c.name === row.country);
@@ -34,7 +34,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'brandName', title: '品牌名称', width: 'auto', align: 'center',
+    field: 'brandName', title: '品牌名称', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.brandName ? row.brandName : '--' }</span>;
@@ -42,7 +42,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'currencyCode', title: '货币代码', width: 'auto', align: 'center',
+    field: 'currencyCode', title: '货币代码', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.currencyCode ? row.currencyCode : '--' }</span>;
@@ -50,7 +50,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'status', title: '状态', width: 'auto', align: 'center',
+    field: 'status', title: '状态', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.status ? row.status : '--' }</span>;
@@ -58,7 +58,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'platform', title: '平台', width: 'auto', align: 'center',
+    field: 'platform', title: '平台', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.platform ? row.platform : '--' }</span>;
@@ -66,7 +66,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'line', title: '线路', width: 'auto', align: 'center',
+    field: 'line', title: '线路', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.line ? row.line : '--' }</span>;
@@ -74,7 +74,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'ipaddress', title: 'IP地址', width: 'auto', align: 'center',
+    field: 'ipaddress', title: 'IP地址', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.ipaddress ? row.ipaddress : '--' }</span>;
@@ -82,7 +82,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'company', title: '公司名称', width: 'auto', align: 'center',
+    field: 'company', title: '公司名称', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.company ? row.company : '--' }</span>;
@@ -90,7 +90,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'companyEnglishName', title: '公司英文名称', width: 'auto', align: 'center',
+    field: 'companyEnglishName', title: '公司英文名称', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.companyEnglishName ? row.companyEnglishName : '--' }</span>;
@@ -106,7 +106,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'juridicalPerson', title: '法人', width: 'auto', align: 'center',
+    field: 'juridicalPerson', title: '法人', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.juridicalPerson ? row.juridicalPerson : '--' }</span>;
@@ -114,7 +114,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'juridicalPersonCreditCard', title: '法人信用卡', width: 'auto', align: 'center',
+    field: 'juridicalPersonCreditCard', title: '法人信用卡', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.juridicalPersonCreditCard ? row.juridicalPersonCreditCard : '--' }</span>;
@@ -122,7 +122,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'juridicalPersonCreditCardAddress', title: '法人信用卡地址', width: 'auto', align: 'center',
+    field: 'juridicalPersonCreditCardAddress', title: '法人信用卡地址', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.juridicalPersonCreditCardAddress ? row.juridicalPersonCreditCardAddress : '--' }</span>;
@@ -130,7 +130,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'receivablesAccount', title: '收款账户', width: 'auto', align: 'center',
+    field: 'receivablesAccount', title: '收款账户', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.receivablesAccount ? row.receivablesAccount : '--' }</span>;
@@ -138,7 +138,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'receivablesAccountCompany', title: '收款账户公司', width: 'auto', align: 'center',
+    field: 'receivablesAccountCompany', title: '收款账户公司', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.receivablesAccountCompany ? row.receivablesAccountCompany : '--' }</span>;
@@ -154,7 +154,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'vatCompany', title: 'VAT公司', width: 'auto', align: 'center',
+    field: 'vatCompany', title: 'VAT公司', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.vatCompany ? row.vatCompany : '--' }</span>;
@@ -162,7 +162,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'shopPhoneEmail', title: '店铺电话与邮箱', width: 'auto', align: 'center',
+    field: 'shopPhoneEmail', title: '店铺电话与邮箱', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.shopPhoneEmail ? row.shopPhoneEmail : '--' }</span>;
@@ -174,7 +174,7 @@ export const platformColumns = [
 export const shopCurrentColumns = [
   { type: 'seq', width: 50, align: 'center', fixed: 'left' },
   {
-    field: 'operatorName', title: '运营', width: 'auto', align: 'center', fixed: 'left',
+    field: 'operatorName', title: '运营', minWidth: 'auto', align: 'center', fixed: 'left',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.operatorName ? row.operatorName : '--'}</span>;
@@ -182,7 +182,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'platformNumber', title: '平台编号', width: 'auto', align: 'center',
+    field: 'platformNumber', title: '平台编号', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.platformNumber ? row.platformNumber : '--'}</span>;
@@ -190,7 +190,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'platformName', title: '平台名称', width: 'auto', align: 'center',
+    field: 'platformName', title: '平台名称', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.platformName ? row.platformName : '--'}</span>;
@@ -198,7 +198,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'country', title: '国家', width: 'auto', align: 'center',
+    field: 'country', title: '国家', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         const country = countryInfoStore.countries.find(c => c.name === row.country);
@@ -208,7 +208,7 @@ export const shopCurrentColumns = [
     }
   },
   {
-    field: 'brandName', title: '品牌名称', width: 'auto', align: 'center',
+    field: 'brandName', title: '品牌名称', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.brandName ? row.brandName : '--'}</span>;
@@ -216,7 +216,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'currencyCode', title: '货币代码', width: 'auto', align: 'center',
+    field: 'currencyCode', title: '货币代码', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.currencyCode ? row.currencyCode : '--'}</span>;
@@ -224,7 +224,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'status', title: '状态', width: 'auto', align: 'center',
+    field: 'status', title: '状态', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.status ? row.status : '--'}</span>;
@@ -232,7 +232,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'platform', title: '平台', width: 'auto', align: 'center',
+    field: 'platform', title: '平台', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.platform ? row.platform : '--'}</span>;
@@ -240,7 +240,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'line', title: '线路', width: 'auto', align: 'center',
+    field: 'line', title: '线路', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.line ? row.line : '--'}</span>;
@@ -248,7 +248,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'ipaddress', title: 'IP地址', width: 'auto', align: 'center',
+    field: 'ipaddress', title: 'IP地址', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.ipaddress ? row.ipaddress : '--'}</span>;
@@ -256,7 +256,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'company', title: '公司名称', width: 'auto', align: 'center',
+    field: 'company', title: '公司名称', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.company ? row.company : '--'}</span>;
@@ -264,7 +264,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'companyEnglishName', title: '公司英文名称', width: 'auto', align: 'center',
+    field: 'companyEnglishName', title: '公司英文名称', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.companyEnglishName ? row.companyEnglishName : '--'}</span>;
@@ -272,7 +272,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'address', title: '公司地址', width: 'auto', align: 'center',
+    field: 'address', title: '公司地址', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.address ? row.address : '--'}</span>;
@@ -280,7 +280,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'juridicalPerson', title: '法人', width: 'auto', align: 'center',
+    field: 'juridicalPerson', title: '法人', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.juridicalPerson ? row.juridicalPerson : '--'}</span>;
@@ -288,7 +288,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'juridicalPersonCreditCard', title: '法人信用卡', width: 'auto', align: 'center',
+    field: 'juridicalPersonCreditCard', title: '法人信用卡', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.juridicalPersonCreditCard ? row.juridicalPersonCreditCard : '--'}</span>;
@@ -296,7 +296,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'juridicalPersonCreditCardAddress', title: '法人信用卡地址', width: 'auto', align: 'center',
+    field: 'juridicalPersonCreditCardAddress', title: '法人信用卡地址', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.juridicalPersonCreditCardAddress ? row.juridicalPersonCreditCardAddress : '--'}</span>;
@@ -304,7 +304,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'receivablesAccount', title: '收款账户', width: 'auto', align: 'center',
+    field: 'receivablesAccount', title: '收款账户', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.receivablesAccount ? row.receivablesAccount : '--'}</span>;
@@ -312,7 +312,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'receivablesAccountCompany', title: '收款账户公司', width: 'auto', align: 'center',
+    field: 'receivablesAccountCompany', title: '收款账户公司', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.receivablesAccountCompany ? row.receivablesAccountCompany : '--'}</span>;
@@ -320,7 +320,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'vatNumber', title: 'VAT税号', width: 'auto', align: 'center',
+    field: 'vatNumber', title: 'VAT税号', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.vatNumber ? row.vatNumber : '--'}</span>;
@@ -328,7 +328,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'vatCompany', title: 'VAT公司', width: 'auto', align: 'center',
+    field: 'vatCompany', title: 'VAT公司', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.vatCompany ? row.vatCompany : '--'}</span>;
@@ -336,7 +336,7 @@ export const shopCurrentColumns = [
     },
   },
   {
-    field: 'shopPhoneEmail', title: '店铺电话邮箱', width: 'auto', align: 'center',
+    field: 'shopPhoneEmail', title: '店铺电话邮箱', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={'font-medium'}>{row.shopPhoneEmail ? row.shopPhoneEmail.join(', ') : '--'}</span>;
@@ -344,3 +344,274 @@ export const shopCurrentColumns = [
     },
   }
 ];
+
+export const historyColumns: any = [
+  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  {
+    field: 'operatorName', title: '运营', minWidth: 'auto', align: 'center', fixed: 'left',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.operatorName ? row.operatorName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'platformNumber', title: '平台编号', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.platformNumber ? row.platformNumber : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'platformName', title: '平台名称', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.platformName ? row.platformName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'country', title: '国家', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        const country = countryInfoStore.countries.find(c => c.name === row.country);
+        const color = country ? country.color : '#3875F6';
+        return <el-tag effect="plain" round style={{ color: color, borderColor: color }}>{ row.country ? row.country : '--' }</el-tag>;
+      }
+    }
+  },
+  {
+    field: 'brandName', title: '品牌名称', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.brandName ? row.brandName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'currencyCode', title: '货币代码', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.currencyCode ? row.currencyCode : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'status', title: '状态', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.status ? row.status : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'platform', title: '平台', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.platform ? row.platform : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'line', title: '线路', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.line ? row.line : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'ipaddress', title: 'IP地址', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.ipaddress ? row.ipaddress : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'company', title: '公司名称', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.company ? row.company : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'companyEnglishName', title: '公司英文名称', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.companyEnglishName ? row.companyEnglishName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'address', title: '公司地址', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.address ? row.address : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'juridicalPerson', title: '法人', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.juridicalPerson ? row.juridicalPerson : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'juridicalPersonCreditCard', title: '法人信用卡', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.juridicalPersonCreditCard ? row.juridicalPersonCreditCard : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'juridicalPersonCreditCardAddress', title: '法人信用卡地址', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.juridicalPersonCreditCardAddress ? row.juridicalPersonCreditCardAddress : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'receivablesAccount', title: '收款账户', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.receivablesAccount ? row.receivablesAccount : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'receivablesAccountCompany', title: '收款账户公司', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.receivablesAccountCompany ? row.receivablesAccountCompany : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'vatNumber', title: 'VAT税号', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.vatNumber ? row.vatNumber : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'vatCompany', title: 'VAT公司', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.vatCompany ? row.vatCompany : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'create_datetime', title: '创建时间', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.create_datetime ? row.create_datetime : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'approveNum', title: '审批数量', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.approveNum ? row.approveNum : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'shopPhoneEmail', title: '店铺电话邮箱', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        const phoneEmail = [row.shopPhoneAndName, row.shopEmail, row.subShopPhoneAndName, row.subShopEmail].filter(item => item).join(', ');
+        return <span class={'font-medium'}>{phoneEmail ? phoneEmail : '--'}</span>;
+      },
+    },
+  },
+];
+
+
+export const computerColumns: any = [
+  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  {
+    field: 'platformNumber', title: '平台编号', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.platformNumber ? row.platformNumber : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'platform', title: '平台', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.platform ? row.platform : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'platformName', title: '平台名称', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.platformName ? row.platformName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'country', title: '国家', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        const country = countryInfoStore.countries.find(c => c.name === row.country);
+        const color = country ? country.color : '#3875F6';
+        return <el-tag effect="plain" round style={{ color: color, borderColor: color }}>{ row.country ? row.country : '--' }</el-tag>;
+      }
+    }
+  },
+  {
+    field: 'userName', title: '用户名', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.userName ? row.userName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'company', title: '公司名称', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.company ? row.company : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'ipaddress', title: 'IP地址', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.ipaddress ? row.ipaddress : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'macaddress', title: 'MAC地址', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.macaddress ? row.macaddress : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'computerType', title: '计算机类型', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.computerType ? row.computerType : '--'}</span>;
+      },
+    },
+  },
+];
+