封装调整

Web/src/components/Budget/BudgetEditPopup.vue

@@ -17,7 +17,6 @@
           <van-field name="type" label="统计周期">
             <template #input>
               <van-radio-group v-model="form.type" direction="horizontal">
-                <van-radio :name="BudgetPeriodType.Week">周</van-radio>
                 <van-radio :name="BudgetPeriodType.Month">月</van-radio>
                 <van-radio :name="BudgetPeriodType.Year">年</van-radio>
               </van-radio-group>
@@ -45,29 +44,13 @@
               </div>
             </template>
           </van-field>
-          <div class="classify-buttons">
-            <van-button
-              v-if="filteredCategories.length > 0"
-              :type="isAllSelected ? 'primary' : 'default'"
-              size="small"
-              class="classify-btn all-btn"
-              @click="toggleAll"
-            >
-              {{ isAllSelected ? '取消全选' : '全选' }}
-            </van-button>
-            <van-button
-              v-for="item in filteredCategories"
-              :key="item.id"
-              :type="form.selectedCategories.includes(item.name) ? 'primary' : 'default'"
-              size="small"
-              class="classify-btn"
-              @click="toggleCategory(item.name)"
-            >
-              {{ item.name }}
-            </van-button>
-            <div v-if="filteredCategories.length === 0" class="no-data">暂无分类</div>
-          </div>
-          
+          <ClassifySelector
+            v-model="form.selectedCategories"
+            :type="budgetType"
+            multiple
+            :show-add="false"
+            :show-clear="false"
+          />
         </van-cell-group>
       </van-form>
     </div>
@@ -78,19 +61,18 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { showToast } from 'vant'
-import { getCategoryList } from '@/api/transactionCategory'
 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 categories = ref([])
 const form = reactive({
   id: undefined,
   name: '',
@@ -137,44 +119,10 @@ defineExpose({
   open
 })
 
-const filteredCategories = computed(() => {
-  const targetType = form.category === BudgetCategory.Expense ? 0 : (form.category === BudgetCategory.Income ? 1 : 2)
-  return categories.value.filter(c => c.type === targetType)
+const budgetType = computed(() => {
+  return form.category === BudgetCategory.Expense ? 0 : (form.category === BudgetCategory.Income ? 1 : 2)
 })
 
-const isAllSelected = computed(() => {
-  return filteredCategories.value.length > 0 && 
-         filteredCategories.value.every(c => form.selectedCategories.includes(c.name))
-})
-
-const toggleCategory = (name) => {
-  const index = form.selectedCategories.indexOf(name)
-  if (index > -1) {
-    form.selectedCategories.splice(index, 1)
-  } else {
-    form.selectedCategories.push(name)
-  }
-}
-
-const toggleAll = () => {
-  if (isAllSelected.value) {
-    form.selectedCategories = []
-  } else {
-    form.selectedCategories = filteredCategories.value.map(c => c.name)
-  }
-}
-
-const fetchCategories = async () => {
-  try {
-    const res = await getCategoryList()
-    if (res.success) {
-      categories.value = res.data || []
-    }
-  } catch (err) {
-    console.error('获取分类列表失败', err)
-  }
-}
-
 const onSubmit = async () => {
   try {
     const data = {
@@ -207,10 +155,6 @@ const getCategoryName = (category) => {
       return ''
   }
 }
-
-onMounted(() => {
-  fetchCategories()
-})
 </script>
 
 <style scoped>
@@ -235,29 +179,9 @@ onMounted(() => {
   width: 100%;
 }
 
-.classify-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 16px;
-  overflow-y: auto;
-}
-
-.classify-btn {
-  flex: 0 0 auto;
-  min-width: 60px;
-  border-radius: 16px;
-  padding: 0 12px;
-}
-
-.all-btn {
-  font-weight: bold;
-  border-style: dashed;
-}
-
 .no-data {
   font-size: 13px;
   color: #969799;
-  padding: 8px 0;
+  padding: 8px 16px;
 }
 </style>