EmailBill/Web/src/components/Budget/BudgetEditPopup.vue

<template>
  <PopupContainer 
    v-model="visible" 
    :title="isEdit ? `编辑${getCategoryName(form.category)}预算` : `新增${getCategoryName(form.category)}预算`" 
    height="75%"
  >
    <div class="add-budget-form">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="form.name"
            name="name"
            label="预算名称"
            placeholder="例如：每月餐饮、年度奖金"
            :rules="[{ required: true, message: '请填写预算名称' }]"
          />
          <van-field name="type" label="统计周期">
            <template #input>
              <van-radio-group 
                v-model="form.type" 
                direction="horizontal"
                :disabled="isEdit"
              >
                <van-radio :name="BudgetPeriodType.Month">月</van-radio>
                <van-radio :name="BudgetPeriodType.Year">年</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form.limit"
            type="number"
            name="limit"
            label="预算金额"
            placeholder="0.00"
            :rules="[{ required: true, message: '请填写预算金额' }]"
          >
            <template #extra>
              <span>元</span>
            </template>
          </van-field>
          <van-field label="相关分类">
            <template #input>
              <div v-if="form.selectedCategories.length === 0" style="color: #c8c9cc;">可多选分类</div>
              <div v-else class="selected-categories">
                <span class="ellipsis-text">
                  {{ form.selectedCategories.join('、') }}
                </span>
              </div>
            </template>
          </van-field>
          <ClassifySelector
            v-model="form.selectedCategories"
            :type="budgetType"
            multiple
            :show-add="false"
            :show-clear="false"
          />
        </van-cell-group>
      </van-form>
    </div>
    <template #footer>
        <van-button block round type="primary" @click="onSubmit">保存预算</van-button>
    </template>
  </PopupContainer>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { showToast } from 'vant'
import { createBudget, updateBudget } from '@/api/budget'
import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
import PopupContainer from '@/components/PopupContainer.vue'
import ClassifySelector from '@/components/ClassifySelector.vue'

const emit = defineEmits(['success'])

const visible = ref(false)
const isEdit = ref(false)

const form = reactive({
  id: undefined,
  name: '',
  type: BudgetPeriodType.Month,
  category: BudgetCategory.Expense,
  limit: '',
  selectedCategories: []
})

const open = ({
  data, 
  isEditFlag,
  category
}) => {
  if(category === undefined) {
    showToast('缺少必要参数：category')
    return
  }

  isEdit.value = isEditFlag
  if (data) {
    Object.assign(form, {
      id: data.id,
      name: data.name,
      type: data.type,
      category: category,
      limit: data.limit,
      selectedCategories: data.selectedCategories ? [...data.selectedCategories] : []
    })
  } else {
    Object.assign(form, {
      id: undefined,
      name: '',
      type: BudgetPeriodType.Month,
      category: category,
      limit: '',
      selectedCategories: []
    })
  }
  visible.value = true
}

defineExpose({
  open
})

const budgetType = computed(() => {
  return form.category === BudgetCategory.Expense ? 0 : (form.category === BudgetCategory.Income ? 1 : 2)
})

const onSubmit = async () => {
  try {
    const data = {
      ...form,
      limit: parseFloat(form.limit),
      selectedCategories: form.selectedCategories
    }
    
    const res = form.id ? await updateBudget(data) : await createBudget(data)
    if (res.success) {
      showToast('保存成功')
      visible.value = false
      emit('success')
    }
  } catch (err) {
    showToast(err.message || '保存失败')
    console.error('保存预算失败', err)
  }
}

const getCategoryName = (category) => {
  switch(category) {
    case BudgetCategory.Expense:
      return '支出'
    case BudgetCategory.Income:
      return '收入'
    case BudgetCategory.Savings:
      return '存款'
    default:
      return ''
  }
}
</script>

<style scoped>
.add-budget-form {
  padding: 20px 0;
}

.selected-categories {
  display: flex;
  align-items: center;
  padding: 4px 0;
  width: 100%;
  overflow: hidden;
}

.ellipsis-text {
  font-size: 14px;
  color: #323233;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.no-data {
  font-size: 13px;
  color: #969799;
  padding: 8px 16px;
}
</style>