✨ feat: 新增店铺详情编辑功能; 修复切换维度由于主账号电话为null导致的页面卡死

src/views/shop-information/api.ts

@@ -58,3 +58,19 @@ export function getComputerInfo(query: any) {
     params: query,
   });
 }
+
+export function getShopSelect() {
+  return request({
+    url: apiPrefix + 'box/',
+    method: 'GET',
+  });
+}
+
+export function updateShopDetail(body: any) {
+  return request({
+    url: apiPrefix + `${body.id}/`,
+    method: 'POST',
+    params: { partial: body.partial },
+    data: body.formData,
+  });
+}

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

@@ -0,0 +1,286 @@
+<script lang="ts" setup>/**
+ * @Name: EditDrawer.vue
+ * @Description:
+ * @Author: Cheney
+ */
+
+import type { FormInstance, FormRules } from 'element-plus';
+import { useResponse } from '/@/utils/useResponse';
+import * as api from '/@/views/shop-information/api';
+
+
+const loading = ref(false);
+const isOpen = defineModel({ default: false });
+const { gridOptions, platformNumber, formSelect } = defineProps<{
+  gridOptions: any;
+  platformNumber: string;
+  formSelect: any;
+}>();
+
+const emit = defineEmits(['refresh'])
+
+
+onBeforeMount(() => {
+  const result = Object.keys(ruleForm).reduce((acc, key) => {
+    if (key in gridOptions.data[0]) {
+      acc[key] = gridOptions.data[0][key];
+    }
+    return acc;
+  }, {} as { [key: string]: any });
+  Object.assign(ruleForm, result);
+});
+
+interface RuleForm {
+  operatorName: string;
+  platformNumber: string;
+  platformName: string;
+  country: string;
+  brandName: string;
+  currencyCode: string;
+  status: number;
+  platform: string;
+  line: string[];
+  ipaddress: string;
+  company: 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; // 新增
+}
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+  operatorName: '',
+  platformNumber: '',
+  platformName: '',
+  country: '',
+  brandName: '',
+  currencyCode: '',
+  status: 0,
+  platform: '',
+  line: [],
+  ipaddress: '',
+  company: '',
+  companyEnglishName: '',
+  address: '',
+  juridicalPerson: '',
+  juridicalPersonCreditCard: '',
+  juridicalPersonCreditCardAddress: '',
+  receivablesAccount: '',
+  receivablesAccountCompany: '',
+  vatNumber: '',
+  vatCompany: '',
+  shopPhoneAndName: '',
+  shopEmail: '',
+  subShopPhoneAndName: '',
+  subShopEmail: ''
+});
+
+const rules = reactive<FormRules<RuleForm>>({
+  operatorName: [
+    { message: 'Please input operator name', trigger: 'blur' }
+  ],
+  platformNumber: [
+    { required: true, message: 'Please input platform name', trigger: 'blur' }
+  ],
+  platformName: [
+    { required: true, message: 'Please input platform name', trigger: 'blur' }
+  ],
+  country: [
+    { required: true, message: 'Please input country name', trigger: 'blur' }
+  ],
+  brandName: [
+    { message: 'Please input brand name', trigger: 'blur' }
+  ],
+  currencyCode: [
+    { required: true, message: 'Please select currency code', trigger: 'change' }
+  ],
+  platform: [
+    { required: true, message: 'Please input platform name', trigger: 'blur' }
+  ],
+  line: [
+    { required: true, message: 'Please select line', trigger: 'change' }
+  ],
+  ipaddress: [
+    { message: 'Please input ip address', trigger: 'blur' }
+  ],
+  company: [
+    { message: 'Please input activity form', trigger: 'blur' }
+  ],
+  companyEnglishName: [
+    { message: 'Please input Company English Name', trigger: 'blur' }
+  ],
+  address: [
+    { message: 'Please input Address', trigger: 'blur' }
+  ],
+  juridicalPerson: [
+    { message: 'Please input Juridical Person', trigger: 'blur' }
+  ],
+  juridicalPersonCreditCard: [
+    { message: 'Please input Juridical Person Credit Card', trigger: 'blur' }
+  ],
+  juridicalPersonCreditCardAddress: [
+    { message: 'Please input Juridical Person Credit Card Address', trigger: 'blur' }
+  ],
+  receivablesAccount: [
+    { message: 'Please input Receivables Account', trigger: 'blur' }
+  ],
+  receivablesAccountCompany: [
+    { message: 'Please input Receivables Account Company', trigger: 'blur' }
+  ],
+  vatNumber: [
+    { message: 'Please input VAT Number', trigger: 'blur' }
+  ],
+  vatCompany: [
+    { message: 'Please input VAT Company', trigger: 'blur' }
+  ],
+  shopPhoneAndName: [
+    { message: 'Please input Shop Email', trigger: 'blur' }
+  ],
+  shopEmail: [
+    { message: 'Please input Shop Email', trigger: 'blur' }
+  ],
+  subShopPhoneAndName: [
+    { message: 'Please input Shop Email', trigger: 'blur' }
+  ],
+  subShopEmail: [
+    { message: 'Please input Sub Shop Email', trigger: 'blur' }
+  ]
+});
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      await useResponse({ id: gridOptions.data[0].id, partial: 1, formData: ruleForm }, api.updateShopDetail, loading);
+      isOpen.value = false;
+      emit('refresh');
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+
+<template>
+  <el-drawer v-model="isOpen" :title="`店铺编辑 - ${platformNumber}`" size="30%">
+    <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        class="mx-2.5 mt-2.5"
+        label-width="auto"
+        status-icon>
+      <el-form-item label="运营" prop="operatorName">
+        <el-input v-model="ruleForm.operatorName"/>
+      </el-form-item>
+      <el-form-item label="平台编号" prop="platformNumber">
+        <el-input v-model="ruleForm.platformNumber"/>
+      </el-form-item>
+      <el-form-item label="平台名称" prop="platformName">
+        <el-input v-model="ruleForm.platformName"/>
+      </el-form-item>
+      <el-form-item label="国家" prop="country">
+        <el-select v-model="ruleForm.country" placeholder="请选择线路">
+          <el-option
+              v-for="item in formSelect.country"
+              :key="item"
+              :label="item"
+              :value="item">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="品牌名称" prop="brandName">
+        <el-input v-model="ruleForm.brandName"/>
+      </el-form-item>
+      <el-form-item label="货币代码" prop="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-form-item>
+      <el-form-item label="平台" prop="platform">
+        <el-input v-model="ruleForm.platform"/>
+      </el-form-item>
+      <el-form-item label="线路" prop="line">
+        <el-select v-model="ruleForm.line" placeholder="请选择线路">
+          <el-option
+              v-for="item in formSelect.line"
+              :key="item"
+              :label="item"
+              :value="item">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="IP 地址" prop="ipaddress">
+        <el-input v-model="ruleForm.ipaddress"/>
+      </el-form-item>
+      <el-form-item label="公司" prop="company">
+        <el-input v-model="ruleForm.company"/>
+      </el-form-item>
+      <el-form-item label="公司英文名称" prop="companyEnglishName">
+        <el-input v-model="ruleForm.companyEnglishName"/>
+      </el-form-item>
+      <el-form-item label="地址" prop="address">
+        <el-input v-model="ruleForm.address"/>
+      </el-form-item>
+      <el-form-item label="法人代表" prop="juridicalPerson">
+        <el-input v-model="ruleForm.juridicalPerson"/>
+      </el-form-item>
+      <el-form-item label="法人信用卡" prop="juridicalPersonCreditCard">
+        <el-input v-model="ruleForm.juridicalPersonCreditCard"/>
+      </el-form-item>
+      <el-form-item label="法人信用卡地址" prop="juridicalPersonCreditCardAddress">
+        <el-input v-model="ruleForm.juridicalPersonCreditCardAddress"/>
+      </el-form-item>
+      <el-form-item label="应收账款账户" prop="receivablesAccount">
+        <el-input v-model="ruleForm.receivablesAccount"/>
+      </el-form-item>
+      <el-form-item label="应收账款公司" prop="receivablesAccountCompany">
+        <el-input v-model="ruleForm.receivablesAccountCompany"/>
+      </el-form-item>
+      <el-form-item label="VAT税号" prop="vatNumber">
+        <el-input v-model="ruleForm.vatNumber"/>
+      </el-form-item>
+      <el-form-item label="VAT公司" prop="vatCompany">
+        <el-input v-model="ruleForm.vatCompany"/>
+      </el-form-item>
+      <el-form-item label="主账户电话" prop="shopPhoneAndName">
+        <el-input v-model="ruleForm.shopPhoneAndName"/>
+      </el-form-item>
+      <el-form-item label="主账户邮箱" prop="shopEmail">
+        <el-input v-model="ruleForm.shopEmail"/>
+      </el-form-item>
+      <el-form-item label="子账户电话" prop="subShopPhoneAndName">
+        <el-input v-model="ruleForm.subShopPhoneAndName"/>
+      </el-form-item>
+      <el-form-item label="子账户邮箱" prop="subShopEmail">
+        <el-input v-model="ruleForm.subShopEmail"/>
+      </el-form-item>
+      <el-form-item>
+        <div class="flex flex-1 justify-center">
+          <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading">确 定</el-button>
+          <el-button @click="resetForm(ruleFormRef)">重 置</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </el-drawer>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -5,12 +5,13 @@
  * @Author: Cheney
  */
 
-import { Picture as IconPicture, RefreshLeft, Timer, Monitor } from '@element-plus/icons-vue';
+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 } from '/@/views/shop-information/useColumns';
 import { useTableData } from '/@/utils/useTableData';
 import { usePagination } from '/@/utils/usePagination';
+import EditDrawer from './EditDrawer.vue';
 
 
 const route = useRoute();
@@ -28,7 +29,8 @@ const gridOptions: any = reactive({
   toolbarConfig: {
     custom: true,
     slots: {
-      buttons: 'toolbar_buttons'
+      buttons: 'toolbar_buttons',
+      tools: 'toolbar_tools'
     }
   },
   rowConfig: {
@@ -47,15 +49,27 @@ const gridOptions: any = reactive({
     icon: 'vxe-icon-indicator roll',
     text: '正在拼命加载中...'
   },
-  columns: shopCurrentColumns,
-  data: tableOptions.value.data
+  columns: '',
+  data: ''
+});
+
+const isOpen = ref(false);
+const formSelect = ref<{ country: string[], line: string[] }>({
+  country: [],
+  line: []
 });
 
 onBeforeMount(() => {
   fetchShopDetailOverview();
   handleTabChange(selectedTab.value);
+  fetchSelect();
 });
 
+async function fetchSelect() {
+  const res = await useResponse({}, api.getShopSelect);
+  formSelect.value = res.data;
+}
+
 async function fetchShopDetailOverview() {
   const res = await useResponse({ platformNumber }, api.getShopDetailOverview, overviewLoading);
   shopOverview.value = res.data;
@@ -72,21 +86,38 @@ async function handleTabChange(tabValue: any) {
   switch (tabValue) {
     case '1':
       gridOptions.columns = shopCurrentColumns;
-      await useTableData(api.getCurrentInfo, query, gridOptions); break  
+      await useTableData(api.getCurrentInfo, query, gridOptions);
+      break;
     case '2':
       gridOptions.columns = historyColumns;
-      await useTableData(api.getHistoryInfo, query, gridOptions); break
-    case '3': 
+      await useTableData(api.getHistoryInfo, query, gridOptions);
+      break;
+    case '3':
       gridOptions.columns = computerColumns;
-      await useTableData(api.getComputerInfo, query, gridOptions); break
+      await useTableData(api.getComputerInfo, query, gridOptions);
+      break;
   }
 }
+
+function drawerOpen() {
+  isOpen.value = true;
+}
+
+function handleRefresh() {
+  handleTabChange(selectedTab.value);
+}
+
 </script>
 
 <template>
   <div class="p-2.5">
     <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">
+      <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: 120px; width: 120px; background-color: #f5f5f5">
@@ -185,6 +216,11 @@ async function handleTabChange(tabValue: any) {
             </el-radio-button>
           </el-radio-group>
         </template>
+        <template #toolbar_tools>
+          <div class="mr-2.5">
+            <el-button :icon="Edit" plain type="warning" @click="drawerOpen">编辑</el-button>
+          </div>
+        </template>
         <template #pager>
           <vxe-pager
               v-model:currentPage="gridOptions.pagerConfig.page"
@@ -196,9 +232,159 @@ async function handleTabChange(tabValue: any) {
         </template>
       </vxe-grid>
     </el-card>
+    <EditDrawer
+        v-if="isOpen"
+        v-model="isOpen"
+        :formSelect
+        :gridOptions="gridOptions"
+        :platformNumber
+        @refresh="handleRefresh"
+    />
+    <!--<el-drawer v-model="drawer" :title="`店铺编辑 - ${route.query.platformNumber}`" size="30%">
+      <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          class="mx-2.5 mt-2.5"
+          label-width="auto"
+          status-icon>
+        <el-form-item label="运营" prop="operatorName">
+          <el-input v-model="ruleForm.operatorName"/>
+        </el-form-item>
+        <el-form-item label="平台编号" prop="platformNumber">
+          <el-input v-model="ruleForm.platformNumber"/>
+        </el-form-item>
+        <el-form-item label="平台名称" prop="platformName">
+          <el-input v-model="ruleForm.platformName"/>
+        </el-form-item>
+        <el-form-item label="国家" prop="country">
+          <el-select v-model="ruleForm.country" placeholder="请选择线路">
+            <el-option
+                v-for="item in formSelect.country"
+                :key="item"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="品牌名称" prop="brandName">
+          <el-input v-model="ruleForm.brandName"/>
+        </el-form-item>
+        <el-form-item label="货币代码" prop="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-form-item>
+        <el-form-item label="平台" prop="platform">
+          <el-input v-model="ruleForm.platform"/>
+        </el-form-item>
+        <el-form-item label="线路" prop="line">
+          <el-select v-model="ruleForm.line" placeholder="请选择线路">
+            <el-option
+                v-for="item in formSelect.line"
+                :key="item"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="IP 地址" prop="ipaddress">
+          <el-input v-model="ruleForm.ipaddress"/>
+        </el-form-item>
+        <el-form-item label="公司" prop="company">
+          <el-input v-model="ruleForm.company"/>
+        </el-form-item>
+        <el-form-item label="公司英文名称" prop="companyEnglishName">
+          <el-input v-model="ruleForm.companyEnglishName"/>
+        </el-form-item>
+        <el-form-item label="地址" prop="address">
+          <el-input v-model="ruleForm.address"/>
+        </el-form-item>
+        <el-form-item label="法人代表" prop="juridicalPerson">
+          <el-input v-model="ruleForm.juridicalPerson"/>
+        </el-form-item>
+        <el-form-item label="法人信用卡" prop="juridicalPersonCreditCard">
+          <el-input v-model="ruleForm.juridicalPersonCreditCard"/>
+        </el-form-item>
+        <el-form-item label="法人信用卡地址" prop="juridicalPersonCreditCardAddress">
+          <el-input v-model="ruleForm.juridicalPersonCreditCardAddress"/>
+        </el-form-item>
+        <el-form-item label="应收账款账户" prop="receivablesAccount">
+          <el-input v-model="ruleForm.receivablesAccount"/>
+        </el-form-item>
+        <el-form-item label="应收账款公司" prop="receivablesAccountCompany">
+          <el-input v-model="ruleForm.receivablesAccountCompany"/>
+        </el-form-item>
+        <el-form-item label="VAT税号" prop="vatNumber">
+          <el-input v-model="ruleForm.vatNumber"/>
+        </el-form-item>
+        <el-form-item label="VAT公司" prop="vatCompany">
+          <el-input v-model="ruleForm.vatCompany"/>
+        </el-form-item>
+        <el-form-item label="主账户电话" prop="shopPhoneAndName">
+          <el-input :disabled="true" v-model="gridOptions.data[0].shopPhoneAndNameStr"/>
+        </el-form-item>
+        <el-form-item label="主账户邮箱" prop="shopEmail">
+          <el-input v-model="ruleForm.shopEmail"/>
+        </el-form-item>
+        <el-form-item label="子账户电话" prop="subShopPhoneAndName">
+          <el-input :disabled="true" v-model="gridOptions.data[0].subShopPhoneAndNameStr"/>
+        </el-form-item>
+        <el-form-item label="子账户邮箱" prop="subShopEmail">
+          <el-input v-model="ruleForm.subShopEmail"/>
+        </el-form-item>
+        <el-form-item>
+          <div class="flex flex-1 justify-center">
+            <el-button type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
+            <el-button @click="resetForm(ruleFormRef)">重 置</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-drawer>-->
   </div>
 </template>
 
 <style scoped>
+.artistic-text-container {
+  height: 120px; /* 高度与要求一致 */
+  width: 120px; /* 宽度与要求一致 */
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  background-color: #f5f5f5; /* 背景色 */
+  border-radius: 12px; /* 圆角 */
+  overflow: hidden; /* 隐藏溢出部分 */
+  position: relative; /* 为绝对定位提供参考 */
+}
 
+.artistic-text {
+  font-size: 1rem; /* 初始字体大小 */
+  font-weight: bold; /* 加粗字体 */
+  text-align: center; /* 居中对齐 */
+  background: linear-gradient(90deg, #c86fc9, #3023ae);
+  -webkit-background-clip: text; /* 背景裁剪 */
+  -webkit-text-fill-color: transparent; /* 字体颜色透明 */
+  white-space: nowrap; /* 防止换行 */
+  overflow: hidden; /* 隐藏溢出部分 */
+  text-overflow: ellipsis; /* 溢出部分用省略号表示 */
+  transform: scale(1); /* 默认缩放为 1 */
+  transition: transform 0.2s ease; /* 动画过渡效果 */
+  max-width: 100%; /* 最大宽度为 100% */
+}
+
+/* 当文本溢出时，缩小文本以适应容器 */
+.artistic-text-container:has(.artistic-text) {
+  /* 计算并缩放文本 */
+  animation: scale-text 0.2s forwards;
+}
+
+/* @keyframes scale-text {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(calc(120px / var(--text-width))); !* 根据文本宽度缩放 *!
+  }
+} */
 </style>

src/views/shop-information/useColumns.tsx

@@ -233,7 +233,14 @@ export const shopCurrentColumns = [
     field: 'status', title: '状态', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.status ? row.status : '--' }</span>;
+        return (
+            <el-tag
+                class="font-medium"
+                type={ row.status === 1 ? 'success' : 'danger' }   // 动态绑定 type
+            >
+              { row.status === 1 ? '启用' : '暂停' }
+            </el-tag>
+        );
       }
     }
   },
@@ -345,10 +352,35 @@ export const shopCurrentColumns = [
     }
   },
   {
-    field: 'shopPhoneEmail', title: '店铺电话邮箱', minWidth: 'auto', align: 'center',
+    field: 'shopPhoneAndName', title: '主账户电话', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        console.log('Row data:', row); // 打印行数据，检查是否正确
+        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.shopPhoneEmail ? row.shopPhoneEmail.join(', ') : '--' }</span>;
+        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>;
       }
     }
   }
@@ -411,7 +443,14 @@ export const historyColumns: any = [
     field: 'status', title: '状态', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.status ? row.status : '--' }</span>;
+        return (
+            <el-tag
+                class="font-medium"
+                type={ row.status === 1 ? 'success' : 'danger' }   // 动态绑定 type
+            >
+              { row.status === 1 ? '启用' : '暂停' }
+            </el-tag>
+        );
       }
     }
   },
@@ -505,7 +544,7 @@ export const historyColumns: any = [
             class={ 'font-medium' }>{ row.receivablesAccountCompany ? row.receivablesAccountCompany : '--' }</span>;
       }
     }
-  },
+  },  
   {
     field: 'vatNumber', title: 'VAT税号', minWidth: 'auto', align: 'center',
     slots: {
@@ -539,74 +578,71 @@ export const historyColumns: any = [
     }
   },
   {
-    field: 'shopPhoneEmail', title: '店铺电话邮箱', minWidth: 'auto', align: 'center',
+    field: 'shopPhoneAndName', 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>;
+        console.log('Row data:', row);
+        return <span class={ 'font-medium' }>{ row.shopPhoneAndName !== null ? row.shopPhoneAndName : '--' }</span>;
       }
     }
-  }
-];
-
-export const computerColumns: any = [
-  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  },
   {
-    field: 'computerNumber', title: '电脑编号', minWidth: 'auto', align: 'center',
+    field: 'shopEmail', title: '主账户邮箱', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.computerNumber ? row.computerNumber : '--' }</span>;
+        return <span class={ 'font-medium' }>{ row.shopEmail ? row.shopEmail : '--' }</span>;
       }
     }
   },
   {
-    field: 'platformNumber', title: '平台编号', minWidth: 'auto', align: 'center',
+    field: 'subShopPhoneAndName', title: '子账户电话', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.platformNumber ? row.platformNumber : '--' }</span>;
+        return <span class={ 'font-medium' }>{ row.subShopPhoneAndName ? row.subShopPhoneAndName : '--' }</span>;
       }
     }
   },
   {
-    field: 'platform', title: '平台', minWidth: 'auto', align: 'center',
+    field: 'subShopEmail', title: '子账户邮箱', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.platform ? row.platform : '--' }</span>;
+        return <span class={ 'font-medium' }>{ row.subShopEmail ? row.subShopEmail : '--' }</span>;
       }
     }
-  },
+  }
+];
+
+export const computerColumns: any = [
+  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
   {
-    field: 'platformName', title: '平台名称', minWidth: 'auto', align: 'center',
+    field: 'operatorName', title: '使用人', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.platformName ? row.platformName : '--' }</span>;
+        return <span class={ 'font-medium' }>{ row.operatorName ? row.operatorName : '--' }</span>;
       }
     }
   },
   {
-    field: 'country', title: '国家', minWidth: 'auto', align: 'center',
+    field: 'computerNumber', 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>;
+        return <span class={ 'font-medium' }>{ row.computerNumber ? row.computerNumber : '--' }</span>;
       }
     }
   },
   {
-    field: 'userName', title: '用户名', minWidth: 'auto', align: 'center',
+    field: 'computerType', title: '计算机类型', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.userName ? row.userName : '--' }</span>;
+        return <span class={ 'font-medium' }>{ row.computerType ? row.computerType : '--' }</span>;
       }
     }
   },
   {
-    field: 'company', title: '公司名称', minWidth: 'auto', align: 'center',
+    field: 'station', title: '位置', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
-        return <span class={ 'font-medium' }>{ row.company ? row.company : '--' }</span>;
+        return <span class={ 'font-medium' }>{ row.station ? row.station : '--' }</span>;
       }
     }
   },
@@ -625,14 +661,6 @@ export const computerColumns: 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>;
-      }
-    }
   }
 ];
 

src/views/test/index.vue

@@ -1,47 +1,20 @@
-<script lang="ts" setup>/**
- * @Name: index.vue
- * @Description: 测试文件
- * @Author: Cheney
- */
-import { usePagination } from '/@/utils/usePagination';
-import * as api from '/@/views/shop-information/api';
-import { useTableData } from '/@/utils/useTableData';
-import { ElMessage } from 'element-plus';
+<script setup>
 
+import PropsTest from './propsTest.vue';
+import EditDrawer from '/@/views/shop-information/components/EditDrawer.vue';
 
-const { tableOptions, handlePageChange } = usePagination(fetchData);
+const text = ref('1');
+const isOpen = ref(false); // 定义 isOpen
 
-async function fetchData() {
-  const { code, msg } = await useTableData(api.getTableData, {}, tableOptions);
-  if (code === 2000) ElMessage.success({ message: msg, plain: true });
+function handleOpen() {
+  isOpen.value = true; // 点击按钮后打开 dialog
 }
-
-onMounted(() => {
-  fetchData();
-});
 </script>
 
 <template>
-  <el-card v-loading="tableOptions.loading">
-    <el-table :data="tableOptions.data" style="width: 100%">
-      <el-table-column label="Date" prop="date" width="180"/>
-      <el-table-column label="Name" prop="name" width="180"/>
-      <el-table-column label="Address" prop="address"/>
-    </el-table>
-    <div class="mt-2">
-      <el-pagination
-          v-model:current-page="tableOptions.page"
-          v-model:page-size="tableOptions.limit"
-          :page-sizes="[10, 20, 30, 40]"
-          :total="tableOptions.total"
-          layout="sizes, prev, pager, next, total"
-          @change="handlePageChange"
-      />
-    </div>
-  </el-card>
+  <el-button @click="handleOpen">确定</el-button>
 
+  <!-- 传递 isOpen 给子组件 -->
+  <!--<PropsTest :text="text" v-model="isOpen" />-->
+  <el-tag type="warning"></el-tag>
 </template>
-
-<style scoped>
-
-</style>