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

<template>
  <div class="app-container">
    <basic-table
      ref="tableRef"
      :columns="columns"
      :search-columns="searchColumns"
      :query="queryList"
      row-key="scId"
    >
      <template #toolbar>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['price:surcharge:add']"
          >新建附加费</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            plain
            icon="View"
            @click="voidDrawerRef.open()"
            v-hasPermi="['price:surcharge:list']"
          >作废记录</el-button>
        </el-col>
      </template>

      <template #col-ssCode="{ row }">
        <el-tag :type="ssInfo(row.ssCode).type" size="small">{{ ssInfo(row.ssCode).label }}</el-tag>
      </template>

      <template #col-chargeType="{ row }">
        <el-tag type="primary" size="small" effect="plain">{{ chargeTypeLabel(row.chargeType) }}</el-tag>
      </template>

      <template #col-chargeValue="{ row }">
        <span class="charge-value">{{ formatChargeValue(row) }}</span>
      </template>

      <template #col-countryCode="{ row }">
        <span>{{ countryLabel(row.countryCode) }}</span>
      </template>

      <template #col-action="{ row }">
        <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['price:surcharge:edit']">编辑</el-button>
        <el-button
          v-if="String(row.ssCode || '').toLowerCase() === 'on'"
          link
          type="danger"
          icon="CircleClose"
          @click="handleDisable(row.scId)"
          v-hasPermi="['price:surcharge:remove']"
        >停用</el-button>
        <el-button
          v-if="String(row.ssCode || '').toLowerCase() === 'of'"
          link
          type="success"
          icon="CircleCheck"
          @click="handleEnable(row.scId)"
          v-hasPermi="['price:surcharge:remove']"
        >启用</el-button>
      </template>
    </basic-table>

    <surcharge-form-dialog ref="formDialogRef" @success="() => tableRef.refresh()" />
    <surcharge-void-drawer ref="voidDrawerRef" />
  </div>
</template>

<script setup name="PriceSurcharge">
import { listSurcharge, disableSurcharge, enableSurcharge } from '@/api/price/surcharge'
import SurchargeFormDialog from './components/SurchargeFormDialog.vue'
import SurchargeVoidDrawer from './components/SurchargeVoidDrawer.vue'
import { listRegionOptions } from '@/api/data/region'
import { onMounted } from 'vue'

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

const tableRef = ref()
const formDialogRef = ref()
const voidDrawerRef = ref()
const regionOptions = ref([])

const columns = [
  { label: '附加费名称', prop: 'scName', align: 'center', minWidth: 140, showOverflowTooltip: true },
  { label: '费用类型', prop: 'feeType', align: 'center', width: 110, dict: 'bms_fee_type' },
  { label: '计费方式', prop: 'chargeType', align: 'center', width: 130 },
  { label: '计费数值', prop: 'chargeValue', align: 'center', width: 140 },
  { label: '取值方式', prop: 'roundMode', align: 'center', width: 110, dict: 'bms_round_mode' },
  { label: '适用国家', prop: 'countryCode', align: 'center', minWidth: 120, showOverflowTooltip: true },
  { label: '状态', prop: 'ssCode', align: 'center', width: 80 },
  { label: '备注', prop: 'scNote', align: 'center', minWidth: 140, showOverflowTooltip: true },
  { label: '创建时间', prop: 'createTime', align: 'center', width: 160, parseTime: true },
  { label: '操作', prop: 'action', align: 'center', width: 150, fixed: 'right', showInToolbar: false }
]

const searchColumns = [
  { label: '附加费名称', prop: 'scName', component: 'input', placeholder: '请输入名称', width: '200px' },
  {
    label: '计费方式',
    prop: 'chargeType',
    component: 'select',
    dict: 'bms_charge_type',
    placeholder: '计费方式',
    width: '150px'
  },
  { label: '取值方式', prop: 'roundMode', component: 'select', dict: 'bms_round_mode', placeholder: '取值方式', width: '150px' },
  {
    label: '状态',
    prop: 'ssCode',
    component: 'select',
    options: [
      { label: '有效', value: 'on' },
      { label: '停用', value: 'of' },
      { label: '作废', value: 'vd' }
    ],
    placeholder: '状态',
    width: '120px'
  }
]

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

function chargeTypeLabel(val) {
  const found = bms_charge_type.value.find(c => c.value === val)
  return found ? found.label : (val || '-')
}

function countryLabel(code) {
  if (!code) return '全部'
  const found = regionOptions.value.find(r => r.countryCode2 === code)
  return found ? (found.countryNameCn || found.countryNameEn || code) : code
}

function loadRegionOptions() {
  listRegionOptions().then(res => {
    regionOptions.value = res.data || []
  })
}

onMounted(() => {
  loadRegionOptions()
})

function formatChargeValue(row) {
  if (row.chargeValue == null) return '-'
  const v = Number(row.chargeValue)
  if (row.chargeType === 'RATE') {
    return (v * 100).toFixed(2) + '%'
  }
  return v + ' ' + (row.currency || 'CNY')
}

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

function handleUpdate(row) {
  formDialogRef.value.open(row)
}

function handleDisable(ids) {
  const idText = Array.isArray(ids) ? ids.join(',') : ids
  proxy.$modal.confirm('是否确认停用所选附加费？停用后不再参与计费，可再启用恢复').then(() => {
    return disableSurcharge(idText)
  }).then(() => {
    proxy.$modal.msgSuccess('停用成功')
    tableRef.value.refresh()
  }).catch(() => {})
}

function handleEnable(ids) {
  const idText = Array.isArray(ids) ? ids.join(',') : ids
  proxy.$modal.confirm('是否确认启用所选附加费？启用后重新参与计费').then(() => {
    return enableSurcharge(idText)
  }).then(() => {
    proxy.$modal.msgSuccess('启用成功')
    tableRef.value.refresh()
  }).catch(() => {})
}

// 状态三态：on 有效 / of 停用 / vd 作废
function ssInfo(code) {
  const map = {
    on: { label: '有效', type: 'success' },
    of: { label: '停用', type: 'warning' },
    vd: { label: '作废', type: 'danger' }
  }
  return map[String(code || '').toLowerCase()] || { label: code || '-', type: 'info' }
}
</script>

<style scoped>
.charge-value {
  font-weight: 600;
  color: #d63031;
}
</style>