BMS/bms-front/src/views/price/set/priceSet.vue

<template>
  <div class="app-container">
    <basic-table
      ref="tableRef"
      :columns="columns"
      :search-columns="searchColumns"
      :query="queryList"
      row-key="priceSetId"
    >
      <template #toolbar>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleCreate"
            v-hasPermi="['price:set:add']"
          >新建套餐</el-button>
        </el-col>
      </template>

      <template #col-setType="{ row }">
        <el-tag :type="row.setType === 'FIXED' ? 'warning' : 'primary'" size="small" effect="plain">
          {{ row.setType === 'FIXED' ? 'FIXED 固定价' : 'DISCOUNT 折扣' }}
        </el-tag>
      </template>

      <template #col-status="{ row }">
        <el-tag :type="statusTag(row)" size="small">{{ statusLabel(row) }}</el-tag>
      </template>

      <template #col-activeDetail="{ row }">
        <el-button
          link
          type="primary"
          :loading="activeLoadingId === row.priceSetId"
          @click="handleActiveDetail(row)"
          v-hasPermi="['price:set:query']"
        >查看明细</el-button>
      </template>

      <template #col-action="{ row }">
        <el-button link type="primary" @click="handleDetail(row)" v-hasPermi="['price:set:query']">详情</el-button>
        <el-button
          v-if="row.status === 'E'"
          link
          type="warning"
          @click="handleDisable(row)"
          v-hasPermi="['price:set:audit']"
        >停用</el-button>
        <el-button
          v-if="row.status === 'D' || row.status === 'S'"
          link
          type="success"
          @click="handleEnable(row)"
          v-hasPermi="['price:set:audit']"
        >启用</el-button>
      </template>
    </basic-table>

    <set-version-detail-drawer
      v-model="drawerVisible"
      :version="activeVersion"
      :set-type="drawerSetType"
    />

  </div>
</template>

<script setup name="PriceSet">
import {
  listPriceSet, disablePriceSet, enablePriceSet, copyPriceSet, getPriceSet
} from '@/api/price/set'
import SetVersionDetailDrawer from './components/detail/SetVersionDetailDrawer.vue'
import { setStatusLabel, setStatusTagType } from './utils/priceSet'

const { proxy } = getCurrentInstance()
const tableRef = ref()
const isFirstActivate = ref(true)

const searchColumns = [
  {
    label: '类型',
    prop: 'setType',
    component: 'select',
    options: [
      { label: 'FIXED 固定价', value: 'FIXED' },
      { label: 'DISCOUNT 折扣', value: 'DISCOUNT' }
    ],
    placeholder: '全部类型',
    width: '160px'
  },
  {
    label: '状态',
    prop: 'status',
    component: 'select',
    options: [
      { label: '待启用', value: 'D' },
      { label: '生效', value: 'E' },
      { label: '已停用', value: 'S' }
    ],
    placeholder: '全部状态',
    width: '140px'
  },
  { label: '关键字', prop: 'keyword', component: 'input', placeholder: '套餐ID / 名称 / 客户', width: '240px' }
]

const columns = [
  { label: '套餐编码', prop: 'priceSetCode', width: 110 },
  { label: '套餐名称', prop: 'priceSetName', minWidth: 160 },
  { label: '类型', prop: 'setType', width: 140 },
  { label: '说明', prop: 'priceSetNote', minWidth: 160 },
  { label: '状态', prop: 'status', width: 90 },
  { label: '生效明细', prop: 'activeDetail', width: 100 },
  { label: '操作', prop: 'action', width: 160, showInToolbar: false }
]

function queryList(params) {
  return listPriceSet(params)
}

function statusLabel(row) {
  return setStatusLabel(row)
}

function statusTag(row) {
  return setStatusTagType(row)
}

function handleCreate() {
  proxy.$router.push({ path: '/customer/setCreate' })
}

function handleDetail(row) {
  proxy.$router.push({ path: '/customer/setDetail', query: { priceSetId: row.priceSetId } })
}

/** 生效明细：拉详情找生效版本(status=1)弹抽屉 */
const drawerVisible = ref(false)
const activeVersion = ref(null)
const drawerSetType = ref('FIXED')
const activeLoadingId = ref(null)

function handleActiveDetail(row) {
  activeLoadingId.value = row.priceSetId
  getPriceSet(row.priceSetId).then(res => {
    const data = res.data || {}
    const versions = data.versions || []
    const active = versions.find(v => String(v.status) === '1')
    if (!active || active.psvId == null) {
      proxy.$modal.msgWarning('该套餐暂无生效版本')
      return
    }
    drawerSetType.value = row.setType
    activeVersion.value = { psvId: active.psvId, versionNo: active.versionNo }
    drawerVisible.value = true
  }).finally(() => {
    activeLoadingId.value = null
  })
}


function refresh() {
  tableRef.value?.refresh()
}

onActivated(() => {
  if (isFirstActivate.value) {
    isFirstActivate.value = false
    return
  }
  tableRef.value?.reload()
})


function handleDisable(row) {
  proxy.$modal.confirm('停用后该套餐不再参与计费命中，确认停用【' + row.priceSetName + '】？').then(() => {
    return disablePriceSet(row.priceSetId)
  }).then(() => {
    proxy.$modal.msgSuccess('已停用')
    refresh()
  }).catch(() => {})
}

function handleEnable(row) {
  proxy.$modal.confirm('启用后该套餐将重新参与计费命中，确认启用【' + row.priceSetName + '】？').then(() => {
    return enablePriceSet(row.priceSetId)
  }).then(() => {
    proxy.$modal.msgSuccess('已启用')
    tableRef.value.refresh()
  }).catch(() => {})
}

function handleCopy(row) {
  copyPriceSet(row.priceSetId).then(res => {
    proxy.$modal.msgSuccess('已复制为草稿')
    proxy.$router.push({ path: '/customer/setCreate', query: { priceSetId: res.data } })
  })
}
</script>

<style scoped>
.hint-card {
  margin-top: 16px;
}
.hint-body {
  font-size: 13px;
  color: #595959;
  line-height: 1.7;
  padding: 8px 12px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 6px;
}
.hint-body b {
  color: #ff4d4f;
}
</style>