封装调整

Web/src/components/ReasonGroupList.vue

@@ -129,36 +129,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 classifyOptions"
-              :key="item.id"
-              :type="batchForm.classify === item.text ? 'primary' : 'default'"
-              size="small"
-              class="classify-btn"
-              @click="selectClassify(item.text)"
-            >
-              {{ item.text }}
-            </van-button>
-            <van-button
-              v-if="batchForm.classify"
-              type="warning"
-              size="small"
-              class="classify-btn"
-              @click="clearClassify"
-            >
-              清空
-            </van-button>
-          </div>
+          <!-- 分类选择组件 -->
+          <ClassifySelector
+            v-model="batchForm.classify"
+            :type="batchForm.type"
+          />
         </van-cell-group>
       </van-form>
       <template #footer>
@@ -172,12 +147,6 @@
         </van-button>
       </template>
     </PopupContainer>
-
-    <!-- 新增分类对话框 -->
-    <AddClassifyDialog
-      ref="addClassifyDialogRef"
-      @confirm="handleAddClassify"
-    />
   </div>
 </template>
 
@@ -191,8 +160,7 @@ import {
   showConfirmDialog
 } from 'vant'
 import { getReasonGroups, batchUpdateByReason, getTransactionList } from '@/api/transactionRecord'
-import { getCategoryList, createCategory } from '@/api/transactionCategory'
-import AddClassifyDialog from './AddClassifyDialog.vue'
+import ClassifySelector from './ClassifySelector.vue'
 import TransactionList from './TransactionList.vue'
 import TransactionDetail from './TransactionDetail.vue'
 import PopupContainer from './PopupContainer.vue'
@@ -219,8 +187,6 @@ const selectedReasons = ref(new Set())
 const pageIndex = ref(1)
 const finished = ref(false)
 const total = ref(0)
-const categories = ref([])
-
 // 弹窗状态
 const showTransactionList = ref(false)
 const showTransactionDetail = ref(false)
@@ -239,27 +205,15 @@ const transactionPageSize = ref(20)
 const showBatchDialog = ref(false)
 const batchFormRef = ref(null)
 const batchGroup = ref(null)
-const addClassifyDialogRef = ref()
 const batchForm = ref({
   type: null,
   typeName: '',
   classify: ''
 })
 
-// 根据选中的类型过滤分类选项
-const classifyOptions = computed(() => {
-  if (batchForm.value.type === null) return []
-  return categories.value
-    .filter(c => c.type === batchForm.value.type)
-    .map(c => ({ text: c.name, value: c.name, id: c.id }))
-})
-
 // 监听交易类型变化，重新加载分类
 watch(() => batchForm.value.type, (newVal) => {
   batchForm.value.classify = ''
-  if (newVal !== null) {
-    loadCategories(newVal)
-  }
 })
 
 // 获取类型名称
@@ -361,62 +315,9 @@ const handleBatchClassify = (group) => {
     typeName: getTypeName(group.sampleType),
     classify: group.sampleClassify || ''
   }
-  // 加载对应类型的分类列表
-  loadCategories(group.sampleType)
   showBatchDialog.value = true
 }
 
-// 获取所有分类
-const loadCategories = async (type = null) => {
-  try {
-    const res = await getCategoryList(type)
-    if (res.success) {
-      categories.value = res.data || []
-    }
-  } catch (error) {
-    console.error('获取分类列表失败:', error)
-  }
-}
-
-// 选择分类
-const selectClassify = (classify) => {
-  batchForm.value.classify = classify
-}
-
-// 新增分类
-const handleAddClassify = async (categoryName) => {
-  if (batchForm.value.type === null) {
-    showToast('请先选择交易类型')
-    return
-  }
-  
-  try {
-    // 调用API创建分类
-    const response = await createCategory({
-      name: categoryName,
-      type: batchForm.value.type
-    })
-    
-    if (response.success) {
-      showToast('分类创建成功')
-      // 重新加载分类列表
-      await loadCategories(batchForm.value.type)
-      batchForm.value.classify = categoryName
-    } else {
-      showToast(response.message || '创建分类失败')
-    }
-  } catch (error) {
-    console.error('创建分类出错:', error)
-    showToast('创建分类失败')
-  }
-}
-
-// 清空分类
-const clearClassify = () => {
-  batchForm.value.classify = ''
-  showToast('已清空分类')
-}
-
 // 确认批量更新
 const handleConfirmBatchUpdate = async () => {
   try {
@@ -744,20 +645,5 @@ defineExpose({
   padding: 16px 0;
 }
 
-.classify-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 16px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.classify-btn {
-  flex: 0 0 auto;
-  min-width: 70px;
-  border-radius: 16px;
-}
-
 /* 交易列表弹窗 - 自定义样式 */
 </style>