bxztApp/packages/mobile/src/views/DisasterManagement/components/CalculateDialog.vue

<template>
  <!-- 损失计算弹窗 -->
  <van-dialog v-model:show="visible" :title="lossItem?.title" show-cancel-button @confirm="confirm" @cancel="cancelLoss" confirm-button-text="确定" cancel-button-text="取消">
    <div class="loss-dialog-content">
      <!-- 立方计算 -->
      <template v-if="lossItem.calc == 'cube'">
        <van-field v-model="formData.length" :label="lossItem?.itemName + '长'" placeholder="请填写长度" type="digit" clearable>
          <template #button>
            <span class="field-unit">米</span>
          </template>
        </van-field>

        <van-field v-model="formData.width" :label="lossItem?.itemName + '宽'" placeholder="请填写宽度" type="digit" clearable>
          <template #button>
            <span class="field-unit">米</span>
          </template>
        </van-field>

        <van-field v-model="formData.height" :label="lossItem?.itemName + '高'" placeholder="请填写高度" type="digit" clearable>
          <template #button>
            <span class="field-unit">米</span>
          </template>
        </van-field>

        <van-field v-model="formData.unitPrice" label="单价" placeholder="请填写单价" type="digit" clearable>
          <template #button>
            <span class="field-unit">元</span>
          </template>
        </van-field>

        <van-field v-model="formData.totalAmount" :label="lossItem?.itemName + '损失金额'" placeholder="请填写金额" type="digit" clearable>
          <template #button>
            <span class="field-unit">元</span>
          </template>
        </van-field>
      </template>

      <!-- 长度计算-->
      <template v-else-if="lossItem.calc == 'length'">
        <van-field v-model="formData.length" :label="lossItem?.itemName + '长度'" placeholder="请填写长度" type="digit" clearable>
          <template #button>
            <span class="field-unit">米</span>
          </template>
        </van-field>
        <van-field v-model="formData.unitPrice" label="单价" placeholder="请填写单价" type="digit" clearable>
          <template #button>
            <span class="field-unit">元</span>
          </template>
        </van-field>
        <van-field v-model="formData.totalAmount" :label="lossItem?.itemName + '损失金额'" placeholder="请填写金额" type="digit" clearable>
          <template #button>
            <span class="field-unit">元</span>
          </template>
        </van-field>
      </template>
    </div>
  </van-dialog>
</template>
<script setup>
import { onMounted, ref, reactive, watch, computed } from 'vue'
import { showToast } from 'vant'
import { getLossItem } from './LossMap'

// 弹窗显示状态
const visible = ref(false)

// 损失计算表单
const formData = ref({
  length: '',
  width: '',
  height: '',
  unitPrice: ''
})

const lossItem = ref(null)

// 立方计算
const cubeCalc = () => {
  const l = parseFloat(formData.value.length)
  const w = parseFloat(formData.value.width)
  const h = parseFloat(formData.value.height)
  const price = parseFloat(formData.value.unitPrice)
  if (isNaN(l) || l <= 0) {
    return 0
  }
  if (isNaN(w) || w <= 0) {
    return 0
  }
  if (isNaN(h) || h <= 0) {
    return 0
  }
  if (isNaN(price) || price < 0) {
    return 0
  }
  if (price > 2000) {
    return 0
  }
  return l * w * h * price
}

// 长度计算
const lengthCalc = () => {
  const l = parseFloat(formData.value.length)
  const price = parseFloat(formData.value.unitPrice)
  if (isNaN(l) || l <= 0) {
    return 0
  }
  if (isNaN(price) || price < 0) {
    return 0
  }
  if (price > 2000) {
    return 0
  }
  return l * price
}
const totalAmount = computed(() => {
  if(lossItem.value?.calc == 'cube') return cubeCalc()
  if(lossItem.value?.calc == 'length') return lengthCalc()
  return 0
})

watch(totalAmount, () => {
  formData.value.totalAmount = totalAmount.value
})
// 显示弹窗
const show = (item) => {
  lossItem.value = getLossItem(item.lossTypeCode)

  formData.value.length = item.length
  formData.value.width = item.width
  formData.value.height = item.height
  formData.value.unitPrice = item.unitPrice
  formData.value.totalAmount = item.totalAmount
  visible.value = true
}

// 验证表单数据
const validateForm = () => {
  const l = parseFloat(formData.length)
  const w = parseFloat(formData.width)
  const h = parseFloat(formData.height)
  const price = parseFloat(formData.unitPrice)

  if (isNaN(l) || l <= 0) {
    showToast('请填写有效的塌方长度')
    return false
  }
  if (isNaN(w) || w <= 0) {
    showToast('请填写有效的塌方宽度')
    return false
  }
  if (isNaN(h) || h <= 0) {
    showToast('请填写有效的塌方高度')
    return false
  }
  if (isNaN(price) || price < 0) {
    showToast('请填写有效的单价')
    return false
  }
  if (price > 2000) {
    showToast('单价不能超过2000元')
    return false
  }

  return true
}

// 确认损失计算
const confirm = () => {
  if (!formData.value.totalAmount) {
    showToast('请填写损失金额')
    return
  }
  emit('confirm', formData.value)
  // 重置表单
  resetForm()
  visible.value = false
}

// 取消操作
const cancelLoss = () => {
  resetForm()
  visible.value = false
}

// 重置表单
const resetForm = () => {
  formData.value.length = ''
  formData.value.width = ''
  formData.value.height = ''
  formData.value.unitPrice = ''
  formData.value.totalAmount
}
// 定义事件
const emit = defineEmits(['confirm'])

defineExpose({
  show
})
</script>
<style scoped lang="scss"></style>