fetch(modify):账号管理

src/components/business/CustomerAccountDialog.vue

@@ -0,0 +1,286 @@
+<template>
+  <ElDialog v-model="visible" title="客户账号列表" width="1200px" @close="handleClose">
+    <!-- 搜索栏 -->
+    <ArtSearchBar
+      v-model:filter="searchForm"
+      :items="searchFormItems"
+      :show-expand="false"
+      label-width="85"
+      @reset="handleReset"
+      @search="handleSearch"
+    ></ArtSearchBar>
+
+    <!-- 表格 -->
+    <ArtTable
+      ref="tableRef"
+      row-key="id"
+      :loading="loading"
+      :data="accountList"
+      :currentPage="pagination.page"
+      :pageSize="pagination.pageSize"
+      :total="pagination.total"
+      :marginTop="10"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+      <template #default>
+        <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+      </template>
+    </ArtTable>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { ElMessage, ElTag } from 'element-plus'
+  import { CustomerAccountService } from '@/api/modules'
+  import type { SearchFormItem } from '@/types'
+  import { formatDateTime } from '@/utils/business/format'
+
+  interface CustomerAccount {
+    id: number
+    username: string
+    phone: string
+    user_type: number
+    user_type_name: string
+    shop_id: number | null
+    shop_name: string
+    enterprise_id: number | null
+    enterprise_name: string
+    status: number
+    status_name: string
+    created_at: string
+  }
+
+  const props = defineProps<{
+    modelValue: boolean
+    shopId?: number
+    enterpriseId?: number
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+  }>()
+
+  const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val)
+  })
+
+  const loading = ref(false)
+  const tableRef = ref()
+  const accountList = ref<CustomerAccount[]>([])
+
+  // 搜索表单初始值
+  const initialSearchState = {
+    username: '',
+    phone: '',
+    user_type: undefined as number | undefined,
+    status: undefined as number | undefined
+  }
+
+  // 搜索表单
+  const searchForm = reactive({ ...initialSearchState })
+
+  // 分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 搜索表单配置
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: '用户名',
+      prop: 'username',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入用户名'
+      }
+    },
+    {
+      label: '手机号',
+      prop: 'phone',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入手机号'
+      }
+    },
+    {
+      label: '用户类型',
+      prop: 'user_type',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '代理账号', value: 3 },
+        { label: '企业账号', value: 4 }
+      ]
+    },
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 }
+      ]
+    }
+  ]
+
+  // 获取用户类型标签类型
+  const getUserTypeTag = (type: number) => {
+    return type === 3 ? 'success' : 'primary'
+  }
+
+  // 获取状态标签类型
+  const getStatusTag = (status: number) => {
+    return status === 1 ? 'success' : 'info'
+  }
+
+  // 列配置
+  const columns = computed(() => [
+    {
+      prop: 'username',
+      label: '用户名',
+      minWidth: 150
+    },
+    {
+      prop: 'phone',
+      label: '手机号',
+      width: 130
+    },
+    {
+      prop: 'user_type_name',
+      label: '用户类型',
+      width: 110,
+      formatter: (row: CustomerAccount) => {
+        return h(ElTag, { type: getUserTypeTag(row.user_type) }, () => row.user_type_name)
+      }
+    },
+    {
+      prop: 'shop_name',
+      label: '店铺名称',
+      minWidth: 150,
+      showOverflowTooltip: true,
+      formatter: (row: CustomerAccount) => row.shop_name || '-'
+    },
+    {
+      prop: 'enterprise_name',
+      label: '企业名称',
+      minWidth: 150,
+      showOverflowTooltip: true,
+      formatter: (row: CustomerAccount) => row.enterprise_name || '-'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      formatter: (row: CustomerAccount) => {
+        return h(ElTag, { type: getStatusTag(row.status) }, () => row.status_name)
+      }
+    },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      width: 180,
+      formatter: (row: CustomerAccount) => formatDateTime(row.created_at)
+    }
+  ])
+
+  // 监听弹窗打开，重新加载数据
+  watch(
+    () => props.modelValue,
+    (newVal) => {
+      if (newVal) {
+        handleReset()
+      }
+    }
+  )
+
+  // 获取客户账号列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params: any = {
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        username: searchForm.username || undefined,
+        phone: searchForm.phone || undefined,
+        user_type: searchForm.user_type,
+        status: searchForm.status
+      }
+
+      // 根据传入的参数筛选
+      if (props.shopId) {
+        params.shop_id = props.shopId
+      }
+      if (props.enterpriseId) {
+        params.enterprise_id = props.enterpriseId
+      }
+
+      // 清理空值
+      Object.keys(params).forEach((key) => {
+        if (params[key] === '' || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      const res = await CustomerAccountService.getCustomerAccounts(params)
+      if (res.code === 0) {
+        accountList.value = res.data.items || []
+        pagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取客户账号列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getTableData()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.page = newCurrentPage
+    getTableData()
+  }
+
+  // 关闭弹窗
+  const handleClose = () => {
+    // 重置搜索表单
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    accountList.value = []
+  }
+</script>
+
+<style lang="scss" scoped>
+  // 客户账号列表弹窗样式
+</style>

src/router/routes/asyncRoutes.ts

@@ -611,89 +611,89 @@ export const asyncRoutes: AppRouteRecord[] = [
   //   }
   // },
   // 物联网卡管理系统模块
-  {
+  // {
-    path: '/card-management',
+  //   path: '/card-management',
-    name: 'CardManagement',
+  //   name: 'CardManagement',
-    component: RoutesAlias.Home,
+  //   component: RoutesAlias.Home,
-    meta: {
+  //   meta: {
-      title: 'menus.cardManagement.title',
+  //     title: 'menus.cardManagement.title',
-      icon: ''
+  //     icon: ''
-    },
+  //   },
-    children: [
+  //   children: [
-      // {
+  //     // {
-      //   path: 'card-detail',
+  //     //   path: 'card-detail',
-      //   name: 'CardDetail',
+  //     //   name: 'CardDetail',
-      //   component: RoutesAlias.CardDetail,
+  //     //   component: RoutesAlias.CardDetail,
-      //   meta: {
+  //     //   meta: {
-      //     title: 'menus.cardManagement.cardDetail',
+  //     //     title: 'menus.cardManagement.cardDetail',
-      //     keepAlive: true
+  //     //     keepAlive: true
-      //   }
+  //     //   }
-      // },
+  //     // },
-      {
+  //     {
-        path: 'card-assign',
+  //       path: 'card-assign',
-        name: 'CardAssign',
+  //       name: 'CardAssign',
-        component: RoutesAlias.CardAssign,
+  //       component: RoutesAlias.CardAssign,
-        meta: {
+  //       meta: {
-          title: 'menus.cardManagement.cardAssign',
+  //         title: 'menus.cardManagement.cardAssign',
-          keepAlive: true
+  //         keepAlive: true
-        }
+  //       }
-      },
+  //     },
-      {
+  //     {
-        path: 'card-shutdown',
+  //       path: 'card-shutdown',
-        name: 'CardShutdown',
+  //       name: 'CardShutdown',
-        component: RoutesAlias.CardShutdown,
+  //       component: RoutesAlias.CardShutdown,
-        meta: {
+  //       meta: {
-          title: 'menus.cardManagement.cardShutdown',
+  //         title: 'menus.cardManagement.cardShutdown',
-          keepAlive: true
+  //         keepAlive: true
-        }
+  //       }
-      },
+  //     },
-      {
+  //     {
-        path: 'my-cards',
+  //       path: 'my-cards',
-        name: 'MyCards',
+  //       name: 'MyCards',
-        component: RoutesAlias.MyCards,
+  //       component: RoutesAlias.MyCards,
-        meta: {
+  //       meta: {
-          title: 'menus.cardManagement.myCards',
+  //         title: 'menus.cardManagement.myCards',
-          keepAlive: true
+  //         keepAlive: true
-        }
+  //       }
-      },
+  //     },
-      {
+  //     {
-        path: 'card-transfer',
+  //       path: 'card-transfer',
-        name: 'CardTransfer',
+  //       name: 'CardTransfer',
-        component: RoutesAlias.CardTransfer,
+  //       component: RoutesAlias.CardTransfer,
-        meta: {
+  //       meta: {
-          title: 'menus.cardManagement.cardTransfer',
+  //         title: 'menus.cardManagement.cardTransfer',
-          keepAlive: true
+  //         keepAlive: true
-        }
+  //       }
-      },
+  //     },
-      {
+  //     {
-        path: 'card-replacement',
+  //       path: 'card-replacement',
-        name: 'CardReplacement',
+  //       name: 'CardReplacement',
-        component: RoutesAlias.CardReplacement,
+  //       component: RoutesAlias.CardReplacement,
-        meta: {
+  //       meta: {
-          title: 'menus.cardManagement.cardReplacement',
+  //         title: 'menus.cardManagement.cardReplacement',
-          keepAlive: true
+  //         keepAlive: true
-        }
+  //       }
-      },
+  //     },
-      {
+  //     {
-        path: 'package-gift',
+  //       path: 'package-gift',
-        name: 'PackageGift',
+  //       name: 'PackageGift',
-        component: RoutesAlias.PackageGift,
+  //       component: RoutesAlias.PackageGift,
-        meta: {
+  //       meta: {
-          title: 'menus.cardManagement.packageGift',
+  //         title: 'menus.cardManagement.packageGift',
-          keepAlive: true
+  //         keepAlive: true
-        }
+  //       }
-      },
+  //     },
-      {
+  //     {
-        path: 'card-change-card',
+  //       path: 'card-change-card',
-        name: 'CardChangeCard',
+  //       name: 'CardChangeCard',
-        component: RoutesAlias.CardChangeCard,
+  //       component: RoutesAlias.CardChangeCard,
-        meta: {
+  //       meta: {
-          title: 'menus.cardManagement.cardChange',
+  //         title: 'menus.cardManagement.cardChange',
-          keepAlive: true
+  //         keepAlive: true
-        }
+  //       }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
   {
     path: '/package-management',
     name: 'PackageManagement',
@@ -815,15 +815,6 @@ export const asyncRoutes: AppRouteRecord[] = [
       //     keepAlive: true
       //   }
       // },
-      {
-        path: 'customer-account',
-        name: 'CustomerAccount',
-        component: RoutesAlias.CustomerAccount,
-        meta: {
-          title: 'menus.accountManagement.customerAccount',
-          keepAlive: true
-        }
-      },
       {
         path: 'enterprise-cards',
         name: 'EnterpriseCards',
@@ -965,16 +956,6 @@ export const asyncRoutes: AppRouteRecord[] = [
           keepAlive: true
         }
       },
-      {
-        path: 'allocation-record-detail',
-        name: 'AllocationRecordDetail',
-        component: RoutesAlias.AllocationRecordDetail,
-        meta: {
-          title: 'menus.assetManagement.allocationRecordDetail',
-          isHide: true,
-          keepAlive: false
-        }
-      },
       {
         path: 'card-replacement-request',
         name: 'CardReplacementRequest',
@@ -993,16 +974,6 @@ export const asyncRoutes: AppRouteRecord[] = [
           keepAlive: true
         }
       },
-      {
-        path: 'authorization-detail',
-        name: 'AuthorizationDetail',
-        component: RoutesAlias.AuthorizationDetail,
-        meta: {
-          title: 'menus.assetManagement.authorizationDetail',
-          isHide: true,
-          keepAlive: false
-        }
-      },
       {
         path: 'enterprise-devices',
         name: 'EnterpriseDevices',

src/router/routesAlias.ts

@@ -80,7 +80,6 @@ export enum RoutesAlias {
   CustomerManagement = '/account-management/customer', // 客户管理
   CustomerRole = '/account-management/customer-role', // 客户角色
   AgentManagement = '/account-management/agent', // 代理商管理
-  CustomerAccount = '/account-management/customer-account', // 客户账号管理
   ShopAccount = '/account-management/shop-account', // 代理账号管理
   EnterpriseCustomer = '/account-management/enterprise-customer', // 企业客户管理
   EnterpriseCards = '/account-management/enterprise-cards', // 企业卡管理
@@ -97,10 +96,8 @@ export enum RoutesAlias {
   DeviceList = '/asset-management/device-list', // 设备列表
   DeviceDetail = '/asset-management/device-detail', // 设备详情
   AssetAssign = '/asset-management/asset-assign', // 资产分配(分配记录)
-  AllocationRecordDetail = '/asset-management/allocation-record-detail', // 分配记录详情
   CardReplacementRequest = '/asset-management/card-replacement-request', // 换卡申请
   AuthorizationRecords = '/asset-management/authorization-records', // 授权记录
-  AuthorizationDetail = '/asset-management/authorization-detail', // 授权记录详情
   EnterpriseDevices = '/asset-management/enterprise-devices', // 企业设备列表
 
   // 账户管理

src/types/components.d.ts

@@ -78,6 +78,7 @@ declare module 'vue' {
     CommentWidget: typeof import('./../components/custom/comment-widget/index.vue')['default']
     CommissionDisplay: typeof import('./../components/business/CommissionDisplay.vue')['default']
     ContainerSettings: typeof import('./../components/core/layouts/art-settings-panel/widget/ContainerSettings.vue')['default']
+    CustomerAccountDialog: typeof import('./../components/business/CustomerAccountDialog.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']

src/views/account-management/customer-account/index.vue

@@ -1,571 +0,0 @@
-<template>
-  <ArtTableFullScreen>
-    <div class="customer-account-page" id="table-full-screen">
-      <!-- 搜索栏 -->
-      <ArtSearchBar
-        v-model:filter="searchForm"
-        :items="searchFormItems"
-        :show-expand="false"
-        @reset="handleReset"
-        @search="handleSearch"
-      ></ArtSearchBar>
-
-      <ElCard shadow="never" class="art-table-card">
-        <!-- 表格头部 -->
-        <ArtTableHeader
-          :columnList="columnOptions"
-          v-model:columns="columnChecks"
-          @refresh="handleRefresh"
-        >
-          <template #left>
-            <ElButton @click="showDialog('add')">新增代理商账号</ElButton>
-          </template>
-        </ArtTableHeader>
-
-        <!-- 表格 -->
-        <ArtTable
-          ref="tableRef"
-          row-key="id"
-          :loading="loading"
-          :data="accountList"
-          :currentPage="pagination.page"
-          :pageSize="pagination.pageSize"
-          :total="pagination.total"
-          :marginTop="10"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        >
-          <template #default>
-            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
-          </template>
-        </ArtTable>
-
-        <!-- 新增/编辑对话框 -->
-        <ElDialog
-          v-model="dialogVisible"
-          :title="dialogType === 'add' ? '新增代理商账号' : '编辑账号'"
-          width="500px"
-        >
-          <ElForm ref="formRef" :model="form" :rules="rules" label-width="80px">
-            <ElFormItem label="用户名" prop="username">
-              <ElInput
-                v-model="form.username"
-                placeholder="请输入用户名"
-                :disabled="dialogType === 'edit'"
-              />
-            </ElFormItem>
-            <ElFormItem label="手机号" prop="phone">
-              <ElInput v-model="form.phone" placeholder="请输入手机号" />
-            </ElFormItem>
-            <ElFormItem v-if="dialogType === 'add'" label="密码" prop="password">
-              <ElInput
-                v-model="form.password"
-                type="password"
-                placeholder="请输入密码(6-20位)"
-                show-password
-              />
-            </ElFormItem>
-            <ElFormItem label="店铺" prop="shop_id">
-              <ElSelect
-                v-model="form.shop_id"
-                placeholder="请选择店铺"
-                filterable
-                remote
-                :remote-method="searchShops"
-                :loading="shopLoading"
-                clearable
-                style="width: 100%"
-              >
-                <ElOption
-                  v-for="shop in shopList"
-                  :key="shop.id"
-                  :label="shop.shop_name"
-                  :value="shop.id"
-                />
-              </ElSelect>
-            </ElFormItem>
-          </ElForm>
-          <template #footer>
-            <div class="dialog-footer">
-              <ElButton @click="dialogVisible = false">取消</ElButton>
-              <ElButton type="primary" @click="handleSubmit(formRef)" :loading="submitLoading">
-                提交
-              </ElButton>
-            </div>
-          </template>
-        </ElDialog>
-
-        <!-- 修改密码对话框 -->
-        <ElDialog v-model="passwordDialogVisible" title="修改密码" width="400px">
-          <ElForm ref="passwordFormRef" :model="passwordForm" :rules="passwordRules">
-            <ElFormItem label="新密码" prop="password">
-              <ElInput
-                v-model="passwordForm.password"
-                type="password"
-                placeholder="请输入新密码(6-20位)"
-                show-password
-              />
-            </ElFormItem>
-          </ElForm>
-          <template #footer>
-            <div class="dialog-footer">
-              <ElButton @click="passwordDialogVisible = false">取消</ElButton>
-              <ElButton
-                type="primary"
-                @click="handlePasswordSubmit(passwordFormRef)"
-                :loading="passwordSubmitLoading"
-              >
-                提交
-              </ElButton>
-            </div>
-          </template>
-        </ElDialog>
-      </ElCard>
-    </div>
-  </ArtTableFullScreen>
-</template>
-
-<script setup lang="ts">
-  import { h } from 'vue'
-  import { CustomerAccountService, ShopService } from '@/api/modules'
-  import { ElMessage, ElTag, ElSwitch } from 'element-plus'
-  import type { FormInstance, FormRules } from 'element-plus'
-  import type { CustomerAccountItem, ShopResponse } from '@/types/api'
-  import type { SearchFormItem } from '@/types'
-  import { useCheckedColumns } from '@/composables/useCheckedColumns'
-  import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
-  import { formatDateTime } from '@/utils/business/format'
-
-  defineOptions({ name: 'CustomerAccount' })
-
-  const dialogVisible = ref(false)
-  const passwordDialogVisible = ref(false)
-  const loading = ref(false)
-  const submitLoading = ref(false)
-  const passwordSubmitLoading = ref(false)
-  const shopLoading = ref(false)
-  const tableRef = ref()
-  const currentAccountId = ref<number>(0)
-  const shopList = ref<ShopResponse[]>([])
-
-  // 搜索表单初始值
-  const initialSearchState = {
-    username: '',
-    phone: '',
-    user_type: undefined as number | undefined,
-    status: undefined as number | undefined
-  }
-
-  // 搜索表单
-  const searchForm = reactive({ ...initialSearchState })
-
-  // 用户类型选项
-  const userTypeOptions = [
-    { label: '个人账号', value: 2 },
-    { label: '代理账号', value: 3 },
-    { label: '企业账号', value: 4 }
-  ]
-
-  // 状态选项
-  const statusOptions = [
-    { label: '启用', value: 1 },
-    { label: '禁用', value: 0 }
-  ]
-
-  // 搜索表单配置
-  const searchFormItems = computed<SearchFormItem[]>(() => [
-    {
-      label: '用户名',
-      prop: 'username',
-      type: 'input',
-      config: {
-        clearable: true,
-        placeholder: '请输入用户名'
-      }
-    },
-    {
-      label: '手机号',
-      prop: 'phone',
-      type: 'input',
-      config: {
-        clearable: true,
-        placeholder: '请输入手机号'
-      }
-    },
-    {
-      label: '用户类型',
-      prop: 'user_type',
-      type: 'select',
-      options: userTypeOptions,
-      config: {
-        clearable: true,
-        placeholder: '请选择用户类型'
-      }
-    },
-    {
-      label: '状态',
-      prop: 'status',
-      type: 'select',
-      options: statusOptions,
-      config: {
-        clearable: true,
-        placeholder: '请选择状态'
-      }
-    }
-  ])
-
-  // 分页
-  const pagination = reactive({
-    page: 1,
-    pageSize: 20,
-    total: 0
-  })
-
-  // 列配置
-  const columnOptions = [
-    { label: 'ID', prop: 'id' },
-    { label: '用户名', prop: 'username' },
-    { label: '手机号', prop: 'phone' },
-    { label: '用户类型', prop: 'user_type_name' },
-    { label: '店铺名称', prop: 'shop_name' },
-    { label: '企业名称', prop: 'enterprise_name' },
-    { label: '状态', prop: 'status' },
-    { label: '创建时间', prop: 'created_at' },
-    { label: '操作', prop: 'operation' }
-  ]
-
-  const formRef = ref<FormInstance>()
-  const passwordFormRef = ref<FormInstance>()
-
-  const rules = reactive<FormRules>({
-    username: [
-      { required: true, message: '请输入用户名', trigger: 'blur' },
-      { min: 2, max: 50, message: '用户名长度为2-50个字符', trigger: 'blur' }
-    ],
-    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
-    password: [
-      { required: true, message: '请输入密码', trigger: 'blur' },
-      { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
-    ],
-    shop_id: [{ required: true, message: '请输入店铺ID', trigger: 'blur' }]
-  })
-
-  const passwordRules = reactive<FormRules>({
-    password: [
-      { required: true, message: '请输入新密码', trigger: 'blur' },
-      { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
-    ]
-  })
-
-  const dialogType = ref('add')
-
-  const form = reactive<any>({
-    id: 0,
-    username: '',
-    phone: '',
-    password: '',
-    shop_id: null
-  })
-
-  const passwordForm = reactive({
-    password: ''
-  })
-
-  const accountList = ref<CustomerAccountItem[]>([])
-
-  // 动态列配置
-  const { columnChecks, columns } = useCheckedColumns(() => [
-    {
-      prop: 'id',
-      label: 'ID',
-      width: 80
-    },
-    {
-      prop: 'username',
-      label: '用户名',
-      minWidth: 120
-    },
-    {
-      prop: 'phone',
-      label: '手机号',
-      width: 130
-    },
-    {
-      prop: 'user_type_name',
-      label: '用户类型',
-      width: 100,
-      formatter: (row: CustomerAccountItem) => {
-        return h(
-          ElTag,
-          { type: row.user_type === 3 ? 'primary' : 'success' },
-          () => row.user_type_name
-        )
-      }
-    },
-    {
-      prop: 'shop_name',
-      label: '店铺名称',
-      minWidth: 150,
-      showOverflowTooltip: true,
-      formatter: (row: CustomerAccountItem) => row.shop_name || '-'
-    },
-    {
-      prop: 'enterprise_name',
-      label: '企业名称',
-      minWidth: 150,
-      showOverflowTooltip: true,
-      formatter: (row: CustomerAccountItem) => row.enterprise_name || '-'
-    },
-    {
-      prop: 'status',
-      label: '状态',
-      width: 100,
-      formatter: (row: CustomerAccountItem) => {
-        return h(ElSwitch, {
-          modelValue: row.status,
-          activeValue: 1,
-          inactiveValue: 0,
-          activeText: '启用',
-          inactiveText: '禁用',
-          inlinePrompt: true,
-          'onUpdate:modelValue': (val: string | number | boolean) =>
-            handleStatusChange(row, val as number)
-        })
-      }
-    },
-    {
-      prop: 'created_at',
-      label: '创建时间',
-      width: 180,
-      formatter: (row: CustomerAccountItem) => formatDateTime(row.created_at)
-    },
-    {
-      prop: 'operation',
-      label: '操作',
-      width: 160,
-      fixed: 'right',
-      formatter: (row: CustomerAccountItem) => {
-        return h('div', { style: 'display: flex; gap: 8px;' }, [
-          h(ArtButtonTable, {
-            icon: '&#xe72b;',
-            onClick: () => showPasswordDialog(row)
-          }),
-          h(ArtButtonTable, {
-            type: 'edit',
-            onClick: () => showDialog('edit', row)
-          })
-        ])
-      }
-    }
-  ])
-
-  onMounted(() => {
-    getTableData()
-    loadShopList()
-  })
-
-  // 加载店铺列表(默认加载20条)
-  const loadShopList = async (shopName?: string) => {
-    shopLoading.value = true
-    try {
-      const params: any = {
-        page: 1,
-        pageSize: 20
-      }
-      if (shopName) {
-        params.shop_name = shopName
-      }
-      const res = await ShopService.getShops(params)
-      if (res.code === 0) {
-        shopList.value = res.data.items || []
-      }
-    } catch (error) {
-      console.error('获取店铺列表失败:', error)
-    } finally {
-      shopLoading.value = false
-    }
-  }
-
-  // 搜索店铺
-  const searchShops = (query: string) => {
-    if (query) {
-      loadShopList(query)
-    } else {
-      loadShopList()
-    }
-  }
-
-  // 获取客户账号列表
-  const getTableData = async () => {
-    loading.value = true
-    try {
-      const params = {
-        page: pagination.page,
-        page_size: pagination.pageSize,
-        username: searchForm.username || undefined,
-        phone: searchForm.phone || undefined,
-        user_type: searchForm.user_type,
-        status: searchForm.status
-      }
-      const res = await CustomerAccountService.getCustomerAccounts(params)
-      if (res.code === 0) {
-        accountList.value = res.data.items || []
-        pagination.total = res.data.total || 0
-      }
-    } catch (error) {
-      console.error(error)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 重置搜索
-  const handleReset = () => {
-    Object.assign(searchForm, { ...initialSearchState })
-    pagination.page = 1
-    getTableData()
-  }
-
-  // 搜索
-  const handleSearch = () => {
-    pagination.page = 1
-    getTableData()
-  }
-
-  // 刷新表格
-  const handleRefresh = () => {
-    getTableData()
-  }
-
-  // 处理表格分页变化
-  const handleSizeChange = (newPageSize: number) => {
-    pagination.pageSize = newPageSize
-    getTableData()
-  }
-
-  const handleCurrentChange = (newCurrentPage: number) => {
-    pagination.page = newCurrentPage
-    getTableData()
-  }
-
-  // 显示新增/编辑对话框
-  const showDialog = (type: string, row?: CustomerAccountItem) => {
-    dialogType.value = type
-
-    if (type === 'edit' && row) {
-      form.id = row.id
-      form.username = row.username
-      form.phone = row.phone
-      form.shop_id = row.shop_id
-    } else {
-      form.id = 0
-      form.username = ''
-      form.phone = ''
-      form.password = ''
-      form.shop_id = null
-    }
-
-    // 重置表单验证状态
-    nextTick(() => {
-      formRef.value?.clearValidate()
-    })
-
-    dialogVisible.value = true
-  }
-
-  // 显示修改密码对话框
-  const showPasswordDialog = (row: CustomerAccountItem) => {
-    currentAccountId.value = row.id
-    passwordForm.password = ''
-
-    // 重置表单验证状态
-    nextTick(() => {
-      passwordFormRef.value?.clearValidate()
-    })
-
-    passwordDialogVisible.value = true
-  }
-
-  // 提交表单
-  const handleSubmit = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-
-    await formEl.validate(async (valid) => {
-      if (valid) {
-        submitLoading.value = true
-        try {
-          if (dialogType.value === 'add') {
-            const data = {
-              username: form.username,
-              phone: form.phone,
-              password: form.password,
-              shop_id: form.shop_id
-            }
-            await CustomerAccountService.createCustomerAccount(data)
-            ElMessage.success('新增成功')
-          } else {
-            const data: any = {}
-            if (form.username) data.username = form.username
-            if (form.phone) data.phone = form.phone
-            await CustomerAccountService.updateCustomerAccount(form.id, data)
-            ElMessage.success('修改成功')
-          }
-
-          dialogVisible.value = false
-          formEl.resetFields()
-          getTableData()
-        } catch (error) {
-          console.error(error)
-        } finally {
-          submitLoading.value = false
-        }
-      }
-    })
-  }
-
-  // 提交修改密码
-  const handlePasswordSubmit = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-
-    await formEl.validate(async (valid) => {
-      if (valid) {
-        passwordSubmitLoading.value = true
-        try {
-          await CustomerAccountService.updateCustomerAccountPassword(currentAccountId.value, {
-            password: passwordForm.password
-          })
-          ElMessage.success('密码修改成功')
-          passwordDialogVisible.value = false
-          formEl.resetFields()
-        } catch (error) {
-          console.error(error)
-        } finally {
-          passwordSubmitLoading.value = false
-        }
-      }
-    })
-  }
-
-  // 状态切换
-  const handleStatusChange = async (row: CustomerAccountItem, newStatus: number) => {
-    const oldStatus = row.status
-    // 先更新UI
-    row.status = newStatus
-    try {
-      await CustomerAccountService.updateCustomerAccountStatus(row.id, {
-        status: newStatus as 0 | 1
-      })
-      ElMessage.success('状态切换成功')
-    } catch (error) {
-      // 切换失败，恢复原状态
-      row.status = oldStatus
-      console.error(error)
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .customer-account-page {
-    // 可以在这里添加客户账号页面特定样式
-  }
-</style>

src/views/account-management/enterprise-cards/index.vue

@@ -175,7 +175,7 @@
           >
             <ElDivider content-position="left">失败项详情</ElDivider>
             <ElTable :data="operationResult.failed_items" border max-height="300">
-              <ElTableColumn prop="iccid" label="ICCID" width="180" />
+              <ElTableColumn prop="iccid" label="ICCID" width="200" />
               <ElTableColumn prop="reason" label="失败原因" />
             </ElTable>
           </div>

src/views/account-management/enterprise-customer/index.vue

@@ -168,6 +168,12 @@
           </template>
         </ElDialog>
 
+        <!-- 客户账号列表弹窗 -->
+        <CustomerAccountDialog
+          v-model="customerAccountDialogVisible"
+          :enterprise-id="currentEnterpriseId"
+        />
+
         <!-- 修改密码对话框 -->
         <ElDialog v-model="passwordDialogVisible" title="修改密码" width="400px">
           <ElForm ref="passwordFormRef" :model="passwordForm" :rules="passwordRules">
@@ -208,6 +214,7 @@
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import CustomerAccountDialog from '@/components/business/CustomerAccountDialog.vue'
   import { formatDateTime } from '@/utils/business/format'
   import { BgColorEnum } from '@/enums/appEnum'
 
@@ -217,6 +224,7 @@
 
   const dialogVisible = ref(false)
   const passwordDialogVisible = ref(false)
+  const customerAccountDialogVisible = ref(false)
   const loading = ref(false)
   const submitLoading = ref(false)
   const passwordSubmitLoading = ref(false)
@@ -439,7 +447,7 @@
     {
       prop: 'operation',
       label: '操作',
-      width: 260,
+      width: 340,
       fixed: 'right',
       formatter: (row: EnterpriseItem) => {
         return h('div', { style: 'display: flex; gap: 8px;' }, [
@@ -448,6 +456,11 @@
             iconClass: BgColorEnum.SECONDARY,
             onClick: () => showDialog('edit', row)
           }),
+          h(ArtButtonTable, {
+            text: '查看客户',
+            iconClass: BgColorEnum.PRIMARY,
+            onClick: () => viewCustomerAccounts(row)
+          }),
           h(ArtButtonTable, {
             text: '卡授权',
             iconClass: BgColorEnum.PRIMARY,
@@ -710,6 +723,12 @@
     }
   }
 
+  // 查看客户账号
+  const viewCustomerAccounts = (row: EnterpriseItem) => {
+    currentEnterpriseId.value = row.id
+    customerAccountDialogVisible.value = true
+  }
+
   // 卡管理
   const manageCards = (row: EnterpriseItem) => {
     router.push({

src/views/asset-management/allocation-record-detail/index.vue

@@ -1,189 +0,0 @@
-<template>
-  <ArtTableFullScreen>
-    <div class="allocation-record-detail-page" id="table-full-screen">
-      <ElCard shadow="never" style="margin-bottom: 20px">
-        <template #header>
-          <div class="card-header">
-            <span>分配记录详情</span>
-            <ElButton @click="goBack">返回</ElButton>
-          </div>
-        </template>
-
-        <ElSkeleton :loading="loading" :rows="10" animated>
-          <template #default>
-            <ElDescriptions v-if="recordDetail" title="基本信息" :column="3" border>
-              <ElDescriptionsItem label="分配单号">{{
-                recordDetail.allocation_no
-              }}</ElDescriptionsItem>
-              <ElDescriptionsItem label="分配类型">
-                <ElTag :type="getAllocationTypeType(recordDetail.allocation_type)">
-                  {{ recordDetail.allocation_name }}
-                </ElTag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="资产类型">
-                <ElTag :type="getAssetTypeType(recordDetail.asset_type)">
-                  {{ recordDetail.asset_type_name }}
-                </ElTag>
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="资产标识符">{{
-                recordDetail.asset_identifier
-              }}</ElDescriptionsItem>
-              <ElDescriptionsItem label="关联卡数量">{{
-                recordDetail.related_card_count
-              }}</ElDescriptionsItem>
-              <ElDescriptionsItem label="关联设备ID">
-                {{ recordDetail.related_device_id || '-' }}
-              </ElDescriptionsItem>
-            </ElDescriptions>
-
-            <ElDescriptions
-              v-if="recordDetail"
-              title="所有者信息"
-              :column="2"
-              border
-              style="margin-top: 20px"
-            >
-              <ElDescriptionsItem label="来源所有者">
-                {{ recordDetail.from_owner_name }} ({{ recordDetail.from_owner_type }})
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="目标所有者">
-                {{ recordDetail.to_owner_name }} ({{ recordDetail.to_owner_type }})
-              </ElDescriptionsItem>
-            </ElDescriptions>
-
-            <ElDescriptions
-              v-if="recordDetail"
-              title="操作信息"
-              :column="2"
-              border
-              style="margin-top: 20px"
-            >
-              <ElDescriptionsItem label="操作人">{{
-                recordDetail.operator_name
-              }}</ElDescriptionsItem>
-              <ElDescriptionsItem label="创建时间">
-                {{ formatDateTime(recordDetail.created_at) }}
-              </ElDescriptionsItem>
-              <ElDescriptionsItem label="备注" :span="2">
-                {{ recordDetail.remark || '-' }}
-              </ElDescriptionsItem>
-            </ElDescriptions>
-
-            <!-- 关联卡列表 -->
-            <div
-              v-if="
-                recordDetail &&
-                recordDetail.related_card_ids &&
-                recordDetail.related_card_ids.length > 0
-              "
-              style="margin-top: 20px"
-            >
-              <ElDivider content-position="left">关联卡列表</ElDivider>
-              <ElTable :data="relatedCardsList" border>
-                <ElTableColumn type="index" label="序号" width="60" />
-                <ElTableColumn prop="card_id" label="卡ID" width="80" />
-                <ElTableColumn label="ICCID" width="180">
-                  <template #default="scope">
-                    {{ getCardInfo(scope.row.card_id, 'iccid') }}
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn label="状态" width="100">
-                  <template #default="scope">
-                    {{ getCardInfo(scope.row.card_id, 'status') }}
-                  </template>
-                </ElTableColumn>
-              </ElTable>
-            </div>
-          </template>
-        </ElSkeleton>
-      </ElCard>
-    </div>
-  </ArtTableFullScreen>
-</template>
-
-<script setup lang="ts">
-  import { useRouter, useRoute } from 'vue-router'
-  import { CardService } from '@/api/modules'
-  import { ElMessage } from 'element-plus'
-  import { formatDateTime } from '@/utils/business/format'
-  import type {
-    AssetAllocationRecordDetail,
-    AllocationTypeEnum,
-    AssetTypeEnum
-  } from '@/types/api/card'
-
-  defineOptions({ name: 'AllocationRecordDetail' })
-
-  const router = useRouter()
-  const route = useRoute()
-  const loading = ref(false)
-  const recordDetail = ref<AssetAllocationRecordDetail | null>(null)
-  const relatedCardsList = ref<{ card_id: number }[]>([])
-
-  // 获取分配类型标签类型
-  const getAllocationTypeType = (type: AllocationTypeEnum) => {
-    return type === 'allocate' ? 'success' : 'warning'
-  }
-
-  // 获取资产类型标签类型
-  const getAssetTypeType = (type: AssetTypeEnum) => {
-    return type === 'iot_card' ? 'primary' : 'info'
-  }
-
-  // 模拟获取卡信息的方法(实际应该调用API获取)
-  const getCardInfo = (cardId: number, field: 'iccid' | 'status') => {
-    if (field === 'iccid') {
-      return `ICCID-${cardId}`
-    } else {
-      return '在库'
-    }
-  }
-
-  // 获取详情数据
-  const getDetailData = async () => {
-    const id = route.query.id as string
-    if (!id) {
-      ElMessage.error('缺少记录ID参数')
-      goBack()
-      return
-    }
-
-    loading.value = true
-    try {
-      const res = await CardService.getAssetAllocationRecordDetail(Number(id))
-      if (res.code === 0) {
-        recordDetail.value = res.data
-        // 构建关联卡列表
-        if (recordDetail.value.related_card_ids && recordDetail.value.related_card_ids.length > 0) {
-          relatedCardsList.value = recordDetail.value.related_card_ids.map((cardId) => ({
-            card_id: cardId
-          }))
-        }
-      }
-    } catch (error) {
-      console.error(error)
-      ElMessage.error('获取分配记录详情失败')
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 返回列表
-  const goBack = () => {
-    router.back()
-  }
-
-  onMounted(() => {
-    getDetailData()
-  })
-</script>
-
-<style lang="scss" scoped>
-  .allocation-record-detail-page {
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-  }
-</style>

src/views/asset-management/asset-assign/index.vue

@@ -40,6 +40,35 @@
             </ElTableColumn>
           </template>
         </ArtTable>
+
+        <!-- 分配详情对话框 -->
+        <ElDialog v-model="detailDialogVisible" title="分配详情" width="700px">
+          <ElDescriptions v-if="currentRecord" :column="2" border>
+            <ElDescriptionsItem label="分配单号" :span="2">{{ currentRecord.allocation_no }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="分配类型">
+              <ElTag :type="getAllocationTypeType(currentRecord.allocation_type)">
+                {{ currentRecord.allocation_name }}
+              </ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="资产类型">
+              <ElTag :type="getAssetTypeType(currentRecord.asset_type)">
+                {{ currentRecord.asset_type_name }}
+              </ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="资产标识符" :span="2">{{ currentRecord.asset_identifier }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="来源所有者">{{ currentRecord.from_owner_name }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="目标所有者">{{ currentRecord.to_owner_name }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="操作人">{{ currentRecord.operator_name }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="关联卡数量">{{ currentRecord.related_card_count }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="创建时间" :span="2">{{ formatDateTime(currentRecord.created_at) }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="备注" :span="2">{{ currentRecord.remark || '--' }}</ElDescriptionsItem>
+          </ElDescriptions>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton type="primary" @click="detailDialogVisible = false">关闭</ElButton>
+            </div>
+          </template>
+        </ElDialog>
       </ElCard>
     </div>
   </ArtTableFullScreen>
@@ -59,7 +88,9 @@
 
   const router = useRouter()
   const loading = ref(false)
+  const detailDialogVisible = ref(false)
   const tableRef = ref()
+  const currentRecord = ref<AssetAllocationRecord | null>(null)
 
   // 搜索表单初始值
   const initialSearchState = {
@@ -199,7 +230,7 @@
     {
       prop: 'asset_identifier',
       label: '资产标识符',
-      minWidth: 180
+      minWidth: 200
     },
     {
       prop: 'from_owner_name',
@@ -265,7 +296,7 @@
 
       const res = await CardService.getAssetAllocationRecords(params)
       if (res.code === 0) {
-        recordList.value = res.data.list || []
+        recordList.value = res.data.items || []
         pagination.total = res.data.total || 0
       }
     } catch (error) {
@@ -307,10 +338,8 @@
 
   // 查看详情
   const viewDetail = (row: AssetAllocationRecord) => {
-    router.push({
+    currentRecord.value = row
-      path: '/asset-management/allocation-record-detail',
+    detailDialogVisible.value = true
-      query: { id: row.id }
-    })
   }
 </script>
 

src/views/asset-management/authorization-detail/index.vue

@@ -1,118 +0,0 @@
-<template>
-  <div class="authorization-detail-page">
-    <ElCard shadow="never" v-loading="loading">
-      <template #header>
-        <div class="card-header">
-          <span>授权记录详情</span>
-          <ElButton @click="goBack">返回</ElButton>
-        </div>
-      </template>
-
-      <ElDescriptions v-if="authorizationDetail" :column="2" border>
-        <ElDescriptionsItem label="授权记录ID">{{ authorizationDetail.id }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="状态">
-          <ElTag :type="authorizationDetail.status === 1 ? 'success' : 'info'">
-            {{ authorizationDetail.status === 1 ? '有效' : '已回收' }}
-          </ElTag>
-        </ElDescriptionsItem>
-
-        <ElDescriptionsItem label="ICCID">{{ authorizationDetail.iccid }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="手机号">{{ authorizationDetail.msisdn }}</ElDescriptionsItem>
-
-        <ElDescriptionsItem label="企业名称">
-          {{ authorizationDetail.enterprise_name }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="企业ID">
-          {{ authorizationDetail.enterprise_id }}
-        </ElDescriptionsItem>
-
-        <ElDescriptionsItem label="授权人">
-          {{ authorizationDetail.authorizer_name }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="授权人类型">
-          <ElTag :type="authorizationDetail.authorizer_type === 2 ? 'primary' : 'success'">
-            {{ authorizationDetail.authorizer_type === 2 ? '平台' : '代理' }}
-          </ElTag>
-        </ElDescriptionsItem>
-
-        <ElDescriptionsItem label="授权时间">
-          {{ formatDateTime(authorizationDetail.authorized_at) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="授权人ID">
-          {{ authorizationDetail.authorized_by }}
-        </ElDescriptionsItem>
-
-        <ElDescriptionsItem label="回收人">
-          {{ authorizationDetail.revoker_name || '-' }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="回收时间">
-          {{
-            authorizationDetail.revoked_at ? formatDateTime(authorizationDetail.revoked_at) : '-'
-          }}
-        </ElDescriptionsItem>
-
-        <ElDescriptionsItem label="备注" :span="2">
-          {{ authorizationDetail.remark || '-' }}
-        </ElDescriptionsItem>
-      </ElDescriptions>
-    </ElCard>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { useRoute, useRouter } from 'vue-router'
-  import { AuthorizationService } from '@/api/modules'
-  import { ElMessage, ElTag } from 'element-plus'
-  import { formatDateTime } from '@/utils/business/format'
-  import type { AuthorizationItem } from '@/types/api/authorization'
-
-  defineOptions({ name: 'AuthorizationDetail' })
-
-  const route = useRoute()
-  const router = useRouter()
-  const loading = ref(false)
-  const authorizationDetail = ref<AuthorizationItem | null>(null)
-
-  onMounted(() => {
-    const id = route.query.id
-    if (id) {
-      getAuthorizationDetail(Number(id))
-    } else {
-      ElMessage.error('缺少授权记录ID')
-      goBack()
-    }
-  })
-
-  // 获取授权记录详情
-  const getAuthorizationDetail = async (id: number) => {
-    loading.value = true
-    try {
-      const res = await AuthorizationService.getAuthorizationDetail(id)
-      if (res.code === 0) {
-        authorizationDetail.value = res.data
-      }
-    } catch (error) {
-      console.error(error)
-      ElMessage.error('获取授权记录详情失败')
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 返回
-  const goBack = () => {
-    router.back()
-  }
-</script>
-
-<style lang="scss" scoped>
-  .authorization-detail-page {
-    padding: 20px;
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-  }
-</style>

src/views/asset-management/authorization-records/index.vue

@@ -36,6 +36,36 @@
           </template>
         </ArtTable>
 
+        <!-- 授权详情对话框 -->
+        <ElDialog v-model="detailDialogVisible" title="授权详情" width="700px">
+          <ElDescriptions v-if="currentRecord" :column="2" border>
+            <ElDescriptionsItem label="企业ID">{{ currentRecord.enterprise_id }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="企业名称">{{ currentRecord.enterprise_name }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="卡ID">{{ currentRecord.card_id }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="ICCID">{{ currentRecord.iccid }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="手机号">{{ currentRecord.msisdn || '--' }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="授权人ID">{{ currentRecord.authorized_by }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="授权人">{{ currentRecord.authorizer_name }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="授权人类型">
+              <ElTag :type="getAuthorizerTypeTag(currentRecord.authorizer_type)">
+                {{ getAuthorizerTypeText(currentRecord.authorizer_type) }}
+              </ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="授权时间" :span="2">{{ formatDateTime(currentRecord.authorized_at) }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="状态" :span="2">
+              <ElTag :type="getStatusTag(currentRecord.status)">
+                {{ getStatusText(currentRecord.status) }}
+              </ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="备注" :span="2">{{ currentRecord.remark || '--' }}</ElDescriptionsItem>
+          </ElDescriptions>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton type="primary" @click="detailDialogVisible = false">关闭</ElButton>
+            </div>
+          </template>
+        </ElDialog>
+
         <!-- 修改备注对话框 -->
         <ElDialog v-model="remarkDialogVisible" title="修改备注" width="500px">
           <ElForm ref="remarkFormRef" :model="remarkForm" :rules="remarkRules" label-width="80px">
@@ -85,11 +115,13 @@
 
   const router = useRouter()
   const loading = ref(false)
+  const detailDialogVisible = ref(false)
   const remarkDialogVisible = ref(false)
   const remarkLoading = ref(false)
   const tableRef = ref()
   const remarkFormRef = ref<FormInstance>()
   const currentRecordId = ref<number>(0)
+  const currentRecord = ref<AuthorizationItem | null>(null)
 
   // 搜索表单初始值
   const initialSearchState = {
@@ -172,7 +204,6 @@
 
   // 列配置
   const columnOptions = [
-    { label: 'ID', prop: 'id' },
     { label: 'ICCID', prop: 'iccid' },
     { label: '手机号', prop: 'msisdn' },
     { label: '企业名称', prop: 'enterprise_name' },
@@ -180,8 +211,6 @@
     { label: '授权人类型', prop: 'authorizer_type' },
     { label: '授权时间', prop: 'authorized_at' },
     { label: '状态', prop: 'status' },
-    { label: '回收人', prop: 'revoker_name' },
-    { label: '回收时间', prop: 'revoked_at' },
     { label: '备注', prop: 'remark' },
     { label: '操作', prop: 'operation' }
   ]
@@ -210,20 +239,16 @@
 
   // 动态列配置
   const { columnChecks, columns } = useCheckedColumns(() => [
-    {
-      prop: 'id',
-      label: 'ID',
-      width: 80
-    },
     {
       prop: 'iccid',
       label: 'ICCID',
-      minWidth: 180
+      minWidth: 200
     },
     {
       prop: 'msisdn',
       label: '手机号',
-      width: 120
+      width: 130,
+      formatter: (row: AuthorizationItem) => row.msisdn || '-'
     },
     {
       prop: 'enterprise_name',
@@ -238,7 +263,7 @@
     {
       prop: 'authorizer_type',
       label: '授权人类型',
-      width: 100,
+      width: 110,
       formatter: (row: AuthorizationItem) => {
         return h(ElTag, { type: getAuthorizerTypeTag(row.authorizer_type) }, () =>
           getAuthorizerTypeText(row.authorizer_type)
@@ -259,18 +284,6 @@
         return h(ElTag, { type: getStatusTag(row.status) }, () => getStatusText(row.status))
       }
     },
-    {
-      prop: 'revoker_name',
-      label: '回收人',
-      width: 120,
-      formatter: (row: AuthorizationItem) => row.revoker_name || '-'
-    },
-    {
-      prop: 'revoked_at',
-      label: '回收时间',
-      width: 180,
-      formatter: (row: AuthorizationItem) => (row.revoked_at ? formatDateTime(row.revoked_at) : '-')
-    },
     {
       prop: 'remark',
       label: '备注',
@@ -286,7 +299,7 @@
       formatter: (row: AuthorizationItem) => {
         return h('div', { style: 'display: flex; gap: 8px;' }, [
           h(ArtButtonTable, {
-            type: 'view',
+            text: '详情',
             onClick: () => viewDetail(row)
           }),
           h(ArtButtonTable, {
@@ -371,10 +384,8 @@
 
   // 查看详情
   const viewDetail = (row: AuthorizationItem) => {
-    router.push({
+    currentRecord.value = row
-      path: '/asset-management/authorization-detail',
+    detailDialogVisible.value = true
-      query: { id: row.id }
-    })
   }
 
   // 显示修改备注对话框

src/views/asset-management/iot-card-management/index.vue

@@ -284,7 +284,7 @@
           >
             <ElDivider content-position="left">失败项详情</ElDivider>
             <ElTable :data="allocationResult.failed_items" border max-height="300">
-              <ElTableColumn prop="iccid" label="ICCID" width="180" />
+              <ElTableColumn prop="iccid" label="ICCID" width="200" />
               <ElTableColumn prop="reason" label="失败原因" />
             </ElTable>
           </div>
@@ -362,7 +362,7 @@
           >
             <ElDivider content-position="left">失败项详情</ElDivider>
             <ElTable :data="seriesBindingResult.failed_items" border max-height="300">
-              <ElTableColumn prop="iccid" label="ICCID" width="180" />
+              <ElTableColumn prop="iccid" label="ICCID" width="200" />
               <ElTableColumn prop="reason" label="失败原因" />
             </ElTable>
           </div>

src/views/product/shop/index.vue

@@ -180,6 +180,9 @@
             </div>
           </template>
         </ElDialog>
+
+        <!-- 客户账号列表弹窗 -->
+        <CustomerAccountDialog v-model="customerAccountDialogVisible" :shop-id="currentShopId" />
       </ElCard>
     </div>
   </ArtTableFullScreen>
@@ -199,6 +202,7 @@
   import type { FormRules } from 'element-plus'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import CustomerAccountDialog from '@/components/business/CustomerAccountDialog.vue'
   import { ShopService } from '@/api/modules'
   import type { SearchFormItem } from '@/types'
   import type { ShopResponse } from '@/types/api'
@@ -209,9 +213,11 @@
 
   const dialogType = ref('add')
   const dialogVisible = ref(false)
+  const customerAccountDialogVisible = ref(false)
   const loading = ref(false)
   const submitLoading = ref(false)
   const parentShopLoading = ref(false)
+  const currentShopId = ref<number>(0)
   const parentShopList = ref<ShopResponse[]>([])
   const searchParentShopList = ref<ShopResponse[]>([])
 
@@ -405,12 +411,13 @@
     {
       prop: 'shop_name',
       label: '店铺名称',
-      minWidth: 150
+      minWidth: 120
     },
     {
       prop: 'shop_code',
       label: '店铺编号',
-      width: 120
+      width: 150,
+      showOverflowTooltip: true
     },
     {
       prop: 'level',
@@ -423,7 +430,7 @@
     {
       prop: 'region',
       label: '所在地区',
-      minWidth: 180,
+      minWidth: 170,
       formatter: (row: ShopResponse) => {
         const parts: string[] = []
         if (row.province) parts.push(row.province)
@@ -446,7 +453,7 @@
     {
       prop: 'status',
       label: '状态',
-      width: 100,
+      width: 80,
       formatter: (row: ShopResponse) => {
         return h(ElSwitch, {
           modelValue: row.status,
@@ -469,10 +476,14 @@
     {
       prop: 'operation',
       label: '操作',
-      width: 150,
+      width: 220,
       fixed: 'right',
       formatter: (row: ShopResponse) => {
         return h('div', { style: 'display: flex; gap: 8px;' }, [
+          h(ArtButtonTable, {
+            text: '查看客户',
+            onClick: () => viewCustomerAccounts(row)
+          }),
           h(ArtButtonTable, {
             type: 'edit',
             onClick: () => showDialog('edit', row)
@@ -733,6 +744,12 @@
     getShopList()
   }
 
+  // 查看客户账号
+  const viewCustomerAccounts = (row: ShopResponse) => {
+    currentShopId.value = row.id
+    customerAccountDialogVisible.value = true
+  }
+
   // 状态切换
   const handleStatusChange = async (row: ShopResponse, newStatus: number) => {
     const oldStatus = row.status