提交

src/views/agent/customerList/index.vue

@@ -4,16 +4,9 @@
         <CustomerListSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
             @reset="handleReset"></CustomerListSearch>
         <!-- 表格 -->
-        <CustomerListTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" :tree-props="treeProps"
-            :default-sort="{ prop: 'createTime', order: 'descending' }">
-            <template #accountName="{ row }">
-                <div style="display: flex; align-items: center;">
-                    {{ row.accountName }}
-                    <el-icon style="margin-left: 5px; cursor: pointer;" v-if="row.role_id === 5" @click="handleGetSubList(row)">
-                        <Plus />
-                    </el-icon>
-                </div>
-            </template>
+        <CustomerListTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="userId"
+            :tree-props="treeProps" :default-sort="{ prop: 'createTime', order: 'descending' }"
+            @expand-change="handleGetSubList">
             <template #marginRatio="{ row }">
                 <el-button v-if="row.role_id === 5" type="primary" size="small" @click="handleMarginRatio(row)">
                     修改
@@ -26,7 +19,7 @@
                 </el-button>
             </template>
             <template #action="{ row }">
-                <el-button link type="primary" size="small" @click="handleDetail(row)">
+                <el-button link type="primary" size="small" @click="handleDetail(row)" v-if="row.userId">
                     查看详情
                 </el-button>
             </template>
@@ -57,7 +50,6 @@
 </template>
 
 <script setup lang="ts">
-import { Plus } from '@element-plus/icons-vue'
 // 组件
 import CustomerListSearch from '@/components/common/Search.vue'
 import CustomerListTable from '@/components/common/Table.vue'
@@ -96,7 +88,7 @@ const tableColumnsOptions = ref(tableColumns)
  * @description: 定义表格数据
  */
 const tableTree = ref([])
-const treeProps = { children: 'children' }
+const treeProps = { children: 'children', hasChildren: 'hasChildren' }
 
 /**
  * @description: 定义分页数据
@@ -205,6 +197,9 @@ const getCustomerList = async (id: string) => {
         commissionRatio: item.wallet_capital.fee_handling_percent,
         createTime: item.created_at,
         role_id: item.role_id,
+        children: item.role_id === 5 ? [{
+            hasChildren: true,
+        }] : undefined,
     }))
 
     //分页数据
@@ -280,7 +275,37 @@ const handleCommissionRatio = (row: any) => {
 
 // 获取子列表
 const handleGetSubList = async (row: any) => {
-    console.log('获取子列表', row);
+    const params = {
+        user_name: '',
+        user_id: row.userId,
+        page: currentPage.value,
+        page_size: pageSize.value,
+        reg_start_time: '',
+        reg_end_time: '',
+        status: '',
+    }
+    const data: any = await getCustomerListApi(params)
+    if (data.data.length === 0) {
+        ElMessage({
+            message: '暂无数据',
+            type: 'error',
+        })
+        row.children = []
+        return
+    }
+    row.children = data.data.map((item: any) => ({
+        accountName: item.username,
+        userId: item.id,
+        status: item.status === 1 ? '正常' : '禁用',
+        role: roleMap[item.role_id] || '未知',
+        accountQty: item.account[0].account_count,
+        commissionRatio: item.wallet_capital.fee_handling_percent,
+        createTime: item.created_at,
+        role_id: item.role_id,
+        children: item.role_id === 5 ? [{
+            hasChildren: true,
+        }] : undefined,
+    }))
 }
 
 /**
@@ -331,13 +356,13 @@ const handleSubmit = async () => {
         }
     }
     if (dialogType.value === 'editCommissionRatio') {
-            await commissionRatioFormRef.value.validate()
-            try {
-                await editCustomerApi({ ...params, fee_handling_percent: commissionRatioForm.value.commissionRatio })
-                dialogVisible.value = false
-            } catch (err) {
-                console.log('提交失败：', err)
-            }
+        await commissionRatioFormRef.value.validate()
+        try {
+            await editCustomerApi({ ...params, fee_handling_percent: commissionRatioForm.value.commissionRatio })
+            dialogVisible.value = false
+        } catch (err) {
+            console.log('提交失败：', err)
+        }
     }
 }
 // 取消
@@ -353,4 +378,10 @@ const handleClose = () => {
  */
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+:deep(.placeholder-row) {
+    text-align: center;
+    color: #909399;
+    /* 灰色，和Element空状态颜色一致 */
+}
+</style>

src/views/agent/customerList/options.ts

@@ -17,7 +17,7 @@ export const search = [
 
 export const tableColumns = [
     // 账号名称
-    { label: '账号名称', slotName: 'accountName'},
+    { label: '账号名称', prop: 'accountName'},
     // 账号id
     { prop: 'userId', label: '账号id' },
     // 状态