feat: 添加用户虚拟机商品管理

2026-03-31 15:13:04 +08:00
parent 71d3605f4f
commit c07e09c151
28 changed files with 7143 additions and 621 deletions
@@ -0,0 +1,251 @@
+<template>
+  <div class="goods-detail-page">
+    <div class="page-header">
+      <div class="header-left">
+        <el-button @click="goBack" link class="back-btn">
+          <el-icon><ArrowLeft /></el-icon> 返回所有商品列表
+        </el-button>
+        <el-divider direction="vertical" />
+        <span class="page-title">所有商品详情</span>
+      </div>
+      <div class="header-right">
+        <el-button type="primary" plain @click="loadDetail" :loading="loading">
+          <el-icon><Refresh /></el-icon> 刷新
+        </el-button>
+      </div>
+    </div>
+
+    <div class="main-content" v-loading="loading">
+      <el-card class="profile-card" shadow="never" v-if="detail">
+        <div class="profile-header">
+          <div class="profile-basic">
+            <div class="icon-wrapper">
+              <el-icon :size="48" color="#409eff"><Monitor /></el-icon>
+            </div>
+            <div class="identity">
+              <div class="name-row">
+                <h1 class="name">{{ detail.good?.name || '用户商品 #' + goodsId }}</h1>
+                <el-button size="small" type="primary" plain @click="openEdit">编辑</el-button>
+                <el-button size="small" type="danger" plain @click="handleDelete">删除</el-button>
+              </div>
+              <div class="id-row">
+                <span class="label">ID:</span>
+                <span class="value">{{ detail.id || goodsId }}</span>
+                <el-divider direction="vertical" />
+                <span class="label">用户ID:</span>
+                <span class="value">{{ detail.userId || detail.user_id || '-' }}</span>
+                <el-divider direction="vertical" />
+                <span class="label">到期:</span>
+                <span class="value">{{ formatExpireTime(detail.expireTime || detail.expire_time) }}</span>
+                <el-divider direction="vertical" />
+                <span class="label">续费价:</span>
+                <span class="value">{{ detail.renewPrice ? '¥' + (detail.renewPrice / 100).toFixed(2) : '-' }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="profile-stats">
+            <div class="stat-item">
+              <div class="stat-label">套餐ID</div>
+              <div class="stat-value">{{ detail.goodPlanId || detail.good_plan_id || '-' }}</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">备注</div>
+              <div class="stat-value note-value">{{ detail.note || '-' }}</div>
+            </div>
+          </div>
+        </div>
+        <el-divider style="margin: 16px 0 12px" />
+        <el-descriptions :column="3" border size="small" style="width:100%">
+          <el-descriptions-item label="商品ID">{{ detail.goodId || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="订单ID">{{ detail.orderId || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="归属项ID">{{ detail.itemId || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="基础价格">{{ detail.renewPrice ? '¥' + (detail.renewPrice / 100).toFixed(2) : '-' }}</el-descriptions-item>
+          <el-descriptions-item label="创建时间">{{ formatTime(detail.CreatedAt) }}</el-descriptions-item>
+          <el-descriptions-item label="更新时间">{{ formatTime(detail.UpdatedAt) }}</el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <el-card shadow="never" v-if="detail" style="margin-top:20px">
+        <h3 style="margin:0 0 16px;font-size:16px;font-weight:600;color:#303133">关联信息</h3>
+        <el-descriptions :column="2" border size="small">
+          <el-descriptions-item label="商品名称">{{ detail.good?.name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="商品Table">{{ detail.good?.table || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="商品标签">{{ detail.good?.tag || detail.tag || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="订单名称">{{ detail.order?.name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="订单状态">
+            <el-tag v-if="detail.order" :type="detail.order.state === 1 ? 'success' : detail.order.state === 0 ? 'warning' : 'info'" size="small">
+              {{ detail.order.state === 1 ? '已支付' : detail.order.state === 0 ? '待支付' : '已失效' }}
+            </el-tag>
+            <span v-else>-</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="用户ID">{{ detail.userId || '-' }}</el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+    </div>
+
+    <el-dialog v-model="editVisible" title="编辑用户商品" width="520px" destroy-on-close>
+      <el-form :model="editForm" label-width="110px">
+        <el-form-item label="备注"><el-input v-model="editForm.note" /></el-form-item>
+        <el-form-item label="续费价格(元)">
+          <el-input-number v-model="editForm.renew_price" :min="0" :precision="2" controls-position="right" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="基础价格(元)"><el-input-number v-model="editForm.base_price" :min="0" :precision="2" controls-position="right" style="width:100%" /></el-form-item>
+        <el-form-item label="到期时间"><el-date-picker v-model="editForm.expire_time" type="datetime" placeholder="选择到期时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" /></el-form-item>
+        <el-form-item label="归属项">
+          <div style="width:100%">
+            <template v-if="detail?.good?.table === 'kvm_service'">
+              <div class="selector-row" style="margin-bottom:8px">
+                <el-input :model-value="editForm._serviceName || (editForm._serviceId ? `主控服务 #${editForm._serviceId}` : '')"
+                  readonly placeholder="1. 选择主控服务" style="flex:1" />
+                <el-button type="primary" @click="showServiceSelector = true" style="margin-left:8px">选择</el-button>
+                <el-button v-if="editForm._serviceId" @click="editForm._serviceId = 0; editForm._serviceName = ''; editForm.item_id = 0; editForm._itemName = ''" style="margin-left:4px">清除</el-button>
+              </div>
+              <div class="selector-row">
+                <el-input :model-value="editForm._itemName || (editForm.item_id ? `虚拟机 #${editForm.item_id}` : '')"
+                  readonly placeholder="2. 选择虚拟机" style="flex:1" />
+                <el-button type="primary" @click="showVmSelector = true" :disabled="!editForm._serviceId" style="margin-left:8px">选择</el-button>
+                <el-button v-if="editForm.item_id" @click="editForm.item_id = 0; editForm._itemName = ''" style="margin-left:4px">清除</el-button>
+              </div>
+              <div style="font-size:12px;color:#909399;margin-top:4px">归属项为虚拟机ID，需先选择主控服务</div>
+            </template>
+            <el-input-number v-else v-model="editForm.item_id" :min="0" controls-position="right" style="width:100%" />
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitEdit">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <VmSelectorPopup v-model="showVmSelector" :service-id="editForm._serviceId || 0"
+      @confirm="vm => { editForm.item_id = vm.id; editForm._itemName = vm.name }" />
+    <KvmServiceSelector v-model="showServiceSelector"
+      @confirm="s => { editForm._serviceId = s.id; editForm._serviceName = s.name; editForm.item_id = 0; editForm._itemName = '' }" />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ArrowLeft, Refresh, Monitor } from '@element-plus/icons-vue'
+import { getUserGoodsDetail, updateUserGoods, deleteUserGoods } from '@/api/admin/userVm'
+import { extractApiError } from '@/utils/kvmErrorUtil'
+import VmSelectorPopup from '@/components/admin/VmSelectorPopup.vue'
+import KvmServiceSelector from '@/components/admin/KvmServiceSelector.vue'
+import dayjs from 'dayjs'
+
+const route = useRoute()
+const router = useRouter()
+const goodsId = computed(() => parseInt(route.query.id) || 0)
+
+const loading = ref(false)
+const submitLoading = ref(false)
+const detail = ref(null)
+
+const formatTime = (t) => t ? dayjs(t).format('YYYY-MM-DD HH:mm:ss') : '-'
+const formatExpireTime = (t) => {
+  if (!t) return '-'
+  const d = dayjs(t)
+  if (d.year() < 2000) return '永久'
+  return d.format('YYYY-MM-DD HH:mm:ss')
+}
+
+const goBack = () => router.push('/user-goods/list')
+
+const loadDetail = async () => {
+  if (!goodsId.value) return
+  loading.value = true
+  try {
+    const res = await getUserGoodsDetail({ id: goodsId.value })
+    if (res?.data?.code === 200 && res?.data?.data) {
+      detail.value = res.data.data.data ?? res.data.data
+    } else ElMessage.error(extractApiError(res?.data, '加载失败'))
+  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '加载失败')) }
+  finally { loading.value = false }
+}
+
+const editVisible = ref(false)
+const editForm = reactive({ note: '', renew_price: 0, base_price: 0, expire_time: '', item_id: 0, _serviceId: 0, _serviceName: '', _itemName: '' })
+const showVmSelector = ref(false)
+const showServiceSelector = ref(false)
+
+const openEdit = () => {
+  const rawRenew = detail.value?.renewPrice || detail.value?.renew_price || 0
+  const rawBase = detail.value?.basePrice || detail.value?.base_price || 0
+  Object.assign(editForm, {
+    note: detail.value?.note || '',
+    renew_price: rawRenew / 100,
+    base_price: rawBase / 100,
+    expire_time: detail.value?.expireTime || detail.value?.expire_time
+      ? dayjs(detail.value?.expireTime || detail.value?.expire_time).format('YYYY-MM-DD HH:mm:ss')
+      : '',
+    item_id: detail.value?.itemId || detail.value?.item_id || 0,
+    _serviceId: 0,
+    _serviceName: '',
+    _itemName: detail.value?.itemId ? `虚拟机 #${detail.value.itemId}` : ''
+  })
+  if (detail.value?.good?.table === 'kvm_service') { /* 通过选择器弹窗选择，无需预加载 */ }
+  editVisible.value = true
+}
+
+const submitEdit = async () => {
+  submitLoading.value = true
+  try {
+    const data = { id: goodsId.value }
+    if (editForm.note !== undefined) data.note = editForm.note
+    if (editForm.renew_price) data.renew_price = Math.round(editForm.renew_price * 100)
+    if (editForm.base_price) data.base_price = Math.round(editForm.base_price * 100)
+    if (editForm.expire_time) data.expire_time = editForm.expire_time
+    if (editForm.item_id) data.item_id = editForm.item_id
+    const res = await updateUserGoods(data)
+    if (res?.data?.code === 200) { ElMessage.success('修改成功'); editVisible.value = false; loadDetail() }
+    else ElMessage.error(extractApiError(res?.data, '修改失败'))
+  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '修改失败')) }
+  finally { submitLoading.value = false }
+}
+
+const handleDelete = () => {
+  ElMessageBox.confirm('确定删除该用户商品吗？', '删除确认', { type: 'warning' })
+    .then(async () => {
+      try {
+        const res = await deleteUserGoods({ id: goodsId.value })
+        if (res?.data?.code === 200) { ElMessage.success('删除成功'); goBack() }
+        else ElMessage.error(extractApiError(res?.data, '删除失败'))
+      } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '删除失败')) }
+    }).catch(() => {})
+}
+
+onMounted(loadDetail)
+watch(goodsId, (newId, oldId) => {
+  if (newId && newId !== oldId) { detail.value = null; loadDetail() }
+})
+</script>
+
+<style scoped>
+.goods-detail-page { padding: 0; }
+.page-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #fff; border-bottom: 1px solid #ebeef5; }
+.header-left { display: flex; align-items: center; gap: 0; }
+.back-btn { font-size: 14px; color: #606266; }
+.back-btn:hover { color: #409eff; }
+.page-title { font-size: 16px; font-weight: 600; color: #303133; }
+.header-right { display: flex; gap: 8px; }
+.main-content { padding: 20px; }
+.profile-card { margin-bottom: 0; }
+.profile-header { display: flex; justify-content: space-between; align-items: flex-start; }
+.profile-basic { display: flex; align-items: center; gap: 20px; }
+.icon-wrapper { width: 80px; height: 80px; border-radius: 12px; background: linear-gradient(135deg, #e8f4fd, #d6eaff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.identity { display: flex; flex-direction: column; gap: 8px; }
+.name-row { display: flex; align-items: center; gap: 10px; }
+.name { font-size: 22px; font-weight: 600; color: #303133; margin: 0; }
+.id-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #909399; flex-wrap: wrap; }
+.id-row .label { color: #909399; }
+.id-row .value { color: #606266; font-weight: 500; }
+.profile-stats { display: flex; gap: 32px; flex-shrink: 0; }
+.stat-item { text-align: center; min-width: 80px; }
+.stat-label { font-size: 12px; color: #909399; margin-bottom: 4px; }
+.stat-value { font-size: 14px; font-weight: 600; color: #303133; }
+.note-value { font-weight: 400; font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.selector-row { display: flex; align-items: center; width: 100%; }
+</style>