修改工单

2026-02-25 16:14:38 +08:00
parent ca3184857e
commit dccad819cf
20 changed files with 2163 additions and 1229 deletions
--- a/src/views/package-management/package-list/detail.vue
+++ b/src/views/package-management/package-list/detail.vue
@@ -25,224 +25,231 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
-import { ArrowLeft, Loading } from '@element-plus/icons-vue'
-import DetailPage from '@/components/common/DetailPage.vue'
-import type { DetailSection } from '@/components/common/DetailPage.vue'
-import { PackageManageService } from '@/api/modules'
-import type { PackageResponse } from '@/types/api'
-import { formatDateTime } from '@/utils/business/format'
+  import { ref, onMounted } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailSection } from '@/components/common/DetailPage.vue'
+  import { PackageManageService } from '@/api/modules'
+  import type { PackageResponse } from '@/types/api'
+  import { formatDateTime } from '@/utils/business/format'

-defineOptions({ name: 'PackageDetail' })
+  defineOptions({ name: 'PackageDetail' })

-const route = useRoute()
-const router = useRouter()
+  const route = useRoute()
+  const router = useRouter()

-const loading = ref(false)
-const detailData = ref<PackageResponse | null>(null)
+  const loading = ref(false)
+  const detailData = ref<PackageResponse | null>(null)

-// 详情页配置
-const detailSections: DetailSection[] = [
-  {
-    title: '基本信息',
-    fields: [
-      { label: 'ID', prop: 'id' },
-      { label: '套餐编码', prop: 'package_code' },
-      { label: '套餐名称', prop: 'package_name' },
-      { label: '套餐系列', prop: 'series_name' },
-      {
-        label: '套餐类型',
-        formatter: (_, data) => {
-          const typeMap = {
-            formal: '正式套餐',
-            addon: '附加套餐'
+  // 详情页配置
+  const detailSections: DetailSection[] = [
+    {
+      title: '基本信息',
+      fields: [
+        { label: 'ID', prop: 'id' },
+        { label: '套餐编码', prop: 'package_code' },
+        { label: '套餐名称', prop: 'package_name' },
+        { label: '套餐系列', prop: 'series_name' },
+        {
+          label: '套餐类型',
+          formatter: (_, data) => {
+            const typeMap = {
+              formal: '正式套餐',
+              addon: '附加套餐'
+            }
+            return typeMap[data.package_type] || data.package_type
          }
-          return typeMap[data.package_type] || data.package_type
-        }
-      },
-      {
-        label: '套餐时长',
-        formatter: (_, data) => {
-          return `${data.duration_months} 个月`
-        }
-      },
-      {
-        label: '状态',
-        formatter: (_, data) => {
-          return data.status === 1 ? '启用' : '禁用'
-        }
-      },
-      {
-        label: '上架状态',
-        formatter: (_, data) => {
-          return data.shelf_status === 1 ? '上架' : '下架'
-        }
-      },
-      { label: '创建时间', prop: 'created_at', formatter: (value) => formatDateTime(value) },
-      { label: '更新时间', prop: 'updated_at', formatter: (value) => formatDateTime(value) }
-    ]
-  },
-  {
-    title: '流量配置',
-    fields: [
-      {
-        label: '真流量额度',
-        formatter: (_, data) => {
-          if (data.real_data_mb >= 1024) {
-            return `${(data.real_data_mb / 1024).toFixed(2)} GB`
+        },
+        {
+          label: '套餐时长',
+          formatter: (_, data) => {
+            return `${data.duration_months} 个月`
          }
-          return `${data.real_data_mb} MB`
-        }
-      },
-      {
-        label: '启用虚流量',
-        formatter: (_, data) => {
-          return data.enable_virtual_data ? '是' : '否'
-        }
-      },
-      {
-        label: '虚流量额度',
-        formatter: (_, data) => {
-          if (!data.enable_virtual_data) return '-'
-          if (data.virtual_data_mb >= 1024) {
-            return `${(data.virtual_data_mb / 1024).toFixed(2)} GB`
+        },
+        {
+          label: '状态',
+          formatter: (_, data) => {
+            return data.status === 1 ? '启用' : '禁用'
+          }
+        },
+        {
+          label: '上架状态',
+          formatter: (_, data) => {
+            return data.shelf_status === 1 ? '上架' : '下架'
+          }
+        },
+        { label: '创建时间', prop: 'created_at', formatter: (value) => formatDateTime(value) },
+        { label: '更新时间', prop: 'updated_at', formatter: (value) => formatDateTime(value) }
+      ]
+    },
+    {
+      title: '流量配置',
+      fields: [
+        {
+          label: '真流量额度',
+          formatter: (_, data) => {
+            if (data.real_data_mb >= 1024) {
+              return `${(data.real_data_mb / 1024).toFixed(2)} GB`
+            }
+            return `${data.real_data_mb} MB`
+          }
+        },
+        {
+          label: '启用虚流量',
+          formatter: (_, data) => {
+            return data.enable_virtual_data ? '是' : '否'
+          }
+        },
+        {
+          label: '虚流量额度',
+          formatter: (_, data) => {
+            if (!data.enable_virtual_data) return '-'
+            if (data.virtual_data_mb >= 1024) {
+              return `${(data.virtual_data_mb / 1024).toFixed(2)} GB`
+            }
+            return `${data.virtual_data_mb} MB`
          }
-          return `${data.virtual_data_mb} MB`
        }
-      }
-    ]
-  },
-  {
-    title: '价格信息',
-    fields: [
-      {
-        label: '成本价',
-        formatter: (_, data) => {
-          return `¥${(data.cost_price / 100).toFixed(2)}`
+      ]
+    },
+    {
+      title: '价格信息',
+      fields: [
+        {
+          label: '成本价',
+          formatter: (_, data) => {
+            return `¥${(data.cost_price / 100).toFixed(2)}`
+          }
+        },
+        {
+          label: '建议售价',
+          formatter: (_, data) => {
+            return `¥${(data.suggested_retail_price / 100).toFixed(2)}`
+          }
+        },
+        {
+          label: '利润空间',
+          formatter: (_, data) => {
+            if (data.profit_margin === null || data.profit_margin === undefined) return '-'
+            return `¥${(data.profit_margin / 100).toFixed(2)}`
+          }
        }
-      },
-      {
-        label: '建议售价',
-        formatter: (_, data) => {
-          return `¥${(data.suggested_retail_price / 100).toFixed(2)}`
+      ]
+    },
+    {
+      title: '佣金配置',
+      fields: [
+        {
+          label: '当前返佣比例',
+          formatter: (_, data) => {
+            return data.current_commission_rate || '-'
+          }
+        },
+        {
+          label: '一次性佣金金额',
+          formatter: (_, data) => {
+            if (
+              data.one_time_commission_amount === null ||
+              data.one_time_commission_amount === undefined
+            )
+              return '-'
+            return `¥${(data.one_time_commission_amount / 100).toFixed(2)}`
+          }
+        },
+        {
+          label: '当前返佣档位',
+          formatter: (_, data) => {
+            if (!data.tier_info || !data.tier_info.current_rate) return '-'
+            return data.tier_info.current_rate
+          }
+        },
+        {
+          label: '下一档位比例',
+          formatter: (_, data) => {
+            if (!data.tier_info || !data.tier_info.next_rate) return '-'
+            return data.tier_info.next_rate
+          }
+        },
+        {
+          label: '下一档位阈值',
+          formatter: (_, data) => {
+            if (
+              !data.tier_info ||
+              data.tier_info.next_threshold === null ||
+              data.tier_info.next_threshold === undefined
+            )
+              return '-'
+            return data.tier_info.next_threshold
+          }
        }
-      },
-      {
-        label: '利润空间',
-        formatter: (_, data) => {
-          if (data.profit_margin === null || data.profit_margin === undefined) return '-'
-          return `¥${(data.profit_margin / 100).toFixed(2)}`
-        }
-      }
-    ]
-  },
-  {
-    title: '佣金配置',
-    fields: [
-      {
-        label: '当前返佣比例',
-        formatter: (_, data) => {
-          return data.current_commission_rate || '-'
-        }
-      },
-      {
-        label: '一次性佣金金额',
-        formatter: (_, data) => {
-          if (data.one_time_commission_amount === null || data.one_time_commission_amount === undefined) return '-'
-          return `¥${(data.one_time_commission_amount / 100).toFixed(2)}`
-        }
-      },
-      {
-        label: '当前返佣档位',
-        formatter: (_, data) => {
-          if (!data.tier_info || !data.tier_info.current_rate) return '-'
-          return data.tier_info.current_rate
-        }
-      },
-      {
-        label: '下一档位比例',
-        formatter: (_, data) => {
-          if (!data.tier_info || !data.tier_info.next_rate) return '-'
-          return data.tier_info.next_rate
-        }
-      },
-      {
-        label: '下一档位阈值',
-        formatter: (_, data) => {
-          if (!data.tier_info || data.tier_info.next_threshold === null || data.tier_info.next_threshold === undefined) return '-'
-          return data.tier_info.next_threshold
-        }
-      }
-    ]
-  }
-]
-
-// 返回上一页
-const handleBack = () => {
-  router.back()
-}
-
-// 获取详情数据
-const fetchDetail = async () => {
-  const id = Number(route.params.id)
-  if (!id) {
-    ElMessage.error('缺少ID参数')
-    return
-  }
-
-  loading.value = true
-  try {
-    const res = await PackageManageService.getPackageDetail(id)
-    if (res.code === 0) {
-      detailData.value = res.data
+      ]
    }
-  } catch (error) {
-    console.error(error)
-    ElMessage.error('获取详情失败')
-  } finally {
-    loading.value = false
-  }
-}
+  ]

-onMounted(() => {
-  fetchDetail()
-})
+  // 返回上一页
+  const handleBack = () => {
+    router.back()
+  }
+
+  // 获取详情数据
+  const fetchDetail = async () => {
+    const id = Number(route.params.id)
+    if (!id) {
+      ElMessage.error('缺少ID参数')
+      return
+    }
+
+    loading.value = true
+    try {
+      const res = await PackageManageService.getPackageDetail(id)
+      if (res.code === 0) {
+        detailData.value = res.data
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取详情失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    fetchDetail()
+  })
 </script>

 <style scoped lang="scss">
-.package-detail {
-  padding: 20px;
-}
-
-.detail-header {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--el-border-color-light);
-
-  .detail-title {
-    margin: 0;
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--el-text-color-primary);
+  .package-detail {
+    padding: 20px;
  }
-}

-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  gap: 12px;
-  color: var(--el-text-color-secondary);
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding-bottom: 16px;

-  .el-icon {
-    font-size: 32px;
+    .detail-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    gap: 12px;
+    color: var(--el-text-color-secondary);
+
+    .el-icon {
+      font-size: 32px;
+    }
  }
-}
 </style>
--- a/src/views/package-management/package-list/index.vue
+++ b/src/views/package-management/package-list/index.vue
@@ -18,7 +18,9 @@
          @refresh="handleRefresh"
        >
          <template #left>
-            <ElButton type="primary" @click="showDialog('add')" v-permission="'package:add'">新增套餐</ElButton>
+            <ElButton type="primary" @click="showDialog('add')" v-permission="'package:add'"
+              >新增套餐</ElButton
+            >
          </template>
        </ArtTableHeader>

@@ -50,13 +52,13 @@
        >
          <ElForm ref="formRef" :model="form" :rules="rules" label-width="150px">
            <ElFormItem label="套餐编码" prop="package_code">
-              <div style="display: flex; gap: 8px;">
+              <div style="display: flex; gap: 8px">
                <ElInput
                  v-model="form.package_code"
                  placeholder="请输入套餐编码或点击生成"
                  :disabled="dialogType === 'edit'"
                  clearable
-                  style="flex: 1;"
+                  style="flex: 1"
                />
                <ElButton v-if="dialogType === 'add'" @click="handleGeneratePackageCode">
                  生成编码
@@ -478,14 +480,14 @@
    {
      prop: 'operation',
      label: '操作',
-      width: 200,
+      width: 220,
      fixed: 'right',
      formatter: (row: PackageResponse) => {
        const buttons = []

        buttons.push(
          h(ArtButtonTable, {
-            type: 'view',
+            text: '详情',
            onClick: () => handleViewDetail(row)
          })
        )
@@ -493,7 +495,7 @@
        if (hasAuth('package:edit')) {
          buttons.push(
            h(ArtButtonTable, {
-              type: 'edit',
+              text: '编辑',
              onClick: () => showDialog('edit', row)
            })
          )
@@ -502,7 +504,7 @@
        if (hasAuth('package:delete')) {
          buttons.push(
            h(ArtButtonTable, {
-              type: 'delete',
+              text: '删除',
              onClick: () => deletePackage(row)
            })
          )
@@ -661,7 +663,9 @@
      form.virtual_data_mb = row.virtual_data_mb || 0
      form.duration_months = row.duration_months
      form.cost_price = row.cost_price / 100 // 分转换为元显示
-      form.suggested_retail_price = row.suggested_retail_price ? row.suggested_retail_price / 100 : undefined
+      form.suggested_retail_price = row.suggested_retail_price
+        ? row.suggested_retail_price / 100
+        : undefined
      form.description = row.description || ''
    } else {
      form.id = 0