fix: 代理

src/views/settings/payment-merchant-pools/components/PoolManagement.vue

@@ -202,48 +202,12 @@
         </ElButton>
       </template>
     </ElDrawer>
-
-    <ElDrawer v-model="detailDrawerVisible" title="商户池详情" size="640px">
-      <ElDescriptions v-if="detail" :column="1" border>
-        <ElDescriptionsItem label="商户池名称">{{ detail.name }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="支付方式">{{
-          getPaymentMethodLabel(detail.payment_method)
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="成员数量">{{ detail.member_ids.length }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="轮询策略">{{
-          getPaymentPoolStrategyLabel(detail.strategy)
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem
-          v-if="detail.strategy === 'amount' || detail.strategy === 'count'"
-          label="统计周期"
-        >
-          {{ getPaymentStatisticCycleLabel(detail.statistic_cycle) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem v-if="detail.strategy === 'amount'" label="金额阈值">
-          {{ (Number(detail.threshold_amount) / 100).toFixed(2) }} 元
-        </ElDescriptionsItem>
-        <ElDescriptionsItem v-if="detail.strategy === 'count'" label="笔数阈值">
-          {{ detail.threshold_count }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem v-if="detail.strategy === 'time'" label="时间周期">
-          {{ detail.time_period_value }}
-          {{ getPaymentTimePeriodUnitLabel(detail.time_period_unit) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="启停状态">
-          {{ detail.enabled ? '启用' : '停用' }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="路由世代">v{{ detail.routing_epoch }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="备注">{{ detail.remark || '-' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="更新时间">{{
-          formatDateTime(detail.updated_at)
-        }}</ElDescriptionsItem>
-      </ElDescriptions>
-    </ElDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { computed, h, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+  import { computed, h, onMounted, onUnmounted, reactive, ref } from 'vue'
+  import { useRouter } from 'vue-router'
   import { Delete, Plus, Rank } from '@element-plus/icons-vue'
   import { VueDraggable } from 'vue-draggable-plus'
   import { ElButton, ElMessage, ElMessageBox, ElTag } from 'element-plus'
@@ -269,14 +233,25 @@
     type PaymentPoolStrategy
   } from '@/types/api/paymentMerchantPools'
   import { formatDateTime } from '@/utils/business/format'
+  import { RoutesAlias } from '@/router/routesAlias'
 
   defineOptions({ name: 'PaymentMerchantPoolManagement' })
 
   type FilterVo = string | number | undefined | null | unknown[]
 
   const { isPlatformAccount } = usePermission()
+  const router = useRouter()
   const canManage = computed(() => isPlatformAccount.value)
 
+  const handleNameClick = (row: PaymentMerchantPool) => {
+    if (!canManage.value) {
+      ElMessage.warning('您没有查看商户池详情的权限')
+      return
+    }
+
+    router.push({ path: `${RoutesAlias.PaymentMerchantPoolDetail}/${row.id}` })
+  }
+
   const searchForm = reactive<Record<string, FilterVo>>({
     page: 1,
     page_size: 10,
@@ -301,7 +276,24 @@
   ]
 
   const columnOptions = [
-    { label: '商户池名称', prop: 'name', minWidth: 180 },
+    {
+      label: '商户池名称',
+      prop: 'name',
+      minWidth: 180,
+      showOverflowTooltip: true,
+      formatter: (row: PaymentMerchantPool) =>
+        h(
+          'span',
+          {
+            style: 'color: var(--el-color-primary); cursor: pointer; text-decoration: underline;',
+            onClick: (event: MouseEvent) => {
+              event.stopPropagation()
+              handleNameClick(row)
+            }
+          },
+          row.name
+        )
+    },
     {
       label: '支付方式',
       prop: 'payment_method',
@@ -445,7 +437,7 @@
   )
 
   const getMemberName = (id: number) =>
-    availableMerchants.value.find((m) => m.id === id)?.name || `#${id}`
+    availableMerchants.value.find((m) => m.id === id)?.name || '未知商户'
 
   // 表单
   type FormMode = 'create' | 'edit'
@@ -475,16 +467,13 @@
 
   const form = reactive(initialFormState())
 
-  const orderedMemberIds = ref<number[]>([])
-  watch(
-    () => form.member_ids,
-    (val) => {
-      orderedMemberIds.value = [...val]
-    },
-    { immediate: true, deep: true }
-  )
-  watch(orderedMemberIds, (val) => {
-    form.member_ids = [...val]
+  // 成员顺序以 form.member_ids 为单一数据源：VueDraggable 的 v-model 直接写回该数组，
+  // 避免双向 watch 互相赋值导致的递归更新。
+  const orderedMemberIds = computed<number[]>({
+    get: () => form.member_ids,
+    set: (val) => {
+      form.member_ids = [...val]
+    }
   })
 
   const formRules = reactive<FormRules>({
@@ -611,7 +600,6 @@
   const handlePaymentMethodChange = (value: PaymentMerchantMethod) => {
     form.payment_method = value
     form.member_ids = []
-    orderedMemberIds.value = []
     availableMerchants.value = []
     memberError.value = ''
     loadAvailableMerchants(value)
@@ -688,7 +676,6 @@
   const showCreateDrawer = async () => {
     if (!canManage.value) return
     Object.assign(form, initialFormState())
-    orderedMemberIds.value = []
     formDrawerVisible.value = true
     formMode.value = 'create'
     await loadAvailableMerchants(form.payment_method)
@@ -712,14 +699,12 @@
       time_period_started_at: pool.time_period_started_at || '',
       remark: pool.remark || ''
     })
-    orderedMemberIds.value = [...pool.member_ids]
     formDrawerVisible.value = true
     formMode.value = 'edit'
   }
 
   const resetForm = () => {
     Object.assign(form, initialFormState())
-    orderedMemberIds.value = []
     memberError.value = ''
     pendingMemberId.value = undefined
     formRef.value?.clearValidate()
@@ -753,23 +738,8 @@
     }
   }
 
-  // 详情
-  const detailDrawerVisible = ref(false)
-  const detail = ref<PaymentMerchantPool | null>(null)
   const tableRef = ref()
 
-  const showDetail = async (id: number) => {
-    try {
-      const res = await PaymentMerchantPoolsService.getPaymentMerchantPoolById(id)
-      if (res.code === 0) {
-        detail.value = res.data
-        detailDrawerVisible.value = true
-      }
-    } catch (error) {
-      console.error('加载商户池详情失败:', error)
-    }
-  }
-
   const toggleEnabled = async (pool: PaymentMerchantPool) => {
     if (!canManage.value) return
     const target = !pool.enabled
@@ -795,11 +765,6 @@
   }
 
   const getActions = (row: PaymentMerchantPool) => [
-    {
-      label: '详情',
-      type: 'primary' as const,
-      handler: () => showDetail(row.id)
-    },
     {
       label: '编辑',
       type: 'primary' as const,
@@ -822,9 +787,7 @@
 
   onUnmounted(() => {
     pools.value = []
-    detail.value = null
     availableMerchants.value = []
-    orderedMemberIds.value = []
   })
 </script>