fix: 新增: 修改资产套餐已用量, 修改资产套餐过期时间

src/views/asset-management/asset-information/components/PackageListCard.vue

@@ -200,36 +200,54 @@
               {{ formatDateTime(scope.row.created_at) }}
             </template>
           </ElTableColumn>
-          <ElTableColumn label="操作" width="180" fixed="right">
+          <ElTableColumn label="操作" width="240" fixed="right">
             <template #default="scope">
-              <ElButton
-                v-if="hasAuth('package_usage:daily_records')"
-                type="primary"
-                link
-                @click="handlePackageNameClick(scope.row)"
-              >
-                流量详单
-              </ElButton>
-              <ElButton
-                v-if="scope.row.status !== 4 && hasAuth('package:create_refund')"
-                type="primary"
-                link
-                @click="handleCreateRefund(scope.row)"
-              >
-                退款申请
-              </ElButton>
-              <ElButton
-                v-if="
-                  scope.row.status === 4 &&
-                  scope.row.refund_id &&
-                  hasAuth('refund:package_list_detail')
-                "
-                type="primary"
-                link
-                @click="handleViewRefundDetail(scope.row)"
-              >
-                退款详情
-              </ElButton>
+              <div class="package-actions">
+                <ElButton
+                  v-if="hasAuth('package_usage:daily_records')"
+                  type="primary"
+                  link
+                  @click="handlePackageNameClick(scope.row)"
+                >
+                  流量详单
+                </ElButton>
+                <ElButton
+                  v-if="scope.row.status !== 4 && hasAuth('package:create_refund')"
+                  type="primary"
+                  link
+                  @click="handleCreateRefund(scope.row)"
+                >
+                  退款申请
+                </ElButton>
+                <ElButton
+                  v-if="canUpdateUsedData"
+                  type="primary"
+                  link
+                  @click="handleShowUsedDataDialog(scope.row)"
+                >
+                  修改已用量
+                </ElButton>
+                <ElButton
+                  v-if="canUpdateExpiresAt"
+                  type="primary"
+                  link
+                  @click="handleShowExpiresAtDialog(scope.row)"
+                >
+                  修改过期时间
+                </ElButton>
+                <ElButton
+                  v-if="
+                    scope.row.status === 4 &&
+                    scope.row.refund_id &&
+                    hasAuth('refund:package_list_detail')
+                  "
+                  type="primary"
+                  link
+                  @click="handleViewRefundDetail(scope.row)"
+                >
+                  退款详情
+                </ElButton>
+              </div>
             </template>
           </ElTableColumn>
         </ElTable>
@@ -250,14 +268,96 @@
     <!-- 退款申请对话框 -->
     <CreateRefundDialog
       v-model="createRefundDialogVisible"
+      :initial-order-id="currentRefundOrderId"
       :initial-order-no="currentRefundOrderNo"
       @success="handleRefundSuccess"
     />
+
+    <ElDialog
+      v-model="usedDataDialogVisible"
+      title="修改已用量"
+      width="30%"
+      @closed="resetUsedDataForm"
+    >
+      <ElForm
+        ref="usedDataFormRef"
+        :model="usedDataForm"
+        :rules="usedDataRules"
+        label-width="90px"
+      >
+        <ElFormItem label="套餐名称">
+          <span>{{ selectedPackage?.package_name || '-' }}</span>
+        </ElFormItem>
+        <ElFormItem label="当前已用量">
+          <span>{{ formatDataSize(selectedPackage?.real_used_mb || 0) }}</span>
+        </ElFormItem>
+        <ElFormItem label="新的已用量" prop="data_usage">
+          <div class="used-data-input">
+            <ElInputNumber
+              v-model="usedDataForm.data_usage"
+              :min="0"
+              :max="usedDataMaxValue"
+              :precision="usedDataForm.unit === 'MB' ? 0 : 3"
+              :step="usedDataForm.unit === 'MB' ? 1 : 0.1"
+              class="used-data-input__number"
+              placeholder="请输入新的套餐真实已用量"
+            />
+            <ElSelect v-model="usedDataForm.unit" class="used-data-input__unit">
+              <ElOption label="MB" value="MB" />
+              <ElOption label="GB" value="GB" />
+            </ElSelect>
+          </div>
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <ElButton @click="usedDataDialogVisible = false">取消</ElButton>
+        <ElButton type="primary" :loading="usedDataSubmitting" @click="handleSubmitUsedData">
+          确认修改
+        </ElButton>
+      </template>
+    </ElDialog>
+
+    <ElDialog
+      v-model="expiresAtDialogVisible"
+      title="修改过期时间"
+      width="420px"
+      @closed="resetExpiresAtForm"
+    >
+      <ElForm
+        ref="expiresAtFormRef"
+        :model="expiresAtForm"
+        :rules="expiresAtRules"
+        label-width="120px"
+      >
+        <ElFormItem label="套餐名称">
+          <span>{{ selectedPackage?.package_name || '-' }}</span>
+        </ElFormItem>
+        <ElFormItem label="当前过期时间">
+          <span>{{ formatDateTime(selectedPackage?.expires_at) }}</span>
+        </ElFormItem>
+        <ElFormItem label="新的过期时间" prop="expires_at">
+          <ElDatePicker
+            v-model="expiresAtForm.expires_at"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择新的套餐过期时间"
+            style="width: 100%"
+          />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <ElButton @click="expiresAtDialogVisible = false">取消</ElButton>
+        <ElButton type="primary" :loading="expiresAtSubmitting" @click="handleSubmitExpiresAt">
+          确认修改
+        </ElButton>
+      </template>
+    </ElDialog>
   </ElCard>
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue'
+  import { computed, reactive, ref, watch } from 'vue'
   import {
     ElCard,
     ElTable,
@@ -266,13 +366,22 @@
     ElButton,
     ElProgress,
     ElEmpty,
-    ElPagination
+    ElPagination,
+    ElDialog,
+    ElForm,
+    ElFormItem,
+    ElInputNumber,
+    ElDatePicker,
+    ElSelect,
+    ElOption
   } from 'element-plus'
   import { ElMessage } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
 
   import { useAssetFormatters } from '../composables/useAssetFormatters'
   import { formatDateTime } from '@/utils/business/format'
   import type { AssetPackageUsageRecord } from '@/types/api'
+  import { AssetService } from '@/api/modules'
   import { useAuth } from '@/composables/useAuth'
   import { useUserStore } from '@/store/modules/user'
   import { storeToRefs } from 'pinia'
@@ -290,15 +399,80 @@
   const isAdminOrPlatform = computed(
     () => userInfo.value.user_type === 1 || userInfo.value.user_type === 2
   )
+  const isProductionMode = import.meta.env.MODE === 'production'
+  const canUseAdjustmentInCurrentEnv = (permission: string) => {
+    if (isProductionMode) {
+      return userInfo.value.user_type === 2 && hasAuth(permission)
+    }
+
+    return userInfo.value.user_type === 1
+  }
+  const canUpdateUsedData = computed(() => canUseAdjustmentInCurrentEnv('package:update_used_data'))
+  const canUpdateExpiresAt = computed(() =>
+    canUseAdjustmentInCurrentEnv('package:update_expires_at')
+  )
+
   // 退款申请对话框
   const createRefundDialogVisible = ref(false)
+  const currentRefundOrderId = ref<number | undefined>(undefined)
   const currentRefundOrderNo = ref<string | undefined>(undefined)
+  const selectedPackage = ref<PackageInfo>()
+  const usedDataDialogVisible = ref(false)
+  const expiresAtDialogVisible = ref(false)
+  const usedDataSubmitting = ref(false)
+  const expiresAtSubmitting = ref(false)
+  const usedDataFormRef = ref<FormInstance>()
+  const expiresAtFormRef = ref<FormInstance>()
+  const usedDataForm = reactive<{ data_usage: number | undefined; unit: 'MB' | 'GB' }>({
+    data_usage: undefined,
+    unit: 'MB'
+  })
+  const expiresAtForm = reactive<{ expires_at: string }>({
+    expires_at: ''
+  })
+
+  const usedDataMaxValue = computed(() => {
+    const realTotalMb = selectedPackage.value?.real_total_mb ?? 0
+    return usedDataForm.unit === 'GB' ? Number((realTotalMb / 1024).toFixed(3)) : realTotalMb
+  })
+
+  const validateUsedData = (
+    _rule: unknown,
+    _value: number | undefined,
+    callback: (error?: Error) => void
+  ) => {
+    const dataUsageMb = getUsedDataMb()
+    if (usedDataForm.data_usage === undefined || usedDataForm.data_usage === null) {
+      callback(new Error('请输入新的套餐真实已用量'))
+      return
+    }
+
+    if (dataUsageMb === undefined || dataUsageMb < 0 || !Number.isInteger(dataUsageMb)) {
+      callback(new Error('请输入可换算为非负整数 MB 的已用量'))
+      return
+    }
+
+    if (dataUsageMb > (selectedPackage.value?.real_total_mb ?? 0)) {
+      callback(new Error('新的已用量不能大于真流量总量'))
+      return
+    }
+
+    callback()
+  }
+
+  const usedDataRules = reactive<FormRules>({
+    data_usage: [{ validator: validateUsedData, trigger: 'blur' }]
+  })
+  const expiresAtRules = reactive<FormRules>({
+    expires_at: [{ required: true, message: '请选择新的套餐过期时间', trigger: 'change' }]
+  })
 
   const handleCreateRefund = (row: PackageInfo) => {
     if (!hasAuth('package:create_refund')) {
       ElMessage.warning('您没有创建退款申请的权限')
       return
     }
+    currentRefundOrderId.value = row.order_id
     currentRefundOrderNo.value = row.order_no
     createRefundDialogVisible.value = true
   }
@@ -307,6 +481,96 @@
     emit('refresh')
   }
 
+  const getPackageUsageId = (row: PackageInfo) => row.package_usage_id ?? row.id
+
+  const getUsedDataMb = () => {
+    if (usedDataForm.data_usage === undefined || usedDataForm.data_usage === null) return undefined
+    return usedDataForm.unit === 'GB' ? usedDataForm.data_usage * 1024 : usedDataForm.data_usage
+  }
+
+  const handleShowUsedDataDialog = (row: PackageInfo) => {
+    selectedPackage.value = row
+    usedDataForm.data_usage = row.real_used_mb ?? 0
+    usedDataForm.unit = 'MB'
+    usedDataDialogVisible.value = true
+  }
+
+  const handleShowExpiresAtDialog = (row: PackageInfo) => {
+    selectedPackage.value = row
+    expiresAtForm.expires_at = row.expires_at ? formatDateTime(row.expires_at) : ''
+    expiresAtDialogVisible.value = true
+  }
+
+  const resetUsedDataForm = () => {
+    usedDataFormRef.value?.resetFields()
+    usedDataForm.data_usage = undefined
+    usedDataForm.unit = 'MB'
+    selectedPackage.value = undefined
+  }
+
+  const resetExpiresAtForm = () => {
+    expiresAtFormRef.value?.resetFields()
+    expiresAtForm.expires_at = ''
+    selectedPackage.value = undefined
+  }
+
+  watch(
+    () => usedDataForm.unit,
+    () => {
+      if (usedDataForm.data_usage === undefined) return
+      usedDataForm.data_usage = Math.min(usedDataForm.data_usage, usedDataMaxValue.value)
+    }
+  )
+
+  const handleSubmitUsedData = async () => {
+    if (!usedDataFormRef.value || !selectedPackage.value) return
+    const packageUsageId = getPackageUsageId(selectedPackage.value)
+    if (!props.assetIdentifier || packageUsageId === undefined) {
+      ElMessage.error('缺少资产标识或套餐使用记录ID')
+      return
+    }
+
+    await usedDataFormRef.value.validate(async (valid) => {
+      if (!valid) return
+      usedDataSubmitting.value = true
+      try {
+        const dataUsageMb = getUsedDataMb()
+        await AssetService.updateAssetPackageUsedData(props.assetIdentifier, packageUsageId, {
+          data_usage_mb: dataUsageMb ?? null
+        })
+        ElMessage.success('已用量修改成功')
+        usedDataDialogVisible.value = false
+        emit('refresh')
+      } finally {
+        usedDataSubmitting.value = false
+      }
+    })
+  }
+
+  const handleSubmitExpiresAt = async () => {
+    if (!expiresAtFormRef.value || !selectedPackage.value) return
+    const packageUsageId = getPackageUsageId(selectedPackage.value)
+    if (!props.assetIdentifier || packageUsageId === undefined) {
+      ElMessage.error('缺少资产标识或套餐使用记录ID')
+      return
+    }
+
+    await expiresAtFormRef.value.validate(async (valid) => {
+      if (!valid) return
+      expiresAtSubmitting.value = true
+      try {
+        await AssetService.updateAssetPackageExpiresAt(props.assetIdentifier, packageUsageId, {
+          expires_at: expiresAtForm.expires_at
+        })
+        ElMessage.success('过期时间修改成功')
+        expiresAtDialogVisible.value = false
+        emit('refresh')
+      } finally {
+        expiresAtSubmitting.value = false
+      }
+    })
+  }
+
   // Props 使用 API 类型
   type PackageInfo = AssetPackageUsageRecord
 
@@ -326,6 +590,7 @@
     boundDeviceId?: number
     boundDeviceNo?: string
     loading?: boolean
+    assetIdentifier?: string
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -334,7 +599,8 @@
     pageSize: 10,
     boundDeviceId: undefined,
     boundDeviceNo: '',
-    loading: false
+    loading: false,
+    assetIdentifier: ''
   })
 
   // Emits
@@ -464,6 +730,19 @@
             white-space: nowrap;
           }
 
+          .package-actions {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 6px 8px;
+            align-items: center;
+
+            .el-button {
+              justify-content: flex-start;
+              width: 100%;
+              margin-left: 0;
+            }
+          }
+
           .traffic-progress {
             .progress-text {
               display: flex;
@@ -571,4 +850,28 @@
       }
     }
   }
+
+  .used-data-input {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 8px;
+    width: 100%;
+
+    &__number {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &__unit {
+      width: 112px;
+
+      :deep(.el-select__placeholder) {
+        justify-content: flex-start;
+      }
+
+      :deep(.el-select__selected-item) {
+        justify-content: flex-start;
+      }
+    }
+  }
 </style>