新增运营人员选择功能并优化表格高度计算

- 添加获取运营人员列表的API接口
- 修改表单，使用选择器选择运营人员
- 优化表格高度计算，实现自适应窗口大小
- 调整卡片样式，提高可读性和美观度

src/utils/useTableHeight.ts

@@ -0,0 +1,42 @@
+/**
+ * 计算表格高度
+ * @param cardRef 标题容器
+ */
+export function useTableHeight(cardRef: Ref<HTMLElement | null>) {
+  const computeTableHeight = ref({
+    titleHeight: 0,
+    dividerHeight: 32,
+    toolbarHeight: 51,
+    padding: 50,
+    cardPadding: 40,
+  });
+
+  const totalOtherHeight = ref(0);
+  const tableHeight = ref(0);
+
+  const computeHeight = () => {
+    const titleElement = unref(cardRef);
+
+    computeTableHeight.value.titleHeight = titleElement ? titleElement.scrollHeight : 0;
+
+    totalOtherHeight.value =
+        computeTableHeight.value.titleHeight +
+        computeTableHeight.value.dividerHeight +
+        computeTableHeight.value.toolbarHeight +
+        computeTableHeight.value.padding +
+        computeTableHeight.value.cardPadding * 2;
+
+    tableHeight.value = window.innerHeight - totalOtherHeight.value;
+  };
+
+  onMounted(() => {
+    computeHeight(); // 组件挂载时计算一次高度
+    window.addEventListener('resize', computeHeight); // 监听窗口大小变化
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', computeHeight); // 移除事件监听器
+  });
+
+  return { tableHeight: tableHeight as Ref<number> }; // 返回类型注释
+}

src/views/shop-information/api.ts

@@ -80,3 +80,10 @@ export function updateShopDetail(body: any) {
     data: body.formData,
   });
 }
+
+export function getOperator() {
+  return request({
+    url: '/api/assets/people/box/',
+    method: 'GET',
+  });
+}

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

@@ -12,21 +12,25 @@ import * as api from '/@/views/shop-information/api';
 
 const loading = ref(false);
 const isOpen = defineModel({ default: false });
-const { gridOptions, platformNumber, formSelect, companySelect } = defineProps<{
+
+const props = defineProps<{
   gridOptions: any;
-  platformNumber: any;
-  formSelect: any;
+  platformNumber: string;
+  formSelect: { country: string[], line: string[] };
   companySelect: any;
+  operatorName: { id: number, name: string }[]
 }>();
+const { gridOptions, platformNumber, formSelect, companySelect, operatorName } = props;
 
 const emit = defineEmits([ 'refresh' ]);
 
 onBeforeMount(() => {
   replaceCol();
+  console.log('operatorName=> ', operatorName);
 });
 
 interface RuleForm {
-  operatorName: string;
+  operatorName: string[];
   platformNumber: string;
   platformName: string;
   country: string;
@@ -39,23 +43,23 @@ interface RuleForm {
   company: string;
   belongsCompany: string;
   companyEnglishName: string;
-  address: string; // 新增
-  juridicalPerson: string; // 新增
-  juridicalPersonCreditCard: string; // 新增
-  juridicalPersonCreditCardAddress: string; // 新增
-  receivablesAccount: string; // 新增
-  receivablesAccountCompany: string; // 新增
-  vatNumber: string; // 新增
-  vatCompany: string; // 新增
-  shopPhoneAndName: string | null; // 新增
-  shopEmail: string | null; // 新增
-  subShopPhoneAndName: string | null; // 新增
-  subShopEmail: string | null; // 新增
+  address: string;
+  juridicalPerson: string;
+  juridicalPersonCreditCard: string;
+  juridicalPersonCreditCardAddress: string;
+  receivablesAccount: string;
+  receivablesAccountCompany: string;
+  vatNumber: string;
+  vatCompany: string;
+  shopPhoneAndName: string | null;
+  shopEmail: string | null;
+  subShopPhoneAndName: string | null;
+  subShopEmail: string | null;
 }
 
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = reactive<RuleForm>({
-  operatorName: '',
+  operatorName: [],
   platformNumber: '',
   platformName: '',
   country: '',
@@ -83,9 +87,6 @@ const ruleForm = reactive<RuleForm>({
 });
 
 const rules = reactive<FormRules<RuleForm>>({
-  operatorName: [
-    { message: 'Please input operator name', trigger: 'blur' }
-  ],
   platformNumber: [
     { required: true, message: 'Please input platform name', trigger: 'blur' }
   ],
@@ -183,6 +184,10 @@ function replaceCol() {
   }, {} as { [key: string]: any });
   Object.assign(ruleForm, result);
 }
+
+function xx() {
+  console.log('ruleForm.operatorName=> ', ruleForm.operatorName);
+}
 </script>
 
 <template>
@@ -195,13 +200,16 @@ function replaceCol() {
         label-width="auto"
         status-icon>
       <el-form-item label="运营" prop="operatorName">
-        <el-input v-model="ruleForm.operatorName"/>
+        <el-select multiple collapse-tags collapse-tags-tooltip v-model="ruleForm.operatorName" @change="xx">
+          <el-option v-for="item in operatorName" :key="item.id" :label="item.name" :value="item.id">
+          </el-option>
+        </el-select>
       </el-form-item>
       <el-form-item label="平台编号" prop="platformNumber">
-        <el-input v-model="ruleForm.platformNumber"/>
+        <el-input v-model="ruleForm.platformNumber" />
       </el-form-item>
       <el-form-item label="平台名称" prop="platformName">
-        <el-input v-model="ruleForm.platformName"/>
+        <el-input v-model="ruleForm.platformName" />
       </el-form-item>
       <el-form-item label="国家" prop="country">
         <el-select v-model="ruleForm.country" placeholder="请选择线路">
@@ -214,16 +222,16 @@ function replaceCol() {
         </el-select>
       </el-form-item>
       <el-form-item label="品牌名称" prop="brandName">
-        <el-input v-model="ruleForm.brandName"/>
+        <el-input v-model="ruleForm.brandName" />
       </el-form-item>
       <el-form-item label="货币代码" prop="currencyCode">
-        <el-input v-model="ruleForm.currencyCode"/>
+        <el-input v-model="ruleForm.currencyCode" />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0"/>
+        <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" />
       </el-form-item>
       <el-form-item label="平台" prop="platform">
-        <el-input v-model="ruleForm.platform"/>
+        <el-input v-model="ruleForm.platform" />
       </el-form-item>
       <el-form-item label="线路" prop="line">
         <el-select v-model="ruleForm.line" placeholder="请选择线路">
@@ -236,10 +244,10 @@ function replaceCol() {
         </el-select>
       </el-form-item>
       <el-form-item label="IP 地址" prop="ipaddress">
-        <el-input v-model="ruleForm.ipaddress"/>
+        <el-input v-model="ruleForm.ipaddress" />
       </el-form-item>
       <el-form-item label="公司" prop="company">
-        <el-input v-model="ruleForm.company"/>
+        <el-input v-model="ruleForm.company" />
       </el-form-item>
       <el-form-item label="关联公司" prop="belongsCompany">
         <el-select v-model="ruleForm.belongsCompany" placeholder="请选择所属公司">
@@ -252,43 +260,43 @@ function replaceCol() {
         </el-select>
       </el-form-item>
       <el-form-item label="公司英文名称" prop="companyEnglishName">
-        <el-input v-model="ruleForm.companyEnglishName"/>
+        <el-input v-model="ruleForm.companyEnglishName" />
       </el-form-item>
       <el-form-item label="地址" prop="address">
-        <el-input v-model="ruleForm.address"/>
+        <el-input v-model="ruleForm.address" />
       </el-form-item>
       <el-form-item label="法人代表" prop="juridicalPerson">
-        <el-input v-model="ruleForm.juridicalPerson"/>
+        <el-input v-model="ruleForm.juridicalPerson" />
       </el-form-item>
       <el-form-item label="法人信用卡" prop="juridicalPersonCreditCard">
-        <el-input v-model="ruleForm.juridicalPersonCreditCard"/>
+        <el-input v-model="ruleForm.juridicalPersonCreditCard" />
       </el-form-item>
       <el-form-item label="法人信用卡地址" prop="juridicalPersonCreditCardAddress">
-        <el-input v-model="ruleForm.juridicalPersonCreditCardAddress"/>
+        <el-input v-model="ruleForm.juridicalPersonCreditCardAddress" />
       </el-form-item>
       <el-form-item label="应收账款账户" prop="receivablesAccount">
-        <el-input v-model="ruleForm.receivablesAccount"/>
+        <el-input v-model="ruleForm.receivablesAccount" />
       </el-form-item>
       <el-form-item label="应收账款公司" prop="receivablesAccountCompany">
-        <el-input v-model="ruleForm.receivablesAccountCompany"/>
+        <el-input v-model="ruleForm.receivablesAccountCompany" />
       </el-form-item>
       <el-form-item label="VAT税号" prop="vatNumber">
-        <el-input v-model="ruleForm.vatNumber"/>
+        <el-input v-model="ruleForm.vatNumber" />
       </el-form-item>
       <el-form-item label="VAT公司" prop="vatCompany">
-        <el-input v-model="ruleForm.vatCompany"/>
+        <el-input v-model="ruleForm.vatCompany" />
       </el-form-item>
       <el-form-item label="主账户电话" prop="shopPhoneAndName">
-        <el-input v-model="ruleForm.shopPhoneAndName"/>
+        <el-input v-model="ruleForm.shopPhoneAndName" />
       </el-form-item>
       <el-form-item label="主账户邮箱" prop="shopEmail">
-        <el-input v-model="ruleForm.shopEmail"/>
+        <el-input v-model="ruleForm.shopEmail" />
       </el-form-item>
       <el-form-item label="子账户电话" prop="subShopPhoneAndName">
-        <el-input v-model="ruleForm.subShopPhoneAndName"/>
+        <el-input v-model="ruleForm.subShopPhoneAndName" />
       </el-form-item>
       <el-form-item label="子账户邮箱" prop="subShopEmail">
-        <el-input v-model="ruleForm.subShopEmail"/>
+        <el-input v-model="ruleForm.subShopEmail" />
       </el-form-item>
       <el-form-item>
         <div class="flex flex-1 justify-center">

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

@@ -12,8 +12,12 @@ import { platformColumns } from '../useColumns';
 import router from '/@/router';
 import { useTableData } from '/@/utils/useTableData';
 import { usePagination } from '/@/utils/usePagination';
+import { useTableHeight } from '/@/utils/useTableHeight';
 
 
+const cardContainer: Ref<HTMLElement | null> = useTemplateRef('cardContainer');
+const { tableHeight } = useTableHeight(cardContainer);
+
 const route = useRoute();
 const platform = route.query.platform;
 const platformOverview: any = ref([]);
@@ -25,9 +29,9 @@ const gridOptions: any = reactive({
   round: true,
   stripe: true,
   currentRowHighLight: true,
-  height: 870,
+  height: '100%',
   toolbarConfig: {
-    custom: true,
+    custom: true
   },
   rowConfig: {
     isHover: true
@@ -60,7 +64,7 @@ async function fetchPlatformDetail() {
     page: gridOptions.pagerConfig.page,
     limit: gridOptions.pagerConfig.limit
   };
-  await useTableData(api.getTableData, query, gridOptions)
+  await useTableData(api.getTableData, query, gridOptions);
 }
 
 async function fetchPlatformDetailOverview() {
@@ -78,68 +82,73 @@ function handleNavigate(item: any) {
 </script>
 
 <template>
-  <div class="p-2.5">
+  <div class="p-5 flex flex-col gap-2.5">
     <!-- overview-card -->
-    <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: 100%; width: 100%; background-color: #f5f5f5">
-            <el-icon>
-              <icon-picture/>
-            </el-icon>
-          </div>
-        </template>
-      </el-image>
-      <div class="text-lg">
-        <div class="font-semibold">
-          平台名称:
-          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
+    <el-card v-loading="overviewLoading" shadow="hover" style="border: none">
+      <div ref="cardContainer" class="flex items-center">
+        <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: 100%; width: 100%; background-color: #f5f5f5">
+              <el-icon>
+                <icon-picture />
+              </el-icon>
+            </div>
+          </template>
+        </el-image>
+        <div class="text-lg">
+          <div class="font-semibold">
+            平台名称:
+            <span class="font-medium italic ml-1.5" style="color: #64748b"> 
             {{ platformOverview[0]?.platform ? platformOverview[0]?.platform : '--' }} 
           </span>
-        </div>
-        <div class="font-semibold">
-          公司:
-          <span class="font-medium italic ml-1.5" style="color: #64748b">
+          </div>
+          <div class="font-semibold">
+            公司:
+            <span class="font-medium italic ml-1.5" style="color: #64748b">
             {{ platformOverview[0]?.countCompany ? platformOverview[0]?.countCompany : '--' }} 
           </span>
-        </div>
-        <div class="font-semibold">
-          店铺:
-          <span class="font-medium italic ml-1.5" style="color: #64748b">
+          </div>
+          <div class="font-semibold">
+            店铺:
+            <span class="font-medium italic ml-1.5" style="color: #64748b">
             {{ platformOverview[0]?.countShop ? platformOverview[0]?.countShop : '--' }}
           </span>
-        </div>
-        <div class="font-semibold">
-          电脑:
-          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
+          </div>
+          <div class="font-semibold">
+            电脑:
+            <span class="font-medium italic ml-1.5" style="color: #64748b"> 
             {{ platformOverview[0]?.countComputer ? platformOverview[0]?.countComputer : '--' }}
           </span>
+          </div>
         </div>
       </div>
     </el-card>
     <!-- table-card -->
-    <el-card body-style="padding-top: 10px" class="mt-2.5" shadow="hover" style="border: none">
-      <vxe-grid v-bind="gridOptions">
-        <template #platformNumber="{ row }">
-          <el-button link style="font-weight: 700" type="primary" @click="handleNavigate(row)">
-            <el-icon>
-              <Link/>
-            </el-icon>
-            {{ row.platformNumber ? row.platformNumber : '--' }}
-          </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="handlePageChange"
-          >
-          </vxe-pager>
-        </template>
-      </vxe-grid>
+    <el-card class="mt-2.5 flex-1" shadow="hover" style="border: none">
+      <div :style="{ height: tableHeight + 'px' }">
+        <vxe-grid v-bind="gridOptions">
+          <template #platformNumber="{ row }">
+            <el-button link style="font-weight: 700" type="primary" @click="handleNavigate(row)">
+              <el-icon>
+                <Link />
+              </el-icon>
+              {{ row.platformNumber ? row.platformNumber : '--' }}
+            </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="handlePageChange"
+            >
+            </vxe-pager>
+          </template>
+        </vxe-grid>
+      </div>
+
     </el-card>
   </div>
 </template>

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

@@ -8,14 +8,24 @@
 import { Edit, Monitor, Picture as IconPicture, RefreshLeft, Timer } from '@element-plus/icons-vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '/@/views/shop-information/api';
-import { computerColumns, historyColumns, shopCurrentColumns, companySelect } from '/@/views/shop-information/useColumns';
+import {
+  computerColumns,
+  historyColumns,
+  shopCurrentColumns,
+  companySelect
+} from '/@/views/shop-information/useColumns';
 import { useTableData } from '/@/utils/useTableData';
 import { usePagination } from '/@/utils/usePagination';
 import EditDrawer from './EditDrawer.vue';
+import { getOperator } from '/@/views/shop-information/api';
+import { useTableHeight } from '/@/utils/useTableHeight';
+
+const cardContainer: Ref<HTMLElement | null> = useTemplateRef('cardContainer');
+const { tableHeight } = useTableHeight(cardContainer );
 
 
 const route = useRoute();
-const platformNumber = route.query.platformNumber;
+const platformNumber = route.query.platformNumber as string;
 const shopOverview: any = ref([]);
 const overviewLoading = ref(false);
 const selectedTab = ref('1');
@@ -25,7 +35,7 @@ const gridOptions: any = reactive({
   round: true,
   stripe: true,
   currentRowHighLight: true,
-  height: 870,
+  height: '100%',
   toolbarConfig: {
     custom: true,
     slots: {
@@ -59,6 +69,8 @@ const formSelect = ref<{ country: string[], line: string[] }>({
   line: []
 });
 
+const operatorName = ref<{ id: number; name: string }[]>([]);
+
 // const companySelect = ref<{ id: string, company: string }>({
 //   id: '',
 //   company: ''
@@ -68,6 +80,7 @@ onBeforeMount(() => {
   fetchShopDetailOverview();
   handleTabChange(selectedTab.value);
   fetchSelect();
+  fetchOperator();
 });
 
 async function fetchSelect() {
@@ -114,137 +127,150 @@ function handleRefresh() {
   handleTabChange(selectedTab.value);
 }
 
+async function fetchOperator() {
+  const res = await useResponse({}, api.getOperator);
+  operatorName.value = res.data;
+}
+
 </script>
 
 <template>
-  <div class="p-2.5">
-    <el-card v-loading="overviewLoading" body-class="flex items-center gap-10" shadow="hover" style="border: none">
-      <div v-if="platformNumber" class="artistic-text-container mr-7 ">
-        <div class="artistic-text">
-          {{ platformNumber }}
-        </div>
-      </div>
-      <el-image v-else 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: 100%; width: 100%; background-color: #f5f5f5">
-            <el-icon>
-              <icon-picture/>
-            </el-icon>
+  <div class="p-5 flex flex-col gap-2.5">
+    <el-card v-loading="overviewLoading" shadow="hover" style="border: none">
+      <div ref="cardContainer" class="flex items-center gap-10">
+        <div v-if="platformNumber" class="artistic-text-container mr-7 ">
+          <div class="artistic-text">
+            {{ platformNumber }}
           </div>
-        </template>
-      </el-image>
-      <div class="text-lg">
-        <div class="font-semibold">
-          平台编号:
-          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
+        </div>
+        <el-image v-else 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: 100%; width: 100%; background-color: #f5f5f5">
+              <el-icon>
+                <icon-picture />
+              </el-icon>
+            </div>
+          </template>
+        </el-image>
+        <div class="text-lg">
+          <div class="font-semibold">
+            平台编号:
+            <span class="font-medium italic ml-1.5" style="color: #64748b"> 
             {{ shopOverview[0]?.platformNumber ? shopOverview[0]?.platformNumber : '--' }} 
           </span>
-        </div>
-        <div class="font-semibold">
-          所属公司:
-          <span class="font-medium italic ml-1.5" style="color: #64748b">
+          </div>
+          <div class="font-semibold">
+            所属公司:
+            <span class="font-medium italic ml-1.5" style="color: #64748b">
             {{ shopOverview[0]?.company ? shopOverview[0]?.company : '--' }} 
           </span>
-        </div>
-        <div class="font-semibold">
-          所属平台:
-          <span class="font-medium italic ml-1.5" style="color: #64748b">
+          </div>
+          <div class="font-semibold">
+            所属平台:
+            <span class="font-medium italic ml-1.5" style="color: #64748b">
             {{ shopOverview[0]?.platform ? shopOverview[0]?.platform : '--' }}
           </span>
-        </div>
-        <div class="font-semibold">
-          运营:
-          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
+          </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"> 
+          </div>
+          <div class="font-semibold">
+            电脑:
+            <span class="font-medium italic ml-1.5" style="color: #64748b"> 
             {{ shopOverview[0]?.countComputer === 0 ? '0' : shopOverview[0]?.countComputer || '--' }}
           </span>
+          </div>
         </div>
-      </div>
-      <div class="text-lg">
-        <div class="font-semibold">
-          主账户手机号及归属人:
-          <span class="font-medium italic ml-1.5" style="color: #64748b"> 
+        <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">
+          </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">
+          </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"> 
+          </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>
       </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(selectedTab)">
-            <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 #toolbar_tools>
-          <div class="mr-2.5">
-            <el-button :icon="Edit" plain circle type="warning" @click="drawerOpen" :disabled="selectedTab != '1'"></el-button>
-          </div>
-        </template>
-        <template #pager>
-          <vxe-pager
-              v-model:currentPage="gridOptions.pagerConfig.page"
-              v-model:pageSize="gridOptions.pagerConfig.limit"
-              :total="gridOptions.pagerConfig.total"
-              @page-change="handlePageChange"
-          >
-          </vxe-pager>
-        </template>
-      </vxe-grid>
+    <el-card class="mt-2.5 flex-1" shadow="hover" style="border: none">
+      <div :style="{ height: tableHeight + 'px' }">
+        <vxe-grid v-bind="gridOptions">
+          <template #toolbar_buttons>
+            <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>
+                  当前信息
+                </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 #toolbar_tools>
+            <div class="mr-2.5">
+              <el-button :disabled="selectedTab != '1'" :icon="Edit" circle plain type="warning"
+                         @click="drawerOpen"></el-button>
+            </div>
+          </template>
+          <template #pager>
+            <vxe-pager
+                v-model:currentPage="gridOptions.pagerConfig.page"
+                v-model:pageSize="gridOptions.pagerConfig.limit"
+                :total="gridOptions.pagerConfig.total"
+                @page-change="handlePageChange"
+            >
+            </vxe-pager>
+          </template>
+        </vxe-grid>
+      </div>
+      
     </el-card>
     <EditDrawer
         v-if="isOpen"
         v-model="isOpen"
-        :formSelect
         :companySelect
+        :formSelect
         :gridOptions="gridOptions"
+        :operatorName
         :platformNumber
         @refresh="handleRefresh"
     />