Merge branch 'cheney' into dev

src/views/shop-information/api.ts

@@ -87,3 +87,19 @@ export function getOperator() {
     method: 'GET',
   });
 }
+
+export function getInfoTableData(query: any) {
+  return request({
+    url: apiPrefix + 'current/',
+    method: 'GET',
+    params: query,
+  });
+}
+
+export function getFilterOptions(query: any) {
+  return request({
+    url:  apiPrefix+ 'filter/box/',
+    method: 'GET',
+    params: query,
+  });
+}

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

@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+/**
+ * @Name: DataTable.vue
+ * @Description:
+ * @Author: Cheney
+ */
+
+import { usePagination } from '/@/utils/usePagination';
+import { shopInfoColumns } from '/@/views/shop-information/useColumns';
+import * as api from '../api';
+import { useTableData } from '/@/utils/useTableData';
+import { useResponse } from '/@/utils/useResponse';
+
+
+const { tableOptions, handlePageChange } = usePagination(fetchList);
+
+const gridRef = ref();
+const gridOptions: any = reactive({
+  // size: 'small',
+  border: false,
+  round: true,
+  stripe: true,
+  currentRowHighLight: true,
+  height: 1000,
+  toolbarConfig: {
+    size: 'large',
+    custom: true,
+    slots: {
+      buttons: 'toolbar_buttons',
+      tools: 'toolbar_tools'
+    }
+  },
+  rowConfig: {
+    isHover: true
+  },
+  columnConfig: {
+    resizable: true
+  },
+  pagerConfig: {
+    total: tableOptions.value.total,
+    page: tableOptions.value.page,
+    limit: tableOptions.value.limit
+  },
+  loading: false,
+  loadingConfig: {
+    icon: 'vxe-icon-indicator roll',
+    text: '正在拼命加载中...'
+  },
+  columns: '',
+  data: ''
+});
+
+const platformNumber = ref('');
+const platform = ref('');
+const operatorName = ref('');
+const country = ref('');
+const company = ref('');
+
+const splitOperator = ref('');
+const splitCountry = ref('');
+
+const tempOperator = ref('');
+const tempCountry = ref('');
+
+const countryOption = ref([]);
+const platformOption = ref([]);
+const operatorOption = ref([]);
+
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 20;
+  fetchFilterOptions();
+});
+
+onMounted(() => {
+  fetchList();
+});
+
+async function fetchFilterOptions() {
+  const res = await useResponse({}, api.getFilterOptions);
+  countryOption.value = res.data.country;
+  platformOption.value = res.data.platform;
+  operatorOption.value = res.data.operatorName;
+}
+
+async function fetchList() {
+  gridOptions.data = [];
+  gridOptions.columns = [];
+
+  const query = {
+    platformNumber: platformNumber.value,
+    platform: platform.value,
+    operatorName: splitOperator.value,
+    country: splitCountry.value,
+    company: company.value
+  };
+  
+  tempOperator.value = query.operatorName;
+  tempCountry.value = query.country;
+  
+  await useTableData(api.getInfoTableData, query, gridOptions);
+  await gridRef.value.loadColumn(shopInfoColumns);
+  gridOptions.showHeader = Boolean(gridOptions.data?.length);
+}
+
+async function processParameter() {
+  if (operatorName.value) {
+    splitOperator.value = operatorName.value ? operatorName.value + ',' : '';
+    splitOperator.value = splitOperator.value.slice(0, -1);
+  }
+  if (country.value) {
+    splitCountry.value = country.value ? country.value + ',' : '';
+    splitCountry.value = splitCountry.value.slice(0, -1);
+  }
+}
+
+function parameterChange() {
+  if (operatorName.value.toString() != tempOperator.value || country.value.toString() != tempCountry.value) {
+    fetchList();
+  }
+}
+</script>
+
+<template>
+  <vxe-grid ref="gridRef" v-bind="gridOptions">
+    <template #toolbar_buttons>
+      <el-row :gutter="20" class="w-full whitespace-nowrap">
+        <el-col :span="4">
+          <div class="flex items-center gap-1.5">
+            <span class="font-medium">运营</span>
+            <el-select v-model="operatorName" clearable collapse-tags collapse-tags-tooltip multiple
+                       @blur="parameterChange"
+                       @change="processParameter">
+              <el-option v-for="item in operatorOption" :label="item" :value="item" />
+            </el-select>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="flex items-center gap-1.5">
+            <span class="font-medium">国家</span>
+            <el-select v-model="country" clearable collapse-tags collapse-tags-tooltip multiple
+                       @blur="parameterChange"
+                       @change="processParameter">
+              <el-option v-for="item in countryOption" :label="item" :value="item" />
+            </el-select>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="flex items-center gap-1.5">
+            <span class="font-medium">平台</span>
+            <el-select v-model="platform" clearable @change="fetchList">
+              <el-option v-for="item in platformOption" :label="item" :value="item" />
+            </el-select>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="flex items-center gap-1.5">
+            <span class="font-medium">平台编号</span>
+            <el-input v-model="platformNumber" clearable @change="fetchList" />
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="flex items-center gap-1.5">
+            <span class="font-medium">公司</span>
+            <el-input v-model="company" clearable placeholder="请输入公司名称" @change="fetchList" />
+          </div>
+        </el-col>
+      </el-row>
+    </template>
+    <template #pager>
+      <vxe-pager
+          v-model:currentPage="gridOptions.pagerConfig.page"
+          v-model:pageSize="gridOptions.pagerConfig.limit"
+          :total="gridOptions.pagerConfig.total"
+          class="mt-1.5"
+          @page-change="handlePageChange"
+      />
+    </template>
+  </vxe-grid>
+</template>
+
+<style scoped>
+
+</style>

src/views/shop-information/index.vue

@@ -8,6 +8,7 @@
 import InfoCard from '/@/views/shop-information/components/InfoCard.vue';
 import * as api from '/@/views/shop-information/api';
 import { useResponse } from '/@/utils/useResponse';
+import DataTable from './components/DataTable.vue';
 
 
 const cardData = ref();
@@ -15,6 +16,8 @@ provide('cardData', cardData);
 
 const loading = ref(false);
 
+const activeName = ref('first');
+
 onBeforeMount(() => {
   initData();
 });
@@ -30,10 +33,16 @@ async function initData() {
     <el-divider content-position="left">
       <div class="font-bold text-xl">店铺信息概览</div>
     </el-divider>
-
     <!-- 添加 flex-grow 类，确保 el-card 占据剩余空间 -->
     <el-card v-loading="loading" class="flex-grow" shadow="never">
-      <InfoCard></InfoCard>
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="信息概览" name="first">
+          <InfoCard />
+        </el-tab-pane>
+        <el-tab-pane label="信息汇总" name="second" lazy>
+          <DataTable ref="table" />
+        </el-tab-pane>
+      </el-tabs>
     </el-card>
   </div>
 </template>

src/views/shop-information/useColumns.tsx

@@ -684,3 +684,221 @@ export const computerColumns: any = [
   }
 ];
 
+export const shopInfoColumns = [
+  { type: 'seq', title: '序 号', width: 60, 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 (
+            <el-tag
+                class="font-medium"
+                type={ row.status === 1 ? 'success' : 'danger' }   // 动态绑定 type
+            >
+              { row.status === 1 ? '启用' : '暂停' }
+            </el-tag>
+        );
+      }
+    }
+  },
+  {
+    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: 'belongsCompany', title: '关联公司', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        const company = companySelect.value.find(c => c.id === row.belongsCompany);
+        return <span class="font-medium">{ company ? company.company : '--' }</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: 'shopPhoneAndName', title: '主账户电话', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.shopPhoneAndName !== null ? row.shopPhoneAndName : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'shopEmail', title: '主账户邮箱', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.shopEmail ? row.shopEmail : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'subShopPhoneAndName', title: '子账户电话', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.subShopPhoneAndName ? row.subShopPhoneAndName : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'subShopEmail', title: '子账户邮箱', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.subShopEmail ? row.subShopEmail : '--' }</span>;
+      }
+    }
+  }
+]
+