BMS/bms-front/src/views/price/label/components/LabelVersionTable.vue

<template>
  <el-card shadow="never" class="ver-card">
    <template #header>
      <div class="ver-head">
        <div class="ver-head-left">
          <span class="ver-title">套餐版本</span>
          <el-tag size="small" type="info" effect="plain" round>{{ versions.length }}</el-tag>
        </div>
        <el-button
          type="primary"
          plain
          size="small"
          :disabled="hasPending"
          v-hasPermi="['price:label:import']"
          @click="$emit('create-version')"
        >新建版本</el-button>
      </div>
    </template>

    <el-tabs v-model="statusTab" class="ver-tabs">
      <el-tab-pane :label="tabLabel('all')" name="all" />
      <el-tab-pane :label="tabLabel('0')" name="0" />
      <el-tab-pane :label="tabLabel('1')" name="1" />
      <el-tab-pane :label="tabLabel('2')" name="2" />
    </el-tabs>

    <el-table :data="filteredVersions" border empty-text="暂无版本，完成导入后在此设置生效时间">
      <el-table-column label="版本号" width="100" align="center">
        <template #default="{ row }">{{ row.versionLabel || ('V' + (row.versionNo || 1)) }}</template>
      </el-table-column>
      <el-table-column label="生效时间" min-width="170" align="center">
        <template #default="{ row }">
          <el-button link type="primary" @click="$emit('open-details', row)">
            {{ formatHour(row.effectiveTime) || '未设置' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="失效时间" min-width="170" align="center">
        <template #default="{ row }">{{ formatHour(row.expireTime) || '-' }}</template>
      </el-table-column>
      <!-- <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="statusTag(row.status)" size="small">{{ statusText(row.status) }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="产品数" width="90" align="center">
        <template #default="{ row }">{{ row.productCount || 0 }}</template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="170" align="center">
        <template #default="{ row }">{{ row.createTime || '-' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="340" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="$emit('open-details', row)">查看详情</el-button>
          <el-button
            v-if="canEdit(row)"
            link
            type="primary"
            @click="$emit('edit', row)"
            v-hasPermi="['price:label:edit']"
          >编辑</el-button>
          <el-button
            v-if="canReschedule(row)"
            link
            type="primary"
            @click="$emit('reschedule', row)"
            v-hasPermi="['price:label:edit']"
          >修改生效时间</el-button>
          <el-button
            v-if="canDelete(row)"
            link
            type="danger"
            @click="$emit('remove', row)"
            v-hasPermi="['price:label:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
const props = defineProps({
  versions: { type: Array, default: () => [] }
})
defineEmits(['edit', 'reschedule', 'remove', 'open-details', 'create-version'])

const statusTab = ref('all')

const counts = computed(() => {
  const map = { all: 0, '0': 0, '1': 0, '2': 0 }
  ;(props.versions || []).forEach(v => {
    map.all++
    const s = String(v?.status ?? '')
    if (map[s] != null) map[s]++
  })
  return map
})

function tabLabel(key) {
  const labels = { all: '全部', '0': '待生效', '1': '已生效', '2': '已失效' }
  return `${labels[key]} (${counts.value[key] || 0})`
}

const hasPending = computed(() => (props.versions || []).some(v => String(v.status) === '0'))

const filteredVersions = computed(() => {
  const list = props.versions || []
  if (statusTab.value === 'all') return list
  return list.filter(v => String(v.status) === statusTab.value)
})

function formatHour(val) {
  if (!val) return ''
  const text = String(val).replace('T', ' ')
  if (text.length >= 16) return text.slice(0, 13) + ':00'
  if (text.length >= 10) return text.slice(0, 10) + ' 00:00'
  return text
}

function statusText(status) {
  const map = { '0': '待生效', '1': '生效', '2': '已失效' }
  return map[String(status)] || '-'
}

function statusTag(status) {
  const map = { '0': 'warning', '1': 'success', '2': 'danger' }
  return map[String(status)] || 'info'
}

/** 不限状态：待生效/已生效/已失效均可编辑价卡 */
function canEdit(row) {
  return !!row
}

/** 仅待生效可改生效时间 */
function canReschedule(row) {
  return row && String(row.status) === '0'
}

/** 仅待生效可删除整版 */
function canDelete(row) {
  return row && String(row.status) === '0'
}
</script>

<style scoped>
.ver-card { margin-bottom: 16px; }
.ver-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.ver-head-left { display: flex; align-items: center; gap: 8px; }
.ver-title { font-weight: 600; }
.ver-tabs { margin-bottom: 8px; }
.ver-tabs :deep(.el-tabs__header) { margin-bottom: 8px; }
</style>