✨ feat: 新增店铺详情页-当前信息表格;修复系统菜单树节点点击错误;

src/views/shop-information/api.ts

@@ -11,7 +11,7 @@ export function getCardData(query: any) {
   });
 }
 
-export function getPlatformDetailTableData(query: any) {
+export function getTableData(query: any) {
   return request({
     url: apiPrefix,
     method: 'GET',
@@ -26,3 +26,20 @@ export function getPlatformDetailOverview(query: any) {
     params: query,
   });
 }
+
+export function getShopDetailOverview(query: any) {
+  return request({
+    url: apiPrefix + 'detail/',
+    method: 'GET',
+    params: query,
+  });
+}
+
+
+export function getCurrentInfo(query: any) {
+  return request({
+    url: apiPrefix + 'current/',
+    method: 'GET',
+    params: query,
+  });
+}

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

@@ -5,7 +5,6 @@
  * @Author: Cheney
  */
 
-import { inject, ref, Ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElCard, ElCol, ElDescriptions, ElIcon, ElRow } from 'element-plus';
 import { GoodsFilled, Picture as IconPicture, Search, Shop } from '@element-plus/icons-vue';
@@ -33,7 +32,8 @@ function getImageSrc(platform: string) {
       <el-card body-style="padding: 0px 10px 0px 10px" shadow="hover">
         <el-descriptions>
           <template #title>
-            <el-image :src="getImageSrc(item.platform)" class="my-2.5 rounded-2xl" fit="contain" style="width: 60px; height: 60px">
+            <el-image :src="getImageSrc(item.platform)" class="my-2.5 rounded-2xl" fit="contain"
+                      style="width: 60px; height: 60px">
               <template #error>
                 <div class="flex justify-center items-center" style="width: 60px; height: 60px; font-size: 4rem">
                   <el-icon>
@@ -68,7 +68,9 @@ function getImageSrc(platform: string) {
         </div>
         <template #footer>
           <div style="text-align: center; padding: 0 10px">
-            <el-button :icon="Search" plain round style="width: 100%" type="primary" @click="handleNavigate(item)">查看详情</el-button>
+            <el-button :icon="Search" plain round style="width: 100%" type="primary" @click="handleNavigate(item)">
+              查看详情
+            </el-button>
           </div>
         </template>
       </el-card>

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

@@ -7,14 +7,15 @@
 
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
-import { Picture as IconPicture } from '@element-plus/icons-vue';
-import { columns } from '../useColumns';
+import { Link, Picture as IconPicture } from '@element-plus/icons-vue';
+import { platformColumns } from '../useColumns';
 import router from '/@/router';
 
 
 const route = useRoute();
 const platform = route.query.platform;
 const platformOverview: any = ref([]);
+const overviewLoading = ref();
 // const selectedTab = ref('1');
 const platformTableData = ref([]);
 const gridOptions: any = reactive({
@@ -25,10 +26,6 @@ const gridOptions: any = reactive({
   height: 870,
   toolbarConfig: {
     custom: true,
-    slots: {
-      buttons: 'toolbar_buttons'
-      // tools: 'toolbar_tools'
-    }
   },
   rowConfig: {
     isHover: true
@@ -46,7 +43,7 @@ const gridOptions: any = reactive({
     icon: 'vxe-icon-indicator roll',
     text: '正在拼命加载中...'
   },
-  columns: columns,
+  columns: platformColumns,
   data: platformTableData
 });
 
@@ -61,7 +58,7 @@ async function fetchPlatformDetail() {
     page: gridOptions.pagerConfig.page,
     limit: gridOptions.pagerConfig.limit
   };
-  const res = await useResponse(query, api.getPlatformDetailTableData, gridOptions);
+  const res = await useResponse(query, api.getTableData, gridOptions);
   gridOptions.pagerConfig.total = res.total;
   gridOptions.pagerConfig.page = res.page;
   gridOptions.pagerConfig.limit = res.limit;
@@ -75,21 +72,14 @@ function pageChange({ pageSize, currentPage }: any) {
 }
 
 async function fetchPlatformDetailOverview() {
-  const res = await useResponse({ platform }, api.getPlatformDetailOverview);
+  const res = await useResponse({ platform }, api.getPlatformDetailOverview, overviewLoading);
   platformOverview.value = res.data;
 }
 
-// function handleTabChange(tabValue: any) {
-//   console.log("(PlatformDetail.vue: 82)=> tabValue", tabValue);
-//   if (tabValue === '2') {
-//     const query = {};
-//   }
-// }
-
 function handleNavigate(item: any) {
   router.push({
     path: '/shop/detail',
-    query: { platform: item.platform }
+    query: { platformNumber: item.platformNumber }
   });
 }
 
@@ -98,10 +88,12 @@ function handleNavigate(item: any) {
 <template>
   <div class="p-2.5">
     <!-- overview-card -->
-    <el-card body-class="flex items-center" shadow="hover" style="border: none">
-      <el-image :src="`/src/assets/platformImg/${ platform }.png`" class="mr-7 rounded-2xl" style="height: 100px; width: 100px; object-fit: contain">
+    <el-card v-loading="overviewLoading" body-class="flex items-center" shadow="hover" style="border: none">
+      <el-image :src="`/src/assets/platformImg/${ platform }.png`" class="mr-7 rounded-2xl" fit="contain"
+                style="height: 120px; width: 120px;">
         <template #error>
-          <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5">
+          <div class="mr-3.5 flex items-center justify-center text-5xl"
+               style="height: 130px; width: 130px; background-color: #f5f5f5">
             <el-icon>
               <icon-picture/>
             </el-icon>
@@ -138,22 +130,6 @@ function handleNavigate(item: any) {
     <!-- table-card -->
     <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-button label="当前信息" value="1" :icon="Timer">
-              <template #default>
-                <el-icon style="top: 2px;"><Timer /></el-icon>
-                当前信息
-              </template>
-            </el-radio-button>
-            <el-radio-button label="历史记录" value="2" :icon="RefreshLeft">
-              <template #default>
-                <el-icon style="top: 2px;"><RefreshLeft /></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>

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

@@ -1,51 +1,209 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 /**
  * @Name: ShopDetail.vue
  * @Description: 店铺详情
  * @Author: Cheney
  */
 
+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';
+
+
+
+const route = useRoute();
+const platformNumber = route.query.platformNumber;
+const shopOverview: any = ref([]);
+const overviewLoading = ref();
+const selectedTab = ref('1');
+
+const currentInfoData = ref([]);
+const gridOptions: any = reactive({
+  border: false,
+  round: true,
+  stripe: true,
+  currentRowHighLight: true,
+  height: 870,
+  toolbarConfig: {
+    custom: true,
+    slots: {
+      buttons: 'toolbar_buttons'
+    }
+  },
+  rowConfig: {
+    isHover: true
+  },
+  columnConfig: {
+    resizable: true
+  },
+  pagerConfig: {
+    total: 0,
+    page: 1,
+    limit: 10
+  },
+  loading: false,
+  loadingConfig: {
+    icon: 'vxe-icon-indicator roll',
+    text: '正在拼命加载中...'
+  },
+  columns: shopCurrentColumns,
+  data: currentInfoData
+});
+
+
+onBeforeMount(() => {
+  fetchShopDetailOverview();
+  fetchCurrentInfo();
+});
+
+async function fetchShopDetailOverview() {
+  const res = await useResponse({ platformNumber }, api.getShopDetailOverview, overviewLoading);
+  shopOverview.value = res.data;
+}
+
+async function fetchCurrentInfo() {
+  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 = {};
+  }
+}
 </script>
 
 <template>
   <div class="p-2.5">
-    <el-card body-class="flex items-center" shadow="hover" style="border: none">
-      <el-image src="" class="mr-7 rounded-2xl" style="height: 100px; width: 100px; object-fit: contain">
+    <el-card v-loading="overviewLoading" body-class="flex items-center" shadow="hover" style="border: none">
+      <el-image class="mr-7 rounded-2xl" src="" style="height: 120px; width: 120px; object-fit: contain">
         <template #error>
-          <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5">
+          <div class="mr-3.5 flex items-center justify-center text-5xl"
+               style="height: 120px; width: 120px; background-color: #f5f5f5">
             <el-icon>
               <icon-picture/>
             </el-icon>
           </div>
         </template>
       </el-image>
-      <div class="text-lg">
+      <div class="text-lg mr-10">
         <div class="font-semibold">
-          平台名称:
+          平台编号:
           <span class="font-medium italic ml-1.5" style="color: #64748b"> 
-            <!--{{ platformOverview[0]?.platform ? platformOverview[0]?.platform : '&#45;&#45;' }} -->
+            {{ shopOverview[0]?.platformNumber ? shopOverview[0]?.platformNumber : '--' }} 
           </span>
         </div>
         <div class="font-semibold">
-          公司:
+          所属公司:
           <span class="font-medium italic ml-1.5" style="color: #64748b">
-            <!--{{ platformOverview[0]?.countCompany ? platformOverview[0]?.countCompany : '&#45;&#45;' }} -->
+            {{ shopOverview[0]?.company ? shopOverview[0]?.company : '--' }} 
           </span>
         </div>
         <div class="font-semibold">
-          店铺:
+          所属平台:
           <span class="font-medium italic ml-1.5" style="color: #64748b">
-            <!--{{ platformOverview[0]?.countShop ? platformOverview[0]?.countShop : '&#45;&#45;' }}-->
+            {{ shopOverview[0]?.platform ? shopOverview[0]?.platform : '--' }}
+          </span>
+        </div>
+        <div class="font-semibold">
+          运营:
+          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
+            {{ shopOverview[0]?.operatorName ? shopOverview[0]?.operatorName : '--' }}
           </span>
         </div>
         <div class="font-semibold">
           电脑:
           <span class="font-medium italic ml-1.5" style="color: #64748b"> 
-            <!--{{ platformOverview[0]?.countComputer ? platformOverview[0]?.countComputer : '&#45;&#45;' }}-->
+            {{ shopOverview[0]?.countComputer === 0 ? '0' : shopOverview[0]?.countComputer || '--' }}
+          </span>
+        </div>
+      </div>
+      <div class="text-lg">
+        <div class="font-semibold">
+          主账户手机号及归属人:
+          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
+            {{ shopOverview[0]?.shopPhoneAndNameStr ? shopOverview[0]?.shopPhoneAndNameStr : '--' }} 
+          </span>
+        </div>
+        <div class="font-semibold">
+          主账户Email:
+          <span class="font-medium italic ml-1.5" style="color: #64748b">
+            {{ shopOverview[0]?.shopEmail ? shopOverview[0]?.shopEmail : '--' }} 
+          </span>
+        </div>
+        <div class="font-semibold">
+          子账户手机号及归属人:
+          <span class="font-medium italic ml-1.5" style="color: #64748b">
+            {{ shopOverview[0]?.subShopPhoneAndNameStr ? shopOverview[0]?.subShopPhoneAndNameStr : '--' }}
+          </span>
+        </div>
+        <div class="font-semibold">
+          子账户Email:
+          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
+            {{ shopOverview[0]?.subShopEmail ? shopOverview[0]?.subShopEmail : '--' }}
           </span>
         </div>
       </div>
     </el-card>
+    <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-button label="当前信息" value="1">
+              <template #default>
+                <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>
+                历史记录
+              </template>
+            </el-radio-button>
+            <el-radio-button label="电脑信息" value="3">
+              <template #default>
+                <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"
+          >
+          </vxe-pager>
+        </template>
+      </vxe-grid>
+    </el-card>
   </div>
 </template>
 

src/views/shop-information/useColumns.tsx

@@ -3,9 +3,8 @@ import { useCountryInfoStore } from '/@/stores/countryInfo';
 
 const countryInfoStore = useCountryInfoStore();
 
-export const columns = [
+export const platformColumns = [
   { type: 'seq', width: 50, align: 'center', fixed: 'left' },
-  // { field: 'operate', title: '操作', width: 'auto', align: 'center', fixed: 'right', slots: { default: 'operate' } },
   {
     field: 'operatorName', title: '运营', width: 'auto', align: 'center',  fixed: 'left',
     slots: {
@@ -171,3 +170,177 @@ export const columns = [
     }
   }
 ];
+
+export const shopCurrentColumns = [
+  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  {
+    field: 'operatorName', title: '运营', width: 'auto', align: 'center', fixed: 'left',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.operatorName ? row.operatorName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'platformNumber', title: '平台编号', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.platformNumber ? row.platformNumber : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'platformName', title: '平台名称', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.platformName ? row.platformName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'country', title: '国家', width: '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: '品牌名称', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.brandName ? row.brandName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'currencyCode', title: '货币代码', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.currencyCode ? row.currencyCode : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'status', title: '状态', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.status ? row.status : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'platform', title: '平台', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.platform ? row.platform : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'line', title: '线路', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.line ? row.line : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'ipaddress', title: 'IP地址', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.ipaddress ? row.ipaddress : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'company', title: '公司名称', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.company ? row.company : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'companyEnglishName', title: '公司英文名称', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.companyEnglishName ? row.companyEnglishName : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'address', title: '公司地址', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.address ? row.address : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'juridicalPerson', title: '法人', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.juridicalPerson ? row.juridicalPerson : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'juridicalPersonCreditCard', title: '法人信用卡', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.juridicalPersonCreditCard ? row.juridicalPersonCreditCard : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'juridicalPersonCreditCardAddress', title: '法人信用卡地址', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.juridicalPersonCreditCardAddress ? row.juridicalPersonCreditCardAddress : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'receivablesAccount', title: '收款账户', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.receivablesAccount ? row.receivablesAccount : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'receivablesAccountCompany', title: '收款账户公司', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.receivablesAccountCompany ? row.receivablesAccountCompany : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'vatNumber', title: 'VAT税号', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.vatNumber ? row.vatNumber : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'vatCompany', title: 'VAT公司', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.vatCompany ? row.vatCompany : '--'}</span>;
+      },
+    },
+  },
+  {
+    field: 'shopPhoneEmail', title: '店铺电话邮箱', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={'font-medium'}>{row.shopPhoneEmail ? row.shopPhoneEmail.join(', ') : '--'}</span>;
+      },
+    },
+  }
+];

src/views/system/menu/components/MenuButtonCom/index.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
 import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import { MenuTreeItemType } from '../../types';

src/views/system/menu/index.vue

@@ -22,7 +22,7 @@
           </el-tab-pane>
           <el-tab-pane label="列权限配置">
             <div style="height: 80vh">
-              <MenuFieldCom ref="menuFieldRef"></MenuFieldCom>
+              <MenuFieldCom ref="menuFieldRef" />
             </div>
           </el-tab-pane>
         </el-tabs>
@@ -49,6 +49,7 @@ import { ElMessageBox } from 'element-plus';
 import MenuTreeCom from './components/MenuTreeCom/index.vue';
 import MenuButtonCom from './components/MenuButtonCom/index.vue';
 import MenuFormCom from './components/MenuFormCom/index.vue';
+import MenuFieldCom from './components/MenuFieldCom/index.vue';
 import { GetList, DelObj } from './api';
 import { successNotification } from '/@/utils/message';
 import { APIResponseData, MenuTreeItemType } from './types';

src/views/test/index.vue

@@ -10,9 +10,7 @@ console.log("(index.vue: 13)=> myDay", myDay);
 </script>
 
 <template>
-  <div class="w-1/5">
-    <el-button ref="btnRef">按钮</el-button>
-  </div>
+
 </template>
 
 <style scoped>