fetch(modify):修改bug

src/views/common/account-list.vue

@@ -0,0 +1,300 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="account-list-page" id="table-full-screen">
+      <ElCard shadow="never">
+        <div class="detail-header">
+          <ElButton @click="handleBack">
+            <template #icon><ElIcon><ArrowLeft /></ElIcon></template>
+            返回
+          </ElButton>
+          <h2 class="detail-title">{{ pageTitle }}</h2>
+        </div>
+
+        <!-- 搜索栏 -->
+        <ArtSearchBar
+          v-model:filter="searchForm"
+          :items="searchFormItems"
+          :show-expand="false"
+          @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"
+          height="60vh"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || (col as any).type" v-bind="col" />
+          </template>
+        </ArtTable>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { h, computed } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElMessage, ElTag, ElIcon, ElButton, ElCard } from 'element-plus'
+  import { ArrowLeft } from '@element-plus/icons-vue'
+  import { AccountService } from '@/api/modules'
+  import type { SearchFormItem } from '@/types'
+  import type { PlatformAccount } from '@/types/api'
+  import { formatDateTime } from '@/utils/business/format'
+
+  defineOptions({ name: 'CommonAccountList' })
+
+  const route = useRoute()
+  const router = useRouter()
+
+  // 判断页面类型：通过 query 参数判断
+  const isShopType = computed(() => route.query.type === 'shop')
+
+  // 页面标题
+  const pageTitle = computed(() => (isShopType.value ? '店铺账号列表' : '企业客户账号列表'))
+
+  // 过滤参数键名
+  const filterParamKey = computed(() => (isShopType.value ? 'shop_id' : 'enterprise_id'))
+
+  // 用户类型映射
+  const getUserTypeName = (type: number): string => {
+    const typeMap: Record<number, string> = {
+      1: '超级管理员',
+      2: '平台用户',
+      3: '代理账号',
+      4: '企业账号'
+    }
+    return typeMap[type] || '未知'
+  }
+
+  // 状态名称映射
+  const getStatusName = (status: number): string => {
+    return status === 1 ? '启用' : '禁用'
+  }
+
+  const loading = ref(false)
+  const tableRef = ref()
+  const accountList = ref<PlatformAccount[]>([])
+
+  // 搜索表单初始值
+  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',
+      label: '用户类型',
+      width: 110,
+      formatter: (row: PlatformAccount) => {
+        return h(ElTag, { type: getUserTypeTag(row.user_type) }, () => getUserTypeName(row.user_type))
+      }
+    },
+    {
+      prop: 'shop_id',
+      label: '店铺ID',
+      width: 100,
+      formatter: (row: PlatformAccount) => row.shop_id || '-'
+    },
+    {
+      prop: 'enterprise_id',
+      label: '企业ID',
+      width: 100,
+      formatter: (row: PlatformAccount) => row.enterprise_id || '-'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      formatter: (row: PlatformAccount) => {
+        return h(ElTag, { type: getStatusTag(row.status) }, () => getStatusName(row.status))
+      }
+    },
+    {
+      prop: 'CreatedAt',
+      label: '创建时间',
+      width: 180,
+      formatter: (row: PlatformAccount) => formatDateTime(row.CreatedAt)
+    }
+  ])
+
+  // 获取账号列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const entityId = Number(route.params.id)
+      const params: any = {
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        username: searchForm.username || undefined,
+        phone: searchForm.phone || undefined,
+        user_type: searchForm.user_type,
+        status: searchForm.status,
+        [filterParamKey.value]: entityId // 动态设置 shop_id 或 enterprise_id
+      }
+
+      // 清理空值
+      Object.keys(params).forEach((key) => {
+        if (params[key] === '' || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      const res = await AccountService.getAccounts(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 handleBack = () => {
+    router.back()
+  }
+
+  onMounted(() => {
+    getTableData()
+  })
+</script>
+
+<style lang="scss" scoped>
+  .account-list-page {
+    .detail-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 24px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid #e4e7ed;
+
+      .detail-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+  }
+</style>