封装调整

Web/src/views/PeriodicRecord.vue

@@ -192,36 +192,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 classifyColumns"
-                :key="item.id"
-                :type="form.classify === item.text ? 'primary' : 'default'"
-                size="small"
-                class="classify-btn"
-                @click="selectClassify(item.text)"
-              >
-                {{ item.text }}
-              </van-button>
-              <van-button
-                v-if="form.classify"
-                type="warning"
-                size="small"
-                class="classify-btn"
-                @click="clearClassify"
-              >
-                清空
-              </van-button>
-            </div>
+            <!-- 分类选择组件 -->
+            <ClassifySelector
+              v-model="form.classify"
+              :type="form.type"
+            />
         </van-cell-group>
       </van-form>
       <template #footer>
@@ -257,12 +232,6 @@
         @cancel="showMonthDaysPicker = false"
       />
     </van-popup>
-
-    <!-- 新增分类对话框 -->
-    <AddClassifyDialog
-      ref="addClassifyDialogRef"
-      @confirm="handleAddClassify"
-    />
   </div>
 </template>
 
@@ -275,13 +244,11 @@ import {
   deletePeriodic as deletePeriodicApi,
   togglePeriodicEnabled
 } from '@/api/transactionPeriodic'
-import { getCategoryList, createCategory } from '@/api/transactionCategory'
 import PopupContainer from '@/components/PopupContainer.vue'
-import AddClassifyDialog from '@/components/AddClassifyDialog.vue'
+import ClassifySelector from '@/components/ClassifySelector.vue'
 
 const router = useRouter()
 const navTitle = ref('周期账单')
-const addClassifyDialogRef = ref()
 
 const periodicList = ref([])
 const loading = ref(false)
@@ -299,9 +266,6 @@ const showPeriodicTypePicker = ref(false)
 const showWeekdaysPicker = ref(false)
 const showMonthDaysPicker = ref(false)
 
-// 分类列表
-const classifyColumns = ref([])
-
 // 周期类型
 const periodicTypeColumns = [
   { text: '每天', value: 0 },
@@ -459,24 +423,6 @@ const openAddDialog = () => {
   isEdit.value = false
   resetForm()
   dialogVisible.value = true
-  // 加载分类列表
-  loadClassifyList(form.type)
-}
-
-// 加载分类列表
-const loadClassifyList = async (type = null) => {
-  try {
-    const response = await getCategoryList(type)
-    if (response.success) {
-      classifyColumns.value = (response.data || []).map(item => ({
-        text: item.name,
-        value: item.name,
-        id: item.id
-      }))
-    }
-  } catch (error) {
-    console.error('加载分类列表出错:', error)
-  }
 }
 
 // 编辑
@@ -490,9 +436,6 @@ const editPeriodic = (item) => {
   form.periodicType = item.periodicType
   form.periodicTypeText = periodicTypeColumns.find(t => t.value === item.periodicType)?.text || ''
   
-  // 加载对应类型的分类列表
-  loadClassifyList(item.type)
-  
   // 解析周期配置
   if (item.periodicConfig) {
     switch (item.periodicType) {
@@ -607,40 +550,6 @@ const onMonthDaysConfirm = ({ selectedValues, selectedOptions }) => {
   showMonthDaysPicker.value = false
 }
 
-// 选择分类
-const selectClassify = (classify) => {
-  form.classify = classify
-}
-
-// 清空分类
-const clearClassify = () => {
-  form.classify = ''
-  showToast('已清空分类')
-}
-
-// 新增分类
-const handleAddClassify = async (categoryName) => {
-  try {
-    // 调用API创建分类
-    const response = await createCategory({
-      name: categoryName,
-      type: form.type
-    })
-    
-    if (response.success) {
-      showToast('分类创建成功')
-      // 重新加载分类列表
-      await loadClassifyList(form.type)
-      form.classify = categoryName
-    } else {
-      showToast(response.message || '创建分类失败')
-    }
-  } catch (error) {
-    console.error('创建分类出错:', error)
-    showToast('创建分类失败')
-  }
-}
-
 </script>
 
 <style scoped>
@@ -679,17 +588,4 @@ const handleAddClassify = async (categoryName) => {
   height: 100%;
 }
 
-.classify-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 16px;
-}
-
-.classify-btn {
-  flex: 0 0 auto;
-  min-width: 70px;
-  border-radius: 16px;
-}
-
 </style>