封装调整

Web/src/components/TransactionDetail.vue

@@ -61,36 +61,12 @@
             </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="editForm.classify === item.text ? 'primary' : 'default'"
-              size="small"
-              class="classify-btn"
-              @click="selectClassify(item.text)"
-            >
-              {{ item.text }}
-            </van-button>
-            <van-button
-              v-if="editForm.classify"
-              type="warning"
-              size="small"
-              class="classify-btn"
-              @click="clearClassify"
-            >
-              清空
-            </van-button>
-          </div>
+          <!-- 分类选择组件 -->
+          <ClassifySelector
+            v-model="editForm.classify"
+            :type="editForm.type"
+            @change="handleClassifyChange"
+          />
         </van-cell-group>
     </van-form>
 
@@ -107,12 +83,6 @@
     </template>
   </PopupContainer>
 
-  <!-- 新增分类对话框 -->
-  <AddClassifyDialog
-    ref="addClassifyDialogRef"
-    @confirm="handleAddClassify"
-  />
-
   <!-- 抵账候选列表弹窗 -->
   <PopupContainer
     v-model="showOffsetPopup"
@@ -138,9 +108,8 @@
 import { ref, reactive, watch, defineProps, defineEmits } from 'vue'
 import { showToast, showConfirmDialog } from 'vant'
 import PopupContainer from '@/components/PopupContainer.vue'
-import AddClassifyDialog from '@/components/AddClassifyDialog.vue'
+import ClassifySelector from '@/components/ClassifySelector.vue'
 import { updateTransaction, getCandidatesForOffset, offsetTransactions } from '@/api/transactionRecord'
-import { getCategoryList, createCategory } from '@/api/transactionCategory'
 
 const props = defineProps({
   show: {
@@ -157,10 +126,6 @@ const emit = defineEmits(['update:show', 'save'])
 
 const visible = ref(false)
 const submitting = ref(false)
-const addClassifyDialogRef = ref()
-
-// 分类相关
-const classifyColumns = ref([])
 
 // 编辑表单
 const editForm = reactive({
@@ -186,9 +151,6 @@ watch(() => props.transaction, (newVal) => {
     editForm.balance = String(newVal.balance)
     editForm.type = newVal.type
     editForm.classify = newVal.classify || ''
-    
-    // 根据交易类型加载分类
-    loadClassifyList(newVal.type)
   }
 })
 
@@ -200,26 +162,8 @@ watch(visible, (newVal) => {
 watch(() => editForm.type, (newVal) => {
   // 清空已选的分类
   editForm.classify = ''
-  // 重新加载对应类型的分类列表
-  loadClassifyList(newVal)
 })
 
-// 加载分类列表
-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)
-  }
-}
-
 // 提交编辑
 const onSubmit = async () => {
   try {
@@ -239,8 +183,6 @@ const onSubmit = async () => {
       showToast('保存成功')
       visible.value = false
       emit('save', data)
-      // 重新加载分类列表
-      await loadClassifyList(editForm.type)
     } else {
       showToast(response.message || '保存失败')
     }
@@ -252,47 +194,15 @@ const onSubmit = async () => {
   }
 }
 
-// 选择分类
-const selectClassify = (classify) => {
-  editForm.classify = classify
-
-  if(editForm.id > 0 && editForm.type >= 0) {
+// 分类选择变化
+const handleClassifyChange = () => {
+  if (editForm.id > 0 && editForm.type >= 0) {
     // 直接保存
     onSubmit()
   }
-
-}
-
-// 新增分类
-const handleAddClassify = async (categoryName) => {
-  try {
-    // 调用API创建分类
-    const response = await createCategory({
-      name: categoryName,
-      type: editForm.type
-    })
-    
-    if (response.success) {
-      showToast('分类创建成功')
-      // 重新加载分类列表
-      await loadClassifyList(editForm.type)
-      editForm.classify = categoryName
-    } else {
-      showToast(response.message || '创建分类失败')
-    }
-  } catch (error) {
-    console.error('创建分类出错:', error)
-    showToast('创建分类失败')
-  }
 }
 
 // 清空分类
-const clearClassify = () => {
-  editForm.classify = ''
-  showToast('已清空分类')
-}
-
-// 格式化日期
 const formatDate = (dateString) => {
   if (!dateString) return ''
   const date = new Date(dateString)
@@ -352,16 +262,4 @@ const handleCandidateSelect = (candidate) => {
 </script>
 
 <style scoped>
-.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>