Merge branch '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/components/EditDrawer.vue

@@ -182,7 +182,7 @@ function replaceCol() {
     if (key in gridOptions.data[0]) {
       // 特殊处理 operatorName 字段
       if (key === 'operatorName') {
-        const names = gridOptions.data[0][key].split(','); // 以逗号分隔
+        const names = gridOptions.data[0][key].split(',');
         const ids = names
             .map((name: any) => {
               const operator = operatorOption.find(opt => opt.name === name.trim()); // 去除多余空格并查找
@@ -198,10 +198,6 @@ function replaceCol() {
   }, {} as { [key: string]: any });
   Object.assign(ruleForm, result);
 }
-
-function xx() {
-  console.log('ruleForm.operatorName=> ', ruleForm.operatorName);
-}
 </script>
 
 <template>
@@ -214,7 +210,7 @@ function xx() {
         label-width="auto"
         status-icon>
       <el-form-item label="运营" prop="operatorName">
-        <el-select v-model="ruleForm.operatorName" collapse-tags collapse-tags-tooltip multiple @change="xx">
+        <el-select v-model="ruleForm.operatorName" collapse-tags collapse-tags-tooltip multiple>
           <el-option v-for="item in operatorOption" :key="item.id" :label="item.name" :value="item.id">
           </el-option>
         </el-select>

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

@@ -17,9 +17,9 @@ async function main() {
 main();
 
 export const platformColumns = [
-  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  { type: 'seq', title: '序 号', width: 60, align: 'center', fixed: 'left' },
   {
-    field: 'operatorName', title: '运营', minWidth: '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>;
@@ -38,7 +38,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'country', title: '国家', minWidth: 'auto', align: 'center',
+    field: 'country', title: '国 家', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         const country = countryInfoStore.countries.find(c => c.name === row.country);
@@ -65,7 +65,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'status', title: '状态', minWidth: 'auto', align: 'center',
+    field: 'status', title: '状 态', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.status ? row.status : '--' }</span>;
@@ -73,7 +73,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'platform', title: '平台', minWidth: 'auto', align: 'center',
+    field: 'platform', title: '平 台', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.platform ? row.platform : '--' }</span>;
@@ -81,7 +81,7 @@ export const platformColumns = [
     }
   },
   {
-    field: 'line', title: '线路', minWidth: 'auto', align: 'center',
+    field: 'line', title: '线 路', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.line ? row.line : '--' }</span>;
@@ -190,9 +190,9 @@ export const platformColumns = [
 ];
 
 export const shopCurrentColumns = [
-  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  { type: 'seq', title: '序 号', width: 60, align: 'center', fixed: 'left' },
   {
-    field: 'operatorName', title: '运营', minWidth: '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>;
@@ -216,7 +216,7 @@ export const shopCurrentColumns = [
     }
   },
   {
-    field: 'country', title: '国家', minWidth: 'auto', align: 'center',
+    field: 'country', title: '国 家', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         const country = countryInfoStore.countries.find(c => c.name === row.country);
@@ -243,7 +243,7 @@ export const shopCurrentColumns = [
     }
   },
   {
-    field: 'status', title: '状态', minWidth: 'auto', align: 'center',
+    field: 'status', title: '状 态', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return (
@@ -258,7 +258,7 @@ export const shopCurrentColumns = [
     }
   },
   {
-    field: 'platform', title: '平台', minWidth: 'auto', align: 'center',
+    field: 'platform', title: '平 台', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.platform ? row.platform : '--' }</span>;
@@ -266,7 +266,7 @@ export const shopCurrentColumns = [
     }
   },
   {
-    field: 'line', title: '线路', minWidth: 'auto', align: 'center',
+    field: 'line', title: '线 路', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.line ? row.line : '--' }</span>;
@@ -315,7 +315,7 @@ export const shopCurrentColumns = [
     }
   },
   {
-    field: 'juridicalPerson', title: '法人', minWidth: 'auto', align: 'center',
+    field: 'juridicalPerson', title: '法 人', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.juridicalPerson ? row.juridicalPerson : '--' }</span>;
@@ -408,9 +408,9 @@ export const shopCurrentColumns = [
 ];
 
 export const historyColumns: any = [
-  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  { type: 'seq', title: '序 号', width: 60, align: 'center', fixed: 'left' },
   {
-    field: 'operatorName', title: '运营', minWidth: '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>;
@@ -434,7 +434,7 @@ export const historyColumns: any = [
     }
   },
   {
-    field: 'country', title: '国家', minWidth: 'auto', align: 'center',
+    field: 'country', title: '国 家', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         const country = countryInfoStore.countries.find(c => c.name === row.country);
@@ -461,7 +461,7 @@ export const historyColumns: any = [
     }
   },
   {
-    field: 'status', title: '状态', minWidth: 'auto', align: 'center',
+    field: 'status', title: '状 态', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return (
@@ -476,7 +476,7 @@ export const historyColumns: any = [
     }
   },
   {
-    field: 'platform', title: '平台', minWidth: 'auto', align: 'center',
+    field: 'platform', title: '平 台', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.platform ? row.platform : '--' }</span>;
@@ -484,7 +484,7 @@ export const historyColumns: any = [
     }
   },
   {
-    field: 'line', title: '线路', minWidth: 'auto', align: 'center',
+    field: 'line', title: '线 路', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.line ? row.line : '--' }</span>;
@@ -524,7 +524,7 @@ export const historyColumns: any = [
     }
   },
   {
-    field: 'juridicalPerson', title: '法人', minWidth: 'auto', align: 'center',
+    field: 'juridicalPerson', title: '法 人', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.juridicalPerson ? row.juridicalPerson : '--' }</span>;
@@ -591,7 +591,7 @@ export const historyColumns: any = [
     }
   },
   {
-    field: 'approveNum', title: '审批数量', minWidth: 'auto', align: 'center',
+    field: 'approveNum', title: '审批单号', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.approveNum ? row.approveNum : '--' }</span>;
@@ -633,7 +633,7 @@ export const historyColumns: any = [
 ];
 
 export const computerColumns: any = [
-  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  { type: 'seq', title: '序 号', width: 60, align: 'center', fixed: 'left' },
   {
     field: 'operatorName', title: '使用人', minWidth: 'auto', align: 'center',
     slots: {
@@ -659,7 +659,7 @@ export const computerColumns: any = [
     }
   },
   {
-    field: 'station', title: '位置', minWidth: 'auto', align: 'center',
+    field: 'station', title: '位 置', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <span class={ 'font-medium' }>{ row.station ? row.station : '--' }</span>;
@@ -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>;
+      }
+    }
+  }
+]
+