fetch(modify):修改bug

src/views/package-management/package-list/index.vue

@@ -5,7 +5,7 @@
       <ArtSearchBar
         v-model:filter="searchForm"
         :items="searchFormItems"
-        :show-expand="false"
+        :show-expand="true"
         @reset="handleReset"
         @search="handleSearch"
       ></ArtSearchBar>
@@ -48,7 +48,7 @@
           :close-on-click-modal="false"
           @closed="handleDialogClosed"
         >
-          <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
+          <ElForm ref="formRef" :model="form" :rules="rules" label-width="150px">
             <ElFormItem label="套餐编码" prop="package_code">
               <div style="display: flex; gap: 8px;">
                 <ElInput
@@ -99,17 +99,7 @@
                 />
               </ElSelect>
             </ElFormItem>
-            <ElFormItem label="流量类型" prop="data_type">
-              <ElSelect v-model="form.data_type" placeholder="请选择流量类型" style="width: 100%">
-                <ElOption
-                  v-for="option in DATA_TYPE_OPTIONS"
-                  :key="option.value"
-                  :label="option.label"
-                  :value="option.value"
-                />
-              </ElSelect>
-            </ElFormItem>
-            <ElFormItem label="真流量额度(MB)" prop="real_data_mb" v-if="form.data_type === 'real'">
+            <ElFormItem label="真流量额度(MB)" prop="real_data_mb">
               <ElInputNumber
                 v-model="form.real_data_mb"
                 :min="0"
@@ -118,10 +108,17 @@
                 placeholder="请输入真流量额度"
               />
             </ElFormItem>
+            <ElFormItem label="启用虚流量">
+              <ElSwitch
+                v-model="form.enable_virtual_data"
+                active-text="启用"
+                inactive-text="不启用"
+              />
+            </ElFormItem>
             <ElFormItem
               label="虚流量额度(MB)"
               prop="virtual_data_mb"
-              v-if="form.data_type === 'virtual'"
+              v-if="form.enable_virtual_data"
             >
               <ElInputNumber
                 v-model="form.virtual_data_mb"
@@ -140,15 +137,26 @@
                 style="width: 100%"
               />
             </ElFormItem>
-            <ElFormItem label="价格(元)" prop="price">
+            <ElFormItem label="成本价(元)" prop="cost_price">
               <ElInputNumber
-                v-model="form.price"
+                v-model="form.cost_price"
                 :min="0"
                 :precision="2"
                 :step="0.01"
                 :controls="false"
                 style="width: 100%"
-                placeholder="请输入价格"
+                placeholder="请输入成本价"
+              />
+            </ElFormItem>
+            <ElFormItem label="建议售价(元)" prop="suggested_retail_price">
+              <ElInputNumber
+                v-model="form.suggested_retail_price"
+                :min="0"
+                :precision="2"
+                :step="0.01"
+                :controls="false"
+                style="width: 100%"
+                placeholder="请输入建议售价(可选)"
               />
             </ElFormItem>
             <ElFormItem label="套餐描述" prop="description">
@@ -178,6 +186,7 @@
 
 <script setup lang="ts">
   import { h } from 'vue'
+  import { useRouter } from 'vue-router'
   import { PackageManageService, PackageSeriesService } from '@/api/modules'
   import { ElMessage, ElMessageBox, ElTag, ElSwitch, ElButton } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
@@ -187,25 +196,22 @@
   import { useAuth } from '@/composables/useAuth'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
   import { formatDateTime } from '@/utils/business/format'
+  import { RoutesAlias } from '@/router/routesAlias'
   import {
     CommonStatus,
     getStatusText,
     frontendStatusToApi,
     apiStatusToFrontend,
     PACKAGE_TYPE_OPTIONS,
-    DATA_TYPE_OPTIONS,
-    SHELF_STATUS_OPTIONS,
     getPackageTypeLabel,
-    getPackageTypeTag,
-    getDataTypeLabel,
-    getDataTypeTag,
-    getShelfStatusText
+    getPackageTypeTag
   } from '@/config/constants'
   import { generatePackageCode } from '@/utils/codeGenerator'
 
   defineOptions({ name: 'PackageList' })
 
   const { hasAuth } = useAuth()
+  const router = useRouter()
 
   const dialogVisible = ref(false)
   const loading = ref(false)
@@ -308,16 +314,15 @@
 
   // 列配置
   const columnOptions = [
-    { label: 'ID', prop: 'id' },
     { label: '套餐编码', prop: 'package_code' },
     { label: '套餐名称', prop: 'package_name' },
     { label: '所属系列', prop: 'series_name' },
     { label: '套餐类型', prop: 'package_type' },
-    { label: '流量类型', prop: 'data_type' },
     { label: '真流量', prop: 'real_data_mb' },
     { label: '虚流量', prop: 'virtual_data_mb' },
     { label: '有效期', prop: 'duration_months' },
-    { label: '价格', prop: 'price' },
+    { label: '成本价', prop: 'cost_price' },
+    { label: '建议售价', prop: 'suggested_retail_price' },
     { label: '上架状态', prop: 'shelf_status' },
     { label: '状态', prop: 'status' },
     { label: '创建时间', prop: 'created_at' },
@@ -335,20 +340,16 @@
         { required: true, message: '请输入套餐名称', trigger: 'blur' },
         { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
       ],
-      series_id: [{ required: true, message: '请选择套餐系列', trigger: 'change' }],
       package_type: [{ required: true, message: '请选择套餐类型', trigger: 'change' }],
-      data_type: [{ required: true, message: '请选择流量类型', trigger: 'change' }],
       duration_months: [
         { required: true, message: '请输入有效期', trigger: 'blur' },
         { type: 'number', min: 1, max: 120, message: '有效期范围 1-120 月', trigger: 'blur' }
       ],
-      price: [{ required: true, message: '请输入价格', trigger: 'blur' }]
+      cost_price: [{ required: true, message: '请输入成本价', trigger: 'blur' }]
     }
 
-    // 根据流量类型动态添加验证规则
-    if (form.data_type === 'real') {
-      baseRules.real_data_mb = [{ required: true, message: '请输入真流量额度', trigger: 'blur' }]
-    } else if (form.data_type === 'virtual') {
+    // 如果启用虚流量，则虚流量额度为必填
+    if (form.enable_virtual_data) {
       baseRules.virtual_data_mb = [{ required: true, message: '请输入虚流量额度', trigger: 'blur' }]
     }
 
@@ -362,11 +363,12 @@
     package_name: '',
     series_id: undefined,
     package_type: '',
-    data_type: '',
+    enable_virtual_data: false,
     real_data_mb: 0,
     virtual_data_mb: 0,
     duration_months: 1,
-    price: 0,
+    cost_price: 0,
+    suggested_retail_price: undefined,
     description: ''
   })
 
@@ -375,20 +377,16 @@
 
   // 动态列配置
   const { columnChecks, columns } = useCheckedColumns(() => [
-    {
-      prop: 'id',
-      label: 'ID',
-      width: 80
-    },
     {
       prop: 'package_code',
       label: '套餐编码',
-      minWidth: 150
+      showOverflowTooltip: true,
+      width: 210
     },
     {
       prop: 'package_name',
       label: '套餐名称',
-      minWidth: 180
+      minWidth: 160
     },
     {
       prop: 'series_name',
@@ -405,16 +403,6 @@
         )
       }
     },
-    {
-      prop: 'data_type',
-      label: '流量类型',
-      width: 100,
-      formatter: (row: PackageResponse) => {
-        return h(ElTag, { type: getDataTypeTag(row.data_type), size: 'small' }, () =>
-          getDataTypeLabel(row.data_type)
-        )
-      }
-    },
     {
       prop: 'real_data_mb',
       label: '真流量',
@@ -434,10 +422,17 @@
       formatter: (row: PackageResponse) => `${row.duration_months}月`
     },
     {
-      prop: 'price',
-      label: '价格',
+      prop: 'cost_price',
+      label: '成本价',
       width: 100,
-      formatter: (row: PackageResponse) => `¥${(row.price / 100).toFixed(2)}`
+      formatter: (row: PackageResponse) => `¥${(row.cost_price / 100).toFixed(2)}`
+    },
+    {
+      prop: 'suggested_retail_price',
+      label: '建议售价',
+      width: 100,
+      formatter: (row: PackageResponse) =>
+        row.suggested_retail_price ? `¥${(row.suggested_retail_price / 100).toFixed(2)}` : '-'
     },
     {
       prop: 'shelf_status',
@@ -483,11 +478,18 @@
     {
       prop: 'operation',
       label: '操作',
-      width: 150,
+      width: 200,
       fixed: 'right',
       formatter: (row: PackageResponse) => {
         const buttons = []
 
+        buttons.push(
+          h(ArtButtonTable, {
+            type: 'view',
+            onClick: () => handleViewDetail(row)
+          })
+        )
+
         if (hasAuth('package:edit')) {
           buttons.push(
             h(ArtButtonTable, {
@@ -511,14 +513,12 @@
     }
   ])
 
-  // 监听流量类型变化,重置未使用的流量字段
+  // 监听虚流量开关变化,关闭时重置虚流量额度
   watch(
-    () => form.data_type,
-    (newType) => {
-      if (newType === 'real') {
+    () => form.enable_virtual_data,
+    (enabled) => {
+      if (!enabled) {
         form.virtual_data_mb = 0
-      } else if (newType === 'virtual') {
-        form.real_data_mb = 0
       }
     }
   )
@@ -656,11 +656,12 @@
       form.package_name = row.package_name
       form.series_id = row.series_id
       form.package_type = row.package_type
-      form.data_type = row.data_type
-      form.real_data_mb = row.real_data_mb
-      form.virtual_data_mb = row.virtual_data_mb
+      form.enable_virtual_data = row.enable_virtual_data || false
+      form.real_data_mb = row.real_data_mb || 0
+      form.virtual_data_mb = row.virtual_data_mb || 0
       form.duration_months = row.duration_months
-      form.price = row.price / 100 // 分转换为元显示
+      form.cost_price = row.cost_price / 100 // 分转换为元显示
+      form.suggested_retail_price = row.suggested_retail_price ? row.suggested_retail_price / 100 : undefined
       form.description = row.description || ''
     } else {
       form.id = 0
@@ -668,11 +669,12 @@
       form.package_name = ''
       form.series_id = undefined
       form.package_type = ''
-      form.data_type = ''
+      form.enable_virtual_data = false
       form.real_data_mb = 0
       form.virtual_data_mb = 0
       form.duration_months = 1
-      form.price = 0
+      form.cost_price = 0
+      form.suggested_retail_price = undefined
       form.description = ''
     }
 
@@ -685,6 +687,10 @@
   // 生成套餐编码
   const handleGeneratePackageCode = () => {
     form.package_code = generatePackageCode()
+    // 生成编码后清除该字段的验证错误
+    nextTick(() => {
+      formRef.value?.clearValidate('package_code')
+    })
     ElMessage.success('编码生成成功')
   }
 
@@ -698,11 +704,12 @@
     form.package_name = ''
     form.series_id = undefined
     form.package_type = ''
-    form.data_type = ''
+    form.enable_virtual_data = false
     form.real_data_mb = 0
     form.virtual_data_mb = 0
     form.duration_months = 1
-    form.price = 0
+    form.cost_price = 0
+    form.suggested_retail_price = undefined
     form.description = ''
   }
 
@@ -736,19 +743,32 @@
         submitLoading.value = true
         try {
           // 将元转换为分提交给后端
-          const priceInCents = Math.round(form.price * 100)
+          const costPriceInCents = Math.round(form.cost_price * 100)
+          const suggestedRetailPriceInCents = form.suggested_retail_price
+            ? Math.round(form.suggested_retail_price * 100)
+            : undefined
 
-          const data = {
+          const data: any = {
             package_code: form.package_code,
             package_name: form.package_name,
-            series_id: form.series_id,
             package_type: form.package_type,
-            data_type: form.data_type,
-            real_data_mb: form.real_data_mb,
-            virtual_data_mb: form.virtual_data_mb,
             duration_months: form.duration_months,
-            price: priceInCents,
-            description: form.description || undefined
+            cost_price: costPriceInCents,
+            enable_virtual_data: form.enable_virtual_data
+          }
+
+          // 可选字段
+          if (form.series_id) {
+            data.series_id = form.series_id
+          }
+          if (suggestedRetailPriceInCents !== undefined) {
+            data.suggested_retail_price = suggestedRetailPriceInCents
+          }
+          if (form.real_data_mb) {
+            data.real_data_mb = form.real_data_mb
+          }
+          if (form.enable_virtual_data && form.virtual_data_mb) {
+            data.virtual_data_mb = form.virtual_data_mb
           }
 
           if (dialogType.value === 'add') {
@@ -797,6 +817,11 @@
       console.error(error)
     }
   }
+
+  // 查看详情
+  const handleViewDetail = (row: PackageResponse) => {
+    router.push(`${RoutesAlias.PackageDetail}/${row.id}`)
+  }
 </script>
 
 <style lang="scss" scoped>