BMS/bms-front/src/views/price/basic/product/index.vue

<template>
  <div class="app-container">
    <el-alert
      type="info"
      :closable="false"
      show-icon
      class="mb16"
      title="Excel 导入：相同产品代码+生效日期不覆盖；不同生效日期新增一条产品。同时入库国家×重量段（运费/挂号费/尺寸/尾程/时效）。"
    />

    <el-tabs v-model="effectTab" class="mb8" @tab-change="onTabChange">
      <el-tab-pane
        v-for="t in statusTabs"
        :key="t.name"
        :label="t.label"
        :name="t.name"
      />
    </el-tabs>

    <basic-table
      ref="tableRef"
      :columns="columns"
      :search-columns="searchColumns"
      :query="queryList"
      :extra-params="extraParams"
      row-key="productId"
    >
      <template #toolbar="{ selection, ids }">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['price:product:add']">新建产品</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="Edit" :disabled="selection.length !== 1 || (selection[0] && isProductActive(selection[0]))" @click="handleUpdate(selection[0])" v-hasPermi="['price:product:edit']">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="Delete" :disabled="!selection.length || selection.some(isProductActive)" @click="handleDelete(ids)" v-hasPermi="['price:product:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['price:product:import']">导入 Excel</el-button>
        </el-col>
      </template>

      <template #col-cargoAttr="{ row }">
        <el-tag type="primary" size="small" effect="plain">{{ row.cargoAttr || '-' }}</el-tag>
      </template>

      <template #col-status="{ row }">
        <dict-tag :options="bms_product_effect_status" :value="row.status" />
      </template>

      <template #col-action="{ row }">
        <el-button link type="primary" icon="View" @click="countryRef.open(row)" v-hasPermi="['price:product:query']">产品明细</el-button>
        <el-button link type="primary" icon="Money" @click="surchargeRef.open(row)" v-hasPermi="['price:surcharge:query']">附加费</el-button>
        <el-button :disabled="isProductActive(row)" :title="isProductActive(row) ? '已生效不可编辑' : ''" link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['price:product:edit']">编辑</el-button>
        <el-button :disabled="isProductActive(row)" :title="isProductActive(row) ? '已生效不可删除' : ''" link type="primary" icon="Delete" @click="handleDelete(row.productId)" v-hasPermi="['price:product:remove']">删除</el-button>
      </template>
    </basic-table>

    <product-form-dialog ref="formRef" @success="() => tableRef.refresh()" />
    <product-country-drawer ref="countryRef" />
    <product-surcharge-drawer ref="surchargeRef" @success="() => tableRef.refresh()" />
    <excel-import-dialog
      ref="importRef"
      title="产品 Excel 导入"
      action="/price/product/importData"
      width="560px"
      :show-update-support="false"
      @success="() => tableRef.refresh()"
    />
  </div>
</template>

<script setup name="PriceProduct">
import ExcelImportDialog from '@/components/ExcelImportDialog'
import ProductFormDialog from './components/ProductFormDialog.vue'
import ProductCountryDrawer from './components/ProductCountryDrawer.vue'
import ProductSurchargeDrawer from './components/ProductSurchargeDrawer.vue'
import { listProduct, delProduct } from '@/api/price/product'

const { proxy } = getCurrentInstance()
const { bms_product_effect_status } = useDict('bms_product_effect_status')

const tableRef = ref()
const formRef = ref()
const countryRef = ref()
const surchargeRef = ref()
const importRef = ref()

const TAB_ACTIVE = 'active'
const TAB_PENDING = 'pending'
const TAB_EXPIRED = 'expired'

const effectTab = ref(TAB_ACTIVE)

const statusTabs = computed(() => [
  { name: TAB_ACTIVE, code: '1', label: dictLabel('1', 'ACTIVE') },
  { name: TAB_PENDING, code: '0', label: dictLabel('0', 'PENDING') },
  { name: TAB_EXPIRED, code: '2', label: dictLabel('2', 'EXPIRED') }
])

const extraParams = computed(() => ({ status: tabToStatus(effectTab.value) }))

function dictLabel(code, legacy) {
  const list = bms_product_effect_status.value || []
  const hit = list.find(d => String(d.value) === code || String(d.value) === legacy)
  return hit?.label || code
}

function tabToStatus(name) {
  if (name === TAB_ACTIVE || name === 'ACTIVE' || name === '1') return '1'
  if (name === TAB_PENDING || name === 'PENDING' || name === '0') return '0'
  if (name === TAB_EXPIRED || name === 'EXPIRED' || name === '2') return '2'
  return '1'
}

function onTabChange(name) {
  effectTab.value = String(name || TAB_ACTIVE)
  nextTick(() => {
    tableRef.value?.clearSelection()
    tableRef.value?.reload()
  })
}

const columns = [
  { prop: 'productCode', label: '产品代码', minWidth: 110 },
  { prop: 'productName', label: '产品名称', minWidth: 140, showOverflowTooltip: true },
  { prop: 'serviceLevel', label: '时效等级', width: 90, align: 'center' },
  { prop: 'cargoAttr', label: '走货属性', minWidth: 120, slot: 'cargoAttr' },
  { prop: 'destRegion', label: '目的区域', width: 90, align: 'center' },
  { prop: 'taxMode', label: '税模式', width: 90, align: 'center', dict: 'bms_tax_mode' },
  { prop: 'effectiveDate', label: '生效日期', width: 120, align: 'center' },
  { prop: 'expireDate', label: '失效日期', width: 120, align: 'center' },
  { prop: 'countryCount', label: '国家数', width: 80, align: 'center' },
  { prop: 'surchargeCount', label: '附加费数', width: 90, align: 'center' },
  { prop: 'status', label: '状态', width: 90, align: 'center', slot: 'status' },
  { prop: 'updateNote', label: '更新内容', minWidth: 160, showOverflowTooltip: true },
  { prop: 'action', label: '操作', width: 300, fixed: 'right', slot: 'action' }
]

const searchColumns = [
  { prop: 'productCode', label: '产品代码', component: 'input', placeholder: '产品代码' },
  { prop: 'productName', label: '产品名称', component: 'input', placeholder: '产品名称' },
  {
    prop: 'taxMode',
    label: '税模式',
    component: 'select',
    dict: 'bms_tax_mode',
    placeholder: '税模式',
    clearable: true
  }
]

function queryList(params) {
  return listProduct({ ...params, status: tabToStatus(effectTab.value) })
}

function isProductActive(row) {
  return row && String(row.status) === '1'
}

function handleAdd() {
  formRef.value.open()
}

function handleUpdate(row) {
  if (isProductActive(row)) {
    proxy.$modal.msgError('已生效的产品不可编辑')
    return
  }
  formRef.value.open(row)
}

function handleDelete(ids) {
  const idText = Array.isArray(ids) ? ids.join(',') : ids
  proxy.$modal.confirm('是否确认删除所选产品？国家明细将一并删除。').then(() => {
    return delProduct(idText)
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功')
    tableRef.value.refresh()
  }).catch(() => {})
}

function handleImport() {
  importRef.value.open()
}
</script>

<style scoped>
.mb16 { margin-bottom: 16px; }
</style>