BMS/bms-front/src/views/price/billing/components/AddIncomeFeeDialog.vue

<template>
  <el-dialog
    :model-value="modelValue"
    :title="dlgTitle"
    width="520px"
    append-to-body
    destroy-on-close
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="96px">
      <el-form-item :label="lblFeeName" prop="scId">
        <el-select
          v-model="form.scId"
          filterable
          clearable
          :placeholder="phSurcharge"
          style="width: 100%;"
          @change="onSurchargeChange"
        >
          <el-option
            v-for="s in surchargeOptions"
            :key="s.scId"
            :label="s.scName"
            :value="s.scId"
          >
            <span>{{ s.scName }}</span>
            <span style="float: right; color: var(--el-text-color-secondary); font-size: 12px;">{{ s.chargeValue }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="lblFeeType" prop="feeType">
        <el-select v-model="form.feeType" :placeholder="phFeeType" style="width: 100%;">
          <el-option
            v-for="d in (bms_fee_type || [])"
            :key="d.value"
            :label="d.label"
            :value="d.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="lblAmount" prop="amount">
        <el-input-number
          v-model="form.amount"
          :min="0"
          :precision="4"
          :step="0.1"
          controls-position="right"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item :label="lblCurrency" prop="currency">
        <el-select v-model="form.currency" style="width: 100%;">
          <el-option
            v-for="d in (bms_currency || [])"
            :key="d.value"
            :label="d.label"
            :value="d.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="lblRemark">
        <el-input v-model="form.remark" type="textarea" :rows="2" :placeholder="phRemark" maxlength="200" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="$emit('update:modelValue', false)">{{ btnCancel }}</el-button>
      <el-button type="primary" :loading="saving" @click="submit">{{ btnOk }}</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { listSurchargeOptions } from '@/api/price/surcharge'
import { addIncomeBillFee, updateIncomeBillFee } from '@/api/price/billing'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  billId: { type: String, default: '' },
  chargeWeight: { type: [Number, String], default: null },
  freightAmount: { type: [Number, String], default: null },
  /** edit row when present */
  editRow: { type: Object, default: null }
})

const emit = defineEmits(['update:modelValue', 'success'])

const { proxy } = getCurrentInstance()
const { bms_fee_type, bms_currency } = useDict('bms_fee_type', 'bms_currency')

const isEdit = computed(() => !!(props.editRow && props.editRow.feeId))
const dlgTitle = computed(() => (isEdit.value ? '编辑费用' : '增加费用'))
const lblFeeName = '费用名称'
const lblFeeType = '费用类型'
const lblAmount = '金额'
const lblCurrency = '币种'
const lblRemark = '说明'
const phSurcharge = '请选择附加费'
const phFeeType = '请选择费用类型'
const phRemark = '选填'
const btnCancel = '取消'
const btnOk = '保存'

const formRef = ref()
const saving = ref(false)
const surchargeOptions = ref([])
const form = ref(emptyForm())

const rules = {
  scId: [{ required: true, message: '请选择附加费', trigger: 'change' }],
  feeType: [{ required: true, message: '请选择费用类型', trigger: 'change' }],
  amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
  currency: [{ required: true, message: '请选择币种', trigger: 'change' }]
}

function emptyForm() {
  return {
    feeId: undefined,
    scId: undefined,
    feeType: 'SURCHARGE',
    amount: undefined,
    currency: 'CNY',
    remark: ''
  }
}

watch(() => props.modelValue, (open) => {
  if (!open) return
  loadSurcharges().then(() => {
    if (isEdit.value) {
      const row = props.editRow
      form.value = {
        feeId: row.feeId,
        scId: row.scId || undefined,
        feeType: row.feeType || 'SURCHARGE',
        amount: row.amount != null ? Number(row.amount) : undefined,
        currency: displayCurrency(row.currency),
        remark: row.remark || ''
      }
    } else {
      form.value = emptyForm()
    }
    nextTick(() => formRef.value?.clearValidate())
  })
})

function displayCurrency(v) {
  if (!v || v === 'RMB' || v === 'rmb') return 'CNY'
  return v
}

function loadSurcharges() {
  return listSurchargeOptions({ ssCode: 'on' }).then(res => {
    surchargeOptions.value = res.data || []
  })
}

function calcAmount(s) {
  if (!s || s.chargeValue == null) return 0
  const cv = Number(s.chargeValue)
  const weight = Number(props.chargeWeight || 0)
  const freight = Number(props.freightAmount || 0)
  const type = String(s.chargeType || 'FIXED').toUpperCase()
  let amount = cv
  if (type === 'WEIGHT') amount = cv * weight
  else if (type === 'RATE') amount = freight * cv
  return Number(amount.toFixed(4))
}

function onSurchargeChange(scId) {
  const s = (surchargeOptions.value || []).find(x => String(x.scId) === String(scId))
  if (!s) return
  form.value.feeType = s.feeType || 'SURCHARGE'
  form.value.currency = 'CNY'
  form.value.amount = calcAmount(s)
  if (s.scNote && !form.value.remark) {
    form.value.remark = s.scNote
  }
}

function submit() {
  formRef.value?.validate(valid => {
    if (!valid) return
    if (!isEdit.value && !props.billId) {
      proxy.$modal.msgError('计费ID为空')
      return
    }
    saving.value = true
    const payload = {
      scId: form.value.scId,
      feeType: form.value.feeType,
      amount: form.value.amount,
      currency: form.value.currency || 'CNY',
      remark: form.value.remark
    }
    const req = isEdit.value
      ? updateIncomeBillFee({ ...payload, feeId: form.value.feeId })
      : addIncomeBillFee({ ...payload, billId: props.billId })
    req.then(res => {
      proxy.$modal.msgSuccess('保存成功')
      emit('update:modelValue', false)
      emit('success', res.data || null)
    }).finally(() => {
      saving.value = false
    })
  })
}
</script>