封装调整

Web/src/components/Bill/BillForm.vue

@@ -52,27 +52,11 @@
           </template>
         </van-field>
         
-        <!-- 分类按钮网格 -->
-        <div class="classify-buttons">
-          <van-button
-            type="success"
-            size="small"
-            class="classify-btn"
-            @click="addClassifyDialogRef.open()"
-          >
-            + 新增
-          </van-button>
-          <van-button
-            v-for="item in categoryList"
-            :key="item.id"
-            :type="categoryName === item.name ? 'primary' : 'default'"
-            size="small"
-            class="classify-btn"
-            @click="selectClassify(item)"
-          >
-            {{ item.name }}
-          </van-button>
-        </div>
+        <!-- 分类选择组件 -->
+        <ClassifySelector
+          v-model="categoryName"
+          :type="form.type"
+        />
       </van-cell-group>
 
       <div class="actions">
@@ -83,12 +67,6 @@
       </div>
     </van-form>
 
-    <!-- 新增分类对话框 -->
-    <AddClassifyDialog
-      ref="addClassifyDialogRef"
-      @confirm="handleAddClassify"
-    />
-
     <!-- 日期选择弹窗 -->
     <van-popup v-model:show="showDatePicker" position="bottom" round teleport="body">
       <van-date-picker
@@ -115,8 +93,7 @@
 import { ref, onMounted, watch } from 'vue'
 import { showToast } from 'vant'
 import dayjs from 'dayjs'
-import AddClassifyDialog from '@/components/AddClassifyDialog.vue'
-import { getCategoryList, createCategory } from '@/api/transactionCategory'
+import ClassifySelector from '@/components/ClassifySelector.vue'
 
 const props = defineProps({
   initialData: {
@@ -135,13 +112,10 @@ const props = defineProps({
 
 const emit = defineEmits(['submit'])
 
-const addClassifyDialogRef = ref()
-
 // 表单数据
 const form = ref({
   type: 0, // 0: 支出, 1: 收入, 2: 不计
   amount: '',
-  categoryId: null,
   date: dayjs().format('YYYY-MM-DD'),
   time: dayjs().format('HH:mm'),
   note: ''
@@ -153,10 +127,7 @@ const categoryName = ref('')
 const showDatePicker = ref(false)
 const showTimePicker = ref(false)
 
-// 选择器数据
-const categoryList = ref([])
-
-// 日期时间临时变量 (Vant DatePicker 需要数组或特定格式)
+// 日期时间临时变量 (Vant DatePicker 需要数组 or 特定格式)
 const currentDate = ref(dayjs().format('YYYY-MM-DD').split('-'))
 const currentTime = ref(dayjs().format('HH:mm').split(':'))
 
@@ -177,28 +148,10 @@ const initForm = async () => {
     if (reason !== undefined) form.value.note = reason
     if (type !== undefined) form.value.type = type
     
-    // 加载分类列表
-    await loadClassifyList(form.value.type)
-    
-    // 如果有传入分类名称，尝试匹配
+    // 如果有传入分类名称，尝试设置
     if (classify) {
-      const found = categoryList.value.find(c => c.name === classify)
-      if (found) {
-        selectClassify(found)
-      } else {
-        // 如果没找到对应分类，但有分类名称，可能需要特殊处理或者就显示名称但不关联ID？
-        // 这里暂时只显示名称，ID为空，或者需要自动创建？
-        // 按照原有逻辑，后端需要分类名称，所以这里只要设置 categoryName 即可
-        // 但是 ManualBillAdd 原逻辑是需要 categoryId 的。
-        // 不过 createTransaction 接口传的是 classify (name)。
-        // 让我们看 ManualBillAdd 的 handleSave:
-        // classify: categoryName.value
-        // 所以只要 categoryName 有值就行。
-        categoryName.value = classify
-      }
+      categoryName.value = classify
     }
-  } else {
-    await loadClassifyList(form.value.type)
   }
 }
 
@@ -213,50 +166,6 @@ watch(() => props.initialData, () => {
 
 const handleTypeChange = (newType) => {
   categoryName.value = ''
-  form.value.categoryId = null
-  loadClassifyList(newType)
-}
-
-const loadClassifyList = async (type = null) => {
-  try {
-    const response = await getCategoryList(type)
-    if (response.success) {
-      categoryList.value = response.data || []
-    }
-  } catch (error) {
-    console.error('加载分类列表出错:', error)
-  }
-}
-
-const selectClassify = (item) => {
-  categoryName.value = item.name
-  form.value.categoryId = item.id
-}
-
-const handleAddClassify = async (name) => {
-  try {
-    // 调用API创建分类
-    const response = await createCategory({
-      name: name,
-      type: form.value.type
-    })
-    
-    if (response.success) {
-      showToast('分类创建成功')
-      const newId = response.data
-      // 重新加载分类列表
-      await loadClassifyList(form.value.type)
-      
-      // 选中新创建的分类
-      categoryName.value = name
-      form.value.categoryId = newId
-    } else {
-      showToast(response.message || '创建分类失败')
-    }
-  } catch (error) {
-    console.error('创建分类出错:', error)
-    showToast('创建分类失败')
-  }
 }
 
 const onConfirmDate = ({ selectedValues }) => {